/* ================================================== footer grid system start ================================================ */
/* Footer Row - Container for columns */
.footer-row { display: flex;justify-content: space-between; flex-wrap: wrap; margin-right: -12px; margin-left: -12px; }

/* Footer Column Padding - Bootstrap style gutter */
.footer-row > [class*="footer-col"] { padding-right: 12px; padding-left: 12px; }

/* Base/Mobile First - Default columns (applies to all screen sizes) */
.footer-col-1 { flex: 0 0 auto; width: 8.33333333%; }
.footer-col-2 { flex: 0 0 auto; width: 16.66666667%; }
.footer-col-3 { flex: 0 0 auto; width: 25%; }
.footer-col-4 { flex: 0 0 auto; width: 33.33333333%; }
.footer-col-5 { flex: 0 0 auto; width: 41.66666667%; }
.footer-col-6 { flex: 0 0 auto; width: 50%; }
.footer-col-7 { flex: 0 0 auto; width: 58.33333333%; }
.footer-col-8 { flex: 0 0 auto; width: 66.66666667%; }
.footer-col-9 { flex: 0 0 auto; width: 75%; }
.footer-col-10 { flex: 0 0 auto; width: 83.33333333%; }
.footer-col-11 { flex: 0 0 auto; width: 91.66666667%; }
.footer-col-12 { flex: 0 0 auto; width: 100%; }
/* ================================================== footer grid system end ================================================ */

footer{background-color: var(--gray-02);position: relative;z-index: 1;}
footer .top-footer{padding: 90px 24px 60px;}

/* footer title */
.footer-title-btn {margin-bottom: 100px;}
.footer-title h4{font-size: 34px;line-height:40px;color:var(--gray-04);font-family: var(--ITCAvantGardeProBk-reg);margin-bottom: 10px !important;}
.footer-title h2{font-size: 90px;line-height:94px;color:var(--white);font-family: var(--ITCAvantGardeProBk-bold);margin-bottom: 0;}
/* btn */
.footer-btn{gap:12px;}
.footer-btn a{padding: 17px 38px;font-family: var(--NeuzeitSbook);font-weight: 500;font-size: 18px;line-height: 22px;text-transform: capitalize;transition: all 0.3s ease-in-out;border-radius: 30px;border: 2px solid;}
.footer-btn a::before{display: none;}
.footer-btn a{background-color: var(--gray-03);color: var(--gray-02);border-color: var(--gray-03);}
.footer-btn a:hover{background-color: var(--green);color: var(--white);border-color: var(--green);}
.footer-btn .widget:last-child a{background-color: var(--f0);color: var(--gray-03);border-color: var(--gray-01);}
.footer-btn .widget:last-child a:hover{background-color: var(--green);color: var(--white);border-color: var(--green);}



footer h2{margin-bottom: 22px !important; color: var(--gray); font-family: var(--ITCAvantGardeProMd-med); font-size: 24px; line-height: 28px;}
footer p{color: var(--gray-04);font-family: var(--NeuzeitSbook);position: relative;text-align: start; letter-spacing: 0;font-size: 15px; line-height: 24px; text-transform: none;}
footer a,.footer-contact-info p{font-size: 18px;line-height:26px;color: var(--gray-03);font-family: var(--NeuzeitSbook);position: relative;transition: 0.3s;}
footer a{position: relative;}
footer a:before{content: "";width: 0%;height: 1px;position: absolute;bottom: 0;left: 0;background-color: var(--off-white);transition: 0.3s ease-in-out;}
footer a:hover:before{width: 100%;}
footer a:hover{color: var(--gray-03);}
footer .current-menu-item a{color: var(--gray);}
.footer-logo #menu-social-menu a:before{display: none;}
footer ul{display: flex; flex-direction: column; row-gap: 4px;}
footer ul li{line-height: unset;}

footer .menu-social-menu-container{margin-top: 20px !important;}
footer .menu-social-menu-container a span{font-size: 0;}
footer .menu-social-menu-container ul{display: flex; gap: 10px; flex-direction: row;}
footer .menu-social-menu-container a img{width: 34px; height: 34px;margin: 0; 
    /* filter: brightness(0) saturate(100%) invert(99%) sepia(2%) saturate(5928%) hue-rotate(297deg) brightness(120%) contrast(82%);transition: 0.1s ease-in-out; */
}
footer .menu-social-menu-container a:hover img{filter: brightness(0) saturate(100%) invert(53%) sepia(4%) saturate(1021%) hue-rotate(161deg) brightness(89%) contrast(95%);}

