:root{
  --primary:#5a9bd5;
  --dark:#020613;
  --white:#ffffff;
  --text:#AAB4C5;
  --muted:rgba(255,255,255,0.75);
}

*{
  box-sizing:border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-optical-sizing: auto;
  background: var(--white);
  color: var(--dark);
  overflow-x: hidden !important;
}
html {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
/* Prevent scrolling when menu is open */
body.menu-open {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100%;
}

/* CONTAINER */
.container{
  width:min(1440px,92%);
  margin:auto;
}

/* GLOBAL TYPOGRAPHY */
h1,h2,h3,p{
  margin:0;
}

h1{
  font-size:clamp(42px,7vw,88px);
  line-height:.95;
  letter-spacing:-2px;
  color:var(--dark);
}

h2{
  font-size:clamp(32px,4vw,56px);
  line-height:1.1;
  letter-spacing:-1.5px;
}

p{
  color: #000000;
  line-height:1.7;
}
img
{
	border-radius:0 !important;
}

/* BUTTON */
.btn,
button,
input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 26px;
  background:var(--primary);
  color:#fff;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  border:0;
  cursor:pointer;
  transition:.3s ease;
/*   box-shadow:0 15px 35px rgba(22,98,252,.25); */
}

.btn:hover{
  transform:translateY(-3px);
  background:#0f4ed0;
}

/* ================= HEADER ================= */

.site-header,
.mr-header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:9999;
  background:transparent !important;
}

/* optional logo visibility */
.site-title,
.site-logo{
  font-weight:900;
  font-size:22px;
  color:#fff;
  text-decoration:none;
}



.mr-full-menu{
  position:fixed;
  inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  transform:translateY(-100%);
  transition:.6s ease;
  z-index:99999;
}

/* OPEN STATE */
.mr-full-menu.active{
  transform:translateY(0);
}

/* LEFT SIDE IMAGE */
.mr-menu-left{
  position:relative;
}


/* dark overlay */
.mr-menu-left::after{
  content:"";
  position:absolute;
  inset:0;
}

/* RIGHT SIDE IMAGE BACKGROUND */
.mr-menu-right{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:80px;
}

/* RIGHT OVERLAY */
.mr-menu-right::after{
  content:"";
  position:absolute;
  inset:0;
}

/* MENU LIST */
.mr-overlay-nav{
  position:relative;
  z-index:2;
  list-style:none;
  padding:0;
  margin:0;
}

.mr-overlay-nav li{
  margin:12px 0;
}

.mr-overlay-nav a{
  color:#fff;
  text-decoration:none;
  font-size:clamp(32px,4vw,64px);
  font-weight:800;
  transition:.3s ease;
}

.mr-overlay-nav a:hover{
  color:#5a9bd5;
  transform:translateX(10px);
}

/* CLOSE BUTTON */


/* LEFT LOGO */


.mr-logo img{
  width: 180px;
  height: auto;
  display: block;
  object-fit: contain;
}






.mr-header{
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  max-width: 1440px;

  height: 110px;
  background: #07111F;

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

  padding: 0;
  z-index: 9999;
  border-radius: 12px; /* optional premium look */
}

.mr-logo{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  min-width:250px;
  height:58px;
  color:#fff;
  text-decoration:none;
  font-weight:900;
  font-size:28px;
  letter-spacing:1px;
}

.mr-menu-toggle{
  width:58px;
  height:44px;
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  padding:0;
}

.mr-menu-toggle span{
  display:block;
  width:54px;
  height:4px;
  background:#fff;
  border-radius:10px;
}

.mr-full-menu{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  grid-template-columns:50% 50%;
  transform:translateY(-100%);
  transition:.55s ease;
}

.mr-full-menu.active{
  transform:translateY(0);
}

.mr-menu-left{
  background:#2E4A64;
  padding:48px;
  position:relative;
  overflow:hidden;
}

.mr-menu-left::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("https://theseosynergy.com/media-republic/wp-content/uploads/2026/07/Group-1213-1.webp") center/cover no-repeat;
  opacity:.75;
  z-index:1;
}

.mr-menu-left::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
}

.menu-logo{
  position:relative;
  z-index:3;
}










/* ================= HERO ================= */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;

  /* 🔥 ONLY BACKGROUND IMAGE HERE (NOT ACF) */
  background-image:url("https://theseosynergy.com/media-republic/wp-content/uploads/2026/07/Group-1203-1-1.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* DARK OVERLAY */


/* CONTENT ABOVE */
.hero-inner{
  position:relative;
  z-index:2;
  width:min(1440px,92%);
  margin:auto;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
}

/* LEFT */
.hero-content{
  color:#fff;
}

/* Initial state for hero content */
.hero-content {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
}

/* Animate when in viewport */
.hero-content.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* SUB HEADING */
.hero-sub{
  display:inline-block;
  background:#5a9bd5;
  color:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  margin-bottom:18px;
}

/* TITLE */
.hero h1 {
    font-size: 80px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
letter-spacing: -3px;
}

/* ================= GLOBAL BUTTON ANIMATION ================= */
.animated-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s ease;
}

/* ICON ELEMENT INSIDE BUTTON */
.animated-btn .btn-icon {
  display: inline-block;
  transition: 0.3s ease;
  transform: translateX(0);
}

/* HOVER ICON ANIMATION */
.animated-btn:hover .btn-icon {
  transform: translateX(6px);
}

/* SHINE EFFECT */
.animated-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: 0.5s;
}

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

/* ================= VARIANTS ================= */

/* Blue variant (default hero style) */
.animated-btn.blue {
  background: #5a9bd5;
  color: #fff;
  box-shadow: 0 15px 35px rgba(22, 98, 252, 0.25);
	margin-top: 30px;
}

.animated-btn.blue:hover {
  background: #5a9bd5;
transform: translatey(-3px);
  box-shadow: 0 15px 35px rgba(22, 98, 252, 0.35);
}

/* Dark variant */
.animated-btn.dark {
  background: #011022;
  color: #fff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.animated-btn.dark:hover {
  background: #02233D; /* Slightly lighter on hover */
transform: translatey(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

/* RIGHT IMAGE */
.hero-visual img{
  width:100%;
  border-radius:18px;
}

.hero-sub{
  display:inline-flex;
  align-items:center;
  gap:6px;

  /* 🔥 FIGMA STYLE PILL */
  background:linear-gradient(135deg,#5a9bd5,#0F4ED0);
  color:#fff;

  padding:8px 18px;
  border-radius:4px;

  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;

  box-shadow:0 10px 30px rgba(22,98,252,0.35);

  margin-bottom:18px;
  position:relative;
  overflow:hidden;
}

/* OPTIONAL LIGHT GLOW EFFECT */
.hero-sub::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  transform:translateX(-100%);
  animation:shine 3s infinite;
}

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



/* RESPONSIVE */
@media(max-width:900px){
  .hero-inner{
    grid-template-columns:1fr;
  }
}


@media(max-width:748px){
  .hero h1 {
    font-size: 50px;
    font-weight: 700;
}
}



/* About */
.about-section {
  padding: 100px 0;
  position: relative;
}

.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}

/* LEFT COLUMN */
.about-content {
  position: relative;
  z-index: 2;
}

/* Initial state */
.about-content {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

/* Animate when in viewport */
.about-content.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Optional keyframes if you prefer */
@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.about-sub {
  display: inline-block;
  color: #5a9bd5;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
}

.about-content h2 {
  font-size: clamp(34px,4vw,56px);
  line-height: 1.1;
  font-weight: 900;
  margin-bottom: 20px;
  color: #020613;
}

.about-description {
    font-size: 18px;
    color: #000 !important;
    line-height: 1.7;
}

/* LEFT COLUMN BACKGROUND IMAGE */
.about-bg-image {
    position: absolute;
    top: -240px;
    left: -220px;
    z-index: 1;
    width: 500px;
    opacity: 1;
    animation: floatUpDown 2s ease-in-out infinite;
}

.about-bg-image img {
  width: 100%;
  height: auto;
}

/* RIGHT COLUMN IMAGE */
.about-image img {
  width: 100%;
border-radius:0;

}

/* FLOAT ANIMATION */
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* RESPONSIVE */
@media(max-width:900px){
  .about-inner {
    grid-template-columns:1fr;
    text-align: left;
  }

  .about-bg-image {
    top: -20px;
    left: -20px;
    width: 80px;
  }

  .about-image img {
    margin-top: 20px;
  }
}





/*----------------------Fourth Section-------------------  */


.fourth-section {
    position: relative;
	padding: 80px 0px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #2E4A64; /* fallback background */
    color: #fff;
}

#fourth-section-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.fourth-section-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: min(1440px, 92%);
    margin: auto;
}

.fourth-section-image img {
    width: 100%;
	border-radius:0px;
/*     border-radius: 18px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.5);
    animation: floatUpDown 6s ease-in-out infinite; */
}

@keyframes floatUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.fourth-section-content h2 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
}

