/* Define custom fonts for headers and paragraphs */
@font-face {
    font-family: 'Header'; /* Name of the font family for headers */
    src: url('Fonts/HeadingNowTrial-55Medium.ttf') format('truetype'); /* Source of the header font */
}

@font-face {
    font-family: 'Paragraph'; /* Name of the font family for paragraphs */
    src: url('Fonts/CreatoDisplay-Regular.otf') format('truetype'); /* Source of the paragraph font */
}

/* Media query for styles applied to screens larger than 768px */
@media only screen and (min-width: 768px) {
    .mobile-only {
        display: none !important; /* Hide elements with class 'mobile-only' on larger screens */
    }
}

/* Base styles for html and body elements */
html, body {
    margin: 0px; /* Remove default margin */
    padding: 0px; /* Remove default padding */
    scroll-behavior: smooth !important; /* Enable smooth scrolling for anchor links */
    
    /* Set background gradient colors */
    background: hsla(199, 100%, 71%, 1); /* Fallback background color */
    background: radial-gradient(circle, hsla(199, 100%, 71%, 1) 0%, hsla(196, 85%, 23%, 1) 100%); /* Radial gradient for modern browsers */
    background: -moz-radial-gradient(circle, hsla(199, 100%, 71%, 1) 0%, hsla(196, 85%, 23%, 1) 100%); /* For older Firefox */
    background: -webkit-radial-gradient(circle, hsla(199, 100%, 71%, 1) 0%, hsla(196, 85%, 23%, 1) 100%); /* For older WebKit browsers */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#6BD0FF", endColorstr="#09526D", GradientType=1 ); /* For older IE versions */
}

/* Styles for h1 headers */
h1 {
    color: #ffffff; /* Set text color to white */
    font-family: 'Header', sans-serif !important; /* Use custom header font */
    font-weight: 600; /* Set font weight */
}

/* Styles for paragraph elements */
p {
    letter-spacing: 0.1rem; /* Add space between letters */
    color: #ffffff; /* Set text color to white */
    font-family: 'Paragraph', sans-serif !important; /* Use custom paragraph font */
}

/* Navbar styles */
.navbar {
    justify-content: center; /* Center the content horizontally */
    display: flex; /* Use flexbox for layout */
    height: 12vh; /* Set navbar height */
    background-color: #09526d31 !important; /* Semi-transparent background color */
    position: fixed; /* Fix navbar to the top of the viewport */
    top: 0; /* Align navbar to the top */
    right: 0; /* Align navbar to the right */
    width: 100%; /* Full width of the viewport */
    transition: top 0.3s, background-color 0.3s; /* Smooth transitions for top position and background color */
}

/* Styles for columns in the navbar */
.nav-column {
    padding: 0; /* Remove padding */
    display: flex; /* Use flexbox for layout */
}

/* Center item margin adjustments */
.center-item {
    margin-left: 2vw; /* Left margin */
    margin-right: 2vw; /* Right margin */
}

/* First navbar item margin adjustment */
.nav-item:first-child {
    margin-left: 5vw; /* Additional left margin for the first item */
}

/* Navbar item link styles */
.nav-item a {
    font-family: 'Header', sans-serif !important; /* Use custom header font */
    color: #ffffff; /* Set link color to white */
    font-weight: 400; /* Set font weight */
    font-size: 2rem; /* Set font size */
    transition: color 0.2s; /* Smooth transition for color on hover */
}

/* Hover effect for navbar item links */
.nav-item a:hover {
    color: #10bb3d; /* Change color on hover */
}

/* Navbar logo styles */
.navbar-logo {
    margin-left: 2vw; /* Left margin for logo */
    height: 12vh; /* Set logo height */
}

/* Styles for the navbar when scrolled */
.navbar.scrolled {
    top: 1vh; /* Move navbar down slightly when scrolled */
    background-color: #09526dde !important; /* Change background color when scrolled */
}

/* Footer styles */
.footer .container {
    height: 22vh; /* Set footer height */
    background-color: #09526d; /* Set footer background color */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack children vertically */
    max-width: none; /* Remove maximum width constraint */
    width: 100%; /* Full width of the viewport */
}

/* Remove padding from footer */
footer {
    padding: 0 !important; /* Remove padding */
}

/* Styles for log container */
#log {
    text-align: end; /* Align text to the right */
}