/* ----------- footer logo -----------*/
.footer-logo{max-width: 260px;}
.footer-logo img{height: auto;width: 190px;margin-bottom: 32px;
    /* filter: brightness(0) saturate(100%) invert(99%) sepia(2%) saturate(5928%) hue-rotate(297deg) brightness(120%) contrast(82%); */
}

/* ----------- footer-contact-info -----------*/
.footer-contact-info p{margin-bottom: 18px !important;}
.footer-contact-info p strong{font-weight: 600;}



/* ---------------------------------------------------- bottom footer ------------------------------------------------------ */
.bottom-footer{background-color: var(--green); padding: 7px 0;}
.bottom-footer .container{display: flex; justify-content: center;align-items: center;gap: 20px;}
/* footer-copyright */
.footer-copyright p,.footer-copyright .widget a:link{position: relative; font-size: 14px;line-height:22px;color:var(--gray-04);font-weight: 400;font-family: var(--NeuzeitSbook);}
.footer-copyright p::after{content: ""; position: absolute; border-right: 2px solid var(--white); top: 23%; right: -11px; height: 14px;opacity: 0.6; }
/* footer privacy */
.footer-privacy{gap: 20px;align-items: center;}
.footer-privacy ul{flex-direction: row;gap: 20px;align-items: center;}
.footer-privacy ul li{padding-left: 0;padding-inline: 0;position:relative;}
.footer-privacy ul li::after{content: ""; position: absolute; border-right: 2px solid var(--white); top: 23%; right: -11px; height: 14px;opacity: 0.6; }
.footer-privacy ul li a,.footer-privacy .widget a:link{font-size: 14px;line-height:22px;font-weight: 400;color:var(--gray-04);font-family: var(--NeuzeitSbook);position: relative;}
.footer-privacy ul li a:before,.footer-privacy .widget a:link:before{content: "";width: 0%;height: 1px;position: absolute;bottom: 0;left: 0;background-color: var(--off-white);transition: 0.3s ease-in-out;}
.footer-privacy ul li a:hover:before,.footer-privacy .widget a:link:hover:before{width: 100%;}
/* .footer-privacy ul li a:hover, .footer-privacy .widget a:link:hover{color:var(--gray-02);} */


/* ================================================== media query start ================================================ */
@media screen and (max-width:1199px){
    /* ================================================== footer start ================================================ */
    footer .top-footer{padding: 70px 24px 28px;}
    
    /* footer title */
    .footer-title-btn {margin-bottom: 60px;}
    .footer-title h4{font-size: 30px;line-height:36px;}
    .footer-title h2{font-size: 80px;line-height:84px;margin-bottom: 0;}
    /* btn */
    .footer-btn{gap:12px;}
    .footer-btn a{padding: 15px 30px;font-size: 16px;line-height: 20px;}

    
    footer h2{margin-bottom: 18px !important; font-size: 20px;line-height: 26px;}
    footer p{line-height: 20px;}
    footer a,.footer-contact-info p{font-size: 16px;}

    /* ----------- footer logo -----------*/
    .footer-logo img{width: 130px;margin-bottom: 26px;}
    footer .menu-social-menu-container a img{width: 28px; height: 28px;}

    /* ----------- footer-contact-info -----------*/
    .footer-contact-info p{margin-bottom: 14px !important;}
    
    
}
@media screen and (max-width:991px){
    /* ================================================== footer start ================================================ */
    footer .top-footer{padding: 66px 12px 26px;}

    /* footer title */
    .footer-title-btn {margin-bottom: 40px;}
    .footer-title h4{font-size: 26px;line-height:32px;}
    .footer-title h2{font-size: 70px;line-height:74px;margin-bottom: 0 !important;}
    /* btn */
    .footer-btn{gap:10px;}
    .footer-btn a{padding: 10px 24px;}
    
    footer h2{margin-bottom: 18px !important; font-size: 15px;line-height: 24px;}
    footer p{line-height: 18px;}
    footer a,.footer-contact-info p{font-size: 14px;line-height: 18px;}

    /* ----------- footer logo -----------*/
    .footer-logo img{width: 110px;margin-bottom: 22px;}

    /* ----------- footer-contact-info -----------*/
    .footer-contact-info p{margin-bottom: 15px !important;}
    
    /* =============================================== 
    if use footer variant 2 then add this 
    ================================================ */
    .footer-row{row-gap: 20px;}
    /* social links */
    .menu-social-menu-icon-container ul{margin-top:36px;}
    .menu-social-menu-icon-container li a img{width: 20px; height: 20px;}
}   
@media screen and (max-width:767px){
   /* ================================================== footer start ================================================ */
    footer .top-footer{padding: 62px 24px 24px;}
    .top-footer .footer-row{row-gap: 30px;}
    footer h2{margin-bottom: 15px !important; font-size: 20px;line-height: 26px;}
    footer ul{row-gap: 6px;}

    /* footer title */
    .footer-title-btn {margin-bottom: 40px;row-gap: 30px;padding-inline: 12px;}
    .footer-title h4{font-size: 24px;line-height:30px;}
    .footer-title h2{font-size: 50px;line-height:56px;margin-bottom: 0 !important;}
    /* btn */
    .footer-btn{gap:10px;}
    .footer-btn a{padding: 9px 20px;}
    
    /* ----------- footer logo -----------*/
    .footer-logo img{width: 150px;margin-bottom: 18px;}

    /* ----------- footer-contact-info -----------*/
    .footer-contact-info p{margin-bottom: 14px !important;}

}
@media screen and (max-width:575px){
    /* ================================================== footer start ================================================ */
    footer .top-footer{padding: 60px 12px 22px;}
    .top-footer .footer-row{row-gap: 24px;}
    footer h2{margin-bottom: 14px !important;}
    footer ul{row-gap: 2px;}

    /* ----------- footer logo -----------*/
    .footer-logo img{width: 120px;margin-bottom: 18px;}

    /* ----------- footer-contact-info -----------*/
    .footer-contact-info p{margin-bottom: 12px !important;}

    /* ---------------------------------------------------- bottom footer ------------------------------------------------------ */
    .bottom-footer .container{flex-direction: column;row-gap: 7px;}
    .footer-copyright p::after{display: none;}
}


