/* =====================================
Template Name:  Mediplus.
Author Name: Naimur Rahman
Website: http://wpthemesgrid.com/
Description: Mediplus - Doctor HTML Template.
Version:    1.1
========================================*/
/*======================================
[ CSS Table of contents ]
* Global CSS
* Header CSS
    + Topbar
    + Logo
    + Widget
    + Main Menu
    + Search
* Hero Slider CSS
* Schedule CSS
* Feautes CSS
* Fun Facts CSS
* Why Choose CSS
* Call to Action CSS
* Portfolio CSS
    + Portfolio Single CSS
* Services CSS
* Testimonials CSS
* Departments CSS
* Pricing Table CSS
* Clients CSS
* Team CSS
    + Single Team
* Blog CSS
    + Latest Blog CSS
    + Blog Single CSS
    + Blog Sidebar CSS
* Appointment CSS
* Login CSS
* Register CSS
* Faq CSS
* Contact Us CSS
* Error 404 CSS
* Mail Success CSS
* Newsletter CSS
* Doctor Calendar CSS
* About Us CSS
* Footer CSS
========================================*/
/*=============================
    Global CSS 
===============================*/
:root {
    --primary-color: #e65c4f;
    --secondary-color: #2a9d8f;
    --text-color: #2c3e50;
    --background-color: #f8f9fa;
    --white: #ffffff;
} 

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #888;
}
.container {
  max-width: 1170px;
}
#scrollUp {
  bottom: 15px;
  right: 15px;
  padding: 10px 20px;
  background: #EB5B00;
  color: #fff;
  font-size: 25px;
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  padding: 0;
  border-radius: 3px;
  box-shadow: 0px 0px 10px #00000026;
}
#scrollUp:hover {
  background: #2c2d3f;
}
/* Color Plate */
.color-plate {
  position: fixed;
  display: block;
  z-index: 99998;
  padding: 20px;
  width: 264px;
  background: #fff;
  right: -264px;
  text-align: left;
  top: 30%;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
  box-shadow: -3px 0px 25px -2px rgba(0, 0, 0, 0.2);
}
.color-plate.active {
  right: 0;
}
.color-plate .color-plate-icon {
  position: absolute;
  left: -48px;
  width: 48px;
  height: 45px;
  line-height: 45px;
  font-size: 21px;
  border-radius: 5px 0 0 5px;
  background: #EB5B00;
  text-align: center;
  color: #fff !important;
  top: 0;
  cursor: pointer;
  box-shadow: -4px 0px 5px #00000036;
}
.color-plate h4 {
  display: block;
  font-size: 15px;
  margin-bottom: 5px;
  font-weight: 500;
}
.color-plate p {
  font-size: 13px;
  margin-bottom: 15px;
  line-height: 20px;
}
.color-plate span {
  width: 42px;
  height: 35px;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  margin-right: 3px;
}
.color-plate span:hover {
  cursor: pointer;
}
.color-plate span.color1 {
  background: #EB5B00;
}
.color-plate span.color2 {
  background: #2196f3;
}
.color-plate span.color3 {
  background: #32b87d;
}
.color-plate span.color4 {
  background: #fe754a;
}
.color-plate span.color5 {
  background: #f82f56;
}
.color-plate span.color6 {
  background: #01b2b7;
}
.color-plate span.color7 {
  background: #6c5ce7;
}
.color-plate span.color8 {
  background: #85ba46;
}
.color-plate span.color9 {
  background: #273c75;
}
.color-plate span.color10 {
  background: #fd7272;
}
.color-plate span.color11 {
  background: #badc58;
}
.color-plate span.color12 {
  background: #44ce6f;
}

/* RTL Version Option CSS */
.rtl-version {
  margin-top: 12px;
}
.rtl-version h4 {
  margin-bottom: 12px;
}
.rtl-version .option-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rtl-version .option-box li {
  border: 1px solid #EB5B00;
  padding: 4px 8px;
  color: #EB5B00;
  cursor: pointer;
  transition: all 0.4s ease;
  font-weight: 500;
  font-size: 14px;
  border-radius: 2px;
}
.rtl-version .option-box li.active,
.rtl-version .option-box li:hover {
  border: 1px solid transparent;
  background: #EB5B00;
  color: #fff;
}

/*=============================
    End Global CSS 
===============================*/

/*===================
    Start Header CSS 
=====================*/
.header {
  background-color: #fff;
  position: relative;
}
.header .navbar-collapse {
  padding: 0;
}
/* Topbar */
.header .topbar {
  background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}

.header .top-link {
  float: left;
}

.header .top-link li {
  display: inline-block;
  margin-right: 8px;
}

.header .top-link li:last-child {
  margin-right: 0px;
}

