/******************************************************************
  Theme Name: Staging
  Description: Staging bootstrap tamplate
  Author: Colorib
  Author URI: https://www.colorib.com//
  Version: 1.0
  Created: Colorib
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Banner Section
6.  Product Section
7.  Intagram Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

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

/* Template default CSS
/*----------------------------------------*/

  /* Force-hide the default JivoChat launcher */
  .jivo-container, .jivo-btn-wrapper, #jivo-iframe-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  @keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(15deg); }
    30% { transform: rotate(-15deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(-10deg); }
    75% { transform: rotate(5deg); }
  }
   #overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: #000;
      color: white;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      text-align: center;
	  font-weight: 100;
    }

    #mainContent {
      display: none;
      padding: 3rem;
      text-align: center;
    }

    input[type="checkbox"] {
      margin-top: 1rem;
      transform: scale(2.5);
	  margin-right: 10px;
    }

    label {
      margin-top: 1rem;
      font-size: 1rem;
      color: #ccc;
    }
	/* Responsive tweaks for smaller screens */
@media (max-width: 480px) {
  #overlay {
    padding: 1rem 0.5rem;
  }
  #overlay h1{
	font-size: 20px;
  }

  label {
    font-size: 15px;
    flex-direction: row;
    justify-content: center;
  }

  input[type="checkbox"] {
    transform: scale(2);
    margin-right: 8px;
  }

  #mainContent {
    padding: 2rem 1rem;
  }
}

  #custom-chat-icon {
    animation: wiggle 1.5s ease-in-out infinite;
  }
.pattern-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url('/img/pattern.png'); /* Make sure the path is correct */
  background-repeat: no-repeat;
  background-size: contain; /* or 'cover' if you want full stretch */
  z-index: -1;
  pointer-events: none; /* Prevents it from blocking clicks */
  background-position: center;
  opacity: 0.2; /* Makes sure it's subtle behind content */
}


html,
body {
	height: 100%;
	font-family: 'GothamLight', sans-serif;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;

}
.body{
	overflow-x: hidden;
}
@font-face {
	font-family: 'GothamLight';
	src: url(/fonts/GOTHAM-LIGHT.TTF);
	font-weight: normal;
	font-style: normal;
  }
  @font-face {
	font-family: 'GothamMedium';
	src: url(/fonts/GOTHAM-MEDIUM.TTF);
	font-weight: normal;
	font-style: normal;
  }
body{

}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: white;
	font-weight: 400;
	font-family: 'GothamLight', sans-serif;
	overflow-x: hidden ;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 15px;
	font-family: 'GothamLight', sans-serif;
	color: white;
	font-weight: 400;
	line-height: 26px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

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

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 40px;
}

.section-title span {
	color: #6685c2;
	font-size: 16px;
	font-weight: 600;
	
	letter-spacing: 1px;
	display: block;
	margin-bottom: 12px;
}

.section-title h2 {
	font-size: 30px;
	color: white;
	line-height: 50px;
	
}


.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
	
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}


/* buttons */

.primary-btn {
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	padding: 16px 50px;
	color: #ffffff;
	position: relative;
}
.wobble-chunk {

	
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  .squishy-frame {
	position: relative;
	width: 100%;
	max-width: 960px;
	padding-bottom: 55%; /* matches your embed ratio */
	height: 0;
	overflow: hidden;
	border-radius: 16px;
	
  }
  
  .squishy-frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
  }
  
.animated-africa {
    text-align: center;
    font-weight: bold;
    background: linear-gradient(
      270deg,
      #e63946,
      #f4a261,
      #f6bd60,
      #2a9d8f,
      #264653,
      #8338ec,
      #e63946
    );
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: rainbowFlow 5s linear infinite;
  }

.primary-btn.normal-btn {
	color: white;
}

.primary-btn.normal-btn:before {
	border-color: #6685c2;
}

.primary-btn.normal-btn:after {
	border-color: #6685c2;
}