.fourth-section-content p {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
    .fourth-section-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .fourth-section-content p {
        margin: 0 auto;
    }
}



/* --------------------------Brands Sections----------------------------- */
.brands-section {
  padding-top: 80px;
  text-align: center;
}

.brands-title {
  font-size: clamp(32px, 4vw, 50px);
  margin-bottom: 15px;
  font-weight: 800;
  color: #111;
}

.brands-desc {
  font-size: 16px;
  color: #666;
  margin-bottom: 50px;
}

/* Grid layout: 4 columns */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  justify-items: center;
}

/* Brand card */
.brand-card {
  width: 100%;       /* fixed card size */
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #030D29;
padding:70px;
  transition: all 0.3s ease;
}

.brand-card img {
  max-width: 85%;
  object-fit: contain;
  display: block;
}

/* Hover effect for border + slight scale */
.brand-card:hover {
  border-color: #5a9bd5;

}

/* Responsive: 2x4 grid on tablet, 1x8 on mobile */
@media (max-width: 900px) {
  .brands-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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


/* Case Study Section */

.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-items: center;
  padding-top: 20px;

}

.case-card {
  width: 100%;
  perspective: 1000px;
padding: 15px;
    border: 1px solid #000;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 400px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.case-card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-subheading
{
	color:#5a9bd5;
}
h3.case-heading {
    font-size: 25px;
    line-height: 30px;
}
.card-text {
  text-align: center;
  padding: 15px;
}

.card-back {
  background-color: #5a9bd5; /* background color on flip */
  color: #fff;
  transform: rotateY(180deg);
  text-align: center;
  padding: 20px;
}

.case-back-subheading {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.case-back-content {
  font-size: 16px;
  line-height: 1.6;
color:#fff
}

/* section.case-studies-section {
    padding-top: 80px;
} */




/* --------------Partners logos----------------- */


.partner-logos-section{
  background:#5a9bd5;
/*   padding-top:30px; */
padding-bottom:50px;
  overflow:hidden;
border-bottom:2px solid #FFF;	
}

.section-heading.center{
  text-align:center;
}

.partner-logos-section h2{
  text-align:center;
  margin-bottom:45px;
  color:var(--dark);
}

.logo-slider{
  width:100%;
  overflow:hidden;
  position:relative;
border-bottom: 2px solid #fff;
padding-bottom: 30px;
background: white;
    padding-top: 30px;
}

.logo-slider:before{
  left:0;
  background:linear-gradient(90deg,#fff,transparent);
}

.logo-slider:after{
  right:0;
  background:linear-gradient(270deg,#fff,transparent);
}

.logo-track{
  display:flex;
  width:max-content;
  gap:28px;
  animation:logoScroll 22s linear infinite;
}

/* .logo-slider:hover .logo-track{
  animation-play-state:paused;
} */

.logo-slide{
  min-width:210px;
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
}

.logo-slide img{
  max-width:150px;
/*   max-height:150px; */
  object-fit:contain;
  transition:.3s ease;
}

.logo-slide:hover img{
  filter:grayscale(0%);
  opacity:1;
  transform:scale(1.06);
}

@keyframes logoScroll{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

@media(max-width:600px){
  .logo-slide{
    min-width:170px;
    height:100px;
  }

  .logo-track{
    animation-duration:16s;
  }
}



.partners-paragraph {
    margin: auto !important;
    padding-top: 50px;
	max-width: 1100px !important;
}



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



/* RIGHT MENU BASE */
.mr-menu-right{
  position: relative;
  overflow: hidden;
}

/* PARTICLES BACKGROUND */
#menu-particles{
  position:absolute;
  inset:0;
  z-index:0;
  background:#5a9bd5; /* fallback */
}

/* MENU CONTENT ABOVE PARTICLES */
.mr-menu-right .mr-menu-close,
.mr-overlay-nav{
  z-index:2;
}

/* OPTIONAL DARK OVERLAY FOR BETTER READABILITY */
#menu-particles::after{
  content:"";
  position:absolute;
  inset:0;
}
/* .mr-menu-right{
  background:#021a49;
  padding:70px 80px;
  position:relative;
  display:flex;
  align-items:center;
} */

.mr-menu-close{
  position: absolute;
  top: 50px;
  right: 50px;   /* THIS FIXES LEFT ISSUE */
  left: auto;    /* force remove left alignment */
  

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

	font-weight:400;
  color: #fff;
  font-size: 100px;
  cursor: pointer;
  z-index: 10;
}

.mr-overlay-nav{
  list-style:none;
  padding:0;
  margin:0;
}

.mr-overlay-nav li{
  margin:10px 0;
}

.mr-overlay-nav a{
  color:#fff;
  text-decoration:none;
  font-size:75px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-2px;
  transition:.25s ease;
}

.mr-overlay-nav a:hover{
  color:#0a0f2c;
  padding-left:15px;
}

@media(max-width:1440px)
{
	.mr-header{
    max-width:1200px;
  }

}

@media(max-width:900px){
  .mr-header{
    height:90px;
    padding:0 22px;
  }

  .mr-logo{
    min-width:190px;
    height:52px;
    font-size:22px;
  }

  .mr-full-menu{
    grid-template-columns:1fr;
  }

  .mr-menu-left{
    display:none;
  }

  .mr-menu-right{
    padding:90px 35px;
  }

  .mr-menu-close{
    top:28px;
    right:32px;
    width:64px;
    height:64px;
    font-size:52px;
  }

  .mr-overlay-nav a{
    font-size:44px;
  }
}



/* ------------CTA-------------- */

.mr-cta-section {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
    background-image: url(https://theseosynergy.com/media-republic/wp-content/uploads/2026/07/Group-1128.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    padding: 100px 0;
    width: 1440px;
    margin: 120px auto;
}

.mr-cta-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mr-cta-box {
  position: relative;
  z-index: 2;
}

.mr-cta-content h2 {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  margin-bottom: 15px;
}

.mr-cta-content p {
  font-size: 18px;
  margin-bottom: 25px;
}

.mr-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: #020613;
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}



/* .mr-cta-btn:hover {
  transform: translateY(-3px);
  background: #0f4ed0;
} */

/* Animation - CONNECT left se, NOW right se */
.mr-cta-section .bg-word {
    position: absolute;
    font-size: 150px;
    font-weight: 900;
    color: transparent;
    letter-spacing: 8px;
    top: 50%;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    transition: transform 2.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease;
    -webkit-text-stroke: 2px #ffffff3b;
}
.mr-cta-section .bg-word.connect {
  left: 0%;
  transform: translateY(-50%) translateX(-130%);
  opacity: 0;
}
.mr-cta-section .bg-word.now {
  right: 0%;
  transform: translateY(-50%) translateX(130%);
  opacity: 0;
}
.mr-cta-section.animated .bg-word.connect {
  transform: translateY(-80%) translateX(0%);
  opacity: 1;
}
.mr-cta-section.animated .bg-word.now {
  transform: translateY(-20%) translateX(0%);
  opacity: 1;
}
.mr-cta-content h2,
.mr-cta-content p,
.mr-cta-section .animated-btn {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.35s, transform 0.7s ease 0.35s;
}
.mr-cta-section.animated .mr-cta-content h2,
.mr-cta-section.animated .mr-cta-content p,
.mr-cta-section.animated .animated-btn {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile fix */
@media (max-width: 768px) {
  .mr-cta-section .bg-word {
    font-size: 60px;
    letter-spacing: 4px;
  }
}







/* --------Particles-------------- */

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #00356b; /* Hero background color */
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3); /* Optional overlay */
    z-index: 2;
}

.hero-inner {
    position: relative;
    z-index: 3;
}
.hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 20px;
}

.particles-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-inner {
    position: relative;
    z-index: 1;
/*     display: flex; */
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
}

.hero-content {
    flex: 1;
    color: #fff;
}

.hero-visual {
    flex: 1;
    text-align: right;
}

.hero-visual img {
    max-width: 100%;
    height: auto;
}

.hero h1 {
    font-size: 80px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}

.hero p {
    font-size: 18px;
    color: #fff;
    max-width: 500px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.section-btn
{
	margin-top:20px;
}






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

.mr-footer {
    background: #2E4A64 !important;
    color: #fff;
    font-family: "Inter", sans-serif;
    padding: 70px 0 0;
}

.mr-footer-inner {
    width: 1440px;
    margin: 0 auto;
}

/* Top grid — 4 columns */
.mr-footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 50px;
    padding-bottom: 50px;
}

/* Logo column */
.mr-footer-logo-link {
    display: inline-block;
    margin-bottom: 20px;
}

.mr-footer-logo {
    height: 72px;
    width: auto;
    object-fit: contain;
    display: block;
}
img.mr-footer-partners-logo {
    width: 70%;
    margin-top: 20px;
}

.mr-footer-brand p {
    color: rgba(255,255,255,0.72);
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 260px;
    margin: 0;
}

/* Column headings */
.mr-footer-col h4 {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 20px;
    letter-spacing: -0.3px;
}

/* Nav list */
.mr-footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mr-footer-nav li a {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-size: 14.5px;
    transition: color 0.25s ease;
}

.mr-footer-nav li a:hover {
    color: #fff;
}

/* Social list — icon + label inline */
.mr-social-list li a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.78);
    font-size: 14.5px;
    text-decoration: none;
    transition: color 0.25s ease;
}

