: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/eating-in-an-rv.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;

    .bg-overlay{
        width: 50%;
        opacity: 1;
        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: 3.1rem;
        font-family: var(--head);
        text-transform: capitalize;
        font-weight: 900;
    }
}


.faq-questions{
			margin: 70px 0;
			.custom-input {
				border-radius: 12px;
				padding: 12px 16px;
				border: 1px solid #ccc;
				transition: border-color 0.3s, box-shadow 0.3s;
				background: #fff;
				box-shadow: 0 2px 4px rgba(0,0,0,0.05);
			}

			.custom-input:focus {
				border-color: #0d6efd;
				box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.2);
				outline: none;
			}

			.custom-input:hover {
				border-color: #0d6efd;
			}

			.accordion-button {
				border-radius: 8px !important;
				font-weight: 500;
			}

			.accordion-body {
				font-size: 15px;
				color: #333;
				background: #fff;
				border-radius: 0 0 8px 8px;
				padding: 1rem;
			}

			.accordion-item {
				border: none;
				box-shadow: 0 2px 8px rgba(0,0,0,0.05);
				border-radius: 8px;
				background: #fff;
			}
		}

		#form-response,
		#form-response * {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
		}



@media (min-width: 1024px) {
    #sec1{
        height: 60vh;
        background-size: 60% 100%;
        
        .content{
            padding-left: 100px;
            width: 50%;
        }
        .title{
            color: var(--text-color);
            width: 80%;
        }
    }
}