:root{
	--theme-color-1: #235583;
   --theme-color-2: #345B06;
   --theme-color-3: #B1D8F7;
   --theme-color-4: #F4F7FA;
   --theme-color-2-rgba: rgba(52, 91, 6, 0.2);
   --text-color: #333;
   --light-text-color: #6b6b6b;
   --white-color: #fefefe;
   --head: "Jua", sans-serif;
   --inter:  "Inter", sans-serif;
   --urbanist: "Urbanist", sans-serif;
   --bg: #f3f3f1;            
   --text: #2a2a2a;
   --muted: #6b6b6b;
}

.body{
    background-image: url('../images/paper-texture.png');
}
#sec1{
    width: 100%;
    height: 55vh;
    position: relative;
    background-image: url('../images/about-banner.png');
    background-size: cover;
    background-repeat: no-repeat;

    .bg-overlay{
        width: 50%;
        opacity: 0.9;
        height: 100%;
        position: absolute; top: 0; left: 0;
        background-image: url('../images/map-bg.png');
        z-index: 599;
    }

    .content{
        z-index: 750;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 20px;
        position: absolute; top: 0; left: 0;

    }
    .title{
        color: var(--white-color);
        font-size: 2.7rem;
        font-family: var(--head);
        text-transform: uppercase;
    }
    .text{
        font-size: 1rem;
        color: var(--white-color);
        margin-bottom: 20px;
    }
    .btn{
        color: var(--theme-color-2);
        font-size: 0.9rem;
        padding: 15px 30px;
        background-color: rgba(52, 91, 6, 0.2);
        border-radius: 12px;
        margin-bottom: 20px;

        &:hover{
            color: var(--white-color);
            background-color:  var(--theme-color-2);
        }
    }
}


#about-sec{

    padding: 50px 1px;

    .wrapper{
        padding: 0 3px 30px;
        border-radius: 15px;
    }
    .wrapper .title{
        color: var(--theme-color-2);
        font-size: 2.2rem;
        font-family: var(--head);
        text-transform: capitalize;
    }
    .wrapper .text{
        font-size: 0.95rem;
        color: var(--muted);
        margin-bottom: 20px;
    }
    .btn{
        float: right;
        color: var(--theme-color-2);
        font-size: 0.9rem;
        padding: 15px 30px;
        background-color: rgba(52, 91, 6, 0.2);
        border-radius: 12px;
        margin-bottom: 20px;

        &:hover{
            color: var(--white-color);
            background-color:  var(--theme-color-2);
        }
    }

    .img-wrapper{
        width: 100%;
        padding-bottom: 20px;
    }
}.img-wrapper img{
    object-fit: contain;
    object-position: center;
    border-radius: 15px;
}


#contact-sec{
    background-image: url('../images/eating-in-an-rv.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 50px 2px;

    .contact-card {
        margin-bottom: 40px;
        padding: 40px 10px 20px;
        border-radius: 10px;
        background-color: var(--white-color);

    }
    .main-title{
        font-size: 1.8rem;
        color: var(--theme-color-2);
        text-transform: capitalize;
        line-height: 3rem;
        font-family: var(--head);
    }

    .contact-info {
        height: fit-content;
    }
    .contact-info .title {
        font-size: 1.5rem;
        color: var(--theme-color-2);
        text-transform: capitalize;
        line-height: 3rem;
        font-family: var(--head);
    }
    .contact-info a.icon {
        color: var(--muted);
        text-decoration: none;
        text-transform: capitalize;
        font-size: 1rem;
        display: flex;
        align-items: center;
        margin: 0 !important;
        padding: 0 !important;

        &:hover{
            color: var(--theme-color-2);
        }
    }
    .contact-info a.icon span {
        font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 48;
        font-size: 1.15rem;
        color: var(--theme-color-2);
        margin-right: 10px;
    }

    /* ---- Bottom Section ---- */
    .buttom-section .content {
        padding: 30px 0 10px;
    }
    .buttom-section .content .title {
        font-size: 1.5rem;
        color: var(--theme-color-2);
        text-transform: capitalize;
        line-height: 3rem;
        font-family: var(--head);
    }
    .buttom-section .content .text {
        font-size: 1rem;
        color: var(--muted);
    }



    .form-wrapper{
        background-color: var(--white-color);
        padding: 20px 10px 10px;
        border-radius: 10px;
    }
    .form-wrapper .head .title{
        font-size: 1.6rem;
        color: var(--theme-color-2);
        text-transform: capitalize;
        line-height: 3rem;
        font-family: var(--head);
        padding-top: 20px;
    }
    .form-wrapper .head .text{
        color: 1rem;
    } 
    .form .field-wrapper{
        width: 100%;
    }
    .form .form-label{
        font-size: 0.95rem;
        color: var(--muted);
        position: relative;
    }
    .form .form-label .required-icon{
        font-size: 0.5rem;
        color: tomato;
        position: absolute;
        top: 3px;
        right: -10px;
    }
    .form .input-field, .form textarea{
        border: 1px solid rgba(52, 91, 6, 0.3);

        &:focus{
            border-color: var(--theme-color-2);
        }
    }
    .btn{
        background-color: rgba(52, 91, 6, 0.2);
        color: var(--theme-color-2);
        padding: 15px;

        &:hover{
            color: var(--white-color);
            background-color: var(--theme-color-2);
        }
    }
}