.mr-social-list li a:hover {
    color: #fff;
}

.mr-social-list li a svg {
    flex-shrink: 0;
    opacity: 0.9;
}

/* Contact list — icon + text inline */
.mr-contact-list {
    gap: 16px !important;
}

.mr-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,0.78);
    font-size: 14px;
    line-height: 1.6;
}

.mr-contact-list li svg {
    flex-shrink: 0;
    margin-top: 3px;
    opacity: 0.85;
}

.mr-contact-list li span {
    color: rgba(255,255,255,0.78);
}

.mr-contact-list li a {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    transition: color 0.25s ease;
}

.mr-contact-list li a:hover {
    color: #fff;
}

/* Copyright bar */
.mr-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 22px 0;
    text-align: center;
}

.mr-footer-bottom p {
    color: rgba(255,255,255,0.55);
    font-size: 14px;
    margin: 0;
}

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

@media (max-width: 991px) {
    .mr-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

@media (max-width: 600px) {
    .mr-footer {
        padding: 55px 0 0;
    }

    .mr-footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .mr-footer-brand p {
        max-width: 100%;
    }
}





/* =============================================
   ABOUT US PAGE CSS
   ============================================= */


/* .about-banner-particles {
    position: relative;
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    color: #fff;
    padding: 80px 20px;
	background: #021a49;
}

#about-banner-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #021a49; 
}

.about-banner-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
}

.about-banner-content span {
    display: inline-block;
    color: #5a9bd5;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    font-size: 14px;
}

.about-banner-content h1 {
    font-size: clamp(40px,5vw,70px);
    font-weight: 900;
    margin-bottom: 20px;
	color: #fff !important;
}

.about-banner-content p {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
} */

.about-banner-particles{
    position:relative;
    min-height:70vh;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
}

/* DARK OVERLAY */
.about-banner-overlay{
    position:absolute;
    inset:0;
   
}

/* CONTENT CONTAINER */
.about-banner-content{
    position:relative;
    z-index:2;
    max-width:100%;
    text-align:center; /* LEFT SIDE TEXT */
    color:#fff;
	margin: auto;
	
}

/* TITLE */
.about-banner-content h1{
    font-size:clamp(36px,5vw,64px);
    line-height:1.1;
    font-weight:800;
    margin:0;
	color:#fff;
	text-align: center;
}

/* OPTIONAL LEFT ALIGN FIX */
.container{
    width:min(1440px,92%);
    margin:auto;
}

/* ========================Icon Box Section============================= */

.capabilities-section {
  background: #2E4A64;
/*   padding: 80px 0; */
}

.capabilities-section .section-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: #000;
  margin-bottom: 50px;
  text-transform: uppercase;
}

.capabilities-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: start;
}

h3.capabilities-heading {
    text-align: center;
    color: #fff;
    font-size: 60px;
	margin-bottom: 20px;
}
/* LEFT TABS */
.capabilities-tabs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 70%;
    margin: auto;
}



.cap-tab {
  background: transparent;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #000;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: none;
}

.cap-tab:hover {
  background: rgba(0,0,0,0.08);
}

.cap-tab.active {
  background: #fff;
  border-color: #fff;
  color: #000;
}

/* RIGHT PANELS */
.capabilities-panels {
    position: relative;
    padding-top: 65px;
}

.cap-panel {
  display: none;
  background: #fff;
  border-radius: 16px;
  padding: 60px;
}

.cap-panel.active {
  display: block;
}

.cap-panel h3 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #000;
}

.cap-panel-icon {
  text-align: left;
  margin-bottom: 25px;
}

.cap-panel-icon img {
  max-height: 200px;
  width: auto;
  object-fit: contain;
}

.cap-panel p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .capabilities-layout {
    grid-template-columns: 1fr;
  }

  .cap-tab {
    font-size: 14px;
    padding: 12px 20px;
  }
}

.capabilities-section {
  background: #2E4A64;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;

}

#about-icon-box-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.capabilities-section .container {
  position: relative;
  z-index: 2;
}

.capabilities-section .section-title {
  color: #fff;
}

.cap-tab {
  border-color: #fff;
  color: #fff;
}

.cap-tab.active {
  background: #fff;
  color: #000;
}

/* Tab buttons glow */
.cap-tab {
/*     border: 2px solid #1563fd; */
    color: #fff;
/*     box-shadow: 0 0 8px rgba(21, 99, 253, 0.4); */
    transition: all 0.3s ease;
    background: #2E4A64;
    backdrop-filter: blur(10px);
}

.cap-tab:hover {
/*   box-shadow: 0 0 18px rgba(21, 99, 253, 0.8); */
  border-color: #5a9bd5;
/*   background: rgba(21, 99, 253, 0.15); */
}

.cap-tab.active {
  background: #fff;
  border-color: #fff;
  color: #000;
/*   box-shadow: 0 0 20px rgba(21, 99, 253, 1), 0 0 40px rgba(21, 99, 253, 0.5); */
}

/* Right panel card glow */
.cap-panel {
  border: 1px solid rgba(21, 99, 253, 0.4);
  box-shadow: 0 0 20px rgba(21, 99, 253, 0.3), 0 0 60px rgba(21, 99, 253, 0.1);
  transition: box-shadow 0.3s ease;
width: 70%;
    margin: auto;
height: auto;
}

/* .cap-panel.active {
  box-shadow: 0 0 25px rgba(21, 99, 253, 0.5), 0 0 80px rgba(21, 99, 253, 0.2);
} */





/* ========================Steps Section============================= */




.step-section {
  padding: 100px 0;
  background: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle background gradient */
.step-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(22,98,252,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.step-section-heading {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  margin-bottom: 14px;
  color: #0a0f2c;
  letter-spacing: -1px;
}

.step-section-paragraph {
  font-size: 18px;
  margin-bottom: 60px;
  color: #555;
}

.step-cards {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.step-card {
  background: #fff;
  padding: 40px 30px;
  border-radius: 16px;
  flex: 1;
  min-width: 260px;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
  border: 1px solid rgba(22,98,252,0.1);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  cursor: default;
}

/* Top blue line accent */
.step-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #5a9bd5, #00c6ff);
  transition: width 0.45s ease;
  border-radius: 3px 3px 0 0;
}

/* Shine sweep effect */
.step-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(22,98,252,0.06), transparent);
  transition: left 0.6s ease;
}

/* HOVER STATE */
.step-card:hover {
  transform: translateY(-8px);
  border-color: rgba(22,98,252,0.4);
  box-shadow:
    0 20px 50px rgba(22,98,252,0.15),
    0 0 0 1px rgba(22,98,252,0.2),
    0 0 40px rgba(22,98,252,0.08);
}

.step-card:hover::before {
  width: 100%;
}

.step-card:hover::after {
  left: 140%;
}

