/*!
Theme Name: sanved2025
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sanved2025
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

sanved2025 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/icon?family=Material+Icons:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');


/* Reset some default styles */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
@font-face {
    font-family: 'FC';
    src: url('/wp-content/themes/sanved2025/font/FranklinGothic-MediumCond.woff2') format('woff2'),
         url('/wp-content/themes/sanved2025/font/FranklinGothic-MediumCond.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Silk-Serif';
    src: url('/wp-content/themes/sanved2025/font/SilkSerif-Light.woff2') format('woff2'),
         url('/wp-content/themes/sanved2025/font/SilkSerif-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}




@font-face {
    font-family: 'G-Regular';
    src: url('/wp-content/themes/sanved2025/font/Gilroy-Regular.woff2') format('woff2'),
         url('/wp-content/themes/sanved2025/font/Gilroy-Regular.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

*/


/* h1 - Main Title */
h1 {
    font-size: clamp(2.2em, 4.6vw, 3.2em);
	line-height: 1.1;
	font-weight: 300;
}

/* h2 - Sub Heading 1 */
h2 {
    font-size: clamp(1.8em, 4vw, 2.6em); /* Minimum size of 2rem, preferred size based on viewport width (5vw), maximum size of 4.5rem */
		line-height: 1.1;
	font-weight: 300;

}

/* h3 - Sub Heading 2 */
h3 {
    font-size: clamp(1.55em, 3.5vw, 2.35em); /* Minimum size of 1.75rem, preferred size based on viewport width (4vw), maximum size of 3.5rem */
		line-height: 1.1;
font-weight: 300;
}

/* h4 - Smaller Sub Heading */
h4 {
    font-size: clamp(1.35em, 2.5vw, 2em); /* Minimum size of 1.5rem, preferred size based on viewport width (3.5vw), maximum size of 3rem */
		line-height: 1.1;
font-weight: 300;
}

/* h5 - Section Title */
h5 {
    font-size: clamp(1.15em, 2vw, 1.72em); /* Minimum size of 1.25rem, preferred size based on viewport width (2.5vw), maximum size of 2.5rem */
	font-weight: 300;
}

/* h6 - Smallest Heading */
h6 {
    font-size: clamp(1em, 1.5vw, 1.3em); /* Minimum size of 1rem, preferred size based on viewport width (2vw), maximum size of 2rem */
	font-weight: 300;
}






/******* overflow-x: hidden;
**/ 




html, body {
	
	  font-family: "Outfit", sans-serif;

}


body {
	font-size: 18px;
	font-weight: 300;
	color: #434548;
}

select {
	  font-family: "Outfit", sans-serif;
}

p {
	margin: 2px 0 16px; 
	line-height: 1.3;
}

a {text-decoration: none; 
color: inherit;
}





.site-header {
    z-index: 1000;
    width: 100%;
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 1000;
    height: auto;
	background-color: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0));
}

/* Header layout */
.header-container {
	padding-top: 11px;
	width: 72%;
    min-width: 1300px;
    max-width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    

	
	
@media (max-width: 1300px) {
	

.header-container {
       display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    width: 100%;
    min-width: unset;
    padding: 0 10px;
    height: auto;
}
	
}
	
	
.site-branding {
    flex: 0 0 12%;
    max-width: 12%;
    overflow: hidden;
}

.site-branding img {
    width: 100%;
    height: auto;
    max-height: 83px; /* Adjust this number if needed */
    object-fit: contain;
}

.normal-logo {display: none;}

.main-navigation {
    flex: 0 0 78%;
    text-align: center;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.main-navigation ul li {
    position: relative;
	padding: 12px 14px;
	color: white;
	font-size: 0.96em;
	margin-bottom: 0;
}

.main-navigation ul li ul {
    display: none;
    position: absolute;
    top: 100%; /* Set the submenu right below the parent item */
    left: 0;
    min-width: 280px;
    z-index: 999;
    text-align: left; /* Left-align the submenu items */
}

.main-navigation ul li:hover > ul {
    display: block;
}



.main-navigation ul li ul li {
    padding: 8px 12px;
    border-bottom: 1px solid #eeeeee1c;
    background: #cb569a;
    color: white;
    line-height: 1.2;
    margin: 0 !important;
}



.head-right {
    flex: 0 0 10%;
    text-align: right;
}

.cta-button {
	display:flex; 
	gap: 6px; 
	justify-content: center;
    background-color: #ff71b0;
    color: white;
    padding: 10px 14px;
	line-height: 1;
  border-radius: 50px;
    text-decoration: none;
	font-size: 1em;
}

.cta-button i {
	font-size: 0.8em;
}

.cta-button:hover { background: black; }

/* Hamburger (Material Symbol) */
.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger .material-icons {
    font-size: 30px; /* Adjust the size of the icon */
    transition: transform 0.3s ease; /* Smooth transform */
	color: white;
}

/* Mobile Menu Panel */
.mobile-menu-panel {
    display: none;
    background: white;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
	height: 100vh;
}

.mobile-menu-panel ul {
    list-style: none;
    padding: 20px;
}

.mobile-menu-panel ul li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    position: relative;
}

/* Show Mobile Menu on Click */
.mobile-menu-panel.show {
    display: block;
}

/* Responsive */
@media (max-width: 980px) {
    .site-branding {
		display: flex;
        flex: 0 0 25%;
        max-width: 25%;
        overflow: hidden;
    }

    .main-navigation {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .head-right {
		        display: flex;
        gap: 14px;
		align-items: center;
        flex: 0 0 auto;
    }
	
	/* Ensure all menu items with children have the toggle (+ or -) */
.menu-menu-1-container ul li.menu-item-has-children {
  position: relative; /* This ensures the pseudo-element is positioned relative to the parent */
}

/* Add the submenu toggle (+ or -) using ::after for all parent items with children */
.menu-menu-1-container ul li.menu-item-has-children > a::after {
  content: "+"; /* Default content is "+" */
  position: absolute; /* Position it absolute within the parent item */
  margin-left: 8px; /* Add some space between the parent item and the toggle */
  font-size: 18px; /* Adjust size as needed */
  cursor: pointer;
  display: inline-block; /* Make sure the toggle stays inline with the parent item */
}

/* Change content when the submenu is open */
.menu-menu-1-container ul li.menu-item-has-children.open > a::after {
  content: "-"; /* Change to "-" when the menu is open */
}

/* Only target the first parent item with the children */
.menu-menu-1-container ul li.menu-item-has-children:first-child > a::after {
  /* Default positioning and styling */
  margin-left: 8px; /* Same space as other items */
}

	
}


/********** FOOTER **********/

/* FOOTER */

/* Footer Styling */
.site-footer {
background: #2d2e35;
    padding-top: 80px;
	padding-bottom: 40px;
}

.footer-container {
    max-width: 1380px; /* Restrict content width */
    margin: 0 auto;
    padding: 0 20px; /* Add padding for better spacing */
	color: white;
}

/* Top part */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid #ffffff21;
	padding-bottom: 52px;
}

.footer-left {
    max-width: 40%;
}


.foot-address {
display: flex;
gap: 32px; 
}

.allcap {text-transform: uppercase;}

.footer-left p {
	font-size: 0.7em;
	line-height: 1.3;
	font-weight: normal;
}

.footer-right {
    display: flex;
    align-items: flex-end;
    gap: 50px;
}

/* Footer Menu */
.footer-menu {
    display: flex;
    gap: 14px; /* Space between menu items */
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    display: inline-block; /* Keep all menu items in one line */
}

.footer-menu a {
    color: #fff;
    text-decoration: none;
font-size: 0.6em;
line-height: 1.1;
margin-right: 6px;
font-weight: normal;
 text-transform: uppercase;
   transition: color 0.3s ease;
}

.site-footer a:hover {
    color: #ff71b0; /* Change color on hover */
}

/* Footer Logo */
.footer-logo {
    height: 100px;
    max-width: 100%;
}

/* Bottom part */
.footer-bottom {
	font-size: 14px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 24px;

}



.footer-bottom a {
    color: #fff;
    text-decoration: none;
	font-size: 15px;

}

	.footer-bottom-right {
	display: flex;
    gap: 8px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.botlinks {
	display: flex; 
	gap: 8px; 
	text-transform: uppercase;
}

.botlinks a {

	font-size: 0.8em !important;
}


.socials {
	    display: flex;
	gap: 15px; 
	    font-size: 1.2em;

}


@media (max-width: 980px) {
.footer-bottom {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
	gap: 14px;
    padding-top: 30px;
    flex-direction: column;
}
	
	.footer-bottom-right {
		    flex-direction: column;
		align-items: flex-start;
	}
	
}

@media (max-width: 880px) {


.footer-right {
        display: flex;
        margin-top: 20px;
        align-items: flex-end;
        gap: 12px;
	        justify-content: space-between;

	}
}

@media (max-width: 690px) {
	
	.footer-menu a {

    margin-right: 0px !important;
		
	}
	
.site-footer {
    padding-top: 50px;
}
	
	.footer-left {
    max-width: 100%;
}
	
	.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 2px;
    border-bottom: 1px solid #ffffff5e;
    padding-bottom: 26px;
    flex-direction: column;
}	
	
}

	@media (max-width: 440px) {
	.footer-right {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-direction: column-reverse;
}
	}






/* GLOBAL WRAPPER */


.global-wrapper {
    width: clamp(1300px, 72.01%, 3400px);
    max-width: 100%; /* Prevents overflow on small screens */
	padding: 0;
    margin: 0 auto; /* Centers content inside 100vw */
    height: auto;
    transform-origin: center;
    position: relative;
    overflow: visible; /* Ensure content is not clipped */
}



/* GEN SETUP SECTIONS ETC */

.white {color: white;}

.center {text-align:center;}

.compressedpara {padding: 0px 8vw;}


.section-head-center {
	display: flex; 
	align-items: center;
	flex-direction: column;
}


.banner-sub-heading  {
    font-size: 1.1em;
	font-weight: 200;
	text-transform: uppercase;
}

.section-shoutout {
    font-size: clamp(1.16em, 2.5vw, 1.8rem);
	font-weight: 200;
}

.section-shoutout-two {
    font-size: clamp(1.06em, 2.35vw, 1.55rem);
	font-weight: 200;
}

.section-sub-heading {text-transform: uppercase; font-size: 1.16em;}

.section-para {font-size: 1.32em; }

.column-heading {
    font-size: 1.22em;
	font-weight: normal;
	text-transform: uppercase;
}


.mid-flex-center {
	justify-content: center;
	align-items: center;
}

.section-top {
	margin-top: 110px;
}

.section-bottom {
	margin-bottom: 110px;
}

.pt-10 {padding-top: 10px;}
.pt-20 {padding-top: 20px;}
.pt-30 {padding-top: 30px;}
.pt-40 {padding-top: 40px;}
.pt-50 {padding-top: 50px;}

.pb-10 {padding-bottom: 10px;}
.pb-20 {padding-bottom: 20px;}
.pb-30 {padding-bottom: 30px;}
.pb-40 {padding-bottom: 40px;}
.pb-50 {padding-bottom: 50px;}

.pink {color: #cb569a;}

.smallbutton {
	background:#cb569a;
	padding: 4px 10px;
	font-size: 0.77em;
	border-radius: 3px;
	text-transform: uppercase;
}


.hero-page {
width: 100%;
height: 50vh;
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
position: relative;
padding-bottom: 32px;
}


.header-wrapper {
width: clamp(1300px, 72.01%, 3400px);
max-width: 100%; /* Prevents overflow on small screens */
padding: 0;
margin: 0 auto; /* Centers content inside 100vw */
height: auto;
transform-origin: center;
position: relative;
overflow: visible; /* Ensure content is not clipped */
}

.hero-page .video-overlay {
z-index: 2;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
background-image: linear-gradient(to bottom, rgb(0 0 0 / 17%), rgb(12 12 12 / 70%)) !important;
}


.hero-page .header-wrapper {
z-index: 3;
}



.video-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}


@media (max-width: 920px) {
	.compressedpara {padding: 0px 0vw;}

}


/**********************************************************/
/**********************************************************
 * COLUMN SYSTEM */
/**********************************************************/
/**********************************************************/

/* Container to hold the rows */


.cont_container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25%;
    justify-content: flex-start;
}

.cont_container .item {
 display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	margin-bottom: 1.25%;
	overflow: hidden; /* Prevents overflow during scaling */
	text-decoration: none;
}

.item.bg-image {
    position: relative; /* Needed for absolute positioning of text */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white; /* Text color */
    display: flex;
    align-items: flex-end; /* Text at bottom */
    padding: 20px;
    border-radius: 4px;
    overflow: hidden; /* Prevent overflow */
	 min-height: 350px; /* Or 350px or 42vh, depending on your design */
    height: 100%;
}

.item.bg-image::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%; /* Adjust how much of the bottom gets gradient */
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.8), transparent);
    pointer-events: none; /* Allows clicks to pass through */
    border-radius: 4px;
}



