/* Font-face declarations */
@font-face {
    font-family: 'Aeonik';
    src: url('./fonts/Aeonik-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Aeonik';
    src: url('./fonts/Aeonik-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Aeonik';
    src: url('./fonts/Aeonik-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Aeonik';
    src: url('./fonts/Aeonik-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('./fonts/PPNeueMontreal-Bold.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}


body {
    font-family: 'Aeonik', sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
}

.site-container {
    overflow:hidden;
    position:relative;
        width: 100%;
}

/* Variables */
:root {
    --primary-font: 'Aeonik', sans-serif;
    --primary-colour: #000000; /* Black */
    --secondary-colour: #E8E6D9; /* Cream */
    --accent-colour: #262626; /* Dark Gray */
}

/* General Reset */
body, h1, h2, h3, p, input, button, a {
    margin: 0;
    padding: 0;
    font-family: var(--primary-font);
    color: var(--secondary-colour);
    text-decoration: none;
}

a:hover {
    opacity:0.8;
}

body {
    background-color: var(--primary-colour);
    color: var(--secondary-colour);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width:100%;
    overflow-x: hidden;
}

/* Header */
header {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    z-index: 99;
}

/* Top Header */
.top-header {
    overflow: hidden; /* Ensure content flowing off the edges isn't visible */
    background-color: transparent;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 50px; /* Adjust height to match your design */

}

.scrolling-text {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    white-space:nowrap;
}

.scrolling-text li {
    display: inline-block;
    margin-right: 50px; /* Spacing between items */
    font-size: 1rem;
    overflow:hidden;
    white-space:nowrap;
    position:relative;
    margin:0px 25px 0px 25px;
}

/* Main Header */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: transparent;
}

.main-header .logo a {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}

.main-header .cta .button {
    padding: 10px 20px;
    background-color: var(--accent-colour);
    color: var(--secondary-colour);
    text-decoration: none;
    border-radius: 60px;
    font-weight: 500;
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 0 20px;
    min-height: auto;
    width:85vw;
    align-items: center;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    margin: 0 auto;
}
.hero-image img {
    height:540px;
    max-height:50vh;
}


.hero-content {
    margin-top: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top:-10vh;
}

.hero-content h1 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
    font-family: 'PP Neue Montreal', sans-serif;
    text-transform:uppercase;
    font-size: 5.5em;
    line-height: 0.9em;
}

.hero-content p {
    font-size: 1.4em;
    line-height: 1.15em;
    margin-bottom: 35px;
}

/* Form Section */
.form-section {
    display: flex;
    justify-content: center;
    padding: 50px 20px;
    position: relative;
    width: 100vw;
}

.form-container {
    background-color: var(--accent-colour);
    padding: 48px 43px;
    border-radius: 10px;
    max-width: 480px;
    text-align: center;
}

.form-section h2 {
    font-size:28px;
    margin-bottom: 15px;
}
.form-section p {
    font-size:20px;
    padding: 0 15px;
}

.gravity-container {
    margin-top: 35px;
}

.gform-theme--foundation .gform_fields {
    row-gap: 6px !important;
    column-gap: 6px !important;
    gap: 6px !important;
}

.gform-body .gform_fields .gfield input, .gform-body .gform_fields .gfield select {
    border: 2px solid #000;
    background: #000;
    color: rgb(232 230 217 / 35%);
    text-align: left;
    font-size: 1.1em;
    padding: 8px 15px;
    height: auto;
    border-radius: 6px;
    outline:none;
}

.gform-body .gform_fields .gfield *:focus {
    border-color: var(--secondary-colour);
    border-width:2px;
}

.gform_wrapper select {
    appearance: none; /* Remove the default browser dropdown styling */
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none; /* Firefox */
    background-position: right 10px center; /* Position the chevron */
    background-repeat: no-repeat;
    background-size: 1rem; /* Adjust chevron size */
    padding-right: 2rem; /* Space for the chevron */
}

.gravity-container .gform-footer.gform_footer.top_label {
    margin-top: 16px;
}
.gravity-container .gform_wrapper .gform_footer input[type='submit'] {
    line-height: 60px !important;
    background-color:var(--secondary-colour) !important;
    color:var(--accent-colour) !important;
    font-size:1.2em !important;
}

.gravity-container .gform_confirmation_message {
    font-size: 1.4em;
    background: #e8e6d9;
    color: var(--accent-colour);
    padding: 24px;
    border-radius: 10px;
    transform: rotate(355deg);
}

p.privacy-statement {
    margin-top: 24px;
    font-size: 14px;
    padding: 0 10%;
}

.kleo-cat {
    position: absolute;
    z-index:-1;
    overflow: hidden;
}
.kleo-cat img {
    max-width: calc(40% + 10vw);
}
.kleo-cat.left {
    left: -5%;
    top: -12%;
    display: flex;
    justify-content: flex-start;
}
.kleo-cat.right {
    right: -5%;
    bottom:10%;
    display: flex;
    justify-content: flex-end;
}


/* Footer */
footer {
    width: 100%;
    display: flex;
    flex-direction: column;
}
footer .footer-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 15px;
    padding-top: 40px;
    border-top: 1px solid var(--accent-colour);
    margin: 20px;
    align-items: end;
    margin-top:60px;
}

.bottom-footer {
    display: flex;
    justify-content: space-between;
    gap:15px;
    padding: 20px;
    margin-bottom:20px;
}


/******** Animations ***/
.hero-image img {
    will-change: transform, opacity; /* Optimise rendering for transform and opacity */
    transform: translateY(-100px); /* Start off-screen */
    opacity: 0; /* Start fully transparent */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transitions for both properties */
}

.hero-image img.animate {
    transform: translateY(0); /* Slide into place */
    opacity: 1; /* Fade to full opacity */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.kleo-cat, .hero-image {
    will-change: transform; /* Optimise for transform changes */
    transition: transform 0.1s linear; /* Smooth effect for parallax */
}


.fadeUp {
    opacity: 0; /* Start fully transparent */
    transform: translateY(20px); /* Start slightly below its final position */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth fade and slide */
}

.fadeUp.visible {
    opacity: 1; /* Fade to full opacity */
    transform: translateY(0); /* Move to final position */
}

/******** Media Queries ***/



@media all and (max-width:1024px) {
    .kleo-cat.left {
    left: -25%;
}
.kleo-cat.right {
    right: -25%;
}
}



@media all and (max-width:768px) {
    body {
        max-width:100vw;
    }
    .hero-content h1 {
        font-size:3em;
    }
    .hero-content p {
        font-size:1.2em;
    }
    .bottom-footer {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 8px;
    }

    .form-section p {
        padding:0;
        font-size:1.1em;
    }
    p.privacy-statement {
        font-size: 0.8em;
        width:80vw;
    }
    .form-section {
        width:90vw;
    }
    .form-container {
        padding:40px 23px;
        width: 100vw;
    }
    .kleo-cat {
        display:none !important;
    }
    .scrolling-text li {
        font-size: 0.8rem !important; /* Smaller font size for mobile screens */
    }
    .gform-body .gform_fields .gfield input, .gform-body .gform_fields .gfield select {
        font-size:0.9em;
    }
    footer {
        text-align: center;
        align-items: center;
    }
    footer .footer-container {
        margin-bottom: 6px;
    }
    .strap {
        text-align: left;
    }
    .hero-image img {
        max-height:340px;
    }

}