.step-number {
  font-size: 48px;
  font-weight: 900;
  color: #5a9bd5;
  display: block;
  margin-bottom: 16px;
  line-height: 1;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.step-card:hover .step-number {
  opacity: 1;
  transform: scale(1.05);
}

.step-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #0a0f2c;
  line-height: 1.3;
}

.step-subheading {
  font-size: 15px;
  font-weight: 600;
  color: #5a9bd5;
  margin-bottom: 14px;
  transition: letter-spacing 0.3s ease;
}

.step-card:hover .step-subheading {
  letter-spacing: 0.3px;
}

.step-text {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
}

.step-quote {
  font-size: 25px;
  font-weight: 600;
  font-style: italic;
  margin-top: 60px;
  color: #333;
  position: relative;
  display: inline-block;
  padding: 0 20px;
}

.step-quote::before,
.step-quote::after {
  content: '"';
  font-size: 60px;
  color: #5a9bd5;
  opacity: 0.2;
  position: absolute;
  line-height: 1;
}

.step-quote::before {
  top: -10px;
  left: -10px;
}

.step-quote::after {
  bottom: -30px;
  right: -10px;
}

/* Responsive */
@media(max-width: 991px) {
  .step-cards {
    flex-direction: column;
  }
}



/* ========================About Team Section============================= */



/* About Team Section */
.about-team {
  padding: 100px 0;
  position: relative;
  background: #f9f9f9;
}

.about-team-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-team-text {
  max-width: 600px;
}

.about-team-sub {
  display: inline-block;
  color: #5a9bd5;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 15px;
}

.about-team-heading {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.2;
  font-weight: 900;
  margin-bottom: 20px;
  color: #020613;
}

.about-team-content {
  font-size: 18px;
  color: #000;
  line-height: 1.7;
}

/* Image */
.about-team-image img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 900px) {
  .about-team-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-team-image {
    margin-top: 40px;
  }
}



/* ======================== Team Grid Section============================= */





.team-section {
  padding: 50px 0px;
  text-align: center;
  background: #ffffff00;
  position: relative;
  overflow: hidden;
	
}

.team-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(22,98,252,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.team-section-heading {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  margin-bottom: 50px;
  color: #000;
  letter-spacing: -1px;
}

.team-section-paragraph {
  font-size: 17px;
  color: #000;
  margin-bottom: 60px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-items: center;
  position: relative;
  z-index: 1;
}

/* CARD WRAPPER */
.team-card {
  width: 100%;
  perspective: 1200px;
  cursor: pointer;
}

/* INNER FLIP */
.card-inner {
  position: relative;
  width: 100%;
  height: 480px;
  transition: transform 0.75s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.team-card:hover .card-inner {
  transform: rotateY(180deg);
}

/* FRONT & BACK SHARED */
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* FRONT */
.card-front {
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: 1px solid rgba(22,98,252,0.08);
  transition: box-shadow 0.3s ease;
}

.team-card:hover .card-front {
  box-shadow: 0 20px 50px rgba(22,98,252,0.15);
}

.card-front img {
  width: 100%;
  height: 80%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.card-front-info {
  padding: 18px 20px;
  text-align: center;
  width: 100%;
}

.team-name {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 5px;
  color: #0a0f2c;
}

.team-role {
  font-size: 14px;
  color: #5a9bd5;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* BACK */
.card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #5a9bd5 0%, #0f4ed0 100%);
  color: #fff;
  text-align: center;
  padding: 40px 28px;
  justify-content: center;
  gap: 16px;
  box-shadow: 0 20px 50px rgba(22,98,252,0.3);
}

/* Blue glow ring on back */
.card-back::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
  top: -40px;
  right: -40px;
}

.card-back::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  bottom: -20px;
  left: -20px;
}

.team-back-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 1;
}

.team-back-name::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: rgba(255,255,255,0.5);
  margin: 10px auto 0;
  border-radius: 2px;
}

.team-details {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  margin: 0;
  position: relative;
  z-index: 1;
}
.team-info-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    color:#fff;
}

.team-info-table td{
    padding:6px 0;
    vertical-align:top;
}

.team-info-table td:first-child{
    width:45%;
    color:#fff;
    font-weight:600;
}




.team-info{
    display:flex;
    flex-direction:column;
    gap:16px;
	text-align:left;
	width:100%;
}

/* each row simple vertical flow */
.info-row{
    display:block;
}

/* label upar */
.info-label{
    font-size:18px;
    font-weight:600;
    color:#ffffff;
    opacity:0.85;
    margin-bottom:4px;
}

/* value neeche */
.info-value{
    font-size:14px;
    color:#ffffff;
    line-height:1.4;
}



section.case-studies-section {
    text-align: center;
}


/* RESPONSIVE */
@media (max-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .card-inner {
    height: 380px;
  }
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  .card-inner {
    height: 360px;
  }
}

@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .card-inner {
    height: 400px;
  }
  .team-section {
    padding: 60px 0;
  }
}
















/* =============================================
   Our Work PAGE CSS
   ============================================= */



/* ===== CASE STUDIES ===== */
/* .cs-section {
  padding: 80px 0;
  background: #f8f9ff;
} */
.work-brand-section
{
	padding-top:80px !important;
	padding-bottom: 0;
}
.work-desc
{
	width: 60%;
    margin: auto;
}
.cs-main-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: #0a0f2c;
  margin-bottom: 12px;
  text-align: center;
  letter-spacing: -1px;
}

.cs-main-desc {
  font-size: 17px;
  color: #666;
  text-align: center;
  margin-bottom: 60px;
}

/* FEATURED */
.cs-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
  margin-bottom: 60px;
}

.cs-featured-image {
  position: relative;
  overflow: hidden;
}

.cs-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.cs-featured:hover .cs-featured-image img {
  transform: scale(1.04);
}

.cs-featured-content {
  background: #07111F;
  padding: 55px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cs-featured-content::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(22,98,252,0.08);
  border-radius: 50%;
  top: -100px;
  right: -100px;
}

.cs-client-label {
  color: #47C0E2;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  display: block;
}

.cs-client-logo {
  max-height: 45px;
  width: auto;
  object-fit: contain;
  margin-bottom: 20px;
  display: block;
  filter: brightness(0) invert(1);
}

.cs-featured-title {
  font-size: clamp(22px, 2.5vw, 36px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 30px;
  letter-spacing: -0.5px;
}

.cs-featured-title::after {
  content: ".";
  color: #5a9bd5;
}

.cs-block {
  margin-bottom: 20px;
}

.cs-block h4 {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.cs-block p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
}

.cs-results h4 {
  color: #47C0E2;
}

/* GRID */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.cs-card {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.07);
  border: 1px solid rgba(22,98,252,0.08);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cs-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(22,98,252,0.15);
}

.cs-card-image {
  position: relative;
  overflow: hidden;
  height: 220px;
}

.cs-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cs-card:hover .cs-card-image img {
  transform: scale(1.06);
}

.cs-card-overlay {
  position: absolute;
  inset: 0;
  background: #5a9bd5b8;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cs-card:hover .cs-card-overlay {
  opacity: 1;
}

.cs-card-overlay span {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.cs-card-info {
  padding: 20px;
}

.cs-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.cs-card-logo {
  max-height: 28px;
  width: auto;
  object-fit: contain;
}

.cs-card-client {
  font-size: 12px;
  font-weight: 700;
  color: #5a9bd5;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cs-card-title {
  font-size: 17px;
  font-weight: 800;
  color: #0a0f2c;
  line-height: 1.3;
}
h4.cs-card-title {
    margin-top: 15px;
}

/* EXPAND PANEL */
.cs-expand-panel {
  grid-column: 1 / -1;
  display: none;
  background: #07111F;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.2);
}

.cs-expand-panel.active {
  display: block;
  animation: expandIn 0.4s ease;
}

@keyframes expandIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cs-expand-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.cs-expand-close:hover {
  background: rgba(255,255,255,0.2);
}

.cs-expand-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}

.cs-expand-image {
  overflow: hidden;
}

