html,
body {
    height: 100%;
    width: 100%;


}

.aboutuswrapper {
    width: 100%;
    height: 75%;
}

.hero-sec {
    height: 60%;
    display: flex;
    margin: 10% 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;
}

#pg-02-tx1 {
    width: fit-content;
}

.f-wrp {
    display: flex;
    width: 100%;
    height: fit-content;
    /* background-color:   #fffbf6; */
    background: #FFFBF6;
    background: linear-gradient(180deg, rgba(246, 255, 254, 0.35) 0%, rgb(242, 247, 247) 100%);
    margin: 0 0 8% 0;
    /* opacity: 50%; */
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%239C92AC' fill-opacity='0.03' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E"); */
}

.f-heads {
    color: #314d4e;
    width: 60%;
    height: 100%;
}

#f-h1 {
    font-family: 'kumbh sans';
    font-weight: 100;
    font-size: 90px;
    letter-spacing: 45px;
    text-align: center;
    padding: 0 0 0 2%;
    /* opacity: 50%; */
}

#underline {
    width: 30%;
    height: 0.8%;
    background-color: gold;
    margin: 3% 0 0 4%;
}

.f-h3 {
    font-family: "Kumbh Sans";
    width: fit-content;
    letter-spacing: 1px;
    margin: 2% 0 0 4%;
}

#f-h6 {
    font-family: "Kumbh Sans";
    font-size: 16px;
    width: fit-content;
    letter-spacing: 1px;
    margin: 1% 0 0 4%;
}

.f-img {
    /* background-color: black; */
    width: 40%;
    height: 95%;
    padding: 4% 2% 2% 2%;
    overflow: hidden;
    /* color: #467bbd; */
}

#f-imgm {
    border-radius: 2%;
    opacity: 100%;
    width: 100%;
    height: 90%;
    object-fit: contain;
}

.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,
    .fotter {
        display: none;
    }

    /* .m-assets{
        z-index: 3;
        height: 100vh;
        width: 100%;
    }
    .m-verticals{
        z-index: 0;
    } */


    .m-vision {
        display: block;
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
    }

    .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%;
        overflow: hidden;
        background-color: rgba(212, 223, 248, 0.664);
        padding: 22% 0 0% 3%;
        margin: 4% 0 4% 0;
    }

    #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;
        overflow: hidden;
    }

    .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;

    }

}