:root{

    color-scheme: dark light;
    scroll-behavior: smooth;

    --ff: "IBM Plex Sans Arabic", sans-serif;
    --ff-accent: "Playpen Sans Arabic", cursive;
    --fs: .6em;
    --fw-thin: 300;
    --fw-normal: 400;
    --fw-bold: 700;
    --fw-black: 900;

    --unit: .7rem;

    @media (width > 50em){
        --fs: 1em;
        --fw-thin: 200;
        --fw-normal: 400;
        --fw-bold: 700;
        --fw-black: 900;

        --unit: 1rem;
    }

    --clr-neutral-100: hsl(0, 0%, 100%);
    --clr-neutral-200: hsl(0, 0%, 90%);
    --clr-neutral-300: hsl(0, 0%, 80%);
    --clr-neutral-400: hsl(0, 0%, 70%);
    --clr-neutral-500: hsl(0, 0%, 60%);
    --clr-neutral-600: hsl(0, 0%, 50%);
    --clr-neutral-700: hsl(0, 0%, 35%);
    --clr-neutral-800: hsl(0, 0%, 20%);
    --clr-neutral-900: hsl(0, 0%, 0%);

    --clr-accent: hsl(357, 84%, 51%);

    --clr-background: var(--clr-neutral-200);
    --clr-forground: var(--clr-neutral-400);
    --clr-surface: var(--clr-neutral-700);
    --clr-dark: var(--clr-neutral-100);
    --clr-full-contrast: var(--clr-neutral-900);
    --clr-text-900: var(--clr-neutral-900);
    --clr-text-400: var(--clr-neutral-700);
    --clr-text-200: var(--clr-neutral-500);

    @media (prefers-color-scheme: dark){
        
        --clr-background: var(--clr-neutral-800);
        --clr-forground: var(--clr-neutral-600);
        --clr-surface: var(--clr-neutral-300);
        --clr-dark: var(--clr-neutral-900);
        --clr-full-contrast: var(--clr-neutral-100);
        --clr-text-900: var(--clr-neutral-100);
        --clr-text-400: var(--clr-neutral-300);
        --clr-text-200: var(--clr-neutral-500);
    }

    [data-theme="dark"] {
        --clr-background: var(--clr-neutral-800);
        --clr-forground: var(--clr-neutral-600);
        --clr-surface: var(--clr-neutral-300);
        --clr-dark: var(--clr-neutral-900);
        --clr-full-contrast: var(--clr-neutral-100);
        --clr-text-900: var(--clr-neutral-100);
        --clr-text-400: var(--clr-neutral-300);
        --clr-text-200: var(--clr-neutral-500);
    }
    
    [data-theme="light"] {
        --clr-background: var(--clr-neutral-200);
        --clr-forground: var(--clr-neutral-400);
        --clr-surface: var(--clr-neutral-700);
        --clr-dark: var(--clr-neutral-100);
        --clr-full-contrast: var(--clr-neutral-900);
        --clr-text-900: var(--clr-neutral-900);
        --clr-text-400: var(--clr-neutral-700);
        --clr-text-200: var(--clr-neutral-500);
    }

    
}

