/* TABLE OF CONTENTS *


**********************************************/

/***

====================================================================
               Fonts
====================================================================

 ***/


 @import url('flaticon.css');
 @import url('font-awesome.css');
 @import url('animate.css');
 @import url('owl.css');
 @import url('jquery.mCustomScrollbar.min.css');
 @import url('jquery.fancybox.min.css');
 @import url('swiper.min.css');
 @import url('animated-headline.css');

 /***

 ====================================================================
     Reset
 ====================================================================

  ***/

 * {
     margin: 0px;
     padding: 0px;
     border: none;
     outline: none;
     font-size: 100%;
 }

 /***

 ====================================================================
     Global Settings
 ====================================================================

  ***/

 :root {
     --body-font: 'Heebo', sans-serif;
     --heading-font:'Manrope', sans-serif;;
     --thm-primary: #0B8B68;
     --thm-black: #222222;
     --thm-gray: #777777;
 }


 body {
     font-size: 16px;
     line-height: 26px;
     color: var(--thm-gray);
     font-weight: 400;
     background: #ffffff;
     font-family: var(--body-font);
     -webkit-font-smoothing: antialiased;
     -moz-font-smoothing: antialiased;
 }

 @media (min-width: 1200px){

     .container {
         max-width: 1200px;
     }

 }


 a {
     text-decoration: none;
     cursor: pointer;
     color: #222;
 }

 a:hover,
 a:focus,
 a:visited {
     text-decoration: none;
     outline: none;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     position: relative;
     font-weight: normal;
     margin: 0px;
     background: none;
     line-height: 1.2em;
     color: var(--thm-black);
     font-family: var(--heading-font);
 }
 textarea {
     overflow: hidden;
 }
 button {
     outline: none !important;
     cursor: pointer;
 }
 .text {
     font-size: 16px;
     line-height: 26px;
     color: #888;
     font-weight: 400;
     margin: 0;
 }
 ::-webkit-input-placeholder {
     color: inherit;
 }
 ::-moz-input-placeholder {
     color: inherit;
 }
 ::-ms-input-placeholder {
     color: inherit;
 }

 .auto-container {
     position: static;
     max-width: 1280px;
     padding: 0px 20px;
     margin: 0 auto;
 }
 .small-container {
     position: relative;
     max-width: 1050px;
     padding: 0px 15px;
     margin: 0 auto;
 }
 .wrapper_box {
     position: relative;
     margin: 0 auto;
     width: 100%;
     min-width: 320px;
     z-index: 9;
 }
 ul,
 li {
     list-style: none;
     padding: 0px;
     margin: 0px;
 }
 .pull-left {
     float: left;
 }
 .pull-right {
     float: right;
 }





 .theme-btn {
     display: inline-block;
     font-size: 16px;
     color: #ffffff;
     background: var(--thm-primary);
     padding: 17px 35px;
     font-weight: 500;
     -webkit-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     transition: all 0.5s ease;
 }
 .theme-btn:hover {
     background: var(--thm-black);
     color: #ffffff;

 }



 .thm-section-title{
     margin-top: -10px;
     margin-bottom: 50px;
 }

 .thm-section-title h2{
     font-size: 42px;
     font-weight: 800;
     line-height: 50px;
     margin-bottom: 16px;
 }
 .thm-section-title p{
     font-size: 16px;
     line-height: 28px;
     margin: 0;
 }




 .icon-search-box>button {
     background: none;
 }
 .icon-search-box form {
     height: 50px;
     width: 280px;
     padding: 5px;
     border-radius: 4px;
     margin: 36px 0 0;
     left: auto;
     right: 0;
     border: none;
     position: absolute;
     right: 0 !important;
     left: inherit !important;
     transform: translate3d(-50px, 64px, 0)!important;
 }
 .icon-search-box form input {
   font-family: 'Raleway', sans-serif;
   font-weight: normal;
   width:100%;
   height:100%;
   background: transparent;
   color:#9e9e9e;
   border:1px solid #f7f7f7;
   padding: 0 47px 0 10px;
   font-size: 15px;
 }
 .icon-search-box form button {
     display: block;
     width: 40px;
     line-height: 40px;
     text-align: center;
     position: absolute;
     top: 5px;
     right: 5px;
     color: #fff;
     background: #000;
 }


 .icon-search-box .dropdown-toggle::after {
     display: none;
 }




 .main-header.two .icon-search-box>button {
     background: none;
     color: #ffffff;
 }

 /*** Scroll To Top style ***/
 .scroll-to-top {
     position: fixed;
     width: 60px;
     height: 60px;
     bottom: 50px;
     right: 50px;
     line-height: 60px;
     font-size: 16px;
     z-index: 99;
     display: none;
     color: #fff;
     text-align: center;
     cursor: pointer;
     -webkit-animation: pulse 2s infinite;
     animation: pulse 2s infinite;
     -webkit-box-shadow: 0px 11px 21.25px 3.75px rgba(0, 0, 0, 0.06);
     box-shadow: 0px 11px 21.25px 3.75px rgba(0, 0, 0, 0.06);
     background: #2a2a2f;
     border-radius: 50%;
     transition: .5s;
 }
 .scroll-to-top span:before {}
 .scroll-to-top:after {
     position: absolute;
     z-index: -1;
     content: '';
     top: 100%;
     left: 5%;
     height: 10px;
     width: 90%;
     opacity: 1;
     background: -o-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
     background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
 }

 .scroll-to-top:hover {
     background-color: var(--thm-primary);
 }

 .preloader {
     position: fixed;
     background-color: #fff;
     background-position: center center;
     background-repeat: no-repeat;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 99999999999;
     display: -webkit-box;
     display: flex;
     -webkit-box-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     align-items: center;
     text-align: center;
 }
.preloader__image {
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
     -webkit-animation-name: flipInY;
     animation-name: flipInY;
     -webkit-animation-duration: 2s;
     animation-duration: 2s;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
 }

