/* Google Font Karla  */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700;800&display=swap');
/*  General Style  */

:root {
  --header-height: 100px; 
}
*,
p,
h1,
h2,
h3,
h4,
h5,
h6,
figure{
    padding: 0;
    margin: 0;
}
body{
    font-family: 'Karla', sans-serif;
    padding: 0 !important;
    overflow-x:hidden;
}
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
small{
   font-family: 'Karla', sans-serif;
}
ul,
li{
    list-style: none;
    padding: 0;
    margin: 0;
}
a,
a:hover{
    text-decoration: none;
}
section{
    position: relative;
}
input,
button{
    font-family: 'Karla', sans-serif;
}
img {
  vertical-align: top;
}
a,
button.theme-btn,
.gallery figure img,
.gallery figure:before,
.event img,
.event-data,
.sponsors img,
.subscribe form button,
.blog-meta img,
.footer-one ul.footer-events li figure img,
.pastor .profile img,
.pastor .meta,
.pastor .profile,
.pastor .meta:before,
.mass-timing .table tbody tr,
.subscribe-two .data form button,
.event-three .event,
.event-three .event .event-data:before,
.event-three .event .event-data,
.about-two .extras img,
.desktop-nav nav .nav-bar > ul > li > a svg,
.footer-gallery figure:before,
.product,
.product .product-actions,
.product figure img,
.catholic-church .video-sec .video a:before,
.widget-popular-posts > ul > li img,
.widget-trending-videos > ul > li img,
.widget-instagram-photos ul li img,
.desktop-nav nav .nav-bar ul > li ul.sub-menu li a:before,
.desktop-nav nav .nav-bar ul > li.menu-item-has-children ul.sub-menu,
.cart-popup,
.desktop-nav nav .nav-bar > ul > li.menu-item-has-children > a:before,
.mobile-nav > ul > li.menu-item-has-children.active > ul.sub-menu,
.mobile-nav > ul > li.menu-item-has-children,
.mobile-nav > ul > li.menu-item-has-children.active,
button.scrollTopStick,
.mobile-nav > ul > li.menu-item-has-children:before,
.sermon-img.audio .sermon-media .audio-playerstyle2,
.recent-sermon-two .sermon-two .sermon-grid ul,
.sermon .sermon-img ul,
.theme-btn:before,
.widget-categories ul li:before,
a.next-slide:before,
.event-data > ul,
.our-ministries .ministry:before,
.button,
.button:before,
.event-data p,
.event-data p:before,
.offer span,
.pd-content ul.pd-tabs li a:before,
.post-review .review-form form input:focus,
.post-review .review-form form textarea:focus,
.pd-cart-heart .heart svg {
    transition: all 0.3s ease-out 0.1s;
    -webkit-transition: all 0.3s ease-out 0.1s;
    -moz-transition: all 0.3s ease-out 0.1s;
    -o-transition: all 0.3s ease-out 0.1s;
}
.blog-meta:hover figure img,
.footer-one ul.footer-events li:hover figure img,
.pastor .profile:hover img,
.about-two .extras:hover img,
.product:hover figure img,
.widget-popular-posts > ul > li:hover img,
.widget-trending-videos > ul > li:hover img,
.widget-instagram-photos ul li:hover img {
    /* transform: scale(1.08) rotate(1deg);
    -webkit-transform: scale(1.08) rotate(1deg);
    -moz-transform: scale(1.08) rotate(1deg);
    -o-transform: scale(1.08) rotate(1deg); */
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    color:#4f7292!important;
}
h1,h2,h3{
    font-weight: bold;
}
h2{
    font-size: 50px;
    color: #1a1a1a;
}
p{
    font-size: 16px;
    line-height: 22px;
    color: #272727;
}
input:focus{
    border: none;
    outline: none;
}
figure{
    overflow: hidden;
}
ul.check-list,
ul.heart-list,
ul.church-list, .strategy-card ul {
    padding-left: 35px;
    margin-top: 15px;
}
ul.check-list li,
ul.heart-list li,
ul.church-list li, .strategy-card ul li {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px;
    color: #414141;
}
ul.check-list li:before,
ul.heart-list li:before,
ul.church-list li:before, .strategy-card ul li:before {
    content: "✓";
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: -35px;
    font-size: 20px;
    display: inline-block;
    font-weight: 700;
    color: #314985;
}
/* ul.check-list li:before{
    background-image: url("../icon/arrow.png");
} */

/* ul.heart-list li:before{
    background-image: url('../images/heart-list.svg');
}
ul.church-list li:before{
    background-image: url('../images/church-list.webp');
} */
table {
    caption-side: bottom;
    border-collapse: collapse;
}
*, ::after, ::before {
    box-sizing: border-box;
}
.pattren{
    opacity: 0.02;
}
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    transition: width .6s ease;
    display: flex;
    height: 100%;
    overflow: hidden;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: .25rem;
}
.loadmore a.theme-btn {
    padding: 8px 26px;
}
.rounded-circle {
    border-radius: 50%!important;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
@media (min-width: 992px){
.offset-lg-6 {
    margin-left: 50%;
}
}
@media (min-width: 992px){
.col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
}
}
.position-relative{
    position: relative;
}
.overflow-hidden{
    overflow: hidden;
}
.text-center{
    text-align: center;
}
.text-white{
    color: white;
}
.mobile-nav .donation a.cart img {
    width: 25px;
}
.sermons .loadmore,
.our-blog .loadmore,
.events .loadmore{
    margin-top: 40px;
}
.events .event{
    margin-right: 0;
}
.events .event > img {
    width: 100%;
}
.our-blog .blog-meta,
.events .event{
    margin-bottom: 30px;
}
.pagination {
    padding-top: 40px;
    margin-top: 100px;
    position: relative;
}
.pagination:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: -5px;
    left: 0;
    z-index: -1;
}
.pagination,
.pagination:before{
    border-top: 1px solid #e5e5e5;
}
.pagination ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.pagination ul li a {
    font-size: 22px;
    line-height: 28px;
    color: #111;
    font-weight: bold;
    width: 65%;
    display: flex;
}
.pagination ul li.next > a{
    margin-left: auto;
    text-align: right;
}
.pagination ul li.prev > a{
    margin-right: auto;
    text-align: left;
}
.pagination ul li span > a{
    width: 70px;
    height: 70px;
}
.pagination ul li span svg{
    fill: white;
    width: 14px;
    height: 14px;
}
.pagination ul li.next span{
    margin-left: 30px;
}
.pagination ul li.prev span{
    margin-right: 30px;
}
.compensate-for-scrollbar{
    margin-right: 0 !important;
}
.font-bold{
    font-weight: bold;
}
.font-semi-bold{
    font-weight: 600;
}
.font-medium{
    font-weight: 500;
}
.font-normal{
    font-weight: 400;
}
.flex-all{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.slideUp {
  transform: translateY(-140px);
  -webkit-transform: translateY(-140px);
  -moz-transform: translateY(-140px);
  -o-transform: translateY(-140px);
  position: fixed;
  top: 0;
  width: 100%;
}
.slideDown {
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -o-transform: translateY(0);
  position: fixed;
  top: 0;
  width: 100%;
}
.slideUp,
.slideDown{
    transition: transform .5s ease-out;
  -webkit-transition: transform .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
}
.slideDown nav{
    box-shadow: 2px 3px 45px 0px rgba(0,0,0,0.33);
    -webkit-box-shadow: 2px 3px 45px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 2px 3px 45px 0px rgba(0,0,0,0.33);
}
.slideDown .logo a{
    top: 0;
    height: 150px;
}.img-moving {
    -webkit-animation: moving 3s infinite;
    -ms-animation: moving 3s infinite;
    -o-animation: moving 3s infinite;
    animation: moving 3s infinite;
}
.img-moving2 {
    -webkit-animation: moving_left 3s infinite;
    -ms-animation: moving_left 3s infinite;
    -o-animation: moving_left 3s infinite;
    animation: moving_left 3s infinite;
}

@-webkit-keyframes moving {
    0% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
    }
}

@keyframes moving {
    0% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
    }
}
#spotlight{
    background-color: #000000de;
}
.theme-btn {
    font-size: 14px;
    color: white;
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-flex;
    position: relative;
    overflow: hidden;
    z-index: 0;
    border: 0;
}
.theme-btn:before,
.widget-categories ul li:before{
    content: "";
    width: 20%;
    height: 100%;
    background-color: #4f6ea1;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}
.theme-btn:hover:before,
.widget-categories ul li:hover:before{
    width: 100%;
    opacity: 1;
    visibility: visible;
    color: #fff;
    border: none;
}
.theme-btn:hover, .theme-btn a:hover {
    color: white!important;
}
.parallax {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center center;
    /* background-position: center 59%; */
    background-repeat: no-repeat;
    background-attachment: scroll;
    top: 0;
    left: 0;
}
.green-bg{
    background-color: #2e1b46;
    z-index: 0;
}
.green-overlay{
    z-index: 0;
}
.container{
    position: relative;
}
.green-overlay:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.5;
    z-index: 0;
    background-color: #000 !important;
}
.contacts,
.icon {
    display: flex;
    align-items: center;
}
.contacts p{
    color: #111;
}
.contacts:not(:last-child) {
    margin-bottom: 32px;
}
.contacts ul {
    width: 55%;
}
.icon svg {
    width: 27px;
    height: 27px;
    fill: white;
}
.sidetwo .icon {
    width: 50px;
    height: 50px;
    justify-content: center;
    border-radius: 100px;
    margin-right: 20px;
}
/*.slick-slide img{
    margin: auto;
}*/
.gap{
    padding: 40px 0;
    position: relative;
}
.no-bottom{
    padding-bottom: 0;
}
.no-top{
    padding-top: 0;
}
.light-bg{
    background-color: #f8f9fb;
    z-index: 0;
}
.heading {
    text-align: center;
}
.heading h2 {
    font-size: 38px;
    line-height: 42px;
    margin-bottom: 40px!important;
    font-family: 'Karla', sans-serif;
}
.heading p {
    line-height: 28px;
    margin-top: 15px;
}
.tcenter{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
}
.banner{
    padding-top: 118px;
    padding-bottom: 100px;
    margin-top: 8rem;
}
.banner h2{
    /* font-size: 40px;
    line-height: 50px;
    margin-bottom: 0; */
    font-size: 28px;
    line-height: 30px;
    margin-bottom: 0;
}
.banner ul li a{
    font-size: 14px;
    line-height: 24px;
}
.banner ul li{
    position: relative;
}
.banner ul li:not(:last-child){
    margin-right: 28px;
}
.banner ul li:not(:last-child):before {
    content: "";
    width: 8px;
    height: 3px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
    background-color: white;
    right: -18px;
}
.banner img {
    margin-top: 10px;
    width: 50px;
    height: 65px;
}
ul.meta {
    display: flex;
    margin-bottom: 5px;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 10px;
}
ul.meta li {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500;
    margin-right: 30px;
    position: relative;
}
ul.meta li:before {
    content: "/";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -o-transform: translateY(-50%);
    left: -17px;
}
ul.meta li:nth-child(1):before {
    display: none;
}
.social-medias ul li svg {
    width: 20px;
    height: 20px;
    fill: white;
    margin-right: 10px;
}
.social-medias ul li{
    font-size: 21px;
}
.social-medias ul li a{
    margin-right: 8px;
    padding: 20px 50px;
    border-radius: 100px;
}
.social-medias ul li a.f-b {
    background-color: #1e52a8;
}
.social-medias ul li a.twitr {
    background-color: #4380e4;
}
.social-medias ul li a.insta {
    background-color: #d221cc;
}

.social-medias ul li a.utube {
    background-color: #e20e13;
}
.content p {
    margin: 12px 0;
}
.content .gallery {
    margin: 35px 0;
}
.content .gallery figure{
    margin: 15px 0;
}
.content {
    margin-top: 30px !important;
}
.gallery figure {
    overflow: hidden;
    position: relative;
}
.gallery figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery figure:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.gallery figure a {
    align-items: center;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
        cursor: pointer;
}
.gallery figure a img {
    width: 50px;
    height: 50px;
    transform: rotate(70deg);
}
.gallery figure a img,
.gallery figure:before {
    opacity: 0;
}
.gallery figure:hover a img,
.gallery figure:hover:before {
    opacity: 0.8;
}
.gallery figure:hover a img{
    transform: rotate(0);
    -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      -o-transform: rotate(0);
}
/*Loader Start*/
.page-loaded .preloader {
  top: 100%;
}

.page-loaded .preloader .inner {
  transform: translateY(50px);
  opacity: 0;
}

.page-loaded .preloader svg path {
  animation-play-state: running;
}

.page-loaded .navbar {
  transform: translateY(0);
}

.page-loaded .slider {
  transform: scale(1);
  opacity: 1;
}

.page-loaded .page-header {
  transform: scale(1);
  opacity: 1;
}
.preloader {
  width: 100vw;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99;
  transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;
  overflow: hidden;
}
.preloader .inner {
  display: inline-block;
  position: relative;
  z-index: 1;
  animation-name: preloader-inner;
  animation-duration: 0.8s;
  transition: all ease 0.8s;
}
.preloader .inner figure {
  width: 200px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  margin-bottom: 0;
}
.preloader .inner small {
  width: 100%;
  display: block;
  color: #fff;
  font-family: 'Karla', sans-serif;
  font-size: 20px;
  text-align: center;
  margin-top: 15px;
}
.preloader .inner .progress-bar {
  background: none;
}
.preloader svg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  fill: #b41a83;
}
.preloader svg path {
  animation-name: preloader-svg;
  -webkit-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -o-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -ms-animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  animation-duration: 0.7s;
  animation-play-state: paused;
  animation-fill-mode: forwards;
}

@-webkit-keyframes svg-morph {
  0% {
    d: path("m244.333332,38.437499c26.666664,-1.666666 125.666662,0.999995 195.333325,50.33333c69.666663,49.333335 -39.666664,141.666664 -70.666664,174.229164c-31,32.5625 -176.999993,107.437507 -234.999993,76.437507c-58,-31 73.666665,-107.000001 49,-190.4375c-24.666665,-83.437499 34.666668,-108.895835 61.333332,-110.562501z");
  }
  100% {
    d: path("m244.333332,38.437499c58.666669,50.333342 24.666647,101.000011 94.33331,150.333346c69.666663,49.333335 71.333353,156.666666 14.333349,175.229163c-57.000004,18.562498 -160.999991,6.437492 -218.999991,-24.562508c-58,-31 -109.333363,-174.000012 -70.000018,-236.437507c39.333345,-62.437496 121.666681,-114.895836 180.33335,-64.562494z");
  }
}
@-webkit-keyframes preloader-svg {
  0% {
    d: path("M0,0 C305.333333,0 625.333333,0 960,0 C1294.66667,0 1614.66667,0 1920,0 L1920,1080 C1614.66667,1080 1294.66667,1080 960,1080 C625.333333,1080 305.333333,1080 0,1080 L0,0 Z");
  }
  50% {
    d: path("M0,230 C305.333333,100 625.333333,0 960,0 C1294.66667,0 1614.66667,100 1920,300 L1920,1080 C1614.66667,1080 1294.66667,1080 960,1080 C625.333333,960 305.333333,1080 0,1080 L0,230 Z");
  }
  100% {
    d: path("M0,0 C305.333333,0 625.333333,0 960,0 C1294.66667,0 1614.66667,0 1920,0 L1920,1080 C1614.66667,1080 1294.66667,1080 960,1080 C625.333333,1080 305.333333,1080 0,1080 L0,0 Z");
  }
}
@-webkit-keyframes preloader-inner {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes page-transition {
  0% {
    d: path("M0,0 C305.333333,0 625.333333,0 960,0 C1294.66667,0 1614.66667,0 1920,0 L1920,1080 C1614.66667,980 1294.66667,930 960,930 C625.333333,930 305.333333,980 0,1080 L0,0 Z");
  }
  100% {
    d: path("M0,0 C305.333333,0 625.333333,0 960,0 C1294.66667,0 1614.66667,0 1920,0 L1920,1080 C1614.66667,1080 1294.66667,1080 960,1080 C625.333333,1080 305.333333,1080 0,1080 L0,0 Z");
  }
}

/* moving overlay */
@keyframes overlay {
  0%   { top: 0%; }
  90%  { top: -100%; visibility: hidden; }
  100% { top: -100%; visibility: hidden; }
}
/* title flicking */
@keyframes b_loader {
  0%  { opacity: 1; }
  75% { opacity: 1; }
  80% { opacity: 0.6; }
  85% { opacity: 1; }
  90% { opacity: 0.5; }
  95% { opacity: 1; }
  100% { opacity: 1; }
}
/*Loader End*/
/*Scroll Top Start*/
button.scrollTopStick {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 0;
    position: fixed;
    bottom: 50px;
    right: 50px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -o-transform: translateY(30px);
    display: flex;
    align-items: center;
    justify-content: center;
}
button.scrollTopStick.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    box-shadow: 2px 2px 7px 2px rgb(0 0 0 / 17%);
    -webkit-box-shadow: 2px 2px 7px 2px rgb(0 0 0 / 17%);
    -moz-box-shadow: 2px 3px 45px 0px rgba(0,0,0,0.33);
    cursor: pointer;
    z-index: 999;
}
/*Scroll Top End*/
/* Header One Start  */
.header-three .slideUp {
  transform: translateY(-140px);
  -webkit-transform: translateY(-140px);
    -moz-transform: translateY(-140px);
    -o-transform: translateY(-140px);
  width: 100%;
  position: fixed;
  top: 0;
}
.header-three .slideUp,
.header-three .slideDown{
    transition: transform .5s ease-out;
  -webkit-transition: transform .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
}
.header-three .slideDown {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
}
.header-three .slideDown nav{
    box-shadow: 2px 3px 45px 0px rgba(0,0,0,0.33);
    -webkit-box-shadow: 2px 3px 45px 0px rgba(0,0,0,0.33);
    -moz-box-shadow: 2px 3px 45px 0px rgba(0,0,0,0.33);
}
.header-one {
    position: absolute;
    width: 100%;
    z-index: 9;
    top: 0;
    left: 0;
}
.social ul{
    display: flex;
    align-items: center;
}
.social ul li a{
    font-size: 17px;
    line-height: 10px;
    color: white;
}
.social ul li a img,
.social ul li a svg {
    width: 17px;
}
.social ul.login li:nth-child(1){
    margin-right: 75px;
}
.social ul li{
    position: relative;
}
.social ul.login li:nth-child(1):before{
    content: "";
    background-color: #bfb2a1;
    width: 1px;
    height: 27px;
    position: absolute;
    top: 0;
    right: -35px;
}
.social ul.login li a img {
    width: 20px;
    margin-right: 10px;
}
.social ul.login li a {
    display: inline-flex;
    align-items: center;
}
.social ul.social-medias li:before{
    content: "";
    width: 2px;
    height: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    right: 0;
    background-color: #f2cfc9;
}
.social ul.social-medias li{
    padding: 0 15px;
}
.social ul.social-medias li:first-child {
    padding-left: 0;
}
.social ul.social-medias li:last-child:before{
    display: none;
}
.top-bar {
    padding: 0;
    border-bottom: 3px solid #F5B633;
    background: linear-gradient(135deg, #2C528C 0%, #1E3A8A 100%);
    /* background: linear-gradient(135deg, #2C528C 0%, #C2353A 100%); */
}
.top-bar .row{
    align-items: center;
}
.top-bar ul{
    display: flex;
    align-items: center;
}
.top-bar ul li a{
    font-size: 17px;
    line-height: 10px;
    color: white;
}
.top-bar ul li a img {
    width: 30px;
}
.top-bar ul.login li:nth-child(1){
    margin-right: 75px;
}
.top-bar ul li{
    position: relative;
    display: inline-flex;
}
.top-bar ul.login li:nth-child(1):before{
    content: "";
    background-color: #bfb2a1;
    width: 1px;
    height: 27px;
    position: absolute;
    top: 0;
    right: -35px;
}
.top-bar ul.login li a img {
    width: 20px;
    margin-right: 10px;
}
.top-bar ul.login li a {
    display: inline-flex;
    align-items: center;
}
.top-bar ul.social-medias li:before{
    content: "";
    width: 2px;
    height: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    right: 0;
    background-color: #f2cfc9;
}
.top-bar ul.social-medias li{
    padding: 0 10px;
}
.top-bar ul.social-medias li:last-child{
    padding-right: 0;
}
.top-bar ul.social-medias li:last-child:before{
    display: none;
}
.top-bar ul.social-medias{
    justify-content: flex-end;
}
.desktop-nav nav,
.desktop-nav nav .nav-bar > ul{
    display: flex;
    align-items: center;
}
.desktop-nav nav{
    margin-top: 2px;
    background-color: #2d548e;
    position: relative;
    justify-content: center;
    gap: 50px;
}
.desktop-nav nav:before,
.desktop-nav nav:after{
    content: "";
    width: 55px;
    height: 100%;
    position: absolute;
    background-color: #2d548e;
    top: 0;
}
.desktop-nav {
    background: #2d548e;
}
.desktop-nav nav:before{
    left: -55px;
}
.desktop-nav nav:after{
    right: -55px;
}
.desktop-nav .logo,
.desktop-nav .donation {
    position: relative;
    z-index: 5;
}
.desktop-nav .donation{
    display: flex;
    align-items: center;
}
.desktop-nav nav .nav-bar > ul > li > a{
    font-size: 16px;
  line-height: 28px;
  color: #fff;
  font-weight: 400;
  margin-right: 30px;
  position: relative;
  text-transform: uppercase;
}
.desktop-nav nav .nav-bar > ul > li:last-child > a {
    margin-right: 0;
}
.desktop-nav ul.sub-menu > li  > ul {
    left: 100% !important;
    top: 0px !important;
}
.desktop-nav ul.sub-menu > li > ul {
    padding-left: 15%;
}
/*.desktop-nav nav .nav-bar ul > li.menu-item-has-children a:before {
    content: url(../images/down-arrow.svg);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -15px;
    width: 11px;
    height: 25px;
}*/
.desktop-nav nav .nav-bar > ul > li > a svg {
    width: 11px;
}
.desktop-nav nav .nav-bar ul > li.menu-item-has-children ul.sub-menu{
   
    position: absolute;
}
.desktop-nav .donation a svg {
    width: 25px;
}
.desktop-nav .donation a.pr-cart {
    position: relative;
    margin-right: 32px;
}
.desktop-nav .donation a.pr-cart:before {
    content: "2";
    color: white;
    width: 25px;
    height: 25px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    top: -7px;
    right: -19px;
    z-index: 1;
    font-size: 13px;
}
.desktop-nav ul.sub-menu {
    min-width: 210px;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
}
.desktop-nav nav .nav-bar ul > li ul.sub-menu li a {
    padding: 2px 12px;
  display: flex;
  align-items: center;
  color: #272727;
  font-size: 16px;
  font-weight: 400;
    position: relative;
    justify-content: space-between;
    border-bottom: thin solid #f4f4f4;
    white-space: wrap;
}
.desktop-nav nav .nav-bar ul > li ul.sub-menu li a:before{
    content: "";
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}
.desktop-nav nav .nav-bar ul > li.menu-item-has-children ul.sub-menu li.menu-item-has-children > a:after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    right: 0;
    background-image: url('../images/p-button.svg');
    background-repeat: no-repeat;
    background-size: cover;
}
.desktop-nav nav .nav-bar ul > li ul.sub-menu li a:hover:before{
    opacity: 1;
    visibility: visible;
    width: 100%;
}
.desktop-nav nav .nav-bar ul > li ul.sub-menu li a:hover{
    color: white;
}
.desktop-nav nav .nav-bar ul > li.menu-item-has-children ul.sub-menu li a svg {
    width: 8px;
    height: 8px;
    fill: #a9a9a9;
}
.desktop-nav nav .nav-bar ul > li.menu-item-has-children ul.sub-menu li a:hover svg {
    fill: #fdfdfd;
}
.desktop-nav nav .nav-bar ul > li ul.sub-menu li:nth-child(even) a {
    /* background-color: #ebebeb; */
    background-color: #fff;
}
.desktop-nav nav .nav-bar ul > li ul.sub-menu li:nth-child(even) a:hover{
    background-color: transparent;
}
.desktop-nav nav .nav-bar ul > li ul.sub-menu {
    padding: 10px;
}
.desktop-nav nav .nav-bar > ul > li.menu-item-has-children ul.sub.sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
}
.desktop-nav nav .nav-bar ul > li.menu-item-has-children ul.sub-menu li {
    position: relative;
    white-space: nowrap;
  font-weight: 400;
}
.desktop-nav nav .nav-bar > ul > li {
    padding: 12px 0;
    position: relative;
}
.desktop-nav nav .nav-bar ul > li.menu-item-has-children ul.sub-menu {
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
}


/* .desktop-nav nav .nav-bar ul > li.menu-item-has-children:last-child ul.sub-menu {
  left: auto;
  right: 0;
} */

.desktop-nav nav .nav-bar ul > li.menu-item-has-children:last-child ul.sub-menu,
.desktop-nav nav .nav-bar ul > li.menu-item-has-children:nth-last-child(2) ul.sub-menu {
  left: auto;
  right: 0;
}


.desktop-nav nav .nav-bar > ul > li.menu-item-has-children > a:before {
    content: "";
    background-image: url('../images/down-arrow.svg');
    background-repeat: no-repeat;
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    right: -15px;
    width: 10px;
    height: 10px;
}
.desktop-nav nav .nav-bar > ul > li.menu-item-has-children > a:hover:before{
    background-image: url('../images/down-arrow-clr.svg');
}
.desktop-nav nav .nav-bar > ul > li.menu-item-has-children > ul.sub-menu:before{
    content: "";
    width: 50%;
    height: 2px;
    position: absolute;
    top: -5px;
    left: 0;
}
.desktop-nav .nav-bar  ul > li.menu-item-has-children:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) !important;
}
.desktop-nav nav .nav-bar ul > li.menu-item-has-children > ul.sub-menu > li.menu-item-has-children > ul {
    border-left: 4px solid;
}
.desktop-nav .nav-bar ul li.menu-item-has-children:hover ul.sub-menu {
    box-shadow: 2px 3px 35px 0px rgb(0 0 0 / 10%);
    -webkit-box-shadow: 2px 3px 35px 0px rgb(0 0 0 / 10%);;
}
.desktop-nav .donation{
    display: flex;
    align-items: center;
}
/* Header One End */

/* Header Two Start */
.header-two .desktop-nav nav:before, .header-two .desktop-nav nav:after {
    opacity: 0.9;
    z-index: 1;
}
.header-two .cart-popup {
    right: 0;
    top: 100%;
}
.header-two {
    position: absolute;
    width: 100%;
    z-index: 9;
    top: 0;
    left: 0;
}
.header-two .desktop-nav nav .nav-bar > ul > li > a svg {
    width: 11px;
    fill: #c3c3c3;
}
.header-two .donation {
    display: flex;
    align-items: center;
}
.header-two .top-bar-2 ul.contact-info li a img {
    width: 25px;
    margin-right: 10px;
}
.header-two .top-bar-2 ul li a {
    font-size: 16px;
    line-height: 26px;
    color: white;
    display: flex;
}
.header-two ul.contact-info {
    display: flex;
    justify-content: space-between;
}
.header-two .top-bar-2 {
    padding: 17px 0px;
}
.header-two .desktop-nav nav:before,
.header-two .desktop-nav nav:after {
    width: 100vw;
    height: 100%;
    z-index: 0;
    opacity: 0.7;
}

.header-two .desktop-nav nav .nav-bar > ul > li > a {
    color: #fff;
}
.header-two .logo a {
    display: flex;
    width: 150px;
    height: 170px;
    position: absolute;
    align-items: center;
    justify-content: center;
    top: -65px;
}
.header-two .desktop-nav nav {
    margin-top: 0;
    background-color: transparent;
}

.header-two .desktop-nav .donation a svg {
    width: 25px;
    height: 25px;
    fill: white;
}
.header-two .desktop-nav .donation a.pr-cart{
    margin-right: 0;
}
.header-two .desktop-nav .donation a {
    margin-right: 20px;
}
.header-two .nav-donation {
    display: flex;
    z-index: 3;
}
.header-two .nav-donation .nav-bar{
    margin-right: 70px;
}
.header-two .desktop-nav nav .nav-bar > ul > li {
    padding: 31px 0;
}
.header-two .desktop-nav .logo {
    position: initial;
}
.header-two .desktop-nav.slideDown .logo a {
    top: 0;
}
/* Header Two End */

/* Header Three Start */
.header-one.header-three{
    position: absolute;
    background-color: white;
}
/* Header Three End */