.item.bg-image .item-text {
    position: absolute;
    left: 30px;
    bottom: 30px;
	padding-right: 30px;
	z-index:2;
}


/* Default: 4 Columns */
.cont_container.cols-4 .item {
    flex: 1 1 calc(24.5% - 12px);
    max-width: calc(24.5% - 12px);
}


/* Default: 3 Columns */
.cont_container.cols-3 .item {
    flex: 1 1 calc(32.5%);
    max-width: calc(32.5%);
}

/* 2 Columns */
.cont_container.cols-2 .item {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
}

/* 1 Column */
.cont_container.cols-1 .item {
    flex: 1 1 100%;
    max-width: 100%;
}

/* Force 1 Column Layout on Small Screens */
@media (max-width: 920px) {
    .cont_container.cols-2 .item, .cont_container.cols-3 .item, .cont_container.cols-1 .item  {
        flex: none;
        max-width: 100%;
		width: 100%;
    }
	
		.cont_container {
		flex-direction: column;
		gap: 32px;
	}
	
.cont_container.cols-3 .item {
    max-width: 100%;
}
	
}


/************************************************************/
/* CAROUSEL ************************************ ************
************************************************************/

.carousel-section {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
}

.carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.carousel-title {
  margin: 0;
  font-size: 1.5rem;
}

