/* static/css/components.css */

/* active bullet in Glide carousels */
.glide__bullet--active {
    background-color: #B76E79 !important;
    transform: scale(1.5);
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  @keyframes spin-slow {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .animate-spin-slow {
    animation: spin-slow 20s linear infinite;
   
  }
  
  @keyframes spin-slower {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(720deg); }
  }
  
  .animate-spin-slower {
    animation: spin-slower 60s linear infinite;
   
  }
  
  /* Scrollbar utilities */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  scrollbar-width: none;
}
.scrollbar-default::-webkit-scrollbar {
  display: initial;
}
.scrollbar-default {
  scrollbar-width: auto;
}

input[type="radio"]:checked + div h4,
input[type="radio"]:checked + div p {
  color: #B76E79;
}

/* Step Timeline Styles */
#step-timeline {
  position: sticky;
  top: 20px;
  z-index: 40;
  background: white;
  padding: 1rem;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}



.step-label {
  font-weight: 500;
}

#basicTooltip,
  #extraTooltip {
    z-index: 9999;
  }

  .glide{position:relative;width:100%;box-sizing:border-box}.glide *{box-sizing:inherit}.glide__track{overflow:hidden}.glide__slides{position:relative;width:100%;list-style:none;backface-visibility:hidden;transform-style:preserve-3d;touch-action:pan-Y;overflow:hidden;margin:0;padding:0;white-space:nowrap;display:flex;flex-wrap:nowrap;will-change:transform}.glide__slides--dragging{user-select:none}.glide__slide{width:100%;height:100%;flex-shrink:0;white-space:normal;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.glide__slide a{user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.glide__arrows{-webkit-touch-callout:none;user-select:none}.glide__bullets{-webkit-touch-callout:none;user-select:none}.glide--rtl{direction:rtl}/*# sourceMappingURL=glide.core.min.css.map */
  .glide__arrow{position:absolute;display:block;top:50%;z-index:2;color:#fff;text-transform:uppercase;padding:9px 12px;background-color:transparent;border:2px solid rgba(255,255,255,.5);border-radius:4px;box-shadow:0 .25em .5em 0 rgba(0,0,0,.1);text-shadow:0 .25em .5em rgba(0,0,0,.1);opacity:1;cursor:pointer;transition:opacity 150ms ease,border 300ms ease-in-out;transform:translateY(-50%);line-height:1}.glide__arrow:focus{outline:none}.glide__arrow:hover{border-color:#fff}.glide__arrow--left{left:2em}.glide__arrow--right{right:2em}.glide__arrow--disabled{opacity:.33}.glide__bullets{position:absolute;z-index:2;bottom:2em;left:50%;display:inline-flex;list-style:none;transform:translateX(-50%)}.glide__bullet{background-color:rgba(255,255,255,.5);width:9px;height:9px;padding:0;border-radius:50%;border:2px solid transparent;transition:all 300ms ease-in-out;cursor:pointer;line-height:0;box-shadow:0 .25em .5em 0 rgba(0,0,0,.1);margin:0 .25em}.glide__bullet:focus{outline:none}.glide__bullet:hover,.glide__bullet:focus{border:2px solid #fff;background-color:rgba(255,255,255,.5)}.glide__bullet--active{background-color:#fff}.glide--swipeable{cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.glide--dragging{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}/*# sourceMappingURL=glide.theme.min.css.map */

  .img-clamp-width {
    width: clamp(200px, 40vw, 600px);
}

[x-cloak] { display: none !important; }
.faq-item {
  transition: all 0.3s ease;
}

/* Hide the default summary marker everywhere */
details summary {
  list-style: none;          /* remove any list‐style marker */
  -webkit-appearance: none;  /* Safari/iOS */
  appearance: none;          /* modern browsers */
}

/* WebKit‐based browsers (Chrome, Safari, iOS) */
details summary::-webkit-details-marker {
  display: none;
}

/* Firefox */
details summary::marker {
  content: none;
  display: none;
}
/*ready*/
:where([class^="ri-"])::before { content: "\f3c2"; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
from { transform: translateX(-20px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.animate-fadeIn {
animation: fadeIn 0.5s ease-out forwards;
}
.animate-slideIn {
animation: slideIn 0.5s ease-out forwards;
}
.animate-pulse-custom {
animation: pulse 2s infinite;
}
.feature-card {
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: #4f46e5;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.package-card {
transition: all 0.3s ease;
}
.package-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}
.dropdown-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
.dropdown.open .dropdown-content {
max-height: 1000px;
}
.checkbox-custom {
position: relative;
width: 20px;
height: 20px;
border: 2px solid #4f46e5;
border-radius: 4px;
transition: all 0.2s ease;
}
.checkbox-custom.checked::after {
content: '';
position: absolute;
top: 2px;
left: 6px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox-custom.checked {
background-color: #4f46e5;
}
.progress-step {
transition: all 0.3s ease;
}
.progress-step.active {
background-color: #4f46e5;
color: white;
}
.sticky-header {
transition: all 0.3s ease;
}
.sticky-header.visible {
transform: translateY(0);
}
.sticky-header.hidden {
transform: translateY(-100%);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: #4f46e5;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}
/* Hide number input arrows */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

:where([class^="ri-"])::before { content: "\f3c2"; }
          body {
          font-family: 'Poppins', sans-serif;
          background-color: #ffffff;
          }
          .particle {
          position: absolute;
          border-radius: 50%;
          background: linear-gradient(135deg, #A9C191 0%, #d4f3b7 100%);
          opacity: 0.3;
          animation: float 8s infinite ease-in-out;
          }
          @keyframes float {
          0%, 100% { transform: translateY(0) translateX(0); }
          25% { transform: translateY(-10px) translateX(10px); }
          50% { transform: translateY(0) translateX(15px); }
          75% { transform: translateY(10px) translateX(5px); }
          }
          .language-btn {
          transition: all 0.3s ease;
          }
          .language-btn:hover {
          background-color: rgba(224, 180, 163, 0.1);
          }
          .content-ar {
          display: none;
          }
          .content-en {
          display: block;
          }
          .service-icon {
          transition: all 0.3s ease;
          }
          .c-splash {
            pointer-events: none;
            transition: opacity 0.8s ease;
          }
          .c-splash.hide {
            opacity: 0;
            visibility: hidden;
          }
          #pulse-circle {
            width: 30px;
            height: 30px;
            transition: transform 2.5s ease-in-out;
          }
          .pulse-out {
            transform: scale(40);
            transition: transform 1.5s ease-in-out;
          }
          .pulse-in {
            transform: scale(0);
            transition: transform 1.5s ease-in-out;
          }
          /* 1) Base: no visible circle (radius = 0) */
            #mobile-splash {
              clip-path: circle(100% at 50% 50%);
              transition: clip-path 1.2s ease-in-out;
            }
    
            /* 2) Expand: fill screen (radius > viewport diagonal) */
            #mobile-splash.expand {
              clip-path: circle(150% at 50% 50%);
            }
    
            /* 3) Reveal: shrink mask back to center */
            #mobile-splash.reveal {
              clip-path: circle(0% at 50% 50%);
            }
    
            /* 4) Logo shrink + fade, timed to start slightly into the reveal */
            #splash-logo {
              transition: transform 1s ease-in-out, opacity 0.6s ease-in;
              transform-origin: center center;
            }
            #splash-logo.shrink-logo {
              transform: scale(0);
              opacity: 0;
            }
    
            /* 5) Hide: once both animations are done, fade out completely */
            .c-splash.hide {
              opacity: 0;
              visibility: hidden;
              transition: opacity 0.5s ease;
            }
            .cursor-logo {
              animation: float 3s ease-in-out infinite, point 2s ease-in-out infinite;
          }

          .kufi-heading {
            font-family: "Noto Kufi Arabic", sans-serif;
          }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}