.primary-btn:before {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 28px;
	width: 28px;
	border-left: 2px solid rgba(255, 255, 255, 0.2);
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
	content: "";
	border-radius: 0 0 0 4px;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.primary-btn:after {
	position: absolute;
	right: 0;
	top: 0;
	height: 28px;
	width: 28px;
	border-right: 2px solid rgba(255, 255, 255, 0.2);
	border-top: 2px solid rgba(255, 255, 255, 0.2);
	content: "";
	border-radius: 0 4px 0 0;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.primary-btn:hover:before {
	height: 100%;
	width: 100%;
	border-radius: 4px;
}

.primary-btn:hover:after {
	height: 100%;
	width: 100%;
	border-radius: 4px;
}

.site-btn {
	font-size: 16px;
	color: #ffffff;
	background: #6685c2;
	font-weight: 600;
	border: none;
	display: inline-block;
	padding: 14px 36px;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

/*---------------------
  Header
-----------------------*/

.header {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9;
	padding: 30px 0 0;
	overflow-x: hidden;
	max-width: 100%;
	overflow-y: hidden;
}

.header.header-normal {
	position: relative;
	padding: 30px 0 30px;
}
.header__logo {
	width: 150px;
	margin-left: 50px;
	margin-top: -4px;
}
.header__logo a {
	display: inline-block;
}

.header__menu {
	text-align: center;
	width: 140%;
	
}

.header__menu ul li {
	list-style: none;
	display: inline-block;
	position: relative;
	margin-right: 15px;
}

.header__menu ul li.active a:after {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.header__menu ul li:hover a:after {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.header__menu ul li:hover .dropdown {
	top: 32px;
	opacity: 1;
	visibility: visible;
}

.header__menu ul li:last-child {
	margin-right: 0;
}

.header__menu ul li .dropdown {
	position: absolute;
	left: 0;
	top: 62px;
	width: 200px;
	background: #ffffff;
	text-align: left;
	padding: 5px 0;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.header__menu ul li .dropdown li {
	display: block;
	margin-right: 0;
}

.header__menu ul li .dropdown li a {
	font-size: 14px;
	color: #111111;
	font-weight: 400;
	padding: 5px 20px;
	text-transform: capitalize;
}

.header__menu ul li .dropdown li a:after {
	display: none;
}

.header__menu ul li a {
	font-size: 15px;
	color: #ffffff;
	display: block;
	font-weight: 600;
	padding: 5px 0;
	position: relative;
}

.header__menu ul li a:after {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: #6685c2;
	content: "";
	-webkit-transition: all, 0.4s;
	-o-transition: all, 0.4s;
	transition: all, 0.4s;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.header__widget {
	text-align: right;
}

.header__widget span {
	font-size: 14px;
	font-family: 'GothamLight', sans-serif;
	color: #b7b7b7;
	display: block;
	margin-bottom: 10px;
}

.header__widget h4 {
	font-size: 22px;
	color: #dfa667;
}

.offcanvas-menu-wrapper {
	display: none;
}

.canvas__open {
	display: none;
}
.offcanvas-menu-wrapper {
    overflow-y: auto; /* Enables scrolling but hides scrollbar */
    scrollbar-width: none; /* Hides scrollbar for Firefox */
    -ms-overflow-style: none; /* Hides scrollbar for IE/Edge */
}

.offcanvas-menu-wrapper::-webkit-scrollbar {
    display: none; /* Hides scrollbar for Chrome, Safari */
}
.offcanvas-menu-wrapper ul {
    list-style: none; /* Removes bullet points */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
}

.offcanvas-menu-wrapper ul li a {
    color: white;
    font-size: 15px;
    text-decoration: none; /* Removes underline */
    display: block; /* Makes the entire area clickable */
    padding: 10px 15px; /* Adds spacing for better touch interaction */
    border-radius: 5px; /* Smooth rounded edges */
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out, background 0.3s ease-in-out;
}

.offcanvas-menu-wrapper ul li {
    padding-bottom: 10px;
	
}

/* Hover effect */
.offcanvas-menu-wrapper ul li a:hover {
    color: #6685c2; /* Highlight color */
    transform: translateX(5px); /* Adds subtle movement */
    background: rgba(255, 255, 255, 0.1); /* Adds a light background effect */
}

/* Active Link Style */
.offcanvas-menu-wrapper ul li.active a {
    font-weight: bold;
    background: rgba(255, 255, 255, 0.15);
    color: #6685c2;
}


/*---------------------
  Hero
-----------------------*/


.hero {
    position: relative;
    
    overflow: hidden;
   
    background-attachment: fixed; /* Keeps the background fixed */
    display: flex;
	background-size: cover;
    align-items: center;
    justify-content: center;
	background-image: url(/img/imgi_32_391453262_342167304859200_404446463977443634_n\ \(1\).webp);
}
#mir{
	display: none;
}
.background-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90vh;
    background: url('/img/dmbanner.webp') no-repeat center center;
    background-size: cover;
    z-index: -1; /* Keeps it behind content */
    display: none; /* Hide by default */
}

@media (max-width: 768px) {
	.hero{
		text-align: center;
		background-repeat: no-repeat;
		background-attachment:scroll;
		background-image: url(/img/dmbanner.webp);
		background-size: cover;
		height: 90vh;
		
	}
	
	.header__logo{
		margin-left: -10px;
	}
	
	body {
        background: none; /* Remove fixed background on mobile */
		overflow-x: hidden;
    }

    .background-fixed {
        display: block; /* Show the div on mobile */
    }
	.background-fixeds {
        display: block; /* Show the div on mobile */
    }
	#backid{
		display: none;
	}

  
	.about{
		background: none;
	}
	.hero__items {
		position: relative;
		top: -90px;
		
	}
	.hero__text h2{
		font-size: 1px;
	}
}
.about{
	
	background-size: contain;
	color: black;
	background-attachment: fixed;
	margin-top: 20px;
	
}

.abouts{
	background-image: url(/img/hero/logos\ \(2\).webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 40% 30%;
	background-attachment: fixed;
	color: white;
	width: 100%;
	
	overflow-x: hidden;
	justify-content: center;
	align-items: center;
}


.project {
    position: relative;
    width: 100%;
    height: 100vh; /* Full-screen height */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-section {
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    height: 100vh; /* Full height of the viewport */
    background-color: #f8f8f8;
	
}

.video-container {
    position: relative;
    width: 60%; /* Makes it 60% of the screen width */
    max-width: 800px; /* Limits max width */
}

.video-thumbnail {
    position: relative;
    cursor: pointer;
    width: 100%;
}

.video-thumbnail img {
    width: 100%; /* Ensures image fills container */
    border-radius: 10px;
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Maintains 16:9 aspect ratio */
    display: none; /* Initially hidden */
}
@media (max-width: 768px) {
	.carousel-item {
		min-width: 100%;
	}
	.video-section{
		height: 60vh;
		margin-top: -50px;

	}
	.abouts{
		background-size: cover;
		background-image: url(/img/hero/logos\ \(2\).webp);
		
		
		background-attachment:scroll;

		
	}
	.unique-latest-section{
		margin-top: -100px;
	}
	.video-container {
		width: 90%;
	}
	.play-button {
		width: 60px;
		height: 60px;
		font-size: 18px;
	}
}
.unique-carousel-btn {
	position: absolute;
	top: 30%;
	transform: translateY(-50%);
	background: white;
	border: none;
	cursor: pointer;
	font-size: 18px;
	padding: 10px;
	border-radius: 10px;
	transition: background 0.3s;
	z-index: 10;
}
.unique-carousel-btn:hover {
	background: white;
}
.prev-btn {
	left: 10px;
}
.next-btn {
	right: 10px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.backs {
    position: absolute;
	overflow-x: hidden;
	overflow-y: hidden;
    
    width: 100%;         /* Full width */
    height: 100vh;        /* Full height */
    background-image: url('/img/rfsa_pattern.svg');
    background-size: contain;        /* Cover entire space */
    background-position: center;   /* Center the image */
    background-repeat: no-repeat;
    z-index: -1;          /* Send it behind everything */
  }
  .backsw {
    position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	background-attachment: fixed;
    
    width: 100%;         /* Full width */
    height: 100vh;        /* Full height */
    background-image: url('/img/2.png');
    background-size: contain;        /* Cover entire space */
    background-position: center;   /* Center the image */
    background-repeat: no-repeat;
    z-index: 1;          /* Send it behind everything */
  }
  .backsu {
    position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	background-attachment: fixed;
    
    width: 100%;         /* Full width */
    height: 100vh;        /* Full height */
    background-image: url('/img/south\ africa\ and\ 9ja.png');
    background-size: contain;        /* Cover entire space */
    background-position: center;   /* Center the image */
    background-repeat: no-repeat;
    z-index: 1;          /* Send it behind everything */
  }
  .backsc {
    position: relative;
	overflow-x: hidden;
	overflow-y: hidden;
	background-attachment: fixed;
    
   
    background-image: url('/img/kenya\ and\ 9ja.png');
    background-size: contain;        /* Cover entire space */
    background-position: center;   /* Center the image */
    background-repeat: no-repeat;
    z-index: 1;          /* Send it behind everything */
  }
  .backsl {
    position: absolute;
	overflow-x: hidden;
	overflow-y: hidden;
    
    width: 90%;         /* Full width */
    height: 100vh;        /* Full height */
    background-image: url('/img/natiion.png');
    background-size: contain;        /* Cover entire space */
    background-position: center;   /* Center the image */
    background-repeat: no-repeat;
    z-index: -1;          /* Send it behind everything */
  }


.unique-latest-section {
	padding: 50px 0;
	margin-bottom: 100px;
	background-size: contain;
	background-attachment: fixed;
	width: 100%;
	overflow-x: hidden;
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2 columns */
	align-items: stretch; /* VERY IMPORTANT - makes all items same height */
	
	
	justify-content: space-between; /* optional: spaces items nicely */
	gap: 20px; /* optional: spacing between items */

}
.unique-latest-sectiono {
	padding: 50px 0;
	
	background-size: contain;
	background-attachment: fixed;
	width: 100%;
	overflow-x: hidden;
	

}
.uns{
	background-color: #010d24;
	border-radius: 22px;
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	padding: 16px 50px;
}
.unique-latest-sections {
	padding: 50px 0;
	
	background-size: contain;
	background-attachment: fixed;
	width: 100%;
	overflow-x: hidden;
	
	
	  
}

.unique-container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	height: 100%;
	background-image: url(/img/Background\ Landscape.jpg);
	background-attachment: fixed;
	background-size: contain;
	background-position: center;
   

	
}
.unique-containerz {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	height: 100%;
	display: flex;
	

	
}

/* HEADER STYLES */
.unique-header {
	
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.unique-header h2 {
	font-size: 28px;
	font-weight: bold;
	color: white;
	margin-bottom: 40px;
}

.unique-btn {
	text-decoration: none;
	padding: 10px 10px;
	padding-left: 20px;
	padding-right: 20px;
	background: transparent;
	color: 	white;
	border: solid 1px white;
	transition: 0.3s ease;
	font-size: 18px;
	z-index: 0;
	width: 150%;
	justify-content: center;
	align-self: center;
	justify-self: center;
	
	
	position: relative;
}

.unique-btn:hover {
	background: #6685c2;
	
}
.section{
	overflow-y: hidden;
}

/* CAROUSEL STYLES */
.unique-carousel-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: 8px;
	margin-top: 60px;
}

.unique-carousel-track {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

.unique-carousel-item {
	flex: 0 0 calc(100% / 3);
	max-width: calc(100% / 3);
	text-align: center;
	border: solid 1px #6685c2;
	padding: 15px;
	margin-left: 30px;
	border-radius: 8px;
	
	transition: transform 0.3s ease;
	margin-bottom: 100px;
	box-shadow: 5px  10px 15px rgba(215, 213, 213, 0.3);
}



.unique-carousel-item img {
	width: 100%;
	border-radius: 6px;
	margin-bottom: 10px;
	box-shadow: 5px 5px white;
}

.unique-carousel-item h4 {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 6px;
	color: white;
}

.unique-carousel-item a {
	text-decoration: none;
	font-weight: bold;
	color: #6685c2;
	transition: 0.3s ease;
	font-size: 14px;
	text-decoration: underline;
}

.unique-carousel-item a:hover {
	text-decoration: underline;
}

/* MOBILE VIEW - 2 ITEMS PER SCREEN */
@media (max-width: 768px) {
	.unique-carousel-item {
		flex: 0 0 50%;
		max-width: 50%;
		margin-bottom: 200px;
		
	}
	.about__pic__inner{
		margin-bottom: -180px;
	}
	
	#contact-form{
		margin-bottom: 200px;
	}
	
	.unique-carousel-item img {
		
		box-shadow: 5px 5px white;
	}
	.testimonial{
		
		background-color: white;
	}
	
	.unique-btn{
		width: 150px;
	}
	
}

/* MOBILE VIEW - 1 ITEM PER SCREEN */
@media (max-width: 480px) {
	.unique-carousel-item {
		flex: 0 0 90%;
		max-width: 90%;
		left: 5px;
	}
	
	
}

/* NAVIGATION BUTTONS */

.unique-carousel-btn-left {
	left: 5px;
}

.unique-carousel-btn-right {
	right: 5px;
}



.hero__slider {
    width: 100%;
    height: 100%;
    overflow-y: hidden; /* Enables vertical scrolling */
    padding: 40px 0;
	
}

.hero__items {
    min-height: 960px; /* Ensures content height is large enough to scroll */
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.hero__text {
    max-width: 820px;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    color: white; /* Ensure text is visible */
}

.hero__text h2 {
	color: #ffffff;
	font-size: 62px;
	line-height: 80px;
	text-transform: uppercase;
	margin-bottom: 45px;
	position: relative;
	top: 100px;
	opacity: 0;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.hero__text .primary-btn {
	position: relative;
	top: 100px;
	opacity: 0;
	-webkit-transition: all, 0.6s;
	-o-transition: all, 0.6s;
	transition: all, 0.6s;
}

.hero__text .more_btn {
	font-size: 14px;
	color: #b7b7b7;
	position: absolute;
	left: 50%;
	margin-left: -50px;
	bottom: 55px;
}

.hero__text .hero__social {
	position: absolute;
	right: 145px;
	bottom: 55px;
}

.hero__text .hero__social a {
	display: inline-block;
	font-size: 18px;
	color: #ffffff;
	margin-right: 36px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.hero__text .hero__social a:hover {
	color: #dfa667;
}

.hero__text .hero__social a:last-child {
	margin-right: 0;
}

.hero__slider.owl-carousel .owl-item.active .hero__text h2 {
	top: 0;
	opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text .primary-btn {
	top: 0;
	opacity: 1;
}

.hero__slider.owl-carousel .owl-dots {
	display: none;
}

.hero__slider.owl-carousel .owl-nav button {
	font-size: 28px;
	color: #ffffff;
	position: absolute;
	left: 145px;
	top: 50%;
	display: inline-block;
	height: 50px;
	width: 50px;
	margin-top: -25px;
}

.hero__slider.owl-carousel .owl-nav button.owl-next {
	left: auto;
	right: 145px;
}

.hero__slider.owl-carousel .owl-nav button:before {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 20px;
	width: 20px;
	border-left: 2px solid rgba(255, 255, 255, 0.2);
	border-bottom: 2px solid rgba(255, 255, 255, 0.2);
	content: "";
	border-radius: 0 0 0 4px;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.hero__slider.owl-carousel .owl-nav button:after {
	position: absolute;
	right: 0;
	top: 0;
	height: 20px;
	width: 20px;
	border-right: 2px solid rgba(255, 255, 255, 0.2);
	border-top: 2px solid rgba(255, 255, 255, 0.2);
	content: "";
	border-radius: 0 4px 0 0;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.hero__slider.owl-carousel .owl-nav button:hover:before {
	height: 100%;
	width: 100%;
	border-radius: 4px;
}

.hero__slider.owl-carousel .owl-nav button:hover:after {
	height: 100%;
	width: 100%;
	border-radius: 4px;
}

.slide-num {
	position: absolute;
	left: 145px;
	bottom: 55px;
	z-index: 9;
}

.slide-num span {
	font-size: 16px;
	color: #ffffff;
	font-weight: 600;
	margin-right: 140px;
}

.slide-num span:last-child {
	margin-right: 0;
}

.slider__progress {
	width: 100px;
	height: 1px;
	background: rgba(255, 255, 255, 0.3);
	position: absolute;
	left: 180px;
	bottom: 67px;
	z-index: 9;
}

.slider__progress span {
	background: #ffffff;
	height: 2px;
	display: block;
	-webkit-transition: all, 0.4s;
	-o-transition: all, 0.4s;
	transition: all, 0.4s;
	position: relative;
	top: -1px;
}

/*---------------------
  Project Slider
-----------------------*/

.video-section {
	padding: 0 15px;
	background-image: url(/img/Background\ Landscape.jpg);
	background-size: contain;
	background-attachment: fixed;
}

.project__slider__item {
	height: 600px;
	position: relative;
	overflow: hidden;
}

.project__slider__item:hover .project__slider__item__hover {
	bottom: 30px;
}

.project__slider__item:hover .project__slider__item__hover span {
	left: 0;
}

.project__slider__item:hover .project__slider__item__hover h5 {
	right: 0;
}

.project__slider.owl-carousel .col-lg-3 {
	max-width: 100%;
	border: #000 solid 2px;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

.services {
    background-color: #f8f9fc;
    padding: 80px 0;
    font-family: 'GothamLight', sans-serif;
	
	background-size: contain;
	background-attachment: fixed;
	
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
	overflow-x: hidden;
}

.section-title span {
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin-bottom: 10px;
}

.section-title h2 {
    font-size: 32px;
    font-weight: 700;
	color: white;
    
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.services__item {
	
    padding: 30px;
	background-color:white;
    border-radius: 2px;
    text-align: left;

    -webkit-backdrop-filter: blur(10px); /* For Safari */
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    min-height: 250px; /* Ensures uniform height */
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    opacity: 0; /* Initially hidden */
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-in-out forwards;
	box-shadow: 5px 5px #6685c2;
}


/* Make all boxes the same height */
.services__item h4 {
    flex-grow: 1; /* Pushes text to center */
    display: flex;
    align-items: left;
    justify-content: left;
    text-align: left;
	color: white;
}

/* Fade-in effect */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fade-in {
    animation: fadeInUp 5s ease-in-out forwards;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}



/* Hover effect */
.services__item:hover {
    background: #070f21;
    color: #fff;
    transform: translateY(-10px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
	transition: background 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 5px 5px #6685c2;
}
.services__item h3{
	color: white;
}
.services__item h4{
	color: white;
}


.services__item:hover h3, 
.services__item:hover h4 {
    color: #fff;
	transition: color 0.3s ease;
}


.project__slider.owl-carousel .owl-nav button {
	height: 50px;
	width: 50px;
	background: #ffffff;
	font-size: 28px;
	color: #111111;
	position: absolute;
	left: 35px;
	top: 50%;
	margin-top: -25px;
	line-height: 54px;
	text-align: center;
}

.project__slider.owl-carousel .owl-nav button.owl-next {
	left: auto;
	right: 35px;
}

.project__slider__item__hover {
	text-align: center;
	background: #ffffff;
	position: absolute;
	left: 25px;
	bottom: -500px;
	width: calc(100% - 50px);
	padding: 25px 15px;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
	overflow: hidden;
}

.project__slider__item__hover span {
	color: #dfa667;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 10px;
	position: relative;
	left: 30px;
	-webkit-transition: all, 1s;
	-o-transition: all, 1s;
	transition: all, 1s;
}

.project__slider__item__hover h5 {
	color: #111111;
	font-size: 20px;
	text-transform: uppercase;
	position: relative;
	right: 30px;
	-webkit-transition: all, 1s;
	-o-transition: all, 1s;
	transition: all, 1s;
}

/*---------------------
  Testimonial
-----------------------*/

.testimonial__carousel {
	position: relative;
	overflow: hidden;
	background: #ffffff;
	padding: 75px 60px 90px;
	margin-bottom: 20px;
	-webkit-box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
	box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
	
}

.testimonial__carousel:after {
	position: absolute;
	content: "";
	left: calc(50% - 85px);
	bottom: -115px;
	width: 170px;
	height: 170px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	-webkit-box-shadow: inset 0 0 21px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 0 21px rgba(0, 0, 0, 0.2);
}

.testimonial__carousel button.slick-arrow {
	font-size: 28px;
	color: #111111;
	position: absolute;
	left: 30px;
	top: 50%;
	display: inline-block;
	height: 50px;
	width: 50px;
	margin-top: -25px;
	background: transparent;
	border: none;
}

.testimonial__carousel button.slick-arrow.slick-next {
	left: auto;
	right: 30px;
}

.testimonial__carousel button.slick-arrow:before {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 20px;
	width: 20px;
	border-left: 2px solid rgba(0, 0, 0, 0.2);
	border-bottom: 2px solid rgba(0, 0, 0, 0.2);
	content: "";
	border-radius: 0 0 0 4px;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.testimonial__carousel button.slick-arrow:after {
	position: absolute;
	right: 0;
	top: 0;
	height: 20px;
	width: 20px;
	border-right: 2px solid rgba(0, 0, 0, 0.2);
	border-top: 2px solid rgba(0, 0, 0, 0.2);
	content: "";
	border-radius: 0 4px 0 0;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.testimonial__carousel button.slick-arrow:hover:before {
	height: 100%;
	width: 100%;
	border-radius: 4px;
}

.testimonial__carousel button.slick-arrow:hover:after {
	height: 100%;
	width: 100%;
	border-radius: 4px;
}

.testimonial__item {
	text-align: center;
}

.testimonial__item p {
	font-size: 24px;
	color: #111111;
	font-weight: 300;
	font-style: italic;
	line-height: 48px;
}

.testimonial__client {
	margin-top: -75px;
	margin-bottom: 50px;
}

.testimonial__client .slick-track {
	-webkit-transition: all 0.1s;
	-o-transition: all 0.1s;
	transition: all 0.1s;
}

.testimonial__client .slick-slide {
	padding-top: 80px;
}

.testimonial__client .slick-slide {
	width: 100px;
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

.testimonial__client .slick-slide.slick-center {
	width: 180px;
}

.testimonial__client .testimonial__client__pic img {
	-webkit-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
}

.slick-active.slick-center {
	padding-top: 35px;
}

.slick-active.slick-center .testimonial__client__pic {
	height: 150px;
	width: 150px;
	position: absolute;
	left: 0px;
	top: -30px;
	right: -15px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	padding-top: 5px;
}

.slick-active.slick-center .testimonial__client__pic img {
	margin: 0 auto;
	width: 150px;
	height: 150px;
}

.slick-active.slick-center .testimonial__client__text {
	display: block;
	margin-top: -8px;
}

.testimonial__client__item {
	text-align: center;
	cursor: pointer;
}

.testimonial__client__item .testimonial__client__pic {
	height: 70px;
	width: 70px;
	margin: 0 auto;
}

.testimonial__client__item .testimonial__client__pic img {
	border-radius: 50%;
}
.testimonial{
	width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
	background-color: white;
}

.testimonial__client__item .testimonial__client__text {
	display: none;
}

.testimonial__client__item h5 {
	color: #111111;
	font-weight: 600;
	font-family: 'GothamLight', sans-serif;
	font-size: 15px;
	margin-bottom: 5px;
}

.testimonial__client__item span {
	font-size: 14px;
	color: #dfa667;
	display: block;
}

.logo__carousel.owl-carousel .owl-item img {
	display: inline-block;
	width: auto;
}

.logo__carousel .logo__carousel__item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 62px;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	
}

/*---------------------
  Team
-----------------------*/

.team {
	padding-top: 120px;
	padding-bottom: 90px;
}

.team__btn {
	text-align: right;
}

.team__item {
	height: 480px;
	position: relative;
	z-index: 1;
	margin-bottom: 30px;
}

.team__item:after {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: rgba(17, 17, 17, 0.9);
	content: "";
	z-index: -1;
	opacity: 0;
	-webkit-transition: all, 0.5s, ease-out, 0.5s;
	-o-transition: all, 0.5s, ease-out, 0.5s;
	transition: all, 0.5s, ease-out, 0.5s;
}

.team__item:hover:after {
	opacity: 1;
}

.team__item:hover .team__text .team__title {
	border-bottom: 1px solid rgba(183, 183, 183, 0.2);
	padding: 0 0 32px;
	margin-bottom: 34px;
	opacity: 0;
	visibility: hidden;
	position: relative;
	bottom: initial;
	opacity: 1;
	visibility: visible;
}

.team__item:hover .team__text p {
	opacity: 1;
	visibility: visible;
}

.team__item:hover .team__text .team__social {
	opacity: 1;
	visibility: visible;
	bottom: 34px;
}

.team__text {
	height: 100%;
	position: relative;
	padding: 35px 30px 40px;
}

.team__text .team__title {
	position: absolute;
	left: 0;
	bottom: 42px;
	width: 100%;
	padding: 0 30px;
	-webkit-transition: all, 0.7s, ease-out, 0.7s;
	-o-transition: all, 0.7s, ease-out, 0.7s;
	transition: all, 0.7s, ease-out, 0.7s;
}

.team__text .team__title h5 {
	color: #ffffff;
	font-weight: 600;
	font-family: 'GothamLight', sans-serif;
	margin-bottom: 6px;
}

.team__text .team__title span {
	font-size: 14px;
	color: #dfa667;
}

.team__text p {
	color: #b7b7b7;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.7s, ease-out, 0.7s;
	-o-transition: all, 0.7s, ease-out, 0.7s;
	transition: all, 0.7s, ease-out, 0.7s;
}

.team__text .team__social {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 0 30px;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.7s, ease-out, 0.7s;
	-o-transition: all, 0.7s, ease-out, 0.7s;
	transition: all, 0.7s, ease-out, 0.7s;
}

.team__text .team__social a {
	display: inline-block;
	font-size: 20px;
	color: #ffffff;
	margin-right: 34px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.team__text .team__social a:last-child {
	margin-right: 0;
}

.team__text .team__social a:hover {
	color: #dfa667;
}

/*---------------------
  Call To Action
-----------------------*/

.callto {
	padding-top: 130px;
	padding-bottom: 135px;
}

.callto__text span {
	font-size: 16px;
	color: #dfa667;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	margin-bottom: 35px;
}

.callto__text h2 {
	font-size: 42px;
	color: #ffffff;
	line-height: 52px;
	text-transform: uppercase;
	margin-bottom: 36px;
}

.callto__text .primary-btn {
	background: #dfa667;
	color: #ffffff;
	border-radius: 4px;
}

.callto__text .primary-btn:before {
	display: none;
}

.callto__text .primary-btn:after {
	display: none;
}

/*---------------------
  Latest
-----------------------*/

.latest {
	padding-top: 120px;
	padding-bottom: 90px;
	background-image: url(/img/Background\ Landscape.jpg);
	background-attachment: fixed;
	background-size: contain;
}

.latest__btn {
	text-align: right;
}

.latest__item {
	-webkit-box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
	box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
	margin-bottom: 30px;
}

.latest__item img {
	min-width: 100%;
}

.latest__item:hover a {
	padding-left: 0;
}

.latest__item:hover a:after {
	left: auto;
	right: -50px;
}

.latest__item__text {
	padding-top: 25px;
	background: #ffffff;
	padding: 25px 35px 20px;
}

.latest__item__text span {
	color: #b7b7b7;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 10px;
}

.latest__item__text h4 {
	color: #111111;
	font-size: 22px;
	font-family: 'GothamLight', sans-serif;
	font-weight: 600;
	line-height: 32px;
	margin-bottom: 12px;
}

.latest__item__text a {
	font-size: 14px;
	color: #111111;
	font-weight: 600;
	position: relative;
	padding-left: 40px;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.latest__item__text a:after {
	position: absolute;
	left: 0;
	top: 8px;
	height: 1px;
	width: 30px;
	background: #dfa667;
	content: "";
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

/*---------------------
  Project
-----------------------*/

.project__item {
	margin-bottom: 50px;
	text-align: center;
}

.project__item img {
	min-width: 100%;
	margin-bottom: 26px;
}

.project__item h4 a {
	color: #111111;
	
}

/*---------------------
  Project Details
-----------------------*/

.project-details {
	padding-top: 120px;
	padding-bottom: 90px;
}


.project-details img {
	margin-bottom: 30px;
	min-width: 100%;
}

.project__sidebar__about {
	margin-bottom: 35px;
}

.project__sidebar__about h2 {
	color: #111111;
	line-height: 50px;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.project__sidebar__about p {
	margin-bottom: 26px;
}

.project__sidebar__about p:last-child {
	margin-bottom: 0;
}

.product__details__widget__item {
	margin-bottom: 30px;
}

.product__details__widget__item span {
	color: #707070;
	font-size: 15px;
	display: block;
	margin-bottom: 10px;
}

.product__details__widget__item h4 {
	color: #111111;
	
}

.product__details__widget__item p {
	color: #111111;
	font-size: 24px;
	line-height: 36px;
}

/*---------------------
  Footer
-----------------------*/

.footer {
	padding-top: 90px;
	margin-top: -100px;
	background-image: url(/img/Background\ Landscape.jpg);
	background-size: contain;
	background-attachment: fixed;
}

.footer__top {
	border-bottom: 1px solid rgba(183, 183, 183, 0.2);
	padding-bottom: 5px;
	margin-bottom: 25px;
}

.footer__top__text h2 {
	color: #ffffff;
	font-size: 30px;
	
}

.footer__top__newslatter form {
	position: relative;
}

.footer__top__newslatter form input {
	width: 100%;
	height: 50px;
	color: #b7b7b7;
	padding-left: 30px;
	font-size: 14px;
	border: none;
}

.footer__top__newslatter form input::-webkit-input-placeholder {
	color: #b7b7b7;
}

.footer__top__newslatter form input::-moz-placeholder {
	color: #b7b7b7;
}

.footer__top__newslatter form input:-ms-input-placeholder {
	color: #b7b7b7;
}

.footer__top__newslatter form input::-ms-input-placeholder {
	color: #b7b7b7;
}

.footer__top__newslatter form input::placeholder {
	color: #b7b7b7;
}

.footer__top__newslatter form button {
	font-size: 14px;
	color: #ffffff;
	background: #6685c2;
	border: none;
	height: 100%;
	padding: 0 20px;
	position: absolute;
	right: 0;
	top: 0;
}

.footer__about {
	margin-bottom: 30px;
}

.footer__about .footer__logo {
	margin-bottom: 24px;
}

.footer__about .footer__logo a {
	display: inline-block;
}

.footer__about p {
	margin-bottom: 30px;
}

.footer__about ul {
	margin-bottom: 38px;
}

.footer__about ul li {
	font-size: 15px;
	list-style: none;
	line-height: 26px;
	color: #707070;
}

.footer__about .footer__social a {
	font-size: 18px;
	color: #ffffff;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	margin-right: 30px;
}

.footer__about .footer__social a:hover {
	color: #dfa667;
}

.footer__about .footer__social a:last-child {
	margin-right: 0;
}

.footer__widget {
	margin-bottom: 30px;
}

.footer__widget h6 {
	color: #ffffff;
	font-weight: 600;
	font-family: 'GothamLight', sans-serif;
	margin-bottom: 30px;
}

.footer__widget ul li {
	list-style: none;
}

.footer__widget ul li a {
	font-size: 15px;
	color: #707070;
	line-height: 36px;
}

.footer__address {
	margin-bottom: 30px;
}

.footer__address h6 {
	color: #ffffff;
	font-weight: 600;
	font-family: 'GothamLight', sans-serif;
	margin-bottom: 30px;
}

.footer__address p {
	margin-bottom: 30px;
}

.footer__address ul li {
	font-size: 15px;
	list-style: none;
	line-height: 26px;
	color: #707070;
}

.copyright {
	border-top: 1px solid rgba(183, 183, 183, 0.2);
	padding: 25px 0;
	margin-top: 60px;
}

.copyright__text p {
	margin-bottom: 0;
}

.copyright__text p i {
	color: #dfa667;
}

.copyright__text p a {
	color: #ffffff;
}

.copyright__widget {
	text-align: right;
}

.copyright__widget a {
	font-size: 14px;
	color: #707070;
	margin-right: 36px;
	position: relative;
}

.copyright__widget a:after {
	position: absolute;
	right: -22px;
	top: -3px;
	content: "|";
}

.copyright__widget a:last-child {
	margin-right: 0;
}

.copyright__widget a:last-child:after {
	display: none;
}

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
	padding-top: 170px;
	padding-bottom: 120px;
}

.breadcrumb__text h2 {
	font-size: 42px;
	color: #ffffff;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.breadcrumb__links a {
	font-size: 15px;
	color: #ffffff;
	display: inline-block;
	position: relative;
	margin-right: 12px;
}

.breadcrumb__links a:after {
	position: absolute;
	right: -13px;
	top: 1px;
	content: "~";
}

.breadcrumb__links span {
	font-size: 15px;
	color: #dfa667;
	display: inline-block;
}

/*---------------------
  About
-----------------------*/

.about {
	padding-top: 12px;
	padding-bottom: 15px;
	overflow: hidden;
}

.about-page {
	padding-top: 120px;
	padding-bottom: 90px;
}

.about__text {
	padding-top: 100px;
}



.about__text.about__page__text {
	padding-top: 0;
	
}
.iccon{
	border-radius: 10px;
	width: 30%;
	padding-bottom: 20px;
	margin-top: 10px;
	
}


.about__text.about__page__text .section-title {
	margin-bottom: 12px;
}

.about__text .section-title {
	margin-bottom: 35px;
	text-align: left;
}

.about__para__text {
	margin-bottom: 70px;
}

.about__para__text p {
	margin-bottom: 36px;
	text-align: left;
	color: black;
	
	
}

.about__para__text p:last-child {
	margin-bottom: 0;
}

.about__pic {
	padding-left: 34px;
}

.about__pic {
	position: relative;
	width: 100%;
	height: 90vh;
	overflow: hidden;
  }
  
  .about__pic__inner {
	position: relative;
	width: 100%;
	height: 100%;
  }
  
  .about__pic__inner img.fader {
	position: absolute;
	top: 0; left: 0;
	
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
	z-index: 0;
  }
  
  .about__pic__inner img.fader.is-visible {
	opacity: 1;
	z-index: 1;
  }.about__page__services__text {
	margin-bottom: 30px;
}

/*---------------------
  Services
-----------------------*/
/* Main CTA Section */
.cta {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
	margin-top: 60px;
    padding: 40px 0;
    gap: 20px;
	position: relative;
    top: 180px;
    left: 50%;
    transform: translate(-50%, -50%);
	background-image: url(/img/Background\ Landscape.jpg);
	background-size: contain;
	background-attachment: fixed;
	font-family: 'GothamLight', sans-serif;
}

/* Left & Right Boxes */
.box {
	flex-basis: 45%; /* Controls width */
    max-width: 800px; /* Prevents excessive stretching */
    min-width: 300px; /* Ensures it doesn’t get too small */
    height: 400px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 12px;
    padding: 30px;
    
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Background Images */
.left {
    background-image: url('/img/bacl\ \(1\).png'); /* Change to your image */
	
	font-family: 'GothamLight', sans-serif;
}

.right {
    background-image: url('/img/bacl\ \(1\).png'); /* Change to your image */
	
	font-family: 'GothamLight', sans-serif;
	
}

/* Hover Effects */


/* Center Text & Button */
.content {
    position: relative;
    text-align: center;
    z-index: 10;
	
}

.content h2 {
    color: black;
    font-size: 2rem;
    margin-bottom: 20px;
	font-weight: 600;
}

.btn {
    display: inline-block;
    background: transparent;
	border: 1px solid #070f21;
    color: #070f21;
	
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background 0.3s ease-in-out;
	
}
.content .btn :hover{
	background-color: #070f21;
}



/* 📱 Mobile View - Stack Containers */
@media (max-width: 768px) {
    .cta {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px; /* Adds spacing between the boxes */
        width: 100%;
		margin-top: 60px;
		
    }
	.about__pic {
	position: relative;
	width: 100%;
	height: 40vh;
	overflow: hidden;
  }
	 .about__text{
      margin-top: 20px;
    }
	.about__text {
	padding-top: 1px;
}
	.about__pic__inner img{
		
		margin-top: 4px;
		margin-bottom: 2px;
		margin-left: 3px;
		border-radius: 10px;
	}
	#kor{
		margin-top: -300px;
	}
	.left{
		background-size: cover;
	}
	.right{
		background-size: cover;
	}

    .box {
        width: 90%;
        min-height: 400px; /* Ensures the box has enough height */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 20px; /* Adds some inner spacing */
    }

    .content {
        width: 80%;
    }

    .content h2 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .btn {
        margin-top: 10px;
    }
}



.services {
	padding-top: 120px;
	padding-bottom: 90px;
}

.services.services-page {
	padding-bottom: 80px;
}

.services.services-page .services__item p {
	margin-bottom: 12px;
}

.services.services-page .services__item ul li {
	color: #111111;
	font-size: 15px;
	line-height: 36px;
	list-style: none;
}

.services__item {
	margin-bottom: 30px;
}

.services__item h4 {
	color: white;
	font-size: 20px;
	margin-top: 35px;
	margin-bottom: 22px;
}

.services__item p {
	margin-bottom: 0;
}

/*---------------------
  Counter
-----------------------*/

/* Counter Section */
.counter__content {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 50px 0;
	background-color: #f8f9fa;
	box-shadow: 5px 5px #6685c2;
	background: linear-gradient(135deg, 
  #001f4d,   /* Deep Blue */
    /* Deep Purple (Indigo) */
   /* Blue */
  #04383f    /* Lemon Green */
);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	min-height: 100vh;
  }
  

.row1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 90%;
    max-width: 1200px;
}

/* Counter Item */
.counter__item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 30px;
    width: 250px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	
}

/* Number Styling */
.counter__item__number h2 {
    font-size: 2.0rem;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in-out;
}

/* Text Styling */
.counter__item__text h5 {
    font-size: 1rem;
    color: white;
    font-weight: 500;
    
    letter-spacing: 1px;
}

/* Hover Effect */
.counter__item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .row {
        flex-direction: column;
        align-items: center;
    }
	.tem{
		margin-left: 20px;
	}
	#qwep{
		width: 30%;
		margin-left: 40px;
		line-height: 20px;
	  }
	  #mir{
		display: block;
	  }
  

    .counter__item {
        width: 90%;
        height: 40vh;
    }
}

/*---------------------
  Clients
-----------------------*/

.clients {
	padding-top: 120px;
	padding-bottom: 60px;
}

.clients img {
	margin-bottom: 60px;
}

/*---------------------
    Blog
-----------------------*/

.blog {
	padding-top: 120px;
	padding-bottom: 120px;
}

.blog__item__list .blog__item:first-child {
	border: none;
	margin-bottom: 0;
}

.blog__item__list .blog__item:last-child {
	margin-bottom: 0;
}

.blog__item {
	margin-bottom: 55px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding-bottom: 55px;
}

.blog__item img {
	-webkit-box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
	box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
}

.blog__item ul {
	margin-bottom: 18px;
}

.blog__item ul li {
	list-style: none;
	font-size: 14px;
	color: #b7b7b7;
	font-weight: 500;
	text-transform: uppercase;
	display: inline-block;
	margin-right: 50px;
	position: relative;
	letter-spacing: 2px;
}

.blog__item ul li:after {
	position: absolute;
	right: -30px;
	top: -16px;
	content: ".";
	font-size: 15px;
	color: #b7b7b7;
	font-size: 25px;
}

.blog__item ul li:last-child {
	margin-right: 0;
}

.blog__item ul li:last-child:after {
	display: none;
}

.blog__item h2 {
	color: #111111;
	font-weight: 600;
	font-family: 'GothamLight', sans-serif;
	line-height: 48px;
	margin-bottom: 30px;
}

.blog__item img {
	min-width: 100%;
}

.blog__item__text {
	padding: 35px 50px 0;
}

.blog__item__text a {
	font-size: 14px;
	color: #111111;
	font-weight: 600;
	position: relative;
	padding-left: 40px;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.blog__item__text a:after {
	position: absolute;
	left: 0;
	top: 8px;
	height: 1px;
	width: 30px;
	background: #111111;
	content: "";
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.blog__item__quote {
	background: #dfa667;
	padding: 35px 50px;
	position: relative;
	margin-bottom: 55px;
}

.blog__item__quote:after {
	position: absolute;
	right: 50px;
	bottom: 26px;
	content: "“";
	font-family: 'GothamLight', sans-serif;
	font-size: 120px;
	color: #ffffff;
	opacity: 0.5;
	line-height: 0px;
}

.blog__item__quote p {
	color: #ffffff;
	font-size: 20px;
	font-family: 'GothamLight', sans-serif;
	line-height: 32px;
	text-transform: uppercase;
}

.blog__item__quote span {
	color: #ffffff;
	display: block;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 4px;
}

.blog__pagination {
	padding-top: 30px;
}

.blog__pagination a {
	font-size: 15px;
	color: #111111;
	font-weight: 600;
	display: inline-block;
	height: 40px;
	width: 40px;
	line-height: 40px;
	text-align: center;
	border: 2px solid transparent;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	margin-right: 12px;
}

.blog__pagination a i {
	font-size: 15px;
	font-weight: 600;
}

.blog__pagination a:last-child {
	margin-right: 0;
}

.blog__pagination a:hover {
	border: 2px solid #dfa667;
}

/*---------------------
  Blog Sidebar
-----------------------*/

.blog__sidebar__about {
	text-align: center;
	margin-bottom: 60px;
}

.blog__sidebar__about .author__pic {
	height: 140px;
	width: 140px;
	border-radius: 50%;
}

.blog__sidebar__about p {
	color: #353535;
	margin-top: 22px;
	margin-bottom: 25px;
}

.blog__sidebar__search {
	margin-bottom: 55px;
}

.blog__sidebar__search form {
	position: relative;
}

.blog__sidebar__search form input {
	width: 100%;
	font-size: 15px;
	color: #b7b7b7;
	border: none;
	background: transparent;
	border-bottom: 1px solid #b7b7b7;
	padding-bottom: 12px;
}

.blog__sidebar__search form input::-webkit-input-placeholder {
	color: #b7b7b7;
}

.blog__sidebar__search form input::-moz-placeholder {
	color: #b7b7b7;
}

.blog__sidebar__search form input:-ms-input-placeholder {
	color: #b7b7b7;
}

.blog__sidebar__search form input::-ms-input-placeholder {
	color: #b7b7b7;
}

.blog__sidebar__search form input::placeholder {
	color: #b7b7b7;
}

.blog__sidebar__search form button {
	font-size: 15px;
	color: #b7b7b7;
	border: none;
	background: transparent;
	position: absolute;
	right: 0;
	top: 0;
}

.blog__sidebar__categories {
	margin-bottom: 40px;
}

.blog__sidebar__categories h5 {
	font-size: 20px;
	color: #111111;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.blog__sidebar__categories ul li {
	list-style: none;
	font-size: 15px;
	color: #b7b7b7;
	line-height: 42px;
}

.blog__sidebar__feature {
	margin-bottom: 55px;
}

.blog__sidebar__feature h5 {
	font-size: 20px;
	color: #111111;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.blog__sidebar__feature__item {
	display: block;
	overflow: hidden;
	margin-bottom: 25px;
}

.blog__sidebar__feature__item:last-child {
	margin-bottom: 0;
}

.blog__sidebar__feature__item__pic {
	float: left;
	margin-right: 20px;
}

.blog__sidebar__feature__item__text {
	overflow: hidden;
}

.blog__sidebar__feature__item__text span {
	font-size: 12px;
	color: #b7b7b7;
	font-weight: 600;
	letter-spacing: 2px;
	display: block;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.blog__sidebar__feature__item__text h6 {
	color: #111111;
	font-size: 15px;
	font-family: 'GothamLight', sans-serif;
	font-weight: 600;
	line-height: 26px;
}

.blog__sidebar__tag {
	margin-bottom: 60px;
}

.blog__sidebar__tag h5 {
	font-size: 20px;
	color: #111111;
	text-transform: uppercase;
	margin-bottom: 15px;
}

.blog__sidebar__tag a {
	display: inline-block;
	font-size: 13px;
	color: #b7b7b7;
	letter-spacing: 1px;
	font-weight: 600;
	text-transform: uppercase;
	margin-right: 12px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	position: relative;
	margin-bottom: 4px;
}

.blog__sidebar__tag a:after {
	position: absolute;
	right: -10px;
	top: 7px;
	height: 4px;
	width: 4px;
	background: #b7b7b7;
	border-radius: 50%;
	content: "";
}

.blog__sidebar__tag a:last-child:after {
	display: none;
}

.blog__sidebar__tag a:hover {
	color: #111111;
}

.blog__sidebar__social {
	margin-bottom: 55px;
}

.blog__sidebar__social h5 {
	font-size: 20px;
	color: #111111;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.blog__sidebar__social a {
	display: inline-block;
	height: 34px;
	width: 34px;
	font-size: 18px;
	color: #707070;
	line-height: 34px;
	text-align: center;
	border: 1px solid transparent;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	margin-right: 46px;
	position: relative;
}

.blog__sidebar__social a:after {
	position: absolute;
	right: -40px;
	top: 15px;
	height: 1px;
	width: 30px;
	background: rgba(0, 0, 0, 0.2);
	content: "";
}

.blog__sidebar__social a:last-child {
	margin-right: 0;
}

.blog__sidebar__social a:last-child:after {
	display: none;
}

.blog__sidebar__social a:hover {
	color: #dfa667;
	border-color: #dfa667;
}

.blog__sidebar__newslatter h5 {
	font-size: 20px;
	color: #111111;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.blog__sidebar__newslatter form {
	position: relative;
}

.blog__sidebar__newslatter form input {
	width: 100%;
	font-size: 15px;
	color: #b7b7b7;
	border: none;
	background: transparent;
	border-bottom: 1px solid #b7b7b7;
	padding-bottom: 12px;
}

.blog__sidebar__newslatter form input::-webkit-input-placeholder {
	color: #b7b7b7;
}

.blog__sidebar__newslatter form input::-moz-placeholder {
	color: #b7b7b7;
}

.blog__sidebar__newslatter form input:-ms-input-placeholder {
	color: #b7b7b7;
}

.blog__sidebar__newslatter form input::-ms-input-placeholder {
	color: #b7b7b7;
}

.blog__sidebar__newslatter form input::placeholder {
	color: #b7b7b7;
}

.blog__sidebar__newslatter form button {
	font-size: 18px;
	color: #111111;
	border: none;
	background: transparent;
	position: absolute;
	right: 0;
	top: 0;
}

/*---------------------
  Blog Details
-----------------------*/

.blog__details {
	padding-top: 120px;
	padding-bottom: 120px;
}

.blog__details__content .blog__item__quote {
	margin-bottom: 40px;
}

.blog__details__content .blog__item__quote p {
	text-transform: none;
	font-size: 24px;
	line-height: 36px;
}

.blog__details__title {
	margin-bottom: 32px;
}

.blog__details__title ul {
	margin-bottom: 18px;
}

.blog__details__title ul li {
	list-style: none;
	font-size: 14px;
	color: #b7b7b7;
	font-weight: 500;
	text-transform: uppercase;
	display: inline-block;
	margin-right: 50px;
	position: relative;
	letter-spacing: 2px;
}

.blog__details__title ul li:after {
	position: absolute;
	right: -30px;
	top: -16px;
	content: ".";
	font-size: 15px;
	color: #b7b7b7;
	font-size: 25px;
}

.blog__details__title ul li:last-child {
	margin-right: 0;
}

.blog__details__title ul li:last-child:after {
	display: none;
}

.blog__details__title h2 {
	color: #111111;
	font-size: 48px;
	font-family: 'GothamLight', sans-serif;
	line-height: 60px;
	font-weight: 600;
	margin-bottom: 30px;
}

.blog__details__title img {
	margin-bottom: 32px;
	min-width: 100%;
	-webkit-box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
	box-shadow: 0px 15px 60px rgba(67, 69, 70, 0.1);
}

.blog__details__title p {
	font-size: 18px;
	color: #7d8184;
	line-height: 32px;
	margin-bottom: 0;
}

.blog__details__text {
	margin-bottom: 35px;
}

.blog__details__text p {
	font-size: 18px;
	color: #7d8184;
	line-height: 32px;
}

.blog__details__text p:last-child {
	margin-bottom: 0;
}

.blog__details__pic {
	margin-bottom: 35px;
}

.blog__details__pic img {
	min-width: 100%;
	margin-bottom: 30px;
}

.blog__details__widget {
	margin-bottom: 45px;
}

.blog__details__tags {
	margin-bottom: 20px;
}

.blog__details__tags span {
	font-size: 13px;
	color: #111111;
	margin-right: 6px;
}

.blog__details__tags a {
	display: inline-block;
	font-size: 13px;
	color: #b7b7b7;
	letter-spacing: 1px;
	font-weight: 600;
	text-transform: uppercase;
	margin-right: 12px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	position: relative;
	margin-bottom: 4px;
}

.blog__details__tags a:after {
	position: absolute;
	right: -10px;
	top: 7px;
	height: 4px;
	width: 4px;
	background: #b7b7b7;
	border-radius: 50%;
	content: "";
}

.blog__details__tags a:last-child:after {
	display: none;
}

.blog__details__tags a:hover {
	color: #111111;
}

.blog__details__social {
	text-align: right;
	margin-bottom: 20px;
}

.blog__details__social a {
	display: inline-block;
	font-size: 18px;
	color: #353535;
	margin-right: 28px;
}

.blog__details__social a:last-child {
	margin-right: 0;
}

.blog__details__author {
	background: #f8f8f8;
	padding: 50px;
	overflow: hidden;
	margin-bottom: 40px;
}

.blog__details__author__pic {
	float: left;
	margin-right: 50px;
	height: 140px;
	width: 140px;
	border-radius: 50%;
}

.blog__details__author__text {
	overflow: hidden;
}

.blog__details__author__text h5 {
	color: #111111;
	font-weight: 600;
	font-family: 'GothamLight', sans-serif;
	margin-bottom: 12px;
}

.blog__details__author__text p {
	color: #7d8184;
	font-size: 18px;
	line-height: 32px;
	margin-bottom: 0;
}

.blog__details__btns {
	margin-bottom: 50px;
}

.blog__details__btns__item {
	margin-bottom: 25px;
	display: block;
	overflow: hidden;
}

.blog__details__btns__item.blog__details__btns__item--next .blog__details__btns__item__pic {
	float: right;
	margin-left: 30px;
	margin-right: 0;
}

.blog__details__btns__item.blog__details__btns__item--next .blog__details__btns__item__text {
	text-align: right;
}

.blog__details__btns__item__pic {
	float: left;
	margin-right: 30px;
}

.blog__details__btns__item__text {
	overflow: hidden;
	padding-top: 16px;
}

.blog__details__btns__item__text h6 {
	font-size: 15px;
	font-family: 'GothamLight', sans-serif;
	color: #8d8d8d;
	margin-bottom: 6px;
}

.blog__details__btns__item__text h6 span {
	font-size: 20px;
	position: relative;
	top: 3px;
}

.blog__details__btns__item__text h5 {
	font-size: 20px;
	font-family: 'GothamLight', sans-serif;
	color: #353535;
	font-weight: 600;
}

.blog__details__comment__form h4 {
	color: #111111;
	text-transform: uppercase;
	margin-bottom: 35px;
}

.blog__details__comment__form form input {
	font-size: 15px;
	color: #b7b7b7;
	width: 100%;
	height: 50px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding-left: 20px;
	margin-bottom: 30px;
}

.blog__details__comment__form form input::-webkit-input-placeholder {
	color: #b7b7b7;
}

.blog__details__comment__form form input::-moz-placeholder {
	color: #b7b7b7;
}

.blog__details__comment__form form input:-ms-input-placeholder {
	color: #b7b7b7;
}

.blog__details__comment__form form input::-ms-input-placeholder {
	color: #b7b7b7;
}

.blog__details__comment__form form input::placeholder {
	color: #b7b7b7;
}

.blog__details__comment__form form textarea {
	font-size: 15px;
	color: #b7b7b7;
	width: 100%;
	height: 130px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding-left: 20px;
	padding-top: 12px;
	resize: none;
	margin-bottom: 24px;
}

.blog__details__comment__form form textarea::-webkit-input-placeholder {
	color: #b7b7b7;
}

.blog__details__comment__form form textarea::-moz-placeholder {
	color: #b7b7b7;
}

.blog__details__comment__form form textarea:-ms-input-placeholder {
	color: #b7b7b7;
}

.blog__details__comment__form form textarea::-ms-input-placeholder {
	color: #b7b7b7;
}

.blog__details__comment__form form textarea::placeholder {
	color: #b7b7b7;
}

.blog__details__comment__form form button {
	background: #111111;
}

/*---------------------
  Contact
-----------------------*/

.contact {
	padding-top: 120px;
	padding-bottom: 120px;
}

.contact__text {
	margin-bottom: 50px;
}

.contact__text .section-title {
	margin-bottom: 12px;
}

.contact__text p {
	margin-bottom: 0;
}

.contact__widget__item {
	position: relative;
	margin-bottom: 30px;
}

.contact__widget__item.last__item:after {
	display: none;
}

.contact__widget__item:after {
	position: absolute;
	right: 50px;
	top: 0px;
	width: 1px;
	height: 50px;
	background: #e1e1e1;
	content: "";
}

.contact__widget__item__icon {
	float: left;
	margin-right: 20px;
}

.contact__widget__item__text {
	overflow: hidden;
}

.contact__widget__item__text h5 {
	color: #dfa667;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.contact__widget__item__text span {
	color: #111111;
	display: block;
}

.map {
	height: 460px;
	margin-top: 40px;
	margin-bottom: 75px;
	-webkit-box-shadow: 0px 3px 15px rgba(0, 59, 85, 0.1);
	box-shadow: 0px 3px 15px rgba(0, 59, 85, 0.1);
}

.map iframe {
	width: 100%;
}

.contact__form__text {
	margin-bottom: 35px;
}

.contact__form__text .section-title {
	margin-bottom: 12px;
}

.contact__form__text p {
	margin-bottom: 0;
}

.contact__form form input {
	height: 50px;
	width: 100%;
	font-size: 15px;
	color: #b7b7b7;
	padding-left: 20px;
	border: 1px solid #e1e1e1;
	margin-bottom: 30px;
}

.contact__form form input::-webkit-input-placeholder {
	color: #b7b7b7;
}

.contact__form form input::-moz-placeholder {
	color: #b7b7b7;
}

.contact__form form input:-ms-input-placeholder {
	color: #b7b7b7;
}

.contact__form form input::-ms-input-placeholder {
	color: #b7b7b7;
}

.contact__form form input::placeholder {
	color: #b7b7b7;
}

.contact__form form textarea {
	height: 170px;
	width: 100%;
	font-size: 15px;
	color: #b7b7b7;
	padding-left: 20px;
	padding-top: 12px;
	border: 1px solid #e1e1e1;
	resize: none;
	margin-bottom: 24px;
}

.contact__form form textarea::-webkit-input-placeholder {
	color: #b7b7b7;
}

.contact__form form textarea::-moz-placeholder {
	color: #b7b7b7;
}

.contact__form form textarea:-ms-input-placeholder {
	color: #b7b7b7;
}

.contact__form form textarea::-ms-input-placeholder {
	color: #b7b7b7;
}

.contact__form form textarea::placeholder {
	color: #b7b7b7;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}

@media only screen and (min-width: 1450px) {
	.container {
		max-width: 1170px;
	}
	.header {
		padding: 30px 130px 0;
	}
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.about__pic {
		padding-left: 0;
	}
	.about__pic__inner:after {
		left: 8px;
		top: 8px;
	}
	.header__menu ul li {
		margin-right: 25px;
	}
	.hero__slider.owl-carousel .owl-nav button {
		left: 15px;
	}
	.hero__slider.owl-carousel .owl-nav button.owl-next {
		right: 15px;
	}
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.hero__slider.owl-carousel .owl-nav button {
		left: 0;
	}
	.hero__slider.owl-carousel .owl-nav button.owl-next {
		right: 0;
	}
	.about__text {
		padding-top: 1px;
		margin-bottom: 40px;
	}
	
	.about__pic {
		padding-left: 0;
	}
	
	.blog__sidebar {
		padding-top: 50px;
	}
	.hero__text .hero__social {
		right: 80px;
	}
	.slide-num {
		left: 70px;
	}
	.slider__progress {
		left: 106px;
	}
	.canvas__open {
		display: block;
		font-size: 22px;
		color: #ffffff;
		height: 35px;
		width: 35px;
		line-height: 35px;
		text-align: center;
		border: 1px solid #ffffff;
		border-radius: 2px;
		cursor: pointer;
		position: absolute;
		right: 15px;
		top: 34px;
	}
	.offcanvas-menu-overlay {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
		content: "";
		z-index: 98;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		visibility: hidden;
	}
	.offcanvas-menu-overlay.active {
		visibility: visible;
	}
	.offcanvas-menu-wrapper {
		position: fixed;
		left: -300px;
		width: 300px;
		height: 100%;
		background: #070f21;
		padding: 50px 20px 30px 30px;
		display: block;
		z-index: 99;
		overflow-y: auto;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		opacity: 0;
	}
	.offcanvas-menu-wrapper.active {
		opacity: 1;
		left: 0;
	}
	.offcanvas__logo {
		margin-bottom: 30px;
	}
	.offcanvas__logo a {
		display: inline-block;
	}
	.slicknav_btn {
		display: none;
	}
	.slicknav_menu {
		background: transparent;
		padding: 0;
		margin-bottom: 30px;
	}
	.slicknav_nav ul {
		margin: 0;
	}
	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 7px 0;
		margin: 0;
		color: #ffffff;
		font-weight: 600;
	}
	.slicknav_nav .slicknav_arrow {
		color: #ffffff;
	}
	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: transparent;
		color: #ffffff;
	}
	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: #ffffff;
	}
	.slicknav_nav {
		display: block !important;
	}
	.offcanvas__widget span {
		font-size: 14px;
		font-family: 'GothamLight', sans-serif;
		color: #b7b7b7;
		display: block;
		margin-bottom: 10px;
	}
	.offcanvas__widget h4 {
		font-size: 22px;
		color: #dfa667;
	}
	.header__menu {
		display: none;
	}
	.header__widget {
		display: none;
	}
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
	.hero__text h2 {
		font-size: 34px;
		line-height: 45px;
	}
	.tem{
		margin-left: 20px;
	}
	.about__pic__inner img{
	
		
		margin-right: 30px;
		
		padding-bottom: 1px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.285);
		background-color: #010d24;
	}
  
	.hero__items {
		height: 710px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: 0 40px;
	}
	.about__text {
		
		margin-bottom: 4px;
	}
	#texttit{
		margin-top: -110px;
	}
	.about__pic {
		padding-left: 0;
	}
	.blog__sidebar {
		padding-top: 50px;
	}
	.canvas__open {
		display: block;
		font-size: 22px;
		color: #ffffff;
		height: 35px;
		width: 35px;
		line-height: 35px;
		text-align: center;
		border: 1px solid #ffffff;
		border-radius: 2px;
		cursor: pointer;
		position: absolute;
		right: 15px;
		top: 34px;
	}
	.offcanvas-menu-overlay {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
		content: "";
		z-index: 98;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		visibility: hidden;
	}
	.offcanvas-menu-overlay.active {
		visibility: visible;
	}
	.offcanvas-menu-wrapper {
		position: fixed;
		left: -300px;
		width: 300px;
		height: 100%;
		background: #070f21;
		padding: 50px 20px 30px 30px;
		display: block;
		z-index: 99;
		overflow-y: auto;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		opacity: 0;
	}
	.offcanvas-menu-wrapper.active {
		opacity: 1;
		left: 0;
	}
	.offcanvas__logo {
		margin-bottom: 30px;
	}
	.offcanvas__logo a {
		display: inline-block;
	}
	.slicknav_btn {
		display: none;
	}
	.slicknav_menu {
		background: transparent;
		padding: 0;
		margin-bottom: 30px;
	}
	.slicknav_nav ul {
		margin: 0;
	}
	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 7px 0;
		margin: 0;
		color: #ffffff;
		font-weight: 600;
	}
	.slicknav_nav .slicknav_arrow {
		color: #ffffff;
	}
	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: transparent;
		color: #ffffff;
	}
	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: #ffffff;
	}
	.slicknav_nav {
		display: block !important;
	}
	.offcanvas__widget span {
		font-size: 14px;
		font-family: 'GothamLight', sans-serif;
		color: #b7b7b7;
		display: block;
		margin-bottom: 10px;
	}
	.offcanvas__widget h4 {
		font-size: 22px;
		color: #dfa667;
	}
	.header__menu {
		display: none;
	}
	.header__widget {
		display: none;
	}
	.about__pic__inner {
		display: block;
	}
	
	.about__pic__inner:after {
		left: 0;
		width: 100%;
	}
	.hero__slider.owl-carousel .owl-nav button {
		left: 0;
	}
	.hero__slider.owl-carousel .owl-nav button.owl-next {
		right: 0;
	}
	.hero__text h2 {
		font-size: 46px;
		line-height: 58px;
	}
	.hero__text .hero__social {
		right: 0;
		left: 0;
		margin: 0 auto;
		bottom: 100px;
	}
	.slide-num {
		bottom: 25px;
		left: 0;
		width: 100%;
		text-align: center;
	}
	.slider__progress {
		left: 0;
		bottom: 35px;
		right: 0;
		margin: 0 auto;
	}
	.hero__text .more_btn {
		bottom: 62px;
	}
	.footer__top__text {
		margin-bottom: 35px;
	}
	.copyright__text {
		text-align: center;
		margin-bottom: 20px;
	}
	.copyright__widget {
		text-align: center;
	}
	.project__sidebar {
		padding-top: 20px;
	}
	.blog__details__tags {
		text-align: center;
	}
	.blog__details__social {
		text-align: center;
	}
	.blog__details__author__pic {
		float: none;
		margin-right: 0;
	}
	.blog__details__author__text {
		padding-top: 40px;
	}
	.project {
		padding: 0;
	}
	.about__para__text {
		margin-bottom: 35px;
	}
	.clients {
		padding-bottom: 90px;
	}
	.clients a {
		margin-bottom: 30px;
	}
	.testimonial__carousel.owl-carousel .owl-nav button {
		left: 0;
	}
	.testimonial__carousel.owl-carousel .owl-nav button.owl-next {
		right: 0;
	}
}

@media only screen and (max-width: 575px) {
	.team__btn {
		margin-bottom: 40px;
		text-align: left;
	}
	.latest__btn {
		margin-bottom: 40px;
		text-align: left;
	}
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
	.section-title h2 {
		font-size: 20px;
		line-height: 1;
	}
	.hero__text h2 {
		font-size: 28px;
		line-height: 42px;
	}
	.hero__items {
		height: 610px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: 0 40px;
	}
	.testimonial__item p {
		font-size: 16px;
		line-height: normal;
	}
	.about__pic__inner:after {
		display: none;
	}
	.callto__text h2 {
		font-size: 30px;
		line-height: 46px;
	}
	.project__slider.owl-carousel .owl-nav button {
		left: 15px;
	}
	.project__slider.owl-carousel .owl-nav button.owl-next {
		right: 15px;
	}
	.project {
		padding: 0;
	}
	.breadcrumb__text h2 {
		font-size: 32px;
	}
	.testimonial__carousel {
		padding: 60px 45px 65px;
	}
	.slick-active.slick-center .testimonial__client__pic img,
	.slick-active.slick-center .testimonial__client__pic {
		width: 110px;
		height: 110px;
		opacity: 1;
	}
	.testimonial__client__item .testimonial__client__pic {
		width: 110px;
		height: 110px;
		opacity: 0;
	}
	.testimonial__carousel:after {
		left: calc(50% - 70px);
		bottom: -80px;
		width: 140px;
		height: 140px;
	}
	.testimonial__carousel button.slick-arrow {
		left: 10px;
		height: 40px;
		width: 40px;
	}
	.testimonial__carousel button.slick-arrow.slick-next {
		left: auto;
		right: 10px;
	}
	.testimonial__client .slick-slide {
		padding-top: 30px;
	}
	.about .section-title h2 {
		font-size: 28px;
		line-height: 45px;
	}
	.footer__top__text h2 {
		font-size: 20px;
	}
}




.container1{
	text-align: center;
	margin-left: 25%;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}
.tofu-elevator {
	margin-top: 200px;
	
	
	color: #ffffff;
	text-align: center;
	padding: 100px 20px;
	font-family: 'GothamLight', sans-serif;
	margin-bottom: 50px;
}



.grape-owl {
	font-size: 36px;
	font-weight: 800;
	margin-bottom: 15px;
	width: 100%;
}

.banana-lighthouse {
	font-size: 15px;
	color: #BBBBBB;
	margin-bottom: 40px;
}

.cactus-trampoline {
	background-color: transparent;
	color: #6685c2;
	padding: 15px 35px;
	font-size: 16px;
	font-weight: bold;
	border: 1px solid #6685c2;
	border-radius: 30px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.cactus-trampoline:hover {
	background-color: white;
	color: #070f21;
}
@media screen and (max-width: 768px) {
	.container1 {
	  width: 90%;
	  padding: 0 10px;
	  margin-left: 20px;
	}
	
	
	#popl{
		padding-top: 20px;
		padding-bottom: 20px;
		
		
	  }
	
	.unique-latest-section {
		padding: 50px 0;
		
		background-size: contain;
		background-attachment: fixed;
		width: 100%;
		overflow-x: hidden;
		display: grid;
		grid-template-columns: repeat(1, 1fr); /* 2 columns */
		
		justify-content: space-between; /* optional: spaces items nicely */
		gap: 0px; /* optional: spacing between items */
	
	}
	
	#qwep{
		margin-left: 20px;
		width: 90%;
		margin-top: 20px;
		
	}
	#port{
		margin-bottom: 100px;
	}
	.buy{
		width: 100%;
		text-align: left;
		padding-top: 20px;
		font-size: 1.08rem;
	}
	#buys{
		width: 100%;
		color: white;
		
		
	}
	
	
	.footer__logo img{
		width: 150px;
		margin-top: 100px;
		margin-left: -10px;
	}
		
}
	
	
  
.rainbow-glow {
	background: linear-gradient(
	  270deg,
	  #ffff,
	  #e3e2e2,
	  #a0a0a0,
	  #ebe9ff,
	  #cccccc
	);
	background-size: 1000% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: flowingColors 6s linear infinite;
}
  
@keyframes flowingColors {
	0% {
	  background-position: 0% 50%;
	}
	100% {
	  background-position: 100% 50%;
	}
}
.tem{
	width: 80%;
	margin-left: 40px;
	line-height: 20px;
	
}
.bus5{
    background-color: #3f043b;
  }
  .bus9{
	background-color: rgb(1, 19, 1);
  }
  .bus1{
    background-color: #010d24;
  }
  .bus2{
    background-color: #04276e;
  }
  .bus4{
    background-color: #04383f;
  }
  .bus3{
    background-color: #1B103A;
  
  }
  .bus9{
	background-color: #d9d9d9;
  }
  .backsq {
    position: absolute;
	overflow-x: hidden;
	overflow-y: hidden;
    
    width: 100%;         /* Full width */
    height: 100vh;        /* Full height */
    background-image: url('/img/Robert_F_Smith_about_shape2\ \(1\).svg');
    background-size: contain;        /* Cover entire space */
    background-position: center;   /* Center the image */
    background-repeat: no-repeat;
    z-index: -1;          /* Send it behind everything */
    background-attachment: fixed;
  }

.tem h4{
	margin-bottom: 20px;
	margin-top: 20px;
	color: white;
	font-weight: 900;

}
.tem h5{
	margin-bottom: 20px;
	margin-top: 20px;
	color: white;

}
#qwep{
	border: solid 1px #6685c2;
	padding: 30px 30px 30px 30px;
	border-radius: 10px;
	margin-bottom: 20px;
	box-shadow: 0 5px 15px rgba(215, 213, 213, 0.3);
}
#qwep:hover {
	transform: translateY(-10px);
	animation: 0.1s;
  }
.tem p{
	line-height: 25px;
}
#modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}
.modal-content {
	background-color: #070f21;
	padding: 20px;
	border-radius: 8px;
	width: 80%;
	max-width: 600px;
	text-align: center;
}
#closeModalBtn {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 30px;
	cursor: pointer;
}
.hero-eagle {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url('/img/Vista_Insights_Header.jpg') center/cover no-repeat;
    color: #fff;
   
    text-align: center;
    position: relative;
    height: 100vh;
    display: flex; /* enable flexbox */
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
    text-align: center;
    padding: 0 20px; /* small padding for mobile */
    position: relative;
      
      
}
  
.hero-content {
    max-width: 800px;
    margin: 0 auto;
}
  
.hero-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
    font-weight: bold;
}
  
.hero-content p {
    font-size: 20px;
    line-height: 1.6;
}

body {
	overflow-x: hidden;
	max-width: 100%;
}
#popl{
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: white;
}
.scrollScepter {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.8);
	border: none;
	font-size: 24px;
	padding: 10px 14px;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	cursor: pointer;
	z-index: 5;
	transition: background 0.3s;
}

.scrollScepter:hover {
	background: rgba(255, 255, 255, 1);
}

#scrollLeftRune {
	left: 1%;
	color: black;
	position: relative;
	
	top: 40vh;
	
	
}

#scrollRightRune {
	right: -90%;
	top: 40vh;
	color: black;
	position: relative;
}


