/* Font Imports */
@font-face {
    font-family: 'Photograph Signature';
    src: url(assets/fonts/photograph_signature-webfont.woff2) format('woff2'),
         url(assets/fonts/photograph_signature-webfont.woff) format('woff');
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "Futura", sans-serif;
    src: url(assets/fonts/futura-condensedlight-webfont.woff2) format('woff2'),
         url(assets/fonts/futura-condensedlight-webfont.woff) format('woff');
    font-style: normal;
    font-weight: 300;
}

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
html, body {
    font-family: "Futura", sans-serif;
    line-height: 1.5;
}

.main{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 70px;
}

.page-container{
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-text{
    width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-text h1{
    background: linear-gradient(180deg, hsl(151, 75%, 54%) 19%, #4F94D9 82%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    font-weight: bold;
    font-size: 68px;
    line-height: 115%;
    margin-bottom: 30px;
    margin-top: 100px;
}

.header-text p{
    font-weight: 400;
    color:#000000;
    font-size: 20px;
    text-align: center;
    font-style: italic;
    width: 85%;
}

.vision-mision-container{
    display: flex;
    flex-direction: row;
    margin-top: 100px;
}
.vision, .mision{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px 30px 20px;
}
.vision{
    border-right: 2px solid black;
}
.vision h1, .mision h1{
    font-size: 40px;
    margin-bottom: 10px;
}
.vision p, .mision p{
    font-size: 20px;
    text-align: center;
}

.image-container{
    position: relative;
    width: 600px ;
    height: 600px ;
}

.image-container img{
    object-fit: cover;
    width: 100% ;
    height: 100% ;
    z-index: 1;
    border-radius: 4px;
}
.rooms-container{
    padding-top: 100px;
}
.rooms-container .rectangle{
    top: -5%; /* Position relative to parent height */
    left: -5%; /* Shift right by percentage */
    width: 95%; /* Responsive width */
    height: 550px;
    border: 3px solid #3EE090;
    margin: 0px;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    border-radius: 4px;
}

.offers{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.offers h2{
    background:#4E544D;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    font-weight: bold;
    font-size: 100px;
    line-height: 115%;
    margin-bottom: 30px;
    margin-top: 200px;   
}

.offers h1{
    background:#45c8b4;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    font-weight: bold;
    font-size: 68px;
    line-height: 115%;
    margin-bottom: 30px;
    margin-top: 100px; 
}

.rooms-text{
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 70px;
    max-width: 500px;
}


.rooms-text h1{
    font-size: 45px;
}

.rooms-text p{
    font-weight: lighter;
    color:#000000;
    font-size: 19px;
    font-style: italic;
}

/*Cottage*/
.cottage-container{
    padding-top: 100px;
}
.cottage-text{
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 70px;
    max-width: 500px;
}


.cottage-text h1{
    font-size: 48px;
}

.cottage-text p{
    font-weight: lighter;
    color:#000000;
    font-size: 19px;
    font-style: italic;
}

.cottage-container .rectangle{
    bottom: -5%; /* Position relative to parent height */
    right: -5%; /* Shift right by percentage */
    width: 95%; /* Responsive width */
    height: 550px;
    border: 3px solid #3EE090;
    margin: 0px;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    border-radius: 4px;
}


/*Pavillion*/
.pavillion-container{
    padding-top: 100px;
}
.pavillion-text{
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 70px;
    max-width: 500px;
}


.pavillion-text h1{
    font-size: 48px;
}

.pavillion-text p{
    font-weight: lighter;
    color:#000000;
    font-size: 19px;
    font-style: italic;
}

.pavillion-container .rectangle{
    top: -5%; /* Position relative to parent height */
    right: -5%; /* Shift right by percentage */
    width: 95%; /* Responsive width */
    height: 550px;
    border: 3px solid #3EE090;
    margin: 0px;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    border-radius: 4px;
}

/*Tour*/
.tour-container{
    padding-top: 100px;
    padding-bottom: 100px;
}
.tour-text{
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 70px;
    max-width: 500px;
}


.tour-text h1{
    font-size: 48px;
}

.tour-text p{
    font-weight: lighter;
    color:#000000;
    font-size: 19px;
    font-style: italic;
}

.tour-container .rectangle{
    bottom: -5%; /* Position relative to parent height */
    left: -5%; /* Shift right by percentage */
    width: 95%; /* Responsive width */
    height: 550px;
    border: 3px solid #3EE090;
    margin: 0px;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    border-radius: 4px;
}

/* BUTTONS */
/* Button 1 */
.button-one {
    text-decoration: none;
    color: #4E544D;
    border: 1px solid #4E544D;
    padding: 8px 40px;
    margin: 22px 60px 20px 0px;
    width: 178px;
    position: relative; /* Added for pseudo-element positioning */
    transition: 0.3s;
}

/* Hover Effect for Book Button */
.button-one:hover {
    color: #4E544D;
}

/* Pseudo-element for Book Button */
.button-one:before {
    content: ""; /* Creates an em   pty pseudo-element (no text) */
    position: absolute; /* Position it absolutely inside the button */
    top: 0; /* Position it at the top edge of the button */
    left: 0; /* Position it at the left edge of the button */
    width: 0%; /* Initially, the pseudo-element has no width, so it's invisible */
    height: 100%; /* The pseudo-element will cover the full height of the button */
    background: #71c9ff; /* The initial background color of the pseudo-element */
    transition: width 0.5s ease, background 0.5s ease; /* Smooth transition for width change and background color change */
    z-index: -1; /* Ensures the pseudo-element stays behind the text (so text is visible) */
}

/* Hover Effect for the Book Button's Pseudo-element */
.button-one:hover:before {
    width: 100%; /* On hover, expand the pseudo-element to cover the full width of the button */
    background: #f8f8f8; /* Change the background color to match the text */
}

/* Button 2*/
.button-two {
    text-decoration: none;
    color: #4E544D;
    border: 1px solid #4E544D;
    padding: 8px 40px;
    margin: 22px 0px 20px 250px;
    width: 178px;
    position: relative; /* Added for pseudo-element positioning */
    transition: 0.3s;
}

/* Hover Effect for Book Button */
.button-two:hover {
    color: #4E544D;
}

/* Pseudo-element for Book Button */
.button-two:before {
    content: ""; /* Creates an empty pseudo-element (no text) */
    position: absolute; /* Position it absolutely inside the button */
    top: 0; /* Position it at the top edge of the button */
    left: 0; /* Position it at the left edge of the button */
    width: 0%; /* Initially, the pseudo-element has no width, so it's invisible */
    height: 100%; /* The pseudo-element will cover the full height of the button */
    background: #71c9ff; /* The initial background color of the pseudo-element */
    transition: width 0.5s ease, background 0.5s ease; /* Smooth transition for width change and background color change */
    z-index: -1; /* Ensures the pseudo-element stays behind the text (so text is visible) */
}

/* Hover Effect for the Book Button's Pseudo-element */
.button-two:hover:before {
    width: 100%; /* On hover, expand the pseudo-element to cover the full width of the button */
    background: #f8f8f8; /* Change the background color to match the text */
}
/* Responsive Design */
@media screen and (max-width: 1024px) {
    .header-text{
        width: auto;
    }
    .page-container{
        max-width: 1024px;
    }
    .header-text p{
        font-size: 18px;
    }
    .vision-mision-container {
        max-width: 1024px;
    }
    .image-container {
        width: 500px;
        height: 500px;
    }
    .rooms-text {
        padding-left: 50px;
        max-width: 450px;
    }
    .rectangle {
        height: 500px !important;
    }
    .cottage-text {
        text-align: right;
        display: flex
    ;
        flex-direction: column;
        justify-content: center;
        padding-right: 50px;
        max-width: 450px;
    }
}
@media (max-width: 768px) {
    .header-text{
        width: auto;
    }
    .header-text h1{
        font-size: 58px;
    }
    .header-text p{
        font-size: 18px;
    }
    .rooms-text,
    .cottage-text,
    .pavillion-text,
    .tour-text{
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-left: 0px;
        padding-right: 0px;
        max-width: 90vw;
    }
    .button-one {
        margin: 20px 0px 20px 0px;
    }
    .button-two {
        margin: 22px 0px 20px 0px;
    }
    .image-container {
        width: 100vw;
        height: 50vh;
    }

    .rectangle {
        display: none;
    }

    .flex-layout-one,
    .flex-layout-two  {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        margin-top: 10px !important;
        text-align: left;
    }

    .room-book-one,
    .room-book-two {
        margin: 15px 0;
    }

}

  @media (max-width: 480px) {
    .header-text{
        width: auto;
    }
    .header-text h1{
        font-size: 35px;
    }
    .header-text p{
        font-size: 14px;
    }
    .vision h1, .mision h1 {
        font-size: 30px;
    }
    .vision p, .mision p {
        font-size: 14px;
    }
    .offers h2 {
        font-size: 60px;
        margin-bottom: 25px;
        margin-top: 160px;
    }
    .rooms-text,
    .cottage-text,
    .pavillion-text,
    .tour-text{
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-left: 0px;
        padding-right: 0px;
        max-width: 90vw;
    }
    .rooms-text h1,
    .cottage-text h1,
    .pavillion-text h1,
    .tour-text h1 {
        font-size: 35px;
    }
    .rooms-text p,
    .cottage-text p,
    .pavillion-text p,
    .tour-text p {
        font-size: 14px;
    }
    .button-one {
        margin: 20px 0px 20px 0px;
    }
    .button-two {
        margin: 22px 0px 20px 0px;
    }
}
@media screen and (max-width:375px){
    .header-text h1{
        font-size: 30px;
    }
    .header-text p{
        font-size: 12px;
    }
    .vision h1, .mision h1 {
        font-size: 25px;
    }
    .vision p, .mision p {
        font-size: 12px;
    }
    .offers h2 {
        font-size: 50px;
        margin-bottom: 20px;
        margin-top: 150px;
    }
}
@media screen and (max-width:320px){
    .header-text h1{
        font-size: 25px;
    }
    .header-text p{
        font-size: 12px;
    }
    .vision h1, .mision h1 {
        font-size: 20px;
    }
    .vision p, .mision p {
        font-size: 11px;
    }
    .offers h2 {
        font-size: 40px;
        margin-bottom: 20px;
        margin-top: 150px;
    }
}