.header .top-link li a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 129, 47, 0.1);
  color: #FA812F;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.header .top-link li a:hover {
  background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(250, 129, 47, 0.3);
}
.header .top-contact {
  float: right;
}
.header .top-contact li {
  display: inline-block;
  margin-right: 0px;
  color: #2c2d3f;
}
.header .top-contact li:last-child {
  margin-right: 0;
}
.header .top-contact li a {
  font-size: 13px;
  color: #2c2d3f;
  padding: 8px 16px;
  background: rgba(250, 129, 47, 0.05);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.header .top-contact li a:hover {
  background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
  color: #fff;
  box-shadow: 0 3px 10px rgba(250, 129, 47, 0.2);
}

.header .top-contact li a:hover i {
  color: #fff;
}

.header .top-contact li i {
  color: #FA812F;
  margin-right: 0;
  transition: color 0.3s ease;
}
.header .top-contact img {
  width: 24px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Language Flags */
.header .top-language {
  float: right;
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header .top-language li {
  display: inline-block;
  margin: 0;
}

.header .top-language li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(250, 129, 47, 0.05);
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  padding: 6px;
}

.header .top-language li a:hover {
  background: rgba(250, 129, 47, 0.1);
  border-color: #FA812F;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(250, 129, 47, 0.2);
}

.header .top-language li a img {
  width: 24px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.header .top-language li a:hover img {
  transform: scale(1.1);
}

.header .top-language li a.active {
  background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
  border-color: #DD0303;
  box-shadow: 0 4px 12px rgba(250, 129, 47, 0.3);
}
.header .header-inner {
  background: #fff;
  z-index: 999;
  width: 100%;
}
.get-quote {
  float: right;
}
.get-quote .btn {
  background: #EB5B00;
  color: #fff;
}
.header .logo {
  float: left;
}
.header .navbar {
  background: none;
  box-shadow: none;
  border: none;
  margin: 0;
  height: 0px;
  min-height: 0px;
}
.header .nav{
  padding-left: 17%;
}
.header .nav li {
  margin-right: 15px;
  float: left;
  position: relative;
}
.header .nav li:last-child {
  margin: 0;
}
.header .nav li a {
  color: #2c2d3f;
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  padding: 25px 12px;
  position: relative;
  display: inline-block;
  position: relative;
}
.header .nav li a::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0%;
  background: #EB5B00;
  border-radius: 5px 5px 0 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.header .nav li.active a:before {
  opacity: 1;
  visibility: visible;
  width: 100%;
}
.header .nav li.active a {
  color: #EB5B00;
}
.header .nav li:hover a:before {
  opacity: 1;
  width: 100%;
  visibility: visible;
}
.header .nav li:hover a {
  color: #EB5B00;
}
.header .nav li a i {
  display: inline-block;
  margin-left: 1px;
  font-size: 13px;
}
/* Middle Header */
.header.style2 .header-inner {
  border-top: 1px solid #eee;
}


.header .middle-header {
  background: #fff;
  padding: 0px 0px;
}
.header .widget-main {
  float: right;
}
.header.style2 .get-quote {
  margin-top: 0;
}
.header .single-widget {
  position: relative;
  float: left;
  margin-right: 30px;
  padding-left: 55px;
}
.header .single-widget:last-child {
  margin: 0;
}
.header .single-widget .logo {
  margin: 0;
  padding: 0;
  margin-top: 7px;
}
.header .single-widget i {
  position: absolute;
  left: 0;
  top: 6px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  color: #fff;
  background: #EB5B00;
  border-radius: 4px;
  text-align: center;
  font-size: 15px;
}
.header .single-widget h4 {
  font-size: 15px;
  font-weight: 500;
}
.header .single-widget p {
  margin-bottom: 5px;
  text-transform: capitalize;
}
.header .single-widget.btn {
  margin-left: 0;
}
/* Dropdown Menu */
.header .nav li .dropdown {
  background: #fff;
  width: 220px;
  position: absolute;
  left: -20px;
  top: 100%;
  z-index: 999;
  -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 5px #3333334d;
  transform-origin: 0 0 0;
  transform: scaleY(0.2);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  opacity: 0;
  visibility: hidden;
  top: 74px;
  border-left: 3px solid #EB5B00;
}
.header .nav li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.header .nav li .dropdown li {
  float: none;
  margin: 0;
  border-bottom: 1px dashed #eee;
}
.header .nav li .dropdown li.active a {
  color: #EB5B00;
}
.header .nav li .dropdown li:last-child {
  border: none;
}
.header .nav li .dropdown li a {
  padding: 12px 15px;
  color: #666;
  display: block;
  font-weight: 400;
  text-transform: capitalize;
  background: transparent;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.header .nav li .dropdown li a:before {
  display: none;
}
.header .nav li .dropdown li:last-child a {
  border-bottom: 0px;
}
.header .nav li .dropdown li:hover a {
  color: #EB5B00;
}
.header .nav li .dropdown li a:hover {
  border-color: transparent;
}
/* Right Bar 
.header.style2 .main-menu {
  display: inline-block;
  float: left;
}
.header .right-bar {
  display: inline-block;
  position: relative;
  padding-top: 20px;
  float: right;
}
.header .right-bar a {
  color: #fff;
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  background: #EB5B00;
  border-radius: 4px;
  display: block;
  font-size: 12px;
}
.header .right-bar li a:hover {
  color: #fff;
  background: #27ae60;
}
.header .search-top.active .search i:before {
  content: "\eee1";
  font-size: 15px;
}
/* Search 
.header .search-form {
  position: absolute;
  right: 0;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  top: 74px;
  box-shadow: 0px 0px 10px #0000001c;
  border-radius: 4px;
  overflow: hidden;
  transform: scale(0);
}
.header .search-top.active .search-form {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.header .search-form input {
  width: 282px;
  height: 50px;
  line-height: 50px;
  padding: 0 70px 0 20px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-radius: 3px;
  border: none;
  background: #fff;
  color: #2c2d3f;
}
.header .search-form button {
  position: absolute;
  right: 0;
  height: 50px;
  top: 0;
  width: 50px;
  background: #EB5B00;
  border: none;
  color: #fff;
  border-radius: 0 4px 4px 0;
  border-left: 1px solid transparent;
}
.header .search-form button:hover {
  background: #fff;
  color: #EB5B00;
  border-color: #e6e6e6;
}*/
/* Header Sticky */
.header.sticky .header-inner {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  bottom: initial;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  animation: fadeInDown 0.5s both 0.1s;
  box-shadow: 0px 0px 13px #00000054;
}
/*=========================
    End Header CSS
===========================*/

/*=========================
    start Hero Header CSS
===========================*/

/* Hero Header with Background */
.hero-header {
  background-image: url('../img/header-bg-sahara2.png'); /* Replace with your image */
  background-size: cover;
  background-position: center;
  height: 310px; /* Adjust height as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  width: 100%;
}

/* Centering the Logo */
.hero-header .logo-center img {
  max-width: 140px; /* Adjust logo size */
  height: auto;
}

/* Make it Responsive */
@media (max-width: 768px) {
  .header .middle-header {
    background: #fff;
    padding: 10px 0px;
  }
  .hero-header {
    height: 75px;
  }
  .hero-header .logo-center img {
    max-width: 90px;
  }
  .header .topbar {
    padding: 10px 0;
  }
  .header .top-link,
  .header .top-contact {
    float: none;
    text-align: center;
  }
  .header .top-link li {
    margin-right: 5px;
  }
  .header .top-link li a {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .header .top-contact li a {
    padding: 6px 12px;
    font-size: 12px;
  }
  .header .top-language {
    float: none;
    justify-content: center;
    margin-top: 10px;
  }
  .header .top-language li a {
    width: 36px;
    height: 36px;
  }
  .header .top-language li a img {
    width: 22px;
  }
}


/*=========================
    End Hero Header CSS
===========================*/
/* Old dropdown styles - kept for compatibility */
.top-contact .dropdown {
  position: relative;
  display: inline-block;
}

/*===========================
    Start Hero Area CSS
=============================*/
.slider .single-slider {
  height: 600px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slider .single-slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Dark overlay */
}
.slider .single-slider .text {
  margin-top: 120px;
}
.slider.index2 .single-slider .text {
  margin-top: 150px;
}
.slider .single-slider h1 {
  color: #fff;
  font-size: 44px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 130%;
}
.slider .single-slider h1 span {
  color: #EB5B00;
}
.slider .single-slider p {
  color: #fff;
  margin-top: 27px;
  font-weight: 400;
}
.slider .single-slider .button {
  margin-top: 30px;
}
.slider .single-slider .btn {
  color: #fff;
  background: #EB5B00;
  font-weight: 500;
  display: inline-block;
  margin: 0;
  margin-right: 10px;
}
.slider .single-slider .btn:last-child {
  margin: 0;
}
.slider .single-slider .btn.primary {
  background: #2c2d3f;
  color: #fff;
}
.slider .single-slider .btn.primary:before {
  background: #EB5B00;
}
.slider .owl-carousel .owl-nav {
  margin: 0;
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -25px;
}
.slider .owl-carousel .owl-nav div {
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  background: #EB5B00;
  color: #fff;
  font-size: 26px;
  position: absolute;
  margin: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  padding: 0;
  border-radius: 50%;
}
.slider .owl-carousel .owl-nav div:hover {
  background: #2c2d3f;
  color: #fff;
}
.slider .owl-carousel .owl-controls .owl-nav .owl-prev {
  left: 20px;
}
.slider .owl-carousel .owl-controls .owl-nav .owl-next {
  right: 20px;
}

/* Slider Animation */
.owl-item.active .single-slider h1 {
  animation: fadeInUp 1s both 0.6s;
}
.owl-item.active .single-slider p {
  animation: fadeInUp 1s both 1s;
}
.owl-item.active .single-slider .button {
  animation: fadeInDown 1s both 1.5s;
}
/*===========================
    End Hero Area CSS
=============================*/

/*=============================
    Start Schedule CSS
===============================*/
.schedule {
  background: #fff;
  margin: 0;
  padding: 0;
  height: 230px;
}
.schedule .schedule-inner {
  position: relative;
  transform: translateY(-50%);
  z-index: 9;
}
.schedule .single-schedule {
  position: relative;
  text-align: left;
  z-index: 3;
  border-radius: 5px;
  background: #EB5B00;
  -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;
}
.schedule .single-schedule .inner {
  overflow: hidden;
  position: relative;
  padding: 30px;
  z-index: 2;
}
.schedule .single-schedule:before {
  position: absolute;
  z-index: -1;
  content: "";
  bottom: -10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 80%;
  height: 90%;
  background: #EB5B00;
  opacity: 0;
  filter: blur(10px);
  -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;
}
.schedule .single-schedule:hover:before {
  opacity: 0.8;
}
.schedule .single-schedule:hover {
  transform: translateY(-5px);
}
.schedule .single-schedule .icon i {
  position: absolute;
  font-size: 110px;
  color: #fff;
  -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;
  z-index: -1;
  visibility: visible;
  opacity: 0.2;
  right: -25px;
  bottom: -30px;
}
.schedule .single-schedule span {
  display: block;
  color: #fff;
}
.schedule .single-schedule h4 {
  font-size: 20px;
  font-weight: 600;
  display: inline-block;
  text-transform: capitalize;
  color: #fff;
  margin-top: 13px;
}
.schedule .single-schedule p {
  color: #fff;
  margin-top: 22px;
}
.schedule .single-schedule a {
  color: #fff;
  margin-top: 25px;
  font-weight: 500;
  display: inline-block;
  position: relative;
}
.schedule .single-schedule a:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0%;
  background: #fff;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.schedule .single-schedule a:hover:before {
  width: 100%;
  width: 100%;
}
.schedule .single-schedule a i {
  margin-left: 10px;
}
.schedule .single-schedule .time-sidual {
}
.schedule .single-schedule .time-sidual {
  overflow: hidden;
  margin-top: 17px;
}
.schedule .single-schedule .time-sidual li {
  display: block;
  color: #fff;
  width: 100%;
  margin-bottom: 3px;
}
.schedule .single-schedule .time-sidual li:last-child {
  margin: 0;
}
.schedule .single-schedule .time-sidual li span {
  display: inline-block;
  float: right;
}
.schedule .single-schedule .day-head .time {
  font-weight: 400;
  float: right;
}
/*=============================
    End Schedule CSS
===============================*/

/*=============================
    Start Feautes CSS
===============================*/
.Feautes {
  padding-top: 0;
}
.Feautes.index2 {
  padding-top: 100px;
}
.Feautes.testimonial-page {
  padding-top: 100px;
}
.Feautes .single-features {
  text-align: center;
  position: relative;
  padding: 10px 20px;
}
.Feautes .single-features::before {
  position: absolute;
  content: "";
  right: -72px;
  top: 60px;
  width: 118px;
  border-bottom: 3px dotted #EB5B00;
}
.Feautes .single-features.last::before {
  display: none;
}
.Feautes .single-features .signle-icon {
  position: relative;
}
.Feautes .single-features .signle-icon i {
  font-size: 50px;
  color: #EB5B00;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 0;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #dddddd;
  border-radius: 100%;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.Feautes .single-features:hover .signle-icon i {
  background: #EB5B00;
  color: #fff;
  border-color: transparent;
}
.Feautes .single-features h3 {
  padding-top: 128px;
  color: #2c2d3f;
  font-weight: 600;
  font-size: 21px;
}
.Feautes .single-features p {
  margin-top: 20px;
}
/*=============================
    End Feautes CSS
===============================*/

/*=======================
    Start Fun Facts CSS
=========================*/
.fun-facts {
  position: relative;
}
.fun-facts.section {
  padding: 120px 0;
}
.fun-facts {
  background: url("img/fun-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}
.fun-facts .single-fun {
  position: relative;
}
.fun-facts .single-fun i {
  position: absolute;
  left: 0;
  font-size: 62px;
  color: #fff;
  height: 70px;
  width: 70px;
  line-height: 67px;
  font-size: 28px;
  text-align: center;
  padding: 0;
  margin: 0;
  border: 2px solid #fff;
  border-radius: 0px;
  top: 50%;
  margin-top: -35px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-radius: 50%;
}
.fun-facts .single-fun:hover i {
  color: #EB5B00;
  background: #fff;
  border-color: transparent;
}
.fun-facts .single-fun .content {
  padding-left: 92px;
}
.fun-facts .single-fun span {
  color: #fff;
  font-weight: 600;
  font-size: 30px;
  position: relative;
  display: block;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s eas;
  display: block;
  margin-bottom: 7px;
}
.fun-facts .single-fun p {
  color: #fff;
  font-size: 15px;
}
/*===================
    End Fun Facts
=====================*/

/*===================
    Why choose CSS
=====================*/
.why-choose {
  position: relative;
  background-image: url('../img/merzouga.jpg'); /* Replace with your actual image */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Parallax effect */
  background-repeat: no-repeat;
  padding: 100px 0; /* Adjust padding to ensure readability */
  z-index: 1;
}

/* Overlay Effect */
.why-choose::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Adjust opacity (0.6 for a dark overlay) */
  z-index: -1;
}


.why-choose .choose-left h3 {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 24px;
}
.why-choose .choose-left h3:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 2px;
  width: 50px;
  background: #EB5B00;
}
.why-choose .choose-left p {
  margin-bottom: 35px;
  color: #fff;
}
.why-choose .choose-left .list {
}
.why-choose .choose-left .list li {
  color: #868686;
  margin-bottom: 12px;
}
.why-choose .choose-left .list li:last-child {
  margin-bottom: 0px;
}
.why-choose .choose-left .list li i {
  height: 15px;
  width: 15px;
  line-height: 15px;
  text-align: center;
  background: #EB5B00;
  color: #fff;
  font-size: 14px;
  border-radius: 100%;
  padding-left: 2px;
  margin-right: 16px;
}
/* Start Faq CSS */
.why-choose .section-title h2, .why-choose .section-title p{
  color: #fff;
}
.why-choose .choose-right {
  height: 100%;
  width: 100%;
  background-image: url("img/video-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.why-choose .choose-right .video {
  color: #fff;
  height: 70px;
  width: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -35px;
  margin-top: -35px;
  font-size: 21px;
  background: #EB5B00;
  padding-left: 4px;
}
.why-choose .choose-right .video:hover {
  transform: scale(1.1);
}
.why-choose .video-image .waves-block .waves {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #fff;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  border-radius: 100%;
  -webkit-animation: waves 3s ease-in-out infinite;
  animation: waves 3s ease-in-out infinite;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -100px;
}
.why-choose .video-image .waves-block .wave-1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.why-choose .video-image .waves-block .wave-2 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.why-choose .video-image .waves-block .wave-3 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
/*=======================
    End Why choose CSS
=========================*/

/*===============================
    Start Call to action CSS
=================================*/
.call-action {
  background-image: url("img/call-bg.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
}
.call-action .content {
  text-align: center;
  padding: 100px 265px;
}
.call-action .content h2 {
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 46px;
}
.call-action .content p {
  color: #fff;
  margin: 30px 0px;
  font-size: 15px;
}
.call-action .content .btn {
  background: #fff;
  margin-right: 20px;
  font-weight: 500;
  border: 1px solid #fff;
  color: #EB5B00;
}
.call-action .content .btn:before {
  background: #EB5B00;
}
.call-action .content .btn:hover {
  background: #EB5B00;
  color: #fff;
}
.call-action .content .btn:last-child {
  margin-right: 0px;
}
.call-action .content .second {
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
  color: #fff !important;
}
.call-action .content .second:before {
  background: #fff;
}
.call-action .content .second:hover {
  color: #EB5B00;
  border-color: transparent;
  background: #fff;
}
.call-action .content .second i {
  margin-left: 10px;
}
/*===============================
    Start Call to action CSS
=================================*/

/*==========================
    Start Portfolio CSS
============================*/
.portfolio {
  background: #fdfdfd;
}
.portfolio .single-pf {
  position: relative;
}
.portfolio .single-pf img {
  height: 100%;
  width: 100%;
}
.portfolio .single-pf:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #EB5B00;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: 1;
}
.portfolio .single-pf:hover:before {
  opacity: 0.7;
  visibility: visible;
}
.portfolio .single-pf .btn {
  color: #EB5B00;
  z-index: 3;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 0px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  height: 48px;
  width: 150px;
  text-align: center;
  line-height: 48px;
  padding: 0;
  font-weight: 500;
  font-size: 14px;
  margin-left: -75px;
  margin-top: -24px;
  border-radius: 4px;
}
.portfolio .single-pf:hover .btn {
  opacity: 1;
  visibility: visible;
}
.portfolio .single-pf .btn:hover {
  color: #fff;
}
.portfolio .owl-nav {
  display: none;
}
/* Slider Nav */
.pf-details .image-slider .owl-nav {
  margin: 0;
  position: absolute;
  top: 50%;
  width: 100%;
  margin-top: -25px;
}
.pf-details .image-slider .owl-carousel .owl-nav div {
  height: 50px;
  width: 50px;
  line-height: 45px;
  background: #fff;
  color: #EB5B00;
  position: absolute;
  margin: 0;
  border-radius: 100%;
  font-size: 20px;
  text-align: center;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  box-shadow: 0px 0px 10px #0000001a;
}
.pf-details .image-slider .owl-carousel .owl-nav div:hover {
  color: #fff;
  background: #EB5B00;
}
.pf-details .image-slider .owl-carousel .owl-controls .owl-nav .owl-prev {
  left: 20px;
}
.pf-details .image-slider .owl-carousel .owl-controls .owl-nav .owl-next {
  right: 20px;
}
.pf-details .image-slider {
  border-radius: 8px 8px 0 0;
}
.pf-details .image-slider img {
  height: 100%;
  width: 100%;
}
.pf-details .date {
  background: #EB5B00;
  display: block;
  padding: 20px;
  text-align: center;
  border-radius: 0;
  border: none;
  margin: 0;
  margin-top: -1px;
}
.pf-details .date ul li {
  font-size: 16px;
  color: #fff;
  display: inline-block;
  margin-right: 60px;
}
.pf-details .date ul li:last-child {
  margin: 0;
}
.pf-details .date ul li span {
  font-weight: 500;
  display: inline-block;
  margin-right: 5px;
}
.pf-details .body-text {
}
.pf-details .body-text h3 {
  font-size: 30px;
  font-weight: 600;
  color: #333;
  margin-top: 40px;
}
.pf-details .body-text p {
  margin-top: 20px;
}
.pf-details .body-text .share {
  margin-top: 40px;
}
.pf-details .body-text .share h4 {
  font-size: 15px;
  font-weight: 500;
  display: inline-block;
}
.pf-details .body-text .share ul {
  display: inline-block;
  margin-left: 12px;
}
.pf-details .body-text .share ul li {
  display: inline-block;
  margin-right: 10px;
}
.pf-details .body-text .share ul li:last-child {
  margin-right: 0;
}
.pf-details .body-text .share ul li a {
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #c8c8c8;
  color: #757575;
  display: block;
  border-radius: 50%;
}
.pf-details .body-text .share ul li a:hover {
  color: #fff;
  border-color: transparent;
  background: #EB5B00;
}
/*==========================
    End Portfolio CSS
============================*/

/*=========================
    Srart service CSS
===========================*/
.services .single-service {
  margin: 30px 0;
  position: relative;
  padding-left: 70px;
}
.services .single-service i {
  font-size: 45px;
  color: #EB5B00;
  position: absolute;
  left: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.services .single-service h4 {
  text-transform: capitalize;
  margin-bottom: 25px;
  color: #2c2d3f;
}
.services .single-service h4 a {
  color: #2c2d3f;
  font-size: 20px;
  font-weight: 600;
}
.services .single-service h4 a:hover {
  color: #EB5B00;
}
.services .single-service p {
  color: #868686;
}
/*-- Service Details --*/
.services-details-img {
  margin-bottom: 50px;
}

.services-details-img img {
  width: 100%;
  margin-bottom: 30px;
}
.services-details-img h2 {
  font-weight: 600;
  font-size: 28px;
  margin-bottom: 16px;
}
.services-details-img P {
  margin-bottom: 20px;
}
.services-details-img blockquote {
  font-size: 15px;
  color: #4a6f8a;
  background-color: #EB5B00;
  padding: 30px 75px;
  line-height: 26px;
  position: relative;
  margin-bottom: 20px;
  color: #fff;
}
.services-details-img blockquote i {
  position: absolute;
  display: inline-block;
  top: 20px;
  left: 38px;
  font-size: 32px;
}
.service-details-inner-left {
  background-image: url("img/signup-bg.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.service-details-inner-left img {
  display: none;
}
.service-details-inner {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.service-details-inner h2 {
  font-weight: 600;
  font-size: 30px;
  margin-bottom: 15px;
  border-left: 3px solid #EB5B00;
  padding-left: 15px;
}
.service-details-inner p {
  margin-bottom: 15px;
}
.service-details-inner p:last-child {
  margin-bottom: 0;
}
/*=========================
    End service CSS
===========================*/

/*=============================
    Start Testimonials CSS
===============================*/
/* Background Image & Overlay */
.testimonials {
  position: relative;
  background: url('../img/merzouga.jpg') no-repeat center center/cover;
  padding: 80px 0;
  color: white;
  text-align: center;
  z-index: 1;
}

/* Overlay Effect */
.testimonials::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Dark overlay */
  z-index: -1;
}

/* Styling for Content */
.section-title h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
  position: relative;
  z-index: 2;
}

/* TripAdvisor Widget Styling */
.TA_cdswritereviewnew {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 20px;
  display: inline-block;
  backdrop-filter: blur(10px); /* Glassmorphism effect */
}

.TA_cdswritereviewnew img {
  max-width: 200px;
  transition: transform 0.3s ease-in-out;
}

.TA_cdswritereviewnew img:hover {
  transform: scale(1.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .testimonials {
    padding: 60px 0;
  }
  .section-title h2 {
    font-size: 24px;
  }
  .TA_cdswritereviewnew img {
    max-width: 150px;
  }
}
.testimonials {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.testimonials .section-title h2 {
  color: #fff;
}
.testimonials .single-testimonial {
  text-align: left;
  position: relative;
  background: #fff;
  padding: 40px 30px;
  margin: 5px;
  margin-bottom: 27px;
  margin-right: 30px;
  border-radius: 5px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin: 0;
  margin: 30px 20px;
}
.testimonials .single-testimonial:hover {
  box-shadow: 0px 10px 10px #0000001c;
  transform: translateY(-4px);
}
.testimonials .single-testimonial img {
  position: absolute;
  left: 30px;
  bottom: -26px;
  height: 53px;
  width: 53px;
  border-radius: 100%;
}
.testimonials .single-testimonial p {
  color: #868686;
  font-size: 14px;
}
.testimonials .single-testimonial .name {
  margin-top: 22px;
  color: #2c2d3f;
  font-weight: 500;
  font-size: 15px;
}
.testimonials .owl-dots {
  position: absolute;
  left: 50%;
  bottom: -55px;
  margin-top: -47px;
  padding: 10px 25px;
  border-radius: 3px;
  margin: 0 0 0 -52px;
  margin-top: 49px;
  box-sizing: ;
}
.testimonials .owl-dots .owl-dot {
  display: inline-block;
  margin-right: 10px;
}
.testimonials .owl-dots .owl-dot:last-child {
  margin: 0px;
}
.testimonials .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 30px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin: 0;
  background: #fff;
  position: relative;
}
.testimonials .owl-dots .owl-dot span:hover {
  background: #fff;
}
.testimonials .owl-dots .owl-dot.active span {
  background: #fff;
  width: 20px;
}
/*=============================
    End Testimonials CSS
===============================*/

/*==========================
    Start Departments CSS
============================*/
.departments {
  position: relative;
  background: url('../img/merzouga.jpg') no-repeat center center fixed;
  background-size: cover;
}

.departments::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); 
}


.departments .department-tab .nav {
  margin-bottom: 30px;
  background: transform;
  position: relative;
  flex-direction: row;
  border-radius: 0px;
}
.departments .department-tab .nav .list-group-item {
  text-align: center;
  margin-right: 54px;
  background: transparent;
  color: #fff;
  margin-top: 20px;
  border: none;
  padding: 0;
  padding-bottom: 20px;
  border-bottom: 2px solid transparent;
  padding: 0 10px 20px 10px;
  border-radius: 0px;
}
.departments .department-tab .nav .list-group-item:last-child {
  margin-right: 0;
}
.departments .department-tab .nav .list-group-item i {
  font-size: 40px;
  color: #fff;
}
.departments .department-tab .nav .list-group-item:hover {
  background: transparent;
}
.departments .department-tab .nav .list-group-item.active i {
  color: #fff;
}

.departments .department-tab .nav .list-group-item.active {
  border-color: #fff;
}
.departments .department-tab .nav .list-group-item span {
  display: block;
}
.departments .department-tab .nav .list-group-item .first {
  padding-top: 20px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}

.departments .section-title h2{color: #fff}

.departments .department-tab .nav .list-group-item span{
  font-size: 15px !important;
}
.departments .department-tab .nav .list-group-item.active .first {
  color: #fff;
}
.departments .department-tab .nav .list-group-item .second {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  margin-top: 3px;
}
.departments .department-tab .tab-pane .department-left {
}
.departments .department-tab .tab-pane .department-left h3 {
  color: #fff;
  font-weight: 600;
  font-size: 26px;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 30px;
}
.departments .department-tab .tab-pane .department-left h3:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 3px;
  width: 50px;
  background: #ff9207;
}
.departments .department-tab .tab-pane .department-left .p1 {
  color: #EB5B00;
  font-weight: 500;
  margin-bottom: 18px;
}
.departments .department-tab .tab-pane .department-left p {
  margin-bottom: 20px;
  color: #fff;
}
.departments .department-tab .tab-pane .department-left .list {
}
.departments .department-tab .tab-pane .department-left .list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 6px;
}
.departments .department-tab .tab-pane .department-left .list li:last-child {
  margin-bottom: 0px;
}
.departments .department-tab .tab-pane .department-left .list li i {
  position: absolute;
  left: 0;
  height: 15px;
  width: 15px;
  line-height: 15px;
  color: #fff;
  background: #EB5B00;
  text-align: center;
  border-radius: 100%;
  font-size: 8px;
  margin-right: 20px;
  top: 4px;
}
.departments .department-tab .tab-content .tab-text h2 {
  font-size: 18px;
}
.departments .department-tab .tab-content .tab-text p {
  color: #555;
  margin-top: 10px;
}
/*==========================
    End Departments CSS
============================*/

/*=============================
    Start Pricing Table CSS
===============================*/
.pricing-table {
  background: #f9f9f9;
  position: relative;
}
.pricing-table .single-table {
  background: #fff;
  border: 1px solid #ddd;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 15px 0;
  padding: 45px 35px 30px 35px;
}
/* Table Head */
.pricing-table .single-table .table-head {
  text-align: center;
}
.pricing-table .single-table .icon i {
  font-size: 65px;
  color: #EB5B00;
}
.pricing-table .single-table .title {
  font-size: 21px;
  color: #2c2d3f;
  margin-top: 30px;
  margin-bottom: 15px;
}
.pricing-table .single-table .amount {
  font-size: 36px;
  font-weight: 600;
  color: #EB5B00;
}
.pricing-table .single-table .amount span {
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #868686;
  margin-left: 8px;
}
/* Table List */
.pricing-table .single-table .table-list {
  padding: 10px 0;
  text-align: left;
  margin-top: 30px;
}
.pricing-table .table-list li {
  position: relative;
  color: #666;
  text-transform: capitalize;
  margin-bottom: 18px;
  padding-right: 32px;
}
.pricing-table .table-list li:last-child {
  margin-bottom: 0px;
}
.pricing-table .table-list li.cross i {
  background: #aaaaaa;
}
.pricing-table .table-list i {
  font-size: 7px;
  text-align: center;
  margin-right: 10px;
  position: absolute;
  right: 0;
  height: 16px;
  width: 16px;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: #EB5B00;
  border-radius: 100%;
  padding-left: 1px;
}

/* Table Bottom */
.pricing-table .table-bottom {
  margin-top: 25px;
}
.pricing-table .btn {
  padding: 12px 25px;
  width: 100%;
  color: #fff;
  background: #EB5B00;
}
.pricing-table .btn:before {
  background: #2c2d3f;
}
.pricing-table .btn:hover {
  color: #fff;
}
.pricing-table .btn i {
  font-size: 16px;
  margin-right: 10px;
}
/*=============================
    End Pricing Table CSS
===============================*/

/*========================
    Start Clients CSS
==========================*/
.clients {
  background-image: url("img/client-bg.jpg");
  background-size: cover;
  background-position: center;
  padding: 100px 0px;
  position: relative;
}
.clients .single-clients {
}
.clients .single-clients img {
  width: 100%;
  cursor: pointer;
  text-align: center;
  float: none;
  padding: 0 35px;
}
/*========================
    End Clients CSS
==========================*/

/*====================
    Start Team CSS
======================*/
.team {
  background-image: url("img/testi-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.team.single-page {
  background: #fff;
}
.team .section-title h2 {
  color: #000;
}
.team .section-title p {
  color: #000;
}
.team .single-team {
  background: #fff;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-top: 30px;
  text-align: center;
  box-shadow: 0px 0px 10px #00000021;
  border-radius: 5px;
  overflow: hidden;
}
.team .t-head {
  position: relative;
  overflow: hidden;
}
.team .t-head::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  content: "";
  z-index: 2;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.team .single-team:hover .t-head::before {
  visibility: visible;
  opacity: 0.5;
}
.team .t-head img {
  width: 100%;
  position: relative;
}
.team .t-icon a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 46px;
  line-height: 40px;
  opacity: 0;
  visibility: hidden;
  font-weight: 400;
  text-align: center;
  color: #fff;
  border-radius: 0;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 99;
  margin: -23px 0 0 -75px;
  font-size: 15px;
  background: #2889e4;
  font-size: 13px;
  line-height: 46px;
  padding: 0;
  border-radius: 4px;
}
.team .single-team:hover .t-icon a {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}
.team .t-bottom {
  text-align: center;
  position: relative;
  padding: 0 20px;
  padding: 25px 20px;
}
.team .t-bottom p {
  color: #666;
  font-size: 13px;
  display: block;
  margin-bottom: 4px;
}
.team .t-bottom h2 {
  font-size: 22px;
  text-transform: capitalize;
  font-weight: bold;
  color: #2c2d3f;
  font-family: 'Poppins';
}
.team .t-bottom h2 a:hover {
  color: #EB5B00;
}
/*-- Doctor Details --*/
.doctor-details-left {
  -webkit-box-shadow: 0px 0px 10px 0px #ddd;
  box-shadow: 0px 0px 10px 0px #ddd;
  border-radius: 10px;
  overflow: hidden;
}
.doctor-details-item img {
  width: 100%;
  border-radius: 0;
}
.doctor-details-item .doctor-details-contact {
  padding: 50px;
}
.doctor-details-item .doctor-details-contact h3 {
  font-weight: 600;
  font-size: 20px;
  color: #2c2d3f;
  margin-bottom: 30px;
}
.doctor-details-item .doctor-details-contact .basic-info {
  margin: 0;
  padding: 0;
}
.doctor-details-item .doctor-details-contact .basic-info li {
  list-style-type: none;
  display: block;
  font-weight: 400;
  font-size: 15px;
  color: #2c2d3f;
  margin-bottom: 10px;
}
.doctor-details-item .doctor-details-contact .basic-info li:last-child {
  margin-bottom: 0;
}
.doctor-details-item .doctor-details-contact .basic-info li i {
  display: inline-block;
  color: #EB5B00;
  margin-right: 8px;
  font-size: 16px;
  position: relative;
  top: 1px;
}
.doctor-details-area .doctor-details-left .social {
  margin-top: 25px;
}
.doctor-details-area .doctor-details-left .social li {
  display: inline-block;
  margin-right: 10px;
}
.doctor-details-area .doctor-details-left .social li:last-child {
  margin-right: 0px;
}
.doctor-details-area .doctor-details-left .social li a {
  height: 34px;
  width: 34px;
  line-height: 34px;
  text-align: center;
  border: 1px solid #c8c8c8;
  text-align: center;
  padding: 0;
  border-radius: 4px;
  display: block;
  color: #757575;
  font-size: 16px;
}
.doctor-details-area .doctor-details-left .social li a:hover {
  color: #fff;
  background: #EB5B00;
  border-color: transparent;
}
.doctor-details-item .doctor-details-work h3 {
  font-weight: 600;
  font-size: 20px;
  color: #2c2d3f;
  margin-top: 30px;
}
.doctor-details-item .doctor-details-work .time-sidual {
}
.doctor-details-item .doctor-details-work .time-sidual {
  overflow: hidden;
}
.doctor-details-item .doctor-details-work .time-sidual li {
  display: block;
  color: #2c2d3f;
  width: 100%;
  margin-bottom: 10px;
}
.doctor-details-item .doctor-details-work .time-sidual li span {
  display: inline-block;
  float: right;
}
.doctor-details-item .doctor-details-work .day-head .time {
  font-weight: 400;
  float: right;
}

.doctor-details-area .doctor-details-right {
  padding-left: 60px;
  padding-top: 70px;
}
.doctor-details-item .doctor-details-biography {
}
.doctor-details-item .doctor-details-biography h3 {
  font-weight: 600;
  font-size: 24px;
  color: #2f60bd;
  margin-bottom: 25px;
  margin-top: 25px;
}
.doctor-details-item .doctor-details-biography p {
  margin-bottom: 0;
}
.doctor-details-item .doctor-details-biography ul {
  margin: 0;
  padding: 0;
}
.doctor-details-item .doctor-details-biography ul li {
  list-style-type: none;
  display: block;
  margin-bottom: 10px;
}
.doctor-details-item .doctor-details-biography ul li:last-child {
  margin-bottom: 0;
}
.doctor-details-item .doctor-name .name {
  font-size: 30px;
  font-weight: 600;
}
.doctor-details-item .doctor-name .deg {
  font-size: 22px;
  margin: 10px 0 5px 0;
}
.doctor-details-item .doctor-name .degree {
  font-size: 16px;
}
/*====================
    End Team CSS
======================*/

/*=======================
    Start Blog CSS
=========================*/
.blog {
  background: #fff;
}
.blog .blog-title {
  text-align: center;
}
.blog .single-news {
  background: #fff;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  box-shadow: 0px 0px 10px #00000014;
}
.blog .single-news img {
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.blog .single-news .news-head {
  position: relative;
  overflow: hidden;
}
.blog .single-news .news-content {
  text-align: left;
  background: #fff;
  z-index: 99;
  position: relative;
  padding: 30px;
  left: 0;
  z-index: 0;
}
.blog .single-news .news-content:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background: #EB5B00;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.blog .single-news:hover .news-content:before {
  opacity: 1;
  visibility: visible;
  width: 100%;
}
.blog .single-news .news-body h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 24px;
}
.blog .single-news .news-body h2 a {
  color: #2c2d3f;
  font-weight: 500;
}
.blog .single-news .news-body h2 a:hover {
  color: #EB5B00;
}
.blog .single-news .news-content p {
  font-weight: 400;
  text-transform: capitalize;
  font-size: 13px;
  letter-spacing: 0px;
  line-height: 23px;
  margin-bottom: 15px;
}

.btn-rutas a{
  background: #EB5B00;
    padding: 10px 20px;
    font-size: 14px;
    font-family: 'Poppins';
    margin: 10px 0px;
    color: #fff !important;
    font-weight: 400;
    border-radius: 50px;
        float: right;
    z-index: 1;
    position: relative;
}
.blog .single-news .news-body .date {
  display: inline-block;
  font-size: 14px;
  margin-bottom: 5px;
  background: #EB5B00;
  color: #fff;
  padding: 4px 15px;
  border-radius: 3px;
  font-size: 14px;
  margin-bottom: 10px;
}
.blog.grid .single-news {
  margin-top: 30px;
}
/* Blog Sidebar */
.main-sidebar {
  background: #fff;
  margin-top: 30px;
  background: transparent;
}
.main-sidebar .single-widget {
  margin-bottom: 30px;
  padding: 40px;
  background: #fff;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.main-sidebar .single-widget .title {
  position: relative;
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 30px;
  display: block;
  background: #fff;
  padding-left: 12px;
}
.main-sidebar .single-widget .title::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -1px;
  height: 100%;
  width: 3px;
  background: #EB5B00;
}
.main-sidebar .single-widget:last-child {
  margin: 0;
}
.main-sidebar .search {
  position: relative;
}
.main-sidebar .search input {
  width: 100%;
  height: 45px;
  box-shadow: none;
  text-shadow: none;
  font-size: 14px;
  border: none;
  color: #222;
  background: transparent;
  padding: 0 70px 0 20px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-radius: 0;
  border: 1px solid #eee;
  border-radius: 5px;
}

.main-sidebar .search .button {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 44px;
  width: 50px;
  line-height: 45px;
  box-shadow: none;
  text-shadow: none;
  text-align: center;
  border: none;
  font-size: 14px;
  color: #fff;
  background: #333;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-radius: 0 5px 5px 0;
}
.main-sidebar .search .button:hover {
  background: #EB5B00;
  color: #fff;
}
/* Category List */
.main-sidebar .categor-list {
  margin-top: 15px;
}
.main-sidebar .categor-list li {
  margin-bottom: 10px;
}
.main-sidebar .categor-list li:last-child {
  margin-bottom: 0px;
}
.main-sidebar .categor-list li a {
  display: inline-block;
  color: #333;
  font-size: 14px;
}
.main-sidebar .categor-list li a:hover {
  color: #EB5B00;
  padding-left: 7px;
}
.main-sidebar .categor-list li a i {
  display: inline-block;
  margin-right: 0px;
  font-size: 9px;
  transform: translateY(-1px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.main-sidebar .categor-list li a:hover i {
  margin-right: 6px;
  opacity: 1;
  visibility: visible;
}
/* Recent Posts */
.main-sidebar .single-post {
  position: relative;
  border-bottom: 1px solid #ddd;
  display: inline-block;
  padding: 17px 0;
}
.main-sidebar .single-post:last-child {
  padding-bottom: 0px;
  border: none;
}
.main-sidebar .single-post .image img {
  float: left;
  width: 80px;
  height: 80px;
  margin-right: 20px;
}
.main-sidebar .single-post .content {
  padding-left: 100px;
}
.main-sidebar .single-post .content h5 {
  line-height: 18px;
}
.main-sidebar .single-post .content h5 a {
  color: #2c2d3f;
  font-weight: 500;
  font-size: 14px;
  font-weight: 500;
  margin-top: 10px;
  display: block;
  margin-bottom: 10px;
  margin-top: 0;
}
.main-sidebar .single-post .content h5 a:hover {
  color: #EB5B00;
}
.main-sidebar .single-post .content .comment li {
  color: #888;
  display: inline-block;
  margin-right: 15px;
  font-weight: 400;
  font-size: 14px;
}
.main-sidebar .single-post .content .comment li:last-child {
  margin-right: 0;
}
.main-sidebar .single-post .content .comment li i {
  display: inline-block;
  margin-right: 5px;
}
/* Blog Tags */
.main-sidebar .side-tags .tag {
  margin-top: 40px;
}
.main-sidebar .side-tags .tag li {
  display: inline-block;
  margin-right: 7px;
  margin-bottom: 20px;
}
.main-sidebar .side-tags .tag li a {
  background: #fff;
  color: #333;
  padding: 8px 14px;
  text-transform: capitalize;
  border-radius: 0;
  font-size: 13px;
  background: #f6f7fb;
  border-radius: 4px;
}
.main-sidebar .side-tags .tag a:hover {
  color: #fff;
  background: #EB5B00;
  border-color: transparent;
}
/* News Single */
.news-single {
  padding: 60px 0 90px;
  background: #f8f8f8;
}
.news-single .single-main {
  margin-top: 30px;
  background: #fff;
  padding: 30px;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.news-single .news-head {
}
.news-single .news-head img {
  width: 100%;
  height: 100%;
}
.news-single .news-title {
  font-size: 25px;
  margin: 20px 0;
}
.news-single .news-title a {
  color: #252525;
  font-weight: 600;
}
.news-single .news-title a:hover {
  color: #EB5B00;
}
/* Blog Meta */
.news-single {
  background: #fff;
}
.news-single .meta {
  overflow: hidden;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 15px;
}
.news-single .meta span {
  margin-right: 10px;
  display: inline-block;
}
.news-single .meta span:last-child {
  margin: 0;
}
.news-single .meta span,
.news-single .meta span a {
  color: #2c2d3f;
  font-weight: 400;
}
.news-single .meta span i {
  margin-right: 5px;
  color: #EB5B00;
}
.news-single .meta-left {
  float: left;
}
.news-single .meta-left .author img {
  width: 45px;
  height: 45px;
  border-radius: 100%;
  margin-right: 12px;
}
.news-single .meta-left .author {
  float: left;
}
.news-single .meta-left span.date {
  margin-top: 10px;
}
.news-single .meta-right {
  float: right;
  margin-top: 10px;
}
.news-single .news-content {
  margin: 20px 0;
}
.news-single .news-content p {
  margin-bottom: 10px;
}
.news-single .news-content p:last-child {
  margin: 0;
}
.news-single .news-text p {
  font-size: 14px;
  margin-bottom: 20px;
}
/* Image Gallery */
.news-single .image-gallery {
  margin-bottom: 20px;
}
.news-single .image-gallery .single-image {
  overflow: hidden;
}
.news-single .image-gallery .single-image:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  transform: scale(1.2);
}
/* Blockqoute */
.news-single blockquote {
  background-image: url("img/blockqoute-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 30px;
  overflow: hidden;
}
.news-single blockquote::before {
  opacity: 0.9;
}
.news-single .news-text blockquote p {
  color: #fff;
  margin: 0;
  line-height: 26px;
  font-size: 15px;
  position: relative;
}
.news-single .blog-bottom {
  overflow: hidden;
}
/* Social Share */
.news-single .social-share {
  float: left;
}
.news-single .social-share li {
  float: left;
}
.news-single .social-share li span {
  padding-left: 5px;
}
.news-single .social-share li.facebook a {
  background: #5d82d1;
}
.news-single .social-share li.twitter a {
  background: #40bff5;
}
.news-single .social-share li.google-plus a {
  background: #eb5e4c;
}
.news-single .social-share li.linkedin a {
  background: #238cc8;
}
.news-single .social-share li.pinterest a {
  background: #e13138;
}
.news-single .social-share li a {
  padding: 10px 20px;
  display: block;
  color: #fff;
}
.news-single .social-share li a:hover {
  background: #2b343e;
}
/* Prev Next Button */
.news-single .prev-next {
  float: right;
}
.news-single .prev-next li {
  display: inline-block;
  padding: 0;
  margin-right: 5px;
}
.news-single .prev-next li:last-child {
  border: none;
}
.news-single .prev-next li a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 36px;
  text-align: center;
  font-size: 16px;
  border: 1px solid #c4c4c4;
  color: #555;
  border-radius: 4px;
}
.news-single .prev-next li a:hover {
  color: #fff;
  background: #EB5B00;
  border-color: transparent;
}
/* Blog Comments */
.news-single .blog-comments {
  margin-top: 30px;
  background: transparent;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 30px;
}
.news-single .blog-comments h2 {
  text-align: left;
  text-transform: capitalize;
  font-size: 18px;
  color: #252525;
  margin-bottom: 20px;
}
.news-single .blog-comments h4 span {
  float: right;
}
.news-single .single-comments {
  overflow: hidden;
  margin-bottom: 30px;
  background: #fff;
  border-bottom: 1px solid #eee;
  padding-bottom: 30px;
}
.news-single .single-comments.left .main {
  padding-left: 100px;
  position: relative;
  margin-left: 100px;
}
.news-single .single-comments.left img {
  position: absolute;
  left: 0;
  top: 0;
}
.news-single .single-comments:last-child {
  margin: 0;
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.news-single .single-comments .main {
  overflow: hidden;
}
.news-single .single-comments .head {
  float: left;
  margin-right: 20px;
  text-align: center;
  width: 12%;
}
.news-single .head img {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 100%;
  border: 5px solid #f8f8f8;
}
.news-single .single-comments .body {
  float: left;
  width: 85%;
}
.news-single .single-comments.left .body {
  float: noene;
  width: 100%;
}
.news-single .single-comments .comment-list {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #e2e2e2;
  overflow: hidden;
}
.news-single .single-comments .comment-list .body {
  width: 78%;
}
.news-single .single-comments h4 {
  margin: 0 0 5px;
  font-size: 16px;
  text-align: left;
  font-weight: 500;
  color: #252525;
}
.news-single .single-comments .comment-meta {
  margin-bottom: 5px;
}
.news-single .single-comments .meta {
  font-size: 13px;
  color: #555;
  font-weight: 400;
  border: none;
  margin-right: 10px;
  padding: 0;
  margin: 0 10px 0 0;
}
.news-single .single-comments .meta:last-child {
  margin: 0;
}
.news-single .comment-meta span i {
  margin-right: 5px;
}
.news-single .comment-meta span:last-child {
  margin: 0;
}
.news-single .single-comments p {
  font-size: 13px;
}
.news-single .single-comments a {
  text-transform: capitalize;
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  padding: 3px 15px;
  display: inline-block;
  margin-top: 10px;
  border-radius: 4px;
  background: #EB5B00;
  color: #fff;
}
.news-single .single-comments a:hover {
  background: #2c2d3f;
  color: #fff;
}
.news-single .single-comments a i {
  margin-right: 5px;
}
.news-single .comment-list {
  padding-left: 50px;
}
.news-single .single-comments.login {
  text-align: center;
}
.news-single .single-comments.login i {
  font-size: 20px;
}
.news-single .single-comments.login a {
  text-align: center;
}
.news-single .single-comments.login a:hover {
  color: #353535;
}
.news-single .comments-form {
  margin-top: 30px;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 30px;
}
.news-single .comments-form h2 {
  text-align: left;
  font-size: 18px;
  color: #353535;
  margin-bottom: 20px;
  text-transform: capitalize;
}
.news-single .form {
  position: relative;
}
.news-single .form-group {
  position: relative;
  display: block;
  margin: 0 0 20px;
}
.news-single .form-group i {
  position: absolute;
  left: 12px;
  top: 17px;
  z-index: 1;
  color: #EB5B00;
}
.news-single .form-group input {
  width: 100%;
  height: 50px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-weight: 400;
  border-radius: 0px;
  padding-left: 34px;
  padding-right: 20px;
  border: none;
  line-height: 50px;
  font-weight: 400;
  font-size: 14px;
  color: #2c2d3f;
}

.news-single .form-group textarea {
  border: 1px solid #ddd;
  width: 100%;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  box-shadow: none;
  border-radius: 0px;
  border: none;
  height: 190px;
  padding: 15px 15px 15px 35px;
  resize: none;
  font-weight: 400;
  font-size: 14px;
  color: #2c2d3f;
}
.news-single .form-group input,
.news-single .form-group textarea {
  border: 1px solid transparent;
  border: 1px solid #eee;
  border-radius: 5px;
}
.news-single .form-group.message i {
  top: 22px;
}
.news-single .form-group .button {
  padding: 10px 30px;
  font-size: 14px;
  text-transform: uppercase;
  display: block;
  border: 0px solid;
  color: #fff;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  padding: 15px 30px;
}
.news-single .form-group .button:hover {
  background: #353535;
}
.news-single .form-group .button i {
  position: relative;
  display: inline-block;
  color: #fff;
  margin-right: 10px;
  padding: 0px;
}
.news-single .form-group.button {
  margin: 0;
  text-align: left;
}
.news-single .form-group.button .btn {
  background: #fff;
  background: #EB5B00;
  color: #fff;
}
.news-single .form-group.button .btn:hover {
  color: #fff;
}
.news-single .form-group.button .btn i {
  color: #fff;
  position: relative;
  top: 0;
  left: 0;
  margin-right: 10px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
/*===================
    End Blog CSS
=====================*/

/*==========================
    Start Appointment CSS
============================*/
.appointment {
  background: #fff;
  padding-top: 100px;
}
.appointment.single-page {
  background: #fff;
  padding-top: 100px 0;
  padding: 0;
  padding: 100px 0;
}
.appointment.single-page .appointment-inner {
  padding: 40px;
  box-shadow: 0px 0px 10px #00000024;
  border-radius: 5px;
}
.appointment.single-page .title {
}
.appointment.single-page .title h3 {
  font-size: 25px;
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
}
.appointment.single-page .title p {
}
.appointment .form {
  margin-top: 30px;
}
.appointment .form .form-group {
  margin-bottom: 16px;
}
.appointment .form input {
  width: 100%;
  height: 50px;
  border: 1px solid #eee;
  text-transform: capitalize;
  padding: 0px 18px;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  border-radius: 0;
  border-radius: 4px;
}
.appointment .form textarea {
  width: 100%;
  height: 200px;
  padding: 18px;
  border: 1px solid #eee;
  text-transform: capitalize;
  resize: none;
  border-radius: 4px;
}

.appointment .form-group .nice-select {
  width: 100%;
  height: 50px;
  line-height: 50px;
  border: 1px solid #eee;
  text-transform: capitalize;
  padding: 0px 18px;
  color: #999;
  font-size: 14px;
  font-weight: 400;
  border-radius: 4px;
  font-weight: 400;
}
.appointment .form-group .nice-select::after {
  right: 20px;
  color: #757575;
}
.appointment .form-group .list {
  border-radius: 4px;
}
.appointment .form-group .list li {
  color: #757575;
  border-radius: 0;
}
.appointment .form-group .list li.selected {
  color: #757575;
  font-weight: 400;
}
.appointment .form-group .list li:hover {
  color: #fff;
  background: #EB5B00;
}
.appointment .appointment-image {
}
.appointment.single-page .button .btn {
  width: 100%;
}
.appointment .button .btn {
  font-weight: 500;
  background: #EB5B00;
}
.appointment .button .btn:hover {
  color: #fff;
}
.appointment .form p {
  margin-top: 10px;
  color: #868686;
}
.appointment.single-page .work-hour {
  background: #EB5B00;
  padding: 40px;
  box-shadow: 0px 0px 10px #00000024;
  border-radius: 5px;
}
.appointment.single-page .work-hour h3 {
  font-size: 25px;
  display: block;
  font-weight: 600;
  margin-bottom: 20px;
  color: #fff;
}
.appointment.single-page .time-sidual {
  margin-top: 15px;
}
.appointment.single-page .time-sidual {
  overflow: hidden;
}
.appointment.single-page .time-sidual li {
  display: block;
  color: #fff;
  width: 100%;
  margin-bottom: 10px;
}
.appointment.single-page .time-sidual li span {
  display: inline-block;
  float: right;
}
.appointment.single-page .day-head .time {
  font-weight: 400;
  float: right;
}
/*==========================
    End Appointment CSS
============================*/

/*====================
   Start Login CSS
======================*/
.login .inner {
  box-shadow: 0px 0px 10px #00000024;
  border-radius: 5px;
  overflow: hidden;
}
.login .login-left {
  background-image: url(img/signup-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.login .login-form {
  padding: 50px 40px;
}
.login .login-form h2 {
  position: relative;
  font-size: 32px;
  color: #333;
  font-weight: 600;
  line-height: 27px;
  text-transform: capitalize;
  margin-bottom: 12px;
  padding-bottom: 20px;
  text-align: left;
}
.login .login-form h2:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 2px;
  width: 50px;
  background: #EB5B00;
}
.login .login-form p {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  text-align: left;
  margin-bottom: 50px;
}
.login .login-form p a {
  display: inline-block;
  margin-left: 5px;
  color: #EB5B00;
}
.login .login-form p a:hover {
  color: #2c2d3f;
}
.login .form {
  margin-top: 30px;
}
.login .form .form-group {
  margin-bottom: 22px;
}
.login .form .form-group input {
  width: 100%;
  height: 50px;
  border: 1px solid #eee;
  text-transform: capitalize;
  padding: 0px 18px;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  border-radius: 4px;
}
.login .form .form-group.login-btn {
  margin: 0;
}
.login .form button {
  border: none;
}
.login .form .btn {
  display: inline-block;
  margin-right: 10px;
  color: #fff;
  line-height: 20px;
  width: 100%;
}
.login .form .btn:hover {
  background: #EB5B00;
  color: #fff;
}
.login .login-form .checkbox {
  text-align: left;
  margin: 0;
  margin-top: 20px;
  display: inline-block;
}
.login .login-form .checkbox label {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  position: relative;
  padding-left: 20px;
}
.login .login-form .checkbox label:hover {
  cursor: pointer;
}
.login .login-form .checkbox label input {
  display: none;
}
.login .login-form .checkbox label::before {
  position: absolute;
  content: "";
  left: 0;
  top: 5px;
  width: 15px;
  height: 15px;
  border: 1px solid #EB5B00;
  border-radius: 100%;
}
.login .login-form .checkbox label::after {
  position: relative;
  content: "";
  width: 7px;
  height: 7px;
  left: -16px;
  top: -15px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: block;
  font-size: 9px;
  background: #EB5B00;
  border-radius: 100%;
}
.login .login-form .checkbox label.checked::after {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.login .login-form .lost-pass {
  display: inline-block;
  margin-left: 25px;
  color: #333;
  font-size: 14px;
  font-weight: 400;
}
.login .login-form .lost-pass:hover {
  color: #EB5B00;
}
/*====================
   End Login CSS
======================*/

/*=========================
   Start Register CSS
===========================*/
.register .inner {
  box-shadow: 0px 0px 10px #00000024;
  border-radius: 5px;
  overflow: hidden;
}
.register .register-left {
  background-image: url(img/signup-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
.register .register-form {
  padding: 50px 40px;
}
.register .register-form h2 {
  position: relative;
  font-size: 32px;
  color: #333;
  font-weight: 600;
  line-height: 27px;
  text-transform: capitalize;
  margin-bottom: 12px;
  padding-bottom: 20px;
  text-align: left;
}
.register .register-form h2:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 2px;
  width: 50px;
  background: #EB5B00;
}
.register .register-form p {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  text-align: left;
  margin-bottom: 50px;
}
.register .register-form p a {
  display: inline-block;
  margin-left: 5px;
  color: #EB5B00;
}
.register .register-form p a:hover {
  color: #2c2d3f;
}
.register .form {
  margin-top: 30px;
}
.register .form .form-group {
  margin-bottom: 22px;
}
.register .form .form-group input {
  width: 100%;
  height: 50px;
  border: 1px solid #eee;
  text-transform: capitalize;
  padding: 0px 18px;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  border-radius: 4px;
}

.register .form .form-group.login-btn {
  margin: 0;
}
.register .form button {
  border: none;
}
.register .form .btn {
  display: inline-block;
  margin-right: 10px;
  color: #fff;
  line-height: 20px;
  width: 100%;
}
.register .form .btn:hover {
  background: #EB5B00;
  color: #fff;
}
.register .register-form .checkbox {
  text-align: left;
  margin: 0;
  margin-top: 20px;
  display: inline-block;
}
.register .register-form .checkbox label {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  position: relative;
  padding-left: 20px;
}
.register .register-form .checkbox label:hover {
  cursor: pointer;
}
.register .register-form .checkbox label input {
  display: none;
}
.register .register-form .checkbox label::before {
  position: absolute;
  content: "";
  left: 0;
  top: 5px;
  width: 15px;
  height: 15px;
  border: 1px solid #EB5B00;
  border-radius: 100%;
}
.register .register-form .checkbox label::after {
  position: relative;
  content: "";
  width: 7px;
  height: 7px;
  left: -16px;
  top: -15px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: block;
  font-size: 9px;
  background: #EB5B00;
  border-radius: 100%;
}
.register .register-form .checkbox label.checked::after {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.register .register-form .terms {
  display: inline-block;
  margin-left: 5px;
  color: #EB5B00;
}
.register .register-form .terms:hover {
  color: #2c2d3f;
}
/*=========================
   End Register CSS
===========================*/

/*=====================
   Start Faq CSS
=======================*/
.faq-head h2 {
  margin-bottom: 35px;
  font-weight: 600;
  font-size: 25px;
}
.faq-wrap {
  margin-bottom: 50px;
}
.faq-wrap:last-child {
  margin-bottom: 30px;
}
.accordion {
  padding-left: 0;
  margin: 0;
  padding: 0;
}
.accordion p {
  font-size: 15px;
  display: none;
  padding: 20px 45px 15px 20px;
  margin-bottom: 0;
}
.accordion a {
  font-size: 16px;
  width: 100%;
  display: block;
  cursor: pointer;
  font-weight: 400;
  padding: 15px 0 15px 18px;
  border-radius: 0;
  background: #fff;
  color: #333;
  border: 1px solid #eee;
}
.accordion a:hover {
  color: #fff !important;
  background: #EB5B00 !important;
}
.accordion a:after {
  position: absolute;
  right: 20px;
  content: "+";
  top: 16px;
  color: #232323;
  font-size: 25px;
  font-weight: 700;
}
.accordion a:hover:after {
  color: #fff !important;
}
.accordion li {
  position: relative;
  list-style-type: none;
  margin-bottom: 30px;
}
.accordion li:first-child {
  border-top: 0;
}
.accordion li:last-child {
  margin-bottom: 0;
}
.accordion li a.active {
  color: #ffffff;
  background-color: #EB5B00;
  border: 1px solid #EB5B00;
}
.accordion li a.active:after {
  content: "-";
  font-size: 25px;
  color: #ffffff;
}
/*=====================
   End Faq CSS
=======================*/

/*=========================
   Start Contact Us CSS
===========================*/
.contact-us .inner {
  box-shadow: 0px 0px 10px #00000024;
  border-radius: 5px;
  overflow: hidden;
}
.contact-us #myMap,
.contact-us #myMap iframe {
  height: 100%;
  width: 100%;
}

.contact-us .contact-us-left {
  width: 100%;
  height: 100%;
}
.contact-us .contact-us-form {
  padding: 50px 40px;
}
.contact-us .contact-us-form h2 {
  position: relative;
  font-size: 32px;
  color: #333;
  font-weight: 600;
  line-height: 27px;
  text-transform: capitalize;
  margin-bottom: 12px;
  padding-bottom: 20px;
  text-align: left;
}
.contact-us .contact-us-form h2:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 2px;
  width: 50px;
  background: #EB5B00;
}
.contact-us .contact-us-form p {
  font-size: 14px;
  color: #333;
  font-weight: 400;
  text-align: left;
  margin-bottom: 50px;
}
.contact-us .form {
  margin-top: 30px;
}
.contact-us .form .form-group {
  margin-bottom: 22px;
}
.contact-us .form .form-group input {
  width: 100%;
  height: 50px;
  border: 1px solid #eee;
  text-transform: capitalize;
  padding: 0px 18px;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  border-radius: 4px;
}

.contact-us .form .form-group textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #eee;
  text-transform: capitalize;
  padding: 18px;
  color: #555;
  font-size: 14px;
  font-weight: 400;
  border-radius: 4px;
}
.contact-us .form .form-group.login-btn {
  margin: 0;
}
.contact-us .form button {
  border: none;
}
.contact-us .form .btn {
  display: inline-block;
  margin-right: 10px;
  color: #fff;
  line-height: 20px;
  width: 100%;
}
.contact-us .form .btn:hover {
  background: #EB5B00;
  color: #fff;
}
.contact-us .contact-us-form .checkbox {
  text-align: left;
  margin: 0;
  margin-top: 20px;
  display: inline-block;
}
.contact-us .contact-us-form .checkbox label {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  position: relative;
  padding-left: 20px;
}
.contact-us .contact-us-form .checkbox label:hover {
  cursor: pointer;
}
.contact-us .contact-us-form .checkbox label input {
  display: none;
}
.contact-us .contact-us-form .checkbox label::before {
  position: absolute;
  content: "";
  left: 0;
  top: 5px;
  width: 15px;
  height: 15px;
  border: 1px solid #EB5B00;
  border-radius: 100%;
}
.contact-us .contact-us-form .checkbox label::after {
  position: relative;
  content: "";
  width: 7px;
  height: 7px;
  left: -16px;
  top: -15px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: block;
  font-size: 9px;
  background: #EB5B00;
  border-radius: 100%;
}
.contact-us .contact-us-form .checkbox label.checked::after {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.contact-us .contact-info {
  margin-top: 50px;
}
.contact-us .single-info {
  background: #EB5B00;
  padding: 40px 60px;
  height: 150px;
  border-radius: 10px;
  position: relative;
  -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;
}
.contact-us .single-info:before {
  position: absolute;
  z-index: -1;
  content: "";
  bottom: -10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 80%;
  height: 90%;
  background: #EB5B00;
  opacity: 0;
  filter: blur(10px);
  -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;
}
.contact-us .single-info:hover:before {
  opacity: 0.8;
}
.contact-us .single-info:hover {
  transform: translateY(-5px);
}
.contact-us .single-info i {
  font-size: 42px;
  color: #fff;
  position: absolute;
  left: 40px;
}
.contact-us .single-info .content {
  margin-left: 45px;
}
.contact-us .single-info .content h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
.contact-us .single-info .content p {
  color: #fff;
  margin-top: 5px;
}
/* Google Map */
.contact-us #myMap {
  height: 100%;
  width: 100%;
}
/*=========================
   End Contact Us CSS
===========================*/

/*========================
    Start Error 404 CSS
==========================*/
.error-page {
  text-align: center;
  background: #fff;
  border-top: 1px solid #eee;
}
.error-page .error-inner {
  display: inline-block;
}
.error-page .error-inner h1 {
  font-size: 140px;
  text-shadow: 3px 5px 2px #3333;
  color: #EB5B00;
  font-weight: 700;
}
.error-page .error-inner h1 span {
  display: block;
  font-size: 25px;
  color: #333;
  font-weight: 600;
  text-shadow: none;
}
.error-page .error-inner p {
  padding: 20px 15px;
}
.error-page .search-form {
  width: 100%;
  position: relative;
}
.error-page .search-form input {
  width: 400px;
  height: 50px;
  padding: 0px 78px 0 30px;
  border: none;
  background: #f6f6f6;
  border-radius: 5px;
  display: inline-block;
  margin-right: 10px;
  font-weight: 400;
  font-size: 14px;
}

.error-page .search-form input:hover {
  padding-left: 35px;
}
.error-page .search-form .btn {
  width: 80px;
  height: 50px;
  border-radius: 5px;
  cursor: pointer;
  background: #EB5B00;
  display: inline-block;
  position: relative;
  top: -2px;
}
.error-page .search-form .btn i {
  font-size: 16px;
}
/*========================
    End Error 404 CSS
==========================*/

/*===========================
    Start Mail Success CSS
=============================*/
.mail-seccess {
  text-align: center;
  background: #fff;
  border-top: 1px solid #eee;
}
.mail-seccess .success-inner {
  display: inline-block;
}
.mail-seccess .success-inner h1 {
  font-size: 100px;
  text-shadow: 3px 5px 2px #3333;
  color: #EB5B00;
  font-weight: 700;
}
.mail-seccess .success-inner h1 span {
  display: block;
  font-size: 25px;
  color: #333;
  font-weight: 600;
  text-shadow: none;
  margin-top: 20px;
}
.mail-seccess .success-inner p {
  padding: 20px 15px;
}
.mail-seccess .success-inner .btn {
  color: #fff;
  background: #EB5B00;
}
/*===========================
    End Mail Success CSS
=============================*/

/*=========================
    Start Newsletter CSS
===========================*/
.newsletter {
  background: #edf2ff;
}
.newsletter .subscribe-text {
}
.newsletter .subscribe-text h6 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #2c2d3f;
}
.newsletter .subscribe-text p {
}
.newsletter .subscribe-form {
  position: relative;
}
.newsletter .common-input {
  height: 60px;
  width: 300px;
  border: none;
  color: #333;
  box-shadow: none;
  text-shadow: none;
  border-radius: 5px;
  padding: 0px 25px;
  font-weight: 500;
  font-size: 14px;
  background: #fff;
  font-weight: 400;
  border: 1px solid transparent;
}

.newsletter .btn {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: inline-block;
  height: 60px;
  line-height: 60px;
  padding: 0;
  width: 180px;
  position: relative;
  top: -2px;
  border-radius: 5px;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0px 5px 15px rgba(188, 199, 255, 0.75);
  background: #EB5B00;
}
.newsletter .btn:before {
  border-radius: 5px;
}
.newsletter .button:hover {
  box-shadow: none;
}
/*=========================
    End Newsletter CSS
===========================*/

/*===============================
    Start Doctor Calendar CSS
=================================*/
.doctor-calendar-area {
  position: relative;
  z-index: 1;
}
.doctor-calendar-table {
  background-color: #ffffff;
  -webkit-box-shadow: 0 10px 55px 5px rgba(137, 173, 255, 0.2);
  box-shadow: 0 10px 55px 5px rgba(137, 173, 255, 0.2);
}
.doctor-calendar-table table {
  margin-bottom: 0;
}
.doctor-calendar-table table thead tr th {
  vertical-align: middle;
  text-align: center;
  background-color: #EB5B00;
  border: none;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  padding-top: 17px;
  padding-bottom: 15px;
}
.doctor-calendar-table table tbody tr td {
  vertical-align: middle;
  text-align: center;
  border: 1px solid #eeeeee;
  border-top: none;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  white-space: nowrap;
  padding-top: 25px;
  padding-right: 25px;
  padding-left: 25px;
  padding-bottom: 25px;
}
.doctor-calendar-table table tbody tr td:first-child {
  border-left: none;
}
.doctor-calendar-table table tbody tr td:last-child {
  border-right: none;
}
.doctor-calendar-table table tbody tr td h3 {
  margin-bottom: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-size: 16px;
  font-weight: 600;
}
.doctor-calendar-table table tbody tr td span {
  display: block;
  color: #7d7d7d;
  font-size: 14.5px;
  margin-top: 5px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.doctor-calendar-table table tbody tr td span.time {
  display: inline-block;
  background-color: #dff5e8;
  color: #EB5B00;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  line-height: 65px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-weight: 500;
  font-size: 16px;
}
.doctor-calendar-table table tbody tr td:hover {
  background-color: #EB5B00;
  border-color: #EB5B00;
}
.doctor-calendar-table table tbody tr td:hover h3 {
  color: #ffffff;
}
.doctor-calendar-table table tbody tr td:hover span {
  color: #ffffff;
}
.doctor-calendar-table table tbody tr td:hover span.time {
  background-color: #ffffff;
  color: #EB5B00;
}
.doctor-calendar-table table tbody tr:last-child td {
  border-bottom: none;
}
/*===============================
    End Doctor Calendar CSS
=================================*/

/*=========================
    Start About Us CSS
===========================*/
.about-area {
  position: relative;
  z-index: 1;
}
.about-image {
  width: 100%;
  height: 100%;
  background-image: url(img/about-img.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.about-image img {
  display: none;
}
.about-content {
  max-width: 555px;
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 50px;
}
.about-content span {
  display: block;
  margin-bottom: 5px;
  color: #EB5B00;
  font-size: 17px;
}
.about-content h2 {
  margin-bottom: 0;
  line-height: 1.3;
  font-size: 40px;
  font-weight: 600;
}
.about-content p {
  margin-top: 10px;
  margin-bottom: 0;
}
.about-content ul {
  padding-left: 0;
  list-style-type: none;
  margin-top: 25px;
  margin-bottom: 0;
}
.about-content ul li {
  margin-bottom: 16px;
  position: relative;
  padding-left: 34px;
}
.about-content ul li i {
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 100%;
  background-color: #EB5B002b;
  color: #EB5B00;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: inline-block;
  font-size: 11px;
  position: absolute;
  left: 0;
  top: -2px;
}
.about-content ul li:hover i {
  background-color: #EB5B00;
  color: #ffffff;
}
.about-content ul li:last-child {
  margin-bottom: 0;
}
.about-content .btn {
  margin-top: 30px;
}
/* Start Our Vision Area CSS */
.our-vision-area {
  position: relative;
  z-index: 1;
  padding-bottom: 70px;
}
.single-vision-box {
  margin-bottom: 30px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 10px 55px 5px rgba(137, 173, 255, 0.2);
  box-shadow: 0 10px 55px 5px rgba(137, 173, 255, 0.2);
  padding: 25px 20px;
  position: relative;
  z-index: 1;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  overflow: hidden;
}
.single-vision-box .icon {
  margin-bottom: 20px;
  text-align: center;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 100%;
  background-color: #EB5B00;
  color: #ffffff;
  font-size: 25px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.single-vision-box h3 {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  margin-bottom: 0;
  position: relative;
  font-size: 20px;
  font-weight: 700;
}
.single-vision-box p {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  margin-top: 12px;
  margin-bottom: 0;
}
.single-vision-box::before {
  width: 0;
  height: 100%;
  z-index: -1;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background-color: #EB5B00;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.single-vision-box::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border: 10px solid #ffffff;
  left: -80px;
  bottom: -80px;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.15;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.single-vision-box:hover {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}
.single-vision-box:hover::before {
  width: 100%;
}
.single-vision-box:hover .icon {
  background-color: #fff;
  color: #EB5B00;
}
.single-vision-box:hover h3 {
  color: #ffffff;
}
.single-vision-box:hover p {
  color: #ffffff;
}
.single-vision-box:hover::after {
  left: -50px;
  bottom: -50px;
}
/* End Our Vision CSS */

/* Our Mission Area CSS */
.our-mission-area {
  position: relative;
  z-index: 1;
}
.our-mission-image {
  width: 100%;
  height: 100%;
  background-image: url(img/mission-img.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.our-mission-image img {
  display: none;
}
.our-mission-content {
  max-width: 555px;
  margin-left: auto;
  padding-top: 60px;
  padding-bottom: 60px;
  padding-right: 50px;
}
.our-mission-content .sub-title {
  display: block;
  margin-bottom: 5px;
  color: #EB5B00;
  font-size: 17px;
}
.our-mission-content h2 {
  margin-bottom: 0;
  line-height: 1.3;
  font-size: 40px;
  font-weight: 600;
}
.our-mission-content p {
  margin-top: 10px;
  margin-bottom: 0;
}
.our-mission-content ul {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  list-style-type: none;
  margin-right: -15px;
  margin-left: -15px;
  margin-bottom: 0;
  margin-top: 0;
}
.our-mission-content ul li {
  -ms-flex: 0 0 50%;
  -webkit-box-flex: 0;
  flex: 0 0 50%;
  max-width: 50%;
  color: #7d7d7d;
  font-size: 14.5px;
  line-height: 1.7;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 25px;
}
.our-mission-content ul li .icon {
  margin-bottom: 13px;
  -webkit-box-shadow: 0 10px 55px 5px rgba(137, 173, 255, 0.3);
  box-shadow: 0 10px 55px 5px rgba(137, 173, 255, 0.3);
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  color: #EB5B00;
  font-size: 20px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.our-mission-content ul li span {
  display: block;
  color: #121521;
  text-transform: uppercase;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 17px;
}
.our-mission-content ul li:hover .icon {
  background-color: #EB5B00;
  color: #ffffff;
  border-radius: 100%;
}
/* End Our Mission CSS */

/*=========================
    End About Us CSS
===========================*/

/*=========================
    Start Footer CSS
===========================*/
.footer {
  position: relative;
}
.footer .footer-top {
  padding: 100px 0px;
  position: relative;
  background: #EB5B00;
  z-index: 2;
}
.footer .footer-top:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: 0.1;
  z-index: -1;
}
.footer .single-footer {
}
.footer .single-footer .social {
  margin-top: 25px;
}
.footer .single-footer .social li {
  display: inline-block;
  margin-right: 10px;
}
.footer .single-footer .social li:last-child {
  margin-right: 0px;
}
.footer .single-footer .social li a {
  height: 34px;
  width: 34px;
  line-height: 34px;
  text-align: center;
  border: 1px solid #fff;
  text-align: center;
  padding: 0;
  border-radius: 100%;
  display: block;
  color: #fff;
  font-size: 16px;
}
.footer .single-footer .social li a:hover {
  color: #EB5B00;
  background: #fff;
  border-color: transparent;
}
.footer .single-footer .social li a i {
}
.footer .single-footer.f-link li a i {
  margin-right: 10px;
}
.footer .single-footer.f-link li {
  display: block;
  margin-bottom: 12px;
}
.footer .single-footer.f-link li:last-child {
  margin: 0;
}
.footer .single-footer.f-link li a {
  display: block;
  color: #fff;
  text-transform: capitalize;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-weight: 400;
}
.footer .single-footer.f-link li a:hover {
  padding-left: 8px;
}
.footer .single-footer h2 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 40px;
  padding-bottom: 20px;
  text-transform: capitalize;
  position: relative;
}
.footer .single-footer h2::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0px;
  height: 3px;
  width: 50px;
  background: #fff;
}
.footer .single-footer .time-sidual {
  margin-top: 15px;
}
.footer .single-footer .time-sidual {
  overflow: hidden;
}
.footer .single-footer .time-sidual li {
  display: block;
  color: #fff;
  width: 100%;
  margin-bottom: 5px;
}
.footer .single-footer .time-sidual li span {
  display: inline-block;
  float: right;
}
.footer .single-footer .day-head .time {
  font-weight: 400;
  float: right;
}
.footer .single-footer p {
  color: #fff;
}
.footer .single-footer .newsletter-inner {
  margin-top: 20px;
  position: relative;
}
.footer .single-footer .newsletter-inner input {
  background: transparent;
  border: 1px solid #fff !important;
  height: 50px;
  line-height: 42px;
  width: 100%;
  margin-right: 15px;
  color: #fff;
  padding-left: 18px;
  padding-right: 70px;
  display: inline-block;
  float: left;
  border-radius: 0px;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-weight: 400;
  border-radius: 5px;
  box-shadow: none;
  outline: none;
}
.footer .single-footer .newsletter-inner input:hover {
  padding-left: 22px;
}
.footer input::-webkit-input-placeholder {
  opacity: 1;
  color: #fff !important;
}

.footer input::-moz-placeholder {
  opacity: 1;
  color: #fff !important;
}

.footer input::-ms-input-placeholder {
  opacity: 1;
  color: #fff !important;
}
.footer input::input-placeholder {
  opacity: 1;
  color: #fff !important;
}
.footer .single-footer .newsletter-inner .button {
  position: absolute;
  right: 0;
  top: 0;
  height: 50px;
  line-height: 50px;
  width: 50px;
  background: #fff;
  border-left: 1px solid #fff;
  text-shadow: none;
  box-shadow: none;
  display: inline-block;
  border-radius: 0px;
  border: none;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  border-radius: 0 5px 5px 0;
  color: #EB5B00;
  font-size: 25px;
}
.footer .single-footer .newsletter-inner .button i {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.footer .single-footer .newsletter-inner .button:hover i {
  color: #2c2d3f;
}
.footer .copyright {
  background: #EB5B00;
  padding: 25px 0px 25px 0px;
  text-align: center;
}
.footer .copyright .copyright-content p {
  color: #fff;
}
.footer .copyright .copyright-content p a {
  color: #fff;
  font-weight: 400;
  display: inline-block;
  margin-left: 4px;
}
/*=========================
    End Footer CSS
===========================*/

/*=========================
    Start RTL Version CSS
===========================*/
.rtl {
  direction: rtl;
}
.rtl .owl-carousel,
.rtl .color-plate {
  direction: ltr;
}

.rtl .header .top-link,
.rtl .header .logo {
  float: right;
}
.rtl .header .top-contact li:first-child {
  margin-right: 0;
}
.rtl .header .nav li:first-child {
  margin: 0;
}
.rtl .header .top-link li:first-child {
  margin: 0;
}
.rtl .header .top-link li:last-child {
  margin-right: 15px;
}
.rtl .header .top-contact,
.rtl .get-quote {
  float: left;
}
.rtl .header .top-contact li:last-child {
  margin-right: 25px;
}
.rtl .header .top-contact li i {
  margin: 0;
  margin-left: 8px;
}

.rtl .header .nav li .dropdown {
  left: auto;
  right: 0;
}

.rtl .header .widget-main {
  float: left;
}
.rtl .header .single-widget {
  float: right;
  margin-right: 0;
  padding-left: 0px;
  margin-left: 30px;
  padding-right: 55px;
}
.rtl .single-widget.button {
  margin-left: 0;
}
.rtl .single-widget.second {
  margin-left: 0px;
}
.rtl .header .single-widget i {
  left: auto;
  right: 0;
}
.rtl .header.style2 .main-menu {
  float: right;
}
.rtl .header .right-bar {
  float: left;
}
.rtl .header .search-form {
  right: auto;
  left: 0;
}
.rtl .slider .single-slider .text {
  text-align: right;
}
.rtl .schedule .single-schedule a i {
  margin: 0;
  margin-right: 10px;
}
.rtl .Feautes .single-features.last::before {
  display: block;
}
.rtl .Feautes .single-features.first::before {
  display: none;
}

.rtl .fun-facts .single-fun i {
  right: 0;
  left: auto;
}

.rtl .fun-facts .single-fun .content {
  padding-left: 0px;
  padding-right: 92px;
}

.rtl .why-choose .choose-left h3::before {
  right: 0;
}
.rtl .why-choose .choose-left .list li i {
  margin: 0;
  margin-left: 16px;
}
.rtl .call-action .content .btn {
  margin: 0;
  margin-left: 16px;
}
.rtl .call-action .content .second {
  margin: 0;
}
.rtl .call-action .content .second i {
  margin: 0;
  margin-right: 10px;
}

.rtl .services .single-service i {
  right: 0;
  left: auto;
}
.rtl .services .single-service {
  padding-left: 0;
  padding-right: 70px;
}
.rtl .testimonials .single-testimonial {
  text-align: right;
}
.rtl .testimonials .single-testimonial img {
  left: auto;
  right: 30px;
}
.rtl .departments .department-tab .tab-pane .department-left h3::before {
  left: auto;
  right: 0;
}
.rtl .departments .department-tab .tab-pane .department-left .list li {
  padding-left: 0;
  padding-right: 30px;
}
.rtl .departments .department-tab .tab-pane .department-left .list li i {
  left: auto;
  margin-right: 0;
  right: 0;
}
.rtl .departments .department-tab .nav .list-group-item:last-child {
  margin-right: 54px;
}
.rtl .departments .department-tab .nav .list-group-item:first-child {
  margin-right: 0px;
}

.rtl .blog .single-news .news-content {
  text-align: right;
}
.rtl .newsletter .btn {
  margin-left: 0;
  margin-right: 10px;
}

.rtl .appointment .form-group .nice-select::after {
  right: auto;
  left: 20px;
}
.rtl .nice-select {
  text-align: right !important;
}

.rtl .nice-select .option {
  text-align: right;
}

.rtl .footer .single-footer h2::before {
  left: auto;
  right: 0;
}
.rtl .footer .single-footer.f-link li a i {
  margin-right: 0;
  margin-left: 10px;
}
.rtl .footer .single-footer .social li:last-child {
  margin-right: 10px;
}
.rtl .footer .single-footer .social li:first-child {
  margin-right: 0px;
}
.rtl .footer .single-footer.f-link li a:hover {
  padding-left: 0;
  padding-right: 8px;
}
.rtl .doctor-details-item .doctor-details-contact .basic-info li i {
  margin-right: 0;
  margin-left: 8px;
}

.rtl .doctor-details-area .doctor-details-left .social li {
  margin-right: 0;
  margin-left: 10px;
}
.rtl .doctor-details-item .doctor-details-work .time-sidual li span {
  float: left;
}
.rtl .doctor-details-area .doctor-details-left .social li:last-child {
  margin: 0;
}
.rtl .doctor-details-area .doctor-details-right {
  padding-left: 0px;
  padding-right: 60px;
}
.rtl .service-details-inner h2 {
  border-left: transparent;
  padding-left: 0px;
  border-right: 3px solid #EB5B00;
  padding-right: 15px;
}
.rtl .services-details-img blockquote i {
  left: auto;
  right: 38px;
  transform: rotate(-180deg);
}
.rtl .about-content {
  padding-left: 0px;
  padding-right: 50px;
}
.rtl .about-content ul li {
  padding-left: 0;
  padding-right: 34px;
}
.rtl .about-content ul li i {
  left: auto;
  right: 0;
}
.rtl .our-mission-content {
  margin-left: initial;
  padding-right: 0px;
  padding-left: 50px;
  margin-right: auto;
}
.rtl .appointment.single-page .time-sidual li span {
  float: left;
}
.rtl .register .register-form .checkbox label::before {
  left: auto;
  right: 0;
}
.rtl .register .register-form .checkbox label {
  padding-left: 0;
  padding-right: 20px;
}

.rtl .register .register-form .checkbox label::after {
  left: auto;
  right: -16px;
}
.rtl .register .form .btn {
  margin: 0;
}
.rtl .login .form .btn {
  margin: 0;
}
.rtl .login .login-form .checkbox label {
  padding-left: 0;
  padding-right: 20px;
}
.rtl .login .login-form .checkbox label::before {
  left: auto;
  right: 0;
}
.rtl .login .login-form .checkbox label::after {
  left: auto;
  right: -16px;
}
.rtl .login .login-form .lost-pass {
  margin-left: 0;
  margin-right: 25px;
}
.rtl .login .login-form h2,
.rtl .login .login-form p,
.rtl .register .register-form h2,
.rtl .register .register-form p {
  text-align: right;
}
.rtl .login .login-form h2::before,
.rtl .register .register-form h2::before {
  left: auto;
  right: 0;
}
.rtl .accordion a {
  padding: 15px 18px 15px 0px;
}
.rtl .accordion a::after {
  right: auto;
  left: 20px;
}
.rtl .error-page .search-form input {
  margin-right: 0px;
  margin-left: 10px;
}
.rtl .error-page .search-form input {
  padding: 0px 30px 0 78px;
}
.rtl .main-sidebar .single-widget .title::before {
  left: auto;
  right: 0;
}
.rtl .main-sidebar .single-widget .title {
  padding-left: 0px;
  padding-right: 12px;
}
.rtl .main-sidebar .single-post .content .comment li {
  margin-right: 0;
  margin-left: 15px;
}
.rtl .main-sidebar .single-post .content .comment li:last-child {
  margin-left: 0px;
}
.rtl .main-sidebar .single-post .content .comment li i {
  margin-right: 0px;
  margin-left: 5px;
}
.rtl .main-sidebar .side-tags .tag li {
  margin-right: 0px;
  margin-left: 7px;
}
.rtl .pagination {
  text-align: right;
}
.rtl .news-single .meta span i {
  margin-right: 0px;
  margin-left: 5px;
}
.rtl .news-single .meta span {
  margin-right: 0px;
  margin-left: 10px;
}
.rtl .news-single .meta-left .author img {
  margin-right: 0px;
  margin-left: 12px;
}
.rtl .news-single .meta-left .author {
  float: right;
}
.rtl .news-single .single-comments .head {
  float: right;
  margin-right: 0px;
  margin-left: 20px;
}
.rtl .news-single .single-comments h4 {
  text-align: right;
}
.rtl .news-single .comment-meta span i {
  margin-right: 5px;
  margin-left: 5px;
}
.rtl .news-single .single-comments .meta:first-child {
  margin: 0;
}
.rtl .news-single .single-comments a i {
  margin-right: 0px;
  margin-left: 5px;
}
.rtl .news-single .blog-comments h2 {
  text-align: right;
}
.rtl .news-single .single-comments.left img {
  left: auto;
  right: 0;
}
.rtl .news-single .comments-form h2 {
  text-align: right;
}
.rtl .news-single .single-comments.left .main {
  padding-left: 0px;
  margin-left: 0px;
  margin-right: 100px;
  padding-right: 100px;
}
.rtl .news-single .form-group.button {
  text-align: right;
}
.rtl .news-single .form-group.button .btn i {
  margin-right: 0px;
  margin-left: 10px;
}
.rtl .news-single .social-share li span {
  padding-left: 0;
  padding-right: 5px;
}
.rtl .contact-us .contact-us-form h2 {
  text-align: right;
}
.rtl .contact-us .contact-us-form p {
  text-align: right;
}
.rtl .contact-us .contact-us-form h2::before {
  left: auto;
  right: 0;
}
.rtl .contact-us .form .btn {
  margin: 0;
}
.rtl .contact-us .contact-us-form .checkbox label::after {
  left: 0;
  right: -16px;
}
.rtl .contact-us .contact-us-form .checkbox label::before {
  left: auto;
  right: 0;
}
.rtl .contact-us .contact-us-form .checkbox label {
  text-align: right;
  padding-left: 0px;
  padding-right: 20px;
}
.rtl .contact-us .single-info .content {
  margin-left: 0px;
  margin-right: 45px;
}
.rtl .contact-us .single-info i {
  left: auto;
  right: 40px;
}
.rtl .pf-details .date ul li:first-child {
  margin: 0;
}
.rtl .pf-details .date ul li:last-child {
  margin-right: 60px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .rtl .Feautes .single-features.first::before,
  .rtl .Feautes .single-features.last::before {
    display: none;
  }
  .rtl .header.style2 .single-widget {
    margin-right: 0;
    padding-left: 0px;
    margin-left: 18px;
    padding-right: 36px;
  }

}
@media only screen and (max-width: 767px) {
  .rtl .header .top-link,
  .rtl .header .top-contact {
    float: none;
  }
  .rtl .Feautes .single-features.first::before,
  .rtl .Feautes .single-features.last::before {
    display: none;
  }
  .rtl .fun-facts .single-fun .content {
    padding-right: 0;
  }
  .rtl .fun-facts .single-fun i {
    right: 50%;
    margin-right: -35px;
  }
  .rtl .departments .department-tab .nav .list-group-item:last-child {
    margin: 0px 10px;
  }
  .rtl .newsletter .btn {
    margin-right: 0;
  }
  .rtl .doctor-details-area .doctor-details-right {
    padding-left: 0px;
    padding-right: 0;
  }
  .rtl .about-content {
    padding-right: 0;
  }
  .rtl .our-mission-content {
    padding-right: 16px;
  }
  .rtl .accordion a {
    padding: 15px 18px 15px 40px;
  }
  .rtl .news-single .single-comments img {
    left: auto;
    right: 0;
  }
  .rtl .news-single .single-comments .main {
    padding-left: 0px;
    padding-right: 100px;
  }
  .rtl .news-single .single-comments.left .main {
    margin-right: 0;
  }

  .rtl .contact-us .contact-us-form .checkbox label::after,
  .contact-us .contact-us-form .checkbox label::after {
    top: -15px;
  }
}
@media only screen and (max-width: 400px) {
  .rtl .contact-us .contact-us-form .checkbox label::after,
  .contact-us .contact-us-form .checkbox label::after {
    top: -39px;
  }
}

/*=========================
    End RTL Version CSS
===========================*/

/*=============================
    Tripadvisor widget
==============================*/
.testimonials .widWRMWrapper {
    margin: 0;
    padding: 0;
    width: 100% !important;
    border: none;
    background-color: #00aa6c;
    background-image: none;
    overflow: hidden;
    height: auto;
    position: relative;
    text-align: center !important;
    padding: 10px !important;
    font-size: 23px !important;
}

#footer-logo{
  border-top:  1px solid orangered;
}


.cta .footer-logo{
  text-align: center !important;
}

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

.tripadvisor-reviews {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
    margin-top: 20px;
}
.tripadvisor-reviews h2 {
    color: #007bff;
    text-align: center;
    font-size: 1.5rem;
}
.tripadvisor-reviews ul {
    list-style: none;
    padding: 0;
}
.tripadvisor-reviews li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    font-size: 1.1rem;
    border-bottom: 1px solid #ddd;
}
.tripadvisor-reviews li:last-child {
    border-bottom: none;
}
.review-img {
    width: 200px;
}
.stars {
    color: #FFD700;
    font-size: 1.2rem;
}


.section-title {
    text-align: center !important;
    margin-bottom: 15px !important;
    padding: 0px !important;
}

.whatsapp-btn {
  position: fixed;
  bottom: 80px; /* Adjust as needed */
  right: 20px; /* Adjust as needed */
  z-index: 1000;
  background-color: #25D366;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease-in-out;
}

.whatsapp-btn:hover {
  transform: scale(1.1);
}

.whatsapp-btn img {
  width: 40px; /* Adjust the icon size */
  height: 40px;
  display: block;
}


/* Header styling (optional hero) */
    
    /* Main container spacing */
    .content-section { padding: 40px 0; }
    
    /* Sidebar styling */
    .tour-detail-sidebar {
      position: sticky;
      top: 20px;
      /* Glass effect */
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: transform 0.3s ease;
    }
    .tour-detail-sidebar .card {
      background: rgba(255, 255, 255, 0.8);
      border: none;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.2s;
    }
    .tour-detail-sidebar .card:hover {
      transform: translateY(-3px);
    }
    .tour-detail-sidebar .card-title {
      font-size: 1.2rem;
      color: #d35400;
      margin-bottom: 15px;
      border-bottom: 2px solid #e67e22;
      padding-bottom: 5px;
    }
    /*.tour-detail-nav {
  display: flex;
  flex-direction: column; 
  gap: 10px; 
  width: 200px; 
}

.tour-detail-nav-link {
  display: block; 
  padding: 10px;
  background-color: #f8f9fa; 
  border: 1px solid #ddd; 
  border-radius: 5px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: background 0.3s;
}

.tour-detail-nav-link:hover {
  background-color: #007bff;
  color: white;
}

    .tour-detail-nav a.tour-detail-nav-link {
      display: block;
      padding: 8px 10px;
      margin-bottom: 6px;
      color: #333;
      border-left: 4px solid transparent;
      transition: all 0.3s ease;
    }
    .tour-detail-nav a.tour-detail-nav-link:hover,
    .tour-detail-nav a.tour-detail-nav-link.active {
      border-left-color: #d35400;
      background: rgba(211, 84, 0, 0.1);
      color: #d35400;
    }*/

    .timeline-content h4{
      color: orangered;
      margin-bottom: 15px;
    }

    .tour-detail-section p{
      font-size: 16px;
      text-align: justify;
      line-height: 30px;
      color: #000;
    }
    .list-group-item {
      background: transparent;
      border: none;
      padding: 10px 0;
    }
    .list-group-item i {
      min-width: 20px;
    }
    .btn-outline-primary {
      border-color: #d35400;
      color: #d35400;
      transition: background 0.3s ease, color 0.3s ease;
    }
    .btn-outline-primary:hover {
      background: #d35400;
      color: #fff;
    }
    /* Quick Booking Form Overrides */
    .tour-detail-sidebar .form-label {
      font-weight: 500;
    }
    .tour-detail-sidebar .form-control, 
    .tour-detail-sidebar .form-select {
      border-radius: 4px;
      border: 1px solid #ccc;
    }
    .tour-detail-sidebar .btn-primary {
      background-color: #d35400;
      border: none;
      transition: background 0.3s ease;
    }
    .tour-detail-sidebar .btn-primary:hover {
      background-color: #e67e22;
    }
    /* Tour details content styling */
    .tour-detail-section {
      margin-bottom: 40px;
    }
    .tour-detail-section h3 {
      margin-top: 50px;
      margin-bottom: 20px;
      border-bottom: 2px solid #e67e22;
      padding-bottom: 5px;
      color: #d35400;
    }
    .tour-highlights-list li {
      margin-bottom: 10px;
      list-style: none;
    }
    .tour-highlights-list li i {
      margin-right: 8px;
    }
    .tour-itinerary-day {
      font-weight: bold;
      margin-bottom: 10px;
      color: #d35400;
    }
    /* Gallery styling */
    .tour-gallery .tour-gallery-item {
      margin-bottom: 15px;
    }
    
    .nota{
          background: #ffe1c7;
    padding: 20px;
    border-radius: 8px;
    }

      .timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
  }

  .timeline-item {
    position: relative;
    padding: 20px;
    border-left: 3px solid orangered;
    margin-bottom: 20px;
  }

  .tour-detail-section .text-primary {
    color: orangered !important;
}

/*.fa-check-circle{
  color: orangered !important;
}*/

.bread-inner h1{
  color: #fff;
}

.overlay:before{
  background: #000000de !important;
}

  .timeline-day {
    position: absolute;
    left: -60px;
    top: 20px;
    background: orangered;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
  }

  .timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .timeline-content h4 {
    margin-top: 0;
  }

  .map-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.map-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .sidebar { margin-top: 20px; }
    }


  /*================================
  about us
  ==================================*/
 /* Base Styles */
.section-about {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4rem 2rem;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.story-card {
    flex: 0 0 60%;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.story-card p{
  font-size: 16px;
    text-align: justify;
    line-height: 35px;
    padding: 20px 0px;
    color: #000;
}

.icon-circle {
    flex: 0 0 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.icon-circle img{
  border-radius: 10px;
}
.icon {
    font-size: 3.5rem;
    color: #fff;
}

/* CTA Section */
.cta-section-about {
    text-align: center;
    padding: 2rem 2rem;
    background: antiquewhite;
}
.cta-section-about h3{
  padding: 20px 0px;
}

.cta-section-about p{
  color: #000;
    font-size: 16px;
    padding: 30px;
}
.cta-section-about button {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    background: #d4af37;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .section-about {
        flex-direction: column;
        padding: 2rem 1rem;
        gap: 2rem;
    }

    .story-card,
    .icon-circle {
        flex: 0 0 100%;
        width: 100%;
        max-width: 500px;
    }

    .icon-circle {
        width: 120px;
        height: 120px;
        order: -1;
    }

    .icon {
        font-size: 2.5rem;
    }

    .cta-section-about {
        padding: 3rem 1rem;
    }

    button {
        width: 100%;
        max-width: 300px;
        padding: 0.8rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .story-card {
        padding: 1.5rem;
    }

    .icon-circle {
        width: 100px;
        height: 100px;
    }

    .icon {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    p {
        font-size: 0.9rem;
    }
}

/* Alternate layout for even sections */
.section-about:nth-child(even) {
    flex-direction: row-reverse;
}

@media (max-width: 768px) {
    .section-about:nth-child(even) {
        flex-direction: column;
    }
}




/*========== Gallery =============*/
.galeria-contenedor {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 0 1rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .item-galeria {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s;
            cursor: pointer;
            aspect-ratio: 1/1;
        }

        .item-galeria:hover {
            transform: translateY(-5px);
        }

        .imagen-galeria {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Lightbox */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.95);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .lightbox.activo {
            display: flex;
        }

        .contenido-lightbox {
            position: relative;
            max-width: 90%;
            max-height: 90vh;
        }

        .imagen-lightbox {
            max-height: 80vh;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0,0,0,0.3);
        }

        .flechas {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 2.5rem;
            cursor: pointer;
            padding: 1rem;
            user-select: none;
        }

        .flecha-izquierda {
            right: 2rem;
        }

        .flecha-derecha {
            left: 2rem;
        }

        @media (max-width: 768px) {
            .galeria-contenedor {
                grid-template-columns: 1fr;
            }
            
            .flechas {
                font-size: 2rem;
            }
        }



/*============= Contact us ==========*/

/* Contact Info Cards */
.contact-info {
    padding: 60px 0;
    background: var(--background-color);
}

.contact-info .info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.contact-info .card {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}


.contact-info .card:hover {
    transform: translateY(-5px);
}

.contact-info .card i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.contact-info .card  h3{
      font-size: 22px;
    margin-bottom: 10px;
}
.faq-section .section-title{
   text-align: center;
   font-size: 30px;
   margin-bottom: 30px;
}
.contact-form-section .section-title{
   text-align: center;
   font-size: 30px;
   margin-bottom: 30px !important;
}

.category-title{
  font-size: 20px;
  margin: 20px;
}

/* Contact Form */
.contact-form-section {
    padding: 60px 0;
}

.contact-form-section .form-wrapper {
    background: var(--white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 0 auto;
}

.contact-form-section .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contact-form-section .form-group {
    margin-bottom: 20px;
    position: relative;
}
.contact-form-section .form-group .nice-select,
.contact-form-section .form-group input,
.contact-form-section .form-group select,
.contact-form-section .form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #eee;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.contact-form-section .form-group label {
    position: absolute;
    left: 12px;
    top: 12px;
    color: #666;
    transition: all 0.3s ease;
    pointer-events: none;
    background: var(--white);
    padding: 0 5px;
}

.contact-form-section .form-group input:focus,
.contact-form-section .form-group textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

.contact-form-section .form-group input:focus ~ label,
.contact-form-section .form-group textarea:focus ~ label,
.contact-form-section .form-group input:valid ~ label,
.contact-form-section .form-group textarea:valid ~ label {
    top: -10px;
    font-size: 12px;
    color: var(--primary-color);
}

.contact-form-section .btn-submit {
    background: var(--primary-color);
    color: var(--white);
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    transition: background 0.3s ease;
}

.contact-form-section .btn-submit:hover {
  border: 1px solid darkorange;
    background: darken(var(--primary-color), 10%);
    color: darkorange;
}

/* FAQ Section */
.faq-section {
    padding: 60px 0;
    background: var(--background-color);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: 20px;
    background: var(--white);
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    transition: background 0.3s ease;
}

.faq-section h2{
  text-align: center;
  margin-bottom: 35px;
}
.faq-question i {
    transition: transform 0.3s ease;
}

.faq-question.active i {
    transform: rotate(180deg);
}

.faq-answer {
    background: var(--white);
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-answer.active {
    padding: 20px;
    max-height: 300px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}



/*============ Tour pages =================*/
.article-image{
  text-align: center !important;
}
.article-image .img-fluid{

  border-radius: 10px !important;
}


/*========== Included tour===============*/
/* Styles for the tour inclusions section */
.tour-inclusions {
    margin-top: 30px;
    margin-bottom: 30px;
    padding-top: 20px;
    /* Optional: add a light background or border to visually separate */
    /* background-color: #f9f9f9; */
    /* border: 1px solid #eee; */
    /* padding: 20px; */
    /* border-radius: 8px; */
}

.tour-inclusions h3 {
    text-align: center; /* Center the main title for the section */
    margin-bottom: 30px;
    color: #333; /* Or your primary heading color */
    font-size: 1.8em;
}

.tour-inclusions h4 {
    margin-bottom: 15px;
    font-size: 1.3em; /* Slightly smaller than h3 */
    color: #555; /* A clear subtitle color */
    border-bottom: 1px solid #eee; /* Subtle line below the title */
    padding-bottom: 5px;
    display: flex; /* Use flexbox to align icon and text in h4 */
    align-items: center;
}

/* Style icons next to h4 titles */
.tour-inclusions h4 i {
    margin-right: 10px; /* Space between icon and text */
    font-size: 1.1em;
    color: #ff6600; /* Theme color */
}


/* Basic list styling - remove default bullets and padding */
.tour-inclusions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style each list item */
.tour-inclusions li {
    margin-bottom: 12px; /* Space between items */
    padding-left: 30px; /* Space for the icon */
    position: relative; /* To position the icon absolutely */
    line-height: 1.6; /* Improve readability */
    font-size: 1em;
    color: #555; /* Text color */
}

/* Style the icon within each list item */
.tour-inclusions li i {
    position: absolute; /* Position icon relative to the li */
    left: 0; /* Align to the start of the padding */
    top: 3px; /* Adjust vertically to align with text */
    font-size: 1.2em; /* Make icon slightly larger */
    /* You might need to tweak 'top' value based on your font and line height */
}

/* Specific colors for included items (checkmarks) */
.included-list li i {
    color: #28a745; /* Green color */
}

/* Specific colors for excluded items (crosses) */
.excluded-list li i {
    color: #dc3545; /* Red color */
    /* Or a more neutral grey if you prefer: */
    /* color: #888; */
}

/* Responsive adjustments */
@media (max-width: 767.98px) { /* Adjust for screens smaller than Bootstrap's md breakpoint */
    .tour-inclusions .row > div {
        margin-bottom: 25px; /* Add space between the Included/Excluded columns when they stack */
    }
     .tour-inclusions .row > div:last-child {
        margin-bottom: 0; /* Remove bottom margin from the last stacked column */
     }
}


/*============ Body Tour =========*/
/* General Article Styling */
.tour-article {
    background-color: #fff; /* White background for the article block */
    padding: 30px; /* Internal padding */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
    margin-bottom: 30px; /* Space below the article */
}

/* --- Article Header Styling --- */
.article-header {
    border-bottom: 1px solid #eee; /* Separator line below header */
    padding-bottom: 20px; /* Space below the separator */
    margin-bottom: 25px; /* Space below the header block */
}

.article-header .article-title {
    font-size: 2.2em; /* Larger title */
    color: #333; /* Darker color for main title */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 10px; /* Space below title */
    line-height: 1.2;
}

.article-meta {
    font-size: 0.95em;
    color: #777; /* Grey color for meta info */
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 20px; /* Space between meta items */
    align-items: center;
}

.article-meta span {
    display: flex; /* Align icon and text within each span */
    align-items: center;
}

.article-meta i {
    margin-right: 5px; /* Space between icon and text */
    color: #ff6600; /* Theme color for icons */
    font-size: 1.1em; /* Slightly larger icons */
}

/* --- Article Body Styling --- */
.article-body h3 {
    font-size: 1.6em; /* Size for main section headings */
    color: #ff6600; /* Theme color for section headings */
    margin-top: 30px; /* Space above the heading */
    margin-bottom: 15px; /* Space below the heading */
    border-bottom: 2px solid #ff6600; /* Accent border below heading */
    padding-bottom: 8px; /* Space between text and border */
    display: inline-block; /* Shrink border to fit text width */
}

/* Style paragraphs within the article body */
.article-body p {
    font-size: 1.1em; /* Slightly larger text for readability */
    line-height: 1.7; /* Increased line height */
    color: #555; /* Standard text color */
    margin-bottom: 20px; /* Space between paragraphs */
}

/* Style lists within the article body (if any, besides includes/excludes) */
.article-body ul:not(.included-list):not(.excluded-list) {
    list-style: disc; /* Default bullets */
    padding-left: 20px; /* Indent list */
    margin-bottom: 20px; /* Space after list */
}

.article-body ul:not(.included-list):not(.excluded-list) li {
    margin-bottom: 8px; /* Space between list items */
    line-height: 1.6;
    color: #555;
}


/* --- Itinerary Tour Styling --- */
.itinerary-tour {
    margin-top: 30px;
    margin-bottom: 30px;
    /* Optional: Add a background or border for this section */
    /* background-color: #f8f8f8; */
    /* padding: 20px; */
    /* border-radius: 8px; */
}

.itinerary-tour h3 {
    /* Inherits styling from .article-body h3 */
}

.tour-day {
    background-color: #f9f9f9; /* Light background for each day block */
    border: 1px solid #eee; /* Subtle border */
    border-radius: 6px; /* Rounded corners */
    padding: 20px; /* Internal padding */
    margin-bottom: 20px; /* Space between day blocks */
}

.tour-day:last-child {
    margin-bottom: 0; /* Remove margin from the last day block */
}

.tour-day .day-title {
    font-size: 1.25em; /* Size for day title */
    color: #333; /* Dark color */
    margin-top: 0;
    margin-bottom: 15px; /* Space below title */
    display: flex; /* Use flexbox to align the day number span */
    align-items: center;
    line-height: 1.4;
    font-weight: 700; /* Make title bold */
}

.tour-day .day-title span {
    /* Style the day number */
    display: inline-block;
    background-color: #ff6600; /* Theme color background */
    color: #fff; /* White text color */
    font-size: 0.9em; /* Smaller font size */
    font-weight: 700;
    border-radius: 4px; /* Slightly rounded corners */
    padding: 4px 10px; /* Padding inside the span */
    margin-right: 10px; /* Space between day number and text */
    min-width: 60px; /* Ensure consistent width if needed */
    text-align: center;
}

.tour-day .day-content p {
    font-size: 1.2em; /* Standard paragraph size within day content */
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px; /* Space between paragraphs */
    text-align: justify;
}

/* Style bullet points within day content if needed */
.tour-day .day-content ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 15px;
    margin-bottom: 0;
}

.tour-day .day-content ul li {
     margin-bottom: 5px;
     line-height: 1.5;
     color: #555;
}

/* --- Blockquote Styling --- */
.tour-quote {
    background-color: #fff8e1; /* Light yellow/orange background */
    border-left: 5px solid #ff6600; /* Theme color border on the left */
    padding: 20px;
    margin: 30px 0; /* Space above and below */
    font-style: italic;
    color: #555;
    font-size: 1.1em;
    line-height: 1.6;
    border-radius: 4px;
}

.tour-quote p {
    margin-bottom: 15px; /* Space below quote text */
    font-size: 1em; /* Keep paragraph size normal within quote */
    line-height: 1.6;
}

.tour-quote footer {
    font-size: 0.9em;
    color: #777;
    text-align: right; /* Align source to the right */
    display: block; /* Ensure footer is on its own line */
}

/* --- Map Container Styling --- */
.tour-map {
    margin-top: 30px;
    margin-bottom: 30px;
}

.tour-map h3 {
     /* Inherits styling from .article-body h3 */
}

.map-container {
    position: relative; /* Needed for responsive iframe padding hack */
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (h / w * 100) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #e0e0e0; /* Placeholder background while loading */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Remove iframe default border */
}


/* --- Call to Action Styling --- */
.call-to-action {
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f0f0f0; /* Light background */
    border: 1px dashed #ccc; /* Dashed border */
    border-radius: 6px;
    text-align: center;
}

.call-to-action h4 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
    margin-top: 0;
}

.call-to-action p {
    font-size: 1em;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Style for the primary button (assuming you have a .btn-primary class) */
.call-to-action .btn-primary {
    background-color: #ff6600;
    border-color: #ff6600;
    color: #fff;
    padding: 12px 25px;
    font-size: 1.1em;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.call-to-action .btn-primary:hover {
    background-color: #e65c00; /* Slightly darker on hover */
    border-color: #e65c00;
}

.call-to-action .btn-primary i {
    margin-right: 8px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767.98px) {
    .tour-article {
        padding: 20px; /* Reduce padding on smaller screens */
    }

    .article-header .article-title {
        font-size: 1.8em; /* Reduce title size */
    }

    .article-meta {
        gap: 10px; /* Reduce gap between meta items */
    }

    .article-body h3 {
         font-size: 1.4em; /* Reduce section heading size */
         margin-top: 25px;
    }

    .tour-day {
        padding: 15px; /* Reduce padding in day blocks */
    }

    .tour-day .day-title {
        font-size: 1.15em; /* Reduce day title size */
    }

    .tour-day .day-title span {
        min-width: 50px; /* Adjust day number width */
    }

    .tour-quote {
        margin: 20px 0; /* Reduce margin */
        padding: 15px;
    }

     .call-to-action {
        margin-top: 30px;
        padding: 15px;
     }

     .call-to-action h4 {
        font-size: 1.3em;
     }
}


/*========== Sidebar =========*/
/* --- General Article Styling (from previous step) --- */
.tour-article {
    background-color: #fff; /* White background for the article block */
    padding: 30px; /* Internal padding */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
    margin-bottom: 30px; /* Space below the article */
}

/* --- Article Header Styling (from previous step) --- */
.article-header {
    border-bottom: 1px solid #eee; /* Separator line below header */
    padding-bottom: 20px; /* Space below the separator */
    margin-bottom: 25px; /* Space below the header block */
}

/* --- Style the Article Title (from previous step, confirming/refining) --- */
/* Note: The main H1 is in the breadcrumbs, this is the H2 title within the article */
.article-header .article-title {
    font-size: 2.2em; /* Larger title */
    color: #333; /* Darker color for main title */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 10px; /* Space below title */
    line-height: 1.2;
    font-weight: 700; /* Ensure it's clearly bold */
}


.article-meta { /* (from previous step) */
    font-size: 0.95em;
    color: #777;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}

.article-meta span { /* (from previous step) */
    display: flex;
    align-items: center;
}

.article-meta i { /* (from previous step) */
    margin-right: 5px;
    color: #ff6600;
    font-size: 1.1em;
}

/* --- Article Body Styling (from previous step) --- */
.article-body h3 { /* (from previous step) */
    font-size: 1.6em;
    color: #ff6600;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid #ff6600;
    padding-bottom: 8px;
    display: inline-block;
}

.article-body p { /* (from previous step) */
    font-size: 1.2em;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
    text-align: justify;
}

/* ... (rest of article-body styling for ul, blockquote, map, call-to-action from previous step) ... */

/* --- Main Sidebar Styling --- */
.main-sidebar {
    /* On larger screens (lg and up), the sidebar is next to the main content.
       On medium and smaller screens (md and down), it stacks below.
       Add space above only when it stacks. */
    margin-top: 0; /* Default */
}

/* Style for individual widgets within the sidebar */
.main-sidebar .single-widget {
    background-color: #fff; /* White background for each widget */
    padding: 20px; /* Inner padding for each widget content */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    margin-bottom: 30px; /* Space between widgets */
}

.main-sidebar .single-widget:last-child {
    margin-bottom: 0; /* Remove margin from the last widget */
}

/* Style for widget titles */
.main-sidebar .widget-title {
    font-size: 1.3em;
    color: #333; /* Darker color for titles */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 20px; /* Space below the title */
    padding-bottom: 10px; /* Space below text before border */
    border-bottom: 1px solid #eee; /* Separator line */
    display: flex; /* Use flexbox to align icon and text */
    align-items: center;
    line-height: 1.2;
}

/* Style icons in widget titles */
.main-sidebar .widget-title i {
    margin-right: 8px; /* Space between icon and text */
    color: #ff6600; /* Theme color for icons */
    font-size: 1.1em;
}


/* --- Specific Styling for the Booking Form Widget --- */
.booking-form-widget form {
    /* No specific overall form styles needed unless you want a border etc. */
}

/* Style the form groups (each field + label) */
.booking-form-widget .form-group {
    margin-bottom: 18px; /* Space between form groups */
}

/* Style labels */
.booking-form-widget label {
    display: block; /* Make labels block elements so input goes below */
    font-size: 0.95em; /* Slightly smaller font size */
    color: #555; /* Standard text color */
    margin-bottom: 5px; /* Space below label */
    font-weight: 600; /* Make labels slightly bold */
}

/* Style the required asterisk */
.booking-form-widget label .required {
    color: #dc3545; /* Red color */
    margin-left: 3px; /* Space between text and asterisk */
}

/* Style the optional text */
.booking-form-widget label .optional {
    font-weight: normal;
    color: #777; /* Lighter grey */
    font-size: 0.9em;
    margin-left: 5px;
}


/* Style input fields, select boxes, and textarea */
/* Assuming Bootstrap's .form-control or similar class handles base styling */
.booking-form-widget .form-control {
    display: block; /* Make inputs block elements */
    width: 100%; /* Full width */
    padding: 10px 15px; /* Inner padding */
    font-size: 1em;
    line-height: 1.5;
    color: #495057; /* Text color in input */
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition on focus */
}

/* Style input fields on focus */
.booking-form-widget .form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #ffb380; /* Lighter theme color border on focus */
    outline: 0; /* Remove default outline */
    box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25); /* Theme color glow on focus */
}

/* Style placeholder text */
.booking-form-widget .form-control::placeholder {
    color: #aaa; /* Light grey placeholder text */
    opacity: 1; /* Ensure placeholder is visible */
}

/* Special styling for number inputs if they look different */
.booking-form-widget input[type="number"] {
     /* May need specific height or appearance adjustments */
     -moz-appearance: textfield; /* Remove default spinner on Firefox */
}
/* Remove default spinner on Chrome/Safari/Edge */
.booking-form-form-widget input[type="number"]::-webkit-outer-spin-button,
.booking-form-form-widget input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Style the submit button */
.booking-form-widget button[type="submit"] {
    display: block; /* Make button block level */
    width: 100%; /* Full width button */
    background-color: #ff6600; /* Theme color */
    border-color: #ff6600;
    color: #fff; /* White text */
    padding: 12px 20px; /* Padding */
    font-size: 1.1em;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer; /* Indicate it's clickable */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    text-align: center; /* Center text and icon */
    border: none; /* Remove default button border */
}

.booking-form-widget button[type="submit"]:hover {
    background-color: #e65c00; /* Darker on hover */
    border-color: #e65c00; /* Keep border same color */
}

/* Style icon within the button */
 .booking-form-widget button[type="submit"] i {
     margin-right: 8px; /* Space between icon and text */
     font-size: 1em; /* Icon size relative to button text */
     vertical-align: middle; /* Vertically align icon */
 }


/* Responsive adjustments for sidebar when it stacks */
@media (max-width: 991.98px) { /* Applies below Bootstrap's lg breakpoint */
    .main-sidebar {
        margin-top: 30px; /* Add space above the sidebar when it stacks below the main content */
    }
     .main-sidebar .single-widget {
         margin-bottom: 20px; /* Slightly less space between widgets when stacked */
     }
}

/* Contact Button Style */
.header .nav li a.contact-btn {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff !important;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.4);
    transition: all 0.3s ease;
    margin-left: 15px;
    margin-top: 15px;
    position: relative;
    overflow: hidden;
}

.header .nav li a.contact-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    transition: all 0.4s ease;
    z-index: -1;
}

.header .nav li a.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(250, 129, 47, 0.5);
}

.header .nav li a.contact-btn:hover:before {
    left: 0;
}

/* Modern Slider Styles */
.modern-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-slider-modern {
    position: relative;
}

.single-slide-modern {
    position: relative;
    width: 100%;
    height: 750px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.single-slide-modern .slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(250, 129, 47, 0.3) 100%);
    z-index: 1;
}

.single-slide-modern .container {
    position: relative;
    z-index: 2;
}

.slide-content {
    animation: slideInUp 1s ease;
}

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

.slide-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.4);
    animation: fadeInDown 1s ease 0.2s both;
}

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

.slide-title {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    animation: fadeInLeft 1s ease 0.4s both;
}

.slide-title span {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-description {
    font-size: 18px;
    color: #f0f0f0;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 600px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    animation: fadeInLeft 1s ease 0.6s both;
}

.slide-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.8s both;
}

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

.btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-modern:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-modern i {
    transition: transform 0.3s ease;
}

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

.btn-modern.btn-primary {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    box-shadow: 0 6px 25px rgba(250, 129, 47, 0.4);
}

.btn-modern.btn-primary:before {
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
}

.btn-modern.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(250, 129, 47, 0.6);
}

.btn-modern.btn-primary:hover:before {
    left: 0;
}

.btn-modern.btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 2px solid #fff;
    backdrop-filter: blur(10px);
}

.btn-modern.btn-secondary:before {
    background: #fff;
}

.btn-modern.btn-secondary:hover {
    color: #FA812F;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.3);
}

.btn-modern.btn-secondary:hover:before {
    left: 0;
}

/* Owl Carousel Navigation for Modern Slider */
.modern-slider {
    position: relative;
}

.modern-slider .owl-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.modern-slider .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50%;
    color: #fff !important;
    font-size: 24px !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

.modern-slider .owl-nav button.owl-prev {
    left: 30px;
}

.modern-slider .owl-nav button.owl-next {
    right: 30px;
}

.modern-slider .owl-nav button:hover {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%) !important;
    border-color: transparent !important;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 25px rgba(250, 129, 47, 0.5);
}

.modern-slider .owl-dots {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
    z-index: 10;
}

.modern-slider .owl-dots button.owl-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 50%;
    margin: 0 6px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.modern-slider .owl-dots button.owl-dot.active {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%) !important;
    width: 40px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.6);
}

.modern-slider .owl-dots button.owl-dot:hover {
    background: #fff !important;
    transform: scale(1.2);
}

/* Modern About Section Styles */
.modern-about-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.modern-about-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, rgba(250, 129, 47, 0.1) 0%, rgba(221, 3, 3, 0.1) 100%);
    border-radius: 50%;
    z-index: 0;
}

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

.about-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.3);
    animation: fadeInDown 1s ease;
}

