@font-face {
    font-family: 'TT Chocolates';
    src: url('../font/TTChocolatesTrlCnd-XBd.woff2') format('woff2'),
        url('../font/TTChocolatesTrlCnd-XBd.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates';
    src: url('../font/TTChocolatesTrlCnd-DmBd.woff2') format('woff2'),
        url('../font/TTChocolatesTrlCnd-DmBd.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates';
    src: url('../font/TTChocolatesTrlCnd-XLt.woff2') format('woff2'),
        url('../font/TTChocolatesTrlCnd-XLt.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates';
    src: url('../font/TTChocolatesTrlCnd-Bd.woff2') format('woff2'),
        url('../font/TTChocolatesTrlCnd-Bd.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates';
    src: url('../font/TTChocolatesTrlCnd-Lt.woff2') format('woff2'),
        url('../font/TTChocolatesTrlCnd-Lt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates';
    src: url('../font/TTChocolatesTrlCnd-Md.woff2') format('woff2'),
        url('../font/TTChocolatesTrlCnd-Md.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates';
    src: url('../font/TTChocolatesTrlCnd-Rg.woff2') format('woff2'),
        url('../font/TTChocolatesTrlCnd-Rg.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates Trial';
    src: url('../font/TTChocolatesTrial-Bd.woff2') format('woff2'),
        url('../font/TTChocolatesTrial-Bd.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates Trial';
    src: url('../font/TTChocolatesTrial-XBd.woff2') format('woff2'),
        url('../font/TTChocolatesTrial-XBd.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates Trial';
    src: url('../font/TTChocolatesTrial-XLt.woff2') format('woff2'),
        url('../font/TTChocolatesTrial-XLt.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates Trial';
    src: url('../font/TTChocolatesTrial-DmBd.woff2') format('woff2'),
        url('../font/TTChocolatesTrial-DmBd.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates Trial';
    src: url('../font/TTChocolatesTrial-Lt.woff2') format('woff2'),
        url('../font/TTChocolatesTrial-Lt.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates Trial';
    src: url('../font/TTChocolatesTrial-Rg.woff2') format('woff2'),
        url('../font/TTChocolatesTrial-Rg.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Chocolates Trial';
    src: url('../font/TTChocolatesTrial-Md.woff2') format('woff2'),
        url('../font/TTChocolatesTrial-Md.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "TT Chocolates Trial", system-ui;

}

.font2 {
    font-family: "TT Chocolates", system-ui;

}

html {
    scroll-behavior: smooth;
}

ul,
li,
ol {
    list-style: none;
}

img {
    max-width: 100%;
}

button,
a {
    cursor: pointer;
}

section {
    scroll-margin-top: 127px;

}

input:focus,
input:focus-visible,
input:focus-within,
button:focus,
button:focus-visible,
button:focus-within,
textarea:focus,
textarea:focus-visible,
textarea:focus-within {
    outline: unset;
    box-shadow: unset;
}

.container {
    margin: auto;
    padding: 0 20px;
}

header.scrolled {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 0 !important;
    background: #ECEADC;
}

header.scrolled .nav-toggle {
    transform: scale(1);
}

/* header.un-scrolled .nav-items{
display: none !important;
} */

/*  STYLING START */
.arrow-img.active {
    transform: rotateX(170deg);
}

        .input-box.active label {
            top: -2px !important;
            font-size: 14px !important;
        }

.different-img img {
    animation: myAnim 15s linear 0s infinite normal forwards;
}

.round-img {
    animation: myAnim 24s linear 0s infinite normal forwards;
}

body.active .overlay-div {
    display: block;
}

@keyframes myAnim {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.select-input select {
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 5px),
        calc(100% - 15px) calc(1em + 5px),
        calc(100% - 2.5em) 0.7em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
}

.select-input select:focus {
    background-image: linear-gradient(45deg, gray 50%, transparent 50%), linear-gradient(135deg, transparent 50%, gray 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 15px) calc(1em + 5px), calc(100% - 20px) calc(1em + 5px), calc(100% - 2.5em) 0.7em;
}
        .banner-heading {
            position: relative;
        }
    
        .banner-heading .line {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 0;
            background: #042A2B;
            transition: height 1s ease-in;
        }
    
        .banner-heading .line.animated {
            height: 100%;
        }



.input-box label.error,
.select-input label.error
{display: block;
    color: red;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 5px;}


    #contact-form-result{text-align: center;
        font-size: 32px;
        font-weight: 600;
        text-transform: uppercase;
        font-family: "TT Chocolates", system-ui;
        letter-spacing: -1.5px;
        color: #0f4d0f;}

/*  STYLING FINISHED */