.carousel-controls {
  display: flex;
  gap: 8px;
}

.carousel-btn {
  width: 40px;
  height: 40px;
  background-color: #000; /* Change as needed */
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-btn:hover {
  background-color: #333; /* Optional hover effect */
}

.carousel-btn i {
  font-size: 16px;
}


.carousel-item {display: flex;
padding: 20px;
}



.carousel-item {
position: relative;
width: 100%;
min-height: 400px;
border-radius: 1px;
overflow: hidden;
	    flex-direction: column;
    justify-content: space-between;
	padding: 22px;
}

.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
min-height: 400px;

}

/* Gradient Overlay */
.carousel-item .overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%; /* Adjust to control gradient height */
background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
z-index: 1;
}

/* Text aligned bottom left */
.carousel-text {

z-index: 2;
color: white;
text-align: left;
}


.milestone-text {
   
    z-index: 2;
    color: white;
    text-align: left;
    padding-right: 16px;
    overflow-y: auto;

    max-height: 180px;
}


/* Scrollbar styling */
.milestone-text::-webkit-scrollbar {
    width: 6px;
}

.milestone-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.milestone-text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
}

.milestone-text::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* Firefox */
.milestone-text {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.6) rgba(255,255,255,0.2);
}


.milestone-text p {
padding-top: 8px;

}
.milestone-text h6 {
font-size: 1.2em;
}