.about-badge i {
    font-size: 16px;
}

.about-title {
    font-size: 48px;
    font-weight: 800;
    color: #2c3e50;
    line-height: 1.2;
    margin-bottom: 20px;
    animation: fadeInLeft 1s ease 0.2s both;
}

.about-title span {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-description {
    font-size: 18px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
    animation: fadeInLeft 1s ease 0.4s both;
}

.about-features {
    margin-bottom: 40px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
    animation: fadeInUp 1s ease 0.6s both;
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.3);
    transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 6px 20px rgba(250, 129, 47, 0.4);
}

.feature-text h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.feature-text p {
    font-size: 14px;
    color: #888;
    margin: 0;
}

.about-action {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.8s both;
}

.btn-about-modern {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 35px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 25px rgba(250, 129, 47, 0.4);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-about-modern:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-about-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(250, 129, 47, 0.6);
    color: #fff;
}

.btn-about-modern:hover:before {
    left: 0;
}

.btn-about-modern i {
    transition: transform 0.3s ease;
}

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

.about-stats {
    display: flex;
    gap: 30px;
}

.stat-item h3 {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 5px;
}

.stat-item p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.about-image-modern {
    position: relative;
    z-index: 2;
    animation: fadeInRight 1s ease 0.6s both;
}

.image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.main-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.image-wrapper:hover .main-image {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(250, 129, 47, 0.8) 0%, rgba(221, 3, 3, 0.8) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
}

