@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
    border: none;
    outline: none;
}
html{
    font-size: 62.5%;
}
body{
    background: #fff;
}
header .top_header{
    padding: 10px 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:#2e3192;
}
header .top_header .left{
    display: flex;
    align-items: center;
    gap: 1rem;
}
header .top_header .left .content{
    display: flex;
    align-items: center;
    gap: 1rem;
}
header .top_header .left .content .icon i{
    font-size: 1.3rem;
    background: #fff;
    border-radius: 50rem;
    width: 2rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    color: #2e3192;
}
header .top_header .left .content .text span{
    font-size: 1.3rem;
    color: #fff;
}
header .top_header .right{
    display: flex;
    align-items: center;
    gap: 1rem;
    
}
header .top_header .right .icon_link i{
    font-size: 1.3rem;
    background: #fff;
    border-radius: 50rem;
    width: 2rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    color: #2e3192;
    cursor: pointer;
}
header .main_header{
    padding: 1rem 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    position: relative;
    z-index: +5;
}
header .main_header.sticky{
    position: fixed;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    top: 0; left: 0; right: 0;
    padding: .5rem 15%;
}
header .main_header.sticky .image img{
    width: 70px;
}
header .main_header .icon{
    display: none;
}
header .main_header .icon i{
    font-size: 2.5rem;
    background: rgb(108, 213, 255);
    width: 5rem;
    height: 5rem;
    text-align: center;
    line-height: 4.9rem;
    color: #2e3192;
    cursor: pointer;
    border-radius: .5rem;
}
header .main_header .image img{
    width: 90px;
}
header .main_header .navbar ul li{
    list-style: none;
}
header .main_header .navbar ul{
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
header .main_header .navbar ul li a{
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    color: black;
    font-weight: bolder;
    border-radius: 50rem;
    text-transform: none;
}
header .main_header .navbar ul li a.active{
    background: #2e3192;
    color: #fff;
}

.hero_section{
    width: 100%;
    height: 50rem;
    background: url(../Logo_IMG/bg_img.jpeg) center/cover no-repeat;
    position: relative;
}
.hero_section .content{
    position: absolute;
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
}
.hero_section .content .text h3{
    font-size: 5rem;
    color: #fff;
    margin-bottom: 1rem;
}
.hero_section .content .button button{
    background: #2e3192;
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    border-radius: .5rem;
    cursor: pointer;
    color: #fff;
}
.about_section{
    padding: .5rem 15%;
}
.about_section .about_container{
    display: flex;
    align-items: flex-start;
    gap: 20rem;
}
.about_section .about_container .left{
    flex: 1 1 41rem;
}
.about_section .about_container .left .h_text{
    font-size: 2rem;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);
    margin-bottom: 1rem;
}
.about_section .about_container .left .about_heading{
    font-size: 2.6rem;
    color: #2e3192;
    border-bottom: .1rem solid #2e3192;
    margin-bottom: 2rem;
    font-family: 'Times New Roman', Times, serif;
}
.about_section .about_container .description{
    font-size: 1.6rem;
    color: #000;
    line-height: 1.5;
    font-family: 'Times New Roman', Times, serif;
}
.about_section .about_container .right{
    flex: 1 1 41rem;
}
.about_section .about_container .right .box-container{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
}
.about_section .about_container .right .box-container .box{
    border-radius: .5rem;
    flex: 1 1 51rem;
    background: #c6c8ff;
    padding: 2rem;
    height: 35rem;
    position: relative;
}
.about_section .about_container .right .box-container .box .image{
    text-align: center;
    margin-bottom: 2rem;
}
.about_section .about_container .right .box-container .box .image img{
    height: 7rem;
}
.about_section .about_container .right .box-container .box h3{
    text-align: center;
    font-size: 2rem;
    color: #2e3192;
    border-bottom: .1rem solid #2e3192;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);
}
.about_section .about_container .right .box-container .box p{
    font-size: 1.6rem;
    color: #000;
    padding: 1.5rem 0;
    line-height: 1.5;
    font-family: 'Times New Roman', Times, serif;

}
.about_section .about_container .right .box-container .box .button{
    position: absolute;
    width: 100%;
    padding: 1rem;
    bottom: 0;
    left: 0;
    right: 0;
}
.about_section .about_container .right .box-container .box .button button{
    padding: 1rem 1.5rem;
    width: 100%;
    border-radius: .5rem;
    background: #2e3192;
    font-size: 1.5rem;
    color: #fff;
}
.heading{
    text-align: center;

}
.heading {
    position: relative;
    margin-top: 3rem;
    margin-bottom: 5rem;
}
.heading span{
    font-size: 3rem;
    color:#2e3192;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);
}
.service_section {
    padding: 2rem 15%; /* Increased padding for better spacing */
    position: relative;
}

