@charset "utf-8";
/* CSS Document */

#cssmenu ul ul,#cssmenu ul ul ul{position:absolute;left:-9999px;z-index:1000}#cssmenu,#cssmenu #menu-button,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{margin:0 0 -2px;padding:0;border:0;list-style:none;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:150}#cssmenu:after,#cssmenu>ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}#cssmenu #menu-button,#cssmenu ul ul li.has-sub>a:before{display:none}#cssmenu>ul>li{float:left}#cssmenu.align-center>ul{font-size:0;text-align:center}#cssmenu.align-center>ul>li{display:inline-block;float:none}#cssmenu ul ul li.has-sub>a:after,#cssmenu ul ul li.has-sub>a:before{position:absolute;display:block;content:'\f105';font-family:FontAwesome}#cssmenu.align-center ul ul{text-align:left}#cssmenu.align-right>ul>li{float:right}#cssmenu>ul>li>a{text-decoration:none;transition:.5s}#cssmenu>ul>li:hover>a{transition:.5s}#cssmenu ul ul{margin-top:0}#cssmenu.align-right ul ul{text-align:right}#cssmenu ul ul li{transition:.25s;margin-bottom:11px;padding:0;width:200px;text-transform:capitalize!important;position:relative;height:30px}#cssmenu li:hover>ul{left:auto}#cssmenu.align-right li:hover>ul{left:auto;right:0}#cssmenu.align-right ul ul ul{margin-left:0;margin-right:100%}#cssmenu ul ul li.last-item>a,#cssmenu ul ul li:last-child>a{border-bottom:0}#cssmenu ul ul li.has-sub>a:after{top:16px;right:7px;width:8px;height:2px}#cssmenu>ul>li.has-sub>a{}#cssmenu>ul>li a{border:none}#cssmenu>ul ul li a{border:none;padding-bottom:10px!important}#cssmenu>ul>li a:hover{color:#08693f}#cssmenu>ul ul{margin-top:14px}#cssmenu>ul ul li a:hover{background:0 0;transition:.5s}#cssmenu ul{padding:0}#cssmenu ul ul{top:50px;opacity:0;-webkit-transition:opacity .3s,top .25s;-moz-transition:opacity .3s,top .25s;-ms-transition:opacity .3s,top .25s;-o-transition:opacity .3s,top .25s;transition:opacity .3s,top .25s}#cssmenu ul ul ul{margin-left:100%;top:0;opacity:1;-webkit-transition:opacity .3s,top .25s;-moz-transition:opacity .3s,top .25s;-ms-transition:opacity .3s,top .25s;-o-transition:opacity .3s,top .25s;transition:opacity .3s,top .25s;background:#492b2d;margin-top:0}#cssmenu>ul>li:hover>ul{left:auto;top:20px;opacity:1}#cssmenu ul ul li a{border-bottom:1px solid rgba(143,143,143,.5);border-bottom:none;padding:11px;text-transform:capitalize;font-size:12px;color:#fff;-webkit-transition:.35s;margin:0!important;-moz-transition:.35s;-ms-transition:.35s;-o-transition:.35s;transition:.35s}#cssmenu ul ul li.has-sub::after{right:10px;top:12px;-moz-transition:.2s;-ms-transition:.2s;-o-transition:.2s;transition:.2s;-webkit-transition:-webkit-transform .2s,right .2s}@media all and (max-width:900px){#cssmenu #menu-button,#cssmenu .submenu-button{position:absolute;right:0;display:block;cursor:pointer}#cssmenu,#cssmenu .submenu-button.submenu-opened{background:0 0}#cssmenu ul li a{color:#fff!important}#cssmenu .submenu-button.submenu-opened:before,#cssmenu ul,#cssmenu ul ul>li.has-sub>a:after,#cssmenu ul ul>li.has-sub>a:before,#cssmenu>ul>li.has-sub>a:after,#cssmenu>ul>li.has-sub>a:before{display:none}#cssmenu ul ul li{width:100%!important;margin-bottom:0}#cssmenu ul{width:100%;margin-top:0;padding:0 10px}#cssmenu.align-center>ul{text-align:left}#cssmenu ul li{width:100%}#cssmenu li:hover>ul>li,#cssmenu ul ul li{height:auto}#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}#cssmenu>ul>li{float:none;padding-bottom:17px!important;padding-top:8px}#cssmenu ul ul ul li a{padding-left:35px}#cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}#cssmenu #menu-button:after,#cssmenu #menu-button:before{right:8px;width:30px;content:'';position:absolute}#cssmenu #menu-button{padding:17px;color:#ddd;font-size:12px;text-transform:uppercase;font-weight:700;width:46px;border-radius:4px}#cssmenu #menu-button:after{top:16px;display:block;height:8px;border-top:2px solid #ddd;border-bottom:2px solid #ddd}#cssmenu #menu-button:before{top:10px;display:block;height:2px;background:#ddd}#cssmenu ul ul .submenu-button{height:34px;width:34px}#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;content:''}#cssmenu ul ul .submenu-button:after{top:15px;right:13px}#cssmenu .submenu-button.submenu-opened:after{content:'\f068';font-family:FontAwesome;color:#fff}#cssmenu .submenu-button:before{position:absolute;top:19px;right:19px;display:block;height:8px;content:'\f067';font-family:FontAwesome;color:#fff}#cssmenu ul ul .submenu-button:before{top:12px;right:16px}#cssmenu .submenu-button::after,#cssmenu .submenu-button::before{top:11px}#cssmenu,#cssmenu #menu-button,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{z-index:auto}#cssmenu{position:fixed;z-index:160;right:15px;width:91.5%;border-radius:2px}ul.socialMedia{float:left}#cssmenu>ul>li>a{padding-bottom:15px}#cssmenu ul ul{padding:0;opacity:1}#cssmenu ul ul li a{background:0 0;font-size:12px;padding-bottom:5px;padding-left:20px!important}#cssmenu .submenu-button{z-index:99;top:0;height:38px;border:none}#cssmenu>ul ul{top:0;margin-top:0}}@media (min-width:768px) and (max-width:1024px){.sliderC{margin-top:0}#cssmenu #menu-button{right:14px}.addressBox{height:120px}@media (min-width:603px) and (max-width:966px){#cssmenu>ul>li a{padding:10px 13px!important}.addressBox h6{font-size:13px}}}@media (max-width:760px){#cssmenu .submenu-button{width:50px}#cssmenu ul ul{background:#404040!important;top:0!important}#cssmenu ul ul li{width:100%!important}.spcificHeight{height:400px!important;overflow-y:scroll!important}#cssmenu>ul>li{padding:0;padding-bottom:0!important}#cssmenu>ul>li a{padding:10px!important}#cssmenu #menu-button{background:#dadada;border:1px solid #fff}#cssmenu #menu-button::before{background:#7b8284}#cssmenu #menu-button::after{border-bottom:2px solid #7b8284;border-top:2px solid #7b8284}}







body{margin:0px 0px; padding:0px 0px;   font-family: "Inter", sans-serif;
}
header{ top:0; left:0; right:0; margin:0px auto;   z-index:50; background:#fff;}
.logo{overflow:hidden; margin:16px 0px;}
.logo img{ max-width:100%;}
 
#cssmenu{   padding:0px 0px 0px; float:right; 
  }

#cssmenu > ul > li{font-size:15px;   margin-left:30px; font-weight:bold;
}
#cssmenu > ul > li:first-child{ margin-left:0px;}

#cssmenu > ul > li:first-child{ padding-left:0px;}
#cssmenu > ul > li a{       padding: 10px 0px 15px 0px; color:#000; position:relative; text-transform:uppercase; font-size:14px; font-weight:bold }




#cssmenu > ul ul li a{ background:none;}
#cssmenu > ul > li.has-sub > a{ }

#cssmenu > ul > li a:hover{ color:#066ab3;}
#cssmenu > ul > li a.active{ color:#000!important;}

#cssmenu > ul ul li { font-size:12px; text-transform:capitalize;}



#cssmenu > ul > li a.active{  }



#cssmenu{  }


#cssmenu > ul > li > a{
    padding:10px 0 15px;
    position:relative;

    font-size:14px;
    font-weight:700;
    text-transform:uppercase;

    color:#000;

    transition:0.35s ease;
}

/* hover */

#cssmenu > ul > li:hover > a{
    color:#7a96a8;
}

/* active menu */

#cssmenu > ul > li.active > a{
    color:#7a96a8;
}

/* modern underline effect */

#cssmenu > ul > li > a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:0;
    height:2px;

    border-radius:10px;

    background:
    linear-gradient(
    90deg,
    #7a96a8,
    #5f7888);

    transition:0.35s ease;
}

/* hover underline */

#cssmenu > ul > li:hover > a::after{
    width:100%;
}

/* active underline */

#cssmenu > ul > li.active > a::after{
    width:100%;
}


#cssmenu > ul ul li a{ border-bottom:1px solid #05312c;}

/* =========================================
   SUB MENU
========================================= */

#cssmenu > ul ul{
    background:#0d2b45;

    min-width:260px;

    border-radius:5px;

    overflow:hidden;

    box-shadow:
    0 20px 50px rgba(0,0,0,.20);

    border-top:3px solid #7b96a9;
}

/* menu items */

#cssmenu > ul ul li{
    border-bottom:
    1px solid rgba(255,255,255,.08);
}

#cssmenu > ul ul li:last-child{
    border-bottom:none;
}

/* links */

#cssmenu > ul ul a{
    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    padding:14px 25px;

    transition:.35s ease;

    position:relative;
}

/* left indicator */

#cssmenu > ul ul a:before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:3px;
    height:100%;

    background:#7b96a9;

    opacity:0;

    transition:.3s;
}

/* hover */

#cssmenu > ul ul li:hover > a{
    background:
    linear-gradient(
    90deg,
    rgba(123,150,169,.15),
    transparent);

    color:#ffffff;

    padding-left:32px;
}

#cssmenu > ul ul li:hover > a:before{
    opacity:1;
}


/* =========================================
   MODERN TOP BAR
========================================= */

.modern-top-bar{
  position:relative;
  z-index:99;

  background:
  linear-gradient(
  135deg,
  #0f172a 0%,
  #111827 100%);

  overflow:hidden;
}

/* subtle glow */

.modern-top-bar::before{
  content:"";

  position:absolute;

  width:300px;
  height:300px;

  background:
  radial-gradient(
  rgba(122,150,168,0.15),
  transparent 70%);

  top:-180px;
  right:-100px;

  pointer-events:none;
}

/* wrapper */

.topbar-wrapper{
  min-height:60px;

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

  position:relative;
  z-index:2;
}

/* left contact */

.topbar-contact{
  display:flex;
  align-items:center;
  gap:28px;
}

.topbar-contact a{
  display:flex;
  align-items:center;
  gap:10px;

  color:rgba(255,255,255,0.88);

  text-decoration:none;

  font-size:14px;
  font-weight:500;

  transition:0.35s ease;
}

.topbar-contact a i{
  width:34px;
  height:34px;

  border-radius:50%;

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

  background:
  rgba(255,255,255,0.08);

  color:#cbd5e1;

  font-size:13px;

  transition:0.35s ease;
}

.topbar-contact a:hover{
  color:#ffffff;
}

.topbar-contact a:hover i{
  background:#7a96a8;
  color:#fff;

  transform:translateY(-2px);
}

/* right section */

.topbar-right{
  display:flex;
  align-items:center;
  gap:18px;
}

/* social icons */

.topbar-social{
  display:flex;
  align-items:center;
  gap:10px;
}

.topbar-social a{
  width:38px;
  height:38px;

  border-radius:50%;

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

  text-decoration:none;

  background:
  rgba(255,255,255,0.06);

  border:
  1px solid rgba(255,255,255,0.08);

  color:#ffffff;

  font-size:14px;

  transition:0.35s ease;
}

.topbar-social a:hover{
  transform:translateY(-3px);

  background:#7a96a8;
}

/* button */

.topbar-btn{
  position:relative;

  display:inline-flex;
  align-items:center;
  gap:12px;

  padding:12px 22px;

  border-radius:60px;

  overflow:hidden;

  text-decoration:none;

  background:
  linear-gradient(
  135deg,
  #7a96a8,
  #5f7888);

  color:#fff;

  font-size:14px;
  font-weight:600;

  transition:0.4s ease;

  box-shadow:
  0 10px 30px rgba(122,150,168,0.25);
}

.topbar-btn::before{
  content:"";

  position:absolute;
  inset:0;

  background:
  linear-gradient(
  135deg,
  rgba(255,255,255,0.18),
  transparent);

  opacity:0;

  transition:0.4s ease;
}

.topbar-btn i{
  font-size:13px;
  transition:0.35s ease;
}

.topbar-btn:hover{
  transform:translateY(-2px);
  color:#fff;
}

.topbar-btn:hover::before{
  opacity:1;
}

.topbar-btn:hover i{
  transform:translateX(4px);
}

/* responsive */

@media(max-width:991px){

  .topbar-wrapper{
    flex-direction:column;
    gap:15px;

    padding:15px 0;
  }

}

@media(max-width:768px){

  .topbar-contact{
    flex-direction:column;
    gap:12px;
  }

  .topbar-right{
    flex-direction:column;
  }

}


/* HEADER */
.main-header {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 999;
}

/* LOGO */
.logo img {
  max-height: 60px;
}


/* MENU */
.menu li {
  margin-left: 25px;
}

.menu li a {
  text-decoration: none;
  color: #222;
  font-weight: 500;
  font-size: 15px;
  transition: 0.3s;
}

.menu li a:hover,
.menu li a.active {
  color: #c59d5f;
}

/* MOBILE MENU */
.menu-toggle {
  font-size: 22px;
  cursor: pointer;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .menu {
    display: none;
    background: #fff;
    position: absolute;
    top: 70px;
    right: 0;
    width: 100%;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
  }

  .menu li {
    margin: 10px 0;
  }
}


/* =========================
   HERO SLIDER BASE
========================= */

.hero-slider {
  position: relative;
}

/* SLIDE SIZE */
.hero-slider #dentalCarousel .carousel-item {
  height: 90vh;
  min-height: 500px;
  position: relative;
}

.hero-slider #dentalCarousel .carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* OVERLAY (LIGHT for BLACK TEXT) */
.hero-slider #dentalCarousel .carousel-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.6) 40%,
    rgba(255,255,255,0.1) 100%
  );
}