.cs-expand-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cs-expand-content {
  padding: 55px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cs-expand-logo {
  filter: brightness(0) invert(1);
}

.cs-expand-title {
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 28px;
  letter-spacing: -0.5px;
}

.cs-expand-title::after {
  content: ".";
  color: #5a9bd5;
}

.cs-expand-body .cs-block p {
  color: rgba(255,255,255,0.75);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .cs-featured {
    grid-template-columns: 1fr;
  }
  .cs-featured-image {
    height: 300px;
  }
  .cs-featured-content {
    padding: 40px 30px;
  }
  .cs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-expand-inner {
    grid-template-columns: 1fr;
  }
  .cs-expand-image {
    height: 260px;
  }
  .cs-expand-content {
    padding: 35px 28px;
  }
.work-desc
{
	width: 100%;
    margin: auto;
}
}

@media (max-width: 600px) {
  .cs-grid {
    grid-template-columns: 1fr;
  }
  .cs-featured-content {
    padding: 30px 22px;
  }
}

/* Featured section fix */
.cs-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 40px;
  min-height: 520px;
  border: none;
}

.cs-feat-img {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  background: #1a2535;
}

.cs-feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

.cs-feat-content {
  background: #07111F !important;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

/* Grid cards image fix */
.cs-card-img {
  height: 200px;
  overflow: hidden;
  position: relative;
  background: #1a2535;
}

.cs-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Expand panel fix */
.cs-expand {
  grid-column: 1 / -1;
  display: none;
  background: #2E4A64 !important;
  border-radius: 16px;
  overflow: hidden;
  margin: 10px 0;
}

.cs-expand.open {
  display: block;
}

.cs-expand-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
}

.cs-expand-img {
  overflow: hidden;
  position: relative;
  min-height: 300px;
}

.cs-expand-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}

.cs-expand-content {
  padding: 44px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  position: relative;
}

/* Close button fix */
.cs-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  z-index: 10;
}

/* Text colors */
.cs-label {
  color: #47C0E2;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
}

.cs-feat-title {
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 700;
  color: #fff !important;
  line-height: 1.25;
  margin-bottom: 10px;
}

.cs-feat-title span { color: #5a9bd5; }

.cs-block {
  border-left: 2px solid rgba(255,255,255,0.15);
  padding-left: 14px;
}

.cs-block h4 {
  font-size: 18px;
  font-weight: 700;
  color: #47c0e2;
  margin-bottom: 5px;
}

.cs-block p {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,0.75) !important;
}

.cs-block-res h4 { color: #47C0E2 !important; }

.cs-card-client {
  font-size: 11px;
  font-weight: 700;
  color: #5a9bd5;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.cs-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.35;
}

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

/* Responsive */
@media (max-width: 900px) {
  .cs-featured { grid-template-columns: 1fr; }
  .cs-feat-img { min-height: 280px; }
  .cs-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-expand-inner { grid-template-columns: 1fr; }
  .cs-expand-img { min-height: 250px; }
}

@media (max-width: 600px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-feat-content { padding: 30px 22px; }
}

/* Card image fix - puri aaye */
.cs-card-img {
  height: auto;
  overflow: hidden;
  position: relative;
  background: #1a2535;
}

.cs-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
}

.cs-card:hover .cs-card-img img {
  transform: scale(1.05);
}

/* Card body */
.cs-card-body {
  padding: 20px;
  text-align:center;	
}

/* Logo aur client name alag alag rows mein */
.cs-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 12px;
}

.cs-card-logo {
    max-height: 50px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    display: block;
    margin: auto;
}

.cs-card-client {
  font-size: 11px;
  font-weight: 700;
  color: #5a9bd5;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
}

.cs-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #0a0f2c;
  line-height: 1.4;
  margin: 0;
}
.cs-feat-logo {
    max-width: 25%;
    height: auto;
    object-fit: contain;
    /* filter: brightness(0) invert(1); */
    background: white;
    padding: 10px;
    border-radius: 12px !important;
}






/* =============================================
   Insigts PAGE CSS
   ============================================= */





/* ─── Reset & Base ─── */
.mr-blog-section {
    padding-top: 100px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.mr-blog-section::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(91,155,213,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.mr-blog-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ─── Section Heading ─── */
.mr-blog-heading {
    text-align: center;
    margin-bottom: 60px;
}

.mr-blog-heading .eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #5B9BD5;
    margin-bottom: 14px;
}

.mr-blog-heading h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.15;
}

.mr-blog-heading h2 span {
    color: #5B9BD5;
}

/* ─── Grid ─── */
.mr-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 28px;
}

/* ─── Card ─── */
.mr-blog-card {
    background: #021a49;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(91,155,213,0.12);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
                border-color 0.35s ease,
                box-shadow 0.35s ease;
}

.mr-blog-card:hover {
    transform: translateY(-8px);
    border-color: rgba(91,155,213,0.45);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(91,155,213,0.15);
}

/* ─── Shimmer line on top on hover ─── */
.mr-blog-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #5B9BD5, transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.mr-blog-card:hover::after {
    opacity: 1;
}

/* ─── Image Wrapper ─── */
.mr-blog-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #0a1525;
}

.mr-blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.22,1,0.36,1), filter 0.55s ease;
    filter: brightness(0.9);
}

.mr-blog-card:hover .mr-blog-image img {
    transform: scale(1.06);
    filter: brightness(1.05);
}

/* ─── Image Overlay on hover ─── */
.mr-blog-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(13,27,46,0.7) 100%);
    pointer-events: none;
}

/* ─── Category Badge ─── */
.mr-cat-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: #5B9BD5;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 50px;
    transition: background 0.25s ease, transform 0.25s ease;
}

.mr-blog-card:hover .mr-cat-badge {
    background: #3d7fb8;
    transform: scale(1.04);
}

/* ─── Read Time Badge ─── */
.mr-read-time {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background: rgba(6,14,26,0.75);
    backdrop-filter: blur(6px);
    color: #a0c4e8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    border-radius: 50px;
    border: 1px solid rgba(91,155,213,0.2);
}

/* ─── Card Body ─── */
.mr-blog-body {
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ─── Meta (Author + Date) ─── */
.mr-blog-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #5B9BD5;
    margin-bottom: 12px;
    gap: 8px;
}

.mr-blog-meta .author {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mr-author-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5B9BD5;
    flex-shrink: 0;
}

/* ─── Title ─── */
.mr-blog-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s ease;
}

.mr-blog-card:hover .mr-blog-title {
    color: #a0c4e8;
}

/* ─── Excerpt ─── */
.mr-blog-excerpt {
    font-size: 13.5px;
    line-height: 1.65;
    color: #fff;
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* ─── Footer: Read More + Share ─── */
.mr-blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(91,155,213,0.1);
    padding-top: 14px;
    gap: 12px;
}

.mr-read-more {
    font-size: 12.5px;
    font-weight: 600;
    color: #5B9BD5;
    text-decoration: none;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.2s ease, color 0.2s ease;
}

.mr-read-more:hover {
    color: #a0c4e8;
    gap: 9px;
}

.mr-arrow {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.2s ease;
}

.mr-read-more:hover .mr-arrow {
    transform: translateX(3px);
}

