/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {
    /**
     * Colors
     */
    
    /* Default Theme Colors - Fallback when no theme is selected */
    --primary-gradient: linear-gradient(135deg, #0066cc 0%, #004499 100%);
    --secondary-gradient: linear-gradient(135deg, #3399ff 0%, #0066cc 100%);
    --accent-gradient: linear-gradient(135deg, #00aaff 0%, #0088cc 100%);
    --accent-blue: #0066cc;
    --accent-light: #e6f3ff;
    --dark-bg: #f8fafc;
    --dark-surface: #ffffff;
    --dark-border: rgba(0, 102, 204, 0.1);
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 102, 204, 0.2);
    
    /* DARK */
    --dark-blue-color: #0ea5e9;
    --dark-blue-dark-color: #2563eb;
    --dark-second-blue-color: rgba(30, 90, 130, 0.45);
    --dark-third-blue-color: #0c94c0;
    --dark-four-blue-color: #064a60;
    --dark-five-blue-color: #096f90;
    --dark-yellow-color: #facc15;
    --dark-second-yellow-color: #064a60;
    --dark-third-yellow-color: #ccad00;
    --dark-red-color: #f43f5e;
    --dark-green-color: #14b8a6;
    --dark-second-green-color: rgba(30, 150, 130, 0.45);
    --dark-purple-color: #0ea5e9;
    --dark-bg-color: #080c14;
    --dark-second-bg-color: #111827;
    --dark-third-bg-color: #1f2937;
    --dark-four-bg-color: #334155;
    --dark-five-bg-color: #e7f8fd;
    --dark-text-color: #ffffff;
    --dark-second-color: #9ca3af;
    --dark-border-color: #1e293b;

    /* LIGHT */
    --light-blue-color: #0ea5e9;
    --light-blue-dark-color: #2563eb;
    --light-second-blue-color: #e7f8fd;
    --light-third-blue-color: #3fc7f3;
    --light-four-blue-color: #064a60;
    --light-five-blue-color: #9fe3f9;
    --light-yellow-color: #facc15;
    --light-second-yellow-color: #fff7cc;
    --light-third-yellow-color: #ffe033;
    --light-red-color: #f43f5e;
    --light-green-color: #14b8a6;
    --light-second-green-color: rgba(30, 150, 130, 0.45);
    --light-purple-color: #0ea5e9;
    --light-bg-color: #ffffff;
    --light-text-color: #111827;
    --light-second-bg-color: #f3f4f6;
    --light-border-color: #cbd5e1;
    --light-second-color: #6b7280;
    --light-four-bg-color: #2563eb;
    --light-five-bg-color: #e7f8fd;
    --light-third-bg-color: #d1d5db;

    /**
     * TYPOGRAPHY
     */

    /* Font size */
    --fs-base: 14px;
    --fs-display-large: 3rem;
    --fs-display-medium: 2.8rem;
    --fs-display-small: 2.5rem;
    --fs-headline-small: 2rem;
    --fs-title-large: 2.2rem;
    --fs-title-medium: 1.6rem;
    --fs-title-small: 1.4rem;
    --fs-body-large: 1.6rem;
    --fs-body-medium: 1.4rem;
    --fs-body-small: 1.2rem;
    --fs-label-large: 1.3rem;
    --fs-label-medium: 1.2rem;
    --fs-label-small: 1.1rem;

    /* Line height */
    --lh-display-large: 3.6rem;
    --lh-display-medium: 3.4rem;
    --lh-display-small: 3rem;
    --lh-headline-small: 2.8rem;
    --lh-title-large: 2.6rem;
    --lh-title-medium: 2rem;
    --lh-title-small: 1.8rem;
    --lh-body-large: 2.2rem;
    --lh-body-medium: 2rem;
    --lh-body-small: 1.6rem;
    --lh-label-large: 2rem;
    --lh-label-medium: 2rem;
    --lh-label-small: 2rem;

    /* Font weight */
    --fw-regular: 400;
    --fw-medium: 600;
    --fw-bold: 800;

    /**
     * FONT FAMILY
     */
    --font-family: "Cairo", sans-serif;
}

[data-theme="dark"] {
    color-scheme: dark;

    --blue-color: var(--dark-blue-color);
    --blue-dark-color: var(--dark-blue-dark-color);
    --second-blue-color: var(--dark-second-blue-color);
    --third-blue-color: var(--dark-third-blue-color);
    --four-blue-color: var(--dark-four-blue-color);
    --five-blue-color: var(--dark-five-blue-color);
    --yellow-color: var(--dark-yellow-color);
    --second-yellow-color: var(--dark-second-yellow-color);
    --third-yellow-color: var(--dark-third-yellow-color);
    --red-color: var(--dark-red-color);
    --green-color: var(--dark-green-color);
    --second-green-color: var(--dark-second-green-color);
    --purple-color: var(--dark-purple-color);
    --bg-color: var(--dark-bg-color);
    --second-bg-color: var(--dark-second-bg-color);
    --third-bg-color: var(--dark-third-bg-color);
    --four-bg-color: var(--dark-four-bg-color);
    --five-bg-color: var(--dark-five-bg-color);
    --text-color: var(--dark-text-color);
    --second-color: var(--dark-second-color);
    --border-color: var(--dark-border-color);
}

[data-theme="light"] {
    color-scheme: light;

    --blue-color: var(--light-blue-color);
    --blue-dark-color: var(--light-blue-dark-color);
    --second-blue-color: var(--light-second-blue-color);
    --third-blue-color: var(--light-third-blue-color);
    --four-blue-color: var(--light-four-blue-color);
    --five-blue-color: var(--light-five-blue-color);
    --yellow-color: var(--light-yellow-color);
    --second-yellow-color: var(--light-second-yellow-color);
    --third-yellow-color: var(--light-third-yellow-color);
    --red-color: var(--light-red-color);
    --green-color: var(--light-green-color);
    --second-green-color: var(--light-second-green-color);
    --purple-color: var(--light-purple-color);
    --bg-color: var(--light-bg-color);
    --second-bg-color: var(--light-second-bg-color);
    --third-bg-color: var(--light-third-bg-color);
    --four-bg-color: var(--light-four-bg-color);
    --five-bg-color: var(--light-five-bg-color);
    --text-color: var(--light-text-color);
    --second-color: var(--light-second-color);
    --border-color: var(--light-border-color);
}

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

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

ol,
ul,
menu {
    padding: 0 !important;
    margin: 0 !important;
}

li {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}

a,
img,
span,
label,
input,
select,
button,
textarea { display: block; }

a {
    font-family: var(--font-family) !important;
    color: var(--text-color) !important;
    text-decoration: none;
}

img { height: auto; }

input,
select,
button,
textarea {
    font-family: var(--font-family) !important;
    background: none;
    border: none;
}

input,
select,
textarea {
    box-shadow: 0 0 0 transparent !important;
    outline: none;
    width: 100%;
}

textarea { resize: none !important; }

input::placeholder { color: var(--second-color) !important; }

select::placeholder { color: var(--second-color) !important; }

textarea::placeholder { color: var(--second-color) !important; }

button { cursor: pointer; }

form { width: 100%; }

div { width: auto; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-family) !important;
    background-color: var(--bg-color);
    font-size: var(--fs-base);
    color: var(--text-color);
    font-weight: normal;
    display: flex;
    flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 { 
    padding: 0 !important;
    margin: 0 !important;
    font-weight: bolder;
}

p {
    padding: 0 !important;
    margin: 0 !important;
}

th,
td { text-wrap: nowrap; }

/*-----------------------------------*\
  #DUBLICATE ITEMS
\*-----------------------------------*/

.section { padding-block: 120px; }

.container {
    padding-inline: 16px !important;
    margin-inline: auto;
    max-width: 1300px !important;
    width: 100%;
}

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

.img-holder {
    background-color: var(--second-bg-color) !important;
    overflow: hidden;
}

.title-section { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-block-end: 72px; 
    width: 100%;
}

.title-section h3 { justify-content: center; }

.main { 
    padding-block-start: 80px;
    min-height: 100vh; 
}

/*-----------------------------------*\
  #TYPOGRAPHY
\*-----------------------------------*/

.display-large {
    font-size: var(--fs-display-large);
    font-weight: var(--fw-bold);
    line-height: var(--lh-display-large);
}

.display-medium {
    font-size: var(--fs-display-medium);
    font-weight: var(--fw-bold);
    line-height: var(--lh-display-medium);
}

.display-small {
    font-size: var(--fs-display-small);
    font-weight: var(--fw-bold);
    line-height: var(--lh-display-small);
}

.headline-small {
    font-size: var(--fs-headline-small);
    font-weight: var(--weight-medium);
    line-height: var(--lh-headline-small);
}

.title-large {
    font-size: var(--fs-title-large);
    font-weight: var(--fw-medium);
    line-height: var(--lh-title-large);
}

.title-medium {
    font-size: var(--fs-title-medium);
    font-weight: var(--fw-medium);
    line-height: var(--lh-title-medium);
    letter-spacing: var(--ls-p-015);
}

.title-small {
    font-size: var(--fs-title-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-title-small);
}

.body-large {
    font-size: var(--fs-body-large);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body-large);
}

.body-medium {
    font-size: var(--fs-body-medium);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body-medium);
}