/* Animation for circles */
.service_section .round_1,
.service_section .round_2,
.service_section .round_3 {
    width: 10rem;
    height: 10rem;
    background-color: rgb(111, 196, 230);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    animation: moveAround 60s ease-in infinite; /* Loop animation for smooth motion */
}

/* Staggered delay times to ensure the animation starts at different intervals */
.service_section .round_1 {
    animation-delay: 0s; /* Starts immediately */
}

.service_section .round_2 {
    animation-delay: 5s; /* Second circle starts after 10s */
    width: 7rem;
    height: 7rem;
}

.service_section .round_3 {
    animation-delay: 10s; /* Third circle starts after 20s */
    width: 4rem;
    height: 4rem;
}

/* Circle Animation Keyframes - Random-like Movement */
@keyframes moveAround {
    0% {
        top: 50%;
        left: 10%;
        bottom: 20%;
    }
    10% {
        top: 00%;
        left: 70%;
        bottom: 40%;
    }
    20% {
        top: 80%;
        left: 50%;
        bottom: 50%;
    }
    30% {
        top: 10%;
        left: 90%;
        bottom: 70%;

    }
    40% {
        top: 60%;
        left: 20%;
        bottom: 80%;
    }
    50% {
        top: 90%;
        left: 40%;
        bottom: 85%;
    }
    60% {
        top: 50%;
        left: 30%;
        bottom: 7%;
    }
    70% {
        top: 20%;
        left: 80%;
    }
    80% {
        top: 70%;
        left: 60%;
    }
    90% {
        top: 40%;
        left: 10%;
    }
    100% {
        top: 50%;
        left: 50%;
    }
}



.service_section .box-container {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
}
.service_section .box-container .box{
    border: .5rem solid #2e3192;
    padding: 2rem;
    flex: 1 1 41rem;
    height: 350px;
}
.service_section .box-container .box:nth-child(1){
    border-top-left-radius: 5rem;
}
.service_section .box-container .box:nth-child(4){
    border-bottom-right-radius: 5rem;
}
.service_section .box-container .box .image{
    padding-bottom: 1.5rem;
    text-align: center;
}
.service_section .box-container .box .image img {
    height: 7rem;
}
.service_section .box-container .box h3{
    text-align: center;
    text-transform: capitalize;
    font-size: 2rem;
    color: #2e3192;
    padding-bottom: 1.5rem;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);

}
.service_section .box-container .box p{
    font-size: 1.6rem;
    font-family: 'Times New Roman', sans-serif;
    text-align: center;
    color: #000;
    line-height: 1.2;

}
.about_2{
    padding: .5rem 15%;
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-top: 15rem;
}
.about_2 .left{
    flex: 1 1 31rem;
}
.about_2 .right{
    flex: 1 1 51rem;
}
.about_2 .left .image img{
    width: 100%;
    border-radius: .5rem;
}
.about_2 .right .about_heading h3{
    font-size: 2.5rem;
    color: #2e3192;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);
}
.about_2 .right .about_heading p{
    font-size: 1.5rem;
    color: #666;
    padding: 2rem 0;
    line-height: 1.5;

}
.about_2 .content{
    display: flex;
    align-items: flex-start;
    gap: 3rem;
    padding: 1.5rem 0;
}
.about_2 .content .icon i{
    font-size: 3rem;
    width: 6rem;
    height: 6rem;
    line-height: 5.5rem;
    text-align: center;
    border: .2rem solid #2e3192;
    border-radius: 50rem;
    color: #2e3192;
}
.about_2 .content .text h3{
    font-size: 2rem;
    margin-bottom: 1rem;
}
.about_2 .content .text p{
    color: #666;
    font-size: 1.5rem;
    line-height: 1.5;

}
.department_section{
    padding: 2rem 15%;
    background: rgb(0, 76, 107);
}
.department_section .box-container{
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 3rem;
}
.department_section .box-container .left div{
    padding: 1.5rem 1.5rem;
    width: 30rem;
    font-size: 1.7rem;
    cursor: pointer;
    color: #fff;
    border-right: .2rem solid #fff;
}
.department_section .box-container .left div.active{
    background: #fff;
    color: #000;
    border-right: .5rem solid rgb(108, 213, 255);

}
.department_section .box-container .left div:hover{
    background: rgb(0, 102, 142);
}
.department_section .box-container .right .text h3{
    font-size: 2rem;
    color: #fff;
}
.department_section .box-container .right .text p{
    font-size: 1.6rem;
    color: #fff;
    padding: 2rem 0;
    font-style: italic;
    line-height: 1.5;
}