/* Hero One Start  */
.hero-one-slider button.slick-arrow {
    position: absolute;
    top: 60%;
    transform: translateY(-30%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    border: 2px solid;
    background: transparent;
    color: transparent;
    z-index: 1;
    cursor: pointer;
}
.hero-one-slider button.slick-arrow:before {
    content: "";
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hero-one-slider button.slick-prev.slick-arrow:before{
    background-image: url('../images/left-arrow.svg');
}
.hero-one-slider button.slick-next.slick-arrow:before{
    background-image: url('../images/right-arrow.svg');
}
.hero-one-slider button.slick-next.slick-arrow {
    right: 30px;
}
.hero-one-slider button.slick-prev.slick-arrow {
    left: 30px;
}
@keyframes anim {
    0%,
    100% {
        border-radius: 30% 70% 70% 30% / 30% 52% 48% 70%;
        box-shadow: 0 -2vmin 3vmin #b41a83 inset, 0 1vmin 4vmin #b41a83 inset, 0 -2vmin 7vmin #b41a83 inset;
    }

    10% {
        border-radius: 50% 50% 20% 80% / 25% 80% 20% 75%;
    }

    20% {
        border-radius: 67% 33% 47% 53% / 37% 20% 80% 63%;
    }

    30% {
        border-radius: 39% 61% 47% 53% / 37% 40% 60% 63%;
        box-shadow: -1vmin -2vmin 3vmin #b41a83 inset, -1vmin -2vmin 4vmin #b41a83 inset, 1vmin -1vmin 7vmin #b41a83 inset;
    }

    40% {
        border-radius: 39% 61% 82% 18% / 74% 40% 60% 26%;
    }

    50% {
        border-radius: 100%;
        box-shadow: 0 2vmin 3vmin #9674449e inset, 0 1vmin 4vmin #eac798a3 inset, 0 2vmin 7vmin #b41a8370 inset;
    }

    60% {
        border-radius: 50% 50% 53% 47% / 72% 69% 31% 28%;
    }

    70% {
        border-radius: 50% 50% 53% 47% / 26% 22% 78% 74%;
        box-shadow: 1vmin 1vmin 4vmin #b41a83d6 inset, 2vmin -1vmin 4vmin #b41a83a8 inset, -1vmin -1vmin 5vmin #b41a83 inset;
    }

    80% {
        border-radius: 50% 50% 53% 47% / 26% 69% 31% 74%;
    }

    90% {
        border-radius: 20% 80% 20% 80% / 20% 80% 20% 80%;
    }
}
@-webkit-keyframes fadeInUpSD {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  40% {
    opacity: 0;
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpSD {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
  }
  40% {
    opacity: 0;
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpSD {
  -webkit-animation-name: fadeInUpSD;
  animation-name: fadeInUpSD;
}

.slick-active .hero-data {
  animation-name: fadeInUpSD;
  animation-duration: 2s;
  opacity: 1;
  padding: 10px 20px 30px 0;
  top: 50% !important; /* Lock position */
  transform: translateY(-50%) !important; 
}


.hero-one {
  position: relative;
  width: 100%;
  overflow: hidden;
  
  margin-top: var(--header-height); 
  height: 50vh; 
  min-height: 400px;
}


.hero-data {
    position: absolute;
    top: 50%;
    margin-left: 1.8%;
    opacity: 0;
}

.slick-list, .slick-track {
    height: 100%!important;
}

/* .hero-data h1,
.hero-data p{
    color: transparent;
} */
.slick-active .hero-data h1,
.slick-active .hero-data p {
    color: white!important;
}
.hero-data h1,
.blesso_banner_content_shape h1{
    font-size: 50px;
    line-height: 60px;
    font-weight: bold;
}
.hero-data p,
.blesso_banner_content_shape p{
    font-size: 22px;
    line-height: 32px;
    margin-top: 15px;
}
    .blesso_banner_part {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.blesso_banner_part .slider_pagination {
  position: absolute;
  right: 100px;
  bottom: 45px;
  z-index: 9;
}
@media (max-width: 767.98px) {
  .blesso_banner_part .slider_pagination {
    display: none;
  }
}
.blesso_banner_part .slider_pagination .slider_prev_one, .blesso_banner_part .slider_pagination .slider_next_one {
  background-color: rgba(255, 255, 255, 0.5);
  border: 0px solid transparent;
  color: #363a57;
}
.blesso_banner_part .slider_pagination .slider_prev_one:hover, .blesso_banner_part .slider_pagination .slider_next_one:hover {
  background-color: #fff;
}
.blesso_banner_part .slider_pagination .slider_prev_one:hover i, .blesso_banner_part .slider_pagination .slider_next_one:hover i {
  color: #363a57;
}
.blesso_banner_part .blesso_banner_slider .blesso_banner_patten {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.blesso_banner_part .blesso_banner_slider .blesso_banner_patten:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.blesso_banner_part .blesso_banner_slider .blesso_banner_bg {
  width: 100%;
  height: 100%;
  transition: transform 11s cubic-bezier(0.1, 0.2, 0.7, 1);
  -webkit-transition: transform 11s cubic-bezier(0.1, 0.2, 0.7, 1);
  -moz-transition: transform 11s cubic-bezier(0.1, 0.2, 0.7, 1);
  -o-transition: transform 11s cubic-bezier(0.1, 0.2, 0.7, 1);
  backface-visibility: hidden;
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  position: absolute;
  left: 0;
  top: 0;
}
.blesso_banner_part .blesso_banner_slider .swiper-slide-active .blesso_banner_bg {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
}
.blesso_banner_part .blesso_banner_slider .swiper-slide {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 991px) {
  .blesso_banner_part .blesso_banner_slider .swiper-slide {
    min-height: 600px;
    max-height: 100vh;
  }
}
.blesso_banner_part .blesso_banner_content {
  position: relative;
  z-index: 1;
}
.blesso_banner_part .blesso_banner_content .blesso_banner_content_shape {
  position: relative;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}
.blesso_banner_part .blesso_banner_content .cu_btn {
  margin-top: 37px;
  opacity: 0;
  visibility: hidden;
}
.blesso_banner_part .swiper-slide-active .blesso_banner_content_shape {
  animation: fadeInDown 0.6s both 0.8s;
  opacity: 1;
  visibility: visible;
}
.blesso_banner_part .swiper-slide-active p {
  animation: fadeInDown 0.8s both 1s;
  opacity: 1;
  visibility: visible;
}
.blesso_banner_part .swiper-slide-active .ttitle {
  animation: fadeInDown 1s both 1.2s;
  opacity: 1;
  visibility: visible;
}
.blesso_banner_part .swiper-slide-active .cu_btn {
  animation: fadeInDown 1.2s both 1.4s;
  opacity: 1;
  visibility: visible;
}
.custom_container{
    margin-top: 150px;
}
/* Hero One End  */

/* Hero Two Start  */
.hero-two video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-two .hero-data{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    height: 0;
    width: 100%;
}
.hero-2-shape.img-moving {
    margin-top: -350px;
    position: relative;
}
.hero-two .hero-2-shape{
    z-index: -1;
}
.hero-two .hero-data h1 {
    font-size: 120px;
    line-height: 55px;
    margin-bottom: 50px;
}
.hero-two .hero-data p {
    font-size: 26px;
    line-height: 40px;
    width: 33%;
    margin: auto;
}
.move{
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}
.hero-two {
    height: 100vh;
    position: relative;
}
/* Hero Two End  */

/* Fellowship Start  */
.fellowship h2 {
    width: 67%;
    margin-bottom: 55px;
}
.offer span {
    width: 130px;
    height: 130px;
    display: flex;
    border-radius: 100px;
    overflow: hidden;
    margin: auto;
    position: relative;
}
.offer:hover span {
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -o-transform: translateY(-10px);
}
.offer span img {
    margin-top: 15px;
    position: absolute;
    padding: 15px;
    width: 100%;
}
.offer h3 a {
    font-size: 26px;
    color: #333;
    margin-top: 25px;
}
.offer h3 {
    margin-top: 22px;
}
.offer p{
    width: 80%;
    margin-top: 9px
}
/* Fellowship End  */

/* About One Start  */
.slider-data{
    padding: 35px 60px 55px;
}
.slider-data h2,
.slider-data h3{
    font-size: 26px;
    line-height: 38px;
    font-weight: bold;
}
.slider-data h3{
    margin-left: 15px;
    position: relative;
    margin-top: 18px;
}
.slider-data h3:before{
    content: "";
    width: 8px;
    height: 3px;
    background-color: white;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: -15px;
}
.about-one .about-data h2{
    width: 85%;
    line-height: 42px;
    margin-bottom: 0;
}
.about-gallery {
    display: flex;
    overflow: hidden;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -10px;
    width: 97%;
}
.about-gallery figure {
    /* width: 50%; */
    margin: 10px;
    overflow: hidden;
    position: relative;
}
.about-data {
    margin-bottom: 85px;
}
.about-data p {
    margin-bottom: 40px;
    width: 75%;
}
.prayers-slider ul.slick-dots {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 30px;
    right: 30px;
}
.prayers-slider ul.slick-dots button {
    display: none;
}
.prayers-slider ul.slick-dots li {
    width: 10px;
    height: 10px;
    background-color: #5a685d;
    margin-right: 7px;
    border-radius: 50px;
    cursor: pointer;
}
.prayers-slider ul.slick-dots li.slick-active {
    width: 20px;
    height: 20px;
}

/* About One End  */

/* About Two Start */
.about-two .about-info {
    margin-bottom: 65px !important;
    width: 50%;
}
.about-two .about-info h2 {
    line-height: 52px;
}
.about-two .about-info p {
    font-size: 20px;
    line-height: 32px;
    margin-top: 20px;
    margin-bottom: 35px;
}
.about-two .extras span {
    width: 180px;
    height: 180px;
    border-radius: 50%;
}
.about-two .extras span svg {
    width: 100px;
    height: 100px;
    fill: white;
}
.about-two .extras a {
    font-size: 28px;
    line-height: 55px;
    color: #111;
    margin-top: 10px;
}
/* About Two End */

/* About Three End */
.about-three .sideone p {
    margin-top: 20px;
    width: 80%;
}
.about-three .counter-three .box {
    padding: 50px 80px 50px 60px;
    background: #f6f4f2;
    width: 94%;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.about-three .counter-three .box svg {
    width: 70px;
    height: 70px;
    fill: #b41a83;
}
.about-three .counter-three .box p {
    font-size: 20px;
    margin-top: 7px;
}
.about-three .counter-three .box h2 {
    margin-top: 20px;
}
.about-three .counter-three div:nth-child(2){
    margin-top: -50px;
}
.about-three .counter-three{
    padding-top: 120px;
}
/* About Three End */

/* Recent Sermons Start  */
.sermon {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: 14px 10px 25px 8px rgba(0, 0, 0, 0.05);
    padding: 20px;
    border-radius: 12px;
}
.sermon-img {
    flex-basis: 40%;
    position: relative;
    overflow: hidden;
    height: 290px;
}
.sermon-img .sermon-media {
    height: 290px;
}
.sermon-data {
    flex-basis: 60%;
}
.sermon-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.sermon-data h3 a{
    font-size: 28px;
  line-height: 34px;
  color: #111;
}
.sermon-data p {
    line-height: 30px;
    margin-top: 12px;
}
.sermon-data {
    padding: 0 80px;
    background: white;
    height: 100%;
    /* align-items: center;
    display: inline-flex;
    flex-direction: column;
    justify-content: center; */
}
/* .sermon-data ul {
    display: flex;
    margin-bottom: 5px;
    width: 100%;
} */
.sermon-data ul {
            list-style: none;
           margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
.sermon-data h4 a {
    color:#111;
}
.sermon-data ul li {
            font-size: 16px;
            color: #666 !important;
            padding: 8px 0;
            padding-bottom:4px;
            border-bottom: 1px solid #f0f0f0;
            transition: all 0.3s ease;
            padding-top: 0;
        }
.sermon-data ul li:hover {
            color: #2c5f8d;
            padding-left: 2px;
        }

        .sermon-data ul li strong {
            color: #2c5f8d;
            font-weight: 600;
            margin-right: 8px;
        }

        .sermon-data h3 {
            margin-bottom: 20px;
            line-height: 1.4;
        }

        .sermon-data h3 a {
            color: #1a1a1a;
            text-decoration: none;
            font-size: 22px;
            font-weight: 700;
            transition: color 0.3s ease;
            display: inline-block;
        }

        .sermon-data h3 a:hover {
            color: #2c5f8d;
        }

        .sermon-data p {
            color: #272727;
            line-height: 24px;
            margin-bottom: 16px;
            font-size: 16px;
        }

        .sermon-data p:last-child {
            margin-bottom: 0;
            margin-top: 0;
            padding-top: 10px;
            /* border-top: 1px solid #f0f0f0; */
            font-size: 16px;
        }

        .sermon-data p:last-child strong {
            color: #2c5f8d;
            font-weight: 600;
        }

        @media (max-width: 768px) {
            .sermon {
                grid-template-columns: 1fr;
            }

            .sermon-img {
                height: 280px;
            }

            .sermon-data {
                padding: 30px;
            }

            .sermon-data h3 a {
                font-size: 20px;
            }
        }
        @media (max-width: 480px) {
           

            .sermon-data {
                padding: 24px;
            }

            .sermon-data h3 a {
                font-size: 18px;
            }

            .sermon-data p {
                font-size: 14px;
            }
        }
/* Recent Sermons End  */

/* Digital Ministry Start  */
.digital-ministry h2 {
    line-height: 60px;
    margin-bottom: 40px !important;
    width: 90%;
}
.dg-counter h3 {
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 15px;
}
.dg-counter p {
    width: 90%;
    font-size: 24px;
    line-height: 28px;
}
.dg-counter{
    position: relative;
    z-index: 0;
}
.dg-counter:before {
    content: "";
    width: 180px;
    height: 180px;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    border: 10px solid;
    opacity: 1;
    z-index: -1;
}
.digital-ministry{
    padding-bottom: 140px;
}
/* Digital Ministry End  */

/* Events Carousal Start  */
.events-carousal .heading {
    text-align: left;
}
.events-carousal .heading p{
    color: #313131;
    margin-top: 0;
}
.events-carousal .heading h2{
    width: 60%;
    font-size: 50px;
    line-height: 54px;
    margin-top: 10px;
}
.event{
    position: relative;
    overflow: hidden;
    margin-right: 40px;
}
.events-carousal .event > img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}
.event:hover img {
    transform: scale(1.1) rotate(1deg);
    -webkit-transform: scale(1.1) rotate(1deg);
    -moz-transform: scale(1.1) rotate(1deg);
    -o-transform: scale(1.1) rotate(1deg);
}
.event-data{
    position: absolute;
    bottom: 0px;
    left: 0;
    padding: 40px 30px;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transform: translateY(155px);
    -webkit-transform: translateY(155px);
    -moz-transform: translateY(155px);
    -o-transform: translateY(155px);
}
.event:hover .event-data{
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
}
.event-data p{
    font-size: 17px;
    line-height: 22px;
    margin-bottom: 5px;
    padding-left: 15px;
    position: relative;
}
.event-data p:before {
    content: "";
    width: 6px;
    height: 2px;
    position: absolute;
    left: 0;
    background-color: white;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.event-data h4 a{
    font-size: 26px;
    line-height: 32px;
    color: white;
}
.event-data > ul {
    transform: translateY(25px);
    margin-top: 10px;
}
.event:hover .event-data > ul{
    transform: translateY(0);
}
.event-data > ul > li{
    color: white;
    font-size: 16px;
    line-height: 28px;
    display: flex;
    align-items: center;
}
.event-data > ul > li img{
    width: 15px;
    height: 15px;
    margin-right: 15px;
}
.event .theme-btn {
    margin-top: 30px;
    background-color: #0f0f0f;
    width: 100%;
    justify-content: center;
    border-color: #0f0f0f;
    overflow: hidden;
    position: relative;
    z-index: 0;
    border: 0;
    display: inline-table;
    text-align: center;
}
.event .theme-btn:hover {
    color: white;
}
.event .theme-btn:before {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f7f5f520;
    transition: 0.3s ease-in-out;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
.event .theme-btn:hover:before {
    width: 100%;
    opacity: 1;
    visibility: visible;
    height: 100%;
}

/* Events Carousal End  */

/* Donation Start  */
img.sideimage {
    z-index: 9;
}
.donation{
    position: relative;
}
.donation-data {
    margin-left: 105px;
    width: 60%;
}
.donation-data p {
    width: 85%;
    margin-top: 7px;
}
.donation-form .theme-btn {
    padding: 23px 57px;
}
.donation-form .custom-donation-amount {
    display: flex;
    align-items: center;
}
.donation-form .custom-donation-amount span {
    width: 16%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
}
.custom-donation-amount input {
    width: 84%;
    padding: 20px;
    border: 0px;
    color: white;
    font-size: 15px;
    font-weight: 500;
}
.donation-form .custom-donation-amount input::placeholder{
    color: white;
}
.donation-form .custom-donation-amount span,
.donation-form .custom-donation-amount input{
    height: 70px;
}
.donation-form ul {
    display: flex;
    align-items: center;
    margin-right: -10px;
}
.donation-form{
    margin-top: 50px;
    width: 84%;
}
.donation-form ul li {
    width: 25%;
    margin-right: 10px;
    margin-bottom: 30px;
    margin-top: 15px;
}
.donation-form ul li a {
    line-height: 28px;
    padding: 18px 20px;
    border: 1px solid #b8b8b8;
    display: flex;
    font-size: 22px;
    color: #333;
    font-weight: bold;
    justify-content: center;
}
/* Donation End  */

/* Blog Start  */
.blog-meta > a {
    font-size: 22px;
  line-height: 24px;
  color: #111;
  font-weight: 500;
}
.blog-meta img {
    width: 100%;
}
.blog-meta p {
    width: 90%;
    margin-top: 8px;
}
.blog-meta ul {
    display: flex;
    align-items: center;
    margin: 6px 0;
}
.blog-meta ul li img {
    width: 23px;
    height: 23px;
    margin-right: 7px;
}
.blog-meta ul li {
    font-size: 16px;
    font-weight: 500;
    color: #a0a0a0;
    margin-right: 30px;
    display: inline-flex;
    border-radius: 4px;
}
.new-events-section .blog-meta ul li.date {
    color: #1a1a1a !important;
    background: #f2f2f2 !important;
    padding: 4px 10px;
    font-size: 14px;
}
.blog .loadmore {
    margin-top: 60px;
}

/* Blog End  */

/* Sponsors Start */
.sponsors img:hover {
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
}
/* Sponsors End */

/* Subscribe Start */
.subscribe{
    padding: 12px 0;
}
.subscribe p {
    font-size: 17px;
    margin-top: 5px;
}
.subscribe h3 {
    font-size: 28px !important;
  color: #222 !important;
}
.subscribe form input {
    width: 100%;
    height: 50px;
    font-size: 18px;
    padding-left: 40px;
    color: #a0a0a0;
    position: relative;
    border: 0;
}
.subscribe form button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    right: 3px;
    height: 44px;
    width: 120px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    border: 1px solid;
    cursor: pointer;
}
.subscribe form button:hover{
    background-color: white;
}
.subscribe form {
    position: relative;
}
/* Subscribe End */

/* Footer One Start */
.footer-one .footer-contact p {
    font-weight: bold;
}
.footer-one .footer-contact {
    margin-top: 25px;
}
.footer-one img.footer-logo {
    margin-bottom: 15px;
    max-width: 100px;
}
.footer-one h2 {
    font-size: 28px;
}
.footer-one ul.quick-links li a {
    font-size: 18px;
    color: #fff;
    display: flex;
}
.footer-one ul.quick-links li a:hover {
    transform: translateX(5px);
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    -o-transform: translateX(5px);
}
.footer-one ul.quick-links {
    padding-left: 20px;
    margin-top: 35px;
}
.quick-links.contact_us {
    margin-top: 35px;
}
.footer-one ul.quick-links li {
    position: relative;
    margin-bottom: 6px;
}
.footer-one ul.quick-links li::before {
    content: url('../images/arrow-right.svg');
    width: 12px;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.footer-one ul.footer-events li{
    display: flex;
    align-items: center;
    width: 85%;
    margin-bottom: 30px;
}
.footer-one ul.footer-events li:last-child {
    margin-bottom: 0;
}
.footer-one ul.footer-events li figure{
    margin-right: 23px;
    min-width: 110px;
    min-height: 100px;
}
.footer-one ul.footer-events li figure img {
    width: 100%;
    object-fit: cover;
}
.footer-one ul.footer-events li a{
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color:  white;
}
.footer-one ul.footer-events{
    margin-top: 40px;
}
.footer-one ul.footer-events li p.post-date{
    color: #ddd;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    padding-left: 30px;
    margin-top: 7px;
}
.footer-one ul.footer-events li p.post-date:before{
    content: url('../images/calendar-clr.svg');
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.footer-one .part-one {
    padding-bottom: 100px;
    justify-content: space-between;
    border-bottom: 1px solid #aaa;
}
.copy-right {
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
}
.copy-right p {
    font-size: 14px;
  line-height: 20px;
    text-align: right;
}
/* Footer One End */

/* CountDown Start */

.countdown #countdown #tiles > span{
    width: 120px;
    height: 120px;
    font-size: 45px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    border-top: 1px solid #fff;
    border-radius: 100px;
    margin: 0 7px;
    padding: 18px 18px 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid #fff;
}
.countdown #countdown {
    position: relative;
    text-align: right;
}
.countdown .labels li {
    color: white;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    width: 135px;
    justify-content: center;
}
.countdown .labels {
    display: flex;
    position: absolute;
    top: 75px;
    right: 0;
}
.countdown{
    padding: 65px 0;
    position: relative;
    z-index: 0;
}
.counter-data a {
    font-size: 30px;
    line-height: 34px;
}
.counter-data ul li svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    fill: white;
}
.counter-data ul {
    display: flex;
    margin-top: 15px;
}
.counter-data ul li {
    display: inline-flex;
    align-items: center;
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-right: 20px;
}
/* CountDown End */

/* Church Prayers Start */
.church-prayers .heading img {
    margin-bottom: 15px;
}
.church-prayers .heading h2 {
    font-size: 45px;
  line-height: 55px;
    width: 80%;
}
.church-prayers .heading {
    margin-bottom: 45px;
}
.church-prayers .quotes {
    display: flex;
    align-items: center;
}
.church-prayers .quotes p {
    font-size: 18px;
  line-height: 26px;
  margin-bottom: 5px;
  font-weight: 400;
}
.church-prayers .quotes h4 {
    font-size: 26px;
    line-height: 34px;
}
.church-prayers .quotes img {
    margin-right: 20px;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    border: 6px solid white;
    box-shadow: 4px 4px 10px 3px rgb(0 0 0 / 8%);
    -webkit-box-shadow: 4px 4px 10px 3px rgb(0 0 0 / 8%);
    -moz-box-shadow: 4px 4px 10px 3px rgb(0 0 0 / 8%);
}
/* Church Prayers End */

/* Recent Sermons Two Start */

.recent-sermon-two .sermon-two {
    text-align: center;
    padding-right: 35px;
}
.recent-sermon-two .sermon-two h3 a {
    font-size: 26px;
    line-height: 30px;
    color: #333;
}
.sermon-grid ul {
   display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50px;
    overflow: hidden;
    position: absolute;
    top: 15px;
    right: 15px;
    transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    opacity: 0;
    visibility: hidden;
}
.sermon-two:hover .sermon-grid ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
}
.sermon-grid>ul>li a img {
    width: 22px;
    height: 22px;
}

.sermon-grid>ul>li a {
    padding: 20px;
    display: flex;
    border-top: 1px solid #ffffff20;
}
.view-all {
    margin-top: 100px !important;
    width: 80%;
}
.view-all h2 {
    margin-bottom: 55px;
}
/* Recent Sermons Two End */

/* Pastor Start */
.pastor .meta a {
    font-size: 30px;
    line-height: 28px;
}
.pastor .meta {
    text-align: center;
    padding: 37px 0px;
    position: absolute;
    width: 100%;
    bottom: 0;
    transform: translateY(60px);
    -webkit-transform: translateY(60px);
    -moz-transform: translateY(60px);
    -o-transform: translateY(60px);
}
.pastor .meta p {
    font-size: 16px;
    line-height: 28px;
}
.pastor .profile{
    position: relative;
    overflow: hidden;
}
.pastor .profile:hover .meta{
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transition-delay: 0.15s;
}
.pastor .meta .social ul {
    justify-content: center;
    margin-top: 20px;
}
.pastor .meta .social {
    transform: translateY(10px);
}
.pastor .profile:hover .pastor .meta .social {
    transform: translateY(0);
}
.pastor .profile:hover {
    transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
}
.pastor .meta:before {
    content: "";
    background-image: url('../images/pastor-icon.webp');
    background-repeat: no-repeat;
    position: absolute;
    width: 60px;
    height: 60px;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    z-index: -2;
    opacity: 0;
    transition-delay: 0.2s;
    transition: 0.3s ease-in;
}
.profile .social ul.social-medias li:before {
    background-color: #ffffff50;
}
.pastor .profile:hover .meta:before {
    top: -53px;
    opacity: 1;
}
.pastor .margin {
    margin: 0;
}
.pastor {
    z-index: 1;
    position: relative;
}
.pastor-overlay{
    margin-bottom: -125px;
}
/* Pastor End */

/* Church Memories Start */
.church-memories .gallery {
    margin-bottom: 25px;
}
.causes-of-church:before {
    content: "";
    background-image: url('../new-images/slider-2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    right: -15px;
}
.church-memories .loadmore{
    margin-top: 45px;
}
/* Church Memories End */

/* Causes Of Church Start */
.causes-of-church p.subtitle {
    font-size: 18px;
    font-weight: bold;
    color: #b8b8b8;
    text-decoration: underline;
}
.causes-of-church h2 {
    margin-bottom: 30px;
}
.causes-of-church .don-box{
    background-color: white;
    padding: 40px;
    margin-right: 25px;
    height:330px;
}
.causes-of-church .slider-causes-of-church {
    margin-right: -25px;
}
.causes-of-church .don-box h3 {
    color: #111;
    margin-bottom: 0px;
    font-size: 20px !important;
    line-height: 22px;
    font-weight: 500;
    text-transform: uppercase;
}
.causes-of-church .prices h4 {
    font-size: 32px;
    line-height: 28px;
    font-weight: bold;
    margin-bottom: 5px;
}
.causes-of-church .prices i {
    font-style: normal;
    font-weight: normal;
}
.causes-of-church .prices p {
    text-transform: capitalize;
  color: #272727;
  font-size: 16px;
  line-height: 22px;
}
.causes-of-church .prices {
    padding: 20px 0;
    height: 135px;
}
.causes-of-church .don-box a.theme-btn {
    padding: 10px 30px;
    background-color: white;
    border: 2px solid;
    color: #666 !important;
}
.causes-of-church .don-box a.theme-btn:hover{
    color: white;
}
/* Causes Of Church End */

/* Mass Timing Start */

.mass-timing .head {
    display: flex;
    justify-content: space-between;
}
.mass-timing .meta h2 {
    font-size: 60px;
    line-height: 55px;
}
.mass-timing .head a.theme-btn {
    padding: 23px 47px;
}
.mass-timing .table th, .mass-timing .table td {
    padding: 27px;
    font-size: 18px;
    line-height: 30px;
    font-weight: 500;
}
.mass-timing .table td span {
    margin-right: 25px;
}
.mass-timing .table thead {
    color: white;
}
.mass-timing .table thead > tr > th {
    font-size: 22px !important;
    text-align: left;
}
.mass-timing .table {
    border: 1px solid #c3c3c3;
    margin-top: 60px;
    width: 100%;
}
.mass-timing .table td {
    color: #111;
    border: 0;
}
.mass-timing .table tbody tr {
    background-color: white;
}
.mass-timing .table tbody tr:nth-child(even){
    background-color: #fbf9f7;
}
.mass-timing .table tbody tr:hover {
    background-color: #fff6ea;
}
.mass-timing .expand {
    width: 75%;
    margin: auto;
}
/* Mass Timing End */


/* Subscribe Two Start */
.subscribe-two .data form input {
    width: 100%;
    height: 210px;
    text-align: center;
    font-size: 22px;
    background-color: white;
}
.subscribe-two .data {
    text-align: center;
    width: 80%;
    margin: auto;
}
.subscribe-two .data p{
    width: 45%;
}
.subscribe-two .data form input::placeholder {
    color: #666;
}
.subscribe-two .data form input:focus, 
.subscribe-two .data form input:hover, 
.subscribe-two .data form input:active, 
.subscribe-two .data form input {
    border: 1px solid #ababab;
}
.subscribe-two .data h2 {
    font-size: 60px;
    margin-bottom: 35px;
}
.subscribe-two .data p {
    margin-bottom: 30px !important;
}
.subscribe-two .data form {
    position: relative;
}
.subscribe-two .data form button.theme-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    bottom: -35px;
    padding: 18px 50px;
    border: 0;
}
.subscribe-two .data form .shape {
    margin: 10px;
}
.subscribe-two .data form .shape:after {
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid #ababab;
    position: absolute;
    top: 10px;
    left: 0;
    z-index: -1;
}
/* Subscribe Two End */

/* Hero Three End */
.hero-three .hero-three-slider,
.hero-three .hero-three-slider .slick-list,
.hero-three .hero-three-slider .slick-track{
    height: 100vh !important;
}
.hero-three,
.hero-three .data,
.hero-three .data .hero-three-slider img{
    position: relative;
}
.hero-three .data .hero-three-slider img{
    height: 100%;
    object-fit: cover;
}
.hero-three .data {
    height: 100vh;
}
.hero-three .data .tittle{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    margin-left: 205px;
    z-index: 1;
}
.hero-three .data .tittle h1 {
    font-size: 80px;
    width: 55%;
    letter-spacing: -2px;
}
.hero-three{
    display: flex;
    align-items: center;
}
.hero-three .sidetitle{
    width: 5%;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}
.sidetitle ul li a {
    font-size: 22px;
    font-weight: bold;
    color: #222;
    width: 220px;
    display: inline-flex;
}
.hero-three .data {
  position: relative;
  z-index: 1;
  height: 100%;
  margin: 50px auto;
}

.hero-three .data .item {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.hero-three .data .item img {
  width: 100%;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.hero-three .data .item.animated img {
  -webkit-animation: ken-burns-out 8s 1 ease-in-out forwards;
  animation: ken-burns-out 8s 1 ease-in-out forwards;
  animation-play-state: paused;
}
.hero-three .data .item.slick-active img {
  animation-play-state: running;
}


/*//The animation: from 1.3 scale to 1*/
@-webkit-keyframes ken-burns-out {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ken-burns-out {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
/* Hero Three End */

/* LiveStream Start */
.livestream .data .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    text-align: center;
}
.livestream .data .title h2 {
    font-size: 60px;
    letter-spacing: -2px;
}
.livestream .data .title p {
    font-size: 20px;
    margin-top: 5px;
}
.livestream .data .title .countdown .labels {
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    right: initial;
}
.livestream .data .title .countdown #countdown {
    text-align: center;
}
.livestream .data .title .countdown p {
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.livestream .data .title .countdown{
    padding-top: 50px;
    padding-bottom: 0;
}
/* LiveStream End */

/* Event Three Start */
.event-three .event .event-data {
    position: absolute;
    padding: 0 30px 30px 30px;
    transform: translateY(130px);
    -webkit-transform: translateY(130px);
    -moz-transform: translateY(130px);
    -o-transform: translateY(130px);
    bottom: 0px;
    height: auto;
}
.event-three .event .event-data .event img{
    height: auto;
}
.event-three .event .event-data h4 a {
    color: #222;
    font-weight: bold;
    width: 80%;
    font-size: 30px;
    display: flex;
}
.event-three .event:hover .event-data h4 a,
.event-three .event:hover .event-data p{
    color: white;
}
.event-three .event .event-data p {
    font-size: 16px;
}
.event-three .event .event-data p:before{
    background-color: #666;
}
.event-three .event:hover .event-data p:before{
    background-color: #fff;
}
.event-three .event .event-data:before {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    top: -58px;
    border-bottom: 60px solid #fbf9f7;
    border-right: 450px solid transparent;
}
.event-three .event:hover .event-data::before {
    top: -90px;
    border-bottom: 100px solid rgb(251, 249, 247);
    border-right: 60px solid transparent !important;
    border-right: 450px solid transparent !important;
}
.event-three .event{
    margin-right: 0;
    z-index: 1;
}
.event-three .event:hover .event-data > ul,.event-three .event:hover .event-data > a {
    position: relative;
}
.event-three .event:hover .event-data > a{
    color: white;
}
.event-three .event:hover .event-data {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
}
.event-three .event figure img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}
.event-three .event:hover .event-data > ul {
    margin-top: 25px;
}
.event-three .event-data > ul{
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    margin-top: 0;
}
.event-three .event:hover .event-data > ul{
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
}
.event-three .event-data p{
    margin-bottom: 10px;
}
/* Event Three End */

/* Support Us Start */
.support-us {
    position: relative;
}
.support-us .video-box{
    padding: 170px 0;
}
.video-box:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0.9;
    transform: skewX(5deg);
    -webkit-transform: skewX(5deg);
    -moz-transform: skewX(5deg);
    -o-transform: skewX(5deg);
}
.support-us .video-box h3{
    font-size: 60px;
    padding-top: 35px;
}
.support-us .video-box a.theme-btn{
    padding: 18px 57px;
}
.support-us .video-box p {
    margin-top: 5px;
    margin-bottom: 35px;
}
.support-us .video-box > a.icon > svg {
    width: 25px;
    height: 25px;
    fill: white;
}
.support-us .video-box > a.icon {
    width: 100px;
    height: 100px;
    border: 2px solid white;
}
.support-us .video-box > a.icon:before {
    content: "";
    width: 110px;
    height: 110px;
    border-radius: 100px;
    border: 2px solid white;
    position: absolute;
}
/* Support Us End */

/* Footer Three Start */
.footer-three {
    position: relative;
    border-bottom: 10px solid;
    padding-top: 40px;
}
.footer-three .social-area ul li span svg {
    width: 25px;
    fill: white;
}
.footer-three .social-area ul li span {
    width: 60px;
    height: 60px;
    margin-right: 12px;
}
.footer-three .social-area ul li a {
    font-size: 16px;
    margin-right: 50px;
    color: white;
}
.footer-three .social-area ul{
    padding: 30px 0;
}
.footer-three .footer-main-content p {
    color: white;
    font-size: 18px;
    margin-top: 30px !important;
}
.footer-three .footer-gallery figure,
.footer-three .footer-gallery img {
    width: 130px;
    height: 130px;
    object-fit: cover;
}
.footer-three .footer-gallery figure{
    position: relative;
    overflow: hidden;
}
.footer-three .footer-gallery figure:before{
    content: "";
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
}
.footer-three .footer-gallery figure:hover:before{
    width: 100%;
    opacity: 0.8;
    visibility: visible;
}
.footer-three .footer-gallery a {
    padding: 0 10px;
}
.footer-three .footer-gallery {
    margin-top: 35px;
}
.footer-main-content {
    padding-top: 70px;
}
.footer-main-content:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: -5px;
    left: 0px;
}
.footer-main-content,
.footer-main-content:before{
    border-top: 1px solid white;
}
/* Footer Three End */

/* Church Products Start */
.product{
    padding: 30px 10px 30px;
}
.product figure{
    text-align: center;
    background: #fff;
    padding: 10px;
}
 .ratings div.star:before {
    content: "";
    background-image: url('../images/star.svg');
    width: 15px;
    height: 15px;
    margin-right: 7px;
    fill: #aaa;
}
 .ratings div {
    width: 15px;
    height: 15px;
    position: relative;
    margin-right: 7px;
}
 .ratings div.star:before {
    content: "";
    background-repeat: no-repeat;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    position: absolute;
    left: 0;
    top: 0;
}
 .ratings div.star:before {
    background-image: url('../images/star.svg');
}
 .ratings div.star.colored:before {
    background-image: url('../images/star-colored.svg');
}
.product .product-description {
    line-height: 18px;
  padding: 7px 10px;
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-top: 2px solid #efb131;
 }
.product .product-description a {
    font-size: 16px;
    line-height: 18px;
    color: #1d1d1d;
    font-weight: 500;
}
.product .product-description .ratings {
    margin-bottom: 10px;
}
.product .product-description .product-prices .price{
    font-size: 24px;
    line-height: 28px;
    color: #282828;
}
.product .product-description .product-prices {
    margin-top: 13px;
}
.product .product-actions a svg {
    width: 20px;
    height: 20px;
    fill: white;
}
.product .product-actions a {
    width: 47px;
    height: 47px;
    margin-right: 5px;
}
.product .product-actions a:hover{
    background-color: #0f0f0f !important;
}
.product .thumbnail {
    overflow: hidden;
    position: relative;
    background: #ececec;
}
.product .thumbnail img {
    width: 100%;
    max-width: 70px !important;
    height: 70px;
    object-fit: contain;
}
.product .product-actions {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    display: none;
}
/* .product:hover .product-actions {
    bottom: 0;
    opacity: 1;
    visibility: visible;
} */
/* Church Products End */

/* Page 404 Start */
.page-404{
    padding-top: 320px;
    padding-bottom: 150px;
}
.page-404 .search-error h2 {
    font-size: 273px;
    line-height: 215px;
}
.page-404 .search-error h2 span:before {
    content: "";
    background-image: url('../images/logo-part.webp');
    background-repeat: no-repeat;
    width: 85px;
    height: 110px;
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    z-index: -1;
}
.page-404 .search-error h3 {
    font-size: 36px;
    margin-bottom: 30px;
}
.page-404 .search-error p{
    font-size: 20px;
    line-height: 30px;
}
.page-404 .search-error form input{
    height: 60px;
    width: 100%;
    border: 1px solid #eee;
    border-radius: 100px;
    padding: 0 35px;
    font-size: 16px;
    font-weight: 500;
    position: relative;
}
.page-404 .search-error form input::placeholder{
    color: #666;
}
.page-404 .search-error form {
    margin-top: 23px !important;
    margin-bottom: 20px !important;
    position: relative;
}
.page-404 .search-error form button svg {
    width: 25px;
    height: 25px;
}
.page-404 .search-error form button {
    border: 0;
    background: transparent;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
/* Page 404 End */

/* Contact Us Start */
/* .contact-us h2 {
    width: 35%;
    font-size: 50px;
    line-height: 60px;
}
.contact-us .heading{
    margin-bottom: 60px;
}
.contact-us .content span {
    font-size: 22px;
    line-height: 32px;
    width: 40%;
}
.contact-us .content ul li {
    font-size: 18px;
    line-height: 29px;
    width: 70%;
    margin-bottom: 5px;
}
.contact-us .content ul li:first-child {
    margin-bottom: 20px;
}
.contact-us .content div:first-child {
    margin-bottom: 45px;
}
.contact-us form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.contact-us form input {
    width: 100%;
    height: 70px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 100px;
    padding: 0 35px;
    font-size: 17px;
}
.contact-us form input::placeholder,
.contact-us form textarea::placeholder{
    color: #555;
}
.contact-us form textarea {
    font-size: 17px;
    height: 190px;
    border-radius: 30px;
    padding: 35px;
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    font-family: inherit;
    font-family: 'Karla', sans-serif;
}
.contact-us form button {
    margin-top: 10px;
    cursor: pointer;
}
.contact-us .map{
    margin-top: 100px;
}
.contact-us .social-medias{
    margin-top: 30px;
} */

.modern-contact-section {
        width: 100%;
        background: #fff;
        border-radius: 20px;
        padding: 40px;
        margin: 0 auto;
        position: relative;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        .contact-row {
            /* display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: start; */
            display: grid;
            gap: 25px;
        }
        

        /* Contact Details */
        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .contact-detail-card {
            background: #f8f8f8;
            padding: 24px;
            border-radius: 14px;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        .contact-div {
            flex:1;
        }

        .contact-detail-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        /* .contact-detail-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 16px 40px rgba(102, 126, 234, 0.4);
        } */

        .contact-detail-card:hover::before {
            opacity: 1;
        }

        .icon-wrapper {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #616161 0%, #4f6ea1 100%);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            transition: all 0.3s ease;
        }

        .contact-detail-card:hover .icon-wrapper {
            transform: rotate(10deg) scale(1.1);
        }

        .icon-wrapper i {
            font-size: 1.3rem;
            color: #fff;
        }

        .contact-detail-card h3 {
            font-weight: 600;
            color: #212529;
            margin-bottom: 0px;
            letter-spacing: 0.3px;
            line-height: 30px;
            font-size: 24px !important;
        }
        .submit-btn-div {
            display:flex;
            justify-content: flex-end;
        }

        .contact-detail-card p {
            color: #212529;
            font-size: 0.95rem;
            line-height: 1.5;
            font-weight: 400;
        }

        /* Contact Form */
        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
            max-width: 600px;
            margin: 0 auto;
            padding: 2rem;
            border-radius: 16px;
            background: #f9f9f9;
        }

        .form-group {
            position: relative;
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 12px 20px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            font-size: 16px;
            color: #333;
            transition: all 0.3s ease;
            background: #fff;
        }

        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
            transform: translateY(-2px);
        }

        .contact-form textarea {
            height: 130px;
            resize: vertical;
            min-height: 100px;
        }

        .contact-form input::placeholder,
        .contact-form textarea::placeholder {
            color: var(--text-muted);
        }

        .submit-btn {
            background: #4f6ea1;
            color: #fff;
            border: none;
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 0.95rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            /* box-shadow: 0 6px 20px rgba(67, 86, 172, 0.4); */
            position: relative;
            overflow: hidden;
            width: fit-content;
        }

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

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

        .submit-btn:hover {
            transform: translateY(-4px) scale(1.02);
            /* box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5); */
        }

        .submit-btn:active {
            transform: translateY(-2px) scale(0.98);
        }

        /* Decorative elements */
        .floating-shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
            pointer-events: none;
            z-index: 0;
        }

        .shape-1 {
            width: 300px;
            height: 300px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            top: -100px;
            right: -100px;
            animation: float 6s ease-in-out infinite;
        }

        .shape-2 {
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #f093fb, #f5576c);
            bottom: -80px;
            left: -80px;
            animation: float 8s ease-in-out infinite reverse;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-20px) rotate(5deg);
            }
        }

        /* Responsive */
        @media (max-width: 991px) {
            .modern-contact-section {
                padding: 30px;
            }

            .section-header h2 {
                font-size: 2rem;
            }

            .contact-row {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }

        @media (max-width: 576px) {
            .modern-contact-section {
                padding: 24px;
            }

            .contact-detail-card {
                padding: 20px;
            }
        }



/* Contact Us End */

/* About Us Start */
.about-us .content h2 {
    line-height: 40px;
    margin-bottom: 15px;
    width: 70%;
    font-size: 34px;
}
.about-us .contacts:not(:last-child) {
    margin-top: 32px;
}
.about-us .content p {
    font-size: 16px;
    line-height: 22px;
}
.about-us .church-about-img {
    position: relative;
    height: 380px;
}
.about-us .church-about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.church-about-img-two {
    position: relative;
}
.church-about-img-two img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-us .services-online p {
    font-size: 18px;
    line-height: 28px;
}
.about-us .services-online .icon {
    width: 100px;
    height: 100px;
}
.about-us .services-online .icon svg {
    width: 45px;
    height: 45px;
}
.about-us .services-online .contacts:not(:last-child) {
    margin-bottom: 48px;
}
.about-us .services-online .contacts ul {
    width: 60%;
}
.about-us .services-online .contacts ul li h3 {
    font-size: 28px;
    line-height: 32px;
    color: #222;
    margin-bottom: 10px;
}
.about-us .services-online .contacts:not(:last-child) {
    margin-top: 45px;
}
/* About Us End */

/* Pray Start */
.pray{
    position: relative;
}
.pray:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
}
.pray .pray-data h2 {
    font-size: 40px;
    line-height: 50px;
    width: 60%;
}
.pray .pray-data img {
    margin-bottom: 30px;
}
.pray .pray-data p {
    font-size: 26px;
    line-height: 60px;
    margin-top: 5px;
}
/* Pray End */

/* Pastor Detail Start */
.pastor-meta h3 {
    line-height: 38px;
  color: #222;
  margin-top: 10px;
  font-weight: 600 !important;
  font-size: 28px !important;
}
.pastor-meta p.designation{
    font-size: 18px;
    line-height: 24px;
    color: #b41a83;
}
.pastor-meta img.pastor-img {
    border: 13px solid white;
    /* margin-top: -190px;
    margin-left: 85px; */
    margin-top: -70px;
    margin-left: 56px;
    max-width: 250px;
}
.pastor-meta {
   padding-bottom: 30px;
}
.pastor-meta .social {
    margin-top: 30px;
}
.pastor-meta ul.cont-acts li svg {
    width: 25px;
    margin-right: 20px;
}
.pastor-meta .social ul.social-medias li:before{
    background-color: #3d3d3d;
}
.pastor-meta ul.cont-acts li p{
    width: 40%;
}
.pastor-meta .social ul li a svg{
    fill: #3d3d3d;
}
.pastor-meta ul.cont-acts li:not(:last-child){
    margin-bottom: 10px;
}
.pastor-meta ul.cont-acts li:first-child{
    margin-bottom: 20px;
}
.pastor-meta ul.cont-acts li{
    font-size: 20px;
}
.pastor-content p {
    line-height: 30px;
    margin: 25px 0;
    text-align: justify;
    hyphens: auto;
}
.pastor-content h3 {
    font-size: 26px;
    line-height: 32px;
    color: #222;
    margin-top: 0;
}
.pastor-content.content{
    margin-top: 0 !important;
}
.pastor-content .progress {
    width: 47%;
    margin-right: 30px;
}
.pastor-content .prog-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* Pastor Detail End */

/* Our Ministries Start */
.our-ministries .heading h2{
    line-height: 70px;
    width: 65%;
}
.our-ministries .heading {
    margin-bottom: 60px;
}
.our-ministries .ministry a{
    font-size: 28px;
    line-height: 55px;
    color: #322f25;
    margin-top: 10px;
}
.our-ministries .ministry{
    padding: 40px 40px 22px;
    margin-bottom: 30px;
    overflow: hidden;
}
.our-ministries .ministry:before{
    content: "";
    background-image: url('../images/ministry-bg.webp');
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-25px);
    -webkit-transform: translateX(-25px);
    -moz-transform: translateX(-25px);
    -o-transform: translateX(-25px);
}
.our-ministries .ministry:hover:before {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
}
/* Our Ministries End */

/* Social Media Start */
.s-medias ul li a svg{
    fill: white;
    width: 23px;
    height: 23px;
}
.s-medias ul li a{
    width: 60px;
    height: 60px;
    margin-right: 10px;
}
.s-medias ul li p{
    font-size: 16px;
    color: #292929;
}
.s-medias ul li{
    margin-right: 40px;
}
.s-medias ul,
.s-medias ul:before{
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
.s-medias ul{
    padding: 20px 0;
}
.s-medias ul:before {
    content: "";
    width: 100%;
    height: 110%;
    position: absolute;
    top: -5px;
    left: 0;
    z-index: -1;
}
/* Social Media End */

/* Catholic Church End */
.catholic-church .prog-part h2 {
    margin-bottom: 7px;
}
.catholic-church .prog-part{
    width: 95%;
}
.prog-bar .progress {
    height: 50px;
    background-color: #fbf9f7;
}
.prog-bar .progress:not(:last-child){
    margin-bottom: 20px;
}
.prog-bar .progress .progress-bar {
    font-size: 18px;
    text-align: left;
}
.prog-bar .progress,
.prog-bar .progress .progress-bar{
    border-radius: 100px !important;
}
.prog-bar {
    margin-top: 42px;
}
.catholic-church .video-sec .video {
    margin-bottom: 40px;
    padding-left: 30px;
}
.catholic-church .video-sec .video a {
    width: 85px;
    height: 85px;
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    border: 2px solid white;
}
.catholic-church .video-sec .video a:before {
    content: "";
    border: 2px solid white;
    width: 115%;
    height: 115%;
    position: absolute;
    left: -6px;
    top: -6px;
    border-radius: 100px;
}
.catholic-church .video-sec .video a:hover:before{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.catholic-church .video-sec .video a svg {
    width: 25px;
    height: 25px;
    fill: white;
}
/* Catholic Church End */

/* Cause Detail Start */
.cause-detail .cause-meta span{
    font-size: 18px;
}
.cause-detail .cause-meta h2 {
    font-size: 45px;
    margin-bottom: 30px;
}
.cause-detail .cause-meta ul li {
    font-size: 40px;
    line-height: 38px;
}
.cause-detail .cause-meta ul li i{
    font-style: normal !important;
}
.cause-detail .cause-meta ul li p {
    text-transform: uppercase;
    margin-left: 10px;
}
.cause-detail .cause-meta ul li p,
.cause-detail .cause-meta ul li i{
    font-weight: 500;
}
.cause-detail .cause-meta .prog-bar .progress, 
.cause-detail .cause-meta .prog-bar .progress .progress-bar {
    border-radius: 100px !important;
    height: 25px;
}
.cause-detail .cause-meta .theme-btn{
    padding: 19px 57px;
    color: white;
}
.cause-detail .cause-meta .prog-bar {
    margin-top: 25px;
}
.cause-detail .cause-meta{
    margin-bottom: 40px !important;
}
.cause-detail .content {
    margin-top: 30px !important;
}
.cause-detail .content p{
    margin: 12px 0;
}
.cause-detail .gallery figure {
    height: 380px;
}
.cause-detail ul.check-list, .cause-detail ul.heart-list {
    margin-top: 20px;
    width: 50%;
}
/* Cause Detail End */

/* Event Detail Start */
.event-detail .event-meta > ul > li > svg {
    width: 45px;
    height: 45px;
    margin-right: 15px;
}
.event-detail .event-meta  ul  li{
    color: #222;
  font-size: 18px;
  line-height: 18px;
}
.event-detail .event-meta  ul  li:not(:last-child){
    margin-right: 65px;
}
.event-detail .event-meta h2 {
    margin-bottom: 28px!important;
    font-size: 34px;
    line-height: 40px;
    text-align: center;
    white-space: wrap;
    text-transform: uppercase;
}
.event-detail .featured-area {
    margin-top: 45px;
    height: 350px;
    padding: 0;
}
.event-detail .featured-area img {
    object-fit:cover;
    height:100%;
    object-position: 100% 2%;
}
.event-detail .featured-area .register-now{
    padding: 30px 0;
}
.event-detail .featured-area .register-now ul {
    width: 85%;
}
.event-detail .featured-area .register-now.overlay-green:before{
    z-index: 0;
}
.event-detail .featured-area .register-now ul li img:last-child{
    margin-left: -10px;
    border: 3px solid #2e1b46;
}
.event-detail .featured-area .register-now ul li p{
    color: #c9c9c9;
}
.event-detail .featured-area .register-now ul li h3{
    font-size: 26px;
}
.event-detail .featured-area .register-now ul li p,
.event-detail .featured-area .register-now ul li h3{
    line-height: 30px;
}
.event-detail .featured-area .register-now ul li .organizers {
    margin-right: 15px;
}
.event-detail .featured-area .register-now .theme-btn{
    padding: 16px 55px;
}
.event-detail .featured-area .register-now {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.event-detail .content p {
    margin: 0 0 0;
}
.event-detail .content .social-medias {
    margin-top: 45px;
}
.event-detail .content .event-video a svg {
    width: 30px;
    height: 30px;
    fill: white;
}
.event-detail .content .event-video a{
    width: 110px;
    height: 110px;
    animation: shadow-pulse 2s infinite;
}

@keyframes shadow-pulse
{
  0% {
    box-shadow: 0 0 0 0px rgb(171 142 102 / 0%);
    -webkit-box-shadow: 0 0 0 0px rgb(171 142 102 / 0%);
    -moz-box-shadow: 0 0 0 0px rgb(171 142 102 / 0%);
    -o-box-shadow: 0 0 0 0px rgb(171 142 102 / 0%);
  }
  50% {
    box-shadow: 0 0 0 10px rgb(177 113 42);
    -webkit-box-shadow: 0 0 0 10px rgb(177 113 42 / 55%);
    -moz-box-shadow: 0 0 0 10px rgb(177 113 42 / 55%);
    -o-box-shadow: 0 0 0 10px rgb(177 113 42 / 55%);
    }
    100% {
    box-shadow: 0 0 0 0px rgb(181 34 34 / 0%);
    -webkit-box-shadow: 0 0 0 10px rgb(181 34 34 / 0%);
    -moz-box-shadow: 0 0 0 10px rgb(181 34 34 / 0%);
    -o-box-shadow: 0 0 0 10px rgb(181 34 34 / 0%);
    }

}
@keyframes shadow-pulse-big
{
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 70px rgb(40 253 240 / 20%);
    -webkit-box-shadow: 0 0 0 70px rgb(40 253 240 / 20%);
    -moz-box-shadow: 0 0 0 70px rgb(40 253 240 / 20%);
    -o-box-shadow: 0 0 0 70px rgb(40 253 240 / 20%);
  }
}
.event-detail .content .event-video {
    margin: 40px 0;
}
.event-detail .content .event-img-list {
    margin: 30px 0 30px;
}
.event-detail .content .event-p-list {
    margin-left: 35px;
}
/* Event Detail End */

/* Sermon Detail Start */
.sermon-detail .sermon-meta ul.sermon-icons li a{
    width: 75px;
    height: 75px;
}
.sermon-detail .sermon-meta ul.sermon-icons li a svg{
    width: 25px;
    height: 25px;
    fill: white;
}
.sermon-detail .sermon-meta ul.sermon-icons li{
    margin-right: 5px;
}
.sermon-detail .sermon-meta ul.meta{
    margin-bottom: 0;
}
.sermon-detail .sermon-featured-img {
    margin-top: 35px;
}
.sermon-detail .sermon-img {
    flex-basis: 100%;
}
.sermon-detail .sermon-media {
    height: 515px;
}
.sermon-detail .audio-playerstyle2 {
    bottom: 85%;
}
/* Sermon Detail End */

/* Blog Detail Start */
.blog-detail .blog-meta h2{
    font-size: 35px;
    line-height: 45px;
    color: #333;
}
.blog-detail ul.blog-author li img {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    border: 3px solid #fff;
    box-shadow: 2px 2px 7px 2px rgb(0 0 0 / 17%);
    -webkit-box-shadow: 2px 2px 7px 2px rgb(0 0 0 / 17%);
    -moz-box-shadow: 2px 3px 45px 0px rgba(0,0,0,0.33);
    margin: 0;
}
.blog-detail ul.blog-author li,
.blog-detail ul.blog-author li a{
    font-size: 16px;
    line-height: 26px;
    color: #666;
    margin-right: 10px;
}
.content p img{
    margin: 15px 0 0;
    max-width: 100%;
    object-fit: contain!important;
    background: #f0f0f0;
    height: 586px!important;
}
blockquote,
.author,
.comments{
    margin: 30px 0;
}
blockquote{
    display: flex;
    align-items: center;
    font-size: 26px;
    line-height: 34px;
    padding: 40px 185px 40px 40px;
    color: #fff;
    font-weight: bold;
}
blockquote svg{
    fill: white;
    width: 32px;
    height: 32px;
}
blockquote span{
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: 100px;
    margin-right: 25px;
    width: 27%;
}
.tags{
    margin: 10px 0;
    margin-bottom:0;
    
}
.country-bg {
    background: #d7a11a;
    padding-bottom: 15px;
}
.tags,
.tags ul,
.author,
ul.author-s-medias{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    gap: 10px;
    flex-wrap: wrap;
}
.tags ul li span.light-bg {
    padding: 8px 16px;
    font-size: 12px;
    line-height: 18px;
    color: #2e2e2e;
    font-weight: 400;
}

.tags ul li{
    margin-right: 0;
}
/* .tags span{
    font-size: 20px;
    line-height: 30px;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 30px;
} */
.author ul.author-s-medias li a svg{
    fill: white;
    width: 14px;
    height: 14px;
}
.author ul.author-s-medias li a{
    width: 45px;
    height: 45px;
}
.author ul.author-s-medias li{
    margin-right: 3px;
}
.author .author-meta {
    padding: 40px 40px 25px;
}
.author ul.author-s-medias {
    margin-top: 15px;
}
.author .author-meta p{
    color: #dedede;
    line-height: 28px;
    font-size: 16px;
}
.author .author-meta h3 {
    color: #fff;
    margin-bottom: 5px;
}
.author .author-meta h3 span {
    color: #b1b1b1;
    font-size: 16px;
    line-height: 30px;
    margin-left: 5px;
}
.author{
    display: inline-flex;
}
.comments h3,
.new-reply h3{
    font-size: 1.75rem;
  line-height: 42px;
  color: #222;
}
.comments .comment{
    margin-top: 0;
    min-height: 184px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    background: #fff;
    border-radius: 12px;
  
}
.comments .comment-data{
    padding: 12px;
}
.comments .comment-data h4{
    font-size: 26px;
    line-height: 28px;
    color: #323232;
}
.comments .comment-data h4 span{
    font-size: 16px;
    line-height: 24px;
    margin-left: 10px;
}
.comments .comment-data p {
    line-height: 24px;
    font-size: 16px;
    margin-top: 12px;
}
.comments .comment-data > a {
    padding: 6px 20px;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    font-size: 16px;
    position: absolute;
    top: 28px;
    right: -1px;
    text-transform: uppercase;
}
.comments .reply.comment {
    margin-left: 50px;
}
.comments .new-reply{
    margin-top: 100px;
}
.new-reply form input {
    height: 70px;
    border-radius: 100px;
    margin-bottom: 20px;
    padding: 30px;
    font-size: 16px;
}
.new-reply form input::placeholder{
    color: #555;
    font-family: 'Karla', sans-serif;
}
.new-reply form textarea{
    height: 190px;
    border-radius: 30px;
    padding: 30px;
    font-family: 'Karla', sans-serif;
}
.new-reply form textarea::placeholder{
    font-family: 'Karla', sans-serif;
    font-size: 16px;
}
.new-reply form input,
.new-reply form textarea{
    border: 1px solid #e0e0e0;
    font-family: 'Karla', sans-serif;
}
.new-reply form input:focus,
.new-reply form textarea:focus{
    outline: 0;
}
.new-reply form{
    margin-top: 25px;
}
.new-reply form button{
    margin-top: 20px;
}
.new-reply form button.theme-btn{
    padding: 16px 43px;
    cursor: pointer;
}
/* .blog-sidebar .widget{
    padding: 30px;
    position: relative;
    margin-bottom: 40px;
}
.blog-sidebar .widget h3{
    font-size: 26px !important;
    line-height: 36px;
    color: #333;
    margin-bottom: 20px;
}
.blog-sidebar .widget,
.blog-sidebar .widget:before{
    border: 1px solid #e0e0e0;
}
.blog-sidebar .widget:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 7px;
    right: -7px;
    z-index: -1;
}
.widget-recent-articles ul li img {
    width: 110px;
    height: 110px;
    margin-right: 10px;
}
.widget-recent-articles .post-date {
    font-size: 16px;
    padding: 1px 11px;
    text-transform: uppercase;
}
.widget-recent-articles a {
    font-size: 19px;
    line-height: 24px;
    color: #333;
    margin-top: 5px;
}
.widget-recent-articles ul li:not(:last-child){
    margin-bottom: 20px;
}
.widget-categories ul li a{
    font-size: 16px;
    color: #444;
    flex: 1;
}
.widget-categories ul li span{
    width: 30px;
    height: 30px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.widget-categories ul li {
    padding-left: 25px;
    padding-right: 10px;
    height: 58px;
    border-radius: 100px;
    position: relative;
    z-index: 0;
    overflow: hidden;
}
.widget-categories ul li:before {
    background-color: rgb(171 142 102 / 40%);
}
.widget-categories ul li:not(:last-child){
    margin-bottom: 3px;
}
.widget-popular-posts a {
    font-size: 20px;
    line-height: 23px;
    color: #3e3e3e;
    width: 80%;
    margin-top: 13px;
    display: inherit;
    margin-bottom: 5px;
}
.widget-popular-posts .blog-meta li {
    font-size: 16px;
    font-weight: 500;
    color: #666;
    position: relative;
}
.widget-popular-posts .blog-meta li:first-child,
.widget-trending-videos > ul > li > ul.blog-meta li:first-child{
    margin-right: 20px;
}
.widget-popular-posts .blog-meta li:first-child:before,
.widget-trending-videos > ul > li > ul.blog-meta li:first-child:before{
    content: "-";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    color: #666;
    right: -14px;
}
.widget-popular-posts > ul > li:not(:last-child),
.widget-trending-videos > ul > li:not(:last-child){
    margin-bottom: 30px;
}
.widget-trending-videos a.video-btn{
    width: 42px;
    height: 42px;
    position: absolute;
    bottom: 10px;
    left: 10px;
}
.widget-trending-videos a.video-btn svg{
    width: 12px;
    height: 12px;
    fill: #fff;
}
.widget-trending-videos > ul > li figure{
    position: relative;
}
.widget-trending-videos > ul > li > a{
    font-size: 22px;
    line-height: 26px;
    color: #333;
    margin-top: 13px;
    display: inherit;
    margin-bottom: 5px;
}
.widget-trending-videos > ul > li > ul.blog-meta li{
    font-size: 16px;
    position: relative;
}
.widget-instagram-photos ul {
    display: flex;
    flex-wrap: wrap;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: 20px;
    justify-content: center;
}
.widget-instagram-photos ul li {
    width: 47%;
    margin: 5px;
}
.widget-instagram-photos ul li figure img{
    width: 100%;
} */




 /* Custom CSS Variables for easy themeing */
:root {
    /* Deep, executive background */
    --background-dark: #1e1e1e; 
    /* Gold/Amber accent color */
    --accent-color-gold: #FFC300; 
    /* Slightly lighter dark background for hover/active */
    --hover-bg-dark: #2a2a2a; 
    /* Light grey/white for primary text */
    --text-color-light: #f5f5f5;
    /* Soft border color */
    --border-color-soft: rgba(255, 255, 255, 0.1); 
}

/* Sidebar Widget - Luxury/Executive Base */
.blog-sidebar .widget {
    padding: 25px; 
    /* Deep charcoal background */
    background: #2e5390; 
    border: 1px solid var(--border-color-soft);
    border-radius: 12px; 
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

/* Remove old structural styling remnants */
.blog-sidebar .widget:before,
.blog-sidebar .widget-categories ul li:before {
    content: none !important; 
    background-color: transparent !important;
}

.blog-sidebar .widget h3 {
    font-size: 22px !important; 
    color: var(--text-color-light); /* White heading */
    margin-bottom: 15px; 
    font-weight: 700; /* Bolder heading */
    /* Subtle gold line separator */
    border-bottom: 1px solid var(--border-color-soft); 
    padding-bottom: 10px;
}

/* Quick Links List */
.blog-sidebar .widget-categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-sidebar .widget-categories ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    height: auto; 
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: rgba(255,255,255,.04);
    margin-bottom: 8px;
}

/* Hover effect: Elegant background change and text glow */
.blog-sidebar .widget-categories ul li:hover {
    background-color: #fff; 
    padding-left: 15px;
}

/* Active State - Prominent Gold Accent */
.blog-sidebar .widget-categories ul li.active-link {
    /* background-color: var(--hover-bg-dark); */
    background-color: #fff;
    border-left: 5px solid var(--accent-color-gold); 
    box-shadow: inset 0 0 5px rgba(255, 195, 0, 0.2); 
    padding-left: 10px; 
    
}

.blog-sidebar .widget-categories ul li.active-link .link-text {
    color: #202020;
    font-weight: 600;
}

.blog-sidebar .widget-categories ul li.active-link .link-icon {
    /* Subtle glow on the active icon */
    background-color: var(--accent-color-gold); 
}


/* Link Text */
.widget-categories ul li a.link-text {
    font-size: 16px; 
    color: var(--text-color-light);
    flex: 1;
    font-weight: 400;
    text-decoration: none;
    padding-right: 15px;
    transition: color 0.3s;
    width: calc(100% - 30px); 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.blog-sidebar .widget-categories ul li:hover .link-text {
    color: #2e5390;
    text-shadow: 0 0 5px rgba(10, 112, 160, 0.3);
}


/* Arrow Icon */
.widget-categories ul li span.link-icon {
    width: 24px; /* Slightly larger icon for presence */
    height: 24px; 
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--border-color-soft); 
    color: var(--text-color-light);
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Arrow Icon Hover Effect */
.blog-sidebar .widget-categories ul li:hover .link-icon {
    /* Icon turns gold on hover */
    background-color: var(--accent-color-gold); 
    color: var(--background-dark); /* Dark text on gold background */
    transform: translateX(4px); /* Subtle arrow movement for visual feedback */
}



/* Blog Detail End */


/* Circle Slider Start */
.c-slider p {
    line-height: 30px;
    color: #292929;
    width: 79%;
    margin-top: 20px;
}
.c-slider ul li h3 {
    font-size: 26px;
    margin-bottom: 2px;
    margin-top: 20px;
}
.c-slider ul li{
    font-size: 16px;
}
.c-slider ul li,
.c-slider ul li h3{
    line-height: 27px;
    color: #111;
}
.c-slider ul li span{
    margin-left: 5px;
    text-decoration: underline;
}
.nav-c-slider {
    position: relative;
    border: 3px solid #e5e5e5;
    border-radius: 100%;
    min-height: 480px;
    margin-left: 120px;
}
.nav-c-slider:before {
    content: "";
    width: 250px;
    height: 500px;
    background-color: white;
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 0;
}
.nav-c-slider a img{
    width: 80px;
    height: 80px;
    border-radius: 100px;
    border: 3px solid #fff;
    box-shadow: rgb(0 0 0 / 17%) 3px 6px 7px 0px;
    -webkit-box-shadow: rgb(0 0 0 / 17%) 3px 6px 7px 0px;
    -moz-box-shadow: rgb(0 0 0 / 17%) 3px 6px 7px 0px;
}
.nav-c-slider a img,
.slider-main-img img{
    object-fit: cover;
}
.nav-c-slider a{
    position: absolute;
}
.nav-c-slider a:nth-child(1) {
    top: 3%;
    left: 11%;
}
.nav-c-slider a:nth-child(2) {
    top: 26%;
    left: -6%;
}
.nav-c-slider a:nth-child(3) {
    top: 59%;
    left: -5%;
}
.nav-c-slider a:nth-child(4) {
    top: 82%;
    left: 14%;
}
.slider-main-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.slider-main-img img {
    width: 280px;
    height: 280px;
    border-radius: 100%;
}
a.next-slide:before,
a.next-slide.nav-active:before {
    content: "";
    width: 80px;
    height: 80px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    border-radius: 100px;
    z-index: 1;
}
.next-slide:hover:before,
a.next-slide.nav-active:hover:before,
a.next-slide.nav-active:before{
    visibility: visible;
    opacity: 0.8;
}
a.next-slide.nav-active {
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
}
/* Circle Slider End */

.mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 50px 40px 15px;
    z-index: 5;
    transition: 0.45s ease-in-out;
    transform: translateX(-101%);
    -webkit-transform: translateX(-101%);
    -moz-transform: translateX(-101%);
    -o-transform: translateX(-101%);
    overflow-y: auto;
    box-sizing: border-box; /* Add this */
    overflow-x: hidden; /* Add this to prevent horizontal scroll */
}
.mobile-nav.open {
    /* transform: translateY(0); */
    transform: translateX(0); /* Changed from translateY(0) */
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
}
.mobile-nav ul li a svg {
    width: 11px;
}

#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 13px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 25px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 35px;
  left: 8px;
}
#nav-icon4 {
  width: 40px;
  height: 25px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  display: none;
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.cart-popup {
    position: absolute;
    right: 130px;
    top: 78px;
    width: 340px;
    background-color: #fff;
    padding: 25px 25px 20px;
    transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -o-transform: translateY(50px);
    opacity: 0;
    visibility: hidden;
    box-shadow: 2px 3px 35px 0px rgb(0 0 0 / 10%);
    -webkit-box-shadow: 2px 3px 35px 0px rgb(0 0 0 / 10%);
}
.cart-popup:before {
    content: "";
    width: 41%;
    height: 5px;
    position: absolute;
    left: 59.2%;
    top: -5px;
}
.show-cart{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
}
.cart-popup img {
    width: 75px;
}
.cart-popup .p-img {
    padding: 10px 5px;
}
.cart-popup .p-data h3 {
    font-size: 20px;
    color: #191919;
    margin-bottom: 5px;
}
.cart-popup .p-data {
    padding-left: 15px;
}
.cart-popup .p-data p {
    line-height: 25px;
}
.cart-popup ul li {
    margin-bottom: 10px;
}
.cart-popup ul li a:before {
    content: "";
    width: 25px;
    height: 25px;
    background-image: url('../images/remove.svg');
    background-repeat: no-repeat;
    position: absolute;
    top: -5px;
    left: -10px;
}
.cart-popup .cart-total {
    background-color: #eee;
    padding: 15px;
    margin-bottom: 10px;
}
.cart-popup .cart-total span {
    font-size: 18px;
    line-height: 25px;
    color: #222;
}
.cart-popup .cart-btns a {
    font-size: 16px;
    line-height: 25px;
    color: #222;
    text-transform: uppercase;
}
.cart-popup .cart-btns a.checkout{
    color: white;
}
.cart-popup .cart-btns a {
    font-size: 16px;
    line-height: 25px;
    color: #222;
    text-transform: uppercase;
    width: 50%;
    text-align: center;
    padding: 10px;
    border: 2px solid #909090;   
}
.cart-popup .cart-btns a:not(:last-child){
    margin-right: 8px;
}
.cart-popup .cart-btns a:hover{
    color: white;
}
.mobile-nav > ul > li.menu-item-has-children:before {
    content: "";
    background-image: url(../images/down-arrow.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: 20px;
    right: 0;
    width: 10px;
    height: 10px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.mobile-nav > ul > li.menu-item-has-children.active:before {
    background-image: url(../images/down-arrow-clr.svg);
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.mobile-nav > ul > li {
    position: relative;
    border-bottom: 1px solid #d4d4d4;
    padding: 10px 0;
}
.mobile-nav > ul li > a {
    font-size: 17px;
    color: #333;
    line-height: 26px;
    position: relative;
}
.mobile-nav > ul > li > a {
    font-size: 20px;
    line-height: 30px;
    color: #000;
}
/* .mobile-nav > ul  li.menu-item-has-children  ul.sub-menu {
    padding-left: 25px;
    padding-top: 10px;
    padding-bottom: 5px;
    position: absolute;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(15px);
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -o-transform: translateX(15px);
    border-top: 1px solid #d4d4d4;
    margin-top: 8px;
}
.mobile-nav > ul  li.menu-item-has-children.active > ul.sub-menu{
    position: relative;
    height: auto;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -o-transform: translateX(0);
    transition-delay: 0.1s;
}
.mobile-nav > ul  li.menu-item-has-children.active  ul.sub-menu li {
    padding: 5px 0;
    position: relative;
}
.mobile-nav > ul  li.menu-item-has-children.active  ul.sub-menu li a:before {
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: -13px;
} */

/* Submenu hidden state */
.mobile-nav > ul li.menu-item-has-children ul.sub-menu {
    padding-left: 25px;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    border-top: 1px solid transparent;
    margin-top: 0;
    transition: all 0.3s ease;
}

/* Submenu visible state */
.mobile-nav > ul li.menu-item-has-children.active > ul.sub-menu {
    position: relative;
    height: auto;
    padding-top: 10px;
    padding-bottom: 5px;
    opacity: 1;
    visibility: visible;
    border-top-color: #d4d4d4;
    margin-top: 8px;
}

/* Keep your existing submenu item styles */
.mobile-nav > ul li.menu-item-has-children.active ul.sub-menu li {
    padding: 5px 0;
    position: relative;
}

.mobile-nav > ul li.menu-item-has-children.active ul.sub-menu li a:before {
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: -13px;
}

/* Make menu items position relative for arrow overlay */
.mobile-nav li.menu-item-has-children {
    position: relative;
}

/* Make sure the link doesn't take full width */
.mobile-nav li.menu-item-has-children > a {
    display: inline-block;
    max-width: calc(100% - 50px);
    padding-right: 10px;
}

/* Arrow rotation - closed state (pointing right) */
.mobile-nav > ul > li.menu-item-has-children::before {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transition: transform 0.3s ease;
    pointer-events: none;
}

/* Arrow rotation - open state (pointing down) */
.mobile-nav > ul > li.menu-item-has-children.open::before {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

/* Nested menu arrows */
.mobile-nav li.menu-item-has-children::before {
    transition: transform 0.3s ease;
    pointer-events: none;
}

.mobile-nav li.menu-item-has-children.open::before {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}
.res-log {
    margin-bottom: 30px;
}
.mobile-nav .donation {
    display: flex;
    align-items: center;
    margin: 25px 0;
}
.mobile-nav .donation a:first-child{
    margin-right: 40px;
}
.mobile-nav .donation a.theme-btn{
    padding: 10px 30px;
}
.mobile-nav .donation a.cart{
    position: relative;
}
.mobile-nav .donation a.cart:before {
    content: "1";
    color: white;
    width: 25px;
    height: 25px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    top: -7px;
    right: -19px;
    z-index: 1;
    font-size: 13px;
}
.res-rights p{
    color: #d6d6d6;
    font-weight: bold;
    letter-spacing: 5px;
    margin-top: 30px;
}
.mobile-nav a#res-cross:before {
    content: "";
    width: 35px;
    height: 35px;
    background-image: url('../images/remove.svg');
    background-repeat: no-repeat;
    position: absolute;
    top: 15px;
    right: 20px;
}


/* Audio Start */
#myProgress {
  width: 100%;
  background-image: url('../images/audio-p-bar.webp');
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  border-radius: 10px;
  height: 30px;
}

#myBar {
  width: 0%;
  height: 30px;
  border-radius: 10px;
  background-image: url('../images/audio-p-bar-clr.webp');
  background-repeat: no-repeat;
  background-size: cover;
}

.logo {
  fill: red;
}

.btn-action{
  cursor: pointer;
}

.btn-ctn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.infos-ctn{
   display: flex;
  align-items: center;
  justify-content: space-between;
}
.infos-ctn{margin: 20px;}

.btn-ctn > div {
 width: auto;
}
.first-btn{
  margin-left: 3px;
}

.duration{
  margin-left: 10px;
}

.audio-player .title{
  margin-left: 10px;
  width: 210px;
  text-align: center;
  display: none;
}

.player-ctn{
  width: 100%;
  margin-bottom: 60px;
  padding: 0;
}

.playlist-track-ctn{
  display: flex;
  background-color: #fbf9f7;
  margin-top: 2px;
  cursor: pointer;
  align-items: center;
  padding: 15px 20px;
}
.playlist-track-ctn > div{margin-right: 22px;}
.playlist-info-track{
  width: 80%;
}
.playlist-info-track,.playlist-duration{
  padding-top: 7px;
  padding-bottom: 7px;
  color: #111;
  font-size: 22px;
  line-height: 26px;
  pointer-events: none;
  font-weight: 500;
}
.playlist-ctn{
   margin-top: 20px;
}
.active-track{
  color: #ffc266 !important;
  font-weight: bold;
}

.infos-ctn > div,
.audio-playerstyle2 .audio-p-bar .timer, .audio-playerstyle2 .audio-p-bar .duration{
  font-size: 16px;
  line-height: 28px;
  color: white;
  font-weight: bold;
}
.playlist-btn-play{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 100px;
}
.playlist-btn-play i {
    color: #909090;
    font-size: 13px;
}
.playlist-track-ctn.active-track .playlist-btn-play i {
    color: white;
}
.fas{
  color: #222;
}
.audio-run {
    padding: 67px 10px 10px;
    position: relative;
}
#btn-faws-play-pause i {
    font-size: 40px;
    color: white;
}
#btn-faws-play-pause {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    position: relative;
}
.next-prev,
.btn-mute {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 100px;
}
.next-prev{
  width: 55px !important;
  height: 55px;
  margin-right: -10px;
  margin-left: -10px;
}
.next-prev i{
  font-size: 18px;
  color: #000;
}
.btn-mute i {
    font-size: 15px;
    color: #333;
}
.btn-mute {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px !important;
    height: 40px;
    cursor: pointer;
}
#btn-faws-back,#btn-faws-next {
    display: inherit;
}
.audio-playerstyle2 {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 9;
    opacity: 1;
}
.audio-playerstyle2 .playlist-ctn{
  display: none;
}
.audio-playerstyle2 #myProgress{
  background-color: #ffffff50;
  background-image: unset;
  height: 8px;
  border-radius: 0;
}
.audio-playerstyle2 #myProgress #myBar{height: 8px;}
.audio-playerstyle2 #btn-faws-play-pause {
  width: 80px;
  height: 80px;
}
.audio-playerstyle2 #btn-faws-play-pause i{
  font-size: 23px;
}
.audio-playerstyle2 .next-prev {
    width: 40px !important;
    height: 40px;
    margin-right: -5px;
    margin-left: -5px;
}
.audio-playerstyle2 .player-ctn {
    margin-bottom: 0;
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
}
.audio-playerstyle2 .title {
    display: block;
    font-size: 22px;
    line-height: 26px;
    font-weight: 500;
    width: 100%;
    margin-left: 0;
}
.audio-playerstyle2 .infos-ctn {
    margin: 0;
    width: 35%;
}
.audio-playerstyle2 .audio-p-bar {
    width: 31%;
    display: flex;
    align-items: center;
}
.audio-playerstyle2 .duration {
    margin-left: 14px;
}
.audio-playerstyle2 .timer {
    margin-right: 14px;
}
.audio-playerstyle2  .btn-mute {
    width: 65px !important;
    height: 40px;
    cursor: pointer;
    margin-left: 60px;
    flex-basis: 23%;
    position: relative;
    top: 0;
    right: 0;
}
/* Audio End */
.donation-model .modal-body,
.donation-model .modal-header{
    padding: 0;
}
.donation-model .donation-data {
    padding: 0px 50px 50px 50px;
}
.donation-model .modal-header{
    padding: 10px 20px;
    border:  0;
}
.donation-model .modal-header .modal-title{
    display: none;
}
.donation-model .donation-data h2 {
    font-size: 33px;
    line-height: 43px;
}
.donation-model .donation-data .donation-form{
    width: 100%;
}
.donation-model {
    height: 100vh;
    margin:  auto;
}
.donation-model .donation-data p {
    width: 100%;
    margin-top: 10px;
}
.donation-model .donation-form .theme-btn {
    padding: 18px 45px;
}
.donation-model .modal-header .btn-close {
    padding: 30px;
}

