/* css/style.css */

/********************************* Fonts *******************************/
@import url(https://fonts.googleapis.com/css?family=Montserrat); /***** font-family: 'Montserrat', sans-serif; *****/
@import url(https://fonts.googleapis.com/css?family=Hind); /***** font-family: 'Hind', sans-serif; *****/

/********************************* General Css *******************************/
html{height:100%;}
body {margin:0; padding:0;font-size:16px; font-family: 'Hind', sans-serif; overflow-x: hidden; height: 100%;}
*, *:before, *:after{ box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
* {outline:none;}
h1 {font-family: 'Montserrat', sans-serif; font-size:42px; margin:0 0 15px 0; color:#232323;}
h2 {font-family: 'Montserrat', sans-serif; font-size:36px; margin:0 0 15px 0; color:#232323; position: relative}
h3 {font-family: 'Montserrat', sans-serif; font-size:30px; margin:0 0 15px 0; color:#232323;}
h4 {font-family: 'Montserrat', sans-serif; font-size:26px; margin:0 0 15px 0; color:#232323;}
h5 {font-family: 'Montserrat', sans-serif; font-size:22px; margin:0 0 15px 0; color:#232323;}
h6 {font-family: 'Montserrat', sans-serif; font-size:20px; margin:0 0 15px 0; color:#232323;}

.company-affiliate h2:after, .home-form h2:after{content:""; border-radius: 5px; background: #53c200; background-position:center center; display:block; width:107px; height:5px; position:absolute; left:0; right:0; margin:25px auto 0; padding:0;}


h1 a {color:#232323;-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
h2 a {color:#232323;-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
h3 a {color:#232323;-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
h4 a {color:#232323;-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
h5 a {color:#232323;-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
h6 a {color:#232323;-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}

h1 a:hover {color:#53c200;-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out;}
h2 a:hover {color:#53c200;}
h3 a:hover {color:#53c200;}
h4 a:hover {color:#53c200;}
h5 a:hover {color:#53c200;}
h6 a:hover {color:#53c200;}

p { margin:0 0 20px 0; font-size:16px; font-family: 'Montserrat', sans-serif; line-height:30px; color:#424242;}
a { text-decoration:none;}
a:hover {text-decoration:none;transition: all 0.5s ease-out 0s;-webkit-transition: all 0.5s ease-out 0s;-moz-transition: all 0.5s ease-out 0s;-o-transition: all 0.5s ease-out 0s;  outline: none;}
.clear {clear:both;}

hr {background:#000;border:none;display: inline-block;height: 27px;margin: 35px 0;width: 100%;}

/* green-button */
.green-btn {border: none; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: 15px; color: inherit; cursor: pointer;  display: inline-block; margin: 0 auto;  text-transform: uppercase; letter-spacing: 1px; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.35); box-shadow: 0 3px 3px 0 rgba(0,0,0,0.35);  background: #5dc311; color: #ffffff;padding: 14px 30px; overflow: hidden; z-index: 9}
.green-btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
.green-btn:hover { background: #5dc311; color: #ffffff;}
.green-btn:after { width: 30%; height: 600%; background: rgba(255,255,255,0.16); right: 0; top: 0; margin: -5px 0 0 -5px; -webkit-transform-origin: 0 0; -webkit-transform: rotate(-25deg); -moz-transform-origin: 0 0; -moz-transform: rotate(-25deg); -ms-transform-origin: 0 0; -ms-transform: rotate(-25deg); transform-origin: 0 0; transform: rotate(-25deg);}
.green-btn:hover:after { width: 40%;}

/* blue-button */
.blue-btn {border: none; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: 15px; color: inherit;  cursor: pointer; padding: 14px 30px; display: inline-block; margin: 0 auto;  text-transform: uppercase; letter-spacing: 1px; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.35); box-shadow: 0 3px 3px 0 rgba(0,0,0,0.35);  background: #101b2f; color: #ffffff; overflow: hidden; z-index: 99}
.blue-btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
.blue-btn:hover { background: #101b2f; color: #ffffff;}
.blue-btn:after { width: 30%; height: 600%; background: rgba(0,0,0,0.30);  right: 0; top: 0; margin: -5px 0 0 -5px; -webkit-transform-origin: 0 0; -webkit-transform: rotate(-25deg); -moz-transform-origin: 0 0; -moz-transform: rotate(-25deg); -ms-transform-origin: 0 0; -ms-transform: rotate(-25deg); transform-origin: 0 0; transform: rotate(-25deg);}
.blue-btn:hover:after { width: 40%;}

ul {margin:0; padding:0;}
ul li {list-style-type:none; text-decoration:none;}
::selection { background:#5dc311; color:#FFF;}
::-moz-selection  { background:#5dc311; color:#FFF;}

input::-moz-placeholder, textarea::-moz-placeholder {color: #424242;opacity: 1;}
select {color:#424242; opacity:1;}
option{color: #424242;opacity:1;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #424242;opacity: 1;}
input::-moz-placeholder, textarea::-moz-placeholder {color: #424242;opacity: 1;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #424242;opacity: 1;}
.entry-content ul {margin:20px 0;}
.entry-content ul li {color: #424242;font-family: 'Montserrat', sans-serif;font-size:18px; position:relative; line-height:normal;margin: 0 0 13px 0px; padding:0 0 0 20px;}
.entry-content ul li:before {position:absolute;content:"\f105"; display:inline-block; left:0; top:0px; transition: all 0.5s ease-out 0s;-webkit-transition: all 0.5s ease-out 0s;-moz-transition: all 0.5s ease-out 0s;-o-transition: all 0.5s ease-out 0s; font-family:fontawesome; color:#2c3849;}
.entry-content ul li a {color: #2c3849;font-size:18px; font-weight:normal;}
.entry-content ul li a:hover { color:#df7c26;}
.entry-content ol {list-style: inside;margin: 20px 0}
.entry-content ol li span {color: #2c3849}
.entry-content ol {list-style-type:decimal;counter-reset: li-counter}
.entry-content ol li {position: relative;display: inline-block;width: 100%;padding: 0 0 0 18px;font-size: 18px;color: #444444;line-height: normal;margin: 0 0 12px; font-weight:300;}
.entry-content ol li:before {position: absolute;top: 2px;display: inline-block;left: 0;font-size: 16px;line-height: 1;font-weight: 500;color: #2c3849;content: counter(li-counter);counter-increment: li-counter}
.entry-content ol li a {color: #2c3849;font-size:18px; font-weight:normal;}
ul.two-col li {display: inline-block;margin-right:2%;vertical-align: top;width:48%;}
ul.two-col li:nth-child(2n) {margin-right: 0;}
ul.three-col li {display: inline-block;margin-right:2%;vertical-align: top;width:31%;}
ul.three-col li:nth-child(3n) {margin-right: 0;}
ol.two-col li {display: inline-block;margin-right: 2%;vertical-align: top;width:48%;}
ol.two-col li:nth-child(2n) {margin-right: 0;}
ol.three-col li {display: inline-block;margin-right: 2%;vertical-align: top;width:31%;}
ol.three-col li:nth-child(3n) {margin-right: 0;}

[required] {box-shadow: none;}

/********************************* Custom Css Start *******************************/
.main{min-height: 100%; padding-bottom: 60px; margin-bottom: -60px;}
header{background-color: rgba(16,27,47,0.55); display: inline-block; width: 100%; position: absolute; padding: 30px 0; left: 0; top: 0; z-index: 999}
.logo{float:left; margin:0; padding:0px;}
nav.main-navigation{float:right; margin:0;}
nav.main-navigation ul{list-style:none; margin:0px; padding:0px;}
nav.main-navigation ul li{float:left; margin:0px; padding:0px;}
nav.main-navigation ul li a{border-right:1px solid #ffffff; font-family: 'Montserrat', sans-serif; font-size:14px; color:#ffffff; text-decoration:none; text-align:center; margin:0; padding:0 20px;}
nav.main-navigation ul li:last-child a{margin-right:0px; border-right:none;}
nav.main-navigation ul li a.active{color: #53c200;}
nav.main-navigation ul li a:hover{color: #53c200;}

.banner{background: url(../images/slider01.jpg) no-repeat; background-size: cover; height: 881px; display:block; width:100%; margin:0; padding:0; position: relative;}
.banner .container{ position: relative; height: 881px}
.banner .caption{width: 640px; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); margin: 0; padding: 0; left: 15px;}
.banner .caption h3{font-size: 43px; color: #ffffff; text-transform: uppercase; position: relative; line-height: 60px; margin: 0 0 35px;}
.banner .caption h3 span{color: #a1fe5c;}
.banner .caption h3:after{text-align: left; display: block; content: ""; background: url(../images/banner-separator.png) no-repeat center center; width: 127px; height: 15px; margin: 25px 0 0; padding: 0;}
.banner .caption p{font-size: 20px; text-align: left; line-height: 30px; color: #ffffff; margin-bottom: 30px;}
.banner .caption .banner-buttons{width: 100%; display: inline-block; margin: 0; padding: 0;}
.banner .caption .banner-buttons .green-btn{margin: 0 30px 0 0;}
.scroller{position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 30px; width: 24px;}
.scroller1{position: absolute; left: 0; right: 0; margin: 0 auto; top: 105%; width: 36px;}

.inner-banner{background: url(../images/inner-banner.jpg) no-repeat; background-position: center center; background-size: cover; height: 300px; display:block; width:100%; margin:0; padding:0; position: relative}
.inner-banner .container{position: relative; height: 300px;}
.inner-banner h2{position: absolute; top: 60%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); margin: 0; padding: 0; left: 0; right: 0; font-size: 43px; color: #ffffff; text-transform: uppercase; position: relative; text-align: center;}

/******************* Company Affiliate **********************/
/* ---------- Fix: ensure background decorative shapes are behind everything ---------- */
/* Put these rules in your modern-affiliate block or near other modern-affiliate styles */
.modern-affiliate {
  /* ensure enough top padding so fixed header doesn't overlap (adjust 110px if header taller) */
  padding-top: 120px; /* <-- increase if your header is taller */
  padding-bottom: 90px;
  position: relative;
  overflow: visible;
}

/* send decorative blurred shapes behind content */
.modern-affiliate::before,
.modern-affiliate::after {
  z-index: -1; /* was 0 before — ensure they stay behind the cards & header text */
  pointer-events: none;
}

/* ---------- Ensure cards are above background shapes and positioned correctly ---------- */
.modern-affiliate .aff-grid { z-index: 2; position: relative; }

/* Ensure each card can show its left accent without layout issues */
.modern-affiliate .aff-card {
  position: relative; /* needed for the ::before accent bar */
  z-index: 2;
  /* keep existing styles (border, background, etc.) — retain other properties */
}

/* Make card pseudo-element (left accent bar) absolutely positioned relative to card */
.modern-affiliate .aff-card::before {
  /* if you already had ::before, keep the same values but ensure it sits inside card */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(#1ea7e8, #5dc311);
  opacity: 0.9;
  z-index: 1;
}

/* make sure card content sits above the accent bar */
.modern-affiliate .aff-card > * { position: relative; z-index: 2; }

/* ---------- Fix header overlap by ensuring header text area sits above cards ---------- */
.modern-affiliate .aff-header {
  position: relative;
  z-index: 3;                /* make header text above cards */
  margin-bottom: 28px;       /* reduce overlap risk */
  padding: 18px 12px;        /* small inner padding so text doesn't touch cards */
  background: linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0));
}

/* ---------- Updated Title Design: cleaner, centered, high-contrast ---------- */
.modern-affiliate .aff-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.8vw, 40px);
  color: #071826;            /* deep navy for crisp text */
  letter-spacing: 0.4px;
  margin: 0 auto 6px;
  display: inline-block;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));
  padding: 6px 12px;
  border-radius: 10px;
}

/* Accent the word "Affiliate" with bright accent color but keep overall white/contrast */
.modern-affiliate .aff-title span {
  color: #1ea7e8;
  background: rgba(30,167,232,0.06);
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: 6px;
}

/* Subtitle style: white-ish / high contrast on soft background */
.modern-affiliate .aff-lead {
  color: #334648;
  margin: 10px auto 0;
  max-width: 850px;
  font-size: 15.5px;
  line-height: 1.7;
  opacity: 0.98;
}

/* ---------- small safety: if you have a fixed header, ensure body content offset ---------- */
/* If your site header is fixed, also add top padding to the page wrapper (optional) */
/* html/body or .main wrapper could use this; set according to actual header height */
body { /* only add if not already handled elsewhere */
  /* padding-top: 80px; */ /* uncomment & adjust if you still see header overlap site-wide */
}

/* ---------- Optional: make decorative image less intrusive (if you used aff-decor) ---------- */
.modern-affiliate .aff-decor {
  z-index: -2; /* keep it behind everything so it doesn't cover header text or cards */
  opacity: 0.05; /* make more subtle; increase if you want stronger presence */
}
/* --------------------------------------------------
   Modern, Colorful Affiliate Section
-------------------------------------------------- */
.modern-affiliate {
  position: relative;
  padding: 90px 0;
  background: linear-gradient(135deg, #f3f7ff 0%, #eef9f1 100%);
  overflow: hidden;
  z-index: 1;
  border-top: 1px solid #d7e2f5;
  border-bottom: 1px solid #d7e2f5;
}

/* Header */
.modern-affiliate .aff-header {
  text-align: center;
  margin-bottom: 45px;
}

.modern-affiliate .aff-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(30px, 3.5vw, 42px);
  color: #0a2233;
  margin-bottom: 12px;
  font-weight: 700;
}

.modern-affiliate .aff-title span {
  color: #1ea7e8;
}

.modern-affiliate .aff-lead {
  max-width: 780px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  color: #425465;
}

/* ------------------------------------------
   Decorative Soft Shapes (simple background)
------------------------------------------ */
.modern-affiliate::before,
.modern-affiliate::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  z-index: 0;
}

.modern-affiliate::before {
  width: 320px;
  height: 320px;
  background: #89e3ff;
  top: -60px;
  left: -80px;
}

.modern-affiliate::after {
  width: 300px;
  height: 300px;
  background: #b5ffcd;
  bottom: -80px;
  right: -70px;
}

/* ------------------------------------------
   Card Grid Layout
------------------------------------------ */
.modern-affiliate .aff-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 0 12px;
}

/* ------------------------------------------
   Card Style (Updated)
------------------------------------------ */
.modern-affiliate .aff-card {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(30, 167, 232, 0.45); /* always visible colorful border */
  border-radius: 16px;
  padding: 28px;
  backdrop-filter: blur(6px);
  transition: 
     transform 0.28s ease, 
     box-shadow 0.28s ease,
     border-color 0.28s ease;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}

.modern-affiliate .aff-card:hover {
  transform: translateY(-8px);
  border-color: #5dc311; /* green highlight on hover */
  box-shadow: 0 16px 38px rgba(93,195,17,0.20);
}

/* Small accent bar */
.modern-affiliate .aff-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 6px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(#1ea7e8, #5dc311);
  opacity: 0.65;
}

/* ------------------------------------------
   Icon, Title & Text
------------------------------------------ */
.modern-affiliate .aff-card__icon img {
  width: 64px;
  height: 64px;
}

.modern-affiliate .aff-card__title {
  font-size: 20px;
  color: #0a2233;
  font-weight: 700;
  margin-bottom: 6px;
}

.modern-affiliate .aff-card__text {
  color: #4d5e6b;
  line-height: 1.6;
  font-size: 15px;
}

/* ------------------------------------------
   CTA Buttons
------------------------------------------ */
.modern-affiliate .aff-cta {
  text-align: center;
  margin-top: 40px;
  z-index: 2;
  position: relative;
}

.modern-affiliate .btn {
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  margin: 6px;
  transition: 0.25s;
}

.modern-affiliate .btn-outline {
  background: transparent;
  border: 2px solid #1ea7e8;
  color: #1ea7e8;
}

.modern-affiliate .btn-outline:hover {
  background: #1ea7e8;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(30,167,232,0.20);
}

.modern-affiliate .btn-primary {
  background: linear-gradient(90deg, #5dc311, #82ff70);
  color: #0a2233;
  border: none;
}

.modern-affiliate .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(93,195,17,0.25);
}

/* ------------------------------------------
   Responsive
------------------------------------------ */
@media (max-width: 1024px) {
  .modern-affiliate .aff-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .modern-affiliate .aff-grid {
    grid-template-columns: 1fr;
  }

  .modern-affiliate {
    padding: 60px 0;
  }
}


/******************* Promote **********************/
.promote{background-color: #101b2f; width: 100%;}
.promote .container-fluid{padding: 0; position: relative;}
.promote .promote-bg{background: url(../images/promote-bg.jpg) no-repeat; background-size: cover; width: 70%; height: 100%; margin: 0; position: absolute; left: 0; top: 0}
.promote .promote-bg:after{content: ""; background: url(../images/promote-icon.png) no-repeat; width: 202px; height: 224px; position: absolute; right: -202px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);}

/* ... rest of CSS (identical to the original you provided) ... */

/****************************media start**********************************/
@media only screen  and (max-width: 1199px) {
    .banner, .banner .container{ height: 700px;}
}
@media only screen  and (max-width:1023px)  {

}
@media only screen and (max-width:991px) {
    .banner .caption h3{ font-size: 38px; line-height: 48px;}
    .company-affiliate .col .icon{transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); -webkit-transform: scale(0.7);  -ms-transform: scale(0.6); transform-origin: left top 0; -webkit-transform-origin: left top 0; -moz-transform-origin: left top 0; -o-transform-origin: left top 0; -ms-transform-origin: left top 0;}
    .company-affiliate .col .col-content{ padding-left: 55px;}
    .company-affiliate .col .col-content h3{ font-size: 20px;}
    .company-affiliate .col .col-content p{ line-height: 24px;}
    .company-affiliate h2, .home-form h2, h2{ font-size: 32px;}
    .company-affiliate, .home-form,  .hours-detail .container-fluid .container .hours-content{ padding: 60px 0}
    .promote .promote-bg, .need .need-bg, .hours-detail .hours-bg{ width: 50%}
    .promote .promote-bg:after, .need .need-bg:after{ opacity: 0.5}
    .left-align, .right-align{ float: none}
    .hours-detail .hours-bg:after{ width: 100%; right: -100%; opacity: 0.5}
    .upcomint-events h5, .quick-links h5, .latest-reviews h5{ font-size: 22px;}
    .footer .upcomint-events ul.upcomint-events-content li h6{ font-size: 18px;}
    .map span.contact-title{ font-size: 14px; padding: 10px 0 0 0}
}
@media only screen and (max-width: 767px){

    header{ padding: 20px 0}
    .navbar-toggle .icon-bar{ background: #fff;}
    .navbar-toggle{ margin-top: 0; margin-bottom: 0}
    .navbar-toggle{ padding: 0 10px}
    .navbar-collapse{ position: absolute; left: 0; top: 100%; width: 100%; border-bottom: none; background-color: rgba(16, 27, 47, 1); padding: 0}
    nav.main-navigation ul li{ float: none}
    nav.main-navigation ul li:last-child a{ border-bottom: none}
    nav.main-navigation ul li a{ border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding: 10px; text-align: left; display: block}
    .banner .caption h3{ font-size: 32px; line-height: 40px; margin: 0 0 25px}
    .banner .caption{ width: auto}
    .banner .caption p{ font-size: 18px;}
    .banner, .banner .container{ height: auto}
    .banner{ padding: 140px 0}
    .company-affiliate{ z-index: 1}
    .banner .container{ z-index: 9; }
    .banner .caption{position: relative; top: auto; left: auto; transform: translateY(0); -webkit-transform:  translateY(0);  -ms-transform: translateY(0);}
    .company-affiliate:before{ opacity: 0.5}
    .company-affiliate, .home-form, .hours-detail .container-fluid .container .hours-content{ padding: 40px 0}
    .company-affiliate h2, .home-form h2, h2{ font-size: 30px}
    .company-affiliate .col .icon{transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1);  -ms-transform: scale(1); transform-origin: left
    top 0; -webkit-transform-origin: left top 0; -moz-transform-origin: left top 0; -o-transform-origin: left top 0; -ms-transform-origin: left top 0;}
    .company-affiliate .col .col-content{ padding-left: 70px}
    .promote .promote-bg, .need .need-bg, .hours-detail .hours-bg{ width: 100%}
    .promote-content div:nth-child(1), .need-content div:nth-child(1){ margin-bottom: 30px;}
    .promote .container-fluid .container .promote-content, .need .container-fluid .container .need-content{ padding: 60px 0}
    .get-in-touch ul li:nth-child(1), .get-in-touch ul li:nth-child(2), .get-in-touch ul li:nth-child(3){ width: 100%}
    .get-in-touch ul li:nth-child(2){ padding: 0; margin: 0 0 35px 0}
    .home-form .container p{ display: block; margin: 60px 0 50px}
    .home-form .container p i{margin-right: 10px;}
    .hours-detail .container-fluid .container .hours-content p{ display: block; border: none; padding: 0; margin: 0}
    .upcomint-events{ margin: 30px 0}
}
@media only screen and (max-width: 639px){
    .green-btn, .blue-btn{ font-size: 13px;}
    .banner .caption .banner-buttons .green-btn{ margin: 0 0 10px 0}
    .company-affiliate h2, .home-form h2, h2{ font-size: 26px;}
    h4{ font-size: 22px;}
}

@media only screen and (max-width: 479px){
    .banner .caption h3{ font-size: 21px; line-height: 30px;}
    .banner .caption p{ font-size: 16px; line-height: 26px;}
    .company-affiliate h2, .home-form h2, h2{ font-size: 24px;}
    .company-affiliate p{ width: 100%}
    .home-form .container p{ margin: 60px 0 30px}
    .map span.contact-title{ margin: 0; width: 80%}
    .hours-detail .container-fluid .container .hours-content p{ font-size: 16px;}
    .footer{ padding: 40px 0}
    .footer .latest-reviews ul.latest-reviews-content li h6{ font-size: 19px;}
}

/* Add/replace these styles in css/style.css (header-related) */

/* Header layout & glass effect */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1100;
  padding: 16px 0;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
  background: linear-gradient(180deg, rgba(16,27,47,0.32), rgba(16,27,47,0.15));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* stronger background on scroll */
.site-header.scrolled {
  background: linear-gradient(180deg, rgba(16,27,47,0.98), rgba(16,27,47,0.98));
  box-shadow: 0 6px 20px rgba(4,10,20,0.45);
}

/* inner container flex layout */
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  padding-left: 15px;
  padding-right: 15px;
}

/* brand */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-logo {
  width: 46px;
  height: auto;
  display: block;
  -webkit-filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  border-radius: 6px;
  background: linear-gradient(135deg,#ffffff10,#ffffff05);
  padding: 4px;
}
.brand-text {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.6px;
  font-size: 16px;
  text-transform: uppercase;
  display: inline-block;
}

/* nav */
.site-nav { flex: 1; margin-left: 30px; }
.nav-list {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-list .nav-link {
  color: rgba(255,255,255,0.95);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 6px;
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: color .22s ease, transform .15s ease;
}

/* animated underline using pseudo-element */
.nav-list .nav-link:after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,#5dc311,#a1fe5c);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s cubic-bezier(.2,.9,.2,1);
  opacity: 0.0;
}

/* hover/focus effects */
.nav-list .nav-link:hover,
.nav-list .nav-link:focus {
  color: #ffffff;
  transform: translateY(-2px);
}
.nav-list .nav-link:hover:after,
.nav-list .nav-link:focus:after {
  transform: scaleX(1);
  opacity: 1;
}

/* active link style */
.nav-list .nav-link.active {
  color: #ffffff;
  font-weight: 700;
}
.nav-list .nav-link.active:after {
  transform: scaleX(1);
  opacity: 1;
}

/* CTA group */
.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 20px;
}

/* simple outline signup button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .18s ease;
}

/* outline button */
.btn-outline {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  padding-left: 14px;
  padding-right: 14px;
}
.btn-outline:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* Dashboard special button */
.btn-dashboard {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(90deg,#00b09b 0%, #96c93d 100%);
  color: #08101a;
  font-weight: 700;
  border-radius: 999px; /* pill */
  box-shadow: 0 8px 24px rgba(45,180,90,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
  text-decoration: none;
  transform: translateY(0);
  transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, filter .18s ease;
  border: none;
}

/* dashboard icon smaller, aligned */
.btn-dashboard i.fa {
  font-size: 14px;
  opacity: 0.9;
  display: inline-block;
  transform: translateY(-1px);
}

/* hover effect */
.btn-dashboard:hover,
.btn-dashboard:focus {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 36px rgba(45,180,90,0.22), inset 0 1px 0 rgba(255,255,255,0.28);
  filter: saturate(1.05);
}

/* subtle pulse animation for attention (only when not hovered) */
@keyframes dashPulse {
  0% { box-shadow: 0 6px 20px rgba(45,180,90,0.14); }
  50% { box-shadow: 0 10px 28px rgba(45,180,90,0.10); }
  100% { box-shadow: 0 6px 20px rgba(45,180,90,0.14); }
}
.btn-dashboard:not(:hover) { animation: dashPulse 4.5s ease-in-out infinite; }

/* Responsive: collapse nav on small screens */
.hamburger {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.hamburger-box { width: 28px; height: 18px; display: inline-block; position: relative; }
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 28px;
  height: 2px;
  background-color: #fff;
  display: block;
  position: absolute;
  left: 0;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.hamburger-inner { top: 50%; transform: translateY(-50%); }
.hamburger-inner::before { content: ""; top: -8px; }
.hamburger-inner::after { content: ""; top: 8px; }

/* nav open state for mobile */
.site-nav { transition: max-height .28s ease, opacity .28s ease; }
.site-nav.open { opacity: 1; }

/* Mobile adjustments */
@media (max-width: 991px) {
  .nav-list { display: none; } /* hide desktop list - we will show mobile menu */
  .hamburger { display: inline-block; }
  .site-nav.open .nav-list { 
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .site-nav.open {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(16,27,47,0.98), rgba(16,27,47,0.98));
    border-bottom: 1px solid rgba(255,255,255,0.03);
    padding: 10px 0;
  }
  .nav-list .nav-link {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .site-nav { width: 100%; }
  .header-inner { gap: 12px; }
  .brand-text { display: none; } /* show just logo on small screens if desired */
}

/* small screen tweaks for CTAs */
@media (max-width: 640px) {
  .header-cta { gap: 8px; }
  .btn-dashboard { padding: 8px 12px; font-size: 13px; }
  .btn-outline { padding: 8px 10px; font-size: 13px; }
}
/* Modern Inner Banner (Video Hero Section) */
.inner-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #ffffff;
    text-align: center;
}

/* Background Video */
.inner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Dark gradient overlay */
.inner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(0, 0, 0, 0.55),
        rgba(0, 0, 0, 0.75)
    );
    z-index: 1;
}

/* Content wrapper */
.inner-content {
    position: relative;
    z-index: 2;
    max-width: 950px;
    padding: 20px;
}

/* Big Title */
/* Updated Hero Title Style */
.hero-title {
    font-size: clamp(42px, 6vw, 78px);
    font-weight: 800; /* more bold */
    font-family: 'Montserrat', sans-serif; /* premium */
    color: #ffffff; /* pure white */
    line-height: 1.08;
    margin-bottom: 22px;
    letter-spacing: 1.2px;
    text-transform: none;
    text-shadow: 0 4px 18px rgba(0,0,0,0.45); /* better readability */
}

.hero-title span {
    color: #ffffff; /* keep white */
    opacity: 0.9;   /* slight emphasis */
}

/* Updated Subtitle */
.hero-subtitle {
    color: #ffffff !important;
    font-size: clamp(16px, 1.6vw, 24px);
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 40px;
    opacity: 0.92; /* smooth white */
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}


/* Buttons */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.hero-btn {
    padding: 14px 32px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    display: inline-block;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* White Button */
.hero-btn-light {
    background: #ffffff;
    color: #222;
}

.hero-btn-light:hover {
    background: #dcdcdc;
    transform: translateY(-3px);
}

/* Primary Button */
.hero-btn-primary {
    background: #0aa5b6;
    color: #ffffff;
}

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

/* Mobile Responsive */
@media (max-width: 600px) {
    .hero-title {
        font-size: 40px;
        line-height: 1.2;
    }
    .hero-subtitle {
        font-size: 16px;
    }
    .hero-btn {
        font-size: 16px;
        padding: 12px 26px;
    }
}

/* --------------------------------------------------
   Modern Advertiser Section (same style as affiliate)
-------------------------------------------------- */
.modern-advertiser {
  position: relative;
  padding: 110px 0 90px;
  background: linear-gradient(135deg,#f3f7ff 0%, #eef9f1 100%);
  overflow: hidden;
  border-top: 1px solid #d7e2f5;
  border-bottom: 1px solid #d7e2f5;
}

/* Decorative blurred soft shapes */
.modern-advertiser::before,
.modern-advertiser::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.35;
  z-index: -1;
}

.modern-advertiser::before {
  width: 320px;
  height: 320px;
  background: #8fe7ff;
  top: -60px;
  left: -70px;
}

.modern-advertiser::after {
  width: 300px;
  height: 300px;
  background: #b9ffc9;
  bottom: -80px;
  right: -60px;
}

/* Header */
.adv-header {
  text-align: center;
  margin-bottom: 45px;
  position: relative;
  z-index: 2;
}

.adv-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  color: #071826;
}

.adv-title span {
  color: #1ea7e8;
  padding: 4px 10px;
  background: rgba(30,167,232,0.05);
  border-radius: 6px;
}

.adv-lead {
  max-width: 820px;
  margin: 14px auto 0;
  font-size: 16.8px;
  color: #425465;
  line-height: 1.7;
  opacity: 0.95;
}

/* Grid */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;
  padding: 0 12px;
}

/* Card */
.adv-card {
  background: rgba(255,255,255,0.82);
  border: 2px solid rgba(30,167,232,0.45);
  border-radius: 16px;
  padding: 26px;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
  position: relative;
  transition: .28s ease;
}

.adv-card:hover {
  transform: translateY(-8px);
  border-color: #5dc311;
  box-shadow: 0 16px 38px rgba(93,195,17,0.22);
}

/* Accent bar */
.adv-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(#1ea7e8,#5dc311);
  opacity: 0.9;
  border-radius: 16px 0 0 16px;
}

/* Icon */
.adv-card__icon img {
  width: 60px;
  height: 60px;
  margin-bottom: 12px;
}

/* Title & Text */
.adv-card__title {
  font-size: 20px;
  font-weight: 700;
  color: #071826;
  margin-bottom: 8px;
}

.adv-card__text {
  font-size: 15px;
  color: #4d5e6b;
  line-height: 1.7;
}

/* CTA Button */
.adv-cta {
  text-align: center;
  margin-top: 40px;
}

.btn-primary {
  padding: 12px 24px;
  background: linear-gradient(90deg,#5dc311,#82ff70);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #0a2233;
  border: none;
  transition: .25s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(93,195,17,0.25);
}

/* Responsive */
@media (max-width: 1024px) {
  .adv-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .adv-grid { grid-template-columns: 1fr; }
}

/* -------------------------
   Contact — New Modern UI
   ------------------------- */
:root {
  --accent: #0aa5b6;
  --accent-2: #5dc311;
  --muted: #6b7a80;
  --bg-start: #f3fbff;
  --bg-end: #f0fcf7;
  --card-bg: rgba(255,255,255,0.98);
}

/* wrapper background */
.contact-hero {
  background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
  padding: 72px 0;
  color: #042630;
}

/* inner grid */
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}

/* cards base */
.contact-card {
  background: var(--card-bg);
  border: 1px solid rgba(6,20,25,0.06);
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 12px 30px rgba(4,20,28,0.06);
  position: relative;
  overflow: hidden;
}

/* Form card specifics */
.contact-card--form { min-height: 420px; }
.contact-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(22px, 3.2vw, 34px);
  margin: 0 0 8px;
  font-weight: 800;
  color: #0b2b33;
}
.contact-heading span { color: var(--accent); }

.contact-lead {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}
/* =========================
   Contact — Updated Design
   ========================= */
/* ---------- Contact layout fixes & improved design ---------- */

/* container for contact section: reduce top spacing and center content */
.contact-updated {
  background: linear-gradient(180deg,#fbfeff 0%, #f0fcf7 100%);
  padding: 48px 0 72px; /* lowered top padding to remove large gap */
  color: #03282b;
}

/* this wrapper centers the two cards and constrains width */
.contact-inner-wrap {
  max-width: 1180px;         /* control full content width */
  margin: 0 auto;            /* center horizontally */
  display: grid;
  grid-template-columns: 420px 1fr;  /* left panel + flexible form width */
  gap: 34px;
  align-items: start;        /* top align both cards */
  justify-content: center;
  padding: 0 16px;
}

/* card base */
.contact-panel,
.formcard-inner {
  background: linear-gradient(180deg,#fff,#fbfffe);
  border-radius: 14px;
  padding: 22px;
  border: 1px solid rgba(6,20,25,0.06);
  box-shadow: 0 12px 26px rgba(6,20,25,0.06);
}

/* ensure both cards visually align and maintain similar height */
.contact-panel,
.contact-formcard .formcard-inner {
  display: flex;
  flex-direction: column;
}

/* force minimum height to avoid one very short panel */
.contact-panel,
.contact-formcard .formcard-inner {
  min-height: 360px;
}

/* visually align the form title */
.formcard-inner { width: 100%; }

/* contact panel small tweaks */
.contact-panel__title { font-family: 'Montserrat',sans-serif; font-size:24px; margin:0 0 6px; font-weight:800; color:#042d31; }
.contact-panel__title span { color:#1ea7e8; }
.contact-panel__subtitle { color:#5b7376; margin-bottom:12px; font-size:14px; }

/* quick info list */
.contact-quick li { display:flex; gap:12px; align-items:flex-start; margin:12px 0; }
.ci-icon { width:44px; height:44px; border-radius:10px; background: linear-gradient(180deg,#e9fbfd,#dffaf9); display:flex; align-items:center; justify-content:center; font-size:18px; color:#0aa5b6; border:1px solid rgba(10,165,182,0.06); }
.ci-content { font-size:14px; color:#274647; }

/* decor image subtle */
.contact-decor { margin-top:auto; opacity:0.11; }

/* form styles (keep similar to prior rules but ensure alignment) */
.form-modern .row.split { display:flex; gap:12px; margin-bottom:12px; }
.field { display:block; width:100%; }
.field input, .field textarea {
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(8,28,36,0.08); font-size:15px; background:#fff;
}
.form-actions { display:flex; gap:12px; align-items:center; margin-top:12px; }

/* smaller screens: stack and make full width */
@media (max-width: 1040px) {
  .contact-inner-wrap {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .contact-panel { order: 2; }
  .contact-formcard { order: 1; }
  .contact-panel .contact-decor { display:none; }
}

/* small cosmetic: reduce top overlap with previous sections that may push content down */
.site-header + .contact-updated { margin-top: 0; } /* safe guard if header is fixed */

/* Modern dual CTA section */
.dual-cta-section {
    width: 100%;
    padding: 80px 20px;
    background: linear-gradient(135deg,#f3fbff 0%, #e9fff4 100%);
    text-align: center;
}

.dual-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.dual-box {
    background: #ffffff;
    padding: 35px 30px;
    width: 350px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.07);
    border: 2px solid rgba(0,160,185,0.20);
    transition: all .3s ease;
}

.dual-box:hover {
    transform: translateY(-8px);
    border-color: #5dc311;
    box-shadow: 0 20px 36px rgba(93,195,17,0.20);
}

.dual-box h4 {
    font-family: 'Montserrat', sans-serif;
    color: #0a2233;
    font-size: 22px;
    font-weight: 700;
}

.dual-box p {
    color: #5e7077;
    margin-top: 6px;
    margin-bottom: 18px;
}

.dual-btn {
    padding: 12px 26px;
    background: linear-gradient(90deg,#5dc311,#82ff70);
    border-radius: 10px;
    color: #0a2233;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: .25s;
}

.dual-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(93,195,17,0.25);
}
/* Wrap equal height fix */
.contact-inner-wrap {
    display: flex;
    gap: 30px;
    align-items: stretch !important;
}

/* Force both cards equal height */
.contact-panel,
.contact-formcard {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Make form area grow naturally */
.formcard-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------
   MAP SECTION — Modern UI (Low Height)
----------------------------------------*/
.map-section {
  padding: 40px 0 70px;
  background: linear-gradient(180deg,#f3fbff,#eef9f1);
  display: flex;
  justify-content: center;
}

.map-box {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 14px;
  padding: 22px;
  border: 1px solid rgba(6,20,25,0.06);
  box-shadow: 0 14px 35px rgba(6,20,25,0.06);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}

.map-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(6,20,25,0.12);
}

/* MAP TITLE */
.map-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  margin: 0 0 14px;
  font-weight: 700;
  color: #0b2b33;
  border-left: 4px solid #0aa5b6;
  padding-left: 12px;
}

/* MAP FRAME — controlled height */
.map-frame-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 34%; /* ↓ LOWER HEIGHT (you asked for short height) */
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(6,20,25,0.08);
  transition: box-shadow .25s ease, transform .25s ease;
}

.map-frame-wrap:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transform: translateY(-3px);
}

/* MAP IFRAME */
.map-frame-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* USA LOCATION PIN (hover animated) */
.map-pin {
  position: absolute;
  top: 48%;
  left: 46%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: #0aa5b6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(10,165,182,0.35);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  z-index: 4;
}

.map-pin:hover {
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 12px 28px rgba(10,165,182,0.55);
}

/* Tooltip */
.map-pin-tooltip {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: #0aa5b6;
  color: #fff;
  font-size: 14px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}

.map-pin:hover .map-pin-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-3px);
}

/* Responsive */
@media (max-width: 768px) {
  .map-frame-wrap {
    padding-bottom: 50%; /* taller on mobile to be usable */
  }

  .map-pin {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

:root{
  --footer-bg: #0f172a;
  --text: #e7ecf5;
  --muted: #94a3b8;
  --border-grad-1:#38bdf8;
  --border-grad-2:#818cf8;
  --radius:12px;
}

.site-footer{
  background: var(--footer-bg);
  padding: 35px 18px 18px;
  color: var(--text);
  font-family: Inter, Arial;
  position: relative;
}

.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:5px;
  background: linear-gradient(90deg,var(--border-grad-1),var(--border-grad-2));
}

/* Grid */
.footer-inner{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap:25px;
  padding-bottom:15px;
}

@media(max-width:900px){
  .footer-inner{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:550px){
  .footer-inner{
    grid-template-columns:1fr;
  }
}

/* Logo */
.footer-logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  text-decoration:none;
  font-size:18px;
  font-weight:700;
}

.footer-desc{
  color:var(--muted);
  font-size:14px;
  margin:10px 0 14px;
  line-height:1.4;
}

/* Social */
.socials{
  display:flex;
  gap:10px;
}
.social{
  width:34px;
  height:34px;
  background:#1e293b;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  transition:.2s;
  border:1px solid rgba(255,255,255,0.05);
}
.social:hover{
  background:linear-gradient(90deg,var(--border-grad-1),var(--border-grad-2));
  transform:translateY(-4px);
}

/* Column Title */
.col-title{
  margin:0 0 10px;
  font-size:15px;
  font-weight:600;
}

/* Lists */
.footer-col ul{
  list-style:none;
  margin:0;
  padding:0;
}
.footer-col ul li{
  margin-bottom:6px;
}
.footer-col ul li a{
  text-decoration:none;
  color:var(--muted);
  font-size:14px;
  transition:.2s;
}
.footer-col ul li a:hover{
  color:var(--text);
  padding-left:5px;
}

/* Contact */
.contact-item{
  color:var(--muted);
  font-size:14px;
  margin-bottom:6px;
}
.contact-item a{
  color:var(--text);
  text-decoration:none;
}

/* Bottom */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08);
  max-width:1200px;
  margin:auto;
  padding-top:12px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer-bottom p{
  color:var(--muted);
  font-size:13px;
}
.footer-bottom-links a{
  margin-left:15px;
  color:var(--muted);
  text-decoration:none;
  font-size:13px;
}
.footer-bottom-links a:hover{
  color:var(--text);
}
/* Column Title - WHITE */
.col-title{
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff !important;   /* ← title now white */
}

/* Modern section design */
.company-affiliate.modern-affiliate {
    padding: 80px 0;
    background: #f8fafc;
    text-align: center;
}

/* Title clean style */
.aff-title {
    font-size: 42px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 15px;
}

/* Remove underline / highlight from span */
.aff-title span {
    color: #3b82f6;           /* blue accent */
    background: none !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Subtitle modern */
.aff-lead {
    max-width: 720px;
    margin: 0 auto 40px;
    font-size: 18px;
    color: #64748b;
    line-height: 1.6;
}

/* Cards grid */
.aff-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-top: 40px;
}

/* Card style */
.aff-card {
    background: #ffffff;
    padding: 28px 22px;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    transition: .25s ease;
}

.aff-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}

.aff-card__title {
    font-size: 20px;
    margin: 14px 0 8px;
    color: #0f172a;
    font-weight: 600;
}

.aff-card__text {
    color: #64748b;
    font-size: 15px;
    line-height: 1.55;
}

/* CTA buttons */
.aff-cta {
    margin-top: 45px;
    display: flex;
    justify-content: center;
    gap: 18px;
}

.btn {
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}

.btn-outline {
    border: 2px solid #0f172a;
    color: #0f172a;
}

.btn-outline:hover {
    background: #0f172a;
    color: #ffffff;
}

.btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.btn-primary:hover {
    background: #2563eb;
}

:root { --theme-color: #5dc311; --card-bg: #fff; --border: rgba(7,20,34,0.06); }

/* basic section */
.eo-carousel-section { padding: 28px 12px; background: linear-gradient(180deg,#f7fbff, #fbfff7); }
.eo-carousel { max-width: 1200px; margin: 0 auto; position: relative; display:flex; align-items:center; gap:12px; }

/* arrows */
.eo-carousel-arrow {
  width:44px; height:44px; border-radius:10px; border:1px solid var(--border);
  background:var(--card-bg); color:var(--theme-color); font-size:24px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(9,18,24,0.06); z-index: 5;
}
.eo-carousel-arrow:hover { transform: translateY(-3px); }

/* viewport & track */
.eo-carousel-viewport { overflow:hidden; flex:1 1 auto; }
.eo-carousel-track {
  display:flex; gap:18px; align-items:center;
  transition: transform 420ms cubic-bezier(.22,.9,.3,1); will-change: transform;
}

/* individual slide */
.eo-slide {
  flex: 0 0 auto;
  min-width: 180px; /* desktop size — change for more/less visible */
  max-width: 220px;
  display:flex; align-items:center; justify-content:center;
  background: var(--card-bg); padding:12px 18px; border-radius:12px;
  border:1px solid var(--border); box-shadow:0 8px 20px rgba(9,18,24,0.04);
}
.eo-slide img { max-height:48px; width:auto; display:block; object-fit:contain; }

/* dots */
.eo-carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display:flex; gap:8px; z-index:6; }
.eo-carousel-dot {
  width:10px; height:10px; border-radius:999px; background: rgba(11,18,32,0.08); cursor:pointer;
  border: 1px solid rgba(11,18,32,0.04);
}
.eo-carousel-dot.active { background: var(--theme-color); box-shadow: 0 6px 14px rgba(93,195,17,0.16); }

/* responsive tweaks */
@media (max-width: 1000px) {
  .eo-slide { min-width:150px; }
  .eo-slide img { max-height:40px; }
}
@media (max-width: 680px) {
  .eo-slide { min-width:120px; }
  .eo-slide img { max-height:34px; }
  .eo-carousel-arrow { width:40px; height:40px; font-size:20px; }
}
@media (max-width: 420px) {
  .eo-slide { min-width:110px; padding:8px 10px; }
  .eo-carousel-arrow { display:none; } /* hide arrows on very small screens */
  .eo-carousel-dots { bottom: 6px; }
}

:root {
  --theme-color: #5dc311;
  --card-bg: #fff;
  --border: rgba(7,20,34,0.06);
}

/* Section */
.eo-carousel-section { padding: 28px 12px; background: linear-gradient(180deg,#f7fbff, #fbfff7); }
.eo-carousel { max-width: 1200px; margin: 0 auto; position: relative; display:flex; align-items:center; gap:12px; }

/* Arrows */
.eo-carousel-arrow {
  width:44px; height:44px; border-radius:10px; border:1px solid var(--border);
  background:var(--card-bg); color:var(--theme-color); font-size:24px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(9,18,24,0.06); z-index: 5;
}
.eo-carousel-arrow:hover { transform: translateY(-3px); }

/* Viewport & track */
.eo-carousel-viewport { overflow:hidden; flex:1 1 auto; }
.eo-carousel-track {
  display:flex; gap:18px; align-items:center;
  transition: transform 420ms cubic-bezier(.22,.9,.3,1);
  will-change: transform;
}

/* Slide */
.eo-slide {
  flex: 0 0 auto;
  min-width: 180px; /* change this to show more/less logos in viewport */
  max-width: 220px;
  display:flex; align-items:center; justify-content:center;
  background: var(--card-bg); padding:12px 18px; border-radius:12px;
  border:1px solid var(--border); box-shadow:0 8px 20px rgba(9,18,24,0.04);
}
.eo-slide img { max-height:48px; width:auto; display:block; object-fit:contain; }

/* Dots */
.eo-carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display:flex; gap:8px; z-index:6; }
.eo-carousel-dot {
  width:10px; height:10px; border-radius:999px; background: rgba(11,18,32,0.08); cursor:pointer;
  border: 1px solid rgba(11,18,32,0.04);
}
.eo-carousel-dot.active { background: var(--theme-color); box-shadow: 0 6px 14px rgba(93,195,17,0.16); }

/* responsive */
@media (max-width: 1000px) { .eo-slide { min-width:150px; } .eo-slide img { max-height:40px; } }
@media (max-width: 680px)  { .eo-slide { min-width:120px; } .eo-slide img { max-height:34px; } .eo-carousel-arrow { width:40px; height:40px; font-size:20px; } }
@media (max-width: 420px)  { .eo-slide { min-width:110px; padding:8px 10px; } .eo-carousel-arrow { display:none; } .eo-carousel-dots { bottom: 6px; } }

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo {
  height: 42px;
  width: 150px;
}

.footer-brand-logo {
  height: 28px;   /* Smaller balanced size */
  width: auto;
  object-fit: contain;
}

/* -------- Header global style (exnessoffer) -------- */
.site-header {
    background: #05071b;          /* home page er moto dark background */
    padding: 10px 0;
    position: relative;
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo fix – boro logo choto kore stable kora */
.logo img {
    max-height: 42px;             /* ekhane height control hocche */
    width: auto;
    display: block;
}

/* Navigation reset to match home style */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation ul li {
    display: inline-block;
    margin-left: 25px;
}

.main-navigation ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
}

.main-navigation ul li a:hover,
.main-navigation ul li a.active {
    color: #ffd54a;               /* active/hover color – home er moto rakho */
}

/* Mobile */
.navbar-toggle {
    border: none;
    background: transparent;
}

.navbar-toggle .icon-bar {
    background-color: #ffffff;
}



/* === SEO / UX Tweaks for ExnessOffer === */
header, .site-header {
    background: #05071b;
}

.logo img {
    max-height: 42px;
    width: auto;
    display: block;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-navigation ul li {
    display: inline-block;
    margin-left: 25px;
}

.main-navigation ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
}

.main-navigation ul li a:hover,
.main-navigation ul li a.active {
    color: #ffd54a;
}