@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Convergence&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{
    --fs-h1: clamp(2rem, 5vw, 4rem);
    --fs-h1-big:clamp(2rem, 5vw, 7rem);;
    --fs-h2: clamp(1.75rem, 4vw, 3rem);
    --fs-h3: clamp(1.5rem, 3vw, 2.25rem);
    --fs-body: clamp(1rem, 2vw, 1.125rem);
    --fs-small: clamp(0.875rem, 1.5vw, 1rem);

    --deep-navy:rgba(10, 36, 84, 1);
    --very-deep-navy:#060b23;
    --main-navy:#071226; /*RGBA(7,18,38,1)*/
    --primary-gold:rgba(212, 170, 55, 1);
    --index-gold:#D4AF37;
    --light-gold:rgba(242, 204, 89, 1);
    --dark-gold:rgba(168, 130, 30, 1);
    --dark-brown:rgba(33, 19, 13,1);
    --very-dar-brown:rgb(10, 3, 1);
    --dark-orange:rgba(102, 38, 10,1);
    --accent-green: #0F5132;
    --accent-green-hover: #146C43;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*Parent Container*/
body{
    height: 100vh;
    font-family: Cormorant;
}

.top{
    /* background: var(--deep-navy); */
    position: relative;
    height: 75vh;
}

.bg-video{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-repeat: no-repeat;
    z-index: -1;
}


/* Gradient overlay */
.overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        /* Darker bottom */
        linear-gradient(
            to bottom,
            rgba(7,18,38,0.15) 0%,
            rgba(7,18,38,0.4) 45%,
            rgba(7,18,38,0.8) 100%
        ),

        /* Darker sides */
        linear-gradient(
            to right,
            rgba(7,18,38,0.45) 0%,
            rgba(7,18,38,0.2) 25%,
            rgba(7,18,38,0.2) 75%,
            rgba(7,18,38,0.45) 100%
        );
}

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 2;
}

.container img{
    width: clamp(200px, 40vw, 500px);
    height: auto;
    display: block;
    margin: 0 auto;
    /* opacity: 1; */
    opacity: 0;
    animation: fade 2s 1s forwards;
}

@keyframes fade {

    0%{opacity: 0;}
    100%{opacity: 1;}

}

.container span{
    color: white;
    display: block;
}



.text1{
    font-size: var(--fs-h1-big);
    font-weight: 700;
    letter-spacing: 8px;
    /* Beginning margin bottom */
    margin-bottom: 20px;

    position: relative;

    animation: text 5s 1;

    display: inline-block;   /* sits on one line */
    white-space: nowrap;     /* prevents internal line breaks */

}


@keyframes text {
    0%{
        /* color: transparent; */
        margin-bottom: -40px;
    }

    30%{
        letter-spacing: 25px;
        margin-bottom: -40px;
    }

    85%{
        letter-spacing: 8px;
        margin-bottom: -40px;
    }
}

.catchy{
    /* line-height: 2; */
    opacity: 0;
    font-size: var(--fs-h2);
    animation: animateCatchy 3s 6s forwards;
}

.catchy span{
    text-transform: capitalize;
    opacity: 0;
    animation: fade 2s 5s forwards;
}

@keyframes animateCatchy {
    0%{opacity: 0;}
    25%{opacity: 0.25;}
    50%{opacity: 0.5;}
    75%{opacity: 0.75;}
    100%{opacity: 1;}
}

.catchy .catchy-title{
    display: inline-block;   /* sits on one line */
    white-space: nowrap;     /* prevents internal line breaks */
}

/* BOTTOM */
.bottom{
    /* background-color: var(--very-deep-navy); */
    background-color: var(--main-navy);
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2em;
    /* justify-content: center; */

}

.bottom h1{color: white;}

/* Honeypot cookie */
.hp-field{
  position:absolute;
  left:-9999px;
  top:-9999px;
  height:0;
  overflow:hidden;
}

.alert-success{
    text-align: center;
    font-family: 'Convergence';
    font-size: var(--fs-body);
    color: var(--accent-green);
    padding: 0.8em 1.2em;
    margin-bottom: 1.5rem;

    border: 1px solid rgba(15, 81, 50, 0.4);
    background: rgba(15, 81, 50, 0.08);

    backdrop-filter: blur(4px);
    border-radius: 4px;
}

/* reCAPTCHA error message */
.alert-danger{
    text-align: center;
    font-family: 'Convergence';
    font-size: var(--fs-body);
    color: #8B1E1E;
    padding: 0.8em 1.2em;
    margin-bottom: 1.5rem;

    border: 1px solid rgba(139, 30, 30, 0.4);
    background: rgba(139, 30, 30, 0.08);

    backdrop-filter: blur(4px);
    border-radius: 4px;
}