/* ─── Social Share ─── */
.mr-share-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mr-share-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(91,155,213,0.08);
    border: 1px solid rgba(91,155,213,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    color: #5B9BD5;
    letter-spacing: 0.04em;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.mr-share-btn:hover {
    background: rgba(91,155,213,0.2);
    border-color: rgba(91,155,213,0.4);
    color: #fff;
    transform: translateY(-2px);
}

.mr-share-btn.fb:hover { background: rgba(24,119,242,0.25); border-color: #1877f2; color: #1877f2; }
.mr-share-btn.tw:hover { background: rgba(29,161,242,0.25); border-color: #1da1f2; color: #1da1f2; }
.mr-share-btn.li:hover { background: rgba(10,102,194,0.25); border-color: #0a66c2; color: #0a66c2; }
.mr-share-btn.wa:hover { background: rgba(37,211,102,0.25); border-color: #25d366; color: #25d366; }

/* ─── No Posts ─── */
.mr-no-posts {
    color: rgba(255,255,255,0.4);
    text-align: center;
    padding: 60px 0;
    font-size: 15px;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .mr-blog-section { padding: 70px 0; }
    .mr-blog-grid { grid-template-columns: 1fr; gap: 20px; }
    .mr-blog-heading { margin-bottom: 40px; }
}



/* =============================================
   Single Blog PAGE CSS
   ============================================= */

.blog-single-modern {
    background: #f8f9ff;
}

/* NARROW CONTAINER */
.container.narrow {
    max-width: 820px;
    margin: auto;
    padding: 0 24px;
}

/* HERO */
.blog-hero-modern {
    padding: 70px 0 0;
    text-align: center;
}

.blog-hero-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 36px;
}

/* CATEGORY BADGE */
.blog-cat {
    display: inline-block;
    background: rgba(22, 98, 252, 0.08);
    color: #5a9bd5;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(22, 98, 252, 0.2);
}

/* META */
.blog-meta {
    font-size: 14px;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.blog-meta i {
    color: #5a9bd5;
    font-size: 13px;
}

.blog-meta-dot {
    color: #ccc;
}

/* HERO IMAGE */
.blog-hero-img {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
    margin-bottom: 0;
}

.blog-hero-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px !important;
    transition: transform 0.6s ease;
}

.blog-hero-img:hover img {
    transform: scale(1.02);
}

.blog-hero-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(2, 6, 19, 0.08) 100%);
    border-radius: 20px;
    pointer-events: none;
}

/* CONTENT SECTION */
.blog-content-modern {
    padding: 60px 0 80px;
}

/* CONTENT BODY */
.content-body {
    font-size: 17px;
    line-height: 1.9;
    color: #333;
    background: #fff;
    padding: 50px 56px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(22, 98, 252, 0.06);
    margin-bottom: 40px;
}

.content-body h2 {
    font-size: 26px;
    font-weight: 800;
    color: #0a0f2c;
    margin-top: 40px;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.content-body h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0a0f2c;
    margin-top: 30px;
    margin-bottom: 12px;
}

.content-body p {
    margin-bottom: 20px;
    color: #444;
}

.content-body a {
    color: #5a9bd5;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.content-body ul,
.content-body ol {
    padding-left: 24px;
    margin-bottom: 20px;
}

.content-body li {
    margin-bottom: 8px;
    color: #444;
}

.content-body blockquote {
    border-left: 4px solid #5a9bd5;
    padding: 16px 24px;
    margin: 30px 0;
    background: rgba(22, 98, 252, 0.04);
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: #555;
}

.content-body img {
    max-width: 100%;
    border-radius: 12px !important;
    margin: 20px 0;
}

/* SHARE DIVIDER */
.blog-share-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.blog-share-divider::before,
.blog-share-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(22, 98, 252, 0.12);
}

.blog-share-divider span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    white-space: nowrap;
}

/* SOCIAL SHARE GRID */
.social-share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.social-share-grid a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.social-share-grid a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.share-fb {
    background: #1877F2;
    color: #fff !important;
}

.share-tw {
    background: #000;
    color: #fff !important;
}

.share-li {
    background: #0A66C2;
    color: #fff !important;
}

.share-wa {
    background: #25D366;
    color: #fff !important;
}

section.about-banner-particles.blogs-banner {
    background-color: #021a49;
    min-height: 50vh !important;
}
.blogs-banner-content {
    text-align: center !important;
    max-width: 100% !important;
}
/* RESPONSIVE */
@media (max-width: 768px) {
    .blog-hero-modern {
        padding: 50px 0 0;
    }
    .content-body {
        padding: 30px 24px;
        font-size: 16px;
    }
    .social-share-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .content-body h2 {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .social-share-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .content-body {
        padding: 24px 18px;
    }
}


/* =============================================
   Join The Agency PAGE CSS
   ============================================= */

.join-form-section {
    width: 100%;
    min-height: 90vh;
}

/* GRID */
.join-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 90vh;
}

/* LEFT IMAGE */
.join-left {
/*     background: url("https://theseosynergy.com/media-republic/wp-content/uploads/2026/06/benefits.webp"); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.join-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(2, 6, 19, 0.55) 0%,
        rgba(2, 6, 19, 0.15) 100%
    );
}

/* RIGHT SIDE */
.join-right {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9ff;
    padding: 60px 50px;
}

/* FORM BOX */
.join-form-box {
    width: 100%;
    max-width: 90%;
    background: #fff;
    padding: 44px 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(22, 98, 252, 0.1);
}

/* FORM INPUTS */
.join-form-box input,
.join-form-box textarea {
    width: 100%;
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid rgba(22, 98, 252, 0.15);
    background: #f8f9ff;
    color: #0a0f2c;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.join-form-box input:focus,
.join-form-box textarea:focus {
    border-color: #5a9bd5;
    background: #fff;
    outline: none;
}

/* FLUENT FORM LABELS */
.join-form-box .ff-el-group label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0a0f2c !important;
    margin-bottom: 6px !important;
}

/* FLUENT FORM INPUTS */
.join-form-box .ff-el-form-control {
    border: 1px solid rgba(22, 98, 252, 0.15) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #0a0f2c !important;
    background: #f8f9ff !important;
    transition: border-color 0.3s ease !important;
}

.join-form-box .ff-el-form-control:focus {
    border-color: #5a9bd5 !important;
    background: #fff !important;
    outline: none !important;
}

/* BUTTON */
.join-form-box button,
.join-form-box .ff_submit_btn_wrapper button,
.join-form-box input[type="submit"] {
    width: 100% !important;
    padding: 14px !important;
    background: #5a9bd5 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
    box-shadow: 0 10px 30px rgba(22, 98, 252, 0.25) !important;
}

.join-form-box button:hover,
.join-form-box .ff_submit_btn_wrapper button:hover,
.join-form-box input[type="submit"]:hover {
    background: #0f4ed0 !important;
    transform: translateY(-2px) !important;
}

/* UPLOAD BUTTON */
.fluentform .ff_upload_btn.ff-btn {
    background: #5a9bd5 !important;
    color: #fff !important;
    border-radius: 8px !important;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .join-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .join-left {
        min-height: 380px;
    }
    .join-right {
        padding: 50px 28px;
    }
}

@media (max-width: 600px) {
    .join-right {
        padding: 40px 20px;
    }
    .join-form-box {
        padding: 28px 20px;
    }
}



.join-banner-text {
    width: 50%; /* left column text */
    color: #fff;
}

.hero-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}

.hero-subtitle {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
	color: #fff;
	margin-top:15px;
	width: 70%;
    margin: auto;
}

.afr-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.afr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.afr-left {
    color: #020613;
}

.afr-left .afr-headline {
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 20px;
	font-weight: 800;
}

.afr-left .afr-content {
    font-size: 18px;
    line-height: 1.7;
}

.afr-right img {
    width: 100%;
    max-width: 100%;
    display: block;
	margin:auto;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .afr-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .afr-right img {
        margin: 0 auto;
    }
.hero-subtitle {
    font-size: 15px;
}
.afr-left .afr-headline {
    font-size: 35px;
}
.afr-left .afr-content {
    font-size: 15px;
}
}



.culture-section {
    padding: 80px 0;
    background: #2E4A64;
}

.culture-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.culture-left img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

.culture-right {
    color: #020613;
}

.culture-right .culture-headline {
    font-size: 60px;
    font-weight: 800;
    margin-bottom: 20px;
	color:white;
}

.culture-right .culture-content {
    font-size: 18px;
    line-height: 1.7;
	color:white;
}

/* Responsive */
@media (max-width: 900px) {
    .culture-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .culture-left img {
        margin: 0 auto 30px;
    }
.culture-left {
    order: 2;
}
	
	.culture-right .culture-content {
    font-size: 14px;
    line-height: 1.7;
}
	.culture-right .culture-headline {
    font-size: 35px;
}

}




/* ===== MR TEAM SECTION ===== */
.mr-team-section {
  padding: 100px 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.mr-team-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top center, rgba(22,98,252,0.06) 0%, transparent 65%);
  pointer-events: none;
}

/* GRID */
.mr-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  justify-content: center;
}

/* Last 2 center */
@media (min-width: 1200px) {
  .mr-team-grid .mr-team-card:nth-child(9) {
    grid-column: 2;
  }
  .mr-team-grid .mr-team-card:nth-child(10) {
    grid-column: 3;
  }
}

/* CARD */
.mr-team-card {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(22,98,252,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.mr-team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(22,98,252,0.14);
  border-color: rgba(22,98,252,0.25);
}

/* IMAGE WRAP */
.mr-team-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 0/4;
}

.mr-team-img-wrap img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.5s ease;
  border-radius: 0 !important;
}

.mr-team-card:hover .mr-team-img-wrap img {
  transform: scale(1.05);
}

/* OVERLAY */
.mr-team-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22,98,252,0.88) 0%, transparent 55%);
  display: flex;
  align-items: flex-end;
  padding: 20px 16px;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mr-team-card:hover .mr-team-overlay {
  opacity: 1;
}

