/*** FONTS: OSWALD  *********************************************/
@font-face {
    font-family: oswaldo;
    src: url(./../font/oswaldo/Oswald-Regular.ttf);
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: oswaldo;
    src: url(./../font/oswaldo/Oswald-Medium.ttf);
    font-style: normal;
    font-weight: 500;
}
@font-face {
    font-family: oswaldo;
    src: url(./../font/oswaldo/Oswald-SemiBold.ttf);
    font-style: normal;
    font-weight: 600;
}
@font-face {
    font-family: oswaldo;
    src: url(./../font/oswaldo/Oswald-Bold.ttf);
    font-style: normal;
    font-weight: 700;
}

/*** Hero Section *************************************************************/
.c-slide {
    height: 100%;
    width: 100%;
}

/*** Slide Content ************************************************************/
.slide-content {
    width: 100%;
    height: 100%;
}

.carousel-control-prev, .carousel-control-next {
    width: 75px;
}

@media(width >= 320px){

    .carousel-control-prev, .carousel-control-next {
        width: 45px;
    }

    .slide {
        max-height: 550px;
        height: calc(100svh - 75px);

        .carousel-inner {
            height: 100%;
        }
    }

    .slide-content {
        width: 100%;
        height: 95%;
        margin: 0 auto;
        overflow: hidden;

        .s-content-inner {
            /* border: 1px solid red; */
            height: 100%;
            width: 100%;

            padding: 2rem 2rem 0 2rem;
            margin: 0;

            display: grid;
            grid-template-columns: 50% 65%;
            grid-template-rows: 15% 85%;
        }                             
    }

    .c-slide .s-content-inner {
        .heading {
            & h2 {
                font-family: oswaldo;
                font-size: 1.8rem;
                font-weight: 700;
            }

            & h3 {
                font-size: 1.4rem;
                font-weight: 800;
            }
        }

        .text-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            padding: 1.6rem 0 0 0;

            .txt-cont {
                & h4 {
                    font-size: 1.1rem;
                    font-weight: 800;
                }
    
                & p {
                    font-size: .9rem;
                    font-weight: 600;
                }
    
                & a {
                    width: 125px;
    
                    padding: 5px 10px;
                    border-radius: 5px;
    
                    font-size: 1.1rem;
                    font-weight: 600;
                    text-decoration: none;
                }
            }

            & ul {
                padding: 0;
                list-style: none;

                display: flex;
                justify-content:space-between;
            }

            & ul li {
                border-radius: 5px;

                padding: 5px;
                margin: 0;
                
                width: 30%;

                display: flex;
                gap: 1rem;
                align-items: center;
                justify-content: center;

                font-size: 1rem;
                font-weight: 600;
            }

            & ul li span {
                display: none;
            }
        }
        
        .img-cont {
            grid-row: 2/3;
            grid-column: 2/3;

            padding: 2.5rem 0 1rem 1rem;
            
            & img {
                width: 100%;
                height: 100%;

                border-radius: 10px;
            }
        } 
    }

    .c-slide:nth-child(1) {
        background-color: rgb(110, 197, 139);

        .heading {
            grid-row: 1/2;
            grid-column: 1/3;

            & h2 {
                color: darkgreen;
            }

            & h3 {
                color: #1c0333;
            }
        }

        .text-content {
            grid-row: 2/3;
            grid-column: 1/2;

            color: white;

            & a {
                color: white;
                background-color: #1c0333;
            }

            & ul {

                & li {
                    background-color: rgb(255, 255, 255);
                    color: #1c0333;
                }
            }
        }
    }

    .c-slide:nth-child(2) {

        background-color: royalblue;

        .heading {
            grid-row: 1/2;
            grid-column: 1/3;

            & h2 {
                color: rgb(189, 223, 235);
            }

            & h3 {
                color: rgb(255, 135, 119);
            }
        }

        .text-content {
            grid-row: 2/3;
            grid-column: 1/2;

            color: #fff;

            & a {
                color: black;
                background-color: rgb(255, 135, 119);
            }

            & ul {
                & li {
                    background-color: white;
                    color: #1c0333;
                }
            }
        }
    }

    .c-slide:nth-child(3) {

        background-color: #ccc;

        .heading {
            grid-row: 1/2;
            grid-column: 1/3;

            & h2 {
                color: rgb(255, 255, 255);
            }

            & h3 {
                color: dodgerblue;
            }
        }

        .text-content {
            grid-row: 2/3;
            grid-column: 1/2;

            color: #1c0333;

            & a {
                color: white;
                background-color: dodgerblue;
            }

            & ul {
                & li {
                    background-color: white;
                    color: #1c0333;
                }
            }
        }
    }
}

