/* styles.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
    font-family: 'Onest';
    src: url(/assets/Onest-Thin.ttf) format('ttf');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Onest';
    src: url(/assets/Onest-ExtraLight.ttf) format('ttf');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Onest';
    src: url(/assets/Onest-Light.ttf) format('ttf');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Onest';
    src: url(/assets/Onest-Regular.ttf) format('ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Onest';
    src: url(/assets/Onest-Medium.ttf) format('ttf');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Onest';
    src: url(/assets/Onest-SemiBold.ttf) format('ttf');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Onest';
    src: url(/assets/Onest-Bold.ttf) format('ttf');
    font-weight: 700;
    font-style: normal;
} 
@font-face {
    font-family: 'Onest';
    src: url(/assets/Onest-ExtraBold.ttf) format('ttf');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Onest';
    src: url(/assets/Onest-Black.ttf) format('ttf');
    font-weight: 900;
    font-style: normal;
}

/* Optional: Set the default font for the body */
body {
    font-family: 'Onest', sans-serif; /* Set Onest as the default font */
}
.header-gradient {
    background: linear-gradient(to bottom, #151517, transparent);
    height: 250px; /* Adjust height as needed */
    width: 100%;
    position: absolute; 
}
 

.overlay-container::before {
    content: "";
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 72%;
    background: linear-gradient(to bottom, #151517, #0B0A0B);
}

.overlay-container-two::before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #0B0A0B, #000000);
}
.sticky-bg {
    position: sticky;
        top: 0;
        z-index: 10; /* Ensure it stays above other content */
        background-color: rgba(11, 10, 11, 0.9); /* Optional: add a background color for visibility */
}
.overlay-container-sky {
    transition: background-color 0.3s;
    /* content: "";
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 500px;
    background-image: url(/images/sky-bg.png); */
}
@media (min-width:1024px) and (max-width:4000px) {
.topHeading{
    margin-left: 0 !important ;
}
.topHeading h2{
	text-align: left !important;
}
.bottomHeading {
  margin-right: 0 !important ;
}
}
@media (min-width:320px) and (max-width:992px) {
    .header-gradient { 
        height: 125px;  
    }
}
.overlay-container-three::before {
    content: "";
    position: absolute;
    top: -22%;
    left: 0;
    width: 100%;
    height: 388px;
    background: linear-gradient(to bottom, #111111c2, #000000fc, #000000);
    box-shadow: 0 -5px 24px -5px #101010;
}
@media (min-width:320px) and (max-width:568px) {
    .download-bg { 
        height: 450px !important;  
    }
    .booking-bg{
        height: 250px !important;  
    }
    .download-text{
        right: 0px !important;
        width: 100% !important;
        left: 0;
        padding: 0 15px !important;
    }
    h2{
        font-size: 24px !important;
        line-height: 35px !important;
    }
    .topBanner h2{
        font-size: 20px !important;
        line-height: 28px !important;
    }
    .service-img{
        height: 106px;
        margin: 0 !important;
    }
}