/* =========================
   CAPTION STYLE (BOLD)
========================= */

.hero-slider .custom-caption {
  left: 8%;
  right: auto;
  bottom: 50%;
  transform: translateY(50%);
  max-width: 600px;
  text-align: left;
}

/* MAIN TITLE */
.hero-slider .hero-title {
  font-size: 64px;
  font-weight: 900;
  color: #000;
  line-height: 1.1;
  margin-bottom: 10px;
}

/* SUBTITLE */
.hero-slider .hero-subtitle {
  font-size: 28px;
  font-weight: 700;
  color: #000;
  margin-bottom: 15px;
}

/* HIGHLIGHT TEXT */
.hero-slider .hero-highlight {
  display: table;
  background: #7b96a9;
  color: #fff;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 20px;
}

/* BUTTON */
.hero-slider .hero-btn {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 12px 28px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

.hero-slider .hero-btn:hover {
  background: #7b96a9;
  color: #fff;
}

/* =========================
   ANIMATION
========================= */

.hero-slider .carousel-item.active .hero-title {
  animation: fadeUp 0.6s ease;
}

.hero-slider .carousel-item.active .hero-subtitle {
  animation: fadeUp 0.8s ease;
}

.hero-slider .carousel-item.active .hero-highlight {
  animation: fadeUp 1s ease;
}

.hero-slider .carousel-item.active .hero-btn {
  animation: fadeUp 1.2s ease;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   INDICATORS
========================= */

.hero-slider .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #7b96a9;
  opacity: 0.5;
}

.hero-slider .carousel-indicators .active {
  opacity: 1;
  background-color: #000;
}

/* =========================
   CONTROLS
========================= */

.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon {
  filter: invert(1);
}

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

@media (max-width: 992px) {
  .hero-slider .hero-title {
    font-size: 42px;
  }

  .hero-slider .hero-subtitle {
    font-size: 22px;
  }
}

@media (max-width: 768px) {
  .hero-slider .custom-caption {
    left: 5%;
    right: 5%;
    transform: translateY(40%);
  }

  .hero-slider .hero-title {
    font-size: 32px;
  }

  .hero-slider .hero-subtitle {
    font-size: 18px;
  }

  .hero-slider .hero-highlight {
    font-size: 13px;
  }
}




.section-about {
  padding: 80px 0;
  background-color: #f5f5f5;
}

/* Layout */
.section-about__image-wrapper {
  position: relative;
  padding-right: 50px;
}

.section-about__main-img {
  width: 100%;
  border-radius: 6px;
  animation: floatMove 6s ease-in-out infinite;
}

.section-about__overlay-img {
  position: absolute;
  bottom: -94px;
  right: 15px;
  width: 49%;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  animation: floatMove 5s ease-in-out infinite;
}

/* Hover */
.section-about__image-wrapper:hover .section-about__main-img {
  transform: scale(1.05);
}

.section-about__image-wrapper:hover .section-about__overlay-img {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* Content */
/* Year Block Container */
.section-about__year-block {
  position: relative;
  display: inline-block;
  padding: 15px 25px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(123, 150, 169, 0.08);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: 0.4s ease;
  animation: glowPulse 3s infinite; margin-bottom:30px;
}

/* Gradient border (brand color only) */
.section-about__year-block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, #7b96a9, #a9bcc9);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Hover lift */
.section-about__year-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(123,150,169,0.25);
}

/* Year Number */
.section-about__year {
  font-size: 64px;
  font-weight: 800;
  background: linear-gradient(135deg, #7b96a9, #a9bcc9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

/* Text */
.section-about__since {
  font-size: 13px;
  letter-spacing: 2px;
  color: #7b96a9;
  margin-top: 5px;
}

/* Glow Animation (brand color) */
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 rgba(123,150,169,0.2); }
  50% { box-shadow: 0 0 20px rgba(123,150,169,0.3); }
  100% { box-shadow: 0 0 0 rgba(123,150,169,0.2); }
}

.section-about__tagline {
  text-transform: uppercase;
  font-weight: 600;margin-top: 0px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 4px;
  color: transparent;
  -webkit-text-stroke: 1px #000;
}


.section-about__title {
  font-size: 32px;
  font-weight: 800;
  color: #0b132b;
}

.section-about__description { margin-bottom:30px;
  color: #6c757d;
  line-height: 1.7; font-size:14px;
}

.section-about__hours {
  margin-bottom: 20px;
}

.section-about__btn {
  display: inline-block;
  position: relative;
  padding: 14px 28px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  background: linear-gradient(135deg, #2f80ed, #56ccf2);
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 10px 25px rgba(47,128,237,0.3);
}

/* Hover lift */
.section-about__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(47,128,237,0.4);
}

/* Shine effect */
.section-about__btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.3);
  transform: skewX(-25deg);
  transition: 0.6s;
}

/* Shine animation on hover */
.section-about__btn:hover::before {
  left: 130%;
}

/* Click effect */
.section-about__btn:active {
  transform: scale(0.97);
}
/* Floating Animation */
@keyframes floatMove {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}




.section-about{
    position:relative;
    padding:120px 0;
    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbfd 100%);
    overflow:hidden;
}

.section-about:before{
    content:"";

    position:absolute;

    width:400px;
    height:400px;

    background:
    radial-gradient(
    rgba(123,150,169,.12),
    transparent);

    top:-150px;
    right:-100px;

    border-radius:50%;
}

.section-about__image-wrapper{
    position:relative;
    padding-right:70px;
}

.section-about__main-img{
    border-radius:25px;

    box-shadow:
    0 25px 60px rgba(13,43,69,.12);

    transition:.5s;
}

.section-about__overlay-img{
    border:8px solid #fff;

    border-radius:20px;

    box-shadow:
    0 20px 50px rgba(13,43,69,.15);
}

.section-about__image-wrapper:before{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:#7b96a9;

    opacity:.15;

    border-radius:30px;

    top:-30px;
    left:-30px;

    z-index:0;
}

.section-about__tagline{
    font-size:14px;
    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    color:#7b96a9;

    margin-bottom:15px;

    -webkit-text-stroke:0;
}
.section-about__description{
    color:#5f7888;

    line-height:2;

    font-size:16px;

    margin-bottom:35px;
}
.section-about__title{
    font-size:48px;
    line-height:1.2;

    font-weight:800;

    color:#0d2b45;

    margin-bottom:25px;
}

.section-about__btn{
    display:inline-flex;

    align-items:center;
    gap:10px;

    padding:16px 32px;

    border-radius:60px;

    background:
    linear-gradient(
    135deg,
    #0d2b45,
    #163b58);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

    box-shadow:
    0 15px 35px rgba(13,43,69,.25);
}

.section-about__btn:hover{
    transform:translateY(-5px);

    color:#fff;

    box-shadow:
    0 20px 45px rgba(13,43,69,.35);
}



/* =========================================
   PREMIUM YEAR BADGE
========================================= */

.section-about__year-badge{
    display:flex;
    align-items:center;
    gap:20px;

    width:max-content;

    padding:15px 25px;

    background:#fff;

    border-radius:100px;

    box-shadow:
    0 15px 40px rgba(13,43,69,.08);

    position:relative;

    overflow:hidden;

    margin-bottom:30px;

    transition:.4s;
}

/* shine effect */

.section-about__year-badge:before{
    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:60%;
    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.6),
    transparent);

    transition:.8s;
}

.section-about__year-badge:hover:before{
    left:130%;
}

.section-about__year-badge:hover{
    transform:translateY(-5px);

    box-shadow:
    0 25px 60px rgba(13,43,69,.15);
}

/* =========================================
   CIRCLE
========================================= */

.year-ring{
    width:90px;
    height:90px;

    border-radius:50%;

    background:
    conic-gradient(
    #7b96a9 0deg,
    #0d2b45 220deg,
    #7b96a9 360deg);

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

    animation:rotateRing 8s linear infinite;
}

.year-ring-inner{
    width:74px;
    height:74px;

    background:#fff;

    border-radius:50%;

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

.year-number{
    font-size:22px;
    font-weight:800;

    color:#0d2b45;
}

/* =========================================
   TEXT
========================================= */

.year-content{
    line-height:1.3;
}

.year-label{
    display:block;

    color:#7b96a9;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:5px;
}

.year-content h5{
    margin:0;

    font-size:18px;
    font-weight:700;

    color:#0d2b45;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes rotateRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.year-ring-inner i{
    font-size:26px;
    color:#0d2b45;
}.year-ring-inner i{
    font-size:26px;
    color:#0d2b45;
}

/*SERVICES*/

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


/* =========================
   BACKGROUND ANIMATION
========================= */
.dental-services::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(123,150,169,0.15);
  border-radius: 50%;
  top: -100px;
  left: -100px;
  animation: float 6s ease-in-out infinite;
}

.dental-services::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: rgba(123,150,169,0.1);
  border-radius: 50%;
  bottom: -100px;
  right: -100px;
  animation: float 8s ease-in-out infinite;
}

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


/* =========================
   ICON ANIMATION
========================= */
.service-box__icon {
  transition: 0.4s;
}

.service-box:hover .service-box__icon {
  transform: rotate(10deg) scale(1.1);
}

/* Pulse effect */
.service-box__icon i {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}


/* =========================
   BUTTON ANIMATION
========================= */
.service-box__btn i {
  transition: 0.3s;
}

.service-box__btn:hover i {
  transform: translateX(5px);
}


/* =========================
   CARD HOVER ENHANCE
========================= */
.service-box:hover {
  transform: translateY(-12px) scale(1.02);
}


/* =========================
   FEATURE ICON HOVER
========================= */
.feature-icon {
  transition: 0.3s;
}

.feature-item:hover .feature-icon {
  background: #7b96a9;
  color: #fff;
  transform: rotate(8deg) scale(1.1);
}


.dental-services {
  background: radial-gradient(circle at top left, #0d2b45, #061a2d);
  color: #fff;
  padding: 80px 0;
  position: relative; overflow:hidden;
}

/* TAG */
.dental-services__tag {
  color: #7b96a9;
  font-size: 14px;
  margin-bottom: 10px;
}

/* TITLE */
.dental-services__title {
  font-size: 44px;
  font-weight: 800;
  margin-bottom: 15px;
}

/* DIVIDER */
.dental-services__divider {
  width: 80px;
  height: 2px;
  background: #7b96a9;
  margin: 0 auto 40px;
}

/* =========================
   CARD
========================= */

.service-box {
  background: rgba(255,255,255,0.05);
  border-radius: 20px;
  padding: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(123,150,169,0.3);
  transition: 0.4s;
  position: relative;
}

/* HOVER */
.service-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* IMAGE */
.service-box__img img {
  width: 100%;
  border-radius: 15px;
}

/* ICON */
.service-box__icon {
  width: 60px;
  height: 60px;
  background: #fff;
  color: #0d2b45;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -30px auto 15px;
  font-size: 24px; position:relative; z-index:25;
}

/* TITLE */
.service-box__title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* DESC */
.service-box__desc {
  font-size: 14px;
  color: #cfd8dc;
  margin-bottom: 20px;
}

/* BUTTON */
.service-box__btn {
  display: inline-block;
  border: 1px solid #7b96a9;
  padding: 10px 20px;
  border-radius: 30px;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.service-box__btn:hover {
  background: #7b96a9;
}

/* =========================
   FEATURES
========================= */
.feature-item{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:20px;
}

.feature-icon{
  min-width:50px;
  width:50px;
  height:50px;

  border:1px solid #7b96a9;
  border-radius:50%;

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

  flex-shrink:0; overflow:hidden;padding:8px;
}
.feature-icon img{ width:90%;}
.feature-item h5 {
  font-size: 16px;
  margin-bottom: 5px;
}

.feature-item p {
  font-size: 13px;
  color: #cfd8dc;
}





/* =========================
   BACKGROUND MEDICAL ANIMATION
========================= */
.dental-services {
  position: relative;
  overflow: hidden;
}

/* floating medical circles */
.dental-services::before,
.dental-services::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(123,150,169,0.08);
  animation: floatMove 18s linear infinite;
}

.dental-services::before {
  width: 300px;
  height: 300px;
  top: -80px;
  left: -80px;
}

.dental-services::after {
  width: 250px;
  height: 250px;
  bottom: -80px;
  right: -80px;
  animation-duration: 22s;
}



/* =========================
   LIGHT GRID (MEDICAL FEEL)
========================= */
.dental-services::marker { display:none; }

.dental-services::after {
  box-shadow: 
    0 0 0 1px rgba(255,255,255,0.02),
    inset 0 0 60px rgba(255,255,255,0.02);
}


/* =========================
   CARD HOVER - PREMIUM LIFT
========================= */
.service-box {
  transition: all 0.4s ease;
}

.service-box:hover {
  transform: translateY(-12px) scale(1.01);
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}


/* =========================
   IMAGE HOVER - DEPTH EFFECT
========================= */
.service-box__img {
  overflow: hidden;
  position: relative;
}

.service-box__img img {
  transition: 0.6s ease;
}

.service-box:hover .service-box__img img {
  transform: scale(1.08);
}

/* soft overlay */
.service-box__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,26,45,0.6), transparent);
  opacity: 0;
  transition: 0.4s;
}

.service-box:hover .service-box__img::after {
  opacity: 1;
}


/* =========================
   ICON - SOFT FLOAT ANIMATION
========================= */
.service-box__icon {
  animation: iconFloat 4s ease-in-out infinite;
  transition: 0.4s;
}

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

/* hover accent */
.service-box:hover .service-box__icon {
  transform: translateY(-10px) scale(1.1);
  box-shadow: 0 10px 25px rgba(123,150,169,0.4);
}


/* =========================
   BUTTON - SLIDE EFFECT
========================= */
.service-box__btn {
  position: relative;
  overflow: hidden;
}

.service-box__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #7b96a9;
  transform: translateX(-100%);
  transition: 0.4s;
  z-index: -1;
}

.service-box__btn:hover::after {
  transform: translateX(0);
}

.service-box__btn:hover {
  color: #061a2d;
}


/* =========================
   FEATURE ICON - PULSE
========================= */
.feature-icon {
  transition: 0.3s;
}

.feature-item:hover .feature-icon {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(123,150,169,0.4);
}