#vaultSlider {
	display: grid;
	overflow-x: auto;
	gap: 24px;
	scroll-behavior: smooth;
	padding-bottom: 16px;
	overflow-y: hidden;
	grid-template-columns: repeat(4, 1fr); /* 3 equal columns */
	margin-bottom: 100px;
	padding-left: 30px;
	padding-right: 30px;
}


#vaultSlider::-webkit-scrollbar {
	display: none;
}

.realmCardX {
	min-width: 280px;
	max-width: 300px;
	
	border-radius: var(--lux-radius);
	box-shadow: var(--lux-shadow);
	overflow: hidden;
	
	flex-shrink: 0;
	color: white;
	display: flex;
	flex-direction: column;
	box-shadow: 0 5px 12px rgb(28, 27, 27);
}


.luxeImageFrame {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.chateauContent {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	
}

.elixirTitle {
	font-size: 20px;
	font-weight: 600;
	color: #6685c2;
	text-align: left;
}

.elixirDesc {
	font-size: 0.9rem;
	color: var(--lux-muted);
	line-height: 1.4;
}

.callSigil {
	background-color: #6685c2;
	color: white;
	border: none;
	padding: 10px 16px;
	border-radius: 10px;
	font-weight: 500;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background 0.3s ease;
	align-self: start;
}

.callSigil:hover {
	background-color: transparent;
	border: 1px solid #6685c2;
}
#iii{
	margin-top: 1px;
	
}
@media (max-width: 768px) {
	

	.realmCardX {
	  min-width: 240px;
	}
	#kor{
		margin-top: -80px;
	}
	

	.chateauContent {
	  padding: 16px;
	}

	.scrollScepter {
	  display: none;
	}
	
	
	
	
	
}
.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.473);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  animation: 1s;
}
.popup-content {
  background: #000b20;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  position: relative;
  box-shadow: 0 5px 15px rgba(215, 213, 213, 0.3);
}
.popup-content h3 {
  margin-top: 0;
  color: #010d24;
}
.popup-content input {
  width: 100%;
  padding: 0.7rem;
  margin: 0.5rem 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.popup-content button {
  background: #6685c2;
  color: #fff;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 5px;
  cursor: pointer;
}
.close-btn {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #6685c2;
}
#late{
	padding-top: 100px;
}