.gallery{
    padding: .5rem 15%;
}
.gallery .box-container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.gallery .box-container .box{
    flex: 1 1 35rem;
    border: .5rem solid #fff;
}
.gallery .box-container .box .image img{
    width: 100%;
}
.footer{
    padding: 5rem 15%;
    background: rgb(0, 76, 107);
}
.footer .box-container{
    display: flex;
    align-items: flex-start;
    gap: 10rem;
}
.footer .box-container .contact{
    flex: 1 1 21rem;
}
.footer .box-container .contact .image{
    padding: 1rem 0;
}
.footer .box-container .contact .image img{
    height: 6rem;
    color: black;
}
.footer .box-container .contact p{
    font-size: 1.4rem;
    color: #fff;
    padding: .5rem 0;
}
.footer .box-container .contact p span{
    font-weight: bold;
    font-size: 1.4rem;
    font-family: 'Times New Roman', Times, serif;
}
.footer .box-container .link{
    flex: 1 1 21rem;
    display: flex;
    align-items: center;
    gap: 3rem;
}
.footer .box-container .link .left{
    flex: 1 1 21rem;
}
.footer .box-container .link .left h3{
    font-size: 1.7rem;
    color: rgb(108, 213, 255);
    margin-bottom: 1rem;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);
}
.footer .box-container .link .left ul li{
    list-style: none;
    padding: 1rem 0;
}
.footer .box-container .link .left ul li i{
    color: rgb(108, 213, 255);
}
.footer .box-container .link .left ul li a{
    font-size: 1.4rem;
    color: #fff;
}
.footer .box-container .link .right{
    flex: 1 1 21rem;
}
.footer .box-container .link .right h3{
    font-size: 1.7rem;
    color: rgb(108, 213, 255);
    margin-bottom: 1rem;
    text-shadow: 2px 7px 5px rgba(0,0,0,0.3), 0px -4px 10px rgba(255,255,255,0.3);

}
.footer .box-container .link .right ul li{
    list-style: none;
    padding: 1rem 0;
}
.footer .box-container .link .right ul li i{
    color: rgb(108, 213, 255);
}
.footer .box-container .link .right ul li a{
    font-size: 1.4rem;
    color: #fff;
}
.footer .box-container .email{
    flex: 1 1 21rem;
}
.footer .box-container .email .content p{
    font-size: 1.7rem;
    color: #fff;
    margin-bottom: 1rem;
}
.footer .box-container .email .content .input{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 50rem;
    overflow: hidden;
}
.footer .box-container .email .content .input input{
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
}
.footer .box-container .email .content .input button{
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    border-radius: 50rem;
    background: rgb(108, 213, 255);
}
.footer .box-container .email .icon a i{
    width: 3rem;
    height: 3rem;
    background: #fff;
    border-radius: 50rem;
    text-align: center;
    line-height: 3rem;
    font-size: 1.5rem;
    color: rgb(0, 102, 142);
    margin-top: 2rem;
    margin-right: 1rem;
}

