* {
    margin: 0;
    padding: 0;
    user-select: none;
    font-family: sans-serif;
}
html{
    overflow-x: hidden;
}
body {
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

/* First Container ---------------------------------------------------------------------------------- */

.first {
    display: flex;
    align-items: center;
    height: 100px;
    width: 100%;
}

.cf1, .cf2 {
    display: flex;
    align-items: center;
    height: 100%;
}

.cf1 {
    width: 40%;
    padding-left: 10vw;
}

.cf2 {
    width: 60%;
    padding: 6vh 0 0 6.5vw;
}

.cf2 h5 {
    font-weight: 700;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .first {
        height: auto;
        padding: 10px;
        gap: 5vw;
        justify-content: space-between;
    }

    .cf1 {
        width: 20%;
        padding-left: 0;
    }

    .cf2 {
        width: 100%;
        padding: 2vh 4vw;
    }
}

@media screen and (max-width: 824px) {
    .first {
        flex-direction: column;
        text-align: center;
    }

    .cf1, .cf2 {
        justify-content: center;
        width: 100%;
        padding: 10px;
    }

    .cf2 {
        width: 80%;
    }
}

/* Second Container ---------------------------------------------------------------------------------- */

.container-second {
    overflow: hidden;
    margin: 6vh 0;
    padding: 0;
    width: 100%;
}

.container-second img {
    width: 100%;
    object-fit: cover;
    max-height: 100%;
}

/* Responsive Design */
@media screen and (max-width: 800px) {


    .container-second {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 2vh 0;
    }

    .container-second img {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .container-second {
        margin: 1vh 0;
    }
}

/* Third Container ---------------------------------------------------------------------------------- */

.third {
    padding: 0 13vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.third > p {
    font-size: 2vh;
    width: 100%;
    font-weight: 400;
}

.third h1 {
    margin: 4vh 0 0 0;
    font-weight: 700;
}

/* Grid Section */
.grid {
    padding: 10px;
    margin-top: 3vh;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
}

.grid div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1vh;
    width: 50%;
    padding: 10px;
}

.grid div > h3 {
    margin-top: 1vh;
    font-weight: 600;
    font-size: 3.5vh;
}

.grid div > p {
    font-size: 2vh;
    font-weight: 400;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .third {
        padding: 0;
        width: 100vw;
    }

    .grid {
        width: 100%;
        justify-content: space-between;
    }

    .grid div {
        width: 40%;
    }
    .grid div p{
        font-size: 2.2vh;
    }

    .third > p {
        font-size: 2.2vh;
        margin-top: 6vh;
    }
}

@media screen and (max-width: 768px) {
    .third {
        padding: 0 5vw;
    }

    .third h1 {
        font-size: 1.8rem;
    }

    .third > p {
        margin-top: 4vh;
    }

    .grid {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }

    .grid div {
        width: 80%;
    }
}

@media screen and (max-width: 480px) {
    .third {
        padding: 0 3vw;
    }

    .third h1 {
        font-size: 1.5rem;
    }

    .grid div {
        width: 100%;
    }
}

/* Fourth Container ---------------------------------------------------------------------------------- */

.forth {
    padding-top: 3vh;
    min-height: 45vh;
    margin: 0;
    width: 100vw;
    background: url('Untitled.png');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.forth h1 {
    font-weight: 700;
    font-size: 5vh;
}

/* Button Container */
.forthcon {
    width: 75vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3vw;
    margin-top: 2vh;
    flex-wrap: wrap;
}

.forthcon div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    width: 45%;
}

.forthcon div button {
    padding: 2vh 2.5vw;
    border-radius: 30px;
    color: white;
    font-size: 2.2vh;
    font-weight: 700;
    background-color: #3A5B89;
    outline: none;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.forthcon div button:hover {
    background-color: #2e4a6f;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .forth {
        padding: 5vh 5vw;
    }

    .forth h1 {
        font-size: 4.5vh;
    }
    .forth p{
        font-size: 2.2vh;
    }

    .forthcon {
        width: 70vw;
        gap: 4vw;
    }
}

@media screen and (max-width: 768px) {
    .forth h1 {
        font-size: 4vh;
    }

    .forthcon {
        width: 80vw;
        gap: 25vw;
    }

    .forthcon div {
        width: fit-content;
        text-align: center;
    }

    .forthcon div button {
        font-size: 2vh;
        padding: 1.5vh 5vw;
    }
}

@media screen and (max-width: 480px) {
    .forth h1 {
        font-size: 3.5vh;
    }

    .forthcon {
        width: 90vw;
        flex-direction: column;
        align-items: center;
        gap: 3vh;
    }

    .forthcon div {
        width: 100%;
    }

    .forthcon div button {
        font-size: 1.8vh;
        padding: 1.5vh 6vw;
    }
}

/* Fifth Container ---------------------------------------------------------------------------------- */

.fifth {
    margin-top: 12vh;
    width: 100vw;
    padding: 0 13vw;
    display: flex;
    justify-content: center;
    gap: 1vw;
}

.fifth div {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 50%;
}

.fifth div img {
    width: 100%;
}

.fifth div h1 {
    margin-top: 7vh;
    font-size: 5.2vh;
    font-weight: 700;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .fifth {
        padding: 0 8vw;
        gap: 4vw;
    }

    .fifth div {
        width: 48%;
    }

    .fifth div h1 {
        font-size: 4.5vh;
    }
}

@media screen and (max-width: 768px) {
    .fifth {
        flex-direction: column;
        align-items: center;
        padding: 0 5vw;
        gap: 6vh;
    }

    .fifth div {
        width: 100%;
    }

    .fifth div img {
        width: 100%;
    }

    .fifth div h1 {
        font-size: 4vh;
    }
}

@media screen and (max-width: 480px) {
    .fifth {
        padding: 0 3vw;
    }

    .fifth div img {
        width: 90%;
        max-width: 300px;
    }

    .fifth div h1 {
        font-size: 3.5vh;
        margin-top: 5vh;
    }
}

/* Partners Container ---------------------------------------------------------------------------------- */

.partners {
    margin-top: 8vh;
    height: fit-content;
    padding: 3vh 2vw;
    position: relative;
    text-align: center;
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: center;
}
.partners>img{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}


.partners h1 {
    margin: 3vh;
    font-size: 4.7vh;
    font-weight: bold;
}

.partners p {
    font-size: 2vh;
    margin-bottom: 3vh;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    justify-content: center;
    max-width: 1200px;
    margin: auto;
}

.grid-item {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1; /* Square shape */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5vh;
    font-weight: bold;
    color: white;
}
.grid-item img{
    width: 100%;
}
/* Responsive Design */
@media screen and (max-width: 768px) {
    .partners{
        margin-top: 2vh;
    }
    .grid-container {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
        gap: 15px;
    }
}

@media screen and (max-width: 580px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .partners h1 {
        font-size: 2.5vh;
    }

    .partners p {
        font-size: 1.8vh;
    }
}

/* 6th Container ---------------------------------------------------------------------------------- */


.six {
    margin-top: 12vh;
    width: 100vw;
    padding: 0 13vw;
    display: flex;
    justify-content: center;
    gap: 3vw;
}

.six div {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 50%;
}

.six div img {
    width: 100%;
}

.six div h1 {
    margin-top: 7vh;
    font-size: 5.2vh;
    font-weight: 700;
}
.six div p{
    font-size: 16px;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .six {
        padding: 0 2vw;
        gap: 3vw;
    }

    .six div {
        width: 100%;
    }

    .six div h1 {
        font-size: 4.5vh;
    }
    .six div p{
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    .six {
        flex-direction: column;
        align-items: center;
        padding: 0 5vw;
        gap: 1vh;
    }

    .six div {
        width: 100%;
    }

    .six div img {
        width: 100%;
    }

    .six div h1 {
        font-size: 6vh;
    }
}

@media screen and (max-width: 480px) {
    .six {
        padding: 0 3vw;
    }

    .six div img {
        width: 90%;
        max-width: 300px;
    }

    .six div h1 {
        font-size: 3.5vh;
        margin-top: 5vh;
    }
}

/* Service Container ---------------------------------------------------------------------------------- */


.service-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    margin-top: 10vh;
}
.service-con{
    width: 74%;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.service-con h1 {
    font-size: 2.2em;
    font-weight: bold;
}

.service-con p {
    font-size: 0.95em;
    color: #333;
    margin: 10px auto;
}

.city-name {
    font-size: 1.8em;
    font-weight: bold;
    color: #05B81C;
    margin-top: 20px;
    margin-bottom: 30px;
}
.service-acc {
    width: 74%;
    border: 1px solid #cccccca7;
    overflow: hidden;
}

/* Header Styles */
.accheader {
    background-color: #E3E3E3;
    color: #05B81C;
    height: 40px;
    padding: 15px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
}



/* Icon rotation */
.accheader .icon {
    color: #333;
    font-size: 0.7rem;
    padding: 0px 20px;
    transition: transform 0.3s ease;
}
.sumicon, .sumicon2{
    color: #333;
    font-size: 1rem;
    font-weight: 700;
    padding: 0 15px 0 10px;
    transition: transform 0.3s ease;
}
.sumicon2, .sumicon3{
    position: absolute;
    padding-left: 24px;
    left: 0;
}
/* Active state (when open) */
.accheader.active .icon {
    transform: rotate(90deg);
    color: #fff;
}
.accheader.active .sumicon {
    color: #fff;
}
.accheader.active .sumicon2 {
    transform: rotate(90deg);
    display: none;
    color: #fff;
}

/* Accordion Content */
.acccontent {   
    line-height: 0.9;
    font-size: 14px;
    font-weight: 100;
    max-height: 0;
    color: rgb(69, 69, 69);
    overflow: hidden;
    background-color: #fff;
    padding: 0 15px;
    transition: max-height 0.4s ease-in-out, padding 0.3s ease-in-out;
}

/* When active, allow space for content */
.acccontent.active {
    max-height: 500px; /* Adjust this based on your content length */
    padding: 10px 15px;
}

/* List Styling */
.accordion-content ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0;
}

.accordion-content ul li {
    padding: 5px 0;
}


/* 7th Container ---------------------------------------------------------------------------------- */

.seven{
    margin-top: 10vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.seven h1{
    display: flex;
    justify-content: center;
    padding: 15px;
    font-size: 36px;
    font-weight: 600;
    color: rgb(43,43,43);
}
.seven p{
    width: 80%;
    text-align: center;
    padding: 0 3vw;
    font-size: 15px;
    font-weight: 400;
    color: rgb(43,43,43);
}


/* Responsive Design */
@media (max-width: 1024px) {
    .service-acc {
        width: 95vw;
        padding: 0;
    }
    .seven h1 {
        font-size: 25px; /* Decrease font size for tablets */
    }
    
    .seven p {
        width: 100%;
        font-size: 15px;
    }
    
    .seven img {
        width: 98%;
    }
}
@media (max-width: 768px) {
    .service-acc {
        width: 100;
    }
    .seven h1 {
        font-size: 25px; /* Decrease font size for tablets */
    }
    
    .seven p {
        width: 100%;
        font-size: 15px;
    }
    
    .seven img {
        margin: 0 20px;
    }
}

@media (max-width: 480px) {
    .seven h1 {
        font-size: 1.8rem; /* Further decrease for small screens */
        padding: 10px;
    }
    
    .seven p {
        font-size: 0.85rem;
        padding: 0 10vw; /* More padding for readability */
    }
    
    .seven img {
        width: 100%;
        padding: 0 10px; /* Remove padding to fit the screen */
    }
}

/* FAQ Container ---------------------------------------------------------------------------------- */

.faq-container {
    width: 74%;
    margin: auto;
}


.faq-box {
    border: 1px solid #7575750e; 
    position: relative;
    background: #f1f1f1;
    cursor: pointer;
    padding: 12px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease-in-out;
}
.sumicon3{
    font-size: 17px;
    padding-left: 21.29px;
    transition: none;
}

.faq-box:hover {
    background: #444444;
    color: white;
}
.faq-box:hover span{
    color: white;
}

.faq-box.active {
    background: #4a4a4a;
    color: white;
}


.faq-question {
    font-size: 15px;
}

.faq-icon {
    color: #333;
    font-size: 0.7rem;
    padding: 0px 20px;
    transition: all 0.3s ease-in-out, color 0.3s ease-in-out;
}

.faq-box.active .faq-icon {
    transform: rotate(90deg);
    color: white;
}

.faq-box.active .sumicon {
    color: #fff;
}
.faq-box.active .sumicon3 {
    transform: rotate(0deg);
    display: none;
    color: #fff;
}

.faq-answer {
    height: 0px;
    overflow: hidden;
    opacity: 0;
    padding: 0 15px;
    font-size: 16px;
    color: #333;
    transition:  all 0.2s ease-in-out ;
    border: 0px solid #4a4a4a2e;   

}

.faq-answer.open {
    border: 1px solid #4a4a4a2e;   
    height: auto;
    opacity: 1;
    padding: 15px;
}


/* 8th Container ---------------------------------------------------------------------------------- */


.eight {
    margin-top: 5vh;
    width: 100vw;
    padding: 0 13vw;
    display: flex;
    justify-content: center;
    gap: 3vw;
}

.eight div {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 50%;
}
.eight div>div{
    width: auto;
    height: fit-content;
    display: flex;
    flex-direction: row;
    gap: 10vw;

}

.eight div img {
    width: 100%;
}

.eight div h1 {
    margin-top: 7vh;
    font-size: 5.2vh;
    font-weight: 700;
}
.eight div p{
    font-size: 16px;
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
    .faq-container{
        width: 100%;
        padding: 0 10px;
    }
    .eight {
        padding: 0 2vw;
        gap: 3vw;
    }

    .eight div {
        width: 100%;
    }

    .eight div h1 {
        font-size: 4.5vh;
    }
    .eight div p{
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    .eight {
        flex-direction: column;
        align-items: center;
        padding: 0 5vw;
        gap: 1vh;
    }

    .eight div {
        width: 100%;
    }

    .eight div img {
        width: 100%;
    }

    .eight div h1 {
        font-size: 6vh;
    }
}

@media screen and (max-width: 480px) {
    .eight {
        padding: 0 3vw;
    }

    .eight div img {
        width: 90%;
        max-width: 300px;
    }

    .eight div h1 {
        font-size: 3.5vh;
        margin-top: 5vh;
    }
}

/* 9th Container ---------------------------------------------------------------------------------- */

.nine {
    color: white;
    width: 100%;
    height: 150px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 13vw;
    justify-content: space-between;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 10px; /* Adds spacing when items wrap */
}

/* Adjusts the width of each div */
.nine div {
    text-align: center;
    width: 100px;
}

/* Ensures links remain visible and accessible */
.nine div a {
    cursor: pointer;
    color: white;
    font-weight: 700;
    text-decoration: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .nine {
        padding: 0 5vw; /* Reduce padding on medium screens */
    }
}

@media (max-width: 768px) {
    .nine {
        flex-direction: column; /* Stack items vertically */
        height: auto; /* Allow height to adjust dynamically */
        padding: 20px; /* Add padding for spacing */
        text-align: center;
    }

    .nine div {
        width: 100%; /* Make divs full width */
    }
}

@media (max-width: 480px) {
    .nine {
        padding: 15px;
    }

    .nine div {
        width: auto; /* Allow flexibility */
        margin-bottom: 10px; /* Add spacing */
    }

    .nine div a {
        font-size: 14px; /* Adjust text size for readability */
    }
}

.nine>img{
    top: 0;
    left: 0;
    width: 105%;
    height: 100%;
    position: absolute;
    z-index: -1;
}


/* Footer Container ---------------------------------------------------------------------------------- */


footer{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    color: white;
    padding-top: 10px;
    text-align: center;

}