/* General Styling */
.social-impact-section {
    max-width: 95vw;
    margin: 0 auto;
    padding: 50px 20px;
    text-align: center;
	background-color: white;
	overflow-x: hidden;
    
}

h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.sub-header {
    font-size: 1.2rem;
    color: #777;
    margin-bottom: 30px;
}

/* Styling for the Year Slider */
.year-slider {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.slider-btn {
    
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider-btn:hover {
    background-color: #555;
}

/* Layout for Video and Sectors */
.impact-slider-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
	overflow-x: hidden;
}

.video-sections {
    flex: 1;
    min-width: 300px;
}

.video-sections video {
    width: 100%;
    height: auto;
    border-radius: 12px;
	padding-top: 45px;
    
}

/* Styling for Sector Boxes */
.sector-container {
    flex: 1;
    min-width: 300px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.sector-box {
   width: 100%;
    border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.527);
	
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
}

.sector-box h3 {
    font-size: 16px;
    margin-bottom: 10px;
	font-weight: 600;
	color: #6685c2;
	
}
.sector-box h2 {
    font-weight: 600;
	font-size: 20px;
	color: #000b20;
	
}

.sector-box p {
    font-size: 12px;
    color: #6685c2;
}

.sector-box:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Mobile Responsiveness for Sector Boxes */
@media (max-width: 768px) {
    .sector-container {
        grid-template-columns: 1fr; /* Stack boxes vertically on smaller screens */
    }
	#vaultSlider {
		display: flex;
		overflow-x: auto;
		gap: 24px;
		scroll-behavior: smooth;
		padding-bottom: 16px;
		overflow-y: hidden;
		
		margin-bottom: 100px;
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* Background + Overlay */
.dmf-hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dmf-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.dmf-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.6), rgba(5, 37, 70, 0.6));
  z-index: 1;
}