.image-wrapper:hover .image-overlay {
    opacity: 1;
}

.overlay-content {
    text-align: center;
    color: #fff;
}

.overlay-content i {
    font-size: 50px;
    margin-bottom: 15px;
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
}

.overlay-content h4 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.floating-card {
    position: absolute;
    bottom: 30px;
    left: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 15px;
    animation: floatUpDown 3s infinite ease-in-out;
}

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

.card-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.card-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.rating {
    display: flex;
    align-items: center;
    gap: 3px;
}

.rating i {
    color: #FFD700;
    font-size: 14px;
}

.rating span {
    margin-left: 5px;
    font-weight: 700;
    color: #2c3e50;
    font-size: 16px;
}

/* Guarantees Section */
.guarantees-section {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #e8e8e8;
}

.guarantee-card {
    text-align: center;
    padding: 40px 30px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    height: 100%;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.guarantee-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(250, 129, 47, 0.2);
}

.guarantee-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    box-shadow: 0 8px 25px rgba(250, 129, 47, 0.3);
    transition: all 0.4s ease;
    position: relative;
}

.guarantee-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.guarantee-card:hover .guarantee-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 35px rgba(250, 129, 47, 0.5);
}

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

.guarantee-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.guarantee-card:hover h3 {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.guarantee-card p {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    margin: 0;
}

/* Responsive About Section */
@media (max-width: 991px) {
    .about-title {
        font-size: 36px;
    }
    .about-description {
        font-size: 16px;
    }
    .about-action {
        flex-direction: column;
        align-items: flex-start;
    }
    .about-image-modern {
        margin-top: 40px;
    }
    .guarantees-section {
        margin-top: 60px;
        padding-top: 40px;
    }
}

@media (max-width: 767px) {
    .modern-about-section {
        padding: 60px 0;
    }
    .about-title {
        font-size: 32px;
    }
    .about-description {
        font-size: 15px;
    }
    .feature-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    .feature-text h4 {
        font-size: 16px;
    }
    .stat-item h3 {
        font-size: 28px;
    }
    .floating-card {
        bottom: 20px;
        left: 20px;
        padding: 15px;
    }
    .btn-about-modern {
        width: 100%;
        justify-content: center;
    }
    .guarantees-section {
        margin-top: 50px;
        padding-top: 30px;
    }
    .guarantee-card {
        padding: 30px 20px;
        margin-bottom: 20px;
    }
    .guarantee-icon {
        width: 70px;
        height: 70px;
        font-size: 30px;
    }
    .guarantee-card h3 {
        font-size: 20px;
    }
    .guarantee-card p {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .about-badge {
        font-size: 12px;
        padding: 6px 15px;
    }
    .about-title {
        font-size: 28px;
    }
    .about-stats {
        gap: 20px;
    }
    .stat-item h3 {
        font-size: 24px;
    }
    .floating-card {
        bottom: 15px;
        left: 15px;
        padding: 12px;
        gap: 10px;
    }
    .card-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .guarantees-section {
        margin-top: 40px;
        padding-top: 30px;
    }
    .guarantee-card {
        padding: 25px 15px;
        margin-bottom: 15px;
    }
    .guarantee-icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
    }
    .guarantee-card h3 {
        font-size: 18px;
    }
}

/* Quad Tours Section Styles */
.quad-tours-section {
    padding: 100px 0;
    background: #f8f9fa;
}

.section-title-modern {
    margin-bottom: 60px;
}

.section-title-modern .subtitle {
    display: inline-block;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    padding: 8px 25px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.3);
}

