html , body{
    height: 100vh;
    width: 100%;
    
    
    
}
.aboutuswrapper{
    width: 100%;
    height: 100vh;
}

.hero-sec{
    height: 60%;
    display: flex;
    margin: 1% 0 0 0;
}

.hero-sd-h3-tgs{
    height: 40%;
    width: 45%;
    margin: 4% 0 0 5%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.6s ease;
   
}

.hero-sd-h3-tgs.show{
    opacity: 1;
    transform: translateY(0);
}

#hs-h3-sd-tg{
    font-weight: 300;
    color: black;
}
a{
    text-decoration: none !important;
}

.hs-bx-main{
    /* background-color: black; */
    padding: 0 0 0 7%;
    height: 80%;
    width: 100%;
    
}
#hs-h-tg{
    font-family: "BIG SHOULDERS";
    font-size: 60px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.6s ease;
   
}

#hs-h-tg.show{
    opacity: 1;
    transform: translateY(0);
}


#hs-p-tg{
    width: 80%;
    text-align: justify;
    font-weight: 400;
    font-size: 17px;
    font-family: "Kumbh sans";
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 1.2s ease;   
}

#hs-p-tg.show{
    opacity: 1;
    transform: translateY(0);
}

.contactus{
    display: flex;
    background-color: #000000c4;
    height: 75%;
    margin: 0 0 3% 0 ;
}
.con-tx{
    height: 100%;
    width: 40%;
}
.form-wrp{
    width: 100%;
    height: 100%;
}

label{
    font-family: "KUMBH SANS";
    font-size: 18px;
}
.form-control,.form-label{
    border-radius:none;
    display: flex;
    flex-direction: column;
    width: 60%;
    height: 60%;
    text-decoration: none !important;
    box-shadow: none;
    border: none;
}

#contact-h2-tg{
    display: flex;
    font-family: "Kumbh Sans";
    margin: 7% 0 0 3% ;
    font-size: 60px;
    width:fit-content;
}
#contact-h3-tg{
    display: flex;
    font-family: "Kumbh Sans";
    margin: 0% 0 0 3.6% ;
    font-size: 28px;
    width:fit-content;

}


.sub-sec{
    display: flex;
    width: 100%;
    height: 70%;
    /* background-color: rgb(156, 94, 94);  */
    padding: 0 0 0 2%;
}
#image-prt{
    border-radius: 1%;
    width: 98%;
    height: 100%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.6s ease;   
}

#image-prt.show{
    opacity: 1;
    transform: translateY(0);
}

.sub-sec-02{
    margin: 2% 0 2.5% 0;
    display: flex;
    width: 100%;
    height: 70%; 
}

.sub-sec-text{
    height: 100%;
    width: 50%;
    margin: 4% 0 0 0;
    
}
#quote-img-right{
    height: 20px;
    width: 20px;
    margin: 2% 0 2% 10% ;
}

#quote-img-left{
    height: 20px;
    width: 20px;
    margin:0 0 0 84%;
}

#quote-para{
    text-align: justify;
    width: 70%;
    margin: 0 0 0% 16%;
    /* font-family: "Birthstone"; */
    font-family: "Imperial Script", cursive;
    font-size: 33px;
    font-weight: 500;
    /* text-shadow:  ; */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.6s ease;   
}

#quote-para.show{
    opacity: 1;
    transform: translateY(0);

}

#side-image-sub-sec{
    object-fit:cover;
    border-radius: 0.8%;
    height: 69%;
    width: 39%;
    margin: 4% 1% 0 6% ;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.6s ease;   
}

#side-image-sub-sec.show{
    opacity: 1;
    transform: translateY(0);

}

.project-wrp{
    max-width: fit-content;
    max-height: fit-content;

}

.our-projects{
    display: flex;
    width: 100%;
    gap: 10px; /* Space between images and text */
    margin: 0 0 15% 0;
}

.image-box{
    display: inline-block;
    width: 20%;
    height: 100%;
}

#imgdiv1{
    display: inline-block;
    height: 100%;
    width: fit-content;
    margin: 6% 1% 1% 5%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.9s ease;   
}

#imgdiv1.show{
    opacity: 1;
    transform: translateY(0);

}


#imgdiv2{
    display: flex;
    height: 130%;
    width: fit-content;;
    margin: 6% 1% 1% 5%;    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 1.2s ease;   
}

#imgdiv2.show{
    opacity: 1;
    transform: translateY(0);

}
#imgdiv3{
    height: 100%;
    width: 30%;    
    margin: 0% 0% 0% 0%;
    padding: 4% 0 0% 1%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 1.5s ease;   
}