/* =========================
   TITLE - FADE IN LINE
========================= */
.service-box__title::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #7b96a9;
  margin-top: 5px;
  transition: 0.4s;
}

.service-box:hover .service-box__title::after {
  width: 40px;
}



/* =====================================================
 FAQ SECTION
 */

.dental-faq{
  position:relative;
  padding:120px 0;
  overflow:hidden;
  isolation:isolate;
  background:#fffafa;
}

/* =====================================================
   SOFT GLOW BACKGROUND
===================================================== */

.dental-faq::before{
  content:"";
  position:absolute;
  width:650px;
  height:650px;
  border-radius:50%;
  background:
  radial-gradient(circle,
  rgba(255,190,185,0.35) 0%,
  rgba(255,236,235,0.08) 60%,
  transparent 75%);
  top:-250px;
  left:-180px;
  animation:faqGlowMove1 18s ease-in-out infinite;
  z-index:-2;
}

.dental-faq::after{
  content:"";
  position:absolute;
  width:550px;
  height:550px;
  border-radius:50%;
  background:
  radial-gradient(circle,
  rgba(255,220,218,0.55) 0%,
  rgba(255,255,255,0.05) 70%);
  bottom:-180px;
  right:-150px;
  animation:faqGlowMove2 22s ease-in-out infinite;
  z-index:-2;
}

/* =====================================================
   ANIMATED GRID
===================================================== */

.faq-mesh{
  position:absolute;
  inset:0;
  background-image:
  linear-gradient(rgba(214,152,146,0.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(214,152,146,0.06) 1px, transparent 1px);
  background-size:50px 50px;
  animation:faqGridMove 25s linear infinite;
  z-index:-3;
}

/* =====================================================
   FLOATING BLUR BALLS
===================================================== */

.faq-ball{
  position:absolute;
  border-radius:50%;
  filter:blur(10px);
  animation:faqBallFloat 14s ease-in-out infinite;
  z-index:-1;
}

.ball-1{
  width:130px;
  height:130px;
  background:rgba(255,175,170,0.35);
  top:12%;
  left:8%;
}

.ball-2{
  width:90px;
  height:90px;
  background:rgba(255,205,201,0.5);
  top:65%;
  right:10%;
  animation-delay:3s;
}

.ball-3{
  width:60px;
  height:60px;
  background:rgba(255,255,255,0.7);
  bottom:18%;
  left:35%;
  animation-delay:5s;
}

/* =====================================================
   TAG
===================================================== */

.faq-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 24px;
  border-radius:60px;
  background:rgba(255,255,255,0.7);
  border:1px solid rgba(255,190,185,0.35);
  backdrop-filter:blur(10px);
  color:#cc7f79;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:25px;
  box-shadow:0 10px 30px rgba(255,190,185,0.12);
}

/* =====================================================
   TITLE
===================================================== */

.faq-title{
  font-size:56px;
  font-weight:900;
  line-height:1.1;
  color:#2a2a2a;
  margin-bottom:20px;
}

.faq-title span{
  background:
  linear-gradient(135deg,#ff9d97,#d86c63);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =====================================================
   DIVIDER
===================================================== */

.faq-divider{
  width:110px;
  height:4px;
  margin:25px auto 0;
  border-radius:20px;
  overflow:hidden;
  background:
  linear-gradient(90deg,#ffb5af,#d86c63);
  position:relative;
}

.faq-divider::before{
  content:"";
  position:absolute;
  width:40px;
  height:100%;
  background:#fff;
  animation:faqDividerMove 2s linear infinite;
}

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

.faq-image{
  position:relative;
  border-radius:30px;
}

.faq-image img{
  width:100%;
  border-radius:30px;
  transition:0.6s ease;
  box-shadow:0 30px 60px rgba(0,0,0,0.08);
}

.faq-image:hover img{
  transform:scale(1.04) rotate(-1deg);
}

/* glow border */
.faq-image::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:32px;
  background:
  linear-gradient(135deg,
  rgba(255,190,185,0.5),
  rgba(255,255,255,0.6),
  transparent);
  z-index:-1;
}

/* =====================================================
   ACCORDION
===================================================== */

.faq-accordion .accordion-item{
  border:none;
  margin-bottom:22px;
  overflow:hidden;
  border-radius:24px !important;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,190,185,0.22);
  transition:0.4s ease;
  box-shadow:0 15px 40px rgba(0,0,0,0.04);
  position:relative;
}

/* left glow line */
.faq-accordion .accordion-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:5px;
  height:100%;
  background:
  linear-gradient(#ffb5af,#d86c63);
  opacity:0;
  transition:0.4s;
}

.faq-accordion .accordion-item:hover::before{
  opacity:1;
}

/* hover */
.faq-accordion .accordion-item:hover{
  transform:translateY(-6px);
  box-shadow:
  0 25px 60px rgba(255,180,175,0.18);
}

/* =====================================================
   BUTTON
===================================================== */

.faq-accordion .accordion-button{
  background:transparent !important;
  color:#2a2a2a;
  font-size:19px;
  font-weight:700;
  padding:28px;
  box-shadow:none !important;
  position:relative;
  overflow:hidden;
}

/* shine effect */
.faq-accordion .accordion-button::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  background:
  linear-gradient(
  90deg,
  transparent,
  rgba(255,255,255,0.6),
  transparent);
  transform:skewX(-25deg);
  transition:0.9s;
}

.faq-accordion .accordion-item:hover
.accordion-button::before{
  left:130%;
}

/* ACTIVE */
.faq-accordion .accordion-button:not(.collapsed){
  background:
  linear-gradient(135deg,
  rgba(255,190,185,0.18),
  rgba(255,255,255,0.5)) !important;
  color:#d86c63;
}

/* =====================================================
   BODY
===================================================== */

.faq-accordion .accordion-body{
  padding:0 28px 28px;
  color:#6f6f6f;
  line-height:1.9;
  font-size:15px;
}

/* icon */
.faq-accordion .accordion-button::after{
  transform:scale(1.1);
  filter:hue-rotate(-10deg);
}

/* =====================================================
   FLOATING ICONS
===================================================== */

.faq-floating-icon{
  position:absolute;
  color:rgba(216,108,99,0.08);
  z-index:-1;
  animation:faqIconFloat 10s ease-in-out infinite;
}

.faq-icon-1{
  font-size:90px;
  top:10%;
  left:5%;
}

.faq-icon-2{
  font-size:70px;
  right:10%;
  top:28%;
  animation-delay:2s;
}

.faq-icon-3{
  font-size:110px;
  bottom:10%;
  left:40%;
  animation-delay:4s;
}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes faqGlowMove1{
  0%,100%{
    transform:translate(0,0);
  }
  50%{
    transform:translate(50px,30px);
  }
}

@keyframes faqGlowMove2{
  0%,100%{
    transform:translate(0,0);
  }
  50%{
    transform:translate(-40px,-30px);
  }
}

@keyframes faqGridMove{
  0%{
    transform:translateY(0);
  }
  100%{
    transform:translateY(50px);
  }
}

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

@keyframes faqDividerMove{
  0%{
    transform:translateX(-40px);
  }
  100%{
    transform:translateX(120px);
  }
}

@keyframes faqIconFloat{
  0%,100%{
    transform:translateY(0px) rotate(0deg);
  }
  50%{
    transform:translateY(-20px) rotate(8deg);
  }
}

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

@media(max-width:991px){

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

  .faq-image{
    margin-bottom:40px;
  }

}

@media(max-width:768px){

  .dental-faq{
    padding:80px 0;
  }

  .faq-title{
    font-size:32px;
  }

  .faq-accordion .accordion-button{
    font-size:16px;
    padding:22px;
  }

  .faq-accordion .accordion-body{
    padding:0 22px 22px;
  }

}

/*video*/


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

#intro-5{
  position:relative;
  overflow:hidden;

  padding:50px 0 80px;

  background:
  linear-gradient(
  rgba(13,43,69,0.72),
  rgba(13,43,69,0.72)),

  url(../images/video-bg.jpg)
  center center / cover no-repeat;

  background-attachment:fixed;
}

/* =========================================
   OVERLAY
========================================= */

#intro-5::before{
  content:"";

  position:absolute;
  inset:0;

  background:
  radial-gradient(
  circle at top left,
  rgba(122,150,168,0.18),
  transparent 35%),

  radial-gradient(
  circle at bottom right,
  rgba(255,255,255,0.06),
  transparent 35%);

  z-index:1;
}

/* =========================================
   GRID
========================================= */

.video-grid{
  position:absolute;
  inset:0;

  background-image:
  linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);

  background-size:50px 50px;

  animation:gridMove 18s linear infinite;

  z-index:1;
}

/* =========================================
   SHAPES
========================================= */

.video-shape{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
  z-index:1;
}

.shape-1{
  width:130px;
  height:130px;

  top:12%;
  right:8%;

  animation:rotateShape 18s linear infinite;
}

.shape-2{
  width:70px;
  height:70px;

  bottom:18%;
  left:10%;

  animation:rotateShape 12s linear infinite reverse;
}

/* =========================================
   FLOATING ICONS
========================================= */

.video-floating-icon{
  position:absolute;
  color:rgba(255,255,255,0.06);
  z-index:1;
}

.video-icon-1{
  font-size:70px;
  top:20%;
  left:8%;

  animation:iconFloat 6s ease-in-out infinite;
}

.video-icon-2{
  font-size:120px;
  bottom:8%;
  right:10%;

  animation:iconRotate 20s linear infinite;
}

/* =========================================
   CONTENT
========================================= */

.video-sec .container{
  position:relative;
  z-index:5;
}

/* tag */
.video-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 20px;

  border-radius:60px;

  background:rgba(255,255,255,0.08);

  border:1px solid rgba(255,255,255,0.10);

  backdrop-filter:blur(12px);

  color:#ffffff;

  font-size:12px;
  font-weight:700;

  letter-spacing:1px;

  margin-bottom:28px;

  box-shadow:
  0 15px 40px rgba(0,0,0,0.12);
}

/* =========================================
   TITLE
========================================= */

.video-title{
  font-size:52px;
  line-height:1.1;
  font-weight:900;

  color:#ffffff;

  margin-bottom:24px;

  letter-spacing:-1px;
}

.video-title span{
  background:
  linear-gradient(
  135deg,
  #ffffff,
  #dfe9ef);

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =========================================
   DESCRIPTION
========================================= */

.video-desc{
  font-size:16px;
  line-height:1.9;

  color:rgba(255,255,255,0.78);

  max-width:620px;

  margin:auto;
  margin-bottom:50px;
}

/* =========================================
   PLAY BUTTON
========================================= */

.play-btn{
  position:relative;

  width:130px;
  height:130px;

  border-radius:50%;

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

  margin:auto;

  text-decoration:none;

  background:
  linear-gradient(
  135deg,
  rgba(255,255,255,0.95),
  rgba(223,233,239,0.95));

  box-shadow:
  0 30px 80px rgba(0,0,0,0.25);

  overflow:visible;

  animation:playFloat 4s ease-in-out infinite;

  transition:
  transform 0.45s cubic-bezier(0.22,1,0.36,1),
  box-shadow 0.45s cubic-bezier(0.22,1,0.36,1),
  background 0.45s ease;
}

/* pulse wave 1 */
.play-btn::before{
  content:"";

  position:absolute;

  width:180%;
  height:180%;

  border-radius:50%;

  border:2px solid rgba(255,255,255,0.18);

  animation:pulseWave1 2.5s linear infinite;
}

/* pulse wave 2 */
.play-btn::after{
  content:"";

  position:absolute;

  width:180%;
  height:180%;

  border-radius:50%;

  border:2px solid rgba(255,255,255,0.10);

  animation:pulseWave2 2.5s linear infinite;

  animation-delay:1.2s;
}

/* hover */
.play-btn:hover{

  transform:
  translateY(-6px)
  scale(1.04);

  box-shadow:
  0 45px 100px rgba(0,0,0,0.32);

}

/* =========================================
   INNER ICON
========================================= */

.play-icon{
  position:relative;

  width:88px;
  height:88px;

  border-radius:50%;

  background:
  linear-gradient(
  135deg,
  #7a96a8,
  #5f7888);

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

  color:#ffffff;

  font-size:24px;

  box-shadow:
  inset 0 2px 10px rgba(255,255,255,0.20),
  0 10px 30px rgba(0,0,0,0.15);

  z-index:5;

  overflow:hidden;

  transition:
  transform 0.45s cubic-bezier(0.22,1,0.36,1),
  box-shadow 0.45s ease,
  background 0.45s ease;
}

/* hover */
.play-btn:hover .play-icon{

  transform:scale(1.08);

  background:
  linear-gradient(
  135deg,
  #86a5b8,
  #6b8798);

}

/* shine */
.play-icon::before{
  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:70%;
  height:100%;

  background:
  linear-gradient(
  90deg,
  transparent,
  rgba(255,255,255,0.35),
  transparent);

  transform:skewX(-25deg);

  animation:shineMove 4s linear infinite;
}

.play-icon i{
  position:relative;
  z-index:2;

  margin-left:4px;

  animation:playIconPulse 2s ease-in-out infinite;
}

/* =========================================
   VIDEO MODAL
========================================= */

.video-modal .modal-content{
  background:transparent;
  border:none;
  position:relative;
}

.video-modal iframe{
  border-radius:20px;
}

.video-close-btn {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: #0d2b45;
  font-size: 20px;
  z-index: 10;
  transition: 0.4s;
}

.video-close-btn:hover{
  background:#7a96a8;
  color:#ffffff;
  transform:rotate(90deg);
}

/* modal backdrop */
.video-modal{
  backdrop-filter:blur(8px);
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes pulseWave1{

  0%{
    transform:scale(0.7);
    opacity:1;
  }

  100%{
    transform:scale(1.35);
    opacity:0;
  }

}

@keyframes pulseWave2{

  0%{
    transform:scale(0.7);
    opacity:0.8;
  }

  100%{
    transform:scale(1.5);
    opacity:0;
  }

}

@keyframes playFloat{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-10px);
  }

}

@keyframes playIconPulse{

  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.12);
  }

}

@keyframes shineMove{

  0%{
    left:-120%;
  }

  100%{
    left:130%;
  }

}

@keyframes rotateShape{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }

}

@keyframes gridMove{

  0%{
    transform:translateY(0);
  }

  100%{
    transform:translateY(50px);
  }

}

