/* =======================
   Navbar Styles
   ======================= */
   
#navbar {
    background-color: var(--geon-primary) !important; /* Navbar background color */
}

ul {
    margin-right: 30px;
}

li {
    margin: auto 20px;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: white !important;
    font-family: Acumin-Regular;
    font-size: var(--small-font) !important;
}


#offerDropdown:focus {
    outline: none; /* Remove the focus outline */
    box-shadow: none; /* Remove any box-shadow used to indicate focus */
}


.navbar-toggler:focus {
    outline: none; /* Removes the focus outline */
    box-shadow: none; /* Removes any box-shadow that might be used for focus indication */
}

.logo {
    font-size: 30px !important;
    margin-left: 15px;
}

.logo > img {
    vertical-align:baseline;
}



/* On hover, remove background change and set a different text color */
.dropdown-item:hover {
    background-color: transparent !important; /* No background change on hover */
    color: var(--geon-secondary) !important; /* Change text color on hover (e.g., Bootstrap yellow) */
}

.navbar-nav .nav-link.active:hover {
    background-color: transparent !important; /* No background change on hover */
    color: var(--geon-secondary) !important; /* Change text color on hover (e.g., Bootstrap yellow) */
}

.dropdown-menu {
    background-color: var(--geon-primary) !important;
    border: solid 1px black;
}

.dropdown-item {
    background-color: var(--geon-primary) !important;
    color: white !important;
}





/* =======================
   Intro Section Styles
   ======================= */
.heroSection {
    background-color: var(--hero-bg);
    align-items: center; /* Center content vertically */
    height: 100vh;

}


.heroSection video {
    position: absolute;
    top: 10px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    user-select: none;      /* Prevents text selection */
    pointer-events: none;   /* Disables mouse interactions */
    z-index: 0;
    right: 0;
}




#heroText {
    padding-top: 15vw;
    top: 10vh;
    width: 99%;
    position: absolute;
    text-align: center; /* Centers the text inside */
}

#heroText > h1, #heroText > h2 {
    color: white;
}

#heroText > h1 {
    font-size: var(--very-big-font);
    font-family: Acumin-Black !important;
    margin-bottom: 0;
} 

#heroText > h2 {
    font-size: var(--large-font) !important;
}

.potential {
    margin-top: 230px;
    margin-bottom: -10px;
}


/* Styling for the number display */
.numberDisplay {
    font-size: var(--very-big-font); /* Adjust font size as needed */
    font-family: Acumin-Black;
    text-align: center;
    margin-top: 20px; /* Centering the text */
    color: white;
}

/* Fade-out class to transition opacity */
.fade-out {
    opacity: 0; /* Hides the element */
}







/* Extra Small Devices (Phones, up to 480px) */
@media only screen and (max-width: 480px) {
    #heroText > h1 {
        font-size: var(--small-font) !important;
        margin-top: 150px;
    } 
    
    #heroText > h2 {  
        font-size: var(--small-font) !important;

    }

    .numberDisplay {
        font-size: var(--medium-font) !important; /* Adjust font size as needed */
    }

    #heroText > h1 {
        margin-bottom: 0;
        margin-top: 0;
    } 

    .potential {
        margin-top: 100px;
        margin-bottom: -20px;
    }


    .heroSection video {
        height: 55vh;
    }

    .heroSection {
        height: 55vh;
    }


}

  
/* Small Devices (Portrait Tablets and Small Phones, up to 768px) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    #heroText > h1 {
        font-size: var(--big-font) !important;
    } 
    
    #heroText > h2 {  
        font-size: var(--medium-font) !important;
    }

    .numberDisplay {
        font-size: var(--big-font) !important; /* Adjust font size as needed */
    }

    #heroText > h1 {
        margin-bottom: 0;
    } 

    .potential {
        margin-bottom: -20px;
    }


    .heroSection video {
        height: 65vh;
    }

    .heroSection {
        height: 65vh;
    }

}


/* Medium Devices (Tablets in Landscape, 768px to 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    #heroText > h1 {
        font-size: var(--medium-big-font) !important;
    } 
    
    #heroText > h2 {  
        font-size: var(--big-font) !important;
    }

    .numberDisplay {
        font-size: var(--medium-big-font) !important; /* Adjust font size as needed */
    }

    #heroText > h1 {
        margin-bottom: -10px;
    } 

    .potential {
        margin-bottom: -30px;
    }

    .heroSection video {
        height: 75vh;
    }

    .heroSection {
        height: 75vh;
    }


}   


/* Large Devices (Desktops, 1024px to 1200px) */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
    #heroText > h1 {
        font-size: var(--large-font) !important;
    } 
    
    #heroText > h2 {  
        font-size: var(--medium-big-font) !important;
    }

    .numberDisplay {
        font-size: var(--large-font) !important; /* Adjust font size as needed */
    }

    .heroSection video {
        height: 85vh;
    }

    .heroSection {
        height: 85vh;
    }

}

/* Extra Large Devices (Large Desktops, 1200px to 1600px) */
@media only screen and (min-width: 1201px) and (max-width: 1600px) {

}
  

/* Ultra Large Devices (Very Large Screens, 1600px and up) */
@media only screen and (min-width: 1601px) {

}
  





/* Extra Small Heights (Phones, up to 480px) */
@media only screen and (max-height: 530px) {
    .potential {
        margin-top: 0;
    }

    #heroText {
        padding-top: 17vh !important;
    }
}

/* Small Heights (Portrait Tablets and Small Phones, up to 768px) */
@media only screen and (min-height: 481px) and (max-height: 850px) {
    .potential {
        margin-top: 0;
    }

}

/* Medium Heights (Tablets in Landscape, 768px to 1024px) */
@media only screen and (min-height: 769px) and (max-height: 1024px) {

}