/* Footer Section */

.footerSection{
    height: fit-content;
    width: 100%;
    padding: 3rem 0;
    background-color: var(--bg-color);
}

.footerSectionContent{
    height: 100%;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footerSecOne{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
}

.footerSecOne .footerLogo{
    height: 100%;
    width: 40%;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    gap: 2rem;
    /* justify-content: center; */
}

.footerSecOne .footerLogo svg{
    height: 50px;
    width: fit-content;
    object-fit: contain;
}

.textContent{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.textContent .footerTagline{
    color: var(--font-color);
    font-size: 46px;
    font-weight: 450;
    line-height: 64px;
}

.footerCtnBtn{
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 56px;
    padding: 6px 18px;
    border: 1px solid #02D1A6;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
.footerCtnBtn img{
    height: 10px;
    width: 10px;
    transition: 0.3s ease-in-out;
}
.footerCtnBtn:hover{
    color: var(--btn-bg-color);
    transition: 0.3s ease-in-out;
}
.footerCtnBtn:hover img{
    transform: rotate(45deg);
    transition: 0.3s ease-in-out;
}

/* .textContent a span svg{
    height: 10px !important;
    width: 10px !important;
    fill: var(--btn-bg-color);
} */


.footerSecOne .footerText{
    padding: 0 6rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    height: fit-content;
}

.footerText a{
    color: var(--text-color-fade);
    font-size: 16px;
    font-weight: 100;
    line-height: 22px;
    width: fit-content;
    /* padding: 1rem; */
    position: relative;
}

.footerText a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: white;
    transition: width 0.3s ease;
}
.footerText a:hover{
    color: var(--font-color);
}

.footerText a:hover::after {
    width: 100%;
}

.footerSecTwo{
    padding: 4rem 0;
    height: 100%;
    width: 100%;
    display: flex;
    gap: 5rem;
    justify-content: space-between;
}

.footerSecTwo .footerAddress{
    display: flex;
    flex-direction: column;
    align-items: start;
    /* justify-content: center; */
    gap: 0.5rem;
    max-width: 200px;
}

.footerSecTwo .footerAddress .footerAddressCity{
    color: var(--font-color);
    font-size: 16px;
    font-weight: 500;
}

.footerSecTwo .footerAddress p{
    color: var(--text-color-fade);
    font-size: 14px;
    font-weight: 100;
    line-height: 22px;
}

.footerSecThree{
    height: 100%;
    width: 100%;
    border-top: 1px solid #E0E0E03D;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 1rem 0 0 0;
    position: relative;
}

.footerSecThreeLeft, .footerSecThreeRight{
    display: flex;
    gap: 2rem;
    z-index: 99;
}

.footerSecThreeCenter{
    position: absolute;
    width: 100%;
    text-align: center;
}

.footerSecThree a{
    color: var(--font-color);
    font-size: 16px;
    font-weight: 400;
    position: relative;
    padding-bottom: 0.1rem;
}

.footerSecThree p{
    color: var(--font-color);
    font-size: 16px;
    font-weight: 400;
}


.footerSecThree a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: white;
    transition: width 0.3s ease;
}

.footerSecThree a:hover::after {
    width: 100%;
}

.footerSecTwoMob{
    display: none;
}

/* Extra small devices (phones, 0px - 575px) */
@media (max-width: 767px) {
    /* Styles for extra small devices */
    .footerSection {
        padding: 1rem 0;
    }
    .footerSecTwo{
        flex-wrap: wrap;
        padding: 2rem 0;
        gap: 2rem;
    }
    .footerSecTwo .footerAddress{
        max-width: 300px;
    }

    .footerSecOne{
        padding: 1rem 0 0 0 ;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
    }
    .footerSecOne .footerText{
        padding: 0;
    }

    .footerSecOne .footerText p{
        font-size: 14px;
        line-height: 22px;
    }
}

@media (max-width: 1399px){
    .footerSecOne{
        align-items: center;
        /* flex-direction: column; */
        gap: 2rem;
        padding: 2rem 0;
    }
    .footerSecOne .footerLogo svg{
        height: 40px;
    }
    .footerSecOne .footerLogo {
    gap: 1rem;
    }
    .footerSecOne .footerText{
        padding: 0;
        text-align: center;
        width: 85%;
    }
    .footerSecTwo{
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat(3, 1fr);
        /* flex-wrap: wrap; */
    }
    .textContent .footerTagline{
        font-size: 26px;
        line-height: 38px;
    }
    .footerCtnBtn{
        font-size: 14px;
        padding: 4px 14px;
    }
}


/* Small devices (phones, 576px - 767px) */
@media (max-width: 767px) {
    .footerSecThree{
        gap: 0.5rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .footerSecOne .footerLogo{
        width: 100%;
        align-items: center;
    }
    .textContent .footerTagline{
        font-size: 32px;
        line-height: 44px;
    }
    .footerSecOne .footerText{
        width: 100%;
    }
        /* .footerSecOne .footerText a{
            padding: 0rem;
        } */

    .footerSecThreeCenter{
        order: 1;
        position: relative;
        width: 100%;
        text-align: center;
    }
    .footerSecThreeCenter p{
        font-size: 14px;
    }

    .footerSecThreeLeft, .footerSecThreeRight{
        gap: 0.5rem;
    }

    .footerSecTwo{
        display: none;
    }

    .footerSecTwoMob{
        display: block;
    }


.accordion-item {
    border-bottom: 1px solid #4b5b6b;
}

.accordion-item:nth-last-child(1){
    border: none;
}

.accordion-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 15px 0;
    color: var(--btn-bg-color);
    font-size: 18px;
    font-weight: bold;
}

.accordion-title .title {
    color: var(--font-color);
    font-weight: 100;
}

.accordion-content {
    overflow: hidden;
    max-height: 0; /* Collapsed height */
    transition: max-height 0.4s ease; /* Smooth transition */
    color: #cfd8dc;
    padding: 0; /* Remove padding initially to avoid visual issues during transition */
    font-size: 14px;
    line-height: 1.5;
}

.accordion-item.open .accordion-content {
    padding: 10px 0 15px 0;
}

.accordion-item.open .toggle-icon {
    color: var(--btn-bg-color);
}
.accordion-item.open .accordion-title .title{
    color: var(--btn-bg-color);
    font-weight: 100;
}

.toggle-icon {
    font-size: 18px;
    color: #4b5b6b;
}

}




/* Medium devices (tablets, 768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    /* Styles for medium devices */
  }
  
  /* Large devices (tablets, 992px - 1199px) */
  @media (min-width: 992px) and (max-width: 1199px) {
    /* Styles for large devices */
  }
  
  /* Extra large devices (large desktops, 1200px - 1399px) */
  @media (min-width: 1200px) and (max-width: 1399px) {
    /* Styles for extra large devices */
  }
  
  /* Ultra-wide devices (very large screens, 1400px and up) */
  @media (min-width: 1400px) {
    /* Styles for ultra-wide devices */
  }