/* FORM */
.form-main-container{
    width: 50%;
    /* background-color: black; */
    font-family: 'Convergence';
}

.form-container{
    position: relative;
    width: 100%;
    height: 3rem;
}


.form-container-textarea{
    position: relative;
    width: 100%;
    height: 10rem;
}

.form-control{
    color: white;
}

.form_input,
.form_input_text{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #e1e5ee !important;
    border-radius: 0.3rem;
    outline: none;
    padding: 1.25em;
    background: none;
    color: white !important;

    transition: all 160ms ease-in;
}

.form_input:hover,
.form_input_text:hover{
    border-color: rgba(255,255,255,0.7) !important;
}

.form-control.form_input:focus,
.form-control.form_input_text:focus{
    border-color: var(--index-gold) !important;
    box-shadow: none;
    background: none !important;
}

.form_label{
    position: absolute;
    left:1rem;
    top:0.8rem;
    padding: 0 0.5em;
    color:white;
    cursor: text;
    transition: top 200ms ease-in,
            left 200ms ease-in,
            font-size 200ms ease-in;
    background-color: var(--very-deep-navy);
}

.form_input:focus ~ .form_label,
.form_input_text:focus ~ .form_label,
.form_input:not(:placeholder-shown).form_input:not(:focus) ~ .form_label,
.form_input_text:not(:placeholder-shown).form_input_text:not(:focus) ~ .form_label{
    top: -0.5rem;
    font-size: 0.8rem;
    left: 0.8rem;
}

/* button */
.form-container-button{
    width: 100%;
    height: 4rem;
    /* background-color: black; */

    display: grid;
    place-items: center;
}

.btn{
    width: 20%;
    background-color: transparent;
    /* border: 1px solid var(--index-gold); */
    color: white;
    font-family: inherit;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    text-transform: uppercase;
    letter-spacing: 3px;

    transition: all 0.5s;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* The circles */
.btn:before,
.btn:after{
    content: "";
    position: absolute;
    top: 50%;
    width:1.25rem;
    height: 1.25rem;
    background-color: var(--index-gold);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: all 0.3s;
    z-index: -1;
    opacity: 0;
}

/* the before circle on left */
.btn:before{
    left: 0;
    /* create the other circle on the left */
    box-shadow: -100px 0 0 var(--index-gold);
}

.btn:after{
    right: 0;
    /* create the other circle on the right */
    box-shadow: 100px 0 0 var(--index-gold);
}

.btn:hover:before{
    left: 50%;
    box-shadow: 30px 0 0 var(--index-gold);
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
}

.btn:hover::after{
    right: 50%;
    box-shadow: -30px 0 0 var(--index-gold);
    transform: translateX(50%) translateY(-50%);
    opacity: 1;
}

.btn span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--index-gold);
    border-radius: 0.3rem;
    transform: scale(0);
    transition: all 0.3s;
    z-index: -1;
}

.btn:hover span{
    transform: scale(1);
    transition-delay: 0.4s;
}

.btn:hover{
    color: var(--very-deep-navy);
    transition-delay: 0.4s;
}

/* reCaptcha */
.recaptcha-note{
    color: white;
    font-size: var(--fs-small);
    font-family: sans-serif;
    text-align: center;
}

.recaptcha-note a{
    text-decoration: underline;
    color: #e1e5ee;
    cursor: pointer;
}

.recaptcha-note a:hover {
    color: var(--index-gold);
}

/* FOOTER */
footer{
    background-color: var(--very-deep-navy);
    color: white;
    width: 100%;
    margin: 0;
    padding: 0;

    border-top: 0.5px solid #e1e5ee;
}

footer p{
    padding: 0.5em;
    font-size: var(--fs-body);
    /* background-color: lightcoral; */
}

footer a{
    text-decoration: none;
    color:#e1e5ee;
    font-family: "Convergence";
    /* font-weight: 600; */
    cursor: pointer;
}

/* Owner gear */
.owner-gear {
    font-size: 1rem;
    color: #ffffff;
    opacity: 0.35;
    transition: all 0.25s ease;
    cursor: pointer;
}

.owner-gear:hover {
    opacity: 1;
    transform: rotate(45deg);
    color: #6ab04c;
}

.owner-gear i {
    vertical-align: middle;
}

/* MEDIA QUERIES */
@media (max-width: 576px){
  .text1{
    letter-spacing: 3px;   /* tighter for small screens */
  }
}

@media (max-width:768px) {
    .form-main-container{
        width: 90%;
    }
}