/* Product Detail Start */
ul.pd-imgs li a {
    width: 130px;
    height: 130px;
    display: flex;
}
ul.pd-imgs li a img {
    width: 100%;
    object-fit: cover;
}
ul.pd-imgs li:not(:last-child) a {
    margin-bottom: 20px;
}
.pd-gallery {
    display: flex;
}
ul.pd-imgs {
    margin-right: 20px;
}
.pd-main-img {
    width: 420px;
    height: 560px;
    object-fit: cover;
    display: inline-flex;
    overflow: hidden;
}
.pd-data > span {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1.5px;
}
.pd-data h2 {
    font-size: 40px;
    line-height: 50px;
}
.pd-data{
    width: 75%;
}
ul.pd-price li.pd-sale-price, 
ul.pd-price li.pd-sale-price span {
    font-size: 32px;
    color: #222;
    font-weight: bold;
}
ul.pd-price li.pd-regular-price,
ul.pd-price li.pd-regular-price span{
    font-size: 20px;
    color: #222;
    font-weight: 500;
}
ul.pd-price{
    display: flex;
    align-items: center;
    margin-top: 6px;
}
ul.pd-price li:not(:last-child){
    margin-right: 7px;
}
.pd-ratings {
    display: flex;
    align-items: center;
}
.pd-stars {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}
.pd-ratings span {
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    color: #363636;
    text-transform: uppercase;
    font-weight: bold;
}
.pd-stars p {
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    padding: 0px 12px;
    line-height: 23px;
}
.pd-colors span,
.pd span {
    font-weight: bold;
    font-size: 18px;
    color: #222;
    text-transform: capitalize;
}
.pd-colors,
.pd ul {
    display: flex;
    align-items: center;
}
.pd ul {
    margin-left: 35px;
}
.pd{
    margin-top: 30px;
}
.pd-colors ul li {
    border-radius: 100px;
    position: relative;
}
.pd-colors ul li input{
    width: 35px;
    height: 35px;
    border-radius: 100px;
    position: relative;
    display: flex;
    z-index: 9;
    cursor: pointer;
}
.styled-checkbox {
  position: absolute;
  opacity: 0;
}
.styled-checkbox + label {
  position: absolute;
  cursor: pointer;
  padding: 0;
  top: 0;
  left: 0;
  border-radius: 100px;
}
.styled-checkbox + label:before {
  content: "";
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
}
.styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.styled-checkbox:checked + label:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url('../images/check-mark.svg');
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.pd-colors ul li:not(:last-child){
    margin-right: 12px;
}
.pd-colors ul li a {
    width: 100%;
    display: flex;
    height: 100%;
}
.bg-red{
    background-color: red;
}
.bg-green{
    background-color: green;
}
.bg-blue{
    background-color: blue;
}
.pd-colors ul li a:focus {
    border: 2px solid;
    transition: unset;
    position: absolute;
    width: 130%;
    height: 130%;
    left: -5px;
    top: -5px;
    border-radius: 100px;
}
.pd-edition {
    display: flex;
    align-items: center;
}
.pd-edition ul {
    display: flex;
}
.pd-edition ul li a {
    padding: 11px 24px;
    border: 2px solid #d8d8d8;
    font-size: 16px;
    font-weight: bold;
    color: #666;
}
.pd-edition ul li {
    margin-right: 10px;
}
.pd-cat-tags > ul > li span {
    font-size: 18px;
    padding: 2px 5px;
    margin-right: 17px;
}
.pd-cat-tags ul li {
    text-transform: uppercase;
    display: flex;
    width: 100%;
    align-items: center;
}
.pd-cat-tags > ul > li:not(:last-child){
    margin-bottom: 10px;
}
.pd-cat-tags ul li ul.pd-cat,
.pd-cat-tags ul li ul.pd-tag  {
    display: flex;
    width: 100%;
}
.pd-cat-tags ul li ul.pd-cat li,
.pd-cat-tags ul li ul.pd-tag li {
    width: auto;
    margin-right: 7px;
    position: relative;
    font-size: 16px;
    font-weight: bold;
}
.pd-cat-tags ul li ul.pd-cat li a,
.pd-cat-tags ul li ul.pd-tag li a {
    color: #222;
}
.pd-cat-tags ul li ul.pd-cat li:not(:last-child):after,
.pd-cat-tags ul li ul.pd-tag li:not(:last-child):after {
    content: ",";
}
.pd-cat-tags {
    margin-top: 30px;
    position: relative;
}
.pd-content h3 {
    font-size: 40px;
    line-height: 50px;
    color: #222;
    margin-bottom: 25px;
}
.pd-content p {
    margin: 15px 0;
}
.pd-content {
    margin-top: 90px;
}
.pd-content ul.pd-tabs li a {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    position: relative;
}
.pd-content ul.pd-tabs li a:before {
    content: "";
    width: 10%;
    height: 8px;
    position: absolute;
    bottom: -12px;
    left: 0;
    opacity: 0;
    visibility: hidden;
}
.pd-content ul.pd-tabs li a:hover:before {
    width: 100%;
    opacity: 1;
    visibility: visible;
}
.pd-content ul.pd-tabs {
    display: flex;
    margin-bottom: 50px;
}
.pd-content ul.pd-tabs li {
    padding: 0 35px;
    position: relative;
}
.pd-content ul.pd-tabs li:not(:first-child):before {
    content: "";
    width: 2px;
    height: 10px;
    background: #ddd;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.pd-content ul.pd-tabs li:first-child {
    padding-left: 0;
}
.pd-content .recommended-data {
    display: flex;
    flex-wrap: wrap;
}
.pd-content .recommended-data  .left-side {
    padding-top: 80px;
}
.pd-content .recommended-data  .rd-img,
.pd-content .recommended-data  .left-side{
    width: 50%;
}
.pd-content .recommended-data .left-side p {
    width: 79%;
}
.pd-content ul.pd-list li {
    font-size: 18px;
    line-height: 33px;
    color: #666;
    position: relative;
}
.pd-content ul.pd-list li:before {
    content: "";
    background-image: url(../images/arrow-right.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* -webkit-transform: translateY(-50%); */
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    left: -30px;
    width: 10px;
    height: 10px;
}
.pd-content ul.pd-list {
    padding-left: 30px;
}
.writter-review {
    position: relative;
    padding: 75px 35px 75px 85px;
    margin-top: 50px;
    margin-bottom: 60px;
}
.writter-review .review {
    width: 64%;
    margin-left: auto;
}
.writter-review .review h2 {
    font-size: 40px;
}
.writter-review .review span {
    font-size: 18px;
    line-height: 28px;
}
.writter-review .review p {
    font-size: 26px;
    line-height: 36px;
    color: #dedede;
}
.specs-features h4 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 15px;
}
.pd-content .specs-features ul.pd-list li:before{
    background-image: url(../images/tick.png);
    width: 20px;
    height: 20px;
}
.pd-content .specs-features ul.pd-list li{
    line-height: 38px;
}
.specs-features {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 5px solid;
}
.specs-features > div {
    padding: 40px 65px;
    width: 50%;
}
.specs-features table {
    margin-bottom: 0;
}
.specs-features table tr {
    border: 0;
}
.specs-features table tr td {
    border: 0;
    color: white;
    font-size: 18px;
    padding: 10px 30px;
    font-weight: 500;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
   opacity: 1;
}
.specs-features table tr:nth-child(odd) {
    background: #ffffff1a;
}
.specs-features table tr:nth-child(even) {
    padding: 10px 30px;
}
.specs-features .specs h4 {
    margin-left: 20px;
}
.clients-reviews {
    margin-top: 60px;
}
.clients-reviews .review {
    display: flex;
    align-items: center;
    background: #fafafa;
    padding: 40px 65px;
    margin-bottom: 10px;
}
.clients-reviews .reviewer-image {
    width: 30%;
    position: relative;
}
.clients-reviews .review-data {
    margin-left: 40px;
}
.clients-reviews .review-data {
    margin-left: 40px;
}
.clients-reviews .review-data h5 {
    font-size: 30px;
    color: #333;
    font-weight: bold;
}
.clients-reviews .review-data p {
    margin-top: 8px;
}
.clients-reviews .review-data h3 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    line-height: 34px;
    margin-bottom: 0;
    margin-right: 13px;
}
.clients-reviews .reviewer-bio {
    display: flex;
    align-items: center;
}
.clients-reviews .reviewer-bio span {
    font-size: 16px;
    line-height: 25px;
    font-weight: bold;
}
.reviewer-image .ratings {
    padding: 7px 0;
    position: absolute;
    width: 95%;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}