/* Hero Slider Container */
.dmf-hero-slider {
  position: relative;
  z-index: 3; /* ✅ Ensure text sits above video & overlay */
  text-align: center;
  color: #fff;
  width: 100%;
}

/* Each Slide Item */
.dmf-hero-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Text Styles */
.dmf-hero-text {
  max-width: 900px;
  padding: 20px;
  z-index: 3; /* ✅ Ensure text is above overlay */
}

.dmf-hero-text h2 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #ffcb05, #ff5f6d, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeSlideUp 1s ease forwards;
}

/* Brand Button */
.dmf-btn {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 50px;
  background: linear-gradient(135deg, #000, #fff);
  color: #2e2e2e;
  font-size: 1rem;
  border: none;
  text-decoration: none;
  letter-spacing: 0.5px;
  
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dmf-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  transform: skewX(-20deg);
  transition: all 0.5s ease;
}

.dmf-btn:hover::before {
  left: 100%;
  color: white;
}

.dmf-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  color: white;
}

/* Progress Bar */
.dmf-slider-progress {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
  border-radius: 5px;
  overflow: hidden;
  z-index: 3; /* ✅ visible above video */
}

.dmf-slider-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #ff5f6d, #ffc371);
  animation: progressBar 5s linear infinite;
}

/* Animations */
@keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Sticky Nav Container */
.weirdly-sticky-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width:70%;
  padding: 12px 28px;
  border-radius: 50px;
  background: #fff; /* White background only */
  z-index: 9999;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* Clean floating shadow */
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Hover Effect (optional for subtle interactivity) */
.weirdly-sticky-nav:hover {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%) translateY(-2px);
}