#imgdiv3.show{
    opacity: 1;
    transform: translateY(0);

}
#op-img-bx1{
    display: inline-block;
    height: 180%;
    width: 89%;
}
#op-img-bx1:hover{
    transform: scale(1.03);
    transition: 0.24s;
    box-shadow: 0.5px 0.5px 4.1px black;
}

#op-img-bx2{
    display: inline-block;
    height: 100%;
    width: 100%;
}
#op-img-bx2:hover{
    transform: scale(1.03);
    transition: 0.24s;
    box-shadow: 0.5px 0.5px 4.1px black;
}

#op-img-bx3{
    display: inline-block;
    height: 50%;
    width: 100%;
}
#op-img-bx3:hover{
    transform: scale(1.03);
    transition: 0.24s;
    box-shadow: 0.5px 0.5px 4.1px black;
}


.text-content {
    width:70%; /* Adjust the width as needed */
    display: flex;
    flex-direction: column;
}

.op-h-tg-div {
    width: 100%;
}

.op-heads {
    font-family: "BIG SHOULDERS";
    font-size: 60px;
    margin: 0 0 0 15%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.6s ease;
   
}

.op-heads.show{
    opacity: 1;
    transform: translateY(0);
}


.op-p-tg-div {
    margin: 0 0 0 15%;
    width: 70%;
    text-align: justify;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.6s ease;
   
}

.op-p-tg-div.show{
    opacity: 1;
    transform: translateY(0);
}


.row-class{
    display: flex;
    width: 100%;
    margin: 0 0 0 0%;
    
}

.sub-data{
    display: flex;
    width: fit-content;
    flex-direction: column;
    margin: 0 0 0 15%;
    font-family: "BIG SHOULDERS";
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s ease, transform 0.6s ease;
   
}

.sub-data.show{
    opacity: 1;
    transform: translateY(0);
}

#num-data1{
    display: flex;
    width: fit-content;
    flex-direction: column;
    margin: 0 0 0 3%;
}

.num-tx-p-tg1,.num-tx-p-tg2{
    display: flex;
    width: fit-content;
    
}
.num-h2-tg{
    font-size: 51px;
    display: inline-block;
    width: fit-content;
}
.lower-para{
    font-size: 26px;
}


.sub-data2{
    width: fit-content;
    margin: 0 0 0 15%;
    display: flex;
    flex-direction: column ;
}
.sections-wrp{
    width: 100%;
    height: 100%;
    background-color: black;
}
.sections-main{
    width: 100%;
    height: 100vh;
    
   

}

.m-vision,.sub-sec,.sub-sec-02,#side-image-sub-sec{
    display: none;
}
@media screen and (max-width: 700px){
    .aboutuswrapper,.sub-sec,.sub-sec-02,.our-projects,.section.wrp,.sections-main,.fotter{
        display: none;
    }
    .m-vision{
        display: block;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
    }
    .m-sections-wrp{
        width: 100%;
        height: 100%;
    }
    .m-sections-main{
        height: 100%;
        width: 100%;
    }
    .redirect{
        display: flex;
        align-items: center;
        height: 5%;
        box-shadow: 0 0 2px rgb(145, 184, 255);
    }
    #home{
        margin: 0 2% 0 4%;
        font-family: "kumbh sans";
        font-weight: 550;
    }
    .first-frame{
        height: 100%;
        background-color: rgba(212, 223, 248, 0.664);
        padding: 19% 0 0 3%;
    }
    #ff-h1{
        font-weight: 550;
        font-family: "KUMBH SANS" ;
        font-size: 55px;
        /* margin: 6% 0 0 3%; */
    }
    #ff-p{
        text-align: justify;
        font-family: "KUMBH SANS" ;
        margin: 3% 4% 0 0%;
        font-size: 20px;
        font-weight: 400;
    }

    .lm-btn{
        font-family: "fira sans";
        font-size: 19px;
        margin-top: 5%;
        background-color: rgba(111, 135, 214, 0.068);
        border: 40% ;
        border-color: rgb(0, 0, 78);
        width: 50%;
        height: 7%;
    }
    .second-frame{
        position: relative;
        height: 100%;
        width: 100%;
        padding: 4% 0 0 0;
    }
    #sf-h1{
        /* margin-left: 5%; */
        font-family: "KUMBH SANS";
        font-size: 40px;
        color: rgb(19, 29, 83);
        text-align: center;
    }
    #sf-img1{
        position: absolute;
        width: 100%;
        height: 35%;
    }
    .ovly-sf{
        width: 70%;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 65% 0 0 15%;
        background-color: rgb(255, 255, 255);

    }
    #sf-p{
        margin: 2% 4% 0 3%;
        text-align: justify;
        font-family: "fira sans";
        font-weight: 530;

    }

}