@charset "UTF-8";

/*------------------------------------------------------------------
* Project:        Tawaf Travel - Travel Tour Booking HTML Templates
* Author:         bizberg_themes
* URL:            https://themeforest.net/user/bizberg_themes
* Created:        06/27/2022
-------------------------------------------------------------------
*/
/* ========================================= */
/*          Default CSS                      */
/* ========================================= */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&display=swap");
header,
nav,
section,
article,
aside,
footer {
  display: block; }

* {
  margin: 0;
  padding: 0; }

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
  font-weight: 400;
  color: #777;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat; }
  




h1 {
  font-size: 58px; }

h2 {
  font-size: 46px; }

h3 {
  font-size: 26px; }

h4 {
  font-size: 22px; }

h5 {
  font-size: 18px; }

h6 {
  font-size: 16px; }

@media (max-width: 991px) {
  h1 {
    font-size: 48px; }

  h2 {
    font-size: 36px; } }
@media (max-width: 735px) {
  h1 {
    font-size: 38px; }

  h2 {
    font-size: 28px; }

  h3 {
    font-size: 21px; } }
p {
  margin-bottom: 8px; }







ul {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  ul li {
    margin-bottom: 0px;
    line-height: 1.5;
    color: #777;
    position: relative;
    display: inline-block;
    padding: 0; }

ol {
  margin: 0;
  counter-reset: i;
  position: relative; }
  ol li {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.5;
    color: #777;
    padding-left: 0;
    position: relative; }

a {
  color: #777;
  transition: all ease-in-out 0.5s;
  cursor: pointer;
  text-decoration: none; }
  a:hover, a:focus {
    text-decoration: none;
    color: #059d9c;
    transition: all ease-in-out 0.5s;
    outline: none; }

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color: #059d9c !important; }

::-webkit-input-placeholder {
  /* Edge */
  color: #777 !important; }

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #777 !important; }

input::placeholder {
  color: #777 !important; }

.row [class*="col-"] {
  padding: 0 15px; }

img {
  max-width: 100%; }

.btn-info.focus, .btn-info:focus, .btn-info:active {
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important; }

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

@media (max-width: 767px) {
  .container, .container-sm {
    max-width: 100%; } }
.border {
  border-color: #f1f1f1 !important; }

.before-none::before {
  display: none !important; }

.white {
  color: #fff !important; }

.theme {
  color: #059d9c !important; }

.theme1 {
  color: #c59548 !important; }

.theme2 {
  color: #101011 !important; }

.black {
  color: #3f3f3f !important; }

.grey {
  color: #777 !important; }

.title {
  color: #101011 !important; }

.bg-grey {
  background: #f1f1f1 !important; }

.bg-lgrey {
  background: #fdfdfd !important; }

.bg-theme {
  background: #059d9c !important; }

.bg-theme1 {
  background: #c59548 !important; }

.bg-theme2 {
  background: #088dd1 !important; }

.bg-title {
  background: #101011 !important; }

.bg-fblack {
  background: #000000 !important; }

.bg-white {
  background: #fff !important; }

.bordernone {
  border: none !important; }

.border-b {
  border-bottom: 1px dashed #f1f1f1 !important; }

.border-all {
  border: 1px solid #f1f1f1 !important; }

.border-end {
  border-right: 1px solid #f1f1f1 !important; }

.rating span {
  color: #ffbc00;
  display: inline;
  font-size: 14px; }

.small, small {
  font-size: 85%; }

.mt-1, .my-1 {
  margin-top: 0.5rem !important; }

.mt-2, .my-2 {
  margin-top: 1rem !important; }

.mt-3, .my-3 {
  margin-top: 1.5rem !important; }

.mt-4, .my-4 {
  margin-top: 2rem !important; }

.mt-5, .my-5 {
  margin-top: 2.5rem !important; }

.mt-6, .my-6 {
  margin-top: 3rem !important; }

.mt-7, .my-7 {
  margin-top: 3.5rem !important; }

.mt-8, .my-8 {
  margin-top: 4rem !important; }

.mt-9, .my-9 {
  margin-top: 4.5rem !important; }

.mt-10, .my-10 {
  margin-top: 5rem !important; }

.mt-minus {
  margin-top: -5rem !important; }

.mb-1, .my-1 {
  margin-bottom: 0.5rem !important; }

.mb-2, .my-2 {
  margin-bottom: 1rem !important; }

.mb-3, .my-3 {
  margin-bottom: 1.5rem !important; }

.mb-4, .my-4 {
  margin-bottom: 2rem !important; }

.mb-5, .my-5 {
  margin-bottom: 2.5rem !important; }

.mb-6, .my-6 {
  margin-bottom: 3rem !important; }

.mb-7, .my-7 {
  margin-bottom: 3.5rem !important; }

.mb-8, .my-8 {
  margin-bottom: 4rem !important; }

.mb-9, .my-9 {
  margin-bottom: 4.5rem !important; }

.mb-10, .my-10 {
  margin-bottom: 5rem !important; }

.mb-minus {
  margin-bottom: -5rem !important; }

.pt-1, .py-1 {
  padding-top: 0.5rem !important; }

.pt-2, .py-2 {
  padding-top: 1rem !important; }

.pt-3, .py-3 {
  padding-top: 1.5rem !important; }

.pt-4, .py-4 {
  padding-top: 2rem !important; }

.pt-5, .py-5 {
  padding-top: 2.5rem !important; }

.pt-6, .py-6 {
  padding-top: 3rem !important; }

.pt-7, .py-7 {
  padding-top: 3.5rem !important; }

.pt-8, .py-8 {
  padding-top: 4rem !important; }

.pt-9, .py-9 {
  padding-top: 4.5rem !important; }

.pt-10, .py-10 {
  padding-top: 5rem !important; }

.pt-14, .py-14 {
  padding-top: 7rem !important; }

.pt-17, .py-17 {
  padding-top: 8.5rem !important; }

.pt-18, .py-18 {
  padding-top: 9rem !important; }

.pt-19, .py-19 {
  padding-top: 9.5rem !important; }

.pt-20, .py-20 {
  padding-top: 10rem !important; }

.pt-lg-7, .py-lg-7 {
  padding-top: 3.5rem !important; }

.pb-1, .py-1 {
  padding-bottom: 0.5rem !important; }

.pb-2, .py-2 {
  padding-bottom: 1rem !important; }

.pb-3, .py-3 {
  padding-bottom: 1.5rem !important; }

.pb-4, .py-4 {
  padding-bottom: 2rem !important; }

.pb-5, .py-5 {
  padding-bottom: 2.5rem !important; }

.pb-6, .py-6 {
  padding-bottom: 3rem !important; }

.pb-7, .py-7 {
  padding-bottom: 3.5rem !important; }

.pb-8, .py-8 {
  padding-bottom: 4rem !important; }

.pb-9, .py-9 {
  padding-bottom: 4.5rem !important; }

.pb-10, .py-10 {
  padding-bottom: 5rem !important; }

.pb-14, .py-14 {
  padding-bottom: 7rem !important; }

.pb-17, .py-17 {
  padding-bottom: 8.5rem !important; }

.pb-18, .py-18 {
  padding-bottom: 9rem !important; }

.pb-19, .py-19 {
  padding-bottom: 9.5rem !important; }

.pb-20, .my-20 {
  padding-bottom: 10rem !important; }

.pb-lg-7, .py-lg-7 {
  padding-bottom: 3.5rem !important; }

.top-minus-20 {
  top: -20px !important; }

.top-minus-40 {
  top: -40px !important; }

.top-inherit {
  top: inherit !important; }

.bottom-inherit {
  bottom: inherit !important; }

.translatey-50 {
  transform: translateY(-50%); }

.z-index1 {
  z-index: 1; }

.z-index2 {
  z-index: 2; }

.z-index3 {
  z-index: 4; }

.form-group {
  width: 100%;
  display: inline-block; }

input[type=text], input[type=email], input[type=number], input[type=search],
input[type=password], input[type=tel], input[type=date], input[type=time], textarea, select {
  font-size: 15px;
  font-weight: 300;
  background-color: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  padding: 12px 20px;
  color: #777;
  margin-bottom: 0;
  height: 50px;
  box-shadow: none;
  width: 100%; }
  input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, input[type=search]:focus,
  input[type=password]:focus, input[type=tel]:focus, input[type=date]:focus, input[type=time]:focus, textarea:focus, select:focus {
    outline: none;
    transition: all 0.5s ease;
    box-shadow: none; }

select {
  width: 100%;
  height: inherit; }
  select option {
    color: #3f3f3f; }

textarea {
  border-radius: none;
  resize: vertical;
  height: 120px; }

label {
  display: inline-block;
  color: #777;
  margin-bottom: 8px;
  font-weight: 400;
  font-size: 15px; }
  

blockquote {
  font-size: 14px;
  font-weight: 400;
  background-color: #059d9c;
  margin-bottom: 15px;
  border: 0;
  padding: 30px 70px 30px 70px;
  line-height: 1.5;
  color: #fff;
  margin: 20 0;
  font-style: italic;
  position: relative; }
  blockquote :after {
    content: '';
    position: absolute;
    height: 60%;
    width: 2px;
    background: #fff;
    top: 20%;
    left: 35px; }
  blockquote p {
    color: #fff;
    margin: 0; }
  blockquote :before {
    content: '\f10d';
    font-family: 'fontawesome';
    font-size: 45px;
    position: absolute;
    bottom: 26px;
    right: 20px;
    color: #fff;
    transform: rotate(180deg); }
  blockquote span {
    position: relative;
    padding-left: 20px; }
    blockquote span :before {
      content: '';
      width: 12px;
      height: 1px;
      background: #059d9c;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -2px; }

table > tbody tr td, table > tbody tr th, table > tfoot tr td, table > tfoot tr th, table > thead tr td, table > thead tr th {
  padding: 10px;
  vertical-align: sub !important;
  border: 1px solid #f1f1f1; }
table > tbody tr:nth-child(even), table > tfoot tr:nth-child(even), table > thead tr:nth-child(even) {
  background: #fdfdfd; }

table {
  width: 100%; }
  table thead tr th {
    border-bottom: none !important; }

.overlay, .dot-overlay, .color-overlay, .white-overlay, .left-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  transition: all ease-in-out 0.5s;
  opacity: 0.5; }

.dot-overlay {
  background: #000000 url(../images/dot-overlay.png) repeat;
  opacity: 0.6; }

.color-overlay {
  top: inherit;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, #000000);
  height: 50%;
  opacity: 0.6; }

.left-overlay {
  background: linear-gradient(to left, transparent, #fff);
  height: 100%;
  opacity: 1; }

@media (max-width: 639px) {
  .color-overlay {
    height: 100%;
    opacity: 0.4;
    background: #000000; } }
.white-overlay {
  background: #fdfdfd;
  opacity: 0.5; }

section {
  padding: 4.5rem 0 5rem;
  position: relative; }

/*heading title*/
.section-title, .section-title-w, .section-title-l {
  position: relative;
  z-index: 1; }
  .section-title h2, .section-title-w h2, .section-title-l h2 {
    position: relative;
    line-height: 1.2; }

.section-title-w:before {
  border-color: #fff !important; }
.section-title-w h2 span {
  color: #088dd1; }

.section-title-l:before {
  left: 0;
  right: inherit; }

@media (max-width: 991px) {
  .section-title {
    width: 100% !important; } }
@media (max-width: 767px) {
  .section-title {
    width: 100% !important;
    text-align: center !important; }
    .section-title::before {
      left: 0;
      right: 0; } }
.row.slick-slider {
  margin: 0 -15px; }

iframe {
  width: 100%;
  border: none; }

.border-t {
  border-top: 2px dashed #cccccc5e; }

.box-shadow {
  box-shadow: 0 0 15px #cccccc37; }

.rounded {
  border-radius: 10px !important; }

.rounded-start {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important; }

.rounded-top {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important; }

.nav-tabs {
  border-bottom: none;
  background: #fff;
  overflow: hidden;
  margin-bottom: 30px; }
  .nav-tabs > li.nav-item {
    margin: 0 4px; }
    .nav-tabs > li.nav-item button {
      border-radius: 10px;
      padding: 15px;
      margin: 0;
      line-height: inherit;
      border: 1px solid #f1f1f1;
      display: inline-block;
      width: 100%; }
      .nav-tabs > li.nav-item button:hover {
        color: #fff !important;
        border-color: #059d9c;
        background: #059d9c; }
    .nav-tabs > li.nav-item button.active {
      color: #fff !important;
      border-color: #059d9c;
      background: #059d9c; }
      .nav-tabs > li.nav-item button.active:hover {
        color: #fff !important;
        border-color: #059d9c;
        background: #059d9c; }

@media (max-width: 991px) {
  .nav-tabs {
    width: 100% !important; } }
@media (max-width: 767px) {
  .nav-tabs > li.nav-item {
    margin: 0 4px 4px; } }
/*pagination*/
.pagination-main {
  line-height: 0.8; }
  .pagination-main .pagination {
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block; }
    .pagination-main .pagination li {
      padding-left: 0;
      padding-bottom: 0;
      margin-bottom: 0; }
      .pagination-main .pagination li:before, .pagination-main .pagination li:after {
        display: none; }
      .pagination-main .pagination li a {
        padding: 0;
        height: 40px;
        line-height: 38px;
        margin-right: 9px;
        text-align: center;
        width: 40px;
        color: #3f3f3f;
        font-size: 14px;
        border: 1px solid #f1f1f1;
        display: inline-block;
        background: #fdfdfd;
        background: #fff;
        border-radius: 10px; }
        .pagination-main .pagination li a:hover, .pagination-main .pagination li a:focus {
          background-color: #059d9c;
          color: #fff !important;
          border-color: #059d9c; }
      .pagination-main .pagination li:last-child > a, .pagination-main .pagination li:last-child > span {
        border-radius: none;
        margin: 0; }
    .pagination-main .pagination li.active a {
      background: #059d9c !important;
      border-color: #059d9c !important;
      color: #fff; }
    .pagination-main .pagination .prev a, .pagination-main .pagination .next a {
      border-radius: 0px; }

@media (max-width: 567px) {
  .pagination li a {
    height: 30px;
    width: 30px;
    line-height: 28px; } }
@media (max-width: 359px) {
  .pagination li a {
    height: 28px;
    width: 28px;
    line-height: 28px; } }
.fade:not(.show) {
  opacity: 1; }

/*breadcrumb*/
.breadcrumb-main {
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  background-attachment: fixed;
  position: relative; }
  .breadcrumb-main .breadcrumb-outer {
    background: transparent;
    position: relative;
    z-index: 1; }
    .breadcrumb-main .breadcrumb-outer:before {
      display: none; }
    .breadcrumb-main .breadcrumb-outer .breadcrumb-content, .breadcrumb-main .breadcrumb-outer .bread-content {
      position: relative;
      text-align: center;
      justify-content: center;
      z-index: 1; }
      .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1, .breadcrumb-main .breadcrumb-outer .bread-content h1 {
        color: #fff;
        text-transform: uppercase;
        line-height: 0.6; }
    .breadcrumb-main .breadcrumb-outer .bread-content nav {
      left: 0;
      right: 0; }

.breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
  display: inline-block; }
  .breadcrumb li, .breadcrumb li.active {
    margin-bottom: 0;
    color: #fff; }
    .breadcrumb li a, .breadcrumb li.active a {
      color: #059d9c; }
  .breadcrumb .breadcrumb-item + .breadcrumb-item:before {
    content: '|';
    color: #fff; }

@media (max-width: 991px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content {
    display: block !important;
    text-align: center !important; }
    .breadcrumb-main .breadcrumb-outer .breadcrumb-content nav {
      right: 0;
      margin: 0; }
    .breadcrumb-main .breadcrumb-outer .breadcrumb-content h2 {
      margin: 0 !important; }
    .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
      font-size: 44px; }

  .cover-content {
    margin-bottom: 2rem; } }
@media (max-width: 811px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
    font-size: 36px; }

  .page-cover h1 {
    font-size: 36px; }
  .page-cover .author-detail {
    display: block !important; } }
@media (max-width: 639px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
    font-size: 28px; }

  .page-cover h1 {
    font-size: 28px; } }
@media (max-width: 479px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content {
    text-align: center; }
    .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
      font-size: 24px; }
    .breadcrumb-main .breadcrumb-outer .breadcrumb-content h2 {
      display: block;
      font-size: 40px; } }
/*Buttons*/
button {
  border: none; }
  /* Enhanced Footer Button */
.footer-btn {
  background-color: #c59548 !important;
  color: white !important;
  border: 2px solid #c59548 !important;
  padding: 14px 32px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(197, 149, 72, 0.3);
}

.footer-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.7s ease;
  z-index: -1;
}

.footer-btn:hover {
  background-color: white !important;
  color: #059d9c !important;
  border-color: #059d9c !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(5, 157, 156, 0.3);
}

.footer-btn:hover::before {
  left: 100%;
}

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

.nir-btn, .nir-btn-black {
  position: relative;
  z-index: 1;
  font-size: 14px;
  text-align: center;
  padding: 14px 24px;
  text-transform: capitalize;
  transition: all ease-in-out 0.5s;
  background: #059d9c;
  color: #fff;
  display: inline-block;
  border-radius: 10px;
  border: none;
  box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.1);
  overflow: hidden; }
  .nir-btn::before, .nir-btn-black::before {
    position: absolute;
    left: 0;
    width: 0;
    height: 100%;
    top: 0;
    content: '';
    background: #c59548;
    color: #fff !important;
    transition: all ease-in-out 0.5s;
    z-index: -1; }
  .nir-btn:hover::before, .nir-btn-black:hover::before {
    width: 100%;
    transition: all ease-in-out 0.5s; }
  .nir-btn:hover, .nir-btn-black:hover {
    color: #fff !important;
    transition: all ease-in-out 0.5s; }

.nir-btn-black {
  background: #101011; }
  .nir-btn-black:before {
    color: #fff; }
  .nir-btn-black:hover {
    background: #fff;
    color: #3f3f3f; }
    .nir-btn-black:hover:before {
      color: #c59548; }

input#submit {
  border: none; }

input#submit:hover {
  opacity: 0.8;
  background: #059d9c !important;
  color: #fff; }

.item-slider .slick-prev, .item-slider .slick-next {
  top: -124px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #f1f1f1;
  width: 50px;
  height: 50px;
  line-height: 1; }
  .item-slider .slick-prev::before, .item-slider .slick-next::before {
    color: #777;
    font-size: 28px;
    line-height: 1.5; }
  .item-slider .slick-prev:hover, .item-slider .slick-prev:focus, .item-slider .slick-next:hover, .item-slider .slick-next:focus {
    background: #059d9c;
    border-color: #059d9c; }
    .item-slider .slick-prev:hover::before, .item-slider .slick-prev:focus::before, .item-slider .slick-next:hover::before, .item-slider .slick-next:focus::before {
      color: #fff; }
.item-slider .slick-prev {
  right: 76px;
  left: inherit; }
.item-slider .slick-next {
  right: 16px; }

.banner-slider .slick-prev, .banner-slider .slick-next {
  background: #c59548;
  border-radius: 50%;
  width: 50px;
  height: 50px; }
  .banner-slider .slick-prev::before, .banner-slider .slick-next::before {
    color: #fff;
    font-size: 28px;
    line-height: 1.8; }
  .banner-slider .slick-prev:hover, .banner-slider .slick-prev:focus, .banner-slider .slick-next:hover, .banner-slider .slick-next:focus {
    background: #101011; }
.banner-slider .slick-prev {
  left: 30px; }
.banner-slider .slick-next {
  right: 30px; }

#preloader {
  position: fixed;
  inset: 0;
  background: #f4f4f4;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loader */
#preloader #status {
  width: 500px;       /* adjust if needed */
  height: 500px;
  background: url("../images/tawafloader.gif") no-repeat center;
  background-size: contain;
}


/* End Preloader */

.alert {
  margin-bottom: 10px;
  border-radius: 0px;
  color: #e83737;
  padding: 0; }
  .alert .alert-success {
    background: transparent;
    border: transparent;
    border-radius: 0px;
    color: #3c763d; }
    .alert .alert-success h4 {
      margin-bottom: 8px; }
    .alert .alert-success p {
      color: #fff; }

/* ========================================= */
/*          Ribbon CSS        */
/* ======================================== */
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  z-index: 2; }
  .ribbon::before, .ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #666; }
  .ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 10px 0;
    background-color: #c59548;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
    font-size: 18px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    text-align: center; }
  .ribbon span.open {
    background: #5ECFB1; }

.ribbon-top-left {
  top: -10px;
  left: -10px; }
  .ribbon-top-left:before, .ribbon-top-left:after {
    border-top-color: transparent;
    border-left-color: transparent; }
  .ribbon-top-left:before {
    top: 0;
    right: 0; }
  .ribbon-top-left:after {
    bottom: 0;
    left: 0; }
  .ribbon-top-left span {
    right: -25px;
    top: 40px;
    transform: rotate(-45deg); }

/* ========================================= */
/*          Wickedpicker CSS        */
/* ======================================== */
.wickedpicker {
  width: 120px !important;
  height: auto !important;
  z-index: 9; }

.wickedpicker .wickedpicker__title {
  display: none !important; }

.wickedpicker__controls__control-up:before {
  content: "" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: #909090 !important; }

.wickedpicker__controls__control-down:after {
  content: "" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: #909090 !important; }
/* ========================================= */
/*          PREMIUM FAQ SECTION              */
/* ========================================= */

.premium-faq-section {
  padding: 10px 0;
  position: relative;
}

/* Section Header */
.section-header-premium {
  text-align: center;
  margin-bottom: 50px;
}

.section-badge-premium {
  display: inline-block;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: var(--white);
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.section-title-premium {
  font-size: 42px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 15px;
  line-height: 1.2;
}

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

/* Premium FAQ Grid */
.premium-faq-grid {
  max-width: 900px;
  margin: 0 auto 50px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* FAQ Card */
.premium-faq-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.premium-faq-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* FAQ Header */
.faq-card-header {
  padding: 25px 30px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white);
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}

.faq-card-header.active {
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border-bottom: 1px solid var(--primary-light);
}

.faq-question {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.faq-icon {
  width: 40px;
  height: 40px;
  background: rgba(5, 157, 156, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.faq-card-header.active .faq-icon {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
}

.faq-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--black);
  margin: 0;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.faq-card-header.active .faq-title {
  color: var(--white);
}

.faq-toggle {
  color: var(--primary);
  font-size: 16px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.faq-card-header.active .faq-toggle {
  color: var(--white);
  transform: rotate(180deg);
}

/* FAQ Content */
.faq-card-content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-card-content.active {
  max-height: 1000px;
}

.faq-answer {
  padding: 30px;
  background: var(--white);
  border-top: 1px solid rgba(0,0,0,0.05);
}

.faq-answer p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--gray-dark);
  margin-bottom: 20px;
}

/* FAQ Action Link */
.faq-action {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.faq-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s ease;
}

.faq-link:hover {
  color: var(--primary);
  gap: 12px;
}

/* FAQ CTA */
.faq-cta-premium {
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border-radius: 20px;
  padding: 50px;
  text-align: center;
  color: var(--white);
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 15px 40px rgba(5, 157, 156, 0.2);
}

.faq-cta-premium h3 {
  font-size: 32px;
  margin-bottom: 15px;
  font-weight: 700;
}

.faq-cta-premium p {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 30px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

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

.btn-cta-call,
.btn-cta-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}

.btn-cta-call {
  background: var(--white);
  color: var(--primary);
}

.btn-cta-call:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  color: var(--primary);
}

.btn-cta-whatsapp {
  background: #25D366;
  color: var(--white);
}

.btn-cta-whatsapp:hover {
  background: #128C7E;
  transform: translateY(-2px);
  color: var(--white);
}

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

@media (max-width: 992px) {
  .premium-faq-section {
    padding: 60px 0;
  }
  
  .section-title-premium {
    font-size: 36px;
  }
  
  .faq-cta-premium {
    padding: 40px 30px;
  }
}

@media (max-width: 768px) {
  .section-title-premium {
    font-size: 30px;
  }
  
  .faq-card-header {
    padding: 20px;
  }
  
  .faq-question {
    gap: 15px;
  }
  
  .faq-title {
    font-size: 16px;
  }
  
  .faq-answer {
    padding: 20px;
  }
  
  .faq-cta-premium h3 {
    font-size: 26px;
  }
  
  .faq-cta-premium p {
    font-size: 16px;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-cta-call,
  .btn-cta-whatsapp {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .section-title-premium {
    font-size: 26px;
  }
  
  .section-subtitle-premium {
    font-size: 16px;
  }
  
  .faq-card-header {
    padding: 15px;
  }
  
  .faq-question {
    gap: 12px;
  }
  
  .faq-icon {
    width: 35px;
    height: 35px;
    font-size: 12px;
  }
  
  .faq-title {
    font-size: 15px;
  }
  
  .faq-answer p {
    font-size: 15px;
  }
  
  .faq-cta-premium {
    padding: 30px 20px;
  }
}

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

.premium-faq-card {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

/* Stagger animation for FAQ cards */
.premium-faq-card:nth-child(1) { animation-delay: 0.1s; }
.premium-faq-card:nth-child(2) { animation-delay: 0.2s; }
.premium-faq-card:nth-child(3) { animation-delay: 0.3s; }
.premium-faq-card:nth-child(4) { animation-delay: 0.4s; }
.premium-faq-card:nth-child(5) { animation-delay: 0.5s; }
.premium-faq-card:nth-child(6) { animation-delay: 0.6s; }
/* ========================================= */
/*          Custom animation CSS        */
/* ======================================== */
@-webkit-keyframes rotated {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes rotated {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-webkit-keyframes scale-upOne {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2); } }
@keyframes scale-upOne {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2); } }
@-webkit-keyframes zoom-fade-two {
  0% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5); }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5); } }
@keyframes zoom-fade-two {
  0% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5); }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5); } }
@-webkit-keyframes zoom-fade {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); } }
@keyframes zoom-fade {
  0% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2); } }
@keyframes slide {
  from {
    background-position: 0 0; }
  to {
    background-position: -111px 0; } }
@-webkit-keyframes slide {
  from {
    background-position: 0 0; }
  to {
    background-position: -111px 0; } }
@-webkit-keyframes ripple {
  70% {
    box-shadow: 0 0 0 40px rgba(255, 255, 255, 0); }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes ripple {
  70% {
    box-shadow: 0 0 0 40px rgba(255, 255, 255, 0); }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes up-down {
  0% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); } }
@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom; }
  50% {
    transform: rotate(-10deg); }
  70% {
    transform: rotate(3deg); }
  to {
    opacity: 1;
    transform: scale(1); } }
.jackInTheBox {
  animation-name: jackInTheBox; }

.animated {
  animation-duration: 1s;
  animation-fill-mode: both; }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

@keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg); }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg);
    transform: translate(73px, -1px) rotate(36deg); }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg);
    transform: translate(141px, 72px) rotate(72deg); }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg);
    transform: translate(83px, 122px) rotate(108deg); }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg);
    transform: translate(-40px, 72px) rotate(144deg); }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg); } }
@-webkit-keyframes animationFramesOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg); }
  20% {
    -webkit-transform: translate(73px, -1px) rotate(36deg); }
  40% {
    -webkit-transform: translate(141px, 72px) rotate(72deg); }
  60% {
    -webkit-transform: translate(83px, 122px) rotate(108deg); }
  80% {
    -webkit-transform: translate(-40px, 72px) rotate(144deg); }
  100% {
    -webkit-transform: translate(0px, 0px) rotate(0deg); } }
@keyframes animationFramesTwo {
  0% {
    transform: translate(0, 0) rotate(0); }
  21% {
    transform: translate(40px, 50px) rotate(35deg); }
  41% {
    transform: translate(-20px, -75px) rotate(48deg); }
  60% {
    transform: translate(25px, 48px) rotate(125deg); }
  80% {
    transform: translate(16px, -15px) rotate(180deg); }
  100% {
    transform: translate(0, 0) rotate(0); } }
@-webkit-keyframes animationFramesTwo {
  0% {
    -webkit-transform: translate(0, 0) rotate(0); }
  21% {
    -webkit-transform: translate(40px, 5px) rotate(35deg); }
  41% {
    -webkit-transform: translate(-20px, -75px) rotate(48deg); }
  60% {
    -webkit-transform: translate(25px, 48px) rotate(125deg); }
  80% {
    -webkit-transform: translate(16px, -15px) rotate(180deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(0); } }
@keyframes animationFramesThree {
  0% {
    transform: translate(0, 0) rotate(0); }
  21% {
    transform: translate(4px, 10px) rotate(360deg); }
  41% {
    transform: translate(25px, 40px) rotate(360deg); }
  60% {
    transform: translate(35px, 22px) rotate(360deg); }
  80% {
    transform: translate(17px, 46px) rotate(360deg); }
  100% {
    transform: translate(0, 0) rotate(0); } }
@-webkit-keyframes animationFramesThree {
  0% {
    -webkit-transform: translate(0, 0) rotate(0); }
  21% {
    -webkit-transform: translate(4px, -20px) rotate(360deg); }
  41% {
    -webkit-transform: translate(-50px, -80px) rotate(360deg); }
  60% {
    -webkit-transform: translate(-75px, -35px) rotate(360deg); }
  80% {
    -webkit-transform: translate(-20px, 20px) rotate(360deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(0); } }
@-webkit-keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }
@keyframes movebounce {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }
@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg); } }
/*--move-forever--*/
@keyframes move-forever {
  0% {
    transform: translate(-90px, 0%); }
  100% {
    transform: translate(85px, 0%); } }
@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  75% {
    -webkit-transform: scale(1.75);
    transform: scale(1.75);
    opacity: 1; }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0; } }
@keyframes ripple {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  75% {
    -webkit-transform: scale(1.75);
    transform: scale(1.75);
    opacity: 1; }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0; } }
@-webkit-keyframes border-transform {
  0%,
    to {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%; }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%; }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%; }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%; }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%; }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%; }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%; } }
@keyframes border-transform {
  0%,
    to {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%; }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%; }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%; }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%; }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%; }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%; }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%; } }
