/* Real Designs 2026 */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #111111; /* Background color of the loader screen */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensures it sits on top of all other elements */
  transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth fade-out */
}

/* CSS Animated Spinner */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #333333; /* Light grey track */
  border-top: 5px solid #999999; /* Accent color for the spinning arc */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Rotation Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Class to handle hiding smoothly via JS */
.preloader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/** Variables **/

:root {
  --color-background: #cbd5e1;
  --color-background-alt: #8ec6ff;
  --color-border-active: #173db6;
  --color-border-default: #94a3b8;
  --color-highlight: #8ec6ff;
  --color-primary: #333333;
  --color-primary-active: #000000;
  --color-text-default: #0f172a;
  --color-text-muted: #475569;

  --font-family-body: "Open Sans", sans-serif;
  --font-family-display: "Nunito Sans", sans-serif;
}

/** Base **/

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family-body);
  font-optical-sizing: auto;
  font-style: normal;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  color: #ffffff;  
}

[type="checkbox"],
[type="radio"],
[type="range"] {
  appearance: none;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
}

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
  outline: none;
}

/** Components **/

.fs-form {
  display: grid;
  row-gap: 1.5rem;
}

.fs-form:where(.fs-layout__2-column) {
  column-gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

fieldset {
  display: grid;
  margin: 1.5rem 0;
  row-gap: 1.5rem;
}

.fs-form:where(.fs-layout__2-column) fieldset {
  column-gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / -1;
}

.fs-fieldset-title {
  color: var(--color-text-default);
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.75rem;
  margin-bottom: 1.5rem;
  grid-column: 1 / -1; 
}

.fs-field {
  display: flex;
  flex-direction: column;
  row-gap: 0.375rem;
}

.fs-label {
  color: var(--color-text-default);
  display: block;
  font-family: var(--font-family-display);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.fs-button-group {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 1.5rem;
}

.fs-form:where(.fs-layout__2-column) .fs-button-group {
  grid-column: 1 / -1;
}

.fs-button {
  background-color: var(--color-primary);
  border-radius: 0.375rem;
  color: white;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  padding: 1rem 2rem;
  transition-duration: 200ms;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-button:hover {
  background-color: var(--color-primary-active);
}

.fs-button:focus-visible {
  background-color: var(--color-primary-active);
  outline: 3px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  background-color: #000000;
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: #ffffff;
  font-size: 1rem;
  height: 2.5rem;
  line-height: 1.5rem;
  outline: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-input::placeholder {
  color: var(--color-text-muted);
}

.fs-checkbox-group,
.fs-radio-group {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.fs-checkbox-field,
.fs-radio-field {
  column-gap: 0.5rem;
  display: flex;
}

:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
  margin-top: 0.125rem;
}

.fs-checkbox-wrapper,
.fs-radio-wrapper {
  align-items: center;
  display: flex;
  height: 1.25rem;
}

.fs-checkbox,
.fs-radio {
  background-color: #fff;
  border: 1px solid var(--color-text-default);
  height: 1rem;
  width: 1rem;
}

.fs-checkbox {
  border-radius: 0.25rem;
}

.fs-radio {
  border-radius: 100%;
}

.fs-checkbox:checked,
.fs-radio:checked {
  background-color: var(--color-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: transparent;
}

.fs-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.fs-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.fs-slider {
  background: transparent;
  cursor: pointer;
  height: 1.25rem;
  width: 100%;
}

.fs-slider::-moz-range-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-webkit-slider-runnable-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-moz-range-thumb {
  background-color: var(--color-primary);
  border: none; /* Removes extra border that FF applies */
  border-radius: 50%;
  height: 1.25rem;
  width: 1.25rem;
}

.fs-slider::-webkit-slider-thumb {
  appearance: none;
  background-color: var(--color-primary);
  border-radius: 50%;
  height: 1.25rem;
  margin-top: -0.375rem; /* Centers thumb on the track */
  width: 1.25rem;
}

.fs-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.5rem;
  cursor: pointer;
  height: 1.5rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.75rem;
}

.fs-switch:checked {
  background-color: var(--color-primary);
  background-position: right center;
}

.fs-switch:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea {
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5rem;
  outline: none;
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

.fs-textarea:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

/** Utilities **/

.col-span-full {
  grid-column: 1 / -1;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

.slider-label-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.25rem;
}

.slider-label-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
}


/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: hsl(14, 98%, 50%);
  --black-color: hsl(0, 0%, 0%);
  --black-color-light: hsl(0, 0%, 40%);
  --white-color: hsl(0, 0%, 95%);
  --title-color: hsl(0, 0%, 0%);
  --text-color: hsl(0, 0%, 35%);
  --text-color-light: hsl(0, 0%, 64%);
  --body-color: hsl(0, 0%, 87%);
  --container-color: hsl(0, 0%, 83%);

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: "Bai Jamjuree", sans-serif;
  --biggest-font-size: 2.5rem;
  --h1-font-size: 1.75rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1.125rem;
  --normal-font-size: 0.938rem;
  --small-font-size: 0.813rem;
  --smaller-font-size: 0.75rem;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*========== Responsive typography ==========*/
@media screen and (min-width: 1150px) {
  :root {
    --biggest-font-size: 4.5rem;
    --h1-font-size: 3rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background-color: var(--body-color);
  color: var(--text-color);
  transition: background-color .4s; /* Pour le Dark theme */
}

h1,
h2,
h3,
h4 {
  color: var(--title-color);
  font-weight: var(--font-bold);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}


/*=============== FOOTER ===============*/
.footer {
  background-color: var(--black-color);
}

.footer__container {
  padding-block: 3rem 2rem;
  row-gap: 2.5rem;
}

.footer__links {
  display: flex;
  justify-content: center;
  column-gap: 2rem;
}

.footer__link {
  color: var(--white-color);
  transition: color 0.4s;
}

.footer__link:hover {
  color: var(--text-color-light);
}

.footer__copy {
  color: var(--text-color-light);
  font-size: var(--small-font-size);
  text-align: center;
}

.footer__copy a {
  color: var(--first-color);
  font-weight: var(--font-medium);
}

/*=============== MEDIA QUERIES ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
  .container {
    margin-inline: 1rem;
  }
}

/* For large devices */
@media screen and (min-width: 1150px) {
  .container {
    margin-inline: auto;
  }
  .section {
    padding-block: 7rem 2rem;
  }
  .footer__container {
    padding-block: 4rem;
    grid-template-columns: repeat(2, max-content);
    justify-content: space-between;
  }
  .footer__links {
    column-gap: 3rem;
    order: 1;
  }
}    
    


.about-wrap {
  background-color: #000000;
}



        :root {
            --primary-gold: #cccccc;
            --bg-dark: #0a0a0a;
            --card-bg: #1a1a1a;
            --text-main: #e0e0e0;
            --text-dim: #a0a0a0;
            --accent-red: #ff3e3e;
        }

        body {
            margin: 0;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-main);
            line-height: 1.6;
        }



    

        header {
            height: 60vh;
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
                        url('https://images.unsplash.com/photo-1501388133531-133686079472?auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 20px;
        }

        .hero-title {
            font-size: 3.5rem;
            color: var(--primary-gold);
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 3px;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            color: var(--text-main);
            max-width: 600px;
        }

        .pricing-section {
            padding: 80px 20px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
        }

        .price-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            justify-content: center;
        }

        .price-card {
            background: var(--card-bg);
            border: 2px solid #333;
            border-radius: 15px;
            padding: 40px;
            text-align: center;
            transition: transform 0.3s ease, border-color 0.3s ease;
            position: relative;
        }

        .price-card:hover {
            transform: translateY(-10px);
            border-color: var(--primary-gold);
        }

        .price-card.featured {
            border-color: var(--primary-gold);
            background: #222;
        }

        .badge {
            background: var(--primary-gold);
            color: black;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
        }

        .price-amount {
            font-size: 3rem;
            font-weight: bold;
            margin: 20px 0;
        }

        .price-amount span {
            font-size: 1rem;
            color: var(--text-dim);
        }

        .features-list {
            list-style: none;
            padding: 0;
            margin: 30px 0;
            text-align: left;
        }

        .features-list li {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            color: var(--text-main);
        }

        .features-list li::before {
            content: '✓';
            color: var(--primary-gold);
            font-weight: bold;
            margin-right: 10px;
        }

        .features-list li.disabled {
            color: #666;
            text-decoration: line-through;
        }

        .features-list li.disabled::before {
            content: '✕';
            color: #666;
        }

        .cta-button {
            background: var(--primary-gold);
            color: black;
            border: none;
            padding: 12px 30px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            border-radius: 5px;
            transition: background 0.3s ease;
            width: 100%;
        }

        .cta-button:hover {
            background: #ffffff;
        }

        .disclaimer {
            text-align: center;
            margin-top: 40px;
            font-size: 0.85rem;
            color: var(--text-dim);
        }

        @media (max-width: 600px) {
            .hero-title { font-size: 2.2rem; }
        }



        .main-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            padding: 2rem;
        }

        /* FOOTER STYLES */
        .footer-wrap {
            background-color: var(--bg-dark);
            color: var(--text-white);
            padding: 60px 0 30px 0;
            border-top: 1px solid #222;
            position: relative;
            overflow: hidden;
        }

        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 40px;
        }

        .footer-brand .logo {
            font-family: 'Syne', sans-serif;
            font-size: 1.8rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: -1px;
            margin-bottom: 20px;
            display: block;
        }

        .footer-brand .tagline {
            color: var(--text-gray);
            line-height: 1.6;
            margin-bottom: 30px;
            max-width: 300px;
        }

        .footer-section h4 {
            font-family: 'Syne', sans-serif;
            font-size: 1.1rem;
            margin-bottom: 20px;
            text-transform: uppercase;
            color: var(--text-white);
        }

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

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

        .footer-links a {
            color: var(--text-gray);
            text-decoration: none;
            font-size: 0.9rem;
            transition: var(--transition);
            display: inline-block;
        }

        .footer-links a:hover {
            color: var(--accent-neon);
            transform: translateX(5px);
        }

        .social-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            background: #222;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            color: var(--text-white);
            text-decoration: none;
            font-size: 0.8rem;
        }

        .social-icon:hover {
            background: var(--accent-neon);
            color: var(--bg-dark);
        }

        .footer-bottom {
            margin-top: 60px;
            padding-top: 20px;
            border-top: 1px solid #222;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8rem;
            color: #666;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .footer-container {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 600px) {
            .footer-container {
                grid-template-columns: 1fr;
            }
            .footer-bottom {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }
        }




        h1 {
            font-size: 3rem;
            text-transform: uppercase;
            letter-spacing: 4px;
            margin-bottom: 10px;
            color: var(--primary-gold);
        }

        .subtitle {
            font-style: italic;
            opacity: 0.8;
        }

        .faq-container {
            width: 90%;
            max-width: 800px;
            margin: 40px 0;
        }

        .faq-item {
            background-color: var(--dark-grey);
            margin-bottom: 15px;
            border-radius: 8px;
            overflow: hidden;
            border-left: 5px solid transparent;
            transition: border-color 0.3s ease;
            cursor: pointer;
        }

        .faq-item:hover {
            border-left-color: var(--primary-gold);
        }

        .faq-question {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: 1.1rem;
            user-select: none;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease;
            background-color: rgba(0,0,0,0.2);
        }

        .faq-answer p {
            padding: 20px;
            margin: 0;
            color: #ccc;
            border-top: 1px solid rgba(255,255,255,0.05);
        }

        .faq-item.active .faq-answer {
            max-height: 500px; /* Large enough to hold content */
        }

        .faq-item.active .toggle-icon {
            transform: rotate(180deg);
        }

        .toggle-icon {
            width: 20px;
            height: 20px;
            transition: transform 0.3s ease;
        }