@keyframes iconFloat{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-15px);
  }

}

@keyframes iconRotate{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }

}

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

@media(max-width:991px){

  #intro-5{
    padding:120px 0;
  }

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

}

@media(max-width:768px){

  #intro-5{
    padding:90px 0;
    background-attachment:scroll;
  }

  .video-title{
    font-size:30px;
    line-height:1.2;
  }

  .video-desc{
    font-size:14px;
  }

  .play-btn{
    width:105px;
    height:105px;
  }

  .play-icon{
    width:72px;
    height:72px;
    font-size:20px;
  }

  .video-icon-2{
    font-size:70px;
  }

  .video-close-btn{
    width:42px;
    height:42px;
    font-size:16px;
    top:-10px;
    right:-10px;
  }

}

/* modal width */
.video-modal .modal-dialog{
  max-width:950px;
}

/* reduce iframe height */
.video-modal .ratio{
  --bs-aspect-ratio: 48%;
}

/* iframe */
.video-modal iframe{
  border-radius:20px;
  box-shadow:
  0 30px 80px rgba(0,0,0,0.35);
}

/* tablet */
@media(max-width:991px){

  .video-modal .ratio{
    --bs-aspect-ratio: 56%;
  }

}

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

  .video-modal .modal-dialog{
    margin:20px;
  }

  .video-modal .ratio{
    --bs-aspect-ratio: 60%;
  }

}

/* =========================================
   TREATMENT TECHNOLOGY SECTION
========================================= */

.treatment-tech{
  position:relative;
  padding:120px 0;
  overflow:hidden;
  background:
  linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
}

/* =========================================
   BG EFFECTS
========================================= */

.tech-circle{
  position:absolute;
  border-radius:50%;
  filter:blur(10px);
  z-index:0;
}

.tech-circle-1{
  width:350px;
  height:350px;
  background:rgba(123,150,169,0.10);
  top:-120px;
  left:-100px;
  animation:techFloat 14s ease-in-out infinite;
}

.tech-circle-2{
  width:250px;
  height:250px;
  background:rgba(255,236,235,0.8);
  bottom:-80px;
  right:-80px;
  animation:techFloat2 18s ease-in-out infinite;
}

.tech-grid{
  position:absolute;
  inset:0;
  background-image:
  linear-gradient(rgba(123,150,169,0.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(123,150,169,0.04) 1px, transparent 1px);
  background-size:50px 50px;
  z-index:0;
}

/* =========================================
   IMAGES
========================================= */

.tech-images{
  position:relative;
  z-index:2;
  padding-right:80px;
}

.tech-img-main img{
  width:100%;
  border-radius:35px;
  box-shadow:0 30px 70px rgba(0,0,0,0.10);
  transition:0.6s;
}

.tech-img-main:hover img{
  transform:scale(1.03);
}

/* floating image */
.tech-img-small{
  position:absolute;
  right:0;
  bottom:-50px;
  width:45%;
}

.tech-img-small img{
  width:100%;
  border-radius:25px;
  border:8px solid #fff;
  box-shadow:0 20px 50px rgba(0,0,0,0.12);
  animation:floatImage 5s ease-in-out infinite;
}

/* badge */
.tech-badge{
  position:absolute;
  left:-20px;
  top:40px;
  background:#fff;
  padding:18px 24px;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
  animation:floatBadge 4s ease-in-out infinite;
}

.tech-badge span{
  display:block;
  font-size:34px;
  font-weight:900;
  color:#7b96a9;
  line-height:1;
}

.tech-badge small{
  color:#666;
  font-size:13px;
}

/* =========================================
   CONTENT
========================================= */

.tech-content{
  position:relative;
  z-index:2;
}

.tech-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 22px;
  border-radius:50px;
  background:#eef5fb;
  color:#7b96a9;
  font-weight:700;
  margin-bottom:25px;
}

.tech-title{
  font-size:45px;
  font-weight:900;
  line-height:1.1;
  color:#0d2b45;
  margin-bottom:25px;
}

.tech-title span{
  background:
  linear-gradient(135deg,#7b96a9,#4d6c84);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.tech-desc{
  color:#667085;
  line-height:1.9;
  margin-bottom:35px;
  font-size:16px;
}

/* =========================================
   FEATURES
========================================= */

.tech-features{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-bottom:40px;
}

.tech-feature{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:18px;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  transition:0.4s;
}

.tech-feature:hover{
  transform:translateX(10px);
  box-shadow:0 20px 50px rgba(123,150,169,0.12);
}

.tech-feature-icon{
  width:60px;
  height:60px;
  border-radius:18px;
  background:
  linear-gradient(135deg,#7b96a9,#4d6c84);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:22px;
  flex-shrink:0;
}

.tech-feature h5{
  font-size:18px;
  font-weight:700;
  color:#0d2b45;
  margin-bottom:6px;
}

.tech-feature p{
  margin:0;
  color:#6b7280;
  font-size:14px;
}

/* =========================================
   BUTTON
========================================= */

.tech-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 32px;
  border-radius:60px;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  background:
  linear-gradient(135deg,#7b96a9,#4d6c84);
  transition:0.4s;
  box-shadow:0 15px 35px rgba(123,150,169,0.25);
}

.tech-btn:hover{
  transform:translateY(-5px);
  color:#fff;
  box-shadow:0 25px 50px rgba(123,150,169,0.35);
}

.tech-btn i{
  transition:0.4s;
}

.tech-btn:hover i{
  transform:translateX(5px);
}

/* =========================================
   ANIMATIONS
========================================= */

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

@keyframes techFloat2{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(25px);
  }
}

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

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

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

@media(max-width:991px){

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

  .tech-images{
    padding-right:40px;
    margin-bottom:70px;
  }

}

@media(max-width:768px){

  .treatment-tech{
    padding:80px 0;
  }

  .tech-title{
    font-size:32px;
  }

  .tech-img-small{
    width:50%;
    bottom:-30px;
  }

  .tech-badge{
    left:10px;
    top:10px;
    padding:14px 18px;
  }

  .tech-badge span{
    font-size:26px;
  }

}





/* =========================================
   PREMIUM TESTIMONIAL SECTION
========================================= */

.modern-dark-testimonial{
  position:relative;
  overflow:hidden;
  padding:130px 0;
  background:
  linear-gradient(
  135deg,
  #4f6472 0%,
  #6b8798 45%,
  #7a96a8 100%);
}

/* =========================================
   ANIMATED GRID
========================================= */

.mdt-grid{
  position:absolute;
  inset:0;

  background-image:
  linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);

  background-size:55px 55px;

  animation:gridMove 20s linear infinite;
}

/* =========================================
   GLOW EFFECTS
========================================= */

.mdt-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
}

.mdt-glow-1{
  width:420px;
  height:420px;
  background:rgba(255,255,255,0.08);
  top:-180px;
  left:-120px;

  animation:floatGlow1 12s ease-in-out infinite;
}

.mdt-glow-2{
  width:320px;
  height:320px;
  background:rgba(223,233,239,0.12);
  bottom:-120px;
  right:-80px;

  animation:floatGlow2 15s ease-in-out infinite;
}

/* =========================================
   FLOATING SHAPES
========================================= */

.mdt-shape{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
}

.mdt-shape-1{
  width:140px;
  height:140px;
  top:15%;
  right:10%;

  animation:rotateShape 18s linear infinite;
}

.mdt-shape-2{
  width:80px;
  height:80px;
  bottom:18%;
  left:8%;

  animation:rotateShape 12s linear infinite reverse;
}

.mdt-shape-3{
  width:40px;
  height:40px;
  top:45%;
  right:40%;

  background:rgba(255,255,255,0.08);

  animation:pulseShape 4s ease-in-out infinite;
}

/* =========================================
   ANIMATED LINES
========================================= */

.mdt-line{
  position:absolute;
  background:rgba(255,255,255,0.08);
}

.mdt-line-1{
  width:2px;
  height:180px;
  top:12%;
  right:20%;

  animation:lineMove 6s ease-in-out infinite;
}

.mdt-line-2{
  width:180px;
  height:2px;
  bottom:15%;
  left:10%;

  animation:lineMove2 6s ease-in-out infinite;
}

/* =========================================
   FLOATING ICONS
========================================= */

.mdt-floating-icon{
  position:absolute;
  color:rgba(255,255,255,0.08);
  z-index:1;
}

.icon-1{
  font-size:28px;
  top:20%;
  left:15%;

  animation:iconFloat 6s ease-in-out infinite;
}

.icon-2{
  font-size:40px;
  right:12%;
  bottom:20%;

  animation:iconFloat 8s ease-in-out infinite;
}

.icon-3{
  font-size:90px;
  top:50%;
  right:5%;

  animation:iconRotate 20s linear infinite;
}

/* =========================================
   LEFT CONTENT
========================================= */

.mdt-left{
  position:relative;
  z-index:2;
}

.mdt-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 22px;
  border-radius:60px;

  background:rgba(255,255,255,0.10);

  border:1px solid rgba(255,255,255,0.12);

  backdrop-filter:blur(12px);

  color:#ffffff;
  font-size:13px;
  font-weight:700;

  margin-bottom:30px;
}

/* title */
.mdt-title{
  font-size:56px;
  line-height:1.08;
  font-weight:300;
  color:#ffffff;
  margin-bottom:35px;
  letter-spacing:-1px;
}

.mdt-title span{
  display:block;
  font-weight:900;

  background:
  linear-gradient(
  135deg,
  #ffffff,
  #dfe9ef);

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =========================================
   HIGHLIGHT BOX
========================================= */

.mdt-highlight{
  position:relative;

  display:inline-block;

  padding:22px 30px;

  max-width:520px;

  font-size:18px;
  line-height:1.9;
  font-weight:500;

  color:#ffffff;

  border-radius:24px;

  overflow:hidden;

  background:
  linear-gradient(
  135deg,
  rgba(255,255,255,0.12),
  rgba(255,255,255,0.05));

  border:1px solid rgba(255,255,255,0.10);

  backdrop-filter:blur(16px);

  box-shadow:
  0 20px 60px rgba(0,0,0,0.16),
  inset 0 1px 0 rgba(255,255,255,0.08);
}

/* top line */
.mdt-highlight::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:3px;

  background:
  linear-gradient(
  90deg,
  #ffffff,
  #dfe9ef,
  #b9cad4);

  background-size:300px 100%;

  animation:highlightGlow 5s linear infinite;
}

/* shine */
.mdt-highlight::after{
  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:70%;
  height:100%;

  background:
  linear-gradient(
  90deg,
  transparent,
  rgba(255,255,255,0.10),
  transparent);

  transform:skewX(-25deg);

  animation:highlightShine 6s linear infinite;
}

.mdt-highlight strong{
  color:#ffffff;
  font-weight:700;
}

/* =========================================
   CAROUSEL
========================================= */

.mdt-carousel{
  position:relative;
  z-index:2;

  padding-bottom:80px;
}

/* =========================================
   CARD
========================================= */

.mdt-card{
  position:relative;

  padding:45px;

  border-radius:35px;min-height: 418px;


  background:
  rgba(255,255,255,0.07);

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(16px);

  overflow:hidden;

  box-shadow:
  0 30px 80px rgba(0,0,0,0.18);
}

/* glow border */
.mdt-card::before{
  content:"";

  position:absolute;
  inset:-1px;

  border-radius:35px;

  padding:1px;

  background:
  linear-gradient(
  135deg,
  rgba(255,255,255,0.25),
  transparent,
  rgba(255,255,255,0.08));

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;
}

/* quote */
.mdt-quote{
  font-size:38px;
  color:#dfe9ef;
  margin-bottom:20px;
}

/* text */
.mdt-text{
  font-size:16px;
  line-height:1.9;
  color:rgba(255,255,255,0.92);
  margin-bottom:40px;
}

/* =========================================
   USER
========================================= */

.mdt-user{
  display:flex;
  align-items:center;
  gap:18px;
}

.mdt-user-img{
  width:75px;
  height:75px;

  border-radius:50%;

  overflow:hidden;

  border:4px solid rgba(255,255,255,0.15);
}

.mdt-user-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.mdt-user-info h5{
  margin:0;

  color:#ffffff;

  font-size:20px;
  font-weight:800;
}

.mdt-user-info span{
  color:rgba(255,255,255,0.72);
  font-size:14px;
}

/* =========================================
   INDICATORS
========================================= */

.mdt-indicators{
  bottom:0;
  gap:12px;
}

.mdt-indicators button{
  width:14px !important;
  height:14px !important;

  border-radius:50% !important;

  border:none !important;

  background:rgba(255,255,255,0.25) !important;

  transition:0.4s;
}

.mdt-indicators .active{
  background:#ffffff !important;

  transform:scale(1.2);
}

/* =========================================
   ARROWS
========================================= */

.mdt-arrow{
  width:58px;
  height:58px;

  border-radius:18px;

  background:rgba(255,255,255,0.08);

  border:1px solid rgba(255,255,255,0.10);

  backdrop-filter:blur(10px);

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

  color:#ffffff;
  font-size:16px;

  transition:0.4s;
}

.carousel-control-prev,
.carousel-control-next{
  width:auto;
  opacity:1;
}

.carousel-control-prev{
  left:-25px;
}

.carousel-control-next{
  right:-25px;
}

.mdt-arrow:hover{
  background:#ffffff;
  color:#7a96a8;

  transform:translateY(-4px);
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes highlightShine{

  0%{
    left:-120%;
  }

  100%{
    left:130%;
  }

}


@keyframes highlightGlow{

  0%{
    background-position:0 0;
  }

  100%{
    background-position:300px 0;
  }

}

@keyframes gridMove{

  0%{
    transform:translateY(0);
  }

  100%{
    transform:translateY(55px);
  }

}

@keyframes floatGlow1{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-30px);
  }

}

@keyframes floatGlow2{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(25px);
  }

}

@keyframes rotateShape{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }

}

@keyframes pulseShape{

  0%,100%{
    transform:scale(1);
    opacity:1;
  }

  50%{
    transform:scale(1.4);
    opacity:0.5;
  }

}

@keyframes lineMove{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-20px);
  }

}

@keyframes lineMove2{

  0%,100%{
    transform:translateX(0);
  }

  50%{
    transform:translateX(20px);
  }

}

@keyframes iconFloat{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-15px);
  }

}