.section-title-modern h2 {
    font-size: 42px;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 15px;
}

.section-title-modern h2 span {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title-modern p {
    font-size: 16px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.quad-tour-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    margin-bottom: 30px;
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
}

.quad-tour-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(250, 129, 47, 0.2);
}

.quad-tour-card.featured {
    box-shadow: 0 12px 45px rgba(250, 129, 47, 0.15);
}

.tour-image {
    position: relative;
    overflow: hidden;
    height: 250px;
}

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

.quad-tour-card:hover .tour-image img {
    transform: scale(1.1);
}

.tour-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #2c3e50;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.tour-badge.popular {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
}

.tour-badge i {
    font-size: 14px;
}

.tour-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(250, 129, 47, 0.9) 0%, rgba(221, 3, 3, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
}

.quad-tour-card:hover .tour-overlay {
    opacity: 1;
}

.tour-link {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #FA812F;
    transform: scale(0);
    transition: all 0.4s ease 0.2s;
}

.quad-tour-card:hover .tour-link {
    transform: scale(1) rotate(360deg);
}

.tour-link:hover {
    color: #DD0303;
}

.tour-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tour-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.quad-tour-card:hover .tour-content h3 {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tour-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
    flex-grow: 1;
}

.tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
}

.tour-duration {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
    font-weight: 600;
}