.mr-team-overlay-role {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* CARD INFO */
.mr-team-info {
  padding: 18px 20px;
  border-top: 1px solid rgba(22,98,252,0.06);
}

.mr-team-name {
  font-size: 17px;
  font-weight: 800;
  color: #0a0f2c;
  margin: 0 0 4px;
  letter-spacing: -0.3px;
}

.mr-team-role {
  font-size: 13px;
  font-weight: 600;
  color: #5a9bd5;
  margin: 0;
  letter-spacing: 0.3px;
}

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

@media (max-width: 768px) {
  .mr-team-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  .mr-team-section {
    padding: 70px 0;
  }
}

@media (max-width: 480px) {
  .mr-team-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 14px;
  }
}





.fits-section {
  padding: 80px 0;
  background: #f9f9f9; /* optional */
}

.fits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.fits-text h2 {
  font-size: 60px;
  margin-bottom: 20px;
  color: #07111F;
  font-weight: 800;	
}

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

.fits-image img {
  width: 100%;
  object-fit: cover;
  margin:auto;	
}
.fits-image {
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .fits-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .fits-image img {
    margin-top: 20px;
	width: 100%;  
  }
	.fits-text h2 {
  font-size: 35px;
}
	.fits-text p {
  font-size: 15px;
}
}





/* ===== JOIN FORM SECTION ===== */
.jf-section {
  padding: 100px 0;
  background: #f8f9ff;
  position: relative;
  overflow: hidden;
}

.jf-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top center, rgba(22,98,252,0.06) 0%, transparent 65%);
  pointer-events: none;
}