.team-slider .slick-prev, .team-slider .slick-next {
  background: #fff;
  height: 60px;
  width: 60px;
  box-shadow: 0 0 15px #cccccc37; }
  .team-slider .slick-prev:before, .team-slider .slick-next:before {
    font-size: 36px;
    line-height: 1.6;
    color: #059d9c; }
  .team-slider .slick-prev:hover, .team-slider .slick-prev:focus, .team-slider .slick-next:hover, .team-slider .slick-next:focus {
    opacity: 1;
    background: #059d9c;
    color: #fff; }
    .team-slider .slick-prev:hover:before, .team-slider .slick-prev:focus:before, .team-slider .slick-next:hover:before, .team-slider .slick-next:focus:before {
      color: #fff; }
.team-slider .slick-prev {
  left: -15px; }
.team-slider .slick-next {
  right: -15px; }

@media (max-width: 767px) {
  .team-slider .slick-prev, .team-slider .slick-next {
    display: none !important; } }
@-webkit-keyframes kbrns_zoomOutIn {
  0% {
    -webkit-transform: scale(1.3); }
  100% {
    -webkit-transform: scale(1); } }
@-moz-keyframes kbrns_zoomOutIn {
  0% {
    -moz-transform: scale(1.3); }
  100% {
    -moz-transform: scale(1); } }
@-ms-keyframes kbrns_zoomOutIn {
  0% {
    -ms-transform: scale(1.3); }
  100% {
    -ms-transform: scale(1); } }
@-o-keyframes kbrns_zoomOutIn {
  0% {
    -o-transform: scale(1.3); }
  100% {
    -o-transform: scale(1); } }
@keyframes kbrns_zoomOutIn {
  0% {
    transform: scale(1.3); }
  100% {
    transform: scale(1); } }
/*Navbar*/
.navbar-default {
  background: #f5f5f5; }

.navbar {
  border-bottom: 0;
  padding: 0; }

.sidebar .navbar-nav {
  background: transparent;
  margin: 0; }

.navbar.navbar-default {
  transition: none; }

header #navbar {
  width: 100%;
  background: var(--accent); }

.navbar-default a.navbar-brand {
  font-size: 24px;
  position: relative;
  color: var(--accent);
  letter-spacing: 2px;
  font-weight: 400;
  display: block;
  padding: 0;
  height: auto;
  transition: all ease-in-out 0.5s;
  transition: color 0.5s ease;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  margin-right: 0;
  flex: 1; }
  .navbar-default a.navbar-brand span {
    color: var(--accent); }
  .navbar-default a.navbar-brand:hover {
    color: #D60D45; }
.navbar-default .navbar-nav li, .navbar-default .navbar-nav li.active {
  background: #f33807; }
  .navbar-default .navbar-nav li a, .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li.active a, .navbar-default .navbar-nav li.active a:hover {
    background: #f33807; }

/* Main Menu Dropdown */
.navbar-nav li {
  position: relative;
  text-align: left;
  margin-bottom: 0; }
  .navbar-nav li ul {
    z-index: 9999;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 50px;
    left: 0;
    width: 190px;
    display: none;
    border: 1px solid #f1f1f1;
    border-top: 2px solid #f33807;
    -webkit-box-shadow: 0px 0px 12px -3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 12px -3px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 12px -3px rgba(0, 0, 0, 0.4); }
    .navbar-nav li ul li {
      border-bottom: 1px solid #f1f1f1; }
      .navbar-nav li ul li:last-child {
        border-bottom: none; }
      .navbar-nav li ul li:hover a {
        padding-left: 20px;
        padding-right: 10px;
        text-decoration: none; }
      .navbar-nav li ul li:hover ul li a {
        padding-left: 15px;
        padding-right: 15px; }
      .navbar-nav li ul li a {
        display: block;
        padding: 7px 15px;
        font-size: 15px;
        font-weight: 500;
        color: #636363; }
        .navbar-nav li ul li a:hover {
          color: #f33807; }
      .navbar-nav li ul li ul {
        position: absolute;
        left: 188px;
        top: -2px; }
        .navbar-nav li ul li ul li ul li:hover a {
          padding-left: 20px;
          padding-right: 10px; }

.navbar-nav li > ul > li:last-child > a {
  border-bottom: 0; }
.navbar-nav li > ul > li ul > li:last-child > a {
  border-bottom: 0; }


  
.main_header_area {
  position: relative;
  width: 100%; }
  .main_header_area .notify-bar {
    background: linear-gradient(to right, #e9595e 1%, #dcb86c 100%);
    position: relative;
    padding: 3px 0; }
    .main_header_area .notify-bar .notify-in {
      position: relative; }
      .main_header_area .notify-bar .notify-in y
      a.shop-btn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%); }
  .main_header_area .header-content {
    position: relative;
    z-index: 1;
    background: #ffffff30; }
    .main_header_area .header-content li {
      display: inline-block;
      padding: 0px 15px;
      border-left: 1px solid #f1f1f136;
      margin: 0; }
      .main_header_area .header-content li:first-child {
        border: none;
        padding-left: 0; }
      .main_header_area .header-content li:last-child {
        padding-right: 0; }
    .main_header_area .header-content a, .main_header_area .header-content i {
      font-size: 14px; }
  .main_header_area .header_menu.fixed-top {
    box-shadow: 0 0 15px #cccccc37;
    background: #fff; }
  .main_header_area .header_menu.hide {
    top: -94px;
    animation-name: slideInUp; }
  .main_header_area .register-login a {
    font-size: 15px;
    text-transform: uppercase;
    color: #fff; }
  .main_header_area .register-login .dropdown a {
    color: #fff !important;
    text-transform: capitalize; }
  .main_header_area .register-login .btn-info {
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 0; }

.main_header_area .header_menu.fixed-top .register-login a {
  color: #fff !important; }
.main_header_area .header_menu.fixed-top .register-login a.nir-btn {
  color: #fff !important; }
  .main_header_area .header_menu.fixed-top .register-login a.nir-btn:hover {
    color: #fff !important; }

.main_header_area.headerstye-1 {
  position: absolute;
  width: 100%; }
  .main_header_area.headerstye-1 .header_menu .navbar.navbar-default .navbar-header .navbar-brand {
    padding: 0;
    margin: 0; }
    .main_header_area.headerstye-1 .header_menu .navbar.navbar-default .navbar-header .navbar-brand img {
      display: block; }
      .main_header_area.headerstye-1 .header_menu .navbar.navbar-default .navbar-header .navbar-brand img + img {
        display: none; }
  .main_header_area.headerstye-1 .header_menu .navbar.navbar-default .nav.navbar-nav li {
    margin-right: 0; }
    .main_header_area.headerstye-1 .header_menu .navbar.navbar-default .nav.navbar-nav li a {
      color: #fff;
      padding: 10px; }
    .main_header_area.headerstye-1 .header_menu .navbar.navbar-default .nav.navbar-nav li:hover > a {
      color: #059d9c; }
  .main_header_area.headerstye-1 .header_menu .navbar.navbar-default .nav.navbar-nav li.active > a {
    color: #059d9c; }
  .main_header_area.headerstye-1 .header_menu .search-main a i {
    color: #fff; }
  .main_header_area.headerstye-1 .header_menu.fixed-top .navbar-default {
    background: #fff; }
    .main_header_area.headerstye-1 .header_menu.fixed-top .navbar-default .navbar-header .navbar-brand {
      padding: 0;
      margin: 0; }
      .main_header_area.headerstye-1 .header_menu.fixed-top .navbar-default .navbar-header .navbar-brand img {
        display: none !important; }
        .main_header_area.headerstye-1 .header_menu.fixed-top .navbar-default .navbar-header .navbar-brand img + img {
          display: block !important; }
  .main_header_area.headerstye-1 .header_menu.fixed-top .search-main a i {
    color: #777; }

@media (max-width: 1400px) and (min-width: 1300px) {
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav li a, .main_header_area.headerstye-1 .header_menu .navbar.navbar-default .nav.navbar-nav li a {
    padding: 10px 6px;
    font-size: 14px; } }
@media (max-width: 991px) {
  .headerstye-1 .header-content {
    display: none; }
  .headerstye-1 .navbar-header {
    display: block; }

  .main_header_area .header-content, .search-main {
    display: none !important; } }
@media (max-width: 735px) {
  .main_header_area .header-content {
    display: none !important; } }
.header_menu .navbar.navbar-default {
  border-radius: 0px;
  margin-bottom: 0px;
  background: transparent;
  border: none;
  width: 100%;
  z-index: 9; }
  .header_menu .navbar.navbar-default .navbar-header .navbar-brand {
    padding: 0;
    margin: 0; }
    .header_menu .navbar.navbar-default .navbar-header .navbar-brand img {
      display: block; }
      .header_menu .navbar.navbar-default .navbar-header .navbar-brand img + img {
        display: none; }
  .header_menu .navbar.navbar-default .navbar-collapse {
    text-align: right;
    padding: 0; }
  .header_menu .navbar.navbar-default .nav.navbar-nav {
    float: none;
    text-align: right;
    display: inline-block;
    background: transparent; }
    .header_menu .navbar.navbar-default .nav.navbar-nav li {
      float: none;
      display: inline-block;
      margin-right: 0;
      background: transparent; }
      .header_menu .navbar.navbar-default .nav.navbar-nav li:last-child {
        margin: 0; }
      .header_menu .navbar.navbar-default .nav.navbar-nav li a {
        background: transparent;
        font-size: 15px;
        font-weight: 400;
        text-transform: uppercase;
        padding: 0px;
        line-height: inherit;
        transition: all 150ms linear;
        border: none;
        padding: 0 8px; }
        .header_menu .navbar.navbar-default .nav.navbar-nav li a i {
          font-size: 12px; }
        .header_menu .navbar.navbar-default .nav.navbar-nav li a i.fa-angle-right {
          position: absolute;
          right: 15px;
          top: 20px; }
        .header_menu .navbar.navbar-default .nav.navbar-nav li a:after {
          display: none; }
    .header_menu .navbar.navbar-default .nav.navbar-nav li:hover a, .header_menu .navbar.navbar-default .nav.navbar-nav li.active a {
      color: #059d9c;
      background: transparent; }
    .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu {
      position: relative; }
      .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu {
        border: none;
        padding: 0px;
        border-radius: 0px;
        -webkit-box-shadow: none;
        box-shadow: none; }
        .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu:before {
          content: '';
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 10px 10px 0 10px;
          border-color: #eeeeee transparent transparent transparent;
          position: absolute;
          right: 24px;
          top: 45px;
          z-index: 3;
          opacity: 0;
          -webkit-transition: all 400ms linear;
          -o-transition: all 400ms linear;
          transition: all 400ms linear; }
        .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li {
          display: block;
          float: none;
          margin-right: 0px;
          border-bottom: 1px dashed #f1f1f1; }
          .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a {
            line-height: 3;
            color: #777;
            font-size: 15px;
            padding: 3px 20px;
            font-weight: 400;
            letter-spacing: .30px;
            -webkit-transition: all 150ms linear;
            -o-transition: all 150ms linear;
            transition: all 150ms linear;
            display: block;
            text-transform: capitalize; }
            .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a:hover {
              background: #059d9c;
              color: #fff; }
          .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li:last-child {
            border-bottom: none; }
          .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li ul {
            overflow: visible; }
  .header_menu .navbar.navbar-default .nav.navbar-nav.navbar-right li:last-child {
    margin-right: 0px; }
.header_menu .navbar.navbar-default.navbar-sticky-in .nav.navbar-nav li:hover > a, .header_menu .navbar.navbar-default.navbar-sticky-in .nav.navbar-nav li.active > a {
  color: #059d9c; }

.main_header_area .header_mlogo .navbar.navbar-default .navbar-header {
  display: none;
  transition: all ease-in-out 0.5s; }
.main_header_area .header_mlogo .navbar.navbar-default.navbar-sticky-in .navbar-header {
  display: block;
  transition: all ease-in-out 0.5s; }
.main_header_area .header_mlogo .navbar.navbar-default.navbar-sticky-in .navbar-middle {
  display: none;
  transition: all ease-in-out 0.5s; }
.main_header_area .header_menu.header_mlogo1.fixed-top {
  position: relative;
  animation: none;
  top: 0; }
  /* Remove padding on mobile for navbar */
@media (max-width: 767.98px) {
  .mobile-navbar-padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
/* Desktop logo size - keep original */


/* Mobile logo - reduce size */
@media (max-width: 767.98px) {
  .navbar-logo {
    height: 50px !important; /* Half size for mobile */
    width: auto !important;
  }
  
  .navbar-brand {
    padding: 5px 0 !important; /* Reduce brand container padding */
  }
}

@media (max-width: 991px) {
  .main_header_area .header_mlogo .navbar.navbar-default .navbar-header {
    display: block; }

  .navbar-middle {
    display: none; }

  .header-start {
    padding-top: 0 !important; } }
/*Fullpage search*/
#search1 {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translate(0px, -100%) scale(0, 0);
  -moz-transform: translate(0px, -100%) scale(0, 0);
  -o-transform: translate(0px, -100%) scale(0, 0);
  -ms-transform: translate(0px, -100%) scale(0, 0);
  transform: translate(0px, -100%) scale(0, 0);
  opacity: 0; }
  #search1 input[type="search"] {
    position: absolute;
    top: 40%;
    width: 50%;
    color: #777;
    background: transparent;
    font-size: 48px;
    font-weight: 400;
    text-align: center;
    border-width: 0 0 1px;
    margin: 0px auto;
    padding: 20px 30px;
    outline: none;
    margin-bottom: 30px;
    height: 82px;
    left: 0;
    right: 0;
    border-radius: 0;
    border-bottom: 1px solid #f1f1f1; }
  #search1 .btn {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #059d9c;
    padding: 15px 30px;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    width: 10%; }
  #search1 .close {
    position: fixed;
    top: 15px;
    right: 15px;
    color: #fff;
    background-color: #059d9c;
    border-color: #059d9c;
    opacity: 1;
    padding: 4px 16px;
    border-radius: 10px;
    font-size: 27px; }

#search1.open {
  -webkit-transform: translate(0px, 0px) scale(1, 1);
  -moz-transform: translate(0px, 0px) scale(1, 1);
  -o-transform: translate(0px, 0px) scale(1, 1);
  -ms-transform: translate(0px, 0px) scale(1, 1);
  transform: translate(0px, 0px) scale(1, 1);
  opacity: 1; }

.header_sidemenu .header_sidemenu_in .overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  transition: opacity .25s ease,visibility 0s ease .25s; }
.header_sidemenu .header_sidemenu_in .overlay.show {
  opacity: 0.8;
  visibility: visible;
  background: #000000;
  transition: opacity .25s ease,visibility 0s ease; }
.header_sidemenu .header_sidemenu_in .overlay.hide {
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  transition: opacity .25s ease,visibility 0s ease .25s; }
.header_sidemenu .header_sidemenu_in .menu {
  width: 380px;
  height: 100%;
  position: fixed;
  right: -500px;
  top: 0;
  z-index: 9999;
  background-color: #fff;
  box-shadow: 0 0 15px #cccccc37;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  transition: all ease 0.5s;
  box-shadow: 0 0 15px #cccccc37; }
  .header_sidemenu .header_sidemenu_in .menu .close-menu {
    float: right;
    font-size: 21px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px; }
.header_sidemenu .menu-ham {
  cursor: pointer; }

.menu-ham {
  cursor: pointer; }
  .menu-ham a i {
    transition: all ease-in-out 0.5s; }
    .menu-ham a i:hover {
      background: #059d9c !important;
      color: #fff !important;
      transition: all ease-in-out 0.5s; }

@media (min-width: 992px) {
  .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu {
    position: absolute;
    top: 40px;
    left: 0px;
    min-width: 250px;
    background: #fff;
    box-shadow: 0 0 15px #cccccc57;
    text-align: left;
    opacity: 0;
    transition: all ease-in-out 0.5s;
    visibility: hidden;
    display: block;
    border: none;
    padding: 0px;
    border-radius: 0px; }
    .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li.submenu .dropdown-menu {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
      transform: scaleY(0);
      -webkit-transform-origin: 0 50%;
      -ms-transform-origin: 0 50%;
      transform-origin: 0 50%;
      position: absolute;
      left: 100%;
      right: auto;
      width: auto;
      top: 0; }
      .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li.submenu .dropdown-menu li a {
        line-height: 3;
        color: #777;
        font-size: 15px;
        padding: 3px 20px;
        letter-spacing: .30px;
        transition: all 150ms linear;
        display: block; }
      .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li.submenu .dropdown-menu li:hover a {
        color: #fff; }
    .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li.submenu:hover .dropdown-menu {
      transform: scale(1, 1); }
  .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu:hover ul {
    left: 0px;
    visibility: visible;
    opacity: 1; } }
header {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 22; }

.logo a {
  font-size: 28px;
  color: #fff; }
  .logo a [class^="flaticon-"]:before {
    font-size: 28px;
    color: #fff; }

nav.navbar.navbar-default .logo-white {
  display: block; }
nav.navbar.navbar-default .logo-black {
  display: none; }

nav.navbar.navbar-default.navbar-sticky-in .logo-white {
  display: none; }
nav.navbar.navbar-default.navbar-sticky-in .logo-black {
  display: block; }

.nav-btn {
  display: inline-block; }

.navbar-sticky-in .nir-btn:hover {
  color: #059d9c; }

/*Fullpage search*/
.search-wrapper {
  position: relative;
  min-width: 250px;
  display: inline-block; }
  .search-wrapper .search_module {
    position: relative; }
    .search-wrapper .search_module .icon-left {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      transition: all ease-in-out 0.5s;
      z-index: 10;
      color: #fff; }
    .search-wrapper .search_module .search_area form .input-group {
      margin: 0; }
      .search-wrapper .search_module .search_area form .input-group .form-control {
        background: none;
        padding-left: 40px;
        border: 1px solid #ffffff23;
        transition: all ease-in-out 0.5s;
        font-weight: 400;
        width: 100%;
        color: #fff; }
        .search-wrapper .search_module .search_area form .input-group .form-control::placeholder {
          transition: all ease-in-out 0.5s;
          color: #fdfdfd; }
        .search-wrapper .search_module .search_area form .input-group .form-control:focus {
          outline: 0;
          box-shadow: none; }
    .search-wrapper .search_module.active + .search-categories {
      visibility: visible;
      opacity: 1; }
    .search-wrapper .search_module.active .search_area form .input-group .form-control {
      border: none;
      padding-left: 2.66667rem;
      border: 1px solid #ffffff23;
      font-weight: 400; }
      .search-wrapper .search_module.active .search_area form .input-group .form-control:focus {
        border: none; }

.main_header_area.headerstye-1 .header_menu.fixed-top {
  background: #fff;
  box-shadow: 0 0 15px #cccccc57; }
  .main_header_area.headerstye-1 .header_menu.fixed-top .navbar.navbar-default .navbar-header .navbar-brand img + img {
    display: block; }
  .main_header_area.headerstye-1 .header_menu.fixed-top .navbar.navbar-default .nav.navbar-nav li > a {
    color: #777; }
  .main_header_area.headerstye-1 .header_menu.fixed-top .navbar.navbar-default .nav.navbar-nav li.active > a {
    color: #059d9c; }
  .main_header_area.headerstye-1 .header_menu.fixed-top .search-wrapper .search_module .search_area form .input-group .form-control {
    border-color: #f1f1f1;
    color: #777; }
    .main_header_area.headerstye-1 .header_menu.fixed-top .search-wrapper .search_module .search_area form .input-group .form-control::placeholder {
      color: #777; }
  .main_header_area.headerstye-1 .header_menu.fixed-top .search-wrapper .search_module .icon-left {
    color: #777; }

.fade.in {
  opacity: 1; }

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center; }

.modal-backdrop {
  background: transparent; }

.modal__container {
  overflow-x: hidden;
  overflow-y: auto; }
  .modal__container .modal__content {
    background-color: #fff;
    width: 450px;
    border-radius: 0px;
    position: relative;
    overflow: hidden; }
    .modal__container .modal__content .login-content {
      background: #fff;
      text-align: center;
      position: relative;
      box-shadow: 0 0 15px #cccccc37; }
      .modal__container .modal__content .login-content .section-border {
        padding: 20px 30px;
        border-top: 1px dashed #f1f1f1; }
      .modal__container .modal__content .login-content .form-checkbox {
        text-align: left; }
      .modal__container .modal__content .login-content a.btn-facebook, .modal__container .modal__content .login-content a.btn-twitter, .modal__container .modal__content .login-content a.btn-google {
        padding: 8px 20px;
        color: #fff;
        background: #ccc;
        border-radius: 0px;
        display: inline-block;
        border: 1px solid #395899; }
      .modal__container .modal__content .login-content a.btn-facebook {
        background: #395899; }
      .modal__container .modal__content .login-content a.btn-twitter {
        background: #04a9e1;
        border-color: #04a9e1; }
      .modal__container .modal__content .login-content a.btn-google {
        background: #db3236; }
      .modal__container .modal__content .login-content .sign-up {
        padding: 20px 0;
        border-top: 1px dashed #f1f1f1; }
    .modal__container .modal__content button.close {
      background: #059d9c;
      color: #fff;
      position: absolute;
      top: 0;
      right: 0;
      height: 40px;
      width: 40px;
      border-radius: 50%;
      opacity: 1;
      text-align: center;
      line-height: 0.5;
      font-size: 20px;
      padding: 0;
      z-index: 9;
      transition: all ease-in-out 0.5s; }
      .modal__container .modal__content button.close:focus {
        border: none;
        outline: none; }

.modal-open {
  padding: 0 !important; }
  .modal-open .modal {
    background: #000000ad;
    overflow: hidden;
    padding-right: 0 !important; }
    .modal-open .modal .modal-dialog {
      max-width: 920px;
      top: 5%; }
      .modal-open .modal .modal-dialog .modal-content {
        border: none;
        position: relative;
        border-radius: 0; }
        .modal-open .modal .modal-dialog .modal-content .modal-body {
          padding: 20px; }
        .modal-open .modal .modal-dialog .modal-content .login-content {
          box-shadow: 0 0 15px #cccccc37; }

@media (max-width: 991px) {
  .modal-open .modal .modal-dialog {
    max-width: 80%;
    margin: 0 auto; }
    .modal-open .modal .modal-dialog .blog-full .blog-image > a {
      height: 280px; } }
.log-reg .nav-pills {
  margin-bottom: 20px; }
  .log-reg .nav-pills .nav-link {
    padding: 14px 18px; }
  .log-reg .nav-pills .nav-link.active, .log-reg .nav-pills .show > .nav-link {
    background: #059d9c;
    border-radius: 10px; }
.log-reg .btn-fb, .log-reg .btn-google {
  padding: 14px 18px;
  text-align: center;
  background: #506dab;
  color: #fff;
  border-radius: 10px;
  font-size: 14px; }
.log-reg .btn-google {
  background: #dd4b39; }
.log-reg hr.log-reg-hr {
  opacity: 1;
  background-color: #ccc; }
  .log-reg hr.log-reg-hr::before {
    background-color: #ffffff;
    bottom: 0;
    color: #059d9c;
    content: "Or";
    font-size: 16px;
    position: absolute;
    left: 0;
    margin: 0 auto;
    right: 0;
    text-align: center;
    top: -12px;
    width: 10%; }

@media (max-width: 1100px) {
  .search-wrapper {
    width: 200px; } }
@media (max-width: 1100px) {
  .slicknav_btn.slicknav_open:before, .slicknav_btn.slicknav_collapsed:before,
  .headerstye-1 .navbar-sticky-in .slicknav_btn.slicknav_open:before,
  .headerstye-1 .navbar-sticky-in .slicknav_btn.slicknav_collapsed:before {
    color: #fff !important; }

  .headerstye-1 .slicknav_btn.slicknav_open:before,
  .headerstye-1 .slicknav_btn.slicknav_collapsed:before {
    color: #fff !important; }

  .dropdown-toggle::after, .search-wrapper,
  .header_menu .navbar.navbar-default a.cart-icon, .register-login {
    display: none !important; } }
/* Umrah Page Specific Styles */
.umrah-premium-page .modern-hero-badge .fa-kaaba {
  font-size: 14px;
}


/* Umrah Cities Section */
.umrah-cities-section,
.umrah-months-section {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--gray-light);
}

.umrah-cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.umrah-city-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  border: 1px solid var(--gray-light);
}

.umrah-city-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  border-color: var(--primary);
    background: var(--primary); /* Add primary background on hover */

}

.umrah-city-card .city-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.umrah-city-card .city-image {
  height: 120px;
  overflow: hidden;
}

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

.umrah-city-card:hover .city-image img {
  transform: scale(1.05);
}
.umrah-city-card:hover .city-image::after {
  background: rgba(5, 157, 156, 0.2); /* Semi-transparent overlay on hover */
}

.umrah-city-card .city-content {
  padding: 15px;
  text-align: center;
}

.umrah-city-card .city-content h4 {
  font-size: 16px;
  color: var(--primary);
  margin-bottom: 5px;
  font-weight: 700;
}

.umrah-city-card .city-content p {
  font-size: 13px;
  color: var(--gray);
  margin: 0;
}

/* Umrah Months Section */
.umrah-months-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 15px;
  margin-top: 30px;
}

.umrah-month-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: var(--white);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
  border: 1px solid var(--gray-light);
}

.umrah-month-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  border-color: var(--primary);
  color: var(--primary);
}

.umrah-month-card .month-icon {
  width: 40px;
  height: 40px;
  background: rgba(5, 157, 156, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 18px;
  flex-shrink: 0;
}

.umrah-month-card:hover .month-icon {
  background: var(--primary);
  color: var(--white);
}

.umrah-month-card .month-content h5 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--black);
}

.umrah-month-card .month-content p {
  font-size: 12px;
  color: var(--gray);
  margin: 0;
}

.umrah-month-card:hover .month-content h5 {
  color: var(--primary);
}

/* Section Headers */
.umrah-premium-page .section-header-premium {
  text-align: center;
  margin-bottom: 30px;
}

.umrah-premium-page .section-header-premium h3 {
  font-size: 28px;
  color: var(--primary);
  margin-bottom: 10px;
  font-weight: 700;
}

.umrah-premium-page .section-header-premium p {
  color: var(--gray);
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .umrah-cities-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }
  
  .umrah-months-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
}

@media (max-width: 768px) {
  .umrah-cities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .umrah-months-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .umrah-premium-page .section-header-premium h3 {
    font-size: 24px;
  }
}

@media (max-width: 576px) {
  .umrah-cities-grid {
    grid-template-columns: 1fr;
  }
  
  .umrah-months-grid {
    grid-template-columns: 1fr;
  }
}
    
/* ========================================= */
/*          Banner  CSS        */
/* ======================================== */
/* Modern Slider Styles */
.modern-slider-container {
  padding: 20px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.modern-slider-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  padding: 0 20px;
}

/* Featured Slide */
.featured-slide-container {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  margin-bottom: 30px;
  position: relative;
}

.featured-slide {
  height: 500px;
  position: relative;
}

.featured-image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.featured-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.featured-slide:hover .featured-image {
  transform: scale(1.05);
}

.image-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(23, 35, 62, 0.9) 0%,
    rgba(23, 35, 62, 0.7) 30%,
    rgba(23, 35, 62, 0.3) 70%,
    rgba(23, 35, 62, 0.1) 100%
  );
}


.featured-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 60px;
  margin-bottom: -40px;
  z-index: 2;
}

.featured-badge {
  /* REMOVE position, top, left from here */
  background: #c59548;
  color: white;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  animation: pulse 2s infinite;
}


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

.featured-content {
  max-width: 600px;
  color: white;
}

.destination-info {
  margin-bottom: 20px;
}

.destination-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
background: rgba(5, 157, 156, 0.35);
  backdrop-filter: blur(10px);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  margin-left: 10px; /* Optional: Add some left margin for alignment */
}


.featured-title {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 25px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.featured-title a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.featured-title a:hover {
  color: #c59548;
}

.featured-meta {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

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

.stars {
  display: flex;
  gap: 4px;
}

.star {
  width: 20px;
  height: 20px;
  background: #c59548;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star.active {
  background: #ffd700;
}

.review-count {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.duration {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
}

.price-container {
  background: linear-gradient(135deg, rgba(5, 157, 156, 0.95) 0%, rgba(8, 140, 139, 0.95) 100%);
  backdrop-filter: blur(10px);
  padding: 25px;
  border-radius: 15px;
  max-width: 320px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 10px 25px rgba(5, 157, 156, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

/* Optional: Add a subtle shine effect */
.price-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.price-container:hover {
  background: linear-gradient(135deg, rgba(197, 149, 72, 0.95) 0%, rgba(174, 131, 64, 0.95) 100%);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 15px 30px rgba(197, 149, 72, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-5px);
}

/* Optional: Add a subtle animation on load */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.price-container {
  animation: fadeInUp 0.6s ease-out;
}

.from-text {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: white;
}

.currency {
  font-size: 24px;
  font-weight: 600;
}

.price {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
}

.per-person {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

/* Thumbnail Slider */
.thumbnail-slider {
  margin-top: 30px;
}

.thumbnails-container {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 20px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.thumbnails-container::-webkit-scrollbar {
  display: none;
}

.thumbnail-item {
  flex: 0 0 auto;
  width: 200px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 15px;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 2px solid transparent;
}



.thumbnail-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.thumbnail-item.active {
  border-color: #c59548;
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(197, 149, 72, 0.3);
}


.thumbnail-image-wrapper {
  position: relative;
  height: 120px;
  overflow: hidden;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.thumbnail-item:hover .thumbnail-image {
  transform: scale(1.1);
}

.thumbnail-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}

.thumbnail-info {
  padding: 15px;
}

.thumbnail-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #101011;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thumbnail-price {
  font-size: 18px;
  font-weight: 700;
  color: #c59548;
}

/* Slider Controls */
.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.slider-nav-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  color: #101011;
  font-size: 20px;
}
.featured-top-badges {
  position: absolute;
  top: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
}


.slider-nav-btn:hover {
  background: #c59548;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(197, 149, 72, 0.3);
}

.slider-dots {
  display: flex;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(23, 35, 62, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.dot:hover {
  background: rgba(23, 35, 62, 0.4);
  transform: scale(1.2);
}

.dot.active {
  background: #c59548;
  width: 40px;
  border-radius: 6px;
}

/* Autoplay Control */
.autoplay-control {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 3;
}

/* Enhanced autoplay button */
.autoplay-btn {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #059d9c;
  border: 3px solid white; /* White border for contrast */
  color: white;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 
    0 5px 20px rgba(5, 157, 156, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  z-index: 10;
}

/* Optional: Add a subtle animation effect */
.autoplay-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  border-radius: 50%;
  z-index: -1;
}

.autoplay-btn:hover {
  background: #c59548;
  border-color: #c59548;
  color: white;
  transform: scale(1.2) rotate(5deg);
  box-shadow: 
    0 8px 30px rgba(197, 149, 72, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.autoplay-btn:active {
  transform: scale(1.1);
  box-shadow: 
    0 3px 15px rgba(197, 149, 72, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.autoplay-icon {
  display: block;
  line-height: 1;
  font-weight: bold;
}

.autoplay-text {
  color: white;
  font-size: 0.65rem;
  margin-top: 3px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.9;
}

.autoplay-btn:hover .autoplay-text {
  opacity: 1;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .featured-title {
    font-size: 2.8rem;
  }
  
  .price {
    font-size: 3rem;
  }
}

@media (max-width: 992px) {
  .modern-slider-wrapper {
    padding: 0 15px;
  }
  
  .featured-slide {
    height: 400px;
  }
  
  .featured-overlay {
    padding: 40px;
  }
  
  .featured-title {
    font-size: 2.2rem;
  }
  
  .thumbnail-item {
    width: 180px;
  }
}

@media (max-width: 768px) {
  .modern-slider-container {
    padding: 20px 0;
  }
  
  .featured-slide {
    height: 350px;
  }
  
  .featured-overlay {
    padding: 30px;
  }
  
  .featured-title {
    font-size: 1.8rem;
  }
  
  .price {
    font-size: 2.5rem;
  }
  
  .slider-controls {
    gap: 20px;
  }
  
  .slider-nav-btn {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 576px) {
  .featured-slide {
    height: 300px;
  }
  
  .featured-overlay {
    padding: 20px;
  }
  
  .featured-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }
  
  .featured-meta {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .price-container {
    padding: 15px;
  }
  
  .price {
    font-size: 2rem;
  }
  
  .thumbnail-item {
    width: 160px;
  }
  
  .thumbnail-image-wrapper {
    height: 100px;
  }
}

/* Mobile-specific adjustments */
@media (max-width: 480px) {
  .featured-slide {
    height: 250px;
  }
  
  .featured-overlay {
    justify-content: flex-end;
    padding-bottom: 20px;
  }
  
  .featured-content {
    width: 100%;
  }
  
  .featured-title {
    font-size: 1.3rem;
  }
  
  .slider-controls {
    margin-top: 20px;
  }
  
  .slider-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .autoplay-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}
/* ========================================= */
/*     MODERN THUMBNAIL PACKAGES SECTION     */
/* ========================================= */

/* Modern Thumbnail Packages Section */
.thumbnail-packages-section {
  position: relative;
  margin-top: 10px;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Modern Scroll buttons */
.thumbnail-scroll-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059d9c 0%, #087C8B 100%);
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: white;
  font-size: 20px;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 
    0 8px 25px rgba(5, 157, 156, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  backdrop-filter: blur(10px);
  opacity: 0.95;
}

.thumbnail-scroll-btn:hover {
  background: linear-gradient(135deg, #c59548 0%, #E5B858 100%);
  border-color: #c59548;
  color: white;
  transform: translateY(-50%) scale(1.15);
  box-shadow: 
    0 12px 30px rgba(197, 149, 72, 0.4),
    0 0 0 2px rgba(197, 149, 72, 0.3) inset;
  opacity: 1;
}

.scroll-left {
  left: -28px;
}

.scroll-right {
  right: -28px;
}

/* Modern Thumbnails Container */
.thumbnails-full-container {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: 
    linear-gradient(135deg, rgba(248, 249, 250, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(5, 157, 156, 0.03) 10px, rgba(5, 157, 156, 0.03) 20px);
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 
    0 10px 40px -15px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.05) inset,
    0 20px 60px -30px rgba(5, 157, 156, 0.15);
  position: relative;
}

.thumbnails-full-container::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 19px;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(248, 249, 250, 0.95) 100%);
  z-index: -1;
}

/* No scroll for 4 or fewer items */
.thumbnails-full-container.no-scroll {
  overflow: visible;
}

/* With scroll for more than 4 items */
.thumbnails-full-container.with-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}

.thumbnails-full-container.with-scroll::-webkit-scrollbar {
  display: none;
}

/* Thumbnails inner wrapper - Modern */
.thumbnails-inner-wrapper {
  display: flex;
  gap: 25px;
  width: 100%;
}

/* Modern Thumbnail Package Item */
.thumbnail-package-item {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 6px 20px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  border: 2px solid transparent;
  position: relative;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
}

/* Card Glow Effect */
.thumbnail-package-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, 
    rgba(5, 157, 156, 0.1) 0%, 
    rgba(197, 149, 72, 0.1) 50%, 
    transparent 100%);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.thumbnail-package-item:hover::before {
  opacity: 1;
}

/* For 4 or fewer items - equal width distribution */
.thumbnails-full-container.no-scroll .thumbnail-package-item {
  flex: 1;
  min-width: 0;
}

/* For more than 4 items - fixed width */
.thumbnails-full-container.with-scroll .thumbnail-package-item {
  width: 280px;
}

.thumbnail-package-item:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(197, 149, 72, 0.2);
  border-color: rgba(197, 149, 72, 0.3);
}

.thumbnail-package-item.active {
  border-color: #059d9c;
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 25px 50px -12px rgba(5, 157, 156, 0.2),
    0 0 0 2px rgba(5, 157, 156, 0.1);
}

/* Modern Active Indicator */
.thumbnail-package-item.active::after {
  content: '✓ SELECTED';
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, #059d9c 0%, #087C8B 100%);
  color: white;
  font-size: 0.7rem;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 3;
  box-shadow: 0 4px 15px rgba(5, 157, 156, 0.3);
  animation: slideInBadge 0.4s ease-out;
}

@keyframes slideInBadge {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.thumbnail-package-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #059d9c, #c59548);
  z-index: 2;
  border-radius: 18px 18px 0 0;
}

/* Modern Package Image */
.thumbnail-package-image {
  position: relative;
  height: 160px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.package-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumbnail-package-item:hover .package-image {
  transform: scale(1.1);
}

.package-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom, 
    transparent 0%, 
    rgba(0, 0, 0, 0.1) 40%, 
    rgba(0, 0, 0, 0.4) 100%
  );
  border-radius: 16px 16px 0 0;
}

/* Modern Package Content */
.thumbnail-package-content {
  padding: 10px;
  position: relative;
}

/* Package Title - Modern */
.package-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
  position: relative;
}

.package-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #c59548, #ffd700);
  border-radius: 2px;
}

/* Modern Package Details */
.package-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(234, 234, 234, 0.8);
}

.package-rating {
  display: flex;
  align-items: center;
  gap: 5.5rem;
}

.package-stars {
  display: flex;
}

.package-star {
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, #ffd700 0%, #ffc107 100%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  position: relative;
}

.package-star::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: rgba(255, 255, 255, 0.3);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.package-review {
  font-size: 0.85rem;
  color: #666;
  font-weight: 600;
}

.package-nights {
  display: flex !important;           /* must be flex, NOT inline-flex */
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;      /* shrink to content */
  margin: 0.5rem auto !important;     /* centers horizontally */

  gap: 6px;
  font-size: 0.85rem;
  color: #666;
  font-weight: 600;
  background: rgba(197, 149, 72, 0.1);
  border-radius: 10px;
  padding: 6px 15px;
}


.package-nights i {
  color: #c59548;
  font-size: 0.9rem;
}

/* Modern Price Section */
.package-price {
  text-align: center;
  background: linear-gradient(135deg, 
    rgba(248, 249, 250, 0.8) 0%, 
    rgba(255, 255, 255, 0.9) 100%);
  padding: 5px;
  border-radius: 12px;
  border: 1px solid rgba(234, 234, 234, 0.8);
  position: relative;
  overflow: hidden;
}

.package-price::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #059d9c, #c59548);
}

.from-label {
  display: block;
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  font-weight: 600;
}

.price-amount {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #c59548;
  line-height: 1;
  margin-bottom: 5px;
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.price-amount::before {
  content: '£';
  font-size: 1.2rem;
  position: relative;
  top: -0.3em;
  margin-right: 2px;
}

.price-pp {
  display: block;
  font-size: 0.8rem;
  color: #888;
  font-weight: 500;
}

/* Modern View Details Button */
.thumbnail-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, #059d9c 0%, #087C8B 100%);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.thumbnail-view-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.2), 
    transparent);
  transition: left 0.6s ease;
}

.thumbnail-view-btn:hover {
  background: linear-gradient(135deg, #c59548 0%, #E5B858 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(197, 149, 72, 0.3);
}

.thumbnail-view-btn:hover::before {
  left: 100%;
}

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

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

/* Modern Hover Info */
.thumbnail-package-item:hover .hover-info {
  opacity: 1;
  transform: translateY(0);
}

.hover-info {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  padding: 15px;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 4;
  border-top: 1px solid #eee;
}

/* Section Title */
.thumbnail-section-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.thumbnail-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #059d9c, #c59548);
  border-radius: 2px;
}

/* Responsive Design Updates */
@media (max-width: 1400px) {
  .thumbnail-packages-section {
    padding: 0 20px;
  }
  
  .thumbnails-full-container.with-scroll .thumbnail-package-item {
    width: 260px;
  }
  
  .thumbnail-package-image {
    height: 150px;
  }
}

@media (max-width: 1200px) {
  .thumbnail-packages-section {
    padding: 0 15px;
  }
  
  .thumbnails-full-container {
    padding: 20px;
  }
  
  .thumbnails-full-container.with-scroll .thumbnail-package-item {
    width: 240px;
  }
  
  .thumbnail-package-image {
    height: 140px;
  }
}

@media (max-width: 992px) {
  .thumbnail-packages-section {
    margin-top: 20px;
    padding: 0 10px;
  }
  
  .thumbnails-full-container.with-scroll .thumbnail-package-item {
    width: 220px;
  }
  
  .thumbnail-package-content {
    padding: 18px;
  }
  
  .package-title {
    font-size: 1rem;
  }
  
  .price-amount {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .thumbnail-packages-section {
    padding: 0;
    margin-top: 30px;
  }
  
  .thumbnails-full-container {
    padding: 15px;
    border-radius: 16px;
  }
  
  .thumbnails-inner-wrapper {
    gap: 20px;
  }
  
  .thumbnails-full-container.with-scroll .thumbnail-package-item {
    width: 200px;
  }
  
  .thumbnail-package-image {
    height: 120px;
  }
  
  .thumbnail-scroll-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  
  .scroll-left {
    left: -22px;
  }
  
  .scroll-right {
    right: -22px;
  }
}

@media (max-width: 576px) {
  .thumbnails-full-container {
    padding: 12px;
  }
  
  .thumbnails-inner-wrapper {
    gap: 15px;
  }
  
  /* For small screens with few items */
  .thumbnails-full-container.no-scroll .thumbnails-inner-wrapper {
    flex-direction: column;
  }
  
  .thumbnails-full-container.no-scroll .thumbnail-package-item {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .thumbnails-full-container.no-scroll .thumbnail-package-item:last-child {
    margin-bottom: 0;
  }
  
  /* For many items on small screens */
  .thumbnails-full-container.with-scroll .thumbnail-package-item {
    width: 180px;
  }
  
  .thumbnail-package-image {
    height: 110px;
  }
  
  .thumbnail-package-content {
    padding: 15px;
  }
  
  .package-title {
    font-size: 0.95rem;
    min-height: auto;
  }
  
  .price-amount {
    font-size: 1.6rem;
  }
  
  .thumbnail-scroll-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
    display: none; /* Hide on very small screens */
  }
}
/* New: Stars and booking in single row */
.package-rating-booking-row {
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  width: 100%;
}



/* Adjust margins to maintain spacing */
.thumbnail-package-content .package-title {
  margin-bottom: 8px;
  width: 100%;
}

/* Remove bottom border from package-details since we moved nights */
.package-details {
  border-bottom: none;
  justify-content: flex-start;
  margin-bottom: 0;
}

/* Ensure nights has proper spacing */
.package-nights {
  margin-bottom: 12px;
  width: 100%;
}

/* Ensure price section has proper spacing */
.package-price {
  margin-bottom: 12px;
  width: 100%;
}

/* Make sure package-rating stays the same */
.package-rating {
  display: flex;
 
}

/* ========================================= */
/*         FORM ON RIGHT SIDE - MINIMAL      */
/* ========================================= */

/* Form positioned absolutely on right side - NO LAYOUT CHANGES */
.slider-form-right {
  position: absolute;
  top: 50%;
  right: 90px;
  transform: translateY(-50%);
  width: 380px;
  z-index: 10;
  animation: slideInForm 0.6s ease-out;
}

@keyframes slideInForm {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Form styling */
.slider-form-box {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Form title */
.slider-form-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #101011;
  margin-bottom: 8px;
  text-align: center;
}

.slider-form-subtitle {
  font-size: 0.95rem;
  color: #666;
  text-align: center;
  margin-bottom: 25px;
}

/* Form rows */
.slider-form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.slider-form-group {
  flex: 1;
}

/* Form inputs */
.slider-form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #eaeaea;
  border-radius: 10px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  background: white;
}

.slider-form-input:focus {
  outline: none;
  border-color: #059d9c;
  box-shadow: 0 0 0 3px rgba(5, 157, 156, 0.1);
}

/* Select dropdown */
.slider-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23101011' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 40px;
}
.slider-form-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
  position: relative;
  
  /* Gradient background for the text */
  background: linear-gradient(
    90deg,
    #059d9c 0%,
    #059d9c 20%,
    #000000 40%,
    #000000 60%,
    #000000 80%,
    #059d9c 100%
  );
  
  /* Clip the background to the text */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  /* Create the flowing animation */
  background-size: 200% auto;
  animation: gradientFlow 8s ease-in-out infinite;
  
  /* Add text shadow for better readability */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* Smooth transition for hover effects */
  transition: all 0.3s ease;
  letter-spacing: -0.5px;
}

/* Flowing gradient animation */
@keyframes gradientFlow {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}


/* Submit button */
.slider-form-submit-btn {
  width: 100%;
  background: #059d9c;
  color: white;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.slider-form-submit-btn:hover {
  background: #c59548;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(197, 149, 72, 0.3);
}

/* Form note */
.slider-form-note {
  font-size: 0.8rem;
  color: #888;
  text-align: center;
  margin-top: 15px;
  line-height: 1.4;
}

/* Responsive - Hide on smaller screens */
@media (max-width: 1200px) {
  .slider-form-right {
    width: 350px;
    right: 40px;
  }
  
  .slider-form-box {
    padding: 25px;
  }
}

@media (max-width: 992px) {
  .slider-form-right {
    display: none;
  }
}

/* Mobile - Show original form below */
.d-md-none {
  display: none;
}

@media (max-width: 768px) {
  .slider-form-right {
    display: none;
  }
  
  .d-md-none {
    display: block;
  }
}
/* ========================================= */
/*     PREMIUM MOBILE SLIDER CSS             */
/* ========================================= */

/* Mobile Premium Slider */
.mobile-premium-slider {
  background: white;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Main Hero Container */
.mobile-hero-container {
  height: 80vh;
  position: relative;
}

.mobile-main-swiper {
  height: 100%;
  width: 100%;
}

.mobile-hero-slide {
  height: 80vh;
  max-height: 700px;
  position: relative;
  overflow: hidden;
}

/* Background with Parallax Effect */
.slide-bg-container {
  position: absolute;
  top: 0;
  left: 0;
 width: 100%;
  height: 100%;
  z-index: 1;
}

.slide-bg-image {
  object-fit: cover;
  transform: scale(1.1);
  animation: kenBurns 30s infinite alternate;
}

@keyframes kenBurns {
  0% { transform: scale(1.1); }
  100% { transform: scale(1.15); }
}

.bg-gradient-overlay {
  position: absolute;
  inset: 0;
background: linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0.12) 0%,
  rgba(0, 0, 0, 0.25) 30%,
  rgba(0, 0, 0, 0.45) 60%,
  rgba(0, 0, 0, 0.6) 100%
);

}

.bg-pattern-overlay {
  position: absolute;
  inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.3;
}

/* Content Overlay */
.slide-content-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  padding-top: env(safe-area-inset-top);
}

/* Top Bar */
.mobile-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 5px;
  margin-bottom: auto;
  width: 100%;
}

.top-badges {
  display: flex;
  flex-direction: row; /* Changed from column to row */
  gap: 8px; /* Reduced gap for row layout */
  align-items: center; /* Center align vertically */
  flex-wrap: wrap; /* Allow wrapping if needed */
}

.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* Reduced gap */
  background: linear-gradient(135deg, #c59548, #c59548);
  color: white;
  border-radius: 16px; /* Reduced from 20px */
  font-size: 11px; /* Reduced from 12px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px; /* Reduced from 0.5px */
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4); /* Reduced from 8px 25px */
  backdrop-filter: blur(10px);
  padding: 2px 10px; /* Added padding for better sizing */
  white-space: nowrap; /* Prevent text wrapping */
}

.featured-badge.pulse {
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3); /* Reduced */
  }
  50% {
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.5); /* Reduced */
  }
}

.location-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* Reduced gap */
  background: rgba(5, 157, 156, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: white;
  padding: 5px 10px; /* Reduced padding */
  border-radius: 16px; /* Reduced from 20px */
  font-size: 11px; /* Reduced from 12px */
  font-weight: 600;
  border: 1px solid rgba(5, 157, 156, 0.4);
  white-space: nowrap; /* Prevent text wrapping */
}

.play-pause-btn {
  width: 35px; /* Reduced from 40px */
  height: 35px; /* Reduced from 40px */
  border-radius: 50%;
  background: #059d9c;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 13px; /* Reduced from 15px */
  flex-shrink: 0; /* Prevent button from shrinking */
}

.play-pause-btn:hover {
  background: rgba(197, 149, 72, 0.8);
  transform: scale(1.1);
  border-color: #c59548;
}

/* Adjust icon sizes inside badges */
.featured-badge i,
.location-badge i {
  font-size: 10px; /* Smaller icons */
}
/* Main Content */
.mobile-main-content {
 padding-bottom: 20px;
  padding-top: 10px;}

.mobile-main-title {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 20px;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.title-line {
  display: block;
  color: white;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.title-line.accent {
  background: linear-gradient(90deg, #c59548, #c59548);
  background-clip: text;
  position: relative;
}

.title-line.accent::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #c59548, #c59548);
  border-radius: 3px;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 15px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}
.compact-form-header h3.icon-heading {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: center;
  position: relative;
  
  /* Apply gradient to the entire heading */
  background: linear-gradient(
    90deg,
    #059d9c 0%,
    #059d9c 20%,
    #000000 40%,
    #000000 60%,
    #000000 80%,
    #059d9c 100%
  );
  
  /* Clip the background to the text */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  /* Create the flowing animation */
  background-size: 200% auto;
  animation: gradientFlow 8s ease-in-out infinite;
  
  /* Add text shadow for better readability */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
  /* Smooth transition for hover effects */
  transition: all 0.3s ease;
  letter-spacing: -0.5px;
}

/* Make sure the icon inherits the same gradient effect */
.compact-form-header h3.icon-heading .fa-calendar-check,
.compact-form-header h3.icon-heading .icon-inline {
  display: inline-block;
  background: inherit;
  -webkit-background-clip: inherit;
  background-clip: inherit;
  color: transparent;
  background-size: inherit;
  animation: inherit;
}
/* Mobile Form Styling */
.mobile-form-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 20px;
  padding: 20px 0;
  margin: 20px 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(5, 157, 156, 0.1);
}

.mobile-compact-form-container {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.mobile-form-header {
  background: linear-gradient(135deg, #059d9c 0%, #037a79 100%);
  color: white;
  padding: 20px;
  text-align: center;
  border-bottom: 3px solid #c59548;
}

.mobile-form-heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-form-heading i {
  font-size: 1.3rem;
  color: rgb(255, 255, 255);
}

.mobile-form-subtitle {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.mobile-form-body {
  padding: 20px;
}

.form-wrapper-mobile {
  margin-bottom: 20px;
}

/* Mobile form elements styling - adjust based on your Form_home component */
.form-wrapper-mobile .form-control {
  border-radius: 10px;
  padding: 12px 15px;
  border: 2px solid #e9ecef;
  font-size: 16px; /* Prevents zoom on iOS */
}

.form-wrapper-mobile .form-control:focus {
  border-color: #059d9c;
  box-shadow: 0 0 0 0.2rem rgba(5, 157, 156, 0.25);
}

.form-wrapper-mobile .btn-primary {
  background: linear-gradient(135deg, #059d9c 0%, #037a79 100%);
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-weight: 600;
  font-size: 1rem;
  width: 100%;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.form-wrapper-mobile .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(5, 157, 156, 0.3);
}

/* Trust badges */
.mobile-trust-badges {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.trust-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 80px;
}

.trust-badge-item i {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.trust-badge-item span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #495057;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .mobile-form-section {
    margin: 20px 10px;
    padding: 15px 0;
  }
  
  .mobile-form-header {
    padding: 15px;
  }
  
  .mobile-form-heading {
    font-size: 1.3rem;
  }
  
  .mobile-form-body {
    padding: 15px;
  }
  
  .trust-badge-item span {
    font-size: 0.7rem;
  }
}
/* Flowing gradient animation */
@keyframes gradientFlow {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
  100% {
    background-position: 0% center;
  }
}
.stat-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
}

.stat-icon {
  width: 25px;
  height: 25px;
  border-radius: 13px;
  background: rgba(197, 149, 72, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #c59548;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 22px; /* Reduced from 28px */
  font-weight: 800;
  color: white;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Price Card */
.price-card {
  background: rgba(5, 157, 156, 0.9);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-radius: 20px;
  padding: 12px;
  margin-bottom: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

/* If you're using float animation on price card */
.price-card.floating {
  animation: floatAnimation 6s ease-in-out infinite;
}

@keyframes floatAnimation {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); } /* Reduced from -10px */
}

.price-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotateGlow 20s linear infinite;
}

@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.price-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.price-display {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 8px;
}

.currency {
  font-size: 22px;
  font-weight: 700;
  color: white;
}

.price {
  font-size: 3.2rem;
  font-weight: 900;
  color: white;
  line-height: 1;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.per-person {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-left: 5px;
}

.price-subtext {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* CTA Buttons */
/* ========================================= */
/*     MOBILE CTA BUTTONS - MINIMAL PADDING  */
/* ========================================= */

/* Mobile CTA Row - Container */
.mobile-cta-row {
  display: flex;
  gap: 10px;
  margin: 10px 0 5px 0; /* Reduced from 15px 0 10px 0 */
  width: 100%;
}

/* Primary Button - Minimal padding */
.mobile-primary-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px; /* Very small gap between text and icon */
  background: linear-gradient(135deg, #ffffff, #ffffff);
  color: var(--primary);
  padding: 8px 5px; /* MINIMAL PADDING: 5px horizontal */
  border-radius: 8px; /* Smaller radius */
  font-size: 11px; /* Smaller font */
  font-weight: 500;
  text-decoration: none;
  border: none;
  transition: all 0.2s ease;
  box-shadow: 0 3px 8px rgba(5, 157, 156, 0.3);
  position: relative;
  overflow: hidden;
  min-height: 32px; /* Fixed height */
  line-height: 1;
  white-space: nowrap; /* Prevent text wrapping */
}

.mobile-primary-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.4s ease;
}

.mobile-primary-btn:hover::before {
  left: 100%;
}

.mobile-primary-btn:hover {
  transform: translateY(-2px);
    background: linear-gradient(135deg, #c59548, #c59548);
    color: white;

  box-shadow: 0 5px 12px rgba(5, 157, 156, 0.4);
}

/* Secondary Button - Minimal padding */
.mobile-secondary-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px; /* Very small gap between text and icon */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  padding: 8px 5px; /* MINIMAL PADDING: 5px horizontal */
  border-radius: 8px; /* Smaller radius */
  font-size: 11px; /* Smaller font */
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 32px; /* Fixed height */
  line-height: 1;
  white-space: nowrap; /* Prevent text wrapping */
}

.mobile-secondary-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Icon sizes in buttons - smaller */
.mobile-primary-btn i,
.mobile-secondary-btn i {
  font-size: 9px; /* Smaller icons */
}

/* Remove any extra margin/padding from span inside buttons */
.mobile-primary-btn span,
.mobile-secondary-btn span {
  padding: 0;
  margin: 0;
  line-height: 1;
}

/* Swipe Hint */
.mobile-swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 400;
  padding: 8px 0;
  margin-bottom: 1rem;
  animation: pulseHint 2s infinite;
  width: 100%;
  text-align: center;
}

@keyframes pulseHint {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

.mobile-swipe-hint i {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive adjustments - Even tighter on small screens */
@media (max-width: 375px) {
  .mobile-cta-row {
    gap: 8px;
    margin: 12px 0 16px 0;
  }
  
  .mobile-primary-btn,
  .mobile-secondary-btn {
    padding: 6px 4px; /* Even tighter: 4px horizontal */
    font-size: 10px; /* Smaller font */
    min-height: 30px; /* Smaller height */
    gap: 4px; /* Smaller gap between text and icon */
  }
  
  .mobile-primary-btn i,
  .mobile-secondary-btn i {
    font-size: 8px; /* Smaller icons */
  }
  
  .mobile-swipe-hint {
    font-size: 9px;
    padding: 6px 0;
    gap: 5px;
  }
  
  .mobile-swipe-hint i {
    font-size: 7px;
  }
}

/* For very small screens - Stack vertically if needed */
@media (max-width: 320px) {
  .mobile-cta-row {
    flex-direction: column;
    gap: 6px;
  }
  
  .mobile-primary-btn,
  .mobile-secondary-btn {
    width: 100%;
    padding: 6px 4px;
    font-size: 10px;
    min-height: 28px;
  }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Package Selector */
.package-selector-container {
  background: white;
  padding: 24px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  margin-top: -40px; /* Bring it up closer */
  position: relative;
  z-index: 3;
}

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.selector-title {
  font-size: 24px;
  font-weight: 800;
  color: #059d9c;
  margin: 0;
}

.active-indicator {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.current-number {
  font-size: 24px;
  font-weight: 800;
  color: #c59548;
  line-height: 1;
}

.total-packages {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
}

/* Package Thumb Swiper */
.package-thumb-swiper {
  padding-bottom: 10px;
}

.package-thumb-swiper .swiper-slide {
  width: auto !important;
}

.package-thumb {
  width: 160px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  position: relative;
  margin-top: 2rem;
}

.package-thumb.active {
  background: rgba(5, 157, 156, 0.2);
  border-color: #059d9c;
  transform: translateY(-5px);
}

.thumb-image-container {
  position: relative;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}

.thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.package-thumb:hover .thumb-image {
  transform: scale(1.1);
}

.active-ring {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: #059d9c;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 4px 15px rgba(5, 157, 156, 0.5);
}

.thumb-content {
  color: white;
}

.thumb-title {
  font-size: 16px;
  color: #000000;
  font-weight: 700;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thumb-meta {
  display: flex;
    color: #000000;

  justify-content: space-between;
  align-items: center;
}

.thumb-price {
  font-size: 18px;
  font-weight: 800;
  color: #c59548;
}

.thumb-nights {
  font-size: 14px;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Features Grid */
/* Features Grid */
.mobile-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 32px 24px;
  background: white;
}

.feature-item {
  text-align: center;
  padding: 24px;
  background: white;
  border-radius: 20px;
  border: 2px solid #059d9c;
  transition: all 0.3s ease;
  cursor: pointer;
}

.feature-item:hover {
  background: #059d9c;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(5, 157, 156, 0.3);
}

.feature-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  background: #059d9c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 8px 25px rgba(5, 157, 156, 0.3);
  transition: all 0.3s ease;
}

/* Target the icon inside feature-icon */
.feature-icon i {
  color: white !important;
  transition: all 0.3s ease;
}

.feature-item:hover .feature-icon {
  background: white;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

/* Change icon color on hover */
.feature-item:hover .feature-icon i {
  color: #059d9c !important;
}

.feature-title {
  font-size: 16px;
  font-weight: 700;
  color: #059d9c;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.feature-item:hover .feature-title {
  color: white;
}

.feature-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
  transition: all 0.3s ease;
}

.feature-item:hover .feature-desc {
  color: rgba(255, 255, 255, 0.9);
}
/* Swiper Customizations */
.swiper-pagination {
  position: absolute;
  bottom: 60px !important;
  left: 0;
  right: 0;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: #c59548;
  width: 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(197, 149, 72, 0.8);
}

/* Responsive Adjustments */
@media (max-width: 375px) {
  .mobile-main-title {
    font-size: 2rem;
  }
  
  .price {
    font-size: 3.8rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .mobile-features-grid {
    grid-template-columns: 1fr;
  }
  
  .cta-buttons {
    flex-direction: column;
  }
  
  .package-thumb {
    width: 140px;
  }
}
/* Stats Grid - Always 2 columns on mobile */
@media (max-width: 768px) {
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
  }

  .stat-card {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 16px !important;
    padding: 12px 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .stat-icon {
    flex-shrink: 0 !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
  }

  .stat-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .stat-value {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  .stat-label {
    font-size: 12px !important;
    opacity: 0.9 !important;
    white-space: nowrap !important;
  }
}

/* For very small devices */
@media (max-width: 375px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .stat-card {
    padding: 10px 5px !important;
    gap: 6px !important;
  }

  .stat-icon {
    font-size: 14px !important;
    width: 20px !important;
  }

  .stat-content {
    gap: 4px !important;
  }

  .stat-value {
    font-size: 14px !important;
  }

  .stat-label {
    font-size: 10px !important;
  }
}

/* For extremely small devices */
@media (max-width: 320px) {
  .stat-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  
  .stat-label {
    white-space: normal !important;
    font-size: 9px !important;
  }
}

/* Remove any conflicting styles */
@media (max-width: 375px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
/* Safe Area Insets */
@supports (padding: max(0px)) {
  .slide-content-overlay {
    padding-top: max(24px, env(safe-area-inset-top));
  }
}
/* ========================================= */
/*          Banner Form  CSS        */
/* ======================================== */
.form-main {
  position: relative;
  display: block;
  z-index: 2; }
  .form-main .form-content {
    box-shadow: 0px 0px 30px #cccccc57;
    margin: -76px auto 0;
    background: #fff;
    border-radius: 0px;
    z-index: 2; }
    .form-main .form-content .input-box {
      position: relative;
      width: 100%; }
      .form-main .form-content .input-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1; }
      .form-main .form-content .input-box [class^="fa-"]:before {
        color: #ef2853;
        font-weight: 600; }
    .form-main .form-content .form-navtab {
      position: absolute;
      top: -57px;
      left: 0;
      right: 0;
      margin: 0 auto; }
      .form-main .form-content .form-navtab .nav-tabs {
        border: none;
        padding: 0px;
        display: inline-block; }
        .form-main .form-content .form-navtab .nav-tabs li button {
          border-radius: 0;
          background: #fff;
          border: none;
          padding: 15px 30px;
          transition: all 0.5s;
          border-radius: 0; }
        .form-main .form-content .form-navtab .nav-tabs li i {
          color: #444;
          margin-right: 5px;
          transition: all 0.5s; }
        .form-main .form-content .form-navtab .nav-tabs li:hover button {
          background: #088dd1;
          color: #fff;
          border: none;
          transition: all 0.5s; }
          .form-main .form-content .form-navtab .nav-tabs li:hover button i {
            color: #fff;
            transition: all 0.5s; }
        .form-main .form-content .form-navtab .nav-tabs li button.active {
          background: #088dd1;
          color: #fff;
          border: none;
          transition: all 0.5s; }
          .form-main .form-content .form-navtab .nav-tabs li button.active i {
            color: #fff;
            transition: all 0.5s; }
    .form-main .form-content .tab-content {
      box-shadow: 0px 0px 30px #cccccc57;
      padding: 30px;
      background: #fff; }
  .form-main .form-content.form-content1 {
    top: -20px; }
  .form-main .form-content.form-content2 {
    padding: 0;
    box-shadow: none;
    top: 0; }
    .form-main .form-content.form-content2 .input-box {
      position: relative;
      display: inline-block;
      width: 100%; }
      .form-main .form-content.form-content2 .input-box input, .form-main .form-content.form-content2 .input-box .nice-select {
        border-width: 0 0 1px; }
      .form-main .form-content.form-content2 .input-box i {
        color: #088dd1;
        font-weight: 600;
        left: 0; }
  .form-main .form-content.form-content3 {
    padding: 0;
    box-shadow: none;
    top: 0;
    background: transparent; }
    .form-main .form-content.form-content3 .input-box {
      position: relative;
      display: inline-block;
      width: 100%; }
      .form-main .form-content.form-content3 .input-box input, .form-main .form-content.form-content3 .input-box .nice-select {
        border-width: 0 0 1px;
        background: transparent;
        color: #fff; }
        .form-main .form-content.form-content3 .input-box input::placeholder, .form-main .form-content.form-content3 .input-box .nice-select::placeholder {
          color: #fff !important; }
      .form-main .form-content.form-content3 .input-box i {
        color: #088dd1;
        font-weight: 600;
        left: 0; }

.form-main1 {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0; }

.book-form1 .nice-select, .book-form1 input {
  border-width: 0 0 1px 0;
  border-radius: 0;
  padding: 12px 0px; }

@media (max-width: 1100px) {
  .form-main .form-content {
    width: 88% !important; }
  .form-main .form-content.form-content1 {
    top: 0; } }
@media (max-width: 991px) {
  .form-main .form-content {
    margin: 5rem auto 0.25rem !important;
    left: 0;
    position: relative;
    top: 0; }
    .form-main .form-content .form-group {
      padding-right: 0 !important;
      margin-bottom: 1rem !important; }
  .form-main .form-title1 {
    border-radius: 10px 10px 0 0 !important;
    margin-bottom: 2rem !important; }

  .form-main1 {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0; } }
@media (max-width: 767px) {
  .form-main .form-content .form-navtab .nav-tabs li a {
    padding: 20px 15px; } }
@media (max-width: 735px) {
  .form-main .form-content {
    width: 98% !important; }
    .form-main .form-content .tab-content {
      border-top: 2px dashed #f1f1f1; } }
@media (max-width: 479px) {
  .form-main .form-content .form-navtab {
    position: relative;
    top: 0; }
    .form-main .form-content .form-navtab .nav-tabs {
      display: block; }
      .form-main .form-content .form-navtab .nav-tabs li {
        width: 100%; }
        .form-main .form-content .form-navtab .nav-tabs li button {
          width: 100%; }
        .form-main .form-content .form-navtab .nav-tabs li a {
          display: block; }
        .form-main .form-content .form-navtab .nav-tabs li:nth-child(odd) a {
          background: #f1f1f1; } }

/* ========================================= */
/*         Month Pages         */
/* ========================================= */


 /* Enhanced Mobile Form Styles */
        .mobile-form-container {
          padding: 0 15px;
          margin: 30px 0;
        }

        .mobile-form-card.enhanced-form {
          background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
          border-radius: 20px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.3);
          overflow: hidden;
        }

        /* Form Header */
        .form-header-section {
          background: linear-gradient(135deg, #059d9c 70%, #c59548 100%);
          padding: 20px;
          color: white;
          display: flex;
          align-items: center;
          gap: 15px;
        }

        .form-header-icon {
          background: rgba(255, 255, 255, 0.2);
          width: 50px;
          height: 50px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24px;
        }

        .form-header-content {
          flex: 1;
        }

        .form-main-title {
          font-size: 1.5rem;
          font-weight: 700;
          margin: 0 0 5px 0;
          color: white;
        }

        .form-subtitle {
          font-size: 0.9rem;
          opacity: 0.9;
          margin: 0;
        }

        /* Form Body */
        .form-body-section {
          padding: 25px 20px;
        }

        .form-fields-grid {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }

        .form-field-group {
          margin-bottom: 0;
        }

        .field-label {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 8px;
          font-weight: 600;
          color: #333;
          font-size: 0.95rem;
        }

        .field-icon {
          color: #059d9c;
          font-size: 1rem;
        }

        .field-input-wrapper {
          position: relative;
        }

        .enhanced-form-input,
        .enhanced-form-select {
          width: 100%;
          padding: 16px 20px;
          border: 2px solid #e9ecef;
          border-radius: 12px;
          font-size: 1rem;
          background: white;
          transition: all 0.3s ease;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .enhanced-form-input:focus,
        .enhanced-form-select:focus {
          outline: none;
          border-color: #059d9c;
          box-shadow: 0 0 0 3px rgba(239, 40, 83, 0.1);
        }

        .enhanced-form-input::placeholder {
          color: #adb5bd;
        }

        .enhanced-form-select {
          appearance: none;
          cursor: pointer;
          padding-right: 50px;
        }

        .select-arrow {
          position: absolute;
          right: 20px;
          top: 50%;
          transform: translateY(-50%);
          color: #6c757d;
          pointer-events: none;
        }

        /* Submit Button */
        .form-action-section {
          margin-top: 30px;
        }

        .enhanced-submit-btn {
          width: 100%;
          background: linear-gradient(135deg, #059d9c 0%, #059d9c 100%);
          color: white;
          border: none;
          padding: 18px 20px;
          border-radius: 12px;
          font-size: 1.1rem;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          cursor: pointer;
          transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(5, 157, 156, 0.45);
        }

        .enhanced-submit-btn:hover {
          transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(5, 157, 156, 0.45);
        }

        .enhanced-submit-btn:active {
          transform: translateY(0);
        }

        .btn-text {
          flex: 1;
          text-align: center;
        }

        .btn-icon {
          font-size: 1.2rem;
        }

        /* Trust Badges */
        .trust-badges {
          display: flex;
          justify-content: center;
          gap: 20px;
          margin: 20px 0;
          flex-wrap: wrap;
        }

        .trust-badge {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 0.85rem;
          color: #6c757d;
          background: #f8f9fa;
          padding: 8px 15px;
          border-radius: 20px;
        }

        .trust-badge i {
          color: #28a745;
        }

        /* Form Note */
        .form-note {
          background: #f8f9fa;
          padding: 15px;
          border-radius: 12px;
          margin-top: 20px;
          text-align: center;
        }

        .note-text {
          margin: 0;
          font-size: 0.9rem;
          color: #495057;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          flex-wrap: wrap;
        }

        .note-text i {
          color: #ef2853;
        }

        .note-text strong {
          color: #ef2853;
        }

        /* Benefits Section */
        .form-benefits-section {
          background: linear-gradient(135deg, #059d9c 0%, #059d9c 100%);
          padding: 20px;
          border-top: 1px solid #dee2e6;
        }

        .benefits-title {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          margin-bottom: 20px;
          color: #333;
          font-weight: 600;
          font-size: 1.1rem;
        }

        .benefits-title i {
          color: #ef2853;
        }

        .benefits-grid {
          display: flex;
          flex-direction: column;
          gap: 15px;
        }

        .benefit-item {
          display: flex;
          align-items: center;
          gap: 15px;
          padding: 15px;
          background: white;
          border-radius: 12px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .benefit-icon {
          width: 40px;
          height: 40px;
          background: linear-gradient(135deg, #059d9c 0%, #059d9c 100%);
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 1.2rem;
        }

        .benefit-content {
          flex: 1;
        }

        .benefit-title {
          font-weight: 600;
          color: #333;
          font-size: 0.95rem;
          margin-bottom: 4px;
        }

        .benefit-desc {
          font-size: 0.85rem;
          color: #6c757d;
        }

        /* Responsive Adjustments */
        @media (max-width: 480px) {
          .form-main-title {
            font-size: 1.3rem;
          }
          
          .form-subtitle {
            font-size: 0.85rem;
          }
          
          .enhanced-form-input,
          .enhanced-form-select {
            padding: 14px 18px;
            font-size: 0.95rem;
          }
          
          .enhanced-submit-btn {
            padding: 16px 18px;
            font-size: 1rem;
          }
          
          .benefit-item {
            padding: 12px;
          }
          
          .form-header-section {
            padding: 15px;
          }
          
          .form-header-icon {
            width: 45px;
            height: 45px;
            font-size: 20px;
          }
        }

        @media (max-width: 360px) {
          .trust-badges {
            flex-direction: column;
            align-items: center;
            gap: 10px;
          }
          
          .benefits-title {
            font-size: 1rem;
          }
        }




          
          /* ========================================= */
/*         THUMBNAIL VIEW BUTTON            */
/* ========================================= */

.thumbnail-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #059d9c;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border: 2px solid #059d9c;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
  letter-spacing: 0.5px;
}

.thumbnail-view-btn:hover {
  background: #c59548;
  border-color: #c59548;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(197, 149, 72, 0.3);
}

.thumbnail-view-btn i {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.thumbnail-view-btn:hover i {
  transform: translateX(3px);
}

/* For active thumbnail */
.thumbnail-package-item.active .thumbnail-view-btn {
  background: #047a7a;
  border-color: #047a7a;
}

.thumbnail-package-item.active .thumbnail-view-btn:hover {
  background: #a57c3d;
  border-color: #a57c3d;
}
/* ========================================= */
/*          trending-topic  CSS        */
/* ======================================== */

/* ========================================= */
/*          Trending  CSS        */
/* ======================================== */
.trending {
  background-position: top right;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative; }
  .trending .trend-item, .trending .trend-item1, .trending .trend-item2 {
    position: relative;
    transition: all ease-in-out 0.5s;
    overflow: hidden; }
    .trending .trend-item::before, .trending .trend-item1::before, .trending .trend-item2::before {
      content: '';
      position: absolute;
      left: 0;
      width: 0;
      bottom: 0;
      background: #059d9c;
      height: 4px;
      transition: all ease-in-out 0.5s;
      z-index: 2; }
    .trending .trend-item .trend-meta, .trending .trend-item1 .trend-meta, .trending .trend-item2 .trend-meta {
      position: absolute;
      top: -28px;
      right: 20px; }
    .trending .trend-item .trend-image, .trending .trend-item1 .trend-image, .trending .trend-item2 .trend-image {
      position: relative; }
      .trending .trend-item .trend-image img, .trending .trend-item1 .trend-image img, .trending .trend-item2 .trend-image img {
        transition: all ease-in-out 0.5s;
        width: 100%; }
      .trending .trend-item .trend-image .trend-content, .trending .trend-item1 .trend-image .trend-content, .trending .trend-item2 .trend-image .trend-content {
        z-index: 1; }
    .trending .trend-item .trend-image, .trending .trend-item .trend-image1, .trending .trend-item1 .trend-image, .trending .trend-item1 .trend-image1, .trending .trend-item2 .trend-image, .trending .trend-item2 .trend-image1 {
      transition: all ease-in-out 0.5s;
      overflow: hidden; }
    .trending .trend-item .trend-content1, .trending .trend-item1 .trend-content1, .trending .trend-item2 .trend-content1 {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 1; }
    .trending .trend-item:hover, .trending .trend-item1:hover, .trending .trend-item2:hover {
      transition: all ease-in-out 0.5s; }
      .trending .trend-item:hover::before, .trending .trend-item1:hover::before, .trending .trend-item2:hover::before {
        transition: all ease-in-out 0.5s;
        width: 100%; }
      .trending .trend-item:hover .trend-image img, .trending .trend-item1:hover .trend-image img, .trending .trend-item2:hover .trend-image img {
        transform: scale(1.1);
        transition: all ease-in-out 0.5s; }
      .trending .trend-item:hover .color-overlay, .trending .trend-item1:hover .color-overlay, .trending .trend-item2:hover .color-overlay {
        height: 100%;
        transition: all ease-in-out 0.5s; }
    .trending .trend-item:hover .color-overlay, .trending .trend-item1:hover .color-overlay, .trending .trend-item2:hover .color-overlay {
      height: 100%;
      transition: all ease-in-out 0.5s; }
  .trending .trend-item1::before {
    display: none; }
  .trending .trend-item2 {
    position: relative;
    transition: all ease-in-out 0.5s;
    height: 100%;
    overflow: hidden; }
    .trending .trend-item2 > a {
      background-size: cover;
      height: 100%;
      width: 100%;
      background-position: center;
      display: inline-block;
      transition: all ease-in-out 0.5s; }
    .trending .trend-item2::before {
      display: none; }
  .trending .trend-image1 {
    position: relative;
    height: 100%;
    overflow: hidden;
    transition: all ease-in-out 0.5s; }
    .trending .trend-image1 > a {
      background-size: cover;
      height: 100%;
      width: 100%;
      background-position: center;
      display: inline-block;
      transition: all ease-in-out 0.5s; }

.section-shape {
  position: absolute;
  top: -96px;
  left: 0;
  width: 100%;
  height: 96px;
  background-size: contain;
  background-repeat: repeat-x;
  z-index: 1; }

.section-shape.section-shape1 {
  transform: rotate(180deg); }

@media (max-width: 991px) {
  .section-shape {
    background-size: cover; } }
@media (max-width: 767px) {
  .trending .trend-item .trend-image1 {
    height: 340px;
    margin-bottom: 1rem; }
  .trending .trend-item2 {
    height: 300px;
    border-radius: 10px;
    margin-bottom: 15px; }

  .trend-packages .trend-full .col-lg-5 {
    padding: 0 !important; } }
@media (max-width: 400px) {
  .trending .trend-item .trend-image .trend-meta {
    position: relative;
    display: block !important;
    text-align: center; }
    .trending .trend-item .trend-image .trend-meta .entry-author {
      margin-bottom: 15px; } }
.entry-author img {
  width: 36px !important;
  height: 36px !important;
  display: inline-block !important; }

.sidebar-sticky {
  position: sticky;
  top: 0;
  transition: all ease-in-out 0.5s; }
  .sidebar-sticky .list-sidebar {
    border-radius: 0px; }
    .sidebar-sticky .list-sidebar .sidebar-item {
      padding: 0 0px 30px;
      border-bottom: 2px dashed #f1f1f1;
      margin-bottom: 30px; }
      .sidebar-sticky .list-sidebar .sidebar-item:last-child {
        border: none;
        margin: 0;
        padding: 0; }
      .sidebar-sticky .list-sidebar .sidebar-item h3 {
        position: relative;
        padding-bottom: 10px;
        margin-bottom: 30px;
        border-bottom: 1px solid #f1f1f1; }
        .sidebar-sticky .list-sidebar .sidebar-item h3::before {
          content: '';
          position: absolute;
          left: 0;
          bottom: -1px;
          width: 20%;
          height: 2px;
          background: #059d9c; }
      .sidebar-sticky .list-sidebar .sidebar-item h4 {
        border: none;
        padding: 0; }
      .sidebar-sticky .list-sidebar .sidebar-item .pretty {
        display: block;
        margin-bottom: 20px;
        margin-right: 0; }
        .sidebar-sticky .list-sidebar .sidebar-item .pretty .state label {
          text-indent: 1em;
          width: 100%;
          padding-left: 10px; }
          .sidebar-sticky .list-sidebar .sidebar-item .pretty .state label span.number {
            float: right; }
        .sidebar-sticky .list-sidebar .sidebar-item .pretty:last-child {
          margin: 0; }
      .sidebar-sticky .list-sidebar .sidebar-item .pretty.p-icon .state .icon {
        color: #fff; }
      .sidebar-sticky .list-sidebar .sidebar-item .pretty.p-icon input:checked ~ .state .icon {
        background: #059d9c; }
      .sidebar-sticky .list-sidebar .sidebar-item .range-slider {
        margin-bottom: 0; }
        .sidebar-sticky .list-sidebar .sidebar-item .range-slider .ui-slider .ui-slider-range {
          background: #059d9c; }
      .sidebar-sticky .list-sidebar .sidebar-item .star-rating span {
        color: #ffbc00;
        display: inline; }
      .sidebar-sticky .list-sidebar .sidebar-item .map-box {
        background: url(../images/map.jpg);
        background-size: cover;
        background-repeat: no-repeat; }
  .sidebar-sticky .form-content {
    box-shadow: 0px 0px 30px #cccccc57;
    background: #059d9c;
    padding: 30px; }
    .sidebar-sticky .form-content h4::before {
      display: none !important; }
    .sidebar-sticky .form-content .nice-select {
      padding: 13px 20px 10px 35px;
      font-weight: 400; }
    .sidebar-sticky .form-content .input-box {
      position: relative;
      display: inline-block;
      width: 100%; }
      .sidebar-sticky .form-content .input-box input {
        padding-left: 35px; }
      .sidebar-sticky .form-content .input-box i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1; }
      .sidebar-sticky .form-content .input-box [class^="fa-"]:before {
        color: #ef2853;
        font-weight: 600; }

.sidebar-sticky.sticky1 {
  top: 120px; }

.sidebar-sticky.sticky1.tab-sticky {
  top: 30px;
  box-shadow: none; }

.tabs-navbar {
  border: 1px solid #f1f1f1; }
  .tabs-navbar ul li {
    display: block;
    width: 100%; }
    .tabs-navbar ul li a {
      padding: 15px;
      transition: all ease-in-out 0.5s;
      display: block;
      background: #ffffff00;
      width: 100%; }
      .tabs-navbar ul li a:hover {
        color: #fff;
        background: #059d9c;
        transition: all ease-in-out 0.5s; }
  .tabs-navbar ul li.active a {
    color: #fff;
    background: #059d9c;
    transition: all ease-in-out 0.5s; }

.tabs-navbar1 {
  border: 1px solid #f1f1f1; }
  .tabs-navbar1 ul {
    display: inherit;
    text-align: center; }
    .tabs-navbar1 ul li a {
      padding: 10px 15px;
      transition: all ease-in-out 0.5s;
      border-radius: 10px; }
      .tabs-navbar1 ul li a:hover {
        color: #fff;
        background: #059d9c;
        transition: all ease-in-out 0.5s; }
    .tabs-navbar1 ul li.active a {
      color: #fff;
      background: #059d9c;
      transition: all ease-in-out 0.5s; }

.navbar-sticky {
  z-index: 9;
  position: fixed !important;
  left: 0;
  top: 0;
  width: 100%;
  animation-name: slideInUp;
  transition: all ease-in-out 0.5s; }

.tabs-navbar1.navbar-sticky {
  top: 99px;
  transition: all ease-in-out 0.5s;
  border-top: 1px solid #f1f1f1 !important; }

.sticky1.tab-sticky {
  top: 0px;
  transition: all ease-in-out 0.5s;
  animation-name: slideInUp;
  box-shadow: 0 0 15px #cccccc57;
  padding-top: 1.5rem; }

@media (max-width: 991px) {
  .tabs-navbar1.navbar-sticky {
    top: 0;
    position: relative !important; }

  .more-top .trend-image1 {
    height: 300px; }
  .more-top .trend-content-main .trend-content {
    padding: 20px 0 0; } }
@media (max-width: 567px) {
  .trending .trend-item {
    display: block !important; }
    .trending .trend-item .trend-content-main, .trending .trend-item .trend-image {
      width: 100% !important; }
    .trending .trend-item .trend-content {
      padding: 20px 0; }

  .entry-meta {
    display: block !important; } }
    
/* ========================================= */
/*          featured-video  CSS        */
/* ======================================== */
.featured-video, .recent-post {
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat; }
  .featured-video .featured-item, .featured-video .recent-item, .recent-post .featured-item, .recent-post .recent-item {
    position: relative;
    overflow: hidden; }
    .featured-video .featured-item .featured-image, .featured-video .featured-item .recent-image img, .featured-video .recent-item .featured-image, .featured-video .recent-item .recent-image img, .recent-post .featured-item .featured-image, .recent-post .featured-item .recent-image img, .recent-post .recent-item .featured-image, .recent-post .recent-item .recent-image img {
      transition: all ease-in-out 0.5s; }
    .featured-video .featured-item .featured-content, .featured-video .recent-item .featured-content, .recent-post .featured-item .featured-content, .recent-post .recent-item .featured-content {
      position: absolute;
      bottom: -60px;
      transition: all ease-in-out 0.5s; }
    .featured-video .featured-item .recent-content, .featured-video .recent-item .recent-content, .recent-post .featured-item .recent-content, .recent-post .recent-item .recent-content {
      position: absolute;
      bottom: 0;
      transition: all ease-in-out 0.5s;
      z-index: 1; }
    .featured-video .featured-item:hover .featured-image, .featured-video .recent-item:hover .featured-image, .recent-post .featured-item:hover .featured-image, .recent-post .recent-item:hover .featured-image {
      transition: all ease-in-out 0.5s;
      transform: scale(1.1); }
    .featured-video .featured-item:hover .featured-content, .featured-video .recent-item:hover .featured-content, .recent-post .featured-item:hover .featured-content, .recent-post .recent-item:hover .featured-content {
      bottom: 0;
      transition: all ease-in-out 0.5s; }
    .featured-video .featured-item:hover .recent-image > img, .featured-video .recent-item:hover .recent-image > img, .recent-post .featured-item:hover .recent-image > img, .recent-post .recent-item:hover .recent-image > img {
      transition: all ease-in-out 0.5s;
      filter: grayscale(10);
      transform: scale(1.1); }
    .featured-video .featured-item:hover .color-overlay, .featured-video .recent-item:hover .color-overlay, .recent-post .featured-item:hover .color-overlay, .recent-post .recent-item:hover .color-overlay {
      height: 100%;
      transition: all ease-in-out 0.5s; }
  .featured-video .video-banner, .recent-post .video-banner {
    height: 500px; }

.recent-post-main {
  position: relative;
  z-index: 1; }

@media (max-width: 479px) {
  .featured-video .recent-item .featured-content, .featured-video .featured-item .featured-content, .recent-post .recent-item .featured-content, .recent-post .featured-item .featured-content {
    position: relative;
    bottom: 0;
    background: #232323; } }
/* ========================================= */
/*          Discount CSS        */
/* ======================================== */
.discount-action {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  z-index: 2; }
  .discount-action .call-banner, .discount-action .call-banner1 {
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat; }
    .discount-action .call-banner .call-banner-inner, .discount-action .call-banner1 .call-banner-inner {
      position: relative;
      z-index: 1; }
  .discount-action .call-banner1 {
    background-size: contain;
    background-attachment: inherit;
    background-position: right; }

ul.social-with-text li {
  text-align: center; }
  ul.social-with-text li a i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100%;
    background: #f1f1f1;
    display: inline-block;
    text-align: center;
    margin-right: 18px; }

@media (max-width: 991px) {
  .discount-action .call-banner {
    background-size: cover; }
    .discount-action .call-banner .trend-content {
      width: 100% !important;
      padding: 0 !important;
      margin-bottom: 2rem !important; }
    .discount-action .call-banner .call-banner-inner {
      padding: 0 !important;
      width: 100% !important; }
      .discount-action .call-banner .call-banner-inner .trend-content {
        padding: 0 !important;
        text-align: center; }
    .discount-action .call-banner .call-banner-inner1 {
      padding: 30px !important; }
      .discount-action .call-banner .call-banner-inner1 .trend-content-main {
        width: 100% !important; }
  .discount-action .call-banner1 {
    background-size: cover !important; }
    .discount-action .call-banner1 .call-banner-inner {
      margin: 0 !important;
      border-radius: 0 !important; } }
@media (max-width: 767px) {
  .discount-action .call-banner .col-lg-6 {
    padding: 0 !important; }
  .discount-action .call-banner .call-button {
    top: 55px;
    transform: none;
    z-index: 1; }
  .discount-action .call-banner1 .call-banner-inner {
    padding: 30px !important;
    text-align: center; }
  .discount-action .call-banner1 .video-button {
    margin: 60px 0 !important; } }
@media (max-width: 567px) {
  .discount-action .call-banner .call-banner-inner {
    width: 100% !important;
    padding: 0 !important; }

  .section-btns {
    display: block !important; }
    .section-btns a {
      margin: 1rem 0 0 !important;
      width: 100%; } }
/* ========================================= */
/*          Call To Action CSS        */
/* ======================================== */
.call-to-action, .call-to-action1 {
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  background-attachment: fixed;
  position: relative; }
  .call-to-action h2.call-name, .call-to-action1 h2.call-name {
    font-size: 54px; }
  .call-to-action .video-button, .call-to-action1 .video-button {
    position: relative; }
    .call-to-action .video-button img, .call-to-action1 .video-button img {
      border: 8px solid #ffffff2e; }

.call-button {
  position: relative; }
  .call-button button.play-btn {
    position: relative;
    left: 0;
    right: 0;
    padding: 5px;
    background: #ffffff2e;
    border: none;
    border-radius: 50%; }
    .call-button button.play-btn i {
      font-size: 28px;
      height: 70px;
      width: 70px;
      line-height: 2.5;
      text-align: center;
      color: #fff;
      background: #059d9c;
      transition: all ease-in-out 0.5s;
      padding: 0 0 0 5px;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -ms-border-radius: 50%;
      -moz-border-radius: 50%; }
    .call-button button.play-btn::after, .call-button button.play-btn::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      z-index: -1;
      bottom: 0;
      left: 0;
      border-radius: 50%;
      border: 2px solid #c5954880;
      opacity: 0.3; }
    .call-button button.play-btn::before {
      -webkit-animation: ripple 2s linear infinite;
      animation: ripple 2s linear infinite; }
    .call-button button.play-btn::after {
      -webkit-animation: ripple 2s linear 1s infinite;
      animation: ripple 2s linear 1s infinite; }

.call-to-action1::before, .call-to-action1::after {
  display: none; }

/* ========================================= */
/*         Counter CSS        */
/* ======================================== */
.counter {
  margin-top: -120px; }
  .counter .counter-item h2 {
    font-size: 50px; }
  .counter .counter-item i {
    font-size: 40px; }
  .counter .d-line {
    border-right: 1px dashed #f1f1f1;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%; }

.counter_one:before {
  position: absolute;
  top: 10px;
  left: 0;
  bottom: 0;
  background: #fff;
  content: "";
  z-index: -1;
  border-top: 10px solid #059d9c;
  width: 91.3%; }
.counter_one .counter1 {
  position: relative;
  display: block;
  margin-top: -120px;
  z-index: 10; }
  .counter_one .counter1 .counter-item {
    text-align: center;
    width: 100%; }
    .counter_one .counter1 .counter-item h3 {
      font-size: 54px; }
    .counter_one .counter1 .counter-item i {
      font-size: 21px; }
  .counter_one .counter1 .d-line {
    border-right: 1px solid #ccc;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%; }

@media (max-width: 991px) {
  .counter-main {
    width: 100% !important; }
    .counter-main .counter {
      margin: 0 !important; }
    .counter-main .counter-item {
      border: none !important;
      padding: 0 !important; } }
/* ========================================= */
/*          Packages CSS        */
/* ======================================== */
.packages .pg-title i.icon {
  border-radius: 50%;
  height: 80px;
  width: 80px;
  line-height: 2; }
.packages .pg-title h2 span {
  font-weight: 300;
  font-size: 15px;
  display: block; }
.packages .pg-main ul li {
  display: inline-block;
  width: 100%;
  line-height: 3;
  border-bottom: 1px dashed #f1f1f1; }

/* ========================================= */
/*         Top Restro CSS        */
/* ======================================== */
.top-restro .slider-content {
  background: #fff;
  padding: 20px;
  width: 94%;
  margin: 0 auto;
  margin-top: -2rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 15px #cccccc57; }
  .top-restro .slider-content .restro-content li {
    display: block;
    font-size: 15px;
    color: #999; }

/* ========================================= */
/*         Latest Tour CSS        */
/* ======================================== */
.latest-tour .tour-item {
  position: relative;
  overflow: hidden;
  transition: all ease-in-out 0.5s; }
  .latest-tour .tour-item:before {
    position: absolute;
    top: 0px;
    left: 0;
    background: #2e3d629e;
    z-index: 1;
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all ease-in-out 0.5s; }
  .latest-tour .tour-item .tour-image img {
    transition: all ease-in-out 0.5s; }
  .latest-tour .tour-item .tour-content {
    padding: 20px;
    position: absolute;
    bottom: -162px;
    left: 0;
    width: 100%;
    z-index: 1;
    transition: all ease-in-out 0.5s; }
  .latest-tour .tour-item .tour-tag {
    position: absolute;
    padding: 10px;
    top: 20px;
    right: 0;
    background: #059d9c;
    z-index: 1; }
    .latest-tour .tour-item .tour-tag .old-price {
      text-decoration: line-through; }
  .latest-tour .tour-item:hover .tour-content {
    bottom: 50%;
    transform: translateY(50%);
    transition: all ease-in-out 0.5s; }
  .latest-tour .tour-item:hover .tour-image img {
    transform: rotate(5deg) scale(1.2);
    transition: all ease-in-out 0.5s; }
  .latest-tour .tour-item:hover:before {
    opacity: 1;
    visibility: visible;
    transition: all ease-in-out 0.5s; }

/* ========================================= */
/*         Services CSS        */
/* ======================================== */
section.about-detail {
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  section.about-detail .about-image {
    border-radius: 0px;
    overflow: hidden; }
    section.about-detail .about-image img {
      border-radius: 15px; }
  section.about-detail .p-about-us .p-call-action li {
    display: inline-block;
    padding: 5px;
    width: 49%; }
  section.about-detail .about-detail-content {
    border-radius: 15px; }

@media (max-width: 811px) {
  section.about-detail {
    background-size: cover; } }
@media (max-width: 767px) {
  section.about-us {
    padding-bottom: 3rem; }
    section.about-us .about-listing:after {
      display: none; }
    section.about-us .counter .d-line {
      position: relative;
      border: none; }

  .about-banner {
    text-align: center; }
    .about-banner .about-banner-content {
      margin-bottom: 2rem; }

  section.about-detail:before {
    display: none; } }
    
/* ========================================= */
/*         Quick Services CSS        */
/* ======================================== */
.quick-service {
  position: relative; }
  .quick-service .card-box {
    position: relative;
    width: 320px;
    height: 320px;
    transform-style: preserve-3d;
    perspective: 1000px;
    border-radius: 15px;
    margin: 0 auto; }
    .quick-service .card-box .box-inner {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: 1s cubic-bezier(0.15, 0.15, 0.3, 1.3); }
      .quick-service .card-box .box-inner .box-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        .quick-service .card-box .box-inner .box-image img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover; }
        .quick-service .card-box .box-inner .box-image .box-title {
          position: absolute;
          top: 40%;
          left: 0;
          right: 0;
          text-align: center;
          z-index: 2;
          background: #059d9c;
          padding: 15px 10px; }
          .quick-service .card-box .box-inner .box-image .box-title i {
            font-size: 32px;
            height: 80px;
            width: 80px;
            border-radius: 50%;
            background: #fff;
            color: #059d9c;
            line-height: 2.4; }
      .quick-service .card-box .box-inner .top-service {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        transform-style: preserve-3d;
        padding: 0;
        transform: rotateY(180deg);
        border-radius: 15px; }
        .quick-service .card-box .box-inner .top-service .service-inner {
          transform-style: preserve-3d;
          padding: 20px;
          background: #059d9c;
          transform: translateZ(100px); }
          .quick-service .card-box .box-inner .top-service .service-inner i {
            font-size: 38px;
            height: 90px;
            width: 90px;
            border-radius: 50%;
            background: #fff;
            color: #059d9c;
            line-height: 2.4; }
    .quick-service .card-box:hover .box-inner {
      transform: rotateY(180deg); }
  .quick-service .top-service {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 45px 25px;
    border-radius: 15px; }
    .quick-service .top-service i {
      font-size: 3rem;
      margin-bottom: 15px; }
    .quick-service .top-service p {
      color: #f1f1f1;
      font-size: 13px; }

@media (max-width: 359px) {
  .quick-service .card-box {
    height: 280px;
    width: 280px; } }
      /* ========================================= */
/*          MODERN ABOUT US SECTION         */
/* ========================================= */

.about-us-modern {
  padding: 1rem 0;
  position: relative;
  background: #f8fafc;
  overflow: hidden;
}

/* Simple background pattern */
.about-us-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23059d9c' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.5;
  z-index: 0;
}

/* Modern Content Container */
.about-content-modern {
  position: relative;
  z-index: 2;
  background: white;
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  margin-bottom: 3rem;
}

/* Section Badge */
.section-badge {
  display: inline-block;
  background: linear-gradient(135deg, #059d9c, #059d9c);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(5, 157, 156, 0.2);
}

/* Modern Headings */
.about-heading-modern {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1a202c;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  position: relative;
}

.about-heading-modern::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  border-radius: 2px;
}

.about-subheading {
  font-size: 1.5rem;
  font-weight: 600;
  color: #059d9c;
  margin-bottom: 1.5rem;
  line-height: 1.4;
}

/* Modern Text */
.about-text-modern {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #4a5568;
  margin-bottom: 1rem;
}

.about-text-modern p {
  margin-bottom: 1.5rem;
}

/* Modern Image Container */
.about-image-modern {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
    max-height: 650px; /* Adjust this value as needed */

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}

.about-image-modern:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.about-image-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(5, 157, 156, 0.1) 0%,
    transparent 50%,
    rgba(197, 149, 72, 0.1) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.about-image-modern:hover::before {
  opacity: 1;
}

/* Modern Stats Counter */
.stats-counter-modern {
  background: white;
  border-radius: 20px;
  padding: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 3;
}

.stat-item-modern {
  text-align: center;
  padding: 1.5rem;
  transition: all 0.3s ease;
  border-radius: 15px;
  
}

.stat-item-modern:hover {
  background: rgba(5, 157, 156, 0.05);
  transform: translateY(-5px);
}


.stat-label {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(248, 249, 250, 0.6); /* adjust 0.6 as needed */
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Divider */
.stat-divider {
  width: 1px;
  background: rgba(5, 157, 156, 0.1);
  margin: 0 auto;
  height: 60px;
}

/* Responsive Design */
@media (max-width: 992px) {
  .about-us-modern {
    padding: 3rem 0;
  }
  
  .about-content-modern {
    padding: 2rem;
    margin-bottom: 2rem;
  }
  
  .about-heading-modern {
    font-size: 1.5rem;
  }
  
  .stats-counter-modern {
    margin-top: 2rem;
  }
  
  .stat-divider {
    display: none;
  }
  
  .stat-item-modern {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 768px) {
  .about-content-modern {
    padding: 1.5rem;
  }
  
  .about-heading-modern {
    font-size: 1.5rem;
  }
  
  .about-subheading {
    font-size: 1.25rem;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
}

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

.about-content-modern,
.stats-counter-modern {
  animation: fadeInUp 0.8s ease-out forwards;
}
/* ========================================= */
/*         call-to-action CSS        */
/* ======================================== */
.call-to-action {
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  background-attachment: fixed;
  position: relative; }
  .call-to-action .call-content {
    position: relative;
    z-index: 1; }
    .call-to-action .call-content h2 {
      font-weight: 700;
      font-size: 42px;
      text-transform: uppercase;
      display: inline-block;
      border: 1px solid #ffffff40;
      padding: 10px 20px;
      background: #ffffff14;
      margin-bottom: 14px !important;
      border-radius: 15px;
      margin-bottom: 17px !important; }
      .call-to-action .call-content h2 span {
        color: #059d9c; }
    .call-to-action .call-content p {
      font-size: 18px;
      font-weight: 700; }

section.call-to-action1 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed; }
  section.call-to-action1 .call-inner {
    position: relative;
    z-index: 1; }
    section.call-to-action1 .call-inner .call-content {
      position: relative;
      z-index: 1; }
      section.call-to-action1 .call-inner .call-content h2 {
        font-weight: 700;
        font-size: 42px;
        text-transform: uppercase;
        display: inline-block;
        border: 1px solid #ffffff40;
        padding: 10px 20px;
        background: #ffffff14; }
        section.call-to-action1 .call-inner .call-content h2 span {
          color: #059d9c; }
      section.call-to-action1 .call-inner .call-content p {
        font-size: 18px; }
  section.call-to-action1:before, section.call-to-action1:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(47, 38, 57, 0.43); }
  section.call-to-action1:after {
    background: #fff;
    width: 33%;
    transform: skew(30deg);
    right: -196px;
    left: inherit; }
  section.call-to-action1 .call-main1 .video-button .call-button {
    top: inherit;
    transform: none; }

section.call-to-action.maincounter {
  background-image: url(../images/calltoaction3.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding-top: 70px;
  padding-bottom: 75px; }
  section.call-to-action.maincounter .counter {
    border: none; }

@media (max-width: 991px) {
  section.call-to-action {
    padding-bottom: 3rem; }
    section.call-to-action .call-content {
      width: 100% !important;
      text-align: center !important; }
    section.call-to-action .section-title {
      width: 100% !important; }

  section.call-to-action1:after {
    display: none; }
  section.call-to-action1 .call-inner {
    text-align: center; }
    section.call-to-action1 .call-inner .call-content {
      text-align: center !important;
      padding: 0 0 2rem !important; }

  .newsletter-image {
    text-align: center; }
    .newsletter-image img {
      width: 70%;
      margin: 0 auto; } }
@media (max-width: 811px) {
  section.call-to-action .counter .counter-item h3 {
    font-size: 32px; } }
@media (max-width: 767px) {
  section.call-to-action {
    padding-bottom: 3rem; }
    section.call-to-action .call-content-inner {
      margin-top: 2rem;
      text-align: center; }
    section.call-to-action .counter .d-line {
      position: relative;
      border: none;
      margin-bottom: 2rem; }

  .call-to-main .call-to-action .call-content {
    width: 100% !important;
    text-align: center !important; }

  .counter_one .counter1 .d-line {
    position: relative;
    border: none; }

  .call-main1 .action-content {
    width: 100% !important; } }
@media (max-width: 639px) {
  .call-to-action .call-content h2 {
    font-size: 24px; }

  .call-to-main .call-to-action {
    padding: 20px !important; } }
/* ========================================= */
/*         Team CSS        */
/* ======================================== */
.our-team {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; }
  .our-team .team-image {
    overflow: hidden;
    transition: all ease-in-out 0.5s; }
    .our-team .team-image img {
      transition: all ease-in-out 0.5s;
      width: 100%; }
    .our-team .team-image:hover img {
      transition: all ease-in-out 0.5s;
      transform: scale(1.1); }
  .our-team .team-list {
    overflow: hidden; }
    .our-team .team-list .team-content {
      transition: all 0.5s;
      position: relative;
      z-index: 1; }
    .our-team .team-list .team-content1 {
      background: #fff;
      top: -2rem;
      transition: all 0.5s;
      position: relative;
      z-index: 1;
      width: 96%;
      padding-top: 20px; }
    .our-team .team-list:hover .team-content {
      margin-top: -15px;
      transition: all 0.5s; }

/* ========================================= */
/*          Reviews CSS        */
/* ======================================== */
/* ========================================= */
/*         MODERN TESTIMONIAL SECTION        */
/* ========================================= */

.testimonials-modern {
  padding: 5rem 0;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f0f7ff 100%);
  position: relative;
  overflow: hidden;
}

.testimonials-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(5, 157, 156, 0.2), 
    transparent);
}

/* Section Header */
.testimonials-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
}

.testimonials-header h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--primary);
  position: relative;
  display: inline-block;
}

.testimonials-header .theme {
  color: var(--primary-color);
}

.testimonials-header p {
  font-size: 1.1rem;
  color: var(--gray-medium);
  max-width: 800px;
  margin: 1.5rem auto 0;
  line-height: 1.7;
}

/* Testimonials Grid */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 0 auto;
}

/* Testimonial Card - Fixed positioning with top border */
.testimonial-card-modern {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-light);
  transition: var(--transition);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Ensures the ::before stays within card */
}

/* Top colored line - FIXED VERSION */
.testimonial-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #059d9c;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  transition: background 0.3s ease, transform 0.3s ease;
  transform: translateY(0); /* Ensures it stays visible */
}

.testimonial-card-modern:hover::before {
  background: #c59548; /* Brown on hover */
  transform: translateY(0); /* Keep it visible */
}

.testimonial-card-modern:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(5, 157, 156, 0.2);
}

/* Quote Icon */
.quote-icon-modern {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: rgba(5, 157, 156, 0.1);
  font-size: 3rem;
  z-index: 1;
}

/* Rating */
.testimonial-rating {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 1.5rem;
  z-index: 2;
  position: relative;
}

.rating-star-modern {
  width: 18px;
  height: 18px;
  background: #ffd700;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Testimonial Text */
.testimonial-text-modern {
  flex: 1;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.testimonial-text-modern p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--dark-light);
  font-style: italic;
  margin: 0;
  position: relative;
  padding-left: 1.5rem;
}

.testimonial-text-modern p::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -0.5rem;
  font-size: 3rem;
  color: var(--primary-color);
  opacity: 0.3;
  font-family: serif;
  line-height: 1;
}

/* Client Info */
.client-info-modern {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-light);
  z-index: 2;
  position: relative;
}

.client-avatar-modern {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--white);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.client-avatar-modern img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-details-modern {
  flex: 1;
}

.client-name-modern {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-color);
  margin: 0 0 0.25rem 0;
}

.client-role-modern {
  font-size: 0.9rem;
  color: var(--primary-color);
  font-weight: 600;
  margin: 0;
}

/* Remove the duplicate ::before rule that was causing issues */

/* Enhanced fade-in animation with scroll trigger */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

/* Initial state for cards */
.testimonial-card-modern {
  opacity: 0;
  animation-fill-mode: both;
}

/* Animation classes for scroll triggering */
.testimonial-card-modern.animate-fade-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.testimonial-card-modern.animate-fade-scale {
  animation: fadeInScale 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.testimonial-card-modern.animate-slide-fade {
  animation: slideInFade 0.5s ease-out forwards;
}

/* Add staggered animation delays for cards */
.testimonial-card-modern:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card-modern:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card-modern:nth-child(3) { animation-delay: 0.3s; }
.testimonial-card-modern:nth-child(4) { animation-delay: 0.4s; }
.testimonial-card-modern:nth-child(5) { animation-delay: 0.5s; }
.testimonial-card-modern:nth-child(6) { animation-delay: 0.6s; }

/* Responsive Design */
@media (max-width: 1200px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .testimonials-header h2 {
    font-size: 2.4rem;
  }
}

@media (max-width: 992px) {
  .testimonials-modern {
    padding: 4rem 0;
  }
  
  .testimonials-header h2 {
    font-size: 2.2rem;
  }
  
  .testimonial-card-modern {
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .testimonials-header h2 {
    font-size: 2rem;
  }
  
  .testimonials-header p {
    font-size: 1rem;
    padding: 0 1rem;
  }
  
  .testimonial-card-modern {
    padding: 1.75rem;
  }
  
  .testimonial-text-modern p {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .testimonials-modern {
    padding: 3rem 0;
  }
  
  .testimonials-header h2 {
    font-size: 1.8rem;
  }
  
  .testimonial-card-modern {
    padding: 1.5rem;
  }
  
  .client-info-modern {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  
  .client-details-modern {
    text-align: center;
  }
}/* ========================================= */
/*          News section CSS        */
/* ======================================== */
/* ========================================= */
/*         MODERN PROFESSIONAL LAYOUT        */
/* ========================================= */

/* Company Credentials Grid */
.company-credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin: 40px 0;
}

.credential-card {
  background: var(--white);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  border-top: 4px solid var(--primary);
  transition: transform 0.3s ease;
}

.credential-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.credential-card .credential-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--white);
  font-size: 28px;
}

.credential-card h4 {
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 10px;
  font-weight: 700;
}

.credential-card p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .company-credentials-grid {
    grid-template-columns: 1fr;
  }
}
/* Modern Styles for Tawaf Travel Packages Page */
:root {
  --primary-color: #059d9c;
  --primary: #059d9c;
  --accent-color: #c59548;
  --accent-light: #d4a95a;
  --dark-color: #101011;
  --dark-light: #2c3e50;
  --light-color: #f8f9fa;
  --gray-light: #e9ecef;
  --gray-medium: #6c757d;
  --white: #ffffff;
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --border-radius: 16px;
  --border-radius-lg: 24px;
}

:root {
  --primary: #059d9c;
  --primary: #059d9c;
  --primary-light: #06b3b2;
  --accent: #c59548;
  --accent-light: #d4a95a;
  --dark: #c59548;
  --dark-light: #2c3e50;
  --light: #f8f9fa;
  --gray-light: #e9ecef;
  --gray: #6c757d;
  --white: #ffffff;
  --black: #2c3e50;
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);
  --border-radius-sm: 8px;
  --border-radius: 16px;
  --border-radius-lg: 24px;
  --border-radius-xl: 32px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========================================= */
/*       MOBILE RESPONSIVE HERO SECTION     */
/* ========================================= */

/* Base container fixes */


@media (max-width: 992px) {
  .modern-hero-content-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    width: 100% !important;
  }

  .hero-content-left {
    width: 100% !important;
    text-align: center !important;
    padding: 0 0.5rem !important;
  }

  .hero-form-right {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0.5rem !important;
  }

  .compact-form-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 1.25rem !important;
  }
}

/* Mobile specific (576px and below) */
@media (max-width: 576px) {
  .modern-hero-section {
    padding: 4rem 0 3rem !important;
  }

  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .modern-hero-content-side {
    gap: 1.5rem !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Left content adjustments */
  .hero-content-left {
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
  }

  .modern-hero-badge {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
  }

  .badge-text {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  .modern-hero-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
    padding: 0 0.5rem !important;
    word-break: break-word !important;
  }

  .modern-hero-description {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1.25rem !important;
    padding: 0 0.5rem !important;
  }

  /* Stats row optimization */
  .modern-hero-stats {
    gap: 0.75rem !important;
    margin: 1rem auto !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    padding: 0 0.5rem !important;
    width: 100% !important;
  }

  .stat-item {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 0.25rem !important;
  }

  

  .stat-label {
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin-top: 0.15rem !important;
  }

  .stat-divider {
    height: 20px !important;
    width: 1px !important;
    margin: 0 0.25rem !important;
    align-self: center !important;
  }

  /* Form container adjustments */
  .hero-form-right {
    padding: 0 !important;
    width: 100% !important;
  }

  .compact-form-container {
    padding: 1rem !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
    width: calc(100% - 1rem) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
  }

  .compact-form-header {
    margin-bottom: 1rem !important;
  }

  .icon-heading {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .compact-form-header h3 {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
  }

  .compact-form-header p {
    font-size: 0.8rem !important;
    margin-top: 0.25rem !important;
  }

  /* Form body adjustments */
  .compact-form-body .form-content-in {
    gap: 0.75rem !important;
  }

  .compact-form-body .form-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .compact-form-body input,
  .compact-form-body select {
    font-size: 0.85rem !important;
    padding: 0.7rem 0.75rem !important;
    height: 42px !important;
  }

  .compact-form-body .input-box {
    margin-bottom: 0 !important;
  }

  /* Submit button */
  .compact-form-body .nir-btn {
    font-size: 0.9rem !important;
    padding: 0.75rem !important;
    height: 44px !important;
  }

  /* Ensure no horizontal overflow */
  * {
    box-sizing: border-box !important;
  }

  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* Extra small devices (below 400px) */
@media (max-width: 400px) {
  .modern-hero-title {
    font-size: 1.35rem !important;
  }

  .modern-hero-description {
    font-size: 0.85rem !important;
  }

  .stat-number {
    font-size: 1rem !important;
  }

  .stat-label {
    font-size: 0.6rem !important;
  }

  .compact-form-container {
    padding: 0.875rem !important;
  }
}

/* Prevent horizontal scrolling */
@media (max-width: 768px) {
  body, html {
    overflow-x: hidden !important;
    width: 100% !important;
  }
  
  .modern-hero-section {
    width: 100% !important;
  }
  
  .modern-hero-content-side {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Fix for form overflowing */
@media (max-width: 576px) {
  .form-content-in {
    width: 100% !important;
  }
  
  .form-row {
    width: 100% !important;
    margin: 0 !important;
  }
  
  .input-box {
    width: 100% !important;
    margin: 0 0 0.75rem 0 !important;
  }
}

/* Ensure proper stacking on very small screens */
@media (max-width: 360px) {
  .modern-hero-stats {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .stat-divider {
    display: none !important;
  }
  
  .stat-item {
    width: 100% !important;
    text-align: center !important;
    padding: 0.5rem !important;
  }
}

/* Modern Hero Section */
.modern-hero-section {
  background: linear-gradient(135deg , var(--primary) 70% , var(--dark) 100%);
  position: relative;
    padding: 4rem 0 3rem !important;
}

.modern-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.9;
}

.modern-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
}

.modern-hero-badge {
    margin-top: -2.5rem; /* Negative margin to pull it up */

}

.badge-text {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 15px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}


.modern-hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
    margin-top: 1rem;

  margin-bottom: 1rem;
  background: linear-gradient(to right, var(--white), rgba(255,255,255,0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.modern-hero-description {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 1rem;
  opacity: 0.9;
}

.modern-hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
/* Reduce bottom space of hero section */
.modern-hero-section {
  padding-bottom: 2rem !important;
}

/* Mobile – even more compact */
@media (max-width: 576px) {
  .modern-hero-section {
    padding-top: 3.5rem !important;
    padding-bottom: 4.5rem !important;
  }
}



.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(248, 249, 250, 0.6); /* adjust 0.6 as needed */
  line-height: 1;
}


.stat-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: rgba(248, 249, 250, 0.6); /* adjust 0.6 as needed */

  letter-spacing: 1px;
  opacity: 0.8;
  margin-top: 0.5rem;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.2);
}

/* Modern Form Section */
.modern-form-section {
  background: var(--white);
  padding: 2rem 0;
  position: relative;
  margin-top: -4rem;
  z-index: 10;
}

.modern-form-container {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-light);
  max-width: 1200px;
  margin: 0 auto;
}

.form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.form-header h2 {
  font-size: 2rem;
color: #059d9c;
  margin-bottom: 0.5rem;
}

.form-header p {
  color: var(--gray);
  font-size: 1.1rem;
}

/* Modern Packages Section */
.modern-packages-section {
  padding: 4rem 0;
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

.section-header-modern {
  text-align: center;
  margin-bottom: 4rem;
}

.section-badge-modern {
  display: inline-block;
background: linear-gradient(135deg, #c59548, #c59548);
  color: var(--white);
  padding: 0.5rem 1.5rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.section-title-modern {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--primary);
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Loading State */
.loading-container {
  text-align: center;
  padding: 4rem;
}

.modern-loader {
  width: 60px;
  height: 60px;
  border: 4px solid var(--gray-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 1rem;
  animation: spin 1s linear infinite;
}

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

/* Modern Packages Grid */
.modern-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

/* Section Divider */
.section-divider-modern {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 0;
  position: relative;
}

.section-divider-modern::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--primary-light), transparent);
}

.divider-content {
  position: relative;
  z-index: 2;
  background: var(--white);
  padding: 0 2rem;
  display: inline-block;
}

.divider-title {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.divider-subtitle {
  color: var(--gray);
  font-size: 1rem;
}

/* Modern Package Card */
.modern-package-card {
  background: var(--white);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  border: 1px solid var(--gray-light);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.modern-package-card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}


/* Card Header */
.package-card-header {
  position: relative;
  overflow: hidden;
}

.package-image-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

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

.modern-package-card:hover .package-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Modern Ribbon */
.modern-ribbon {
  position: absolute;
  top: 20px;
  left: -35px;
  background: #ff0000;
  color: var(--white);
  padding: 0.5rem 2.5rem;
  transform: rotate(-45deg);
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 2;
  box-shadow: 0 3px 10px rgba(197, 149, 72, 0.3);
}

.ribbon-text {
  color: var(--white);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

/* Quick Info Overlay */
.quick-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  padding: 0.5rem;
  display: flex;
  justify-content: space-around;
  backdrop-filter: blur(10px);
}

.quick-info-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--white);
  font-size: 0.9rem;
}

.quick-info-item i {
  color: var(--accent);
}

/* Card Content */
.package-card-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Price Tag */
.price-tag-modern {
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: var(--white);
  padding: 0.50rem 1rem;
  border-radius: var(--border-radius-sm);
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 1rem;
  align-self: flex-start;
  transition: background 0.3s ease; /* Smooth hover effect */
   display: flex; /* Keep as flex */
  justify-content: center; /* Center content horizontally */
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

/* Hover effect */
.price-tag-modern:hover {
  background: var(--dark);
}


.price-from {
  font-size: 0.85rem;
  opacity: 0.9;
}

.price-amount {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.price-pp {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Package Title */
.package-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.package-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.package-title a:hover {
  color: var(--primary);
}

/* Rating Modern */
.rating-modern {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.stars {
  display: flex;
  gap: 0.15rem;
}

.star {
  width: 16px;
  height: 16px;
  background: #ffd700;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.star.active {
  background: #ffd700;
}

.rating-count {
  font-size: 0.9rem;
  color: var(--gray);
}

/* Package Details */
.package-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--dark-light);
}

.detail-item i {
  color: var(--primary);
  width: 20px;
  text-align: center;
}

/* Features Icons */
.package-features {
  margin-bottom: 1.5rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--light);
  border-radius: var(--border-radius-sm);
  transition: var(--transition);
}

.feature-item:hover {
  background: var(--primary-light);
  color: var(--white);
}

.feature-item:hover i {
  color: var(--white);
}

.feature-item i {
  font-size: 1.25rem;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.feature-item span {
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

/* Package Actions */
.package-actions {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.btn-details {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: var(--white);
  padding: 0.5rem 1.5rem;
  border-radius: var(--border-radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}

.btn-details:hover {
  background: linear-gradient(135deg, var(--dark), var(--dark));
  transform: translateY(-2px);
  color: white;
  box-shadow: var(--shadow-md);
}

.quick-contact-buttons {
  display: flex;
  gap: 0.5rem;
}

.btn-whatsapp, .btn-call {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  transition: var(--transition);
}

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
}

.btn-whatsapp:hover {
  background: #128C7E;
  transform: translateY(-2px);
}

.btn-call {
 background: #007bff; /* friendly, attention-grabbing blue */
  color: var(--white);
}

.btn-call:hover {
  background: var(--black);
  transform: translateY(-2px);
    color: var(--white);

}
/* Enhanced Modern Headings */
.section-header-modern {
  position: relative;
  padding: 2rem 0;
}


/* Enhanced Badge */
.hero-badge-premium {
  display: inline-block;
  background: linear-gradient(135deg, #c59548, #e6b960);
  color: var(--white);
  padding: 0.6rem 2rem;
  border-radius: 30px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(197, 149, 72, 0.3);
}

.hero-badge-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.7s ease;
}

.hero-badge-premium:hover::before {
  left: 100%;
}

/* Enhanced Main Title */
.section-title-modern {
  font-size: 3rem;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 1rem;
  line-height: 1.1;
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100%;
  padding-bottom: 1rem;
}

.section-title-modern::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  border-radius: 2px;
}

.section-title-modern::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 8px;
  background: linear-gradient(90deg, transparent, #c59548, transparent);
  opacity: 0.5;
  border-radius: 4px;
}

/* Enhanced Subtitle */
.section-subtitle {
  font-size: 1.2rem;
  color: var(--dark-light);
  max-width: 900px;
  margin: 1.5rem auto 0;
  line-height: 1.6;
  position: relative;
  padding: 0 2rem;
  font-weight: 400;
}

.section-subtitle::before,
.section-subtitle::after {
  content: "✦";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 1rem;
}

.section-subtitle::before {
  left: 0;
}

.section-subtitle::after {
  right: 0;
}

/* Enhanced Divider Titles */
.divider-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  padding: 1.5rem 3rem;
  display: inline-block;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(197, 149, 72, 0.2);
}

.divider-title {
  font-size: 2.2rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  padding-bottom: 0.5rem;
}



.divider-subtitle {
  color: var(--dark-light);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Enhanced Package Titles */
.package-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 0.75rem;
  line-height: 1.3;
  position: relative;
  padding-bottom: 0.5rem;
}

.package-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
  transition: width 0.3s ease;
}

.package-title a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s ease;
  display: block;
  padding-right: 1.5rem;
  position: relative;
}

.package-title a::after {
  content: '→';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: var(--primary);
  font-weight: bold;
  transition: all 0.3s ease;
}

.package-title a:hover {
  color: var(--primary);
  transform: translateX(5px);
}

.package-title a:hover::after {
  opacity: 1;
  right: -10px;
}

.modern-package-card:hover .package-title::after {
  width: 80px;
}

/* Responsive Heading Adjustments */
@media (max-width: 768px) {
  .section-title-modern {
    font-size: 2.2rem;
  }
  
  .section-title-modern::after {
    width: 80px;
  }
  
  .divider-title {
    font-size: 1.8rem;
  }
  
  .package-title {
    font-size: 1.3rem;
  }
  
  .section-subtitle {
    font-size: 1.1rem;
    padding: 0 1.5rem;
  }
  
  .divider-content {
    padding: 1rem 2rem;
  }
}

@media (max-width: 480px) {
  .section-title-modern {
    font-size: 1.8rem;
  }
  
  .hero-badge-premium {
    padding: 0.5rem 1.5rem;
    font-size: 0.8rem;
  }
  
  .section-subtitle {
    font-size: 1rem;
    padding: 0 1rem;
  }
  
  .divider-title {
    font-size: 1.5rem;
  }
}
/* Trust Section */
.modern-trust-section {
  padding: 2rem 0;
  background: var(--light);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.trust-item {
  text-align: center;
  padding: 2rem;
  background: var(--white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.trust-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.trust-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: var(--white);
  font-size: 1.75rem;
}

.trust-item h3 {
  font-size: 1.25rem;
  color: var(--black);
  margin-bottom: 0.75rem;
}

.trust-item p {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Mobile Styles - FIXED VERSION */
@media (max-width: 768px) {
  .modern-trust-section {
    padding: 2.5rem 0.75rem !important; /* Reduced vertical and horizontal padding */
  }
  
  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  
  .trust-grid {
    grid-template-columns: 1fr !important; /* Single column */
    gap: 1.25rem !important; /* Smaller gap between cards */
    margin: 0 !important; /* Remove any margin */
    width: 100% !important;
  }
  
  .trust-item {
    padding: 1.75rem 1.5rem !important; /* Reduced padding */
    min-height: auto !important; /* Let content determine height */
    height: auto !important; /* Natural height */
    width: 100% !important; /* Full width of container */
    margin: 0 !important; /* Remove any margin */
    border-radius: 16px !important; /* Slightly smaller radius */
    display: block !important; /* Remove flex properties */
    aspect-ratio: unset !important; /* Remove aspect ratio */
  }
  
  .trust-icon {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 1rem !important;
    font-size: 1.5rem !important;
  }
  
  .trust-item h3 {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.3 !important;
  }
  
  .trust-item p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    padding: 0 !important; /* Remove horizontal padding */
  }
}

/* Small Mobile (≤ 576px) - Even tighter */
@media (max-width: 576px) {
  .modern-trust-section {
    padding: 2rem 0.5rem !important;
  }
  
  .trust-grid {
    gap: 1rem !important;
  }
  
  .trust-item {
    padding: 1.5rem 1.25rem !important;
    border-radius: 14px !important;
  }
  
  .trust-icon {
    width: 55px !important;
    height: 55px !important;
    margin-bottom: 0.75rem !important;
    font-size: 1.25rem !important;
  }
  
  .trust-item h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .trust-item p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
}

/* Extra Small (≤ 375px) */
@media (max-width: 375px) {
  .modern-trust-section {
    padding: 1.75rem 0.5rem !important;
  }
  
  .trust-item {
    padding: 1.25rem 1rem !important;
    border-radius: 12px !important;
  }
  
  .trust-icon {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 0.75rem !important;
  }
}
/* Modern Content Section */

/* Side-by-Side Hero Layout for Blog Page */
.blog-hero-premium {
  background: linear-gradient(135deg, #1e3a8a 0%, #059d9c 100%) !important;
  padding: 4rem 0 3rem !important;
  position: relative;
  overflow: hidden;
}

.blog-hero-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.9;
}

.modern-hero-content-side {
  display: flex;
  align-items: stretch;
  gap: 3rem;
  position: relative;
  z-index: 2;
}

.hero-content-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  padding-right: 2rem;
}

.hero-form-right {
  flex: 0 0 380px;
  display: flex;
  align-items: center;
}

/* Compact Form Container */
.compact-form-container {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-xl);
  width: 100%;
  border: 1px solid var(--gray-light);
  position: relative;
  z-index: 10;
}

.compact-form-header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.compact-form-header h3 {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.compact-form-header .icon-inline {
  color: var(--primary);
  font-size: 1.2rem;
}

.compact-form-header p {
  color: var(--gray);
  font-size: 0.95rem;
}

.compact-form-body {
  width: 100%;
}

/* Responsive Adjustments for Side-by-Side Layout */
@media (max-width: 1200px) {
  .modern-hero-content-side {
    gap: 2rem;
  }
  
  .hero-form-right {
    flex: 0 0 350px;
  }
}

@media (max-width: 992px) {
  .modern-hero-content-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    width: 100% !important;
  }

  .hero-content-left {
    width: 100% !important;
    text-align: center !important;
    padding: 0 0.5rem !important;
    padding-right: 0 !important;
  }

  .hero-form-right {
    width: 100% !important;
    max-width: 500px !important;
    padding: 0 0.5rem !important;
    margin: 0 auto !important;
  }

  .compact-form-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 1.5rem !important;
  }
}

/* Mobile specific (576px and below) */
@media (max-width: 576px) {
  .blog-hero-premium {
    padding: 3rem 0 2rem !important;
  }

  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .modern-hero-content-side {
    gap: 1.5rem !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* Left content adjustments */
  .hero-content-left {
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
  }

  .modern-hero-badge {
    margin-top: 0 !important;
  }

  .badge-text {
    font-size: 0.8rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  .modern-hero-title {
    font-size: 2rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
    padding: 0 0.5rem !important;
    word-break: break-word !important;
  }

  .modern-hero-description {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1.25rem !important;
    padding: 0 0.5rem !important;
  }

  /* Stats row optimization */
  .modern-hero-stats {
    gap: 0.75rem !important;
    margin: 1rem auto !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    padding: 0 0.5rem !important;
    width: 100% !important;
    
  }



 

  .stat-label {
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    word-break: break-word !important;
    margin-top: 0.15rem !important;
  }

  .stat-divider {
    height: 20px !important;
    width: 1px !important;
    margin: 0 0.25rem !important;
    align-self: center !important;
  }

  /* Form container adjustments */
  .hero-form-right {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .compact-form-container {
    padding: 1rem !important;
    border-radius: 12px !important;
    margin: 0 auto !important;
    width: calc(100% - 1rem) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
  }

  .compact-form-header {
    margin-bottom: 1rem !important;
  }

  .compact-form-header h3 {
    font-size: 1.1rem !important;
    line-height: 1.2 !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .compact-form-header p {
    font-size: 0.8rem !important;
    margin-top: 0.25rem !important;
  }
}

/* Trust Badges for Blog Page */


.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: rgba(5, 157, 156, 0.1);
  border-radius: 10px;
  border-left: 4px solid var(--primary);
  transition: transform 0.3s ease;
}

.trust-badge:hover {
  transform: translateY(-3px);
}

.trust-badge i {
  color: var(--primary);
  font-size: 1.5rem;
}

.trust-badge span {
  font-weight: 600;
  color: var(--black);
}

/* Fix for blog hero title gradient */
.blog-hero-premium .modern-hero-title {
  background: linear-gradient(to right, var(--white), rgba(255,255,255,0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
premium-blog-section{
margin-bottom: 2rem;
}

.premium-blog-layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 3rem;
  max-width: 1400px;
}

/* Search Section */
.search-section-premium {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-light);
}

.search-header-premium {
  margin-bottom: 1.5rem;
}

.search-header-premium h2 {
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.search-header-premium p {
  color: var(--gray);
  font-size: 0.95rem;
}

/* Latest Blogs Section */
.latest-blogs-section {
  margin-bottom: 3rem;
}

.section-header-premium {
  margin-bottom: 2rem;
  text-align: center;
}

.section-header-premium h2 {
  font-size: 2.2rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
  font-weight: 800;
}

.section-header-premium p {
  color: var(--gray);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

/* Premium Blog Grid */
.premium-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Premium Blog Card */
.premium-blog-card {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--gray-light);
}

.premium-blog-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-light);
}

.blog-card-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  
}

@media (max-width: 992px) {
  .blog-card-inner {
    grid-template-columns: 1fr;
  }
}

/* Blog Image */
.blog-image-wrapper {
  position: relative;
  overflow: hidden;
}

.blog-image-premium {
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

.premium-blog-card:hover .blog-image-premium {
  transform: scale(1.05);
}

.image-overlay-premium {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1.5rem;
}

.read-time-premium {
  background: rgba(255,255,255,0.9);
  color: var(--primary);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.blog-category-premium {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
}

.category-badge {
  background: var(--primary);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Blog Content */
.blog-content-premium {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-meta-premium {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  color: var(--gray);
  font-size: 0.9rem;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.meta-separator {
  color: var(--gray-light);
}

.blog-title-premium {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 1rem;
  line-height: 1.4;
}

.blog-title-premium a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-title-premium a:hover {
  color: var(--primary);
}

.blog-excerpt-premium {
  margin-bottom: 1rem; /* Reduced from 1.5rem */
  /* Optional: Limit to fewer lines */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Show only 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog Actions */
.blog-actions-premium {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-light);
}

.btn-read-premium {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%);
  color: var(--white);
  padding: 0.50rem 1rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-read-premium:hover {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  transform: translateX(5px);
  color: var(--white);
}

.blog-stats-premium {
  display: flex;
  gap: 1.5rem;
}





/* Premium Sidebar */
.premium-sidebar {
  position: relative;
}

.sidebar-sticky-premium {
  position: sticky;
  top: 120px;
}

/* Sidebar Widgets */
.sidebar-widget-premium {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-light);
}

.widget-header-premium {
  border-bottom: 2px solid var(--primary-light);
}

.widget-header-premium h3 {
  font-size: 1.3rem;
  color: var(--primary);
  font-weight: 700;
  display: flex;
  align-items: center;
}

.widget-header-premium p {
  color: var(--gray);
  font-size: 0.9rem;
}

/* Popular Articles */
.popular-articles-list {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 1.25rem;
}

.popular-article-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.popular-article-item:hover {
  background: rgba(5, 157, 156, 0.05);
  border-color: var(--primary-light);
  transform: translateX(5px);
}

.article-rank-premium {
  flex-shrink: 0;
}

.rank-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--primary-light);
  color: var(--white);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
}

.article-content-premium {
  flex-grow: 1;
}

.article-title-premium {
  font-size: 1rem;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.article-title-premium a {
  color: inherit;
  text-decoration: none;
}

.article-title-premium a:hover {
  color: var(--primary);
}

.article-meta-premium {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.article-views-premium {
  color: var(--gray);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.article-category-premium {
  background: rgba(5, 157, 156, 0.1);
  color: var(--primary);
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 600;
}

.article-link-premium {
  color: var(--primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: gap 0.3s ease;
}

.article-link-premium:hover {
  gap: 0.5rem;
  color: var(--primary);
}

/* Newsletter Widget */
.newsletter-form-premium {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 1rem;
}

.input-group-premium {
  position: relative;
}

.input-icon-premium {
  position: absolute;
  top: 50%;
  padding: 1rem;
  transform: translateY(-50%);
  color: var(--primary);
  z-index: 2;
}

.newsletter-input-premium {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border: 2px solid var(--gray-light);
  border-radius: var(--border-radius);
  font-size: 1rem;
  background: var(--white);
  color: var(--black);
  transition: all 0.3s ease;
}

.newsletter-input-premium:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(5, 157, 156, 0.15);
}

.btn-subscribe-premium {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%);
  color: var(--white);
  border: none;
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-subscribe-premium:hover {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(5, 157, 156, 0.2);
}

.privacy-note-premium {
  color: var(--gray);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Categories Widget */
.categories-list-premium {
  list-style: none;
  padding: 1rem;
  margin: 0;
}

.categories-list-premium li {
  margin-bottom: 0.75rem;
}

.categories-list-premium li:last-child {
  margin-bottom: 0;
}

.category-link-premium {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  color: var(--black);
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.category-link-premium:hover {
  background: rgba(5, 157, 156, 0.05);
  border-color: var(--primary-light);
  color: var(--primary);
  transform: translateX(5px);
}

.category-name {
  font-weight: 500;
}

.category-count {
  background: var(--primary-light);
  color: var(--white);
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Premium Content Section */
.styled-content-premium {
  color: var(--black);
  line-height: 1.8;
  font-size: 1rem; /* base paragraph font size */
}

/* Headings inside premium content */
.styled-content-premium h1 {
  font-size: 2rem;  /* clearly bigger than paragraph */
  margin: 2rem 0 1rem;
  color: var(--black);
}

.styled-content-premium h2 {
  font-size: 1.5rem;
  margin: 1.8rem 0 1rem;
  color: var(--black);
}

.styled-content-premium h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.8rem;
  color: var(--black);
}

.styled-content-premium h4 {
  font-size: 1.3rem;
  margin: 1.2rem 0 0.6rem;
  color: var(--black);
}

/* Paragraphs */
.styled-content-premium p {
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

/* Lists */
.styled-content-premium ul,
.styled-content-premium ol {
  margin: 1rem 0 1rem 2rem;
}

.styled-content-premium li {
  margin-bottom: 0.5rem;
}
/* Premium Content Section */
.styled-content-premium {
  color: var(--black);
  line-height: 1.8;
  font-size: 1rem;
  width: 100%;
  overflow-wrap: break-word;
}

/* Lists - Comprehensive styling */
.styled-content-premium ul,
.styled-content-premium ol {
  margin: 1.5rem 0;
  padding-left: 2rem;
}

.styled-content-premium ul {
  list-style-type: disc;
}

.styled-content-premium ol {
  list-style-type: decimal;
}

/* Nested lists */
.styled-content-premium ul ul,
.styled-content-premium ol ul {
  list-style-type: circle;
  margin: 0.5rem 0 0.5rem 1.5rem;
}

.styled-content-premium ul ul ul,
.styled-content-premium ol ul ul {
  list-style-type: square;
}

.styled-content-premium ol ol,
.styled-content-premium ul ol {
  list-style-type: lower-alpha;
  margin: 0.5rem 0 0.5rem 1.5rem;
}

.styled-content-premium ol ol ol,
.styled-content-premium ul ol ol {
  list-style-type: lower-roman;
}

/* List items */
.styled-content-premium li {
  margin-bottom: 0.5rem;
  display: list-item;
  position: relative;
}

/* Ensure bullets are visible */
.styled-content-premium li::marker {
  color: black; /* Optional: style the bullets */
}

/* If the content uses custom bullet points with special characters */
.styled-content-premium p:has(> strong:contains("•")) {
  /* Handle cases where bullets are manually added */
}

/* Responsive Design */
@media (max-width: 1200px) {
  .premium-blog-layout {
    gap: 2rem;
  }
}

@media (max-width: 992px) {
  .premium-blog-layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar-sticky-premium {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  .newsletter-widget {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .blog-hero-premium {
    height: 350px;
    margin-bottom: 2rem;
  }
  
  .hero-title-premium {
    font-size: 2.5rem;
  }
  
  .section-header-premium h2 {
    font-size: 1.8rem;
  }
  
  .blog-card-inner {
    min-height: auto;
  }
  
  .sidebar-sticky-premium {
    grid-template-columns: 1fr;
  }
  
  .newsletter-widget {
    grid-column: span 1;
  }
  
  .premium-blog-grid {
    gap: 1.5rem;
  }
}

@media (max-width: 576px) {
  .blog-hero-premium {
    height: 300px;
  }
  
  .hero-title-premium {
    font-size: 2rem;
  }
  
  .hero-subtitle-premium {
    font-size: 1.1rem;
  }
  
  .search-section-premium,
  .sidebar-widget-premium {
    padding: 1.5rem;
  }
  
  .blog-content-premium {
    padding: 1.5rem;
  }
  
  .blog-actions-premium {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .btn-read-premium {
    width: 100%;
    justify-content: center;
  }
  
  .blog-stats-premium {
    justify-content: center;
  }
}

/* Animation for blog cards */
.premium-blog-card {
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

.premium-blog-card:nth-child(1) { animation-delay: 0.1s; }
.premium-blog-card:nth-child(2) { animation-delay: 0.2s; }
.premium-blog-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }}
/* Need Help Section */
/* ========================================= */
/*       MODERN ZIGZAG HELP SECTION         */
/* ========================================= */

.modern-help-section {
  padding: 2.5rem 0;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

/* Clean top & bottom accent lines */
.modern-help-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  background: #C59548;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.modern-help-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  background: #C59548;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.modern-help-section .container {
  position: relative;
  z-index: 2;
}

.help-container {
  max-width: 800px;
  
  margin: 0 auto;
  text-align: center;
}

.help-content {
  background: rgba(255, 255, 255, 0.95);
  padding: 2.5rem 2.5rem;
    background: linear-gradient(135deg, #059D9C 0%, #059D9C 100%);

  border-radius: 16px;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.15),
    0 4px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
}

.help-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.help-content p {
  font-size: 1.1rem;
  color: white;
  margin-bottom: 2rem;
  line-height: 1.5;
  opacity: 0.9;
}

.help-actions {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.btn-help-call, .btn-help-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  min-width: 200px;
  justify-content: center;
}

.btn-help-call {
  background: white;
  color: var(--primary);
  box-shadow: 0 4px 12px rgba(5, 157, 156, 0.2);
}

.btn-help-call:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(5, 157, 156, 0.25);
}

.btn-help-whatsapp {
  background: #25D366;
  color: white;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}

.btn-help-whatsapp:hover {
  background: #1da851;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.25);
}

.btn-help-call i, .btn-help-whatsapp i {
  font-size: 1.1rem;
}

.help-note {
  padding: 0.75rem;
  background: rgba(5, 157, 156, 0.08);
  border-radius: 6px;
  margin-top: 0.5rem;
}

.help-note p {
  margin: 0;
  font-size: 0.9rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.modern-help-section .help-note i {
  color: white !important;
  font-size: 1rem;
}


/* Subtle background pattern */
.modern-help-section .container::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: rgba(197, 149, 72, 0.08);
  border-radius: 50%;
  z-index: 1;
}

.modern-help-section .container::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 200px;
  height: 200px;
  background: rgba(5, 157, 156, 0.08);
  border-radius: 50%;
  z-index: 1;
}

/* Responsive Design */
@media (max-width: 992px) {
  .modern-help-section {
    padding: 2rem 0;
  }
  
  .help-content {
    padding: 2rem 1.5rem;
  }
  
  .help-content h2 {
    font-size: 1.75rem;
  }
  
  .help-content p {
    font-size: 1rem;
    margin-bottom: 1.75rem;
  }
  
  .btn-help-call, .btn-help-whatsapp {
    padding: 0.75rem 1.75rem;
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  .modern-help-section {
    padding: 1.5rem 0;
  }
  
  .help-content {
    padding: 1.75rem 1.25rem;
    margin: 0 1rem;
  }
  
  .help-content h2 {
    font-size: 1.5rem;
  }
  
  .help-content p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
  
  .help-actions {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .btn-help-call, .btn-help-whatsapp {
    width: 100%;
    max-width: 280px;
    min-width: auto;
  }
  
  .help-note {
    padding: 0.625rem;
  }
  
  .help-note p {
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  .modern-help-section {
    padding: 1.25rem 0;
  }
  
  .help-content {
    padding: 1.5rem 1rem;
  }
  
  .help-content h2 {
    font-size: 1.375rem;
  }
  
  .help-content p {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
  }
  
  .btn-help-call, .btn-help-whatsapp {
    padding: 0.675rem 1.5rem;
    font-size: 0.95rem;
  }
  
  .help-note p {
    font-size: 0.8rem;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 576px) {
  .modern-hero-section {
    padding: 6rem 0 4rem;
  }
  
  .modern-hero-title {
    font-size: 1.875rem;
      margin-top: 1rem;

  }
    .modern-hero-description {
    font-size: 1rem !important; /* Reduced from 1.2rem */
    margin-bottom: 1.5rem; /* Reduced margin to pull stats up */
  }
  
  /* KEEP THE STATS IN ROW FOR MOBILE */
   /* FIX STATS ALIGNMENT */
  .modern-hero-stats {
    flex-direction: row; /* Keep row */
    gap: 1rem; /* Reduced gap */
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
    /* ALIGN STAT ITEMS PROPERLY */

 .stat-number {
    font-size: 1.5rem !important; /* Further reduced */
    line-height: 1;
    margin-bottom: 0.25rem;
  }
  
  .stat-label {
    font-size: 0.7rem !important; /* Further reduced */
  color: rgba(248, 249, 250, 0.6); /* adjust 0.6 as needed */
    margin-top: 0;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap; /* Prevent text wrapping */
  }
  
  
  .stat-divider {
    display: block;
    height: 25px; /* Match text height */
    width: 1px;
    background: rgba(255,255,255,0.2);
    margin: 0 0.5rem;
  }
  
  .modern-form-container {
    padding: 1.5rem;
  }
  
  .section-title-modern {
    font-size: 1.75rem;
  }
  
  .package-actions {
    flex-direction: column;
  }
  
  .btn-details {
    width: 100%;
  }
  
  .quick-contact-buttons {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 576px) {
  .modern-hero-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Prevent wrapping */
    justify-content: space-around !important; /* Even distribution */
    align-items: center !important;
    width: 100% !important;
    overflow-x: auto !important; /* Allow horizontal scroll if needed */
    -webkit-overflow-scrolling: touch !important;
    gap: 0.5rem !important; /* Reduced gap */
    padding: 0.5rem 0 !important;
  }

  .stat-item {
    flex: 1 !important; /* Equal width for all items */
    min-width: 80px !important; /* Minimum width */
    max-width: 110px !important; /* Maximum width */
    text-align: center !important;
    padding: 0.5rem 0.25rem !important;
    white-space: nowrap !important;
  }

  .stat-number {
    font-size: 1.2rem !important; /* Smaller for tight space */
    line-height: 1 !important;
    margin-bottom: 0.25rem !important;
    white-space: nowrap !important;
  }

 

  .stat-divider {
    height: 20px !important;
    width: 1px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    margin: 0 0.25rem !important;
    flex-shrink: 0 !important; /* Don't shrink dividers */
  }
}

/* Extra small phones */
@media (max-width: 360px) {
  .modern-hero-stats {
    gap: 0.25rem !important;
    justify-content: space-between !important;
  }

  .stat-item {
    min-width: 70px !important;
    padding: 0.4rem 0.15rem !important;
  }

  .stat-number {
    font-size: 1.1rem !important;
  }

  .stat-label {
    font-size: 0.55rem !important;
  }

  .stat-divider {
    height: 18px !important;
    margin: 0 0.15rem !important;
  }
}
/* ========================================= */
/*       COMPACT FORM LAYOUT - SIDE BY SIDE */
/* ========================================= */

/* Side-by-Side Layout */
.modern-hero-content-side {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
}

/* Compact Form Container */
.compact-form-container {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 1rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  max-width: 380px;
  margin-left: auto;
}

/* Form Header */
.compact-form-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.icon-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.icon-inline {
  color: var(--primary);
  font-size: 1.5rem;
}


.compact-form-header h3 {
  font-size: 1.4rem;
  color: var(--primary);
  margin-bottom: 0.4rem;
  font-weight: 700;
  line-height: 1.3;
}

.compact-form-header p {
  color: var(--gray);
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.9;
}

/* Compact Form Body */
.compact-form-body .card {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}

.compact-form-body .form-content {
  padding: 0 !important;
  position: static !important;
}

.compact-form-body .form-title1 {
  display: none !important;
}

/* Form Grid Layout - Compact */
.compact-form-body .form-content-in {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
}

/* Form Row - Compact 2-column */
.compact-form-body .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem !important;
  margin-bottom: 0 !important;
}

/* Compact Form Fields */
.compact-form-body .input-box {
  width: 100% !important;
}

.compact-form-body input,
.compact-form-body select {
  width: 100% !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
  background: var(--white) !important;
  color: var(--dark) !important;
  font-family: inherit !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
}

.compact-form-body input::placeholder {
  color: #94a3b8 !important;
  font-size: 0.85rem !important;
}

.compact-form-body input:focus,
.compact-form-body select:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(5, 157, 156, 0.1) !important;
  transform: translateY(-1px);
}

/* Compact Select Styling */
.compact-form-body select.niceSelect {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 12px;
  padding-right: 2.5rem !important;
  cursor: pointer;
}

/* Compact Submit Button */


.compact-form-body .nir-btn {
  width: 100% !important;
  background: linear-gradient(135deg, var(--primary), var(--primary)) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(197, 149, 72, 0.25);
}

.compact-form-body .nir-btn:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary)) !important;
  color: var(--white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(5, 157, 156, 0.25) !important;
}

.compact-form-body .nir-btn i {
  font-size: 1rem;
}

/* Mobile Optimizations */
@media (max-width: 1200px) {
  .modern-hero-content-side {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2rem;
  }
  
  .compact-form-container {
    padding: 1.5rem;
    max-width: 440px;
  }
  
  .compact-form-header h3 {
    font-size: 1.3rem;
  }
}

@media (max-width: 992px) {
  .modern-hero-content-side {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .compact-form-container {
    max-width: 550px;
    margin: 0 auto;
    width: 100%;
  }
  
  .hero-content-left {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .compact-form-container {
    padding: 1.5rem;
    max-width: 500px;
  }
  
  .compact-form-body .form-row {
    gap: 0.625rem !important;
  }
  
  .compact-form-body input,
  .compact-form-body select {
    padding: 0.7rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
  
  .compact-form-header h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 576px) {
  .compact-form-container {
    padding: 1.25rem;
    max-width: 420px;
  }

  
  .compact-form-body .form-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  .compact-form-body .form-content-in {
    gap: 0.75rem !important;
  }
  
  .form-icon {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
  
  .compact-form-header h3 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
  }
  
  .compact-form-header p {
    font-size: 0.85rem;
  }
  
  .compact-form-body .nir-btn {
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 400px) {
  .compact-form-container {
    padding: 1rem;
    max-width: 380px;
  }
  
  .compact-form-header h3 {
    font-size: 1.1rem;
  }
  
  .compact-form-body input,
  .compact-form-body select {
    padding: 0.65rem 0.7rem !important;
    font-size: 0.85rem !important;
  }
}
/* ========================================= */
/*           ENHANCED SECTION TITLES         */
/* ========================================= */

.section-title {
  margin-top: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  padding: 0 1rem;
}

.section-title h4 {
  color: var(--primary-color);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: rgba(5, 157, 156, 0.08);
  border-radius: 30px;
  border: 1px solid rgba(5, 157, 156, 0.15);
}

.section-title h1,
.section-title h2 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--dark-color);
  position: relative;
  color: #059d9c;
}



.section-title p {
  font-size: 1.1rem;
  color: var(--gray-medium);
  line-height: 1.8;
  max-width: 800px;
  margin: 1rem auto 0;
  font-weight: 400;
}

/* ========================================= */
/*           PROFESSIONAL FEATURE CARDS      */
/* ========================================= */



.category-item {
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-light);
  transition: var(--transition);
  height: 100%;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.category-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--primary-color);
  transition: height 0.4s ease;
}

.category-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(5, 157, 156, 0.2);
}

.category-item:hover::before {
  height: 100%;
}

.category-item .trending-topic-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.category-item img {
  width: 60px;
  height: 60px;
  margin-bottom: 1.25rem;
  transition: var(--transition);
  filter: brightness(1) saturate(0.8);
}

.category-item:hover img {
  transform: scale(1.1);
  filter: brightness(1.2) saturate(1);
}

.category-item h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark-color);
  margin: 0;
  transition: var(--transition);
}

.category-item:hover h4 {
  color: #fff !important; /* Changed from var(--primary-color) */
}

/* ========================================= */
/*          MODERN MONTHLY PACKAGES          */
/* ========================================= */

.home_packages_color_background {
  background: var(--light-color);
  position: relative;
}

.home_packages_color_background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(5, 157, 156, 0.2), 
    transparent);
}

/* Monthly Navigation */
.col-3 .category-item {
  min-height: 90px;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-sm);
}

.col-3 .category-item:hover {
  background: var(--primary-color);
  transform: translateY(-5px);
}

.col-3 .category-item h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-color);
}

.col-3 .category-item:hover h4 {
  color: var(--white);
}

.heading_home_h3 {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--dark-color);
  text-align: center;
  margin: 4rem 0 0;
  position: relative;
  padding-bottom: 1.5rem;
  color: #059d9c;
}


/* ========================================= */
/*          PROFESSIONAL ABOUT SECTION       */
/* ========================================= */

.about-us.pt-6 {
  background: var(--white);
  padding: 6rem 0;
  position: relative;
}

.about-content {
  padding-right: 3rem;
}

.about-content h4.theme {
  color: var(--primary-color);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  display: inline-block;
}

.about-content h3 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--dark-color);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.about-content .border-b {
  border-bottom: 1px solid var(--gray-light);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

.about-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--gray-medium);
  margin-bottom: 1.5rem;
}

/* Modern Image Container */
.about-us .col-lg-6.mb-4.pe-4 {
  position: relative;
}

.about-us .col-lg-6.mb-4.pe-4 img {
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  height: auto;
  transition: var(--transition);
}

.about-us .col-lg-6.mb-4.pe-4:hover img {
  transform: scale(1.02);
}

/* ========================================= */
/*          PROFESSIONAL COUNTER SECTION     */
/* ========================================= */

.counter-main {
  margin-top: -60px;
  z-index: 10;
  position: relative;
}

.counter {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-light);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.counter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.counter-item {
  text-align: center;
  padding: 1.5rem;
  position: relative;
}

.counter-item.border-end {
  border-right: 1px solid var(--gray-light) !important;
}

.counter-content h2 {
  font-size: 3rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.counter-content span {
  font-size: 1rem;
  color: var(--gray-medium);
  font-weight: 500;
  display: block;
}

/* ========================================= */
/*        MODERN UMRAH PACKAGES SECTION      */
/* ========================================= */

/* ========================================= */
/*      4-COLUMN COMPACT PACKAGE CARDS       */
/* ========================================= */

.packages-grid-section {
  padding: 2rem 0;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 0 auto;
}

/* Compact Package Card */
.compact-package-card {
  background: var(--white);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-light);
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.compact-package-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(5, 157, 156, 0.2);
}


/* Image Container */
.package-img-container {
  position: relative;
  height: 180px;
  overflow: hidden;
}

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

.compact-package-card:hover .package-img {
  transform: scale(1.05);
}

/* Badge */
.package-hot-badge {
  position: absolute;
  top: 12px;
  left: 12px;
 background: #ff0000 !important; /* Changed to red */
    color: var(--white);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  z-index: 2;
  line-height: 1;
}

/* Card Content */
.package-card-content {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Title */
.package-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dark-color);
  margin: 0 0 0 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.package-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.package-card-title a:hover {
  color: var(--primary-color);
}

/* Rating */
.package-rating-small {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.stars-small {
  display: flex;
  gap: 1px;
  margin-left: 2rem;
}

.star-small {
  width: 12px;
  height: 12px;
  background: #ffd700;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.rating-text {
  font-size: 0.75rem;
  color: var(--gray-medium);
  font-weight: 500;
}

/* Details */
.package-details-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--gray-light);
  border-bottom: 1px solid var(--gray-light);
}

.detail-with-icon {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.detail-icon-small {
  color: var(--primary-color);
  font-size: 0.8rem;
}

.detail-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark-color);
}

/* Price */
.price-box-compact {
  text-align: center;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, rgba(5, 157, 156, 0.05), rgba(197, 149, 72, 0.05));
  border-radius: 8px;
  border: 1px solid rgba(5, 157, 156, 0.1);
}

.price-label-small {
  display: block;
  font-size: 0.7rem;
  color: var(--gray-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem;
  margin-bottom: 0.25rem;
}

.price-currency {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
}

.price-amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}

.price-pp {
  font-size: 0.8rem;
  color: var(--gray-medium);
  font-weight: 500;
}

.price-note-small {
  display: block;
  font-size: 0.75rem;
  color: var(--primary-color);
  font-weight: 600;
}

/* Action Buttons */
.action-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  margin-top: auto;
}


/* View Details button - CHANGE HOVER COLOR */
.btn-view-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--primary-color); /* #059d9c */
  color: var(--white);
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  transition: var(--transition);
  border: none;
  cursor: pointer;
  text-align: center;
  line-height: 1;
}

/* CHANGE THIS HOVER STATE */
.btn-view-details:hover {
  background: #c59548 !important; /* Change to brown */
  color: white !important; /* Ensure text is white */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(197, 149, 72, 0.2); /* Update shadow color */
}
.btn-view-details i {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.btn-view-details:hover i {
  transform: translateX(2px);
}

.quick-actions {
  display: flex;
  gap: 0.5rem;
}

.btn-action-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition);
  font-size: 0.9rem;
}

.btn-whatsapp {
  background: #25D366;
  color: var(--white);
}
.btn-whatsapp:hover {
  background: #1DA851 !important; /* Slightly darker green */
  color: white !important;
}

/* Phone button - CHANGE HOVER COLOR */
.btn-phone {
  background: #007bff; /* friendly, attention-grabbing blue */
  color: var(--white);
}

.btn-phone:hover {
  background: #002246 !important; /* Change to brown */
  color: white !important; /* Ensure text is white */
}
.btn-action-icon:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Responsive Grid */
@media (max-width: 1200px) {
  .packages-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  
  .package-img-container {
    height: 160px;
  }
}

@media (max-width: 992px) {
  .packages-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .package-img-container {
    height: 180px;
  }
  
  .package-card-title {
    font-size: 1.05rem;
  }
}

@media (max-width: 768px) {
  .packages-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .package-img-container {
    height: 160px;
  }
  
  .package-card-content {
    padding: 1rem;
  }
  
  .action-row {
    grid-template-columns: 1fr;
  }
  
  .quick-actions {
    justify-content: center;
    margin-top: 0.5rem;
  }
  
  .btn-action-icon {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 576px) {
  .packages-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
    margin: 0 auto;
  }
  
  .package-img-container {
    height: 200px;
  }
  
  .package-card-title {
    font-size: 1.1rem;
  }
}

/* Animation for cards */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.compact-package-card {
  animation: fadeInScale 0.5s ease-out forwards;
  opacity: 0;
}

.compact-package-card:nth-child(1) { animation-delay: 0.1s; }
.compact-package-card:nth-child(2) { animation-delay: 0.2s; }
.compact-package-card:nth-child(3) { animation-delay: 0.3s; }
.compact-package-card:nth-child(4) { animation-delay: 0.4s; }
.compact-package-card:nth-child(5) { animation-delay: 0.5s; }
.compact-package-card:nth-child(6) { animation-delay: 0.6s; }
.compact-package-card:nth-child(7) { animation-delay: 0.7s; }
.compact-package-card:nth-child(8) { animation-delay: 0.8s; }






/* ========================================= */
/*          MODERN CITY LOGOS SECTION       */
/* ========================================= */

/* Section Container */




/* Section Title */
.section-title-modern {
  text-align: center;
  position: relative;
}






/* Modern Grid Layout */
.city-logos-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
  margin: 0 auto;
}

/* City Card - Modern Design */
.city-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(5, 157, 156, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  padding: 1.5rem;
  text-align: center;
}

.city-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, 
    rgba(5, 157, 156, 0.03) 0%,
    rgba(197, 149, 72, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.city-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 
    0 20px 40px rgba(5, 157, 156, 0.1),
    0 0 0 1px rgba(5, 157, 156, 0.1);
  border-color: rgba(5, 157, 156, 0.2);
}

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

/* Image Container */
.city-image-container {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.25rem;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid white;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}

.city-card:hover .city-image-container {
  transform: scale(1.1);
  border-color: rgba(5, 157, 156, 0.3);
  box-shadow: 
    0 12px 25px rgba(5, 157, 156, 0.2),
    0 0 0 4px rgba(5, 157, 156, 0.1);
}

.city-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  filter: brightness(0.95);
}

.city-card:hover .city-image-container img {
  transform: scale(1.1);
  filter: brightness(1);
}

/* City Name */
.city-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-color);
  margin: 0;
  position: relative;
  padding-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.city-name::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #059d9c, #c59548);
  transition: width 0.3s ease;
  border-radius: 1px;
}

.city-card:hover .city-name {
  color: #059d9c;
}

.city-card:hover .city-name::after {
  width: 40px;
}

/* Hover Effect for Link */
.city-card a {
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 2;
  display: block;
}

.city-card a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.city-label {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: #059d9c; /* Changed to solid teal */
  color: white; /* Changed to white text */
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.city-card:hover .city-label {
  background: #c59548 !important; /* Changed to solid brown on hover */
  color: white !important; /* Keep white text */
  transform: translateY(-2px);
}

/* Mobile Grid */
@media (max-width: 768px) {
  .city-logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .city-card {
    padding: 1.25rem;
  }
  
  .city-image-container {
    width: 100px;
    height: 100px;
  }
  
  .section-title-modern h3 {
    font-size: 1.75rem;
  }
}

/* Tablet Grid */
@media (min-width: 769px) and (max-width: 1200px) {
  .city-logos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Animation */
@keyframes fadeInCity {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.city-card {
  opacity: 0;
  animation: fadeInCity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation-play-state: paused;
}

/* Staggered animation delays */
.city-card:nth-child(1) { animation-delay: 0.1s; }
.city-card:nth-child(2) { animation-delay: 0.2s; }
.city-card:nth-child(3) { animation-delay: 0.3s; }
.city-card:nth-child(4) { animation-delay: 0.4s; }
.city-card:nth-child(5) { animation-delay: 0.5s; }
.city-card:nth-child(6) { animation-delay: 0.6s; }
/* ========================================= */
/*          RESPONSIVE DESIGN               */
/* ========================================= */

@media (max-width: 1400px) {
  .section-title h1,
  .section-title h2 {
    font-size: 2.6rem;
  }
  
  .about-content h3 {
    font-size: 2.2rem;
  }
}

@media (max-width: 1200px) {
  .section-title h1,
  .section-title h2 {
    font-size: 2.3rem;
  }
  
  .heading_home_h3 {
    font-size: 2rem;
  }
  
  .about-content h3 {
    font-size: 2rem;
  }
  
  .package-image-container {
    height: 240px;
  }
  
  .price {
    font-size: 2rem;
  }
}

@media (max-width: 992px) {
  .section-title h1,
  .section-title h2 {
    font-size: 2rem;
  }
  
  .heading_home_h3 {
    font-size: 1.8rem;
  }
  
  .about-content h3 {
    font-size: 1.8rem;
  }
  
  .about-content {
    padding-right: 0;
    margin-bottom: 3rem;
  }
  
  .counter-content h2 {
    font-size: 2.5rem;
  }
  
  .category-item {
    min-height: 160px;
    margin-bottom: 1.5rem;
  }
  
  .package-details-grid {
    grid-template-columns: 1fr;
  }
  
  .counter-item.border-end {
    border-right: none !important;
    border-bottom: 1px solid var(--gray-light);
  }
}

@media (max-width: 768px) {
  .section-title h1,
  .section-title h2 {
    font-size: 1.8rem;
  }
  
  .section-title p {
    font-size: 1rem;
  }
  
  .heading_home_h3 {
    font-size: 1.6rem;
  }
  
  .about-content h3 {
    font-size: 1.6rem;
  }
  
  .about-content p {
    font-size: 1rem;
  }
  
  .counter-content h2 {
    font-size: 2.2rem;
  }
  
  .package-image-container {
    height: 220px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 1rem;
  }
  
  .btn-primary {
    width: 100%;
    justify-content: center;
  }
  
  .quick-contact {
    width: 100%;
    justify-content: center;
  }
  
  .col-3 {
    margin-bottom: 0.75rem;
  }
  
  .col-3 .category-item {
    min-height: 80px;
  }
  
  .col-3 .category-item h4 {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .section-title h1,
  .section-title h2 {
    font-size: 1.6rem;
  }
  
  .heading_home_h3 {
    font-size: 1.4rem;
  }
  
  .about-content h3 {
    font-size: 1.4rem;
  }
  
  .counter-content h2 {
    font-size: 1.8rem;
  }
  
  .counter-content span {
    font-size: 0.9rem;
  }
  
  .package-image-container {
    height: 200px;
  }
  
  .package-content {
    padding: 1.5rem;
  }
  
  .package-title {
    font-size: 1.2rem;
  }
  
  .price {
    font-size: 1.8rem;
  }
  
  .package-price-section {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .category-item {
    min-height: 140px;
    padding: 1.5rem;
  }
  
  .category-item img {
    width: 50px;
    height: 50px;
  }
  
  .category-item h4 {
    font-size: 1.1rem;
  }
}

/* ========================================= */
/*          ANIMATIONS & TRANSITIONS        */
/* ========================================= */

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

.fade-in {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

.category-item:nth-child(1) { animation-delay: 0.1s; }
.category-item:nth-child(2) { animation-delay: 0.2s; }
.category-item:nth-child(3) { animation-delay: 0.3s; }
.category-item:nth-child(4) { animation-delay: 0.4s; }

.modern-package-card {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

.modern-package-card:nth-child(1) { animation-delay: 0.2s; }
.modern-package-card:nth-child(2) { animation-delay: 0.4s; }

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus states for accessibility */
*:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .modern-package-card,
  .category-item {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ddd;
  }
}
.news {
  padding-bottom: 6rem;
  z-index: inherit; }
  .news .news-item {
    position: relative; }
    .news .news-item .news-image {
      position: relative;
      transition: all ease-in-out 0.5s;
      overflow: hidden; }
      .news .news-item .news-image::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        -webkit-transition: -webkit-transform 1.8s;
        transition: -webkit-transform 1.8s;
        transition: transform 1.8s;
        transition: transform 1.8s,-webkit-transform 1.8s;
        -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0);
        transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0);
        z-index: 1; }
      .news .news-item .news-image:hover:before {
        -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0);
        transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0); }
      .news .news-item .news-image .news-date1 {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #ffffffe3;
        padding: 10px 15px;
        z-index: 2; }
        .news .news-item .news-image .news-date1 span {
          font-size: 28px;
          font-weight: 700;
          line-height: 1.0; }
      .news .news-item .news-image .news-content1 {
        padding: 20px;
        position: absolute;
        bottom: 0;
        z-index: 2; }
        .news .news-item .news-image .news-content1 .news-list {
          border-top: 1px dashed #f1f1f1;
          padding-top: 15px; }
          .news .news-item .news-image .news-content1 .news-list li a {
            font-size: 14px;
            color: #999; }
            .news .news-item .news-image .news-content1 .news-list li a:hover {
              color: #059d9c; }
      .news .news-item .news-image .overlay {
        background: linear-gradient(to bottom, transparent 0%, #826d43 100%);
        top: inherit;
        height: 50%;
        bottom: 0; }
      .news .news-item .news-image img {
        transition: all ease-in-out 0.5s;
        width: 100%; }
      .news .news-item .news-image:hover img {
        transition: all ease-in-out 0.5s;
        transform: scale(1.2); }
    .news .news-item .news-content-over {
      position: absolute;
      left: 0;
      width: 90%;
      right: 0;
      margin: 0 auto;
      box-shadow: 0 0 15px #cccccc37;
      bottom: -1.5rem;
      padding: 20px;
      z-index: 1;
      background: #fff; }
    .news .news-item .news-list li a {
      font-size: 14px;
      color: #999;
      font-style: italic; }
      .news .news-item .news-list li a:hover {
        color: #059d9c; }
    .news .news-item .news-content .news-list li a {
      font-size: 14px;
      color: #999; }
      .news .news-item .news-content .news-list li a:hover {
        color: #059d9c; }
    .news .news-item .news-content .author-img img {
      max-width: 40px;
      border-radius: 50%;
      margin-right: 10px; }
    .news .news-item .news-content a.news-btn {
      font-size: 14px; }
    .news .news-item .news-cont {
      background: #fff;
      border-radius: 15px;
      padding: 20px 15px;
      position: relative;
      z-index: 1;
      width: 96%;
      margin-top: -24px; }
      .news .news-item .news-cont .news-list li a {
        font-size: 14px;
        color: #999;
        font-style: italic; }
        .news .news-item .news-cont .news-list li a:hover {
          color: #059d9c; }
    .news .news-item .blog-one__content {
      padding: 24px 24px 20px;
      background: #ffffff;
      margin-right: 30px;
      margin-top: -70px;
      position: relative;
      transition: all 700ms ease;
      z-index: 1; }
      .news .news-item .blog-one__content .blog-one__meta {
        margin: 0;
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center; }
        .news .news-item .blog-one__content .blog-one__meta li a {
          font-size: 14px;
          color: #777;
          transition: all 500ms ease; }
      .news .news-item .blog-one__content .blog_one_text {
        width: 83%; }
      .news .news-item .blog-one__content .blog_one_date {
        height: 70px;
        width: 70px;
        background: #059d9c;
        padding-top: 15px;
        position: absolute;
        top: 0;
        right: 0;
        font-weight: 700;
        line-height: 1.2; }

@media (max-width: 1100px) and (min-width: 1024px) {
  .news .news-item .blog-one__content {
    margin-right: 0; }
    .news .news-item .blog-one__content .blog-one__meta li a {
      font-size: 12px; } }
@media (max-width: 991px) {
  .testi-news .section-title {
    text-align: center !important; }

  .news .news-item .blog-one__content .blog-one__meta li a {
    font-size: 13px; } }
@media (max-width: 500px) {
  .recent-articles .trend-item1 {
    display: block !important; }
    .recent-articles .trend-item1 .trend-image {
      width: 100% !important;
      margin-bottom: 1rem; }
    .recent-articles .trend-item1 .trend-content-main {
      width: 100% !important;
      padding: 0 !important; } }
/* ========================================= */
/*          Partner CSS        */
/* ======================================== */
.partners_inner {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #f1f1f1; }
  .partners_inner ul {
    margin: -2px -10px -2px -2px;
    padding-top: 2px;
    padding-left: 2px; }
    .partners_inner ul li {
      margin: 0px;
      float: left;
      width: 25%;
      border: 1px solid #f1f1f1;
      text-align: center;
      height: 140px;
      line-height: 140px;
      position: relative;
      margin-top: -2px;
      margin-left: -2px;
      overflow: hidden; }
      .partners_inner ul li img {
        opacity: 0.5;
        transition: all ease-in-out 0.5s;
        filter: grayscale(100%);
        width: 60%; }
    .partners_inner ul li:hover img {
      opacity: 1;
      transition: all ease-in-out 0.5s;
      filter: grayscale(0%); }

@media (max-width: 911px) {
  .partners_inner {
    margin-top: 40px; }
    .partners_inner ul li {
      width: 50%; } }
@media (max-width: 540px) {
  .partners_inner ul li {
    width: 100%; } }
/* ========================================= */
/*          Contact Page CSS        */
/* ======================================== */
/* ========================================= */
/*       PREMIUM CONTACT PAGE DESIGN        */
/* ========================================= */

/* Premium Hero Section */
.contact-hero-premium {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary) 70%, var(--dark) 100%);
}

.contact-hero-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.9;
}


/* Mobile-specific adjustment */
@media (max-width: 768px) {
  .hero-badge-mobile-fix {
    margin-top: 3rem !important;
  }
}
@media (max-width: 480px) {
  .hero-badge-mobile-fix {
    margin-top: 3rem !important;
  }
}

.hero-content-premium {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--white);
  padding: 0 2rem;
}

.hero-badge-premium {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  padding: 0.5rem 1.5rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  animation: pulse 2s infinite;
}

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

.hero-title-premium {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
  background: linear-gradient(to right, var(--white), var(--white));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.hero-subtitle-premium {
  font-size: 1.3rem;
  max-width: 800px;
  margin: 0 auto;
  opacity: 0.9;
    margin-bottom: 4rem;

  line-height: 1.6;
}

/* Premium Contact Cards */
.premium-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: -100px auto 4rem;
  position: relative;
  z-index: 10;
  max-width: 1200px;
}

.premium-contact-card {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.premium-contact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 70%, var(--accent));
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.premium-contact-card:hover::before {
  transform: translateX(0);
}

.premium-contact-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 30px 80px rgba(5, 157, 156, 0.15);
  border-color: var(--primary-light);
}

.card-icon-wrapper {
  width: 90px;
  height: 90px;
  margin: 0 auto 1.5rem;
  position: relative;
}

.card-icon-circle {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2.5rem;
  position: relative;
  z-index: 2;
}

.card-icon-circle::after {
  content: '';
  position: absolute;
  width: 110%;
  height: 110%;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light), transparent);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.premium-contact-card:hover .card-icon-circle::after {
  opacity: 1;
}

.card-title-premium {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

.card-title-premium::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.premium-contact-card:hover .card-title-premium::after {
  width: 80px;
}

.card-content-premium p {
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.contact-link-premium {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 25px;
  background: rgba(5, 157, 156, 0.1);
}

.contact-link-premium:hover {
  color: var(--primary);
  background: rgba(5, 157, 156, 0.2);
  transform: translateX(5px);
}

/* Premium Contact Layout */
.premium-contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto 4rem;
}

/* Premium Form Section */
.premium-form-section {
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-light);
  position: relative;
  overflow: hidden;
}

.premium-form-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--primary) 70%, var(--accent));
}

.form-header-premium {
  text-align: center;
  margin-bottom: 2.5rem;
}

.form-header-premium h2 {
  font-size: 2.2rem;
  color: var(--primary);
  margin-bottom: 0.75rem;
  font-weight: 800;
}

.form-header-premium p {
  color: var(--gray);
  font-size: 1.1rem;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Premium Map Section */
.premium-map-section {
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  position: relative;
  height: 100%;
}

.map-container-premium {
  position: relative;
  height: 100%;
  min-height: 500px;
}

.map-overlay-premium {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.95);
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid var(--primary);
}

.map-info-premium h4 {
  font-size: 1.2rem;
  color: var(--black);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.map-info-premium p {
  color: var(--gray);
  font-size: 0.95rem;
  margin: 0;
}

.btn-directions {
  background: var(--primary);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-directions:hover {
  background: var(--accent);
  transform: translateY(-2px);
  color: var(--white);
}

/* Premium Content Section */
.premium-content-section {
  padding: 2rem 0;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
}

.content-wrapper-premium {
  max-width: 1300px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--border-radius-lg);
  padding: 3rem;
  box-shadow: var(--shadow-md);
}

.content-header-premium {
  text-align: center;
  margin-bottom: 2.5rem;
}
.content-header-premium h1 {
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 1rem;
  font-weight: 800;
}

.content-header-premium h2 {
  color: var(--black);
  margin-bottom: 1rem;
  font-weight: 600;
}

.content-header-premium p {
  color: var(--black);
  font-size: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Trust Badges */
.trust-badges {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .trust-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .trust-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  
  .trust-badge i {
    font-size: 1rem;
    flex-shrink: 0;
  }
  
  .trust-badge span {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* For very small phones */
@media (max-width: 360px) {
  .trust-badges {
    gap: 0.5rem;
  }
  
  .trust-badge {
    gap: 0.375rem;
    padding: 0.375rem 0.25rem;
  }
  
  .trust-badge i {
    font-size: 0.875rem;
  }
  
  .trust-badge span {
    font-size: 0.6875rem;
  }
}

.trust-badge {
  display: flex;
  align-items: center;
  background: rgba(5, 157, 156, 0.1);
  border-radius: 10px;
  border-left: 4px solid var(--primary);
}

.trust-badge i {
  color: var(--primary);
  font-size: 1rem;
}

.trust-badge span {
  font-weight: 600;
  color: var(--black);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .premium-contact-grid,
  .premium-contact-layout {
    max-width: 95%;
  }
}

@media (max-width: 992px) {
  .premium-contact-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -50px;
  }
  
  .premium-contact-layout {
    grid-template-columns: 1fr;
  }
  
  .hero-title-premium {
    font-size: 2.8rem;
  }
  
  .map-container-premium {
    min-height: 400px;
  }
}

@media (max-width: 768px) {
  .premium-contact-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: -30px;
  }
  
  .premium-contact-card {
    padding: 2rem;
  }
  
  .hero-title-premium {
    font-size: 2.2rem;
  }
  
  .hero-subtitle-premium {
    font-size: 1.1rem;
  }
  
  .premium-form-section {
    padding: 2rem;
  }
  
  .content-wrapper-premium {
    padding: 2rem;
  }
  
  .trust-badges {
    gap: 1rem;
  }
  
  .trust-badge {
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 576px) {
  .contact-hero-premium {
    height: 350px;
  }
  
  .hero-title-premium {
    font-size: 1.8rem;
  }
  
  .premium-form-section {
    padding: 1.5rem;
  }
  
  .card-icon-wrapper {
    width: 70px;
    height: 70px;
  }
  
  .card-icon-circle {
    font-size: 2rem;
  }
  
  .map-overlay-premium {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}
@media (max-width: 400px) {
  .contact-hero-premium {
    height: 350px;
  }
  
  .hero-title-premium {
    font-size: 1.8rem;
  }
  .hero-badge-premium {
margin-top: -1rem;
  }
  
  .premium-form-section {
    padding: 1.5rem;
  }
  
  .card-icon-wrapper {
    width: 70px;
    height: 70px;
  }
  
  .card-icon-circle {
    font-size: 2rem;
  }
  
  .map-overlay-premium {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}
/* Premium Contact Form Styles */
.premium-contact-form {
  width: 100%;
}

.contact-form-premium {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Form Status Messages */
.form-status {
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 500;
  animation: slideDown 0.3s ease;
}

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

.form-status.success {
  background: rgba(46, 204, 113, 0.15);
  color: #27ae60;
  border-left: 4px solid #2ecc71;
}

.form-status.error {
  background: rgba(231, 76, 60, 0.15);
  color: #c0392b;
  border-left: 4px solid #e74c3c;
}

/* Form Groups */
.form-group-premium {
  margin-bottom: 0.5rem;
}

.form-row-premium {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

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

/* Form Labels */
.form-label-premium {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--black);
  font-size: 0.95rem;
}

.form-label-premium .required {
  color: #e74c3c;
  font-weight: bold;
}

.form-label-premium .optional {
  color: var(--gray);
  font-size: 0.85rem;
  font-weight: normal;
}

/* Input Wrapper */
.input-wrapper-premium,
.textarea-wrapper-premium {
  position: relative;
}

.input-icon,
.textarea-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 1.1rem;
  z-index: 2;
}

.textarea-icon {
  top: 1.5rem;
  transform: none;
}

/* Form Inputs */
.form-input-premium,
.form-textarea-premium {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  border: 2px solid var(--gray-light);
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  color: var(--black);
  transition: all 0.3s ease;
}

.form-textarea-premium {
  min-height: 140px;
  resize: vertical;
  padding-top: 1.5rem;
  padding-left: 3rem;
  line-height: 1.5;
}

.form-input-premium:focus,
.form-textarea-premium:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(5, 157, 156, 0.15);
  transform: translateY(-2px);
}

.form-input-premium::placeholder,
.form-textarea-premium::placeholder {
  color: var(--gray);
  opacity: 0.7;
}

/* Form Input Focus Effects */
.input-wrapper-premium:focus-within .input-icon,
.textarea-wrapper-premium:focus-within .textarea-icon {
  color: var(--primary);
  animation: iconPulse 0.6s ease;
}

@keyframes iconPulse {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.2); }
}

/* Submit Button */
.form-submit-premium {
  margin-top: 1rem;
  text-align: center;
}

.btn-submit-premium {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 100%);
  color: var(--white);
  border: none;
  padding: 1.25rem 2.5rem;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 10px 30px rgba(5, 157, 156, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-submit-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.7s ease;
}



.btn-submit-premium:hover {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);

  transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(197, 149, 72, 0.15);
}

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

.btn-submit-premium:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn-submit-premium i {
  font-size: 1.2rem;
}

/* Form Note */
.form-note-premium {
  margin-top: 1.5rem;
  color: var(--gray);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.form-note-premium i {
  color: #2ecc71;
}

/* Form Validation Styles */
.form-input-premium:invalid:not(:focus):not(:placeholder-shown),
.form-textarea-premium:invalid:not(:focus):not(:placeholder-shown) {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.05);
}

.form-input-premium:valid:not(:focus):not(:placeholder-shown),
.form-textarea-premium:valid:not(:focus):not(:placeholder-shown) {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.05);
}

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

.fa-spin {
  animation: spin 1s linear infinite;
}

/* Hover Effects Enhancement */
.form-group-premium:hover .form-label-premium {
  color: var(--primary);
}

.form-group-premium:hover .input-icon,
.form-group-premium:hover .textarea-icon {
  transform: translateY(-50%) scale(1.1);
  transition: transform 0.3s ease;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
  .contact-form-premium {
    gap: 1rem;
  }
  
  .btn-submit-premium {
    width: 100%;
    justify-content: center;
    padding: 1rem 2rem;
  }
  
  .form-input-premium,
  .form-textarea-premium {
    padding: 0.875rem 0.875rem 0.875rem 2.5rem;
  }
  
  .input-icon {
    left: 1rem;
  }
  
  .form-note-premium {
    font-size: 0.85rem;
    text-align: center;
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* Animation for form elements */
.form-group-premium {
  animation: fadeInUp 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

.form-group-premium:nth-child(1) { animation-delay: 0.1s; }
.form-group-premium:nth-child(2) { animation-delay: 0.2s; }
.form-group-premium:nth-child(3) { animation-delay: 0.3s; }
.form-group-premium:nth-child(4) { animation-delay: 0.4s; }
.form-submit-premium { animation-delay: 0.5s; }

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

/* ========================================= */
/*          Gallery CSS        */
/* ======================================== */
.gallery .gallery-item {
  position: relative;
  overflow: hidden; }
  .gallery .gallery-item .gallery-image img {
    width: 100%; }
  .gallery .gallery-item .gallery-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 100%;
    left: 0;
    background: linear-gradient(to bottom, transparent, #000000);
    transition: all ease-in-out 0.5s;
    z-index: 2; }
    .gallery .gallery-item .gallery-content ul {
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
      .gallery .gallery-item .gallery-content ul li {
        border: 1px solid #ffffff26;
        color: #fff;
        height: 50px;
        width: 50px;
        text-align: center;
        font-size: 20px;
        line-height: 2.5;
        display: inline-block;
        border-radius: 10px;
        margin: 0;
        transition: all ease-in-out 0.5s; }
        .gallery .gallery-item .gallery-content ul li a {
          color: #fff; }
        .gallery .gallery-item .gallery-content ul li:hover {
          background: #059d9c;
          transition: all ease-in-out 0.5s; }
  .gallery .gallery-item:hover .gallery-content {
    top: 0;
    transition: all ease-in-out 0.5s; }
.gallery .overlay {
  background: rgba(0, 0, 0, 0.4); }

a.lb-close {
  position: absolute;
  top: -30px;
  right: 30px; }

/* ========================================= */
/*          Modern 404 Page CSS             */
/* ======================================== */

/* Modern 404 Hero Section */
.modern-404-hero {
  background: linear-gradient(135deg, #ffffff 70%, #f5f5f5 100%);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.modern-404-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23059d9c' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.9;
}

.modern-404-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--primary); /* Changed from var(--white) to var(--dark) for better contrast on white background */
  max-width: 900px;
  margin: 0 auto;
}

.modern-404-badge {
  margin-bottom: 2rem;
}

.error-code-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  animation: float 3s ease-in-out infinite;
}

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

.error-code {
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
  color: var(--primary);
  text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}



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

.error-icon {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.modern-404-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
  background: linear-gradient(to right, var(--white), rgba(255,255,255,0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--primary);
}

.modern-404-description {
  font-size: 1.2rem;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto 2rem;
  opacity: 0.9;
}

/* Modern 404 Stats */
.modern-404-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin: 2rem auto 3rem;
  background: var(--primary);
  backdrop-filter: blur(10px);
  padding: 1.5rem 2rem;
  border-radius: 15px;
  max-width: 600px;
  border: 1px solid rgba(255,255,255,0.2);
}

.modern-404-stats .stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}

.modern-404-stats .stat-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  letter-spacing: 1px;
  margin-top: 0.5rem;
}

.modern-404-stats .stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.3);
}

/* Action Buttons */
.modern-404-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn-primary-modern,
.btn-secondary-modern,
.btn-accent-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.75rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  min-width: 180px;
}

.btn-primary-modern {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-primary-modern:hover {
color: white;
  background: #c59548;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.btn-secondary-modern {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-secondary-modern:hover {
  color: white;
  background: #c59548;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.btn-accent-modern {
  background: var(--white);
  color: var(--primary);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-accent-modern:hover {
color: white;
  background: #c59548;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}


/* Suggested Pages Section */
.suggested-pages-section {
  padding: 5rem 0;
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

.suggested-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.suggested-page-card {
  background: var(--white);
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--gray-light);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.suggested-page-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  border-color: var(--primary-light);
}

.page-card-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--white);
  font-size: 1.75rem;
}

.suggested-page-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 1rem;
}

.suggested-page-card p {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* ========================================= */
/*          Responsive Design               */
/* ========================================= */

@media (max-width: 768px) {
  .modern-404-hero {
    padding: 4rem 0 3rem;
    min-height: auto;
  }
  
  .error-code-display {
    gap: 0.5rem;
  }
  
  .error-code {
    font-size: 5rem;
  }
  
  .error-icon {
    width: 80px;
    height: 80px;
  }
  
  .modern-404-title {
    font-size: 2rem;
  }
  
  .modern-404-description {
    font-size: 1.1rem;
    padding: 0 1rem;
  }
  
  .modern-404-stats {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .modern-404-stats .stat-divider {
    width: 100%;
    height: 1px;
  }
  
  .modern-404-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-primary-modern,
  .btn-secondary-modern,
  .btn-accent-modern {
    width: 100%;
    max-width: 300px;
  }
  
  .help-contact-options {
    flex-direction: column;
  }
  
  .contact-option {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .error-code {
    font-size: 4rem;
  }
  
  .error-icon {
    width: 60px;
    height: 60px;
  }
  
  .modern-404-title {
    font-size: 1.75rem;
  }
  
  .modern-404-description {
    font-size: 1rem;
  }
  
  .suggested-pages-grid {
    grid-template-columns: 1fr;
  }
}


/* ========================================= */
/*          Coming Soon CSS        */
/* ======================================== */
section.comingsoon {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh; }
  section.comingsoon::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: url(../images/bg/bg6.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.4; }
  section.comingsoon .comingsoon-content {
    position: relative;
    z-index: 1; }
    section.comingsoon .comingsoon-content .coming-title span {
      color: #059d9c;
      font-size: 90px; }
    section.comingsoon .comingsoon-content .counter-box {
      text-align: center;
      display: inline-block;
      color: #fff;
      padding: 0 30px;
      text-transform: capitalize;
      font-size: 21px; }
      section.comingsoon .comingsoon-content .counter-box span {
        font-size: 90px;
        color: #fff;
        display: block;
        font-weight: 700;
        line-height: 1.5; }

@media (max-width: 991px) and (min-width: 812px) {
  section.comingsoon {
    height: 200vh; } }
@media (max-width: 911px) {
  section.comingsoon .comingsoon-content .newsletter-form {
    width: 100%; } }
@media (max-width: 767px) {
  section.comingsoon .comingsoon-content .coming-title span {
    font-size: 40px; }
  section.comingsoon .comingsoon-content .counter-box span {
    font-size: 54px; }
  section.comingsoon .coming-image {
    margin-top: 2rem; } }
@media (max-width: 639px) {
  section.comingsoon::before {
    display: none; }
  section.comingsoon .comingsoon-content .coming-title h1 {
    font-size: 44px;
    line-height: 1;
    margin-bottom: 15px !important; }
  section.comingsoon .comingsoon-content .coming-title span {
    font-size: 30px; }
  section.comingsoon .comingsoon-content .counter-box {
    width: 100%; }
    section.comingsoon .comingsoon-content .counter-box span {
      font-size: 42px; } }
@media (max-width: 567px) {
  section.comingsoon .comingsoon-content .coming-title-main, section.comingsoon.comingsoon1 .comingsoon-content .coming-title-main {
    width: 100% !important; }
  section.comingsoon .comingsoon-content .newsletter-form form, section.comingsoon.comingsoon1 .comingsoon-content .newsletter-form form {
    border-radius: 0px; }
    section.comingsoon .comingsoon-content .newsletter-form form input[type="email"], section.comingsoon.comingsoon1 .comingsoon-content .newsletter-form form input[type="email"] {
      padding-right: 20px; }
    section.comingsoon .comingsoon-content .newsletter-form form input.nir-btn, section.comingsoon.comingsoon1 .comingsoon-content .newsletter-form form input.nir-btn {
      position: relative;
      border-radius: 0px;
      margin: 1rem 0 0; } }
/* ========================================= */
/*          Instagram CSS        */
/* ======================================== */
.insta-main .insta-inner .follow-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; }
  .insta-main .insta-inner .follow-button h5 {
    position: relative;
    background-color: #fff;
    font-size: 16px;
    color: #1a1a1a;
    display: block;
    padding: 12px 15px 13px;
    text-align: center;
    font-weight: 400;
    width: 250px;
    -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5); }
    .insta-main .insta-inner .follow-button h5:after {
      content: '';
      position: absolute;
      left: -5px;
      top: -5px;
      right: -5px;
      bottom: -5px;
      border: 1px solid #fff;
      border-radius: 10px; }
.insta-main .insta-inner .insta-image, .insta-main .insta-inner .insta-image a img {
  transition: all ease-in-out 0.5s;
  overflow: hidden; }
.insta-main .insta-inner .insta-image:hover img {
  transform: scale(1.1);
  transition: all ease-in-out 0.5s; }

@media (max-width: 479px) {
  .insta-main .insta-inner .follow-button h5 a {
    font-size: 13px; } }
/* ========================================= */
/*          Newsletter CSS        */
/* ======================================== */
.newsletter {
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover; }
  .newsletter .newsletter-form {
    position: relative; }
    .newsletter .newsletter-form form {
      border-radius: 0px;
      overflow: hidden;
      position: relative;
      border: 1px solid #f1f1f1; }
      .newsletter .newsletter-form form input {
        padding-right: 65px;
        border: none;
        height: 50px;
        outline: none; }
      .newsletter .newsletter-form form button {
        position: absolute;
        right: 0;
        top: 0;
        padding: 15px 24px;
        transition: all ease-in-out 0.5s; }
        .newsletter .newsletter-form form button:hover {
          background: #c59548 !important;
          transition: all ease-in-out 0.5s;
          color: #fff;
          opacity: 0.8; }

@media (max-width: 811px) {
  .newsletter .newsletter-main .newsletter-form {
    width: 60% !important; } }
@media (max-width: 767px) {
  .newsletter .newsletter-main .newsletter-form {
    width: 100% !important; } }
@media (max-width: 567px) {
  .newsletter .newsletter-main .newsletter-form form {
    border: none !important;
    border-radius: 0 !important; }
    .newsletter .newsletter-main .newsletter-form form input {
      border: 1px solid #f1f1f1 !important;
      padding-right: 20px !important; }
    .newsletter .newsletter-main .newsletter-form form input.nir-btn, .newsletter .newsletter-main .newsletter-form form button {
      border: none !important;
      position: relative !important;
      margin-top: 16px;
      width: 100%; } }
/* ========================================= */
/*          Footer CSS        */
/* ======================================== */
footer {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-position: bottom right;
  background-repeat: no-repeat;
  background-color: #059d9c; }
  footer .overlay {
    opacity: 0.8; }
    /* Add this to your footer CSS */
.footer-logo-white {
  filter: brightness(0) invert(1);
}
  footer a, footer p, footer li {
    color: #fff;
    font-weight: 400; }
  footer a:hover {
    color: #fff !important; }
  footer h3 {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 30px; }
    footer h3:after {
      position: absolute;
      content: '';
      height: 2px;
      width: 50px;
      background: #fff;
      left: 0;
      bottom: 0; }
  footer .footer-upper {
    position: relative;
    z-index: 1; }
    footer .footer-upper .footer-links ul.list li {
      display: inline-block;
      padding: 0 10px; }
    footer .footer-upper .footer-links ul li {
      margin-bottom: 20px;
      color: #fff;
      display: block; }
      footer .footer-upper .footer-links ul li a {
        transition: all ease-in-out 0.5s;
        color: #fff; }
        footer .footer-upper .footer-links ul li a:hover {
          color: white !important;
          transition: all ease-in-out 0.5s; }
      footer .footer-upper .footer-links ul li a.active {
        color: #059d9c; }
    footer .footer-upper .footer-links ul p span {
      color: #059d9c; }
    footer .footer-upper .footer-links .tagcloud a {
      display: inline-block; }
      footer .footer-upper .footer-links .tagcloud a:hover {
  background: linear-gradient(to right, #059d9c, #c59548) !important; }
    footer .footer-upper .footer-links h5 {
      border: none;
      padding: 0; }
    footer .footer-upper .footer-links p.f-para {
      border-bottom: 1px dashed #f1f1f1; }
    footer .footer-upper .footer-links input.nir-btn {
      border: none; }
      footer .footer-upper .footer-links input.nir-btn:hover {
        opacity: 0.8;
        background: #059d9c !important;
        color: #fff; }
    footer .footer-upper .footer-links .post-list {
      border-bottom: 1px dashed #ffffff30;
      padding-bottom: 10px;
      margin-bottom: 10px; }
      footer .footer-upper .footer-links .post-list:last-child {
        border: none;
        margin: 0;
        padding: 0; }
      footer .footer-upper .footer-links .post-list .post-image {
        width: 30%;
        border-radius: 0px;
        overflow: hidden; }
      footer .footer-upper .footer-links .post-list span {
        font-size: 12px; }
    footer .footer-upper .footer-about p, footer .footer-upper .footer-about li {
      color: #777; }
    footer .footer-upper .footer-about li {
      line-height: 2; }
  footer .footer-middle {
    border-top: 1px dashed #f1f1f1; }
    footer .footer-middle .footer-nav ul li a {
      display: inline-block;
      margin: 0 5px;
      font-weight: 700; }
  footer .footer-copyright {
    position: relative;
    z-index: 1; }
    footer .footer-copyright .copyright-inner {
      background: white; }
  footer .newsletter-main .section-title h2 {
    font-size: 24px; }
  footer .newsletter-form button {
    width: 38%; }
  footer .footer-payment {
    position: relative;
    z-index: 2; }
    footer .footer-payment .col-lg-8.footer-payment-nav {
      margin-bottom: 1rem !important; }
    footer .footer-payment .col-lg-4.footer-payment-nav {
      margin-bottom: 1.5rem !important; }
  footer .footer-listing-main .footer-listing {
    border: 1px dashed #f1f1f157;
    padding: 20px; }
    footer .footer-listing-main .footer-listing i {
      font-size: 36px;
      display: block; }
      

.social-links {
  display: inline-block; }
  .social-links ul li {
    display: inline-block !important; }
    .social-links ul li a {
      background: #ffffff26;
      color: #fff;
      width: 40px;
      height: 40px;
      display: inline-block;
      text-align: center;
      font-size: 17px;
      line-height: 2.4;
      border-radius: 50%; }
      .social-links ul li a:hover {
        color: #fff;
        background: #059d9c; }

footer.footer1 {
  background-color: transparent; }
  footer.footer1 h4:after {
    position: absolute;
    content: '';
    height: 2px;
    width: 50px;
    background: #059d9c;
    left: 0;
    bottom: 0; }
  footer.footer1 .footer-upper .footer-links ul li {
    margin-bottom: 0;
    line-height: 2.5;
    display: block;
    color: #3f3f3f; }
    footer.footer1 .footer-upper .footer-links ul li a {
      color: #3f3f3f; }
  footer.footer1 .footer-upper .footer-links ul p span {
    color: #059d9c; }
  footer.footer1 .footer-upper .footer-links input.nir-btn {
    border: none; }
    footer.footer1 .footer-upper .footer-links input.nir-btn:hover {
      opacity: 0.8;
      background: #059d9c !important;
      color: #fff; }
  footer.footer1 .footer-upper .footer-links .post-list {
    border-bottom: 1px dashed #ffffff30;
    padding-bottom: 10px;
    margin-bottom: 10px; }
    footer.footer1 .footer-upper .footer-links .post-list:last-child {
      border: none;
      margin: 0;
      padding: 0; }
    footer.footer1 .footer-upper .footer-links .post-list .post-image {
      width: 30%;
      border-radius: 0px;
      overflow: hidden; }
    footer.footer1 .footer-upper .footer-links .post-list span {
      font-size: 12px; }
  footer.footer1 .footer-copyright .social-links ul li {
    display: inline-block; }
    footer.footer1 .footer-copyright .social-links ul li a {
      background: #059d9c;
      color: #fff;
      width: 40px;
      height: 40px;
      display: inline-block;
      text-align: center;
      font-size: 17px;
      line-height: 2.5; }
      footer.footer1 .footer-copyright .social-links ul li a:hover {
        color: #fff;
        background: #059d9c; }

footer.footermain {
  width: 100%;
  overflow: hidden;
  position: relative; }
  footer.footermain::before {
    content: '';
    background: #181d20 url(../images/testimonial.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%; }
  footer.footermain .footer-upper {
    position: relative;
    z-index: 1; }

@media (max-width: 1100px) and (min-width: 1024px) {
  footer .footer-listing-main .footer-listing {
    margin: 0 5px; } }
@media (max-width: 991px) {
  footer .footer-upper {
    padding-bottom: 3rem; }
    footer .footer-upper .footer-links {
      width: 100% !important; }
  footer .newsletter .newsletter-main {
    text-align: center; }
    footer .newsletter .newsletter-main .section-title {
      margin-bottom: 1rem; }
    footer .newsletter .newsletter-main .newsletter-form {
      margin: 0 auto !important; }
  footer .f-payment {
    margin-top: 1rem;
    text-align: center; }
  footer .footer-listing-main .footer-listing {
    margin-top: 15px; }
  footer .newsletter-form form {
    display: block !important; }
  footer .newsletter-form button {
    width: 100%;
    margin: 10px 0 0 !important; }
/* Mobile-specific social icon sizes */
@media (max-width: 768px) {
  .social-links ul li a img {
    width: 24px !important;  /* Reduce from 120px */
    height: 24px !important; /* Reduce from 120px */
  }
  
  .social-links ul li a {
    width: 36px !important;   /* Reduce container size */
    height: 36px !important;  /* Reduce container size */
    line-height: 2.2 !important; /* Adjust line height */
  }
  
  .mb_social {
    margin: 0 3px !important; /* Reduce spacing between icons */
  }
}

  footer.footer1 .section-title {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem; }
  footer.footer1 .newsletter .newsletter-main {
    text-align: center; }
    footer.footer1 .newsletter .newsletter-main .newsletter-form {
      width: 80%;
      margin: 0 auto; } }
@media (max-width: 767px) {
  footer .footer-copyright .copyright-inner {
    text-align: center; }
    footer .footer-copyright .copyright-inner .copyright-text {
      margin-bottom: 5px; }
  footer .footer-middle {
    padding-top: 0 !important; }
    footer .footer-middle .footer-nav {
      width: 100% !important; } }
@media (max-width: 639px) {
  footer .footer-upper .footer-links .post-list {
    justify-content: normal !important; }
    footer .footer-upper .footer-links .post-list .post-content {
      padding-left: 1rem; } }
@media (max-width: 359px) {
  footer .footer-payment .footer-pay .footer-payment-nav select {
    margin-bottom: 15px; } }


    /* ========================================= */
/*          Full Width ATOL Footer           */
/* ========================================= */

.footer-atol-fullwidth {
  border-top: 3px solid #059d9c;
  border-bottom: 3px solid #059d9c;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  margin-top: 30px;
  margin-bottom: 0;
  width: 100%;
  position: relative;
  z-index: 2;
}

.footer-atol-fullwidth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #059d9c, transparent);
}

.footer-atol-fullwidth .atol-icon-large {
  display: inline-block;
  padding: 10px;
  background: rgba(5, 157, 156, 0.1);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.footer-atol-fullwidth .atol-content-full h4 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.footer-atol-fullwidth .atol-content-full p {
  color: #555;
  line-height: 1.5;
  margin-bottom: 0;
}

.footer-atol-fullwidth .btn-primary {
  background-color: #059d9c;
  border-color: #059d9c;
  font-weight: 500;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(5, 157, 156, 0.2);
}

.footer-atol-fullwidth .btn-primary:hover {
  background-color: #048a89;
  border-color: #048a89;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(5, 157, 156, 0.3);
}

/* Desktop specific styles */
@media (min-width: 769px) {
  .footer-atol-fullwidth {
    padding: 1.5rem 0 !important;
  }
  
  .footer-atol-fullwidth .atol-icon-large {
    width: 70px;
    height: 70px;
    margin: 0;
  }
  
  .footer-atol-fullwidth .row {
    align-items: center;
  }
  
  .footer-atol-fullwidth .atol-content-full {
    border-left: 1px solid rgba(5, 157, 156, 0.2);
    border-right: 1px solid rgba(5, 157, 156, 0.2);
    padding: 0 2rem;
  }
}

/* Mobile specific styles */
@media (max-width: 768px) {
  .footer-atol-fullwidth {
    padding: 1rem 0 !important;
  }
  
  .footer-atol-fullwidth .atol-icon-large {
    width: 60px;
    height: 60px;
    margin-bottom: 0.5rem;
  }
  
  .footer-atol-fullwidth .atol-content-full h4 {
    font-size: 1.1rem;
  }
  
  .footer-atol-fullwidth .atol-content-full p {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }
  
  .footer-atol-fullwidth .btn-primary {
    width: 90%;
    max-width: 250px;
  }
}

/* Ensure proper spacing with copyright section */
.footer-copyright {
  margin-top: 0 !important;
}

/* Make sure particles-js stays at the bottom */
footer #particles-js {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.footer-atol-fullwidth {
  position: relative;
  z-index: 2;
}
/* ========================================= */
/*          Listing CSS        */
/* ======================================== */
.listing-main.mt-map {
  margin-top: -80px;
  position: relative; }

.list-results {
  position: relative;
  margin-bottom: 2rem;
  width: 100%; }
  .list-results label {
    margin: 0; }
  .list-results .nice-select {
    border: 1px solid #f1f1f1;
    background: #fff;
    width: 150px;
    padding-left: 20px;
    line-height: 1.5;
    height: 44px; }
  .list-results .change-grid, .list-results .change-list {
    display: inline-block; }
    .list-results .change-grid i, .list-results .change-list i {
      line-height: 2.5;
      text-align: center;
      display: inline-block;
      transition: all ease-in-out 0.5s;
      height: 40px;
      width: 40px;
      background: #fff; }
  .list-results .change-list.f-active i, .list-results .change-grid.f-active i {
    background: #c59548;
    color: #fff;
    transition: all ease-in-out 0.5s;
    border-color: #c59548; }

.form-find .nice-select {
  line-height: 2; }

.page-banner-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
  width: 100%; }

.blog-full {
  overflow: hidden; }
  .blog-full .blog-image {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 0px;
    transition: all ease-in-out 0.5s; }
    .blog-full .blog-image .h-date {
      text-align: center;
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 12px 20px;
      border-radius: 15px;
      z-index: 1; }
    .blog-full .blog-image > a {
      background-size: cover;
      height: 100%;
      width: 100%;
      background-position: center;
      display: inline-block;
      transition: all ease-in-out 0.5s; }

.blog-content {
  display: inline-block;
  width: 100%; }
  .blog-content p:first-child:first-letter {
    font-size: 80px;
    color: #059d9c;
    float: left;
    display: block;
    line-height: 1;
    padding-right: 10px;
    font-weight: 400; }
  .blog-content > a:hover {
    color: #059d9c !important;
    transition: all ease-in-out 0.5s; }

.detail-title .detail-title-inner .listing-rating i {
  color: #fff; }
.detail-title .detail-title-inner .list-single-contacts li {
  font-size: 13px;
  padding-right: 10px; }
.detail-title .detail-title-inner .list-single-details .list-single-rating {
  position: relative;
  z-index: 1;
  display: inline-block; }
  .detail-title .detail-title-inner .list-single-details .list-single-rating .rating-score span {
    background: #fff;
    color: #059d9c;
    float: left;
    font-weight: 700;
    border-radius: 0px;
    padding: 16px 18px;
    font-size: 24px; }

.detail-listing-inner {
  border: 1px solid #f1f1f1;
  box-shadow: 0 0 15px #cccccc37;
  padding: 20px;
  border-radius: 0px; }
  .detail-listing-inner > div {
    border-bottom: 1px dashed #f1f1f1;
    padding-bottom: 2rem;
    margin-bottom: 1.5rem; }
    .detail-listing-inner > div .detail-amenities li {
      width: 32.90%;
      margin-bottom: 0.5%;
      border: 1px dashed #f1f1f1;
      padding: 10px;
      color: #777;
      border-radius: 0px; }
      .detail-listing-inner > div .detail-amenities li i {
        margin-right: 5px; }
    .detail-listing-inner > div:last-child {
      border: none;
      padding: 0;
      margin: 0; }
  .detail-listing-inner .detail-recentlist .blog-full {
    box-shadow: none; }

.detail-comments .comment-box, .single-comments .comment-box {
  display: flex;
  margin-bottom: 30px; }
  .detail-comments .comment-box:last-child, .single-comments .comment-box:last-child {
    margin-bottom: 0; }
  .detail-comments .comment-box .comment-image, .single-comments .comment-box .comment-image {
    text-align: center; }
    .detail-comments .comment-box .comment-image img, .single-comments .comment-box .comment-image img {
      border-radius: 10px; }
  .detail-comments .comment-box .comment-content, .single-comments .comment-box .comment-content {
    border-bottom: 1px dashed #f1f1f1;
    position: relative;
    background: #f1f1f1;
    padding: 20px;
    margin-left: 30px; }
    .detail-comments .comment-box .comment-content:before, .single-comments .comment-box .comment-content:before {
      content: '';
      position: absolute;
      left: -20px;
      top: 25px;
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      border-right: 20px solid #f1f1f1; }
    .detail-comments .comment-box .comment-content:last-child, .single-comments .comment-box .comment-content:last-child {
      border: 0; }
    .detail-comments .comment-box .comment-content p.comment-date, .single-comments .comment-box .comment-content p.comment-date {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 14px;
      margin: 0; }
    .detail-comments .comment-box .comment-content .comment-rate span.comment-title, .single-comments .comment-box .comment-content .comment-rate span.comment-title {
      font-weight: 500;
      font-style: italic; }
    .detail-comments .comment-box .comment-content p.comment, .single-comments .comment-box .comment-content p.comment {
      margin: 0.5rem 0; }
    .detail-comments .comment-box .comment-content .comment-like, .single-comments .comment-box .comment-content .comment-like {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 1rem; }
      .detail-comments .comment-box .comment-content .comment-like a, .single-comments .comment-box .comment-content .comment-like a {
        padding: 6px 12px; }
      .detail-comments .comment-box .comment-content .comment-like .like-title, .single-comments .comment-box .comment-content .comment-like .like-title {
        display: inline-block; }
      .detail-comments .comment-box .comment-content .comment-like .like-btn a, .single-comments .comment-box .comment-content .comment-like .like-btn a {
        margin-left: 10px; }
      .detail-comments .comment-box .comment-content .comment-like .like-btn a.like, .single-comments .comment-box .comment-content .comment-like .like-btn a.like {
        color: #292e8c; }
      .detail-comments .comment-box .comment-content .comment-like .like-btn a.dislike, .single-comments .comment-box .comment-content .comment-like .like-btn a.dislike {
        color: #a6aebb; }
      .detail-comments .comment-box .comment-content .comment-like .like-btn a.love, .single-comments .comment-box .comment-content .comment-like .like-btn a.love {
        color: #ff6f7e; }

@media (max-width: 991px) {
  .blog-full .blog-height {
    height: 250px; }

  .list-sidebar {
    margin-top: 2rem; }

  .listing-main1 {
    padding: 0 !important; }
    .listing-main1 .form-find .form-group {
      margin: 0 0 0.5rem !important; } }
@media (max-width: 767px) {
  .detail-listing-inner > div .detail-amenities li {
    width: 49%; }

  .blog-full .blog-image > a {
    height: 320px; }

  .blog-content {
    padding-top: 20px !important; }

  .blog-single-in .blog-date, .blog-single-in .blog-single-in-cont {
    width: 100% !important; }
  .blog-single-in .blog-single-in-cont {
    padding: 0 20px 20px; }

  .blog .listing-inner {
    padding: 0 !important; } }
@media (max-width: 639px) {
  .detail-comments .comment-box, .single-comments .comment-box {
    display: block !important;
    text-align: center; }
    .detail-comments .comment-box .comment-image, .single-comments .comment-box .comment-image {
      display: inline-block; }
    .detail-comments .comment-box .comment-content, .single-comments .comment-box .comment-content {
      margin-top: 1rem;
      margin-left: 0 !important; }
      .detail-comments .comment-box .comment-content:before, .single-comments .comment-box .comment-content:before {
        display: none; }
      .detail-comments .comment-box .comment-content p.comment-date, .single-comments .comment-box .comment-content p.comment-date {
        position: relative !important;
        top: 0;
        right: 0; }
      .detail-comments .comment-box .comment-content .rating-comment, .single-comments .comment-box .comment-content .rating-comment {
        display: inline-block !important;
        width: 100%; }
    .detail-comments .comment-box p.comment-date, .single-comments .comment-box p.comment-date {
      display: inline-block !important;
      margin-top: 2rem; }

  .blog-imagelist {
    text-align: center; }
    .blog-imagelist img {
      margin-bottom: 1rem; }

  .review-box {
    margin-bottom: 15px; } }
@media (max-width: 567px) {
  .list-results {
    display: inherit !important;
    text-align: center; }
    .list-results .click-menu {
      justify-content: center !important;
      margin-top: 1rem; }
      .list-results .click-menu .sortby {
        display: inline-block !important; }

  ul.detail-inline {
    display: block !important; }
    ul.detail-inline li {
      display: block !important;
      margin: 0 0 5px !important; }

  .detail-listing-inner > div .detail-amenities li {
    width: 100%; } }
@media (max-width: 400px) {
  .detail-comments .comment-box .comment-content .comment-like, .single-comments .comment-box .comment-content .comment-like {
    display: block !important; }
    .detail-comments .comment-box .comment-content .comment-like .like-title, .single-comments .comment-box .comment-content .comment-like .like-title {
      float: none !important; }
    .detail-comments .comment-box .comment-content .comment-like .like-btn, .single-comments .comment-box .comment-content .comment-like .like-btn {
      float: none !important;
      margin-top: 0.5rem; }
      .detail-comments .comment-box .comment-content .comment-like .like-btn a, .single-comments .comment-box .comment-content .comment-like .like-btn a {
        padding: 0; }

  .detail-title .detail-title-inner .list-single-contacts li {
    padding-right: 0; } }
/* ========================================= */
/*          Blog CSS        */
/* ======================================== */
.swiper-list li {
  display: inline-block;
  margin-bottom: 0;
  border: 1px solid #fff;
  padding: 5px 10px;
  text-align: center;
  border-radius: 0px; }

section.blog .grid {
  position: relative;
  overflow: hidden;
  border-radius: 0px; }
  section.blog .grid .gridblog-content {
    padding: 20px 0 0; }
    section.blog .grid .gridblog-content .date {
      border-bottom: 1px solid #f1f1f1;
      display: inline-block; }
      section.blog .grid .gridblog-content .date a {
        color: #999;
        font-size: 14px; }
        section.blog .grid .gridblog-content .date a:hover {
          color: #059d9c; }
  section.blog .grid .grid-image {
    position: relative;
    transition: all ease-in-out 0.5s;
    overflow: hidden; }
    section.blog .grid .grid-image img {
      transition: all ease-in-out 0.5s;
      width: 100%; }
    section.blog .grid .grid-image:hover img {
      transform: scale(1.1);
      transition: all ease-in-out 0.5s; }
    section.blog .grid .grid-image:before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      -webkit-transition: -webkit-transform 1.8s;
      transition: -webkit-transform 1.8s;
      transition: transform 1.8s;
      transition: transform 1.8s,-webkit-transform 1.8s;
      -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0);
      transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0);
      z-index: 1; }
    section.blog .grid .grid-image:hover:before {
      -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0);
      transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0); }
    section.blog .grid .grid-image .overlay {
      background: linear-gradient(to top, #0000007d, transparent); }
  section.blog .grid .grid-item1 .gridblog-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 2;
    padding: 20px; }
  section.blog .grid .grid-item1 .date {
    border-bottom: 1px solid #fff;
    display: inline-block; }

.author-news {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: inline-block;
  width: 100%; }
  .author-news .author-news-content {
    position: relative;
    z-index: 1; }
    .author-news .author-news-content .author-thumb {
      width: 100px;
      height: 100px;
      margin: 0px auto;
      position: relative;
      overflow: hidden; }
      .author-news .author-news-content .author-thumb img {
        width: 100%;
        border-radius: 50%;
        height: 100%; }
      .author-news .author-news-content .author-thumb:before {
        position: absolute;
        content: '';
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 80px;
        width: 80px;
        border-radius: 50%;
        border: 2px dashed #fff; }

.header-social ul li {
  display: inline-block;
  margin: 0; }
  .header-social ul li a i {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 40px;
    background: #5e5eb7;
    color: #fff;
    margin-right: 2px; }
    .header-social ul li a i:hover {
      opacity: 0.8; }
    .header-social ul li a i:last-child {
      margin-right: 0; }
  .header-social ul li:nth-child(2) a i {
    background: #c72026; }
  .header-social ul li:nth-child(3) a i {
    background: #29a4dd; }

ul.sidebar-category li {
  display: block; }
  ul.sidebar-category li a {
    position: relative;
    margin: 0 0 12px;
    border-radius: 10px;
    background: #fff;
    padding: 14px 20px;
    border: 1px solid #f1f1f1;
    display: block; }
    ul.sidebar-category li a:hover {
      background: #059d9c;
      color: #fff; }
ul.sidebar-category li.active a {
  background: #059d9c;
  color: #fff; }

ul.sidebar-category1 li {
  display: block;
  line-height: 2.4; }

.sidebar-products .s-content {
  border-bottom: 1px dashed #f1f1f1; }
  .sidebar-products .s-content .products-price {
    color: #059d9c; }

.sidebar-tabs .nav-tabs {
  border-bottom: none;
  background: #fff;
  overflow: hidden;
  margin-bottom: 30px; }
  .sidebar-tabs .nav-tabs > li button {
    border-radius: 10px;
    padding: 15px;
    margin: 0;
    line-height: inherit;
    border: 1px solid #f1f1f1;
    display: inline-block;
    width: 100%; }
    .sidebar-tabs .nav-tabs > li button:hover {
      color: #fff !important;
      border-color: #059d9c;
      background: #059d9c; }
  .sidebar-tabs .nav-tabs > li button.active {
    color: #fff !important;
    border-color: #059d9c;
    background: #059d9c; }
    .sidebar-tabs .nav-tabs > li button.active:hover {
      color: #fff !important;
      border-color: #059d9c;
      background: #059d9c; }
.sidebar-tabs .sidebar-image {
  overflow: hidden; }
  .sidebar-tabs .sidebar-image img {
    width: 100%;
    border-radius: 10px; }
.sidebar-tabs .s-content .blog-no {
  font-size: 32px;
  color: #ccc;
  font-weight: 700; }
.sidebar-tabs .s-content .date {
  font-size: 14px;
  font-style: italic; }
.sidebar-tabs .s-content h5 {
  text-transform: capitalize;
  border: none;
  padding: 0; }

ul.sidebar-tags li {
  display: inline-block;
  margin-bottom: 0; }
  ul.sidebar-tags li a {
    padding: 10px 15px;
    background: #fff;
    display: inline-block;
    margin-bottom: 3px;
    border-radius: 10px;
    color: #444;
    border: 1px solid #f1f1f1;
    box-shadow: 0 0 15px #cccccc37;
    transition: all ease-in-out 0.5s; }
    ul.sidebar-tags li a:hover {
      
      color: #fff;
      background: #059d9c;
      transition: all ease-in-out 0.5s; }

.sidebar-videos article.post {
  padding: 15px;
  background: #fff;
  border: 1px solid #f1f1f1;
  box-shadow: 0 0 15px #cccccc37; }
.sidebar-videos button.slick-prev.slick-arrow, .sidebar-videos button.slick-next.slick-arrow {
  display: none !important; }

@media (max-width: 991px) {
  .sidebar-pomplet {
    text-align: center; } }
.blog-single .para-content {
  border-top: 1px dashed #f1f1f1;
  padding-top: 15px; }
  .blog-single .para-content span a {
    font-size: 14px;
    font-style: italic; }
.blog-single .blog-quote {
  position: relative;
  text-align: center;
  z-index: 10;
  padding: 60px 40px 30px;
  border-radius: 0px;
  overflow: hidden; }
  .blog-single .blog-quote:before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #059d9c;
    z-index: -1; }
  .blog-single .blog-quote p {
    font-size: 28px;
    line-height: 1.3;
    margin-top: 50px; }
  .blog-single .blog-quote span {
    font-size: 18px;
    font-style: italic; }
  .blog-single .blog-quote i {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 30px;
    height: 75px;
    width: 75px;
    text-align: center;
    line-height: 75px;
    background: #fff;
    color: #059d9c;
    border-radius: 50%;
    margin-bottom: 20px; }
    .blog-single .blog-quote i:after {
      position: absolute;
      content: '';
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 55px;
      width: 55px;
      border-radius: 50%;
      border: 1px dashed #fff; }
.blog-single .blog-share {
  padding: 20px;
  background: #fff; }
  .blog-single .blog-share .blog-share-tag ul li {
    display: inline-block;
    margin-bottom: 0; }
.blog-single .blog-next {
  display: inline-block;
  width: 100%;
  background: #fff;
  border-radius: 0px;
  overflow: hidden; }
  .blog-single .blog-next a {
    width: 50%;
    padding: 20px; }
  .blog-single .blog-next a.float-left {
    background: #059d9c; }
  .blog-single .blog-next .prev, .blog-single .blog-next .next {
    position: relative; }
    .blog-single .blog-next .prev i, .blog-single .blog-next .next i {
      position: absolute;
      left: 0;
      top: 6px; }
  .blog-single .blog-next .next i {
    left: inherit;
    right: 0; }
.blog-single .blog-author {
  padding: 20px;
  border-radius: 0px;
  background: #fff; }
  .blog-single .blog-author .blog-author-item .title span {
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 400; }
  .blog-single .blog-author .blog-author-item .blog-thumb img {
    border-radius: 50%;
    width: 150px;
    height: 150px; }
  .blog-single .blog-author .blog-author-item .blog-thumb:before {
    position: absolute;
    content: '';
    left: 50%;
    top: 50%;
    height: 125px;
    width: 125px;
    transform: translate(-50%, -50%);
    z-index: 1;
    border: 2px dashed #fff;
    border-radius: 50%; }

@media (max-width: 991px) {
  .blog-sidebar {
    margin-top: 2rem;
    position: relative; }

  section.login {
    padding-bottom: 0 !important; }
    section.login .login-content {
      margin-bottom: 2rem; } }
@media (max-width: 767px) {
  .blog-single .blog-next a {
    width: 100%; }
  .blog-single .blog-share {
    display: block !important;
    text-align: center; }
    .blog-single .blog-share .header-social {
      margin-top: 1rem; }
  .blog-single .blog-author {
    text-align: center; }
    .blog-single .blog-author .blog-thumb {
      margin-bottom: 1rem; }
  .blog-single .blog-quote {
    padding: 60px 20px 30px; }
    .blog-single .blog-quote p {
      font-size: 21px; }
  .blog-single .blog-single-in-cont {
    width: 100% !important;
    padding: 0 !important; }

  .detail-comments h4, .single-comments h4 {
    text-align: center; } }
@media (max-width: 359px) {
  .sidebar-tabs .nav-tabs > li > a {
    padding: 15px 13px; } }
.main-slider-1 {
  z-index: 1; }
  .main-slider-1::before {
    content: '';
    background: #172445;
    height: 100%;
    width: 50%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1; }
  .main-slider-1 .main-slider-inner {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%); }
    .main-slider-1 .main-slider-inner .logo-tab a {
      background: #fff;
      display: inline-block;
      padding: 15px; }
    .main-slider-1 .main-slider-inner .form-content {
      width: 80%; }
      .main-slider-1 .main-slider-inner .form-content .search-tabs li a {
        color: #fff;
        font-size: 18px;
        display: inline-block;
        vertical-align: middle;
        font-weight: 500;
        position: relative; }
        .main-slider-1 .main-slider-inner .form-content .search-tabs li a span {
          display: block;
          font-size: 15px; }
      .main-slider-1 .main-slider-inner .form-content .search-tabs li i {
        border-radius: 50%;
        color: #059d9c;
        float: right;
        font-size: 16px;
        height: 38px;
        line-height: 38px;
        margin-right: 0px;
        margin-top: 2px;
        text-align: center;
        width: 38px;
        background: #fff; }
      .main-slider-1 .main-slider-inner .form-content .search-tabs li.active a {
        color: #059d9c; }
        .main-slider-1 .main-slider-inner .form-content .search-tabs li.active a span {
          color: #059d9c; }
      .main-slider-1 .main-slider-inner .form-content .search-tabs li.active i {
        background: #059d9c;
        color: #fff; }
      .main-slider-1 .main-slider-inner .form-content .nice-select {
        padding: 13px 20px 10px 35px; }
      .main-slider-1 .main-slider-inner .form-content .range-slider .ui-slider .ui-slider-range {
        background: #fff; }
      .main-slider-1 .main-slider-inner .form-content .range-slider .ui-slider .min-value, .main-slider-1 .main-slider-inner .form-content .range-slider .ui-slider .max-value {
        color: #fff; }
      .main-slider-1 .main-slider-inner .form-content label {
        color: #fff; }
      .main-slider-1 .main-slider-inner .form-content .input-box {
        position: relative;
        display: inline-block;
        width: 100%; }
        .main-slider-1 .main-slider-inner .form-content .input-box input {
          padding-left: 35px; }
        .main-slider-1 .main-slider-inner .form-content .input-box i {
          position: absolute;
          left: 12px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 1; }
        .main-slider-1 .main-slider-inner .form-content .input-box [class^="fa-"]:before {
          color: #059d9c;
          font-weight: 600; }
    .main-slider-1 .main-slider-inner .social-icons li {
      display: inline-block;
      position: relative; }
      .main-slider-1 .main-slider-inner .social-icons li a {
        color: #059d9c;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: #fff;
        text-align: center;
        line-height: 2.3;
        margin: 0 2px; }
  .main-slider-1 #particles-js {
    position: fixed;
    z-index: -1; }

@media (max-width: 991px) {
  .home-search .overlay {
    display: none; }
  .home-search .main-slider-1::before {
    width: 100%;
    opacity: 0.8; }
  .home-search .main-slider-1 .main-slider-inner {
    position: relative;
    top: inherit;
    left: inherit;
    transform: none; }
    .home-search .main-slider-1 .main-slider-inner .main-tab-sec {
      margin-bottom: 2rem; }
    .home-search .main-slider-1 .main-slider-inner .col-lg-6 {
      padding: 0 15px !important; }
    .home-search .main-slider-1 .main-slider-inner .form-content .search-tabs li {
      text-align: center; }
      .home-search .main-slider-1 .main-slider-inner .form-content .search-tabs li a {
        display: block; }
      .home-search .main-slider-1 .main-slider-inner .form-content .search-tabs li i {
        float: none; } }
@media (max-width: 991px) {
  .booking-terms .form-group {
    width: 100% !important; }
  .booking-terms a {
    width: auto !important; } }
.flight-banner a.nir-btn {
  padding: 12px 24px;
  height: 50px;
  line-height: 2; }
.flight-banner .flight-slider {
  position: relative;
  width: 150%;
  right: 0;
  top: 0; }

.flight-navtab .nav-tabs {
  border: none;
  background: #777;
  border-radius: 10px 10px 0 0;
  text-align: center;
  display: inline-block; }
  .flight-navtab .nav-tabs button {
    padding: 15px 20px;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    border: none;
    border-radius: 0; }
    .flight-navtab .nav-tabs button span {
      display: block;
      font-weight: 700; }
  .flight-navtab .nav-tabs button.active, .flight-navtab .nav-tabs button.show {
    background: #059d9c;
    color: #fff; }

.flight-full .accordion-button:focus {
  box-shadow: none; }
.flight-full .accordion-button:not(.collapsed) {
  color: #059d9c;
  background: none;
  box-shadow: none; }

@media (max-width: 991px) {
  .flight-banner .banner-in .book-form {
    position: relative !important; }
  .flight-banner .flight-slider {
    position: relative;
    width: 100%; } }
@media (max-width: 991px) {
  .flight-navtab .nav-tabs button {
    width: 100%; } }
.car-banner a.nir-btn {
  padding: 12px 24px;
  height: 50px;
  line-height: 2; }
.car-banner .book-form {
  width: 90%; }

.car-image {
  position: absolute;
  bottom: -90%;
  right: 0;
  width: 68%;
  left: 0;
  margin: 0 auto; }

@media (max-width: 991px) {
  .car-image {
    width: 100%;
    bottom: -51%; } }
@media (max-width: 735px) {
  .car-banner .container {
    padding: 0 15px; }
  .car-banner .book-form {
    width: 100%; }
  .car-banner .car-slider {
    top: 20px !important; }
    .car-banner .car-slider .slick-initialized .slick-slide {
      margin: 0px 0 20px; }

  .featured-counter {
    padding-bottom: 0 !important; }
    .featured-counter .car-image {
      position: relative;
      bottom: -18px; }

  .car-testi {
    padding-top: 5rem !important; }

  .category-main-inner {
    padding-top: 3rem !important; } }
.cruise-banner .slider {
  height: 600px !important; }
  .cruise-banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content {
    width: 60%;
    top: 50%; }

/*# sourceMappingURL=style.css.map */
/* ========================================= */
/*        CLEAN MONTHLY PACKAGES SECTION    */
/* ========================================= */

.monthly-packages-section {
  background: #f8fafc;
  position: relative;
}

.monthly-packages-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(5, 157, 156, 0.2), 
    transparent);
}

/* Month Card */
.month-card {
  background: white;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(5, 157, 156, 0.1);
  height: 100%;
  display: block;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.month-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #059d9c; /* Main color by default */
  opacity: 1; /* Changed from 0 to 1 - always visible */
  transition: all 0.3s ease;
}

.month-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(197, 149, 72, 0.12); /* Brown shadow on hover */
  border-color: rgba(197, 149, 72, 0.2); /* Brown border on hover */
}

.month-card:hover::before {
  background: #c59548; /* Change to brown on hover */
}

/* Card Inner */
.card-inner {
  position: relative;
  z-index: 1;
}

/* Card Header */
.card-header {
  position: relative;
}

.month-icon {
  width: 60px;
  height: 60px;
  background: rgba(5, 157, 156, 0.1); /* Main color with transparency */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.month-icon i {
  font-size: 1.5rem;
  color: #059d9c; /* Main color */
  transition: all 0.3s ease;
}

.month-card:hover .month-icon {
  background: rgba(197, 149, 72, 0.1); /* Change to brown with transparency on hover */
  transform: translateY(-3px);
}

.month-card:hover .month-icon i {
  color: #c59548; /* Change to brown on hover */
  transform: scale(1.1);
}

/* Current Badge */
.current-badge {
  background: #059d9c; /* Main color */
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(5, 157, 156, 0.2);
  transition: all 0.3s ease;
}

.month-card:hover .current-badge {
  background: #c59548; /* Change to brown on hover */
  box-shadow: 0 4px 12px rgba(197, 149, 72, 0.2);
}

/* Month Name */
.month-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0;
  transition: color 0.3s ease;
}

.month-card:hover .month-name {
  color: #c59548; /* Change to brown on hover */
}

/* Description */
.month-desc {
  font-size: 0.9rem;
  color: #718096;
  line-height: 1.5;
  margin: 0;
  min-height: 42px;
}

/* View Link */
.view-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: #059d9c; /* Main color */
  transition: all 0.3s ease;
}

.arrow-icon {
  color: #059d9c; /* Main color */
  font-size: 0.9rem;
  transition: all 0.3s ease;
  opacity: 0.7;
}

.month-card:hover .view-link {
  color: #c59548; /* Change to brown on hover */
  transform: translateX(3px);
}

.month-card:hover .arrow-icon {
  color: #c59548; /* Change to brown on hover */
  opacity: 1;
  transform: translateX(5px);
}

/* View All Button */
.btn-view-all {
  display: inline-flex;
  align-items: center;
  background: white;
  color: #059d9c; /* Main color */
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid rgba(5, 157, 156, 0.2); /* Main color with transparency */
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.btn-view-all:hover {
  background: #059d9c; /* Main color */
  color: white;
  border-color: #059d9c; /* Main color */
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(5, 157, 156, 0.2);
}

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

/* Card Background Effect */
.month-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(5, 157, 156, 0.03) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.month-card:hover::after {
  background: radial-gradient(circle, rgba(197, 149, 72, 0.03) 0%, transparent 70%); /* Brown on hover */
  opacity: 1;
}

/* Responsive Design */
@media (max-width: 992px) {
  .month-card {
    padding: 1.75rem 1.25rem;
  }
  
  .month-icon {
    width: 55px;
    height: 55px;
  }
  
  .month-icon i {
    font-size: 1.4rem;
  }
  
  .month-name {
    font-size: 1.4rem;
  }
}

@media (max-width: 768px) {
  .monthly-packages-section {
    padding: 3rem 0;
  }
  
  .month-card {
    margin-bottom: 1rem;
    padding: 1.5rem;
  }
  
  .month-card:hover {
    transform: translateY(-5px);
  }
  
  .btn-view-all {
    padding: 0.75rem 1.25rem;
  }
}

@media (max-width: 576px) {
  .monthly-packages-section .row {
    max-width: 400px;
    margin: 0 auto;
  }
  
  .month-card {
    padding: 1.5rem;
  }
}

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

.month-card {
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0;
}

.month-card:nth-child(1) { animation-delay: 0.1s; }
.month-card:nth-child(2) { animation-delay: 0.2s; }
.month-card:nth-child(3) { animation-delay: 0.3s; }
.month-card:nth-child(4) { animation-delay: 0.4s; }
/* ========================================= */
/*          NEW LAYOUT COMPONENTS           */
/* ========================================= */

/* Hero CTA Section */
.hero-cta-section {
  position: relative;
  overflow: hidden;
}

.hero-cta-content h1 {
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.hero-cta-image {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.stats-overlay {
  animation: float 3s ease-in-out infinite;
  border: 2px solid rgba(5, 157, 156, 0.1);
  padding: 1.5rem !important; /* This is the equivalent of p-4 */
}

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

/* Why Choose Section */
.feature-card {
  transition: all 0.3s ease;
  border: 2px solid transparent;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-10px);
  border-color: #059d9c; /* Main color */
  box-shadow: 0 15px 30px rgba(5, 157, 156, 0.15) !important;
}

.feature-icon {
  transition: all 0.3s ease;
}

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

/* CTA Banner */

/* Button Styles */
.btn-primary {
  background-color: #059d9c !important; /* Main color */
  border-color: #059d9c !important; /* Main color */
  color: white !important;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: #c59548 !important; /* Change to brown on hover */
  border-color: #c59548 !important; /* Change to brown on hover */
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(197, 149, 72, 0.3);
}

.btn-outline-primary {
  color: #059d9c !important; /* Main color */
  border-color: #059d9c !important; /* Main color */
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background-color: #059d9c !important; /* Main color */
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(5, 157, 156, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-cta-section .row {
    flex-direction: column-reverse;
  }
  
  .hero-cta-image {
    margin-bottom: 2rem;
  }
  
  .stats-overlay {
    position: relative !important;
    bottom: 0 !important;
    right: 0 !important;
    margin-top: -30px;
    max-width: 100% !important;
        padding: 0 !important;

  }
  
  .month-card {
    margin-bottom: 1rem;
  }
}

/* Animation Classes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.city-section {
  padding: 30px 0;
}


.hero-cta-section,
.city-section,
.monthly-packages-section,
.featured-packages,
.why-choose-section {
  animation: fadeIn 0.8s ease-out;
}

/* Staggered Animation Delays */
.hero-cta-section { animation-delay: 0.1s; }
.city-section { animation-delay: 0.2s; }
.monthly-packages-section { animation-delay: 0.3s; }
.featured-packages { animation-delay: 0.4s; }
.why-choose-section { animation-delay: 0.5s; }

/* Loading Animation */
.skeleton-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========================================= */
/*        MODERN WHY CHOOSE US SECTION      */
/* ========================================= */

.why-choose-section {
  background: linear-gradient(135deg, #f8fafc 0%, #f0f7ff 100%);
  overflow: hidden;
  position: relative;
}

/* Background Elements */
.bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23059d9c' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.5;
  z-index: 0;
}

.bg-gradient {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(5, 157, 156, 0.08) 0%, transparent 70%);
  z-index: 0;
}

/* Section Header */
.why-choose-section .section-badge {
  background: linear-gradient(135deg, #059d9c, #047a7a);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(5, 157, 156, 0.2);
}

.text-gradient {
  background: linear-gradient(135deg, #059d9c, #c59548);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  max-width: 900px;
  font-size: 1.1rem;
  color: #4a5568;
  line-height: 1.7;
  margin: 0 auto;
}

/* Feature Cards */
.feature-card-modern {
  height: 100%;
  position: relative;
}

.feature-card-inner {
  background: white;
  border-radius: 20px;
  padding: 2rem 1.5rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(5, 157, 156, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.feature-card-inner:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(5, 157, 156, 0.12);
  border-color: rgba(5, 157, 156, 0.2);
}

/* Feature Number */
.feature-number {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 3rem;
  font-weight: 800;
  color: rgba(5, 157, 156, 0.05);
  line-height: 1;
  transition: all 0.3s ease;
}

.feature-card-inner:hover .feature-number {
  color: rgba(5, 157, 156, 0.1);
  transform: scale(1.1);
}

/* Icon Style */
.feature-icon-modern {
  margin-bottom: 1.5rem;
}

.icon-background {
  width: 80px;
  height: 80px;
  background: rgba(5, 157, 156, 0.08);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
/* Terms Page Specific Styles */
.terms-premium-page .trust-badge {
  background: rgba(5, 157, 156, 0.1);
  border-left-color: #059d9c;
}

.terms-premium-page .trust-badge i {
  color: #059d9c;
}

/* Terms Reference Grid */
.terms-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin: 40px 0;
}

.reference-card {
  background: var(--white);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  border-top: 4px solid #059d9c;
  transition: transform 0.3s ease;
}

.reference-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.reference-card .reference-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #059d9c, #027a79);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--white);
  font-size: 28px;
}

.reference-card h4 {
  font-size: 18px;
  color: #059d9c;
  margin-bottom: 10px;
  font-weight: 700;
}

.reference-card p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* Contact Note */
.contact-note {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.contact-note p {
  margin-bottom: 8px;
  opacity: 0.9;
  font-size: 15px;
}

.contact-note i {
  color: #059d9c;
}

/* Help Buttons for Terms */
.terms-premium-page .btn-help-call {
  background: white;
}

.terms-premium-page .btn-help-call:hover {
  background: var(--accent);
  color: white; 
}

/* Responsive */
@media (max-width: 768px) {
  .terms-reference-grid {
    grid-template-columns: 1fr;
  }
}

.feature-card-inner:hover .icon-background {
  background: rgba(197, 149, 72, 0.08);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(5, 157, 156, 0.1);
}

/* Feature Content */
.feature-content {
  position: relative;
  z-index: 1;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}

.feature-card-inner:hover .feature-title {
  color: #059d9c;
}

.feature-desc {
  font-size: 0.95rem;
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* Hover Line */
.hover-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #059d9c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.feature-card-inner:hover .hover-line {
  transform: scaleX(1);
background: linear-gradient(135deg, #059d9c 70%, #c59548 100%);
}

/* Stats Banner */
.stats-banner {
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(5, 157, 156, 0.1);
  overflow: hidden;
}


.popular-questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin: 40px 0;
}

.popular-question-card {
  background: var(--white);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  border-left: 4px solid var(--primary); /* #059d9c */
  transition: transform 0.3s ease;
}

.popular-question-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.popular-question-card .question-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary), #037b7b); /* gradient with primary */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--white);
  font-size: 24px;
}

.popular-question-card h4 {
  font-size: 18px;
  color: var(--primary); /* #059d9c */
  margin-bottom: 10px;
  font-weight: 700;
  text-align: center;
}

.popular-question-card p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  text-align: center;
}


/* Help Note */
.help-note {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.help-note p {
  margin-bottom: 8px;
  opacity: 0.9;
  font-size: 15px;
}

.help-note i {
  color: var(--primary); /* #059d9c */
}


.premium-team-section {
  padding: 30px 0;
  background: var(--light);
}

.team-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.team-feature-item {
  text-align: center;
  padding: 30px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

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

.team-feature-item .feature-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--white);
  font-size: 28px;
}

.team-feature-item h4 {
  font-size: 20px;
  color: var(--primary);
  margin-bottom: 10px;
  font-weight: 700;
}

.team-feature-item p {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.6;
}




.stat-label {
  font-size: 0.9rem;
  font-weight: 600;
    color: rgba(248, 249, 250, 0.6); /* adjust 0.6 as needed */


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

/* Responsive Design */
@media (max-width: 992px) {
  .why-choose-section {
    padding: 4rem 0;
  }
  
  .feature-card-inner {
    padding: 1.75rem 1.25rem;
  }
  
  .feature-number {
    font-size: 2.5rem;
    top: 0.75rem;
    right: 1.25rem;
  }
  
  .icon-background {
    width: 70px;
    height: 70px;
  }
  
  .stat-item {
    padding: 1.5rem 1rem;
  }
  
  .stat-number {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .why-choose-section {
    padding: 3rem 0;
  }
  
  .feature-card-modern {
    margin-bottom: 0.5rem;
  }
  
  .feature-card-inner:hover {
    transform: translateY(-5px);
  }
  
  .stat-item {
    padding: 1.5rem;
    margin-bottom: 0;
  }
  
  .stat-item:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 576px) {
  .feature-card-inner {
    padding: 1.5rem;
  }
  
  .icon-background {
    width: 60px;
    height: 60px;
  }
  
  .feature-number {
    font-size: 2rem;
  }
  
  .feature-title {
    font-size: 1.1rem;
  }
  
  .feature-desc {
    font-size: 0.9rem;
  }
}

/* Animation */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.feature-card-modern {
  animation: fadeInLeft 0.6s ease-out forwards;
  opacity: 0;
}

.feature-card-modern:nth-child(1) { animation-delay: 0.1s; }
.feature-card-modern:nth-child(2) { animation-delay: 0.2s; }
.feature-card-modern:nth-child(3) { animation-delay: 0.3s; }
.feature-card-modern:nth-child(4) { animation-delay: 0.4s; }

/* Alternative: Numbers overlay on top */
@media (max-width: 768px) {
  .feature-card-inner {
    display: grid !important;
    grid-template-areas: 
      "icon title"
      "desc desc" !important;
    grid-template-columns: auto 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 1.5rem !important;
    height: auto !important;
  }

  .feature-number {
    position: absolute !important;
    top: 1rem !important;
    right: 1.5rem !important;
    font-size: 2.5rem !important;
    color: rgba(5, 157, 156, 0.08) !important;
    margin: 0 !important;
    line-height: 1 !important;
    z-index: 1 !important;
  }
  
  /* Rest of the styles remain the same... */
}



/* ATOL Protection Section */
.atol-protection-section {
  padding: 60px 0;
  background: #f8f9fa;
}

.atol-content {
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  border: 1px solid rgba(5, 157, 156, 0.1);
}

.atol-notice {
  background: linear-gradient(135deg, rgba(5, 157, 156, 0.1), rgba(5, 157, 156, 0.05));
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 30px;
  border-left: 4px solid #059d9c;
}

.atol-badge {
  display: inline-flex;
  align-items: center;
  background: #059d9c;
  color: white;
  padding: 8px 16px;
  border-radius: 50px;
  font-weight: 600;
  margin-bottom: 15px;
}

.atol-badge i {
  margin-right: 8px;
}

.atol-intro {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  margin: 0;
}

.atol-wording h3 {
  color: #059d9c;
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 22px;
}

.atol-wording h4 {
  color: #027a79;
  margin-top: 25px;
  margin-bottom: 12px;
  font-size: 18px;
}

.atol-wording p {
  color: #444;
  line-height: 1.7;
  margin-bottom: 15px;
  font-size: 15px;
}

.trading-names {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.trading-names h4 {
  color: #059d9c;
  margin-bottom: 15px;
}

.trading-names ul {
  list-style: none;
  padding-left: 0;
}

.trading-names li {
  padding: 8px 0;
  padding-left: 25px;
  position: relative;
  color: #555;
}

.trading-names li:before {
  content: "•";
  color: #059d9c;
  font-size: 20px;
  position: absolute;
  left: 0;
  top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .atol-content {
    padding: 25px;
  }
  
  .atol-wording h3 {
    font-size: 20px;
  }
  
  .atol-wording h4 {
    font-size: 17px;
  }
}
/* ========== PREMIUM BLOG VIEW PAGE ========== */
.premium-blog-view-page {
  background: #f8fafc;
}

/* Premium Hero Section */
.premium-blog-hero-section {
  background: linear-gradient(135deg, #059d9c 70%, #c59548 100%);
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}

.premium-blog-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.9;
}

.premium-hero-content-side {
  display: flex;
  align-items: stretch;
  gap: 60px;
  position: relative;
  z-index: 2;
}

.premium-hero-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  padding-right: 40px;
}

.premium-hero-badge {
  margin-bottom: 25px;
}

.premium-badge-text {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.premium-hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  background: linear-gradient(to right, var(--white), rgba(255,255,255,0.9));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.premium-hero-description {
  font-size: 1.25rem;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 30px;
  max-width: 700px;
}

.premium-hero-meta {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-bottom: 35px;
}


.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  opacity: 0.9;
}

.meta-item i {
  color: var(--white);
}

.meta-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
}

.premium-author-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 500px;
}

.author-avatar-circle {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--accent), #ff7e5f);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
}

.author-info-content h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
}

.author-info-content p {
  font-size: 14px;
  opacity: 0.9;
}

/* Premium Form Container */
.premium-hero-right {
  flex: 0 0 400px;
  display: flex;
  align-items: center;
}

.premium-form-container {
  background: var(--white);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
  width: 100%;
  border: 1px solid var(--gray-light);
}

.premium-form-header {
  margin-bottom: 25px;
  text-align: center;
}

.premium-icon-heading {
  font-size: 24px;
  color: var(--primary);
  margin-bottom: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.premium-form-header p {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.4;
}

/* Premium Trust Badges */
.premium-trust-badges {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin: 40px 0 50px;
  flex-wrap: wrap;
}

.premium-trust-badge {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 25px;
  background: rgba(5, 157, 156, 0.08);
  border-radius: 12px;
  border-left: 4px solid var(--primary);
  transition: transform 0.3s ease;
}

.premium-trust-badge:hover {
  transform: translateY(-3px);
}

.premium-trust-badge i {
  color: var(--primary);
  font-size: 22px;
}

.premium-trust-badge span {
  font-weight: 600;
  color: var(--black);
  font-size: 16px;
}

/* Premium Blog Content Layout */
.premium-blog-content-section {
  padding: 10px 0;
}

.premium-blog-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Featured Blog Image */
.featured-blog-image {
  margin-bottom: 40px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

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

.featured-blog-image:hover .main-blog-image {
  transform: scale(1.03);
}

/* Premium Blog Article */
.premium-blog-article {
  background: var(--white);
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
}

.article-content-block {
  margin-bottom: 40px;
}

.article-text-content {
  font-size: 18px;
  line-height: 1.8;
  color: var(--gray-dark);
}

.article-text-content h2 {
  font-size: 32px;
  color: var(--primary);
  margin: 40px 0 25px;
  font-weight: 700;
}

.article-text-content h3 {
  font-size: 26px;
  color: var(--primary);
  margin: 35px 0 20px;
  font-weight: 600;
}

.article-text-content p {
  margin-bottom: 25px;
}

.article-text-content ul,
.article-text-content ol {
  margin: 25px 0 25px 35px;
}

.article-text-content li {
  margin-bottom: 12px;
  position: relative;
}

.article-text-content li::before {
  content: "•";
  color: var(--primary);
  font-weight: bold;
  position: absolute;
  left: -20px;
}

.article-image-block {
  margin: 40px 0;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

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

.article-image-block:hover .content-image {
  transform: scale(1.02);
}

/* Premium Article Tags */
.premium-article-tags {
  padding: 40px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
}

.tags-section-title {
  font-size: 24px;
  color: var(--primary);
  margin-bottom: 25px;
  display: flex;
  align-items: center;
}

.tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.tag-item .tag-badge {
  display: inline-block;
  padding: 12px 25px;
  background: rgba(5, 157, 156, 0.1);
  color: var(--primary);
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.tag-item .tag-badge:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(5, 157, 156, 0.2);
}

/* Premium Sidebar */
.premium-sidebar {
  position: relative;
}

.premium-sidebar-sticky {
  position: sticky;
  top: 100px;
}

/* Premium Sidebar Widgets */
.premium-sidebar-widget {
  background: var(--white);
  border-radius: 15px;
  margin-bottom: 25px;
  overflow: hidden;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--gray-light);
}

.widget-header-premium {
  padding: 20px;
  background: var(--primary);
  border-bottom: 1px solid var(--gray-light);

  /* top corners only */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}


.widget-header-premium h3 {
  font-size: 20px;
  color: var(--white);
  margin: 0;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.widget-content-premium {
  padding: 25px;
}

/* Trust Features */
.trust-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trust-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.trust-feature-item i {
  color: var(--primary);
  font-size: 18px;
  margin-top: 3px;
}

.trust-feature-item h5 {
  font-size: 16px;
  color: var(--black);
  margin-bottom: 5px;
  font-weight: 600;
}

.trust-feature-item p {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.4;
}

/* Cities & Months Grid */
.cities-grid-premium,
.months-grid-premium {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.city-chip-premium,
.month-chip-premium {
  display: inline-block;
  padding: 10px 20px;
  background: rgba(5, 157, 156, 0.1);
  color: var(--primary);
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.city-chip-premium:hover,
.month-chip-premium:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-2px);
}

/* Contact Options */
.contact-options-premium {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-option-premium {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  background: rgba(5, 157, 156, 0.05);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.contact-option-premium:hover {
  background: white;
  border-color: var(--primary);
  transform: translateX(5px);
}

.option-icon-premium {
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--primary);
  border: 1px solid var(--gray-light);
}

.option-icon-premium.whatsapp {
  background: #25d366;
  color: white;
  border: none;
}

.option-content-premium h5 {
  font-size: 16px;
  color: var(--black);
  margin-bottom: 1px;
  font-weight: 600;
}

.option-content-premium p {
  font-size: 14px;
  color: var(--gray);
}

/* Author Profile Section */
.premium-author-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}

.author-profile-card {
  background: white;
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);
  max-width: 1000px;
  margin: 0 auto;
}

.author-profile-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

.profile-avatar-circle {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: white;
}

.author-profile-info h3 {
  font-size: 28px;
  color: var(--black);
  margin-bottom: 10px;
  font-weight: 700;
}

.profile-role {
  color: var(--primary);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
}

.author-stats {
  display: flex;
  align-items: center;
  gap: 30px;
}

.author-stat {
  text-align: center;
}



.stat-label {
  font-size: 14px;
  color: rgba(248, 249, 250, 0.6); /* adjust 0.6 as needed */
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

.author-profile-content p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--gray-dark);
  margin: 0;
}

/* Newsletter Section */
.premium-newsletter-section {
  padding: 60px 0;
  background: linear-gradient(135deg, var(--white) 0%, var(--white) 100%);
}

.newsletter-card-premium {
  background: var(--primary);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
}

.card-content-premium h3 {
  font-size: 32px;
  color: var(--primary);
  margin-bottom: 15px;
  font-weight: 700;
  text-align: center;
}

.card-content-premium p {
  font-size: 18px;
  color: var(--primary);
  text-align: center;
  margin-bottom: 30px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.email-input-premium {
  display: flex;
  gap: 15px;
  max-width: 500px;
  margin: 0 auto;
}

.email-input-premium input {
  flex: 1;
  padding: 18px 25px;
  border: 2px solid var(--white);
  border-radius: 12px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.email-input-premium input:focus {
  outline: none;
  border-color: var(--accent);
}

.subscribe-btn-premium {
  padding: 10px 35px;
  background: var(--white);
  color: var(--primary);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.subscribe-btn-premium:hover {
  background: var(--accent);     /* 🔥 background changes */
  color: var(--white);            /* 🔥 text becomes white */
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(5, 157, 156, 0.3);
}


/* Dynamic Content */
.premium-dynamic-section {
  padding: 60px 0;
}

.premium-dynamic-content {
  background: white;
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  max-width: 1000px;
  margin: 0 auto;
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 1200px) {
  .premium-hero-content-side {
    gap: 40px;
  }
  
  .premium-blog-layout {
    gap: 40px;
  }
  
  .premium-hero-title {
    font-size: 3rem;
  }
}

@media (max-width: 992px) {
  .premium-blog-hero-section {
    padding: 60px 0 40px;
  }
  
  .premium-hero-content-side {
    flex-direction: column;
    gap: 50px;
  }
  
  .premium-hero-left {
    padding-right: 0;
    text-align: center;
  }
  
  .premium-hero-right {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .premium-hero-title {
    font-size: 2.5rem;
  }
  
  .premium-hero-description {
    font-size: 1.1rem;
  }
  
  .premium-hero-meta {
    justify-content: center;
  }
  
  .premium-author-card {
    margin: 0 auto;
  }
  
  .premium-blog-layout {
    grid-template-columns: 1fr;
  }
  
  .premium-sidebar-sticky {
    position: static;
  }
  
  .premium-trust-badges {
    gap: 15px;
  }
  
  .premium-trust-badge {
    flex: 1;
    min-width: 200px;
  }
}

@media (max-width: 768px) {
  .premium-hero-title {
    font-size: 2.2rem;
  }
  
  .premium-blog-article {
    padding: 30px;
  }
  
  .article-text-content {
    font-size: 16px;
  }
  
  .article-text-content h2 {
    font-size: 28px;
  }
  
  .author-profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .author-stats {
    flex-direction: column;
    gap: 20px;
  }
  
  .email-input-premium {
    flex-direction: column;
  }
  
  .subscribe-btn-premium {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .premium-blog-hero-section {
    padding: 40px 0 30px;
  }
  
  .premium-hero-title {
    font-size: 1.8rem;
  }
  
  .premium-form-container {
    padding: 25px;
  }
  
  .premium-blog-article {
    padding: 20px;
  }
  
  .premium-article-tags {
    padding: 30px;
  }
  
  .tags-grid {
    justify-content: center;
  }
  
  .cities-grid-premium,
  .months-grid-premium {
    justify-content: center;
  }
}
/* ========== COMPACT FORM STYLING ========== */

.compact-form-wrapper {
  width: 100%;
}

.form-content-in {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

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

.input-box {
  width: 100%;
}

.form-label-compact {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 8px;
}

.form-input-compact,
.form-select-compact {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--gray-light);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: var(--white);
  color: var(--black);
  transition: all 0.3s ease;
}

.form-input-compact:focus,
.form-select-compact:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(5, 157, 156, 0.15);
}

.form-input-compact::placeholder {
  color: var(--gray);
  opacity: 0.7;
}

.form-select-compact {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23059d9c' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
  padding-right: 40px;
  cursor: pointer;
}

.form-submit-btn {
  margin-top: 10px;
}

.btn-submit-compact {
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: var(--white);
  border: none;
  padding: 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-submit-compact:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(5, 157, 156, 0.3);
}

.form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray);
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px solid var(--gray-light);
}

.form-note i {
  color: var(--primary);
}

/* Update the premium form container to be more compact */
.premium-form-container {
  background: var(--white);
  border-radius: 20px;
  padding: 25px !important; /* Reduced from 30px */
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
  width: 100%;
  border: 1px solid var(--gray-light);
}

.premium-form-header {
  margin-bottom: 20px !important; /* Reduced from 25px */
  text-align: center;
}

.premium-icon-heading {
  font-size: 22px !important; /* Slightly smaller */
  color: var(--primary);
  margin-bottom: 8px !important; /* Reduced */
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Reduced gap */
}

.premium-form-header p {
  color: var(--gray);
  font-size: 14px !important; /* Smaller */
  line-height: 1.4;
}

/* Make hero section more compact */
.premium-blog-hero-section {
  background: linear-gradient(135deg, #059d9c 70%, #c59548 100%);
  padding: 60px 0 40px !important; /* Reduced from 80px 0 60px */
  position: relative;
  overflow: hidden;
}

.premium-hero-title {
  font-size: 3rem !important; /* Slightly smaller */
  font-weight: 800;
  line-height: 1.1; /* Tighter */
  margin-bottom: 15px !important; /* Reduced */
}

.premium-hero-description {
  font-size: 1.1rem !important; /* Smaller */
  line-height: 1.5; /* Tighter */
  opacity: 0.9;
  margin-bottom: 25px !important; /* Reduced */
  max-width: 700px;
}

.premium-hero-meta {
  display: flex;
  align-items: center;
  gap: 20px; /* Reduced gap */
  margin-bottom: 25px !important; /* Reduced */
}

.meta-item {
  font-size: 14px !important; /* Smaller */
}


/* Make hero content side more compact */
.premium-hero-content-side {
  display: flex;
  align-items: stretch;
  gap: 40px !important; /* Reduced from 60px */
  position: relative;
  z-index: 2;
}

.premium-hero-right {
  flex: 0 0 380px !important; /* Slightly narrower */
  display: flex;
  align-items: center;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .premium-blog-hero-section {
    padding: 50px 0 30px !important;
  }
  
  .premium-hero-content-side {
    gap: 30px !important;
  }
  
  .premium-hero-title {
    font-size: 2.2rem !important;
  }
  
  .premium-hero-right {
    flex: 0 0 auto !important;
    width: 100%;
    max-width: 450px;
  }
}

@media (max-width: 768px) {
  .premium-blog-hero-section {
    padding: 40px 0 25px !important;
  }
  
  .premium-hero-title {
    font-size: 1.8rem !important;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .premium-form-container {
    padding: 20px !important;
  }
}
/* Package Detail Page Specific Styles */
.package-detail-premium-page .modern-hero-badge .badge-text {
  background: var(--accent);
  color: var(--white);
}

/* Package Details Layout */
.premium-package-details {
  padding: 50px 0;
}

.premium-package-layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 40px;
}

/* Highlights Grid */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin: 30px 0;
}

.highlight-card {
  background: var(--white);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  border-top: 4px solid var(--primary);
  transition: transform 0.3s ease;
  text-align: center;
}

.highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.highlight-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  color: var(--white);
  font-size: 24px;
}

.highlight-content h4 {
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 10px;
  font-weight: 700;
}

.highlight-content p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* Hotel Sections */
.hotel-section {
  margin: 50px 0;
  padding: 30px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.hotel-description {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-light);
}

/* Info Grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin: 30px 0;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background: rgba(5, 157, 156, 0.05);
  border-radius: 8px;
  border-left: 4px solid var(--primary);
}

.info-item i {
  font-size: 24px;
  margin-top: 5px;
}

.info-item h5 {
  font-size: 16px;
  color: var(--black);
  margin-bottom: 5px;
  font-weight: 600;
}

.info-item p {
  color: var(--gray);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* Benefits List */
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  background: rgba(5, 157, 156, 0.05);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}

.benefit-item i {
  color: var(--primary);
  font-size: 14px;
}

.benefit-item span {
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
}

/* Tags Grid */
.tags-grid-premium {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.city-chip-premium,
.month-chip-premium,
.offer-chip-premium {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(5, 157, 156, 0.1);
  color: var(--primary);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.city-chip-premium:hover,
.month-chip-premium:hover,
.offer-chip-premium:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

/* Contact Options */
.contact-options-premium {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-option-premium {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(5, 157, 156, 0.05);
  border-radius: 8px;
  text-decoration: none;
  border-left: 4px solid var(--primary);
  transition: transform 0.3s ease;
}

.contact-option-premium:hover {
  transform: translateX(5px);
  background: rgba(5, 157, 156, 0.1);
}

.option-icon-premium {
  width: 40px;
  height: 40px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 18px;
}

.option-icon-premium.whatsapp {
  background: #25D366;
}

.option-content-premium h5 {
  font-size: 15px;
  color: var(--black);
  margin-bottom: 3px;
  font-weight: 600;
}

.option-content-premium p {
  font-size: 13px;
  color: var(--gray);
  margin: 0;
}

/* Responsive */
@media (max-width: 992px) {
  .premium-package-layout {
    grid-template-columns: 1fr;
  }
  
  .highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .highlights-grid,
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .hotel-section {
    padding: 20px;
  }
}
/* ========== OPTION 1: PREMIUM FEATURE DASHBOARD ========== */
.premium-feature-dashboard {
  padding: 30px 0;
  background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

.premium-feature-dashboard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #059d9c 70%, #c59548 100%);
}

.premium-feature-dashboard .section-header-premium {
  text-align: center;
  margin-bottom: 20px;
}

.premium-feature-dashboard .header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #059d9c, #059d9c);
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.premium-feature-dashboard h2 {
  font-size: 42px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 15px;
  background: linear-gradient(90deg, #059d9c, #1a1a1a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Dashboard Grid */
.feature-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-main-feature {
  grid-column: 1 / -1;
  background: white;
  border-radius: 20px;
  padding: 35px;
  box-shadow: 0 15px 50px rgba(5, 157, 156, 0.15);
  border: 2px solid rgba(5, 157, 156, 0.1);
}

.main-feature-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f7ff;
}

.feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.primary-badge {
  background: linear-gradient(135deg, #059d9c, #059d9c);
  color: white;
}

.accent-badge {
  background: linear-gradient(135deg, #059d9c, #059d9c);
  color: white;
}

.success-badge {
  background: linear-gradient(135deg, #059d9c, #059d9c);
  color: white;
}

.info-badge {
  background: linear-gradient(135deg, #059d9c, #059d9c);
  color: white;
}

.warning-badge {
  background: linear-gradient(135deg, #059d9c, #059d9c);
  color: white;
}

.feature-main-title {
  font-size: 32px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0;
}

/* Feature Details Grid */
.feature-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.location-detail {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.location-detail:hover {
  transform: translateY(-5px);
}

.makkah-detail {
background: linear-gradient(
  135deg,
  rgba(5, 157, 156, 0.05),
  rgba(5, 157, 156, 0.15)
);
  border: 2px solid rgba(5, 157, 156, 0.2);
}

.madinah-detail {
background: linear-gradient(
  135deg,
  rgba(197, 149, 72, 0.05),
  rgba(197, 149, 72, 0.15)
);
border: 2px solid rgba(197, 149, 72, 0.2);
}

.detail-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #059d9c, #059d9c);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
}

.madinah-detail .detail-icon {
  background: linear-gradient(135deg, #c59548, #c59548);
}

.detail-content {
  flex: 1;
}

.detail-label {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.detail-value {
  font-size: 36px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1;
  margin-bottom: 5px;
}

.detail-sub {
  font-size: 14px;
  color: #059d9c;
  font-weight: 600;
}
.detail-sub-mad {
  font-size: 14px;
  color: #c59548;
  font-weight: 600;
}

/* Dashboard Feature Cards */
.dashboard-feature-card {
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  border: 2px solid #f0f7ff;
  transition: all 0.3s ease;
}

.dashboard-feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}


.transport-feature {
  border-top: 5px solid #059D9C;
}

.flight-feature {
  border-top: 5px solid #059D9C;
}

.visa-feature {
  border-top: 5px solid #059D9C;
}

.additional-features {
  border-top: 5px solid #059D9C;
}

.feature-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f7ff;
}

.feature-header h4 {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 10px 0 0;
}

/* Feature Checklist */
.feature-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 15px;
  color: #333;
}

.feature-checklist i {
  color: #43e97b;
  margin-top: 3px;
}

/* Flight Details */
.flight-details {
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  margin-bottom: 15px;
}

.flight-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.route-point {
  display: flex;
  align-items: center;
  gap: 10px;
}

.point-icon {
  font-size: 28px;
}

.point-city {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
}

.point-type {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
}

.route-arrow {
  color: #000000;
  font-size: 24px;
}

.flight-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
/* Mobile styles - Override existing styles */
@media (max-width: 768px) {
  .flight-route {
    /* Override the flex-direction: column from existing styles */
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
    padding: 10px 8px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    width: 100% !important;
  }

  .route-point {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 45% !important;
  }

  .route-point:first-child .point-info {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .route-point:last-child .point-info {
    align-items: flex-end !important;
    text-align: right !important;
  }

  .point-icon {
    display: none !important; /* Hide icon on mobile for compact layout */
  }

  .point-info {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .point-city {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    order: 1 !important;
    margin-bottom: 2px !important;
  }

  .point-type {
    font-size: 10px !important;
    color: #666 !important;
    text-transform: uppercase !important;
    order: 2 !important;
    letter-spacing: 0.3px !important;
  }

  .route-arrow {
    color: #000000 !important;
    font-size: 16px !important;
    padding: 0 8px !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin-top: 8px !important; /* Align with city text */
  }

  /* Adjust flight-details padding for mobile */
  .flight-details {
    padding: 12px !important;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .flight-route {
    padding: 8px 6px !important;
    gap: 2px !important;
  }

  .point-city {
    font-size: 13px !important;
  }

  .point-type {
    font-size: 9px !important;
  }

  .route-arrow {
    font-size: 14px !important;
    padding: 0 4px !important;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .point-city {
    font-size: 12px !important;
  }
  
  .point-type {
    font-size: 8px !important;
  }
  
  .route-arrow {
    font-size: 12px !important;
  }
}
.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e1e8f0;
}

.summary-label {
  font-weight: 600;
  color: #666;
}

.summary-value {
  font-weight: 700;
  color: #059d9c;
}

/* Visa Process */
.visa-process {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  flex: 1;
}

.step-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #059d9c 60%, #c59548 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 18px;
}

.step-content {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  max-width: 100px;
}
/* Mobile styles for Visa Process */
@media (max-width: 768px) {
  .visa-process {
    /* Override existing flex-direction: column */
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin: 15px 0 !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    padding: 0 4px !important;
  }

  .process-step {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
    flex: 1 !important;
    min-width: 0 !important; /* Allow shrinking */
    padding: 8px 4px !important;
  }

  .step-number {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important; /* Prevent number from shrinking */
  }

  .step-content {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #333 !important;
    max-width: 80px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .visa-process {
    gap: 4px !important;
    padding: 0 2px !important;
  }

  .process-step {
    padding: 6px 2px !important;
    gap: 4px !important;
  }

  .step-number {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  .step-content {
    font-size: 10px !important;
    max-width: 70px !important;
    line-height: 1.2 !important;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .visa-process {
    gap: 2px !important;
  }

  .process-step {
    padding: 4px 1px !important;
  }

  .step-number {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }

  .step-content {
    font-size: 9px !important;
    max-width: 60px !important;
  }
}
/* Additional Grid */
.additional-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.additional-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15px;
  background: #f8fafc;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.additional-item:hover {
  background: #e6f7ff;
  transform: translateY(-3px);
}

.additional-item i {
  font-size: 24px;
  color: #059d9c;
  margin-bottom: 8px;
}

.additional-item span {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
/* Mobile styles for Additional Features - 2 per row */
@media (max-width: 768px) {
  .additional-grid {
    /* Change to 2 columns grid */
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  .additional-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 8px !important;
    background: #f8fafc !important;
    border-radius: 10px !important;
    height: 100% !important;
    min-height: 80px !important; /* Ensure consistent height */
    justify-content: center !important;
  }

  .additional-item i {
    font-size: 20px !important;
    color: #059d9c !important;
    margin-bottom: 8px !important;
  }

  .additional-item span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    padding: 0 4px !important;
  }

  /* Remove hover effect on mobile */
  .additional-item:hover {
    transform: none !important;
  }

  .additional-item:active {
    background: #e6f7ff !important;
  }
}

/* Extra small devices */
@media (max-width: 480px) {
  .additional-grid {
    gap: 8px !important;
  }

  .additional-item {
    padding: 10px 6px !important;
    min-height: 75px !important;
  }

  .additional-item i {
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }

  .additional-item span {
    font-size: 11px !important;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .additional-grid {
    gap: 6px !important;
  }

  .additional-item {
    padding: 8px 4px !important;
    min-height: 70px !important;
  }

  .additional-item i {
    font-size: 16px !important;
    margin-bottom: 5px !important;
  }

  .additional-item span {
    font-size: 10px !important;
  }
}
/* Feature Tag */
.feature-tag {
  display: inline-block;
background: linear-gradient(135deg, #f0fcfc, #e6f9f9);
  color: var(--primary);
  padding: 6px 15px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 15px;
}

/* ========== RESPONSIVE DESIGN ========== */
@media (max-width: 1200px) {
  .feature-dashboard-grid {
    grid-template-columns: 1fr;
  }
  
  .feature-main-title {
    font-size: 28px;
  }
  
  .detail-value {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .premium-feature-dashboard h2 {
    font-size: 32px;
  }
  
  .feature-details-grid {
    grid-template-columns: 1fr;
  }
  
  .main-feature-header {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .flight-route {
    flex-direction: column;
    gap: 15px;
  }
  
  .visa-process {
    flex-direction: column;
    gap: 20px;
  }
  
  .additional-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .premium-feature-dashboard h2 {
    font-size: 26px;
  }
  
  .feature-main-title {
    font-size: 24px;
  }
  
  .dashboard-feature-card,
  .dashboard-main-feature {
    padding: 20px;
  }
}
/* Thank You Page Specific Styles */
.thank-you-hero {
  text-align: center;
  padding: 80px 0 60px;
}

.thank-you-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.thank-you-icon {
  font-size: 80px;
  color: white;
  margin-bottom: 20px;
  animation: checkmarkPulse 2s infinite;
}

@keyframes checkmarkPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.thank-you-hero .modern-hero-description {
  font-size: 18px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  color: white;
}

/* Thank You Stats */
.thank-you-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.thank-you-stats .stat-item {
  text-align: center;
  min-width: 120px;
}

.thank-you-stats .stat-number {
  font-size: 36px;
  font-weight: 800;
  color: rgba(248, 249, 250, 0.8);
  line-height: 1;
}

.thank-you-stats .stat-number i {
  font-size: 40px;
  color: var(--white);
}

.thank-you-stats .stat-label {
  font-size: 14px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 1px;
}

.thank-you-stats .stat-subtext {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.thank-you-stats .stat-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.3);
}

/* Thank You Actions */
.thank-you-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}

.btn-home,
.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}

.btn-home {
  background: var(--white);
  color: var(--primary);
}

.btn-home:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-2px);
}

.btn-contact {
  background: var(--white);
  color: var(--primary);
}
/* Grid Steps Layout */
.next-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin: 40px 0;
}

.grid-step {
  text-align: center;
  padding: 25px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  border-top: 4px solid var(--primary);
  transition: transform 0.3s ease;
}

.grid-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.grid-step .step-number {
  width: 40px;
  height: 40px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  margin: 0 auto 15px;
}

.grid-step h4 {
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 10px;
  font-weight: 700;
}

.grid-step p {
  color: var(--gray);
  line-height: 1.5;
  font-size: 14px;
  margin: 0;
}

@media (max-width: 992px) {
  .next-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .next-steps-grid {
    grid-template-columns: 1fr;
  }
}

.btn-contact:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-2px);
  color: var(--white);
}

/* Next Steps Timeline */
.next-steps-timeline {
  max-width: 800px;
  margin: 40px auto;
  position: relative;
}

.next-steps-timeline::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary-light), transparent);
}

.timeline-step {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  position: relative;
}

.step-number {
  width: 60px;
  height: 60px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  z-index: 2;
  box-shadow: 0 5px 20px rgba(5, 157, 156, 0.3);
}

.step-content {
  flex: 1;
  padding: 15px 0;
}

.step-content h4 {
  font-size: 20px;
  color: var(--primary);
  margin-bottom: 10px;
  font-weight: 700;
}

.step-content p {
  color: var(--gray);
  line-height: 1.6;
  font-size: 16px;
}

/* Thank You Content */
.thank-you-content-section {
  padding: 60px 0;
  background: var(--light);
}

.thank-you-content-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 5px 30px rgba(0,0,0,0.05);
}

/* Additional Help Button */
.btn-help-contact {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 25px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  font-size: 15px;
  background: var(--primary-light);
  color: var(--white);
}

.btn-help-contact:hover {
  background: var(--primary);
  transform: translateY(-2px);
}

.contact-info {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.contact-info p {
  margin-bottom: 10px;
  opacity: 0.9;
  font-size: 15px;
}

.contact-info i {
  width: 20px;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .thank-you-hero {
    padding: 60px 0 40px;
  }
  
  .thank-you-icon {
    font-size: 60px;
  }
  
  .thank-you-stats {
    gap: 20px;
  }
  
  .thank-you-stats .stat-item {
    min-width: 100px;
  }
  
  .thank-you-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-home,
  .btn-contact {
    width: 100%;
    max-width: 250px;
    justify-content: center;
  }
  
  .next-steps-timeline::before {
    left: 25px;
  }
  
  .timeline-step {
    gap: 20px;
  }
  
  .step-number {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  
  .help-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .btn-help-call,
  .btn-help-whatsapp,
  .btn-help-contact {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .thank-you-stats {
    flex-direction: column;
    gap: 15px;
  }
  
  .thank-you-stats .stat-divider {
    display: none;
  }
  
  .next-steps-timeline::before {
    left: 20px;
  }
  
  .step-number {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .step-content h4 {
    font-size: 18px;
  }
}
/* Package Details Premium Page */
.package-details-premium-page {
  background: #f8fafc;
}

/* Package Hero Section */
.package-details-hero.modern-hero-section {
  background: linear-gradient(135deg, #059D9C 70%, #c59548 100%);
}


/* Package Price Badge */
.package-price-badge {
  display: inline-flex; /* shrink to content */
  gap: 0.5rem;
  margin-top: 3rem;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: auto; /* make sure it's not full width */
  max-width: max-content; /* ensures it wraps only around content */
}


.price-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.price-amount {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.price-per {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Package Details Section - MOBILE ENHANCEMENTS */
.premium-package-details-section {
  padding: 50px 0;
}

.premium-package-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ========== PACKAGE FEATURES GRID - ENHANCED MOBILE STYLES ========== */
.package-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.feature-card {
  background: var(--white); /* Keep original white background */
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,0,0,0.05);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.feature-icon {
  margin-bottom: 15px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--primary), var(--primary));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  box-shadow: 0 4px 15px rgba(5, 157, 156, 0.3);
}

.feature-content h4 {
  font-size: 18px;
  color: var(--black);
  margin-bottom: 8px;
  font-weight: 700;
  line-height: 1.2;
}

.feature-content p {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

/* ========== MOBILE RESPONSIVENESS FOR FEATURES GRID ========== */

/* Tablet (992px and below) */
@media (max-width: 992px) {
  .package-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .feature-card {
    padding: 20px 15px;
    min-height: 140px;
  }
  
  .feature-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-bottom: 12px;
  }
  
  .feature-content h4 {
    font-size: 16px;
    margin-bottom: 6px;
  }
  
  .feature-content p {
    font-size: 13px;
  }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
  .package-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 30px;
  }
  
  .feature-card {
    padding: 18px 12px;
    min-height: 130px;
    border-radius: 10px;
  }
  
  .feature-icon {
    width: 45px;
    height: 45px;
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .feature-content h4 {
    font-size: 15px;
    margin-bottom: 5px;
  }
  
  .feature-content p {
    font-size: 12px;
    line-height: 1.3;
  }
}

/* Small Mobile (576px and below) */
@media (max-width: 576px) {
  .package-features-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 25px;
  }
  
  .feature-card {
    padding: 15px;
    min-height: auto;
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    background: var(--white); /* Keep white background on mobile too */
  }
  
  .feature-icon {
    margin-bottom: 0;
    width: 40px;
    height: 40px;
    font-size: 16px;
    flex-shrink: 0;
  }
  
  .feature-content {
    flex: 1;
  }
  
  .feature-content h4 {
    font-size: 14px;
    margin-bottom: 3px;
  }
  
  .feature-content p {
    font-size: 12px;
  }
}

/* Very Small Mobile (375px and below) */
@media (max-width: 375px) {
  .feature-card {
    padding: 12px;
    gap: 12px;
    background: var(--white); /* Keep white background */
  }
  
  .feature-icon {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .feature-content h4 {
    font-size: 13px;
  }
  
  .feature-content p {
    font-size: 11px;
  }
}

/* Landscape Mode Optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .package-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .feature-card {
    min-height: 120px;
    padding: 15px 10px;
    background: var(--white);
  }
}

/* Touch Device Specific Styles */
@media (hover: none) and (pointer: coarse) {
  .feature-card {
    -webkit-tap-highlight-color: transparent;
  }
  
  .feature-card:active {
    background: rgba(5, 157, 156, 0.05); /* Light touch feedback */
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* REMOVED DARK MODE SECTION to keep original colors */
/* If you want to keep original colors, don't use prefers-color-scheme */

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .feature-card {
    transition: none;
  }
  
  .feature-card:hover {
    transform: none;
  }
}
/* Important Information Section */
.important-info-section {
  background: var(--white);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  border-left: 4px solid var(--primary);
}

.section-title-pack {
  font-size: 24px;
  color: var(--primary);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

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

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(5, 157, 156, 0.05);
  border-radius: 8px;
}

.info-item i {
  color: var(--primary);
  font-size: 18px;
}

.info-item span {
  font-size: 15px;
  color: var(--gray-dark);
  font-weight: 500;
}

/* Hotel Sections */
.hotel-section {
  background: var(--white);
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.section-header {
  margin-bottom: 25px;
}

.section-header h2 {
  font-size: 28px;
  color: var(--primary);
  margin-bottom: 8px;
  font-weight: 800;
}

.section-subtitle {
  color: var(--gray);
  font-size: 16px;
}

.hotel-details {
  margin-top: 25px;
}

.hotel-details h3 {
  font-size: 22px;
  color: var(--black);
  margin-bottom: 15px;
  font-weight: 700;
}

.hotel-description {
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: 20px;
  font-size: 16px;
}

.hotel-stats {
  display: flex;
  gap: 30px;
  padding: 20px;
  background: rgba(5, 157, 156, 0.05);
  border-radius: 8px;
}

.hotel-stat {
  text-align: center;
  flex: 1;
}

/* Slider Container */
.unique-slider-container {
  margin: 25px 0;
  position: relative;
}

.slider-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  border: 1px solid rgba(5, 157, 156, 0.1);
  background: linear-gradient(145deg, #ffffff, #f5f9fa);
  padding: 15px;
}

/* Enhanced Hotel Section Styles */
.hotel-section {
  margin: 50px 0;
  padding: 35px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  position: relative;
  border: 1px solid rgba(5, 157, 156, 0.1);
  overflow: hidden;
}

.hotel-section:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, var(--primary), var(--primary));
  border-radius: 5px 0 0 5px;
}

/* Rating Section */
.rating-section {
  margin-top: 40px;
}

.rating-card {
  background: var(--white);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.rating-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-light);
}

.rating-score h2 {
  font-size: 48px;
  color: var(--primary);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
}

.rating-score h2 span {
  font-size: 24px;
  color: var(--gray);
}

.rating-stars {
  margin-bottom: 8px;
}

.rating-stars .fa-star {
  color: #ffd700;
  font-size: 20px;
  margin-right: 2px;
}

.rating-label {
  font-size: 18px;
  color: var(--gray-dark);
  font-weight: 600;
}

.total-reviews {
  color: var(--gray);
  font-size: 15px;
}

.rating-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

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

.rating-category {
  flex: 0 0 150px;
  font-size: 15px;
  color: var(--gray-dark);
  font-weight: 500;
}

.rating-bar {
  flex: 1;
  height: 8px;
  background: var(--gray-light);
  border-radius: 4px;
  overflow: hidden;
}

.rating-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary));
  border-radius: 4px;
}

.rating-value {
  flex: 0 0 40px;
  text-align: right;
  font-weight: 700;
  color: var(--primary);
  font-size: 16px;
}
/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .rating-section {
    margin-top: 30px;
  }
  
  .rating-card {
    padding: 20px;
    border-radius: 10px;
  }
  
  .rating-header {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
  }
  
  .rating-score h2 {
    font-size: 36px;
  }
  
  .rating-score h2 span {
    font-size: 18px;
  }
  
  .rating-stars .fa-star {
    font-size: 16px;
  }
  
  
  .rating-label {
    font-size: 16px;
  }
  
  .rating-details {
    gap: 12px;
  }
  
  .rating-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }
  
  .rating-item:last-child {
    border-bottom: none;
  }
  
  .rating-category {
    flex: 1;
    width: 100%;
    font-size: 14px;
    margin-bottom: 4px;
  }
  
  .rating-bar {
    width: 100%;
    flex: none;
    height: 6px;
  }
  
  .rating-value {
    flex: none;
    width: 100%;
    text-align: left;
    font-size: 14px;
    margin-top: 4px;
  }
  
  .rating-summary {
    width: 100%;
  }
}

/* For very small screens */
@media (max-width: 480px) {
  .rating-card {
    padding: 15px;
  }
  
  .rating-score h2 {
    font-size: 32px;
  }
  
  .rating-stars .fa-star {
    font-size: 14px;
  }
  
  .rating-category {
    font-size: 13px;
  }
}
/* Benefits List */
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(5, 157, 156, 0.05);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  transition: transform 0.3s ease;
}

.benefit-item:hover {
  transform: translateX(5px);
  background: rgba(5, 157, 156, 0.1);
}

.benefit-item i {
  color: var(--primary);
  font-size: 14px;
}

.benefit-item span {
  font-size: 14px;
  color: var(--gray-dark);
  font-weight: 500;
}

/* Tags Grid */
.tags-grid-premium {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip-premium {
  background: rgba(5, 157, 156, 0.1);
  color: var(--primary);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.tag-chip-premium:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

/* SIDEBAR STYLES - Add these */
.premium-sidebar {
  position: relative;
}

.premium-sidebar-sticky {
  position: sticky;
  top: 20px;
}

.premium-sidebar-widget {
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  margin-bottom: 30px;
  overflow: hidden;
}

.widget-header-premium {
  background: linear-gradient(135deg, var(--primary), var(--primary));
  color: white;
  padding: 20px;
}

.widget-header-premium h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.widget-content-premium {
  padding: 25px;
}

.contact-options-premium {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-option-premium {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(5, 157, 156, 0.05);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(5, 157, 156, 0.1);
}

.contact-option-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  background: rgba(5, 157, 156, 0.1);
}

.option-icon-premium {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.option-icon-premium.whatsapp {
  background: #25D366;
}

.option-content-premium h5 {
  margin: 0 0 5px 0;
  color: var(--black);
  font-size: 16px;
}

.option-content-premium p {
  margin: 0;
  color: var(--gray);
  font-size: 14px;
}

/* ========== COMPREHENSIVE MOBILE RESPONSIVENESS ========== */

/* Tablet (992px and below) */
@media (max-width: 992px) {
  .premium-package-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .package-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .premium-sidebar-sticky {
    position: static;
    margin-top: 10px;
  }
  
  .hotel-section {
    padding: 25px;
    margin: 30px 0;
  }
  
  .section-header h2 {
    font-size: 26px;
  }
  
  .hotel-details h3 {
    font-size: 22px;
  }
}

/* Tablet Landscape (768px and below) */
@media (max-width: 768px) {
  .premium-package-details-section {
    padding: 30px 0;
  }
  
  .premium-package-layout {
    padding: 0 15px;
    gap: 25px;
  }
  
  .package-features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .feature-card {
    padding: 20px 15px;
  }
  
  .feature-content h4 {
    font-size: 16px;
  }
  
  .feature-content p {
    font-size: 13px;
  }
  
  .important-info-section {
    padding: 20px;
  }
  
  .section-title-pack {
    font-size: 20px;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .hotel-section {
    padding: 20px;
    border-radius: 16px;
  }
  
  .section-header h2 {
    font-size: 24px;
    margin-bottom: 5px;
  }
  
  .section-subtitle {
    font-size: 14px;
  }
  
  .hotel-details h3 {
    font-size: 20px;
    margin-bottom: 12px;
  }
  
  .hotel-description {
    font-size: 15px;
    line-height: 1.6;
    padding: 15px;
  }
  
  .rating-card {
    padding: 20px;
  }
  
  .rating-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }
  
  .rating-score h2 {
    font-size: 36px;
  }
  
  .rating-details {
    gap: 12px;
  }
  
  .rating-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .rating-category {
    flex: 0 0 auto;
    font-size: 14px;
  }
  
  .rating-bar {
    width: 100%;
  }
  
  .rating-value {
    text-align: left;
    flex: 0 0 auto;
  }
  
  /* Sidebar mobile adjustments */
  .premium-sidebar-widget {
    margin-bottom: 25px;
  }
  
  .widget-header-premium {
    padding: 15px;
  }
  
  .widget-header-premium h3 {
    font-size: 18px;
  }
  
  .widget-content-premium {
    padding: 20px;
  }
  
  .benefit-item {
    padding: 10px;
  }
  
  .contact-option-premium {
    padding: 12px;
  }
  
  .option-icon-premium {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
}

/* Mobile (576px and below) */
@media (max-width: 576px) {
  .premium-package-details-section {
    padding: 20px 0;
  }
  
  .premium-package-layout {
    padding: 0 10px;
    gap: 20px;
  }
  
  .package-features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .feature-card {
    padding: 18px 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
  }
  
  .feature-icon {
    flex-shrink: 0;
  }
  
  .feature-content h4 {
    font-size: 15px;
    margin-bottom: 3px;
  }
  
  .feature-content p {
    font-size: 12px;
  }
  
  .important-info-section {
    padding: 15px;
    margin-bottom: 25px;
  }
  
  .section-title-pack {
    font-size: 18px;
  }
  
  .info-item {
    padding: 10px;
  }
  
  .info-item i {
    font-size: 16px;
  }
  
  .info-item span {
    font-size: 13px;
  }
  
  .hotel-section {
    padding: 15px;
    margin: 20px 0;
  }
  
  .section-header {
    margin-bottom: 15px;
  }
  
  .section-header h2 {
    font-size: 22px;
  }
  
  .section-subtitle {
    font-size: 13px;
  }
  
  .hotel-details {
    margin-top: 15px;
  }
  
  .hotel-details h3 {
    font-size: 18px;
  }
  
  .hotel-description {
    font-size: 14px;
    padding: 12px;
    line-height: 1.5;
  }
  
  .rating-section {
    margin-top: 30px;
  }
  
  .rating-card {
    padding: 15px;
  }
  
  .rating-score h2 {
    font-size: 32px;
  }
  
  .rating-stars .fa-star {
    font-size: 16px;
  }
  
  .rating-label {
    font-size: 16px;
  }
  
  .total-reviews {
    font-size: 13px;
  }
  
  /* Slider adjustments */
  .slider-wrapper {
    padding: 10px;
  }
  
  .slider-wrapper:before,
  .slider-wrapper:after {
    width: 20px;
    height: 20px;
  }
}

/* Small Mobile (375px and below) */
@media (max-width: 375px) {
  .package-features-grid {
    gap: 10px;
  }
  
  .feature-card {
    padding: 15px 10px;
  }
  
  .important-info-section {
    padding: 12px;
  }
  
  .hotel-section {
    padding: 12px;
  }
  
  .section-header h2 {
    font-size: 20px;
  }
  
  .hotel-details h3 {
    font-size: 17px;
  }
  
  .hotel-description {
    font-size: 13px;
  }
  
  .rating-score h2 {
    font-size: 28px;
  }
  
  .rating-category {
    font-size: 13px;
  }
  
  .benefit-item span {
    font-size: 13px;
  }
  
  .contact-option-premium {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .option-content-premium h5 {
    font-size: 15px;
  }
  
  .option-content-premium p {
    font-size: 13px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .feature-card:hover,
  .benefit-item:hover,
  .tag-chip-premium:hover,
  .contact-option-premium:hover {
    transform: none;
  }
  
  .feature-card:active {
    transform: scale(0.98);
  }
  
  .feature-card {
    -webkit-tap-highlight-color: transparent;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .feature-card,
  .important-info-section,
  .hotel-section,
  .rating-card,
  .premium-sidebar-widget {
    border: 2px solid var(--black);
  }
  
  .info-item,
  .benefit-item {
    border: 1px solid var(--black);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .feature-card,
  .benefit-item,
  .tag-chip-premium,
  .contact-option-premium {
    transition: none;
  }
}
/* Tags Grid */
.tags-grid-premium {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-chip-premium {
  background: rgba(5, 157, 156, 0.1);
  color: var(--primary);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.tag-chip-premium:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1200px) {
  .premium-package-layout {
    gap: 30px;
  }
}

@media (max-width: 992px) {
  .premium-package-layout {
    grid-template-columns: 1fr;
  }
  
  .package-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .hotel-stats {
    flex-direction: column;
    gap: 20px;
  }
  
  .rating-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}

@media (max-width: 768px) {
  .package-features-grid {
    grid-template-columns: 1fr;
  }
  
  .rating-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .rating-category {
    flex: 0 0 auto;
  }
  
  .rating-bar {
    width: 100%;
  }
}


@media (max-width: 576px) {
  .package-price-badge {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
  }
  
  .price-amount {
    font-size: 1.75rem;
  }
  
  .section-header h2 {
    font-size: 24px;
  }
}


/* ========== TRUST BADGES MOBILE OPTIMIZATION ========== */
/* Targets only .package-details-premium-page */

/* Mobile Landscape and below - keeps 2 badges per row */



/* Fix badge text truncation on mobile */
@media (max-width: 767px) {
  .trust-badge {
    white-space: normal !important;   /* allow wrapping */
    overflow: visible !important;     /* prevent clipping */
    text-overflow: unset !important;  /* remove ellipsis */
  }

  .trust-badge span {
    white-space: normal !important;   /* wrap text */
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word;           /* break long words if needed */
    line-height: 1.3;
  }
}

/* ========================================= */
/*     MODERN MOBILE PACKAGE CARDS - COMPACT */
/*     WITH SEPARATE BUTTON ROW              */
/* ========================================= */

.mobile-packages-grid {
  background: white;
  padding: 16px 12px 24px;
  border-radius: 20px 20px 0 0;
  margin-top: -20px;
  position: relative;
  z-index: 3;
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.06);
}

.packages-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.packages-title {
  font-size: 18px;
  font-weight: 800;
  color: #059d9c;
  margin: 0;
}

.packages-counter {
  display: flex;
  align-items: baseline;
  background: rgba(5, 157, 156, 0.1);
  padding: 5px 10px;
  border-radius: 16px;
}

.current-slide {
  font-size: 18px;
  font-weight: 800;
  color: #c59548;
}

.total-slides {
  font-size: 13px;
  color: #666;
  font-weight: 600;
}

.packages-scroll-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0 15px;
  -ms-overflow-style: none;
}

.packages-scroll-container::-webkit-scrollbar {
  display: none;
}

.package-card-mobile {
  min-width: 220px;
  max-width: 220px;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1.5px solid transparent;
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.package-card-mobile.active {
  border-color: #059d9c;
  box-shadow: 0 8px 25px rgba(5, 157, 156, 0.15);
  transform: translateY(-4px);
}

.package-card-mobile:active {
  transform: scale(0.98);
}

.card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: linear-gradient(135deg, #c59548, #c59548);
  color: white;
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 3px 10px rgba(197, 149, 72, 0.25);
}

.card-image-wrapper {
  position: relative;
  height: 110px;
  width: 100%;
  overflow: hidden;
}

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

.package-card-mobile:hover .card-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.25));
}

.quick-view-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059d9c;
  text-decoration: none;
  font-size: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  z-index: 2;
}

.quick-view-btn:hover {
  background: #059d9c;
  color: white;
  transform: scale(1.1);
}

.card-content {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 42px;
}

.card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.card-title a:hover {
  color: #059d9c;
}

.card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.stars {
  display: flex;
  gap: 1px;
  color: #ffc107;
  font-size: 11px;
}

.review-counts {
  font-size: 11px;
  color: #666;
  font-weight: 500;
}

.package-details {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #555;
}

.detail-item i {
  color: #059d9c;
  font-size: 11px;
}

/* Card Footer - Only Price */
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.price-section {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.price-labeled {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1px;
}

.prices {
  display: flex;
  align-items: baseline;
  gap: 1px;
}

.currencys {
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.amounts {
  font-size: 20px;
  font-weight: 800;
  color: #c59548;
  line-height: 1;
}

.per-persons {
  font-size: 11px;
  color: #888;
  margin-left: 2px;
}

/* Separate Action Row */
.card-action-row {
  margin-top: auto;
  padding: 0 12px 12px;
}

.view-details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #059d9c;
  color: white;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(5, 157, 156, 0.2);
  width: 100%;
  border: none;
  cursor: pointer;
}

.view-details-btn.full-width {
  width: 100%;
}

.view-details-btn:hover {
  background: #048786;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(5, 157, 156, 0.25);
  color: white;
}

.view-details-btn i {
  font-size: 11px;
  transition: transform 0.3s ease;
}

.view-details-btn:hover i {
  transform: translateX(3px);
}

/* Animation for active card */
@keyframes cardPulse {
  0%, 100% { box-shadow: 0 8px 25px rgba(5, 157, 156, 0.15); }
  50% { box-shadow: 0 8px 25px rgba(5, 157, 156, 0.25); }
}

.package-card-mobile.active {
  animation: cardPulse 3s infinite;
}

/* Swipe hint for scrolling */
.packages-scroll-hint {
  text-align: center;
  margin-top: 8px;
  font-size: 11px;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0.7;
}

.packages-scroll-hint i {
  font-size: 9px;
  animation: bounceHint 2s infinite;
}

@keyframes bounceHint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* Extra small screens */
@media (max-width: 375px) {
  .package-card-mobile {
    min-width: 200px;
    max-width: 200px;
  }
  
  .packages-title {
    font-size: 17px;
  }
  
  .current-slide {
    font-size: 16px;
  }
  
  .card-image-wrapper {
    height: 100px;
  }
  
  .card-title {
    font-size: 15px;
    min-height: 40px;
  }
  
  .amount {
    font-size: 18px;
  }
  
  .view-details-btn {
    padding: 9px 14px;
    font-size: 12px;
  }
}

@media (max-width: 320px) {
  .package-card-mobile {
    min-width: 180px;
    max-width: 180px;
  }
  
  .card-image-wrapper {
    height: 90px;
  }
  
  .card-content {
    padding: 10px;
  }
  
  .package-details {
    flex-direction: column;
    gap: 6px;
  }
  
  .card-footer {
    margin-bottom: 8px;
  }
  
  .card-action-row {
    padding: 0 10px 10px;
  }
  
  .view-details-btn {
    padding: 8px 12px;
    font-size: 11px;
  }
}

/* For 2-card layout */
@media (min-width: 400px) {
  .package-card-mobile {
    min-width: 200px;
    max-width: 200px;
  }
}

/* Add a subtle gradient border for active card */
.package-card-mobile.active::before {
  content: '';
  position: absolute;
  top: -1.5px;
  left: -1.5px;
  right: -1.5px;
  bottom: -1.5px;
  border-radius: 17px;
  z-index: -1;
  opacity: 0.7;
}



/* Simple right alignment for the form */
.modern-slider-container .hero-form-right {
  margin-left: auto; /* This pushes it to the right */
  width: 380px; /* Adjust form width as needed */
}

/* Optional: Make the form container smaller */
.modern-slider-container .compact-form-container {
  max-width: 100%;
}

/* If you want it to be responsive */
@media (max-width: 1400px) {
  .modern-slider-container .hero-form-right {
    width: 340px;
  }
}

@media (max-width: 1200px) {
  .modern-slider-container .hero-form-right {
    width: 320px;
  }
}


/* HIDE THUMBNAILS ON MOBILE ONLY */
@media (max-width: 768px) {
  .slider-thumbs {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .premium-sidebar-widget-help {
    display: none !important;
  }
}