/* =========================
   GLOBAL BODY TEXT
========================= */
/* Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* Body */
body {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px !important;
  line-height: 1.6;
  color: #333;
}

/* Paragraph */
p {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 15px;
  color: #444;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #222;
  margin-bottom: 15px;
}

/* H1 – Hero / Page Title */
h1 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.25;
}

/* H2 – Section Titles */
h2 {
  font-size: 34px;
  line-height: 1.3;
}

/* H3 – Sub Section */
h3 {
  font-size: 26px;
  line-height: 1.3;
}

/* H4 */
h4 {
  font-size: 22px;
}

/* H5 */
h5 {
  font-size: 18px;
  font-weight: 600;
}

/* H6 */
h6 {
  font-size: 16px;
  font-weight: 600;
}

/* Highlight text inside headings */
h1 span,
h2 span,
h3 span {
  color: #27c2ff;
}
.navbar-nav .nav-link{
    font-size:16px !important;
}
.navbar-nav .nav-link,
button,
.hero-btn {
   font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
}
/* Dropdown menu items */
.dropdown-menu .dropdown-item {
   font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.gallery-dropdown:hover .dropdown-menu{
  display:block;
}
/* header start */

/* NAVBAR BASE */
.navbar {
  background-color: var(--color-light-gray);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 999;
  border-radius: 80px 0px 0px 0px;
  padding:0px;
  font-family: var(--title-font);
}

/* Use this for a dark header:
.navbar {
  background-color: var(--color-dark);
  border-bottom: none;
}
*/

/* ===========================
   Navbar Logo
=========================== */
.navbar-light .navbar-brand img {
  max-height: 70px;
}

/* ===========================
   Nav Links
=========================== */
.navbar-nav .nav-link {
  font-size: 15px !important;
  font-weight: normal;
  color: #4d5765 !important;
  transition: color 0.3s ease;
}

/* Dark header version:
.navbar-nav .nav-link {
  color: white !important;
}
*/

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--color-primary) !important;
  text-decoration: none;
}

/* Dark header hover example:
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--color-accent) !important;
}
*/

/* ===========================
   Dropdown Menu
=========================== */
.dropdown-menu {
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background-color: white;
}

.dropdown-menu .dropdown-item {
  color: black;
  padding: 10px 20px;
  font-weight: bold;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: silver;
  color: var(--color-primary);
}

/* ===========================
   Navbar Toggler (Mobile)
=========================== */
.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  color: var(--color-primary);
}

/* ===========================
   CTA Button (Enquire Now)
=========================== */
.enquire-now-container {
  margin-left: 15px;
}

.btn-site-green {
  background: var(--color-primary);
  color: white;
  border: 1px solid var(--color-primary);
  border-radius: 20px;
  padding: 8px 20px;
  transition: all 0.3s ease;
}

.btn-site-green:hover {
  background: #3367d6; /* Slightly darker shade */
  border: 1px solid #3367d6;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Optional general link hover - not needed if you have .nav-link */
  nav a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* If you have a different CTA, like a round button, customize:
.btn-cta:hover {
  background-color: #3367d6; 
}
*/

/* Loader Wrapper */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff; /* or your brand background color */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loader Animation */
#loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #007bff; /* your brand color */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
}

/* Spin Animation Keyframes */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.gradient-btn {
  background: linear-gradient(135deg, #1062fe, #e65c00);
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.gradient-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  color: #fff;
  text-decoration: none;
}

/* Shine animation overlay */
.gradient-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  z-index: 2;
  animation: shine 2.5s infinite;
}

@keyframes shine {
  100% {
    left: 100%;
  }
}
   .site-logo {
  max-width: 190px;   /* adjust as per design */
  height: auto;       /* keep aspect ratio */
  display: block;
}

/* Tablet screens */
@media (max-width: 992px) {
  .site-logo {
    max-width: 100px;
  }
}

/* Mobile screens */
@media (max-width: 576px) {
  .site-logo {
    max-width: 140px;
    margin: 0 auto;   /* centers logo if inside flex/center block */
  }
 
  .navbar {
    border-radius: 57px 0px 0px 0px;
}
}

/* header end------------------------------------------------------- */
/* Show dropdown on hover */
@media (min-width: 992px){

.gallery-dropdown:hover .dropdown-menu{
  display:block;
  margin-top:0;
}

}
.gallery-dropdown:hover .dropdown-menu{
  display:block;
  margin-top:0;
}

/* Dropdown box design */
.custom-dropdown{
  border:none;
  border-radius:10px;
  padding:10px 0;
  min-width:200px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  animation: dropdownFade 0.3s ease;
}

/* Dropdown items */
.custom-dropdown .dropdown-item{
  font-size:14px;
  padding:10px 20px;
  transition:0.3s;
}

/* Hover effect */
.custom-dropdown .dropdown-item:hover{
  background:linear-gradient(135deg,#1062fe,#0a58ca);
  color:#fff;
  padding-left:25px;
}

/* Smooth animation */
@keyframes dropdownFade{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* banner section -------------------------------------------------------------------------------*/

  /* Default styling for desktop and larger screens */
    .carousel-image {
        height: 650px; /* Adjust for desktop height */
        object-fit: cover; /* Ensures image fits the container */
    }


    /* Mobile view adjustments */
    @media (max-width: 768px) {
        .carousel-image {
            height: auto !important; /* Allow full image height on smaller screens */
            object-fit: contain; /* Ensure the entire image is visible without cropping */
        }
    }

.carousel-control-prev,
.carousel-control-next {
  width: 60px;
  height: 60px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background:linear-gradient(135deg, #0d6efd, #212529);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border: none;
  z-index: 5;
  transition: transform 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* Arrow icons inside buttons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none; 
  width: 40px;
  height: 40px;
  display: inline-block;
  position: relative;
}

/* Left arrow shape */
.custom-arrow{
  width:60px;
  height:60px;
  border-radius:50%;
  background: linear-gradient(135deg, #14a2a6, #a6c512) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  top:50%;
  transform:translateY(-50%);
  box-shadow:0 6px 15px rgba(0,0,0,0.3);
  transition:0.3s;
}

.custom-arrow:hover{
  transform:translateY(-50%) scale(1.1);
}

.slider-arrow{
  font-size:32px;
  color:#fff;
}


/* Mobile view */
@media (max-width: 768px) {
  
  
#bannerSlider .carousel-caption.right-top-caption {
  top: 10%; bottom: auto; right: 10%; left:10%;
  }
  .carousel-control-prev,
  .carousel-control-next {
    width: 40px;
    height: 40px;
  }

  .carousel-control-prev-icon::before,
  .carousel-control-next-icon::before {
    width: 8px;
    height: 8px;
    border-width: 2px;
  }
  .carousel-item {
    min-height: 100% !important;
}
}


/* Shine animation */
@keyframes shine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
 
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: transparent !important;
    color:#fff !important;
}
/* end ---------------------*/

/* branch box section ---------------*/
.branch-section{
position:relative;
overflow:hidden;
}

/* background circles */

.branch-section::before{
content:"";
position:absolute;
width:350px;
height:350px;
/* background:radial-gradient(circle,#00c6ff,#0099ff); */
border-radius:50%;
top:-120px;
left:-120px;
opacity:0.3;
filter:blur(80px);
}

.branch-section::after{
content:"";
position:absolute;
width:300px;
height:300px;
border-radius:50%;
bottom:-100px;
right:-100px;
opacity:0.3;
filter:blur(80px);
}

/* branch box */

.branch-box{
background: linear-gradient(135deg, #13a1a6, #a7c511);
padding:30px;
color:#fff;
position:relative;
border-radius:20px;
overflow:hidden;
transition:0.5s;
max-width:420px;
margin:auto;
position:relative;
z-index:1;
overflow:hidden;
}


/* icon */

.branch-icon{
font-size:45px;
margin-bottom:15px;
filter:drop-shadow(0 6px 10px rgba(0,0,0,0.3));
}

/* hover animation */

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

/* glowing border */

.branch-box::before{
content:"";
position:absolute;
inset:0;
border-radius:20px;
padding:2px;
background:linear-gradient(45deg,#fff,transparent,#fff);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
animation:borderMove 5s linear infinite;
}

@keyframes borderMove{
0%{background-position:0 0;}
100%{background-position:400px 0;}
}

/* text styles */

.branch-box h3{
font-weight:600;
}

.branch-location{
font-size:17px;
color:#e8f7ff;
}

/* button */

.branch-btn{
display:inline-block;
margin-top:15px;
padding:8px 22px;
border:1px solid #fff;
color:#fff;
text-decoration:none;
transition:0.3s;
}

.branch-btn:hover{
background:#fff;
color:#0099ff;
}

/* floating animation */

.branch-box{
animation:floatBox 6s ease-in-out infinite;
}

@keyframes floatBox{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}
/* half circle behind card */

.branch-box::after{
content:"";
position:absolute;
width:160px;
height:160px;
background:radial-gradient(circle,#ffffff66,#ffffff22);
border-radius:50%;
top:-60px;
right:-60px;
z-index:0;
filter:blur(2px);
}

/* second circle bottom */

.branch-box .branch-content::after{
content:"";
position:absolute;
width:140px;
height:140px;
background:radial-gradient(circle,#ffffff55,#ffffff11);
border-radius:50%;
bottom:-70px;
left:-60px;
z-index:0;
}
.branch-icon-small{
font-size:22px;
vertical-align:middle;
margin-right:6px;
filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3));
animation: iconFloat 4s ease-in-out infinite;
}

@keyframes iconFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-3px);}
}
/* end -----------------------------------------------*/


/* welcome section start */
.why-alpha-section{
  position:relative;
  overflow:hidden;

  /* Background Image */
  background:url("../img/banner1.jpg") center/cover no-repeat;
}

/* Dark overlay for readability */
.why-alpha-section::before{
  content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.65), rgb(255 255 255 / 84%));
    backdrop-filter: blur(5px);
    z-index: 0;
}

