: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/majestic-field.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;
    }
}


#terms{
    padding: 0 10px;
    /* background-image: url('../images/cruise-with-confidence-blue.jpg'); */
    
    .content-wrapper{
        margin:0 0 40px;
    }
    .content-wrapper .image{
        padding: 20px 0 0;
        margin: 0;
    }
    .content-wrapper .image .img{
        width: 100%;
        border-radius: 15px;
        height: 40vh;
    }

    .content{
        padding: 0;
        margin: 0;
    }
    .content .title{
        color: var(--theme-color-2);
        font-size: 2.8rem;
        font-family: var(--head);
        text-transform: capitalize;
        margin-bottom: 20px;
    }
    .content .sub-title{
        color: var(--muted);
        font-size: 1rem;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
    .content .text{
        color: var(--muted);
        font-size: 0.95rem;
        text-transform: capitalize;
        margin-bottom: 20px;
    }
}



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

    #terms{
        padding: 50px 200px;

        .content-wrapper .image{
            padding: 60px 20px 0;
            margin: 0;
        }
        .content-wrapper .image .img{
            width: 100%;
            
            object-fit: cover;
            object-position: center;
        }

        .content{
            padding: 0;
            margin: 0;
        }
        .content .title{
            color: var(--theme-color-2);
            font-size: 2.8rem;
            font-family: var(--head);
            text-transform: capitalize;
            margin-bottom: 20px;
        }
        .content .sub-title{
            color: var(--muted);
            font-size: 1rem;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        .content .text{
            color: var(--muted);
            font-size: 0.95rem;
            text-transform: capitalize;
            margin-bottom: 20px;
        }
    }
}