.jf-container {
  width: min(800px, 92%);
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.jf-heading {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: #0a0f2c;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin: 0;
}

.jf-content {
  font-size: 17px;
  color: #555;
  line-height: 1.8;
  margin: 0;
}

.jf-form-box {
  background: #fff;
  padding: 50px 44px;
  border-radius: 20px;
  border: 1px solid rgba(22,98,252,0.1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.08);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.jf-form-header h3 {
  font-size: 24px;
  font-weight: 800;
  color: #0a0f2c;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}

.jf-form-header p {
  font-size: 14px;
  color: #888;
  margin: 0;
}

.jf-form-box .ff-el-group label {
  color: #0a0f2c !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.jf-form-box .ff-el-form-control {
  background: #f8f9ff !important;
  border: 1px solid rgba(22,98,252,0.15) !important;
  color: #0a0f2c !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

.jf-form-box .ff-el-form-control:focus {
  border-color: #5a9bd5 !important;
  background: #fff !important;
  outline: none !important;
}

.jf-form-box .ff-el-form-control::placeholder {
  color: #aaa !important;
}

.jf-form-box .ff_submit_btn_wrapper button,
.jf-form-box input[type="submit"] {
  width: 100% !important;
  background: #5a9bd5 !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 32px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background 0.3s ease, transform 0.3s ease !important;
  box-shadow: 0 10px 30px rgba(22,98,252,0.3) !important;
}

.jf-form-box .ff_submit_btn_wrapper button:hover,
.jf-form-box input[type="submit"]:hover {
  background: #0f4ed0 !important;
  transform: translateY(-2px) !important;
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .jf-section { padding: 70px 0; }
  .jf-form-box { padding: 28px 20px; }
  .jf-heading { font-size: 28px; }
}
/* =============================================
   CONTACT PAGE
   ============================================= */

/* BANNER */
.contact-banner {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: #021a49;
  padding: 80px 20px;
}

#contact-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact-banner-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
}

.contact-sub {
  display: inline-block;
  color: #5a9bd5;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.contact-banner h1 {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -2px;
  line-height: 1.05;
}

/* CONTACT SECTION */
.contact-section {
  padding: 100px 0;
  background: #f8f9ff;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}

/* LEFT */
.contact-left-title {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900;
  color: #0a0f2c;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 12px;
}

.contact-left-title span {
  color: #0a0f2c;
}

.contact-left-desc {
  font-size: 16px;
  color: #666;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* INFO LIST */
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #fff;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(22,98,252,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.contact-info-item:hover {
  transform: translateX(6px);
  box-shadow: 0 10px 30px rgba(22,98,252,0.1);
  border-color: rgba(22,98,252,0.3);
}

.contact-info-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(22,98,252,0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a9bd5;
  font-size: 20px;
  transition: background 0.3s ease;
}

.contact-info-item:hover .contact-info-icon {
  background: #5a9bd5;
  color: #fff;
}

.contact-info-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-info-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
}

.contact-info-text a,
.contact-info-text span {
  font-size: 15px;
  color: #0a0f2c;
  text-decoration: none;
  font-weight: 500;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.contact-info-text a:hover {
  color: #5a9bd5;
}

/* SOCIAL */
.contact-social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-social-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
}

.contact-social-links {
  display: flex;
  gap: 10px;
}

.contact-social-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(22,98,252,0.12);
  color: #5a9bd5;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-social-btn:hover {
  background: #5a9bd5;
  color: #fff;
  border-color: #5a9bd5;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(22,98,252,0.25);
}

/* FORM BOX */
.contact-form-box {
  background: #021a49;
  padding: 44px 40px;
  border-radius: 20px;
  border: 1px solid rgba(22,98,252,0.15);
  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}

.contact-form-title {
  font-size: 26px;
  font-weight: 800;
  color: #0a0f2c;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.contact-form-desc {
  font-size: 14px;
  color: #0a0f2c;
  margin-bottom: 28px;
}

/* Fluent Form overrides */
.contact-form-box .ff-el-form-control {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
}

.contact-form-box .ff-el-form-control:focus {
  border-color: #5a9bd5 !important;
  outline: none !important;
}

.contact-form-box .ff-el-form-control::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

.contact-form-box .ff-el-group label {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.contact-form-box .ff_submit_btn_wrapper button,
.contact-form-box input[type="submit"] {
  background: #5a9bd5 !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 32px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  transition: background 0.3s ease, transform 0.3s ease !important;
  width: 100% !important;
}

.contact-form-box .ff_submit_btn_wrapper button:hover,
.contact-form-box input[type="submit"]:hover {
  background: #0f4ed0 !important;
  transform: translateY(-2px) !important;
}
select#ff_4_dropdown {
    background: #112754  !important;
}

/* MAP */
.contact-map-section {
  position: relative;
}

.contact-map-wrapper {
  position: relative;
  overflow: hidden;
}

.contact-map-wrapper iframe {
  width: 100%;
  height: 480px;
  border: 0;
  display: block;
  filter: grayscale(20%);
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-section {
    padding: 70px 0;
  }
}

@media (max-width: 600px) {
  .contact-banner {
    min-height: 40vh;
    padding: 60px 20px;
  }
  .contact-form-box {
    padding: 28px 22px;
  }
  .contact-map-wrapper iframe {
    height: 320px;
  }
  .contact-info-item {
    padding: 14px 16px;
  }
}




/* =============================================
   MOBILE RESPONSIVE — Media Republic
   Paste this at the END of your style.css
   ============================================= */

/* ---- Tablet: max 1024px ---- */
@media (max-width: 1440px) {

  /* CTA Section — remove fixed width */
  .mr-cta-section {
    width: 100% !important;
    margin: 50px 0 !important;
  }

  /* Hero */
  .hero h1 {
    font-size: 60px;
  }

  /* Fourth Section */
  .fourth-section-content h2 {
    font-size: 42px;
  }

  /* Case Studies */
  .case-studies-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Brands */
  .brands-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Footer */
  .mr-footer-top {
    grid-template-columns: 4 1fr;
    gap: 36px;
  }
.mr-overlay-nav a {

    font-size: 45px;
}
.mr-menu-close
	{
		top:20px;
		
	}
	.cap-panel {
	height: 80vh;
}
.about-banner-particles {
    min-height: 80vh;
}
.mr-footer-inner {
    width: 1240px;

}
}

/* ---- Mobile Large: max 1500px ---- */
@media (max-width: 1500px) 
{
.mr-overlay-nav a {

    font-size: 50px;
}
.mr-menu-close
	{
		top: 20px;
        right: 20px;
        background: transparent;
        font-size: 70px;
	}
	.about-banner-content h1
	{
		font-size:50px !important;
	}
	.about-banner-content{

    max-width:700px;

}
	
		.cs-feat-logo
	{
		display:none !important;
	}
}
@media (max-width: 1200px) 
{
.mr-overlay-nav a {

    font-size: 40px;
}
.mr-menu-close
	{
		top: 20px;
        right: 20px;
        background: transparent;
        font-size: 70px;
	}

}

/* ---- Mobile Large: max 900px ---- */
@media (max-width: 900px) {

	section
	{
		padding-left:10px!important;
		padding-right: 10px !important;
	}
	section.partner-logos-section {
    padding-left: 0px !important;
    padding-right: 0px !important;
}


  /* HEADER */
   .mr-header {
        height: 60px !important;
        padding: 0 22px !important;
        position: fixed !important;
        transition: background 0.3s ease;
		top:10px;
    }

    /* Add background color when sticky */
    .mr-header.sticky {
        background-color: #011022c4 !important;
        width: 80%;
        backdrop-filter: blur(10px);
    }

  .mr-logo {
    min-width: auto !important;
    height: 30px !important;
  }

  .mr-logo img {
    width: 100px !important;
  }

  .mr-menu-toggle {
    width: 44px !important;
    height: 36px !important;
    gap: 6px !important;
  }

  .mr-menu-toggle span {
    width: 100% !important;
    height: 3px !important;
  }

  /* FULLSCREEN MENU */
  .mr-full-menu {
    grid-template-columns: 1fr !important;
  }

  .mr-menu-left {
    display: none !important;
  }

  .mr-menu-right {
    padding: 90px 32px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .mr-menu-close {
    top: 28px !important;
    right: 28px !important;
    font-size: 64px !important;
  }

  .mr-overlay-nav a {
    font-size: 44px !important;
    letter-spacing: -1px !important;
  }

  /* HERO */
  .hero {
    padding: 150px 20px 60px !important;
    min-height: auto !important;
  }

  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: left !important;
  }

  .hero h1 {
    font-size: 48px !important;
    letter-spacing: -2px !important;
  }

  .hero-visual {
    text-align: center !important;
  }

  /* ABOUT */
  .about-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .about-bg-image {
    display: none !important;
  }

  .about-content h2 {
    font-size: 36px !important;
  }
.about-banner-content h1 {
        font-size: 30px !important;
    }

  /* FOURTH SECTION */
  .fourth-section-inner {
        grid-template-columns: 1fr; /* single column */
        text-align: center;
        gap: 40px;
    }

    .fourth-section-content {
        order: 1; /* content first */
    }

    .fourth-section-image {
        order: 2; /* image below */
    }

    .fourth-section-content h2 {
        font-size: clamp(28px, 6vw, 42px);
    }

    .fourth-section-content p {
        font-size: 16px;
        margin: 0 auto;
    }

    .fourth-section-image img {
        width: 100%;
        height: auto;
    }
  /* BRANDS */
  .brands-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .brand-card {
    padding: 30px !important;
  }

  /* CASE STUDIES */
  .case-studies-grid {
    grid-template-columns: 1fr !important;
    padding: 60px 0 !important;
  }

  /* PARTNERS LOGO SLIDER */
  .logo-slide {
    min-width: 160px !important;
    height: 90px !important;
    padding: 16px !important;
  }

  /* CTA */
  .mr-cta-section {
    width: 100% !important;
    margin: 30px 0 !important;
    padding: 60px 20px !important;
    background-size: cover !important;
  }

  .mr-cta-content h2 {
    font-size: 32px !important;
  }

  .mr-cta-content p {
    font-size: 16px !important;
  }

  /* FOOTER */
  .mr-footer-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
    padding-bottom: 40px !important;
  }

  .mr-footer-col h4 {
    font-size: 20px !important;
  }

    .mr-footer-inner {
        width: 95%;
    }


  .join-grid {
    display: flex;
    flex-direction: column-reverse;
  }



/*===============================About Us Page=======================================  */

.about-banner-particles {

    min-height: 40vh;
	padding-top: 100px;
	Padding-bottom:20px;
}
.about-banner-particles {
    background-position: center;
	}
.about-banner-content {

    max-width: 100%;
}
	
	.about-inner {
    text-align: center;
}
	.cap-panel {

    padding: 30px;
}
	.cap-panel-icon img {
    max-height: 70px;
}
	.step-section {
    padding: 50px 0;
}
	.about-team {
    padding: 50px 0;
}
 .about-team-inner {
        grid-template-columns: 1fr; /* single column */
		gap: 20px;
    }
    .about-team-image {
        order: 2; /* image comes after text */
    }
    .about-team-text {
        order: 1; /* text comes first */
    }
	
	.capabilities-panels {
    padding-top: 0px;
}
	.cap-panel {
    width: 80%;
}



}

/* Mobile horizontal tabs */
@media (max-width: 768px) {
    .capabilities-tabs {
        flex-direction: row;
        flex-wrap: wrap; /* allows next row if space is not enough */
        justify-content: center;
        gap: 10px; /* adjust spacing between tabs */
        width: 100%;
    }

    .capabilities-tabs .cap-tab {
        flex: 1 1 auto; /* allows tabs to adjust width */
        text-align: center;
        font-size: 14px; /* optional smaller font for mobile */
        padding: 8px 12px; /* adjust padding */
    }
}

/* ---- Mobile Small: max 600px ---- */
@media (max-width: 600px) {

  /* HERO */
  .hero h1 {
    font-size: 38px !important;
    letter-spacing: -1.5px !important;
  }
	.hero-visual
	{
		display:none !important;
	}
.partners-paragraph {
    font-size: 15px !important;
	padding-left:10px !important;
	padding-right:10px !important;
}
.about-content h2 {
        text-align: center;
    }
    .about-description {
        text-align: center;
    }
.brand-card {
        padding: 50px !important;
    }
.brand-card {
    width: 70%;
}
/*     section {
        padding: 0px !important;
    } */
.case-card {
    padding: 10px;
}

  .hero-sub {
    font-size: 11px !important;
    padding: 6px 14px !important;
  }

  .btn {
    padding: 13px 22px !important;
    font-size: 14px !important;
  }

  /* ABOUT */
  .about-section {
    padding: 60px 0 !important;
  }

  .about-description {
    font-size: 16px !important;
  }

  /* FOURTH SECTION */
  .fourth-section-content h2 {
    font-size: 30px !important;
    line-height: 1.2 !important;
  }

  .fourth-section-content p {
    font-size: 15px !important;
  }

  /* BRANDS */
  .brands-grid {
    grid-template-columns: repeat(1, 1fr) !important;
  }

  /* BRANDS HEADING */
  .brands-title {
    font-size: 28px !important;
  }

  /* CASE STUDIES */
  .card-inner {
    height: 450px !important;
  }

  h3.case-heading {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  /* PARTNERS */
  .logo-track {
    animation-duration: 44s !important;
  }

  /* CTA */
  .mr-cta-section {
    padding: 50px 16px !important;
  }
	
	.mr-cta-section.animated .bg-word.now {
    transform: translateY(20%) translateX(0%);
    opacity: 1;
}

  .mr-cta-content h2 {
    font-size: 26px !important;
    letter-spacing: -1px !important;
  }

  /* FOOTER */
  .mr-footer {
    padding: 50px 0 0 !important;
  }

  .mr-footer-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .mr-footer-brand p {
    max-width: 100% !important;
  }

  .mr-footer-logo {
    height: 55px !important;
  }

  .mr-footer-col h4 {
    font-size: 18px !important;
    margin-bottom: 14px !important;
  }

  .mr-footer-bottom p {
    font-size: 13px !important;
  }

  /* GLOBAL */
  .container {
    width: 94% !important;
  }

  section {
    padding: 20px 10 !important;
  }
    .case-studies-grid 
	{
		padding:0px !important;
	}
    .mr-footer-inner {
        width: 600px;
    }
 .mr-header.sticky {
        width: 90%;
    }

	
	.cs-feat-logo
	{
		display:none !important;
	}
	
/*===============================About Us Page=======================================  */

.cap-panel {
    width: 80%;
	height: auto !important;
}


}

/* ---- Very Small: max 400px ---- */
@media (max-width: 400px) {

  .hero h1 {
    font-size: 32px !important;
  }

  .mr-overlay-nav a {
    font-size: 36px !important;
  }

  .brands-grid {
    grid-template-columns: 1fr !important;
  }

  .mr-cta-content h2 {
    font-size: 24px !important;
  }
}