/*
Theme Name:My flex tour
Theme URI: https://example.com/
Author: Custom Theme
Description: Custom WordPress theme converted from the supplied Quail Hallow HTML design.
Version: 1.0.0
Text Domain: my-flex-tour
*/


body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.slide-fade {
  transition: opacity 0.6s ease-in-out;
}

/* Smooth 3D perspective transitions */
.slide-card {
  width: 220px;
  height: 290px;
  transform-origin: center center;
}

@media (min-width: 640px) {
  .slide-card {
    width: 300px;
    height: 380px;
  }
}

/* See what your listing could become. */

.perspective-stage {
  perspective: 700px;
  perspective-origin: 50% 50%;
}

/* Card shared base transitions */
.tour-card {
  transition:
    transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Top Card Position (Tilted away up) */
.pos-top {
  transform: translateY(-380px) scale(0.92) rotateX(30deg);
  z-index: 10;
  opacity: 0.9;
}

/* Center Active Card Position (Flat & Scaled) */
.pos-center {
  transform: translateY(0px) scale(1) rotateX(10deg);
  z-index: 30;
  opacity: 1;
}

/* Bottom Card Position (Tilted away down) */
.pos-bottom {
  transform: translateY(380px) scale(0.92) rotateX(-30deg);
  z-index: 10;
  opacity: 0.9;
}

@media (max-width: 640px) {
  .pos-top {
    transform: translateY(-130px) scale(0.88) rotateX(45deg);
  }
  .pos-center {
    transform: translateY(0px) rotateX(0deg) scale(1.05);
  }
  .pos-bottom {
    transform: translateY(130px) rotateX(45deg) scale(0.88);
  }
}

/* end */

/* Custom smooth transition for logo pill interactive hover */
.logo-pill {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.logo-pill:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

/* SVG icon alignment helper */
.logo-svg {
  display: inline-block;
  vertical-align: middle;
}

.featured-card-glow {
  box-shadow:
    0 25px 60px -10px rgba(37, 99, 235, 0.45),
    0 10px 25px -5px rgba(37, 99, 235, 0.3);
}

/* Smooth Hover Lift Animation */
.pricing-card {
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pricing-card:hover {
  transform: translateY(-4px);
}

/* Custom bullet list styling */
.feature-list-item::before {
  content: "•";
  display: inline-block;
  margin-right: 8px;
  font-size: 1.1em;
  line-height: 1;
}

/* Smooth accordion height transition */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
  opacity: 0;
}

.accordion-item.active .accordion-content {
  max-height: 200px;
  opacity: 1;
}

/* Custom styling for inputs to feel modern and frameless */
.form-input {
  background-color: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.2s ease-in-out;
}
.form-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

/* how it work banner section */
.bg-grid-pattern {
  background-image:
    linear-gradient(to right, rgba(37, 99, 235, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Custom text stroke for giant '02' number outline */
.text-outline-blue {
  -webkit-text-stroke: 1.5px rgba(59, 130, 246, 0.6);
  color: transparent;
}

/* Smooth thumb/card hover effects */
.thumb-shadow-glow {
  box-shadow: 0 0 25px -5px rgba(59, 130, 246, 0.4);
}

/* Hide scrollbars for slick thumbnail overflow on small screens */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.vertical{
position: relative;
display: inline-block;

}
.vertical::after {
   content: "";
    position: absolute;
    width: 113%;
    height: 50%;
    border-radius: 10px;
    transform: rotate(319deg);
    top: 100px;
    right: 5px;
    background-color: #DBEAFC;
    z-index: -1;
    pointer-events: none;
}

.landscape{
  position: relative;
  display: inline-block;
}
.landscape::after {
   content: "";
    position: absolute;
    width: 108%;
    height: 68%;
    border-radius: 10px;
    transform: rotate(336deg);
    top: 10px;
    right: -5px;
    background-color: #9FC7FE;
    z-index: -1;
    pointer-events: none;
}

/* flexttour-standred */

.accordion-content {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.35s ease;
    }

    .accordion-content > div {
      overflow: hidden;
    }

    .accordion-item.active .accordion-content {
      grid-template-rows: 1fr;
    }

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

    .accordion-item.active .accordion-icon {
      transform: rotate(2deg);
    }
    .landver{
      position: relative;
    }
.landver::after {
    content: "";
    position: absolute;
    width: 80%;
    height: 50px;
    bottom: 40px;
    right: 0;
    left: 10px;
    background-image: url(./images/tira.png);
    background-repeat: no-repeat;
    background-size: 57% auto;
    background-position: center bottom;
}

/* our-work */
.slide {
      opacity: 0;
      visibility: hidden;
      transform: scale(1.02);
      transition:
        opacity 0.8s ease,
        transform 1s ease,
        visibility 0.8s ease;
    }

    .slide.active {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
      z-index: 10;
    }

    .slide-image {
      transform: scale(1.05);
      transition: transform 6s ease;
    }

    .slide.active .slide-image {
      transform: scale(1);
    }

    .slide-content {
      opacity: 0;
      transform: translateY(25px);
      transition:
        opacity 0.7s ease 0.2s,
        transform 0.7s ease 0.2s;
    }

    .slide.active .slide-content {
      opacity: 1;
      transform: translateY(0);
    }

    .progress-line {
      transform-origin: left;
      transform: scaleX(0);
    }

    .slide.active .progress-line {
      animation: progress 5s linear forwards;
    }

    @keyframes progress {
      from {
        transform: scaleX(0);
      }

      to {
        transform: scaleX(1);
      }
    }

    .arrow-btn {
      transition:
        background-color 0.3s ease,
        transform 0.3s ease;
    }

    .arrow-btn:hover {
      background-color: rgba(255, 255, 255, 0.18);
      transform: scale(1.05);
    }
     .tab-button {
      position: relative;
      transition: color 0.25s ease;
    }

    .tab-button::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -8px;
      height: 1px;
      background: #2563eb;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .tab-button.active {
      color: #2563eb;
    }

    .tab-button.active::after {
      transform: scaleX(1);
    }

    /* Card image */
    .video-card-image {
      transition: transform 0.5s ease;
    }

    .video-card:hover .video-card-image {
      transform: scale(1.025);
    }

    /* Play button */
    .play-button {
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    }

    .video-card:hover .play-button {
      transform: translate(-50%, -50%) scale(1.08);
    }

    /* Content fade */
    .tab-content {
      animation: fadeIn 0.35s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(5px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Custom play button hover effect & smooth play state transitions */
    .play-button {
      transition: opacity 0.25s ease, transform 0.2s ease, background-color 0.2s ease;
    }

    /* Auto hide button when video plays, show on hover */
    .video-card.is-playing .play-button {
      opacity: 0;
      pointer-events: none;
    }

    .video-card.is-playing:hover .play-button {
      opacity: 0.95;
      pointer-events: auto;
    }

    /* Smooth video hover scale effect */
    .video-card:hover .video-media {
      transform: scale(1.02);
    }

   /*/////////////////*/
   /* Container perspective for 3D depth */
  .orbit-container {
    perspective: 1000px;
  }

  /* 360 Degree Orbit Animation */
  @keyframes orbit360 {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(-360deg);
    }
  }

  .orbit-ring {
    transform-style: preserve-3d;
    animation: orbit360 50s linear infinite;
  }

  .orbit-ring:hover {
    animation-play-state: paused;
  }

  /* Calculate exact 3D positioning for each logo in a circle */
  /* Radius = ~260px for 6 items */
  .item-1 { transform: rotateY(0deg) translateZ(500px); }
  .item-2 { transform: rotateY(20deg) translateZ(500px); }
  .item-3 { transform: rotateY(40deg) translateZ(500px); }
  .item-4 { transform: rotateY(60deg) translateZ(500px); }
  .item-5 { transform: rotateY(80deg) translateZ(500px); }
  .item-6 { transform: rotateY(100deg) translateZ(500px); }
.item-7 { transform: rotateY(120deg) translateZ(500px); }
  .item-8 { transform: rotateY(140deg) translateZ(500px); }
  .item-9 { transform: rotateY(160deg) translateZ(500px); }
  .item-10 { transform: rotateY(180deg) translateZ(500px); }
  .item-11 { transform: rotateY(200deg) translateZ(500px); }
  .item-12 { transform: rotateY(220deg) translateZ(500px); }
  .item-13 { transform: rotateY(240deg) translateZ(500px); }
  .item-14 { transform: rotateY(260deg) translateZ(500px); }
  .item-15 { transform: rotateY(280deg) translateZ(500px); }
  .item-16 { transform: rotateY(300deg) translateZ(500px); }
  .item-17 { transform: rotateY(320deg) translateZ(500px); }
  .item-18 { transform: rotateY(340deg) translateZ(500px); }