.milestone-text ul li  {
	font-size: 0.84em !important;
	line-height: 1.1 !important;
	margin-bottom: 4px;
	 list-style-position: outside; /* Places the bullet outside the content box */
  margin-left: 1.5em; /* Adjust this value to align the text as desired */
}

.banner-head-year {
display: flex;
	justify-content: flex-end;
z-index: 2;
color: white;
text-align: left;
}

.carousel-text h3 {
color: #f5f5f7;
font-size: 1.2em !important;
letter-spacing: 0.007em;
line-height:1;
}
.carousel-text p {
font-size: 0.86em;
margin-bottom: 10px;
margin-right: 21%;
line-height: 1.1;
color: white !important;
}

ul {
	list-style-position: inside;
}

.carousel-item ul {
	list-style-position: inside;
	margin: 10px 0px;
}

.carousel-item ul li {
	padding-bottom: 5px;
}






/* HOME */
/**********************************************************/

.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: 0;
}

.overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 96%;
  background: linear-gradient(to top, rgba(0,0,0,0.77), rgba(0,0,0, .01));
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}

.hero-content h1 {
  margin-bottom: 10px;
}

.hero-content p {
  margin-bottom: 30px;
}

.hero-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #ff6b6b;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  font-size: 18px;
}


.white-button {

  background-color: white;
  color: #cb569a;
}