/* Content Alignment */
.odd-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 2;
}

/* Logo */
.odd-logo img {
  height: 60px;
  width: 180px;
}

/* Nav Menu */
.odd-menu ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.odd-menu ul li a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  color: #000;
  transition: color 0.3s ease;
}

.odd-menu ul li a:hover,
.odd-menu ul li.active a {
  color: #f23006; /* Brand highlight */
}

/* Toggle for Mobile */
.odd-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #000;
}

/* Responsive */
@media (max-width: 992px) {
  .odd-container {
    justify-content: space-between;
  }
  .odd-menu {
    display: none;
    position: absolute;
    top: 60px;
    right: 20px;
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  }
  .odd-menu ul {
    flex-direction: column;
    gap: 15px;
  }
  .odd-toggle {
    display: block;
  }
}

/* About Section */
.odd-about {
  padding: 80px 0;
}

.section-title span {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #999;
  display: block;
  margin-bottom: 10px;
  justify-self: left;
  text-align: left;
}

.section-title h3 {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  
  line-height: 1.3;
  justify-self: left;
  text-align: left;
}

/* Text Styling */
.odd-about-para p {
  margin-bottom: 15px;
  color: #333;
  text-align: justify;
}

/* Button */
.odd-btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, #f23006, #000000);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
}

.odd-btn:hover {
  background: linear-gradient(135deg, #000000, #f23006);
  transform: translateY(-3px);
}

/* Slideshow */
.odd-slideshow {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 6px 25px rgba(0,0,0,0.15);
}

.odd-slides img {
  width: 100%;
  
  
  display: none;
  border-radius: 20px;
}

.odd-slides img.active {
  display: block;
  animation: fadeSlide 1s ease-in-out;
}

@keyframes fadeSlide {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Responsive */
@media (max-width: 992px) {
  .odd-about .row {
    flex-direction: column;
  }
  .odd-slideshow {
    margin-bottom: 30px;
  }
}

/* Mission Section */
.mission-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 120px 20px;
 
}

.mission-wrapper {
  width: 90%;
}

/* Heading */
.mission-heading {
  font-size: 20px;
  font-weight: 900;
  color: #f23006; /* Brand color */
  margin-bottom: 40px;
  
}

/* Paragraph */
.mission-text {
  
 font-size: 30px;
  line-height: 1.8;
  color: #333;
  width: 80%;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 992px) {
  .mission-heading {
    font-size: 48px;
  }
  .mission-text {
    font-size: 18px;
  }
}
/* Section Container */
.focus-areas-section {
  padding: 120px 20px; /* Increased overall padding for more spacing */

  text-align: center;
}

/* Section Title */
.focus-areas-section .section-title span {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #999;
  display: block;
  margin-bottom: 10px;
}

.focus-areas-section .section-title h2 {
  font-size: 36px;
  font-weight: 900;
  color: #070f21;
  margin-bottom: 100px; /* Increased spacing between title and cards */
}

/* Add spacing between title and cards */
.cards-row {
  margin-top: 60px; /* Extra space above cards */
}

/* Focus Card Styling */
.focus-card {
  
  padding: 35px 30px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  margin-bottom: 20px; /* Slightly more space between rows */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.focus-card h3 {
  font-size: 28px;
  font-weight: 900;
  color: #f23006;
  margin-bottom: 15px;
}

.focus-card h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #e6e6e6;
}

.focus-card p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: #e0dfdf;
}

/* Hover effect */
.focus-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .focus-areas-section .section-title h2 { font-size: 28px; margin-bottom: 60px; }
  .focus-card h3 { font-size: 24px; }
  .focus-card h4 { font-size: 20px; }
  .focus-card p { font-size: 15px; }
}
.ddd{
	margin-bottom: 20px;
}
.cora-video-section {
  padding: 120px 20px;
  background: #fff;
  display: flex;
  justify-content: center;
}

.cora-container { max-width: 900px; width: 100%; }
.cora-wrapper { position: relative; }

/* Thumbnail */
.cora-thumb { position: relative; cursor: pointer; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.cora-thumb img { width: 100%; display: block; border-radius: 20px; transition: transform 0.3s ease; }
.cora-thumb:hover img { transform: scale(1.05); }

/* Play Button */
.cora-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 60px; color: #f23006; opacity: 0.9; transition: transform 0.3s ease; }
.cora-thumb:hover .cora-play-btn { transform: translate(-50%,-50%) scale(1.1); }

/* Video Holder */
.cora-video-holder { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 20px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.cora-video-holder iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:0; border-radius:20px; }

/* Responsive */
@media (max-width: 992px) {
  .cora-video-section { padding: 80px 20px; }
  .cora-play-btn { font-size: 50px; }
}

@media (max-width: 576px) {
  .cora-play-btn { font-size: 40px; }
}
.founder-section {
  padding: 100px 20px;
   background-color: #f3f3f3;
  display: flex;
  justify-content: center;
  overflow-x: hidden;
  width: 90%;
  justify-self: center;
  border-radius: 20px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
  margin-left: 20px;
}

.founder-container {
  max-width: 1200px;
  width: 100%;
}

.founder-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 50px;
}

/* Image */
.founder-image img {
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

.founder-image img:hover {
  transform: scale(1.03);
}

/* Text */
.founder-text {
  flex: 1;
}

.founder-title span {
  display: block;
  font-size: 16px;
  color: #f23006;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.founder-title h2 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #070f21;
}

.founder-text p {
  font-size: 18px;
  line-height: 1.7;
  color: #333;
}

/* Responsive */
@media (max-width: 992px) {
  .founder-wrapper {
    flex-direction: column;
    text-align: center;
  }
  .founder-image img {
    max-width: 80%;
    margin: 0 auto;
  }
}
/* Wrapper Styling */
.impact-wrapper {
  background: #f9fafb;
  padding: 80px 20px;
}

.impact-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.impact-title {
  font-size: 2.8rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 50px;
  position: relative;
}

.impact-title::after {
  content: "";
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #16a34a, #0ea5e9);
  display: block;
  margin: 12px auto 0;
  border-radius: 4px;
}

/* Grid Styling */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

/* Card Styling */
.impact-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  padding: 18px;
  text-align: left;
  transition: all 0.4s ease;
  transform: translateY(30px);
  opacity: 0;
}

.impact-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
}

.impact-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 16px;
}

.impact-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 10px;
}

.impact-text {
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.6;
}

/* Animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeUp 1s ease forwards;
}
.vision-tabs {
  padding: 80px 20px;
 
  text-align: center;
}

.vision-header {
  margin-bottom: 40px;
}

.vision-sub {
  font-size: 1rem;
  color: #e63946;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vision-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #111827;
  margin-top: 10px;
}

.vision-nav {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.vision-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: #e5e7eb;
  color: #374151;
  transition: all 0.4s ease;
}

.vision-btn.active {
  background: linear-gradient(135deg, #f23006, #ff7b54);
  color: #fff;
  box-shadow: 0 6px 20px rgba(242, 48, 6, 0.4);
  transform: scale(1.05);
}

.vision-panels {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.vision-panel {
  display: none;
  background-size: cover;
  background-position: center;
  padding: 100px 30px;
  border-radius: 18px;
  color: #fff;
  position: relative;
  text-align: left;
  min-height: 380px;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.vision-panel.active {
  display: block;
  animation: fadeSlide 0.8s ease forwards;
}

.vision-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  border-radius: 18px;
}

.vision-content {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.vision-content h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.vision-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: #f3f4f6;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.collab-sphere {
  padding: 80px 20px;
  background: linear-gradient(160deg, #0a1a2f, #132a44); /* Elegant deep tones */
  text-align: center;
}

.collab-header {
  margin-bottom: 50px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.collab-sub {
  font-size: 1rem;
  color: #e63946;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.collab-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #f3f4f6;
  margin: 10px 0;
}

.collab-desc {
  font-size: 1rem;
  color: #f3f4f6;
}

.collab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
}

.collab-card {
  background: #fff;
  border-radius: 18px;
  padding: 40px 25px;
  text-align: center;
  transition: all 0.4s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.collab-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 12px 25px rgba(242, 48, 6, 0.3);
}

.collab-icon img {
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.collab-card:hover .collab-icon img {
  transform: rotate(8deg) scale(1.1);
}

.collab-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111827;
}

.collab-card p {
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.6;
}
:root{
  --brand:#f23006;
  --brand-dark:#000000;
  --muted:#66676b;
  --card-bg:#ffffff;
  --surface:#fafafa;
  --max:1200px;
  --radius:14px;
}

/* Layout */
.dmf-contact{
  background: linear-gradient(180deg, #fff 0%, #fcfcfc 100%);
  padding: 80px 20px;
  font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
  color: var(--brand-dark);
}
.dmf-container{
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 34px;
  align-items: start;
}

/* Info column */
.dmf-info{
 background: linear-gradient(160deg, #000000, #1b1b1b); /* Elegant deep tones */
  padding: 34px;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
}
.dmf-info h2{
  font-size: 28px;
  margin: 0 0 6px;
  font-weight: 800;
  color: #fff;
}
.dmf-lead{
  margin: 0 0 18px;
  color: var(--surface);
  font-weight: 600;
}
.dmf-contacts{ list-style:none; padding:0; margin: 0 0 18px; line-height:1.9; }
.dmf-contacts li{ display:flex; align-items:center; gap:12px; color: var(--surface); font-weight:600; }
.dmf-contacts a{ color:var(--surface); text-decoration: none; border-bottom: 1px dashed rgba(0,0,0,0.06); padding-bottom: 2px; }
.dmf-muted{ color:var(--surface); font-weight:500; }

/* Extra CTA */
.dmf-extra{ margin-top: 10px; display:flex; flex-direction:column; gap:12px; }
.dmf-cta{
  display:inline-block;
  background: linear-gradient(135deg, black, white);
  color:#fff;
  padding:10px 18px;
  border-radius: 10px;
  text-decoration:none;
  font-weight:700;
  box-shadow: 0 8px 26px rgba(242,48,6,0.18);
  transition: transform .18s ease, box-shadow .18s ease;
  width: fit-content;
}
.dmf-cta:hover{ transform: translateY(-3px); color: white; box-shadow: 0 14px 34px rgba(0,0,0,0.18); }

/* Form card */
.dmf-form-card{
  background: var(--card-bg);
  padding: 28px;
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(2,6,23,0.08);
  border: 1px solid rgba(0,0,0,0.04);
  overflow: hidden;
  transform-origin: center;
}
.dmf-form-card form{ display:flex; flex-direction:column; gap:14px; }

/* inputs */
.dmf-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.dmf-label{ display:block; }
.dmf-label input,
.dmf-label textarea{
  width:100%;
  padding:14px 16px;
  border-radius:10px;
  border: 1px solid rgba(0,0,0,0.06);
  font-size:14px;
  color:var(--brand-dark);
  background: #fff;
  transition: box-shadow .15s ease, transform .12s ease, border-color .12s ease;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
}
.dmf-label.full{ grid-column: 1 / -1; }
.dmf-label textarea{ min-height:140px; resize: vertical; line-height:1.6; }

/* focus */
.dmf-label input:focus,
.dmf-label textarea:focus{
  outline: none;
  border-color: rgba(242,48,6,0.6);
  box-shadow: 0 8px 30px rgba(242,48,6,0.06);
  transform: translateY(-2px);
}

/* Buttons */
.dmf-actions{ display:flex; gap:12px; align-items:center; }
.dmf-btn-primary{
  background: linear-gradient(135deg,black,white);
  color:#fff;
  border:none;
  padding:12px 18px;
  font-weight:800;
  border-radius:10px;
  cursor:pointer;
  box-shadow: 0 12px 30px rgba(242,48,6,0.12);
  transition: transform .16s ease, box-shadow .16s ease;
}
.dmf-btn-primary:hover{ transform: translateY(-4px); box-shadow: 0 18px 48px rgba(0,0,0,0.18); }

.dmf-btn-ghost{
  background: transparent;
  
  padding:12px 18px;
  border-radius:10px;
  cursor:pointer;
  color:var(--brand-dark);
  font-weight:700;
}
.dmf-note{ font-size:13px; color:var(--muted); margin:6px 0 0; }

/* Toast */
.dmf-toast{
  position: fixed;
  right: 24px;
  bottom: 24px;
  background: linear-gradient(135deg,var(--brand),var(--brand-dark));
  color: #fff;
  padding:14px 18px;
  border-radius:12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
  transform: translateY(18px) scale(.98);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.9,.3,1), opacity .25s ease;
  z-index: 9999;
  display:flex;
  gap:12px;
  align-items:center;
}
.dmf-toast.show{ opacity:1; transform: translateY(0) scale(1); }

/* small responsiveness */
@media (max-width: 980px){
  .dmf-container{ grid-template-columns: 1fr; }
  .dmf-row{ grid-template-columns: 1fr; }
  .dmf-form-card{ order: 2; }
  .dmf-info{ order: 1; }
  .dmf-contacts li{ font-size:15px; }
}
:root {
  --fire:#f23006;
  --ink:#000;
  --cloud:#fafafa;
  --smoke:#666;
  --round:16px;
}
.foot-capsule {
  background: linear-gradient(160deg, #0a1a2f, #132a44); /* Elegant deep tones */
  color: #fff;
  padding-top: 70px;
  border-top: 6px solid var(--fire);

}
.foot-bucket {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 40px;
}
.foot-cell h4.foot-title {
  margin-bottom: 18px;
  font-weight: 800;
  color: var(--fire);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.foot-logo {
  font-size: 32px;
  font-weight: 900;
  margin: 0 0 8px;
}
.foot-dot {
  color: var(--fire);
}
.foot-vision {
  color: #bbb;
  line-height: 1.6;
  font-size: 15px;
  margin-bottom: 18px;
}
.foot-socials {
  display: flex;
  gap: 14px;
}
.foot-socials a {
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  transition: background .25s, transform .25s;
}
.foot-socials a:hover {
  background: var(--fire);
  transform: translateY(-4px) rotate(-3deg);
}
.foot-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.foot-list a {
  color: #eee;
  text-decoration: none;
  transition: color .25s;
}
.foot-list a:hover {
  color: var(--fire);
}
.foot-form {
  display: flex;
  background: #fff;
  border-radius: var(--round);
  overflow: hidden;
}
.foot-form input {
  flex: 1;
  border: none;
  padding: 12px 14px;
  background: transparent;
  color: #fff;
  font-size: 14px;
}
.foot-form input::placeholder {
  color: #aaa;
}
.foot-form button {
  background: var(--fire);
  border: none;
  padding: 0 18px;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background .25s;
}
.foot-form button:hover {
  background: #d91d00;
}
.foot-note {
  font-size: 13px;
  color: #aaa;
  margin-top: 8px;
}
.foot-bar {
  text-align: center;
  padding: 28px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 60px;
  font-size: 14px;
  color: #999;
}
@media(max-width: 768px){
  .foot-bucket {
    text-align: center;
  }
  .foot-socials {
    justify-content: center;
  }
  .foot-form {
    max-width: 360px;
    margin: 0 auto;
  }
  .crimson-capsule {
  padding-left: 10px;
  padding-right: 10px;
}
}
:root {
  --fire:#f23006;
  --ink:#000;
  --ash:#f8f8f8;
}

/* Section */
.crimson-capsule {
  padding: 90px 0;  
  padding-left: 100px;
  padding-right: 100px;
}
/* Mobile view */
@media (max-width: 768px) {
  .crimson-capsule {
    padding-left: 40px;
	padding-right: 40px;
  }
}

@media (max-width: 480px) {
  .crimson-capsule {
     padding-left: 40px;
	padding-right: 40px;
  }
}

/* Slideshow */
.flair-frame {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.slide-bouquet img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: none;
}
.slide-bouquet img.active {
  display: block;
  animation: fadeSlide 1.2s ease-in-out;
}
@keyframes fadeSlide {
  from { opacity: 0; transform: scale(1.05);}
  to { opacity: 1; transform: scale(1);}
}

/* Text area */
.ember-script {
  padding-left: 20px;
}
.flare-title {
  margin-bottom: 30px;
  position: relative;
}
.tiny-pre {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--fire);
  display: inline-block;
  margin-bottom: 6px;
}
.lava-heading {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  position: relative;
}
.lava-underline{
  width: 100%;              /* change to taste (or use max-width) */
  max-width: 460px;
  height: 2px;
  margin-top: 12px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.06); /* subtle base track */
  transform-origin: left center;
}

/* moving color bar (actual underline) */
.lava-underline::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--fire), var(--ink), var(--fire));
  transform-origin: left center;
  transform: scaleX(0);                 /* start hidden */
  transition: transform 800ms cubic-bezier(.2,.9,.3,1);
  will-change: transform;
}