.reviewer-image .ratings div.star.colored:before {
    background-image: url('../images/star-colored-white.svg');
}
.reviews-slider ul.slick-dots{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 10px;
}
.reviews-slider ul.slick-dots li button {
    width: 10px;
    height: 10px;
    display: inline-flex;
    color: transparent;
    border: 0;
    margin-right: 4px;
    border-radius: 100%;
    background-color: #e0e0e0;
}
.reviews-slider ul.slick-dots li {
    display: flex;
    align-items: center;
}
.reviews-slider ul.slick-dots li.slick-active button {
    border: 4px solid;
    width: 17px;
    height: 17px;
    background-color: white;
}
.post-review {
    margin-top: 35px;
    display: flex;
    flex-wrap: wrap;
}
.post-review h3{
    width: 100%;
}
.post-review .select-ratings{
    display: flex;
    width: 100%;
}
.post-review .select-ratings span {
    font-size: 16px;
    font-weight: bold;
    color: #535353;
    margin-right: 15px;
}
.post-review .review-form{
    width: 65%;
}
.post-review .total-ratings{
    width: 35%;
}
.post-review .review-form form input {
    height: 65px;
    border-radius: 100px;
    padding: 25px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #c9c9c9;
    margin-bottom: 2px;
}
.post-review .review-form form textarea {
    height: 145px;
    width: 100%;
    border-radius: 35px;
    border: 1px solid #c9c9c9;
    padding: 25px;
}
.post-review .review-form form input:focus{
    box-shadow: unset;
}
.post-review .review-form form input::placeholder,
.post-review .review-form form textarea::placeholder{
    color: black;
}
.post-review .review-form form input:focus::placeholder,
.post-review .review-form form textarea:focus::placeholder{
    color: #aaa;
}
.post-review .review-form form textarea:focus-visible{
    border: 1px solid;
    outline: 0;
}
.post-review .review-form form {
    margin-top: 25px;
}
.total-ratings .ratings div.star:before,
.total-ratings .ratings div {
    width: 35px;
    height: 35px;
}
.total-ratings > div {
    background-color: #2e1b46;
    padding: 45px 50px 32px;
    margin-left: 30px;
}
.total-ratings > div .ratings {
    justify-content: start;
    margin-bottom: 8px;
}
.total-ratings > div span {
    font-size: 20px;
    font-weight: 500;
    width: 100%;
    display: inline-flex;
}
.total-ratings > div span.global-ratings{
    margin-top: 20px;
}
.total-ratings > div .ratings-onebyone p {
    font-size: 22px;
    font-weight: 500;
}
.total-ratings > div .ratings-onebyone {
    margin-top: 30px;
}
.total-ratings > div .ratings-onebyone ul li {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
}
.total-ratings > div .ratings-onebyone ul li span {
    color: #d2d2d2;
    font-size: 18px;
    font-weight: bold;
    width: 60px;
    margin-right: 18px;
}
.total-ratings > div .ratings-onebyone .ratings div.star:before,
.total-ratings > div .ratings-onebyone .ratings div {
    width: 15px;
    height: 15px;
}
.total-ratings > div .ratings-onebyone .ratings{
    margin-bottom: 0;
    margin-right: 5px;
}
.total-ratings > div .ratings-onebyone .ratings div.star.colored:before {
    background-image: url('../images/star-colored-yellow.svg');
}
.total-ratings > div .ratings-onebyone .ratings div.star:before,
.total-ratings .ratings div.star:before,
.select-ratings .ratings div.star:before {
    background-image: url('../images/star-grey.svg');
}
.total-ratings > div .ratings div.star.colored:before,
.select-ratings .ratings div.star.colored:before {
    background-image: url('../images/star-colored.svg');
}
.pd-cart-heart .heart svg {
    width: 25px;
    height: 22px;
}
.pd-cart-heart .heart {
    width: 50px;
    height: 50px;
    border: 1px solid #d3d3d3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
}
.pd-cart-heart input {
    width: 25%;
    height: 56px;
    border: 2px solid #d8d8d8;
    padding: 20px;
}
.pd-cart-heart .theme-btn {
    width: 42%;
    border-radius: 0;
    justify-content: center;
}
.pd-cart-heart .theme-btn,
.pd-cart-heart input{
    margin-right: 25px;
}
.pd-cart-heart{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 40px;
}
/* Product Detail End */

/* Donation Page Start */
.donation-page .bg-grey{
    background-color: #fafafa;
    padding: 75px 0;
}
.donation-page span.heading{
    font-size: 20px;
    line-height: 22px;
    font-weight: 500;
    color: #222;
    margin-bottom: 20px;
    display: flex;
}
.donation-type select {
    height: 75px;
    border-radius: 0;
    color: white;
    padding: 0 40px;
    font-size: 18px;
    font-weight: 500;
    border: 0;
}
.donation-type .form-select:focus {
    outline: 0;
    box-shadow: unset;
    border-color: transparent;
}
.donation-type{
    margin-bottom: 30px;
}
.select-amount.donation-form ul li:last-child {
    width: 52%;
}
.select-amount.donation-form ul li:last-child a {
    width: 100%;
}
.select-amount.donation-form ul {
    width: 100%;
}
.select-amount.donation-form {
    width: 100%;
    margin-top: 0;
}
.select-amount.donation-form ul li{
    margin-top: 0;
    margin-bottom: 20px;
}
.select-amount.donation-form ul li:last-child{
    margin-right: 0;
}
.donation-type .select_box{
  position: relative;
}
.donation-type .select_box:after{
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;
  position: absolute;
  top: 50%;
  right: 15px;
  content: "";
  z-index: 98;
  transform: translateY(-50%);
 }
 .select-amount.donation-form .custom-donation-amount span {
    width: 7%;
}
.select-amount.donation-form .custom-donation-amount input {
    width: 93%;
}
.payment-method{
    margin-top: 35px;
}
.payment-method .dp-form {
    display: flex;
    flex-wrap: wrap;
}
.payment-method .dp-form .dp-input {
    margin-right: 25px;
}
.payment-method .dp-form .dp-input label {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    margin-left: 7px;
}
.payment-method .form-check-input:focus{
    box-shadow: unset;
}
.personal-info input,
.personal-info select {
    height: 60px;
    border: 1px solid #b8b8b8;
    border-radius: 0;
    padding: 0 25px;
    margin-bottom: 10px;
}
.personal-info label {
    font-size: 15px;
    line-height: 30px;
    color: #666;
}
.personal-info input:focus,
.personal-info select:focus{
    box-shadow: unset;
}
.personal-info .form-box{
    padding: 40px;
    background-color: white;
    margin-top: 40px;
}
.donation-page form input::placeholder{
    color: #999;
}
.personal-info .form-box h3 {
    font-size: 26px;
    line-height: 30px;
    color: #222;
    font-weight: bold;
    margin-bottom: 10px;
}
.personal-info .dp-agree label {
    font-size: 16px;
    color: #666;
    margin-left: 15px;
}
.personal-info .dp-agree {
    align-items: center;
    display: flex;
    margin-top: 25px;
}
.personal-info .dp-agree input {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 0;
    margin: 0;
}
.start-donation form button.theme-btn {
    padding: 28px 90px;
    margin-top: 30px;
}
.total-donation-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding-left: 40px;
    margin-top: 15px;
}
.total-donation-amount h2 {
    font-size: 22px;
    color: #222;
    font-weight: bold;
}
.total-donation-amount .total_amount input {
    margin-bottom: 0;
    font-size: 22px;
    font-weight: bold;
    border: 2px solid;
    width: 240px;
    text-align: right;
    height: 72px;
}
.payment-method.pay-through .dp-form {
    flex-wrap: wrap;
    margin: 0;
}
.payment-method.pay-through .dp-form .dp-input {
    width: 100%;
    align-items: center;
    display: flex;
    margin-bottom: 15px;
    margin-right: 0;
}
.payment-method.pay-through .dp-form .dp-input input {
    padding: 0;
    width: 17px;
    height: 17px;
    margin: 0 10px 0 0; 
}
.payment-method.pay-through .dp-form .dp-input label {
    font-size: 14px;
    line-height: 24px;
    color: #333;
    margin-left: 0;
}
.payment-method.pay-through .dp-form .dp-input img{
    width: 40px;
    margin-right: 5px;
}
.product.light-bg {
   margin-bottom: 0px;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: 1px solid #f3f4f6;
  padding: 0;
  border-radius: 12px;
}