.tour-duration i {
    color: #FA812F;
    font-size: 16px;
}

.btn-tour {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.3);
}

.btn-tour:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(250, 129, 47, 0.5);
    color: #fff;
}

/* View All Card - Simple & Elegant */
.view-all-card {
    background: #fff;
    border: 2px dashed #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.view-all-card:hover {
    border-color: #FA812F;
    background: #fef9f6;
}

.view-all-content {
    text-align: center;
    padding: 50px 35px;
}

.view-all-content i {
    font-size: 50px;
    color: #FA812F;
    margin-bottom: 20px;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.view-all-card:hover .view-all-content i {
    opacity: 1;
    transform: scale(1.1);
}

.view-all-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 12px;
}

.view-all-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #FA812F;
    padding: 0;
    border: none;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-view-all:hover {
    color: #DD0303;
    gap: 12px;
}

.btn-view-all i {
    transition: transform 0.3s ease;
}

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

/* CTA Desert Section Styles */
.cta-desert-section {
    position: relative;
    padding: 120px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

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

.cta-content {
    text-align: center;
    color: #fff;
}

.cta-brand {
    margin-bottom: 40px;
    animation: fadeInDown 1s ease;
}

.cta-brand h1 {
    font-size: 56px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cta-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 1px;
    margin: 0;
}

.cta-main-text {
    max-width: 900px;
    margin: 0 auto 40px;
    animation: fadeInUp 1s ease 0.2s both;
}

.cta-main-text h2 {
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 25px;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}

.cta-description {
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cta-action {
    margin-bottom: 50px;
    animation: fadeInUp 1s ease 0.4s both;
}

.cta-tagline {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 30px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-cta-primary,
.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-cta-primary {
    background: #fff;
    color: #FA812F;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.btn-cta-primary:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-cta-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    color: #fff;
}

.btn-cta-primary:hover:before {
    left: 0;
}

.btn-cta-secondary {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    color: #fff;
    border: 2px solid #fff;
}

.btn-cta-secondary:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-cta-secondary:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(255, 255, 255, 0.3);
    color: #FA812F;
}

.btn-cta-secondary:hover:before {
    left: 0;
}

.btn-cta-primary i,
.btn-cta-secondary i {
    font-size: 20px;
    transition: transform 0.3s ease;
}

.btn-cta-primary:hover i,
.btn-cta-secondary:hover i {
    transform: scale(1.2) rotate(15deg);
}

.cta-features {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.6s both;
}

.cta-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.cta-feature-item i {
    font-size: 32px;
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.4s ease;
}

.cta-feature-item:hover i {
    background: #fff;
    color: #FA812F;
    transform: scale(1.15) rotate(10deg);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
}

.cta-feature-item span {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Decorative Elements */
.cta-decoration {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.cta-decoration-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -200px;
    animation: float 8s ease-in-out infinite;
}

.cta-decoration-2 {
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: -150px;
    animation: float 6s ease-in-out infinite reverse;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-30px) scale(1.1);
    }
}

/* Responsive CTA Section */
@media (max-width: 991px) {
    .cta-desert-section {
        padding: 100px 0;
    }
    .cta-brand h1 {
        font-size: 48px;
    }
    .cta-main-text h2 {
        font-size: 32px;
    }
    .cta-description {
        font-size: 17px;
    }
    .cta-tagline {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .cta-desert-section {
        padding: 80px 0;
        background-attachment: scroll;
    }
    .cta-brand h1 {
        font-size: 36px;
        letter-spacing: 2px;
    }
    .cta-subtitle {
        font-size: 16px;
    }
    .cta-main-text h2 {
        font-size: 28px;
    }
    .cta-description {
        font-size: 16px;
    }
    .cta-tagline {
        font-size: 18px;
    }
    .btn-cta-primary,
    .btn-cta-secondary {
        padding: 16px 30px;
        font-size: 16px;
        width: 100%;
        justify-content: center;
    }
    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }
    .cta-features {
        gap: 30px;
    }
    .cta-feature-item i {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .cta-desert-section {
        padding: 60px 0;
    }
    .cta-brand {
        margin-bottom: 30px;
    }
    .cta-brand h1 {
        font-size: 32px;
        letter-spacing: 1px;
    }
    .cta-subtitle {
        font-size: 14px;
    }
    .cta-main-text h2 {
        font-size: 24px;
    }
    .cta-description {
        font-size: 15px;
    }
    .cta-tagline {
        font-size: 16px;
    }
    .btn-cta-primary,
    .btn-cta-secondary {
        padding: 14px 25px;
        font-size: 15px;
    }
    .cta-features {
        gap: 20px;
    }
    .cta-feature-item i {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }
    .cta-feature-item span {
        font-size: 12px;
    }
}

/* Buggy Tours Section Styles */
.buggy-tours-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.buggy-tour-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    margin-bottom: 30px;
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
}

.buggy-tour-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(221, 3, 3, 0.25);
}

.buggy-tour-card.featured-buggy {
    box-shadow: 0 12px 45px rgba(221, 3, 3, 0.15);
}

.tour-badge-buggy {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #2c3e50;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.tour-badge-buggy.popular {
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    color: #fff;
}

.tour-badge-buggy.discount {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #fff;
    animation: pulse 2s infinite;
}

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

.tour-badge-buggy i {
    font-size: 14px;
}

.tour-overlay-buggy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(221, 3, 3, 0.9) 0%, rgba(250, 129, 47, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
}

.buggy-tour-card:hover .tour-overlay-buggy {
    opacity: 1;
}

.tour-link-buggy {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #DD0303;
    transform: scale(0);
    transition: all 0.4s ease 0.2s;
}

.buggy-tour-card:hover .tour-link-buggy {
    transform: scale(1) rotate(360deg);
}

.tour-link-buggy:hover {
    color: #FA812F;
}

.buggy-tour-card:hover .tour-content h3 {
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-tour-buggy {
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(221, 3, 3, 0.3);
}

.btn-tour-buggy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(221, 3, 3, 0.5);
    color: #fff;
}

/* View All Buggy Card - Simple & Elegant */
.view-all-card-buggy {
    background: #fff;
    border: 2px dashed #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.view-all-card-buggy:hover {
    border-color: #DD0303;
    background: #fff5f5;
}

.view-all-card-buggy .view-all-content {
    padding: 50px 35px;
}

.view-all-card-buggy .view-all-content i {
    font-size: 50px;
    color: #DD0303;
    margin-bottom: 20px;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.view-all-card-buggy:hover .view-all-content i {
    opacity: 1;
    transform: scale(1.1);
}

.view-all-card-buggy .view-all-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 12px;
}

.view-all-card-buggy .view-all-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
}

.btn-view-all-buggy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #DD0303;
    padding: 0;
    border: none;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-view-all-buggy:hover {
    color: #FA812F;
    gap: 12px;
}

.btn-view-all-buggy i {
    transition: transform 0.3s ease;
}

.btn-view-all-buggy:hover i {
    transform: translateX(5px);
}

/* Residencies Section Styles */
.residencies-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.residency-card {
    background: #fff;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    margin-bottom: 30px;
    height: 100%;
}

.residency-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 70px rgba(250, 129, 47, 0.2);
}

.residency-card.featured-residency {
    box-shadow: 0 18px 55px rgba(250, 129, 47, 0.2);
}

.residency-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

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

.residency-card:hover .residency-image img {
    transform: scale(1.15);
}

.residency-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(250, 129, 47, 0.85) 0%, rgba(221, 3, 3, 0.85) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.5s ease;
}

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

.overlay-icon {
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0) rotate(-180deg);
    transition: all 0.5s ease 0.2s;
}

.residency-card:hover .overlay-icon {
    transform: scale(1) rotate(0deg);
}

.overlay-icon i {
    font-size: 35px;
    color: #FA812F;
}

.residency-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #2c3e50;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.residency-badge.luxury {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #fff;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0%, 100% {
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 8px 30px rgba(255, 215, 0, 0.7);
    }
}

.residency-badge i {
    font-size: 16px;
}

.residency-content {
    padding: 22px;
}