.faq-container {
    padding: .5rem 15%;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-question {
    width: 100%;
    padding: 1rem;
    background-color: rgb(0, 76, 107);
    color: white;
    border: none;
    text-align: left;
    font-size: 1.7rem;
    cursor: pointer;
    border-radius: 50rem;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: rgb(0, 102, 142);
}
.faq-question i{
    background: #fff;
    width: 3rem;
    height: 3rem;
    text-align: center;
    line-height: 3.1rem;
    color: rgb(0, 76, 107);
    border-radius: 50rem;
}
.faq-answer {
    display: none;
    padding: 15px;
    background-color: #fff;
    border-left: 5px solid rgb(0, 76, 107);
    margin-top: 10px;
    font-size: 1.5rem;
    border-radius: 1rem;
}

.faq-answer i {
    font-style: italic;
}
.contact_container{
    padding: .5rem 15%;
}
.contact_container .box-container{
    display: flex;
    align-items: center;
    gap: 3rem;
}
.contact_container .box-container .left{
    flex: 1 1 31rem;
}
.contact_container .box-container .right{
    flex: 1 1 51rem;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}
.contact_container .box-container .right .content{
    flex: 1 1 21rem;
}
.contact_container .box-container .right .content form .input p{
    font-size: 1.3rem;
    margin-bottom: .3rem;
}
.contact_container .box-container .right .content form button{
    padding: 1rem 1.5rem;
    background:#2e3192;
    font-size: 1.5rem;
    color: #fff;
    border-radius: 50rem;
    cursor: pointer;
}
.contact_container .box-container .right .content form button:hover{
    background: rgb(0, 76, 107);
}
.contact_container .box-container .right .content form .input input{
    width: 100%;
    padding: .7rem 1.5rem;
    font-size: 1.5rem;
    background: #fff;
    margin-bottom: 1rem;
    border: .1rem solid #d1d1d1;
}
.contact_container .box-container .right .content form .input textarea{
    width: 100%;
    padding: .7rem 1.5rem;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    background: #fff;
    height: 5rem;
    border: .1rem solid #d1d1d1;
}
.contact_container .box-container .right .location{
    flex: 1 1 21rem;
}
.contact_container .box-container .right .location .text_content{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.contact_container .box-container .right .location .text_content .icon i{
    width: 3rem;
    height: 3rem;
    border-radius: 50rem;
    text-align: center;
    line-height: 2.9rem;
    font-size: 1.5rem;
    color: #2e3192;
    border: .2rem solid #2e3192;
}
.contact_container .box-container .right .location .text_content .text h3{
    font-size: 1.6rem;
}
.contact_container .box-container .right .location .text_content .text p{
    font-size: 1.5rem;
}


@media (max-width: 991px) {
    html{
        font-size: 55%;
    }
    .hero_section {
        height: 35rem;
        background-size: cover;
        background-position: center center;
    }
}
@media (max-width: 768px) {
    header .top_header{
        padding: 0;
        justify-content: center;
    }
    header .top_header .left .content .text p{
        font-size: 1.4rem;
    }
    header .top_header .right{
        display: none;
    }
    header .main_header{
        padding: 1rem;
    }

    header .main_header .icon{
        display: block;
    }
    header .main_header .navbar {
        position: absolute;
        top: 100%; /* Fixes positioning */
        left: 0;
        right: 0;
        background: #eee;
        z-index: 3;
        width: 100%;
        display: none;
    }
    header .main_header .navbar.active{
        display: block;
    }

    header .main_header .navbar ul {
        display: block;
    }

    header .main_header .navbar ul li {
        text-align: center;
    }

    header .main_header .navbar ul li a {
        font-size: 1.5rem;
        color: #000;
        font-weight: bolder;
        border-radius: 0;
        display: block;
        padding: 1rem 1.5rem;
    }

    
    header .main_header .navbar ul li a.active {
        background: #fff;
        border-top: .1rem solid #d1d1d1;
    }

    .hero_section {
        height: 30rem; 
        background-size: cover;
        background-position: center center;
    }
    .hero_section .content{
        left: 2%;
    }
    .hero_section .content .text h3{
        font-size: 3rem;
    }
    .about_section{
        padding: 1rem;
    }
    .about_section .about_container{
        flex-wrap: wrap;
        gap: 1.5rem;
    }
    .about_section .heading{
        display: none;
    }
    .about_section .about_container .right .box-container .box{
        padding: 1rem;
    }
    .service_section{
        padding: 1rem;
    }
    .service_section .box-container {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .service_section .box-container .box{
        flex: 1 1 15rem;
        padding: 1rem;
    }
    .about_2{
        padding: 1rem;
        margin-top: 1rem;
        flex-wrap: wrap;
    }
    .about_2 .left .image{
        text-align: center;
    }
    .about_2 .left .image img{
        width: 100%;
    }
    .department_section{
        padding: 1rem;
    }
    .department_section .box-container .left div{
        width: 15rem;
    }
    .department_section .box-container{
        gap: 1rem;
    }
    .gallery{
        padding: 1rem;
    }
    .gallery .box-container{
        gap: 1rem;
    }
    .gallery .box-container .box{
        flex: 1 1 12rem;
    }

    .faq-container {
        padding: 1rem;
    }
    .footer{
        padding: 1rem;
    }
    .footer .box-container{
        flex-wrap: wrap;
        gap: 3rem;
    }
    .contact_container{
        padding: 1rem;
    }
    .contact_container .box-container{
        flex-wrap: wrap-reverse;
    }
    .contact_container .box-container .right{
        flex-wrap: wrap;
    }
}

@media (max-width: 450px) {
    html {
        font-size: 50%;
    }
    .hero_section {
        height: 25rem; /* Reduce the height for very small screens */
        background-size: cover;
        background-position: center center;
    }
}