@media(width >= 425px){

    .carousel-control-prev, .carousel-control-next {
        width: 45px;
    }

    .slide {
        min-height: 450px;
        height: calc(100dvh - 75px);
        max-height: 550px;

        .carousel-inner {
            height: 100%;
        }
    }

    .slide-content {
        width: 100%;
        height: 95%;
        margin: 0 auto;
        overflow: hidden;

        .s-content-inner {
            /* border: 1px solid red; */
            height: 100%;
            width: 100%;

            padding: 2rem 2rem 0 2rem;
            margin: 0;

            display: grid;
            grid-template-columns: 55% 65%;
            grid-template-rows: 15% 85%;
        }                             
    }

    .c-slide .s-content-inner {
        .heading {
            & h2 {
                font-family: oswaldo;
                font-size: clamp(2rem, 0.761rem + 4.665vw, 3rem);
                font-weight: 700;
            }

            & h3 {
                font-size: clamp(1.6rem, 0.857rem + 2.799vw, 2.2rem);
                font-weight: 800;
            }
        }

        .text-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            padding: clamp(2rem, 0.761rem + 4.665vw, 3rem) 0 0 0;

            .txt-cont {
                & h4 {
                    font-size: clamp(1.2rem, 0.952rem + 0.933vw, 1.4rem);
                    font-weight: 800;
                }
    
                & p {
                    font-size: clamp(1rem, 0.876rem + 0.466vw, 1.1rem);
                    font-weight: 600;
                }
    
                & a {
                    width: 125px;
    
                    padding: 5px 10px;
                    border-radius: 5px;
    
                    font-size: 1rem;
                    font-weight: 600;
                    text-decoration: none;
                }
            }

            & ul {
                padding: 0;
                list-style: none;

                display: flex;
                justify-content:space-between;
            }

            & ul li {
                border-radius: 5px;

                padding: 5px;
                margin: 0;
                
                width: 30%;

                display: flex;
                gap: 1rem;
                align-items: center;
                justify-content: center;

                font-size: 1rem;
                font-weight: 600;
            }

            & ul li span {
                display: none;
            }
        }
        
        .img-cont {
            grid-row: 2/3;
            grid-column: 2/3;

            padding: 2.5rem 0 1rem 1rem;
            
            & img {
                width: 100%;
                height: 100%;

                border-radius: 10px;
            }
        } 
    }

    .c-slide:nth-child(1) {
        background-color: rgb(110, 197, 139);

        .heading {
            grid-row: 1/2;
            grid-column: 1/3;

            & h2 {
                color: darkgreen;
            }

            & h3 {
                color: #1c0333;
            }
        }

        .text-content {
            grid-row: 2/3;
            grid-column: 1/2;

            color: white;

            & a {
                color: white;
                background-color: #1c0333;
            }

            & ul {

                & li {
                    background-color: rgb(255, 255, 255);
                    color: #1c0333;
                }
            }
        }
    }

    .c-slide:nth-child(2) {

        background-color: royalblue;

        .heading {
            grid-row: 1/2;
            grid-column: 1/3;

            & h2 {
                color: rgb(189, 223, 235);
            }

            & h3 {
                color: rgb(255, 135, 119);
            }
        }

        .text-content {
            grid-row: 2/3;
            grid-column: 1/2;

            color: #fff;

            & a {
                color: black;
                background-color: rgb(255, 135, 119);
            }

            & ul {
                & li {
                    background-color: white;
                    color: #1c0333;
                }
            }
        }
    }

    .c-slide:nth-child(3) {

        background-color: #ccc;

        .heading {
            grid-row: 1/2;
            grid-column: 1/3;

            & h2 {
                color: rgb(255, 255, 255);
            }

            & h3 {
                color: dodgerblue;
            }
        }

        .text-content {
            grid-row: 2/3;
            grid-column: 1/2;

            color: #1c0333;

            & a {
                color: white;
                background-color: dodgerblue;
            }

            & ul {
                & li {
                    background-color: white;
                    color: #1c0333;
                }
            }
        }
    }
}