/* ================================================== footer grid system responsive (Bootstrap 5.3 style - mobile-first) ================================================ */
/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 576px) {
    .footer-col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
    .footer-col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
    .footer-col-sm-3 { flex: 0 0 auto; width: 25%; }
    .footer-col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
    .footer-col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
    .footer-col-sm-6 { flex: 0 0 auto; width: 50%; }
    .footer-col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
    .footer-col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
    .footer-col-sm-9 { flex: 0 0 auto; width: 75%; }
    .footer-col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
    .footer-col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
    .footer-col-sm-12 { flex: 0 0 auto; width: 100%; }
}

/* Medium devices (tablets, 768px and up) - Works from 768px to all larger resolutions */
@media screen and (min-width: 768px) {
    .footer-col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
    .footer-col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
    .footer-col-md-3 { flex: 0 0 auto; width: 25%; }
    .footer-col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
    .footer-col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
    .footer-col-md-6 { flex: 0 0 auto; width: 50%; }
    .footer-col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
    .footer-col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
    .footer-col-md-9 { flex: 0 0 auto; width: 75%; }
    .footer-col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
    .footer-col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
    .footer-col-md-12 { flex: 0 0 auto; width: 100%; }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
    .footer-col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
    .footer-col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
    .footer-col-lg-3 { flex: 0 0 auto; width: 25%; }
    .footer-col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .footer-col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
    .footer-col-lg-6 { flex: 0 0 auto; width: 50%; }
    .footer-col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    .footer-col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
    .footer-col-lg-9 { flex: 0 0 auto; width: 75%; }
    .footer-col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
    .footer-col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
    .footer-col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    .footer-col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .footer-col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .footer-col-xl-3 { flex: 0 0 auto; width: 25%; }
    .footer-col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .footer-col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .footer-col-xl-6 { flex: 0 0 auto; width: 50%; }
    .footer-col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .footer-col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .footer-col-xl-9 { flex: 0 0 auto; width: 75%; }
    .footer-col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .footer-col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .footer-col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* Extra extra large devices (1400px and up) */
@media screen and (min-width: 1400px) {
    .footer-col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
    .footer-col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
    .footer-col-xxl-3 { flex: 0 0 auto; width: 25%; }
    .footer-col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
    .footer-col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .footer-col-xxl-6 { flex: 0 0 auto; width: 50%; }
    .footer-col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
    .footer-col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
    .footer-col-xxl-9 { flex: 0 0 auto; width: 75%; }
    .footer-col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
    .footer-col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
    .footer-col-xxl-12 { flex: 0 0 auto; width: 100%; }
}