/* FLOW CONTAINER DOTS */

.flow-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 12px auto;
}

.flow-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Circle */
.outer-circle {
  fill: none;
  stroke: grey;
  stroke-width: 2;
  stroke-dasharray: 2 10; /* dot space dot space */
  animation: dashMove 12s linear infinite;
}

/* Lines */
.connect-line {
  stroke: grey;
  stroke-width: 2;
  stroke-dasharray: 2 10;
  animation: dashMove 122s linear infinite;
}

/* Animation */
@keyframes dashMove {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -126; }
}

/* Center Image */
.center-image {
  position: absolute;
  width: 160px;
  height: 160px;
  background: white;
  border-radius: 50%;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.center-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Outer Circles */
.circle {
  position: absolute;
  width: 120px;
  height: 120px;
  background: #213f63;
	color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  z-index: 3;
}

/* Positions */
.top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}


/* IMPACT */

.impact-section {
  background-color: #2d2e35;
  padding: 120px 20px;
  text-align: center;
}

.impact-container {
  max-width: 1300px;
  margin: 0 auto;
}

.impact-heading {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: ;
}

.impact-subtext {
  font-size: 1.1rem;
  color: ;
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.impact-grid > :not(:last-child) {
  border-right: 1px dotted grey;
}

.impact-stat {
  padding: 30px 20px;
}

.impact-number {
  font-size: 3.4em;
  color: #ff71b0;
	font-weight: 600;
  margin-bottom: 10px;
}

.impact-label {
  font-size: 1rem;
  color: white;
}




/* CTA FOOTER */

.cta {
	background: #ff71b0;
padding: 60px 0;
}







/* Light Grey Back */

.lg-bg {
	background: #efefef;
padding: 110px 0;
}













:root{
    --size: clamp(120px, 18vw, 220px);
    --gap: 18px;
    --box-bg-1: #f8b195;
    --box-bg-2: #f67280;
    --box-bg-3: #c06c84;
    --box-bg-4: #6c5b7b;
  }

.wrapper{
    width: 100%;
    max-height: 500px;  /* height limit */
    aspect-ratio: 1 / 1;
    position: relative;
    margin: 0 auto;
  }

  .grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1f;
    gap: var(--gap);
    height:100%;
    width:100%;
    box-sizing:border-box;
  }

  .box{
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
	position: relative; 
    overflow: hidden; /* so overlay follows border radius */
}


/* black overlay gradient from bottom to top */
.box::after {
  content: "";
  position: absolute;
  inset: 0; /* stretch to full box 
  background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);*/
  pointer-events: none; /* allow clicks through overlay */
}


.box-text-left {
	z-index: 999;
	padding: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.box-text-right {
	z-index: 999;
	padding: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

  .box--1, .box--4 { background: #2d2e35db; }
  .box--2, .box--3 { background: #2d2e35; }

  .center-circle{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:var(--size);
    height:var(--size);
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    z-index:3;
    border:4px solid rgba(255,255,255,1);
	  
  }

  .circle-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    color:black;
  }

  .circle-content img{
    width:100%;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.35);
  }



/* AUTO SCROLL PARTNER LOGOS */

.scroller {
  max-width: 100%;
}

.scroller__inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}


.scroller__inner img {
  max-height: 240px;
}


.scroller[data-animated="true"] {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 60s;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}




/* Home Testi Auto Scroller */

#containtercarousel {
	width: 100%;
	mask: linear-gradient(90deg, transparent, white 0%, white 90%, transparent);
	-webkit-mask: linear-gradient(90deg, transparent, white 0%, white 90%, transparent);
    display: grid;
    place-items: center;

}
#containtercarousel ul{
	display: flex;
	gap: 12px;
	list-style: none;
	padding: 0;
}
#containtercarousel li{
	padding: 10px 10px;
	border-radius: 5px;