*, h1, h2, h3, h4, p, a, ul, li, button, span{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

span{
    display: inline-block;
}

h1{
    font-family: var(--ff);
    font-weight: var(--fw-thin);
    text-transform: uppercase;
    letter-spacing: calc(var(--fs)*.25);
    font-size: calc(var(--fs)*2.5);
    line-height: calc(var(--fs)*1.25);
}

p{
    font-family: var(--ff);
    font-weight: var(--fw-normal);
    font-size: calc(var(--fs)*1.125);
}

a{
    text-decoration: none;
}

button, .btn{
    font-family: var(--ff);
    font-weight: var(--fw-normal);
    text-transform: uppercase;
    color: var(--clr-full-contrast);
    letter-spacing: calc(var(--fs)*.065);
    font-size: calc(var(--fs)*1.25);
    background-color: transparent;
    border: 2px solid var(--clr-full-contrast);
    padding: calc(var(--unit)*.7) calc(var(--unit)*1.2);
    border-radius: calc(var(--unit)*1.2);
    cursor: pointer;
    transition: all 250ms ease;
}

button:hover,
.btn:hover{
    background: var(--clr-accent);
    color: var(--clr-full-contrast);
    border: 2px solid var(--clr-accent);
}

body{
    background: var(--clr-background);
    font-family: var(--ff);
    color: var(--clr-text-900);
}

header{
    position: relative;
    width: 100%;
    height: 15vh;
    z-index: 999;

    .header-container{
        width: 95%;
        margin-inline: auto;
        padding: calc(var(--unit)*1.5) 0;
        position: relative;

        display: flex;
        justify-content: space-between;
        align-items: center;

        @media (width > 50em){
            width: 90%;
        }
    }

    .logo{

        svg{
            width: 8rem;

            .logomark{
                fill: var(--clr-accent);
            }
            .automation{
                fill: var(--clr-text-400);
            }
            .logotype{
                fill: var(--clr-full-contrast);
            }
            .cable{
                fill: var(--clr-full-contrast);
            }
        }

        @media (width > 50em){
            svg{
                width: 12rem;
            }
        }
    }

    .main-nav{
        /* background: red; */

        ul{
            display: none;
            gap: calc(var(--unit)*3);
            list-style: none;


            a{
                text-decoration: none;
                color: var(--clr-surface);
                font-size: calc(var(--fs)*1.2);
                font-weight: var(--fw-bold);
                transition: color 250ms ease;
            }

            a:hover{
                color: var(--clr-full-contrast);
            }

            a.active{
                border-bottom: 5px solid var(--clr-accent);
            }
        }

        ul.open {
            position: absolute;
            width: 100%;
            right: 0;
            top: 12vh;
            gap: calc(var(--unit)*2);
            justify-content: center;
            background: var(--clr-accent);
            padding: calc(var(--unit)*2) calc(var(--unit)*4);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            border-radius: calc(var(--unit)*2);
            z-index: 9999;

            a{
                width: 100%;
                color: var(--clr-neutral-900);
                font-weight: var(--fw-black);
                text-decoration: none;
                font-size: calc(var(--fs)*1.7);
                text-align: center;
            }

            a:hover{
                color: var(--clr-surface);
            }
        }
        
        button{
            background: none;
            border: none;
            outline: none;
            cursor: pointer;
            padding: var(--unit);

            .line{
                --width: 2.25rem;
                --space: .6rem;
                --ratio: 18 / 1;

                width: var(--width);
                aspect-ratio: var(--ratio);
                background: var(--clr-full-contrast);
                border-radius: 100vh;
                position: relative;

                transition: all 250ms ease;
            }

            .line::before{
                position: absolute;
                content: '';
                background: inherit;
                width: var(--width);
                aspect-ratio: var(--ratio);
                border-radius: inherit;
                top: calc(var(--space)*-1);
                left: 0;
            }

            .line::after{
                position: absolute;
                content: '';
                background: inherit;
                width: var(--width);
                aspect-ratio: var(--ratio);
                border-radius: inherit;
                top: calc(var(--space)*1);
                left: 0;
            }
        }

        button.open{
            .line{
                background: transparent;
            }

            .line::before{
                background: var(--clr-full-contrast);
                rotate: 45deg;
                top: 0;
            }

            .line::after{
                background: var(--clr-full-contrast);
                rotate: -45deg;
                top: 0;
            }
        }

        @media (width > 50em){
            ul{
                display: flex;
            }

            button{
                display: none;
            }
        }
    }

    /* Container for the switch and text */
    .theme-switch-wrapper {
        display: none;        

        @media (width > 50em){
            display: grid;
            place-content: center;
            gap: calc(var(--unit)*.5);
            z-index: 999;
        }
    }

    .theme-toggle-description,
    .back-btn-description{
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: .125em;
    font-size: calc(var(--fs)*.65);
    }

    /* The actual label that becomes the switch track */
    .theme-switch {
    --track-width: 3rem;
    --track-height: 1.5rem;
    --translate: calc(var(--track-height) - calc(var(--track-height)*.1));

    position: relative;
    display: inline-block;
    width: var(--track-width); /* Width of the track */
    height: var(--track-height); /* Height of the track */
    justify-self: center;

    @media (width > 50em){
        --track-width: 4rem;
        --track-height: 2rem;
    }

    @media (height < 35em){
        --track-width: 3rem;
        --track-height: 1.5rem;
    }
    }

    /* Hide the default browser checkbox */
    .theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    }

    /* The slider/track itself */
    .slider {
    --track-padding: 4px;

    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--clr-forground);
    border: var(--track-padding) solid var(--clr-forground);

    transition: 0.4s;
    border-radius: 100vh;
    }

    /* The circular thumb/handle */
    .slider:before {
    position: absolute;
    content: "";
    height: 100%; /* Size of the thumb */
    aspect-ratio: 1 / 1;
    left: 0; /* Starting position inside the track */
    bottom: 0;
    background-color: var(--clr-full-contrast); /* Light color for the thumb */
    transition: 0.4s;
    border-radius: 100vh; /* Makes the thumb circular */
    }

    .slider:after{
    position: absolute;
    content: "";
    aspect-ratio: 1 / 1;
    left: 0; /* Starting position inside the track */
    top: 0;
    background-image: url(/assets/img/darktheme.svg);
    background-repeat: no-repeat;
    object-fit: cover;
    background-size: calc(var(--track-height) - calc(var(--track-padding)*2));
    width: 100%;
    aspect-ratio: 1 / 1;
    transition: 0.4s;
    }

    /* * Styles when the checkbox is checked (Dark mode is ON)
    * The [data-theme="dark"] selector is used here to match the site's colors
    * when the dark theme is active, regardless of the system setting.
    */

    /* Move the slider thumb to the right when checked */
    #theme-toggle:checked + .slider:before {
    transform: translateX(var(--translate)); /* 60px (track width) - 34px (track height) = 26px */
    }

    #theme-toggle:checked + .slider:after {
    transform: translateX(var(--translate)); /* 60px (track width) - 34px (track height) = 26px */
    background-image: url(/assets/img/lighttheme.svg);
    }

    /* Change the track background color when checked */
    #theme-toggle:checked + .slider {
    background-color: var(--clr-forground); /* A distinct color for "on" */
    }

    /* * Additional Styling for Light/System Theme
    * Let's change the color of the text next to the toggle
    */
    body[data-theme="dark"] .theme-text {
    color: var(--clr-full-contrast);
    }
}

    
section{
    width: 100%;
    padding-block: 5rem;
    position: relative;

    .container{
        width: 80%;
        margin-inline: auto;
    }
}