/* subtle reflective sweep */
.lava-underline::after{
  content: "";
  position: absolute;
  top: -10%;
  left: -45%;
  width: 40%;
  height: 120%;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
  transform: skewX(-20deg);
  opacity: 0;
}

/* active state -> reveal underline & run sweep */
.lava-underline.is-active::before{
  transform: scaleX(1);
}
.lava-underline.is-active::after{
  animation: sweep 900ms ease 120ms forwards;
}

/* sweep animation (shine) */
@keyframes sweep{
  0% { left:-45%; opacity: 0; }
  30% { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* small responsive tweak */
@media (max-width: 800px){
  .lava-heading{ font-size: 26px; }
  .lava-underline{ width: 90%; max-width: 360px; height: 5px; }
}
.ember-text p {
  font-size: 17px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 18px;
  text-align: justify;
}

/* CTA Button */
.pulse-btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 40px;
  background: var(--fire);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(242,48,6,0.3);
  transition: all .3s ease;
}
.pulse-btn:hover {
  background: #d92100;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(242,48,6,0.4);
}

/* Responsive */
@media(max-width:991px){
  .ember-script { padding-left:0; margin-top:40px;}
  .slide-bouquet img { height: 320px; }
}

/* Mission Section */
.dzx-mssn {
  position: relative;
  padding: 100px 20px;
  background: linear-gradient(135deg, #070f21, #0d162f);
  color: #fff;
  overflow: hidden;
  text-align: center;
}

/* Particle Background */
.dzx-mssn-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  overflow: hidden;
}

.dzx-mssn-particles span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(242, 48, 6, 0.7); /* brand orange particles */
  border-radius: 50%;
  animation: floatParticles linear infinite;
}

@keyframes floatParticles {
  0% { transform: translateY(100vh) scale(0.5); opacity: 0.2; }
  50% { opacity: 0.7; }
  100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

/* Wrapper */
.dzx-mssn-wrapper {
  position: relative;
  z-index: 5;
  max-width: 1000px;
  margin: 0 auto;
}

/* Subtitle */
.dzx-mssn-subtitle {
  font-size: 20px;
  color: #f23006;
  font-weight: 600;
  margin-bottom: 15px;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

.dzx-mssn-subtitle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #f23006, transparent);
  animation: underlineFlow 2s linear infinite;
}

@keyframes underlineFlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Main Text */
.dzx-mssn-text {
  font-size: 28px;
  line-height: 1.7;
  font-weight: 400;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  animation: fadeInScale 2s ease forwards;
  opacity: 0;
}

@keyframes fadeInScale {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
  .dzx-mssn-text {
    font-size: 15px;
  }
}
/* Root brand colors */
:root {
  --brand-main: #f23006;   /* Foundation orange/red */
  --brand-dark: #070f21;   /* Deep navy */
  --brand-light: #ffffff;  /* White */
}

/* Section background */
.cosmic-video-zone {
 background: linear-gradient(160deg, #0a1a2f, #132a44); /* Elegant deep tones */
  padding: 100px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle animated particles background */
.cosmic-video-zone::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: drift 60s linear infinite;
  z-index: 0;
}

@keyframes drift {
  from { transform: translate(0,0); }
  to { transform: translate(40px,40px); }
}

/* Container */
.stellar-video-wrapper {
  max-width: 1000px;
  width: 100%;
  position: relative;
  z-index: 1;
  color: var(--brand-light);
}

/* Responsive video frame */
.stellar-video-frame {
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  margin-bottom: 40px;
}

.stellar-video-frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Caption */
.stellar-caption h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.stellar-caption h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: white;
  margin-top: 6px;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: underline-flow 1.2s ease forwards 0.6s;
}

@keyframes underline-flow {
  to { transform: scaleX(1); }
}

.stellar-caption p {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  color: rgba(255,255,255,0.85);
}

/* Responsive */
@media (max-width: 768px) {
  .stellar-caption h2 { font-size: 1.7rem; }
  .stellar-caption p { font-size: 1rem; }
}
.cosmic-impact-zone {
  
  color: #fff;
  padding: 100px 20px;
  text-align: center;
}

.stellar-shell {
  max-width: 1200px;
  margin: 0 auto;
}

.nebula-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 60px;
  color: #ff5f6d; /* Luxury golden accent */
  letter-spacing: 2px;
  
  position: relative;
}
.nebula-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  background: #ff5f6d;
  margin: 15px auto 0;
  border-radius: 2px;
}

.galaxy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.supernova-card {

  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 25px rgba(0,0,0,0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}
.supernova-card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.card-visual img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  filter: brightness(0.9);
  transition: filter 0.3s ease;
}
.supernova-card:hover .card-visual img {
  filter: brightness(1.05);
}

.card-content {
  padding: 25px;
  text-align: left;
}
.card-content h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #ff7b54;
}
.card-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: #e2e6ea;
}

.cosmic-fade {
  opacity: 0;
  transform: translateY(40px);
  animation: cosmicFadeIn 1s forwards;
}

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



/* Mobile view */
@media (max-width: 768px) {
.dmf-hero-section {
  width: 100%;
  height: 100%;
 
  position: relative;
  overflow: hidden;
  font-family: 'GothamLight', sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;
  

}
  .odd-logo img {
  height: 30px;
  width: auto;
}
.dmf-hero-text h2{
	font-size: 2rem;
}

/* Mobile menu animation */
.odd-menu {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.4s ease;
}

.odd-menu.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
}


@media (max-width: 480px) {
.odd-logo img {
  height: 30px;
  width: auto;
}

.founder-section {
  padding: 10px 20px;
  
  display: flex;
  justify-content: center;
  overflow-x: hidden;
}
.dmf-hero-text h2{
	font-size: 2rem;
}
/* Mobile menu animation */
.odd-menu {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.4s ease;
  
}

.odd-menu.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
}



.dmf-hero-section {
  width: 100%;
  height: 90%;
   
  position: relative;
  overflow: hidden;
  font-family: 'GothamLight', sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;

}

.dmf-hero-slides {
  width: 90%;
  
  position: relative;
}

.dmf-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease;
}

.dmf-slide.active {
  opacity: 1;
  transform: translateY(0);
  z-index: 2;
}

/* Slide inner wrapper */
.dmf-slide-inner {
  position: relative;
}

.dmf-slide-inner img {
  width: 100%;
  display: block;
  max-height: 680px;
  object-fit: cover;
  border-radius: 22px;
  filter: brightness(0.4);
}

.dmf-slide-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  width: 80%;
  opacity: 0;
  transition: all 1s ease;
  z-index: 5;
}

.dmf-slide.active .dmf-slide-text {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.dmf-slide-text h2 {
  font-family: 'GothamMedium', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.dmf-slide-text p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.dmf-btn {
  background-color: black;
  color: white;
  padding: 0.8rem 2rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.dmf-btn:hover {
  background-color: #black;
}

.dmf-slider-dots {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 10;
}

.dmf-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f6d;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dmf-dot.active {
  background: white;
  transform: scale(1.2);
   background: #505050;
}

.dmf-hero-section::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #001f4d;
  top: 0;
  left: 0;
  transform-origin: top;
  animation: curtainOpen 1.2s ease forwards;
  z-index: 10;
}

@keyframes curtainOpen {
  0% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
#dzm-carousel-section {
  width: 100%;
  padding: 60px 8%;
  
  font-family: 'GothamLight', sans-serif;
  
  box-sizing: border-box;
}



.dzm-carousel-header p {
  text-align: center;
  font-size: 1rem;
  color: #555;
  margin-bottom: 40px;
}

.dzm-carousel-wrapper {
  position: relative;
  overflow: hidden;
}

.dzm-carousel-track-wrapper {
  overflow: hidden;
}

.dzm-carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.8s ease;
}

.dzm-card {
  flex: 0 0 23%;
  
  border-radius: 12px;
  overflow: hidden;
 
  display: flex;
  flex-direction: column;
}

.dzm-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.dzm-card h3 {
  font-family: 'GothamMedium', sans-serif;
  font-size: 1.2rem;
  margin: 15px 15px 5px;
  color: #001f4d;
}

.dzm-card p {
  font-size: 0.95rem;
  margin: 0 15px 15px;
  color: #555;
}

.dzm-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  background: rgba(0,0,0,0.05);
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  z-index: 10;
  transition: background 0.3s;
}

.dzm-carousel-arrow:hover {
  background: rgba(0,0,0,0.15);
}

.dzm-left-arrow {
  left: -25px;
}

.dzm-right-arrow {
  right: -25px;
}

@media (max-width: 1024px) {
  .dzm-card { flex: 0 0 45%; }
}

@media (max-width: 600px) {
  .dzm-card { flex: 0 0 90%; }
  .dzm-left-arrow { left: 5px; }
  .dzm-right-arrow { right: 5px; }
}

#zmf-info-sec {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 100px 100px;
  
  box-sizing: border-box;
  height: 100vh;
}

.zmf-main-container {
  width: 90%;
  background-color: #f3f3f3;
  
  border-radius: 20px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}

/* Common for all mini sections */
.zmf-mini-sec {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* About Us - full width */
.zmf-about-sec {
  flex-direction: row;
}

/* Bottom sections - Mission & Focus */
.zmf-bottom-wrap {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.zmf-bottom-wrap .zmf-mini-sec {
  flex: 1 1 48%;
}

/* Images */
.zmf-mini-sec img {
  width: 250px;
  height: 180px;
  border-radius: 12px;
  object-fit: cover;
}

/* Text wrapper */
.zmf-text-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zmf-text-wrap h3 {
  font-family: 'GothamMedium', sans-serif;
  font-size: 1.8rem;
  margin-bottom: 8px;
  color: #000;
}

.zmf-subtitle {
  font-size: 1rem;
  color: #555;
  margin-bottom: 15px;
}

.zmf-btn {
  background-color: #f23006;
  color: white;
  padding: 10px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.zmf-btn:hover {
  background-color: #d02605;
}

/* Responsive */
@media (max-width: 1024px) {
  .zmf-mini-sec {
    flex-direction: column;
    text-align: left;
  }
  .zmf-mini-sec img {
    
    height: auto;
  }
  .zmf-bottom-wrap .zmf-mini-sec {
    flex: 1 1 100%;
  }
}
#zmf-impact-sec {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 80px 0;
 
  box-sizing: border-box;
}

.zmf-impact-container {
  width: 90%;
  border-radius: 20px;
  padding: 40px;
   background-color: #f3f3f3;
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Counters */
.zmf-counters {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30px;
  text-align: center;
}

.zmf-counter-box h3 {
  font-family: 'GothamMedium', sans-serif;
  font-size: 2.2rem;
  color: #f23006;
  margin-bottom: 8px;
}

.zmf-counter-box p {
  font-size: 1rem;
  color: #555;
}

/* Feature section: 50/50 */
.zmf-feature-wrap {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.zmf-feature-img,
.zmf-feature-text {
  flex: 1 1 50%;
}

.zmf-feature-img img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
}

.zmf-feature-text h3 {
  font-family: 'GothamMedium', sans-serif;
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #001f4d;
}

.zmf-feature-text p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 20px;
  line-height: 1.6;
}

.zmf-btn {
  background-color: #f23006;
  color: white;
  padding: 10px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.zmf-btn:hover {
  background-color: #d02605;
}

/* Responsive */
@media (max-width: 1024px) {
  .zmf-counters { flex-direction: column; align-items: center; }
  .zmf-feature-wrap { flex-direction: column; }
  .zmf-feature-img, .zmf-feature-text { flex: 1 1 100%; }
}
#dmf-faq-zone {
  
  padding: 80px 0;
  display: flex;
  justify-content: center;
}

.dmf-faq-container {
  width: 90%;
  max-width: 900px;
   background-color: #f3f3f3;
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}

.dmf-faq-title {
  font-family: 'GothamMedium', sans-serif;
  font-size: 2rem;
  margin-bottom: 10px;
  text-align: center;
  color: #000;
}

.dmf-faq-sub {
  text-align: center;
  color: #000;
  margin-bottom: 40px;
  font-family: 'GothamLight', sans-serif;
  
}

.dmf-faq-item {
  border-bottom: 1px solid #eee;
  color: #000;
}

.dmf-faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-size: 1.1rem;
  font-family: 'GothamMedium', sans-serif;
  padding: 20px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;
}

.dmf-faq-arrow {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.dmf-faq-item.active .dmf-faq-arrow {
  transform: rotate(-180deg);
  color: #f23006;
}

.dmf-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  font-family: 'GothamLight', sans-serif;
  color: #000;
  line-height: 1.6;
}
.dmf-faq-answer p{
	color: #000;
}

.dmf-faq-item.active .dmf-faq-answer {
  max-height: 300px;
  padding-bottom: 15px;
  color: #000;
}
 :root{
      --accent:#f23006;
      --muted:#9aa4b2;
      --text:#111318;
      --bg:#fbfcfd;
      --panel:#ffffff;
      --max-width:1180px;
    }

 

    .zyx_shell_q1{
      max-width:var(--max-width);
      margin:48px auto;
      padding:48px 28px;
      box-sizing:border-box;
    }

    .zyx_inner_q1{
      display:flex;
      gap:56px;
      align-items:flex-start;
    }

    /* ============== Timeline (left) ============== */
    .zyx_timeline_col_q1{
      width:220px;
      position:relative;
      flex:0 0 220px;
      display:flex;
      justify-content:flex-start;
      align-items:flex-start;
      padding-top:6px;
    }

    /* base faint line */
    .zyx_base_line_q1{
      position:absolute;
      left:18px;
      top:10px;
      bottom:10px;
      width:3px;
      background:linear-gradient(#e6e9ec,#e6e9ec);
      border-radius:2px;
      z-index:0;
      opacity:1;
    }

    /* progress fill sits above base */
    .zyx_progress_q1{
      position:absolute;
      left:18px;
      top:10px;
      width:3px;
      height:0%;
      background: linear-gradient(180deg,var(--accent), #ff8a6b);
      border-radius:2px;
      z-index:1;
      transition: height 200ms linear;
      box-shadow:0 6px 18px rgba(242,48,6,0.06);
    }

    .zyx_tabslist_q1{
      position:relative;
      z-index:2;
      list-style:none;
      padding:0;
      margin:0;
      display:flex;
      flex-direction:column;
      gap:32px;
      height: 580vh;
      top: 50px;
    }

    .zyx_tab_q1{
      position:relative;
      cursor:pointer;
      padding-left:42px;
      color:var(--muted);
      font-family:'GothamMedium', system-ui, sans-serif;
      font-size:15px;
      letter-spacing:0.1px;
      transition: all 280ms cubic-bezier(.2,.9,.2,1);
      user-select:none;
      display:flex;
      align-items:center;
      gap:8px;
      min-height:28px;
      padding-bottom: 890px;
    }

    /* dot for each tab */
    .zyx_tab_q1::before{
      content:'';
      position:absolute;
      left:6px;
      
      transform:translateY(-50%);
      width:14px;
      height:14px;
      border-radius:50%;
      background:#f2f4f6;
      border:2px solid #d6dbe0;
      box-shadow:0 2px 6px rgba(0,0,0,0.03);
      transition: all 320ms ease;
      z-index:3;
      
    }

    /* active tab style */
    .zyx_tab_q1.zyx_active_tab_q1{
      color:var(--accent);
      transform:scale(1.06);
      font-size:16px;
      font-weight:600;
      letter-spacing:0.2px;
    }

    .zyx_tab_q1.zyx_active_tab_q1::before{
      background:var(--accent);
      border-color:rgba(242,48,6,0.95);
      box-shadow:0 6px 18px rgba(242,48,6,0.14);
      transform:translateY(-50%) scale(1.05);
    }

    /* ============== Content (right) ============== */
    .zyx_content_col_q1{
      flex:1;
      min-width:320px;
    }

    .zyx_section_q1{
      background:transparent;
      padding:36px 0;
      margin:0;
      opacity:0;
      transform:translateY(28px);
      transition: opacity 680ms cubic-bezier(.2,.9,.2,1), transform 680ms cubic-bezier(.2,.9,.2,1);
      will-change:opacity, transform;
    }

    .zyx_section_q1.zyx_visible_q1{
      opacity:1;
      transform:translateY(0);
    }

    .zyx_section_q1 h2{
      font-family:'GothamMedium', system-ui, sans-serif;
      font-size:28px;
      margin:0 0 12px 0;
      color:#0f1720;
    }

    .zyx_section_q1 p{
      margin:0;
      max-width:760px;
      color:#3c4852;
      font-size:16.5px;
      line-height:1.75;
    }

    /* subtle separator between sections for breathing */
    .zyx_section_sep_q1{
      height:36px;
    }

    /* responsiveness */

    


@media (max-width: 600px) { /* Mobile */
.dmf-slide-inner img {
  width: 100%;
  display: block;
  height: 95vh;
  object-fit: cover;
  border-radius: 22px;
  filter: brightness(0.4);
}
.dmf-slide-text h2{
	font-size: 1.8rem;
}
.dmf-slide-text p{
	font-size: 16px;
}
.dmf-slider-dots{
	right: 30px;
}
#zmf-impact-sec{
	position: relative;
	
}


}

/* Mobile + Tablet Responsive Layout */
@media (max-width: 1024px) { /* Tablet */
  #zmf-info-sec {
    padding: 20px 10px;
    background-color: #fff;
  }

  .zmf-main-container {
    display: block; /* stack all sections vertically */
    gap: 20px;
  }

  .zmf-mini-sec {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    text-align: center; /* center text and buttons */
  }

  .zmf-mini-sec img {
     /* smaller image for mobile/tablet */
   
    height: auto;
    margin: 0 auto 15px; /* center image and spacing */
    border-radius: 10px;
  }

  .zmf-text-wrap h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
  }

  .zmf-subtitle {
    font-size: 0.95rem;
    margin-bottom: 12px;
    padding: 0 10px;
  }

  .dmf-btn {
    font-size: 0.9rem;
    padding: 8px 16px;
  }

  .zmf-bottom-wrap {
    display: block; /* stack mission and focus vertically */
    gap: 20px;
  }
}

