/* Global Variables - ?????? ??????? */
:root {
    --primary-color: #2D2D2D;      /* ????? ???? ?????? */
    --accent-color: #4F6F52;       /* ???? ?????? - ????? ??????? */
    --accent-dark: #3A523E;        /* ???? ???? - ??? ??????? */
    --gold-accent: #C0A062;        /* ????/?????? - ???????? */
    --bg-color: #F2F4F1;           /* ??? ???? ???? - ??????? */
    --white: #FFFFFF;
}

/* Reset & Basics */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}
body {
    font-family: 'Cairo', sans-serif;
    background-color: var(--bg-color);
    color: var(--primary-color);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Utilities (?????? ??????) */
.scroll-fade { 
    opacity: 0; 
    transform: translateY(30px); 
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}
.scroll-fade.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Buttons Styling */
.cta-button { 
    background-color: var(--accent-color);
    color: var(--white);
    transition: all 0.3s ease; 
    box-shadow: 0 4px 6px -1px rgba(79, 111, 82, 0.2); 
}
.cta-button:hover { 
    background-color: var(--accent-dark);
    transform: translateY(-2px); 
    box-shadow: 0 10px 15px -3px rgba(79, 111, 82, 0.3); 
}
.cta-button:active { transform: scale(0.98); }

/* Preloader Styles */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-color); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease; }
.spinner { border: 4px solid rgba(255, 255, 255, 0.1); border-top: 4px solid var(--accent-color); border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Modals Base */
.modal { transition: opacity 0.3s ease; }

/* ===========================================================
   Extra-Small Devices (<420px) - comprehensive mobile fixes
   =========================================================== */
@media (max-width: 420px) {
    /* Reduce container padding */
    section > .max-w-7xl,
    section > .max-w-3xl,
    section > .max-w-6xl,
    section > .max-w-5xl,
    section > .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Reduce heading sizes */
    h1, .text-5xl, .text-6xl, .text-7xl, .text-8xl {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    h2, .text-3xl, .text-4xl {
        font-size: 1.35rem !important;
    }
    h3, .text-2xl {
        font-size: 1.15rem !important;
    }
    h4, .text-xl {
        font-size: 1rem !important;
    }
    p, .text-lg, .text-base {
        font-size: 0.9rem !important;
    }

    /* Reduce card padding */
    .p-8 { padding: 1.25rem !important; }
    .p-6 { padding: 1rem !important; }
    .p-4 { padding: 0.75rem !important; }
    .gap-6 { gap: 1rem !important; }
    .gap-4 { gap: 0.75rem !important; }
}

/* ===========================================================
   Mobile overlapping prevention — global safe guards
   =========================================================== */
@media (max-width: 768px) {
  img, video, iframe { max-width: 100%; height: auto; }
  section { overflow: hidden; }
  [class*="grid"] { width: 100%; }
}

@media (max-width: 480px) {
  [style*="position: absolute"] {
    max-width: 100%;
  }
  .scroll-fade {
    opacity: 1 !important;
    transform: none !important;
  }
}