.residency-content h3 {
    font-size: 20px;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.residency-card:hover .residency-content h3 {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.residency-content p {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 15px;
}

.residency-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.feature-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f8f9fa;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
    transition: all 0.3s ease;
}

.feature-badge:hover {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    transform: translateY(-3px);
}

.feature-badge i {
    font-size: 14px;
}

.btn-residency {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 25px rgba(250, 129, 47, 0.4);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-residency:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-residency:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 35px rgba(250, 129, 47, 0.6);
    color: #fff;
}

.btn-residency:hover:before {
    left: 0;
}

.btn-residency i {
    transition: transform 0.3s ease;
}

.btn-residency:hover i {
    transform: translateX(8px);
}

.btn-residency-luxury {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.btn-residency-luxury:before {
    background: linear-gradient(135deg, #FFA500 0%, #FFD700 100%);
}

.btn-residency-luxury:hover {
    box-shadow: 0 10px 35px rgba(255, 215, 0, 0.6);
}

/* Additional Info */
.residency-info {
    margin-top: 60px;
    padding-top: 60px;
    border-top: 2px solid #e8e8e8;
}

.info-item {
    text-align: center;
    padding: 25px;
    transition: all 0.3s ease;
}

.info-item i {
    font-size: 45px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 15px;
}

.info-item h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}

.info-item p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.info-item:hover {
    transform: translateY(-8px);
}

.info-item:hover i {
    animation: iconBounce 0.6s ease;
}

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

/* Responsive Residencies Section */
@media (max-width: 991px) {
    .residencies-section {
        padding: 80px 0;
    }
    .residency-image {
        height: 230px;
    }
    .residency-content h3 {
        font-size: 18px;
    }
    .residency-content {
        padding: 20px;
    }
    .residency-info {
        margin-top: 50px;
        padding-top: 50px;
    }
}

@media (max-width: 767px) {
    .residencies-section {
        padding: 60px 0;
    }
    .residency-image {
        height: 220px;
    }
    .residency-content {
        padding: 18px;
    }
    .residency-content h3 {
        font-size: 17px;
    }
    .residency-content p {
        font-size: 13px;
    }
    .btn-residency {
        width: 100%;
        justify-content: center;
        padding: 11px 22px;
        font-size: 13px;
    }
    .residency-info {
        margin-top: 40px;
        padding-top: 40px;
    }
    .info-item {
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .residency-image {
        height: 200px;
    }
    .residency-content {
        padding: 16px;
    }
    .residency-content h3 {
        font-size: 16px;
    }
    .residency-badge {
        top: 12px;
        right: 12px;
        padding: 6px 12px;
        font-size: 11px;
    }
    .overlay-icon {
        width: 60px;
        height: 60px;
    }
    .overlay-icon i {
        font-size: 30px;
    }
    .feature-badge {
        font-size: 11px;
        padding: 5px 10px;
    }
    .info-item i {
        font-size: 38px;
    }
    .info-item h4 {
        font-size: 16px;
    }
}

/* Modern Testimonials Section Styles */
.modern-testimonials-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.testimonials-slider-modern {
    position: relative;
    padding: 0 10px 60px;
}

.testimonials-slider-modern .owl-stage-outer {
    padding: 20px 0;
    overflow: visible;
}

.testimonials-slider-modern .owl-item {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.testimonials-slider-modern .owl-item.active {
    opacity: 1;
}

.testimonial-card-modern {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    margin: 0 12px;
    height: 380px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.testimonial-card-modern:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(250, 129, 47, 0.15);
}

.testimonial-card-modern.featured-testimonial {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
}

.testimonial-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #FA812F;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.testimonial-badge i {
    font-size: 12px;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.client-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(250, 129, 47, 0.3);
}

.client-avatar.tripadvisor-avatar {
    background: #00AF87;
    box-shadow: 0 6px 20px rgba(0, 175, 135, 0.3);
}

.featured-testimonial .client-avatar {
    background: #fff;
    color: #00AF87;
}

.featured-testimonial .client-avatar.tripadvisor-avatar {
    background: #fff;
    color: #00AF87;
}

.client-info h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

.featured-testimonial .client-info h4 {
    color: #fff;
}

.rating-stars {
    display: flex;
    gap: 3px;
}

.rating-stars i {
    color: #FFD700;
    font-size: 14px;
}

.testimonial-body {
    margin-bottom: 20px;
    flex-grow: 1;
}

.testimonial-body h5 {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 12px;
}

.featured-testimonial .testimonial-body h5 {
    color: #fff;
}

.testimonial-body p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-testimonial .testimonial-body p {
    color: rgba(255, 255, 255, 0.95);
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #FA812F;
    transition: all 0.3s ease;
}

.featured-testimonial .read-more {
    color: #fff;
}

.read-more:hover {
    gap: 8px;
    color: #DD0303;
}

.featured-testimonial .read-more:hover {
    color: #fff;
    text-decoration: underline;
}

.read-more i {
    transition: transform 0.3s ease;
}

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

.testimonial-footer {
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    margin-top: auto;
}

.featured-testimonial .testimonial-footer {
    border-top-color: rgba(255, 255, 255, 0.3);
}

.tripadvisor-icon {
    font-size: 28px;
    color: #00AF87;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.featured-testimonial .tripadvisor-icon {
    color: #fff;
}

.testimonial-card-modern:hover .tripadvisor-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Testimonials Slider Navigation */
.modern-testimonials-section .owl-nav {
    margin-top: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.modern-testimonials-section .owl-nav button {
    width: 50px !important;
    height: 50px !important;
    background: #fff !important;
    border: 2px solid #e8e8e8 !important;
    border-radius: 50% !important;
    color: #FA812F !important;
    font-size: 20px !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modern-testimonials-section .owl-nav button:hover {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    transform: scale(1.1) !important;
}

.modern-testimonials-section .owl-dots {
    margin-top: 30px;
    text-align: center;
}

.modern-testimonials-section .owl-dots button.owl-dot {
    width: 12px;
    height: 12px;
    background: #e0e0e0 !important;
    border-radius: 50%;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.modern-testimonials-section .owl-dots button.owl-dot.active {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%) !important;
    width: 35px;
    border-radius: 20px;
}

.modern-testimonials-section .owl-dots button.owl-dot:hover {
    background: #FA812F !important;
}

/* TripAdvisor CTA */
.tripadvisor-cta {
    margin-top: 40px;
    background: linear-gradient(135deg, #00AF87 0%, #008060 100%);
    border-radius: 25px;
    padding: 50px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 175, 135, 0.2);
}

.tripadvisor-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
}

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

.ta-logo-large {
    height: 50px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
}

.tripadvisor-cta h3 {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.tripadvisor-cta p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 30px;
}

.btn-tripadvisor {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #00AF87;
    padding: 16px 35px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease;
}

.btn-tripadvisor:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    color: #008060;
}

.btn-tripadvisor i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.btn-tripadvisor:hover i {
    transform: rotate(15deg) scale(1.1);
}

/* Responsive Testimonials */
@media (max-width: 991px) {
    .modern-testimonials-section {
        padding: 80px 0;
    }
    .testimonial-card-modern {
        padding: 25px;
        margin: 0 10px;
        height: 360px;
    }
    .modern-testimonials-section .owl-nav button {
        width: 45px;
        height: 45px;
        font-size: 18px !important;
    }
}

@media (max-width: 767px) {
    .modern-testimonials-section {
        padding: 60px 0;
    }
    .testimonial-card-modern {
        padding: 22px;
        height: 350px;
    }
    .testimonial-header {
        gap: 12px;
    }
    .client-avatar {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    .client-info h4 {
        font-size: 16px;
    }
    .testimonial-body h5 {
        font-size: 15px;
    }
    .testimonial-body p {
        font-size: 13px;
    }
    .tripadvisor-cta {
        padding: 40px 30px;
    }
    .tripadvisor-cta h3 {
        font-size: 24px;
    }
    .tripadvisor-cta p {
        font-size: 15px;
    }
    .btn-tripadvisor {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .testimonial-card-modern {
        padding: 20px;
        height: auto;
        min-height: 320px;
    }
    .client-avatar {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    .client-info h4 {
        font-size: 15px;
    }
    .testimonial-body h5 {
        font-size: 14px;
    }
    .testimonial-body p {
        font-size: 12px;
    }
    .tripadvisor-cta {
        padding: 35px 20px;
    }
    .ta-logo-large {
        height: 40px;
    }
    .tripadvisor-cta h3 {
        font-size: 20px;
    }
    .tripadvisor-cta p {
        font-size: 14px;
    }
    .btn-tripadvisor {
        padding: 14px 28px;
        font-size: 14px;
    }
}

/* Elegant Contact Section */
.contact-elegant-section {
    padding: 100px 0;
    background: #f8f9fa;
}

.section-title-contact {
    margin-bottom: 50px;
}

.section-title-contact h2 {
    font-size: 42px;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 15px;
}

.section-title-contact h2 span {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title-contact p {
    font-size: 17px;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.contact-wrapper-elegant {
    display: grid;
    grid-template-columns: 40% 60%;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
}

.contact-info-elegant {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    padding: 50px 40px;
    color: #fff;
}

.info-list {
    margin-bottom: 40px;
}

.info-elegant {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.icon-elegant {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}

.text-elegant span {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.text-elegant a,
.text-elegant p {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.text-elegant a:hover {
    text-decoration: underline;
}

.social-elegant {
    display: flex;
    gap: 12px;
}

.social-elegant a {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    transition: all 0.3s ease;
}

.social-elegant a:hover {
    background: #fff;
    color: #FA812F;
}

/* Form Elegant */
.contact-form-elegant {
    padding: 50px 40px;
}

.form-group-elegant {
    margin-bottom: 25px;
    position: relative;
    animation: fadeInUp 0.6s ease backwards;
}

.form-group-elegant:nth-child(1) {
    animation-delay: 0.1s;
}

.form-group-elegant:nth-child(2) {
    animation-delay: 0.2s;
}

.form-group-elegant:nth-child(3) {
    animation-delay: 0.3s;
}

.form-group-elegant:nth-child(4) {
    animation-delay: 0.4s;
}

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

.form-group-elegant input:invalid:not(:placeholder-shown),
.form-group-elegant textarea:invalid:not(:placeholder-shown) {
    border-color: #dc3545 !important;
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.form-group-elegant input:valid:not(:placeholder-shown),
.form-group-elegant textarea:valid:not(:placeholder-shown) {
    border-color: #28a745 !important;
}

.form-group-elegant input[type="text"],
.form-group-elegant input[type="email"],
.form-group-elegant input[type="tel"],
.form-group-elegant textarea {
    width: 100% !important;
    padding: 18px 24px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    color: #2c3e50 !important;
    background: #f9fafb !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 400 !important;
}

.form-group-elegant textarea {
    resize: vertical !important;
    min-height: 140px !important;
}

.form-group-elegant input::placeholder,
.form-group-elegant textarea::placeholder {
    color: #aaa !important;
    transition: all 0.3s ease !important;
}

.form-group-elegant input:focus,
.form-group-elegant textarea:focus {
    outline: none !important;
    border-color: #FA812F !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(250, 129, 47, 0.08), 0 8px 20px rgba(250, 129, 47, 0.12) !important;
    transform: translateY(-2px) !important;
}

.form-group-elegant input:focus::placeholder,
.form-group-elegant textarea:focus::placeholder {
    opacity: 0.6 !important;
    transform: translateX(5px) !important;
}

.btn-elegant {
    width: 100%;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    padding: 18px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.3);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s ease 0.5s backwards;
}

.btn-elegant::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-elegant:hover::after {
    width: 400px;
    height: 400px;
}

.btn-elegant:hover {
    box-shadow: 0 8px 25px rgba(250, 129, 47, 0.5);
    transform: translateY(-3px);
}

.btn-elegant:active {
    transform: translateY(-1px);
}

.success-message-elegant {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #fff;
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
    animation: slideInDown 0.5s ease;
    transition: opacity 0.3s ease;
}

.success-message-elegant i {
    font-size: 28px;
}

.success-message-elegant p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.error-message-elegant {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #fff;
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
    animation: slideInDown 0.5s ease;
    transition: opacity 0.3s ease;
}

.error-message-elegant i {
    font-size: 28px;
}

.error-message-elegant p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.error-message-elegant a {
    color: #fff;
    text-decoration: underline;
    font-weight: 700;
}

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

/* Responsive Elegant Contact */
@media (max-width: 991px) {
    .contact-elegant-section {
        padding: 80px 0;
    }
    .section-title-contact {
        margin-bottom: 40px;
    }
    .section-title-contact h2 {
        font-size: 36px;
    }
    .section-title-contact p {
        font-size: 16px;
    }
    .contact-wrapper-elegant {
        grid-template-columns: 1fr;
    }
    .contact-info-elegant {
        padding: 40px 35px;
    }
    .contact-form-elegant {
        padding: 40px 35px;
    }
}

@media (max-width: 767px) {
    .contact-elegant-section {
        padding: 60px 0;
    }
    .section-title-contact h2 {
        font-size: 32px;
    }
    .section-title-contact p {
        font-size: 15px;
    }
    .contact-info-elegant,
    .contact-form-elegant {
        padding: 35px 25px;
    }
}

@media (max-width: 575px) {
    .section-title-contact h2 {
        font-size: 28px;
    }
    .section-title-contact p {
        font-size: 14px;
    }
    .contact-info-elegant,
    .contact-form-elegant {
        padding: 30px 20px;
    }
    .icon-elegant {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .form-group-elegant input[type="text"],
    .form-group-elegant input[type="email"],
    .form-group-elegant input[type="tel"],
    .form-group-elegant textarea {
        padding: 14px 18px !important;
        font-size: 14px !important;
    }
    .btn-elegant {
        padding: 15px;
        font-size: 15px;
    }
}

/* Footer CTA Section */
.footer-cta-section {
    padding: 80px 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.footer-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

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

.footer-cta-content {
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
}

.cta-logo {
    margin-bottom: 25px;
    animation: fadeInDown 1s ease;
}

.cta-logo img {
    max-width: 100px;
    height: auto;
    opacity: 1;
}

.footer-cta-content h2 {
    font-size: 38px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.3;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.footer-cta-content p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.98);
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto 35px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cta-buttons-footer {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-footer-cta {
    padding: 16px 40px;
    background: #fff;
    color: #FA812F;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.btn-footer-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    color: #DD0303;
}

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

.btn-footer-cta.secondary:hover {
    background: #fff;
    color: #FA812F;
}

/* Responsive Footer CTA */
@media (max-width: 767px) {
    .footer-cta-section {
        padding: 60px 0;
        background-attachment: scroll;
    }
    .cta-logo img {
        max-width: 80px;
    }
    .footer-cta-content h2 {
        font-size: 28px;
    }
    .footer-cta-content p {
        font-size: 16px;
        margin-bottom: 25px;
    }
    .btn-footer-cta {
        padding: 14px 35px;
        font-size: 15px;
    }
}

@media (max-width: 575px) {
    .cta-logo img {
        max-width: 70px;
    }
    .footer-cta-content h2 {
        font-size: 24px;
    }
    .footer-cta-content p {
        font-size: 15px;
    }
    .cta-buttons-footer {
        flex-direction: column;
        gap: 12px;
    }
    .btn-footer-cta {
        width: 100%;
        padding: 14px 30px;
    }
}

/* Modern Footer Styles */
.footer-modern {
    background: #2c3e50;
    color: #fff;
}

.footer-top-modern {
    padding: 70px 0 40px;
}

.footer-widget {
    margin-bottom: 30px;
}

.footer-logo {
    margin-bottom: 25px;
    text-align: center;
}

.footer-logo img {
    max-width: 100px;
    height: auto;
    transition: transform 0.3s ease;
}

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

.footer-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: center;
}

.footer-widget h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 12px;
}

.footer-widget h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 2px;
}

.footer-social {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    transform: translateY(-3px);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-links li a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links li a:hover {
    color: #FA812F;
    padding-left: 5px;
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact li i {
    color: #FA812F;
    font-size: 16px;
    margin-top: 2px;
}

.footer-contact li a {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}

.footer-contact li a:hover {
    color: #FA812F;
}

/* Copyright */
.footer-copyright {
    background: #1a252f;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

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

.footer-bottom-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

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

/* Responsive Footer */
@media (max-width: 991px) {
    .footer-top-modern {
        padding: 60px 0 30px;
    }
}

@media (max-width: 767px) {
    .footer-top-modern {
        padding: 50px 0 20px;
    }
    .footer-widget {
        margin-bottom: 35px;
    }
    .footer-copyright {
        padding: 20px 0;
        text-align: center;
    }
    .footer-bottom-links {
        justify-content: center;
        margin-top: 15px;
    }
}

@media (max-width: 575px) {
    .footer-logo img {
        max-width: 80px;
    }
    .footer-widget h3 {
        font-size: 16px;
    }
    .footer-bottom-links {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* About Page Styles */
.about-hero-section {
    background-image: url('../img/quads-buggy/quad-desierto-merzouga-tour-9.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 120px 0;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.about-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.about-hero-content h1 {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.about-hero-content h1 span {
    display: block;
    font-size: 64px;
}

.about-hero-content p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
}

/* About Content Section */
.about-content-section {
    padding: 100px 0;
}

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

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

.experience-badge {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    padding: 25px 30px;
    border-radius: 15px;
    text-align: center;
    color: #fff;
    box-shadow: 0 10px 30px rgba(250, 129, 47, 0.4);
}

.experience-badge h3 {
    font-size: 48px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
}

.experience-badge p {
    font-size: 14px;
    color: #fff;
    margin: 0;
    line-height: 1.4;
}

.about-text-box {
    padding-left: 40px;
}

.about-label {
    display: inline-block;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}

.about-text-box h2 {
    font-size: 38px;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 20px;
}

.about-text-box h2 span {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-text-box p {
    font-size: 15px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 18px;
}

/* Mission Section */
.mission-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.mission-card {
    background: #fff;
    padding: 35px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    height: 100%;
}

.mission-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(250, 129, 47, 0.15);
}

.mission-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #fff;
    font-size: 36px;
    transition: all 0.3s ease;
}

.mission-card:hover .mission-icon {
    transform: scale(1.1) rotate(5deg);
}

.mission-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.mission-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* Why Choose Section */
/* Brand Showcase Section */
.brand-showcase-section {
    padding: 60px 0;
    background: #fff;
}

.brand-showcase-box {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
    max-width: 550px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .brand-showcase-box {
        max-width: 100%;
        margin: 0;
    }
}

.brand-showcase-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 50px rgba(250, 129, 47, 0.18);
}

.brand-showcase-image {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
}

.brand-showcase-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.brand-showcase-box:hover .brand-showcase-image img {
    transform: scale(1.03);
}

.showcase-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(250, 129, 47, 0) 0%, rgba(221, 3, 3, 0.1) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.brand-showcase-box:hover .showcase-overlay {
    opacity: 1;
}

.showcase-badge {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 8px 25px rgba(250, 129, 47, 0.4);
    transform: translateY(20px);
    transition: transform 0.4s ease 0.1s;
}

.brand-showcase-box:hover .showcase-badge {
    transform: translateY(0);
}

.showcase-badge i {
    font-size: 20px;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Gallery Grid */
.brand-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0;
    margin-top: 20px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 992px) {
    .brand-gallery-grid {
        margin-top: 0;
        margin-left: 0;
        padding-left: 20px;
        gap: 18px;
        max-width: 100%;
    }
}

.gallery-grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 1;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.gallery-grid-item:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 25px rgba(250, 129, 47, 0.25);
    z-index: 10;
}

.gallery-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-grid-item:hover img {
    transform: scale(1.08);
}

/* Staggered animation for gallery items */
.gallery-grid-item:nth-child(1) {
    animation: fadeInScale 0.6s ease 0.1s both;
}

.gallery-grid-item:nth-child(2) {
    animation: fadeInScale 0.6s ease 0.2s both;
}

.gallery-grid-item:nth-child(3) {
    animation: fadeInScale 0.6s ease 0.3s both;
}

.gallery-grid-item:nth-child(4) {
    animation: fadeInScale 0.6s ease 0.4s both;
}

.gallery-grid-item:nth-child(5) {
    animation: fadeInScale 0.6s ease 0.5s both;
}

.gallery-grid-item:nth-child(6) {
    animation: fadeInScale 0.6s ease 0.6s both;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Brand Showcase */
@media (max-width: 991px) {
    .brand-showcase-section {
        padding: 50px 0;
    }
    
    .showcase-badge {
        font-size: 14px;
        padding: 12px 24px;
    }
    
    .brand-gallery-grid {
        max-width: 400px;
    }
}

@media (max-width: 767px) {
    .brand-showcase-section {
        padding: 40px 0;
    }
    
    .brand-showcase-box {
        border-radius: 15px;
        margin-bottom: 25px;
        max-width: 450px;
    }
    
    .brand-showcase-image {
        border-radius: 15px;
        max-width: 100%;
    }
    
    .showcase-overlay {
        padding: 20px;
    }
    
    .showcase-badge {
        font-size: 13px;
        padding: 10px 20px;
    }
    
    .showcase-badge i {
        font-size: 16px;
    }
    
    .brand-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-width: 350px;
    }
}

@media (max-width: 575px) {
    .brand-showcase-section {
        padding: 35px 0;
    }
    
    .brand-showcase-box {
        max-width: 100%;
    }
    
    .brand-showcase-image {
        max-width: 100%;
    }
    
    .brand-gallery-grid {
        gap: 10px;
        max-width: 100%;
    }
    
    .gallery-grid-item {
        border-radius: 10px;
    }
}

.why-choose-section {
    padding: 80px 0;
}

.why-card {
    text-align: center;
    padding: 30px 20px;
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.why-icon {
    width: 70px;
    height: 70px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #FA812F;
    font-size: 32px;
    transition: all 0.3s ease;
}

.why-card:hover .why-icon {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    transform: scale(1.15);
}

.why-card h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.why-card p {
    font-size: 14px;
    color: #666;
    margin: 0;
}

/* Services Section */
.services-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.service-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(250, 129, 47, 0.15);
}

.service-image {
    position: relative;
    overflow: hidden;
    height: 250px;
}

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

.service-card:hover .service-image img {
    transform: scale(1.1);
}

.service-content {
    padding: 28px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.service-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 15px;
}

.service-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #FA812F;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.service-link:hover {
    color: #DD0303;
    gap: 12px;
}

.service-link i {
    transition: transform 0.3s ease;
}

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

/* Responsive About Page */
@media (max-width: 991px) {
    .about-hero-content h1 {
        font-size: 48px;
    }
    .about-hero-content h1 span {
        font-size: 56px;
    }
    .about-text-box {
        padding-left: 0;
        margin-top: 40px;
    }
    .about-text-box h2 {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .about-hero-section {
        padding: 80px 0;
        min-height: 400px;
    }
    .about-hero-content h1 {
        font-size: 38px;
    }
    .about-hero-content h1 span {
        font-size: 46px;
    }
    .about-hero-content p {
        font-size: 18px;
    }
    .about-text-box h2 {
        font-size: 28px;
    }
    .experience-badge {
        bottom: 20px;
        right: 20px;
        padding: 20px 25px;
    }
    .experience-badge h3 {
        font-size: 40px;
    }
    .service-image {
        height: 230px;
    }
    .service-content {
        padding: 24px;
    }
}

@media (max-width: 575px) {
    .about-hero-content h1 {
        font-size: 32px;
    }
    .about-hero-content h1 span {
        font-size: 38px;
    }
    .about-hero-content p {
        font-size: 16px;
    }
    .experience-badge {
        bottom: 15px;
        right: 15px;
        padding: 15px 20px;
    }
    .experience-badge h3 {
        font-size: 32px;
    }
    .about-text-box h2 {
        font-size: 24px;
    }
    .service-image {
        height: 220px;
    }
    .service-content {
        padding: 22px;
    }
    .service-content h3 {
        font-size: 20px;
    }
}

/* Gallery Page Styles */
.gallery-hero-section {
    background-image: url('../img/quads-buggy/buggy-aventura-dunas-sahara-4.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 120px 0;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

.gallery-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.gallery-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.gallery-hero-content h1 {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.gallery-hero-content h1 span {
    display: block;
    font-size: 64px;
}

.gallery-hero-content p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
}

/* Gallery Section */
.gallery-section {
    padding: 100px 0;
}

.gallery-filter {
    margin-bottom: 50px;
}

.filter-btn {
    background: #fff;
    border: 2px solid #e0e0e0;
    color: #2c3e50;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    margin: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.3);
}

.gallery-grid {
    margin-top: 30px;
}

.gallery-item {
    margin-bottom: 30px;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Simple Scroll Animation */
.gallery-item.scroll-hidden {
    opacity: 0;
    transform: translateY(40px);
}

.gallery-item.scroll-visible {
    opacity: 1;
    transform: translateY(0);
}

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

.gallery-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 45px rgba(250, 129, 47, 0.15);
}


.gallery-image {
    position: relative;
    overflow: hidden;
    height: 280px;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
    filter: brightness(1);
}

.gallery-card:hover .gallery-image img {
    transform: scale(1.1);
    filter: brightness(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(250, 129, 47, 0.9) 0%, rgba(221, 3, 3, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.gallery-icon {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FA812F;
    font-size: 22px;
    transform: scale(0);
    transition: all 0.4s ease 0.1s;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.gallery-card:hover .gallery-icon {
    transform: scale(1);
}

.gallery-icon:hover {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    transform: scale(1.1);
}

.gallery-info {
    padding: 20px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}

.gallery-card:hover .gallery-info {
    background: linear-gradient(to top, rgba(250, 129, 47, 0.05) 0%, transparent 100%);
}

.gallery-info h4 {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
    transition: all 0.3s ease;
}

.gallery-card:hover .gallery-info h4 {
    color: #FA812F;
}

.gallery-info p {
    font-size: 14px;
    color: #666;
    margin: 0;
    transition: color 0.3s ease;
}

.gallery-card:hover .gallery-info p {
    color: #555;
}

/* Magnific Popup Custom Styles */
.mfp-bg {
    background: rgba(0, 0, 0, 0.95);
}

.mfp-container {
    padding: 20px;
}

.mfp-close {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 50%;
    color: #fff !important;
    font-size: 32px;
    opacity: 1 !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.4);
}

.mfp-close:hover {
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 6px 20px rgba(250, 129, 47, 0.6);
}

.mfp-arrow {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 50%;
    opacity: 1 !important;
    transition: all 0.3s ease;
    margin-top: -25px;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.4);
}

.mfp-arrow:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(250, 129, 47, 0.6);
}

.mfp-arrow:before {
    border: none !important;
    content: '\f053';
    font-family: FontAwesome;
    font-size: 20px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mfp-arrow-right:before {
    content: '\f054';
}

.mfp-counter {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    padding: 8px 16px;
    border-radius: 20px;
    box-shadow: 0 3px 10px rgba(250, 129, 47, 0.3);
}

.mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.7);
    padding: 15px;
    border-radius: 10px;
    margin-top: 10px;
}

.mfp-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.mfp-img {
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mfp-figure {
    background: transparent;
}

.mfp-preloader {
    color: #FA812F;
    font-size: 16px;
}

/* Responsive Gallery */
@media (max-width: 767px) {
    .gallery-hero-section {
        padding: 80px 0;
        min-height: 400px;
    }
    .gallery-hero-content h1 {
        font-size: 38px;
    }
    .gallery-hero-content h1 span {
        font-size: 46px;
    }
    .gallery-hero-content p {
        font-size: 18px;
    }
    .gallery-section {
        padding: 60px 0;
    }
    .gallery-filter {
        margin-bottom: 40px;
    }
    .filter-btn {
        padding: 10px 25px;
        font-size: 14px;
        margin: 4px;
    }
    .gallery-image {
        height: 250px;
    }
    
    /* Magnific Popup Mobile */
    .mfp-close,
    .mfp-arrow {
        width: 40px;
        height: 40px;
    }
    
    .mfp-close {
        font-size: 26px;
        right: 5px !important;
        top: 5px !important;
    }
    
    .mfp-arrow:before {
        font-size: 16px;
    }
    
    .mfp-counter {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .mfp-bottom-bar {
        padding: 10px;
    }
}

@media (max-width: 575px) {
    .gallery-hero-content h1 {
        font-size: 32px;
    }
    .gallery-hero-content h1 span {
        font-size: 38px;
    }
    .gallery-hero-content p {
        font-size: 16px;
    }
    .filter-btn {
        padding: 8px 20px;
        font-size: 13px;
    }
    .gallery-image {
        height: 230px;
    }
    .gallery-info {
        padding: 18px;
    }
    .gallery-info h4 {
        font-size: 16px;
    }
    
    /* Magnific Popup Extra Small */
    .mfp-close,
    .mfp-arrow {
        width: 35px;
        height: 35px;
    }
    
    .mfp-close {
        font-size: 22px;
    }
    
    .mfp-arrow:before {
        font-size: 14px;
    }
}

/* WhatsApp Fixed Left */
.whatsapp-fixed {
    position: fixed;
    left: 35px;
    bottom: 5px;
    z-index: 9999;
}

.whatsapp-fixed .whatsapp-btn {
    animation: pulse-whatsapp 2s infinite;
}

@keyframes pulse-whatsapp {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.8), 0 0 0 10px rgba(37, 211, 102, 0.1);
    }
}

/* Floating Contact Buttons */
.floating-contact-buttons {
    position: fixed;
    right: 20px;
    bottom: 90px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Contact Buttons Container */
.contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-buttons.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Main Toggle Button */
.main-toggle-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(250, 129, 47, 0.4);
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-main 3s infinite;
}

.main-toggle-btn:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 30px rgba(250, 129, 47, 0.6);
}

.main-toggle-btn:active {
    transform: translateY(-1px) scale(1.05);
}

.main-toggle-btn.active {
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    transform: rotate(45deg);
}

.main-toggle-btn.active i {
    transform: rotate(0deg);
}

@keyframes pulse-main {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(250, 129, 47, 0.4);
    }
    50% {
        box-shadow: 0 4px 20px rgba(250, 129, 47, 0.7), 0 0 0 8px rgba(250, 129, 47, 0.1);
    }
}

.floating-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.floating-btn:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    text-decoration: none;
    color: #fff;
}

.floating-btn:active {
    transform: translateY(-1px) scale(1.05);
}

/* WhatsApp Button */
.whatsapp-btn {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    position: relative;
    z-index: 1;
}

.whatsapp-btn:hover {
    background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
}

/* Phone Button */
.phone-btn {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
}

.phone-btn:hover {
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
}

/* Email Button */
.email-btn {
    background: linear-gradient(135deg, #EA4335 0%, #FBBC05 100%);
}

.email-btn:hover {
    background: linear-gradient(135deg, #FBBC05 0%, #EA4335 100%);
}

/* Instagram Button */
.instagram-btn {
    background: linear-gradient(135deg, #E4405F 0%, #833AB4 50%, #F77737 100%);
}

.instagram-btn:hover {
    background: linear-gradient(135deg, #F77737 0%, #833AB4 50%, #E4405F 100%);
}

/* Facebook Button */
.facebook-btn {
    background: linear-gradient(135deg, #1877F2 0%, #42A5F5 100%);
}

.facebook-btn:hover {
    background: linear-gradient(135deg, #42A5F5 0%, #1877F2 100%);
}

/* Tooltip */
.btn-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.btn-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: rgba(0, 0, 0, 0.8);
}

.floating-btn:hover .btn-tooltip {
    opacity: 1;
    visibility: visible;
    right: 75px;
}

/* Responsive Floating Buttons */
@media (max-width: 768px) {
    .whatsapp-fixed {
        left: 15px;
        bottom: 15px;
    }
    
    .floating-contact-buttons {
        right: 15px;
        bottom: 15px;
        gap: 12px;
        align-items: center;
    }
    
    .floating-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
        flex-shrink: 0;
    }
    
    .btn-tooltip {
        font-size: 12px;
        padding: 6px 10px;
        right: 60px;
    }
    
    .floating-btn:hover .btn-tooltip {
        right: 65px;
    }
    
    .whatsapp-fixed .btn-tooltip {
        left: 60px;
        right: auto;
    }
    
    .whatsapp-fixed .btn-tooltip::after {
        left: auto;
        right: 100%;
        border-left-color: transparent;
        border-right-color: rgba(0, 0, 0, 0.8);
    }
    
    .whatsapp-fixed .floating-btn:hover .btn-tooltip {
        left: 65px;
    }
}

@media (max-width: 480px) {
    .whatsapp-fixed {
        left: 10px;
        bottom: 10px;
    }
    
    .floating-contact-buttons {
        right: 10px;
        bottom: 10px;
        gap: 10px;
        align-items: center;
    }
    
    .floating-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
        flex-shrink: 0;
    }
    
    .btn-tooltip {
        font-size: 11px;
        padding: 5px 8px;
        right: 55px;
    }
    
    .floating-btn:hover .btn-tooltip {
        right: 60px;
    }
    
    .whatsapp-fixed .btn-tooltip {
        left: 55px;
        right: auto;
    }
    
    .whatsapp-fixed .floating-btn:hover .btn-tooltip {
        left: 60px;
    }
}

/* Responsive Buggy Tours */
@media (max-width: 991px) {
    .buggy-tours-section {
        padding: 80px 0;
    }
}

@media (max-width: 767px) {
    .buggy-tours-section {
        padding: 60px 0;
    }
}

@media (max-width: 575px) {
    .buggy-tours-section {
        padding: 60px 0;
    }
}

/* Responsive Quad Tours */
@media (max-width: 991px) {
    .quad-tours-section {
        padding: 80px 0;
    }
    .section-title-modern h2 {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .quad-tours-section {
        padding: 60px 0;
    }
    .section-title-modern {
        margin-bottom: 40px;
    }
    .section-title-modern h2 {
        font-size: 32px;
    }
    .section-title-modern p {
        font-size: 15px;
    }
    .tour-image {
        height: 220px;
    }
    .tour-content h3 {
        font-size: 18px;
    }
    .view-all-card {
        min-height: 350px;
    }
}

@media (max-width: 575px) {
    .section-title-modern h2 {
        font-size: 28px;
    }
    .section-title-modern .subtitle {
        font-size: 11px;
        padding: 6px 20px;
    }
    .tour-image {
        height: 200px;
    }
    .tour-content {
        padding: 20px;
    }
    .tour-content h3 {
        font-size: 17px;
    }
    .view-all-content i {
        font-size: 50px;
    }
    .view-all-content h3 {
        font-size: 20px;
    }
}

/* Responsive Slider Styles */
@media (max-width: 1199px) {
    .slide-title {
        font-size: 48px;
    }
    .slide-description {
        font-size: 16px;
    }
    .modern-slider .owl-nav button {
        width: 50px;
        height: 50px;
        font-size: 20px !important;
    }
}

@media (max-width: 991px) {
    .single-slide-modern {
        height: 650px;
    }
    .slide-title {
        font-size: 40px;
    }
    .slide-description {
        font-size: 15px;
    }
    .btn-modern {
        padding: 12px 28px;
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .single-slide-modern {
        height: 550px;
    }
    .slide-title {
        font-size: 32px;
    }
    .slide-description {
        font-size: 14px;
        margin-bottom: 20px;
    }
    .slide-badge {
        font-size: 10px;
        padding: 6px 15px;
    }
    .btn-modern {
        padding: 10px 20px;
        font-size: 13px;
    }
    .slide-buttons {
        gap: 10px;
    }
    .modern-slider .owl-nav button {
        width: 45px;
        height: 45px;
        font-size: 18px !important;
    }
    .modern-slider .owl-nav button.owl-prev {
        left: 15px;
    }
    .modern-slider .owl-nav button.owl-next {
        right: 15px;
    }
}

@media (max-width: 575px) {
    .single-slide-modern {
        height: 500px;
    }
    .slide-title {
        font-size: 28px;
        margin-bottom: 15px;
    }
    .slide-description {
        font-size: 13px;
        margin-bottom: 15px;
    }
    .btn-modern {
        padding: 10px 20px;
        font-size: 12px;
        width: 100%;
        justify-content: center;
    }
    .slide-buttons {
        flex-direction: column;
        gap: 10px;
    }
    .modern-slider .owl-nav button {
        width: 40px;
        height: 40px;
        font-size: 16px !important;
    }
    .modern-slider .owl-nav button.owl-prev {
        left: 10px;
    }
    .modern-slider .owl-nav button.owl-next {
        right: 10px;
    }
    .modern-slider .owl-dots {
        bottom: 20px;
    }
    .modern-slider .owl-dots button.owl-dot {
        width: 10px;
        height: 10px;
        margin: 0 4px;
    }
    .modern-slider .owl-dots button.owl-dot.active {
        width: 30px;
    }
}

/* ===========================================
   CONTACT PAGE STYLES
============================================ */

/* Contact Hero Section */
.contact-hero-section {
    background-image: url('../img/quads-buggy/buggy-aventura-merzouga-12.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 120px 0;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

.contact-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.contact-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.contact-hero-content h1 {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.contact-hero-content h1 span {
    display: block;
    font-size: 64px;
}

.contact-hero-content p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
}

/* Contact Info Cards */
.contact-info-cards {
    padding: 80px 0 50px;
    background: #fff;
    margin-top: -80px;
    position: relative;
    z-index: 3;
}

.contact-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 30px;
    border: 2px solid transparent;
}

.contact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(250, 129, 47, 0.2);
    border-color: rgba(250, 129, 47, 0.2);
}

.contact-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

.contact-card:hover .contact-card-icon {
    transform: rotateY(360deg);
}

.contact-card-icon i {
    font-size: 36px;
    color: #fff;
}

.contact-card-icon.whatsapp-icon {
    background: #25D366;
}

.contact-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #2c3e50;
}

.contact-card p {
    margin: 0;
    font-size: 16px;
    color: #FA812F;
    font-weight: 600;
}

.contact-card p a {
    color: #FA812F;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-card p a:hover {
    color: #DD0303;
}

.contact-card span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: #6c757d;
}

/* Contact Main Section */
.contact-main-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.contact-form-box,
.contact-map-box {
    background: #fff;
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.contact-form-box h2,
.contact-map-box h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #2c3e50;
}

.contact-form-box h2::after,
.contact-map-box h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    margin-top: 15px;
}

.contact-form-box p,
.contact-map-box p {
    font-size: 15px;
    color: #6c757d;
    margin-bottom: 30px;
}

/* Contact Form */
.contact-form-main .form-group-contact {
    margin-bottom: 25px;
}

.contact-form-main .form-group-contact input,
.contact-form-main .form-group-contact textarea {
    width: 100%;
    padding: 18px 24px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #f9fafb;
    font-size: 15px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Poppins', sans-serif;
}

.contact-form-main .form-group-contact input:focus,
.contact-form-main .form-group-contact textarea:focus {
    outline: none;
    border-color: #FA812F;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(250, 129, 47, 0.08), 0 8px 20px rgba(250, 129, 47, 0.12);
    transform: translateY(-2px);
}

.contact-form-main .form-group-contact textarea {
    resize: vertical;
    min-height: 150px;
}

.btn-contact-submit {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-contact-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-contact-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(250, 129, 47, 0.4);
}

.btn-contact-submit:hover::before {
    left: 0;
}

/* Map Container */
.map-container {
    margin-bottom: 30px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

/* Contact Details List */
.contact-details-list {
    margin-top: 30px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.detail-item:hover {
    background: #fff;
    box-shadow: 0 5px 20px rgba(250, 129, 47, 0.1);
}

.detail-item i {
    font-size: 28px;
    color: #FA812F;
    min-width: 28px;
}

.detail-item h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #2c3e50;
}

.detail-item p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

/* FAQ Contact Section */
.faq-contact-section {
    padding: 80px 0;
    background: #fff;
}

.faq-list {
    margin-top: 50px;
}

.faq-item {
    background: #fff;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 8px 35px rgba(250, 129, 47, 0.15);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    cursor: pointer;
    background: #fff;
    transition: all 0.3s ease;
}

.faq-item.active .faq-question {
    background: linear-gradient(135deg, rgba(250, 129, 47, 0.05) 0%, rgba(221, 3, 3, 0.05) 100%);
}

.faq-question h4 {
    font-size: 17px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
    flex: 1;
    padding-right: 20px;
}

.faq-question i {
    font-size: 18px;
    color: #FA812F;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-answer p {
    padding: 0 30px 25px;
    color: #6c757d;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .contact-hero-content h1 {
        font-size: 48px;
    }
    .contact-hero-content h1 span {
        font-size: 56px;
    }
}

@media (max-width: 767px) {
    .contact-hero-section {
        padding: 80px 0;
        min-height: 400px;
    }

    .contact-hero-content h1 {
        font-size: 38px;
    }

    .contact-hero-content h1 span {
        font-size: 46px;
    }

    .contact-hero-content p {
        font-size: 18px;
    }

    .contact-info-cards {
        margin-top: -60px;
        padding: 60px 0 30px;
    }

    .contact-form-box,
    .contact-map-box {
        padding: 35px 25px;
        margin-bottom: 30px;
    }

    .contact-form-box h2,
    .contact-map-box h2 {
        font-size: 26px;
    }

    .faq-question h4 {
        font-size: 15px;
    }

    .faq-question,
    .faq-answer p {
        padding: 20px;
    }
}

@media (max-width: 575px) {
    .contact-hero-content h1 {
        font-size: 32px;
    }

    .contact-hero-content h1 span {
        font-size: 38px;
    }

    .contact-hero-content p {
        font-size: 16px;
    }

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

    .contact-card-icon {
        width: 60px;
        height: 60px;
    }

    .contact-card-icon i {
        font-size: 28px;
    }
}

/* ===========================================
   QUAD TOURS PAGE STYLES
============================================ */

/* Quad Tours Hero Section */
.quad-tours-hero-section {
    background-image: url('../img/quads-buggy/quad-tour-merzouga-sahara-17.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 120px 0;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

.quad-tours-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.quad-tours-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.quad-tours-hero-content h1 {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.quad-tours-hero-content h1 span {
    display: block;
    font-size: 64px;
}

.quad-tours-hero-content p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
}

/* Tours Grid Section */
.tours-grid-section {
    padding: 100px 0;
    background: #f8f9fa;
}

.tours-grid-section .col-lg-4,
.tours-grid-section .col-md-6 {
    margin-bottom: 30px;
}

.tour-card-full {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.tour-card-full:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(250, 129, 47, 0.2);
}

.tour-card-full.featured-tour-card {
    box-shadow: 0 12px 45px rgba(250, 129, 47, 0.15);
    border: 2px solid rgba(250, 129, 47, 0.2);
}

.tour-image-full {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.tour-image-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tour-card-full:hover .tour-image-full img {
    transform: scale(1.1);
}

.tour-badge-full {
    position: absolute;
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    z-index: 2;
}

.tour-badge-full.duration {
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
}

.tour-badge-full.popular {
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    animation: pulse 2s infinite;
}

.tour-badge-full.best-value {
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    animation: pulse 2s infinite;
}

.tour-content-full {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tour-content-full h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #2c3e50;
    transition: all 0.3s ease;
}

.tour-card-full:hover .tour-content-full h3 {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tour-rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
}

.tour-rating i {
    color: #FFA500;
    font-size: 14px;
}

.tour-rating span {
    font-size: 13px;
    color: #6c757d;
    margin-left: 8px;
}

.tour-content-full > p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 25px;
}

.tour-footer-full {
    margin-top: auto;
}

.tour-buttons-group {
    display: flex;
    gap: 10px;
}

.btn-tour-primary,
.btn-tour-secondary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-tour-primary {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.3);
}

.btn-tour-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-tour-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(250, 129, 47, 0.4);
    color: #fff;
}

.btn-tour-primary:hover::before {
    left: 0;
}

.btn-tour-secondary {
    background: #fff;
    color: #FA812F;
    border: 2px solid #FA812F;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.btn-tour-secondary:hover {
    background: #FA812F;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(250, 129, 47, 0.25);
}

/* Custom Tour Card */
.custom-tour-card .tour-image-full {
    background: linear-gradient(135deg, rgba(250, 129, 47, 0.9) 0%, rgba(221, 3, 3, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-tour-icon {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: iconBounce 2s infinite;
}

.custom-tour-icon i {
    font-size: 50px;
    color: #fff;
}

.btn-custom-tour {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 15px 30px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-custom-tour::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-custom-tour:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(250, 129, 47, 0.4);
    color: #fff;
}

.btn-custom-tour:hover::before {
    left: 0;
}

/* Why Choose Quad Section */
.why-choose-quad-section {
    padding: 100px 0;
    background: #fff;
}

.feature-box-quad {
    text-align: center;
    padding: 40px 20px;
    border-radius: 15px;
    transition: all 0.4s ease;
    margin-bottom: 30px;
}

.feature-box-quad:hover {
    background: #f8f9fa;
    transform: translateY(-5px);
}

.feature-icon-quad {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

.feature-box-quad:hover .feature-icon-quad {
    transform: rotateY(360deg);
}

.feature-icon-quad i {
    font-size: 36px;
    color: #fff;
}

.feature-box-quad h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #2c3e50;
}

.feature-box-quad p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.7;
    margin: 0;
}

/* FAQ Quad Section */
.faq-quad-section {
    padding: 100px 0;
    background: #f8f9fa;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .quad-tours-hero-content h1 {
        font-size: 48px;
    }
    .quad-tours-hero-content h1 span {
        font-size: 56px;
    }
}

@media (max-width: 767px) {
    .quad-tours-hero-section {
        padding: 80px 0;
        min-height: 400px;
    }

    .quad-tours-hero-content h1 {
        font-size: 38px;
    }

    .quad-tours-hero-content h1 span {
        font-size: 46px;
    }

    .quad-tours-hero-content p {
        font-size: 18px;
    }

    .tours-grid-section {
        padding: 60px 0;
    }

    .tour-image-full {
        height: 220px;
    }

    .tour-content-full {
        padding: 25px;
    }

    .tour-content-full h3 {
        font-size: 20px;
    }

    .why-choose-quad-section,
    .faq-quad-section {
        padding: 60px 0;
    }
}

@media (max-width: 575px) {
    .quad-tours-hero-content h1 {
        font-size: 32px;
    }

    .quad-tours-hero-content h1 span {
        font-size: 38px;
    }

    .quad-tours-hero-content p {
        font-size: 16px;
    }

    .tour-image-full {
        height: 200px;
    }

    .tour-content-full {
        padding: 20px;
    }

    .tour-content-full h3 {
        font-size: 18px;
    }

    .tour-buttons-group {
        flex-direction: column;
        gap: 8px;
    }

    .btn-tour-primary,
    .btn-tour-secondary {
        padding: 12px 16px;
        font-size: 13px;
    }

    .btn-custom-tour {
        padding: 12px 20px;
        font-size: 14px;
    }

    .feature-icon-quad {
        width: 60px;
        height: 60px;
    }

    .feature-icon-quad i {
        font-size: 28px;
    }
}

/* ===========================================
   BUGGY TOURS PAGE STYLES
============================================ */

/* Buggy Tours Hero Section */
.buggy-tours-hero-section {
    background-image: url('../img/quads-buggy/buggy-aventura-merzouga-12.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 120px 0;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

.buggy-tours-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.buggy-tours-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.buggy-tours-hero-content h1 {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.buggy-tours-hero-content h1 span {
    display: block;
    font-size: 64px;
}

.buggy-tours-hero-content p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
}

/* Why Choose Buggy Section */
.why-choose-buggy-section {
    padding: 100px 0;
    background: #fff;
}

.feature-box-buggy {
    text-align: center;
    padding: 40px 20px;
    border-radius: 15px;
    transition: all 0.4s ease;
    margin-bottom: 30px;
}

.feature-box-buggy:hover {
    background: #f8f9fa;
    transform: translateY(-5px);
}

.feature-icon-buggy {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #DD0303 0%, #8B0000 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

.feature-box-buggy:hover .feature-icon-buggy {
    transform: rotateY(360deg);
}

.feature-icon-buggy i {
    font-size: 36px;
    color: #fff;
}

.feature-box-buggy h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #2c3e50;
}

.feature-box-buggy p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.7;
    margin: 0;
}

/* FAQ Buggy Section */
.faq-buggy-section {
    padding: 100px 0;
    background: #f8f9fa;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .buggy-tours-hero-content h1 {
        font-size: 48px;
    }
    .buggy-tours-hero-content h1 span {
        font-size: 56px;
    }
}

@media (max-width: 767px) {
    .buggy-tours-hero-section {
        padding: 80px 0;
        min-height: 400px;
    }

    .buggy-tours-hero-content h1 {
        font-size: 38px;
    }

    .buggy-tours-hero-content h1 span {
        font-size: 46px;
    }

    .buggy-tours-hero-content p {
        font-size: 18px;
    }

    .why-choose-buggy-section,
    .faq-buggy-section {
        padding: 60px 0;
    }
}

@media (max-width: 575px) {
    .buggy-tours-hero-content h1 {
        font-size: 32px;
    }

    .buggy-tours-hero-content h1 span {
        font-size: 38px;
    }

    .buggy-tours-hero-content p {
        font-size: 16px;
    }

    .feature-icon-buggy {
        width: 60px;
        height: 60px;
    }

    .feature-icon-buggy i {
        font-size: 28px;
    }
}

/* ===========================================
   HOTEL-RIAD PAGE STYLES
============================================ */

/* Hotel Hero Section */
.hotel-hero-section {
    background-image: url('../img/Marrakechsaharatour-Hotel-Kasbah-Azalay-Merzouga.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 120px 0;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

.hotel-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.hotel-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.hotel-hero-content h1 {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hotel-hero-content h1 span {
    display: block;
    font-size: 64px;
}

.hotel-hero-content p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
}

/* Hotel Introduction Section */
.hotel-intro-section {
    padding: 100px 0;
    background: #fff;
}

.hotel-intro-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.hotel-intro-image img {
    width: 100%;
    height: auto;
    display: block;
}

.hotel-badge-float {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    padding: 15px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    box-shadow: 0 5px 20px rgba(250, 129, 47, 0.4);
}

.hotel-badge-float i {
    font-size: 20px;
}

.hotel-intro-text {
    padding-left: 40px;
}

.hotel-label {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.hotel-intro-text h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 25px;
    color: #2c3e50;
}

.hotel-intro-text h2 span {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hotel-intro-text p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 15px;
}

.highlight-text {
    font-size: 16px;
    font-weight: 600;
    color: #FA812F;
    margin-top: 20px;
}

.hotel-features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 30px 0;
}

.feature-item-small {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #495057;
}

.feature-item-small i {
    color: #28a745;
    font-size: 18px;
}

.btn-hotel-book {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 35px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(250, 129, 47, 0.3);
    margin-top: 20px;
}

.btn-hotel-book:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(250, 129, 47, 0.4);
    color: #fff;
}

/* Hotel Amenities Section */
.hotel-amenities-section {
    padding: 100px 0;
    background: #f8f9fa;
}

.hotel-amenities-section .col-lg-3,
.hotel-amenities-section .col-md-6 {
    display: flex;
}

.amenity-card {
    background: #fff;
    padding: 40px 25px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.4s ease;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 240px;
}

.amenity-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 35px rgba(250, 129, 47, 0.15);
}

.amenity-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

.amenity-card:hover .amenity-icon {
    transform: rotateY(360deg);
}

.amenity-icon i {
    font-size: 30px;
    color: #fff;
}

.amenity-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #2c3e50;
    flex-shrink: 0;
}

.amenity-card p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
    line-height: 1.6;
    flex-grow: 1;
}

/* Rooms Preview Section */
.rooms-preview-section {
    padding: 100px 0;
    background: #fff;
}

.rooms-preview-section .col-lg-4,
.rooms-preview-section .col-md-6 {
    display: flex;
}

.room-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.room-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(250, 129, 47, 0.2);
}

.room-card.featured-room {
    border: 2px solid rgba(250, 129, 47, 0.3);
}

.room-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    z-index: 2;
}

.room-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

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

.room-card:hover .room-image img {
    transform: scale(1.1);
}

.room-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.room-content h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #2c3e50;
    flex-shrink: 0;
}

.room-features {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.room-features span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #6c757d;
}

.room-features i {
    color: #FA812F;
}

.room-content p {
    font-size: 14px;
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;
}

.btn-room-book {
    display: inline-block;
    padding: 12px 25px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
    align-self: flex-start;
}

.btn-room-book:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(250, 129, 47, 0.3);
    color: #fff;
}

.btn-view-all-rooms {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 45px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 5px 20px rgba(250, 129, 47, 0.3);
    margin-top: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-view-all-rooms::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #DD0303 0%, #FA812F 100%);
    transition: all 0.4s ease;
    z-index: -1;
}

.btn-view-all-rooms:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(250, 129, 47, 0.4);
    color: #fff;
}

.btn-view-all-rooms:hover::before {
    left: 0;
}

.btn-view-all-rooms i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.btn-view-all-rooms:hover i {
    transform: scale(1.1);
}

/* Location Section */
.hotel-location-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

.location-content {
    padding-right: 30px;
}

.location-content .hotel-label {
    animation: fadeInDown 0.6s ease;
}

.location-content h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 25px;
    color: #2c3e50;
    animation: fadeInUp 0.6s ease 0.2s backwards;
}

.location-content h2 span {
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.location-content > p {
    font-size: 16px;
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 30px;
    animation: fadeInUp 0.6s ease 0.4s backwards;
}

.location-highlights {
    margin-top: 40px;
}

.location-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px 30px;
    background: #fff;
    border-radius: 15px;
    margin-bottom: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-left: 4px solid transparent;
    animation: fadeInLeft 0.6s ease backwards;
}

.location-item:nth-child(1) {
    animation-delay: 0.5s;
}

.location-item:nth-child(2) {
    animation-delay: 0.6s;
}

.location-item:nth-child(3) {
    animation-delay: 0.7s;
}

.location-item:hover {
    box-shadow: 0 10px 35px rgba(250, 129, 47, 0.15);
    transform: translateX(10px);
    border-left-color: #FA812F;
}

.location-item i {
    font-size: 32px;
    color: #FA812F;
    margin-top: 5px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(250, 129, 47, 0.1) 0%, rgba(221, 3, 3, 0.1) 100%);
    border-radius: 10px;
    flex-shrink: 0;
}

.location-item h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #2c3e50;
}

.location-item p {
    font-size: 15px;
    color: #6c757d;
    margin: 0;
}

.location-map {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    animation: fadeInRight 0.8s ease 0.5s backwards;
    transition: all 0.4s ease;
}

.location-map:hover {
    box-shadow: 0 20px 60px rgba(250, 129, 47, 0.2);
    transform: translateY(-5px);
}

/* Why Choose Hotel Section */
.why-choose-hotel-section {
    padding: 100px 0;
    background: #fff;
}

.why-hotel-card {
    text-align: center;
    padding: 40px 30px;
    border-radius: 15px;
    transition: all 0.4s ease;
    margin-bottom: 30px;
}

.why-hotel-card:hover {
    background: #f8f9fa;
    transform: translateY(-5px);
}

.why-hotel-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

.why-hotel-card:hover .why-hotel-icon {
    transform: rotateY(360deg);
}

.why-hotel-icon i {
    font-size: 36px;
    color: #fff;
}

.why-hotel-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #2c3e50;
}

.why-hotel-card p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.7;
    margin: 0;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .hotel-hero-content h1 {
        font-size: 48px;
    }
    .hotel-hero-content h1 span {
        font-size: 56px;
    }
    .hotel-intro-text {
        padding-left: 0;
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .hotel-hero-section {
        padding: 80px 0;
        min-height: 400px;
    }

    .hotel-hero-content h1 {
        font-size: 38px;
    }

    .hotel-hero-content h1 span {
        font-size: 46px;
    }

    .hotel-hero-content p {
        font-size: 18px;
    }

    .hotel-intro-section,
    .hotel-amenities-section,
    .rooms-preview-section,
    .hotel-location-section,
    .why-choose-hotel-section {
        padding: 60px 0;
    }

    .hotel-intro-text h2 {
        font-size: 32px;
    }

    .hotel-features-list {
        grid-template-columns: 1fr;
    }

    .location-content {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .location-content h2 {
        font-size: 32px;
    }

    .amenity-card {
        min-height: 220px;
    }

    .location-item {
        padding: 20px 25px;
    }

    .location-item i {
        font-size: 28px;
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 575px) {
    .hotel-hero-content h1 {
        font-size: 32px;
    }

    .hotel-hero-content h1 span {
        font-size: 38px;
    }

    .hotel-hero-content p {
        font-size: 16px;
    }

    .hotel-intro-text h2 {
        font-size: 28px;
    }

    .amenity-icon,
    .why-hotel-icon {
        width: 60px;
        height: 60px;
    }

    .amenity-icon i,
    .why-hotel-icon i {
        font-size: 26px;
    }

    .room-image {
        height: 200px;
    }

    .room-content {
        padding: 20px;
    }

    .amenity-card {
        min-height: 200px;
        padding: 30px 20px;
    }

    .btn-view-all-rooms {
        padding: 15px 35px;
        font-size: 15px;
    }

    .location-content h2 {
        font-size: 26px;
    }

    .location-item {
        padding: 18px 20px;
        gap: 15px;
    }

    .location-item i {
        font-size: 24px;
        width: 32px;
        height: 32px;
    }

    .location-item h4 {
        font-size: 16px;
    }

    .location-item p {
        font-size: 14px;
    }
}

/* ===========================================
   CAMPING SAHARA PAGE STYLES
============================================ */

/* Camp Hero Section */
.camp-hero-section {
    background-image: url('../img/quads-buggy/buggy-dunas-sahara-alquiler-10.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 120px 0;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

.camp-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.camp-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.camp-hero-content h1 {
    font-size: 56px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.camp-hero-content h1 span {
    display: block;
    font-size: 64px;
}

.camp-hero-content p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
}

/* Camp Introduction Section */
.camp-intro-section {
    padding: 100px 0;
    background: #fff;
}

.camp-intro-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.camp-intro-image img {
    width: 100%;
    height: auto;
    display: block;
}

.camp-badge-float {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #DD0303 0%, #8B0000 100%);
    color: #fff;
    padding: 15px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    box-shadow: 0 5px 20px rgba(221, 3, 3, 0.4);
}

.camp-badge-float i {
    font-size: 20px;
}

.camp-intro-text {
    padding-left: 40px;
}

.camp-label {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, #DD0303 0%, #8B0000 100%);
    color: #fff;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.camp-intro-text h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 25px;
    color: #2c3e50;
}

.camp-intro-text h2 span {
    background: linear-gradient(135deg, #DD0303 0%, #8B0000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.camp-intro-text p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 15px;
}

.highlight-text-camp {
    font-size: 16px;
    font-weight: 600;
    color: #DD0303;
    margin-top: 20px;
}

.camp-features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 30px 0;
}

.feature-item-camp {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #495057;
}

.feature-item-camp i {
    color: #28a745;
    font-size: 18px;
}

.btn-camp-book {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 35px;
    background: linear-gradient(135deg, #DD0303 0%, #8B0000 100%);
    color: #fff;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(221, 3, 3, 0.3);
    margin-top: 20px;
}

.btn-camp-book:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(221, 3, 3, 0.4);
    color: #fff;
}

/* Camp Features Section */
.camp-features-section {
    padding: 100px 0;
    background: #fff;
}

.camp-feature-card {
    text-align: center;
    padding: 40px 30px;
    border-radius: 15px;
    transition: all 0.4s ease;
    margin-bottom: 30px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.camp-feature-card:hover {
    background: #f8f9fa;
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(221, 3, 3, 0.15);
}

.camp-feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #DD0303 0%, #8B0000 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

.camp-feature-card:hover .camp-feature-icon {
    transform: rotateY(360deg);
}

.camp-feature-icon i {
    font-size: 36px;
    color: #fff;
}

.camp-feature-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #2c3e50;
}

.camp-feature-card p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.7;
    margin: 0;
}

/* What to Bring Section */
.what-to-bring-section {
    padding: 100px 0;
    background: #f8f9fa;
}

.bring-list {
    background: #fff;
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.bring-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.bring-item:last-child {
    border-bottom: none;
}

.bring-item:hover {
    background: #f8f9fa;
    padding-left: 30px;
}

.bring-item i {
    font-size: 20px;
    color: #28a745;
    min-width: 20px;
}

.bring-item span {
    font-size: 15px;
    color: #495057;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .camp-hero-content h1 {
        font-size: 48px;
    }
    .camp-hero-content h1 span {
        font-size: 56px;
    }
    .camp-intro-text {
        padding-left: 0;
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .camp-hero-section {
        padding: 80px 0;
        min-height: 400px;
    }

    .camp-hero-content h1 {
        font-size: 38px;
    }

    .camp-hero-content h1 span {
        font-size: 46px;
    }

    .camp-hero-content p {
        font-size: 18px;
    }

    .camp-intro-section,
    .camp-features-section,
    .what-to-bring-section {
        padding: 60px 0;
    }

    .camp-intro-text h2 {
        font-size: 32px;
    }

    .camp-features-list {
        grid-template-columns: 1fr;
    }

    .bring-list {
        padding: 30px 20px;
    }
}

@media (max-width: 575px) {
    .camp-hero-content h1 {
        font-size: 32px;
    }

    .camp-hero-content h1 span {
        font-size: 38px;
    }

    .camp-hero-content p {
        font-size: 16px;
    }

    .camp-intro-text h2 {
        font-size: 28px;
    }

    .camp-feature-icon {
        width: 60px;
        height: 60px;
    }

    .camp-feature-icon i {
        font-size: 28px;
    }

    .bring-item {
        padding: 15px;
    }
}

/* ===========================================
   TOUR DETAIL PAGE STYLES
============================================ */

/* Tour Detail Hero */
.tour-detail-hero {
    background-image: url('../img/quads-buggy/quad-atv-alquiler-sahara-15.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 120px 0;
    min-height: 500px;
    display: flex;
    align-items: center;
    position: relative;
}

.tour-detail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.tour-detail-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.tour-badge-hero {
    display: inline-block;
    padding: 10px 25px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.tour-detail-hero-content h1 {
    font-size: 52px;
    color: #fff;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 4px 30px #000000, 0 2px 10px rgba(0, 0, 0, 0.5);
}

.tour-detail-hero-content p {
    font-size: 20px;
    margin-bottom: 30px;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
}

.tour-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.tour-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Tour Overview Section */
.tour-overview-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.tour-main-content {
    background: #fff;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.tour-section-block {
    margin-bottom: 50px;
}

.tour-section-block:last-child {
    margin-bottom: 0;
}

.tour-section-block h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 25px;
    color: #2c3e50;
    position: relative;
    padding-bottom: 15px;
}

.tour-section-block h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
}

.tour-section-block p {
    font-size: 15px;
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 15px;
}

/* Highlight List */
.highlight-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.highlight-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    margin-bottom: 10px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.highlight-list li:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(250, 129, 47, 0.1);
    transform: translateX(10px);
}

.highlight-list li i {
    color: #28a745;
    font-size: 20px;
    margin-top: 2px;
}

/* Itinerary List */
.itinerary-list {
    position: relative;
}

.itinerary-item {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
    position: relative;
}

.itinerary-item::before {
    content: '';
    position: absolute;
    left: 45px;
    top: 50px;
    bottom: -30px;
    width: 2px;
    background: linear-gradient(to bottom, #FA812F, #DD0303);
}

.itinerary-item:last-child::before {
    display: none;
}

.itinerary-time {
    min-width: 90px;
    height: 50px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(250, 129, 47, 0.3);
    flex-shrink: 0;
}

.itinerary-content {
    flex: 1;
    background: #f8f9fa;
    padding: 25px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.itinerary-content:hover {
    background: #fff;
    box-shadow: 0 5px 20px rgba(250, 129, 47, 0.1);
}

.itinerary-content h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #2c3e50;
}

.itinerary-content p {
    font-size: 14px;
    color: #6c757d;
    line-height: 1.7;
    margin: 0;
}

/* Included/Excluded */
.included-excluded {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.included h4,
.excluded h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.included h4 {
    color: #28a745;
}

.excluded h4 {
    color: #dc3545;
}

.included h4 i,
.excluded h4 i {
    font-size: 24px;
}

.included ul,
.excluded ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.included ul li,
.excluded ul li {
    padding: 12px 0;
    font-size: 14px;
    color: #495057;
    border-bottom: 1px solid #e0e0e0;
}

.included ul li:last-child,
.excluded ul li:last-child {
    border-bottom: none;
}

/* Important Info */
.important-info {
    display: grid;
    gap: 20px;
}

.info-item {
    display: flex;
    gap: 20px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.info-item:hover {
    background: #fff;
    box-shadow: 0 5px 20px rgba(250, 129, 47, 0.1);
}

.info-item i {
    font-size: 28px;
    color: #FA812F;
    flex-shrink: 0;
}

.info-item h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #2c3e50;
}

.info-item p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

/* Tour Sidebar */
.tour-sidebar {
    position: sticky;
    top: 100px;
}

.booking-widget,
.why-book-widget,
.contact-widget {
    background: #fff;
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.booking-widget h3,
.why-book-widget h4,
.contact-widget h4 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 25px;
    color: #2c3e50;
    text-align: center;
}

.tour-info-item {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
}

.tour-info-item:last-of-type {
    border-bottom: none;
    margin-bottom: 25px;
}

.tour-info-item .label {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

.tour-info-item .value {
    font-size: 14px;
    color: #2c3e50;
    font-weight: 700;
}

.btn-book-now {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #FA812F 0%, #DD0303 100%);
    color: #fff;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 5px 20px rgba(250, 129, 47, 0.3);
    margin-bottom: 15px;
}

.btn-book-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(250, 129, 47, 0.4);
    color: #fff;
}

.booking-note {
    font-size: 12px;
    color: #6c757d;
    text-align: center;
    margin: 0;
}

.why-book-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.why-book-widget ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 14px;
    color: #495057;
}

.why-book-widget ul li i {
    color: #28a745;
    font-size: 16px;
}

.contact-widget {
    text-align: center;
}

.contact-widget p {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 20px;
}

.btn-whatsapp-widget,
.btn-call-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 12px;
}

.btn-whatsapp-widget {
    background: #25D366;
    color: #fff;
}

.btn-whatsapp-widget:hover {
    background: #1fb855;
    transform: translateY(-2px);
    color: #fff;
}

.btn-call-widget {
    background: #fff;
    color: #FA812F;
    border: 2px solid #FA812F;
}

.btn-call-widget:hover {
    background: #FA812F;
    color: #fff;
    transform: translateY(-2px);
}

/* Responsive Styles */
@media (max-width: 991px) {
    .tour-sidebar {
        position: static;
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .tour-detail-hero {
        padding: 80px 0;
        min-height: 400px;
    }

    .tour-detail-hero-content h1 {
        font-size: 36px;
    }

    .tour-detail-hero-content p {
        font-size: 16px;
    }

    .tour-meta {
        gap: 15px;
    }

    .tour-meta span {
        font-size: 13px;
        padding: 8px 15px;
    }

    .tour-main-content {
        padding: 30px 25px;
    }

    .tour-section-block h2 {
        font-size: 26px;
    }

    .included-excluded {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .itinerary-item {
        flex-direction: column;
        gap: 15px;
    }

    .itinerary-item::before {
        display: none;
    }
}

@media (max-width: 575px) {
    .tour-detail-hero-content h1 {
        font-size: 28px;
    }

    .tour-badge-hero {
        font-size: 12px;
        padding: 8px 20px;
    }

    .tour-main-content {
        padding: 25px 20px;
    }

    .tour-section-block {
        margin-bottom: 40px;
    }

    .tour-section-block h2 {
        font-size: 22px;
    }

    .itinerary-time {
        min-width: 70px;
        height: 40px;
        font-size: 14px;
    }

    .itinerary-content {
        padding: 20px;
    }

    .itinerary-content h4 {
        font-size: 16px;
    }

    .booking-widget,
    .why-book-widget,
    .contact-widget {
        padding: 25px 20px;
    }
}