/* ↓↓ GENERAL RULES & WEBSITE SETTINGS ↓↓ */

/* ↓↓ GENERAL RULES & WEBSITE SETTINGS ↓↓ */
/* [1] NEUE MONTREAL */
@font-face {
    font-family: "PPNeueMontreal-Thin";
    src: url(fonts/PPNeueMontreal-Thin.otf);
}

@font-face {
    font-family: "PPNeueMontreal-Medium";
    src: url(fonts/PPNeueMontreal-Medium.otf);
}

/* [2] OVERUSED GROTESK */
@font-face {
    font-family: "OverusedGrotesk-Bold";
    src: url(fonts/OverusedGrotesk-Bold.otf)
}

@font-face {
    font-family: "OverusedGrotesk-Bolder";
    src: url(fonts/OverusedGrotesk-Black.otf)
}

@font-face {
    font-family: "OverusedGrotesk-SemiBold";
    src: url(fonts/OverusedGrotesk-SemiBold.otf)
}

@font-face {
    font-family: "OverusedGrotesk-SemiBold";
    src: url(fonts/OverusedGrotesk-SemiBold.otf)
}

/* [3] CLASH DISPLAY */
@font-face {
    font-family: "ClashDisplay-Bold";
    src: url(fonts/ClashDisplay-Bold.otf)
}

@font-face {
    font-family: "ClashDisplay-Semibold";
    src: url(fonts/ClashDisplay-Semibold.otf)
}

@font-face {
    font-family: "ClashDisplay-Light";
    src: url(fonts/ClashDisplay-Light.otf)
}

@font-face {
    font-family: "ClashDisplay-Medium";
    src: url(fonts/ClashDisplay-Medium.otf)
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
  /* overflow-x: hidden; */
}


/* == ⚠️ LAPTOP VIEWERS SCREEN SIZE ⚠️ == */

body {
    width: 100%;
    background: linear-gradient(rgb(255, 255, 255), rgb(200, 255, 209));
    height: 100%;
    background-image: url(/tendycutsimg/Grass3.png);
    background-size: cover; 
}

a {
    -webkit-tap-highlight-color:transparent;
}


/* ↓↓ ===== [1] TITLE===== ↓↓ */
@keyframes slideFadeIn {
    from {
        transform: translateX(-50px); /* Initial position off the top */
        opacity: 0;
    }
    to {
        transform: translateX(0); /* Final position */
        opacity: 1;
    }
}

.title {
    margin-top: 5%;
    margin-right: 40%;
    text-align: center;
    text-transform: uppercase;
    opacity: 0; /* Initially set opacity to 0 */
    animation: slideFadeIn 1s ease forwards; /* Apply animation to slide and fade in */
    animation-delay: 0.5s; /* Delay the animation by 2 seconds */
}

.title h1 {
    font-family: "ClashDisplay-Bold";
    letter-spacing: -3px;
    font-size: 70px;
    color: #0e47a0;
    line-height: 70px;
}

.title h2 {
    font-family: "ClashDisplay-Semibold";
    color: #ffd63f;
    font-weight: bolder;
    font-size: 40px;
}

.title-2 {
    text-align: center;
}

.title-2 h1 {
    font-family: "ClashDisplay-Bold";
    letter-spacing: 0px;
    text-transform: uppercase;
    font-size: 60px;
    line-height: 70px;  
    margin-top: 60%;
    color: rgb(149, 190, 161);
}

.highlighted-1 {
    transition: 0.4s;
    font-size: 85px;
    color:rgb(149, 190, 161);
}

.highlighted-1:hover {
    color: #0e47a0;
}


.title-2 h1:hover {
    transition: 0.4s;
    -webkit-text-stroke: 1px;
    color: #125ebe;
}

.title-2 h2 {
    font-family: "ClashDisplay-Medium";
    font-weight: bolder;
    font-size: 30px;
    color: white;
}

.underline {
    font-family: "PPNeueMontreal-Medium";
    color: rgb(230, 209, 90);
}

/* ↓↓ ===== [3] CONTACT SECTION ===== ↓↓ */
.container {
    max-width: 1200px;
    margin: 50px auto;
    /* background-color: #929292; */
    padding: 20px;
    border-radius: 10px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    
}

.radio-container,
.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    margin-left: 10%;
    margin-top: 10px;
}

.radio-item,
.checkbox-item {
    margin-right: 10px;
    margin-bottom: 10px;
    font-family: "ClashDisplay-Medium";
}

input[type="radio"],
input[type="checkbox"] {
    display: none;
}

input[type="radio"]+.other,
input[type="checkbox"]+.other {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    color: rgb(67, 51, 51);
    background-color: #795e57;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    margin-left: 20px;
}

input[type="radio"]:hover+.other,
input[type="checkbox"]:hover+.other {
    background-color: #634c45;
}

input[type="radio"]:checked+.other,
input[type="checkbox"]:checked+.other {
    background-color: #483530;
    color: #ffffff;
    transition: background-color 0.3s ease-in-out;
}

textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    resize: vertical;
}

button[type="submit"] {
    font-size: 40px;
    color: white;
    cursor: pointer;
    text-transform: uppercase;
    font-family: "ClashDisplay-Semibold";
    background: none; 
    border: none; 
    padding: 10px 18px;
    text-align: left;
    display: block; 
    margin: auto; 
    margin-top: 20px;
    transition: 0.4s;
}

button[type="submit"]:hover {
    font-size: 35px;
    color: rgb(149, 190, 161);
}

input,
textarea {
    background: none;
    outline: none;
    border: none;
    border-bottom: 1px solid #97766e;
    font-size: 17px;
    padding: 16px 16px;
    color: #97766e;
    margin-bottom: 0.4em;
    font-family: "ClashDisplay-Medium";
    margin-left: 12%;
    width: 75%;
}

input:focus-within,
textarea:focus-within {
    outline: none;
    border-color: #ffd0c4;
    border-width: 1px;
    padding-left: 30px;
    transition: 0.4s;
    font-weight: bolder;
}

.textlabel {
    color: rgb(255, 255, 255); /* Added label color */
    font-size: 20px;
    letter-spacing: 0.3px;
    margin-left: 12%; /* Adjusted left margin for consistency */
    width: 75%;
    display: block; /* Ensures each label is on a new line */
    font-family: "ClashDisplay-Semibold";
}

.form-group {
    transition: 0.4s;
    opacity: 0.8;
}

.form-group:hover {
    opacity: 1;
    padding-left: 5px;
}

.yes {
    color: rgb(250, 255, 120);
    font-size: 10px; 
}

.content_inner {
    padding: 80px;
    padding-top: 100px;
}

.content-inner2 {
    display: flex;
    justify-content: space-between;
}
  
  
.list-2 {
    list-style: none;
    font-family: "ClashDisplay-Light";
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 0.1px;
    line-height: 30px;
    color: rgb(201, 201, 201);
    
}

.list-2 a {
    text-decoration: none;
    color: rgb(201, 201, 201);
    transition: 0.4s;
}

.list-2 a:hover {
    color: rgb(230, 209, 90);
}
  
.list-title {
    font-size: 23px;
    list-style: none;
    font-family: "ClashDisplay-Medium";
    text-transform: uppercase;
    color: rgb(149, 190, 161);
    font-weight: bolder;
}

.copyright {
    display: flex;
    justify-content: space-between;
    font-family: "ClashDisplay-Medium";
    text-transform: uppercase;
    font-size: 1em;
    letter-spacing: 0.1px;
    opacity: 0.5;
    margin: 6em 0 0 0;
    color: rgb(149, 190, 161);
}

.bold {
    font-weight: bold;
    letter-spacing: 1px;
    color: rgb(255, 255, 255);
}

.hrend {
    width: 100%; /* Make the line span the entire width of the container */
    background: rgba(134, 134, 134, 0.364);
    height: 1px;
    margin-top: 10px; /* Adjust as per your design */
    margin-bottom: 10px; /* Adjust as per your design */
} 

@media only screen and (max-width: 989px) {

    /* title settings */
    .title h1 {
        letter-spacing: 0px;
        font-size: 50px;
        line-height: 40px;
    }

    .highlighted-1:hover {
        -webkit-text-fill-color: rgb(90, 158, 90);
        -webkit-text-stroke: none;
        font-size: 55px;
    }

     /* title 2 settings */
    .title-2 h1 {
        letter-spacing: 0px;
        font-size: 50px;
        line-height: 70px;
    }

    .title-2 h1:hover {
        font-size: 50px;
    }
    
    .title-2 h2 {
        font-size: 20px;
    }

    /* footersettings */
    .list-2 {
        list-style: none;
        font-family: "ClashDisplay-Light";
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.1px;
        line-height: 30px;
        color: white;
    }
}

@media only screen and (max-width: 880px) {
    /* title settings */
    .title h1 {
        letter-spacing: 0px;
        font-size: 40px;
        line-height: 40px;
    }

    .highlighted-1:hover {
        -webkit-text-fill-color: rgb(90, 158, 90);
        -webkit-text-stroke: none;
        font-size: 45px;
    }

    .title h2 {
        font-size: 20px;
    }

    /* title 2 settings */
    .title-2 h1 {
        letter-spacing: 0px;
        font-size: 35px;
        line-height: 70px;
    }

    .title-2 h1:hover {
        font-size: 35px;
    }

    .title-2 h2 {
        font-size: 20px;
        line-height: 1px;
    }

     /* footersettings */
     .list-title {
        font-size: 20px;
        list-style: none;
        font-family: "ClashDisplay-Medium";
        text-transform: uppercase;
        color: rgb(149, 190, 161);
        font-weight: bolder;
    }
    
    .list-2 {
        font-size: 0.6em;
        letter-spacing: 0.5px;
        line-height: 20px;
    }
}

