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

    Template Name: Bahon - Travel Agency HTML5 Template
    Template URI: https://www.stthemes.com/tf/bahon
    Description: Bahon - Travel Agency HTML5 Template
    Author: TemplateMonster
    Version: 1.0

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    01. Theme default CSS	
    02. Header CSS
    03. Slider CSS
    04. About CSS
    05. Tour CSS
    06. Best Money CSS
    07. Best Things CSS
    08. Team CSS
    09. Package CSS
    10. Testimonial CSS
    11. Blog CSS
    12. Footer CSS

-----------------------------------------------------------------------------------*/
/*----------------------------------------*/
/*  01. Theme default CSS
/*----------------------------------------*/
/* 1. Theme default css */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Poppins:wght@400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }
html,body{
  overflow-x: hidden;
}


.modal-dialog-centered {
  display: flex;
  align-items: center; /* vertical center */
  min-height: 100vh;
  justify-content: center; /* horizontal center */
}
.modal {
  z-index: 9999 !important; /* higher than typical header */
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: #252e45;
  line-height: 26px; }

.w-img img {
  width: 100%; }

.m-img img {
  max-width: 100%; }

.transition-3,
span {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

*::after,
*::before,
input,
textarea {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

.after::after,
.before::before {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  position: absolute;
  content: ''; }

a,
.btn {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

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

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

a,
button {
  color: inherit;
  outline: none;
  border: none;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

button:focus {
  outline: 0;
  border: 0; }

.uppercase {
  text-transform: uppercase; }

.capitalize {
  text-transform: capitalize; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  color: #252e45;
  margin-top: 0px;
  font-weight: 700;
  line-height: 1;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s; }

h1 {
  font-size: 40px;
  font-weight: 700; }

h2 {
  font-size: 35px; }

h3 {
  font-size: 28px; }

h4 {
  font-size: 22px; }

h5 {
  font-size: 18px; }

h6 {
  font-size: 16px; }

ul {
  margin: 0px;
  padding: 0px; }

li {
  list-style: none; }

p {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: normal;
  color: #252e45;
  margin-bottom: 15px;
  line-height: 26px; }

*::-moz-selection {
  background: #ff6600;
  color: #ffffff;
  text-shadow: none; }

::-moz-selection {
  background: #ff6600;
  color: #ffffff;
  text-shadow: none; }

::selection {
  background: #ff6600;
  color: #ffffff;
  text-shadow: none; }

/*--
    - Input Placeholder
-----------------------------------------*/
*::-moz-placeholder {
  color: #252e45;
  font-size: 14px;
  opacity: 1; }

*::placeholder {
  color: #252e45;
  font-size: 14px;
  opacity: 1; }

/*--
    - Common Classes
-----------------------------------------*/
.fix {
  overflow: hidden; }

.clear {
  clear: both; }

.f-left {
  float: left; }

.f-right {
  float: right; }

.p-relative {
  position: relative; }

.p-absolute {
  position: absolute; }

/*--
    - Background color
-----------------------------------------*/
.grey-bg {
  background: #f7faff; }

.grey-bg-2 {
  background: #ebf8ff; }

.grey-bg-4 {
  background: #f9f9f9; }

.white-bg {
  background: #ffffff; }

.black-bg {
  background: #252e45; }

.black-soft-bg {
  background: #b0b0b0; }

.footer-bg {
  background: #001940; }

.footer-bottom-bg {
  background: #00122f; }

.theme-bg {
  background: #ff6600; }

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

.white-color {
  color: #ffffff; }

.black-color {
  color: #252e45; }

.theme-color {
  color: #ff6600; }

.nice-select ul li {
  display: block; }

/* btn */
.btn {
  font-size: 14px;
  color: #ffffff;
  background-color: #ff6600;
  font-family: "Poppins", sans-serif;
  -webkit-border-radius: 21px;
  -moz-border-radius: 21px;
  border-radius: 21px;
  height: 42px;
  line-height: 40px;
  padding: 0 25px;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent; }

.btn:hover {
  background: #252e45;
  color: #ffffff; }

.btn.btn-border {
  border: 1px solid #ffffff;
  background: transparent; }

.btn.btn-border:hover {
  background: #ffffff;
  color: #252e45; }

.btn.btn-half-square {
  background: #ff6600;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.btn.btn-half-square:hover {
  background: #252e45;
  color: #ffffff; }

.btn.btn-square {
  background: #ff6600;
  border-radius: 0; }

.btn.btn-square:hover {
  background: #252e45;
  color: #ffffff; }

/* section title */
.sec-title h1 {
  font-size: 42px;
  line-height: 70px;
  margin-bottom: 4px; }

.sec-title p {
  padding: 0 40px;
  font-size: 16px;
  line-height: 25px; }

/* social */
.social ul li {
  display: inline-block;
  margin-right: 13px; }

.social ul li a {
  font-size: 13px; }

.social ul li a:hover {
  color: #ff6600; }

/* scroll to top */
#scroll a {
  position: fixed;
  right: 10px;
  bottom: 15px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  color: #252e45;
  list-style-type: none;
  background: transparent;
  margin-right: 20px;
  border: 1px solid #252e45;
  z-index: 999; }

#scroll a:hover {
  background: #252e45;
  color: #ffffff; }

/* page title */
.page-title {
  position: relative; }

.page-title-inner {
  position: relative;
  min-height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

.page-title-inner::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); }

.page-breadcrumb h1 {
  font-size: 24px;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: -5px; }

.page-breadcrumb .breadcrumb {
  background: transparent; }

.page-breadcrumb .breadcrumb-item {
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  color: #ffffff; }

.page-breadcrumb .breadcrumb-item.active::before {
  color: #ffffff; }

.page-details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; }

.page-details-breadcrumb .breadcrumb {
  background: #f5f5f5;
  border-radius: 0;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  margin-bottom: 0;
  padding: 20px 30px; }

.page-details-breadcrumb .breadcrumb-item {
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  color: #333b55; }

.page-details-breadcrumb .breadcrumb-item.active::before {
  content: '|';
  color: #ff6600; }

.page-details-breadcrumb .breadcrumb-item.active {
  color: #ff6600; }

/*----------------------------------------*/
/*  02. HEADER CSS START 
/*----------------------------------------*/
.header-area {
  background: rgba(0, 0, 0, 0.5);
  z-index: 11; }

.header-area.header-2 {
  background: transparent;
  padding: 45px 0; }

.header-transparent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%; }

.header-top {
  padding-top: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid #d1d3d4; }

.header-top-left span {
  color: #ffffff;
  margin-right: 25px;
  font-family: "Poppins", sans-serif; }

.header-top-left span i {
  margin-right: 8px; }

.header-lang .nice-select,
.header-currency .nice-select {
  background-color: transparent;
  padding-right: 25px;
  padding-left: 0; }

.header-lang .nice-select .list,
.header-currency .nice-select .list {
  margin-top: 10px; }

.header-lang .nice-select::after,
.header-currency .nice-select::after {
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff; }

.header-lang .nice-select span,
.header-currency span {
  font-size: 16px;
  font-family: "Poppins", sans-serif;
  color: #ffffff;
  line-height: 24px; }

.header-action {
  margin-left: 7px; }

.header-action a {
  display: inline-block;
  color: #ffffff;
  position: relative;
  padding-right: 10px;
  margin-right: 4px;
  font-family: "Poppins", sans-serif;
  font-weight: 400; }

.header-action a:hover {
  color: #ff6600; }

.header-action a:last-child {
  padding-right: 0;
  margin-right: 0px; }

.header-action a::after {
  position: absolute;
  content: '';
  top: 50%;
  right: 0;
  width: 2px;
  height: 12px;
  background-color: #d1d3d4;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

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

/* main menu area start */
.main-menu ul li {
  position: relative;
  margin-right: 30px;
  display: inline-block; }

.main-menu ul li a {
  position: relative;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
  padding: 30px 0;
  padding-top: 32px;
  display: block; }

.main-menu ul li a.arrow {
  position: relative;
  padding-right: 15px; }

.main-menu ul li a.arrow::after {
  position: absolute;
  content: '\f0dd';
  right: 0px;
  top: 48%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  font-family: "Font Awesome 5 Pro"; }

.main-menu ul li:hover > a {
  color: #ff6600; }

.main-menu ul li > a::before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  height: 2px;
  background-color: #ff6600; }

.main-menu ul li:hover > a::before {
  width: 100%; }

/* submenu area */
.main-menu ul li ul.submenu {
  position: absolute;
  top: 120%;
  left: 0;
  min-width: 200px;
  background: #ffffff;
  -webkit-box-shadow: 0px 5px 37px 0px rgba(16, 145, 255, 0.15);
  -moz-box-shadow: 0px 5px 37px 0px rgba(16, 145, 255, 0.15);
  box-shadow: 0px 5px 37px 0px rgba(16, 145, 255, 0.15);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

.main-menu ul li ul.submenu li {
  display: block;
  margin-right: 0;
  border-bottom: 1px solid rgba(89, 92, 94, 0.7); }

.main-menu ul li ul.submenu li:last-child {
  border-bottom: none; }

.main-menu ul li ul.submenu li a {
  font-size: 14px;
  text-transform: capitalize;
  color: #252e45;
  padding: 10px 15px; }

.main-menu ul li ul.submenu li a::before {
  top: 50%;
  left: 0;
  right: auto;
  bottom: auto;
  margin: auto;
  height: 0%;
  width: 5px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.main-menu ul li ul.submenu li:hover > a {
  color: #ff6600; }

.main-menu ul li ul.submenu li:hover > a::before {
  height: 100%; }

.main-menu ul li:hover ul.submenu {
  top: 100%;
  visibility: visible;
  opacity: 1; }

/* search box */
.search-box a {
  font-size: 18px;
  color: #ffffff; }

/* search bar  */
.search-bar-wrapper {
  position: fixed;
  top: 20%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 99999999999999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

.search-bar-wrapper .search-close {
  position: absolute;
  font-size: 40px;
  color: #ffffff;
  position: absolute;
  right: 40px;
  top: 40px; }

.search-bar-wrapper.search-bar-open {
  top: 0;
  opacity: 1;
  visibility: visible; }

.search-bar-wrapper.search-bar-open .search-inner {
  top: 50%;
  opacity: 1;
  visibility: visible; }

.search-inner {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

.search-inner input {
  width: 100%;
  font-size: 20px;
  line-height: 60px;
  margin-bottom: 0;
  padding: 8px 40px;
  color: #fff;
  border-radius: 50px;
  background-color: transparent;
  border: 2px solid #ffffff; }

.search-inner input:focus {
  border: 2px solid #ffffff; }

.search-inner input::placeholder {
  color: #ffffff; }

.search-inner button {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: #ffffff;
  background-color: transparent;
  border: 0; }

.search-inner button:hover {
  cursor: pointer; }

/*----------------------------------------*/
/*  03. SLIDER CSS START 
/*----------------------------------------*/
/* Default desktop styles (leave as is if already set elsewhere) */
.slider-content h1 {
  font-size: 64px;
  line-height: 1.2;
  font-weight: 700;
}

.slider-content p {
  font-size: 18px;
  line-height: 1.6;
}


/* Tablet */
@media (max-width: 991px) {
  .slider-content h1 {
    font-size: 42px !important;
    line-height: 1.3 !important;
  }

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

  
}

/* Mobile */
@media (max-width: 576px) {
  .slider-content {
    text-align: center;      /* center all text */
    margin: 0 auto;          /* center the container */
    max-width: 90%;          /* prevent edge-to-edge overflow */
  }

  .slider-content h1 {
    font-size: 26px !important;
    line-height: 1.4 !important;
    word-break: break-word;
  }

  .slider-content p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 500px;        /* keep nice readable width */
    padding: 0 !important;
  }

 
}



.single-slider {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; }

.single-slider::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); }

.slider-height {
  min-height: 895px; }

.slider-content h1 {
  font-size: 60px;
  line-height: 72px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 17px; }

.slider-content p {
  font-family: "Poppins", sans-serif;
  color: #ffffff;
  font-weight: 400;
  padding-right: 215px;
  margin-bottom: 40px; }

.slider-btn-wrapper .btn {
  margin-right: 20px;
  margin-bottom: 30px; }

/* slider arrow */
.hero-slider .slick-arrow {
  position: absolute;
  top: 50%;
  left: 50px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 11;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #ffffff;
  border-radius: 50%;
  color: #252e45;
  visibility: hidden;
  opacity: 0; }

  
.hero-slider .slick-arrow:hover {
  background: #252e45;
  color: #ffffff; }

.hero-slider .slick-arrow.slick-next {
  right: 50px;
  left: auto; }

.hero-slider:hover .slick-arrow {
  left: 25px;
  visibility: visible;
  opacity: 1; }

.hero-slider:hover .slick-arrow.slick-next {
  right: 25px;
  left: auto; 
}

/* Reset Slick slider arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 40px; /* Adjust size */
  height: 40px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  border: none;
  outline: none;
  background: transparent; /* Remove default bg */
  z-index: 1;
}

/* Remove default icons */
.slick-prev:before,
.slick-next:before {
  content: '' !important;
}
  

/* Custom arrow styles */
.slick-prev {
  left: 20px; /* Position from left */
}
.slick-next {
  right: 20px; /* Position from right */
}

/* Example: Minimal arrow design */
.slick-arrow {
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.slick-arrow:hover {
  background: rgba(0,0,0,0.8);
}

/* Custom arrow icons (using your own) */
.slick-prev:after {
  content: "←";
  
  font-size: 18px;
}
.slick-next:after {
  content: "→";
 
  font-size: 18px;
}



/*----------------------------------------*/
/*  04. ABOUT CSS START 
/*----------------------------------------*/
.about-us {
  position: relative;
  margin-bottom: 127px;
  margin-top: -30px;
  z-index: 11; }

.about-us-inner {
  position: relative;
  padding-right: 15px; }

.about-us-inner::after {
  position: absolute;
  content: '';
  top: -50px;
  left: -80px;
  width: calc(100% + 132px);
  height: calc(100% + 100px);
  background: #fff;
  z-index: -1;
  -webkit-box-shadow: 0px 5px 37px 0px rgba(16, 145, 255, 0.15);
  -moz-box-shadow: 0px 5px 37px 0px rgba(16, 145, 255, 0.15);
  box-shadow: 0px 5px 37px 0px rgba(16, 145, 255, 0.15);
  border-top-left-radius: 61px;
  border-bottom-right-radius: 61px; }

.about-us-tab ul.nav {
  display: block; }

.about-us-tab ul.nav-tabs {
  border-bottom: none; }

.about-us-tab ul li a.nav-link {
  font-size: 18px;
  color: #252e45;
  border: none;
  padding: 0; 
  margin-bottom: 20px;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  border-bottom: 1px solid #dddddd; }

.about-us-tab ul li:last-child a.nav-link {
  border-bottom: none; }

.about-us-tab ul li a i {
  font-size: 22px;
  margin-right: 15px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: #b0b0b0;
  text-align: center; }

.about-us-tab ul li a.nav-link.active {
  border-bottom: 1px solid #dddddd;
  color: #ff6600;
   
  text-decoration: none; }

.about-us-tab ul li:last-child a.nav-link.active {
  border-bottom: none; }

@media (max-width: 576px) {
  .cruise-badge {
    display: none !important;
  }
}

@media(max-width: 576px){
  .blog-tag{
    display: none !important;
  }
}

  @media( max-width: 768px){
    .about-us-tab ul li a.nav-link.active {
      border-bottom: none;
      color: #ff6600; 
      padding: 15px 0;
      text-decoration: none; }
  }

.about-us-tab ul li a.nav-link.active i {
  color: #b0b0b0; }

/* about us content */
.about-thumb {
  position: relative; }

.about-thumb a {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #ffffff;
  font-size: 35px;
  z-index: 1; }

.about-thumb a:hover {
  color: #ff6600; }

.about-text h3 {
  font-size: 25px;
  text-transform: uppercase;
  margin-bottom: 7px; }

.about-text p {
  font-size: 15px;
  color: #252e45;
  margin-bottom: 10px; }

.about-text ul.about-features li {
  position: relative;
  padding-left: 21px;
  margin-bottom: 6px; }

.about-text ul.about-features li::before {
  position: absolute;
  content: '\f101';
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: "Font Awesome 5 Pro";
  font-size: 15px;
  color: #252e45; }

/*----------------------------------------*/
/*  05. TOUR CSS START 
/*----------------------------------------*/
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(100%); /* turns the white icon black */
}

/* OR give them a solid blue background */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: blue;  /* blue background */
  border-radius: 50%;      /* circular shape */
  background-size: 100% 100%;
}

.single-tour .tour-img {
  position: relative; }

.single-tour .tour-img .tour-content {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  padding: 25px 35px;
  background-color: rgba(0, 0, 0, 0.7);
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

.single-tour:hover .tour-img .tour-content {
  background-color: rgba(255, 102, 0, 0.7); }

.single-tour .tour-img .tour-content h4 {
  font-size: 20px;
  color: #ffffff; }

.single-tour .tour-img .tour-content p {
  color: #ffffff; }

.link-btn {
  font-size: 20px;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  text-transform: inherit;
  text-transform: capitalize;
  position: relative; }

.link-btn::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ffffff; }

.link-btn:hover::after {
  bottom: 43%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.link-btn:hover {
  color: #ffffff; }

/*----------------------------------------*/
/*  06. BEST MONEY CSS START 
/*----------------------------------------*/
.best-money-content {
  margin-top: 16px; }

.best-money-content h1 {
  font-size: 39px;
  font-weight: 600;
  line-height: 50px;
  margin-bottom: 20px; }

.best-money-content p {
  padding-right: 50px;
  margin-bottom: 9px; }

.best-money-price {
  margin-bottom: 22px; }

.best-money-content .best-money-price span {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600; }

.best-money-content .best-money-price span.old-price {
  color: #ff6600;
  text-decoration: line-through; }

.best-mone-img {
  position: relative; }

.best-money-countdown {
  position: absolute;
  bottom: -28px;
  left: 53px;
  right: 53px;
  background: #ff6600;
  padding: 30px 0px;
  padding-bottom: 0; }

.best-money-countdown ul li {
  font-size: 17px;
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  text-transform: capitalize;
  display: inline-block;
  margin: 0 27px;
  margin-bottom: 30px;
  position: relative; }

.best-money-countdown ul li::before {
  position: absolute;
  content: '';
  right: -28px;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: #ffb380;
  -webkit-transform: skewX(-15deg);
  -moz-transform: skewX(-15deg);
  -ms-transform: skewX(-15deg);
  transform: skewX(-15deg); }

.best-money-countdown ul li:last-child::before {
  display: none; }

.best-money-countdown ul li span {
  font-size: 30px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  display: block; }

/*----------------------------------------*/
/*  07. Best Things CSS
/*----------------------------------------*/
.things-img {
  position: relative; }

.things-img::before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); }

.things-content {
  position: absolute;
  left: 30px;
  bottom: 30px; }

.things-content h4 {
  color: #ffffff;
  font-size: 20px; }

.things-content h4:hover a {
  color: #ff6600; }

.things-content span {
  color: #ffffff;
  font-size: 20px;
  font-family: "Poppins", sans-serif; }

.things-btn {
  position: absolute;
  top: 30px;
  right: -100px;
  visibility: hidden;
  opacity: 0; }

.things-img:hover .things-btn {
  right: 0;
  visibility: visible;
  opacity: 1; }

/*----------------------------------------*/
/*  08. TEAM CSS START 
/*----------------------------------------*/
.team-thumb {
  position: relative;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }

.team-thumb::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  visibility: hidden;
  opacity: 0; }

.team-content {
  position: absolute;
  top: 55%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  visibility: hidden;
  opacity: 0; }

.team-content h4 {
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 5px; }

.team-content span {
  font-size: 15px;
  color: #ffffff;
  display: block;
  margin-bottom: 10px; }

.team-social ul li {
  display: inline-block;
  margin: 0 2px; }

.team-social ul li a {
  width: 32px;
  height: 32px;
  line-height: 32px;
  background-color: #ffffff;
  color: #252e45;
  display: block;
  text-align: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%; }

.team-social ul li a:hover {
  background: #ff6600;
  color: #ffffff; }

.single-team:hover .team-thumb {
  border-radius: 50%; }

.single-team:hover .team-thumb::before {
  visibility: visible;
  opacity: 1; }

.single-team:hover .team-content {
  top: 50%;
  visibility: visible;
  opacity: 1; }

/*----------------------------------------*/
/*  09. TEAM CSS START 
/*----------------------------------------*/
.single-package {
  position: relative; }

.single-package::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); }

.package-person {
  position: absolute;
  top: 20px;
  left: 30px; }

.package-person img {
  width: 45px;
  height: 45px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%; }

.package-content {
  position: absolute;
  left: 30px;
  bottom: 23px;
  right: 30px; }

.package-info {
  border-bottom: 1px solid #a4abb1;
  margin-bottom: 13px; }

.package-info h3 {
  font-size: 24px;
  color: #ffffff; }

.package-info h3:hover a {
  color: #ff6600; }

.package-info p {
  color: #ffffff; }

.package-bottom span {
  font-size: 20px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #ffffff; }

.package-bottom .rating li {
  display: inline-block;
  margin-left: 7px; }

.package-bottom .rating li span {
  font-size: 14px;
  color: #ffffff; }

/*----------------------------------------*/
/*  10. TESTIMONIAL CSS START 
/*----------------------------------------*/
.single-testi {
  padding: 40px 25px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; }

.single-testi:hover {
  background: #ff6600; }

.single-testi:hover span.quote {
  color: #ffbd91; }

.single-testi:hover p {
  color: #ffffff; }

.single-testi span.quote {
  font-size: 50px;
  color: #f6f6f6;
  display: inline-block;
  margin-bottom: 19px; }

.single-testi p {
  font-family: "Poppins", sans-serif;
  line-height: 24px;
  margin-bottom: 23px; }

.testi-thumb img {
  width: 64px;
  height: 64px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%; }

.testi-info h4 {
  font-size: 18px;
  margin-bottom: 3px; }

.testi-info span {
  text-transform: capitalize;
  font-weight: 400; }

.single-testi:hover .testi-person .testi-info h4 {
  color: #ffffff; }

.single-testi:hover .testi-person .testi-info span {
  color: #ffffff; }

/*----------------------------------------*/
/*  11. BLOG CSS START 
/*----------------------------------------*/
.single-blog {
  position: relative; }

.blog-thumb {
  position: relative; }

.blog-thumb img {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s; }

.blog-thumb::after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); }

.blog-tag {
  position: absolute;
  top: 20px;
  left: 20px; }

.blog-tag a {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  display: block;
  height: 35px;
  line-height: 35px;
  padding: 0 20px;
  background-color: #252e45; }

.single-blog:hover .blog-tag a {
  color: #ffffff;
  background-color: #ff6600; }

.single-blog:hover .blog-thumb img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2); }

.blog-content {
  position: absolute;
  left: 30px;
  bottom: 30px;
  right: 60px; }

.blog-content h1 {
  font-size: 25px;
  line-height: 32px;
  color: #ffffff;
  margin-bottom: 9px; }

.blog-content h1:hover {
  color: #ff6600; }

.blog-content p {
  color: #ffffff;
  margin-bottom: 0; }

.blog-meta {
  margin-top: 26px; }

.blog-avater img {
  width: 35px;
  height: 35px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%; }

.aveter-info h4 {
  font-size: 15px;
  color: #ffffff;
  font-weight: 400;
  display: inline-block;
  padding-right: 10px;
  margin-right: 13px;
  position: relative; }

.aveter-info h4::before {
  position: absolute;
  content: '';
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(10deg);
  -moz-transform: translateY(-50%) rotate(10deg);
  -ms-transform: translateY(-50%) rotate(10deg);
  transform: translateY(-50%) rotate(10deg);
  width: 1px;
  height: 18px;
  background: #ffffff; }

.aveter-info a {
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  margin-right: 30px; }

.aveter-info a:hover {
  color: #ff6600; }

/* blog details area start */
.blog-right-line {
  position: relative;
  padding-right: 53px;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase; }

.blog-right-line::after {
  position: absolute;
  content: '';
  top: 48%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 30px;
  height: 1px;
  background: #ff6600; }

.blog-inner .blog-text h4 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-transform: uppercase; }

.blog-inner .blog-text h4:hover {
  color: #ff6600; }

.blog-inner .blog-text .blog-meta {
  margin-top: 0;
  margin-bottom: 15px; }

.blog-inner .blog-text .blog-meta span {
  position: relative;
  font-size: 12px;
  text-transform: uppercase;
  padding-right: 8px;
  margin-right: 2px; }

.blog-inner .blog-text .blog-meta span::before {
  position: absolute;
  content: '';
  top: 48%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 9px;
  background-color: #252e45; }

.blog-inner .blog-text .blog-meta span:last-child::before {
  display: none; }

.blog-inner .blog-text .blog-meta span a:hover {
  color: #ff6600; }

.blog-inner .blog-text p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 20px; }

.blog-inner .blog-text .user-quote {
  margin: 35px 45px;
  padding: 20px 33px;
  -webkit-box-shadow: 0px 0px 9.3px 0.7px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0px 0px 9.3px 0.7px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 0px 9.3px 0.7px rgba(0, 0, 0, 0.06); }

.blog-inner .blog-text .user-quote p {
  margin-bottom: 5px; }

.blog-inner .blog-text .user-quote h5 {
  text-align: right;
  font-size: 14px;
  font-weight: 400;
  position: relative;
  padding-left: 37px;
  display: inline-block;
  float: right; }

.blog-inner .blog-text .user-quote h5::before {
  position: absolute;
  content: '';
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 34px;
  height: 1px;
  background-color: #252e45; }

.blog-inner .blog-text .blog-social ul {
  position: relative;
  margin: 0 15px; }

.blog-inner .blog-text .blog-social ul::after,
.blog-inner .blog-text .blog-social ul::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 35%;
  height: 1px;
  background: #ff6600; }

.blog-inner .blog-text .blog-social ul::before {
  left: auto;
  right: 0; }

.blog-inner .blog-text .blog-social ul li {
  display: inline-block;
  margin: 0 8px; }

.blog-inner .blog-text .blog-social ul li a {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: transparent;
  border: 1px solid #ff6600;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #ff6600;
  font-size: 14px; }

.blog-inner .blog-text .blog-social ul li a:hover {
  background: #ff6600;
  color: #ffffff; }

/* blog comments area start */
.blog-comment-title h2 {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase; }

.blog-comment-wrapper ul li:last-child .single-comment {
  margin-bottom: 30px; }

.single-comment .user-avater img {
  width: 70px;
  height: 70px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }

.single-comment .user-comment .comment-meta {
  margin-bottom: 5px;
  overflow: hidden; }

.single-comment .user-comment .comment-meta span {
  font-size: 12px;
  padding-right: 10px;
  margin-right: 10px;
  position: relative;
  text-transform: uppercase;
  float: left; }

.single-comment .user-comment .comment-meta a {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  float: right; }

.single-comment .user-comment .comment-meta a:hover {
  color: #ff6600; }

.single-comment .user-comment .comment-meta a i {
  margin-right: 5px; }

.single-comment .user-comment .comment-meta span {
  font-size: 12px;
  padding-right: 10px;
  margin-right: 10px;
  position: relative;
  text-transform: uppercase; }

.single-comment .user-comment .comment-meta span::after {
  position: absolute;
  content: '';
  top: 48%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 9px;
  background: #ff6600; }

.single-comment .user-comment .comment-meta span.date::after {
  display: none; }

.single-comment .user-comment p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0; }

.single-comment.comment-reply {
  margin-left: 70px; }

/* blog comment form area start */
.comment-form-inner .comment-input input {
  display: block;
  width: 100%;
  background: #f8f8f8;
  border: none;
  color: #252e45;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
  margin-bottom: 40px;
  border: 1px solid transparent; }

.comment-form-inner .comment-input input:last-child {
  margin-bottom: 0px; }

.comment-form-inner .comment-input input::placeholder,
.comment-form-inner .comment-text textarea::placeholder {
  font-size: 14px;
  color: #333b55;
  text-transform: capitalize; }

.comment-form-inner .comment-input input:focus,
.comment-form-inner .comment-text textarea:focus {
  border-color: #879292; }

.comment-form-inner .comment-text textarea {
  width: 100%;
  height: 215px;
  resize: none;
  background: #f8f8f8;
  border: none;
  color: #252e45;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  padding: 15px;
  border: 1px solid transparent; }

/* blog side bar area start */
.sidebar-widget .sidebar-widget-content .search-form-sidebar {
  position: relative; }

.sidebar-widget .sidebar-widget-content .search-form-sidebar input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: 1px solid #c1c1c1;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding: 0 15px;
  padding-right: 40px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  color: #252e45; }

.sidebar-widget .sidebar-widget-content .search-form-sidebar button {
  position: absolute;
  font-size: 18px;
  background: transparent;
  color: #464646;
  top: 0;
  right: 0;
  height: 40px;
  width: 40px; }

.sidebar-widget .sidebar-widget-content .sidebar-catagory ul li {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #dddddd; }

.sidebar-widget .sidebar-widget-content .sidebar-catagory ul li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0; }

.sidebar-widget .sidebar-widget-content .sidebar-catagory ul li a {
  font-size: 14px;
  padding-left: 25px;
  position: relative; }

.sidebar-widget .sidebar-widget-content .sidebar-catagory ul li a::after {
  position: absolute;
  content: '\f101';
  left: 0;
  top: -1px;
  font-size: 14px;
  font-family: "Font Awesome 5 Pro"; }

.sidebar-widget .sidebar-widget-content .sidebar-catagory ul li a:hover {
  color: #ff6600; }

.sidebar-widget .sidebar-widget-content .sidebar-catagory ul li span {
  font-size: 14px; }

.sidebar-widget .sidebar-widget-content .rc-post ul li {
  margin-bottom: 25px; }

.sidebar-widget .sidebar-widget-content .rc-post ul li:last-child {
  margin-bottom: 0px; }

.sidebar-widget .sidebar-widget-content .rc-post ul li .single-rc-post .rc-content .rc-meta span {
  font-size: 12px;
  text-transform: uppercase; }

.sidebar-widget .sidebar-widget-content .rc-post ul li .single-rc-post .rc-content h6 {
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  line-height: 24px;
  margin-bottom: 0; }

.sidebar-widget .sidebar-widget-content .rc-post ul li .single-rc-post .rc-content h6:hover {
  color: #ff6600; }

.sidebar-widget .sidebar-widget-content .news-letter a {
  margin-bottom: 5px;
  display: inline-block; }

.sidebar-widget .sidebar-widget-content .news-letter a:hover {
  color: #ff6600; }

.sidebar-widget .sidebar-widget-content .sidebar-tags a {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  padding: 0 17px;
  margin-bottom: 17px;
  margin-right: 14px;
  background-color: #f6f6f6;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #252e45; }

.sidebar-widget .sidebar-widget-content .sidebar-tags a.active,
.sidebar-widget .sidebar-widget-content .sidebar-tags a:hover {
  color: #ffffff;
  background-color: #ff6600; }

/* sidebar banner */
.sidebar-banner .owl-nav div {
  position: absolute;
  top: 50%;
  left: 15px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.sidebar-banner .owl-nav div.owl-next {
  left: auto;
  right: 15px; }

.sidebar-banner .owl-nav div button {
  background: transparent;
  font-size: 25px;
  color: #ffffff; }

/*----------------------------------------*/
/*  12. FOOTER CSS START 
/*----------------------------------------*/
.footer-title {
  margin-bottom: 27px; }

.footer-title h3 {
  font-size: 24px;
  line-height: 26px;
  font-weight: 600; }

/* footer contact */
.footer-contact p {
  margin-bottom: 23px;
  padding-right: 70px; }

.footer-contact ul li {
  margin-bottom: 17px; }

.footer-contact-inner:hover .icon span {
  background-color: #ff6600;
  color: #ffffff; }

.footer-contact-inner .icon span {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  background-color: #252e45;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%; }

.footer-contact-inner .text p {
  margin-bottom: 0; }

/* quick links */
.quick-links ul li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 9px; }

.quick-links ul li::before {
  position: absolute;
  content: '';
  left: 0;
  top: 50%;
  -webkit-transform: tanslateY(-50%);
  -moz-transform: tanslateY(-50%);
  -ms-transform: tanslateY(-50%);
  transform: tanslateY(-50%);
  height: 5px;
  width: 5px;
  background: #dddddd;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%; }

.quick-links ul li:hover::before {
  background: #ff6600; }

.quick-links ul li a {
  font-weight: 500; }

/* follow us */
.follow-us ul li {
  float: left;
  width: 50%;
  margin-bottom: 7px; }

.follow-us ul li a:hover {
  color: #ff6600; }

/* subscribe form */
.subscribe p {
  margin-bottom: 22px; }

.subscribe-form {
  position: relative;
  margin-bottom: 20px; }

.subscribe-form input {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 70px;
  border: 1px solid #ff6600; }

.subscribe-form input::placeholder {
  font-size: 15px; }

.subscribe-form .sub-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
  width: 60px;
  line-height: 40px;
  color: #ffffff;
  background-color: #ff6600; }

/* footer copyright */
.footer-copyright-inner {
  padding: 20px 0;
  padding-bottom: 23px;
  border-top: 1px solid #ebebeb; }

.copyright-text p {
  margin-bottom: 0;
  font-size: 15px; }

.copyright-text p a {
  color: #ff6600;
  font-size: 15px; }

.footer-policy {
  text-align: right; }

.footer-policy a {
  position: relative;
  padding-right: 10px;
  margin-right: 5px;
  color: #333b55;
  font-size: 15px; }

.footer-policy a:hover {
  color: #ff6600; }

.footer-policy a::after {
  position: absolute;
  content: '';
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 12px;
  width: 1px;
  background-color: #333b55; }

.footer-policy a:last-child {
  padding-right: 0;
  margin-right: 0; }

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

  /* tour images */

  .tour-img {
      height: 250px;
      overflow: hidden;
    }
    .tour-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    .card:hover .tour-img img {
      transform: scale(1.05);
    }
    .link-btn {
      display: inline-block;
      margin-top: 10px;
      text-decoration: none;
      color: #007bff;
      font-weight: 500;
      transition: color 0.3s;
    }
    .link-btn:hover {
      color: #0056b3;
    }
    /* about section images */
    .about-thumb img {
    width: 280px;          /* or any preferred fixed width */
    height: 200px;         /* match the height of the Domestic Tour image */
    object-fit: cover;     /* ensures the image fills the box neatly */
    border-radius: 10px;   /* optional for rounded corners */
  }

  /* navbar megabar */

  .submenu Strong{
    color:#a4abb1
  }

  .package-img {
  height: 250px;
  width: 100%;
  object-fit: cover;
}

.single-slider {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  display: none;
}
.single-slider.active {
  opacity: 1;
  display: block;
}
@media (max-width: 991.98px) {

  .logo {
    display: flex;
    align-items: center;
  }

  .search-box {
    margin-right: 90px; /* Center the search icon between logo and hamburger */
  }

  .meanmenu-reveal {
    position: absolute;
    top: 120px;              /* Adjust based on logo height */
    right: 16px;            /* Keep it inside screen */
    left: auto;
    z-index: 9999;          /* Make sure it stays on top */
  }
}
@media (max-width: 991.98px) {
  .meanmenu-reveal {
    position: absolute !important;
    top: -60px !important;     /* ✅ Adjust to bring to top */
    right: 15px !important;   /* ✅ Ensure it's not pushed out */
    left: auto !important;
    z-index: 9999 !important; /* ✅ Stay above all */
  }
}
.header-area.header-transparent {
  background-color: rgba(255, 255, 255, 0.95); /* Transparent white */
  color: #000; /* All text black */
}

.header-area.header-transparent {
  height: 90px; /* default = mobile */
}

@media (min-width: 992px) { /* Bootstrap lg and above */
  .header-area.header-transparent {
    height: 150px;
  }
}




 .slider-man {
  position: absolute;   /* take it out of normal layout */
  right: 0;             /* stick to right side */
  bottom: 0;            /* stick to bottom */
  z-index: 2;           /* make sure it stays above background but below text if needed */
}

.mt-15 { margin-top: 15px !important; }

.slider-man img {
  height: 720px;        /* or whatever height you want */
  margin-left: 0;  
  position: relative;
  bottom: -210px; 
  left: 50px;  /* remove inline margin-left */
}

.header-area .header-top span,
.header-area .header-top i,
.header-area .header-top a,
.header-area .header-bottom a,
.header-area .main-menu ul li a,
.header-area .main-menu ul.submenu li a,
.header-area .main-menu ul.submenu li strong {
  color: #000 !important;
}

.header-area select {
  color: #000;
  background-color: #fff;
  border: 1px solid #ccc;
}

.header-area .btn {
  background-color: #000;
  color: #fff;
  border: none;
}

.header-area .btn:hover {
  background-color: #222;
  color: #fff;
}
/* Default (PC): white background + black text */
.dynamic-header {
  background-color: rgba(255, 255, 255, 0.95);
  color: #000;
}

.dynamic-header a,
.dynamic-header span,
.dynamic-header i,
.dynamic-header select,
.dynamic-header .btn {
  color: #000;
}

/* Button background */
.dynamic-header .btn {
  background-color: #000;
  color: #fff;
}

/* Mobile: Invert text color when background is white */
@media (max-width: 767px) {
  .dynamic-header {
    background-color: #000; /* Make header background black in mobile */
    color: #fff;
  }

  .dynamic-header a,
  .dynamic-header span,
  .dynamic-header i,
  .dynamic-header select,
  .dynamic-header .btn {
    color: #fff;
  }

  .dynamic-header .btn {
    background-color: #fff;
    color: #000;
  }
}
/* Ensure hamburger icon is visible */
.mean-container a.meanmenu-reveal {
  color: #fff !important;     /* Make it visible on dark bg */
  font-size: 28px !important;
  z-index: 1000;
}

/* Ensure mobile menu background is white or black */
.mean-container .mean-nav {
  background-color: #000 !important;  /* Or #fff if you prefer white */
}

/* Make mobile menu text white on black bg */
.mean-container .mean-nav ul li a {
  color: #fff !important;
}

/* Highlight hover for better UX */
.mean-container .mean-nav ul li a:hover {
  color: #f5b942 !important;  /* Optional: your accent color */
}

/* Style for submenus inside mobile nav */
.mean-container .mean-nav ul li li a {
  color: #fff !important;
  
}

/* Ensure mobile menu appears above all */
.mean-container {
  z-index: 9999 !important;
}
.meanmenu-reveal{
  color: #000 ;
  background: #000;
}
.book-online-btn {
  background-color: orange !important;
  color: white !important;
  padding: 12px 30px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3);
  border: none;
  height: 48px;
  line-height: 1;
}

.book-online-btn:hover {
  background-color: darkorange !important;
  color: wheat !important;
  box-shadow: 0 6px 16px rgba(255, 140, 0, 0.4);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .logo-wrapper {
    position: static;
    width: 100px;
    height: 100px;
    margin: 0 auto 10px;
  }
}

.logo-wrapper {
position: absolute;
    top: -152px;
    left: -3px;
    width: 223px;
    height: 301px;
    border-radius: 20px;
    display: flex
;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.big-logo {
    max-width: 98%;
    max-height: auto;
    object-fit: contain;
    margin-top: 27px;
}

@media(max-width: 768px){
  .big-logo{
    margin-top: 60px;
  }
}

/* Add arrow after links inside li.submenu */
nav#mobile-menu ul li.submenu > a::after {
  content: "▼";           /* You can replace with ▾ or ▸ or any symbol */
  font-size: 0.6em;
  margin-left: 6px;
  color: #222;         /* matching your red button color */
  vertical-align: middle;
  transition: transform 0.3s ease;
  display: inline-block;
}

/* Rotate arrow when submenu is open (on hover) */
nav#mobile-menu ul li.submenu:hover > a::after {
  transform: rotate(180deg);
}

/* Optional: make arrow smaller on mobile or adjust spacing */
@media (max-width: 768px) {
  nav#mobile-menu ul li.submenu > a::after {
    font-size: 0.5em;
    margin-left: 4px;
  }
}
@media (max-width: 991.98px) {
  .mobile-menu.mean-container {
    position: relative !important;
    top: 65px !important;
  }

  .meanmenu-reveal {
    
    margin-top: -10px !important;
  }
}

.mean-container .mean-nav {
    background-color: #000 !important;
    top: 0;
}

 .about-content .col-md-5 img {
    height: 100%;
    min-height: 350px; /* increase image height */
    object-fit: cover;
  }

  @media (max-width: 767.98px) {
    .about-content .col-md-5 img {
      min-height: 250px; /* adjust for small screens */
    }
  }

  .team-fixed {
  width: 270px;
  height: 300px;
  overflow: hidden;
}

.team-fixed .team-thumb {
  width: 100%;
  height: 100%;
  position: relative;
}

.team-fixed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 576px) {
  .single-team.team-fixed {
    margin-bottom: 30px;
    width: 100% !important; /* force full width */
  }
  .single-team.team-fixed .team-thumb img {
    height: 100; /* make sure image scales properly */
    width: 100%;
    object-fit: cover;
  }
  .team-content h4 {
    font-size: 1.5rem; /* bigger heading on mobile */
  }
}
@media (max-width: 767.98px) {
  .single-team.team-fixed {
    height: 480px; /* Adjust the height as needed for mobile */
  }

  .team-thumb {
    height: 100%;
  }

  .team-thumb img {
    height: 100%;
    object-fit: cover;
  }
}
@media (max-width: 767.98px) {
  .single-team.team-fixed {
    height: 580px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
  }

  .team-thumb {
    height: 100%;
    width: 100%;
    position: relative;
  }

  .team-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    
    height: 100%;
    width: 100%;
    object-fit: fill; /* Stretchs image in both width & height */
  }

  .team-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%; /* or adjust based on how much of the card you want black */
  background: rgba(0, 0, 0, 0.6); /* slightly darker */
  color: white;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Align heading and social icons to bottom */
  text-align: center;
}

}
  .about-us-tab {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  
  .left-tabs {
    border-radius: 8px;
    overflow: hidden;
  }
  
  .left-tabs .nav-link {
    padding: 15px 20px;
    color: #333;
    border: none;
    border-left: 4px solid transparent;
    transition: all 0.3s;
  }
  
  .left-tabs .nav-link:hover {
    background: #f8f9fa;
  }
  
  .left-tabs .nav-link.active {
    background: #f8f9fa;
    color: #0d6efd;
    border-left: 4px solid #0d6efd;
    font-weight: 500;
  }
  
  .left-tabs .nav-link i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
  }
  
  .about-content {
    height: 100%;
  }
  
  @media (max-width: 767.98px) {
    .about-content {
      flex-direction: column;
    }
    
    .about-content .col-md-5, 
    .about-content .col-md-7 {
      width: 100%;
    }
  }

  /* Mobile View Fixes (under 768px) */
@media (max-width: 767.98px) {
  /* Header Bottom Fixes */
  .header-bottom {
    padding: 10px 0;
  }
  
  
  /* Mobile Menu Toggle Button */
  .mobile-menu {
    position: absolute;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
  }
  
  /* Hamburger Icon Styling */
  .mobile-menu .hamburger-inner,
  .mobile-menu .hamburger-inner::before,
  .mobile-menu .hamburger-inner::after {
    background-color: #333; /* Change color as needed */
  }
  



.pb-100 { padding-bottom: 100px !important; }
.pt-100 { padding-top: 100px !important; }
.mb-100 { margin-bottom: 100px !important; }

  /* Adjust header columns for mobile */
  .header-bottom > .container > .row > .col-sm-4, 
  .header-bottom > .container > .row > .col-sm-6 {
    padding-right: 40px; /* Space for hamburger */
  }
  
  /* Hide desktop navigation in mobile */
  .main-menu {
    display: none;
  }
  
  /* Show mobile menu when active */
  .main-menu.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 998;
    padding: 70px 20px 20px;
    overflow-y: auto;
  }
  
  /* Search box adjustment */
  .search-box {
    margin-left: 10px !important;
  }
  
  /* Book Online button adjustment */
  .header-btn {
    display: none !important;
  }
}

/* Optional: Add this if you need a proper hamburger menu */
.hamburger {
  padding: 10px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger-box {
  width: 30px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner, 
.hamburger-inner::before, 
.hamburger-inner::after {
  width: 30px;
  height: 3px;
  background-color: #333;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before, 
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -8px;
}

.hamburger-inner::after {
  bottom: -8px;
}

/* Active state */
.hamburger--active .hamburger-inner {
  transform: rotate(45deg);
}

.hamburger--active .hamburger-inner::before {
  transform: rotate(-45deg) translate(-4px, -4px);
}

.hamburger--active .hamburger-inner::after {
  opacity: 0;
}

/* Add to your CSS */
.header-area {
    position: relative;
    z-index: 9999;
    background-color: #fff; /* Add background color if transparent */
}

.story-img {
    position: relative;
    z-index: 1;
}.story-img {
    background: #f5f5f5; /* Fallback color */
    min-height: 300px; /* Adjust as needed */
}

/* Add to your existing CSS */
.counter {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
    font-family: 'Arial', sans-serif;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
    min-width: 120px;
    display: inline-block;
    transition: all 0.3s ease;
}

.counter-box {
    padding: 25px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    height: 100%;
}

.counter-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    background: rgba(255,255,255,0.2);
}

.counter-box i {
    font-size: 50px;
    margin-bottom: 15px;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.counter-box h4 {
    color: #fff;
    font-weight: 600;
    margin-top: 10px;
}
.about-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* No filters or adjustments */
}

.about-hero .container {
    position: relative;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .about-hero {
        padding: 100px 0 60px;
        height: auto;
        min-height: 100vh;
    }
}

.video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s;
}

/* Section Base */
.mission-vision {
    padding: 120px 0;
    position: relative;
    background: linear-gradient(135deg, #0a2540, #1a4b8c);
    overflow: hidden;
}

/* Section Header */
.section-title {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-subtitle {
    display: block;
    font-size: 18px;
    color: #e74c3c;
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.section-title h2 {
    font-size: 42px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
}

.title-divider {
    width: 80px;
    height: 2px;
    background: rgba(255,255,255,0.2);
    margin: 0 auto;
    position: relative;
}

.divider-circle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #e74c3c;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Cards */
.mission-card, .vision-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 40px;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mission-card:hover, .vision-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.3);
}

/* Card Icons */
.card-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
}

.icon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(231, 76, 60, 0.15);
    border-radius: 50%;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.mission-card .icon-bg {
    background: rgba(231, 76, 60, 0.15);
}

.vision-card .icon-bg {
    background: rgba(52, 152, 219, 0.15);
}

.card-icon i {
    position: relative;
    font-size: 36px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.mission-card .card-icon i {
    color: #e74c3c;
}

.vision-card .card-icon i {
    color: #3498db;
}

/* Card Content */
.card-content h3 {
    font-size: 24px;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}

.card-content p {
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0;
    text-align: center;
}

/* Decorative Patterns */
.card-pattern {
    position: absolute;
    opacity: 0.03;
    z-index: 0;
}

.mission-card .card-pattern {
    bottom: -30px;
    right: -30px;
    width: 200px;
}

.vision-card .card-pattern {
    top: -30px;
    left: -30px;
    width: 200px;
}

/* Responsive */
@media (max-width: 992px) {
    .mission-vision {
        padding: 80px 0;
    }
    
    .mission-card, .vision-card {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .section-title h2 {
        font-size: 32px;
    }
    
    .card-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 25px;
    }
    
    .card-content h3 {
        font-size: 22px;
    }
}

/* Dark Theme Base */
.mission-vision-dark {
    padding: 100px 0;
    background: radial-gradient(ellipse at center, #0a0e17 0%, #000000 100%);
    position: relative;
    overflow: hidden;
}

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

.section-tagline {
    display: block;
    color: #e74c3c;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.section-title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 25px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.header-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    max-width: 300px;
}

.divider-line {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(52, 152, 219, 0.5) 50%, transparent 100%);
    flex: 1;
}

.divider-icon {
    color: #e74c3c;
    font-size: 24px;
    text-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
}

/* Card Styles */
.value-card {
    background: rgba(15, 20, 30, 0.7);
    border-radius: 15px;
    padding: 50px 40px;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

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

.mission {
    border-left: 4px solid #e74c3c;
}

.vision {
    border-left: 4px solid #3498db;
}

.card-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.mission .card-glow {
    background: radial-gradient(circle at center, rgba(231, 76, 60, 0.15) 0%, transparent 70%);
}

.vision .card-glow {
    background: radial-gradient(circle at center, rgba(52, 152, 219, 0.15) 0%, transparent 70%);
}

.value-card:hover .card-glow {
    opacity: 1;
}

/* Card Icon */
.card-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 30px;
    position: relative;
}

.icon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0.2;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.mission .icon-bg {
    background: #e74c3c;
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.3);
}

.vision .icon-bg {
    background: #3498db;
    box-shadow: 0 0 30px rgba(52, 152, 219, 0.3);
}

.card-icon i {
    position: relative;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.mission .card-icon i {
    color: #e74c3c;
    text-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
}

.vision .card-icon i {
    color: #3498db;
    text-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
}

/* Card Content */
.card-content {
    text-align: center;
}

.card-content h3 {
    font-size: 26px;
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: 600;
}

.card-content p {
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* Decorative Patterns */
.card-pattern {
    position: absolute;
    width: 300px;
    height: 300px;
    opacity: 0.03;
    z-index: -1;
    transition: all 0.6s ease;
}

.mission .card-pattern {
    bottom: -50px;
    right: -50px;
}

.vision .card-pattern {
    top: -50px;
    left: -50px;
}

.value-card:hover .card-pattern {
    opacity: 0.08;
    transform: scale(1.05);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .mission-vision-dark {
        padding: 80px 0;
    }
    
    .value-card {
        padding: 40px 30px;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 32px;
    }
    
    .card-icon {
        width: 80px;
        height: 80px;
    }
    
    .card-content h3 {
        font-size: 22px;
    }
    
    .card-pattern {
        width: 200px;
        height: 200px;
    }
}
/* Premium Background */
.mission-vision-premium {
    padding: 100px 0;
    background: linear-gradient(135deg, #f7fafc 0%, #e6f0f7 100%);
    position: relative;
    overflow: hidden;
}

/* Optional: Add very subtle texture */
.mission-vision-premium::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="%23e1e8ed" stroke-width="0.5" stroke-dasharray="2,2"/></svg>');
    opacity: 0.3;
    z-index: 0;
}

/* Header Styles */
.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.section-tagline {
    display: block;
    color: #e74c3c;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.section-title {
    color: #2c3e50;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
}

.header-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    max-width: 300px;
}

.divider-line {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #d5e3ec 50%, transparent 100%);
    flex: 1;
}

.divider-icon {
    color: #e74c3c;
    font-size: 24px;
    background: #f7fafc;
    padding: 0 10px;
}

/* Card Styles */
.value-card {
    background: white;
    border-radius: 12px;
    padding: 50px 40px;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    z-index: 1;
}

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

/* Card Icon */
.card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    position: relative;
}

.icon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0.1;
    transform: scale(0.9);
    transition: all 0.4s ease;
}

.mission .icon-bg {
    background: #e74c3c;
}

.vision .icon-bg {
    background: #3498db;
}

.card-icon i {
    position: relative;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.mission .card-icon i {
    color: #e74c3c;
}

.vision .card-icon i {
    color: #3498db;
}

/* Card Content */
.card-content {
    text-align: center;
    margin-bottom: 20px;
}

.card-content h3 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 20px;
    font-weight: 600;
}

.card-content p {
    color: #5a6a7f;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* Decorative Ornaments */
.card-ornament {
    position: absolute;
    width: 120px;
    height: 120px;
    opacity: 0.1;
    z-index: -1;
    transition: all 0.6s ease;
}

.mission .card-ornament {
    bottom: -30px;
    right: -30px;
}

.vision .card-ornament {
    top: -30px;
    left: -30px;
}

.value-card:hover .card-ornament {
    opacity: 0.15;
}

.ornament-red {
    stroke: #e74c3c;
}

.ornament-blue {
    stroke: #3498db;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .mission-vision-premium {
        padding: 80px 0;
    }
    
    .value-card {
        padding: 40px 30px;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 32px;
    }
    
    .card-icon {
        width: 70px;
        height: 70px;
    }
    
    .card-content h3 {
        font-size: 22px;
    }
}

/* Section Base */
.mv-cards-section {
    padding: 100px 0;
    background: #f9f9f9;
    position: relative;
}

/* Header Styles */
.mv-header {
    text-align: center;
    margin-bottom: 60px;
}

.mv-subtitle {
    color: #e74c3c;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.mv-title {
    color: #2c3e50;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
}

.mv-underline {
    width: 100px;
    height: 4px;
    background: rgba(0,0,0,0.05);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.underline-animate {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #e74c3c 0%, #3498db 100%);
    animation: underlineFlow 3s ease-in-out infinite alternate;
}

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

/* Cards Container */
.mv-cards-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    max-width: 1000px;
    margin: 0 auto;
    gap: 30px;
}

/* Individual Cards */
.mv-card {
    flex: 1;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.mv-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.12);
}

.card-header {
    padding: 30px 30px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.icon-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.mission-card .icon-container {
    background: rgba(231, 76, 60, 0.1);
    border: 2px solid rgba(231, 76, 60, 0.2);
}

.vision-card .icon-container {
    background: rgba(52, 152, 219, 0.1);
    border: 2px solid rgba(52, 152, 219, 0.2);
}

.icon-container i {
    font-size: 36px;
}

.mission-card .icon-container i {
    color: #e74c3c;
}

.vision-card .icon-container i {
    color: #3498db;
}

.card-header h3 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 0;
}

.card-body {
    padding: 30px;
    flex-grow: 1;
}

.card-body p {
    color: #5a6a7f;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 0;
    text-align: center;
}

.card-footer {
    padding: 20px;
    text-align: center;
}

.mission-stamp, .vision-stamp {
    height: 60px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.mv-card:hover .mission-stamp,
.mv-card:hover .vision-stamp {
    transform: scale(1.1);
    opacity: 1;
}

/* Vertical Divider */
.mv-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
}

.divider-line {
    flex: 1;
    width: 2px;
    background: linear-gradient(to bottom, transparent 0%, #dfe6e9 50%, transparent 100%);
}

.divider-icon {
    color: #e74c3c;
    font-size: 24px;
    margin: 15px 0;
    background: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Responsive Design */
@media (max-width: 992px) {
    .mv-cards-container {
        flex-direction: column;
        max-width: 600px;
    }
    
    .mv-divider {
        flex-direction: row;
        padding: 15px 0;
    }
    
    .divider-line {
        width: 100%;
        height: 2px;
    }
    
    .divider-icon {
        margin: 0 15px;
    }
}

@media (max-width: 768px) {
    .mv-cards-section {
        padding: 80px 0;
    }
    
    .mv-title {
        font-size: 36px;
    }
    
    .card-header {
        padding: 25px 25px 15px;
    }
    
    .card-body {
        padding: 25px;
    }
}
/* Previous CSS remains the same */

/* Animated Airplane Icon */
.airplane-icon {
    position: relative;
    transition: transform 0.5s ease;
}

.airplane-icon i {
    transition: transform 0.3s ease;
}

/* Scrolling Animation */
@keyframes flyUp {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

@keyframes flyDown {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(10px) rotate(5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* Add this new media query for desktop */
@media (min-width: 992px) {
    .mv-divider {
        position: relative;
        overflow: visible;
    }
    
    .airplane-icon {
        will-change: transform;
    }
}
/* Airplane Styles */
.airplane-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 15px 0;
    perspective: 500px;
}

.airplane-icon {
    font-size: 24px;
    color: #e74c3c;
    position: relative;
    z-index: 2;
    transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
    transform: rotate(0);
    display: inline-block;
}

/* Contrails */
.contrail {
    position: absolute;
    height: 2px;
    background: rgba(52, 152, 219, 0.4);
    top: 50%;
    width: 0;
    transition: all 0.5s ease;
    transform-origin: left center;
}

.contrail-left {
    right: 100%;
    transform: translateY(-50%) rotate(0);
}

.contrail-right {
    left: 100%;
    transform: translateY(-50%) rotate(0);
}

/* Animation States */
.airplane-icon i {
    display: inline-block;
    font-size: 28px;
    transform-origin: center;
    will-change: transform; /* Optimize for animation */
    transition: transform 0.1s ease-out; /* Quick response */
  }
  
  .mv-divider {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
  
  .divider-line {
    flex-grow: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ddd, transparent);
  }
  
  .divider-icon {
    margin: 0 20px;
    position: relative;
  }
  
  /* Add contrail effects */
  .airplane-icon::before,
  .airplane-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 2px;
    background: rgba(100, 200, 255, 0.6);
    transition: all 0.3s ease;
  }
  
  .airplane-icon::before {
    right: 100%;
    transform-origin: right center;
  }
  
  .airplane-icon::after {
    left: 100%;
    transform-origin: left center;
  }
  
  /* Show contrails when moving */
  .mv-divider:hover .airplane-icon::before,
  .mv-divider:hover .airplane-icon::after {
    width: 30px;
  }
  .mv-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
  position: relative;
}

.divider-line {
  flex: 1;
  height: 2px;
  background-color: gray;
}

.divider-icon {
  position: relative;
  margin: 0 15px;
}

.airplane-icon i {
  font-size: 28px;
  transform-origin: center center;
  display: inline-block;
}

  /* === GLOBAL STYLES === */
        :root {
            --primary: #e74c3c;  /* Vibrant red */
            --secondary: #3498db; /* Classic blue */
            --dark: #2c3e50;
            --light: #ecf0f1;
            --gray: #95a5a6;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
    --primary: #3498db;  /* Blue */
    --secondary: #e74c3c;  /* Red */
    --dark: #2c3e50;  /* Dark blue */
    --gray: #7f8c8d;  /* Gray */
    --light: #ecf0f1;  /* Light gray */
}

body {
    font-family: 'Segoe UI', sans-serif;
    overflow-x: hidden;
    color: var(--dark);
    background-color: var(--light);
}

/* === ANIMATIONS === */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shine {
    0% { transform: translateX(-100%) skewX(-20deg); }
    100% { transform: translateX(200%) skewX(-20deg); }
}

/* === SECTION STYLING === */
.features-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9f2ff 100%);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Dynamic Gradient Background */
.bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(52, 152, 219, 0.2), rgba(231, 76, 60, 0.2));
    background-size: 300% 300%;
    animation: gradientShift 12s ease infinite;
    z-index: -2;
}

/* Floating Blobs */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: -1;
}

.blob-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--secondary) 0%, transparent 70%);
    top: -200px;
    right: -200px;
    animation: float 20s infinite ease-in-out;
}

.blob-2 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    bottom: -300px;
    left: -300px;
    animation: float 25s infinite ease-in-out reverse;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}

.section-badge {
    display: inline-block;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
    animation: pulse 3s ease infinite;
}

.section-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--gray);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
    position: relative;
}

.underline {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    perspective: 1500px;
}

/* Feature Card */
.feature-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    color: white;
    font-size: 32px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateZ(30px);
    transition: all 0.3s ease;
    background: linear-gradient(135deg, var(--secondary), #67b0ff);
}

/* Consistent icon background with accent border */
.feature-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 23px;
    background: linear-gradient(135deg, var(--primary), #ff6b5c);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover .feature-icon::after {
    opacity: 1;
}

.feature-card:hover .feature-icon {
    transform: translateZ(30px) scale(1.1);
}

.feature-card h3 {
    font-size: 1.5rem;
    color: var(--dark);
    margin-bottom: 15px;
    text-align: center;
    font-weight: 700;
    position: relative;
    transform: translateZ(20px);
}

.feature-card p {
    color: var(--gray);
    text-align: center;
    line-height: 1.7;
    margin-bottom: 0;
    position: relative;
    transform: translateZ(10px);
}

/* Hover Shine Effect */
.hover-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: all 0.6s ease;
}

.feature-card:hover .hover-shine {
    animation: shine 0.8s ease;
}

/* Floating Particles */
.particle {
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}

.particle-1 {
    width: 8px;
    height: 8px;
    background: rgba(52, 152, 219, 0.6);
    top: 20%;
    left: 15%;
    animation: float 15s infinite ease-in-out;
}

.particle-2 {
    width: 6px;
    height: 6px;
    background: rgba(231, 76, 60, 0.6);
    top: 70%;
    left: 80%;
    animation: float 20s infinite ease-in-out reverse;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    image-rendering: -webkit-optimize-contrast;
}
.section-title h2 {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    margin-bottom: 15px;
    display: inline-block;
    position: relative;
    text-shadow: none;
    -webkit-font-smoothing: subpixel-antialiased;
}
.section-title h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--dark); /* Solid color fallback */
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    text-shadow: 0 0 1px rgba(0,0,0,0.01); /* Fixes subpixel rendering */
    -webkit-font-smoothing: antialiased; /* Improves text sharpness */
    backface-visibility: hidden; /* Fixes blur during animation */
}
/* Testimonial Section Styling */
.testimonial-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.testimonial-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(52,152,219,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 L0,0 Z"/></svg>');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
    opacity: 0.8;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-title h2 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, #3498db, #e74c3c);
    border-radius: 2px;
}

.section-title p {
    font-size: 1.2rem;
    color: #7f8c8d;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Testimonial Cards */
.testimonial-slider {
    position: relative;
    padding: 20px 0;
}

.testimonial-item {
    background: white;
    border-radius: 15px;
    padding: 40px;
    margin: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    position: relative;
    overflow: hidden;
    border: none;
}

.testimonial-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.testimonial-item::before {
    content: '"';
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 100px;
    font-family: Georgia, serif;
    color: rgba(52, 152, 219, 0.1);
    line-height: 1;
    z-index: 0;
}

.testimonial-content {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
}

.testimonial-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #34495e;
    font-style: italic;
    position: relative;
    padding-left: 30px;
}

.testimonial-content p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(to bottom, #3498db, #e74c3c);
    border-radius: 2px;
}

.testimonial-author {
    display: flex;
    align-items: center;
}

.author-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
    border: 3px solid white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.testimonial-item:hover .author-img {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

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

.author-info h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 5px;
    font-weight: 600;
}

.author-info p {
    font-size: 0.9rem;
    color: #7f8c8d;
    margin-bottom: 8px;
    font-style: normal;
}

.rating {
    color: #FFC107;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

/* Carousel Navigation */
.owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.owl-prev, .owl-next {
    width: 50px;
    height: 50px;
    background: white !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #3498db !important;
    font-size: 1.5rem !important;
    pointer-events: all;
    transition: all 0.3s ease;
}

.owl-prev:hover, .owl-next:hover {
    background: #3498db !important;
    color: white !important;
}

.owl-prev {
    margin-left: -25px;
}

.owl-next {
    margin-right: -25px;
}

/* Dots */
.owl-dots {
    text-align: center;
    margin-top: 30px;
}

.owl-dot {
    width: 12px;
    height: 12px;
    background: rgba(52, 152, 219, 0.3) !important;
    border-radius: 50%;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.owl-dot.active {
    background: #3498db !important;
    transform: scale(1.2);
}

/* Decorative Elements */
.testimonial-decoration {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.15;
    z-index: 0;
}

.decoration-1 {
    width: 300px;
    height: 300px;
    background: #3498db;
    top: -100px;
    right: -100px;
}

.decoration-2 {
    width: 200px;
    height: 200px;
    background: #e74c3c;
    bottom: -50px;
    left: -50px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .testimonial-section {
        padding: 60px 0;
    }
    
    .section-title h2 {
        font-size: 2rem;
    }
    
    .testimonial-item {
        padding: 30px;
        margin: 10px;
    }
    
    .testimonial-content p {
        padding-left: 20px;
        font-size: 1rem;
    }
    
    .owl-nav {
        display: none;
    }
}

/* CTA Section Styling */
.cta-section {
    position: relative;
    padding: 120px 0;
    text-align: center;
    color: #fff;
    overflow: hidden;
    background: 
        linear-gradient(135deg, rgba(52, 152, 219, 0.85) 0%, rgba(231, 76, 60, 0.85) 100%),
        url('https://images.unsplash.com/photo-1488085061387-422e29b40080?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.cta-section h2 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1.3;
    animation: fadeInUp 1s ease;
}

.cta-section p {
    font-size: 1.3rem;
    margin-bottom: 40px;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 1.6;
    animation: fadeInUp 1s ease 0.2s forwards;
    opacity: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.4s forwards;
    opacity: 0;
}

.btn-cta {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-primary-cta {
    background: #fff;
    color: #e74c3c;
}

.btn-secondary-cta {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-cta:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.btn-primary-cta:hover {
  background: linear-gradient(135deg, #3498db, #e74c3c);
  color: #fff;
  transition: background 0.4s ease;
}


.btn-secondary-cta:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Text visibility enhancements */
.cta-section h2,
.cta-section p {
    position: relative;
    z-index: 2;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .cta-section {
        padding: 80px 0;
        background-attachment: scroll;
    }
    
    .cta-section h2 {
        font-size: 2.2rem;
    }
    
    .cta-section p {
        font-size: 1.1rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn-cta {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
}

.cta-content h2,
.cta-content p {
  color: white ; /* Replace with your desired color */
}

.feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    color: white;
    font-size: 36px;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
    transition: all 0.3s ease;
    background-color: #3498db; /* Simple blue background */
}

.feature-card:hover .feature-icon {
    background-color: #e74c3c; /* Red on hover */
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3);
}

/* Remove gradient-related styles */
.feature-icon::after {
    display: none; /* Remove gradient border */
}

.about-hero {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/img/about-bg.jpg') no-repeat center center;
            background-size: cover;
            padding: 150px 0 100px;
            color: #fff;
            text-align: center;
        }
        
        .about-hero h1 {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 20px;
        }
        
        .about-hero p {
            font-size: 18px;
            max-width: 700px;
            margin: 0 auto 30px;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
        }
        
        .section-title h2 {
            font-size: 36px;
            color: #333;
            position: relative;
            display: inline-block;
            padding-bottom: 15px;
        }
        
        .section-title h2:after {
            content: '';
            position: absolute;
            width: 80px;
            height: 3px;
            background: #e74c3c;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .about-story {
            padding: 100px 0;
            background: #f9f9f9;
        }
        
        .story-content {
            padding-right: 30px;
        }
        
        .story-img {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .story-img img {
            width: 100%;
            transition: transform 0.5s;
        }
        
        .story-img:hover img {
            transform: scale(1.05);
        }
        
        .mission-vision {
            padding: 100px 0;
            background: url('assets/img/mission-bg.jpg') fixed;
            background-size: cover;
            position: relative;
            color: #fff;
        }
        
        .mission-vision:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
        }
        
        .mission-box, .vision-box {
            background: rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 10px;
            backdrop-filter: blur(5px);
            height: 100%;
            transition: transform 0.3s;
        }
        
        .mission-box:hover, .vision-box:hover {
            transform: translateY(-10px);
        }
        
        .mission-box i, .vision-box i {
            font-size: 50px;
            color: #e74c3c;
            margin-bottom: 20px;
        }
        
        .features-section {
            padding: 100px 0;
            background: #fff;
        }
        
        .feature-box {
            text-align: center;
            margin-bottom: 30px;
            padding: 30px 20px;
            border-radius: 10px;
            transition: all 0.3s;
            border: 1px solid #eee;
        }
        
        .feature-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .feature-icon {
            font-size: 60px;
            color: #e74c3c;
            margin-bottom: 20px;
        }
        
        .counter-section {
            padding: 80px 0;
            background: linear-gradient(135deg, #3498db, #2c3e50);
            color: #fff;
        }
        
        .counter-box {
            text-align: center;
            padding: 30px;
        }
        
        .counter {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 10px;
            min-height: 60px;
        }
        
        .testimonial-section {
            padding: 100px 0;
            background: #f9f9f9;
        }
        
        .testimonial-item {
            background: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            margin: 15px;
        }
        
        .testimonial-content {
            margin-bottom: 20px;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
        }
        
        .author-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 15px;
        }
        
        .author-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .rating {
            color: #f39c12;
            margin-top: 5px;
        }
        
        @media (max-width: 767px) {
            .about-hero {
                padding: 100px 0 60px;
            }
            
            .about-hero h1 {
                font-size: 36px;
            }
            
            .section-title h2 {
                font-size: 28px;
            }
            
            .story-content {
                padding-right: 0;
                margin-bottom: 30px;
            }
        }
        /* Advanced About Story Section */
.about-story {
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
    isolation: isolate;
}

.about-story::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(52, 152, 219, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(231, 76, 60, 0.08) 0%, transparent 40%);
    z-index: -1;
}

.section-title {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}

.section-title h2 {
    font-size: 3.2rem;
    font-weight: 800;
    background: linear-gradient(90deg, #2c3e50, #3498db);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #e74c3c);
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}

.story-content {
    padding-right: 50px;
    position: relative;
    z-index: 2;
}

.story-content h3 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
    line-height: 1.3;
    position: relative;
    display: inline-block;
}

.story-content h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 3px;
    background: #e74c3c;
    border-radius: 3px;
}

.story-content p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: #5a6a7a;
    margin-bottom: 25px;
    position: relative;
    padding-left: 30px;
    border-left: 3px solid rgba(52, 152, 219, 0.3);
}

.story-img-container {
    position: relative;
    perspective: 1500px;
}

.story-img {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
    transform: rotateY(-10deg) rotateX(2deg);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 1;
    border: 15px solid white;
}

.story-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(52, 152, 219, 0.1), rgba(231, 76, 60, 0.1));
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.story-img:hover {
    transform: rotateY(0deg) rotateX(0deg);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.25);
}

.story-img:hover::before {
    opacity: 1;
}

.story-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease, filter 0.4s ease;
    transform-origin: center;
}

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

.story-img-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed rgba(52, 152, 219, 0.4);
    border-radius: 25px;
    top: 20px;
    left: 20px;
    z-index: 0;
    transition: all 0.6s ease;
}

.story-img-container:hover .story-img-decoration {
    top: 15px;
    left: 15px;
}

/* Floating Elements */
.floating-element {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.4;
    z-index: -1;
}

.floating-1 {
    width: 300px;
    height: 300px;
    background: #3498db;
    top: 10%;
    left: 5%;
    animation: float 18s infinite ease-in-out;
}

.floating-2 {
    width: 200px;
    height: 200px;
    background: #e74c3c;
    bottom: 10%;
    right: 5%;
    animation: float 22s infinite ease-in-out reverse;
}

/* Timeline Effect */
.year-highlight {
    display: inline-block;
    background: linear-gradient(90deg, #3498db, #e74c3c);
    color: white;
    padding: 5px 15px;
    border-radius: 30px;
    font-weight: 600;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
    animation: pulse 3s infinite;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(3deg); }
    66% { transform: translateY(10px) rotate(-3deg); }
}

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

/* Responsive Design */
@media (max-width: 992px) {
    .story-content {
        padding-right: 0;
        margin-bottom: 50px;
    }
    
    .story-img {
        transform: rotateY(-5deg);
    }
}

@media (max-width: 768px) {
    .about-story {
        padding: 80px 0;
    }
    
    .section-title h2 {
        font-size: 2.5rem;
    }
    
    .story-content h3 {
        font-size: 2rem;
    }
    
    .story-img {
        border-width: 10px;
    }
}

.about-us-tab {
  height: 100%;
}

.left-tabs {
  display: flex;
  flex-direction: column;
}

.left-tabs .nav-link {
  text-align: left;
  padding: 15px 20px;
  margin-bottom: 5px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.left-tabs .nav-link i {
  margin-right: 10px;
}

.about-us-tab-content {
  height: 100%;
}

.tab-content {
  height: 100%;
}

.tab-pane {
  height: 100%;
}

.about-content {
  display: flex;
  height: 100%;
}

.about-content > div {
  width: 50%;
}

.about-content img {
  height: 100%;
  object-fit: cover;
}

/* Mobile-Specific Adjustments */
@media (max-width: 991px) {
  .about-us-inner {
    display: flex;
    flex-direction: column;
  }
  
  .about-us-tab {
    order: 1;
    margin-bottom: 0;
    height: auto !important;
  }
  
  .left-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .left-tabs .nav-item {
    flex: 1 0 auto;
    width: calc(100% - 13px);
    margin: 10px;
  }
  
  .left-tabs .nav-link {
    white-space: nowrap;
    text-align: center;
    padding: 12px 8px;
    border-radius: 8px !important;
    margin-bottom: 0;
  }
  
  .left-tabs .nav-link i {
    display: block;
    margin: 0 auto 5px;
    font-size: 20px;
  }
  
  .about-us-tab-content {
    order: 2;
    height: auto !important;
    margin-top: 0 !important;
  }
  
  .tab-content {
    height: auto !important;
  }
  
  .tab-pane {
    height: auto !important;
    margin-bottom: 0;
    display: none;
  }
  
  .tab-pane.active {
    display: block;
    animation: fadeIn 0.5s ease;
  }
  
  .about-content {
    flex-direction: column !important;
    height: auto !important;
    margin-top: 20px;
  }
  
  .about-content > div {
    width: 100% !important;
  }
  
  .about-content img {
    height: 250px !important;
    border-radius: 8px 8px 0 0 !important;
  }
  
  .left-tabs .nav-link.active {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
    z-index: 1;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* Add this to your existing styles */
.mv-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide the divider on mobile */
@media (max-width: 768px) {
  .mv-divider {
    display: none;
  }
  
  /* Optional: Adjust card layout for mobile */
  .mv-cards-container {
    flex-direction: column;
  }
  
  .mission-card, .vision-card {
    margin-bottom: 30px;
  }
}
/* Floating WhatsApp Button */
.float-whatsapp {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  left: 40px;
  background-color: #25D366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.float-whatsapp:hover {
  background-color: #128C7E;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.float-whatsapp i {
  margin-top: 2px;
}

/* Hide on mobile if needed */
@media (max-width: 768px) {
  .float-whatsapp {
    display: none; /* Remove this line if you want to show on mobile */
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 26px;
  }
}

@media (max-width: 768px) {
    nav ul li {
        margin: 0  -1px 10px;
    }
}

 
.feature-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    color: white;
    font-size: 32px;
    box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
    transition: all 0.3s ease;
    background-color: #3498db; /* Simple blue background */
}

.feature-card:hover .feature-icon {
    transform: translateZ(30px) scale(1.1);
    box-shadow: 0 15px 30px rgba(52, 152, 219, 0.4);
}

/* Remove gradient-related styles */
.feature-icon::after {
    display: none; /* Remove gradient border */
}

/* Keep all other existing styles exactly the same */
.feature-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    perspective: 1500px;
}