@keyframes iconRotate{

  0%{
    transform:rotate(0deg);
  }

  100%{
    transform:rotate(360deg);
  }

}

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

@media(max-width:991px){

  .modern-dark-testimonial{
    padding:90px 0;
  }

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

  .mdt-highlight{
    font-size:16px;
  }

  .mdt-card{
    padding:35px;
  }

}

@media(max-width:768px){

  .mdt-title{
    font-size:32px;
  }

  .mdt-highlight{
    font-size:15px;
    padding:18px 20px;
    border-radius:18px;
  }

  .mdt-text{
    font-size:15px;
    line-height:1.8;
  }

  .mdt-user-info h5{
    font-size:18px;
  }

  .mdt-user-img{
    width:65px;
    height:65px;
  }

  .mdt-card{
    padding:25px;
    border-radius:25px;
  }

  .carousel-control-prev{
    left:0;
  }

  .carousel-control-next{
    right:0;
  }

  .mdt-arrow{
    width:48px;
    height:48px;
    border-radius:14px;
  }

}

























/* =========================================
   PREMIUM FOOTER
========================================= */

.premium-footer{
  position:relative;
  overflow:hidden;

  background:
  linear-gradient(
  135deg,
  #4f6472 0%,
  #6b8798 45%,
  #7a96a8 100%);

  padding-top:100px;

  color:#ffffff;
}

/* =========================================
   BACKGROUND EFFECTS
========================================= */

.footer-grid{
  position:absolute;
  inset:0;

  background-image:
  linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

  background-size:50px 50px;

  animation:gridMove 18s linear infinite;
}

.footer-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
}

.glow-1{
  width:350px;
  height:350px;

  background:rgba(255,255,255,0.08);

  top:-120px;
  left:-120px;
}

.glow-2{
  width:300px;
  height:300px;

  background:rgba(255,255,255,0.05);

  bottom:-100px;
  right:-100px;
}

/* =========================================
   TOP AREA
========================================= */

.footer-top{
  position:relative;
  z-index:5;

  padding-bottom:70px;
  margin-bottom:70px;

  border-bottom:
  1px solid rgba(255,255,255,0.10);
}

/* tag */
.footer-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 22px;

  border-radius:60px;

  background:rgba(255,255,255,0.10);

  border:1px solid rgba(255,255,255,0.12);

  backdrop-filter:blur(12px);

  font-size:13px;
  font-weight:700;

  margin-bottom:25px;
}

/* title */
.footer-cta h2{
  font-size:58px;
  line-height:1.08;
  font-weight:900;

  margin-bottom:20px;
}

.footer-cta h2 span{
  background:
  linear-gradient(
  135deg,
  #ffffff,
  #dfe9ef);

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.footer-cta p{
  font-size:16px;
  line-height:1.9;

  color:rgba(255,255,255,0.75);

  max-width:620px;
}

/* =========================================
   APPOINTMENT BOX
========================================= */

.footer-appointment-box{
  position:relative;

  padding:40px;

  border-radius:30px;

  background:
  rgba(255,255,255,0.08);

  border:1px solid rgba(255,255,255,0.10);

  backdrop-filter:blur(15px);

  box-shadow:
  0 25px 60px rgba(0,0,0,0.12);
}

.footer-appointment-box h4{
  font-size:28px;
  font-weight:800;

  margin-bottom:25px;
}

/* contact item */
.footer-contact-item{
  display:flex;
  align-items:center;
  gap:15px;

  margin-bottom:18px;

  color:rgba(255,255,255,0.85);
}

.footer-contact-item i{
  width:45px;
  height:45px;

  border-radius:50%;

  background:rgba(255,255,255,0.10);

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

/* button */
.footer-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;

  margin-top:15px;

  padding:16px 28px;

  border-radius:60px;

  background:#ffffff;

  color:#5f7888;

  font-weight:700;

  text-decoration:none;

  transition:0.4s ease;
}

.footer-btn:hover{
  transform:translateY(-5px);

  background:#dfe9ef;

  color:#4f6472;
}

/* =========================================
   MAIN FOOTER
========================================= */

.footer-main{
  position:relative;
  z-index:5;

  padding-bottom:70px;
}

/* widget */
.footer-widget h5{
  font-size:22px;
  font-weight:800;

  margin-bottom:28px;
}

/* text logo */
.footer-text-logo{
  font-size:34px;
  font-weight:900;

  margin-bottom:22px;

  letter-spacing:-1px;

  background:
  linear-gradient(
  135deg,
  #ffffff,
  #dfe9ef);

  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* about */
.footer-about{
  font-size:15px;
  line-height:1.9;

  color:rgba(255,255,255,0.75);

  margin-bottom:28px;
}

/* =========================================
   SOCIAL
========================================= */


.footer-social{
  display:flex;
  gap:14px;
}

.footer-social a{
  width:48px;
  height:48px;

  border-radius:50%;

  background:rgba(255,255,255,0.10);

  border:1px solid rgba(255,255,255,0.10);

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

  color:#ffffff;

  text-decoration:none;

  transition:0.4s ease;
}

.footer-social a:hover{
  transform:translateY(-5px);

  background:#ffffff;

  color:#5f7888;
}

/* =========================================
   LINKS
========================================= */

.footer-links{
  padding:0;
  margin:0;

  list-style:none;
}

.footer-links li{
  margin-bottom:15px;
}

.footer-links a{
  color:rgba(255,255,255,0.75);

  text-decoration:none;

  transition:0.4s ease;
}

.footer-links a:hover{
  color:#ffffff;

  padding-left:6px;
}

/* =========================================
   CONTACT
========================================= */

.footer-contact{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.footer-contact-box{
  display:flex;
  gap:15px;

  color:rgba(255,255,255,0.78);

  line-height:1.8;
}

.footer-contact-box i{
  width:46px;
  height:46px;

  border-radius:50%;

  background:rgba(255,255,255,0.10);

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

  flex-shrink:0;
}

/* =========================================
   BOTTOM
========================================= */

.footer-bottom{
  position:relative;
  z-index:5;

  padding:28px 0;

  border-top:
  1px solid rgba(255,255,255,0.10);
}

.footer-bottom a{color:#fff; text-decoration:none; color:rgba(255,255,255,0.72);}

.footer-bottom p{
  margin:0;

  color:rgba(255,255,255,0.72);

  font-size:14px;
}

.footer-bottom-links{
  display:flex;
  justify-content:end;
  gap:25px;
}

.footer-bottom-links a{
  color:rgba(255,255,255,0.72);

  text-decoration:none;

  font-size:14px;

  transition:0.4s ease;
}

.footer-bottom-links a:hover{
  color:#ffffff;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes gridMove{

  0%{
    transform:translateY(0);
  }

  100%{
    transform:translateY(50px);
  }

}

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

@media(max-width:991px){

  .premium-footer{
    padding-top:80px;
  }

  .footer-cta h2{
    font-size:42px;
  }

  .footer-top{
    padding-bottom:50px;
    margin-bottom:50px;
  }

}

@media(max-width:768px){

  .premium-footer{
    padding-top:70px;
  }

  .footer-cta h2{
    font-size:32px;
  }

  .footer-cta p,
  .footer-about{
    font-size:14px;
  }

  .footer-widget h5{
    font-size:20px;
  }

  .footer-appointment-box{
    padding:28px;
    border-radius:24px;
  }

  .footer-bottom-links{
    justify-content:start;
    flex-wrap:wrap;
  }

}

.footer-logo{ overflow:hidden; margin-bottom:35px;}

.footer-logo img{ max-width:100%;}


/* ====================================
   MODERN PARALLAX SECTION
==================================== */

.bottom-sec{
  position:relative;
  overflow:hidden;
  padding:140px 0;

  background:
  linear-gradient(
  rgba(10,35,58,0.78),
  rgba(10,35,58,0.78)),
  url(../images/bottom-bg.jpg)
  center center / cover no-repeat;

  background-attachment:fixed;
}

/* content */

.bottom-sec .container{
  position:relative;
  z-index:5;
}

/* subtitle */

.bottom-sec .sub-title{
  display:inline-block;
  padding:10px 24px;

  border-radius:50px;
  border:1px solid rgba(255,255,255,0.18);

  background:rgba(255,255,255,0.08);

  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:3px;
  text-transform:uppercase;

  margin-bottom:28px;
}

/* title */

.bottom-sec .main-title{
  font-size:64px;
  line-height:1.15;
  font-weight:700;
  color:#fff;

  margin-bottom:28px;
}

/* text */

.bottom-sec .intro-text{
  max-width:760px;

  margin:0 auto 45px;

  color:rgba(255,255,255,0.80);
  font-size:18px;
  line-height:1.9;
}

/* buttons */

.bottom-sec .btn-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}

.bottom-sec .gallery-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:220px;
  height:60px;

  border-radius:60px;

  background:#fff;
  color:#0a233a;

  font-size:16px;
  font-weight:600;
  text-decoration:none;

  transition:all .35s ease;
}

.bottom-sec .gallery-btn:hover{
  transform:translateY(-5px);
  background:#0d6efd;
  color:#fff;
}

/* outline button */

.bottom-sec .outline-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:220px;
  height:60px;

  border-radius:60px;

  border:1px solid rgba(255,255,255,0.25);

  background:rgba(255,255,255,0.06);
  color:#fff;

  font-size:16px;
  font-weight:600;
  text-decoration:none;

  transition:all .35s ease;
}

.bottom-sec .outline-btn:hover{
  background:#fff;
  color:#0a233a;
  transform:translateY(-5px);
}

/* decorative circles */

.bottom-sec .circle{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.10);
}

.bottom-sec .circle-1{
  width:320px;
  height:320px;

  top:-120px;
  left:-120px;
}

.bottom-sec .circle-2{
  width:220px;
  height:220px;

  bottom:-80px;
  right:-80px;
}

/* plus icon */

.bottom-sec .plus{
  position:absolute;
  width:22px;
  height:22px;
}

.bottom-sec .plus::before,
.bottom-sec .plus::after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,0.20);
}

.bottom-sec .plus::before{
  width:100%;
  height:1px;
  top:50%;
  left:0;
}

.bottom-sec .plus::after{
  width:1px;
  height:100%;
  left:50%;
  top:0;
}

.bottom-sec .plus-1{
  top:24%;
  left:12%;
}

.bottom-sec .plus-2{
  bottom:20%;
  right:14%;
}

/* responsive */

@media(max-width:991px){

  .bottom-sec{
    padding:100px 0;
    background-attachment:scroll;
  }

  .bottom-sec .main-title{
    font-size:48px;
  }

}

@media(max-width:767px){

  .bottom-sec .main-title{
    font-size:36px;
  }

  .bottom-sec .intro-text{
    font-size:16px;
  }

  .bottom-sec .gallery-btn,
  .bottom-sec .outline-btn{
    width:100%;
  }

}


/* ====================================
   ZOOM + GLOW TITLE ANIMATION
==================================== */

.bottom-sec .main-title{
  display:flex;
  flex-direction:column;
  align-items:center;

  margin-bottom:35px;
}

/* each line */

.bottom-sec .main-title span{
  display:block;

font-size: 45px;
  line-height:1.1;
  font-weight:700;

  color:#fff;



  opacity:0;
  transform:scale(.7);

  animation:zoomText 1s ease forwards;
}

/* delays */

.bottom-sec .main-title span:nth-child(1){
  animation-delay:.2s;
}

.bottom-sec .main-title span:nth-child(2){
  animation-delay:.6s;
}

.bottom-sec .main-title span:nth-child(3){
  animation-delay:1s;
}

/* glow effect */

.bottom-sec .main-title span:hover{
  color:#fff;

  text-shadow:
  0 0 10px rgba(255,255,255,0.4),
  0 0 20px rgba(13,110,253,0.5),
  0 0 40px rgba(13,110,253,0.4);

  transition:.4s ease;
}

/* animation */

@keyframes zoomText{

  0%{
    opacity:0;
    transform:scale(.7) translateY(40px);
    filter:blur(10px);
  }

  100%{
    opacity:1;
    transform:scale(1) translateY(0);
    filter:blur(0);
  }

}

/* responsive */

@media(max-width:991px){

  .bottom-sec .main-title span{
    font-size:54px;
  }

}

@media(max-width:767px){

  .bottom-sec .main-title span{
    font-size:38px;
    letter-spacing:-1px;
  }

}


/* ====================================
   ELEGANT MINI APPOINTMENT MODAL
==================================== */

.appointment-modal{
  border:none;
  border-radius:28px;
  overflow:hidden;

  background:#ffffff;

  box-shadow:
  0 20px 60px rgba(0,0,0,0.12);
}

/* close button */

.custom-close{
  position:absolute;
  top:18px;
  right:18px;

  width:38px;
  height:38px;

  border-radius:50%;

  background:#f4f7fa;

  opacity:1;
  z-index:5;
}

/* body */

.appointment-modal .modal-body{
  padding:50px 40px 40px;
}

/* header */

.appointment-header{
  margin-bottom:35px;
}

.appointment-header .mini-title{
  display:inline-block;

  margin-bottom:14px;

  color:#0d6efd;

  font-size:13px;
  font-weight:600;

  letter-spacing:2px;
  text-transform:uppercase;
}

.appointment-header h3{
  font-size:38px;
  font-weight:700;

  color:#0a233a;

  margin-bottom:12px;
}

.appointment-header p{
  color:#6c7a89;
  font-size:15px;
  line-height:1.8;

  margin:0;
}

/* form */

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

.appointment-modal .form-control{
  height:56px;

  border:none;
  border-radius:16px;

  background:#f5f7fa;

  padding:14px 20px;

  font-size:15px;

  box-shadow:none;
}

.appointment-modal textarea.form-control{
  height:auto;
  resize:none;
  min-height:120px;
}

.appointment-modal .form-control:focus{
  background:#eef4ff;

  box-shadow:none;

  border:1px solid #d7e6ff;
}

/* button */

.submit-btn{
  width:100%;
  height:58px;

  border:none;
  border-radius:60px;

  background:#0d6efd;
  color:#fff;

  font-size:16px;
  font-weight:600;

  transition:.35s ease;
}

.submit-btn:hover{
  background:#0a233a;
}

/* responsive */

@media(max-width:767px){

  .appointment-modal .modal-body{
    padding:45px 22px 30px;
  }

  .appointment-header h3{
    font-size:30px;
  }

}