#section-4{
    background-image: url('../images/map-bg.png');
    background-repeat: repeat;
    border-radius: 20px !important;
    padding: 50px 0;
    
    .sec-header{
        padding: 0 20px;
    }.sec-header .wrapper{
        width: 100%;
        height: 100%;
        padding: 30px 20px 10px;
        border-radius: 20px;
        background-color: var(--theme-color-2);
        color: var(--white-color);
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }.sec-header .head{
        font-family: var(--head);
        font-size: 1.5rem;
        padding: 15px 20px;
    }.sec-header img{
        width: 80%;
        margin: 0 auto;
        object-fit: cover;
        object-position: center;
    }.sec-header .text{
        padding: 0;
        font-size: 1rem;
        color: var(--white-color);
    }

    .btn{
        background-color: var(--theme-color-3);
        border-radius: 20px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--inter);
        color: var(--theme-color-1);
        font-weight: 600;
        font-size: 1.1rem;

        &:focus{
            opacity: 0.8;
        }

    }.btn .material-symbols-outlined{
        font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
        padding-right: 10px;
    }


    .rebate-deals{
        padding: 0 25px !important;
    }.rebate-deals .col{
        padding: 20px 5px 0;
    }.rebate-deals .deal-card{
        width: 100%;
        height: 50vh;
        padding: 40px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 20px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        object-fit: cover;
        object-position: center;

        &:hover{
            background-color: rgba(0, 0, 0, 0.3);
        }
    }.rebate-deals .fly-buy .deal-card{
        background-image: url('../images/fly-rv.jpeg');
    }.rebate-deals .test-buy .deal-card{
        background-image: url('../images/frdu-hero.jpg');
    }.rebate-deals .ship-buy .deal-card{
        background-image: url('../images/ship-rv.jpeg');
    }.rebate-deals .deal-card .bg-overlay{
        background-color: rgba(52, 91, 6, 0.7);
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 20px;
    }.deal-card .wrapper{
        text-align: center;
        z-index: 799;
        color: var(--theme-color-4);
    }.deal-card .head{
        font-family: var(--head);
        font-size: 1.6rem;
        margin-bottom: 20px;
    }.deal-card .text{
        font-size: 1rem;
    }.deal-card .sec-link-btn{
        margin-top: 20px;
        padding: 0 2px;
        text-align: center;
        font-family: var(--inter);
        border-bottom: 1px solid var(--theme-color-4);
        border-radius: 0;
        &:hover{
           border-color: var(--theme-color-4);
        }
    }
}


@media (min-width: 1024px) {
    #sec1{
        height: 60vh;

    
    .content{
        padding-left: 100px;
        width: 50%;
    }
    .title{
        color: var(--text-color);
    }
    .text{
        color: var(--text-color);
        width: 90%;
    }
    }

    #about-sec{
        padding: 40px 200px 50px;
    }


    #contact-sec{
        padding: 100px 200px 100px;

        .form-wrapper{
            margin-left: 20px;
            padding: 20px 30px;
        }
    }

    #section-4{
        padding: 100px 150px;

        .rebate-deals .col{
            padding: 0 5px 10px;
            height: fit-content;
            overflow: hidden;
        }.rebate-deals .deal-card{
            padding: 100px 40px;
            height: fit-content;
        }
    }
}