.body-small {
    font-size: var(--fs-body-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body-small);
}

.label-large {
    font-size: var(--fs-label-large);
    font-weight: var(--fw-regular);
    line-height: var(--lh-label-medium);
}

.label-medium {
    font-size: var(--fs-label-medium);
    font-weight: var(--fw-regular);
    line-height: var(--lh-label-medium);
}

.label-small {
    font-size: var(--fs-label-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-label-small);
}


.list {
  animation: linear_list 10s steps(300) alternate infinite;
}

@keyframes linear_list {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

.list img {
    min-width: max-content; 
    max-width: max-content; 
    min-height: 80vh; 
    max-height: 80vh; 
}

/*-----------------------------------*\
  #iOS FIXES
\*-----------------------------------*/

/* iOS Safari header fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific fixes */
    header[data-header] {
        position: -webkit-sticky;
        position: sticky;
        top: env(safe-area-inset-top, 0);
        padding-top: env(safe-area-inset-top, 0);
        height: calc(80px + env(safe-area-inset-top, 0));
    }
    
    .main {
        padding-top: calc(80px + env(safe-area-inset-top, 0));
    }
    
    /* Fix for iOS viewport height issues */
    body {
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    
    /* Fix for iOS fixed positioning */
    .fixed {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Fix for iOS z-index stacking */
    header[data-header] {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: transform;
    }
}

/* Safe area support for all devices */
.safe-area-top {
    padding-top: env(safe-area-inset-top, 0);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left, 0);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right, 0);
}

/* iOS-specific mobile fixes */
@media screen and (max-width: 768px) {
    @supports (-webkit-touch-callout: none) {
        /* Fix iOS Safari address bar issues */
        header[data-header] {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 9999;
        }
        
        /* Fix iOS viewport height calculation */
        .main {
            min-height: -webkit-fill-available;
            min-height: 100vh;
        }
        
        /* Fix iOS touch scrolling */
        body {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: none;
        }
    }
}