.custom-close{
  position:absolute;
  top:18px;
  right:18px;

  width:40px;
  height:40px;

  border:none;
  border-radius:50%;

  background-color:#0a233a !important;

  opacity:1 !important;

  z-index:999;

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

  box-shadow:0 6px 18px rgba(0,0,0,0.15);

  padding:0;
}

/* bootstrap icon */

.custom-close.btn-close{
  background:
  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
  center center no-repeat;

  background-size:13px;
}


@media (min-width: 1300px) {
  .container {
    max-width: 1290px;
  }
}












/* =========================================
   INNER BANNER
========================================= */

.about-inner-banner{
    position:relative;

    overflow:hidden;

    padding:80px 0 100px;

    background:
    linear-gradient(
    rgba(13,43,69,0.72),
    rgba(13,43,69,0.72)),

    url(../images/about-banner.jpg)
    center center / cover no-repeat;

    z-index:1;
}

/* =========================================
   SHAPES
========================================= */

.banner-shape{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.shape-1{
    width:420px;
    height:420px;

    top:-180px;
    right:-120px;

    background:
    radial-gradient(
    rgba(255,255,255,0.10),
    transparent);

    animation:bannerFloat 7s ease-in-out infinite;
}

.shape-2{
    width:280px;
    height:280px;

    bottom:-120px;
    left:-80px;

    background:
    radial-gradient(
    rgba(123,150,169,0.22),
    transparent);

    animation:bannerFloat 10s ease-in-out infinite;
}

/* =========================================
   CONTENT
========================================= */

.about-banner-content{
    position:relative;
    z-index:5;
}

.about-banner-subtitle{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 22px;

    border-radius:50px;

    background:
    rgba(255,255,255,0.10);

    border:
    1px solid rgba(255,255,255,0.15);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;
    text-transform:uppercase;

    margin-bottom:28px;
}

/* =========================================
   TITLE
========================================= */

.about-banner-content h1 {
  font-size: 61px;
  line-height: 1.05;
  font-weight: 700;
  color: #fff;
  margin-bottom: 25px;
  letter-spacing: 2px;
}

/* =========================================
   DESCRIPTION
========================================= */

.about-banner-content p{
    max-width:760px;

    margin:auto;

    font-size:18px;
    line-height:1.9;

    color:
    rgba(255,255,255,0.82);

    margin-bottom:35px;
}

/* =========================================
   BREADCRUMB
========================================= */

.about-breadcrumb{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:14px 26px;

    border-radius:60px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.10);

    backdrop-filter:blur(10px);

    color:
    rgba(255,255,255,0.72);

    font-size:14px;
    font-weight:500;
}

.about-breadcrumb a{
    color:#fff;
    text-decoration:none;

    transition:0.35s ease;
}

.about-breadcrumb a:hover{
    color:#dfe9ef;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes bannerFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-20px);
    }

}

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

@media(max-width:991px){

    .about-inner-banner{
        padding:180px 0 120px;
    }

    .about-banner-content h1{
        font-size:58px;
    }

}

@media(max-width:768px){

    .about-inner-banner{
        padding:150px 0 90px;
    }

    .about-banner-content h1{
        font-size:40px;

        letter-spacing:-1px;
    }

    .about-banner-content p{
        font-size:15px;
        line-height:1.8;
    }

    .about-breadcrumb{
        padding:12px 20px;

        font-size:13px;
    }

}








/* =========================================
   CHIEF MESSAGE SECTION
========================================= */

.chief-message-section{
    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
    linear-gradient(
    135deg,
    #f8fbff 0%,
    #ffffff 100%);
}

/* =========================================
   SHAPES
========================================= */

.chief-shape{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.chief-shape-1{
    width:350px;
    height:350px;

    top:-120px;
    left:-100px;

    background:
    radial-gradient(
    rgba(123,150,169,0.14),
    transparent);

    animation:chiefFloat 8s ease-in-out infinite;
}

.chief-shape-2{
    width:250px;
    height:250px;

    bottom:-80px;
    right:-80px;

    background:
    radial-gradient(
    rgba(223,233,239,0.8),
    transparent);

    animation:chiefFloat 12s ease-in-out infinite;
}

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

.chief-image-wrapper{
    position:relative;

    padding-right:60px;
}

.chief-main-image{
    width:100%;

    border-radius:35px;

    box-shadow:
    0 30px 80px rgba(0,0,0,0.08);
}

/* badge */

.chief-badge{
    position:absolute;

    right:0;
    bottom:40px;

    padding:22px 28px;

    border-radius:25px;

    background:#fff;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.08);

    text-align:center;

    font-size:14px;
    font-weight:600;

    color:#667085;
}

.chief-badge span{
    display:block;

    font-size:32px;
    font-weight:900;

    color:#7b96a9;

    line-height:1;
}

/* =========================================
   CONTENT
========================================= */

.chief-subtitle{
    display:inline-flex;
    align-items:center;

    padding:10px 22px;

    border-radius:50px;

    background:
    rgba(123,150,169,0.12);

    color:#7b96a9;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;
    text-transform:uppercase;

    margin-bottom:25px;
}

.chief-title{
    font-size:52px;
    line-height:1.15;
    font-weight:900;

    color:#0b132b;

    margin-bottom:25px;
}

.chief-text{
    font-size:16px;
    line-height:1.9;

    color:#667085;

    margin-bottom:20px;
}

/* =========================================
   SIGNATURE
========================================= */

.chief-signature{
    display:flex;
    align-items:center;
    gap:20px;

    margin-top:40px;
}

.chief-signature img{
    width:120px;
}

.chief-signature h5{
    margin:0;

    font-size:22px;
    font-weight:800;

    color:#0b132b;
}

.chief-signature span{
    color:#7b96a9;

    font-size:14px;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes chiefFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-20px);
    }

}

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

@media(max-width:991px){

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

    .chief-image-wrapper{
        padding-right:0;
    }

}

@media(max-width:768px){

    .chief-message-section{
        padding:80px 0;
    }

    .chief-title{
        font-size:32px;
    }

    .chief-badge{
        position:relative;

        right:auto;
        bottom:auto;

        margin-top:20px;

        display:inline-block;
    }

    .chief-signature{
        flex-direction:column;
        align-items:flex-start;
    }

}

/* =========================================
   OUR TEAM SECTION - DARK
========================================= */

.our-team-section{
    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
    linear-gradient(
    135deg,
    #0d2b45 0%,
    #102f4a 40%,
    #1b425f 100%);
}

/* =========================================
   BG EFFECTS
========================================= */

.team-bg-circle{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.circle-1{
    width:420px;
    height:420px;

    top:-180px;
    left:-120px;

    background:
    radial-gradient(
    rgba(123,150,169,0.22),
    transparent);

    animation:teamFloat 8s ease-in-out infinite;
}

.circle-2{
    width:320px;
    height:320px;

    bottom:-120px;
    right:-120px;

    background:
    radial-gradient(
    rgba(255,255,255,0.08),
    transparent);

    animation:teamFloat 12s ease-in-out infinite;
}

/* =========================================
   TITLE
========================================= */

.team-subtitle{
    display:inline-flex;
    align-items:center;

    padding:10px 22px;

    border-radius:50px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.08);

    color:#dfe9ef;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;
    text-transform:uppercase;

    margin-bottom:22px;
}

.team-section-title h2{
    font-size:52px;
    line-height:1.15;
    font-weight:900;

    color:#fff;

    margin-bottom:20px;
}

.team-section-title p{
    max-width:700px;

    margin:auto;

    font-size:16px;
    line-height:1.9;

    color:
    rgba(255,255,255,0.72);
}

/* =========================================
   TEAM CARD
========================================= */

.team-card{
    position:relative;

    overflow:hidden;

    border-radius:35px;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    transition:0.45s ease;

    box-shadow:
    0 25px 60px rgba(0,0,0,0.18);
}

.team-card:hover{
    transform:translateY(-12px);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.28);
}

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

.team-image{
    position:relative;

    overflow:hidden;
}

.team-image img{
    width:100%;

    transition:0.6s ease;
}

.team-card:hover .team-image img{
    transform:scale(1.08);
}

/* overlay */

.team-image::before{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(13,43,69,0.85),
    transparent);

    opacity:0;

    transition:0.45s ease;

    z-index:1;
}

.team-card:hover .team-image::before{
    opacity:1;
}

/* =========================================
   SOCIAL
========================================= */

.team-social{
    position:absolute;

    left:50%;
    bottom:25px;

    transform:
    translateX(-50%)
    translateY(20px);

    display:flex;
    align-items:center;
    gap:12px;

    opacity:0;

    transition:0.45s ease;

    z-index:2;
}

.team-card:hover .team-social{
    opacity:1;

    transform:
    translateX(-50%)
    translateY(0);
}

.team-social a{
    width:42px;
    height:42px;

    border-radius:50%;

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

    text-decoration:none;

    background:#7b96a9;

    color:#fff;

    transition:0.35s ease;
}

.team-social a:hover{
    background:#fff;

    color:#0d2b45;

    transform:translateY(-4px);
}

/* =========================================
   CONTENT
========================================= */

.team-content{
    padding:35px 30px;
}

.team-content h4{
    font-size:26px;
    font-weight:800;

    color:#fff;

    margin-bottom:8px;
}

.team-content span{

    display:inline-block;

    color:#dfe9ef;

    font-size:14px;
    font-weight:700;

    margin-bottom:18px;
}

.team-content p{
    font-size:15px;
    line-height:1.8;

    color:
    rgba(255,255,255,0.68);

    margin-bottom:0;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes teamFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-20px);
    }

}.team-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,0.06),
    transparent);

    opacity:0;

    transition:0.45s ease;

    z-index:1;
}

.team-card:hover::before{
    opacity:1;
}




/* =========================================
   CONTACT SECTION
========================================= */

.creative-contact-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;

    background:
    linear-gradient(
    135deg,
    #f5f8fb 0%,
    #eef3f7 100%);
}

/* =========================================
   SHAPES
========================================= */

.creative-shape{
    position:absolute;
    border-radius:50%;
}

.shape-one{
    width:420px;
    height:420px;

    top:-180px;
    left:-120px;

    background:
    radial-gradient(
    rgba(123,150,169,0.12),
    transparent);
}

.shape-two{
    width:320px;
    height:320px;

    bottom:-120px;
    right:-120px;

    background:
    radial-gradient(
    rgba(13,43,69,0.05),
    transparent);
}

/* =========================================
   TOP INFO CARDS
========================================= */

.creative-info-card{
    position:relative;

    height:100%;

    padding:40px 35px;

    border-radius:24px;

    background:#fff;

    transition:0.4s ease;

    overflow:hidden;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.05);
}

.creative-info-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 30px 80px rgba(0,0,0,0.10);
}

.creative-info-icon{
    width:72px;
    height:72px;

    border-radius:20px;

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

    margin-bottom:25px;

    background:
    linear-gradient(
    135deg,
    #7b96a9,
    #5f7888);

    color:#fff;

    font-size:24px;

    box-shadow:
    0 15px 35px rgba(123,150,169,0.25);
}

.creative-info-card h4{
    font-size:24px;
    font-weight:800;

    color:#0b132b;

    margin-bottom:15px;
}

.creative-info-card p{
    margin:0;

    line-height:1.9;

    color:#667085;
}

/* =========================================
   DARK CONTACT WRAPPER
========================================= */

.creative-contact-wrapper{
    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #0d2b45 0%,
    #163b58 50%,
    #1e4b6d 100%);

    border:
    1px solid rgba(255,255,255,0.08);

    box-shadow:
    0 35px 90px rgba(0,0,0,0.20);
}

/* top glow */

.creative-contact-wrapper::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    top:-220px;
    right:-150px;

    background:
    radial-gradient(
    rgba(255,255,255,0.06),
    transparent);

    pointer-events:none;
}

/* bottom glow */

.creative-contact-wrapper::after{
    content:"";

    position:absolute;

    width:320px;
    height:320px;

    border-radius:50%;

    bottom:-180px;
    left:-120px;

    background:
    radial-gradient(
    rgba(123,150,169,0.12),
    transparent);

    pointer-events:none;
}

/* =========================================
   LEFT FORM AREA
========================================= */

.creative-form-area{
    position:relative;

    padding:70px;

    z-index:2;
}

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

.creative-form-header{
    margin-bottom:40px;
}

.creative-form-header span{
    display:inline-flex;

    padding:10px 22px;

    border-radius:50px;

    background:
    rgba(255,255,255,0.08);

    color:#fff;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;
}

.creative-form-header h3{
    font-size:52px;
    line-height:1.1;
    font-weight:900;

    color:#fff;
}

/* =========================================
   INPUTS
========================================= */

.creative-input{
    position:relative;
}

.creative-input i{
    position:absolute;

    left:22px;
    top:50%;

    transform:translateY(-50%);

    color:#dfe9ef;

    z-index:5;
}

.textarea-input i{
    top:28px;
    transform:none;
}

.creative-input .form-control{
    height:68px;

    border:none;

    border-radius:18px;

    background:
    rgba(255,255,255,0.08);

    border:
    1px solid rgba(255,255,255,0.08);

    padding-left:58px;

    color:#fff;

    box-shadow:none;

    transition:0.35s ease;
}

.creative-input textarea.form-control{
    height:auto;

    padding-top:22px;
}

.creative-input .form-control::placeholder{
    color:
    rgba(255,255,255,0.60);
}

.creative-input .form-control:focus{
    background:
    rgba(255,255,255,0.10);

    border-color:
    rgba(255,255,255,0.18);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.12);
}

/* select */

.creative-input select.form-control{
    appearance:none;
}

/* =========================================
   BUTTON
========================================= */

.creative-btn{
    border:none;

    padding:18px 36px;

    border-radius:60px;

    background:
    linear-gradient(
    135deg,
    #7b96a9,
    #5f7888);

    color:#fff;

    font-weight:700;

    transition:0.4s ease;

    box-shadow:
    0 15px 35px rgba(123,150,169,0.20);
}

.creative-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 25px 50px rgba(123,150,169,0.30);
}

/* =========================================
   RIGHT SIDE
========================================= */

.creative-contact-side{
    height:100%;

    background:
    linear-gradient(
    135deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.03));

    backdrop-filter:blur(12px);

    border-left:
    1px solid rgba(255,255,255,0.08);

    padding:70px 55px;

    display:flex;
    align-items:center;
}