/* Glass floating lights */
.why-alpha-section::after{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(circle,#00a4fe33,transparent 70%);
  top:-150px;
  left:-150px;
  filter:blur(80px);
  animation:floatLight 12s infinite linear;
}


/* moving light animation */
@keyframes floatLight{
  0%{transform:translate(0,0)}
  50%{transform:translate(120px,80px)}
  100%{transform:translate(0,0)}
}

/* container above overlay */
.why-alpha-section .container{
  position:relative;
  z-index:2;
}

/* Glass card effect */


/* heading gradient */
.highlight-text{
  background: linear-gradient(90deg, #13a2a7, #a8c510);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* image hover */
.why-image-grid img{
  transition:transform .4s ease, box-shadow .4s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
  border: 3px solid #a8c50e;
}

.why-image-grid img:hover{
  transform:scale(1.05);
  box-shadow:0 15px 30px rgba(0,164,254,0.35);
}

/* glowing corner */
.vmv-light{
  position:absolute;
  top:0;
  right:0;
  width:350px;
  height:350px;
  background:radial-gradient(circle,rgba(255,102,102,0.3),transparent 70%);
  filter:blur(70px);
  pointer-events:none;
  z-index:1;
}

/* responsive */
@media(max-width:991px){
  .why-alpha-section .row{
    text-align:center;
  }
}

/* end --------------------------------------------*/

/* insurance start -------------------------------------*/
.see-all-btn{
position:relative;
display:inline-block;
padding:12px 34px;
font-size:16px;
font-weight:600;
color:#fff;
text-decoration:none;

background: linear-gradient(90deg, #13a2a7, #a8c510);
border-radius:40px;

overflow:hidden;
transition:0.4s;
box-shadow: 0 10px 25px rgb(145 191 38 / 22%);
}

/* animated shine */
.see-all-btn span{
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,
transparent,
rgba(255,255,255,0.6),
transparent);
transition:0.6s;
}

.see-all-btn:hover span{
left:100%;
}

/* hover animation */
.see-all-btn:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:0 18px 40px rgba(0,0,0,0.3);
}
/* title */

.insurance-title{
font-size:36px;
font-weight:700;
color:#0a2c7d;
}

/* box */

.insurance-box{
display:flex;
align-items:center;
gap:15px;
padding:18px 22px;

background: rgb(166 197 18 / 18%);
border-radius:14px;

font-size:17px;
font-weight:500;
border: 2px solid #a0bb19;
box-shadow:0 10px 25px rgba(0,0,0,0.08);

transition:0.4s;
position:relative;
overflow:hidden;
}

/* icon */

.insurance-icon{
width:40px;
height:40px;

display:flex;
align-items:center;
justify-content:center;
background: linear-gradient(135deg, #13a2a6, #a7c50f);
color:#fff;

border-radius:10px;
font-size:22px;
}

/* hover */

.insurance-box:hover{
transform:translateY(-6px);
box-shadow:0 18px 35px rgba(0,0,0,0.15);
}
/* insurance end-------------------------------------------- */

 /* ===============================
   VIDEO SECTION
================================*/

.top-half-circle{
  position:absolute;
  top:0;
  right:0;
  width:200px;
  height:200px;
  background: linear-gradient(135deg, #11a1a9, #a8c510);
  border-bottom-left-radius:180px;
  z-index:0;
  opacity:0.15;
}
.video-section{
  position:relative;
  background:#91c0241c;
  overflow:hidden;
}


/* Section Title */

.video-title{
  font-size:34px;
  font-weight:700;
  color:#222;
}

.video-title span{
 background: linear-gradient(90deg, #13a2a7, #a8c510);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}



/* Video Box */

.video-box{
  position:relative;
  padding:15px;
  border-radius:20px;
  background:rgba(255,255,255,0.45);
  backdrop-filter:blur(10px);
  box-shadow:0 20px 50px rgba(0,0,0,0.15);
  transition:0.4s;
}

.video-box video{
  width:100%;
  border-radius:15px;
}


/* Hover Animation */

.video-box:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 60px rgba(0,0,0,0.25);
}


/* Background Animation */

.video-section::before{
  content:"";
  position:absolute;
  width:450px;
  height:450px;
 background: radial-gradient(circle, #11a1a9, #a9c50f);
  border-radius:50%;
  top:-200px;
  left:-200px;
  opacity:0.25;
  filter:blur(120px);
  animation:movePattern 12s linear infinite alternate;
}

.video-section::after{
  content:"";
  position:absolute;
  width:450px;
  height:450px;
  background: radial-gradient(circle, #11a1a9, #a9c50f);
  border-radius:50%;
  bottom:-200px;
  right:-200px;
  opacity:0.25;
  filter:blur(120px);
  animation:movePattern2 14s linear infinite alternate;
}

/* Animation */

@keyframes movePattern{
  0%{transform:translate(0,0);}
  100%{transform:translate(80px,60px);}
}

@keyframes movePattern2{
  0%{transform:translate(0,0);}
  100%{transform:translate(-80px,-60px);}
}


/* Responsive */

@media (max-width:768px){

  .video-title{
    font-size:26px;
  }

}

/* end --------------------------------------------------------------*/

/* equipment gallery ----------------------------*/
 /* .equipment-gallery-section{
background:#f7fbff;
} */

/* Heading */

.gallery-title{
font-size:34px;
font-weight:700;
}

.gallery-title span{
background: linear-gradient(90deg, #13a2a7, #a8c510);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.gallery-sub{
color:#666;
margin-top:10px;
}

/* Masonry Layout */

.masonry-gallery{
column-count:3;
column-gap:15px;
}

.masonry-gallery img{
width:100%;
margin-bottom:15px;
border-radius:12px;
cursor:pointer;
transition:0.4s;
box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

/* Hover Effect */

.masonry-gallery img:hover{
transform:scale(1.05);
box-shadow:0 15px 35px rgba(0,0,0,0.2);
}

/* Responsive */

@media (max-width:992px){
.masonry-gallery{
column-count:2;
}
}

@media (max-width:576px){
.masonry-gallery{
column-count:1;
}
}
/* end ----------------------------*/

/* footer */
 .footer-links ul li{
  margin-bottom:12px;   /* gap between menu items */
}

.footer-links ul li a{
  font-size:16px;       /* increase font size */
  color:#fff;
  text-decoration:none;
  transition:0.3s;
}

.footer-links ul li a:hover{
  color:#04114e;        /* hover color */
  padding-left:5px;     /* slight move effect */
}
.footer-section {
  background: linear-gradient(135deg, #6366f1, #06b6d4, #6366f1);
  color: #fff;
  padding: 60px 20px 30px;
  font-size: 14px;
}

.footer-section a {
  color: #fff;
  text-decoration: none;
}

.footer-section a:hover {
  text-decoration: underline;
}

.footer-section p {
  margin: 5px 0;
  color:#fff;
}

.footer-logo {
  height: 40px;
  object-fit: contain;
}
.footer-logo2 {
  height: 70px;
  object-fit: contain;
}

.social-icons a {
  color: #fff;
  font-size: 18px;
  margin: 0 8px;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #04114e; /* Red hover */
}

@media (max-width: 767px) {
  .footer-section {
    text-align: center;
  }
  .social-icons {
    justify-content: center;
  }
}
/* end ----------------------------------------------*/


/* Left side fixed call button */
.side-call-btn{
  position: fixed;
  left: 15px;
  bottom: 10%;
  transform: translateY(-50%);
  background: #0d6efd; /* change color if needed */
  color: #fff;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);

  animation: zoomPulse 1.8s infinite;
}

/* Zoom In – Zoom Out Animation */
@keyframes zoomPulse{
  0%{
    transform: translateY(-50%) scale(1);
  }
  50%{
    transform: translateY(-50%) scale(1.15);
  }
  100%{
    transform: translateY(-50%) scale(1);
  }
}

/* Hover effect */
.side-call-btn:hover{
  background:#1202a1;
  color:#fff;
}
.rotate-icon{
  transform: rotate(90deg);
}

/* Right side WhatsApp button */
.side-whatsapp-btn{
  position: fixed;
  right: 15px;
  bottom: 10%;
    font-size:30px !important; 
  transform: translateY(-50%);
  background: #25D366;
  color: #fff;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);

  animation: zoomPulse 1.8s infinite;
}

/* Same zoom animation */
@keyframes zoomPulse{
  0%{
    transform: translateY(-50%) scale(1);
  }
  50%{
    transform: translateY(-50%) scale(1.15);
  }
  100%{
    transform: translateY(-50%) scale(1);
  }
}

/* Hover */
.side-whatsapp-btn:hover{
  background:#1ebe5d;
  color:#fff;
}

/* Scroll Up Button */
.scroll-top-btn{
  position: fixed;
  right: 20px;
  bottom: 5%;
  background: linear-gradient(135deg, #0316b8, #0dcaf0);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);

  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
}

/* Show button */
.scroll-top-btn.show{
  opacity: 1;
  visibility: visible;
}

.scroll-top-btn:hover{
  background:#1202a1;
  color:#fff;
}
/* top banner ---------------------------------- */

.top-banner{
  position: relative;
  width: 100%;
  height: 320px;
  overflow: hidden;
}

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

.top-banner-content{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(0,0,0,0.25); /* overlay */
}

.top-banner-content h1{
  color: #fff;
  font-size: 42px;
  font-weight: 700;
}

.top-banner-content p{
  color: #f1f1f1;
  font-size: 18px;
}

/* Mobile */

@media (max-width:768px){

  .top-banner{
    height: 220px;
  }

  .top-banner-content h1{
    font-size: 28px;
  }

}
/* end -----------------*/

/* about section */
.about-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.about-btn{
padding:10px 20px;
border-radius:25px;
background:#0c9fb0;
color:#fff;
text-decoration:none;
font-size:14px;
transition:0.3s;
}

.about-btn:hover{
background:#a8c510;
transform:translateY(-2px);
}
.about-overlap-section{
background:#f8fbff;
}

/* Image */

.about-image-wrapper{
position:relative;
}

.about-image-wrapper img{
width:100%;
border-radius:12px;
box-shadow:0 20px 50px rgba(0,0,0,0.15);
}


/* Content Card */

.about-overlap-card{
background:#fff;
padding:35px;
border-radius:12px;
box-shadow:0 15px 40px rgba(0,0,0,0.12);

position:relative;
z-index:2;
}

/* Title */

.about-title{
font-size:32px;
font-weight:700;
margin-bottom:15px;
}

.about-title span {
    background: linear-gradient(90deg, #13a2a7, #a8c510);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Text */

.about-overlap-card p{
color:#555;
line-height:1.7;
margin-bottom:20px;
}

/* List */

.about-list{
list-style:none;
padding:0;
}

.about-list li{
margin-bottom:10px;
padding-left:25px;
position:relative;
}

.about-list li::before{
content:"✔";
position:absolute;
left:0;
color:#0d6efd;
}

.about-overlap-section {
background:#fff;
}
/* Mobile */

@media(max-width:992px){

.about-overlap-card{
margin-left:0;
margin-top:20px;
}

}
/* end -------------------------------------*/

/* lasik section----------------------------------- */
.laser-section{

padding:80px 0;
}

/* IMAGE WRAPPER */

.laser-img-wrapper{
position:relative;
}

.laser-img-wrapper img{
width:100%;
border-radius:16px;
box-shadow:0 25px 45px rgba(0,0,0,0.15);
position:relative;
z-index:2;
}

/* BACKGROUND SHAPE */

.img-bg{
position:absolute;
width:100%;
height:100%;
background:#0d6efd;
border-radius:16px;
top:15px;
left:15px;
z-index:1;
opacity:.15;
}

/* IMAGE LABEL */

.laser-label{
position:absolute;
bottom:15px;
left:15px;
background:#0d6efd;
color:#fff;
padding:6px 16px;
border-radius:20px;
font-size:14px;
z-index:3;
}

/* CONTENT */

.laser-content h2{
font-size:32px;
margin-bottom:25px;
}

.laser-content span{
color:#0d6efd;
}

/* BENEFIT ROW */

.benefit-row{
background:#fff;
padding:14px 18px;
margin-bottom:12px;
border-radius:8px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
display:flex;
align-items:center;
gap:10px;
transition:.3s;
}

.benefit-row i{
color:#0d6efd;
font-size:18px;
}

.benefit-row:hover{
transform:translateX(6px);
box-shadow:0 12px 25px rgba(0,0,0,0.15);
}
/* end -----------------------------------------------*/

/* faq section ---------------------------- */
.faq-section{

background:#f7fbff;
}

.faq-title{
text-align:center;
font-size:34px;
margin-bottom:40px;
font-weight:600;
}

/* FAQ CARD */

.faq-card{
background:#0083e724;
border-radius:12px;
margin-bottom:18px;
box-shadow:0 8px 18px rgba(0,0,0,0.08);
overflow:hidden;
transition:0.4s;
border-left:4px solid transparent;
}

.faq-card.active{
border-left:4px solid #0d6efd;
box-shadow:0 12px 28px rgba(0,0,0,0.15);
}

/* QUESTION */

.faq-question{
padding:18px 22px;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
font-size:16px;
font-weight:500;
}

/* ICON */

.faq-icon{
background:#0a58ca;
color:#fff;
width:30px;
height:30px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
transition:0.3s;
}

/* ICON ROTATE */

.faq-card.active .faq-icon{
transform:rotate(45deg);
}

.faq-answer{
max-height:0;
overflow:hidden;
padding:0 22px;
transition:max-height .4s ease, padding .3s ease;
}

.faq-card.active .faq-answer{
max-height:200px;
padding:12px 22px 20px;
}
@media (max-width:768px){

.faq-question{
padding:16px 16px;
font-size:15px;
align-items:flex-start;
gap:10px;
}

.faq-icon{
flex-shrink:0;
width:28px;
height:28px;
font-size:16px;
}

}

/* end ----------------------------------------------------------*/

/* contact address */
   
    .location-highlight{
color:#0d6efd;   /* blue color */
font-weight:600;
}
    .location-section{
padding:80px 0;
background-image:url("assets/img/contact_back.jpg");
background-position:center;
background-size:cover;
background-attachment:fixed;
background-repeat:no-repeat;
}

/* CARD */

.location-card{
background:#fff;
padding:30px;
border-radius:18px;
box-shadow:0 15px 35px rgba(0,0,0,0.12);
height:100%;
}

.location-card:hover{
transform:translateY(-6px);
}

.location-card h3{
font-size:30px;
margin-bottom:10px;
font-weight:700;
}

.location-card p{
margin-bottom:20px;
color:#555;
}

/* MAP */

.map-box iframe{
border-radius:14px;
margin-top:20px;
}
.address{
color:#555;
line-height:1.7;
margin-bottom:15px;
}

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

.contact-item{
display:flex;
align-items:center;
gap:10px;
font-size:15px;
}

.contact-item i{
color:#0d6efd;
font-size:16px;
}

.contact-item a{
text-decoration:none;
color:#333;
font-size:16px;
}

.contact-item a:hover{
color:#0d6efd;
}
/* end -------------------------------------------------------*/

/* appointment section form */
   .appointment-section{
padding:80px 0;

}

.appointment-card{
max-width:600px;
margin:auto;
background:#fff;
padding:40px;
border-radius:14px;
box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

.appointment-title{
text-align:center;
font-size:30px;
margin-bottom:30px;
font-weight:600;
}

/* FORM GROUP */

.form-group{
position:relative;
margin-bottom:18px;
}

/* INPUTS */

.form-group input,
.form-group textarea{
width:100%;
padding:14px 45px 14px 15px;
border-radius:8px;
border:1px solid #ddd;
background:#f9f9f9;
font-size:15px;
outline:none;
}

.form-group textarea{
height:110px;
resize:none;
}

/* ICON */

.input-icon{
position:absolute;
right:15px;
top:50%;
transform:translateY(-50%);
font-size:20px;
color:#9aa0a6;
}

.textarea-icon{
top:20px;
}

/* BUTTON */

.submit-btn{
width:100%;
padding:14px;
border:none;
border-radius:8px;
background:#0d6efd;
color:#fff;
font-size:16px;
cursor:pointer;
transition:0.3s;
}

.submit-btn:hover{
background:#084298;
}
/* end ----------------------------------*/

/* form banner------------------------------- */
.form-group input{
        padding: 14px 15px 14px 15px;
    }
     .card-banner-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.banner-heading {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(255, 255, 255);
    text-shadow: rgba(0, 0, 0, 0.6) 0px 4px 10px;
    z-index: 2;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    width: 90%;
}
/* end -------------------------------------------------------------------------------------*/
.navbar .nav-link.active{
  color:#4f78eb !important;
  font-weight:600;
  border-bottom:2px solid #a6c411;
}

/* video section------------------------------------------ */
.play-btn{
position:absolute;
inset:0;
margin:auto;
width:70px;
height:70px;
background:#ff0000;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
animation:pulse 1.8s infinite;
}
.play-btn span{
width:0;
height:0;
border-left:20px solid #fff;
border-top:12px solid transparent;
border-bottom:12px solid transparent;
}

@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(255,0,0,.6);}
70%{box-shadow:0 0 0 20px rgba(255,0,0,0);}
100%{box-shadow:0 0 0 0 rgba(255,0,0,0);}
}
    .video-frame{
position:relative;
cursor:pointer;
}

.video-thumb{
width:100%;
height:220px;
object-fit:cover;
display:block;
}

.video-frame iframe{
width:100%;
height:220px;
border:0;
}
@media (max-width:768px){
  .play-btn{
width:60px;
height:60px;
}
}
/* end------------------------------------------- */
 .eye-donation-btn{
position:fixed;
right:25px;
top:65%;
transform:translateY(-50%);
display:flex;
align-items:center;
gap:8px;

background: linear-gradient(135deg, #dc3545, #d80317);
color:#fff;
border: 2px solid #fff;
padding:12px 20px;
border-radius:7px;
font-size:15px;
font-weight:600;
text-decoration:none;

box-shadow:0 8px 25px rgba(255,0,0,0.5); /* red shadow */
z-index:9999;

animation:buttonPulse 2s infinite;
}
@media (max-width:768px){
  .principal-img img {
  max-width:100% !important;
}}
.list-unstyled li a{
text-decoration:none !important;
color:inherit;
}

/* end------------------------------------------------------ */
/* blog section ------------------------------------------------------ */
.blog-section{
        background: #f7fbff;
    }
    .link-btn{
  text-decoration: none;
  color: #0d6efd; /* optional link color */
  font-weight: 600;
  transition: 0.3s;
}

.link-btn:hover{
  text-decoration: none;
  color: #0a58ca;
}
    .blog-section {
  position: relative; /* parent for absolute positioning */
}

.social-bar {
  position: absolute;   
  top: 20px;              
  right: 0;               
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.social-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  margin-bottom: 8px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

/* Social colors */
.facebook { background: #3b5998; }
.twitter { background: #070707; }
.linkedin { background: #0077b5; }
.whatsapp { background: #25d366; }
.share { background: #f58220; }

.social-bar a:hover {
  transform: scale(1.1);
}
/* Sidebar Box */
.sidebar-box{
  background:#fff;
  padding:20px;
  border-radius:10px;
  box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

/* Title */
.sidebar-title{
  font-weight:700;
  margin-bottom:20px;
  position:relative;
  padding-left:15px;
}

.sidebar-title:before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:4px;
  height:20px;
  background:#0d6efd;
  border-radius:2px;
}

/* Recent Post List */
.sidebar-list{
  list-style:none;
  padding:0;
}

.sidebar-list li{
  margin-bottom:12px;
}

.sidebar-list a{
  text-decoration:none;
  color:#333;
  font-size:14px;
  display:flex;
  align-items:center;
  transition:0.3s;
}

.sidebar-icon{
  color:#0d6efd;
  margin-right:8px;
}

.sidebar-list a:hover{
  color:#0d6efd;
  transform:translateX(5px);
}

/* Comments */
.sidebar-comments{
  list-style:none;
  padding:0;
}

.sidebar-comments li{
  font-size:13px;
  margin-bottom:12px;
  color:#555;
}

.sidebar-comments i{
  color:#0d6efd;
  margin-right:6px;
}

.sidebar-comments a{
  text-decoration:none;
  color:#0d6efd;
}
.card{
   border:2px solid #0d6efd !important;
}
/* Mobile: move below blog section */
@media (max-width: 768px) {
  .social-bar {
    position: fixed;
    bottom: 0;             /* stick to bottom */
    left: 0;
    right: 0;
    top: auto;
    background: #fff;      /* optional background strip */
    padding: 8px 0;
    flex-direction: row;
    justify-content: center;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.1); /* small top shadow */
  }

  .social-bar a {
    margin: 0 6px;
  }
  .author-share-box {
    display: flex;
    flex-direction:column;
  }
}
.text-primary {
    text-decoration: none;
    color: #1062fe !important;
}
.author-share-box {
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 8px;
}

.author-img {
  width: 60px;
  height: 60px;
  border-radius: 30px !important;
  object-fit: cover;
}

.social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s;
}

.social-icon.facebook { background: #3b5998; }
.social-icon.twitter { background: #070707; }
.social-icon.linkedin { background: #0077b5; }
.social-icon.whatsapp { background: #25d366; }
.social-icon.share { background: #f57c00; }

.social-icon:hover {
  transform: scale(1.1);
  opacity: 0.9;
}
.author-share-box {
    background: #f3f9ff;
    border: 2px solid #0dcaf0;
}

.author-img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
}

.social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s;
}

.social-icon.facebook { background: #3b5998; }
.social-icon.twitter { background: #070707; }
.social-icon.linkedin { background: #0077b5; }
.social-icon.whatsapp { background: #25d366; }
.social-icon.share { background: #f57c00; }

.social-icon:hover {
  transform: scale(1.1);
  opacity: 0.9;
}
/* Right Sidebar Sticky */
.sticky-sidebar{
  position: sticky;
  top: 90px;   /* distance from top (header space) */
}
/* end ---------------------------------------------------------------------*/
.hero-caption {
  bottom: 20%;
}

.hero-caption h2 {
  font-size: 42px;
  font-weight: 700;
}

.service-card {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  transition: 0.3s;
}
.service-card:hover {
  transform: translateY(-5px);
}

.pill {
  padding: 12px 20px;
  background: #2F7288;
  color: #fff;
  border-radius: 30px;
  font-weight: 500;
}

.tech-badge {
  padding: 10px 18px;
  border: 1px solid #ccc;
  border-radius: 20px;
  font-weight: 500;
}

.why-box {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  font-weight: 500;
}

.cta-section {
  background: linear-gradient(135deg, #2F7288, #1b4f5f);
}

/* ----------------------------------- */
/* SECTION */
.testimonial-section{
  padding:40px 0;
  background:linear-gradient(135deg,#f8fbff,#eef6ff);
}

.testimonial-header h2{
  font-size:34px;
  font-weight:700;
  color:#0f172a;
}

.testimonial-header p{
  max-width:600px;
  margin:10px auto 40px;
  color:#555;
}

/* SLIDER */
.testimonial-slider{
  overflow:hidden;
}

.testimonial-track{
  display:flex;
  transition:transform 0.6s ease;
}

/* CARD WRAPPER */
.testimonial-card{
  min-width:100%;
  padding:20px;
  display:flex;
  justify-content:center;
}

/* MAIN CARD (REDUCED WIDTH) */
.testimonial-grid{
  width: 85%;
    /* max-width: 850px; */
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 25px;
    background: #126dc9;
    padding: 25px;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    align-items: center;
    transition: 0.3s ease;
    border: 2px solid #ffffff;
}

/* hover effect */
.testimonial-grid:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 35px rgba(0,0,0,0.12);
}

/* LEFT */
.testimonial-left{
  text-align:center;
  border-right:2px solid #eef2ff;
}

.testimonial-left img{
  width:180px;
  height:180px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid #ffffff;
}

.testimonial-left h3{
  margin-top:10px;
  font-size:18px;
  color:#fff;
}

.testimonial-left span{
  font-size:14px;
  color:#fff;
}

/* RIGHT */
.testimonial-right p{
  font-size:16px;
  color:#fff;
  line-height:1.8;
}

.rating{
  margin-top:10px;
  color:#f59e0b;
  font-size:18px;
}

/* DOTS */
.testimonial-dots{
  text-align:center;
  margin-top:25px;
}

.testimonial-dots .dot{
  width:12px;
  height:12px;
  display:inline-block;
  margin:5px;
  border-radius:50%;
  background:#0ea5e9;
  opacity:0.4;
  cursor:pointer;
}

.testimonial-dots .dot.active{
  opacity:1;
  background:#1e3a8a;
}

/* MOBILE */
@media(max-width:768px){
  .testimonial-grid{
    width:95%;
    grid-template-columns:1fr;
    text-align:center;
    display: block;
  }

  .testimonial-left{
    border-right:none;
    border-bottom:2px solid #eef2ff;
    padding-bottom:15px;
    margin-bottom:15px;
  }
}

/* brand section ------------------*/
/* =========================================
   BRAND IDENTITY SECTION
========================================= */
.brand-identity-section {
  background: #f8fbff;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* =========================================
   TOP CARD
========================================= */
.brand-card {
  background: linear-gradient(135deg, #126dc9, #0dcaf0);
  border-radius: 0;
  padding: 60px 60px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* Decorative Pattern */
.brand-card::before,
.brand-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgb(16 0 0 / 4%);
}

.brand-card::before {
  width: 250px;
  height: 250px;
  top: -80px;
  right: -80px;
}

.brand-card::after {
  width: 160px;
  height: 160px;
  bottom: -50px;
  left: -50px;
}

/* Label */
.brand-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: #f6b800;
  margin-bottom: 18px;
}

/* Title */
.brand-title {
  font-size: 40px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 20px;
  line-height: 1.1;
}

/* Description */
.brand-description {
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 820px;
  margin: 0 auto;
}

/* =========================================
   QUOTE CARD
========================================= */
.quote-card {
     background: #0dcaf01f;
    padding: 35px 40px;
    border-left: 4px solid #126dcb;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.quote-card p {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  font-style: italic;
  font-weight: 700;
  color: #0e6f3e;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 991px) {
  .brand-card {
    padding: 50px 30px;
  }

 
  
}

@media (max-width: 576px) {
  .brand-identity-section {
    padding: 60px 0;
  }

  .brand-card {
    padding: 40px 20px;
  }

  

  .quote-card {
    padding: 25px 20px;
  }

  .quote-card p {
    font-size: 17px;
  }
}
/* end */

/* =========================================
   SECTION BACKGROUND
========================================= */



/* =========================================
   IMAGE WRAPPER
========================================= */


.vision-image-wrapper img {
  max-width: 70%;

}


@media (max-width: 576px) {
  
  

  .vision-image-wrapper {
    padding: 12px;
    border-radius: 20px;
  }

  .vision-image-wrapper img {
    max-width: 100%;
  }

  
}




/* LEFT SIDE BRAND */
.brand-box{
  padding: 20px;
}

.brand-title{
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #0f172a;
}

.brand-sub{
  color: #64748b;
  font-size: 16px;
  margin-top: 10px;
}

/* RIGHT LIST */
.value-right-list{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.value-row{
  display: flex;
  align-items: center;
  gap: 15px;
  background: #126cc8ba;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.06);
  transition: 0.3s;
}

.value-row:hover{
  transform: translateX(6px);
}

.dot{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;

  /* NEW attractive style */
  background: linear-gradient(135deg, #00b3b3, #0052ff);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}

/* glossy light effect */
.dot::after{
  content: "";
  position: absolute;
  top: -20%;
  left: -20%;
  width: 60%;
  height: 60%;
  background: rgba(255,255,255,0.35);
  transform: rotate(25deg);
  border-radius: 50%;
}
.values-section .row{
  justify-content: center;
}
.value-row h5{
  margin: 0;
  font-weight: 700;
  color:#fff;
}

.value-row p{
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}
@media(max-width:768px){
  .dot{
  width: 55px;
  height: 55px;
  font-size:14px;
}
}

 
  /* =========================================
   OCTAGON SECTION
========================================= */
.octagon-section {
  position: relative;
 
  overflow: hidden;
  z-index: 1;
}

/* Fixed Watermark Background */
.octagon-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../img/octagon.png') center center no-repeat;
  background-size: 60%;
  background-attachment: fixed;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

/* Soft Gradient Overlay */
.octagon-section::after {
  content: "";
  position: absolute;
  inset: 0;
  
  z-index: -1;
}

/* =========================================
   CONTENT CARD
========================================= */
.octagon-content {
  position: relative;
 
}

/* Label */
.octagon-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #2f855a;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* Title */
.octagon-title {
  font-size: 58px;
  font-weight: 800;
  line-height: 1.1;
  color: #111827;
  margin-bottom: 25px;
}

/* Divider */
.octagon-divider {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #d4a017, transparent);
  margin-bottom: 35px;
  border-radius: 10px;
}

/* Paragraph */
.octagon-text {
  font-size: 22px;
  line-height: 1.9;
  color: #4b5563;
  margin-bottom: 22px;
}

/* Highlight Box */
.octagon-highlight {

  padding: 35px 35px 35px 30px;
  background: #ccdfff;
  border-left: 6px solid #136dc9;
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
}



/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 991px) {
  .octagon-content {
    padding: 50px 35px;
    border-radius: 24px;
  }

  .octagon-title {
    font-size: 42px;
  }

  .octagon-text,
  .octagon-highlight p {
    font-size: 18px;
  }

  .octagon-highlight h4 {
    font-size: 18px;
    letter-spacing: 3px;
  }
}

@media (max-width: 576px) {
  .octagon-section::before {
    background-size: 220px;
    background-attachment: scroll;
  }

  .octagon-content {
    padding: 35px 20px;
    border-radius: 20px;
  }

  .octagon-label {
    font-size: 11px;
    letter-spacing: 3px;
  }

  .octagon-title {
    font-size: 30px;
  }

  .octagon-text,
  .octagon-highlight p {
    font-size: 16px;
    line-height: 1.8;
  }

  .octagon-highlight {
    padding: 25px 20px;
  }

  .octagon-highlight h4 {
    font-size: 15px;
    letter-spacing: 2px;
  }
}
/* end --------------------- */


/* Top Header */
.top-box{
    background:#155b35;
    color:#fff;
    padding:35px 40px;
}

.mini-title{
    letter-spacing:8px;
    font-size:13px;
    font-weight:600;
    margin-bottom:15px;
}

.top-box h2{
    font-size:42px;
    font-weight:700;
    margin-bottom:10px;
}

.sub-text{
    font-size:22px;
    font-style:italic;
}

.sub-text span{
    border-bottom:2px solid #ff7b8a;
    padding-bottom:2px;
}

/* GRID */
.content-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
    padding:0px 40px 40px 0px;
}

/* CARD STYLE */
.info-card{
    position: relative;
    background: #ffffff;
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s;
    overflow: hidden;
}

/* accent bar */
.info-card::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
   background: linear-gradient(180deg, #126dc9, #248af1);
}

/* hover effect */
.info-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.info-card h4{
  
    font-size:22px;
    font-weight:700;
    margin-bottom:14px;
}

.info-card p{
    color:#555;
    line-height:1.9;
    font-size:16px;
    text-align:justify;
}

/* Quote */
.quote-box1{
    margin:0 40px 40px;
    background:#126dc9;
    
    padding:28px;
    text-align:center;
    border-radius:2px;
}

.quote-box1 h5{
    font-size:25px;
    font-style:italic;
    font-weight:600;
    line-height:1.5;
    color:#fff;
}

/* Responsive */
@media(max-width:768px){

    .top-box{
        padding:25px;
    }

    .top-box h2{
        font-size:30px;
    }

    .sub-text{
        font-size:18px;
    }

    .content-grid{
        grid-template-columns:1fr;
        gap:25px;
        padding:0px;
    }

    .info-card h3{
        font-size:20px;
    }

    .info-card p{
        font-size:16px;
    }

    .quote-box1{
        margin:0 25px 25px;
    }

    .quote-box1 h5{
        font-size:20px;
    }
}

/* quadrant section -------------------------------------*/

.quadrant-section .container{
    max-width:1200px;
    margin:auto;
}

/* Common Card Style */

.quad-card{
    padding:35px;
    min-height:340px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    border-radius:6px;
    position:relative;
    overflow:hidden;
    transition:0.4s ease;
    border:1px solid rgba(0,0,0,0.08);

    height:100%;
}

.quad-card::before{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
}

.quad-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 25px rgba(0,0,0,0.08);
}

/* Label */

.label{
    letter-spacing:6px;
    font-size:13px;
    font-weight:700;
    margin-bottom:18px;
    display:block;
}

/* Heading */

.quad-card h2{
    font-size:22px;
    margin-bottom:10px;
    font-weight:700;
    line-height:1.2;
}

.quad-card h4{
    font-size:18px;
    margin-bottom:25px;
    letter-spacing:2px;
    font-weight:600;
}

/* Paragraph */

.quad-card p{
    font-size:16px;
    line-height:1.8;
    color:#555;
}

/* Bottom */

.bottom-info{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:25px;
}

.bottom-info span{
    width:8px;
    height:8px;
    background:currentColor;
}

.bottom-info p{
    font-size:16px;
    font-weight:700;
    margin:0px;
}

/* GREEN */
.green-card{
    background:#eef5ef;
    color:#2E7D4F;
}
.green-card::before{
    background:#2E7D4F;
}

/* BLUE */
.blue-card{
    background:#eef5fd;
    color:#136ECB;
}
.blue-card::before{
    background:#136ECB;
}

/* AMBER */
.amber-card{
    background:#faf4df;
    color:#D4A017;
}
.amber-card::before{
    background:#D4A017;
}

/* SLATE */
.slate-card{
    background:#f1f3f6;
    color:#6B7B8D;
}
.slate-card::before{
    background:#6B7B8D;
}

/* RESPONSIVE */

@media(max-width:768px){

    .quad-card{
        min-height:auto;
        padding:25px;
    }

    .quad-card h2{
        font-size:28px;
    }

    .quad-card p{
        font-size:16px;
    }
}
/* end--------------------------- */

/* four card */

.core-values-section{
   
    padding:40px 0;
}

.core-values-section .container{
   
    margin:auto;
}

/* CARD */
.value-card{
    border:1px solid #d9d9d9;
    background:#ffffff;
    height:100%;
    box-shadow:0 4px 12px rgba(0,0,0,0.04);
    transition:0.3s ease;
}

.value-card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

/* TOP COLOR BLOCK */
.card-top{
    padding:34px 30px 28px;
    color:#ffffff;
    position:relative;
    min-height:220px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* BIG TITLE */
.card-top h2{
    font-size:48px;
    font-weight:800;
    line-height:1;
    margin-bottom:8px;
    font-family:"Times New Roman", serif;
}

/* MAIN HEADING */
.card-top h4{
    font-size:25px;
    font-weight:700;
    margin-bottom:10px;
    letter-spacing:0.5px;
}

/* SUBTITLE */
.card-top .tagline{
    font-size:22px;
    font-style:italic;
    opacity:0.95;
    margin:0;
    font-size: 18px;
    color: #fff;
}

/* BOTTOM INFO */
.card-bottom{
    background:#ffffff;
    padding:18px 30px;
    border-top:1px solid #e5e5e5;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.color-bar{
    width:18px;
    height:18px;
    border-radius:3px;
    flex-shrink:0;
}

.hex-code{
    font-weight:700;
    font-size:16px;
    color:#111827;
    margin:0;
}

.pantone{
    font-size:15px;
    color:#6b7280;
    margin:0;
}

/* UNIQUE LEFT ACCENT */
.value-card{
    position:relative;
    overflow:hidden;
}

.value-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:rgba(255,255,255,0.35);
    z-index:2;
}

/* CARD COLORS */
.pro-card .card-top{
    background:#6B7B8D;
}

.pro-card .color-bar{
    background:#6B7B8D;
}

.excel-card .card-top{
    background:#2E7D4F;
}

.excel-card .color-bar{
    background:#2E7D4F;
}

.integrity-card .card-top{
    background:#D4A017;
}

.integrity-card .color-bar{
    background:#D4A017;
}

.intelligence-card .card-top{
    background:#136ECB;
}

.intelligence-card .color-bar{
    background:#136ECB;
}

/* RESPONSIVE */
@media (max-width: 768px){

    .core-values-section{
        padding:40px 0;
    }

    .card-top{
        min-height:auto;
        padding:28px 22px;
    }

    .card-top h2{
        font-size:38px;
    }

    .card-top h4{
        font-size:24px;
    }

    .card-top .tagline{
        font-size:18px;
    }

    .card-bottom{
        padding:15px 22px;
    }
}




/* Section Heading */
.section-label{
    color:#2E7D4F;
    letter-spacing:6px;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:12px;
}

.section-title{
    font-size:24px;
    font-weight:800;
    color:#111827;
    margin-bottom:0;
    line-height:1.1;
}

/* Cards */
.info-card{
    background:#ffffff;
    border-radius:18px;
    padding:40px;
    height:100%;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    position:relative;
    overflow:hidden;
    transition:0.35s ease;
}

.info-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:100%;
    background:linear-gradient(180deg,#2E7D4F,#D4A017);
}

.info-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

.info-card p{
   
    line-height:1.9;
    color:#555;
    margin-bottom:0;
    text-align:justify;
}

/* Highlight */
.highlight-green{
    color:#2E7D4F;
    font-weight:700;
}

.highlight-gold{
    color:#D4A017;
    font-weight:700;
}

.highlight-blue{
    color:#136ECB;
    font-weight:700;
}

.highlight-slate{
    color:#6B7B8D;
    font-weight:700;
}

/* Responsive */
@media(max-width:768px){

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

    .section-title{
        font-size:36px;
    }

    .info-card{
        padding:28px;
    }

    .info-card p{
        font-size:17px;
        line-height:1.8;
    }

    .section-label{
        letter-spacing:4px;
        font-size:12px;
    }
}
/* end */


/* SECTION */
.brand-statement-section{
    padding:40px 0;
   
}

.brand-statement-section .container{
    max-width:1200px;
    margin:auto;
}

/* HEADER */
.brand-statement-header{
    text-align:center;
    margin-bottom:50px;
}

.brand-statement-label{
    display:inline-block;
    color:#2E7D4F;
    font-size:14px;
    font-weight:700;
    letter-spacing:6px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.brand-statement-title{
    font-size:52px;
    font-weight:800;
    color:#111827;
    margin-bottom:18px;
    line-height:1.1;
}

.brand-statement-subtitle{
    font-size:22px;
    line-height:1.8;
    color:#6b7280;
    max-width:900px;
    margin:auto;
}

/* CARD */
.brand-statement-card{
    background:#ffffff;
    border-radius:22px;
    padding:45px;
    box-shadow:0 12px 35px rgba(0,0,0,0.06);
    height:100%;
    position:relative;
    overflow:hidden;
    transition:0.35s ease;
}

.brand-statement-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:6px;
    height:100%;
    background:linear-gradient(180deg,#2E7D4F,#136ECB);
}

.brand-statement-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

/* CARD TITLE */
.brand-statement-card-title{
  
    font-weight:800;
    
    margin-bottom:18px;
    line-height:1.2;
}

/* TEXT */
.brand-statement-card p{
    
    line-height:1.9;
    color:#64748b;
    margin-bottom:22px;
    text-align:justify;
}

/* HIGHLIGHT QUOTE */
.brand-statement-highlight{
    background:#f8fafc;
    border-left:4px solid #2E7D4F;
    padding:22px 24px;
    border-radius:12px;
    font-size:18px;
    font-weight:700;
    line-height:1.6;
    color:#111827;
    margin-top:10px;
}

/* TEXT COLORS */
.brand-text-green{
    color:#2E7D4F;
    font-weight:700;
}

.brand-text-slate{
    color:#6B7B8D;
    font-weight:700;
}

.brand-text-gold{
    color:#D4A017;
    font-weight:700;
}

.brand-text-blue{
    color:#136ECB;
    font-weight:700;
}

/* RESPONSIVE */
@media(max-width:768px){

    .brand-statement-section{
        padding:50px 0;
    }

    .brand-statement-title{
        font-size:36px;
    }

    .brand-statement-subtitle{
        font-size:18px;
    }

    .brand-statement-card{
        padding:28px;
    }

    .brand-statement-card-title{
        font-size:28px;
    }

    .brand-statement-card p{
        font-size:17px;
        line-height:1.8;
    }

    .brand-statement-highlight{
        font-size:18px;
        padding:18px;
    }

    .brand-statement-label{
        font-size:12px;
        letter-spacing:4px;
    }
}

.contradiction-section{
    background:#d9e9ff;
    padding:40px 0;
    
}

.contradiction-section .container{
    max-width:1200px;
    margin:auto;
}

/* Left Intro Card */
.contradiction-intro{
    background: linear-gradient(135deg, #126cc8, #0b3969f5);
    color:#fff;
    border-radius:24px;
    padding:50px 45px;
    height:100%;
    position:relative;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(46,125,79,0.15);
}

.contradiction-intro::before{
    content:"";
    position:absolute;
    top:-60px;
    right:-60px;
    width:180px;
    height:180px;
    background:rgba(255,255,255,0.08);
    border-radius:50%;
}

.contradiction-label{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:5px;
    text-transform:uppercase;
    margin-bottom:20px;
    opacity:0.9;
}

.contradiction-title{
    font-size:32px;
    font-weight:800;
    line-height:1.15;
    margin-bottom:25px;
}

.contradiction-intro p{
    font-size:17px;
    line-height:1.9;
    margin-bottom:18px;
    color:rgba(255,255,255,0.92);
}

/* Right Content Card */
.contradiction-card{
    background:#ffffff;
    border-radius:24px;
    padding:45px;
    height:100%;
    box-shadow:0 15px 40px rgba(0,0,0,0.06);
    position:relative;
    overflow:hidden;
}

.contradiction-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:6px;
    height:100%;
    background:linear-gradient(180deg,#2E7D4F,#D4A017);
}

.contradiction-card h3{
    font-size:24px;
    font-weight:800;
    color:#111827;
    margin-bottom:22px;
}

.contradiction-card p{
    font-size:16px;
    line-height:1.9;
    color:#5b5b5b;
    margin-bottom:20px;
    text-align:justify;
}

.contradiction-card strong{
    color:#111827;
}

/* Highlight Quote */
.contradiction-quote{
    margin-top:30px;
    background:#f8fafc;
    border-left:4px solid #D4A017;
    border-radius:16px;
    padding:28px 30px;
    text-align:center;
}

.contradiction-quote p{
    margin:0;
    font-size:16px;
    line-height:1.8;
    
    font-weight:600;
}

.contradiction-quote .green-text{
    color:#126cc9;
    display:block;
    margin-bottom:8px;
}

.contradiction-quote .gold-text{
    color:#D4A017;
    display:block;
    
}

/* Responsive */
@media(max-width:768px){

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

    .contradiction-intro,
    .contradiction-card{
        padding:30px 25px;
    }

    .contradiction-title{
        font-size:34px;
    }

    .contradiction-card h3{
        font-size:24px;
    }

    .contradiction-quote p{
        font-size:18px;
    }
}

/* brand color */
.brand-colors-section{
    
    padding:50px 0;
    font-family:'Montserrat', sans-serif;
}

.brand-colors-section .container{
    max-width:1300px;
    margin:auto;
}

/* HEADER */
.brand-colors-header{
    margin-bottom:50px;
    text-align:center;
}

.brand-colors-label{
    color:#2E7D4F;
    font-size:14px;
    font-weight:700;
    letter-spacing:6px;
    text-transform:uppercase;
    display:block;
    margin-bottom:12px;
}

.brand-colors-title{
    font-size:54px;
    font-weight:800;
    color:#111827;
    margin-bottom:20px;
}

.brand-colors-subtitle{
    font-size:22px;
    line-height:1.8;
    color:#5b5b5b;
    max-width:1000px;
    margin:auto;
}

/* CARD */
.brand-color-card{
    background:#ffffff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,0.06);
    transition:0.35s ease;
    height:100%;
}

.brand-color-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

/* TOP */
.brand-color-top{
    padding:20px;
    color:#fff;
    position:relative;
}

.brand-color-top h3{
    font-size:26px;
    font-weight:800;
    margin-bottom:10px;
}

.brand-color-code{
    font-size:15px;
    letter-spacing:2px;
    opacity:0.9;
    margin-bottom:12px;
}

.brand-color-tags{
    font-size:16px;
    font-weight:600;
    line-height:1.8;
}

/* BODY */
.brand-color-body{
    padding:20px;
}

.brand-color-body p{
  
    line-height:1.9;
    color:#5b5b5b;
    margin-bottom:25px;
    text-align:justify;
}

/* TABLE */
.brand-color-table{
    width:100%;
    border-collapse:collapse;
}

.brand-color-table th{
    background:#f3f4f6;
    padding:14px;
    font-size:13px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:#6b7280;
}

.brand-color-table td{
    padding:14px;
    font-size:15px;
    font-weight:700;
    color:#111827;
    border:1px solid #e5e7eb;
}

/* CARD COLORS */
.steel-grey .brand-color-top{
    background:#6B7B8D;
}

.forest-green .brand-color-top{
    background:#2E7D4F;
}

.integrity-gold .brand-color-top{
    background:#D4A017;
}

.intelligence-blue .brand-color-top{
    background:#136ECB;
}

/* RESPONSIVE */
@media(max-width:768px){

    .brand-colors-section{
        padding:50px 0;
    }

    .brand-colors-title{
        font-size:38px;
    }

    .brand-colors-subtitle{
        font-size:18px;
    }

    .brand-color-top{
        padding:28px;
    }

    .brand-color-top h3{
        font-size:28px;
    }

    .brand-color-tags{
        font-size:17px;
    }

    .brand-color-body{
        padding:25px;
    }

    .brand-color-body p{
        font-size:16px;
    }

    .brand-color-table th,
    .brand-color-table td{
        font-size:12px;
        padding:10px;
    }
     .brand-color-table{
        width:100%;
        border-collapse:collapse;
    }

    .brand-color-table tbody{
        display:flex;
        flex-wrap:wrap;
        width:100%;
    }

    .brand-color-table tr{
        width:50%;
        display:flex;
        flex-direction:column;
    }

    .brand-color-table th,
    .brand-color-table td{
        width:100%;
        text-align:center;
        padding:12px 8px;
        border:1px solid #e5e7eb;
    }
    
}

/* end */

.quad-card1 {
    padding: 20px;
    /* min-height: 340px; */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transition: 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.08);
    height: 100%;
}
.quad-card1 h2 {
  font-size:22px;
}

/* fact card start */
.facet-section{
    padding:70px 0;
   
}

.facet-section .container{
   
    margin:auto;
}

/* CARD */
.facet-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:22px;
    padding:40px 25px;
    text-align:center;
    height:100%;
    position:relative;
    overflow:hidden;
    transition:0.35s ease;
    box-shadow:0 8px 25px rgba(0,0,0,0.04);
}

.facet-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,0.08);
}

/* TOP LINE */
.facet-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
}

/* NUMBER */
.facet-number{
    font-size:72px;
    font-weight:800;
    line-height:1;
    margin-bottom:18px;
}

/* TITLE */
.facet-title{
    font-size:20px;
    font-weight:800;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:12px;
    color:#374151;
}

/* SUBTEXT */
.facet-subtitle{
   
    color:#6b7280;
    line-height:1.7;
    margin-bottom:0;
}

/* GREY */
.grey-facet::before{
    background:#6B7B8D;
}
.grey-facet .facet-number{
    color:#6B7B8D;
}

/* GREEN */
.green-facet::before{
    background:#2E7D4F;
}
.green-facet .facet-number{
    color:#2E7D4F;
}

/* AMBER */
.amber-facet::before{
    background:#D4A017;
}
.amber-facet .facet-number{
    color:#D4A017;
}

/* BLUE */
.blue-facet::before{
    background:#136ECB;
}
.blue-facet .facet-number{
    color:#136ECB;
}

/* RESPONSIVE */
@media(max-width:768px){

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

    .facet-card{
        padding:30px 20px;
    }

    .facet-number{
        font-size:56px;
    }

    .facet-title{
        font-size:18px;
        letter-spacing:2px;
    }

    .facet-subtitle{
        font-size:15px;
    }
}
/* end */



.color-spec-section .container{
    max-width:1300px;
    margin:auto;
}

/* HEADER */
.color-spec-header{
    text-align:center;
    margin-bottom:55px;
}

.color-spec-label{
    display:inline-block;
    color:#2E7D4F;
    font-size:14px;
    font-weight:700;
    letter-spacing:6px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.color-spec-title{
    font-size:54px;
    font-weight:800;
    color:#111827;
    margin-bottom:20px;
}

.color-spec-subtitle{
    max-width:1050px;
    margin:auto;
    font-size:21px;
    line-height:1.9;
    color:#5b5b5b;
}

/* CARD */
.color-spec-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    height:100%;
    position:relative;
    transition:0.35s ease;
    box-shadow:0 12px 35px rgba(0,0,0,0.06);
}

.color-spec-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 45px rgba(0,0,0,0.10);
}

/* COLOR TOP */
.color-strip{
    height:140px;
    position:relative;
}

.color-strip::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom right,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0));
}

/* CONTENT */
.color-spec-content{
    padding:20px;
}

.color-spec-content h3{
    font-size:26px;
    font-weight:800;
    margin-bottom:15px;
    color:#111827;
}

/* SPEC ROW */
.spec-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px dashed #d1d5db;
}

.spec-row:last-child{
    border-bottom:none;
}

.spec-label{
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#6b7280;
}

.spec-value{
    font-size:17px;
    font-weight:700;
    color:#111827;
}

/* CARD COLORS */
.steel-grey{
    background:#6B7B8D;
}

.forest-green{
    background:#2E7D4F;
}

.gold-amber{
    background:#D4A017;
}

.royal-blue{
    background:#136ECB;
}

/* RESPONSIVE */
@media(max-width:768px){

    .color-spec-section{
        padding:50px 0;
    }

    .color-spec-title{
        font-size:38px;
    }

    .color-spec-subtitle{
        font-size:17px;
        line-height:1.8;
    }

    .color-strip{
        height:110px;
    }

    .color-spec-content{
        padding:20px;
    }

    .color-spec-content h3{
        font-size:24px;
    }

    .spec-label{
        font-size:16px;
    }

    .spec-value{
        font-size:16px;
    }
}
/* end */