/* New code start */
.logo-section {
  display: flex;
  align-items: center;
  gap: 15px;
}
.logo-item {
  height: 55px;
  display: flex;
  align-items: center;
}

.logo-item img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.logo-divider {
  width: 1px;
  height: 45px;
  background: linear-gradient(to bottom, transparent, #ddd, transparent);
}
.nav-section {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: flex-end;
}
.search-box {
  position: relative;
}
.search-box input {
  padding: 10px 40px 10px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 25px;
  width: 240px;
  font-size: 14px;
  transition: all 0.3s;
}

.search-box button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: #2a5298;
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}
.main-header {
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.header-content {
  padding: 8px 30px;
}
/* Each slide wrapper */
.hero-one-slider > div {
  position: relative;
}
.hero-one-slider::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
    inset: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
	pointer-events: none;
	z-index: 0;
    transform: scale(1.01);
}

/* The text container */
.hero-data {
  position: absolute;
  top: 50%;
  left: 5%; /* or use 50% with transform to center */
  transform: translateY(-50%);
  opacity: 0;
  z-index: 5; /* ✅ higher than overlay */
  padding-top: 8rem !important;
  width: calc(100% - 3.6%);
}
.hero-one-slider, 
.hero-slide, 
.slick-list, 
.slick-track {
  height: 100% !important;
}

.hero-one-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; 
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .hero-one {
    height: 50vh;
  }
  
  .hero-one-slider img {
    /* If you absolutely cannot afford to lose any edges on mobile, 
       uncomment the next line, but it may leave empty space on the sides */
    /* object-fit: contain; */
  }
}






.about-one {
	position: relative;
	overflow: hidden;
}

.about-one::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(74, 144, 226, 0.1) 0%, transparent 70%);
	border-radius: 50%;
	z-index: 0;
}

.about-one .container {
	position: relative;
	z-index: 1;
}

.about-data {
	margin-bottom: 40px;
    width: 100%;
}

.about-data h2 {
	font-size: 38px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 24px;
	color: #1a1a1a;
	position: relative;
	padding-bottom: 20px;
}


.about-data p {
	font-size: 16px;
	line-height: 1.8;
	color: #272727;
	margin-bottom: 15px;
    width: 100%;
    text-align: justify;
    hyphens: auto;
}

.theme-btn {
	display: inline-block;
	padding: 8px 26px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 50px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.theme-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: #4f6ea1;
	transition: left 0.4s ease;
	z-index: -1;
    opacity: 1;
    display: none;
}

.theme-btn:hover::before {
	left: 0;
}

.theme-btn:hover {
	transform: translateY(-2px);
	/* box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4); */
	color: #fff;
}

.about-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.about-gallery figure {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	transition: all 0.4s ease;
	margin: 0;
}

.about-gallery figure:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.about-gallery figure img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.about-gallery figure:hover img:first-child {
	transform: scale(1.1);
}

.about-gallery figure a {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.95);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.about-gallery figure:hover a {
	opacity: 1;
}

.about-gallery figure a img {
	width: 20px;
	height: 20px;
}

.prayers-slider1 {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
	position: relative;
	transition: all 0.4s ease;
}

.prayers-slider1:hover {
	transform: translateY(-10px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

.prayers-slider1::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(74, 144, 226, 0.15) 0%, transparent 100%);
	z-index: 1;
	pointer-events: none;
}

.prayers-slider1 img {
	transition: transform 0.6s ease;
}

.prayers-slider1:hover img {
	transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 991px) {
	.about-data h2 {
		font-size: 36px;
	}
	
	.prayers-slider1 {
		margin-top: 40px;
	}
}

@media (max-width: 767px) {
	.about-data h2 {
		font-size: 30px;
	}
	
	.about-gallery {
		grid-template-columns: 1fr;
	}
}
.blog-meta figure {
    height: 250px;
    padding: 10px;
    border-bottom: 2px solid #f0b41d;
    background-color: rgba(240, 180, 29, 0.04);
}
.blog-meta figure img {
    height: 100%;
    object-fit: cover;
}
.footer-rights {
    display:flex;
    align-items: center;
    gap: 10px;
}

.banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
   /* background: linear-gradient( 90deg, rgba(44, 82, 140, 0.95) 0%, rgba(44, 82, 140, 0.85) 20%, rgba(44, 82, 140, 0.6) 40%, rgba(44, 82, 140, 0.35) 60%, rgba(44, 82, 140, 0.15) 75%, rgba(44, 82, 140, 0.05) 85%, rgba(44, 82, 140, 0) 100% );*/
  z-index: 0; 
}
.banner-data {
  position: relative;
  /* z-index: 1;
  padding-left: 7.6rem; */

  top: 90px;
  background: linear-gradient( 90deg, rgb(44, 82, 140) 0%, rgb(44, 82, 140) 20%, rgb(44, 82, 140) 40%, rgb(44, 82, 140) 60%, rgb(44, 82, 140) 75%, rgb(44, 82, 140) 85%, rgb(44, 82, 140) 100% );
  z-index: 0;
  width: fit-content;
  margin-left: 7.5rem;
  padding: 2px 15px 4px;
}

.subpage-main-title {
    margin-bottom: 2rem;

}
.top-bar.socila_ul {
    background: unset;
    border-bottom: unset;
}
.top-bar.socila_ul li i.fa-facebook-f {
    background-color: #1877F2;
    color: #fff;
    padding: 3px;
  width: 23px;
  height: 23px;
  border-radius: 2px;
}
.top-bar.socila_ul li i.fa-linkedin-in {
    background-color: #1877F2;
    color: #fff;
    padding: 3px;
  width: 23px;
  height: 23px;
  border-radius: 2px;
}
.top-bar.socila_ul li i.fa-instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #fff;
    padding: 3px;
  width: 23px;
  height: 23px;
  border-radius: 2px;
}
.top-bar.socila_ul li i.fa-youtube {
    background-color: #ff0000;
    color: #fff;
    padding: 3px;
    width: 24px;
    height: 23px;
    border-radius: 2px;
}
.middle-right-div-flex {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
}
.icon_div {
    background: #4f6ea1;
    padding: 10px;
    margin-right: 10px;
    border-radius: 8px;
}
.btn-flex-end {
    display: flex;
    justify-content: flex-end;
}


/* --- Custom CSS for Attractive Section --- */

.blog-meta {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); 
    transition: all 0.3s ease-in-out;
    border: 1px solid #f4f4f4;
}

/* Hover Effect for the entire card */
.blog-meta.card-hover-effect:hover {
    transform: translateY(-5px); /* Lift effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* Image styling */
.blog-meta figure {
    /* Ensure the figure has a visible boundary */
}

/* Image zoom on hover */
.blog-meta.card-hover-effect:hover img {
    transform: scale(1.05);
    transition: transform 0.4s ease-in-out;
}

/* Date Badge/Flag Overlay */
.date-badge {
    position: absolute;
    top: 0;
    background-color: #f0b41d;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 10;
    right: 0px;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 6px;

}

/* Title link on hover */
.blog-title-link:hover {
    color: var(--primary-color, #007bff) !important; /* Change color on hover for feedback */
}

/* Ensure images fit nicely */
.blog-meta img {
    height: 250px; /* Standardize image height for uniformity */
    object-fit: cover;
}


/* .project-filters {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e4e9f2;
    animation: fadeIn 0.6s ease;
}

.project-filters .filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
}

.project-filters label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #334155;
}

.project-filters select {
    padding: 12px 14px;
    background: white;
    border: 1.5px solid #cfd8e6;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: 0.25s ease;
    cursor: pointer;
    outline: none;
}

.project-filters select:hover,
.project-filters select:focus {
    border-color: #4678c9;
    box-shadow: 0 0 0 3px rgba(70, 120, 201, 0.15);
} */

/* --- Global Variables (Optional but recommended for consistency) --- */
:root {
    --primary-color: #3b82f6; /* A nice blue for focus/hover */
    --text-color-dark: #1f2937;
    --text-color-medium: #4b5563;
    --background-light: #f9fafb; /* Lighter background */
    --border-color-light: #e5e7eb;
    --shadow-subtle: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* --- Project Filters Container --- */
.project-filter-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 40px;
    padding: 10px;
    border-radius: 16px;
    background: var(--background-light);
    border: 1px solid var(--border-color-light);
    animation: fadeIn 0.6s ease;
    flex-direction: column;
}
.project-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
  justify-content: flex-start;
  flex-wrap: wrap; /* Changed from nowrap to wrap */
  animation: fadeIn 0.6s ease;
  flex: 1;
  width: 100%; /* Ensures it takes full width */
}
.filter-item.buttons {
    min-height: 40px;
    flex: 0 0 auto;
    display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* --- Individual Filter Item --- */
/* .project-filters .filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 170px;
} */

.project-filters .filter-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
  flex: 1 1 200px; /* Allow items to grow and shrink with base width */
  max-width: 250px;
}

/* --- Label Styling (Header/Title) --- */
.project-filters label {
    font-weight: 700; /* Bolder font weight */
    font-size: 0.9rem; /* Slightly larger font size */
    color: var(--text-color-medium); /* Deeper, more readable text color */
    /* Added a subtle text shadow/spacing for emphasis */
    letter-spacing: 0.5px;
}

/* --- Select Dropdown Styling --- */
.project-filters select {
    appearance: none;
    -webkit-appearance: none;
    padding: 8px 20px;
    background: white;
    border: 1px solid var(--border-color-light);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-color-dark);
    transition: all 0.3s ease;
    cursor: pointer;
    outline: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234b5563"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
}

/* --- Select Hover and Focus Effects --- */
.project-filters select:hover {
    border-color: var(--border-color-light) !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); */
}

.project-filters select:focus {
    border-color: var(--border-color-light) !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
    transform: translateY(-1px); /* Subtle lift on focus */
}

/* --- Option Styling (If needed for better clarity) --- */
.project-filters select option {
    padding: 10px;
}

        .project_container .projects-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            animation: fadeInUp 1s ease;
        }

        @media (max-width: 768px) {
  .project-filter-container {
    padding: 15px;
  }
  
  .project-filters {
    gap: 15px;
  }
  
  .project-filters .filter-item {
    min-width: 100%;
    flex: 1 1 100%; /* Full width on mobile */
  }
  
  .filter-item.buttons {
    width: 100%;
    min-height: auto;
  }
  
  .filter-item .btn-group {
    display: flex;
    gap: 10px;
    width: 100%;
  }
  
  .filter-item .btn-group button,
  .filter-item .btn-group a {
    flex: 1;
  }
}

@media (max-width: 480px) {
  .project-filter-container {
    gap: 10px;
    padding: 12px;
  }
  
  .project-filters {
    gap: 10px;
  }
}


        @media (max-width: 768px) {
            .project_container .projects-grid {
                grid-template-columns: 1fr;
            }
        }

        .project_container .project-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); */
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            animation: scaleIn 0.5s ease;
        }

        .project_container .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .project_container .project-image {
            position: relative;
            height: 200px;
            overflow: hidden;
        }

        .project_container .project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
            border-radius: 8px;
        }

        .project_container .project-card:hover .project-image img {
            transform: scale(1.1);
        }

        .project_container .project-badge {
            position: absolute;
            background: #f0b232;
            color: #222;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            bottom: 0;
            right: 0;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .project_container .project-content {
            padding: 8px 0 0;
        }

        .project_container .project-meta {
            display: flex;
            gap: 20px;
            margin-bottom: 10px;
            flex-wrap: wrap;
            background: #4f6ea1;
            padding: 2px 8px;
            min-height: 40px;
        }

        .project_container .meta-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #ffffffff;
            font-size: 0.9rem;
        }

        .project_container .meta-item i {
            color: #335798;
            display: none;
        }
        .project_container .meta-item span {
            font-weight: 600;
            text-transform: uppercase;
            line-height: 18px;
            font-size: 13px;
        }
        .project_container .meta-item strong {
            color: #fff;
        }

        .project_container .project-title {
            font-size: 1.5rem;
            color: #333;
            margin-bottom: 8px;
            font-weight: 600;
            line-height: 28px;
            height: 70px;
            overflow: hidden;
        }

        .project_container .project-title a {
            color: inherit;
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: 18px;
            line-height: 22px;
            margin-top: 0;
        }

        .project_container .project-title a:hover {
            color: #335798;
        }

        .project_container .project-description {
            color: #272727;
            line-height: 22px;
            margin-bottom: 15px;
        }

        .project_container .project-location {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 15px;
            background: #f8f9ff;
            border-radius: 10px;
            border-left: 4px solid #335798;
        }

        .project_container .project-location i {
            color: #335798;
            margin-top: 3px;
        }

        .project_container .project-location span {
            color: #666;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .project_container .project-footer {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 8px;
  padding-top: 8px;
            border-top: 1px solid #eee;
        }

        .project_container .duration-badge {
            display: flex;
  align-items: center;
  gap: 8px;
  color: #9a9a9a;
  font-weight: 500;
  font-size: 0.9rem;
        }

        .project_container .view-details-btn {
            padding: 6px 10px;
            background: #4f6ea1;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            font-size: 12px;
            line-height: 18px;
        }

        .project_container .view-details-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .project_container .no-results {
            text-align: center;
            color: white;
            font-size: 1.2rem;
            padding: 60px 20px;
        }
        .footer-one {
            background-color: #2c528c;
        }

        /* Tab Button */
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 12px 10px;
            border: 2px solid #dfe6ef;
            border-radius: 12px;
            font-weight: 600;
            background: white;
            color: #2c528c;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .tab-item:hover {
            background: #e6eef9;
            border-color: #2c528c;
        }

        /* Active Tab */
        .tab-item.active {
            background: #e8f0ff;
            border-color: #2c528c;
            color: #2c528c;
            box-shadow: 0 0 6px rgba(0,0,0,0.15);
        }

        /* Content Wrapper Card */
        .tab-content-card {
            background: #fff;
            border: 1px solid #e3e3e3;
            border-radius: 12px;
            padding: 30px;
            min-height: 160px;
            margin-top: 15px;
        }

        /* By default hide */
        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Responsive: Mobile Accordion */
        @media (max-width: 768px) {
            .tab-item {
                width: 100%;
                margin-bottom: 8px;
            }

            .tab-content-card {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
                display: none;
            }

            .tab-content-card.active {
                display: block;
            }
        }

        /* Grid Layout */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
}
@media (min-width: 768px) {
  .pillar-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .pillar-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
} /* Pillar Card */
.pillar-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
}
.pillar-card:hover {
  transform: translateY(-5px);
  border-color: #1e40af;
  box-shadow: 0 14px 26px rgba(30, 64, 175, 0.15);
}
.pillar-card-header {
  display: flex;
  align-items: flex-start;
}
.pillar-icon {
  font-size: 30px;
  padding: 10px;
  background: #f1b332;
  color: #222;
  border-radius: 50%;
  margin-right: 12px;
  box-shadow: 0 3px 6px rgba(241, 179, 50, 0.15);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillar-title {
  font-size: 20px !important;
  font-weight: 600;
  color: #111827;
  margin-top: 5px;
  flex: 1;
}
.pillar-desc {
  margin-top: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.project-section {
            background: #fafafa;
            padding: 30px;
            margin-bottom: 40px;
            border-radius: 12px;
        }

        /* SECTION TOP BAR */
        .project-top {
            display: flex;
            justify-content: space-between;
            padding-bottom: 12px;
            border-bottom: 2px solid rgba(0, 0, 0, 0.08);
            margin-bottom: 25px;
        }

        .ongoing-section {
            border-top: 4px solid #efb131;
        }

        .completed-section {
            border-top: 4px solid #41b31e;
            background: rgba(65, 179, 30, 0.04);
        }

        .project-title {
            font-size: 26px;
            display: flex;
            font-weight: 700;
            align-items: flex-start;
        }

        .status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .ongoing-color {
            color: #efb131;
        }

        .completed-color {
            color: #41b31e;
        }

        .ongoing-bg {
            background: #efb131;
        }

        .completed-bg {
            background: #41b31e;
        }

        /* GRID */
        .project-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        @media(min-width: 900px) {
            .project-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        /* PROJECT CARD */
        .project-card {
            background: #fff;
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
            transition: 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .project-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
        }

        .project-icon {
            font-size: 32px;
            margin-right: 15px;
        }

        .project-card-header {
            display: flex;
            align-items: flex-end;
            margin-bottom: 10px;
        }

        .project-card h4 {
            font-size: 18px;
            font-weight: 700;
        }

        .project-card a {
            margin-top: auto;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            transition: 0.2s ease;
            display: inline-flex;
            align-items: center;
        }

        .project-card a:hover {
            text-decoration: none;
        }

        .featured-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            margin-bottom: 40px;
            flex-direction: column;
        }

        .featured-img {
            /* flex: 1 1 45%; */
            background-color: #e5e7eb;
            height: 220px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            font-weight: 600;
        }

        .featured-content {
            flex: 1 1 45%;
            display: flex;
            flex-direction: column;
        }

        .badge {
            display: inline-block;
            background: #f2f2f2;
            color: #1a1a1a;
            font-size: 12px;
            font-weight: 700;
            padding: 6px 14px;
            border-radius: 4px;
            margin-bottom: 10px;
            text-transform: uppercase;
            width: fit-content;
        }

        .featured-content h3 {
            font-size: 20px !important;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
        }

        .featured-content time {
            font-size: 14px;
            color: #6b7280;
            font-weight: 500;
        }

        .featured-content p {
            color: #272727;
            margin-top: 10px;
            line-height: 1.6;
        }

        .btn-primary {
            background: #4f6ea1;
            color: #fff;
            padding: 12px 22px;
            border-radius: 12px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            margin-top: 20px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: 0.2s;
            text-decoration: none;
            width: fit-content;
            padding: 8px 26px;
            border-radius: 50px;
            font-size: 14px;
        }

        .btn-primary:hover {
            background: #db2539;
        }

        /* Recent Story List */
        .story-list {
            background: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        }

        .story-item {
            padding: 24px;
            border-bottom: 1px solid #e5e7eb;
            transition: 0.2s;
        }

        .story-item:last-child {
            border-bottom: none;
        }

        .story-item:hover {
            background: #f3f4f6;
        }

        .story-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 14px;
        }

        .story-content {
            flex: 1 1 70%;
        }

        .story-meta {
            flex: 1 1 25%;
            text-align: right;
        }

        .tag {
            display: inline-block;
            font-size: 11px;
            padding: 6px 12px;
            border-radius: 50px;
            margin-bottom: 8px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .tag-indigo {
            background: #e0e7ff;
            color: #4338ca;
        }

        .tag-pink {
            background: #fce7f3;
            color: #be185d;
        }

        .story-content h3 {
            font-size: 18px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 8px;
        }

        .story-content p {
            font-size: 14px;
            color: #6b7280;
        }

        .story-meta p {
            font-size: 13px;
            color: #9ca3af;
            margin-bottom: 6px;
        }

        .story-meta a {
            color: #ef4444;
            font-weight: 600;
            text-decoration: none;
            transition: 0.2s;
        }

        .story-meta a:hover {
            color: #d83434;
        }

        /* Responsive */
        @media(max-width: 768px) {
            .featured-card {
                flex-direction: column;
                margin-bottom: 20px;
            }

            .story-row {
                flex-direction: column;
                text-align: left;
            }

            .story-meta {
                text-align: left;
            }
        }
.impact-stories-section .featured-card .featured-img img {
    width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 20%;
  border-radius: 12px;
}
.sub-page-section-title {
    font-size: 2.2rem;
  color: #222;
  font-weight: bold;
}
.event-meta .icon_div i {
    color: #fff;
}


--- GALLERY FLOW CONTAINER ---
        /* --- GALLERY FLOW CONTAINER --- */
.gallery-flow {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Space between activities */
}

/* --- INDIVIDUAL ACTIVITY CARD (The Core Component) --- */
.activity-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
    margin-bottom: 10px;
}

.activity-item:hover {
    /* Use Primary Blue for the hover shadow */
    box-shadow: 0 8px 25px rgba(34, 65, 139, 0.2); 
}

/* Vertical Accent Bar (Modern Touch) */
.activity-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: #22418b; 
    transition: width 0.3s ease;
}

.activity-item:hover::before {
    width: 10px;
}


/* --- LEFT SIDE: LARGE VISUAL NUMBER --- */
.visual-marker {
    flex: 0 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 10px;
}

.item-number {
    font-size: 5em;
    font-weight: 900;
    /* Accent color from the custom property */
    color: var(--accent-color, #22418b); 
    opacity: 1;
    line-height: 1;
    margin-bottom: 5px;
}

.item-icon {
    font-size: 2em;
    /* Accent color from the custom property */
    color: var(--accent-color, #22418b); 
    margin-top: -15px;
    /* Pull icon up over the number */
    opacity: 0.8;
}

/* --- RIGHT SIDE: CONTENT DETAILS --- */
.content-details {
    flex: 1;
    padding-left: 10px;
    border-left: 1px solid #f0b41f;
    /* Subtle separator */
}

.content-details h3 {
    font-size: 22px !important;
    color: #1a1a1a;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 500;
}

.content-details p {
    font-size: 16px;
  line-height: 22px;
  color: #272727;
    margin-bottom: 15px;
}

/* --- STAGGERED LAYOUT (Desktop Only) --- */
@media (min-width: 769px) {
    .activity-item:nth-child(odd) {
        flex-direction: row;
        /* Default: Marker on left */
    }

    .activity-item:nth-child(even) {
        flex-direction: row-reverse;
        /* Stagger: Marker on right */
        /* Adjust padding/border for reverse layout */
        padding-left: 30px;
        padding-right: 30px;
    }

    .activity-item:nth-child(even) .visual-marker {
        padding-left: 20px;
        padding-right: 0;
    }

    .activity-item:nth-child(even) .content-details {
        text-align: right;
        border-left: none;
        border-right: 1px solid #f0b41f;
        padding-left: 0;
        padding-right: 10px;
    }

    .activity-item:nth-child(even)::before {
        left: auto;
        right: 0;
    }
}

/* --- MOBILE FRIENDLINESS (Single Column, Centered) --- */
@media (max-width: 768px) {
    .activity-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .visual-marker {
        flex: none;
        padding: 0 0 10px 0;
    }

    .content-details {
        padding-left: 0;
        border-left: none;
        padding-top: 15px;
        border-top: 1px solid #eeeeee;
        text-align: left;
    }

    .activity-item:hover::before {
        width: 4px;
        /* Keep bar thin on mobile */
    }
}
.activity-item i {
    color: #f1b332;
}
.activities-section {
    margin-bottom: 40px;
}

/* --- Section & Header Styling --- */
        

        .results-section h2 {
            text-align: center;
            font-size: 2.5em;
            color: #1a1a1a;
            margin-bottom: 50px;
            font-weight: 900;
        }

        /* --- LIST CONTAINER: CONVERTED TO GRID --- */
        .focus-list {
            /* Desktop/Large Screen: 3 Columns */
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 20px; /* Space between items/cells */
        }
        
        /* Tablet Screen: 2 Columns */
        @media (max-width: 1000px) {
            .focus-list {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Mobile Screen: 1 Column */
        @media (max-width: 600px) {
            .focus-list {
                grid-template-columns: 1fr; /* Stack vertically */
                gap: 30px; 
            }
        }


        /* --- INDIVIDUAL ITEM (The Grid Cell) --- */
        .focus-item {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            background-color: #ffffff;
            border-top: 5px solid #f1b332;
            padding: 25px;
            border-radius: 6px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
            height: 100%;
            box-sizing: border-box; 
            text-align: center;
            justify-content: center;
            position:relative;
        }

        .focus-item:hover {
            box-shadow: 0 8px 25px rgba(34, 65, 139, 0.15);
            transform: translateY(-2px);
        }

        /* --- NUMBER MARKER --- */
        .item-number {
            flex-shrink: 0;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            background-color: #22418b;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2em;
            font-weight: 700;
            margin-bottom: 0;
            margin: 0 auto;
            margin-bottom: 0;
        }

        /* --- CONTENT BLOCK --- */
        .item-content {
            flex-grow: 1; /* Allows content to push text below */
            width: 100%;
        }

        .item-content h3 {
            font-size: 22px !important;
            font-weight: 600;
            color: #1a1a1a;
            margin: 0 0 10px 0;
            line-height: 1.3;
        }

        .item-content p {
            font-size: 16px;
            line-height: 22px;
            color: #272727;
        }

        /* --- Mobile Adjustments (Re-centering elements when stacked) --- */
        @media (max-width: 600px) {
            .focus-item {
                align-items: center;
                text-align: center;
            }
        }


.news_section .filter-section {
            background: white;
            padding: 30px;
            border-radius: 12px;
            margin-bottom: 40px;
            box-shadow: var(--shadow-subtle);
            border: 2px solid var(--light-grey);
            /* Added light border */
            animation: fadeInUp 0.8s ease 0.2s both;
        }

        .news_section .filter-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            color: var(--primary-blue);
            /* Updated color */
        }

        .news_section .filter-header svg {
            width: 24px;
            height: 24px;
            color: #f1b332;
        }

        .news_section .filter-header h3 {
            font-size: 1.3rem;
            font-weight: 600;
        }

        .news_section .filter-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .news_section .filter-btn {
            padding: 10px 20px;
            border: 1px solid var(--light-grey);
            background: white;
            border-radius: 50px;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.3s ease;
            color: var(--text-dark);
        }

        .news_section .filter-btn:hover {
            transform: translateY(-2px);
            border-color: var(--accent-gold);
            /* Subtle hover effect */
            background-color: #fcfcfc;
        }

        .news_section .filter-btn.active {
            background: #f1b332;
            color: white;
        }

        .news_section .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            animation: fadeIn 0.8s ease 0.4s both;
        }

        .news_section .news-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow-card);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            animation: scaleIn 0.5s ease both;
            border: 1px solid var(--light-grey);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
            /* Subtle card border */
        }

        .news_section .news-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
        }

        .news_section .news-image {
            width: 100%;
            height: 240px;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .news_section .news-card:hover .news-image {
            transform: scale(1.05);
            /* Reduced scale for subtler effect */
        }

        .news_section .image-container {
            overflow: hidden;
            position: relative;
            background: var(--accent-gold);
            /* Accent color as image placeholder background */
        }

        .news_section .category-badge {
            position: absolute;
            top: 15px;
            left: 15px;
            background: white;
            padding: 6px 14px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--primary-blue);
            /* Primary blue for badge text */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }

        .news_section .news-content {
            padding: 25px;
        }

        .news_section .news-date {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #999;
            font-size: 0.9rem;
            margin-bottom: 12px;
        }

        .news_section .news-date svg {
            width: 16px;
            height: 16px;
            color: #aaa;
        }

        .news_section .news-title {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 12px;
            line-height: 1.2;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 20px !important;
                text-transform: uppercase;
        }

        .news_section .news-excerpt {
            color: var(--text-light);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 20px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .blog.news-blog .news_section .read-more {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--primary-blue);
            /* Primary blue for link */
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            border: 2px solid #4f6ea1;
            padding: 5px 10px;
            font-size: 12px !important;
            border-radius: 50px;
            text-transform: uppercase;
        }

        .news_section .read-more:hover {
            gap: 12px;
            text-decoration: none;
        }

        .news_section .read-more svg {
            width: 18px;
            height: 18px;
            display: none;
        }

        .news_section .no-results {
            text-align: center;
            padding: 80px 20px;
            color: var(--text-light);
            font-size: 1.3rem;
            border: 2px dashed var(--light-grey);
            border-radius: 12px;
            background-color: #f8f8f8;
            animation: fadeIn 0.5s ease;
        }

        /* Keyframe Animations remain the same for motion */
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

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

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.98);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @media (max-width: 768px) {
            .news_section .news-grid {
                grid-template-columns: 1fr;
            }

            .news_section .filter-buttons {
                justify-content: center;
            }

            .news_section .filter-btn {
                font-size: 0.85rem;
                padding: 8px 16px;
            }
        }

        .album-container {
            margin: 0 auto;
            position: relative;
        }

        .album-container .album-cover {
            text-align: center;
            margin-bottom: 50px;
            padding-bottom: 30px;
            border-bottom: 3px double #d4af37;
        }

        

        .album-container .album-subtitle {
            color: #666;
            font-size: 1.1rem;
            font-style: italic;
            letter-spacing: 1px;
        }

        .album-container .tabs-container {
            display: flex;
            justify-content: center;
            gap: 0;
            margin-bottom: 50px;
            border: 2px solid #d4af37;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            top: 3rem;
        }

        .album-container .tab-btn {
            padding: 15px 35px;
            border: none;
            background: white;
            color: #666;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .album-container .tab-btn:not(:last-child) {
            border-right: 2px solid #d4af37;
        }

        .album-container .tab-btn:hover {
            background: #fafaf8;
        }

        .album-container .tab-btn.active {
            background: #d4af37;
            color: white;
        }

        .album-container .photo-album {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 40px;
            padding: 0px 0px 90px;
            margin-top: 6rem;
        }

        .album-container .photo-frame {
            background: white;
            padding: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            transition: all 0.4s ease;
            cursor: pointer;
            position: relative;
            animation: fadeInScale 0.5s ease;
        }

        .album-container .photo-frame::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            border: 1px solid #e0e0e0;
            pointer-events: none;
        }

        .album-container .photo-frame:hover {
            /* transform: translateY(-8px) rotate(1deg); */
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
        }

        .album-container .photo-wrapper {
            position: relative;
            overflow: hidden;
            background: #f9f9f9;
        }

        .album-container .photo-img {
            width: 100%;
            height: 280px;
            object-fit: cover;
            display: block;
            filter: sepia(10%);
            transition: all 0.4s ease;
        }

        .album-container .photo-frame:hover .photo-img {
            filter: sepia(0%);
            transform: scale(1.05);
        }

        .album-container .photo-caption {
            margin-top: 15px;
            text-align: center;
        }

        .album-container .photo-category {
            display: inline-block;
            padding: 4px 12px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            border: 1px solid;
        }

        .album-container .category-events {
            color: #8b4513;
            border-color: #8b4513;
        }

        .album-container .category-activist {
            color: #2f5f7f;
            border-color: #2f5f7f;
        }

        .album-container .category-projects {
            color: #4a7c59;
            border-color: #4a7c59;
        }

        .album-container .photo-title {
            font-size: 1.2rem;
            color: #2c2c2c;
            margin-bottom: 8px;
            font-weight: 500;
            font-family: 'Georgia', serif;
        }

        .album-container .photo-date {
            color: #999;
            font-size: 0.85rem;
            font-style: italic;
        }

        .album_section .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 1000;
            animation: fadeIn 0.3s ease;
            overflow-y: auto;
        }

        .album_section .lightbox-content {
            max-width: 1000px;
            margin: 40px auto;
            background: white;
            padding: 30px;
            box-shadow: 0 0 50px rgba(255, 255, 255, 0.1);
            position: relative;
            animation: slideUp 0.4s ease;
        }

        .album_section .lightbox-content::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border: 2px solid #e0e0e0;
            pointer-events: none;
        }

        .album_section .lightbox-img {
            width: 100%;
            height: auto;
            max-height: 600px;
            object-fit: contain;
            display: block;
            margin-bottom: 30px;
        }

        .album_section .lightbox-info {
            text-align: center;
            /* padding: 0 30px; */
            padding: 15px 30px 0;
        }

        .album_section .lightbox-title {
            font-size: 1.4rem;
            color: #2c2c2c;
            margin-bottom: 10px;
            margin-top: 10px;
        }

        .album_section .lightbox-description {
            color: #555;
            line-height: 1.8;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .album_section .close-lightbox {
            position: absolute;
            top: -15px;
            right: -15px;
            background: #2c2c2c;
            color: white;
            border: 3px solid white;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            font-size: 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .album_section .close-lightbox:hover {
            transform: rotate(90deg);
            background: #d4af37;
        }

        .album-container .corner-decoration {
            position: absolute;
            width: 40px;
            height: 40px;
            border: 2px solid #d4af37;
        }

        .album-container .corner-tl {
            top: 20px;
            left: 20px;
            border-right: none;
            border-bottom: none;
        }

        .album-container .corner-tr {
            top: 20px;
            right: 20px;
            border-left: none;
            border-bottom: none;
        }

        .album-container .corner-bl {
            bottom: 20px;
            left: 20px;
            border-right: none;
            border-top: none;
        }

        .album-container .corner-br {
            bottom: 20px;
            right: 20px;
            border-left: none;
            border-top: none;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.9);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }

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

        @media (max-width: 768px) {
            .album-container .photo-album {
                grid-template-columns: 1fr;
                gap: 30px;
                padding: 0px 0px 90px;
                margin-top: 0rem;
            }

            .album-container .tabs-container {
                flex-direction: column;
                width: 100%;
                top:0;
            }

            .album-container .tab-btn:not(:last-child) {
                border-right: none;
                border-bottom: 2px solid #d4af37;
                padding: 10px 25px;
            }

            .contact-detail-card h3 {
                font-size: 18px !important;
            }
            .icon-wrapper {
                width: 40px;
                height: 40px;
            }
            .icon-wrapper i {
                font-size: 1rem;
            }

            .album-container .corner-decoration {
                display: none;
            }
        }

.pastor-meta.light-bg .mi-profile-img img {
    object-position: center!important;
}

.pastor-meta.light-bg img {
    height: 225px;
  object-fit: cover;
  /* object-position: center; */
  object-position: 100% 56%;
}
.cont-acts .icon-div {
    background-color: #f1b332;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    display: flex;
  align-items: center;
  justify-content: center;
}
.cont-acts .icon-div i {
    color:#fff;
    font-size: 14px;
}
.pastor-meta p.designation {
    color: #3d5f95!important;
}

.project-footer .view-details-btn i {
    color: #fff;
}
.duration-badge i {
    color: #4f6ea1;
}
.yellow-border {
    height: 4px;
    background: #f0b319;
    margin-top: 0;
}

        .heading-card {
            margin-top: 40px;
        }

        .heading-content {
            display: flex;
            align-items: center;
            border-left: 4px solid #f1b332;
            padding-left: 0.6rem;
        }

        .heading-icon {
            width: 1.5rem;
            height: 1.5rem;
            margin-right: 0.6rem;
            color:#f1b332; 
            flex-shrink: 0; 
        }
        /* .heading-text {
            margin: 0;
            text-align: left;
            font-size: 1.5rem;
            font-weight: 600;
            color: #f1b332; 
            letter-spacing: 0.025em;
        } */

        .widget.widget-categories .fas {
            color: #fff;
        }
        .active-quick-links {
            background-color: #d9dbde;
        }


/* Priority sector project card start */
.prioriy-sector-project-container .project-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid #f4f4f4;
            position: relative;
        }

        .prioriy-sector-project-container .project-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
        }

        .prioriy-sector-project-container .card-header {
            padding: 15px 12px;
            border-bottom: 2px solid var(--secondary-color);
        }

        .prioriy-sector-project-container .card-title {
            font-size: 18px;
            font-weight: 600;
            line-height: 1.3;
            margin: 0;
            color: #111827;
            padding-top: 6px;
        }

        .prioriy-sector-project-container .card-body {
            padding: 15px;
            padding-bottom: 0;
        }

        /* Info Layout: Use flexbox to put Project Sites and Duration side-by-side */
        .prioriy-sector-project-container .info-layout {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
            /* Spacing below the two-column layout */
            flex-wrap: wrap;
            gap: 15px;
        }

        .prioriy-sector-project-container .info-section {
            /* Flex basis allows the sections to be next to each other on wider screens */
            flex: 1;
            min-width: 200px;
            /* Ensure space for content */
            margin-bottom: 0;
            /* Removed bottom margin from individual section */
        }

        /* Duration is small, so we'll restrict its size */
        .prioriy-sector-project-container .duration-section {
            flex: 0 0 auto;
            /* Don't grow, don't shrink */
        }
        .prioriy-sector-project-container {
            display: flex;
            flex-direction: column;
            row-gap: 20px;
        }

        .prioriy-sector-project-container .info-label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            /* Smaller label font */
            font-weight: 600;
            color: var(--text-muted);
            margin-bottom: 6px;
            /* Reduced margin */
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .prioriy-sector-project-container .icon {
            width: 14px;
            height: 14px;
            color: #db2a3c;
        }

        /* Horizontal Country Flow */
        .prioriy-sector-project-container .countries-horizontal-flow {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            /* Reduced gap */
        }

        .prioriy-sector-project-container .country-item {
            display: flex;
            align-items: center;
            gap: 4px;
            /* Reduced gap */
            padding: 5px 8px;
            /* Reduced padding */
            background: var(--background-light);
            border-radius: 4px;
            transition: all 0.2s ease;
            border: 1px solid #e5e7eb;
        }

        .prioriy-sector-project-container .country-item:hover {
            background: #f0f0f0;
            border-color: var(--primary-color);
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .prioriy-sector-project-container .flag {
            font-size: 14px;
            /* Reduced flag size */
            line-height: 1;
        }

        .prioriy-sector-project-container .country-name {
            font-size: 11px;
            /* Reduced country name font size */
            color: var(--text-dark);
            font-weight: 500;
        }

        /* Duration Box */
        .prioriy-sector-project-container .duration-box {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 6px 10px;
            border-radius: 5px;
            font-weight: 600;
            color: #003462;
            font-size: 12px;
            position: absolute;
            top: 0;
            left: 20px;
            background: #f7f7f7;
        }

        .prioriy-sector-project-container .duration-box .icon {
            color: #4f6ea1;
        }

        /* Button Styling */
        .prioriy-sector-project-container .button-container {
            margin-top: 15px;
            /* Reduced margin */
            text-align: left;
            display: flex;
            justify-content: right;
        }

        .prioriy-sector-project-container .view-button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #4f6ea1;
            color: white;
            padding: 8px 18px;
            /* Reduced padding */
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            font-size: 13px;
            /* Reduced font size */
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            border-radius: 50px;
        }

        .prioriy-sector-project-container .view-button:hover {
            background: #3c598a;
            /* Slightly darker shade of primary color on hover */
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(79, 110, 161, 0.6);
        }

        .prioriy-sector-project-container .view-button svg {
            stroke: white;
            width: 14px;
            height: 14px;
        }


        /* Mobile Adjustments */
        @media (max-width: 640px) {
            .prioriy-sector-project-container .card-title {
                font-size: 16px;
            }

            .prioriy-sector-project-container .card-header,
            .prioriy-sector-project-container .card-body {
                padding: 10px;
                /* Max reduction */
            }

            .prioriy-sector-project-container .info-layout {
                flex-direction: column;
                /* Stacked for mobile */
                gap: 10px;
            }

            .prioriy-sector-project-container .countries-horizontal-flow {
                flex-direction: row;
                justify-content: flex-start;
                gap: 10px;
            }

            .prioriy-sector-project-container .country-item {
                padding: 8px;
                height: 30px;
                flex: 1 1 calc(50% - 10px);
                text-align: center;
                align-items: center;
                justify-content: center;
            }
            .prioriy-sector-project-container .info-section {min-width:100%;}

            .prioriy-sector-project-container .button-container {
                text-align: center;
                justify-content: center;
            }
            .subpage-title-font {
                text-align: left;
            }
            .content p {
                text-align: left!important;
            }
        }