/* =========================================
   SIDE CONTENT
========================================= */

.creative-side-content span{
    display:inline-flex;

    padding:10px 22px;

    border-radius:50px;

    background:
    rgba(255,255,255,0.10);

    color:#fff;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;
}

.creative-side-content h3{
    font-size:46px;
    line-height:1.15;
    font-weight:900;

    color:#fff;

    margin-bottom:35px;
}

/* =========================================
   HOURS
========================================= */

.creative-side-content ul{
    margin:0;
    padding:0;
}

.creative-side-content li{
    display:flex;
    justify-content:space-between;

    gap:20px;

    padding:18px 0;

    border-bottom:
    1px solid rgba(255,255,255,0.12);

    list-style:none;
}

.creative-side-content strong{
    color:#fff;
}

.creative-side-content li span{
    background:none;
    padding:0;
    margin:0;

    color:
    rgba(255,255,255,0.72);

    font-size:15px;
}

/* =========================================
   CALL BUTTON
========================================= */

.creative-call-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;

    margin-top:40px;

    padding:18px 34px;

    border-radius:60px;

    text-decoration:none;

    background:#fff;

    color:#0d2b45;

    font-weight:700;

    transition:0.4s ease;
}

.creative-call-btn:hover{
    transform:translateY(-5px);

    color:#0d2b45;

    background:#dfe9ef;
}

/* =========================================
   MAP
========================================= */

.creative-map-section{
    line-height:0;
}

.creative-map-section iframe{
    width:100%;
    height:550px;

    border:none;

    filter:grayscale(10%);
}

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

@media(max-width:991px){

    .creative-form-area,
    .creative-contact-side{
        padding:50px 35px;
    }

    .creative-form-header h3,
    .creative-side-content h3{
        font-size:38px;
    }

}

@media(max-width:768px){

    .creative-contact-section{
        padding:80px 0;
    }

    .creative-contact-wrapper{
        border-radius:24px;
    }

    .creative-form-area,
    .creative-contact-side{
        padding:35px 25px;
    }

    .creative-form-header h3,
    .creative-side-content h3{
        font-size:30px;
    }

    .creative-map-section iframe{
        height:400px;
    }

}





/* =========================================
   SERVICES SECTION DARK
========================================= */

.our-services-sect{
    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
    linear-gradient(
    135deg,
    #0d2b45 0%,
    #163b58 50%,
    #1e4b6d 100%);
}

/* decorative circles */

.our-services-sect::before{
    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

    top:-220px;
    left:-150px;

    background:
    radial-gradient(
    rgba(255,255,255,0.05),
    transparent);
}

.our-services-sect::after{
    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    bottom:-180px;
    right:-120px;

    background:
    radial-gradient(
    rgba(123,150,169,0.15),
    transparent);
}

/* =========================================
   SERVICE CARD
========================================= */
.our-services-sect .col-lg-4{ margin-bottom:30px;}
.service-box{
    position:relative;

    overflow:hidden;

    height:100%;

    margin-bottom:30px;

    border-radius:28px;

    background:
    rgba(255,255,255,0.06);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(10px);

    transition:0.45s ease;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.18);
}

.service-box:hover{
    transform:translateY(-10px);

    box-shadow:
    0 35px 80px rgba(0,0,0,0.25);
}

/* image */

.service-box__img{
    overflow:hidden;
}

.service-box__img img{
    width:100%;
    height:260px;

    object-fit:cover;

    transition:0.6s ease;
}

.service-box:hover .service-box__img img{
    transform:scale(1.08);
}

/* icon */

