:root {
    --Themegreen: #345E52;
    --themeyellow: #FFC513;
    --themegrey: #54595F;
    --themefont: "DM Sans", sans-serif;
    --themefont2: "Bona Nova", serif;
    --Font16px: clamp(14px, 0.833vw, 18px);
    --Font18px: clamp(16px, 0.938vw, 20px);
    --Font20px: clamp(16px, 1.042vw, 22px);
    --Font22px: clamp(18px, 1.146vw, 25px);
    --Font30px: clamp(20px, 1.563vw, 35px);
    --Font35px: clamp(25px, 2.734vw, 40px);
    --Font50px: clamp(30px, 2.604vw, 60px);
    --Button-common-padding: 17px 22px;
}

@media screen and (max-width: 768px){
    
    .banner-section-inner .breadcrumb{
        margin: 15px 0px;
    }

    .container {
        max-width: 97%;
    }

    .header-top-bar{
        display: none;
    }

    header nav{
        display: none;
    }

    header .header-logo img {
        width: 100px;
    }

    .mobile-menu {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: end;
        align-items: center;
    }

    .mobile-menu i{
        font-size: 20px;
        color: var(--Themegreen);
    }

    .banner-section {
        position: relative;
        height: 330px;
        overflow: hidden;
    }

    .banner-section .banner-content h1 br{
         display: none;
    }

    .common-two-cards-section .two-cards-inner-section ul{
        flex-direction: column;
    }

    .common-two-cards-section .two-cards-inner-section ul li {
        width: 100%;
        margin-top: 10px;
    }

    .common-two-cards-section .two-cards-inner-section ul li .two-big-card .text_content_two_card{
        padding: 20px;
    }

    .common-two-cards-section .two-cards-inner-section ul li .two-big-card{
        padding: 15px;
        height: 340px;
    }

    .common-cards-section .common-cards-inner ul {
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

    .common-cards-section .common-cards-inner ul li {
        width: 100%;
    }

    .mid-text-banner-section h2{
        width: 85%;
    }

    .featured-announcement-section .announcement-row-inner ul li .featured-text-col {
        width: 75%;
        padding-left: 5%;
    }

    .featured-announcement-section .announcement-row-inner ul li .featured-inside-cta {
        width: 100%;
        display: flex;
        margin: 20px 0 0 0;
        justify-content: center;
    }

    .featured-announcement-section .announcement-row-inner ul li .featured-date {
        width: 25%;
    }

    .featured-announcement-section .announcement-row-inner ul li{
        flex-wrap: wrap;
    }

    .join-us-section {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .join-us-section .join-us-left-col {
        width: 100%;
        padding: 10% 6.5%;
    }

    .join-us-section .join-us-left-col .join-us-cta img {
        width: 40px;
        margin-left: 40px;
    }

    .join-us-section .join-us-right-col-image {
        width: 100%;
    }

    .join-us-section .join-us-left-col .join-us-cta{
        margin-bottom: 10px;
    }

    footer a.footer-logo img {
        width: 140px;
    }

    footer .footer-social-media ul li a i {
        font-size: 20px;
    }

    footer .row.mt-lg-5.pt-5 {
        gap: 36px;
    }

    footer .sign-in{
        margin-bottom: 30px;
    }

    footer h2{
        margin-bottom: 10px;
    }

    footer .footer-nav-links{
        margin-top: 20px;
    }

    footer .footer-nav-links ul li {
        margin-bottom: 10px;
    }

    footer .row.border-top.py-4{
        flex-direction: column-reverse;
        gap: 20px;
    }

    footer .copyright-row-col-right ul{
        justify-content: center;
        gap: 10px;
    }

    footer .Copyright-text{
        justify-content: center;
    }

    .about-info-section {
        padding: 35px 0px;
    }

    .common-two-cards-section{
        padding: 35px 0px;
    }

    .logo-slider-section{
        padding: 35px 0px;
    }

    .logo-slider-section .owl-dots.disabled{
        top: 15px;
    }

    .common-cards-section{
        padding: 35px 0px;
    }

    .common-cards-section .common-cards-inner {
        margin-top: 35px;
    }

    .featured-announcement-section{
        padding: 35px 0px;
    }

    .featured-announcement-section .announcement-row-inner ul li:last-child{
        padding-bottom: 0;
    }

    .about-info-section h2{
        line-height: 1.6;
    }

    .logo-slider-section .owl-nav.disabled{
        display: none;
    }

    .logo-slider-section .owl-item.active.center img {
        opacity: 1;
        transform: scale(0.9);
    }

    .logo-slider-section h2{
        line-height: 1.4;
    }

    .common-cards-section h2{
        margin-bottom: 15px;
    }

    .mid-text-banner-section{
        padding: 30px 0px;
    }

    .mid-text-banner-section p{
        margin-top: 10px;
    }

    footer {
        padding: 40px 0px 0 0;
    }

    .featured-announcement-section h2{
        padding: 10px 10% 0 10%;
    }
    
    .banner-section-inner {
    height: 515px;
    position: relative;
}

.banner-section-inner .col-lg-6 {
    display: flex
;
    flex-direction: column;
    justify-content: center;
    position: relative;
    height: 46%;
}

.banner-section-inner h1{
    margin-top: 80px;
}

.about-inner-section .counter-number-about-inner ul {
    display: flex;
    gap: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 0;
    margin-top: 60px;
}

.contact-form-section ul li {
    width: 100%;
}

.contact-form-section .contact-form-inner {
    padding: 20px 20px;
    margin-top: 30px;
}

.contact-form-section {
    padding: 32px 0px;
}

.register-now-inner-section {
    border-radius: 20px;
    width: 96%;
    margin: 20px auto;
    padding: 20px 3%;
}

.register-now-inner-section .register-now-tabs-wrapper .nav-pills .nav-link{
    padding: 20px 10px;
}

.register-now-banner-section{
    height: 240px;
}

.register-now-inner-section .register-form-col textarea{
    height: 90px;
    margin-bottom: 10px;
}

.sign-in-form-section-wrapper video{
    height: 230px;
    margin-bottom: 20px;
}

.sign-in-form-section-wrapper .sign-in-form-col .sign-in-logo img {
    width: 190px;
}

.sign-in-form-section-wrapper .form-sign-in .form-row-signin input[type="email"]{
    width: 310px;
}

.sign-in-form-section-wrapper .form-sign-in .form-row-signin input[type="password"]{
    width: 310px;
}

.sign-in-form-section-wrapper .form-sign-in .form-row-signin input{
    width: 310px;
}

.sign-in-form-section-wrapper .form-sign-in {
    margin-top: 24px;
}


.dasboard-main-wrapper .dashboard-left-col {
    background-color: var(--Themegreen);
    width: 100%;
    font-family: var(--themefont);
    margin-bottom: 20px;
}

.dasboard-main-wrapper {
    display: flex;
    flex-direction: column;
}

.dashboard-right-col {
    width: 100%;
    padding-bottom: 0px;
}

.dashboard-right-col .contact-section ul li {
    margin-bottom: 20px;
}

.dashboard-right-col .support-form {
    border-left: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 25px;
    padding-top: 15px;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.dashboard-content{
    flex-direction: column;
}

.family-records h4{
    font-size: 18px;
}

.add-family-member-btn img {
    width: 14px;
    height: 22px;
    object-fit: contain;
}

.user-settings form input[type="submit"]{
    margin: 20px auto 0px auto;
}

.text-danger {
    color: #dc3545 !important;
    font-size: 12px;
    padding-top: 4px;
}

}


@media screen and (min-width: 992px){
    .mobile-menu{
        display: none;
    }
}

@media screen and (min-width: 992px) and (max-width: 1440px){
    .message-section table td{
        font-size: 14px;
        line-height: 1.4;
    }

    .message-section table th{
        font-size: 14px;
        line-height: 1.4;
    }

    .family-records table td{
        font-size: 14px;
        line-height: 1.4;
      }

      .family-records table th{
        font-size: 14px;
        line-height: 1.4;
      }
}

@media screen and (min-width: 1900px){
    .banner-section{
        height: 679px;
    }
}