@media (max-width: 600px) { /* Mobile */
  .zmf-mini-sec img {
  
  }

  .zmf-text-wrap h3 {
    font-size: 1rem;
  }

  .zmf-subtitle {
    font-size: 0.9rem;
  }

  .dmf-btn {
    font-size: 0.85rem;
    padding: 6px 14px;
  }

  #zmf-info-sec {
    padding: 15px 5px;
  }
  #zmf-info-sec{
	height: auto;
  }
}
/* Mobile + Tablet Responsive Layout */
@media (max-width: 1024px) { /* Tablet */
  #zmf-impact-sec {
    padding: 20px 10px;
    background-color: #fff;
  }

  #zmf-impact-sec h2 {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  /* Counters */
  .zmf-counters {
    display: flex;
    flex-direction: column; /* stack counters vertically */
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
  }

  .zmf-counter-box {
    width: 80%;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  }

  .zmf-counter-box h3 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: #ff5f6d;
  }

  .zmf-counter-box p {
    font-size: 1rem;
    color: #333;
  }

  /* Feature Section */
  .zmf-feature-wrap {
    display: block; /* stack image and text */
    text-align: center;
    gap: 15px;
  }

  .zmf-feature-img img {
    
    height: auto;
    border-radius: 10px;
    margin: 0 auto 15px;
  }

  .zmf-feature-text h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .zmf-feature-text p {
    font-size: 0.95rem;
    margin-bottom: 12px;
    padding: 0 10px;
  }

  .dmf-btn {
    font-size: 0.9rem;
    padding: 8px 16px;
  }
}

@media (max-width: 600px) { /* Mobile */
  #zmf-impact-sec {
    padding: 15px 5px;
  }
  
  .zmf-feature-img img{
	width: 100%;
  }
  .dzm-carousel-arrow{
	display: none;
  }
  .zmf-mini-sec img{
	width: 100%;
  }

  #zmf-impact-sec h2 {
    font-size: 1.5rem;
  }

  .zmf-counter-box h3 {
    font-size: 1.2rem;
  }

  .zmf-counter-box p {
    font-size: 0.9rem;
  }

  .zmf-feature-img img {
   
  }

  .zmf-feature-text h3 {
    font-size: 1rem;
  }

  .zmf-feature-text p {
    font-size: 0.85rem;
  }

  .dmf-btn {
    font-size: 0.85rem;
    padding: 6px 14px;
  }
}




.foundation-facts {
  display: flex;
  justify-content: center;
  align-items: center;
  
  
  text-align: center;
}

.foundation-facts h2 {
  font-size: 3rem;
  font-weight: 700;
  color: #111;
  position: relative;
  animation: fadeInUp 1.2s ease-out forwards;
  overflow-y: hidden;
}
@media screen and (max-width: 768px) {
  .foundation-facts h2 {
    font-size: 1.5rem; /* smaller font for mobile */
    font-weight: 700;
    color: #111;
    position: relative;
    animation: fadeInUp 1.2s ease-out forwards;
    overflow-y: hidden;
	padding-top: 30px;
  }
 
  .zmf-mini-sec .dmf-btn{
	justify-self: center;
	width: 150px;
	left: 30%;
  }
  #zmf-info-sec{
	margin-bottom: 30px;
  }
  .zmf-mini-sec img{
	width: 90%;
  }
  #foundation-stats{
	margin-top: -80px;
  }
  .nice{
	width: 100%;
  }
  .zmf-feature-img img{
	width: 100%;
  }
  .vision-title{
	font-size: 1.5rem;
  }
}


.foundation-facts h2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: #ff6b00; /* accent line */
  border-radius: 2px;
  animation: slideIn 1s ease-out 0.8s forwards;
  opacity: 0;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 80px;
    opacity: 1;
  }
}
#foundation-stats {
  
  padding: 50px 20px;
  text-align: center;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.stat-box {
  background: #fff;
  border-radius: 16px;
  padding: 30px 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.stat-box:hover {
  transform: translateY(-8px);
}

.stat-counter {
  font-size: 2.5rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 10px;
}

.stat-box p {
  font-size: 1rem;
  font-weight: 500;
  color: #555;
}

/* Responsive */
@media (max-width: 600px) {
  .stat-counter {
    font-size: 2rem;
  }
  
}
.mom{
    border-radius: 20px;
    box-shadow:0 6px 18px rgba(242,48,6,0.14);
    width: 100%;
    height: 500px;
    margin-bottom: 20px;

}
/* Mobile version */
@media (max-width: 768px) {
  .mom {
    height: auto; /* reduce height for mobile */
    margin-bottom: 15px; /* slightly smaller spacing */
    box-shadow: 0 4px 12px rgba(242, 48, 6, 0.1); /* lighter shadow */
    border-radius: 15px; /* slightly smaller radius */
  }
  .zyx_content_col_q1{
    margin-top: -90px;
  }
  
}
@media (max-width: 768px) {
  /* Collapse into single column */
  .zyx_inner_q1 {
    flex-direction: column;
    gap: 24px;
  }
  
 

  /* Hide vertical timeline parts */
  .zyx_timeline_col_q1 {
    width: 100%;
    flex: unset;
    padding: 0;
  }
  .zyx_base_line_q1,
  .zyx_progress_q1,
  .zyx_tab_q1::before {
    display: none !important;
  }

  /* Tabs as horizontal nav */
  .zyx_tabslist_q1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    padding: 10px;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zyx_tabslist_q1::-webkit-scrollbar {
    display: none;
  }

  /* Tab links */
  .zyx_tab_q1 {
    padding: 8px 14px;
    background: #f2f4f6;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    height: 50px;
    width: 100px;
  }
  .zyx_timeline_col_q1{
    display: none;
  }
 
}
/* Container */
#quark-fizzle {
  padding: 60px 20px;
 
  overflow-x: hidden;

}

.glorp-container {
  max-width: 800px;
  margin: 0 auto;
}

/* Title */
.blip-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #111;
}

.blop-sub {
  font-size: 1rem;
  color: #555;
  margin-bottom: 40px;
}

/* FAQ Item */
.snazz-item {
  border-left: 4px solid #ff6347; /* tomato-ish left border */
  margin-bottom: 15px;
  background: rgba(255, 99, 71, 0.05); /* transparent tomato background */
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* FAQ Question */
.snazz-question {
  width: 100%;
  text-align: left;
  padding: 20px;
  font-size: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  transition: background 0.3s ease;
  color: #000;
}

.snazz-question:hover {
  background: rgba(255, 99, 71, 0.1);
}

/* Toggle symbol */
.snazz-toggle {
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

/* FAQ Answer */
.snazz-answer {
  max-height: 0;
  padding: 0 20px;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  font-size: 1rem;
  color: #333;
}
.snazz-answer p{
	color: #000;
}

/* Open state */
.snazz-item.open .snazz-answer {
  max-height: 500px;
  padding: 15px 20px 20px 20px;
}

.snazz-item.open .snazz-toggle {
  transform: rotate(45deg);
  content: '✖';
}
.trst_wrpr {
  display: flex;
  gap: 3rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4rem 2rem;
  background: #fff;
}

.trst_card {
  background: #f8f8f8;
  border: 1px solid #e5e5e5;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 320px;
  flex: 1;
  transition: all 0.3s ease;
  cursor: default;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.trst_card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.trst_img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px;
}

.trst_name {
  margin: 1.2rem 0 0.5rem;
  font-size: 1.4rem;
  color: #000;
  font-weight: 700;
}

.trst_role {
  font-size: 1rem;
  color: #666;
  margin-bottom: 1.5rem;
}

.trst_btn {
  padding: 0.75rem 1.5rem;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 6px;
  transition: background 0.3s ease;
}
.trst_btn:hover {
  background: #333;
}

/* Modal */
.trst_modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  overflow-y: auto;
  padding: 2rem;
}

.trst_modal_content {
  background: #fff;
  max-width: 700px;
  margin: 5% auto;
  padding: 3rem 2rem;
  text-align: center;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  animation: fadeInUp 0.4s ease;
}

.trst_close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 2rem;
  cursor: pointer;
  color: #000;
  font-weight: 400;
}

.trst_modal_img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.trst_modal_name {
  font-size: 1.6rem;
  font-weight: 700;
  color: #000;
  margin: 0.5rem 0 0.3rem;
}

.trst_linkedin {
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
  transition: all 0.3s ease;
}
.trst_linkedin:hover {
  background: #000;
  color: #fff;
}

.trst_bio {
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

/* Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

  /* Scoped variables */
  .trst_wrpr { --bg:none; --muted:#6b6b6b; --text:#111; --card:#f3f3f3; --shadow: rgba(11,15,20,0.08);  padding:48px 20px; color:var(--text); }

  /* Heading */
  .trst_heading { max-width:820px; margin:0 auto 36px; text-align:center; }
  .trst_title { font-size:28px; margin:0 0 8px; color: #000; letter-spacing: -0.01em; font-weight:700; }
  .trst_desc { margin:0; color:var(--muted); font-size:15px; line-height:1.6; }

  /* Cards container */
  .trst_cards { display:flex; gap:28px; justify-content:center; align-items:stretch; flex-wrap:wrap; margin-top:18px; }

  /* Card */
  .trst_card { width:360px; background:var(--card); border-radius:14px; box-shadow:0 10px 30px var(--shadow); padding:20px; display:flex; flex-direction:column; align-items:center; text-align:center; transition:transform .22s ease, box-shadow .22s ease; }
  .trst_card:hover { transform:translateY(-8px); box-shadow:0 20px 48px rgba(11,15,20,0.12); }

  .trst_imgwrap { width:100%; overflow:hidden; border-radius:10px; flex:0 0 auto; }
  .trst_img { width:100%; height:320px; object-fit:cover; display:block; }

  .trst_name { margin:18px 0 6px; font-size:20px; font-weight:700; color:var(--text); }
  .trst_role { margin:0 0 18px; color:var(--muted); font-size:14px; }

  .trst_btn { appearance:none; border:0; background:#111; color:#fff; padding:12px 18px; border-radius:9px; cursor:pointer; font-weight:600; width:100%; font-size:15px; transition:background .18s ease, transform .12s ease; }
  .trst_btn:hover { background:#333; transform:translateY(-2px); }

  /* Modal (overlay + content) */
  .trst_modal { display:none; position:fixed; inset:0; z-index:99999; align-items:center; justify-content:center; }
  .trst_modal[aria-hidden="false"] { display:flex; }
  .trst_modal_overlay { position:absolute; inset:0; background:rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

  .trst_modal_content { position:relative; z-index:1; background:#fff; width:94%; max-width:840px; border-radius:12px; padding:28px; box-shadow:0 30px 80px rgba(0,0,0,0.28); display:flex; gap:24px; align-items:flex-start; animation:trst_modal_pop .28s ease both; max-height: calc(100vh - 120px); overflow:hidden; }
  @keyframes trst_modal_pop { from { transform: translateY(16px) scale(.995); opacity:0 } to { transform: translateY(0) scale(1); opacity:1 } }

  .trst_modal_left { flex:0 0 110px; display:flex; align-items:flex-start; justify-content:center; }
  .trst_modal_img { width:110px; height:110px; object-fit:cover; border-radius:999px; box-shadow:0 8px 28px rgba(0,0,0,0.12); display:block; }

  .trst_modal_right { flex:1 1 auto; min-width:0; text-align:left; }
  .trst_modal_name { margin:0 0 6px; font-size:20px; font-weight:700; color:var(--text); }
  .trst_modal_role { margin:0 0 12px; color:var(--muted); font-size:14px; }

  .trst_modal_link { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; border:1px solid #111; color:#111; text-decoration:none; margin-bottom:12px; }
  .trst_modal_link svg { display:block; width:16px; height:16px; }

  .trst_modal_bio { color:#222; font-size:15px; line-height:1.65; max-height: calc(100vh - 260px); overflow:auto; padding-right:6px; }

  .trst_modal_close { position:absolute; top:12px; right:14px; border:0; background:transparent; color:#111; font-size:26px; line-height:1; cursor:pointer; padding:6px; }

  /* Responsive: stack modal content on narrow screens */
  @media (max-width:720px) {
    .trst_modal_content { flex-direction:column; align-items:center; padding:20px; max-height: calc(100vh - 80px); overflow:auto; }
    .trst_modal_left { margin-bottom:10px; flex:0 0 auto; }
    .trst_modal_right { text-align:center; }
    .trst_modal_bio { text-align:left; }
  }

  /* Mobile card widths */
  @media (max-width:980px) {
    .trst_card { width:320px; }
  }
  @media (max-width:640px) {
    .trst_cards { flex-direction:column; gap:18px; align-items:center; }
    .trst_card { width:92%; max-width:420px; }
  }