/* 	border: 1px outset var(--text-color); */

}

#containtercarousel[data-animated]{
	overflow: hidden;
}
#containtercarousel[data-animated] #list{
	width: max-content;
	animation: scroll 40s linear infinite;
}

@keyframes scroll{
	to{
		translate: calc(-50% - 5px);
	}
}


/* Pause the animation on hover */
#containtercarousel[data-animated]:hover ul {
	animation-play-state: paused;
}




/* the slides */
  .swiper-slide {
      margin-right: 27px;
  }

  /* the parent */
  .highlight-carousel {
      margin-right:-27px;
  }





/* SDG GOALS */



.sdg-section {
  padding: 50px 0;
}

.sdg-container {
  display: flex;
  align-items: center;
	justify-content: center;
  gap: 40px;
}

.sdg-text {
  flex: 1;
  position: relative;
}

	
	.sdg-item {
min-height: 40vh;
    margin: 20vh 0;
	}

.sdg-image {
  flex: 1;
  position: sticky;
  top: 100px; /* adjust for header height */
  align-self: flex-start;
}

.sdg-image img {
  width: 90%;
  border-radius: 6px;
	    margin: 2vh 0;

}

/* Mobile responsive */
@media (max-width: 980px) {
  .sdg-container {
    flex-direction: column;
  }

  .sdg-image {
    display: none; /* hide sticky image */
  }

  .sdg-mobile-img {
    display: block;
    margin-top: 20px;
    width: 100%;
    border-radius: 6px;
  }
}

/* Default: hide mobile images for desktop */
.sdg-mobile-img {
  display: none;
}



/* TEAM SHORTCODE */

.ks-team-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }
    .ks-team-item {
        background: #fff;
        padding: 6px;
        border-radius: 2px;
        text-align: center;
    }
    .ks-team-img img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
    }
    .ks-team-title {
        margin: 10px 0 5px;
        font-size: 1.1rem;
    }
    .ks-team-content {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    /* Responsive breakpoints */
    @media (max-width: 1200px) {
        .ks-team-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (max-width: 992px) {
        .ks-team-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 768px) {
        .ks-team-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
        .ks-team-grid { grid-template-columns: 1fr; }
    }





/* ACCORDIAN */


 .accordion { width: 100%; margin: 24px auto; }

  .accordion-item {
    border-top: 1px solid #ddd;
	  	 background: transparent;

  }

.accordion-item:last-child {
  border-bottom: 1px solid #ddd;
}

.accordion-item .section-sub-heading {color: grey; }

.accordion-item .fa-solid {color: grey !important;}

.active .section-sub-heading {color: #ff71b0;}

.active .fa-solid {color: #ff71b0 !important;}


  .accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 20px;
	  font: inherit;
    border: 0;
    text-align: left;
    cursor: pointer;
  }
  .accordion-trigger:focus-visible { outline: 1px solid #4c9ffe; outline-offset: 1px; }

  /* Title text */
  .accordion-title { font-weight: 600; }

  /* + / - indicator on the right */
  .accordion-trigger::after {
    content: "+";
    line-height: 1;
	  font-size: 1.8em;
    transform: translateY(-1px);
  }
  .accordion-trigger[aria-expanded="true"]::after { content: "–"; } /* en dash looks nice */

  /* Panel (animated) */
  .accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 220ms cubic-bezier(.2,.6,.2,1);
    will-change: max-height;
	  
  }
  .accordion-panel > .accordion-content {
    padding: 0 20px 16px 20px; /* keep space when open */
	  margin-bottom: 32px;
  }

  .accordion-panel > .accordion-content p {
    font-size: 1.1em;
	  margin-bottom: 12px;
  }
	
  .accordion-panel > .accordion-content ul {
    	list-style-position: inside;
	  margin: 12px 0;
  }

 .accordion-panel > .accordion-content li {
    	
	  margin-bottom: 2px;
  }


  @media (prefers-reduced-motion: reduce) {
    .accordion-panel { transition: none; }
  }


.don-part li {font-size: 0.89em; line-height: 1.4; }




/* CSS FOR DOCU FILTER */

/* === Filters bar === */
.document-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.document-filters select,
.document-filters button {
  padding: 8px 12px;
  font-size: 1.1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.document-filters select {
width: 45%;
}

.document-filters button {
	width: auto;
	border-radius: 999px
}

.document-filters select:focus,
.document-filters button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,115,170,0.25);
}

.document-filters button {
  background:  #ff71b0;
  color: #fff;
	font-size: 1em;
	padding: 8px 16px;
	border: none;
}

.document-filters button:hover {
  background:  black;;
}


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

.document-grid { margin-top: 26px;}


@media (max-width: 1024px) {
  .document-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .document-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .document-grid { grid-template-columns: 1fr; }
}

/* === Document items === */
.document-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  background: #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

.document-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
	 cursor: pointer;
}

.document-item .doc-title {
  margin: 0 0 8px;
  font-size: 1.2em;
	  color:  #cb569a;;

}

.document-item  {
  font-size: 14px;
  text-decoration: none;
}





/* ARCHIVE POSTS BLOG CSS */

/* Filter bar */
.blog-filters {
  margin-bottom: 30px;
  display: flex;
  gap: 14px;
}
.blog-filters select, 
.blog-filters button {
  font-size: 14px;	
}
	
.blog-filters select
 { font-size: 1.3em;
width: 85%;
	 border: none;
	 border-bottom: 1px solid grey;
}
	
.blog-filters button {
	 width: 15%;
	  padding: 12px 16px;
	text-transform: uppercase;
	  background: #ff71b0;
  color: #fff;
  cursor: pointer;
	border: none;
	border-radius: 999px;
}
	select:focus, input:focus{
    outline: none;
}	
	

.blog-filters button:hover {
  background: black;
}

/* Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

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

/* Post Item */
.blog-item {
  background: #fff;
  overflow: hidden;
	padding-bottom: 20px;
	border-bottom: 1px solid #e7e6e6;
}


/* Thumbnail wrapper */
.blog-item .thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3; /* maintain same ratio for all */
  overflow: hidden;
}
.blog-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop & scale to fill box */
  display: block;
	border-radius: 4px;
}