/* Delayed page loader: hidden by default so fast page loads never flash an overlay. */
.site-loader{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:rgba(247,250,249,.88);opacity:0;visibility:hidden;pointer-events:none;backdrop-filter:blur(8px);transition:opacity .22s ease,visibility 0s linear .22s}
.site-loader.is-visible{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s ease}
.site-loader-card{display:flex;min-width:180px;flex-direction:column;align-items:center;gap:10px;padding:22px 28px;border:1px solid rgba(8,43,76,.09);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 22px 65px rgba(8,43,76,.14)}
.site-loader-mark{position:relative;display:grid;width:70px;height:70px;place-items:center;border-radius:50%;background:linear-gradient(145deg,#eef8f3,#fff);box-shadow:inset 0 0 0 1px rgba(11,139,104,.09)}
.site-loader-mark::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(11,139,104,.13)}
.site-loader-mark img{display:block;width:70px;height:70px;filter:hue-rotate(66deg) saturate(1.25)}
.site-loader-label{color:#173d34;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.site-loader,.site-loader.is-visible{transition:none}.site-loader-mark img{animation:none}}




 /***
 =========================================
     Mobile Menu
 =========================================
 ***/
 .mobile-menu {
     position: fixed;
     left: -350px;
     top: 0;
     width: 320px;
     padding-right: 30px;
     max-width: 100%;
     height: 100%;
     z-index: 999999;
     -webkit-transform: translate3d(0, 0, 0) !important;
     transform: translate3d(0, 0, 0) !important;
     background-color: #1c1f26;
 }
 .mobile-menu .nav-logo {
     position: relative;
     padding: 20px 20px;
     text-align: left;
 }
 .mobile-menu-visible {
     overflow: hidden;
 }
 .mobile-menu-visible .mobile-menu {
     opacity: 1;
     visibility: visible;
 }
 .mobile-menu .menu-backdrop {
     position: fixed;
     right: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     background: rgba(0, 0, 0, 0.90);
     -webkit-transform: translateX(101%);
     -ms-transform: translateX(101%);
     transform: translateX(101%);
 }
 .mobile-menu-visible .mobile-menu .menu-backdrop {
     opacity: 1;
     visibility: visible;
     -webkit-transition: all 0.7s ease;
     -o-transition: all 0.7s ease;
     transition: all 0.7s ease;
     -webkit-transform: translateX(0%);
     -ms-transform: translateX(0%);
     transform: translateX(0%);
 }
 .mobile-menu .menu-box {
     position: absolute;
     left: 0;
     top: 100px;
     bottom: 80px;
     width: 100%;
     max-height: 100%;
     overflow-y: auto;
     background: #1c1f26;
     padding: 0px 0px;
     border-radius: 0px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 }
 .mobile-menu .menu-box.style-two {
     bottom: 0px;
 }
 .mobile-menu-visible .mobile-menu .menu-box {
     opacity: 1;
     visibility: visible;
     -webkit-transition: all 0.7s ease;
     -o-transition: all 0.7s ease;
     transition: all 0.7s ease;
     -webkit-transform: translateX(0%);
     -ms-transform: translateX(0%);
     transform: translateX(0%);
 }
 .mobile-menu .close-btn {
     position: absolute;
     right: 3px;
     top: 3px;
     line-height: 30px;
     width: 30px;
     text-align: center;
     font-size: 14px;
     color: #202020;
     cursor: pointer;
     z-index: 10;
     -webkit-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     transition: all 0.5s ease;
     -webkit-transform: translateY(-50px);
     -ms-transform: translateY(-50px);
     transform: translateY(-50px);
 }
 .mobile-menu-visible .mobile-menu .close-btn {
     -webkit-transform: translateY(0px);
     -ms-transform: translateY(0px);
     transform: translateY(0px);
 }
 .mobile-menu .close-btn:hover {
     opacity: 0.50;
 }
 .mobile-menu .navigation {
     position: relative;
     width: 100%;
 }
 .mobile-menu .navigation li {
     position: relative;
     display: block;
     border-bottom: 1px solid #2c2f37;
 }
 .mobile-menu .navigation li>ul>li:last-child {
     border-bottom: none;
 }
 .mobile-menu .navigation li>ul>li:first-child {
     border-top: 1px solid rgba(0, 0, 0, 0);
 }
 .mobile-menu .navigation li>a {
     position: relative;
     display: block;
     line-height: 24px;
     padding: 13px 55px;
     font-size: 14px;
     color: #eee;
     text-transform: uppercase;
     font-weight: 500;
 }
 .mobile-menu .navigation li>a:before {
     position: absolute;
     content: '';
     background: #2f333b;
     height: 6px;
     width: 6px;
     left: 30px;
     top: 23px;
 }
 .mobile-menu .navigation li.dropdown .dropdown-btn {
     position: absolute;
     right: 15px;
     top: 0px;
     width: 44px;
     height: 44px;
     text-align: center;
     font-size: 16px;
     line-height: 44px;
     color: #ebebeb;
     cursor: pointer;
     z-index: 5;
     background: #1c1f26;
 }
 .mobile-menu .navigation li.dropdown .dropdown-btn:after {
     content: '';
     position: absolute;
     left: 0px;
     top: 10px;
     width: 1px;
     height: 24px;
     border-left: 1px solid rgba(0, 0, 0, 0.10);
 }
 .mobile-menu .navigation li>ul,
 .mobile-menu .navigation li>ul>li>ul {
     display: none;
 }
 .nav-overlay {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     z-index: 103;
     width: 100%;
     display: none;
     background: rgba(20, 20, 20, 0.70);
     overflow: hidden;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     cursor: zoom-out;
 }


 /* ========= Menu Bar Style =========== */
 /* --------------------------------
  Title: Animated Menu Button
  Descr: A menu button w/ a morphing icon
  -------------------------------- */

 .navbar-btn-wrap {
     position: relative;
     background: #1c1e25;
     text-align: center;
 }
 .anim-menu-btn {
     width: var(--anim-menu-btn-size);
     height: var(--anim-menu-btn-size);
     background: transparent;
     color: #fff;
     position: relative;
 }
 .anim-menu-btn:before {
     position: absolute;
     content: 'MENU';
     font-size: 12px;
     font-weight: 600;
     color: #fff;
     top: 8px;
     left: -60px;
     letter-spacing: 5px;
 }
 .anim-menu-btn__icon {
     position: relative;
     display: block;
     font-size: var(--anim-menu-btn-icon-size);
     width: 1em;
     height: var(--anim-menu-btn-icon-stroke);
     color: var(--color-contrast-high);
     background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
     background-image: -o-linear-gradient(currentColor, currentColor);
     background-image: linear-gradient(currentColor, currentColor);
     background-repeat: no-repeat;
     -webkit-transform: scale(1);
     -ms-transform: scale(1);
     transform: scale(1);
 }
 .anim-menu-btn__icon::before,
 .anim-menu-btn__icon::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0px;
     height: 100%;
     width: 100%;
     background-image: inherit;
     border-radius: inherit;
 }
 .anim-menu-btn__icon--close {
     background-size: 100% 100%;
     will-change: transform, background-size;
     -webkit-transition: background-size 0.2s, -webkit-transform 0.2s;
     transition: background-size 0.2s, -webkit-transform 0.2s;
     -o-transition: transform 0.2s, background-size 0.2s;
     transition: transform 0.2s, background-size 0.2s;
     transition: transform 0.2s, background-size 0.2s, -webkit-transform 0.2s;
 }
 .anim-menu-btn:active .anim-menu-btn__icon--close {
     -webkit-transform: scale(0.9);
     -ms-transform: scale(0.9);
     transform: scale(0.9);
 }
 .anim-menu-btn__icon--close::before,
 .anim-menu-btn__icon--close::after {
     will-change: inherit;
     -webkit-transition: inherit;
     -o-transition: inherit;
     transition: inherit;
 }
 .anim-menu-btn__icon--close::before {
     -webkit-transform: translateY(-0.25em) rotate(0);
     -ms-transform: translateY(-0.25em) rotate(0);
     transform: translateY(-0.25em) rotate(0);
 }
 .anim-menu-btn__icon--close::after {
     -webkit-transform: translateY(0.25em) rotate(0);
     -ms-transform: translateY(0.25em) rotate(0);
     transform: translateY(0.25em) rotate(0);
 }
 .anim-menu-btn--state-b .anim-menu-btn__icon--close {
     background-size: 0% 100%;
 }
 .anim-menu-btn--state-b .anim-menu-btn__icon--close::before {
     -webkit-transform: translateY(0) rotate(45deg);
     -ms-transform: translateY(0) rotate(45deg);
     transform: translateY(0) rotate(45deg);
 }
 .anim-menu-btn--state-b .anim-menu-btn__icon--close::after {
     -webkit-transform: translateY(0) rotate(-45deg);
     -ms-transform: translateY(0) rotate(-45deg);
     transform: translateY(0) rotate(-45deg);
 }



 /*================================================
             Sticky Header
 ==================================================*/

 .sticky-header {
     position: fixed;
     visibility: hidden;
     opacity: 0;
     left: 0px;
     top: 0px;
     width: 100%;
     padding: 0px 0px;
     z-index: 0;
     background: #0B8B68;
     border-bottom: 1px solid #f1f1f1;
     -webkit-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     transition: all 300ms ease;
 }
 .sticky-header .logo {
     padding: 15px 0px;
 }
 .sticky-header .logo a{
     display: inline-block;
 }
 .fixed-header .sticky-header {
     z-index: 99999;
     opacity: 1;
     visibility: visible;
 }

 .main-header .sticky-header .main-menu .navigation>li {
     margin-right: 0px;
     margin: 0px;
     padding: 5px 0;
 }

 .main-header .sticky-header .main-menu .navigation>li>a {
     color: #1c1f26;
     padding: 20px 15px;
     line-height: 30px;
     font-size: 17px;
     font-weight: 600;
     min-height: 0px;
     background: none;
     border: 0px;
     margin-right: 0px;
     text-transform: capitalize;
     -webkit-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     transition: all 300ms ease;
 }

 .main-header .sticky-header .nav-outer .mobile-nav-toggler {
     padding: 19.50px 30px;
 }



 .main-header .sticky-header .main-menu .navigation>li:hover>a,
 .main-header .sticky-header .main-menu .navigation>li.current>a,
 .main-header .sticky-header .main-menu .navigation>li.current-menu-item>a {
     opacity: 1;
     color: var(--thm-primary);
 }





 /***
 ==================================================
     Main Header style
 ==================================================
 ***/
 .main-header {
     position: relative;
     left: 0;
     top: 0;
     width: 100%;
     z-index: 9999;
     background: #fff;
 }
 .main-header .outer-container {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
 }
 .main-header .header-column {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 }



 /*=== Header Top ===*/
 .header_top {
     position: relative;
     background: var(--thm-primary);
     padding: 14px 0 15px;
 }
 .header_top_inner{
     position: relative;
 }
 .header_top_one_box{
     position: relative;
 }
 .header_top_one_box ul{
     display: block;
     overflow: hidden;
 }
 .header_top_one_box ul li{
     position: relative;
     display: inline-block;
     float: left;
     color: #ffffff;
     font-size: 16px;
     line-height: 30px;
     font-weight: 500;
     padding-right: 16px;
     margin-right: 15px;
 }
 .header_top_one_box ul li:last-child{
     margin-right: 0;
     padding-right: 0;
 }
 .header_top_one_box ul li:before{
     position: absolute;
     top: 6px;
     right: 0;
     bottom: 6px;
     width: 1px;
     background: rgba(255,255,255, 0.30);
     content: "";
 }
 .header_top_one_box ul li:last-child:before{
     display: none;
 }
 .header_top_one_box ul li span:before{
     position: relative;
     display: inline-block;
     padding-right: 7px;
 }
 .header_top_one_box ul li a{
     color: #ffffff;
     font-size: 16px;
     font-weight: 500;
 }

 .header_top_two_box{
     position: relative;
     display: block;
 }
 .header_top_two_box .opening_hour {
     position: relative;
     display: block;
     float: left;
     padding-right: 21px;
     margin-right: 20px;
 }
 .header_top_two_box .opening_hour:before{
     position: absolute;
     top: 6px;
     right: 0;
     bottom: 6px;
     width: 1px;
     background: rgba(255,255,255, 0.30);
     content: "";
 }

 .header_top_two_box .opening_hour p{
     color: #ffffff;
     font-size: 16px;
     font-weight: 500;
     margin: 0;
 }
 .header_top_two_box .opening_hour p span{
     display: inline-block;
     padding-right: 7px;
 }


 .header_top_two_box .social_links_1{
     display: inline-flex;
 }
 .social_links_1{
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
 }
 .social_links_1 a+a {
     margin-left: 10px;
 }
 .social_links_1 a{
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
     -webkit-box-pack: center;
     justify-content: center;
     text-align: center;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     color: #ffffff;
     font-size: 16px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }



 /*=== Header Upper ===*/
 .header_upper {
     position: relative;
     background: #fff;
     z-index: 9999;
 }
 .header_upper_inner{
     position: relative;
     display: block;
 }
 .header_upper_one_box{
     position: relative;
 }
 .header_upper_one_box .logo {
     position: relative;
     display: block;
     padding: 25px 0;
 }
 .header_upper_one_box .logo a{
     display: inline-block;
 }

.logo img {
    width: 200px;
 }

 .main-header .nav-outer {
     position: relative;
     padding: 0;
     min-height: 70px;
     margin: 0;
     float: left;
 }
 .nav-outer .mobile-nav-toggler {
     position: relative;
     font-size: 30px;
     line-height: 16px;
     cursor: pointer;
     color: #fff;
     padding: 17.5px 12px 9px;
     right: 0;
     background-color: var(--thm-primary);
     top: 13px;
     border-radius: 5px;
 }
 .main-header .nav-outer .nav-inner {
     position: relative;
     background-color: #fff;
 }
 .main-header .nav-outer .nav-inner.close-menu {
     pointer-events: none;
 }
 .main-header .main-box {
     position: relative;
     float: left;
     left: 0px;
     top: 0px;
     -webkit-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     transition: all 300ms ease;
 }


 .header_upper_two_box .icon-search-box {
     position: relative;
     display: block;
     padding: 35px 0;
     float: right;
     margin-left: 100px;
 }



 .main-menu {
     position: relative;
 }
 .main-menu .navbar-collapse {
     padding: 0px;
 }
 .main-menu .navigation {
     position: relative;
     margin: 0px;
 }
 .main-menu .navigation>li {
     position: relative;
     float: left;
     padding: 40px 0px;
     margin-right: 50px;
     -webkit-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     transition: all 300ms ease;
 }
 .main-menu.two .navigation>li {
     padding: 25px 0;
 }
 .main-menu .navigation>li:last-child{
     margin-right: 0;
 }
 .main-menu .navigation>li>a {
     position: relative;
     display: block;
     text-align: center;
     padding: 0px 0px;
     font-size: 17px;
     line-height: 20px;
     font-weight: 600;
     color: #201630;
     opacity: 1;
     text-transform: capitalize;
     -webkit-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     transition: all 300ms ease;
 }
 .main-menu .navigation>li:hover>a,
 .main-menu .navigation>li.current>a {
     color: var(--thm-primary);
 }

 .main-menu .navigation>li>ul {
     position: absolute;
     left: 0px;
     top: 110%;
     width: 245px;
     z-index: 100;
     opacity: 1;
     padding: 20px 0 20px;
     background: #fff;
     border-top: 1px solid #fff;
     -webkit-transition: all 200ms linear;
     -o-transition: all 200ms linear;
     transition: all 200ms linear;
     -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
 }
 .main-menu .navigation>li>ul>li {
     position: relative;
     width: 100%;
     padding: 0 30px;
 }
 .main-menu .navigation>li>ul>li>a {
     position: relative;
     display: block;
     padding: 10px 0px;
     line-height: 19px;
     font-weight: 500;
     font-size: 17px;
     text-align: left;
     color: #222;
     text-transform: capitalize;
     -webkit-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     transition: all 300ms ease;
 }
 .main-menu .navigation>li>ul>li:hover>a {
     color: var(--thm-primary);
     text-decoration: underline;
 }


 .main-menu .navigation>li>ul>li.dropdown>a:after {
     font-family: 'Font Awesome 5 Brands';
     content: "\f078";
     position: absolute;
     right: 0px;
     top: 9px;
     width: 10px;
     display: block;
     line-height: 19px;
     font-size: 16px;
     color: #000;
     font-weight: normal;
     text-align: center;
     z-index: 5;
 }

 .main-menu .navigation>li>ul>li>ul {
     position: absolute;
     left: 110%;
     top: 0;
     width: 225px;
     z-index: 100;
     opacity: 1;
     padding: 20px 0 30px;
     background: #fff;
     border-top: 1px solid #fff;
     -webkit-transition: all 200ms linear;
     -o-transition: all 200ms linear;
     transition: all 200ms linear;
     -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
 }
 .main-menu .navigation>li>ul>li>ul>li {
     position: relative;
     width: 100%;
     padding: 0 25px;
 }
 .main-menu .navigation>li>ul>li>ul>li>a {
     position: relative;
     display: block;
     padding: 10px 0px;
     line-height: 19px;
     font-weight: 400;
     font-size: 14px;
     text-align: left;
     color: #888;
     border-bottom: 1px solid rgba(255, 255, 255, 0.10);
     text-transform: capitalize;
     -webkit-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     transition: all 300ms ease;
     text-transform: uppercase;
 }
 .main-menu .navigation>li>ul>li>ul>li>a:hover {
     color: var(--thm-primary);
 }
 .main-menu .navigation>li>ul>li>ul>li:last-child>a {
     border-bottom: 0;
 }


 .main-menu .navigation>li.dropdown:hover>ul {
     -webkit-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     transition: all 300ms ease;
     visibility: visible;
     opacity: 1;
     top: 100%;
     margin-top: 5px;
 }
 .main-menu .navigation>li>ul>li:hover>ul {
     visibility: visible;
     opacity: 1;
     left: 100%;
     margin-left: 5px;
     transition: all 500ms ease;
     -moz-transition: all 500ms ease;
     -webkit-transition: all 500ms ease;
     -ms-transition: all 500ms ease;
     -o-transition: all 500ms ease;
 }
 .main-menu .navigation>li>ul>li.dropdown>ul.from-right {
     left: auto;
     right: 110%;
 }
 .main-menu .navigation>li>ul>li.dropdown:hover>ul.from-right {
     left: auto;
     right: 100%;
 }
 .main-menu .navbar-collapse>ul li.dropdown .dropdown-btn {
     position: absolute;
     right: 10px;
     top: 8px;
     width: 34px;
     height: 30px;
     border: 1px solid #ffffff;
     text-align: center;
     font-size: 16px;
     line-height: 26px;
     color: #ffffff;
     cursor: pointer;
     z-index: 5;
     display: none;
 }
 .main-header .outer-box {
     position: absolute;
     right: 0;
     top: 0;
 }



 /* Nav Toggler */
 .main-header .nav-toggler {
     position: relative;
     text-align: center;
 }
 .main-header .nav-toggler .nav-btn {
     position: relative;
     color: #ffffff;
     font-size: 28px;
     line-height: 39px;
     padding: 15px 0;
     width: 80px;
     font-weight: normal;
     background: none;
 }
 .main-header .nav-toggler .nav-btn .icon {
     display: inline-block;
 }



 /***
 ==================================================
     Main Header Two Css
 ==================================================
 ***/
 .main-header.two {
     position: absolute;
     background: none;
 }
 .main-header.two .header_top_one_box {
     padding: 6px 0;
 }
 .main-header.two .header_top_one_box h4 {
     font-size: 16px;
     color: #ffffff;
     margin: 0;
 }

 .header_upper-two{}
 .header_upper-two_inner {
     position: relative;
     display: block;
     padding: 40px 0;
 }
 .header_upper_two_box{
     position: relative;
     display: block;
 }
 .header_upper_two_box .logo {
     padding: 5px 0;
 }
 .header_upper_two-right_box{}
 .header_upper_two-right_box ul {
     float: left;
     display: block;
 }
 .header_upper_two-right_box ul li {
     position: relative;
     display: block;
     float: left;
     padding-left: 60px;
     margin-right: 50px;
     padding-top: 2px;
     padding-bottom: 2px;
 }
 .header_upper_two-right_box ul li:last-child{
     margin-right: 0;
 }
 .header_upper_two-right_box ul li .address_icon {
     position: absolute;
     top: 0;
     left: 0;
 }
 .header_upper_two-right_box ul li .address_icon span {
     font-size: 40px;
     color: var(--thm-primary);
     line-height: 60px;
 }
 .header_upper_two-right_box ul li .address_title{}
 .header_upper_two-right_box ul li .address_title h6 {
     font-size: 16px;
     font-weight: 600;
     line-height: 26px;
 }
 .header_upper_two-right_box ul li .address_title p{
     font-size: 16px;
     color: var(--thm-black);
     margin: 0;
 }
 .header_upper_two_box-btn {
     display: block;
     float: right;
     margin-left: 45px;
 }
 .header_upper_two_box-btn a {
     font-size: 16px;
     color: var(--thm-primary);
     text-transform: uppercase;
     font-weight: 500;
     border-radius: 6px;
     background-color: rgb( 255, 255, 255 );
     box-shadow: 0px 0px 50px 0px rgb( 0, 0, 0, .10 );
     display: inline-block;
     padding: 15px 40px;
 }


 .main-header-two-nav-box {
     position: relative;
     display: block;
 }
 .main-header-two-nav-box-inner{
     position: relative;
     display: block;
     background: #112540;
     padding: 0 30px;
 }
 .main-header-two-nav-box .nav-outer{
     float: left;
 }
 .main-header-two-nav-box .icon-search-box {
     padding: 22px 0;
     float: right;
 }
 .main-header-two-nav-box .icon-search-box a{
     color: #ffffff;
 }
 .main-header-two-nav-box .nav-outer .nav-inner{
     background: transparent;
 }
 .main-menu.two .navigation>li>a {
     color: #ffffff;
 }
 .main-menu.two .navigation>li:hover>a,
 .main-menu.two .navigation>li.current>a {
     color: var(--thm-primary);
 }






















 /***
 ====================================================================
     Banner Section
 ====================================================================
 ***/

 .banner-section {
     position: relative;
 }

 .three-item-carousel,
 .banner-slider {
     position: relative;
     height: 100% !important;
     z-index: 9;
 }

 .banner-section .swiper-slide {
     position: relative;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }

 .banner-section .swiper-slide:before {position: absolute;top: -260px;left: 207px;bottom: -260px;width: 250px;background: var(--thm-primary);opacity: 0.6;z-index: 0;content: "";transform: rotate(34deg);}

 .banner-section .content-outer {
     position: relative;
     top: 0;
     left: 0;
     right: 0;
     margin: 0 auto;
     height: 100%;
     width: 100%;
     display: table;
     vertical-align: middle;
 }

 .banner-section .content-box {
     position: relative;
     display: table-cell;
     vertical-align: middle;
     padding: 153px 0 162px;
 }

 .banner-section .content-box .inner {
     position: relative;
     width: 100%;
     opacity: 0;
     -webkit-transform: translateX(100px);
     -ms-transform: translateX(100px);
     transform: translateX(100px);
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 15px;
 }

 .banner-section .swiper-slide-active .content-box .inner {
     opacity: 1;
     -webkit-transition: all 500ms ease;
     -o-transition: all 500ms ease;
     transition: all 500ms ease;
     -webkit-transform: translateX(0px);
     -ms-transform: translateX(0px);
     transform: translateX(0px);
 }

 .banner-section .content-box .inner:before {
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 100%;
     background-repeat: repeat;
     background-position: center;
     content: "";
 }

 .banner-section .content-box h1 {
     position: relative;
     color: #ffffff;
     font-size: 72px;
     line-height: 80px;
     font-weight: 800;
     opacity: 0;
     visibility: hidden;
     -webkit-transition: all 500ms ease;
     -o-transition: all 500ms ease;
     transition: all 500ms ease;
     -webkit-transform: translateY(-20px);
     -ms-transform: translateY(-20px);
     transform: translateY(-20px);
     margin-bottom: 30px;
 }

 .banner-section .swiper-slide-active .content-box h1 {
     opacity: 1;
     visibility: visible;
     -webkit-transition-delay: 800ms;
     -o-transition-delay: 800ms;
     transition-delay: 800ms;
     -webkit-transform: translateY(0px);
     -ms-transform: translateY(0px);
     transform: translateY(0px);
 }

 .banner-section h4 {
     position: relative;
     display: block;
     font-size: 22px;
     line-height: 32px;
     color: #ffffff;
     margin-bottom: 35px;
     font-weight: 500;
     opacity: 0;
     visibility: hidden;
     -webkit-transition: all 500ms ease;
     -o-transition: all 500ms ease;
     transition: all 500ms ease;
     -webkit-transform: translateY(20px);
     -ms-transform: translateY(20px);
     transform: translateY(20px);
     width: -webkit-max-content;
     width: -moz-max-content;
     width: max-content;
 }

 .banner-section .swiper-slide-active h4 {
     opacity: 1;
     visibility: visible;
     -webkit-transition-delay: 1200ms;
     -o-transition-delay: 1200ms;
     transition-delay: 1200ms;
     -webkit-transform: translateY(0px);
     -ms-transform: translateY(0px);
     transform: translateY(0px);
 }



 .banner-section h4.style-two {
     padding-bottom: 0px;
 }

 .banner-section h4.style-two:after,
 .banner-section h4.style-two:before {
     display: none;
 }

 .banner-section .content-box .text {
     position: relative;
     font-size: 18px;
     line-height: 30px;
     color: #ffffff;
     font-weight: 400;
     opacity: 0;
     visibility: hidden;
     -webkit-transition: all 500ms ease;
     -o-transition: all 500ms ease;
     transition: all 500ms ease;
     -webkit-transform: translateX(-50px);
     -ms-transform: translateX(-50px);
     transform: translateX(-50px);
 }

 .banner-section .swiper-slide-active .text {
     opacity: 1;
     visibility: visible;
     -webkit-transition-delay: 1600ms;
     -o-transition-delay: 1600ms;
     transition-delay: 1600ms;
     -webkit-transform: translateX(0px);
     -ms-transform: translateX(0px);
     transform: translateX(0px);
 }

 .banner-section .link-box {
     padding-top: 30px;
     -webkit-transform: scaleY(0);
     -ms-transform: scaleY(0);
     transform: scaleY(0);
     -webkit-transition: all 500ms ease;
     -o-transition: all 500ms ease;
     transition: all 500ms ease;
     -webkit-transition-delay: 2000ms;
     -o-transition-delay: 2000ms;
     transition-delay: 2000ms;
     -webkit-transform-origin: bottom;
     -ms-transform-origin: bottom;
     transform-origin: bottom;
 }

 .banner-section .swiper-slide-active .link-box {
     -webkit-transform: scale(1);
     -ms-transform: scale(1);
     transform: scale(1);
 }

 .banner-section .link-box a {
     -webkit-transition: .5s ease;
     -o-transition: .5s ease;
     transition: .5s ease;
 }
 .banner-section .link-box a.right-btn{
     background: #ffffff;
     color: var(--thm-primary);
     padding-left: 40px;
     padding-right: 40px;
     margin-left: 25px;
 }
 .banner-section .link-box a.right-btn:hover{
     background: var(--thm-primary);
     color: #ffffff;
 }
 /* Banner Slider Option */


 .banner-section .banner-slider-nav {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
 }

 .banner-section .banner-slider-button-next {
     position: relative;
     width: 60px;
     height: 60px;
     line-height: 60px;
     border-radius: 50%;
     text-align: center;
     color: #ffffff;
     cursor: pointer;
     z-index: 9;
     margin-right: 40px;
     font-size: 25px;
     background-color: rgba(255, 255, 255, 0.3);
     transition: .5s;
 }

 .banner-section .banner-slider-button-prev {
     position: relative;
     width: 60px;
     height: 60px;
     line-height: 60px;
     border-radius: 50%;
     text-align: center;
     color: #ffffff;
     cursor: pointer;
     z-index: 9;
     margin-left: 40px;
     font-size: 25px;
     background-color: rgba(255, 255, 255, 0.3);
     transition: .5s;
 }



 /***

 ====================================================================
     Banner Section Two
 ====================================================================

 ***/

 .banner-section.two {
     margin-top: 235px;
 }

 .banner-section.two .content-box{
     padding: 214px 0 192px;
 }
















 /***

 ====================================================================
         About Us One Section
 ====================================================================

 ***/
 .about-us-one-section {
     position: relative;
     display: block;
     background: #f7f8f9;
     padding: 100px 0 100px;
 }
 .about-us-left {
     position: relative;
     display: block;
     margin-right: 30px;
 }
 .about-us-left .about-us-img{
     position: relative;
     display: block;
 }
 .about-us-left .about-us-img img{
     width: 100%;
     border-radius: 5px;
 }
 .about-us-left .experience-years {
     position: absolute;
     bottom: 50px;
     left: 50%;
     right: 0;
     transform: translateX(-50%);
     background: rgba(255, 255, 255, .90);
     display: flex;
     align-items: center;
     padding: 20px 24px;
     max-width: 305px;
     width: 100%;
     border-radius: 5px;
 }
 .about-us-left .experience-years .year{}
 .about-us-left .experience-years .year h3 {
     font-size: 50px;
     color: var(--thm-primary);
     font-weight: 700;
     line-height: 60px;
 }
 .about-us-left .experience-years .text{
     margin-left: 15px;
 }
 .about-us-left .experience-years .text p {
     font-size: 18px;
     color: var(--thm-black);
     font-weight: 600;
     margin: 0;
 }

 .about-us-right {
     position: relative;
     display: block;
     margin-top: -10px;
 }
 .about-us-right .title{}
 .about-us-right .title h2 {
     font-size: 40px;
     font-weight: 600;
     line-height: 48px;
     margin-bottom: 22px;
 }
 .about-us-right .title p {
     margin: 0;
 }
 .about-us-right .description{}
 .about-us-right .description h5 {
     font-size: 20px;
     font-weight: 600;
     line-height: 30px;
     margin-top: 22px;
     margin-bottom: 13px;
 }
 .about-us-right .description p{
     margin: 0;
 }
 .ceo-founder-details {
     display: flex;
     align-items: center;
     margin-top: 20px;
 }
 .ceo-founder-details .ceo-founder-img{
     width: 60px;
     height: 60px;
     border-radius: 50%;
 }
 .ceo-founder-details .ceo-founder-img img{
     width: 100%;
     border-radius: 50%;
 }
 .ceo-founder-details .ceo-founder-content{
     margin-left: 25px;
 }
 .ceo-founder-details .ceo-founder-content h3 {
     font-size: 16px;
     color: var(--thm-black);
     text-transform: uppercase;
     font-weight: 500;
     line-height: 26px;
 }
 .ceo-founder-details .ceo-founder-content span{
     color: var(--thm-primary);
 }

 /***

 ====================================================================
         Features One Section
 ====================================================================

 ***/
 .features-one-section{
     position: relative;
     display: block;
     padding: 100px 0 100px;
 }
 .features-one-sec-single {
     position: relative;
     display: block;
     text-align: center;
     background: #ffffff;
     padding: 40px 25px 30px;
     border-radius: 5px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
     border: 1px solid #eee;
 }

 .features-one-sec-icon{
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto;
    transition: .5s;
    background: #ffffff;
    border: 5px solid #fcfcfc;
    box-shadow: 0 0 5px rgb(0 0 0 / 0.15);
 }
 .features-one-sec-single:hover .features-one-sec-icon {
     transform: translateY(-5px);
 }
 .features-one-sec-icon span {
     font-size: 56px;
     color: #222;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 span.flaticon-paint-roller:before {
     left: 7px;
     position: relative;
     top: 4px;
 }

 .features-one-sec-single h3 {
     font-size: 20px;
     font-weight: 600;
     line-height: 30px;
     margin-top: 23px;
     margin-bottom: 14px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }

 .features-one-sec-single p{
     font-size: 16px;
     margin: 0;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }


 /***

 ====================================================================
         Features One Section
 ====================================================================

 ***/
 .video-one-section {
     position: relative;
     display: block;
     background-repeat: no-repeat;
     background-position: center center;
     padding: 100px 0 250px;
     z-index: 1;
     background-size: cover;
     z-index: 1;
 }
 .video-one-section:before{
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     content: "";
     background: rgba(0, 0, 0, .50);
 }
 .video-one-sec-content {
     position: relative;
     display: block;
     max-width: 515px;
     margin: 0 auto;
     width: 100%;
 }
 .video-one-sec-inner{
     position: relative;
     display: block;
     text-align: center;
 }
 .video-one-sec-inner h2 {
     font-size: 40px;
     color: #ffffff;
     font-weight: 700;
     line-height: 50px;
     margin-bottom: 30px;
 }
 .video-one-sec-inner p {
     font-size: 16px;
     color: #ffffff;
     margin: 0;
     line-height: 26px;
 }
 .video-one-sec-inner .video-one-sec-btn {
     position: relative;
     width: 90px;
     height: 90px;
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
     -webkit-box-pack: center;
     justify-content: center;
     text-align: center;
     font-size: 24px;
     color: #ffffff;
     margin-left: auto;
     margin-right: auto;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
     border-radius: 50%;
     border: 3px solid #ffffff;
     margin-top: 42px;
 }

 /***

 ====================================================================
         Main Sevice One Section
 ====================================================================

 ***/
 .main-service-one-section {
     position: relative;
     display: block;
     padding: 0 0 70px;
     margin-top: -145px;
     z-index: 2;
 }
 .main-service-one-sec-single{
     position: relative;
     display: block;
     margin-bottom: 30px;
 }
 .main-service-one-sec-img{
     position: relative;
     display: block;
     overflow: hidden;
 }
 .main-service-one-sec-img img {
     width: 100%;
     border-top-right-radius: 5px;
     border-top-left-radius: 5px;
     transition: .5s;
 }
 .main-service-one-sec-single:hover .main-service-one-sec-img img {
     transform: scale(1.1);
 }
 .main-service-one-sec-content{
     position: relative;
     display: block;
     padding: 38px 40px 40px;
     background-color: rgb( 255, 255, 255 );
     box-shadow: 0px 50px 90px 0px rgb( 26, 46, 85, .10);
 }
 .main-service-one-count {
    position: absolute;
    top: 30px;
    right: 40px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgb(0 0 0 / 29%);
    color: transparent;
    z-index: 99;
    font-family: var(--heading-font);
    font-size: 36px;
    font-weight: 800;
}
 .main-service-one-sec-content h4 {
    display: inline-block;
    font-size: 16px;
    background-color: var(--thm-primary);
    font-weight: 400;
    line-height: 26px;
    color: #fff;
    padding: 3px 20px;
    margin-bottom: 7px;
 }
 .main-service-one-sec-content h3 {
     font-size: 20px;
     font-weight: 800;
     line-height: 32px;
     margin-top: 10px;
     margin-bottom: 8px;
 }
 .main-service-one-sec-content p{
     margin: 0;
 }
 .main-service-one-btn {
     margin-top: 30px;
 }
 .main-service-one-btn .theme-btn {
     padding: 10px 30px;
     background-color: #222;
 }
 .main-service-one-btn .theme-btn:hover {
     background-color: var(--thm-primary);
 }
 .main-service-one-icon {
    font-size: 70px;
    margin-bottom: 25px;
    color: var(--thm-primary);
    line-height: 70px;
}

 /***

 ====================================================================
         Funfacts One Section
 ====================================================================

 ***/
 .funfacts-one-section {
     position: relative;
     display: block;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     padding: 131px 0 98px;
 }
 .funfacts-one-single {
     display: flex;
     align-items: center;
     margin-bottom: 30px;
     background: #fff;
     padding: 27px;
     padding-right: 10px;
     border-radius: 5px;
 }
 .funfacts-one-single .icon{}
 .funfacts-one-single .icon span{
     font-size: 50px;
     color: var(--thm-primary);
 }
 .funfacts-one-single .content{
     margin-left: 15px;
 }
 .funfacts-one-single .content h2 {
     color: #161616;
     font-size: 50px;
     line-height: 60px;
     font-weight: 800;
     margin-bottom: 8px;
 }
 .funfacts-one-single .content p{
     font-size: 18px;
     color: #000000;
     line-height: 26px;
     margin: 0;
 }

 /***

 ====================================================================
         Portfolio One Section
 ====================================================================

 ***/
 .portfolio-one-section{
     position: relative;
     display: block;
     padding: 100px 0 70px;
 }
 .portfolio-one-content{}
 .portfolio-one-content .filters {
     position: relative;
     margin-bottom: 25px;
 }
 .portfolio-one-content .filter-tabs{
     position: relative;
 }
 .portfolio-one-content .filter-tabs li{
 position: relative;
     display: inline-block;
     padding: 12px 30px 12px;
     color: #222222;
     font-size: 18px;
     font-weight: 500;
     margin: 0px 5px 10px;
     text-transform: capitalize;
     cursor: pointer;
     transition: all 300ms ease;
     -webkit-transition: all 300ms ease;
     -ms-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     z-index: 1;
 }
 .portfolio-one-content .filter-tabs li:before{
     position: absolute;
     content: '';
     top: 0;
     left: 0px;
     bottom: 0px;
     right: 0px;
     background-color:#ffffff;
     transition: all 300ms ease;
     -webkit-transition: all 300ms ease;
     -ms-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     z-index: -1;
 }
 .portfolio-one-content .filter-tabs li.active,
 .portfolio-one-content .filter-tabs li:hover{
     color: #ffffff;
 }
 .portfolio-one-content .filter-tabs li.active::before,
 .portfolio-one-content .filter-tabs li:hover::before{
     background-color:var(--thm-primary);
     -moz-transform:none;
     -webkit-transform:none;
     -o-transform:none;
     -ms-transform:none;
     transform:none;
     -moz-transform: skew(-15deg, 0deg);
     -webkit-transform: skew(-15deg, 0deg);
     -o-transform: skew(-15deg, 0deg);
     -ms-transform: skew(-15deg, 0deg);
     transform: skew(-15deg, 0deg);
 }

 .portfolio-one-single{
     position: relative;
     display: block;
     margin-bottom: 30px;
     overflow: hidden;
 }
 .portfolio-one-img-box{
     position: relative;
     display: block;
 }
 .portfolio-one-img-box:before{
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     content: "";
     background: rgba(0,0,0, .75);
     transform: scaleX(0);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .portfolio-one-single:hover .portfolio-one-img-box:before{
     transform: scaleX(1);
 }
 .portfolio-one-img-box img {
     width: 100%;
 }
 .portfolio-two-icon-box {
     display: flex;
     -webkit-box-align: center;
     align-items: center;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     justify-content: center;
     transform: scale(0);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .portfolio-one-single:hover .portfolio-two-icon-box{
     transform: scale(1);
 }
 .portfolio-two-icon-box a{
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
     -webkit-box-pack: center;
     justify-content: center;
     text-align: center;
     width: 60px;
     height: 60px;
     background-color: var(--thm-primary);
     color: #ffffff;
     font-size: 16px;
     border-radius: 50%;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .portfolio-two-icon-box a+a{
     margin-left: 10px;
 }
 .portfolio-two-icon-box a:hover{
     background: #ffffff;
     color: var(--thm-primary);
 }
 .portfolio-text {
     position: absolute;
     bottom: 20px;
     left: 50%;
     right: 0;
     transform: translateX(-50%) translateY(80px);
     text-align: center;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .portfolio-one-single:hover .portfolio-text{
     transform: translateX(-50%) translateY(0);;
 }
 .portfolio-text h4{
     font-size: 14px;
     color: #ffffff;
     line-height: 25px;
     font-weight: 600;
 }
 .portfolio-text p{
     font-size: 16px;
     color: var(--thm-primary);
     margin: 0;
 }





















 /***

 ====================================================================
         Testimonials One Section
 ====================================================================

 ***/
 .testimonials-one-section{
     position: relative;
     display: block;
     background: #f4f4f4;
     padding: 100px 0 120px;
 }
 .testimonials-one-carousel{}
 .testimonials-one-single {
     position: relative;
     display: block;
     background: #ffffff;
     padding: 55px 45px;
     border-radius: 15px;
 }
 .testimonials-one-single .client-info {
     display: flex;
     align-items: center;
     margin-bottom: 17px;
 }
 .testimonials-one-single .client-info .client-img{}
 .testimonials-one-single .client-info .client-img img{}
 .testimonials-one-single .client-info .client-content{
     margin-left: 20px;
 }
 .testimonials-one-single .client-info .client-content h3 {
     font-size: 22px;
     font-weight: 700;
     line-height: 32px;
 }
 .testimonials-one-single .client-info .client-content h6{
     font-size: 15px;
     color: var(--thm-primary);
     line-height: 25px;
     font-weight: 700;
 }
 .testimonials-one-single .text-box{}
 .testimonials-one-single .text-box p {
     font-size: 16px;
     color: #9e9e9e;
     margin: 0;
     line-height: 28px;
 }
 .testimonials-one-single .testimonials-quote {
     position: absolute;
     bottom: 22px;
     right: 30px;
     z-index: 0;
 }
 .testimonials-one-single .testimonials-quote i {
     font-size: 50px;
     color: #f4f4f4;
 }

 .testimonials-one-carousel.owl-carousel .owl-dots {
     position: absolute;
     bottom: -50px;
     left: 50%;
     transform: translateX(-50%);
 }
 .testimonials-one-carousel.owl-carousel .owl-dots .owl-dot{
     position: relative;
     display: inline-block;
     width: 10px;
     height: 10px;
     background: transparent;
     border: 1px solid var(--thm-primary);
     margin: 0px 5px;
     padding: 0px;
     border-radius: 50%;
     transition: all 100ms linear;
     transition-delay: 0.1s;
 }
 .testimonials-one-carousel.owl-carousel .owl-dot.active{
     background: var(--thm-primary);
 }

 .testimonials-one-carousel.owl-carousel .owl-dots .owl-dot span{
     display: none;
 }

 /***

 ====================================================================
         Factory Solutions One Section
 ====================================================================

 ***/
 .factory-solutions-one-section {
     position: relative;
     display: block;
     padding: 120px 0 420px;
 }
 .factory-solutions-one-section-bg{
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background-position: center center;
     background-repeat: no-repeat;
 }
 .factory-solutions-one-section-bg:before{
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     content: "";
     background: rgba(0,0,0, .70)
 }
 .factory-solutions-one-inner{
     position: relative;
     display: block;
     text-align: center;
 }
 .factory-solutions-one-inner h2{
     font-size: 40px;
     color: #ffffff;
     line-height: 50px;
     font-weight: 600;
 }
 .factory-solutions-one-inner span{
     color: var(--thm-primary);
 }

 /***

 ====================================================================
         Why Choose One Section
 ====================================================================

 ***/

 .why-choose-two-section.one {
     padding: 0 0 0;
     margin-top: -300px;
 }




 /***

 ====================================================================
         Team One Section
 ====================================================================

 ***/
 .team-one-section{
     position: relative;
     display: block;
     padding: 100px 0 70px;
 }
 .team-one-single{
     position: relative;
     display: block;
     margin-bottom: 30px;
 }
 .team-one-img {
     position: relative;
     display: block;
 }
 .team-one-img:before{
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background: rgba(0, 0, 0, .40);
     content: "";
     transform: scale(0);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .team-one-single:hover .team-one-img:before{
     transform: scale(1);
 }
 .team-one-img img{
     width: 100%;
 }
 .team-one-hover {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
 }
 .team-one-social{
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
     transform: translateY(70px);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .team-one-single:hover .team-one-social{
     transform: translateY(0);
 }
 .team-one-social a{
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
     -webkit-box-pack: center;
     justify-content: center;
     text-align: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background-color: #2d3247;
     color: #ffffff;
     font-size: 15px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .team-one-social a:hover{
     background: var(--thm-primary);
 }
 .team-one-social a+a{
     margin-left: 10px;
 }
 .team-one-content {
     position: relative;
     display: block;
     text-align: center;
     padding: 38px 0 36px;
     background-color: rgb( 255, 255, 255 );
     box-shadow: 0px 0px 51px 0px rgb( 0, 0, 0, .09 );
 }
 .team-one-content h3 {
     font-size: 18px;
     font-weight: 800;
     line-height: 32px;
     margin-bottom: 3px;
     text-transform: capitalize;
 }
 .team-one-content p {
     font-size: 16px;
     color: var(--thm-primary);
     font-weight: 700;
     margin: 0;
     letter-spacing: 1px;
 }

 /***

 ====================================================================
         Blog One Section
 ====================================================================

 ***/
 .blog-one-section{
     position: relative;
     display: block;
     background: #f7f8f9;
     padding: 100px 0 70px;
 }
 .blog-one-single{
     position: relative;
     display: block;
     margin-bottom: 30px;
     /* overflow: hidden; */
 }
 .blog-one-img{
     position: relative;
     display: block;
     overflow: hidden;
     background: #000;
 }
 .blog-one-img img{
     width: 100%;
     opacity: 1;
     -webkit-transform: scale(1);
     transform: scale(1);
     -webkit-transition: opacity 500ms ease, -webkit-transform 500ms ease;
     transition: opacity 500ms ease, -webkit-transform 500ms ease;
     transition: transform 500ms ease, opacity 500ms ease;
     transition: transform 500ms ease, opacity 500ms ease,
     -webkit-transform 500ms ease;
 }
 .blog-one-single:hover .blog-one-img img{
     opacity: 0.7;
     -webkit-transform: scale(1.05);
     transform: scale(1.05);
 }
 .blog-one-content {
     position: relative;
     display: block;
     background-color: rgb( 255, 255, 255 );
     box-shadow: 0px 0px 62px 0px rgb( 27, 31, 45, .05 );
     padding: 33px 30px 34px;
 }

 .blog-one-meta li {
     font-size: 15px;
     color: #888888;
     line-height: 25px;
     font-weight: 500;
 }

 .blog-one-title h3 {
     font-size: 20px;
     font-weight: 800;
     line-height: 30px;
     margin-top: 12px;
     margin-bottom: 13px;
 }
 .blog-one-title h3 a{
     color: var(--thm-black);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .blog-one-title h3 a:hover{
     color: var(--thm-primary);
 }
 .blog-one-text{}
 .blog-one-text p {
     margin: 0;
     line-height: 25px;
 }
 /***
 ====================================================================
         Brand One Section
 ====================================================================

 ***/
 .brand-one {
     position: relative;
     display: block;
     padding: 90px 0;
     border-bottom: 1px solid #f5f0e9;
 }

 .single_brand_item img {
     width: auto !important;
     opacity: 0.3;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .single_brand_item img:hover {
     opacity: 0.6;
 }


 /***
 ====================================================================
         Footer Section
 ====================================================================

 ***/
/*=====================================================
                FOOTER
======================================================*/

.footer-section{
    position:relative;
    overflow:hidden;
    background:#121620;
    padding:100px 0 35px;
}

.footer-section::before{
    content:"";
    position:absolute;
    right:-120px;
    top:-120px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(255,255,255,.03);
}

.footer-section::after{
    content:"";
    position:absolute;
    left:-120px;
    bottom:-120px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(255,255,255,.03);
}

.footer-logo{
    margin-bottom:25px;
}

.footer-logo img{
    max-height:60px;
}

.footer-about{
    color:#c7d0db;
    line-height:1.9;
    margin-bottom:30px;
}

.footer-widget-title{
    margin-bottom:25px;
}

.footer-widget-title h3{
    color:#fff;
    font-size:20px;
    font-weight:700;
    margin:0;
    letter-spacing:.3px;
}

/*==========================
Stats
==========================*/

.footer-stats{
    display:flex;
    gap:35px;
    margin-bottom:30px;
}

.footer-stats h4{
    color:var(--thm-primary);
    font-size:30px;
    margin-bottom:3px;
}

.footer-stats span{
    color:#c7d0db;
    font-size:14px;
}

/*==========================
Social
==========================*/

.footer-widget-about-social{
    display:flex;
    gap:12px;
}

.footer-widget-about-social a{

    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--thm-primary);

    border-radius:50%;

    color:#fff;

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

    font-size:18px;

}

.footer-widget-about-social a:hover{

    background:#076b52;

    color:#fff;

    transform:translateY(-5px);

    box-shadow:0 12px 25px rgba(0,0,0,.25);

}

/*==========================
Links
==========================*/

.footer-widget-useful-links-list li{

    margin-bottom:14px;

}

.footer-widget-useful-links-list a{

    display:flex;

    align-items:center;

    gap:10px;

    color:#c7d0db;

    transition:.3s;

}

.footer-widget-useful-links-list a i{

    color:var(--thm-primary);

}

.footer-widget-useful-links-list a:hover{

    color:#fff;

    padding-left:8px;

}

/*==========================
Contact
==========================*/

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:20px;

}

.footer-contact i{

    color:var(--thm-primary);

    margin-top:5px;

    font-size:18px;

    min-width:18px;

}

.footer-contact span,
.footer-contact a{

    color:#c7d0db;

    line-height:1.7;

}

.footer-contact a:hover{

    color:#fff;

}

/*==========================
Newsletter
==========================*/

.newsletter-text{

    color:#c7d0db;

    margin-bottom:20px;

}

.footer-newsletter input{

    width:100%;

    height:55px;

    background:#202632;

    border:none;

    border-radius:8px;

    padding:0 18px;

    color:#fff;

    margin-bottom:12px;

}

.footer-newsletter input::placeholder{

    color:#b8c1ca;

}

.footer-newsletter button{

    width:100%;

    height:55px;

    border:none;

    border-radius:8px;

    background:var(--thm-primary);

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.footer-newsletter button:hover{

    opacity:.9;

    transform:translateY(-2px);

}

/*==========================
Bottom
==========================*/

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    margin-top:70px;

    padding-top:30px;

}

.footer-bottom p{

    color:#b9c4cf;

    margin:0;

}

.footer-bottom a{

    color:#b9c4cf;

    margin:0 8px;

    transition:.3s;

}

.footer-bottom a:hover{

    color:var(--thm-primary);

}

/*==========================
Responsive
==========================*/

@media(max-width:991px){

.footer-section{

padding:80px 0 30px;

}

.footer-stats{

margin-bottom:25px;

}

.footer-bottom{

text-align:center;

}

.footer-bottom .text-md-end{

margin-top:15px;

text-align:center!important;

}

}
 /***
 ====================================================================
         Features Two Section
 ====================================================================

 ***/

 .features-two-section{
     position: relative;
     display: block;
     padding: 100px 0 60px;
     background: #F8F8F8;
 }

 .features-two-sec-single {
     position: relative;
     display: block;
     background: #ffffff;
     margin-bottom: 30px;
     border-radius: 5px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
     box-shadow: 0 0 20px 3px rgb(0 0 0 / 2%);
     padding: 50px 40px;
 }

 .features-two-sec-icon{
     width: 100px;
     height: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: rgb(255 82 3 / 8%);
 }
 .features-two-sec-icon span {
     font-size: 50px;
     color: var(--thm-primary);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }

 .features-two-sec-single h3 {
     font-size: 20px;
     font-weight: 800;
     line-height: 30px;
     margin-top: 23px;
     margin-bottom: 15px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
     text-transform: capitalize;
 }

 .features-two-sec-single p{
     font-size: 16px;
     margin: 0;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }

/*  */
.features-two-sec-single.active {
    background: var(--thm-primary);
}

.active .features-two-sec-icon {
    background: #fff;
}

.features-two-sec-single.active h3 {
    color: #fff;
}

.features-two-sec-single.active p {
    color: #fff;
}

 /***
 ====================================================================
         About Two Section
 ====================================================================
 ***/
 .about-tow-section{
     position: relative;
     display: block;
     /* background: #f7f8f9; */
     padding: 100px 0 100px;
 }
 .about-two-left-content{
     position: relative;
     display: block;
 }
 .about-two-sec-image{
     position: relative;
     display: block;
     z-index: 5;
 }
 .about-two-sec-image:before {
     position: absolute;
     bottom: -15px;
     right: -15px;
     border-radius: 6px;
     width: 270px;
     height: 270px;
     background: var(--thm-primary);
     content: "";
     z-index: -1;
 }
 .about-two-sec-image-bg-1 {
     position: absolute;
     top: -22px;
     left: -22px;
     height: 233px;
     width: 233px;
     background-repeat: no-repeat;
     background-position: top left;
     z-index: -1;
 }
 .about-two-sec-image-bg-2 {
     position: absolute;
     bottom: 10px;
     right: 10px;
     height: 210px;
     width: 210px;
     background-repeat: no-repeat;
     background-position: bottom right;
 }
 .about-two-sec-image img{
     width: 100%;
     border-radius: 6px;
 }
 .about-two-right-content {
     margin-left: 50px;
     margin-top: -8px;
 }
 .about-two-title {
     padding-bottom: 25px;
 }
 .section_title-subheading {
     font-size: 14px;
     color: var(--thm-primary);
     font-weight: 700;
     line-height: 30px;
     text-transform: uppercase;
     margin-bottom: 10px;
     letter-spacing: 2px;
 }
 .sub-title-shape-left:before {
    position: relative;
    content: '';
    left: 0;
    bottom: 0;
    height: 2px;
    width: 30px;
    background: var(--thm-primary);
    display: inline-block;
    margin-right: 12px;
}
 .about-two-title h2 {
     font-size: 42px;
     font-weight: 800;
     line-height: 50px;
     margin-bottom: 21px;
 }
 .about-two-title .about-two-title-text {
     font-size: 18px;
     margin: 0;
 }
 .about-tow-experience-years {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
 }
 .about-tow-experience-years-icon {
     position: relative;
     display: block;
     font-size: 75px;
     line-height: 80px;
 }
 .about-tow-experience-years-icon.style-two span{
     color: var(--thm-primary);
     font-size: 45px;
    width: 70px;
    height: 70px;
    background: #ededf6;
    display: inline-block;
    line-height: 70px;
    text-align: center;
    position: relative;
    top: -12px;
    margin-right: 15px;
 }
 .about-tow-experience-years-text {
     margin-left: 3px;
 }
 .about-tow-experience-years-text h2{
     font-size: 50px;
     font-weight: 700;
     color: var(--thm-primary);
     line-height: 54px;
 }
 .about-tow-experience-years-text p{
     font-size: 18px;
     color: var(--thm-black);
     line-height: 25px;
     margin: 0;
     font-weight: 600;
 }
 .about-two-bottom-content {
     margin-bottom: 50px;
 }
 .about-two-bottom-text {
     font-size: 18px;
     margin: 0;
 }
 .about-two-bottom-content h3 {
     font-size: 16px;
     line-height: 26px;
     text-transform: uppercase;
     font-weight: 500;
     margin-top: 14px;
 }
 .about-two-bottom-content span{
     color: var(--thm-primary);
 }
 .about-two-btn{
    display: inline-block;
    margin-right: 20px;
 }

 .about-two-btn .theme-btn {
     padding-left: 65px;
     padding-right: 65px;
     text-transform: uppercase;
 }

 /***
 ====================================================================
         Main Service Two Section
 ====================================================================
 ***/
 .main-service-one-section.two {
     padding: 100px 0 100px;
     margin-top: 0;
 }
 .main-service-one-section.two .thm-section-title h2{
     margin-top: 10px;
 }

 /***
 ====================================================================
         Team Two Section
 ====================================================================
 ***/

 .team-one-section.two{
     background: #f7f8f9;
     background-repeat: repeat;
 }
 .team-one-section.two .thm-section-title h2{
 }
 /***
 ====================================================================
         Team Two Section
 ====================================================================
 ***/
 .why-choose-two-section{
     position: relative;
     display: block;
     padding: 100px 0 100px;
 }
 .why-choose-two-image{
     position: relative;
     display: block;
 }
 .why-choose-two-image img{
     width: 100%;
 }
 .why-choose-right-content {
     position: relative;
     display: block;
     background: #f7f8f9;
     margin-left: -30px;
     padding: 90px 70px 53px;
 }
 .most-trusted-skill {
     position: relative;
     display: block;
     padding-left: 100px;
     margin-bottom: 45px;
 }
 .most-trusted-skill-icon {
     height: 100px;
     width: 100px;
     border-radius: 50%;
     box-shadow: 1.362px 2.673px 35px 0px rgb( 0, 0, 0, .08 );
     background: #ffffff;
     line-height: 100px;
     text-align: center;
     font-size: 65px;
     color: var(--thm-primary);
     position: absolute;
     top: 0;
     left: 0;
 }
 .most-trusted-skill-icon span{

 }
 .most-trusted-text{
     margin-left: 30px;
 }
 .most-trusted-text h3{
     font-size: 30px;
     font-weight: 700;
     line-height: 40px;
     margin-bottom: 20px;
 }
 .most-trusted-text p{
     margin: 0;
 }

 .progress-levels {
     position: relative;
     display: block;
 }
 .progress-levels .progress-box {
     position: relative;
     display: block;
     margin-bottom: 38px;
 }
 .progress-levels .progress-box.last-child {
     margin-bottom: 0;
 }

 .progress-levels .progress-box .inner {
     position: relative;
     display: block;
 }

 .progress-levels .progress-box .bar {
     position: relative;
     display: block;
 }
 .progress-levels .progress-box .bar .bar-innner {
     position: relative;
     width: 100%;
     height: 7px;
     background: #f3e7e7;
     border-radius: 10px;
 }
 .progress-levels .progress-box .bar .bar-fill {
     position: absolute;
     top: 0%;
     left: 0px;
     bottom: 0%;
     width: 0px;
     height: 7px;
     border-radius: 10px;
     background: var(--thm-primary);
     transition: all 2000ms ease 300ms;
 }
 .progress-levels .progress-box .bar .bar-innner .skill-percent {
     position: absolute;
     top: -30px;
     right: 0;
     width: 40px;
     height: 25px;
     display: block;
     text-align: center;
     padding: 0;
     z-index: 1;
 }
 .progress-levels .progress-box .inner .count-text {
     position: relative;
     color: #333333;
     font-size: 18px;
     line-height: 20px;
     font-weight: 500;
     display: inline-block;
     float: none;
 }
 .progress-levels .progress-box .inner .percent {
     position: relative;
     color: #333333;
     font-size: 18px;
     line-height: 20px;
     font-weight: 500;
     display: inline-block;
     float: none;
     margin-left: -2px;
 }

 .progress-levels .progress-box .inner .text {
     position: relative;
     color: var(--thm-black);
     font-size: 18px;
     font-weight: 600;
     letter-spacing: 0.5px;
     text-transform: capitalize;
     padding-bottom: 8px;
 }


 /***
 ====================================================================
         Latest Projects One Section
 ====================================================================
 ***/
 .latest-projects-one-section{
     position: relative;
     display: block;
     padding: 100px 0 100px;
     background: #f7f8f9;
 }
 .latest-projects-one-section:before{
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 382px;
     content: "";
     background: #ffffff;
 }
 .latest-projects-one-section .container {
    max-width: 1450px;
 }
 .latest-projects-one-bg {
     position: absolute;
     bottom: 115px;
     left: 100px;
     height: 383px;
     width: 599px;
     background-repeat: no-repeat;
     background-position: left center;
 }
 .latest-pro-one-title{}
 .latest-pro-one-title h2 {
     font-size: 40px;
     font-weight: 800;
     line-height: 50px;
     margin-bottom: 28px;
 }
 .latest-pro-one-title p {
     margin: 0;
     line-height: 24px;
 }
 .latest-pro-one-single{}
 .latest-pro-one-img-box{
     position: relative;
     display: block;
     overflow: hidden;
 }
 .latest-pro-one-img-box:before{
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 100%;
     content: "";
     background: rgba(2, 15, 32, 0)
 }
 .latest-pro-one-img-box img{
     width: 100%;
     transition: .5s;
 }
  .latest-pro-one-img-box:hover img {
     transform: scale(1.08);
  }
 .latest-pro-one-img-title {
     position: absolute;
     bottom: 30px;
     left: 50%;
     height: 80px;
     width: 310px;
     background: var(--thm-primary);
     display: flex;
     align-items: center;
     justify-content: space-between;
     transform: translateX(-50%);
     padding: 0 25px;
 }
 .latest-pro-one-img-title .content{}
 .latest-pro-one-img-title .content h5{
     font-size: 22px;
     font-weight: 800;
     line-height: 32px;
 }
 .latest-pro-one-img-title .content h5 a{
     color: #fff;
 }
 .latest-pro-one-img-title .icon{}
 .latest-pro-one-img-title .icon a{}
 .latest-pro-one-img-title .icon a span {
     font-size: 35px;
     color: #fff;
     line-height: 45px;
 }


 .testimonials-one-section.two {
     background-color: #0e0e0d;
     background-size: cover;
 }
 .testimonials-one-section.two .thm-section-title h2{
     color: #ffffff;
 }
 .testimonials-one-section.two .testimonials-one-single{
     background-color: rgb(24 31 41);
 }
 .testimonials-one-section.two .testimonials-one-single .client-info .client-content h3{
     color: #ffffff;
 }
 .testimonials-one-section.two .testimonials-one-single .text-box p{
     color: rgb(255 255 255 / 80%);
 }
 .testimonials-one-section.two .testimonials-one-single .testimonials-quote i{
     color: #242b36;
 }
 .testimonials-one-section.two .testimonials-one-carousel.owl-carousel .owl-dots .owl-dot{
     position: relative;
     display: inline-block;
     width: 10px;
     height: 10px;
     background: #ffffff;
     border: 1px solid var(--thm-primary);
     margin: 0px 5px;
     padding: 0px;
     border-radius: 50%;
     transition: all 100ms linear;
     transition-delay: 0.1s;
 }
 .testimonials-one-section.two .testimonials-one-carousel.owl-carousel .owl-dot.active{
     background: var(--thm-primary);
 }



 /*--------------------------------------------------------------
 #  Page Header
 --------------------------------------------------------------*/
 .page-header {
     position: relative;
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-position: center center;
     overflow: hidden;
     padding: 87px 0 100px;
     background-size: cover;
 }
 .page-header::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(10,10,72, .20)
 }
 .page-header .container {
     position: relative;
 }
 .page-header h2 {
     color: #ffffff;
     font-size: 55px;
     font-weight: 600;
     margin: 0;
     line-height: 65px;
     margin-bottom: 10px;
 }
 .thm-breadcrumb {
     display: inline-block;
     margin: 0;
     line-height: 27px;
 }
 .thm-breadcrumb li+li{
     margin-left: 12px;
 }
 .thm-breadcrumb li {
     position: relative;
     display: inline-block;
 }

 .thm-breadcrumb li a, .thm-breadcrumb li span {
     font-size: 16px;
     color: #ffffff;
     font-weight: 500;
     display: inline-block;
     line-height: 30px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .thm-breadcrumb li a:hover{
     color: var(--thm-primary);
 }
 .thm-breadcrumb li span:hover{
     color: var(--thm-primary);
 }

 /*--------------------------------------------------------------
 #  About Page
 --------------------------------------------------------------*/
 .about-tow-section.about-page {
     padding-bottom: 55px;
 }
 .about-tow-section.about-page .about-two-sec-image:before{
     display: none;
 }
 .about-tow-section.about-page .about-two-title-text {
     padding-top: 20px;
 }
 .about-tow-section.about-page .about-tow-experience-years {
     margin-top: 20px;
     margin-bottom: 30px;
 }
 .about-tow-section.about-page .about-tow-experience-years-icon {
     font-size: 30px;
     height: 60px;
     width: 60px;
     background: var(--thm-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .about-tow-section.about-page .about-tow-experience-years-icon span{
     color: #ffffff;
 }
 .about-tow-section.about-page .about-tow-experience-years-text{
     margin-left: 12px;
 }
 .about-tow-section.about-page .about-tow-experience-years-text h2 {
     font-size: 20px;
     color: var(--thm-black);
     font-weight: 800;
     line-height: 30px;
 }
 .about-tow-section.about-page .about-tow-experience-years-text h2 p{
     font-size: 20px;
     line-height: 30px;
     margin: 0;
 }
 .about-tow-section.about-page .about-tow-experience-years-text h2 a{
     color: var(--thm-black);
 }
 .about-tow-section.about-page .signature {
     margin-top: 24px;
 }
 .about-tow-section.about-page .signature img{}

 /*--------------------------------------------------------------
 #  video Two Section
 --------------------------------------------------------------*/
 .video-two-section {
     position: relative;
     display: block;
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     background-attachment: fixed;
     padding: 190px 0 192px;
 }
 .video-two-sec-inner {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .video-two-sec-icon{}
 .video-two-sec-btn {
     height: 90px;
     width: 90px;
     color: #ffffff;
     border: 4px solid #ffffff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .video-two-sec-btn:hover{
     border: 4px solid var(--thm-primary);
     color: var(--thm-primary);
 }
 .video-two-sec-content{
     margin-left: 40px;
 }
 .video-two-sec-content h2 {
     font-size: 40px;
     color: #ffffff;
     font-weight: 800;
     line-height: 50px;
     margin-bottom: 30px;
 }
 .video-two-sec-content span{
     color: var(--thm-primary);
 }
 .video-two-sec-content p{
     font-size: 20px;
     color: #ffffff;
     margin: 0;
     line-height: 30px;
 }

 /*--------------------------------------------------------------
 #  History One Section
 --------------------------------------------------------------*/
 .history-one-section{
     position: relative;
     display: block;
     padding: 100px 0 0px;
 }
 .history-one-sec-content {
     position: relative;
     display: block;
     margin-right: 50px;
 }
 .history-one-sec-title{}
 .history-one-sec-title h4 {
 }
 .history-one-sec-title h2 {
 font-size: 42px;
 font-weight: 800;
 line-height: 50px;
 margin-bottom: 10px;
 }
 .history-one-sec-date {
     padding-top: 32px;
     padding-bottom: 15px;
 }
 .history-one-sec-date h3{
     font-size: 30px;
     color: var(--thm-primary);
     line-height: 40px;
     font-weight: 600;
 }
 .history-one-text{}
 .history-one-text p{
     margin: 0;
 }
 .history-one-btn {
     margin-top: 35px;
 }
 .history-one-btn .theme-btn {
     padding: 15px 60px;
 }
 .history-one-video-sec {
     position: relative;
     display: block;
     margin-left: 50px;
 }
 .history-one-video-img{
     position: relative;
     display: block;
 }
 .history-one-video-img img {
     width: 100%;
     border-radius: 6px;
 }
 .history-one-video-img-bg {
     position: absolute;
     top: -25px;
     left: -25px;
     height: 233px;
     width: 233px;
     z-index: -1;
 }
 .history-one-video-img-shape {
     position: absolute;
     bottom: -15px;
     right: -15px;
     height: 270px;
     width: 270px;
     background: var(--thm-primary);
     border-radius: 6px;
     z-index: -1;
 }
 .history-one-video-btn-box {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .history-one-video-btn {
     position: relative;
     height: 70px;
     width: 70px;
     background: var(--thm-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #ffffff;
     font-size: 20px;
     transform: rotate(0deg);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .history-one-video-btn:hover{
     color: #ffffff;
     transform: rotate(360deg);
 }
 .history-one-video-btn:before{
     position: absolute;
     top: -10px;
     left: -10px;
     right: -10px;
     bottom: -10px;
     content: "";
     background: rgba(255,95,21, .25);
     border-radius: 50%;
 }

 /*--------------------------------------------------------------
 #  Newsletter One Section
 --------------------------------------------------------------*/
 .newsletter-one-section{
     position: relative;
     display: block;
     background: #f7f8f9;
     padding: 90px 0 100px;
 }
 .newsletter-one-sec-inner {
     position: relative;
     display: block;
     max-width: 565px;
     margin: 0 auto;
     text-align: center;
 }
 .newsletter-one-sec-inner .title {
     margin-bottom: 55px;
 }
 .newsletter-one-sec-inner .title h2 {
     font-size: 40px;
     font-weight: 800;
     line-height: 50px;
     margin-bottom: 16px;
 }
 .newsletter-one-sec-inner .title p{
     font-size: 16px;
     margin: 0;
     line-height: 30px;
 }
 .newsletter-one-input-box{
     position: relative;
     display: block;
 }
 .newsletter-one-input-box input{}
 .newsletter-one-input-box input[type="Email"] {
     height: 60px;
     background: #ffffff;
     width: 100%;
     padding-left: 30px;
     padding-right: 80px;
     border-radius: 30px;
     font-size: 18px;
     color: #777777;
 }
 .newsletter-one-input-box input[type="email"]:focus {
     outline: none;
 }
 .newsletter-one-input-box input[type="email"]::-webkit-input-placeholder {
     color: #777777;
 }
 .newsletter-one-input-box input[type="email"]:-moz-placeholder {
     color: #777777;
 }
 .newsletter-one-input-box input[type="email"]::-moz-placeholder {
     color: #777777;
 }
 .newsletter-one-input-box input[type="email"]:-ms-input-placeholder {
     color: #777777;
 }
 .newsletter-one-input-box .button {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     width: 60px;
     background: var(--thm-primary);
     border-radius: 50%;
     font-size: 20px;
     color: #ffffff;
 }

 /*--------------------------------------------------------------
 #  Serviec Details Section
 --------------------------------------------------------------*/
 .service-details-section{
     position: relative;
     display: block;
     padding: 100px 0 100px;
 }
 .service-details-sidebar{}
 .service-details-sidebar-single+.service-details-sidebar-single{
     margin-top: 60px;
 }
 .view-all-services {
     position: relative;
     display: block;
     background: #f7f7f7;
     padding: 34px 40px 60px;
 }
 .view-all-services .title{
     margin-bottom: 21px;
 }
 .view-all-services .title h3 {
     font-size: 22px;
     font-weight: 600;
     line-height: 32px;
 }
 .view-all-services ul{}
 .view-all-services ul li {
     position: relative;
     display: block;
     padding-left: 46px;
     background: #ffffff;
     padding-top: 12px;
     padding-bottom: 13px;
 }
 .view-all-services ul li+li{
     margin-top: 10px;
 }
 .view-all-services ul li .icon {
     position: absolute;
     top: 19px;
     left: 0;
     height: 16px;
     width: 16px;
     background: var(--thm-primary);
     text-align: center;
     border-radius: 50%;
     color: #ffffff;
     line-height: 16px;
     font-size: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 20px;
 }
 .view-all-services ul li .icon i{}
 .view-all-services ul li .text{}
 .view-all-services ul li .text a {
     font-size: 18px;
     color: var(--thm-black);
     font-weight: 600;
     line-height: 30px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .view-all-services ul li:hover .text a {
     color: var(--thm-primary);
 }

 .about-our-factory {
     position: relative;
     display: block;
     background: #f7f7f7;
     padding: 19px 40px 15px;
     border: 1px solid #e5e5e5;
 }
 .broucher-box {
     display: flex;
     align-items: center;
 }
 .broucher-box .icon{}
 .broucher-box .icon i {
     font-size: 40px;
     color: var(--thm-primary);
     line-height: 40px;
 }
 .broucher-box .content{
     margin-left: 10px;
 }
 .broucher-box .content p{
     font-size: 16px;
     color: var(--thm-black);
     font-weight: 600;
     line-height: 26px;
     margin: 0;
 }
 .broucher-box .content a{
     font-size: 16px;
     color: var(--thm-primary);
     font-weight: 600;
     line-height: 26px;
     margin: 0;
 }
 .broucher-box .content a i{}

 .need-any-help {
     position: relative;
     display: block;
     text-align: center;
     background-repeat: no-repeat;
     background-position: center center;
     padding: 65px 0 90px;
 }
 .need-any-help .icon-box {
     padding-bottom: 20px;
 }
 .need-any-help .icon-box span {
     font-size: 50px;
     color: var(--thm-primary);
     line-height: 50px;
 }
 .need-any-help .text-box {
     margin-bottom: 33px;
 }
 .need-any-help .text-box h3 {
     font-size: 20px;
     color: #ffffff;
     font-weight: 600;
     line-height: 30px;
     margin-bottom: 22px;
 }
 .need-any-help .text-box a {
     display: block;
     color: #d2ccda;
     font-size: 18px;
     line-height: 36px;
 }
 .need-help-get-quote-btn{}
 .need-help-get-quote-btn .theme-btn {
     padding: 10px 40px;
     border-radius: 0;
 }

 .service-details-right-content{}
 .service-details-right-image{}
 .service-details-right-image img{
     width: 100%;
 }
 .service-details-right-text{}

 .service-details-right-text h3 {
     font-size: 36px;
     font-weight: 600;
     line-height: 46px;
     margin-top: 50px;
     margin-bottom: 20px;
 }
 .service-details-right-text .first-text {
     color: var(--thm-black);
     padding-bottom: 7px;
 }
 .service-details-right-text .last-text{
     color: var(--thm-black);
 }
 .why-choose-our-factory {
     display: flex;
     align-items: center;
     padding-top: 34px;
 }
 .why-choose-our-factory-image{}
 .why-choose-our-factory-image img{}
 .why-choose-our-factory-text{
     margin-left: 30px;
 }
 .why-choose-our-factory-text h3 {
     font-size: 24px;
     font-weight: 600;
     line-height: 36px;
     margin-bottom: 27px;
 }
 .why-choose-our-factory-text p {
     margin: 0;
 }
 .why-choose-our-factory-text ul {
     margin-top: 22px;
 }
 .why-choose-our-factory-text ul li{}
 .why-choose-our-factory-text ul li i {
     padding-right: 9px;
 }

 .features-list {
     padding-top: 75px;
     padding-bottom: 50px;
 }
 .features-list li {
     position: relative;
     display: inline-block;
 }
 .features-list li+li{
     margin-left: 10px;
 }
 .features-list li .icon {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     box-shadow: 1.362px 2.673px 35px 0px rgb( 0, 0, 0, .08);
     text-align: center;
 }
 .features-list li .icon,
 .features-list li .text{
     display: table-cell;
     vertical-align: middle;
 }

 .features-list li .icon span{
     font-size: 56px;
     color: var(--thm-primary);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
     line-height: 100px;
 }
 .features-list li .text {
     position: relative;
     padding-left: 12px;
 }
 .features-list li .text h4{
     font-size: 22px;
     font-weight: 500;
     line-height: 32px;
 }


 .accordion-box{
   position:relative;
 }

 .accordion-box .block{
   position:relative;
   margin-bottom: 20px;
 }

 .accordion-box .block:last-child{
   margin-bottom: 0px;
 }
 .accordion-box .block .acc-btn {
     padding: 0 20px;
     background: #f7f7f7;
 }
 .accordion-box .block .acc-btn h4 {
     position: relative;
     display: block;
     font-size: 16px;
     font-weight: 500;
     color: #222222;
     line-height: 26px;
     padding: 17px 0;
     cursor: pointer;
     transition: all 500ms ease;
 }

 .accordion-box .block .acc-btn.active h4{
   color: #222222;
 }

 .accordion-box .block .acc-content {
     position: relative;
     display: none;
     border: 1px solid #eeeeee;
     border-top: 0px;
     padding: 29px 35px 27px;
 }

 .accordion-box .block .acc-content.current{
   display:block;
 }

 .accordion-box .block .content .text {
     position: relative;
     display: block;
     font-size: 16px;
     color: var(--thm-gray);
 }
 .accordion-box .block .acc-btn .icon-outer {
     position: absolute;
     top: 15px;
     right: 21px;
     font-size: 14px;
   color: var(--thm-black);
     font-weight: 900;
     text-align: center;
     cursor: pointer;
     transition: all 500ms ease;
     z-index: 1;
 }

 .accordion-box .block .acc-btn.active .icon-outer{
   color: var(--thm-black);
 }

 .accordion-box .block .acc-btn.active .icon-outer i:before{
   position: relative;
   font-size: 14px;
   font-family:'Font Awesome 5 Pro';
   font-weight: 900;
   margin: 0px;
   content: "\f068";
 }


 /*--------------------------------------------------------------
 #  Project Details Image Box
 --------------------------------------------------------------*/
 .project-details-image-box{
     position: relative;
     display: block;
     padding: 100px 0 50px;
 }
 .project-details-img{}
 .project-details-img img{
     width: 100%;
 }

 /*--------------------------------------------------------------
 #  Project Details Content Section
 --------------------------------------------------------------*/
 .project-details-content-section{}
 .project-details-left-content{}
 .project-details-left-content .title{}
 .project-details-left-content .title h2 {
     padding-bottom: 22px;
     font-size: 36px;
     font-weight: 600;
     line-height: 46px;
 }
 .project-details-left-content .text{}
 .project-details-left-content .text .first-text {
     padding-bottom: 10px;
 }
 .project-details-left-content .text .second-text {
     margin: 0;
 }

 .project-details-right {
     position: relative;
     display: block;
     background: #f7f7f7;
     padding: 30px;
     margin-top: -320px;
 }
 .project-details-right ul{}
 .project-details-right ul li {
     border: 1px solid #eeeeee;
     background: #ffffff;
     padding: 20px 20px 20px;
     margin-bottom: 20px;
 }
 .project-details-right ul li:last-child{
     margin-bottom: 0;
 }
 .project-details-right ul li h4 {
     font-size: 18px;
     font-weight: 700;
     line-height: 30px;
 }
 .project-details-right ul li p{
     font-size: 18px;
     font-weight: 500;
     margin: 0;
     color: #797672;
 }


 .project-details-benifits-section {
     padding: 52px 0 100px;
 }

 .project-details-benifits-image img{
     width: 100%;
 }

 .project-details-benifits h3 {
     font-size: 24px;
     font-weight: 600;
     line-height: 34px;
     margin-bottom: 25px;
 }

 .project-details-benifits .text p{
     margin: 0;
     margin-bottom: 30px;
 }

 .project-details-benifits ul li i {
     padding-right: 10px;
 }

 /*--------------------------------------------------------------
 #  Testimonials Three
 --------------------------------------------------------------*/
 .testimonials-one-section.three{
     padding-bottom: 90px;
 }
 .testimonials-one-section.three .testimonials-one-single {
     margin-bottom: 30px;
 }

 /*--------------------------------------------------------------
 #  Faq One Section
 --------------------------------------------------------------*/
 .faq-one-section{
     position: relative;
     display: block;
     padding: 100px 0 100px;
 }
 .faq-one-left{}
 .faq-one-left h3 {
     font-size: 40px;
     font-weight: 600;
     line-height: 50px;
     margin-bottom: 37px;
 }
 .faq-one-left p {
     margin: 0;
 }
 .faq-one-left-btn{
     margin-top: 36px;
 }
 .faq-one-left-btn .theme-btn {
     padding: 15px 55px;
 }
 .faq-one-right{}

 /*--------------------------------------------------------------
 #  Error Section
 --------------------------------------------------------------*/
 .error-section{
     position: relative;
     display: block;
     padding: 150px 0 150px;
 }
 .error-section-content{
     position: relative;
     display: block;
     text-align: center;
 }

 .error-section-content h1 {
     position: relative;
     font-size: 160px;
     line-height: 160px;
     font-weight: 700;
     margin-bottom: 40px;
     margin-top: 40px;
 }

 .error-title h3{
     font-size: 50px;
     font-weight: 700;
     line-height: 60px;
 }
 .error-image {
     padding-top: 32px;
     padding-bottom: 48px;
 }
 .error-image img{
     width: auto;
 }
 .error-btn{}
 .error-btn .theme-btn {
     padding: 15px 50px;
     border-radius: 30px;
 }

 /*--------------------------------------------------------------
 #  Contact One Section
 --------------------------------------------------------------*/

/* Base styles for the section */
.contact-section {
    font-family: var(--font-family);
    background-color: var(--background-color);
    padding: 60px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Main container for centering content */
.contact-section .container {
    max-width: 900px; /* Adjust max-width as needed */
    width: 100%;
}

/* Styles for the main form card/container */
.contact-form-container {
    background-color: var(--container-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
}

/* Title of the form */
.form-title {
    text-align: center;
    font-size: 2.2rem;
    color: var(--text-color);
    margin-bottom: 35px;
    font-weight: 600;
}

/* General form styling */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Consistent spacing between form groups */
}

/* Row for side-by-side inputs (e.g., name and email) */
.form-row {
    display: flex;
    gap: 20px;
}

/* Individual form group with a label and input */
.form-group {
    flex: 1; /* Allows form groups to grow and fill space */
    position: relative;
}

/* Make half-width groups stack on smaller screens */
.form-group.half-width {
    width: 50%;
}

/* Style for all text inputs and textarea */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: var(--input-padding);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1rem;
    color: var(--text-color);
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: #fcfcfc;
}

/* Placeholder text color */
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--placeholder-color);
    opacity: 1; /* Ensures placeholder is visible in Firefox */
}

/* Style on focus to provide user feedback */
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--focus-outline-color);
}

/* Style the textarea for better user experience */
.contact-form textarea {
    resize: vertical; /* Allow resizing only vertically */
    min-height: 150px; /* Minimum height for the message box */
}

/* Style for the submit button */
.submit-btn {
    width: 100%;
    padding: var(--input-padding);
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    letter-spacing: 0.5px;
}

/* Button hover and active states */
.submit-btn:hover {
    background-color: var(--primary-hover-color);
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.25);
}

.submit-btn:active {
    transform: translateY(0); /* Press down effect */
    background-color: var(--primary-hover-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Accessibility: Visually hide labels but keep them for screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/*
    Responsive adjustments for smaller screens
    This will make the two-column layout stack vertically on mobile devices.
*/
@media (max-width: 768px) {
    .contact-form-container {
        padding: 30px 20px;
    }

    .form-title {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }

    .form-row {
        flex-direction: column; /* Stack items vertically */
        gap: 15px; /* Reduce gap on mobile */
    }

    .form-group.half-width {
        width: 100%; /* Make them full width */
    }
}

 /*--------------------------------------------------------------
 # Google_map
 --------------------------------------------------------------*/
 .google_map {
     position: relative;
     display: block;
     background: #f8f8f8;
 }
 .google-map__contact {
     width: 100%;
     border: none;
     outline: none;
     display: block;
     height: 560px;
 }

 /*--------------------------------------------------------------
 # Contactinfo
 --------------------------------------------------------------*/
 .contactinfo{
     position: relative;
     display: block;
     padding: 0 0 70px;
     margin-top: -100px;
     z-index: 1;
 }
 .contactinfo-single {
     display: flex;
     flex-direction: row;
     background-color: rgb( 255, 255, 255 );
     padding: 50px 50px 35px;
     padding-right: 21px;
     margin-bottom: 30px;
     z-index: 5;
     box-shadow: 0px 1px 16.24px 12.76px rgba(0, 0, 0, 0.04);
 }
 .contactinfo-icon{}
 .contactinfo-icon span {
     font-size: 20px;
     color: var(--thm-primary);
     margin-top: 8px;
 }
 .contactinfo-content{
     margin-left: 20px;
 }
 .contactinfo-content h4 {
     font-size: 15px;
     font-weight: 600;
     line-height: 25px;
     margin-bottom: 10px;
 }
 .contactinfo-content a{
     color: #888888;
 }
 .contactinfo-content p {
     margin: 0;
     font-size: 15px;
 }

 /*--------------------------------------------------------------
 # Blog Page
 --------------------------------------------------------------*/
 .blog-one-section.blog-page{
     background: #ffffff;
 }
 .blog-one-section.blog-page .blog-one-content{
     background-color: #fff;
     box-shadow: 0px 0px 40px 0px rgb(3 3 3 / 0.07);
 }
 .blog-pg-pagination {
     position: relative;
     display: block;
     text-align: center;
     width: 100%;
     padding: 30px 0 30px;
 }
 .blog-pg-pagination .pg-pagination{}
 .blog-pg-pagination .pg-pagination li {
     display: inline-block;
     margin-right: 5px;
 }
 .blog-pg-pagination .pg-pagination li:last-child{
     margin-right: 0;
 }
 .blog-pg-pagination .pg-pagination li a {
     height: 60px;
     width: 60px;
     text-align: center;
     line-height: 60px;
     background: #f7f7f7;
     display: inline-block;
     color: var(--thm-gray);
     font-weight: 700;
     font-size: 18px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }

 .blog-pg-pagination .pg-pagination li a:hover{
     background: var(--thm-primary);
     color: #ffffff;
 }

 /*--------------------------------------------------------------
 # Blog Classic
 --------------------------------------------------------------*/
 .blog-classic-section{
     position: relative;
     display: block;
     padding: 100px 0 100px;
 }
 .blog-classic-content{
     position: relative;
     display: block;
 }
 .blog-classic-single{
     position: relative;
     display: block;
     margin-bottom: 50px;
 }
 .blog-classic-image{
     position: relative;
     display: block;
 }
 .blog-classic-image img{
     width: 100%;
 }
 .blog-classic-date{
     position: absolute;
     bottom: 30px;
     left: 30px;
 }
 .blog-classic-date a {
     font-size: 15px;
     background: var(--thm-primary);
     display: inline-block;
     color: #ffffff;
     font-weight: 600;
     padding: 7px 25px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .blog-classic-date a:hover{
     color: var(--thm-black);
     background: #ffffff;
 }
 .blog-classic-content-box{
     position: relative;
     display: block;
     background-color: rgb( 255, 255, 255 );
     box-shadow: 0px 0px 62px 0px rgb( 27, 31, 45, .05 );
     padding: 28px 30px 40px;
 }
 .blog-classic-meta{
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
 }
 .blog-classic-meta li{
     position: relative;
     display: block;
 }
 .blog-classic-meta li:before {
     position: absolute;
     top: 7px;
     left: 0;
     bottom: 8px;
     width: 2px;
     background: #c0c0c0;
     content: "";
 }
 .blog-classic-meta li:first-child:before{
     display: none;
 }
 .blog-classic-meta li+li{
     margin-left: 12px;
     padding-left: 12px;
 }
 .blog-classic-meta li a {
     font-size: 15px;
     color: var(--thm-gray);
 }
 .blog-classic-meta li a i{
     color: var(--thm-primary);
     padding-right: 4px;
 }
 .blog-classic-title{
     margin-top: 6px;
     margin-bottom: 21px;
 }
 .blog-classic-title h3{
     font-size: 30px;
     line-height: 40px;
     font-weight: 600;
 }
 .blog-classic-title h3 a{
     color: var(--thm-black);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .blog-classic-title h3 a:hover{
     color: var(--thm-primary);
 }
 .blog-classic-text{}
 .blog-classic-text p{
     margin: 0;
 }
 .blog-classic-btn{
     margin-top: 11px;
 }
 .blog-classic-btn a{
     font-size: 15px;
     color: var(--thm-black);
     font-weight: 600;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .blog-classic-btn a:hover{
     color: var(--thm-primary);
 }
 .blog-classic-btn a i {
     padding-left: 5px;
 }

 .blog-pg-pagination.blog-pg-classic {
     text-align: left;
     padding: 0;
 }

 /*--------------------------------------------------------------
 # Sidebar
 --------------------------------------------------------------*/
 .sidebar-single {

 }

 .sidebar-single + .sidebar-single {
     margin-top: 30px;
 }

 .sidebar-title {
     margin: 0;
     color: var(--thm-black);
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 15px;
 }

 .sidebar-search {
     background-color: #f7f8f9;
     padding: 35px 40px 40px;
 }

 .sidebar-search-form {
     position: relative;
 }

 .sidebar-search-form input[type="search"] {
     display: block;
     border: none;
     outline: none;
     background-color: #ffffff;
     color: var(--thm-black);
     font-size: 16px;
     font-weight: 500;
     padding-left: 30px;
     height: 48px;
     width: 100%;
     padding-right: 60px;
 }

 .sidebar-search-form ::-webkit-input-placeholder {
     color: var(--thm-gray);
     opacity: 1;
 }

 .sidebar-search-form ::-moz-placeholder {
     color: var(--thm-gray);
     opacity: 1;
 }

 .sidebar-search-form :-ms-input-placeholder {
     color: var(--thm-gray);
     opacity: 1;
 }

 .sidebar-search-form ::-ms-input-placeholder {
     color: var(--thm-gray);
     opacity: 1;
 }

 .sidebar-search-form ::placeholder {
     color: var(--thm-gray);
     opacity: 1;
 }

 .sidebar-search-form :-ms-input-placeholder {
     color: var(--thm-gray);
 }

 .sidebar-search-form ::-ms-input-placeholder {
     color: var(--thm-gray);
 }

 .sidebar-search-form button[type="submit"] {
     background-color: transparent;
     color: #9c9c9c;
     font-size: 15px;
     position: absolute;
     top: 2px;
     right: 0px;
     width: 60px;
     outline: none;
     border: none;
     height: 48px;
 }


 .sidebar-category{
     position: relative;
     display: block;
     background-color: #f7f8f9;
     padding: 35px 40px 30px;
 }
 .sidebar-category-list{}
 .sidebar-category-list li{
    margin-bottom: 5px;
}
 .sidebar-category-list li a {
     font-size: 16px;
     color: var(--thm-gray);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .sidebar-category-list li a:hover{
     color: var(--thm-primary);
 }
 .sidebar-category-list li i{
     padding-right: 2px;
 }
 .sidebar-category-list li span{
     padding-left: 10px;
 }

 .sidebar-latest-news{
     position: relative;
     display: block;
     background: #f7f8f9;
     padding: 36px 40px 40px;
 }
 .sidebar-latest-news-list{}
 .sidebar-latest-news-list li{
     display: -webkit-box;
     display: flex;
     align-items: center;
 }
 .sidebar-latest-news-list li+li{
     margin-top: 25px;
 }
 .sidebar-latest-news-image{}
 .sidebar-latest-news-image img{}
 .sidebar-latest-news-content{
     margin-left: 20px;
 }
 .sidebar-latest-news-content h3 {
     line-height: 20px;
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 6px;
 }
 .sidebar-latest-news-content a{
     color: var(--thm-black);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .sidebar-latest-news-content a:hover{
     color: var(--thm-primary);
 }
 .sidebar-latest-news-content p{
     font-size: 14px;
     margin: 0;
 }

 .sidebar-archive{
     position: relative;
     display: block;
     background: #f7f8f9;
     padding: 36px 40px 35px;
 }
 .sidebar-archive-list{}
 .sidebar-archive-list li{
    margin-bottom: 5px;
}
 .sidebar-archive-list li a{
     color: var(--thm-gray);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
     font-size: 16px;
 }
 .sidebar-archive-list li a:hover{
     color: var(--thm-primary);
 }
 .sidebar-archive-list li i{
     padding-right: 2px;
 }

 .sidebar-instagram{
     position: relative;
     display: block;
     background: #f7f8f9;
     padding: 36px 40px 30px;
 }
 .sidebar-instagram-list{}
 .sidebar-instagram-list li{
     display: inline-block;
     margin-bottom: 10px;
     margin-right: 5px;
 }
 .sidebar-instagram-list li .instagram-img{
     position: relative;
     display: block;
 }
 .sidebar-instagram-list li .instagram-img:before {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     content: "";
     background: rgba(0,0,0,.3);
     transform: scaleX(0);
     border-radius: 5px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .sidebar-instagram-list li:hover .instagram-img:before{
     transform: scaleX(1);
 }
 .sidebar-instagram-list li .instagram-img img{
     border-radius: 5px;
     width: 100%;
 }
 .sidebar-instagram-img-hover{
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--thm-primary);
     font-size: 15px;
     transform: scale(0);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .sidebar-instagram-list li:hover .sidebar-instagram-img-hover{
     transform: scaleX(1);
 }
 .sidebar-instagram-img-hover i{}

 .sidebar-tag{
     position: relative;
     display: block;
     background: #f7f8f9;
     padding: 36px 40px 40px;
 }
 .sidebar-tags-list{}
 .sidebar-tags-list a {
     font-size: 16px;
     color: #9c9c9c;
     background: #ffffff;
     display: inline-block;
     padding: 2px 15px;
     margin-left: 5px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .sidebar-tags-list a:hover{
     background: var(--thm-primary);
     color: #ffffff;
 }
 .sidebar-tags-list a+a{
     margin-left: 5px;
     margin-top: 10px;
 }

 /*--------------------------------------------------------------
 # Blog Details
 --------------------------------------------------------------*/
 .blog-details-section{
     position: relative;
     display: block;
     padding: 100px 0 100px;
 }
 .blog-details-content{
     position: relative;
     display: block;
 }
 .blog-details-inner{
     position: relative;
     display: block;
 }
 .blog-details-image{
     position: relative;
     display: block;
 }
 .blog-details-image img{
     width: 100%;
 }
 .blog-details-date{
     position: absolute;
     bottom: 30px;
     left: 30px;
 }
 .blog-details-date a{
     font-size: 15px;
     background: var(--thm-primary);
     display: inline-block;
     color: #ffffff;
     font-weight: 600;
     padding: 7px 25px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .blog-details-date a:hover{
     color: var(--thm-black);
     background: #ffffff;
 }
 .blog-details-content-box{
     position: relative;
     display: block;
     background-color: rgb( 255, 255, 255 );
     box-shadow: 0px 0px 62px 0px rgb( 27, 31, 45, .05 );
     padding: 28px 30px 35px;
 }
 .blog-details-meta{
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
 }
 .blog-details-meta li{
     position: relative;
     display: block;
 }
 .blog-details-meta li:before{
     position: absolute;
     top: 7px;
     left: 0;
     bottom: 8px;
     width: 2px;
     background: #c0c0c0;
     content: "";
 }
 .blog-details-meta li:first-child:before{
     display: none;
 }
 .blog-details-meta li+li{
     margin-left: 12px;
     padding-left: 12px;
 }
 .blog-details-meta li a{
     font-size: 15px;
     color: var(--thm-gray);
 }
 .blog-details-meta li i{
     color: var(--thm-primary);
     padding-right: 4px;
 }
 .blog-details-title {
     margin-top: 6px;
     margin-bottom: 20px;
 }
 .blog-details-title h3{
     font-size: 30px;
     line-height: 40px;
     font-weight: 600;
 }
 .blog-details-title h3 a{
     color: var(--thm-black);
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .blog-details-title h3 a:hover{
     color: var(--thm-primary);
 }
 .blog-details-text{}
 .blog-details-text .first-text {
     margin: 0;
 }
 .blog-details-text .second-text{
     margin: 0;
     padding-top: 11px;
     padding-bottom: 11px;
 }
 .blog-details-text .last-text{
     margin: 0;
 }
 .blog-details-two-image{
     position: relative;
     display: block;
     padding: 30px 0 30px;
 }
 .blog-details-two-img-box{}
 .blog-details-two-img-box-single{}
 .blog-details-two-img-box-single img{
     width: 100%;
 }

 .blog-details-bottom-text{}
 .blog-details-bottom-text .bottom-text{
     margin: 0;
 }

 .blog-details-bottom {
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     justify-content: space-between;
     flex-wrap: wrap;
     padding: 45px 0 40px;
 }
 .blog-details-bottom p {
     margin: 0;
     padding-bottom: 6px;
 }

 .blog-detail-tags span {
     color: var(--thm-black);
     font-size: 16px;
     margin: 0;
     margin-right: 6px;
 }
 .blog-detail-tags a {
     font-size: 14px;
     color: var(--thm-black);
     background: #f7f8f9;
     display: inline-block;
     padding: 4px 15px;
 }
 .blog-detail-tags a+a{
     margin-left: 15px;
 }
 .blog-detail-social-list {
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
 }
 .blog-detail-social-list a {
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
     -webkit-box-pack: center;
     justify-content: center;
     text-align: center;
     width: 40px;
     height: 40px;
     background-color: #f6f6f6;
     color: var(--thm-black);
     font-size: 14px;
     border-radius: 50%;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .blog-detail-social-list a + a {
     margin-left: 10px;
 }

 .blog-detail-social-list a:hover {
     color: #ffffff;
     background-color: var(--thm-primary);
 }

 /* author */

 .author-one {
     padding: 25px 35px 25px;
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
     align-items: center;
     border: 1px solid #f0f0f0;
     margin-bottom: 73px;
 }

 .author-one-content {
     margin-left: 35px;
 }

 .author-one-content h3 {
     margin: 0;
     color: var(--thm-black);
     font-size: 22px;
     font-weight: 600;
     line-height: 32px;
 }

 .author-one-content p {
     font-size: 16px;
     margin: 0;
     margin-top: 10px;
     line-height: 24px;
 }


 /*--------------------------------------------------------------
 ## Comments
 --------------------------------------------------------------*/

 .comment-one-title,
 .comment-form-title {
     margin: 0;
     color: var(--thm-black);
     font-size: 30px;
     font-weight: 600;
     margin-bottom: 52px;
 }

 .comment-one-single {
     display: -webkit-box;
     display: flex;
     border-bottom: 1px solid #edebe8;
     padding-bottom: 30px;
     margin-bottom: 60px;
 }

 .comment-one-content {
     position: relative;
     margin-left: 40px;
 }

 .comment-one-content h3 {
     margin: 0;
     font-size: 20px;
     color: var(--thm-black);
     font-weight: 600;
     margin-bottom: 15px;
 }
 .comment-one-content span{
     font-size: 16px;
     color: var(--thm-gray);
     padding-left: 15px;
 }
 .comment-one-content p {
     margin: 0;
 }

 .comment-one-btn {
     font-size: 12px;
     color: var(--thm-black);
     font-weight: 700;
     text-transform: uppercase;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
     margin-top: 10px;
     display: inline-block;
 }
 .comment-one-btn:hover{
     color: var(--thm-primary);
 }
 .comment-one-btn i{
     padding-right: 5px;
 }
 .comment-one-image img {
     border-radius: 50%;
 }

 .comment-form .comment-form-title{
     margin-top: -7px;
 }
 .comment-input-box input[type="text"],
 .comment-input-box input[type="email"]{
     height: 60px;
     width: 100%;
     border: none;
     background: #f7f8f9;
     padding: 0 30px;
     margin-bottom: 20px;
     border-radius: 0px;
     outline: none;
     font-size: 15px;
     color: #888888;
 }
 .comment-input-box textarea {
     font-size: 15px;
     color: #888888;
     height: 200px;
     width: 100%;
     background: #f7f8f9;
     padding: 30px 40px 30px;
     border: none;
     border-radius: 0px;
     outline: none;
 }
 .comment-form-btn {
     background: var(--thm-primary);
     margin-top: 10px;
     font-size: 16px;
     color: #ffffff;
     font-weight: 600;
     display: inline-block;
     padding: 15px 50px;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
 }
 .comment-form-btn:hover{
     background: var(--thm-black);
 }



 /* new css  */

 .banner-big-title {
     position: absolute;
     right: 40px;
     bottom: 50px;
     text-transform: uppercase;
     font-size: 250px;
     font-weight: 900;
     letter-spacing: 5px;
     line-height: 170px;
     -webkit-text-stroke-width: 2px;
     -webkit-text-stroke-color: rgb(255 255 255 / 0.2);
     color: transparent;
     z-index: 99;
     font-family: var(--heading-font);
 }

.banner-section .content-box h1 span {
    position: relative;
}

.banner-section .content-box h1 span:before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background: var(--thm-primary);
    z-index: -1;
}

.features-two-section .container {
    max-width: 1450px;
}

/*--------------------------------------------------------------
 # Donate Section
/* --- Base Section Styling --- */
.donate-section {
    font-family: var(--font-family);
    background-color: var(--background-color);
    padding: 80px 20px;
    color: var(--text-color);
}

.donate-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 10px;
}

.section-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
    color: #667788;
}

/* --- Main Form Layout (using Flexbox) --- */
.donation-form {
    display: flex;
    gap: 40px;
}

.donation-options-column,
.personal-info-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- Card Styles for Sections --- */
.donate-card {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 30px 40px;
    box-shadow: var(--box-shadow);
}

.card-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.card-subtitle {
    color: #718096;
    margin-bottom: 20px;
}

/* --- Amount Selection Grid --- */
.amount-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.amount-btn {
    background-color: #edf2f7;
    color: var(--text-color);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 15px 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}

.amount-btn:hover {
    background-color: #e2e8f0;
    border-color: #cbd5e0;
    transform: translateY(-3px);
}

.amount-btn.active {
    background-color: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-hover-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}

/* --- Custom Amount Input --- */
.custom-amount-input input {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    text-align: center;
    transition: border-color var(--transition-speed);
}

.custom-amount-input input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}

/* --- Payment Method Selection (Radio Buttons) --- */
.payment-method-selection {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.payment-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #f7fafc;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px 20px;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.payment-option:hover {
    background-color: #edf2f7;
    border-color: var(--primary-color);
}

.payment-option input[type="radio"] {
    display: none; /* Hide the default radio button */
}

.payment-option label {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    position: relative;
    padding-left: 30px; /* Space for the custom radio button */
}

.payment-option label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    background-color: #fff;
    transition: all var(--transition-speed);
}

.payment-option input[type="radio"]:checked + label::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.payment-option label::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform var(--transition-speed) ease-in-out;
}

.payment-option input[type="radio"]:checked + label::after {
    transform: translateY(-50%) scale(1);
}

.payment-icon {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    /* You would add a background image or SVG for the icons here */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Example icon styles (replace with your images/SVGs) */
.mpesa-icon { /* background-image: url('path/to/mpesa-icon.svg'); */ }
.paypal-icon { /* background-image: url('path/to/paypal-icon.svg'); */ }
.bank-icon { /* background-image: url('path/to/bank-icon.svg'); */ }

/* --- Payment Details Sections (JS will handle display) --- */
.payment-details-section {
    min-height: 150px; /* Prevent layout shift */
}
.payment-details-content {
    display: none; /* Hidden by default */
    animation: fadeIn 0.5s ease-in-out;
}

.payment-details-content.active {
    display: block;
}

.payment-info-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.bank-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2.2;
}

.bank-details-list strong {
    font-weight: 600;
    color: var(--heading-color);
    display: inline-block;
    width: 150px; /* Align labels */
}

.bank-transfer-note {
    font-style: italic;
    font-size: 0.9rem;
    color: #718096;
    margin-top: 15px;
}

/* --- Form Groups (Labels & Inputs) --- */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 10px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"] {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--text-color);
    background-color: #fcfcfc;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}

/* --- Submit Button --- */
.form-actions {
    margin-top: 30px;
    text-align: center;
}

.submit-donation-btn {
    width: 100%;
    padding: 18px 25px;
    border: none;
    border-radius: 10px;
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--transition-speed), transform 0.2s, box-shadow 0.3s;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.submit-donation-btn:hover {
    background-color: var(--primary-hover-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.submit-donation-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* --- Modal (Pop-up) Styles --- */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.modal-content {
    background-color: #fff;
    padding: 40px;
    border-radius: var(--border-radius);
    width: 1900px;
    text-align: center;
    position: relative;
    box-shadow: var(--box-shadow);
    animation: zoomIn 0.3s ease-out;
}

.modal-content .close-btn {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 35px;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s;
}

.modal-content .close-btn:hover {
    color: #333;
}

.modal-content h2 {
    font-size: 2rem;
    color: var(--heading-color);
    margin-bottom: 15px;
}

.modal-content p {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 30px;
}

.modal-ok-btn {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color var(--transition-speed);
}

.modal-ok-btn:hover {
    background-color: var(--primary-hover-color);
}

/* --- Accessibility: Visually Hidden Label --- */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .donation-form {
        flex-direction: column; /* Stack columns vertically on smaller screens */
    }

    .donate-card {
        padding: 25px;
    }
}

@media (max-width: 600px) {
    .section-title {
        font-size: 2rem;
    }

    .card-title {
        font-size: 1.4rem;
    }

    .donate-card {
        padding: 20px;
    }

    .amount-btn {
        font-size: 1rem;
        padding: 12px 8px;
    }

    .submit-donation-btn {
        font-size: 1rem;
        padding: 15px;
    }
}

/* TEAM BIO SECTION STYLE */

.team-bio-section {
    padding: 50px 0;
    background-color: #f8f9fa;
}

.team-member {
    display: block;
    margin-bottom: 30px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* Center-align the content */
}

.team-member .image {
    margin-bottom: 20px;
    /* Space between image and content */
}

.team-member .image img {
    width: 120px;
    /* Adjust the image size */
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.team-member .content {
    margin-top: 10px;
}

.team-member h3 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333333;
}

.team-member p {
    font-size: 16px;
    color: #666666;
    margin-bottom: 15px;
    line-height: 1.6;
}

.team-member .read-more-btn {
    font-size: 14px;
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.team-member .read-more-btn:hover {
    color: #0056b3;
}

/* BIO DATA STYLE */

.single-biodata {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.bio-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}

.bio-image {
    flex: 1;
    max-width: 300px;
}

.bio-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.bio-text {
    flex: 2;
    text-align: justify;
}

.bio-text h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
}

.bio-text p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
    text-indent: 20px; /* Indent the first line of each paragraph */
}

/* MODAL STYLES */
    /* Modal Background */
    .modal {
        display: none; /* Hidden by default */
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.4);
    }

    /* Close Button */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }



.message {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border: 1px solid #f5c6cb;
    border-radius: 5px;
    z-index: 1000;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Black with opacity */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Modal Title */
#modalTitle {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
}

/* Modal Message */
#modalMessage {
    font-size: 18px;
    margin-bottom: 20px;
    color: #666;
}

/* Modal Button */
#modalButton {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#modalButton:hover {
    background-color: #0056b3;
}

/* General form styling */


.donor-information {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Form group styling */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s;
}

.form-group input:focus {
    outline: none;
    border-color: #007bff;
}

/* Submit button styling */
button[type="submit"] {
    padding: 10px;
    font-size: 16px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button[type="submit"]:hover {
    background-color: #218838;
}


.text-success {
    color: #28a745;
    text-align: center;
    margin-top: 10px;
}

.text-danger {
    color: #dc3545;
    text-align: center;
    margin-top: 10px;
}

.timeline-container {
    max-width: 1200px;
    margin: 3 auto;
    padding: 0 2rem;
    position: relative;
}

/* Timeline line */
.timeline-container::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #4CAF50, #45a049);
    border-radius: 2px;
    z-index: 1;
}

.timeline-item {
    position: relative;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease-out forwards;
}

.timeline-item:nth-child(even) {
    animation-delay: 0.2s;
}

.timeline-item:nth-child(odd) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Timeline dot */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 2rem;
    width: 20px;
    height: 20px;
    background: #4CAF50;
    border: 4px solid white;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.3);
}

/* Alternating layout - More spacious */
.timeline-item:nth-child(odd) .timeline-content {
    margin-left: 0;
    margin-right: 52%;
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-content {
    margin-left: 52%;
    margin-right: 0;
    text-align: left;
}

.timeline-content {
    background: white;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 300px;
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Arrow pointing to timeline */
.timeline-item:nth-child(odd) .timeline-content::after {
    content: '';
    position: absolute;
    right: -15px;
    top: 2rem;
    width: 0;
    height: 0;
    border-left: 15px solid white;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.timeline-item:nth-child(even) .timeline-content::after {
    content: '';
    position: absolute;
    left: -15px;
    top: 2rem;
    width: 0;
    height: 0;
    border-right: 15px solid white;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

.timeline-date {
    display: inline-block;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.timeline-event-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 2rem;
    line-height: 1.3;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.gallery img,
.gallery video {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.gallery img:hover,
.gallery video:hover {
    transform: scale(1.05);
}

.event-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.event-description p {
    margin-bottom: 1.2rem;
}

.school-name {
    color: #4CAF50;
    font-weight: 600;
}

/* See More Button */
.see-more-container {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
}

.see-more-btn {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
    margin-right: 50%;
    margin-bottom: 4%;
}

.see-more-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.see-more-btn:hover::before {
    left: 100%;
}

.see-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(76, 175, 80, 0.4);
}

.see-more-btn:active {
    transform: translateY(0);
}

/* Loading animation for future projects */
.loading-dots {
    display: none;
    margin-left: 0.5rem;
}

.loading-dots span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    margin: 0 2px;
    animation: loading 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

/* ====================================================================
   Initiative pages
   ==================================================================== */
.initiative-header-copy {
    max-width: 600px;
    margin: 12px auto 0;
    color: rgba(255, 255, 255, .9);
    font-size: 17px;
    line-height: 1.65;
}
.initiative-showcase {
    margin-top: 0;
    padding: 100px 0 75px;
    background: linear-gradient(180deg, #f5f8f5 0%, #fff 100%);
}
.initiative-intro {
    display: grid;
    grid-template-columns: minmax(140px, .45fr) minmax(0, 2fr) auto;
    gap: 30px;
    align-items: end;
    margin-bottom: 52px;
}
.initiative-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--thm-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.3px;
    line-height: 1.4;
    text-transform: uppercase;
}
.initiative-eyebrow::before {
    width: 26px;
    height: 2px;
    background: currentColor;
    content: '';
}
.initiative-intro h2,
.project-timeline-heading h2 {
    margin: 8px 0 10px;
    color: #172b20;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.15;
}
.initiative-intro p {
    max-width: 680px;
    margin: 0;
    color: #5e6d63;
    font-size: 17px;
    line-height: 1.7;
}
.initiative-count {
    display: flex;
    min-width: 120px;
    flex-direction: column;
    padding-left: 25px;
    border-left: 1px solid #ced9d0;
}
.initiative-count strong { color: var(--thm-primary); font-size: 42px; line-height: 1; }
.initiative-count span { color: #65736a; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.initiative-card {
    height: calc(100% - 30px);
    overflow: hidden;
    border: 1px solid #e6ede7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(25, 62, 35, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.initiative-card:hover { transform: translateY(-8px); box-shadow: 0 22px 45px rgba(25, 62, 35, .15); }
.initiative-card .main-service-one-sec-img { height: 225px; }
.initiative-card .main-service-one-sec-img::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(12, 42, 24, .3)); content: ''; }
.initiative-card .main-service-one-sec-img img { height: 100%; object-fit: cover; border-radius: 0; }
.initiative-card .main-service-one-sec-content { display: flex; min-height: 290px; flex-direction: column; padding: 30px; box-shadow: none; }
.initiative-card-category { display: inline-flex; width: fit-content; padding: 5px 11px; border-radius: 50px; background: #edf7ef; color: var(--thm-primary); font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.initiative-card .main-service-one-sec-content h3 { margin: 17px 0 11px; color: #193024; font-size: 23px; line-height: 1.28; }
.initiative-card .main-service-one-sec-content p { color: #66736a; font-size: 15px; line-height: 1.75; }
.initiative-card-link { display: inline-flex; width: fit-content; align-items: center; gap: 10px; margin-top: auto; padding-top: 23px; color: #172b20; font-size: 14px; font-weight: 800; letter-spacing: .2px; text-transform: uppercase; }
.initiative-card-link span:last-child { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: var(--thm-primary); color: #fff; font-size: 17px; transition: transform .2s ease; }
.initiative-card-link:hover { color: var(--thm-primary); }
.initiative-card-link:hover span:last-child { transform: translateX(4px); }

.initiative-projects-page { background: #f6f9f6; }
.project-page-hero { position:relative; isolation:isolate; overflow:hidden; padding: 92px 0 104px; background:linear-gradient(120deg, rgba(13, 47, 27, .97), rgba(42, 111, 57, .87)); color: #fff; }
.project-page-hero-image{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;opacity:.35}
.project-back-link { display: inline-block; margin-bottom: 30px; color: rgba(255, 255, 255, .82); font-size: 14px; font-weight: 700; }
.project-back-link:hover { color: #fff; transform: translateX(-3px); }
.project-page-hero .initiative-eyebrow { color: #bde4c4; }
.project-page-hero h1 { max-width: 780px; margin: 13px 0; color: #fff; font-size: 52px; font-weight: 800; line-height: 1.1; }
.project-page-hero p { max-width: 720px; margin: 0; color: rgba(255, 255, 255, .84); font-size: 18px; line-height: 1.75; }
.project-hero-meta { display: inline-flex; gap: 7px; align-items: baseline; margin-top: 28px; padding: 9px 15px; border: 1px solid rgba(255,255,255,.24); border-radius: 50px; color: rgba(255,255,255,.86); font-size: 14px; }
.project-hero-meta strong { color: #fff; font-size: 19px; }
.project-timeline-wrap { padding-top: 75px; padding-bottom: 85px; }
.project-timeline-heading { margin-bottom: 45px; text-align: center; }
.project-timeline-heading h2 { font-size: 38px; }
.initiative-projects-page .timeline-container { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.initiative-projects-page .timeline-container::before { width: 2px; background: linear-gradient(to bottom, transparent, var(--thm-primary) 8%, var(--thm-primary) 92%, transparent); }
.initiative-projects-page .timeline-item { margin-bottom: 48px; }
.initiative-projects-page .timeline-item::before { width: 16px; height: 16px; border: 3px solid #f6f9f6; background: var(--thm-primary); box-shadow: 0 0 0 5px #d6ead8; }
.initiative-projects-page .timeline-content { min-height: 0; padding: 30px; border: 1px solid #e2ece3; border-radius: 14px; box-shadow: 0 10px 30px rgba(25, 62, 35, .08); }
.initiative-projects-page .timeline-content:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(25, 62, 35, .13); }
.initiative-projects-page .timeline-date { margin-bottom: 15px; padding: 6px 12px; background: #eaf6ed; box-shadow: none; color: var(--thm-primary); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }
.initiative-projects-page .timeline-event-title { margin-bottom: 20px; color: #193024; font-size: 25px; line-height: 1.25; }
.initiative-projects-page .gallery { gap: 12px; margin-bottom: 22px; }
.initiative-projects-page .gallery img, .initiative-projects-page .gallery video { height: 200px; border-radius: 9px; }
.initiative-projects-page .event-description { color: #5f6e64; font-size: 16px; line-height: 1.75; }

/* Compact, grouped public navigation */
.main-menu .navigation > li { margin-right: 32px; }
.main-menu .navigation > li > ul {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    border-radius: 0 0 8px 8px;
}
.main-menu .navigation > li.dropdown:hover > ul {
    transform: translateY(0);
}
.main-menu .navigation > li.dropdown > a::after {
    margin-left: 7px;
    content: '\f107';
    font-family: 'Font Awesome 5 Pro';
    font-size: 12px;
    font-weight: 900;
    vertical-align: 1px;
}
.main-menu .navigation > li.nav-donate > a {
    margin: 0 0 0 10px;
    padding: 9px 18px;
    border-radius: 4px;
    background: var(--thm-primary);
    color: #fff !important;
    line-height: 1.2;
}
.main-menu .navigation > li.nav-donate:hover > a,
.main-menu .navigation > li.nav-donate.current > a { background: #172b20; color: #fff !important; }
.main-header.two .main-menu .navigation > li.nav-donate > a { background: #fff; color: var(--thm-primary) !important; }
.main-header.two .main-menu .navigation > li.nav-donate:hover > a,
.main-header.two .main-menu .navigation > li.nav-donate.current > a { background: #172b20; color: #fff !important; }

@media only screen and (min-width: 1200px) {
    .main-header:not(.two) .header_upper_inner {
        display: flex;
        min-height: 106px;
        align-items: center;
        justify-content: center;
    }
    .main-header:not(.two) .header_upper_one_box {
        position: absolute;
        left: 0;
        top: 50%;
        float: none;
        transform: translateY(-50%);
    }
    .main-header:not(.two) .header_upper_two_box.one {
        float: none;
    }
    .main-header.two .main-header-two-nav-box .nav-outer {
        display: flex;
        width: 100%;
        justify-content: center;
    }
    .main-header.two .main-header-two-nav-box .nav-inner { display: inline-block; }
}

@media (max-width: 991px) {
    .initiative-showcase { padding-top: 75px; }
    .initiative-intro { grid-template-columns: 1fr auto; }
    .initiative-intro > .initiative-eyebrow { grid-column: 1 / -1; }
    .initiative-card .main-service-one-sec-content { min-height: 0; }
    .project-page-hero { padding: 72px 0 80px; }
}

@media (max-width: 767px) {
    .initiative-header-copy { padding: 0 15px; font-size: 15px; }
    .initiative-showcase { padding: 60px 0 40px; }
    .initiative-intro { display: block; margin-bottom: 36px; }
    .initiative-intro > .initiative-eyebrow { margin-bottom: 12px; }
    .initiative-intro h2, .project-timeline-heading h2 { font-size: 31px; }
    .initiative-intro p { font-size: 15px; }
    .initiative-count { display: inline-flex; min-width: 0; margin-top: 22px; padding-left: 17px; }
    .initiative-card .main-service-one-sec-img { height: 205px; }
    .initiative-card .main-service-one-sec-content { padding: 25px; }
    .project-page-hero { padding: 58px 0 64px; }
    .project-page-hero h1 { font-size: 36px; }
    .project-page-hero p { font-size: 16px; }
    .project-timeline-wrap { padding-top: 55px; padding-bottom: 55px; }
    .initiative-projects-page .timeline-container { padding: 0 0 0 26px; }
    .initiative-projects-page .timeline-container::before { left: 7px; }
    .initiative-projects-page .timeline-item::before { left: 7px; top: 24px; }
    .initiative-projects-page .timeline-item:nth-child(odd) .timeline-content,
    .initiative-projects-page .timeline-item:nth-child(even) .timeline-content { margin-left: 0; margin-right: 0; text-align: left; }
    .initiative-projects-page .timeline-item:nth-child(odd) .timeline-content::after,
    .initiative-projects-page .timeline-item:nth-child(even) .timeline-content::after { display: none; }
    .initiative-projects-page .timeline-content { padding: 24px 20px; }
    .initiative-projects-page .timeline-event-title { font-size: 22px; }
    .initiative-projects-page .gallery { grid-template-columns: 1fr; }
}

@keyframes loading {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .timeline-container {
        padding: 0 1rem;
    }

    .timeline-container::before {
        left: 2rem;
    }

    .timeline-item {
        margin-bottom: 3rem;
    }

    .timeline-item::before {
        left: 2rem;
    }

    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        margin-left: 4rem;
        margin-right: 0;
        text-align: left;
    }

    .timeline-item:nth-child(odd) .timeline-content::after,
    .timeline-item:nth-child(even) .timeline-content::after {
        left: -15px;
        right: auto;
        border-left: none;
        border-right: 15px solid white;
    }

    .timeline-content {
        padding: 2rem;
        min-height: auto;
    }

    .gallery {
        grid-template-columns: 1fr;
    }

    .timeline-event-title {
        font-size: 1.5rem;
    }

    .event-description {
        font-size: 1rem;
    }
}


/*==============================================================
LINKCARE EVENTS UI
PART 3A
==============================================================*/

/**********************
GENERAL
**********************/

.events-page{
    background:#f8fafc;
    overflow:hidden;
}

body{
    background:#f8fafc;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

/**********************
HERO
**********************/

.events-hero{
position:relative;
isolation:isolate;
background:#0f4927;
}

.events-hero-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;}

.events-hero::after{

content:"";

position:absolute;

left:0;

bottom:-1px;

width:100%;

height:20px;

background:#f8fafc;

border-radius:45% 45% 0 0;

}

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:-1;
    background:linear-gradient(rgba(23,98,53,.85),rgba(15,73,39,.90)),radial-gradient(circle at top right,rgba(255,255,255,.12),transparent 35%);

}

.min-vh-50{

    min-height:60vh;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:rgba(255,255,255,.15);

    color:white;

    padding:10px 20px;

    border-radius:50px;

    backdrop-filter:blur(10px);

    font-weight:600;

    letter-spacing:1px;

    font-size:.85rem;

}

.hero-title{

    color:white;

    font-weight:800;

    font-size:4rem;

    line-height:1.1;

}

.hero-text{

    color:rgba(255,255,255,.82);

    font-size:1.2rem;

    line-height:1.8;

    max-width:650px;

}
.button-events {
    
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}
.filter-btn {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.01em;
}

/* Subtle active scale elevation */
.filter-btn.active {
    transform: translateY(-1px);
}

/* Optional: softer state switching if using dark/light background variants */
.filter-btn:not(.active):hover {
    transform: translateY(-1px);
}

.filter-btn{

    transition:.35s;

}

.filter-btn:hover{

    transform:translateY(-3px);

}

/**********************
IMPACT
**********************/

.impact-card{

    background:white;

    border-radius:24px;

    padding:40px;

    text-align:center;

    box-shadow:
    0 15px 40px rgba(0,0,0,.05);

    transition:.4s;

    height:100%;

}

.impact-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 25px 50px rgba(0,0,0,.08);

}

.impact-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto auto 25px;

    font-size:1.8rem;

}

.impact-card h2{

    font-size:3rem;

    font-weight:800;

    margin-bottom:5px;

}

.impact-card p{

    color:#6c757d;

    margin:0;

}

/**********************
FEATURED
**********************/

.featured-event{

    background:white;

    overflow:hidden;

    border-radius:28px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.07);

}

.featured-image{

    width:100%;

    height:100%;

    min-height:480px;

    object-fit:cover;

    transition:.8s;

}

.featured-event:hover .featured-image{

    transform:scale(1.05);

}

.featured-placeholder{

    min-height:480px;

    background:#eef5ff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#0d6efd;

}

.featured-content{

    padding:70px;

}

.featured-badge{

    display:inline-block;

    background:#e9f2ff;

    color:#0d6efd;

    padding:8px 18px;

    border-radius:50px;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;

}

.featured-content h2{

    font-size:2.7rem;

    font-weight:800;

    line-height:1.2;

}

.featured-meta{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

}

.featured-meta div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#555;

    font-weight:600;

}

/**********************
EVENT GRID
**********************/

.modern-event-card{

    background:white;

    border-radius:24px;

    overflow:hidden;

    cursor:pointer;

    transition:.45s;

    height:100%;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

}

.modern-event-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 30px 60px rgba(0,0,0,.12);

}

/**********************
IMAGE
**********************/

.event-image{

    position:relative;

    overflow:hidden;

    height:260px;

}

.event-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;

}

.modern-event-card:hover img{

    transform:scale(1.08);

}

.image-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef5ff;

    color:#0d6efd;

    font-size:5rem;

}

.event-date{

    position:absolute;

    left:20px;

    bottom:20px;

    width:72px;

    height:72px;

    background:white;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.15);

}

.event-date small{

    text-transform:uppercase;

    color:#0d6efd;

    font-weight:700;

}

.event-date strong{

    font-size:1.5rem;

}

/**********************
CONTENT
**********************/

.event-content{

    padding:30px;

}

.event-status{

    display:inline-block;

    padding:7px 18px;

    border-radius:30px;

    font-size:.75rem;

    font-weight:700;

    margin-bottom:18px;

}

.event-status.upcoming{

    background:#e9f7ef;

    color:#198754;

}

.event-status.past{

    background:#f1f3f5;

    color:#6c757d;

}

.event-content h4{

    font-size:1.45rem;

    font-weight:800;

    margin-bottom:18px;

    line-height:1.4;

}

.event-location{

    display:flex;

    align-items:center;

    gap:10px;

    color:#0d6efd;

    font-weight:600;

    margin-bottom:18px;

}

.event-content p{

    color:#6b7280;

    line-height:1.8;

    margin-bottom:30px;

}

.read-story{

    display:flex;

    align-items:center;

    gap:10px;

    color:#0d6efd;

    font-weight:700;

    transition:.3s;

}

.modern-event-card:hover .read-story{

    gap:18px;

}

/**********************
BUTTONS
**********************/

.btn-primary{

    border-radius:50px;

    font-weight:600;

    padding:12px 30px;

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-outline-light{

    border-radius:50px;

    transition:.35s;

}

.btn-outline-light:hover{

    transform:translateY(-3px);

}

/**********************
RESPONSIVE
**********************/

@media(max-width:991px){

.hero-title{

font-size:3rem;

}

.featured-content{

padding:45px;

}

.featured-image{

min-height:350px;

}

}

@media(max-width:768px){

.events-hero{

padding:90px 0;

text-align:center;

}

.hero-title{

font-size:2.4rem;

}

.hero-text{

font-size:1rem;

margin:auto;

}

.featured-content{

padding:30px;

}

.featured-content h2{

font-size:2rem;

}

.featured-meta{

flex-direction:column;

gap:12px;

}

.impact-card{

padding:30px;

}

.event-image{

height:220px;

}

}

/*==============================================================
LINKCARE EVENTS UI
PART 3B
MODAL + UTILITIES
==============================================================*/

/**********************
MODAL
**********************/

.modern-modal{
    border:none;
    border-radius:28px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,.25);
}

.modal-dialog{
    max-width:1200px;
}

.modal.show{
    z-index:999999;
}

.modal-backdrop.show{
    opacity:.75;
}

/**********************
MODAL HERO
**********************/

.modal-hero{
    position:relative;
    height:420px;
    overflow:hidden;
}

.modal-cover{
    width:100%;
    height:100%;
    object-fit:cover;
}

.modal-cover-placeholder{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#edf5ff,#d8e8ff);
    color:#0d6efd;
}

.modal-gradient{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.72),
            rgba(0,0,0,.18),
            transparent
        );
}

.modal-title-area{
    position:absolute;
    left:60px;
    bottom:50px;
    color:white;
    z-index:2;
}

.modal-title-area h1{
    font-size:3rem;
    font-weight:800;
    margin-top:15px;
    max-width:700px;
    line-height:1.2;
}

.modal-category{
    display:inline-block;
    padding:8px 20px;
    border-radius:50px;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:1px;
}

/**********************
CLOSE BUTTON
**********************/

.btn-close-modal{
    position:absolute;
    top:25px;
    right:25px;
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:white;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    transition:.35s;
    z-index:10;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.btn-close-modal:hover{
    transform:rotate(90deg) scale(1.08);
    color:#dc3545;
}

/**********************
STORY
**********************/

.story-badge{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:#eef5ff;
    color:#0d6efd;
    font-weight:700;
    letter-spacing:1px;
    font-size:.8rem;
}

.story-text{
    font-size:1.08rem;
    line-height:2;
    color:#4b5563;
    white-space:pre-line;
}

/**********************
GALLERY
**********************/

.gallery-image{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:20px;
    transition:.45s;
    cursor:pointer;
}

.gallery-image:hover{
    transform:scale(1.03);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

/**********************
IMPACT QUOTE
**********************/

.impact-box{
    background:linear-gradient(135deg,#0d6efd,#3b82f6);
    border-radius:24px;
    padding:40px;
    color:white;
}

.impact-box i{
    font-size:2.5rem;
    margin-bottom:20px;
}

.impact-box h5{
    line-height:1.8;
    margin:0;
}

/**********************
SIDEBAR
**********************/

.sidebar{
    background:#f8fafc;
    border-left:1px solid #edf0f4;
}

.sidebar .sticky-top{
    top:25px;
}

.info-card{
    display:flex;
    align-items:center;
    gap:18px;
    background:white;
    border-radius:20px;
    padding:20px;
    margin-bottom:18px;
    transition:.35s;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.info-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 35px rgba(0,0,0,.08);
}

.info-card small{
    display:block;
    color:#6b7280;
    margin-bottom:5px;
}

.info-card strong{
    display:block;
    color:#111827;
}

.info-icon{
    width:58px;
    height:58px;
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1.3rem;
    flex-shrink:0;
}

/**********************
SIDEBAR INFO
**********************/

.impact-mini{
    background:white;
    padding:25px;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.impact-mini h6{
    font-size:1.05rem;
    font-weight:700;
    margin-bottom:15px;
}

.impact-mini p{
    margin:0;
    line-height:1.8;
    color:#6b7280;
}

/**********************
BUTTONS
**********************/

.remind-btn,
.share-btn{

    transition:.35s;

}

.remind-btn:hover,
.share-btn:hover{

    transform:translateY(-3px);

}

/**********************
SCROLLBAR
**********************/

.modal-body::-webkit-scrollbar{
    width:8px;
}

.modal-body::-webkit-scrollbar-thumb{
    background:#d6dbe3;
    border-radius:20px;
}

.modal-body::-webkit-scrollbar-track{
    background:transparent;
}

/**********************
ANIMATIONS
**********************/

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

.modal.show .story-text,
.modal.show .info-card,
.modal.show .impact-box{

    animation:fadeUp .5s ease;

}

/**********************
RESPONSIVE
**********************/

@media(max-width:991px){

.modal-hero{

height:300px;

}

.modal-title-area{

left:30px;
bottom:30px;

}

.modal-title-area h1{

font-size:2.2rem;

}

.sidebar{

border-left:none;
border-top:1px solid #edf0f4;

}

}

@media(max-width:768px){

.modal-hero{

height:220px;

}

.modal-title-area{

left:20px;
bottom:20px;

}

.modal-title-area h1{

font-size:1.7rem;

}

.story-text{

font-size:1rem;

}

.info-card{

padding:16px;

}

.gallery-image{

height:170px;

}

.impact-box{

padding:25px;

}

.btn-close-modal{

width:42px;
height:42px;

}

}

/* Shared header refresh: lighter spacing, rounded navigation, and softer elevation. */
.main-header .header_top{padding:8px 0;background:#082b4c}.header_top_one_box ul li,.header_top_one_box ul li a,.header_top_two_box .opening_hour p,.main-header.two .header_top_one_box h4{font-size:13px;line-height:24px}.social_links_1 a{width:26px;height:26px;font-size:13px;background:rgba(255,255,255,.12)}.social_links_1 a:hover{background:var(--thm-primary)}
.main-header:not(.two) .header_upper{box-shadow:0 8px 24px rgba(8,43,76,.06)}.main-header .header_upper_one_box .logo{padding:14px 0}.logo img{width:172px}.main-header .nav-outer{min-height:62px}.main-menu .navigation>li{padding:22px 0;margin-right:30px}.main-menu .navigation>li>a{font-size:15px;font-weight:700;letter-spacing:.01em}.main-menu .navigation>li>a:after{content:"";position:absolute;left:50%;right:50%;bottom:-9px;height:2px;border-radius:2px;background:var(--thm-primary);transition:.25s}.main-menu .navigation>li:hover>a:after,.main-menu .navigation>li.current>a:after{left:0;right:0}
.main-header.two .header_top{background:rgba(8,43,76,.9);backdrop-filter:blur(10px)}.header_upper-two_inner{padding:22px 0}.header_upper_two-right_box ul li{padding-left:47px;margin-right:30px}.header_upper_two-right_box ul li .address_icon span{font-size:31px;line-height:48px}.header_upper_two_box-btn{margin-left:28px}.header_upper_two_box-btn a{padding:11px 23px;border-radius:999px;font-size:13px}.main-header-two-nav-box{padding:0 24px}.main-header-two-nav-box-inner{max-width:1180px;margin:0 auto;padding:0 28px;border-radius:16px 16px 0 0;box-shadow:0 -8px 26px rgba(8,43,76,.12)}.main-menu.two .navigation>li{padding:18px 0}.main-menu.two .navigation>li>a{font-size:14px}.main-header.two .main-menu .navigation>li.nav-donate>a{border-radius:999px;padding:10px 18px;margin-top:-10px}.main-header.two .main-menu .navigation>li.nav-donate>a:after{display:none}
@media(max-width:1199px){.main-header .header_top{display:none}.main-header.two{background:#fff;position:relative}.main-header.two .header_upper-two{background:#fff}.main-header-two-nav-box{padding:0}.main-header-two-nav-box-inner{border-radius:0}.main-header .nav-outer .mobile-nav-toggler{top:0;border-radius:10px;padding:12px}.header_upper-two_inner{padding:15px 0}.main-header.two .header_upper_two-right_box{display:none}}

/* A warmer, clearer donate action that works against both public header variants. */
.main-menu .navigation>li.nav-donate{margin-left:10px;margin-right:0}
.main-menu .navigation>li.nav-donate>a,.main-header.two .main-menu .navigation>li.nav-donate>a{display:inline-flex;align-items:center;gap:8px;padding:11px 19px;margin:0;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:linear-gradient(135deg,#14a77c,#087456);box-shadow:0 8px 18px rgba(8,117,86,.24);color:#fff!important;font-weight:800;line-height:1;letter-spacing:.01em}
.main-menu .navigation>li.nav-donate>a i{font-size:12px;color:#d9ffef;transition:transform .25s ease}.main-menu .navigation>li.nav-donate>a:after{display:none}.main-menu .navigation>li.nav-donate:hover>a,.main-menu .navigation>li.nav-donate.current>a,.main-header.two .main-menu .navigation>li.nav-donate:hover>a,.main-header.two .main-menu .navigation>li.nav-donate.current>a{background:linear-gradient(135deg,#087456,#065840);box-shadow:0 12px 24px rgba(6,88,64,.3);color:#fff!important;transform:translateY(-2px)}.main-menu .navigation>li.nav-donate:hover>a i{transform:scale(1.15)}
.mobile-menu .navigation li.nav-donate{border-bottom:0;padding:10px 16px}.mobile-menu .navigation li.nav-donate>a{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;border-radius:999px;background:linear-gradient(135deg,#14a77c,#087456);color:#fff}.mobile-menu .navigation li.nav-donate>a:before{display:none}

/* Decorative footer circles retain LinkCare's green even on the navy footer. */
.footer-section::before,.footer-section::after{background:radial-gradient(circle at 35% 35%,rgba(72,215,158,.3),rgba(11,139,104,.13) 52%,rgba(11,139,104,0) 72%);border:1px solid rgba(72,215,158,.17)}

/* Header visibility and rounded navigation refinement. */
.main-header .header_top,.main-header.two .header_top{background:#0b8b68!important}.main-header-two-nav-box-inner{min-height:76px;border-radius:999px!important;padding:0 36px!important}.main-menu.two .navigation>li{padding:25px 0}.main-menu.two .navigation>li>a{font-size:14px}.fixed-header .sticky-header .main-menu .navigation>li.nav-donate>a{display:inline-flex!important;align-items:center;gap:8px;padding:11px 19px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:999px!important;background:linear-gradient(135deg,#14a77c,#087456)!important;box-shadow:0 8px 18px rgba(8,117,86,.24);color:#fff!important}.fixed-header .sticky-header .main-menu .navigation>li.nav-donate>a:after{display:none!important}.fixed-header .sticky-header .main-menu .navigation>li.nav-donate>a i{color:#d9ffef}.fixed-header .sticky-header .main-menu .navigation>li.nav-donate:hover>a{background:linear-gradient(135deg,#087456,#065840)!important}@media(max-width:1199px){.main-header-two-nav-box-inner{min-height:auto;border-radius:0!important}}

/* Shared page modules: public page styles belong here, not in Blade templates. */
.form-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.about-page-refresh{padding:110px 0;background:linear-gradient(180deg,#fff 0%,#f6f9f8 100%)}.about-page-refresh .about-two-left-content{margin-bottom:0}.about-page-refresh .about-two-sec-image{overflow:hidden;border-radius:24px;box-shadow:0 24px 55px rgba(8,43,76,.15)}.about-page-refresh .about-two-sec-image:before{display:none}.about-page-refresh .about-two-sec-image img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.about-page-refresh .about-two-right-content{width:100%;margin:64px 0 0}.about-page-refresh .about-two-title h2{max-width:850px;color:#082b4c;font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.12}.about-page-refresh .about-two-title-text{max-width:none;color:#516578;font-size:1.08rem;line-height:1.85}.about-page-refresh .about-two-bottom-content{max-width:none}.about-page-refresh .about-two-bottom-content p{color:#536a7b;line-height:1.8}.about-page-refresh .about-two-bottom-content h3{margin-top:26px;color:#082b4c}.about-two-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:32px}.about-two-actions .theme-btn{display:inline-flex;align-items:center;gap:10px}.about-team-link{color:#08785b;font-weight:800}.about-team-link:hover{color:#054d3b}.team-directory{padding:115px 0;background:linear-gradient(180deg,#f6f9f8,#fff)}.team-directory .thm-section-title{max-width:760px;margin:0 auto 52px}.team-directory-eyebrow{display:block;margin-bottom:12px;color:#0b8b68;font-size:.76rem;font-weight:800;letter-spacing:.14em}.team-directory .thm-section-title h1{margin:0;color:#082b4c;font-size:clamp(2.4rem,4.5vw,4rem);font-weight:800;line-height:1.1}.team-directory-intro{margin:17px auto 0;color:#617386;font-size:1.06rem;line-height:1.75}.team-directory .team-member{height:100%;overflow:hidden;border:1px solid #dfe8e7;border-radius:20px;background:#fff;box-shadow:0 12px 28px rgba(8,43,76,.07);transition:transform .25s,box-shadow .25s}.team-directory .team-member:hover{transform:translateY(-7px);box-shadow:0 22px 44px rgba(8,43,76,.14)}.team-directory .team-member .image{height:280px;overflow:hidden;background:#e7f2ee}.team-directory .team-member .image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.team-directory .team-member:hover .image img{transform:scale(1.05)}.team-directory .team-member .content{padding:25px}.team-directory .team-member h3{margin:0 0 8px;color:#082b4c;font-size:1.35rem;font-weight:800}.team-directory .team-member .content p:first-of-type{min-height:50px;margin-bottom:14px;color:#08785b;font-size:.88rem;line-height:1.45}.team-directory .team-member .content p:not(:first-of-type){color:#637589;line-height:1.7}.team-directory .read-more-btn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:#08785b;font-weight:800}.team-directory .read-more-btn:hover{color:#054d3b}@media(max-width:767px){.about-page-refresh,.team-directory{padding:75px 0}.about-page-refresh .about-two-sec-image img{aspect-ratio:4/3}.about-page-refresh .about-two-right-content{margin-top:42px}.about-two-actions{gap:14px}.team-directory .thm-section-title{margin-bottom:34px}.team-directory .team-member .image{height:250px}}
@media(max-width:1199px){.main-header.two .header_upper-two{position:relative;z-index:9999;border-bottom:1px solid #e4ece9}.main-header.two .header_upper-two_inner{display:flex;align-items:center;justify-content:space-between;min-height:74px;padding:10px 0}.main-header.two .header_upper_two_box{float:none}.main-header.two .header_upper_two_box .logo{display:block}.main-header.two .header_upper_two_box .logo img{display:block;width:150px;max-height:52px;object-fit:contain;object-position:left center}.main-header.two .main-header-two-nav-box{height:0;position:relative;z-index:10000}.main-header.two .main-header-two-nav-box-inner{min-height:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}.main-header.two .main-header-two-nav-box .nav-outer{position:absolute;top:-61px;right:0;float:none;min-height:0}.main-header.two .main-header-two-nav-box .mobile-nav-toggler{display:block;top:0;margin:0;padding:13px 12px 10px;border-radius:10px;background:#0b8b68;box-shadow:0 8px 18px rgba(11,139,104,.22)}.main-header.two .main-header-two-nav-box .nav-inner{display:none}.main-header.two+.banner-section.two{margin-top:0!important}}@media(max-width:575px){.main-header.two .header_upper-two_inner{min-height:66px}.main-header.two .header_upper_two_box .logo img{width:130px;max-height:46px}.main-header.two .main-header-two-nav-box .nav-outer{top:-56px}.main-header.two .main-header-two-nav-box .mobile-nav-toggler{font-size:25px;padding:11px 10px 8px}}
.gallery-hero,.news-hero,.news-detail-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,rgba(8,43,76,.83),rgba(11,139,104,.68));color:#fff}.gallery-hero,.news-hero{padding:135px 0 100px}.content-hero-image{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}.gallery-hero span,.news-hero span{font-size:.78rem;font-weight:800;letter-spacing:.15em}.gallery-hero h1,.news-hero h1{font-size:clamp(2.7rem,5vw,4.7rem);font-weight:800;line-height:1.05;margin:16px 0}.gallery-hero p,.news-hero p{max-width:600px;font-size:1.1rem;line-height:1.8;color:rgba(255,255,255,.84)}.gallery-page,.news-page,.news-article{background:#f6f9f8}.gallery-card,.news-card{overflow:hidden;background:#fff;border-radius:20px;box-shadow:0 10px 28px rgba(8,43,76,.07)}.gallery-card>a{position:relative;display:block;height:230px;overflow:hidden;background:#e5f4ee}.gallery-card img,.news-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.gallery-card:hover img{transform:scale(1.08)}.gallery-view{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,43,76,.68);color:#fff;font-weight:800;opacity:0;transition:opacity .25s}.gallery-card:hover .gallery-view,.gallery-lightbox:focus .gallery-view{opacity:1}.gallery-card-copy,.news-copy{padding:24px}.gallery-card-copy h2{margin:0 0 5px;color:#082b4c;font-size:1rem;font-weight:800}.gallery-card-copy p,.news-copy p{margin:0;color:#64748b;line-height:1.7}.gallery-empty{padding:55px;background:#fff;border-radius:18px;color:#64748b;text-align:center}.gallery-lightbox-modal{position:fixed;z-index:1000000;inset:0;display:none;align-items:center;justify-content:center;padding:70px;background:rgba(3,18,33,.94)}.gallery-lightbox-modal.open{display:flex}.gallery-lightbox-modal figure{max-width:min(1000px,88vw);max-height:85vh;margin:0}.gallery-lightbox-modal figure img{display:block;max-width:100%;max-height:75vh;margin:auto;object-fit:contain}.gallery-lightbox-modal figcaption{display:flex;flex-wrap:wrap;gap:10px;padding:14px 0;color:#fff}.gallery-lightbox-modal figcaption span{color:#cbd5e1}.gallery-lightbox-close,.gallery-lightbox-nav{position:absolute;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.2rem}.gallery-lightbox-close{top:25px;right:25px}.gallery-lightbox-nav{top:50%;transform:translateY(-50%)}.gallery-lightbox-prev{left:25px}.gallery-lightbox-next{right:25px}.news-image{display:grid;height:230px;place-items:center;overflow:hidden;background:#e5f4ee;color:#0b8b68;font-size:3rem}.news-copy small{color:#0b8b68;font-weight:800}.news-copy h2{margin:12px 0;color:#082b4c;font-size:1.35rem;line-height:1.35}.news-copy h2 a{color:#082b4c;font-weight:800}.news-copy>a,.home-news-heading>a,.home-news-link{color:#076b52;font-weight:800}.news-detail-hero{padding:125px 0 85px}.news-detail-hero a{color:#bcead8;font-weight:800}.news-detail-hero span{display:block;margin-top:40px;color:#dff3e9;font-size:.85rem}.news-detail-hero h1{max-width:850px;margin:14px 0 0;font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;line-height:1.08}.news-article-body{max-width:820px;margin:auto;padding:48px;border-radius:22px;background:#fff;color:#526273;font-size:1.08rem;line-height:2;box-shadow:0 12px 30px rgba(8,43,76,.06)}.news-lead{margin-bottom:28px;color:#082b4c;font-size:1.3rem;font-weight:600;line-height:1.7}.home-news-section{padding:105px 0;background:#fff}.home-news-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:42px}.home-news-heading span{color:#0b8b68;font-size:.78rem;font-weight:800;letter-spacing:.15em}.home-news-heading h2{max-width:620px;margin:12px 0 0;color:#082b4c;font-size:clamp(2rem,4vw,3.2rem);font-weight:800}.home-news-card{overflow:hidden;border:1px solid #e5eaf0;border-radius:20px;background:#fff;box-shadow:0 10px 28px rgba(8,43,76,.06);transition:.25s}.home-news-card:hover{transform:translateY(-6px);box-shadow:0 20px 42px rgba(8,43,76,.12)}.home-news-image{display:block;height:220px;overflow:hidden;background:#e5f4ee}.home-news-image img{width:100%;height:100%;object-fit:cover;transition:.5s}.home-news-card:hover img{transform:scale(1.06)}.home-news-image>div{display:grid;height:100%;place-items:center;color:#0b8b68;font-size:3rem}.home-news-copy{padding:24px}.home-news-copy small{color:#0b8b68;font-weight:700}.home-news-copy h3{margin:12px 0;color:#082b4c;font-size:1.28rem;font-weight:800}.home-news-copy h3 a{color:#082b4c}.home-news-copy p{color:#64748b;line-height:1.7}
@media(max-width:767px){.gallery-hero,.news-hero{padding:100px 0 75px}.gallery-card>a{height:170px}.gallery-lightbox-nav{display:none}.gallery-lightbox-modal{padding:45px 20px}.gallery-lightbox-close{top:12px;right:12px}.home-news-heading{display:block}.home-news-heading>a{display:inline-block;margin-top:18px}.news-article-body{padding:30px 24px}}

/* Reusable impact report drawer */
.impact-drawer{position:fixed;inset:0;z-index:999999;pointer-events:none}
.drawer-backdrop{position:absolute;inset:0;background:rgba(9,20,36,.64);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s ease}
.drawer{position:absolute;top:0;right:0;width:min(680px,100%);height:100%;overflow-y:auto;background:#fff;box-shadow:-24px 0 70px rgba(9,20,36,.24);transform:translateX(100%);transition:transform .45s cubic-bezier(.22,.8,.2,1);outline:none}
.impact-drawer.open{pointer-events:auto}.impact-drawer.open .drawer-backdrop{opacity:1}.impact-drawer.open .drawer{transform:translateX(0)}.drawer-open{overflow:hidden}
.drawer-hero{position:relative;height:440px;overflow:hidden}.drawer-hero>img{width:100%;height:100%;object-fit:cover}.drawer-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#edf5ff,#d8e8ff);color:#0d6efd;font-size:5rem}.drawer-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.74),rgba(0,0,0,.16),transparent)}
.drawer-heading{position:absolute;left:45px;right:45px;bottom:40px;color:#fff;z-index:2}.drawer-heading h2{font-size:2.6rem;font-weight:800;margin:14px 0 18px;line-height:1.2}.drawer-category{display:inline-block;padding:8px 20px;border-radius:50px;background:rgba(255,255,255,.18);backdrop-filter:blur(12px);font-size:.8rem;font-weight:700;letter-spacing:1px}.drawer-meta{display:flex;flex-wrap:wrap;gap:18px;font-weight:600}.drawer-meta i{margin-right:6px}
.drawer-close{position:absolute;top:25px;right:25px;width:48px;height:48px;border:0;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.35s;z-index:10;box-shadow:0 10px 25px rgba(0,0,0,.15)}.drawer-close:hover{transform:rotate(90deg) scale(1.08);color:#dc3545}
.drawer-content{padding:42px 45px 48px}.drawer-section{padding:0 0 38px;margin-bottom:38px;border-bottom:1px solid #e7ebf0}.drawer-label{display:inline-block;padding:10px 22px;border-radius:50px;background:#eef5ff;color:#0d6efd;font-weight:700;letter-spacing:1px;font-size:.8rem}.drawer-story{font-size:1.08rem;line-height:2;color:#4b5563;white-space:pre-line;margin:22px 0 0}
.drawer-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}.drawer-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;transition:.45s;cursor:pointer}.drawer-gallery .drawer-gallery-hero{grid-column:1/-1;aspect-ratio:16/8;border-radius:18px}.drawer-gallery img:hover{transform:scale(1.03);box-shadow:0 20px 45px rgba(0,0,0,.15)}
.drawer-impact-message{background:linear-gradient(135deg,#0d6efd,#3b82f6);border-radius:24px;padding:40px;color:#fff;margin-top:22px}.drawer-impact-message i{font-size:2.5rem;margin-bottom:20px}.drawer-impact-message p{line-height:1.8;margin:0}.drawer-next-steps{margin:22px 0 0;color:#4b5563;line-height:1.8}.drawer-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.drawer-actions .btn{padding:12px 8px;white-space:nowrap}.drawer-actions .btn:hover{transform:translateY(-3px)}
.drawer::-webkit-scrollbar{width:8px}.drawer::-webkit-scrollbar-thumb{background:#d6dbe3;border-radius:20px}.drawer::-webkit-scrollbar-track{background:transparent}.impact-drawer.open .drawer-section,.impact-drawer.open .drawer-actions{animation:fadeUp .5s ease}
@media(max-width:768px){.drawer-hero{height:320px}.drawer-heading{left:24px;right:24px;bottom:24px}.drawer-heading h2{font-size:2rem}.drawer-meta{gap:10px;font-size:.9rem}.drawer-content{padding:32px 24px 38px}.drawer-story{font-size:1rem}.drawer-gallery{grid-template-columns:repeat(3,1fr)}.drawer-impact-message{padding:25px}.drawer-close{width:42px;height:42px;top:18px;right:18px}.drawer-actions{grid-template-columns:1fr}}

/* LinkCare event page polish: forest green, deep blue, and quieter surfaces. */
.events-page,.impact-drawer{--events-green:#0b8b68;--events-green-deep:#076b52;--events-blue:#082b4c;--events-blue-soft:#e9f1f7}.events-page{background:#f6f9f8}
.events-page .btn-primary,.drawer-actions .btn-primary{background-color:var(--events-green);border-color:var(--events-green)}
.event-card-wrap{height:100%;overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(8,43,76,.07)}.event-card-wrap .modern-event-card{height:calc(100% - 48px)}.event-card-actions{display:flex;align-items:center;gap:16px;padding:11px 20px;border-top:1px solid #e6edf0}.event-card-action{display:inline-flex;align-items:center;gap:7px;padding:0;border:0;background:transparent;color:#08785b;font-size:.85rem;font-weight:800;line-height:1;cursor:pointer}.event-card-action:hover{color:#054d3b}.event-card-action:last-child{margin-left:auto}
.events-page .btn-primary:hover,.drawer-actions .btn-primary:hover{background-color:var(--events-green-deep);border-color:var(--events-green-deep)}
.events-page .btn-outline-secondary{color:var(--events-blue);border-color:rgba(8,43,76,.28);background-color: orange;}
.events-page .btn-outline-secondary:hover{background:var(--events-blue);border-color:var(--events-blue);color:#fff}
.featured-badge,.drawer-label{background:#e5f4ee;color:var(--events-green-deep)}
.event-location,.read-story{color:var(--events-green-deep)}
.event-status.upcoming{background:#e5f4ee;color:var(--events-green-deep)}
.event-date small{color:var(--events-green-deep)}
.impact-card,.modern-event-card{border:1px solid rgba(8,43,76,.06)}
.modern-event-card:focus-visible{outline:3px solid rgba(11,139,104,.35);outline-offset:4px}
.drawer-backdrop{background:rgba(8,43,76,.7)}
.drawer{border-left:1px solid rgba(11,139,104,.16);box-shadow:-24px 0 70px rgba(8,43,76,.26)}
.drawer-image-placeholder{background:linear-gradient(135deg,var(--events-blue),#10446d);color:#a8e2cc}
.drawer-hero-overlay{background:linear-gradient(to top,rgba(8,43,76,.94),rgba(8,43,76,.4),transparent)}
.drawer-category{background:rgba(11,139,104,.88);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.drawer-heading h2{letter-spacing:-.02em}.drawer-meta{color:#ddf5ea}
.drawer-close{color:var(--events-blue)}.drawer-close:hover{color:var(--events-green);box-shadow:0 10px 25px rgba(11,139,104,.22)}
.drawer-section{border-color:rgba(8,43,76,.1)}
.drawer-impact-message{background:linear-gradient(135deg,var(--events-blue),#10446d);border-left:4px solid var(--events-green)}
.drawer-actions .btn-outline-primary{color:var(--events-blue);border-color:rgba(8,43,76,.35)}
.drawer-actions .btn-outline-primary:hover{background:var(--events-blue);border-color:var(--events-blue);color:#fff}

/* 2026 public experience refresh */
@media (min-width:1200px){
    .main-menu .navigation>li.dropdown>a{display:inline-flex;align-items:center;gap:9px;padding-right:0}
    .main-menu .navigation>li.dropdown>a::before{content:'\f107';order:2;font-family:'Font Awesome 5 Pro';font-size:11px;font-weight:900;line-height:1;position:static;transition:transform .2s ease}
    .main-menu .navigation>li.dropdown:hover>a::before{transform:rotate(180deg)}
    .main-menu .navigation>li.dropdown>a::after{content:"";position:absolute;left:50%;right:50%;bottom:-9px;height:2px;margin:0;border-radius:2px;background:var(--thm-primary);transition:.25s}
    .main-menu .navigation>li.dropdown:hover>a::after,.main-menu .navigation>li.dropdown.current>a::after{left:0;right:0}
}
.desktop-nav-brand{display:none}
@media(min-width:1200px){
    .main-header:not(.two) .header_upper{background:#233d70;box-shadow:0 8px 22px rgba(8,27,61,.16)}
    .main-header:not(.two) .header_upper_inner{display:flex;align-items:center;justify-content:space-between;min-height:86px}
    .main-header:not(.two) .header_upper_one_box,.main-header:not(.two) .header_upper_two_box{float:none}
    .main-header:not(.two) .main-menu .navigation,.main-header.two .main-menu .navigation{display:flex;align-items:center;padding:7px;border:1px solid rgba(172,201,255,.28);border-radius:999px;background:rgba(74,106,174,.38);box-shadow:inset 0 1px rgba(255,255,255,.08)}
    .main-header:not(.two) .main-menu .navigation>li,.main-header.two .main-menu .navigation>li{margin:0;padding:0}
    .main-header:not(.two) .main-menu .navigation>li>a,.main-header.two .main-menu .navigation>li>a{display:inline-flex;align-items:center;min-height:40px;padding:0 17px;border-radius:999px;color:#eef4ff;font-size:14px}
    .main-header:not(.two) .main-menu .navigation>li.current>a,.main-header.two .main-menu .navigation>li.current>a{background:#a9dc70;color:#10284d!important;box-shadow:0 5px 14px rgba(6,25,58,.18)}
    .main-menu .navigation>li>a::after{display:none!important}
    .main-header:not(.two) .main-menu .navigation>li.nav-donate,.main-header.two .main-menu .navigation>li.nav-donate{margin-left:54px}
    .main-header:not(.two) .main-menu .navigation>li.nav-donate>a,.main-header.two .main-menu .navigation>li.nav-donate>a{padding:0 22px;background:linear-gradient(135deg,#78ab33,#a9dc70);color:#fff!important}
    .main-header.two .header_upper-two{display:none}
    .main-header.two .main-header-two-nav-box{padding:0;background:#233d70}
    .main-header.two .main-header-two-nav-box-inner{display:flex;align-items:center;justify-content:space-between;max-width:1280px;min-height:86px;padding:0 20px!important;border-radius:0!important;background:transparent;box-shadow:none}
    .main-header.two .desktop-nav-brand{display:block;flex:0 0 auto}.main-header.two .desktop-nav-brand img{display:block;width:172px;max-height:58px;object-fit:contain}
    .main-header.two .main-header-two-nav-box .nav-outer{float:none}.main-header.two .main-header-two-nav-box .nav-inner{display:block}
}

/* Shared three-tier public header: utility, contact, then navigation. */
@media(min-width:1200px){
    body .main-header.two .header_upper-two{display:block!important;background:#fff!important;border:0!important}
    body .main-header.two .header_upper-two_inner{display:flex!important;min-height:112px!important;align-items:center!important;justify-content:space-between!important;padding:20px 0!important}
    body .main-header.two .header_upper_two_box,
    body .main-header.two .header_upper_two-right_box{float:none!important}
    body .main-header.two .header_upper_two_box .logo{padding:0!important}
    body .main-header.two .header_upper_two_box .logo img{display:block!important;width:190px!important;max-height:66px!important;object-fit:contain!important;object-position:left center!important}
    body .main-header.two .header_upper_two-right_box{display:flex!important;align-items:center!important}
    body .main-header.two .header_upper_two-right_box ul{display:flex!important;align-items:center!important;float:none!important;margin:0!important}
    body .main-header.two .header_upper_two-right_box ul li{min-height:54px!important;margin-right:44px!important;padding:3px 0 3px 52px!important}
    body .main-header.two .header_upper_two-right_box ul li .address_icon span{font-size:34px!important;line-height:50px!important;color:#4f9372!important}
    body .main-header.two .header_upper_two-right_box ul li .address_title h6{color:#1c2026!important;font-size:16px!important;font-weight:800!important}
    body .main-header.two .header_upper_two-right_box ul li .address_title p,
    body .main-header.two .header_upper_two-right_box ul li .address_title a{color:#24272c!important;font-size:15px!important}
    body .main-header.two .header_upper_two_box-btn{float:none!important;margin-left:4px!important}
    body .main-header.two .header_upper_two_box-btn a{padding:14px 26px!important;border-radius:999px!important;background:#fff!important;color:#397d61!important;box-shadow:0 10px 32px rgba(8,43,76,.1)!important}

    body .main-header.two .main-header-two-nav-box{padding:0!important;background:#2b4377!important}
    body .main-header.two .main-header-two-nav-box-inner{display:flex!important;max-width:1280px!important;min-height:86px!important;align-items:center!important;justify-content:center!important;padding:0 20px!important;border:0!important;border-radius:0!important;background:#2b4377!important;box-shadow:none!important}
    body .main-header.two .main-header-two-nav-box .nav-outer{display:flex!important;width:100%!important;min-height:0!important;justify-content:center!important;float:none!important}
    body .main-header.two .main-header-two-nav-box .nav-inner{display:block!important;background:transparent!important}
    body .main-header.two .main-menu.two .navigation{background:#314f8b!important;border-color:rgba(196,215,255,.3)!important}

    body .main-header.two .sticky-header{border:0!important;background:#2b4377!important;box-shadow:0 10px 30px rgba(8,27,61,.2)!important}
    body .main-header.two .sticky-header .outer-container{display:flex!important;min-height:78px!important;align-items:center!important;justify-content:space-between!important}
    body .main-header.two .sticky-header .logo{padding:8px 0!important}
    body .main-header.two .sticky-header .logo img{width:165px!important;max-height:54px!important;object-fit:contain!important}
    body .main-header.two .sticky-header .nav-inner{background:transparent!important}
    body .main-header.two .sticky-header .main-menu .navigation{padding:6px!important;border:1px solid rgba(196,215,255,.3)!important;border-radius:999px!important;background:#314f8b!important;box-shadow:none!important}
    body .main-header.two .sticky-header .main-menu .navigation>li{padding:0!important}
    body .main-header.two .sticky-header .main-menu .navigation>li>a{min-height:38px!important;padding:0 15px!important;color:#fff!important;line-height:1!important}
    body .main-header.two .sticky-header .main-menu .navigation>li.current>a{background:#b3df70!important;color:#17335b!important}
    body .main-header.two .sticky-header .main-menu .navigation>li.nav-donate{margin-left:36px!important}
    body .main-header.two .sticky-header .main-menu .navigation>li.nav-donate>a{background:linear-gradient(135deg,#79ae35,#a9dc70)!important;color:#fff!important}
}

/* Compositor-only, direction-aware reveals; content visibility defers off-screen paint. */
.scroll-reveal{opacity:0;transform:translate3d(0,28px,0);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.72,.25,1);will-change:opacity,transform}
.scroll-reveal.from-up{transform:translate3d(0,-28px,0)}.scroll-reveal.is-visible{opacity:1;transform:translate3d(0,0,0);will-change:auto}
.gallery-card,.news-card,.home-news-card,.home-impact-card,.event-card-wrap{content-visibility:auto;contain-intrinsic-size:320px 380px}
@media(prefers-reduced-motion:reduce){.scroll-reveal,.scroll-reveal.from-up{opacity:1;transform:none;transition:none}.gallery-card,.news-card,.home-news-card,.home-impact-card{content-visibility:visible}}
.footer-contact .fa-phone{transform:none!important;display:inline-block}
.legal-hero{position:relative;overflow:hidden;padding:115px 0 90px;background:radial-gradient(circle at 85% 20%,rgba(99,210,162,.2),transparent 28%),linear-gradient(125deg,#082b4c,#087456);color:#fff}
.legal-hero span{display:block;margin-bottom:14px;color:#bcead8;font-size:.76rem;font-weight:800;letter-spacing:.16em}.legal-hero h1{color:#fff;font-size:clamp(2.7rem,5vw,4.6rem);font-weight:800;letter-spacing:-.035em}.legal-hero p{max-width:620px;margin:18px 0 0;color:rgba(255,255,255,.82);font-size:1.12rem;line-height:1.8}
.legal-page{padding:90px 0 110px;background:#f5f8f7}.legal-layout{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start;gap:34px}.legal-summary{position:sticky;top:110px;padding:30px;border:1px solid #dce9e4;border-radius:20px;background:#e8f4ef}.legal-summary>i{display:grid;width:54px;height:54px;margin-bottom:22px;place-items:center;border-radius:15px;background:#0b8b68;color:#fff;font-size:1.35rem}.legal-summary h2{margin-bottom:12px;color:#082b4c;font-size:1.35rem;font-weight:800}.legal-summary p{color:#536b66;line-height:1.75}.legal-summary a{display:inline-flex;margin-top:8px;color:#076b52;font-weight:800}.legal-card{padding:52px 58px;border:1px solid rgba(8,43,76,.08);border-radius:24px;background:#fff;box-shadow:0 18px 48px rgba(8,43,76,.07)}.legal-updated{display:inline-block;margin-bottom:16px;padding:7px 12px;border-radius:999px;background:#edf4f1;color:#527067;font-size:.82rem;font-weight:700}.legal-card section{padding:30px 0;border-bottom:1px solid #e7eeeb}.legal-card section:last-child{padding-bottom:0;border:0}.legal-card h2{margin-bottom:13px;color:#082b4c;font-size:1.42rem;font-weight:800}.legal-card p{margin:0;color:#526273;font-size:1.02rem;line-height:1.9}.legal-card a{color:#08785b;font-weight:700;text-decoration:underline}
@media(max-width:991px){.legal-layout{grid-template-columns:1fr}.legal-summary{position:static}.legal-page{padding:65px 0 80px}.legal-card{padding:38px 32px}}
@media(max-width:575px){.legal-hero{padding:85px 0 65px}.legal-card{padding:30px 22px;border-radius:18px}.legal-summary{padding:24px}}

/* Final desktop navigation contract: solid blue capsule with legible controls. */
@media(min-width:1200px){
    body .main-header .main-menu .navigation,
    body .main-header.two .main-menu.two .navigation{display:flex!important;align-items:center!important;gap:2px!important;padding:7px!important;border:1px solid rgba(196,215,255,.32)!important;border-radius:999px!important;background:#2c477f!important;box-shadow:0 10px 24px rgba(10,30,70,.18),inset 0 1px rgba(255,255,255,.1)!important;overflow:visible!important}
    body .main-header .main-menu .navigation>li,
    body .main-header.two .main-menu.two .navigation>li{display:block!important;margin:0!important;padding:0!important}
    body .main-header .main-menu .navigation>li>a,
    body .main-header.two .main-menu.two .navigation>li>a{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:40px!important;padding:0 17px!important;border-radius:999px!important;color:#fff!important;opacity:1!important;white-space:nowrap!important;text-shadow:0 1px 1px rgba(0,0,0,.08)!important}
    body .main-header .main-menu .navigation>li.current>a,
    body .main-header.two .main-menu.two .navigation>li.current>a{background:#b3df70!important;color:#17335b!important;text-shadow:none!important}
    body .main-header .main-menu .navigation>li.nav-donate,
    body .main-header.two .main-menu.two .navigation>li.nav-donate{margin-left:42px!important}
    body .main-header .main-menu .navigation>li.nav-donate>a,
    body .main-header.two .main-menu.two .navigation>li.nav-donate>a{background:linear-gradient(135deg,#79ae35,#a9dc70)!important;color:#fff!important;box-shadow:0 7px 16px rgba(31,74,25,.24)!important}
}

/* The shared header must reserve its own height instead of covering page content. */
.main-header.two{position:relative!important;inset:auto!important}
.main-header.two+.banner-section.two{margin-top:0!important}
.gallery-hero .container,.news-hero .container,.news-detail-hero .container{position:relative;z-index:2}
.gallery-hero h1,.news-hero h1,.news-detail-hero h1{color:#fff!important;text-shadow:0 3px 18px rgba(5,28,41,.18)}

/* Contextual photography for public heroes that previously shared a placeholder. */
.contextual-hero{background-position:center 35%!important;background-size:cover!important;background-repeat:no-repeat!important}
.gallery-hero{background:linear-gradient(115deg,rgba(8,43,76,.86),rgba(11,139,104,.55)),url('../images/community3.png') center/cover!important}
.gallery-hero>.content-hero-image{display:none}
.news-hero{background:linear-gradient(115deg,rgba(8,43,76,.88),rgba(11,139,104,.54)),url('../images/community2.png') center/cover!important}
.news-hero>.content-hero-image{display:none}
.events-hero{background-image:linear-gradient(115deg,rgba(8,43,76,.34),rgba(11,139,104,.18)),url('../images/community5.png')!important;background-position:center!important;background-size:cover!important}
.events-hero>.events-hero-image{display:none}

/* Project stories are full-width cards with a three-up media grid and copy below. */
.initiative-projects-page .timeline-container{max-width:1200px;padding:0}
.initiative-projects-page .timeline-container::before,.initiative-projects-page .timeline-item::before{display:none}
.initiative-projects-page .timeline-item:nth-child(odd) .timeline-content,
.initiative-projects-page .timeline-item:nth-child(even) .timeline-content{margin:0;text-align:left}
.initiative-projects-page .timeline-item:nth-child(odd) .timeline-content::after,
.initiative-projects-page .timeline-item:nth-child(even) .timeline-content::after{display:none}
.initiative-projects-page .timeline-content{padding:36px;border-radius:20px}
.initiative-projects-page .gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 26px}
.initiative-projects-page .gallery img,.initiative-projects-page .gallery video{display:block;width:100%;height:240px;border-radius:14px;object-fit:cover;background:#e8efec;box-shadow:0 7px 20px rgba(8,43,76,.08)}
.initiative-projects-page .event-description{padding-top:22px;border-top:1px solid #e4ece8}
@media(max-width:991px){.initiative-projects-page .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.initiative-projects-page .timeline-container{padding:0}.initiative-projects-page .gallery{grid-template-columns:1fr}.initiative-projects-page .gallery img,.initiative-projects-page .gallery video{height:220px}}

/* Shared conversion panel for the Our Work landing and programme pages. */
.work-cta{padding:28px 0 92px;background:#f6f9f6}.work-cta-inner{position:relative;isolation:isolate;display:flex;overflow:hidden;align-items:center;justify-content:space-between;gap:45px;padding:52px 58px;border-radius:26px;background:linear-gradient(115deg,rgba(8,43,76,.97),rgba(7,107,82,.91)),url('../images/community1.png') center/cover;color:#fff;box-shadow:0 24px 55px rgba(8,43,76,.18)}.work-cta-inner::after{position:absolute;z-index:-1;right:-90px;bottom:-150px;width:310px;height:310px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(255,255,255,.04);content:""}.work-cta-copy{max-width:670px}.work-cta-copy>span{display:block;margin-bottom:13px;color:#b8ead7;font-size:.75rem;font-weight:800;letter-spacing:.16em}.work-cta-copy h2{margin:0 0 14px;color:#fff;font-size:clamp(2rem,3.6vw,3.25rem);font-weight:800;line-height:1.08;letter-spacing:-.025em}.work-cta-copy p{max-width:630px;margin:0;color:rgba(255,255,255,.8);font-size:1.02rem;line-height:1.75}.work-cta-actions{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:12px}.work-cta-actions a{display:inline-flex;min-height:50px;align-items:center;justify-content:center;gap:9px;padding:0 21px;border-radius:999px;font-weight:800;transition:transform .2s ease,box-shadow .2s ease}.work-cta-actions a:hover{transform:translateY(-3px)}.work-cta-primary{background:#a9d94f;color:#163124!important;box-shadow:0 10px 24px rgba(0,0,0,.18)}.work-cta-secondary{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.09);color:#fff!important;backdrop-filter:blur(7px)}
.initiative-projects-page .work-cta{padding-top:0}.initiative-projects-page .work-cta .container{padding:0}.initiative-projects-page .work-cta-inner{border-radius:22px}
@media(max-width:991px){.work-cta-inner{display:block;padding:42px}.work-cta-actions{margin-top:28px}}
@media(max-width:575px){.work-cta{padding-bottom:68px}.work-cta-inner{padding:34px 24px;border-radius:20px}.work-cta-actions{display:grid}.work-cta-actions a{width:100%}}

/* Team experience: consistent proportions, content height and interaction. */
.team-page-hero{padding:105px 0 88px;background-image:linear-gradient(105deg,rgba(8,43,76,.93),rgba(11,139,104,.5)),url('../images/team.jpeg');background-position:center 42%!important;color:#fff}.team-page-hero span{display:block;color:#b9ead8;font-size:.76rem;font-weight:800;letter-spacing:.16em}.team-page-hero h1{margin:13px 0;color:#fff;font-size:clamp(2.7rem,5vw,4.6rem);font-weight:800;letter-spacing:-.035em}.team-page-hero p{max-width:650px;margin:0;color:rgba(255,255,255,.84);font-size:1.1rem;line-height:1.75}
.team-directory .thm-section-title h2{margin:0;color:#082b4c;font-size:clamp(2.4rem,4.5vw,4rem);font-weight:800;line-height:1.1}.team-directory-grid .team-member{display:flex;width:100%;flex-direction:column}.team-directory .team-member .image{height:auto;aspect-ratio:4/3}.team-directory .team-member .content{display:flex;flex:1;flex-direction:column;padding:28px}.team-directory .team-member .content p:not(:first-of-type){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5}.team-directory .team-member .read-more-btn{margin-top:auto;padding-top:18px}.team-directory .team-member .read-more-btn i{transition:transform .2s}.team-directory .team-member .read-more-btn:hover i{transform:translateX(4px)}
.executive-team-section{overflow:hidden;padding:105px 0;background:radial-gradient(circle at 7% 15%,rgba(11,139,104,.08),transparent 24%),linear-gradient(180deg,#fff,#f5f9f7)}.executive-team-section .thm-section-title{max-width:720px;margin:0 auto 48px}.executive-team-section .thm-section-title h2{color:#082b4c;font-size:clamp(2.3rem,4vw,3.6rem);font-weight:800;letter-spacing:-.025em}.executive-team-intro{margin:16px auto 0;color:#64748b;font-size:1.04rem;line-height:1.75}.executive-team-grid .team-one-single{display:flex;width:100%;overflow:hidden;flex-direction:column;margin:0;border:1px solid #dfe9e5;border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(8,43,76,.08);transition:transform .28s ease,box-shadow .28s ease}.executive-team-grid .team-one-single:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(8,43,76,.15)}.executive-team-grid .team-one-img{height:auto;aspect-ratio:4/4.25;overflow:hidden}.executive-team-grid .team-one-img::before{z-index:1;background:linear-gradient(180deg,transparent 40%,rgba(8,43,76,.72))}.executive-team-grid .team-one-img img{width:100%;height:100%;object-fit:cover;transition:transform .45s}.executive-team-grid .team-one-single:hover img{transform:scale(1.045)}.executive-team-grid .team-one-hover{z-index:2}.executive-team-grid .team-one-content{display:flex;min-height:122px;flex:1;flex-direction:column;justify-content:center;padding:25px 18px;border-top:3px solid #a9d94f;box-shadow:none}.executive-team-grid .team-one-content h3{color:#082b4c;font-size:1.15rem}.executive-team-grid .team-one-content p{color:#08785b;font-size:.82rem;letter-spacing:.04em}.executive-team-action{text-align:center;margin-top:42px}.executive-team-action a{display:inline-flex;min-height:50px;align-items:center;gap:10px;padding:0 23px;border-radius:999px;background:#082b4c;color:#fff;font-weight:800;box-shadow:0 10px 25px rgba(8,43,76,.17)}.executive-team-action a:hover{background:#0b8b68;color:#fff;transform:translateY(-2px)}
@media(max-width:767px){.team-page-hero{padding:78px 0 68px}.executive-team-section{padding:75px 0}.team-directory .team-member .content p:not(:first-of-type){-webkit-line-clamp:4}}

/* Home impact and team refresh */
.factory-solutions-one-section{padding:105px 0}.factory-solutions-one-section-bg{background-size:cover}.factory-solutions-one-section-bg:before{background:linear-gradient(105deg,rgba(6,28,49,.94),rgba(8,65,61,.86))}.factory-solutions-one-inner h2{max-width:1040px;margin:0 auto;font-family:var(--heading-font);font-size:clamp(2rem,3.4vw,3.45rem);font-weight:700;line-height:1.2;letter-spacing:-.025em}.factory-solutions-one-inner span{color:#a9d94f}
.home-impact-section{position:relative;padding:110px 0;background:#f5f8f6}.home-impact-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(55px,7vw,105px)}.home-impact-image{position:relative;min-height:620px;overflow:hidden;border-radius:28px;box-shadow:0 28px 65px rgba(8,43,76,.16)}.home-impact-image:after{position:absolute;inset:0;content:"";background:linear-gradient(180deg,transparent 55%,rgba(8,43,76,.65))}.home-impact-image img{position:absolute;width:100%;height:100%;object-fit:cover}.home-impact-badge{position:absolute;right:26px;bottom:26px;left:26px;z-index:1;display:flex;align-items:center;gap:20px;padding:22px 24px;border:1px solid rgba(255,255,255,.28);border-radius:18px;background:rgba(255,255,255,.93);backdrop-filter:blur(12px)}.home-impact-badge strong{flex:none;color:#082b4c;font-size:1.05rem}.home-impact-badge span{padding-left:20px;border-left:1px solid #d8e2df;color:#66798a;font-size:.9rem;line-height:1.5}.home-section-eyebrow{display:block;margin-bottom:16px;color:#08785b;font-size:.76rem;font-weight:800;letter-spacing:.17em}.home-impact-content h2,.home-team-heading h2{margin:0;color:#082b4c;font-family:var(--heading-font);font-size:clamp(2.45rem,4vw,4.25rem);font-weight:800;line-height:1.08;letter-spacing:-.04em}.home-impact-content h2 em{color:#0b8b68;font-style:normal}.home-impact-lead{margin:25px 0 32px;color:#5e7180;font-size:1.06rem;line-height:1.8}.home-impact-pillars{border-top:1px solid #d9e4df}.home-impact-pillars article{display:flex;gap:20px;padding:21px 0;border-bottom:1px solid #d9e4df}.home-impact-pillars article>span{padding-top:3px;color:#0b8b68;font-size:.75rem;font-weight:800;letter-spacing:.1em}.home-impact-pillars h3{margin:0 0 5px;color:#082b4c;font-size:1.04rem;font-weight:800}.home-impact-pillars p{margin:0;color:#6b7c88;font-size:.94rem;line-height:1.6}.home-impact-link,.home-team-heading-copy a,.home-team-mobile-link{display:inline-flex;align-items:center;gap:10px;margin-top:30px;color:#08785b;font-weight:800}.home-impact-link i,.home-team-heading-copy a i,.home-team-mobile-link i{font-size:.75rem;transition:transform .2s}.home-impact-link:hover,.home-team-heading-copy a:hover,.home-team-mobile-link:hover{color:#054d3b}.home-impact-link:hover i,.home-team-heading-copy a:hover i,.home-team-mobile-link:hover i{transform:translateX(4px)}
.home-team-section{padding:115px 0;background:#fff}.home-team-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:50px}.home-team-heading>div:first-child{max-width:660px}.home-team-heading-copy{max-width:420px;padding-bottom:5px}.home-team-heading-copy p{margin:0;color:#647689;font-size:1.02rem;line-height:1.75}.home-team-heading-copy a{margin-top:18px}.home-team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.home-team-card{display:block;color:inherit}.home-team-photo{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:20px;background:#e6efeb}.home-team-photo:after{position:absolute;inset:45% 0 0;content:"";background:linear-gradient(transparent,rgba(8,43,76,.5));opacity:.75}.home-team-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s}.home-team-card:hover .home-team-photo img{transform:scale(1.045)}.home-team-photo span{position:absolute;right:18px;bottom:18px;z-index:1;display:grid;width:43px;height:43px;place-items:center;border-radius:50%;background:#a9d94f;color:#082b4c;transform:rotate(45deg);transition:transform .3s,background .3s}.home-team-card:hover .home-team-photo span{transform:rotate(90deg);background:#fff}.home-team-meta{padding:20px 4px 0}.home-team-meta h3{margin:0;color:#082b4c;font-size:1.2rem;font-weight:800}.home-team-meta p{margin:5px 0 0;color:#08785b;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.home-team-mobile-link{display:none}
@media(max-width:991px){.factory-solutions-one-section{padding:85px 0}.home-impact-section,.home-team-section{padding:85px 0}.home-impact-grid{grid-template-columns:1fr;gap:55px}.home-impact-image{min-height:520px}.home-team-heading{align-items:flex-start;flex-direction:column;gap:24px}.home-team-heading-copy{max-width:600px}.home-team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){.factory-solutions-one-section{padding:70px 0}.factory-solutions-one-inner h2 br{display:none}.home-impact-section,.home-team-section{padding:70px 0}.home-impact-grid{gap:42px}.home-impact-image{min-height:430px;border-radius:20px}.home-impact-badge{right:14px;bottom:14px;left:14px;display:block;padding:17px}.home-impact-badge span{display:block;margin-top:6px;padding:0;border:0}.home-impact-content h2,.home-team-heading h2{font-size:2.4rem}.home-team-grid{grid-template-columns:1fr;gap:30px}.home-team-photo{aspect-ratio:4/4.3}.home-team-heading-copy a{display:none}.home-team-mobile-link{display:inline-flex;margin-top:35px}}

/* Center the hamburger glyph within its mobile touch target. */
@media(max-width:1199px){
    body .main-header .nav-outer .mobile-nav-toggler,
    body .main-header.two .main-header-two-nav-box .mobile-nav-toggler,
    body .main-header .sticky-header .nav-outer .mobile-nav-toggler{
        display:flex;
        width:46px;
        height:40px;
        align-items:center;
        justify-content:center;
        padding:0;
        line-height:1;
    }
    body .main-header .mobile-nav-toggler .icon{
        display:block;
        line-height:1;
    }
}

/* Keep directory headshots rectangular and consistently portrait. */
.team-directory .team-member .image{height:auto;aspect-ratio:4/5}
.team-directory .team-member .image img{display:block;width:100%;height:100%;border-radius:0;object-fit:cover}