.hero{
    min-height: 100svh;
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-content: center;

    background-image: 
    linear-gradient(-15deg, var(--clr-dark), var(--clr-background));

    @media (width > 50em){
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    }
}

.hero-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    h1{
        text-align: center;
    }
    
    span{
        position: relative;
        color: var(--clr-surface);
    }

    span::before{
        position: absolute;
        content: '';
        top: 45%;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--clr-accent);
        border-radius: 100vh;
        rotate: 2.5deg;
    }

    span::after{
        position: absolute;
        content: 'solutions';
        font-family: var(--ff-accent);
        font-weight: var(--fw-thin);
        letter-spacing: 0;
        color: var(--clr-accent);
        top: -110%;
        left: 50%;
        translate: -50%;
        rotate: 1.5deg;

        @media (width > 50em){
            top: -60%;
        }
    }

    p{
        text-align: justify;
        width: 100%;
        margin-inline: auto;
        margin-block: calc(var(--unit)*3);

        @media (width > 50em){
            width: 80%;
        }
    }

    button{
        text-align: center;
    }
}

/* === ABOUT SECTION === */
.about {
    padding-block: 2rem;
    margin-block-start: 90vh;
    background: var(--clr-background);
}

.about-grid {
    display: grid;
    gap: 2rem;
}

@media (width > 50em) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.about-card {
    background: var(--clr-forground);
    padding: 2rem;
    border-radius: 1rem;
    border-left: 6px solid var(--clr-accent);
}

.about-card h2 {
    color: var(--clr-text-900);
    margin-bottom: 1rem;
}

.about-card p {
    color: var(--clr-text-400);
}


/* === SOLUTIONS SECTION === */
.solutions{
    min-height: 100vh;
    display: grid;
    place-content: center;
}

.grid {
    margin-block-start: 5rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-item {
    background: var(--clr-surface);
    padding: 2rem;
    border-radius: 1rem;
    transition: transform 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
}

.grid-item h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: var(--fw-bold);
    color: var(--clr-accent);
}

.grid-item p{
    color: var(--clr-background);
}


/* === PARTNERS SECTION === */
.partners {
    background: var(--clr-accent);
    min-height: 100vh;
    display: grid;
    place-content: center;
}

.section-title{
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: hsl(from var(--clr-neutral-100) h s l / .25);
    font-size: 5em;
    line-height: .85;

    @media (width > 50em){
        font-size: 10em;
    }
}

.partners h1{
    margin-block-start: 7.25rem;
    font-size: 8em;
    font-weight: 900;
    letter-spacing: normal;
    line-height: 1;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: 1rem;
    margin-block: 3rem;
}

.logo-item {
    width: 100%;
    padding: 1rem 1.5rem;
    border-radius: 1.5rem;
    background: var(--clr-surface);
    opacity: .7;
    transition: all 250ms ease;


    img{
        width: 100%;
        filter: brightness(0.5) saturate(0%);
    }
}

.logo-item:hover {
    opacity: 1;


    img{
        width: 100%;
        filter: brightness(1) saturate(1);
    }
}


/* === FOOTER === */
footer {
    background: var(--clr-neutral-800);
    color: var(--clr-neutral-100);
    padding-top: 4rem;
    margin-top: auto;
}

.footer-container {
    display: grid;
    gap: 3rem;
    width: 80%;
    margin-inline: auto;
    padding-bottom: 3rem;
}

@media (width > 50em){
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

.footer-col h3 {
    color: var(--clr-accent);
    margin-bottom: 1rem;
}

.copyright {
    background: var(--clr-neutral-900);
    text-align: center;
    padding: 1.5rem;
    font-size: 0.9em;
    opacity: 0.7;
}