/* Priority sector project card end */
.priority-sectors-2.sectors-bg-img {
    position: relative;
    padding: 60px 20px;
    background-image: url('https://images.unsplash.com/photo-1555400038-63f5ba517a47?w=1600');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.priority-sectors-2.sectors-bg-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(16, 37, 66, 0.92) 0%, rgba(30, 60, 90, 0.88) 100%);
  z-index: 1;
}
.priority-sectors-2.sectors-bg-img > * {
  position: relative;
  z-index: 2;
}
.priority-sectors-2.sectors-bg-img h3 {
    color:#111827;
}
@media (min-width: 1200px) {
  .h3, h3 {
    font-size: 2.2rem!important;
  }
}

 
    

        .secretariat-section .profile-card {
            max-width: 380px!important;
            width: 100%;
            background: white;
            border-radius: 20px!important;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08)!important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)!important;
        }

        /* .secretariat-section .profile-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 48px rgba(34, 65, 139, 0.2);
        } */

        .secretariat-section .card-header {
            background: linear-gradient(135deg, #e8eef5 0%, #f0f4f8 100%);
            padding: 14px;
            position: relative;
            display: flex;
            align-items: center;
            gap: 16px;
            border-bottom: unset;
        }

        .secretariat-section .card-header::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 180px;
            height: 180px;
            background: radial-gradient(circle, rgba(240, 179, 25, 0.08) 0%, transparent 70%);
            border-radius: 50%;
            transform: translate(40%, -40%);
        }

        .secretariat-section .profile-image {
            width: 80px;
            height: 80px;
            border-radius: 16px;
            /* border: 2px solid #d5d5d5; */
            background: #fff;
            object-fit: cover;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            flex-shrink: 0;
            position: relative;
            z-index: 1;
            padding: 4px;
        }

        .secretariat-section .header-text {
            flex: 1;
            position: relative;
            z-index: 1;
        }

        .secretariat-section .name {
            font-size: 18px!important;
            font-weight: 600!important;
            color: #2c2c2c!important;
            margin-bottom: 4px!important;
            line-height: 1.3!important;
            letter-spacing: -0.3px!important;
            text-align: left !important;
        }

        .secretariat-section .title {
            font-size: 13px;
            font-weight: 600;
            color: #5a5a5a;
            margin-bottom: 2px;
            letter-spacing: 0.3px;
        }

        .secretariat-section .organization {
            font-size: 12px;
            color: #7a7a7a;
            font-weight: 500;
        }

        .secretariat-section .card-body {
            padding: 20px;
        }

        .secretariat-section .contact-item {
            display: flex;
            align-items: center;
            padding: 12px;
            margin-bottom: 8px;
            background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 100%);
            border-radius: 12px;
            font-size: 13px;
            transition: all 0.3s ease;
            border: 1px solid #f0f0f0;
        }

        .secretariat-section .contact-item:last-child {
            margin-bottom: 0;
        }

        .secretariat-section .contact-item:hover {
            background: linear-gradient(135deg, #f0f4f8 0%, #ffffff 100%);
            border-color: rgba(34, 65, 139, 0.1);
            transform: translateX(4px);
        }

        .secretariat-section .contact-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #6b8ab8 0%, #5a7ba6 100%);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(107, 138, 184, 0.15);
        }

        .secretariat-section .contact-icon svg {
            width: 18px;
            height: 18px;
            fill: white;
        }

        .secretariat-section .contact-content {
            flex: 1;
            min-width: 0;
        }

        .secretariat-section .contact-value {
            color: #333;
            word-break: break-word;
            font-weight: 500;
        }

        .secretariat-section .contact-value a {
            color: #5a7ba6;
            text-decoration: none;
            transition: all 0.2s;
            display: inline-block;
        }

        .secretariat-section .contact-value a:hover {
            color: #22418b;
            transform: translateX(2px);
        }

        @media (max-width: 480px) {
            .secretariat-section .profile-card {
                max-width: 100%;
                border-radius: 16px;
            }
            
            .secretariat-section .card-header {
                flex-direction: column;
                text-align: center;
                padding: 20px;
            }

            .secretariat-section .profile-image {
                width: 90px;
                height: 90px;
            }
            
            .secretariat-section .name {
                font-size: 17px;
                text-align: center !important;
            }

            .secretariat-section .contact-item {
                padding: 10px;
            }
        }

        /* Impact section start */
        #impact_section.impact-section {
            position: relative;
            min-height: 438px;
            display: flex;
            overflow: hidden;
        }

        /* Left Image Side */
        #impact_section .image-side {
            flex: 0 0 45%;
            position: relative;
            overflow: hidden;
            margin-top: 0;
        }

        #impact_section .image-side img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        #impact_section .image-side:hover img {
            transform: scale(1.05);
        }

        #impact_section .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #2E476A 0%, #FFF 100%);
            mix-blend-mode: multiply;
        }

        /* Right Content Side */
        #impact_section .content-side {
            flex: 1;
            background: linear-gradient(135deg, #163764 0%, #214C8B 100%);
            padding: 50px 80px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        #impact_section .content-side::before {
            content: "";
            position: absolute;
            top: 0;
            left: -50px;
            width: 100px;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03));
            transform: skewX(-15deg);
        }

        #impact_section .heading {
            margin-bottom: 10px;
            opacity: 0;
            animation: fadeInUp 0.8s ease forwards 0.2s;
        }

        #impact_section .heading h2 {
            color: #fff;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
            
        }
        #impact_section .impact-stories-heading h2 {
            margin-bottom: 30px !important;
        }

        #impact_section .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }

        #impact_section .stat-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 20px 25px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            opacity: 0;
            animation: fadeInUp 0.8s ease forwards;
        }

        #impact_section .stat-card:nth-child(1) { animation-delay: 0.3s; }
        #impact_section .stat-card:nth-child(2) { animation-delay: 0.4s; }
        #impact_section .stat-card:nth-child(3) { animation-delay: 0.5s; }
        #impact_section .stat-card:nth-child(4) { animation-delay: 0.6s; }

        #impact_section .stat-card::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(240, 183, 41, 0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        #impact_section .stat-card:hover {
            transform: translateY(-8px);
            background: rgba(240, 183, 41, 0.08);
            border-color: rgba(240, 183, 41, 0.3);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(240, 183, 41, 0.1);
        }

        #impact_section .stat-card:hover::before {
            opacity: 1;
        }

        #impact_section .stat-number {
            color: #f0b729;
            font-size: 2.66rem;
            font-weight: 700;
            margin-bottom: 10px;
            display: block;
            line-height: 1;
            text-shadow: 0 2px 10px rgba(222, 157, 74, 0.3);
        }

        #impact_section .stat-label {
            color: rgba(255, 255, 255, 0.9);
            font-size: 1.1rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center;
        }

        /* Animated particles */
        #impact_section .particle {
            position: absolute;
            background: rgba(240, 183, 41, 0.6);
            border-radius: 50%;
            pointer-events: none;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0) translateX(0);
                opacity: 0;
            }
            50% {
                opacity: 0.6;
            }
        }

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

        /* Counter animation */
        @keyframes countUp {
            from {
                opacity: 0;
                transform: scale(0.5);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        #impact_section .stat-card.counting .stat-number {
            animation: countUp 0.6s ease;
        }

        /* Responsive */
        @media (max-width: 992px) {
            #impact_section.impact-section {
                flex-direction: column;
                margin-top: 1rem;
            }

           #impact_section .image-side {
                flex: 0 0 200px;
            }

           #impact_section .content-side {
                padding: 50px 40px;
            }

           #impact_section .heading h2 {
                font-size: 25px;
                margin-bottom: 20px !important;
                line-height: 30px;
            }

            #impact_section .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }
            #impact_section .stat-card {
                padding: 15px;
            }
            #impact_section .stat-number {
                font-size: 1.8rem;
                margin-bottom: 4px;
            }
            .sermon-img .sermon-media {
                height: 180px;
            }
        }

        @media (max-width: 576px) {
            #impact_section .content-side {
                padding: 30px 25px;
            }

            #impact_section .stat-number {
                font-size: 1.8rem;
                margin-bottom: 4px;
            }

           #impact_section .stat-label {
                font-size: 0.95rem;
            }
        }

        /* Impact section end */

.event-meta .theme-clr {
    color: #828282;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
}

/* Project Objectives Section */
        #project-objectives {
            position: relative;
            overflow: hidden;
        }

        /* Gallery Flow - Now just a container for vertical stacking */
        #project-objectives .gallery-flow {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 0;
            border-radius: 12px;
        }

        /* Objective Entry - Main flex container for alternating layout (Replaced .activity-item) */
        #project-objectives .objective-entry {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
        }

        /* Visual Marker - Center marker for the timeline feel. */
        #project-objectives .visual-marker {
            width: 80px; /* Slightly smaller marker */
            height: 80px;
            border-radius: 50%;
            background: #4f6ea1; /* Primary blue color */
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            /* Adjusted box-shadow to be subtle on light background, using primary color */
            box-shadow: 0 0 0 6px rgba(79, 110, 161, 0.1), /* Reduced size */
                        0 0 0 12px rgba(79, 110, 161, 0.05), /* Reduced size */
                        0 8px 25px rgba(0, 0, 0, 0.1); /* Reduced size */
            transition: all 0.4s ease;
            animation: pulse-marker 3s infinite;
            display: none; 
        }

        @media (max-width: 767px) {
             #project-objectives .visual-marker {
                display: flex;
                position: relative;
                left: 0;
                transform: none;
                margin: 0 auto 1.5rem auto;
                display: none;
            }
            #project-objectives .objective-entry {
                padding: 0;
            }
        }

        @keyframes pulse-marker {
            /* Hardcoded color for pulse effect */
            0%, 100% { 
                box-shadow: 0 0 0 6px rgba(79, 110, 161, 0.1), 
                            0 0 0 12px rgba(79, 110, 161, 0.05), 
                            0 8px 25px rgba(0, 0, 0, 0.1); 
            }
            50% { 
                box-shadow: 0 0 0 10px rgba(79, 110, 161, 0.15), 
                            0 0 0 20px rgba(79, 110, 161, 0.07), 
                            0 12px 30px rgba(0, 0, 0, 0.2); 
            }
        }

        /* #project-objectives .item-number {
            font-size: 2.2rem;
            font-weight: 900;
            color: #ffffff;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            letter-spacing: -1px;
        }

        #project-objectives .content-details {
            background: #ffffff;
            padding: 0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden;
            width: 100%;
            display: flex; 
            border-radius: 8px;
        }

        #project-objectives .objective-entry:hover .content-details {
            transform: translateY(-3px);
        }
        #project-objectives .objective-image-col {
            width: 50%;
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
        }

        #project-objectives .objective-image-col::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
        }

        #project-objectives .objective-image-col img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        #project-objectives .objective-entry:hover .objective-image-col img {
            transform: scale(1.05);
        }
        #project-objectives .objective-text-col {
            width: 100%;
            padding: 1.3rem 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-radius: 8px;
        }

        #project-objectives .objective-entry:nth-child(even) .content-details {
            flex-direction: row-reverse;
        }

        #project-objectives .timeline-badge {
            display: inline-block;
            padding: 0.3rem 0.8rem;
            color: var(--bs-body-color);
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 9999px; 
            margin-bottom: 0.75rem;
            background: rgba(79, 110, 161, 0.1);
            display: none;
        } */

        #project-objectives .content-details {
  background: #ffffff;
  padding: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  width: 100%;
  display: flex;
  border-radius: 8px;
  position: relative;
}

#project-objectives .content-details::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at top right, rgba(240, 180, 31, 0.12) 0%, transparent 70%);
  pointer-events: none;
  transition: all 0.4s ease;
}

#project-objectives .content-details::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #f0b41f 0%, rgba(240, 180, 31, 0.3) 100%);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

#project-objectives .content-details:hover {
  box-shadow: 0 6px 25px rgba(240, 180, 31, 0.15);
}

#project-objectives .content-details:hover::before {
  background: radial-gradient(circle at top right, rgba(240, 180, 31, 0.2) 0%, transparent 70%);
}

.content-details {
  flex: 1;
  padding-left: 14px;
}

#project-objectives .objective-text-col {
  width: 100%;
  padding: 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}
        
        /* New Classes for specific colors */
        /* #project-objectives .timeline-badge-blue {
            background: #4f6ea1;
        }
        #project-objectives .timeline-badge-gold {
            background: #efb626;
        } */

        /* Content Text */
        #project-objectives .content-details h3 {
            font-size: 18px!important;
            font-weight: 600;
            color: #1a202c; 
            margin-bottom: 0; 
            line-height: 1.3;
            position: relative;
        }

        #project-objectives .content-details p {
            font-size: 16px; 
            line-height: 22px;
            color: #272727; 
            margin: 0;
        }

        #project-objectives .content-details p strong {
            color: #1a202c;
            font-weight: 700;
        }
        #project-objectives .objective-image-col.objective-image-col-img {
            width:20%;
            display:none;
        }

        /* Responsive Design */
        @media (max-width: 991px) {
            #project-objectives h2 {
                font-size: 2.2rem;
            }

            #project-objectives .gallery-flow {
                gap: 1rem; /* Even more compact on mobile */
            }

            #project-objectives .content-details {
                flex-direction: column; /* Stack vertically on tablet/mobile */
                min-height: auto;
            }

            /* Reset alternation on mobile */
            #project-objectives .objective-entry:nth-child(even) .content-details {
                flex-direction: column;
            }

            #project-objectives .objective-image-col,
            #project-objectives .objective-text-col {
                width: 100%;
                padding: 0;
            }
            #project-objectives .objective-image-col {
                height: 200px;
            }
            #project-objectives .objective-text-col {
                padding: 20px;
            }

            #project-objectives .content-details h3 {
                font-size: 1.4rem;
            }
            #project-objectives .content-details p {
                font-size: 16px;
            }
            #project-objectives .content-details p {line-height: 18px;}
        }

/* Objective css end */
.subpage-title-font {
    font-size: 1.5rem!important;
    margin-bottom: 1.4rem;
    color: #1a1a1a;
    font-weight: 700;
}
.countries-horizontal-flow {
    display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  justify-content: flex-start;
}
/* .result-achieved {
    position:relative;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  margin-bottom: 30px;
}
.result-achieved::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-color: #22418b;
  transition: width 0.3s ease;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
} */

.result-achieved {
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 75%, rgba(34, 65, 139, 0.08) 100%);
  border-radius: 10px;
  overflow: hidden;
}

.result-achieved::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(180deg, #22418b 0%, #f1b332 100%);
  transition: width 0.3s ease;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.result-achieved::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at bottom right, rgba(241, 179, 50, 0.15) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 10px;
}

.result-achieved:hover::after {
  background: radial-gradient(circle at bottom right, rgba(241, 179, 50, 0.25) 0%, transparent 70%);
}

.result-achieved h4 {
  position: relative;
  z-index: 1;
}

    .success-section {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 1rem;
        align-items: flex-start;
        animation: fadeInUp 0.8s ease-out;
        margin-bottom: 30px;
    }
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

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

    .content-side {
        color: #333;
        display: flex;
        flex-direction: column;
        row-gap: 4px;
    }
    .strategy-card {
        background: rgba(240, 240, 240, 0.08);
        border-radius: 12px;
        padding: 1.2rem;
        margin-bottom: 0;
        border: 1px solid rgba(161, 161, 161, 0.15);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        animation: fadeInCard 0.6s ease-out forwards;
        position: relative;
    }

    .strategy-card:nth-child(2) {
        animation-delay: 0.2s;
    }

    .strategy-card:nth-child(3) {
        animation-delay: 0.4s;
    }

    .strategy-card:nth-child(4) {
        animation-delay: 0.6s;
    }

    @keyframes fadeInCard {
        to {
            opacity: 1;
        }
    }

    .strategy-card:hover {
        transform: translateX(5px);
        background: rgba(240, 240, 240, 0.04);
    }

    

    .strategy-text {
        font-size: 16px;
        line-height: 1.5;
        color: #414141;
        margin-bottom: 0 !important;
    }

    .image-side {
        position: relative;
        min-height: 200px;
        animation: slideInRight 0.8s ease-out;
        margin-top: 20px;
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .image-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        overflow: hidden;
        transition: transform 0.5s ease;
        min-height: 200px;
    }

    .image-wrapper:hover {
        transform: scale(1.02);
    }

    .image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.9) contrast(1.1);
        object-position: 72% 100%;
        min-height: 400px;
    }

    .floating-badge {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        padding: 0.8rem 1.5rem;
        border-radius: 30px;
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    .badge-text {
        font-weight: 700;
        font-size: 0.9rem;
        background: linear-gradient(135deg, #375991 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .decorative-circle {
        display: none;
    }

    .circle-1 {
        top: -50px;
        left: -50px;
        animation: pulse 4s ease-in-out infinite;
    }

    .circle-2 {
        bottom: -80px;
        right: -80px;
        animation: pulse 4s ease-in-out infinite 2s;
    }

    @keyframes pulse {

        0%,
        100% {
            transform: scale(1);
            opacity: 0.5;
        }

        50% {
            transform: scale(1.2);
            opacity: 0.8;
        }
    }

    @media (max-width: 1024px) {
        .success-section {
            grid-template-columns: 1fr;
            padding: 3rem;
            gap: 3rem;
        }

        .image-side {
            height: 500px;
            order: -1;
        }

        .section-title {
            font-size: 2.5rem;
        }
    }

    @media (max-width: 640px) {
        .success-section {
            padding: 0;
        }

        .section-title {
            font-size: 2rem;
        }

        .strategy-card {
            padding: 1rem;
        }

        .image-side {
            height: 230px;
            /* height: 230px; */
        }
    }

    .focus-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at bottom right, rgba(241, 179, 50, 0.2) 0%, transparent 70%);
  border-radius: 6px;
  pointer-events: none;
}

.focus-item:hover::before {
  background: radial-gradient(circle at bottom right, rgba(241, 179, 50, 0.3) 0%, transparent 70%);
}
.main-logo {
    max-width: 175px;
}
.ministry_foreign_affairs {
    max-width: 220px;
}
.MI_LOGO {
    max-width:140px;
}
button.scrollTopStick {
    background-color: #d92034!important;
}
.text-secondary {
  color: #272727!important;
}
.subpage_featured_img {
    height: 380px;
    margin-bottom: 30px;
}
.subpage_featured_img img {
    width:100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    
}
.blog.news-blog .blog-meta ul li {
    background: #f2f2f2 !important;
  padding: 4px 10px;
  font-size: 14px;
  color: #1a1a1a !important;
}
.footer-one.green-overlay .theme-clr, .copy-right span {
    color:#f1b51e!important;
}
.content p {
  text-align: left;
  hyphens: auto;
  hyphenate-character: auto;
  hyphenate-limit-chars: auto;
}
.filter-item.buttons .btn-group {
    /* width: 100%!important; */
    gap: 10px;
    text-align: center;
    justify-content: center;
    margin-top: 0;
}
.project-filter-container .filter-item.buttons .btn-group .btn.btn-primary {
    margin-top: 0;
    text-align: center;
    display: flex;
    justify-content: center;
}
.project-filter-container .btn.btn-primary {
    margin-top:0!Important
}
.message-title {
    margin-left: 55px;
}

.success-section.full-width {
    grid-template-columns: 1fr !important;
}
.btn-primary.project-btn span {
    white-space: nowrap;
}
.project-btn-container {
    display: flex;
  justify-content: flex-end;
}
.project-btn-container .btn-primary.project-btn {
    margin-top: 0;
}

