@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* font-family: "Poppins", sans-serif; */
/* font-weight: 200; */
/* font-weight: 700; */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    position: relative;
}

::-webkit-scrollbar {
    display: none;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    cursor: default !
    ;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

a {
    text-decoration: none;
    color: #000;
}

.yellow-grad {
    color: transparent;
    /* background: linear-gradient(90deg, #fbab18, #fcc64d); */
    background: linear-gradient(90deg, #fbab18, #fdde8a);
    background-clip: text;
    -webkit-background-clip: text;
}

.section-label {
    font-size: 1rem;
    padding: 4px 16px;
    font-weight: 300;
    color: #fff;
    background-color: #000;
    border-radius: 25px;
    margin-bottom: 15px;

    i {
        color: #fbab18;
    }
}

/* hero section */
.aboutHero {
    width: 100%;
    height: auto;
    min-height: 90vh;
    /* background-image: url(https://images.pexels.com/photos/4484073/pexels-photo-4484073.jpeg); */
    background-image: url(/assets/about-hero_bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .About-overlay {
        width: 100%;
        height: 100%;
        min-height: 90vh;
        background-color: #00000090;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;


        .about-container {
            width: 100%;
            max-width: 1400px;
            margin: 80px 0;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            .section-label {
                /* background-color: #fcc64d80; */
                /* border: 1px solid #fbab18; */
                margin-bottom: 15px;
                text-align: center;
                background-color: #3e2e12;
                border: 1px solid #fbab1840;
            }

            h2 {
                font-size: 4.5rem;
                line-height: 5rem;
                max-width: 1200px;
                margin-bottom: 15px;
                color: #fff;
                text-align: center;

                span {
                    background: linear-gradient(90deg, #fbab18, #fff, #fbab18);
                    color: transparent;
                    background-clip: text;
                }
            }

            >p {
                font-size: 1.4rem;
                color: #fff;
                max-width: 1100px;
                margin-bottom: 60px;
                text-align: center;
            }

            .about-stats {
                width: 100%;
                height: auto;
                display: flex;
                align-items: start;
                justify-content: center;
                gap: 30px;

                .ab-stat-card {
                    width: 20%;
                    max-width: 20%;
                    height: auto;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    border-radius: 12px;
                    min-width: 200px;
                    padding: 20px;
                    border: 1px solid #f9f9f940;
                    background-color: #ffffff20;
                    backdrop-filter: blur(10px);

                    p {
                        color: #fbab18;
                        font-size: 2rem;
                        font-weight: 350;
                        text-align: center;
                        position: relative;
                    }

                    small {
                        font-size: 14px;
                        color: #d9d9d9;
                    }
                }

                .ab-stat-card:nth-child(1){

                    p::after{
                        position: absolute;
                        content: "k+";
                    }
                }
            }
        }
    }
}

@media screen and (max-width:768px) {
    .aboutHero {

        .About-overlay {

            .about-container {
                padding: 0 10px;
                margin: 120px 0;

                h2 {
                    font-size: 2rem;
                    line-height: 2.5rem;
                }


                >p {
                    font-size: 1rem;
                }

                .about-stats {
                    flex-wrap: wrap;
                    gap: 15px 0;
                    align-items: center;
                    justify-content: space-between;

                    .ab-stat-card {
                        /* width: 45% !important; 
                        max-width: 45% !important; */
                        min-width: 48% !important;
                        width: 48% !important;
                        max-width: 50% !important;
                        /* max-width: 35% !important; */
                        height: auto;
                        min-height: 120px;
                        text-align: center !important;
                        padding: 12px !important;

                        >p {
                            font-size: 1.5rem;
                        }

                    }
                }
            }
        }
    }
}

/* hero section */


/* our values */
.ourValues {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .ourValuesContainer {
        width: 100%;
        height: auto;
        max-width: 1400px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 120px 0;

        .section-label {

            i {
                color: #fbab18;
            }
        }

        h2 {
            font-size: 2.5rem;
            line-height: 3rem;
            margin-bottom: 15px;
            text-align: center;
        }

        >p {
            font-size: 1.4rem;
            max-width: 800px;
            text-align: center;
            margin-bottom: 50px;
        }

        .values-Cards {
            width: 100%;
            height: auto;
            display: flex;
            align-items: start;
            justify-content: space-between;
            gap: 20px;


            .val-card {
                width: 25%;
                height: auto;
                min-height: 250px;
                max-height: 330px;
                display: flex;
                align-items: start;
                /* justify-content: space-between; */
                flex-direction: column;
                padding: 20px;
                background-color: #fdfdfd;
                border-radius: 12px;
                box-shadow: 5px 5px 30px #00000015;


                i {
                    font-size: 2rem;
                    padding: 15px;
                    border-radius: 8px;
                    color: #fbab18;
                    background-color: #000;
                    margin-bottom: 20px;
                }

                h5 {
                    font-size: 1.5rem;
                    line-height: 2rem;
                    margin-bottom: 20px;
                    font-weight: 600;
                }
            }
        }
    }
}

@media screen and (max-width:768px) {
    .ourValues {
        padding: 0 10px;

        .ourValuesContainer {

            h2 {
                font-size: 2rem;
                line-height: 2.5rem;
            }

            >p {
                font-size: 1rem;
                margin-bottom: 30px;
            }

            .values-Cards {
                flex-wrap: wrap;

                .val-card {
                    width: 100%;
                    height: auto;
                    position: sticky;
                    top: 50px;
                }
            }
        }
    }
}

/* our values */

/* mission and vision */
.mission_vision {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(135deg, #000, #283352, #000);

    .mission_vision_Container {
        width: 100%;
        max-width: 1400px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
        margin: 120px 0;

        .mission_card,
        .vision_card {
            width: 50%;
            height: auto;
            min-height: 350px;
            padding: 30px;
            border-radius: 15px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: start;
            justify-content: center;
            flex-direction: column;
            transition: all .5s ease-in-out;



            i {
                font-size: 2rem;
                border-radius: 15px;
                padding: 16px;
                margin-bottom: 30px;
            }

            h4 {
                font-size: 2rem;
                line-height: 2.5rem;
                margin-bottom: 20px;
            }

            p {
                font-size: 1rem;
                z-index: 2;

            }
        }

        .mission_card:hover,
        .vision_card:hover {
            transform: translateY(-10px);
        }

        .vision_card {
            background-color: #fbab18;
            border: 1px solid #fdde8a40;

            .absolute-uppercornercircle {
                position: absolute;
                width: 200px;
                height: 200px;
                /* background-color: #eea820; */
                background-color: #d9680630;
                top: -80px;
                right: -80px;
                border-radius: 50%;
                z-index: 1;
            }

            .absolute-lowerleftcornercircle {
                width: 150px;
                height: 150px;
                background-color: #fdde8a40;
                position: absolute;
                bottom: -60px;
                left: -60px;
                border-radius: 50%;
                z-index: 1;
            }

            i {
                background-color: #000;
                color: #fbab18;
                margin-bottom: 30px;
            }

            >p {
                font-size: 1.1rem;
            }
        }

        .mission_card {
            background: #ffffff40;
            backdrop-filter: blur(10px);
            border: 1px solid #f9f9f940;
            position: relative;
            overflow: hidden;

            .absolute-uppercornercircle {
                position: absolute;
                width: 250px;
                height: 250px;
                background-color: #fbab1810;
                top: -120px;
                right: -120px;
                border-radius: 50%;
                z-index: 1;
            }

            i {
                background-color: #fbab18;
                color: #000;
            }

            h4 {
                color: #fff;
            }

            p {
                color: #fff;
            }
        }
    }
}

@media screen and (max-width:768px) {
    .mission_vision {
        padding: 0 10px;

        .mission_vision_Container {
            flex-wrap: wrap;
            margin: 60px 0;
            gap: 30px;

            .vision_card,
            .mission_card {
                width: 100%;
                padding: 20px;

                i {
                    font-size: 1.5rem;
                    border-radius: 8px;
                }

                h4 {
                    font-size: 1.5rem;
                    line-height: 2rem;
                }

                p {
                    font-size: 1rem;
                }
            }
        }
    }
}

/* mission and vision */

/* sustainability section */
.sustainability_section {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;

    .absolute-circle-1 {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 20%;
        left: 20%;
        background-color: #fdde8a;
        filter: blur(150px);
    }

    .absolute-circle-2 {
        width: 200px;
        height: 200px;
        position: absolute;
        bottom: 20%;
        right: 20%;
        background-color: #fdde8a;
        filter: blur(150px);
    }

    .sustainability_container {
        width: 100%;
        max-width: 1400px;
        height: auto;
        margin: 120px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;


        .sustain-left {
            width: 50%;
            height: auto;
            min-height: 650px;
            border-radius: 25px;
            overflow: hidden;
            position: relative;
            background-image: url(https://media.istockphoto.com/id/497019307/photo/building-block.jpg?s=612x612&w=0&k=20&c=69yHGSiUjAu9PALiO4G6JkuWqB7xCftn5b56XfiOHtY=);
            background-repeat: no-repeat;
            background-size: cover;
            z-index: 2;

            .absolute_featured_card {
                position: absolute;
                width: auto;
                height: auto;
                bottom: 20px;
                left: 20px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 15px;
                background-color: #fff;
                padding: 16px;

                .fe-left {
                    width: auto;

                    i {
                        font-size: 2rem;
                        color: #fff;
                        background-color: #fbab18;
                        padding: 12px;
                        border-radius: 8px;
                    }
                }

                .fe-right {

                    h4 {
                        font-size: 2.5rem;
                        line-height: 3rem;
                        font-weight: 500;
                    }

                    small {
                        font-size: 14px;
                        color: #232323;
                    }
                }
            }

            .sustain-image-overlay {
                width: 100%;
                height: 100%;
                min-height: 650px;
                background: linear-gradient(20deg, #000, #ffffff00);
            }
        }

        .sustain-right {
            width: 50%;
            height: auto;
            display: flex;
            align-items: start;
            justify-content: center;
            flex-direction: column;
            z-index: 2;

            h2 {
                font-size: 2.5rem;
                line-height: 3rem;
                margin-bottom: 20px;
            }

            >p {
                font-size: 1.1rem;
                margin-bottom: 25px;
            }

            .featured_Cards {
                width: 100%;
                height: auto;
                display: flex;
                align-items: start;
                justify-content: start;
                flex-direction: column;
                gap: 20px;

                .feau-Card {
                    width: auto;
                    height: auto;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 20px;
                    padding: 16px;
                    transition: all .5s ease-in-out;

                    .feau-Left {
                        width: auto;
                        height: auto;
                        transition: all .5s ease-in-out;


                        i {
                            font-size: 1.5rem;
                            padding: 12px;
                            border-radius: 8px;
                            background-color: #d9d9d9;
                            color: #000;
                            /* border: 1px solid #fbab1840; */
                            transition: all .3s ease-in-out;
                        }
                    }

                    .feau-Right {
                        width: auto;
                        height: auto;

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

                        small {
                            font-size: 14px;
                            color: #232323;
                        }
                    }
                }

                .feau-Card:hover .feau-Left i {
                    background-color: #000;
                    color: #fff;
                }
            }
        }
    }
}

@media screen and (max-width:768px) {
    .sustainability_section{
        padding: 0 10px;

        .sustainability_container{
            margin: 50px 0;
            flex-wrap: wrap;

            .sustain-left, .sustain-right{
                width: 100%;
                height: auto;
            }

            .sustain-left{
                min-height: 500px;

                .absolute_featured_card{
                    padding: 10px !important;

                    .fe-left{
                        i{
                            font-size: 2rem;
                        }
                    }

                    .fe-right{
                         h4{
                            font-size: 2rem;
                            line-height: 2rem;
                         }
                    }
                }

                .sustain-image-overlay{
                    min-height: 500px;
                }
            }

            .sustain-right{

                h2{
                    font-size: 2rem;
                    line-height: 2.5rem;
                    margin-bottom: 15px;
                }

                > p{
                    font-size: 1rem;
                }
            }

        }
    }
}
/* sustainability section */

/* infrastructure section */
.infrastructure{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #000;
    position: relative;

    .inf-absolute-circle{
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        top: 50px;
        left: 20px;
        background-color: #fdde8a;
        filter: blur(200px);
        z-index: 1;
    }

    .inf-absolute-circle-2{
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        bottom: 50px;
        right: 20px;
        background-color: #fdde8a;
        filter: blur(200px);
        z-index: 1;
    }

    .infraContainer{
        width: 100%;
        max-width: 1400px;
        height: auto;
        margin: 80px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 2;

        h4{
            background-color: #fbab18;
            color: #000;

            i{
                color: #fff;
            }
        }

        h2{
            font-size: 2.5rem;
            line-height: 3rem;
            margin-bottom: 15px;
            color: #fff;
            text-align: center;
        }
        
        p{
            color: #fdfdfd;
            font-size: 1.4rem;
            margin-bottom: 50px;
            text-align: center;
            max-width: 1000px;
        }

        .infra-stats{
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            margin-bottom: 30px;

            .infra_stat_card{
                width: 25%;
                height: auto;
                min-height: 150px;
                max-height: 200px;
                padding: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                background-color: #ffffff20;
                backdrop-filter: blur(10px);
                border: 1px solid #f9f9f940;
                border-radius: 15px;

                i{
                    font-size: 2rem;
                    background-color: #fbab18;
                    color: #000;
                    margin-bottom: 15px;
                    border-radius: 5px;
                    padding: 8px;
                }

                h5{
                    font-size: 3rem;
                    line-height: 3rem;
                    color: #fbab18;
                    font-weight: 300;
                }

                small{
                    font-size: 14px;
                    color: #fdfdfd;
                }
            }

        }

        .factory-info{
            width: 100%;
            height: 500px;
            min-height: 500px;
            border-radius: 25px;
            background-image: url(/assets/factory-1.jpeg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            align-items: end;
            justify-content: end;
            overflow: hidden;
            z-index: 2;
            /* position: relative; */

            .overlay-featured-Card-Container{
                /* position: absolute; */
                width: 100%;
                height: auto;
                bottom: 30px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 35px;
                padding: 40px;

                .ov-featured_Card{
                    width: 33%;
                    background: #f9f9f940;
                    border: 1px solid #fdfdfd40;
                    backdrop-filter: blur(10px);
                    height: auto;
                    min-height: 120px;
                    display: flex;
                    align-items: start;
                    justify-content: start;
                    flex-direction: column;
                    border-radius: 15px;
                    padding: 20px;

                    i{
                        font-size: 2rem;
                        color: #fbab18;
                        margin-bottom: 15px;
                    }

                    h5{
                        font-size: 1.2rem;
                        line-height: 1.5rem;
                        color: #fff;
                        font-weight: 400;
                    }

                    small{
                        font-size: 16px;
                        color: #fdfdfd;
                    }
                }
            }
        }
    }
    
}

@media screen and (max-width:768px) {
    .infrastructure{
        padding: 0 10px;

        .infraContainer{
            margin: 50px 0;

            h2{
                font-size: 2rem;
                line-height: 2.5rem;
                margin-bottom: 10px;
            }

            > p{
                font-size: 1rem;
                margin-bottom: 30px;
            }

            .infra-stats{
                flex-wrap: wrap;
                gap: 20px 10px;
                align-items: start;

                .infra_stat_card{
                    width: 48%;
                    align-items: center;

                    i{
                        font-size: 1.5rem;
                    }

                    h5{
                        font-size: 2.5rem;
                    }

                    small{
                        text-align: center;
                    }
                }
            }

            .factory-info{
                min-height: 700px;
                /* padding: 20px !important; */

                .overlay-featured-Card-Container{
                    flex-wrap: wrap;
                    gap: 10px;
                    padding: 10px !important;

                    .ov-featured_Card{
                        width: 100%;
                    }
                }
            }
        }
    }
}
/* infrastructure section */