.blog-item .title {
  font-size: 1.14em;
  font-weight: 300;
	 margin-bottom: 4px;
  
}
	
.blog-item .date {font-size: .78em;}
	
.blog-item .title a {
  color: #111;
  text-decoration: none;
}
.blog-item .title a:hover {
  color: #0073aa;
}



.meta {    display: flex;
    gap: 7px;
    font-size: .8em;
padding:0px;
}

	/* Meta container */
.blog-item .meta {
  padding: 14px 0 4px;
  display: flex;
  flex-wrap: wrap;
	    font-size: .96em;

  gap: 8px;
}
	


	/* Generic pill */
.blog-item .pill {
 color: grey;
  font-size: 0.66em;
  line-height: 1.3;
  font-weight: 300;
}

	
	
/* Pagination */
.pagination {
  margin-top: 30px; 
	margin-bottom: 40px;
  text-align: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 6px;
  border: 1px solid #ddd;
  border-radius: 50%;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

/* Override for next/prev links */
.pagination .page-numbers.next,
.pagination .page-numbers.prev {
  width: auto;
  padding: 0 16px;
  border-radius: 20px; /* pill shape */
}
	
.pagination .current {
  background: #ff71b0;
  color: #fff;
  border-color: #ff71b0;
}
.pagination a:hover {
  background: #f0f0f0;
}



.blog-wrapper {
width: clamp(960px, 1100px, 3400px);
max-width: 100%; /* Prevents overflow on small screens */
padding: 0;
margin: 0 auto; /* Centers content inside 100vw */
height: auto;
transform-origin: center;
position: relative;
overflow: visible; /* Ensure content is not clipped */
}

.blog-wrapper img {max-width: 1100px;}



.like-share-band {
text-align: center;
padding: 60px 0;
background-color: #201f1f;
border-top: 1px solid #000000;
border-bottom: 1px solid #201f1f;
border-radius: 4px;
}

.share-text {color: #ff71b0; font-size: 2em; font-weight: 300; line-height: 1.2; margin:0;}
.like-text {
margin:0;
}

.share-icons {
margin-top: 10px;
}

.share-icons a {
display: inline-block;
margin: 0 8px;
font-size: 20px;
color: #ffffff;
transition: color 0.3s;
}

.share-icons a:hover {
color: #0073e6;
}


.acf-text p {
margin: 14px 0;
	font-size: 1.2em;
	line-height: 1.3;
}


.acf-text img {
margin: 14px 0;

}




.three-column-grid {
display: flex;
width: 100%;
border-bottom: 1px solid #2f2f2d; /* Light grey border around the whole grid */
flex-wrap: wrap;
border-left: 1px solid #2f2f2d;
}

.grid-box {
flex: 1;
min-width: 33.33%;
border-right: 1px solid #2f2f2d; /* Inner vertical dividers */
border-top: 1px solid #2f2f2d;
display: flex;
align-items: flex-end; /* Bottom-align text */
padding: 20px;
min-height: 140px;
}

.div-white .grid-box {
border-right: 1px solid #c7c7c7; /* Inner vertical dividers */
border-top: 1px solid #c7c7c7;

}

.div-white .three-column-grid {
border-bottom: 1px solid #c7c7c7; /* Light grey border around the whole grid */
border-left: 1px solid #c7c7c7;
color: grey;
}

.div-white p {
color: rgb(52, 51, 51);
}




/* FORM */




input[type='text'], input[type='tel'], [type='email'], select, textarea {
background: none;
border: none;
border-bottom: solid 1px #474544;
color: #474544;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
padding: 12px 0px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer !important;

}




input[type='submit'] {
border: none;

	    border: none;
    background: #ff71b0;
    border-radius: 100px;
    padding: 12px 32px;
    color: #ffffff;
    font-size: .9em;
	
margin-top: 22px;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer !important;

}


.submit::before {
content: "";
display: block;
width: 90px; /* Default width */
height: 5px; /* Default thickness */
background: linear-gradient(to right, black 0%, black 60%, black 100%);
clip-path: polygon(
0% 30%, 75% 30%, 75% 100%, 100% 100%, 100% 0%, 0% 0%
);
margin-right: 10px;
transition: width 0.3s ease-in-out;
}

input[type='text']:focus, [type='email']:focus, textarea:focus {
outline: none;
padding: 0 0 0.875em 0;
}

.message {
float: none;
}

.name {
float: left;
width: 45%;
}

label {
	padding-top: 16px;
font-size: 16px;
text-transform: uppercase;

}

select {
background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-16.png') no-repeat right;
outline: none;
-moz-appearance: none;
-webkit-appearance: none;
}

select::-ms-expand {
display: none;
}

.subject {
width: 100%;
}

.telephone {
width: 100%;
}

textarea {
line-height: 150%;
resize: none;
width: 100%;
}

::-webkit-input-placeholder {
color: #474544;
}

:-moz-placeholder {
color: #474544;
opacity: 1;
}

::-moz-placeholder {
color: #474544;
opacity: 1;
}

:-ms-input-placeholder {
color: #474544;
}


#watercalc-result {
margin-top: 22px;
max-width: 740px;
display: flex;
justify-content: flex-end;
text-align:center;
}


.wpcf7-form p {margin-bottom: 16px;}

/* FORM END */


.sampoornata-stage {
	padding: 14px 0;
	
}

.sampoornata-stage p {
line-height:1.3;
	margin: 5px 0;
}


li {font-size: 1.1em; line-height: 1.4; }


.slick-arrow {
    background: #ff71b0;
    color: white;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}


@media (max-width: 1320px) {
	.global-wrapper { padding: 0 20px; }
}



@media (max-width: 920px) {
	.cta-button { font-size: 0.82em; }
	.section-top {
	margin-top: 90px;
}

.section-bottom {
	margin-bottom: 90px;
}
	
	.grid {
    grid-template-columns: 1fr; /* Single column */
    grid-template-rows: auto;   /* Let rows adjust automatically */
  }
	
	.center-circle {display: none;}
	
	.box {
       height: max-content;
	}
	
	.wrapper { min-height: 680px;}
	
}






  .accordion-item1 {
    border-top: 1px solid #ddd;
	  	 background: transparent;

  }

.accordion-item1:last-child {
  border-bottom: 1px solid #ddd;
}

.accordion-item1 .section-sub-heading {color: grey; }

.accordion-item1 .fa-solid {color: grey !important;}