/* New ongoing project card start */
        /* Brand Colors */
        .brand-blue { color: #2e5390; }
        .brand-gold { background-color: #f0b51c; }
        .brand-red { background-color: #d92337; }
        /* Backgrounds & Text */
        .card-bg { background-color: #ffffff; }
        .page-bg { background-color: #f7f9fb; }
        .text-primary { color: #333333; }
        .text-secondary { color: #666666; }
        .text-on-dark { color: #f0f4f8; }

        .minimal-vertical-projects-section {
            max-width: 100%;
            margin: 0 auto;
        }

        /* --- Section Header --- */
        .section-heading-minimal {
            font-size: 1.8rem;
            font-weight: 700;
            color: #2e5390; /* brand-blue */
            margin-bottom: 25px;
            text-align: center;
        }
        .project-list-minimal-stack {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        
        .project-card-minimal {
            background-color: #ffffff;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-top: 5px solid #2e5390; 
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .project-card-minimal:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.12);
        }

        /* --- Card Title --- */
        .card-title-minimal {
            font-size: 20px;
            font-weight: 600;
            color: #1a202c;
            line-height: 1.2;
            margin-top: 0;
            margin-bottom: 0;
            text-transform: capitalize;
        }

        .info-divider {
            height: 2px;
            width: 100%;
            background-color: #2e5390;
            opacity: 0.1;
            margin: 15px 0;
        }

        .info-group-minimal {
            margin-bottom: 15px;
        }

        .info-label-minimal {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            color: #2e5390;
            margin-bottom: 5px;
        }

        .icon-minimal {
            width: 18px;
            height: 18px;
        }
        
        .info-label-minimal svg[fill="none"] {
            stroke: #2e5390; 
        }
        .info-label-minimal svg[fill="#2e5390"] {
            fill: #2e5390; 
        }

        .countries-tag-flow-minimal {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding-left: 26px;
            margin-top: 10px;
        }

        .country-tag-minimal {
            font-size: 0.75rem;
            padding: 3px 8px;
            border-radius: 4px;
            background-color: #f0f0f0;
            color: #666666; 
        }

       
        .duration-text-minimal {
            font-size: 1rem;
            font-weight: 500;
            color: #333333; 
            padding-left: 26px;
            margin: 0 !important;
        }

        
        .view-button-minimal {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 12px 0;
            margin-top: auto;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 700;
            text-transform: uppercase;
            transition: opacity 0.2s ease, transform 0.2s ease;
            border: none;
        }

        .view-button-minimal span {
            letter-spacing: 0.5px;
        }

        .gold-bg {
            background-color: #f0b51c;
            color: #333333;
        }

        .gold-bg:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .red-bg {
            background-color: #d92337;
            color: #f0f4f8; 
        }

        .red-bg:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .view-button-minimal svg {
            width: 18px;
            height: 18px;
            stroke-width: 2;
        }

        .gold-bg svg {
            stroke: #333333; 
        }

        .red-bg svg {
            stroke: #f0f4f8;
        }

        @media (max-width: 768px) {
            .project-list-minimal-stack {
                grid-template-columns: 1fr;
                gap: 25px;
            }

            .minimal-vertical-projects-section {
                padding: 15px;
            }
        }
/* New ongoing project card end */


/* New completed project card start */
.vertical-projects-section {
            max-width: 100%;
            margin: 0 auto;
        }

        .section-heading-vertical {
            font-size: 2rem;
            font-weight: 700;
            color: #2e5390;
            text-align: left;
            margin-bottom: 30px;
        }

        .project-list-vertical {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .project-card-vertical {
            display: flex;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #f4f4f4;
            transition: transform 0.3s ease;
            border: 1px solid #f3f3f3;
        }

        .project-card-vertical:hover {
            transform: scale(1.005);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
        }

        .card-content-main-vertical {
            flex: 5;
            background-color: #fcfcfc;
            padding: 10px 25px;
            color: #1c1c1c;
        }

        .card-title-vertical {
            font-weight: 600;
            margin-top: 0;
            margin-bottom: 8px;
            color: #333;
            font-size: 18px ! Important;
            line-height: 22px;
        }

        .duration-detail-vertical {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            font-weight: 500;
            color: #666666;
            opacity: 1;
            margin-top: 15px;
            min-width: 215px;
            max-width: 215px;
            width: 100%;
            text-align: right;
  justify-content: flex-end;
        }

        .icon-vertical {
            width: 18px;
            height: 18px;
            fill: #2e5390;
        }

        .countries-tag-flow-vertical {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            border-top: 1px solid #e9e9e9;
            padding-top: 0;
            justify-content: space-between;
        }

        .country-tag-vertical {
            font-size: 0.75rem;
            padding: 4px 10px;
            border-radius: 4px;
            background-color: #f0f0f0;
            color: #666666;
            font-weight: 400;
        }

        .card-accent-split {
            flex: 1;
            min-width: 150px;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            color: #1c1c1c;
            background: #fff;
            align-items: center;
            min-height: 141px;
        }
        .card-accent-split img {
            max-width: 100%;
            object-fit: cover;
            height: 100%;
            width: 100%;
        }

        .gold-accent {
            border-left: 1px solid #f0f0f0;
        }

        .red-accent {
            border-left: 1px solid #f0f0f0;
        }

        .accent-text {
            font-size: 0.8rem;
            font-weight: 500;
            color: #fff;
            margin: 0 !important;
        }

        .accent-date {
            font-size: 1.5rem;
            font-weight: 700;
            margin: 5px 0 20px 0 !important;
            line-height: 1.1;
            color: #fff;
        }

        .view-button-accent {
            display: block;
            padding: 6px 10px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
            transition: background-color 0.2s ease, transform 0.2s ease;
            border: none;
            width: fit-content;
        }

        .gold-accent .view-button-accent {
            /* color: #1c1c1c;
            background-color: #fff;
            color: #1c1c1c;
            font-size: 14px; */
            background-color: rgba(255,255,255,.2);
            color: #fff;
            font-size: 14px;
        }

        .gold-accent .view-button-accent:hover {
            background-color: #d8a015;
            transform: translateY(-1px);
        }

        .red-accent .view-button-accent {
            background-color: #d92337;
            color: #fcfcfc;
        }

        .red-accent .view-button-accent:hover {
            background-color: #b81f30;
            transform: translateY(-1px);
        }

        @media (max-width: 700px) {
            .project-card-vertical {
                flex-direction: column;
            }

            .card-accent-split {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                min-width: unset;
                padding: 15px 25px;
                border-left: none;
                border-top: 4px solid #e0e0e0;
            }

            .gold-accent,
            .red-accent {
                border-left: none;
            }

            .gold-accent {
                border-top-color: #f0b51c;
            }

            .red-accent {
                border-top-color: #d92337;
            }

            .accent-date {
                margin: 0;
                font-size: 1.2rem;
            }

            .view-button-accent {
                width: 45%;
                font-size: 0.9rem;
            }
        }

/* New completed project card end */
.countries-horizontal-flow .country-item .fi, .tags .fi {
    font-size: 14px;
}
.project-filter-container .filter-item.buttons .btn-group .btn.btn-primary, .project-filter-container .filter-item.buttons .btn-group .btn.btn-secondary {
    border-radius: 50px !important;
}
.countries-tag-flow-vertical .countries-flag-flex-box {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /* border-top: 1px solid #e9e9e9; */
    padding-top: 10px;
    align-items: center;
}
.view-all-btn{
    background: none;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    color: #4f6ea1;
}

.view-border{
    border: 1px solid #4f6ea1;
    padding: 6px 16px;
    border-radius: 8px;
}

.view-border:hover{
    background:#4f6ea1;
    color:#fff;
    border: 1px solid #4f6ea1;
}

.title-w-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.4rem;
}
.title-w-button .subpage-title-font {
    margin-bottom: 0;
}
.title-w-button.title-w-button-2 {
    justify-content: center;
    margin-top: 1.8rem;
}
.strategy-card ul {
    margin-top: 0;
}
.completed-project-btn {
    display: flex;
    justify-content: flex-end;
}
.completed-project-btn .btn-primary {
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 14px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    padding: 6px 16px;
    border-radius: 8px;
    color: #333;
}
.sermon-data h4 {
    line-height: 24px;
}
.sermon-data h4 a {
    font-size: 20px;
    line-height: 24px;
    text-transform: uppercase;
}
.news-events-h .blog-title-link {
    text-transform: uppercase;
}
#countryBarChart.small-chart {
  width: 100% !important;
  height: 230px !important;
  max-width: 100%;
  display: block;
  object-fit: contain;
}
.footer-contact i {
    margin-right: 0;
    color: #fff;
    font-size: 16px;
}
.social-icons {
    display: flex;
    align-items: center;
}
.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    margin-right: 8px;
    color: #fff;
    font-size: 18px;
}
.social-icons a img {
    max-width: 20px;
}
/* Brand colors */
.social-icons a:nth-child(1) { background-color: #1877F2; }
.social-icons a:nth-child(2) { background-color: #000000; }
.social-icons a:nth-child(3) { background-color: #0A66C2; }
.social-icons a:nth-child(4) { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-icons a:nth-child(5) {
    background-color: #ff0000;
}
.social-icons a:hover {
    opacity: 0.8;
}
.footer-one .top-bar ul.social-medias li:nth-child(1) {
    padding-left: 0;
}
.Ongoing_Projects .sector-name-home {
    background: #4f6ea1;
    margin-bottom: 0 !important;
    padding: 2px 6px !important;
    font-size: 13px !important;
    color: #fff !important;
    width: fit-content;
    border-bottom: unset;
    font-weight: 600;
}
.product .product-description a:hover {
    color: #000!important;
}
.footer-one ul.quick-links li a:hover {
    color: #fff!important;
}
.blog-meta a:hover {
    color: #4f6ea1!important;
}
.loadmore i {
    color:#fff;
    font-size: 12px;
    display:none;
}

.event-gallery-container .gallery {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 items in one row */
            gap: 25px;
        }

        .event-gallery-container .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            aspect-ratio: 1;
            background: #fff;
        }

        .event-gallery-container .gallery-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
        }

        .event-gallery-container .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }

        .event-gallery-container .gallery-item:hover img {
            transform: scale(1.1);
        }

       .event-gallery-container .gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
            padding: 20px;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }

        .event-gallery-container .gallery-item:hover .gallery-overlay {
            transform: translateY(0);
        }

        .event-gallery-container .gallery-title {
            color: white;
            font-size: 18px !important;
            font-weight: 600;
            margin: 0;
        }

        .event-gallery-container .gallery-description {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9rem;
            margin-top: 5px;
        }

        /* Custom Lightbox Styling */
        .event-gallery-container .lb-data .lb-caption {
            font-size: 1.2rem;
            font-weight: 600;
            color: #fff;
        }

        .event-gallery-container .lb-data .lb-number {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.8);
        }

        @media (max-width: 768px) {
            

            .event-gallery-container .gallery {
                grid-template-columns: repeat(2, 1fr); /* tablet */
                gap: 15px;
                padding: 10px;
            }

            .event-gallery-container .gallery-overlay {
                padding: 15px;
            }

            .event-gallery-container .gallery-title {
                font-size: 0.95rem;
            }

            .event-gallery-container .gallery-description {
                font-size: 0.8rem;
            }
        }
        @media (max-width: 576px) {
            .grid-container {
                grid-template-columns: repeat(1, 1fr); /* mobile */
            }
        }

        @media (max-width: 480px) {
            .event-gallery-container .gallery {
                grid-template-columns: repeat(1, 1fr);
            }
        }
.news-events-h {
    height: 260px;
}
.map {
    border: 1px solid #d7d7d7;
  padding: 8px;
  border-radius: 10px;
}


.publications_guidlines_grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .publications_guidlines_grid .card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }

        .publications_guidlines_grid .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .publications_guidlines_grid .image-container {
            position: relative;
            width: 100%;
            padding-top: 141.4%;
            /* 1:√2 ratio for portrait */
            overflow: hidden;
        }

        .publications_guidlines_grid .image-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .publications_guidlines_grid .overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 25px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .publications_guidlines_grid .card:hover .overlay {
            opacity: 1;
        }

        .publications_guidlines_grid .title {
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 15px;
            line-height: 1.4;
        }

        .publications_guidlines_grid .view-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: white;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
            align-self: flex-start;
        }

        .publications_guidlines_grid .view-link:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateX(5px);
        }

        .publications_guidlines_grid .info-section {
            padding: 20px;
        }

        .publications_guidlines_grid .info-title {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .publications_guidlines_grid .info-date {
            font-size: 0.85rem;
            color: #666;
        }

        @media (max-width: 1200px) {
            .publications_guidlines_grid .grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 900px) {
            .publications_guidlines_grid .grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .publications_guidlines_grid .grid {
                grid-template-columns: 1fr;
            }
        }

        .faq-item {
            background: white;
            border-radius: 16px;
            margin-bottom: 16px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .faq-item:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .faq-question {
            padding: 16px 30px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            user-select: none;
            transition: background 0.3s ease;
        }

        .faq-question:hover {
            background: #f8f9fa;
        }

        .faq-question h4 {
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            flex: 1;
            line-height: 1.5;
        }

        .faq-icon {
            width: 32px;
            height: 32px;
            background: #4f6ea1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }

        .faq-icon svg {
            width: 16px;
            height: 16px;
            stroke: white;
            stroke-width: 3;
            transition: transform 0.3s ease;
        }

        .faq-item.active .faq-icon {
            transform: rotate(180deg);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease;
        }

        .faq-item.active .faq-answer {
            max-height: 500px;
        }

        .faq-answer-content {
            padding: 0 30px 25px 30px;
            color: #4a5568;
            font-size: 1rem;
            line-height: 1.7;
        }

        .faq-tags {
            display: none;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 2.2rem;
            }

            .faq-container {
                padding: 0;
            }

            .faq-question {
                padding: 20px;
            }

            .faq-answer-content {
                padding: 0 20px 20px 20px;
            }

            .faq-question h3 {
                font-size: 1rem;
            }
        }
.about-us .church-about-img {
    float: right; 
    margin: 0 0 20px 30px; 
    max-width: 50%; 
    height: auto;
}
.about-us .church-about-img img {
    width: 100%; 
    height: auto; 
    display: block;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .about-us .church-about-img {
        float: none; 
        max-width: 100%;  
        margin: 0 0 20px 0;
    }

    .about-us .church-about-img img {
        width: 100%;
        height: auto;
    }

    .about-us .w-85 {
        width: 100% !important;
    }
}


/* =========================
   MKCF FOOTER – V3 (LOGO FOCUSED)
   ========================= */
#mkcf-footer-v3 {
    color: #ffffff;
    padding: 25px 0 25px;
}

#mkcf-footer-v3 .mkcf-footer-wrap {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

/* Logo */
#mkcf-footer-v3 .mkcf-footer-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

#mkcf-footer-v3 .mkcf-footer-brand img {
    max-width: 80px;
}

/* Links */
#mkcf-footer-v3 .mkcf-footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10px;
}

#mkcf-footer-v3 .mkcf-footer-links a {
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
}

#mkcf-footer-v3 .mkcf-footer-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #f1b332;
    transition: 0.3s;
}

#mkcf-footer-v3 .mkcf-footer-links a:hover::after {
    width: 100%;
}

/* Bottom strip */
#mkcf-footer-v3 .mkcf-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Contact */
#mkcf-footer-v3 .mkcf-footer-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    font-size: 13px;
    color: #e5e7eb;
}

#mkcf-footer-v3 .mkcf-footer-contact i {
    color: #f1b332;
    margin-right: 6px;
}
#mkcf-footer-v3 .mkcf-footer-contact span a {
    color:#fff;
}

/* Social */
#mkcf-footer-v3 .mkcf-footer-social {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#mkcf-footer-v3 .mkcf-footer-social a {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: 0.3s;
}

/* #mkcf-footer-v3 .mkcf-footer-social a:hover {
    background: #f1b332;
    color: #2c528c;
    transform: translateY(-2px);
} */

/* Mobile */
@media (max-width: 576px) {
    #mkcf-footer-v3 .mkcf-footer-contact {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

#mkcf-footer-v3 .mkcf-footer-partners {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 8px;
    opacity: 0.9;
}

#mkcf-footer-v3 .mkcf-footer-partners img {
    max-height: 32px;
    object-fit: contain;
    /* filter: brightness(0) invert(1);  */
    background: rgba(255,255,255,.9);
    padding: 2px;
}
#infiniteTrigger {
    /* display: none; */
    display: block;
}
.gap.pastor-detail {
    padding-bottom: 0;
}
.event-detail.secretariat-section .event-meta h2 {
    margin-bottom: 0 !important;
}

/* Grid */
        .publication-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        /* Card */
        .publication-card {
            background: #ffffff;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .publication-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 35px rgba(0,0,0,0.12);
        }

        /* Cover */
        .pub-thumb {
            aspect-ratio: 4 / 3;
            overflow: hidden;
        }

        .pub-thumb img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.4s ease;
            background: #eee;
        }

        .pub-thumb a:hover img {
            transform: scale(1.05);
        }

        /* Content */
        .pub-content {
            padding: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 170px;
            border-radius: 14px;
        }
        .pub-title-height {
            min-height: 110px;
        }

        .pub-title {
            font-size: 16px !important;
            font-weight: 600;
            line-height: 1.4;
            color: #1f2937;
            margin: 0;
            text-align: center;
        }

        /* Download Button */
        .download-div {
            display: flex;
            justify-content: center;
            width: 100%;
            border-top: thin solid #efefef;
            padding-top: 10px;
        }
        .download-div .download-btn {
            display: inline-block;
            padding: 6px 14px;
            background: #3f70b5;
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            border-radius: 6px;
        }

        .download-btn:hover {
            background: #2f5ea3;
            color:#fff;
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .publication-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 992px) {
            .publication-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 576px) {
            .publication-grid {
                grid-template-columns: 1fr;
            }
        }


.faq-answer .social-media-links {
    margin-top: 10px;
    display: flex;
    gap: 12px;
}

.faq-answer .social-media-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3f70b5;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

/* Platform colors */
.social-media-links a.facebook {
    color: #1877F2;
}

.social-media-links a.twitter {
    color: #000000; /* X */
}

.social-media-links a.instagram {
    color: #E4405F;
}

.social-media-links a.linkedin {
    color: #0A66C2;
}

.faq-answer .social-media-links a:hover {
    background: #3f70b5;
    color: #ffffff;
    transform: translateY(-2px);
}

.event-detail .content p span {
    font-size: 16px!important;
    line-height: 22px!important;
    color: #272727!important;
    text-align: justify;
    hyphens: auto;
    hyphenate-character: auto;
    hyphenate-limit-chars: auto;
    font-family:inherit!important;
    font-weight:400!important;
}



/* .mobile-nav .sub-menu {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}


.mobile-nav .sub-menu.active {
    display: block;
    max-height: 1000px; 
}


.mobile-nav > ul > li.menu-item-has-children.open::before {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.mobile-nav > ul > li.menu-item-has-children {
    position: relative;
    cursor: pointer;
} */



.nav-search {
    position: relative;
    display: flex;
    align-items: center;
}

/* Search icon button */
.search-toggle {
    background: #fff;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: #333;
    padding: 4px;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-search.active .search-toggle {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    transition:
        border-radius 0.35s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* Search form */
.search-form {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    overflow: hidden;
    width: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Active state */
.nav-search.active .search-form {
    width: 300px;
    opacity: 1;
    pointer-events: auto;
}

/* Input */
.search-form input {
    border: none;
    outline: none;
    padding: 8px 14px;
    flex: 1;
    font-size: 14px;
}

/* Submit */
.search-submit {
    background: #3f70b5;
    border: none;
    color: #fff;
    padding: 8px 10px;
    cursor: pointer;
}

/* Close button */
.search-close {
    background: transparent;
    border: none;
    color: #777;
    padding: 4px 4px;
    font-size: 16px;
    cursor: pointer;
}

.search-close:hover {
    color: #000;
}

.subscribe {
    position: relative;
    background: #f1b332!important;
}



/* Floating decorative layer */
.subscribe::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -35px;
    transform: translateX(-50%);
    width: 70%;
    height: 70px;
    background: rgba(255, 255, 255, 0.35);
    filter: blur(30px);
    border-radius: 50%;
    animation: floatShadow 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes floatShadow {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateX(-50%) translateY(-8px);
        opacity: 0.9;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.6;
    }
}

#nav-icon4 span {
    background: #fff!important;
}

/* Video gallery start */
/* =========================
   VIDEO GALLERY EXTENSION
   ========================= */

/* Video Card Identifier */
.photo-frame.is-video {
    position: relative;
}

/* Video Thumbnail Wrapper */
.photo-frame.is-video .photo-wrapper {
    background: #000;
}

/* Play Button Overlay */
.photo-frame.is-video .photo-wrapper::after {
    content: "▶";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    color: #ffffff;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.25),
        rgba(0, 0, 0, 0.6)
    );
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Hover Effect */
.photo-frame.is-video:hover .photo-wrapper::after {
    background: rgba(0, 0, 0, 0.55);
    transform: scale(1.05);
}

/* Video Badge (Optional) */
.photo-frame.is-video .photo-category {
    background: #ffe6cc;
    color: #d97706;
}

.album-container .photo-frame.is-video .photo-img {
    height: 210px!important;
}

/* =========================
   LIGHTBOX VIDEO SUPPORT
   ========================= */

.lightbox-content iframe {
    width: 100%;
    height: 420px;
    border: none;
    border-radius: 12px;
    background: #000;
}

/* Responsive Video */
@media (max-width: 768px) {
    .lightbox-content iframe {
        height: 260px;
    }
}

@media (max-width: 480px) {
    .lightbox-content iframe {
        height: 220px;
    }
}


/* Video gallery end */

/* =========================
   COOKIE & ACCESSIBILITY BANNER
   ========================= */

#consentBanner.consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1f2937;
    color: #ffffff;
    z-index: 99999;
    padding: 18px 24px;
    display: none;
}

#consentBanner .consent-content {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

#consentBanner .consent-text h4 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
}

#consentBanner .consent-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #d1d5db;
}

/* Buttons */
#consentBanner .consent-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

#consentBanner .consent-actions button {
    padding: 10px 18px;
    font-size: 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 0;
}

#consentBanner .btn-primary {
    background: #efb119;
    color: #2c2c2c;
}

#consentBanner .btn-primary:hover {
    background: #2d548e;
    color:#fff;
}

#consentBanner .btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid #9ca3af;
}

#consentBanner .btn-secondary:hover {
    background: rgba(255,255,255,0.1);
}

/* =========================
   MOBILE RESPONSIVE
   ========================= */

@media (max-width: 768px) {
    #consentBanner .consent-content {
        flex-direction: column;
        align-items: flex-start;
    }

    #consentBanner .consent-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    #consentBanner .consent-actions {
        flex-direction: column;
        width: 100%;
    }

    #consentBanner .consent-actions button {
        width: 100%;
    }
}


/* Hero Content Enhancements - Works with existing fadeInUpSD animation */
.hero-slide {
    position: relative;
    overflow:hidden;
    height: 100%;
}

.hero-content-wrapper {
    max-width: 700px;
    position: relative;
    z-index: 2;
}

/* Badge Styles */
.hero-badge {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    margin-bottom: 15px;
    backdrop-filter: blur(10px);
}

