/* General Reset */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* Header Section */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: transparent;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

/* Logo Styling */
.logo {
    height: 55px;
    position: absolute;
    top: 30px;
    left: 50px;
    z-index: 3;
}

/* Hamburger Menu */
.menu-icon {
    position: absolute;
    top: 30px;
    right: 85px;
    font-size: 25px;
    color: white;
    cursor: pointer;
    z-index: 1000;
    transition: color 0.2s ease-in-out;
}

/* Menu Hover Effect */
.menu-icon:hover {
    color: #33AFDA; /* Set the hover color */
    transform: none;
    background-color: transparent;
}

/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: black;
}

/* Video Background */
.video-desktop, .video-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Hide Mobile Video by Default */
.video-mobile {
    display: none;
}

/* ✅ Hero Text Positioning & Visibility */
.hero-text {
    position: absolute;
    top:77%;
    left: 50px;
    transform: translateY(-50%);
    text-align: left;
    color: white;
    text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.5);
    width: fit-content;
    z-index: 10;
}

/* Normal Text */
.hero-text h1 {
    font-size: 2.3rem;
    font-weight: 100;
    line-height: 0.72;
    margin: 5px 0;
}

/* HUGE Text */
.huge-text {
    font-weight: 800;
    font-size: 5.45rem;
}

/* Extra Bold Text */
.extra-bold-text {
    font-weight: 800;
    font-size: 3.5rem;
}

/* Italic styling for More, Higher, Stronger */
.hero-text em {
    font-style: italic;
    font-size: 2.9rem; /* Adjust this value as needed */
}


/* ✅ Responsive Fixes (Merged All Mobile Rules) */
@media (max-width: 768px) {
   /* Adjust Hero Text Position */
   .hero-text {
    top: 72%; /* Move it slightly higher or lower */
    left: 20px; /* Adjust left alignment */
}

/* ✅ Adjust Font Sizes for Mobile */
.hero-text h1 {
    font-size: 1.8rem; /* Reduce size of general text */
    line-height: 0.9;
}

/* Italic Text (MORE, HIGHER, STRONGER) */
.hero-text em {
    font-size: 1.4rem; /* Smaller italic text */
}

/* Super Bold Text (SALES, PROFITS, IDENTITY) */
.huge-text {
    font-size: 3rem; /* Adjust main bold words */
}

/* Last Line Text (Let's Build a BRAND That Sets You APART) */
.hero-last-line h1 {
    font-size: 1.3rem; /* Reduce last line text */
}

/* Bold Words in Last Line (BRAND, APART) */
.extra-bold-text {
    font-size: 2rem; /* Adjust bold words in last line */
}

/* Adjust Logo for Mobile */
.logo {
    height: 45px; /* Reduce logo size */
    top: 15px; /* Adjust vertical placement */
    left: 20px; /* Adjust left alignment */
}

/* Adjust Hamburger Menu for Mobile */
.menu-icon {
    font-size: 20px; /* Reduce menu icon size */
    top: 15px; /* Adjust vertical placement */
    right: 30px; /* Adjust right alignment */
}

/* Adjust Space Between Main Hero Lines */
.hero-main-lines h1 {
    margin-bottom: -5px; /* Reduce spacing between hero lines */
}

/* Adjust Space Above Last Line */
.hero-last-line {
    margin-top: 15px; /* Adjust spacing above last line */
}

    /* Adjust Logo */
    .logo {
        height: 35px;
        top: 20px;
        left: 22px;
    }

 /* Adjust Hamburger Menu */
 .menu-icon {
    top: 15px; /* Move it slightly up or down */
    right: 60px; /* Move it closer or farther from the edge */
    font-size: 20px; /* Change the size of the icon */
}

    /* Hide Desktop Video & Show Mobile Video */
    .video-desktop {
        display: none;
    }

    .video-mobile {
        display: block;
    }
}

/* ✅ Gradient for Logo Visibility */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    z-index: 2;
}

/* ✅ Controls spacing between the first three lines (DESKTOP) */
.hero-main-lines h1 {
    margin-bottom: 12px; /* Adjust this value to control spacing */
}

/* ✅ Controls spacing above the last line (DESKTOP) */
.hero-last-line {
    margin-top: 20px; /* Adjust this value to control the gap above */
}

/* ✅ Responsive Fix: Adjust Spacing for Mobile */
@media (max-width: 768px) {
    .hero-main-lines h1 {
        margin-bottom: -7px; /* Reduce space between the first three lines */
    }

    .hero-last-line {
        margin-top: 20px; /* Reduce space above the last line */
    }
}