.service-box__icon{
    width:80px;
    height:80px;

    border-radius:22px;

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

    margin:-40px auto 25px;

    position:relative;

    z-index:2;

    background:
    linear-gradient(
    135deg,
    #7b96a9,
    #5f7888);

    color:#fff;

    font-size:30px;

    box-shadow:
    0 15px 35px rgba(123,150,169,0.25);
}

/* title */

.service-box__title{
    font-size:22px;
    font-weight:800;

    text-align:center;

    color:#fff;

    margin-bottom:15px;

    padding:0 25px;
}

/* description */

.service-box__desc{
    text-align:center;

    color:
    rgba(255,255,255,0.72);

    line-height:1.9;

    padding:0 30px;

    margin-bottom:30px;
}

/* button */

/*.service-box__btn{
    display:flex;

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

    gap:10px;

    padding:18px;

    text-decoration:none;

    font-weight:700;

    color:#fff;

    border-top:
    1px solid rgba(255,255,255,0.08);

    transition:0.4s ease;
}
*/
.service-box__btn:hover{
    color:#dfe9ef;
}

.service-box__btn i{
    transition:0.4s ease;
}

.service-box__btn:hover i{
    transform:translateX(6px);
}

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

@media(max-width:768px){

    .our-services-sect{
        padding:80px 0;
    }

    .service-box__title{
        font-size:24px;
    }

    .service-box__img img{
        height:220px;
    }

}







.service-detail-section{
    padding:120px 0;
}

.service-detail-row{
  /*  display:flex;
    align-items:center;
    gap:80px;*/

    margin-bottom:120px;
}

.service-detail-row.reverse{
    flex-direction:row-reverse;
}

.service-detail-image{
    flex:1;
}


.team-section-title{margin-bottom:30px;}

.service-detail-image img{
    width:100%;

    border-radius:30px;

    box-shadow:
    0 25px 70px rgba(0,0,0,0.08);
}

.service-detail-content{
    flex:1;
}

.service-detail-content span{
    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

    background:
    rgba(123,150,169,0.12);

    color:#7b96a9;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:25px;
}

.service-detail-content h2{
    font-size:48px;

    font-weight:900;

    line-height:1.15;

    color:#0b132b;

    margin-bottom:25px;
}

.service-detail-content p{
    font-size:16px;

    line-height:1.9;

    color:#667085;
}

/* Mobile */

@media(max-width:991px){

    .service-detail-row,
    .service-detail-row.reverse{

        flex-direction:column;

        gap:40px;

        margin-bottom:80px;
    }

    .service-detail-content h2{
        font-size:36px;
    }

}

/* =========================================
   TESTIMONIAL COUNTER SECTION
========================================= */

.testimonial-counter-section{
    padding:100px 0;
    background:#fff;
}

.counter-box{
    padding:30px;
}

.counter-box h2{
    font-size:60px;
    font-weight:900;

    color:#0d2b45;

    margin-bottom:10px;
}

.counter-box p{
    margin:0;

    font-size:16px;
    font-weight:600;

    color:#667085;
}

/* =========================================
   FEATURED TESTIMONIAL
========================================= */

.featured-testimonial{
    padding:120px 0;

    background:
    linear-gradient(
    135deg,
    #0d2b45,
    #163b58);
}

.featured-review{
    max-width:900px;

    margin:auto;

    text-align:center;

    padding:80px 60px;

    border-radius:30px;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(10px);
}

/* quote */

.quote-icon{
    width:90px;
    height:90px;

    border-radius:50%;

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

    margin:auto;
    margin-bottom:35px;

    background:
    linear-gradient(
    135deg,
    #7b96a9,
    #5f7888);

    color:#fff;

    font-size:32px;
}

.featured-review p{
    font-size:24px;

    line-height:1.9;

    color:#fff;

    margin-bottom:45px;
}

/* author */

.review-author{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:20px;
}

.review-author img{
    width:80px;
    height:80px;

    border-radius:50%;

    object-fit:cover;
}

.review-author h4{
    margin-bottom:5px;

    color:#fff;

    font-size:24px;
    font-weight:800;
}

.review-author span{
    color:
    rgba(255,255,255,0.70);
}

/* =========================================
   TESTIMONIAL GRID
========================================= */

.testimonial-grid-section{
    padding:120px 0;

    background:#f7fafc;
}

.testimonial-card{
    position:relative;

    height:100%;

    padding:40px;

    border-radius:24px;

    background:#fff;

    transition:0.4s ease;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.06);
}

.testimonial-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 30px 80px rgba(0,0,0,0.10);
}

/* stars */

.testimonial-stars{
    margin-bottom:25px;
}

.testimonial-stars i{
    color:#f7b500;

    margin-right:3px;
}

.testimonial-card p{
    font-size:16px;

    line-height:1.9;

    color:#667085;

    margin-bottom:30px;
}

/* user */

.testimonial-user{
    display:flex;
    align-items:center;

    gap:15px;
}

.testimonial-user img{
    width:65px;
    height:65px;

    border-radius:50%;

    object-fit:cover;
}

.testimonial-user h5{
    margin-bottom:4px;

    color:#0b132b;

    font-size:18px;
    font-weight:800;
}

.testimonial-user span{
    color:#7b96a9;

    font-size:14px;
}

/* =========================================
   REVIEW PLATFORM SECTION
========================================= */

.review-platform-section{
    padding:120px 0;

    background:
    linear-gradient(
    135deg,
    #0d2b45,
    #163b58);
}

.review-platform-box{
    display:flex;

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

    gap:40px;

    padding:60px;

    border-radius:30px;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(255,255,255,0.08);
}

.review-platform-box h2{
    font-size:48px;
    font-weight:900;

    color:#fff;

    margin-bottom:15px;
}

.review-platform-box p{
    color:
    rgba(255,255,255,0.72);

    margin:0;
}

/* rating */

.platform-rating{
    text-align:center;
}

.platform-rating h3{
    font-size:72px;
    font-weight:900;

    color:#fff;

    margin-bottom:10px;
}

.platform-rating span{
    color:
    rgba(255,255,255,0.75);

    font-size:18px;
}

/* =========================================
   CTA SECTION
========================================= */

.testimonial-cta{
    padding:120px 0;

    background:#fff;
}

.cta-box{
    text-align:center;

    padding:80px 60px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #7b96a9,
    #5f7888);
}

.cta-box h2{
    font-size:52px;
    font-weight:900;

    color:#fff;

    margin-bottom:20px;
}

.cta-box p{
    color:
    rgba(255,255,255,0.85);

    margin-bottom:35px;
}

.cta-btn{
    display:inline-flex;

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

    padding:18px 35px;

    border-radius:60px;

    background:#fff;

    color:#0d2b45;

    text-decoration:none;

    font-weight:700;

    transition:0.4s ease;
}

.cta-btn:hover{
    transform:translateY(-5px);

    color:#0d2b45;
}

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

@media(max-width:991px){

    .review-platform-box{
        flex-direction:column;

        text-align:center;
    }

    .featured-review{
        padding:50px 35px;
    }

    .featured-review p{
        font-size:20px;
    }

    .review-platform-box h2{
        font-size:38px;
    }

    .cta-box h2{
        font-size:40px;
    }

}

@media(max-width:768px){

    .testimonial-counter-section,
    .featured-testimonial,
    .testimonial-grid-section,
    .review-platform-section,
    .testimonial-cta{
        padding:80px 0;
    }

    .counter-box h2{
        font-size:42px;
    }

    .featured-review p{
        font-size:18px;
    }

    .review-platform-box{
        padding:40px 25px;
    }

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

    .platform-rating h3{
        font-size:52px;
    }

    .cta-box{
        padding:50px 25px;
    }

    .cta-box h2{
        font-size:32px;
    }

}


/* =========================================
   BLOG PAGE
========================================= */

.blog-page-section{
    padding:120px 0;

    background:
    linear-gradient(
    135deg,
    #f8fbff,
    #eef4f8);
}

/* title */

.blog-subtitle{
    display:inline-flex;

    padding:10px 22px;

    border-radius:50px;

    background:
    rgba(123,150,169,0.12);

    color:#7b96a9;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:25px;
}

.blog-main-title{
    font-size:56px;
    font-weight:900;

    color:#0b132b;

    margin-bottom:20px;
}

.blog-main-desc{
    max-width:700px;

    margin:auto;

    color:#667085;

    line-height:1.9;
}

/* =========================================
   FEATURED BLOG
========================================= */

.featured-blog{
    overflow:hidden;

    border-radius:30px;

    background:#fff;

    box-shadow:
    0 25px 80px rgba(0,0,0,0.08);
}

.featured-blog-image img{
    width:100%;
    height:500px;

    object-fit:cover;
}

.featured-blog-content{
    padding:60px;
}

.featured-blog-content span{
    display:inline-block;

    color:#7b96a9;

    font-weight:700;

    margin-bottom:20px;
}

.featured-blog-content h2{
    font-size:46px;

    font-weight:900;

    line-height:1.2;

    color:#0b132b;

    margin-bottom:25px;
}

.featured-blog-content p{
    color:#667085;

    line-height:1.9;

    margin-bottom:30px;
}

.blog-read-btn{
    display:inline-flex;

    padding:16px 32px;

    border-radius:60px;

    background:
    linear-gradient(
    135deg,
    #7b96a9,
    #5f7888);

    color:#fff;

    text-decoration:none;

    font-weight:700;
}

/* =========================================
   BLOG CARD
========================================= */

.blog-card{
    height:100%;

    overflow:hidden;

    border-radius:24px;

    background:#fff;

    transition:.4s;

    box-shadow:
    0 15px 50px rgba(0,0,0,0.05);
}

.blog-card:hover{
    transform:translateY(-10px);
}

.blog-card-image{
    overflow:hidden;
}

.blog-card-image img{
    width:100%;
    height:260px;

    object-fit:cover;

    transition:.6s;
}

.blog-card:hover img{
    transform:scale(1.08);
}

.blog-card-content{
    padding:30px;
}

.blog-card-content span{
    color:#7b96a9;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;
}

.blog-card-content h3{
    font-size:26px;

    font-weight:800;

    line-height:1.3;

    color:#0b132b;

    margin:15px 0;
}

.blog-card-content p{
    color:#667085;

    line-height:1.8;

    margin-bottom:20px;
}

.blog-card-content a{
    color:#0d2b45;

    font-weight:700;

    text-decoration:none;
}













.blog-details-page{
    padding:100px 0;
}

.blog-details-content{
    padding-right:40px;
}

/* Featured Image */

.blog-featured-image{
    margin-bottom:30px;
}

.blog-featured-image img{
    width:100%;
    border-radius:20px;
}

/* Meta */

.blog-meta{
    display:flex;
    gap:20px;
    flex-wrap:wrap;

    margin-bottom:25px;
}

.blog-meta span{
    color:#7b96a9;
    font-size:14px;
    font-weight:600;
}

.blog-category{
    background:#eef4f8;
    padding:8px 18px;
    border-radius:30px;
}

/* Title */

.blog-details-content h1{
    font-size:52px;
    line-height:1.15;
    font-weight:800;

    color:#0d2b45;

    margin-bottom:30px;
}

.blog-details-content h2{
    font-size:36px;
    font-weight:700;

    color:#0d2b45;

    margin-top:40px;
    margin-bottom:20px;
}

.blog-details-content p{
    color:#5c6670;
    line-height:2;
    margin-bottom:25px;
}

/* Checklist */

.blog-check-list{
    margin:40px 0;
}

.blog-check-list ul{
    padding:0;
    margin:0;
}

.blog-check-list li{
    list-style:none;
    margin-bottom:15px;

    color:#0d2b45;
    font-weight:500;
}

.blog-check-list li::before{
    content:"✓";

    color:#5f7888;

    margin-right:12px;

    font-weight:bold;
}

/* Gallery */

.blog-gallery{
    margin:40px 0;
}

.blog-gallery img{
    width:100%;
    border-radius:20px;
}

/* Sidebar */

.blog-sidebar{
    background:#edf6f2;

    padding:35px;

    border-radius:20px;

    position:sticky;
    top:120px;
}

/* Search */

.search-widget form{
    position:relative;
}

.search-widget input{
    width:100%;
    height:55px;

    border:none;

    border-radius:50px;

    padding:0 55px 0 20px;

    outline:none;
}

.search-widget button{
    position:absolute;

    right:5px;
    top:5px;

    width:45px;
    height:45px;

    border:none;

    border-radius:50%;

    background:none;

    color:#0d2b45;
}

/* Widget */

.sidebar-widget{
    margin-bottom:35px;
}

.sidebar-widget h3{
    font-size:28px;
    font-weight:700;

    color:#0d2b45;

    margin-bottom:30px;
}

/* Recent Post */

.recent-post{
    display:flex;
    gap:15px;

    margin-bottom:25px;
}

.recent-post img{
    width:90px;
    height:80px;

    object-fit:cover;

    border-radius:10px;
}

.recent-post h5{
    font-size:18px;
    line-height:1.4;

    margin-bottom:10px;
}

.recent-post a{
    text-decoration:none;

    color:#5f7888;

    font-weight:600;
}

/* Responsive */

@media(max-width:991px){

    .blog-details-content{
        padding-right:0;
        margin-bottom:50px;
    }

    .blog-sidebar{
        position:static;
    }

    .blog-details-content h1{
        font-size:40px;
    }

}

@media(max-width:768px){

    .blog-details-content h1{
        font-size:30px;
    }

    .blog-details-content h2{
        font-size:24px;
    }

}
.service-detail-image {
  flex: 1;
  max-width: 90%;
}

/* =========================================
   GALLERY SECTION
========================================= */

.gallery-section{
    padding:100px 0;

    background:
    linear-gradient(
    to bottom,
    #ffffff,
    #f8fbfd);
}

/* =========================================
   HEADING
========================================= */

.gallery-heading{
    max-width:800px;

    margin:auto;

    margin-bottom:60px;
}

.gallery-heading span{
    display:inline-block;

    padding:10px 20px;

    background:#eef4f8;

    color:#7b96a9;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:20px;
}

.gallery-heading h2{
    font-size:48px;

    font-weight:800;

    color:#0d2b45;

    margin-bottom:20px;
}

.gallery-heading p{
    color:#5c6670;

    line-height:1.9;
}

/* =========================================
   GALLERY ITEM
========================================= */

.evtC{
    position:relative;

    overflow:hidden;

    border-radius:24px;

    box-shadow:
    0 15px 35px rgba(13,43,69,.08);

    transition:.4s;
}

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

.grid{
    position:relative;
}

.effect-oscar{
    position:relative;

    overflow:hidden;

    margin:0;
}

.effect-oscar img{
    width:100%;

    height:320px;

    object-fit:cover;

    transition:.6s;
}

.effect-oscar:hover img{
    transform:scale(1.08);
}

/* =========================================
   OVERLAY
========================================= */

.effect-oscar figcaption{
    position:absolute;

    inset:0;

    display:flex;

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

    background:
    rgba(13,43,69,.75);

    opacity:0;

    transition:.4s;
}

.effect-oscar:hover figcaption{
    opacity:1;
}

/* =========================================
   ICON
========================================= */

.gallery-icon{
    width:70px;
    height:70px;

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

    border-radius:50%;

    background:#fff;

    color:#0d2b45;

    font-size:22px;

    transform:scale(.8);

    transition:.4s;
}

.effect-oscar:hover .gallery-icon{
    transform:scale(1);
}

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

@media(max-width:991px){

    .gallery-heading h2{
        font-size:38px;
    }

}

@media(max-width:768px){

    .gallery-section{
        padding:70px 0;
    }

    .gallery-heading h2{
        font-size:30px;
    }

    .effect-oscar img{
        height:260px;
    }

}


/* =========================================
   VIDEO GALLERY
========================================= */

.video-gallery-section{
    padding:100px 0;

    background:
    linear-gradient(
    to bottom,
    #ffffff,
    #f8fbfd);
}

/* =========================================
   HEADING
========================================= */

.gallery-heading{
    max-width:800px;
    margin:auto;
    margin-bottom:60px;
}

.gallery-heading span{
    display:inline-block;

    padding:10px 20px;

    background:#eef4f8;

    color:#7b96a9;

    border-radius:50px;

    font-size:13px;
    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:20px;
}

.gallery-heading h2{
    font-size:46px;
    font-weight:800;

    color:#0d2b45;

    margin-bottom:20px;
}

.gallery-heading p{
    color:#5c6670;
    line-height:1.9;
}

/* =========================================
   VIDEO CARD
========================================= */

.video-card{
    position:relative;

    overflow:hidden;

    border-radius:24px;

    box-shadow:
    0 15px 40px rgba(13,43,69,.08);

    transition:.4s;
}

.video-card:hover{
    transform:translateY(-8px);
}

.video-card img{
    width:100%;
    height:300px;

    object-fit:cover;

    transition:.6s;
}

.video-card:hover img{
    transform:scale(1.08);
}

/* =========================================
   OVERLAY
========================================= */

.video-overlay{
    position:absolute;

    inset:0;

    background:
    rgba(13,43,69,.45);

    display:flex;

    align-items:center;
    justify-content:center;
}

/* =========================================
   PLAY BUTTON
========================================= */

.video-btn{
    width:90px;
    height:90px;

    border:none;

    border-radius:50%;

    background:#fff;

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

    color:#0d2b45;

    font-size:28px;

    cursor:pointer;

    position:relative;

    transition:.4s;
}

.video-btn:hover{
    background:#7b96a9;

    color:#fff;
}

.video-btn i{
    position:relative;
    z-index:5;
}

/* pulse */

.video-btn:before{
    content:"";

    position:absolute;

    width:110px;
    height:110px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.7);

    animation:pulse 2s infinite;
}

@keyframes pulse{

    0%{
        transform:scale(.8);
        opacity:1;
    }

    100%{
        transform:scale(1.4);
        opacity:0;
    }

}

/* =========================================
   MODAL
========================================= */

.video-modal .modal-content{
    background:#000;

    border:none;

    border-radius:20px;

    overflow:hidden;
}

.video-modal .btn-close{
    position:absolute;

    top:15px;
    right:15px;

    z-index:100;

    background-color:#fff;

    opacity:1;
}

.video-modal iframe{
    width:100%;
    height:100%;
}

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

@media(max-width:991px){

    .gallery-heading h2{
        font-size:38px;
    }

}

@media(max-width:768px){

    .video-gallery-section{
        padding:70px 0;
    }

    .gallery-heading h2{
        font-size:30px;
    }

    .video-card img{
        height:240px;
    }

    .video-btn{
        width:75px;
        height:75px;

        font-size:24px;
    }

}






.banner-shape {
    position: absolute;
    animation: float 6s ease-in-out infinite;
}

.shape-2 {
    animation-delay: 3s;
}

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

.about-banner-content h1{
    animation:popTitle 1s ease-out;
}

@keyframes popTitle{
    0%{
        opacity:0;
        transform:scale(0.5) rotateX(90deg);
    }
    100%{
        opacity:1;
        transform:scale(1) rotateX(0);
    }
}





.section-about__content div, .section-about__content p{color:#666;
    font-size:16px;
    line-height:2;
    text-align:justify;}


.service-detail-content p,
.service-detail-content div{
    color:#666;
    font-size:16px;
    line-height:2;
    text-align:justify;
}


.chief-content p, .chief-content div{  color:#666;
    font-size:16px;
    line-height:2;
    text-align:justify;}




.service-detail-content ul{
    margin-top:20px;
    padding:0;
    list-style:none;
    columns:2;
    column-gap:40px;
}

.service-detail-content ul li{
    break-inside:avoid;
    margin-bottom:12px;
    padding-left:28px;
    position:relative;
    color:#444;
    font-weight:500;
}

.service-detail-content ul li::before{
    content:"";
    width:10px;
    height:10px;
    background:#7a96a8;
    border-radius:50%;
    position:absolute;
    left:0;
    top:8px;
}

@media (max-width:768px){
    .service-detail-content ul{
        columns:1;
    }
}







	.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    z-index: 9999;
    transition: all 0.3s ease;
    animation: whatsappPulse 2s infinite;
}

/* Hover effect */
.whatsapp-float:hover {
    transform: translateY(-5px) scale(1.08);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

/* Tooltip */
.whatsapp-tooltip {
    position: absolute;
    right: 75px;
    background: #128C7E;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    opacity: 0;
    white-space: nowrap;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* Pulse animation */
@keyframes whatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}







@media all and (max-width: 760px) {

	.menu-button {
    background: rgba(0, 0, 0, 0) url("../images/menu-btn.png") no-repeat scroll 0 0;
    cursor: pointer;
    float: right;
    height: 21px;
    position: relative;
    width: 38px;
    z-index: 1000;
}
#cssmenu > ul > li{ margin-left:0px;}
#cssmenu > ul > li a{ padding:8px!important;}
#cssmenu > ul > li{ padding:0px!important;}
#cssmenu > ul > li a.active{ border:none;}

#cssmenu #menu-button{ top:-4px;}
#cssmenu ul{ margin-top:38px;}

#cssmenu > ul ul{ margin-top:0px;}
#cssmenu ul ul li a{ font-size:12px; text-transform:capitalize;}

#cssmenu{ top:5px;}
#cssmenu #menu-button{ background:none;}



#cssmenu #menu-button::before{ background:#ff000a;}

#cssmenu #menu-button::after{ border-top:2px solid #ff000a; border-bottom:2px solid #ff000a;}

#cssmenu ul{ margin-top:35px!important; }
#cssmenu ul ul{ margin-top:0px!important;background:#a7bf23;}
#cssmenu ul{ padding:0px; border-bottom-right-radius:2px; border-bottom-left-radius:2px;}

#cssmenu ul{ background:#404040;}
		#cssmenu li a{ border-top:1px solid #373636!important;}

	#cssmenu li ul   a{ border-bottom:1px solid #373636!important; border-top:none!important;}

    #cssmenu > ul > li a {
        font-size: 14px;
        padding: 12px !important;
    }

#cssmenu .submenu-button{ width:50px; height:50px;}

.fix-height{}
#cssmenu > ul > li:first-child {  background:none!important;}

#cssmenu > ul > li a.active{ border-left:5px solid #f039a7; color:#f039a7!important;}
#cssmenu > ul > li a{ padding-left:18px!important;}
#cssmenu > ul  ul li a{ padding-left:35px!important; position:relative;}

#cssmenu > ul  ul li a:before{ content:'\f105'; font-family:FontAwesome; position:absolute; left:25px; color:#FFF;}

#cssmenu ul{ margin-top:39px!important;}
#cssmenu ul{  width:102%;}
#cssmenu ul ul li{ border-bottom:none;}

#cssmenu ul ul li{ line-height:22px;}

#cssmenu{ margin-top:2px!important;}
#cssmenu > ul > li{ font-size:12px!important;}
#cssmenu ul ul{ padding-top:0px!important;}
#cssmenu > ul > li a.active{ border-left:0px;}
#cssmenu > ul > li a.active{color:#b5b5b5!important;}


#cssmenu > ul > li a:hover{color:#930033;}


#cssmenu{ z-index:1;}

.menu-button{ margin-top:0px!important;}
#cssmenu{ padding:10px 0px!important;}

 #cssmenu{ top:30px;}

.modern-top-bar {display:none;}

.main-header {
  padding: 9px 0;}
  
  .logo img {
  max-height: 38px;
}

  #cssmenu {
    top: 5px;
  }
  
  
  .hero-slider #dentalCarousel .carousel-item {
  height:auto;
  min-height: none;
  position: relative;
}
  
  .hero-slider #dentalCarousel .carousel-item { min-height:100px!important}
.hero-slider .custom-caption{ bottom:30%;}
 .hero-slider .hero-title {
    font-size: 19px;
  }
  
   .hero-slider .hero-subtitle {
    font-size: 15px;
  }
  .hero-slider .hero-highlight{ display:none;}
  .hero-slider .hero-btn {
  
  padding: 8px 19px;
  
  font-size: 13px;
  border-radius: 4px;
}

.section-about__tagline{ font-size:25px;}

.section-about__title {
  font-size: 25px;}
  
.dental-services__title{ font-size:20px;}
 .about-inner-banner {
    padding: 60px 0 60px;
  }
  .section-about {
  padding: 40px 0;}
  
  .team-section-title h2 {
  font-size: 25px;}
  
  .our-team-section .team-section-title{ margin-bottom:35px;}
  
   .service-detail-content h2 {
    font-size: 22px;
  }
  .service-detail-content p {
  font-size: 14px;
  line-height: 25px;
  color: #667085;
}

.blog-main-title {
  font-size: 32px;}
.featured-blog-content h2 {
  font-size: 22px;}
  
  .featured-blog-content {
  padding: 30px;
}
.blog-card-content h3 {
  font-size: 21px;}
  
  .side-content h3 {
    font-size: 22px;
  }
  
  #cssmenu > ul > li a {
    font-size: 12px;}
	#cssmenu > ul ul {box-shadow:none; border:0px;}

	.section-about__year-badge{margin-top:77px;}

}