.hero-badge-highlight {
    background: linear-gradient(135deg, #efb119 0%, #c28c39 100%);
    color: white !important;
}

.hero-badge-event {
    background: linear-gradient(135deg, #efb119 0%, #c28c39 100%);
    color: white !important;
}

/* Title Styles */
.hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: transparent;
    margin-bottom: 15px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
}

.slick-active .hero-title {
    color: white !important;
}

/* Description Styles */
.hero-description {
    font-size: 1.15rem;
    color: transparent;
    margin-bottom: 25px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-weight: 400;
    line-height: 1.6;
}

.slick-active .hero-description {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Action Buttons */
.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.hero-btn {
    padding: 10px 26px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0;
}

.slick-active .hero-btn {
    opacity: 1;
    animation: fadeInUpSD 2s ease-out 0.3s forwards;
}

.hero-btn-primary {
    background: linear-gradient(135deg, #2d548e 0%, #1f2937 100%);
    color: white;
    /* box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); */
}

.hero-btn-primary:hover {
    transform: translateY(-3px);
    color:#fff;
}

.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    backdrop-filter: blur(10px);
}

.hero-btn-secondary:hover {
    background: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 70%; /* Covers left 70% of the slide */
    height: 100%;
    /* background: linear-gradient(to right, 
        rgba(0,0,0,0.85) 0%, 
        rgba(0,0,0,0.65) 40%, 
        rgba(0,0,0,0.35) 70%, 
        transparent 100%
    ); */
    pointer-events: none;
    z-index: 1;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-content-wrapper {
        max-width: 600px;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 992px) {
    .hero-content-wrapper {
        max-width: 550px;
    }
    
    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .hero-badge {
        font-size: 10px;
        padding: 5px 14px;
    }

    .hero-btn {
        padding: 11px 24px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .hero-data {
        margin-left: 4%;
        width: calc(100% - 8%);
    }
    
    .hero-content-wrapper {
        max-width: 100%;
    }

    .hero-title {
        font-size: 1.6rem;
        margin-bottom: 10px;
    }

    .hero-description {
        font-size: 0.875rem;
        margin-bottom: 15px;
    }

    .hero-badge {
        font-size: 9px;
        padding: 4px 12px;
        margin-bottom: 8px;
    }

    .hero-actions {
        gap: 10px;
    }

    .hero-btn {
        padding: 10px 22px;
        font-size: 11px;
    }
    .hero-slide::before,
    .hero-one-slider::before {
        width: 100%;
        /* background: linear-gradient(to right, 
            rgba(0,0,0,0.8) 0%, 
            rgba(0,0,0,0.5) 50%, 
            rgba(0,0,0,0.2) 80%, 
            transparent 100%
        ); */
    }
}

@media (max-width: 576px) {
    .hero-data {
        margin-left: 5%;
        width: calc(100% - 10%);
    }

    .hero-title {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }

    .hero-description {
        font-size: 0.8rem;
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .hero-badge {
        font-size: 8px;
        padding: 4px 10px;
        margin-bottom: 6px;
    }

    .hero-actions {
        flex-direction: column;
        gap: 8px;
    }

    .hero-btn {
        padding: 9px 20px;
        font-size: 10px;
        width: fit-content;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.1rem;
    }

    .hero-description {
        font-size: 0.75rem;
    }
}

/* Who we are CSS start */
:root {
            --brand-blue: #2d548e;
            --brand-gold: #f0b522;
            --brand-dark: #1a1a1a;
            --off-white: #f8fafc;
            --card-bg: rgba(255, 255, 255, 0.98);
        }
.mkcf-story-section {
            /* background-color: var(--off-white)!important; */
            padding: 0!important;
        }


        /* HERO: Sleek & Integrated */
        .mkcf-story-section .history-hero {
            position: relative;
            /* background: linear-gradient(135deg, rgba(45, 84, 142, 0.95), rgba(26, 26, 26, 0.8)), 
                        url('https://mekongrokcf.org/uploads/featured_image/1768220763_featured.jpg'); */
            background:#2d548e;
            background-size: cover;
            background-position: center;
            /* border-radius: 40px; */
            padding: 60px 80px 140px;
            margin-bottom: -85px;
            color: white;
            box-shadow: 0 30px 60px rgba(45, 84, 142, 0.25);
            z-index: 1;
            
        }

        .mkcf-story-section .history-content h2 { 
            font-size: 38px;
            margin-bottom: 20px; 
            font-weight: 900; 
            letter-spacing: -2px;
            background: linear-gradient(to right, #ffffff, var(--brand-gold));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-top: 0;
            text-align: left;
        }

        .mkcf-story-section .history-content p { 
            line-height: 18px;
            opacity: 1;
            margin-bottom: 30px;
            /* max-width: 700px; */
            text-align: left;
            color: #fff;
            width: 100%;
        }

        /* THE ATTRACTIVE CARDS */
        .mkcf-story-section .leadership-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            position: relative;
            z-index: 3;
            padding: 0 20px;
        }

        .mkcf-story-section .info-card {
            background: var(--card-bg);
            backdrop-filter: blur(15px);
            padding: 30px;
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.7);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            text-decoration: none;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
            text-align: left;
        }

        /* Animated Gold Accent Line */
        .mkcf-story-section .info-card::before {
            content: "";
            position: absolute;
            top: 0; left: 0;
            width: 0%; height: 6px;
            background: linear-gradient(90deg, var(--brand-gold), #ffde8a);
            transition: width 0.4s ease;
        }

        /* Default Active State */
        .mkcf-story-section .info-card.active, .mkcf-story-section .info-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 25px 50px rgba(45, 84, 142, 0.15);
            border-color: rgba(240, 181, 34, 0.3);
            background: #ffffff;
        }

        .mkcf-story-section .info-card.active::before, .mkcf-story-section .info-card:hover::before {
            width: 100%;
        }

        .mkcf-story-section .info-card h3 {
            color: var(--brand-blue);
            font-size: 1.5rem!important;
            margin: 0 0 15px 0;
            font-weight: 800;
            transition: color 0.3s ease;
        }

        .mkcf-story-section .info-card.active h3, .mkcf-story-section .info-card:hover h3 {
            color: var(--brand-dark);
        }

        .mkcf-story-section .info-card p {
            color: #556070;
            font-size: 0.95rem;
            line-height: 1.7;
            margin-bottom: 25px;
            flex-grow: 1;
        }

        /* Creative Button Link */
        .mkcf-story-section .card-link {
            font-weight: 800;
            font-size: 0.8rem;
            color: var(--brand-blue);
            text-transform: uppercase;
            letter-spacing: 2px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }

        .mkcf-story-section .card-link::after {
            content: "→";
            font-size: 1.2rem;
            transition: transform 0.3s ease;
        }

        .mkcf-story-section .info-card:hover .card-link {
            color: var(--brand-gold);
        }

        .mkcf-story-section .info-card:hover .card-link::after {
            transform: translateX(10px);
        }
        .history-content {
            text-align:left;
        }

        /* Responsive Mobile */
        @media (max-width: 900px) {
            .mkcf-story-section .leadership-grid { grid-template-columns: 1fr; }
            .mkcf-story-section .history-hero { padding: 50px 30px 110px; border-radius: 20px; }
            .mkcf-story-section .history-content h2 { font-size: 2.5rem; }
        }
/* Who we are CSS end */

.flag-label {
            background: none !important;
            border: none !important;
        }
        .clickable-flag {
            cursor: pointer;
            transition: transform 0.2s;
            border: 2px solid #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .clickable-flag:hover {
            transform: scale(1.2);
            border-color: #007bff;
        }

        /* The invisible clickable area */
        /* Ensure the container doesn't have extra padding that shifts the map */
.map-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Force the pulse to be the center point of the coordinate */
.custom-marker {
    background: transparent;
    border: none;
}

.map-hotspot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Larger hit area */
    height: 40px;
    margin-top: -20px; /* Half of height to center vertically */
    margin-left: -20px; /* Half of width to center horizontally */
}
/* The animated pulse dot */
.pulse-dot {
    width: 15px;
    height: 15px;
    background: #007bff;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(0, 123, 255, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(0, 123, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

.hotspot-label {
    position: absolute;
    bottom: -20px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

.map-hotspot:hover .hotspot-label {
    opacity: 1;
}

/* Who we are section 2 CSS start */
:root {
            --brand-blue: #2d548e;
            --brand-gold: #f0b522;
            --brand-dark: #1a1a1a;
            --brand-light: #ffffff;
        }

        .mkcf-story-section-main-container-2 .mkcf-who-section {

            padding: 30px 5% 0;
            background: linear-gradient(170deg, var(--brand-blue) 71%, var(--brand-light) 69.1%);
            position: relative;
            overflow: hidden;
            min-height: 630px;
        }

        .mkcf-story-section-main-container-2 .intro-column {
            color: white;
            z-index: 2;
            text-align: left;
        }

        .container-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .mkcf-story-section-main-container-2 .intro-column .label {
            color: var(--brand-gold);
            text-transform: uppercase;
            letter-spacing: 4px;
            font-weight: 700;
            font-size: 0.9rem;
            display: block;
            margin-bottom: 20px;
        }

        .mkcf-story-section-main-container-2 .intro-column h2 {
            font-size: 38px;
            margin: 0 0 30px 0;
            font-weight: 700;
            text-align: left;
            color: #fff;
        }

        .mkcf-story-section-main-container-2 .cards-column {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            z-index: 2;
            position: relative;
            bottom: -65px;
        }

        .mkcf-story-section-main-container-2 .modern-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 35px 25px;
            border-radius: 24px;
            text-decoration: none;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border: 1px solid rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .mkcf-story-section-main-container-2 .modern-card.dark {
            background: #fff;
            color: white;
            transform: translateY(-30px);
        }

        .mkcf-story-section-main-container-2 .modern-card.featured {
            border-bottom: 5px solid var(--brand-gold);
        }

        .mkcf-story-section-main-container-2 .modern-card:hover {
            box-shadow: 0 40px 60px rgba(45, 84, 142, 0.2);
        }

        .mkcf-story-section-main-container-2 .modern-card h3 {
            margin: 0 0 15px 0;
            font-size: 1.25rem !important;
            color: var(--brand-blue);
        }

        .mkcf-story-section-main-container-2 .modern-card.dark h3 {
            color: var(--brand-blue);
        }

        .mkcf-story-section-main-container-2 .modern-card p {
            font-size: 0.9rem;
            line-height: 1.6;
            color: #555;
            margin-bottom: 20px;
        }

        .mkcf-story-section-main-container-2 .modern-card.dark p { color: #555; }

        .mkcf-story-section-main-container-2 .btn-link {
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            color: var(--brand-blue);
            display: flex;
            align-items: center;
            gap: 8px;
            justify-content: center;
        }

        .mkcf-story-section-main-container-2 .modern-card.dark .btn-link { color:var(--brand-blue) }

        .mkcf-story-section-main-container-2 .circle-decor {
            position: absolute;
            width: 300px;
            height: 300px;
            border: 60px solid rgba(240, 181, 34, 0.1);
            border-radius: 50%;
            bottom: 120px;
            left: -167px;
            z-index: 1;
        }

        @media (max-width: 992px) {
            .mkcf-story-section-main-container-2 .mkcf-who-section {
                background: var(--brand-blue);
                padding: 30px 5%;
            }
            .mkcf-story-section-main-container-2 .cards-column { grid-template-columns: 1fr;bottom: -30px; margin-bottom: 2rem; }
            .mkcf-story-section-main-container-2 .modern-card.dark { transform: translateY(0); padding: 8px 25px; }
            .mkcf-story-section-main-container-2 .modern-card.translateY-0 {
                transform: unset!important;
            }
            .mkcf-story-section-main-container-2 .modern-card p {
                margin-bottom: 5px;
            }
            .mkcf-story-section-main-container-2 .modern-card {
                padding: 8px 25px;
            }
            /* #countryProjectChart {
                width: 400px !important;
                height: 255px !important;
            } */

            /* #statusChart {
                width: 210px !important;
                height: 210px !important;
                margin-top: 0px;
            } */
            .chart-container canvas {
                height: 250px !important;
                width: 285px!Important;
            }
            .mkcf-story-section-main-container-2 .intro-column h2 {
                font-size: 30px;
                margin: 0 0 15px 0;
            }
            
        }

        

/* Who we are section 2 css end */


/* ══════════════════════════════════════
   WHO WE ARE — Full Redesign
══════════════════════════════════════ */
/* .who-section-wrap {
    background: transparent;
    padding: 4rem 0 4.5rem;
    position: relative;
}

.who-top-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 3rem;
}

.who-label-line {
    flex: 1;
    max-width: 80px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #ffa322);
    border-radius: 999px;
}

.who-label-line:last-child {
    background: linear-gradient(90deg, #ffa322, transparent);
}

.who-label-text {
    font-family: 'Karla', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffa322;
    white-space: nowrap;
}

.who-head-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3.5rem;
    align-items: start;
    margin-bottom: 3.5rem;
}

.who-main-title {
    font-family: 'Karla', sans-serif;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 800;
    color: #003262;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 1.2rem;
}

.who-title-amber  { color: #ffa322; }
.who-title-outline {
    -webkit-text-stroke: 2px #003262;
    color: transparent;
}

.who-title-bar {
    width: 48px;
    height: 4px;
    background: linear-gradient(90deg, #003262, #ffa322);
    border-radius: 999px;
}

.who-body-text {
    font-family: 'Karla', sans-serif;
    font-size: 0.97rem;
    color: #4b5563;
    line-height: 1.85;
    margin: 0;
    padding-top: 0.5rem;
}

.who-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.who-card {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    padding: 1.6rem 1.4rem 1.3rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 2px 16px rgba(0,50,98,0.05);
    transition: transform 0.3s cubic-bezier(.22,.68,0,1.2),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.who-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent);
    border-radius: 20px 20px 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.who-card:hover::before {
    transform: scaleX(1);
}

.who-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 48px rgba(0,50,98,0.11);
    border-color: var(--card-accent);
}

.who-card.featured {
    background: #003262;
    border-color: #003262;
}

.who-card.featured::before {
    transform: scaleX(1);
    background: #ffa322;
}

.who-card.featured .who-card-title { color: #ffffff; }
.who-card.featured .who-card-desc  { color: rgba(255,255,255,0.6); }
.who-card.featured .who-card-num   { color: rgba(255,255,255,0.25); }
.who-card.featured .who-card-link  { color: #ffa322; }
.who-card.featured:hover { border-color: #ffa322; }

.who-card-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.who-card:hover .who-card-icon-wrap {
    transform: scale(1.08) rotate(-3deg);
}

.who-card-icon {
    width: 36px;
    height: 36px;
}

.who-card-body { flex: 1; }

.who-card-num {
    font-family: 'Karla', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--card-accent);
    opacity: 0.6;
    display: block;
    margin-bottom: 0.4rem;
}

.who-card-title {
    font-family: 'Karla', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #003262;
    margin: 0 0 0.55rem;
    line-height: 1.3;
}

.who-card-desc {
    font-family: 'Karla', sans-serif;
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.7;
    margin: 0;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.who-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
}

.who-card-link {
    font-family: 'Karla', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--card-accent);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: gap 0.2s ease;
}

.who-card:hover .who-card-link { gap: 10px; }

.link-arrow {
    transition: transform 0.2s ease;
    display: inline-block;
}

.who-card:hover .link-arrow {
    transform: translateX(4px);
}

.who-card-bar {
    height: 2px;
    flex: 1;
    background: var(--card-accent);
    border-radius: 999px;
    opacity: 0.15;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.who-card:hover .who-card-bar {
    transform: scaleX(1);
    transform-origin: left;
    opacity: 0.5;
}

@media (max-width: 1100px) {
    .who-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .who-head-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .who-main-title {
        font-size: 2.4rem;
    }

    .who-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .who-cards-grid {
        grid-template-columns: 1fr;
    }

    .who-section-wrap {
        padding: 2.5rem 0 3rem;
    }
} */

/* ══════════════════════════════════════
   WHO WE ARE — Full Redesign End
══════════════════════════════════════ */

/* ══════════════════════════════════════
   WHO WE ARE — Bold Background Version
══════════════════════════════════════ */
.who-section-wrap {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: #003262;
}

/* ── Large ghosted watermark text ── */
.who-watermark {
    position: absolute;
    top: -20px;
    left: -10px;
    font-family: 'Karla', sans-serif;
    font-size: clamp(100px, 16vw, 180px);
    font-weight: 800;
    color: rgba(255,255,255,0.035);
    letter-spacing: -0.04em;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ── Gold diagonal slash ── */
.who-slash {
    position: absolute;
    top: 0; right: 0;
    width: 42%;
    height: 100%;
    background: #2d548e;
    clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index: 0;
}

/* ── Subtle dot pattern on gold side ── */
.who-slash::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* ── Radial glow bottom-left ── */
.who-glow {
    position: absolute;
    bottom: -100px;
    left: -80px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(255,163,34,0.12) 0%, transparent 65%);
    z-index: 0;
    pointer-events: none;
}

/* ── Main container ── */
.who-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

/* ══════════════════════════════════════
   LEFT COLUMN
══════════════════════════════════════ */
.who-left {
    padding-bottom: 5rem;
}

.who-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffa322;
    margin-bottom: 1.5rem;
}

.who-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffa322;
    flex-shrink: 0;
}

.who-main-title {
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.0;
    letter-spacing: -0.03em;
    margin-bottom: 1.8rem;
}

.who-title-gold { color: #ffa322; }

.who-title-outline {
    -webkit-text-stroke: 2px rgba(255,255,255,0.5);
    color: transparent;
    display: block;
}

.who-divider {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, #ffa322, rgba(255,163,34,0.2));
    border-radius: 999px;
    margin-bottom: 1.75rem;
}

.who-body-text {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.85;
    margin-bottom: 2rem;
}

/* ── Stat chips row ── */
.who-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.who-stat-chip {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 10px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-num {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffa322;
    line-height: 1;
}

.stat-lbl {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

/* ══════════════════════════════════════
   RIGHT COLUMN — Cards
══════════════════════════════════════ */
.who-right {
    padding-top: 1rem;
    padding-bottom: 0;
    position: relative;
    bottom: 45px;
}

.who-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

/* ── Single Card ── */
.who-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.5rem 1.4rem 1.3rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    transition: transform 0.3s cubic-bezier(.22,.68,0,1.2),
                box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1.5px solid transparent;
}

/* Accent top stripe */
.who-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent);
    border-radius: 18px 18px 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.who-card:hover::before { transform: scaleX(1); }

.who-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px rgba(0,0,0,0.22);
    border-color: var(--card-accent);
}

/* Stagger odd cards up */
.who-card:nth-child(2),
.who-card:nth-child(4) {
    margin-top: 1.5rem;
}

/* Icon wrap */
.who-card-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #ebeff3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.who-card:hover .who-card-icon-wrap {
    transform: scale(1.1) rotate(-4deg);
}

.who-card-icon { width: 32px; height: 32px; }

.who-card-num {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #1d1d1d;
    opacity: 0.5;
    display: block;
    margin-bottom: 2px;
}

.who-card-title {
    font-size: 0.92rem!important;
    font-weight: 700;
    color: #1d1d1d;
    margin: 0 0 0.4rem;
    line-height: 1.3;
}

.who-card-desc {
    font-size: 0.76rem;
    color: #1d1d1d;
    line-height: 1.65;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.who-card-link {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #848484;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    transition: gap 0.2s ease;
}

.who-card:hover .who-card-link { gap: 10px; }

.link-arr {
    display: inline-block;
    transition: transform 0.2s ease;
}

.who-card:hover .link-arr { transform: translateX(4px); }

/* Bottom wave separator */
.who-bottom-wave {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 0;
    line-height: 0;
}

.who-bottom-wave svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 992px) {
    .who-slash { display: none; }

    .who-inner {
        grid-template-columns: 1fr;
        gap: .5rem;
        padding: 3rem 1.5rem 0;
    }

    .who-left { padding-bottom: 0; }

    .who-right { bottom: 0; padding-bottom: 3rem; }

    .who-watermark { font-size: 80px; opacity: 0.025; }
}

@media (max-width: 576px) {
    .who-cards-grid { grid-template-columns: 1fr; }
    .who-card:nth-child(2),
    .who-card:nth-child(4) { margin-top: 0; }
}

/* ══════════════════════════════════════
   WHO WE ARE — Bold Background Version End
══════════════════════════════════════ */

/* Flex container to put maps side-by-side */
                                    .maps-flex-container {
                                        display: flex;
                                        flex-wrap: wrap;
                                        gap: 20px;
                                        justify-content: center;
                                        align-items: center;
                                        flex-wrap: nowrap;
                                    }




/* Ensure the Modal is hidden by default and sits on top */
.country-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.country-modal.active {
    display: flex;
}

.country-modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.country-modal-content {
    position: relative;
    background: white;
    width: 90%;
    max-width: 500px;
    padding: 30px;
    border-radius: 20px;
    z-index: 10;
}

.country-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

.modal-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.sector-item { display: flex; align-items: center; padding: 12px; cursor: pointer; border-bottom: 1px solid #eee; }
.sector-item:hover { background: #f9f9f9; }
.sector-color { width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; }
.sector-info { flex-grow: 1; display: flex; justify-content: space-between; }
#modalChart { max-height: 250px; }

#korea-image {
    height: 190px!important;
}

.footer-rights p a {
    color: #f1b332;
}


/* ══════════════════════════════
   SECTION — no background
══════════════════════════════ */
.mkcf-intro-section {
    background: transparent;
    padding: 4rem 0 3rem;
    position: relative;
}

/* ══════════════════════════════
   TOP LABEL
══════════════════════════════ */
.mkcf-top-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 2.5rem;
}

.label-line {
    flex: 1;
    max-width: 80px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #ffa322);
    border-radius: 999px;
}

.label-line:last-child {
    background: linear-gradient(90deg, #ffa322, transparent);
}

.label-text {
    font-family: 'Karla', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffa322;
    white-space: nowrap;
}

/* ══════════════════════════════
   HEADLINE ROW — left/right split
══════════════════════════════ */
.mkcf-head-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 2.5rem;
}

.mkcf-headline {
    font-family: 'Karla', sans-serif;
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: #003262;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}

.hl-amber {
    color: #ffa322;
}

/* Outline text using border trick for cross-browser */
.hl-outline {
    -webkit-text-stroke: 2px #003262;
    color: transparent;
    display: inline-block;
}

.mkcf-sub {
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    color: #1d1d1d;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    text-align: justify;
  hyphens: auto;
}

.mkcf-sub strong {
    color: #003262;
    font-weight: 700;
}

.mkcf-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Karla', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: #003262;
    text-decoration: none;
    border-bottom: 2px solid #d23b46;
    padding-bottom: 3px;
    transition: color 0.2s, gap 0.2s;
}

.mkcf-cta:hover {
    color: #d23b46;
    gap: 14px;
}

.cta-arrow {
    transition: transform 0.2s;
}

.mkcf-cta:hover .cta-arrow {
    transform: translateX(4px);
}

/* ══════════════════════════════
   DIVIDER
══════════════════════════════ */
.mkcf-rule {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent);
    margin-bottom: 2.5rem;
}


/* ══════════════════════════════
   PILLAR CARDS — Redesigned
══════════════════════════════ */
.mkcf-floating-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.mkcf-float-card {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 2px 16px rgba(0, 50, 98, 0.06);
    transition: transform 0.3s cubic-bezier(.22,.68,0,1.2),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    animation: floatUp 0.55s ease both;
    animation-delay: var(--delay);
    cursor: default;
    overflow: hidden;
    position: relative;
}

/* Top accent stripe */
.mkcf-float-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #2d548e;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 20px 20px 0 0;
}

.mkcf-float-card:hover::before {
    opacity: 1;
}

.mkcf-float-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(0, 50, 98, 0.12);
    border-color: #2d548e;
}

/* Featured card */
.mkcf-float-card.featured {
    background: #003262;
    border-color: #003262;
}

.mkcf-float-card.featured::before {
    opacity: 1;
    background: #ffa322;
}

.mkcf-float-card.featured:hover {
    box-shadow: 0 20px 48px rgba(0, 50, 98, 0.22);
}

/* Inner padding wrapper */
.float-card-inner {
    padding: 1.75rem 1.6rem 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Icon Wrapper ── */
.float-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    position: relative;
    transition: box-shadow 0.3s ease;
}

.mkcf-float-card.featured .float-icon-wrap {
    background: rgba(255,255,255,0.08);
}

.mkcf-float-card:hover .float-icon-wrap {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--glow) 12%, transparent);
}

.pillar-svg {
    width: 48px;
    height: 48px;
}

/* ── Card Number ── */
.float-card-num {
    font-family: 'Karla', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: #2d548e;
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

.mkcf-float-card.featured .float-card-num {
    color: #ffa322;
}

/* ── Title & Desc ── */
.float-title {
    font-family: 'Karla', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1d1d1d;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.mkcf-float-card.featured .float-title {
    color: #ffffff;
}

.float-desc {
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    color: #1d1d1d;
    line-height: 1.4;
    margin: 0 0 1.25rem;
    flex: 1;
}

.mkcf-float-card.featured .float-desc {
    color: rgba(255,255,255,0.6);
}

/* ── Bottom accent line (animates on hover) ── */
.float-accent-line {
    height: 2px;
    border-radius: 999px;
    background: #2d548e;
    width: 0%;
    transition: width 0.4s cubic-bezier(.22,.68,0,1.2);
    margin-top: auto;
}

.mkcf-float-card:hover .float-accent-line {
    width: 100%;
}

.mkcf-float-card.featured .float-accent-line {
    width: 32px;
    background: #ffa322;
    opacity: 0.5;
}

.mkcf-float-card.featured:hover .float-accent-line {
    width: 100%;
    opacity: 1;
}

/* ══════════════════════════════
   SVG ANIMATIONS
══════════════════════════════ */

/* Card 1 — Connectivity pulse rings */
.svg-pulse {
    transform-origin: 32px 32px;
    animation: svgPulse 2.4s ease-out infinite;
    opacity: 0.5;
}

.svg-pulse-2 {
    transform-origin: 32px 32px;
    animation: svgPulse 2.4s ease-out infinite 0.8s;
    opacity: 0.25;
}

@keyframes svgPulse {
    0%   { transform: scale(0.6); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* Nodes pop in */
.svg-node {
    animation: nodePop 0.4s cubic-bezier(.34,1.56,.64,1) both;
}
.n1 { animation-delay: 0.1s; }
.n2 { animation-delay: 0.2s; }
.n3 { animation-delay: 0.3s; }
.n4 { animation-delay: 0.4s; }
.n5 { animation-delay: 0.5s; }

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

/* Lines draw in */
.svg-line {
    stroke-dasharray: 12;
    stroke-dashoffset: 12;
    animation: drawLine 0.5s ease forwards;
}
.svg-line:nth-child(6)  { animation-delay: 0.6s; }
.svg-line:nth-child(7)  { animation-delay: 0.7s; }
.svg-line:nth-child(8)  { animation-delay: 0.8s; }
.svg-line:nth-child(9)  { animation-delay: 0.9s; }

@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

/* Card 2 — Leaf sway */
.svg-leaf {
    transform-origin: 32px 48px;
    animation: leafSway 3s ease-in-out infinite;
}

@keyframes leafSway {
    0%, 100% { transform: rotate(-4deg) scaleY(1); }
    50%       { transform: rotate(4deg)  scaleY(1.04); }
}

/* Sparkles twinkle */
.svg-spark {
    animation: sparkle 2s ease-in-out infinite;
}
.s1 { animation-delay: 0s;    }
.s2 { animation-delay: 0.7s;  }
.s3 { animation-delay: 1.4s;  }

@keyframes sparkle {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: 0.2; transform: scale(0.4); }
}

/* Card 3 — People float up */
.svg-person {
    animation: personFloat 2.8s ease-in-out infinite;
}
.p1 { animation-delay: 0s;   }
.p2 { animation-delay: 0.4s; }
.p3 { animation-delay: 0.8s; }

@keyframes personFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-2px); }
}

/* Arc draw */
.svg-arc {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: drawLine 1s ease forwards 0.6s;
}

/* Heart beat */
.svg-heart {
    transform-origin: 32px 51px;
    animation: heartbeat 1.6s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1);    }
    15%       { transform: scale(1.25); }
    30%       { transform: scale(1);    }
    45%       { transform: scale(1.15); }
    60%       { transform: scale(1);    }
}

/* ══════════════════════════════
   FLOAT UP ENTRY ANIMATION
══════════════════════════════ */
@keyframes floatUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 768px) {
    .mkcf-floating-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .mkcf-float-card.featured {
        order: -1;
    }

    .float-icon-wrap {
        width: 60px;
        height: 60px;
    }
}

/* ══════════════════════════════
   SINCE STRIP
══════════════════════════════ */
.mkcf-since-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.since-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffa322;
    flex-shrink: 0;
}

.since-text {
    font-family: 'Karla', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* ══════════════════════════════
   ANIMATION
══════════════════════════════ */
@keyframes floatUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 768px) {
    .mkcf-head-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .mkcf-floating-cards {
        grid-template-columns: 1fr;
    }

    .mkcf-float-card.featured {
        order: -1;
    }

    .label-text {
        font-size: 0.62rem;
        letter-spacing: 0.1em;
    }

    .hl-outline {
        -webkit-text-stroke: 1.5px #003262;
    }
}

@media (max-width: 480px) {
    .mkcf-intro-section {
        padding: 2.5rem 0 2rem;
    }
}

:root {
    --primary-green: #215049;
    --accent-red: #bb1414;
    --text-main: #2d3436;
    --text-muted: #636e72;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact-details-wrapper {
    /* display: flex;
    flex-direction: column;
    gap: 25px; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: start;
}

.contact-card-modern {
    background: #f9f9f9;
    border-radius: 16px;
    padding: 24px;
    /* box-shadow: var(--card-shadow);
    border: 1px solid rgba(0,0,0,0.03); */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 338px;
}

.contact-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* Header Styles */
.card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
}

.hq-bg { background: #2d548e; }
.project-bg { background: var(--accent-red); }

.label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 700;
}

.header-text h3 {
    margin: 0;
  font-size: 1.25rem !important;
  font-weight: 700;
  color: #212529;
}

/* Body Styles */
.info-row {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
    color: var(--text-main);
    line-height: 1.5;
    align-items: flex-start;
}
.info-row p {margin-top: -4px;}
.icon-box i {
    color:#fff;
}
.info-link i, .info-row i {
            color:#272727;
        }

.info-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}
.card-header {
    border-bottom: unset;
}

.info-link {
    text-decoration: none;
    color: var(--text-muted);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.2s;
}

.info-link:hover {
    color: var(--accent-red);
}

.email-primary {
    font-weight: 600;
    color: var(--text-main);
}

.person-tag {
    background: #f1f2f6;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    margin-bottom: 15px;
    color: var(--primary-green);
    font-weight: 600;
}

/* New Map CSS start */

/* Scoped Variables */
.mkmap-root {
    --bg: #f5f7fa;
    --surface: #ffffff;
    --surface2: #eef2f8;
    --border: rgba(30, 80, 160, 0.12);
    --text: #1a2840;
    --text-dim: #6a80a0;
    --kr: #d42e2e;
    --mm: #5a9010;
    --th: #b88a00;
    --la: #0a9898;
    --kh: #c05c28;
    --vn: #0a8060;
    --accent: #1a6adc;
    --shadow: rgba(20, 60, 140, 0.10);
}

/* Scoped Reset - only affects your widget */
.mkmap-root, 
.mkmap-root * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── WRAPPER ── */
.mkmap-root {
    background: var(--bg);
    color: var(--text);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px var(--shadow);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    height: 100%;
}

/* ── HEADER ── */
.mkmap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    /* background: var(--surface); */
    background-color: #2c538c;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 8px;
}

.mkmap-logo {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .03em;
    line-height: 1.2;
}

.mkmap-sub {
    font-size: .55rem;
    color: var(--text-dim);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.mkmap-chips {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.mkmap-chip {
    padding: 4px 11px;
    border-radius: 20px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    background: #fff;
    color: #1a1a1a;;
    transition: all .2s;
    white-space: nowrap;
    user-select: none;
}

.mkmap-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: #e8f0fc;
}

.mkmap-chip.on {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ── BODY ROW ── */
.mkmap-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── MAP STAGE ── */
.mkmap-stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px 36px 6px;
    min-width: 0;
    overflow: hidden;
    background: var(--bg);
}

.mkmap-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

#mkMapImg {
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 3px 12px rgba(20, 60, 140, .14));
}

#mkSvg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: visible;
}

/* ── POLYGONS ── */
.mk-hit {
    fill: transparent;
    stroke: transparent;
    pointer-events: all;
    cursor: pointer;
    transition: fill .15s;
}

.mk-hit:hover {
    fill: rgba(0, 0, 0, 0.06);
}

.mk-hit.dimmed {
    opacity: .35;
}

.mk-hl {
    fill: rgba(0, 0, 0, 0);
    stroke-width: 0;
    pointer-events: none;
    transition: fill .28s, stroke-width .22s, filter .28s;
}

/* ── LINES ── */
.mk-glow, .mk-line, .mk-flow {
    fill: none;
    opacity: 0;
    transition: opacity .35s;
    stroke-linecap: round;
}

.mk-glow.vis { opacity: .18; }
.mk-line.vis { opacity: .95; }
.mk-flow.vis {
    /* opacity: .6; */
    opacity: 0;
    stroke-dasharray: 5 8;
    animation: mkDash 1.2s linear infinite;
}

@keyframes mkDash {
    to { stroke-dashoffset: -26; }
}

.mk-particle { pointer-events: none; display:none; }

.mk-pulse {
    fill: none;
    stroke: var(--kr);
    stroke-width: 1.5;
    animation: mkPulse 2s ease-out infinite;
}

@keyframes mkPulse {
    0% { r: 7; opacity: .85; }
    100% { r: 22; opacity: 0; }
}

/* ── HINT ── */
.mkmap-hint {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .6rem;
    color: var(--text-dim);
    letter-spacing: .06em;
    pointer-events: none;
    transition: opacity .4s;
    white-space: nowrap;
    z-index: 5;
}

/* ── LEGEND ── */
.mkmap-legend {
    position: absolute;
    bottom: 6px;
    left: 8px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    backdrop-filter: blur(6px);
    z-index: 20;
    max-width: calc(100% - 16px);
}

.mkmap-leg-title {
    width: 100%;
    font-size: .55rem;
    color: var(--text-dim);
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 1px;
}

.mkmap-leg-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .62rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    letter-spacing: .03em;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 5px;
    transition: background .18s;
    color: var(--text);
}

.mkmap-leg-item:hover {
    background: rgba(30, 80, 160, 0.08);
}

.mkmap-leg-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── SIDE PANEL ── */
.mkmap-panel {
    width: 0;
    overflow: hidden;
    transition: width .32s cubic-bezier(.4, 0, .2, 1);
    background: var(--surface);
    /* border-left: 1px solid var(--border); */
    flex-shrink: 0;
}

.mkmap-panel.open { width: 240px; }

.mkmap-panel-inner {
    width: 240px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 13px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.mk-p-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.mk-p-desc {
    font-size: .66rem;
    color: var(--text-dim);
    margin-top: 1px;
    line-height: 1.4;
}

.mk-p-sec {
    font-family: 'Rajdhani', sans-serif;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 10px 0 5px;
}

.mk-p-div {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

.mk-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(30, 80, 160, 0.06);
    gap: 6px;
}

.mk-met-lbl { font-size: .66rem; color: var(--text-dim); }
.mk-met-val {
    font-family: 'Rajdhani', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
    text-align: right;
}

.mk-sector {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 4px 0;
}

.mk-sdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mk-sname {
    font-size: .62rem;
    color: var(--text-dim);
    flex: 0 0 74px;
}

.mk-sbar-w {
    flex: 1;
    height: 4px;
    background: rgba(30, 80, 160, 0.09);
    border-radius: 3px;
    overflow: hidden;
}

.mk-sbar {
    height: 100%;
    border-radius: 3px;
    width: 0;
    transition: width .65s cubic-bezier(.4, 0, .2, 1);
}

.mk-spct {
    font-size: .6rem;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    width: 26px;
    text-align: right;
}

.mk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .64rem;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--surface2);
    border: 1px solid var(--border);
    margin: 2px;
    color: var(--text);
}

.mk-bdot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── TOOLTIP ── */
#mkTooltip {
    position: fixed;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 6px 10px;
    font-size: .68rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
    z-index: 999;
    box-shadow: 0 4px 16px var(--shadow);
    max-width: 180px;
    line-height: 1.5;
    color: var(--text);
}

#mkTooltip.show { opacity: 1; }
/* New Map CSS End */

.credits, .credits a {
    color: #2c528c;
    font-size: 12px;
}
.social-medias.total_user li {
    display:flex;
    align-items: center;
    gap: 8px;
}
.social-medias.total_user img {
    width: 100%;
  max-width: 45px;
}



.content-with-card {
    overflow: hidden;
}
.content-with-card p,
.content-with-card li,
.content-with-card h2,
.content-with-card h3 {
  word-break: normal;
  overflow-wrap: break-word;
  text-align: justify;
  text-justify: inter-character;
  hyphens: auto;
  hyphenate-character: auto;
  hyphenate-limit-chars: auto;
}
.new_card_director {
            background: linear-gradient(160deg, #0d2137 0%, #0f2d4a 55%, #2d548e 100%);
            border-radius: 2px 16px 16px 2px;
            padding: 36px 32px 32px 36px;
            overflow: hidden;
            border-left: 5px solid #e8b84b;
            animation: slideIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            float: right;
            width: 36%;
            margin: 0 0 14px 20px;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(24px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .new_card_director::after {
            content: '';
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(232, 184, 75, 0.08) 0%, transparent 70%);
            pointer-events: none;
        }

        .new_card_director .big-quote {
            position: absolute;
            top: 4px;
            right: 20px;
            font-family: 'Playfair Display', serif;
            font-size: 160px;
            line-height: 1;
            color: rgba(232, 184, 75, 0.07);
            pointer-events: none;
            user-select: none;
            z-index: 0;
        }

        .new_card_director .label {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 3.5px;
            text-transform: uppercase;
            color: #e8b84b;
            margin-bottom: 22px;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            z-index: 1;
        }

        .new_card_director .label::after {
            content: '';
            display: block;
            width: 40px;
            height: 1px;
            background: rgba(232, 184, 75, 0.45);
        }

        .new_card_director .profile-wrap {
            float: left;
            margin: 0 16px 8px 0;
            position: relative;
            z-index: 1;
            width: 125px;
            height: 180px;
        }

        .new_card_director .profile-img {
            width: 100%;
            height: 170px;
            object-fit: cover;
            object-position: top center;
            display: block;
            clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
            shape-outside: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
            float: left;
            margin: 0 14px 14px 0px;
        }

        /* .profile-img {
            width: 108px;
            height: 134px;
            object-fit: cover;
            object-position: top center;
            display: block;
            clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
            outline: 3px solid rgba(232, 184, 75, 0.3);
            outline-offset: 4px;
            filter: grayscale(15%) contrast(1.08) brightness(0.95);
            transition: filter 0.4s ease;
        } */

        .new_card_director .profile-img:hover {
            filter: grayscale(0%) contrast(1.1) brightness(1);
        }

        .new_card_director .profile-wrap::before {
            content: '';
            position: absolute;
            top: 0;
            left: -12px;
            width: 2px;
            height: 60%;
            background: linear-gradient(180deg, #e8b84b, transparent);
        }

        .new_card_director .quote-text {
            font-family: 'Playfair Display', serif;
            font-size: 15.5px;
            line-height: 1.78;
            color: #ccdce8;
            font-style: italic;
            margin: 0;
            margin-top: 125px;
            text-align: left;
            hyphens: unset;

            /* overflow-wrap: break-word;
            hyphens: auto;
            word-break: normal;
            overflow-wrap: break-word;
            text-align: left;
            text-justify: inter-character;
            hyphens: auto;
            hyphenate-character: auto;
            hyphenate-limit-chars: auto; */
        }

        .opening-mark {
            color: #e8b84b;
            font-size: 32px;
            line-height: 0;
            vertical-align: -10px;
            margin-right: 2px;
            font-style: normal;
        }

        .new_card_director .highlight {
            color: #e8b84b;
            font-style: italic;
            font-weight: 600;
            font-size: 18px;
        }

        .attribution {
            clear: both;
            margin-top: 14px;
  padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: flex-start;
            gap: 14px;
            position: relative;
            z-index: 1;
        }

        .attr-dot {
            width: 7px;
            height: 7px;
            background: #e8b84b;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 5px;
            box-shadow: 0 0 8px rgba(232, 184, 75, 0.5);
        }

        .attr-name {
            font-family: 'Source Sans 3', sans-serif;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: #e8b84b;
        }

        .attr-title {
            font-size: 11.5px;
            color: rgba(255, 255, 255, 0.42);
            margin-top: 4px;
            line-height: 1.5;
        }

        .new_card_director .profile-wrap::after {
            content: '';
            position: absolute;
            /* left: -12px; */
            right: -1px;
            width: 2px;
            height: 60%;
            background: linear-gradient(180deg, #e8b84b, #684c2e00);
            bottom: 10px;

        }

        /* Responsive */
        @media (max-width: 991px) {
            .new_card_director .quote-text {
                margin-top: 108px;
            }
            .content-with-card {
                overflow: hidden;
  display: flex;
  flex-direction: column;
            }
            .new_card_director {
                float: unset;
    width: 100%;
    margin-left: 0;
    margin-top: 0;
    order: 2;
    padding: 22px 32px 22px 36px;
            }
            .content-with-card p {
                text-align: justify!important ;
            }
            .content-with-card .new_card_director .profile_text p.quote-text {
                text-align: left!important ;
            }
            .content-with-card .profile_text p.quote-text {
                text-align: left!important ;
            }
            
        }





/* ── Key Facts grid layout ── */
.kf-grid {
    display: grid;
    gap: 20px;

    /* Default (< 1460px): map full-width, two charts side-by-side below */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}

.kf-col--map {
    grid-column: 1 / -1; /* spans both columns → full row */
}

.kf-col--chart {
    grid-column: span 1;
}

/* Large screens (≥ 1460px): all 3 in one row */
@media (min-width: 1460px) {
    .kf-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
    }

    .kf-col--map {
        grid-column: span 1; /* reset – now just one of three */
    }
}



/* New code end */