@media only screen and (max-width: 730px) {
    .list-title {
        font-size: 15px;
        list-style: none;
        font-family: "ClashDisplay-Medium";
        text-transform: uppercase;
        color: rgb(149, 190, 161);
        font-weight: bolder;
    }
    
    .list-2 {
        font-size: 0.5em;
        letter-spacing: 0.5px;
        line-height: 20px;
    }
}

@media only screen and (max-width: 635px) {
    
    body {
        width: 100%;
        background: linear-gradient(rgb(255, 255, 255), rgb(200, 255, 209));
        height: 100%;
        background-image: url(/tendycutsimg/Grass6.png);
        background-size: cover; 
    }

    /* Form Settings */
    input,
    textarea {
        font-size: 14px;
    }

    .textlabel {
        color: rgb(255, 255, 255); /* Added label color */
        font-size: 15px;
        letter-spacing: 0.3px;
        margin-left: 12%; /* Adjusted left margin for consistency */
        width: 75%;
        display: block; /* Ensures each label is on a new line */
        font-family: "ClashDisplay-Semibold";
    }

    .yes {
        color: rgb(250, 255, 120);
        font-size: 7px; 
    }

    input[type="radio"]+.other,
    input[type="checkbox"]+.other {
        display: inline-block;
        padding: 10px 10px;
        border-radius: 5px;
        color: rgb(67, 51, 51);
        background-color: #795e57;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
        margin-left: 20px;
        font-size: 10px;
    }

    .radio-item,
    .checkbox-item {
        margin-right: 0px;
        margin-bottom: 10px;
        font-family: "ClashDisplay-Medium";
    }  

    button[type="submit"] {
        font-size: 15px;
    }

    button[type="submit"]:hover {
        font-size: 20px;
        color: rgb(149, 190, 161);
    }

     /* Footer Settings */
    .content_inner {
        padding: 40px;
    }

    .content-inner2 {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap to the next line */
        justify-content: space-between;
    }

    .col {
        padding: 20px;
        flex-basis: 48%; /* Adjust as needed to accommodate spacing */
    }

    .list-2 {
        font-size: 0.6em;
        line-height: 25px;
    }

    .copyright {
        font-size: 0.6em;
    }
}

@media only screen and (max-width: 600px) {
    /* title settings */
    .title h1 {
        letter-spacing: 0px;
        font-size: 30px;
        line-height: 30px;
    }

    .highlighted-1:hover {
        -webkit-text-fill-color: rgb(90, 158, 90);
        -webkit-text-stroke: none;
        font-size: 35px;
    }

    .title h2 {
        font-size: 15px;
    }

    body {
        width: 100%;
        background: linear-gradient(rgb(255, 255, 255), rgb(200, 255, 209));
        height: 100%;
        background-image: url(/tendycutsimg/Grass7.png);
        background-size: cover; 
    }

    .title-2 h1 {
        letter-spacing: 0px;
        font-size: 20px;
        line-height: 40px;
    }

    .title-2 h1:hover {
        font-size: 20px;
    }

    .title-2 h2 {
        font-size: 10px;
    }


    /* Footer Settings */
    .content_inner {
        padding: 40px;
    }

    .content-inner2 {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap to the next line */
        justify-content: space-between;
    }

    .col {
        padding: 20px;
        flex-basis: 100%; /* Adjust as needed to accommodate spacing */
    }

    .list-2 {
        font-size: 0.6em;
        line-height: 25px;
    }

    .copyright {
        font-size: 0.4em;
    }

    /* Form Settings */
    input,
    textarea {
        font-size: 12px;
    }

    .textlabel {
        color: rgb(255, 255, 255); /* Added label color */
        font-size: 13px;
        letter-spacing: 0.3px;
        margin-left: 12%; /* Adjusted left margin for consistency */
        width: 75%;
        display: block; /* Ensures each label is on a new line */
        font-family: "ClashDisplay-Semibold";
    }

    input[type="radio"]+.other,
    input[type="checkbox"]+.other {
        display: inline-block;
        padding: 10px 10px;
        border-radius: 5px;
        color: rgb(67, 51, 51);
        background-color: #795e57;
        cursor: pointer;
        transition: background-color 0.3s ease-in-out;
        margin-left: 10px;
        font-size: 10px;
    }

}


@media only screen and (max-width: 450px) {
     /* title settings */
     @keyframes slideFadeIn {
        from {
            transform: translateX(-50px); /* Initial position off the top */
            opacity: 0;
        }
        to {
            transform: translateX(0); /* Final position */
            opacity: 1;
        }
    }

     .title h1 {
        margin-top: 40px;
        letter-spacing: 0px;
        font-size: 20px;
        line-height: 25px;
    }

    .highlighted-1 {
        color: rgb(149, 190, 161);
        transition: 0.4s;
    }
    
    .highlighted-1:hover {
        font-size: 20px;
    }

    .title h2 {
        font-size: 10px;
    }
}