@media(width >= 768px){
    .slide {
        min-height: 450px;
        height: calc(100vh - 75px);
        max-height: 500px;

        .carousel-inner {
            height: 100%;
        }
    }

    .slide-content {
        width: 95%;
        height: 95%;
        margin: 0 auto;

        .s-content-inner {
            height: 100%;
            width: 100%;

            padding: 2rem 2rem 0 2rem;
            margin: 0;

            display: grid;
            grid-template-columns: 55% 45%;
            grid-template-rows: 15% 85%;
        }                             
    }

    .c-slide .s-content-inner {
        .heading {
            & h2 {
                font-size: 3rem;
            }

            & h3 {
                font-size: 2.2rem;
            }
        }

        .text-content {
            padding: 3rem 0 0 0;

            .txt-cont {
                & h4 {
                    font-size: 1.4rem;
                }
    
                & p {
                    font-size: 1.1rem;
                }
    
                & a {
                    width: 125px;
    
                    padding: 5px 10px;
                    border-radius: 5px;
    
                    font-size: 1rem;
                    font-weight: 600;
                    text-decoration: none;
                }
            }

            & ul {
                padding: 0;
                list-style: none;

                display: flex;
                justify-content:space-between;
            }

            & ul li {
                border-radius: 5px;

                padding: 0 5px;
                margin: 0;
                
                width: 30%;

                display: flex;
                gap: .5rem;
                align-items: center;
                justify-content: center;

                font-size: 1rem;
                font-weight: 600;
            }

            & ul li span {
                display: inline;
            }
        }

        .img-cont {

            grid-row: 2/3;
            grid-column: 2/3;

            padding: 2.5rem 0 1rem 1rem;
        }
    }
}

@media(width >= 1024px){
    .slide {
        min-height: 450px;
        height: calc(100vh - 75px);
        max-height: 550px;

        .carousel-inner {
            height: 100%;
        }
    }

    .slide-content {
        width: 95%;
        height: 95%;
        margin: 0 auto;
        /* border: 1px solid red; */

        .s-content-inner {
            /* border: 1px solid red; */
            height: 100%;
            width: 100%;

            padding: 2rem 2rem 0 2rem;
            margin: 0;

            display: grid;
            grid-template-columns: 60% 40%;
            grid-template-rows: 15% 85%;
        }                             
    }

    .c-slide .s-content-inner {
        .heading {
            & h2 {
                font-size: clamp(3rem, 1.031rem + 3.077vw, 3.8rem);
            }

            & h3 {
                font-size: clamp(2.2rem, 1.708rem + 0.769vw, 2.4rem);
            }
        }

        .text-content {
            padding: 4rem 0 0 0;

            .txt-cont {
                & h4 {
                    font-size: clamp(1.4rem, 0.662rem + 1.154vw, 1.7rem);
                }
    
                & p {
                    font-size: clamp(1.1rem, 0.362rem + 1.154vw, 1.4rem);
                }
    
                & a {
                    width: 125px;
    
                    padding: 5px 10px;
                    border-radius: 5px;
    
                    font-size: clamp(1.2rem, 0.708rem + 0.769vw, 1.4rem);
                    font-weight: 600;
                    text-decoration: none;
                }
            }

            & ul {
                padding: 0;
                list-style: none;

                display: flex;
                justify-content:space-between;
            }

            & ul li {
                border-radius: 1rem;

                padding: 1rem;
                margin: 0;

                display: flex;
                gap: .5rem;
                align-items: center;
                justify-content: center;

                font-size: 1.2rem;
                font-weight: 600;
            }

            & ul li span {
                display: inline;
            }
        }

        .img-cont {

            grid-row: 2/3;
            grid-column: 2/3;

            padding: 1rem 0 1rem 1rem;
            
            & img {
                border-radius: 1rem;
            }
        }
    }
}

@media(width >= 1440px){

    .carousel-control-prev, .carousel-control-next {
        width: 125px;
    }

    .slide {
        height: 70vh;

        .carousel-inner {
            height: 100%;
            /* border: 1px solid black; */
        }
    }

    .slide-content {
        width: 90%;
        margin: 0 auto; 

        .s-content-inner {
            width: 100%;

            display: grid;
            grid-template-columns: 50% 50%;
            grid-template-rows: 15% 85%;
        }                             
    }

    .c-slide .s-content-inner {
        .heading {
            & h2 {
                font-size: 3.8rem;
            }

            & h3 {
                font-size: 2.4rem;
            }
        }

        .text-content {
            padding: 4rem 1rem 0 0;

            .txt-cont {
                & h4 {
                    font-size: 1.7rem;
                }
    
                & p {
                    font-size: 1.4rem;
                }
    
                & a {
                    width: 125px;
    
                    padding: 5px 10px;
                    border-radius: 5px;
    
                    font-size: 1.4rem;
                    font-weight: 600;
                    text-decoration: none;
                }
            }

            & ul {
                padding: 0;
                list-style: none;

                display: flex;
                justify-content:space-between;
            }

            & ul li {
                border-radius: 1rem;

                padding: 1rem;
                margin: 0;
                
                width: 30%;

                display: flex;
                gap: .5rem;
                align-items: center;
                justify-content: center;

                font-size: 1rem;
                font-weight: 600;
            }
        }

        .img-cont {

            grid-row: 2/3;
            grid-column: 2/3;

            padding: 1rem;
            
            & img {
                border-radius: 1rem;
            }
        }
    }
}