header {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 1;

    .main-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        img {
            width: 200px;
        }
    }
    .menu-icon{
        display: none;
    }
    .primary-menu {
        display: flex;
        align-items: center;
        gap: 30px;

        nav {
            ul {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            li a {
                padding: 10px 10px;
                color: #fff;
                font-size: 18px;
                position: relative;
                display: inline-block;
                transition: all .2s linear;
            }


            li a::before{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0%;
                height: 2px;
                background: #fff;
                transition: all .2s linear;

            }

            li a:hover::before{
                width: 100%;
            }
        }
    }
}

.hero-section {
    padding: 500px 0px 100px;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)), url(../uploads/banner/hero-img.jpg);
    background-position: center;
    background-size: cover;
    color: #fff;
    position: relative;

    .banner-title {
        font-size: 100px;
    }

    .hero-content {
        .box {
            display: flex;
            gap: 50px;
            align-items: center;
        }

        p {
            margin-top: 40px;
            width: 40%;
        }
    }
    .social-media{
        position: absolute;
        top: 50%;
        right: 30px;

        ul{
            display: flex;
            flex-direction: column;
            gap: 10px;
            li a{
                font-size: 24px;
                color: #fff;
            }
        }
    }

    .social-media::after{
        content: '';
        height: 85px;
        width: 2px;
        background: #fff;
        position: absolute;
        top: -98px;
        right: 50%;
    }
    .social-media::before{
        content: '';
        height: 85px;
        width: 2px;
        background: #fff;
        position: absolute;
        bottom: -98px;
        right: 50%;
    }
}

.premium-services {
    background: linear-gradient(rgba(240, 248, 255, 0.911), aliceblue), url(../uploads/banner/service-banner.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: aliceblue;

    h2{
        text-align: center;
    }
    .main-services {
        margin-top: 50px;
    }

    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;

        img {
            text-align: center;
            width: 120px;
        }

        a {
            color: #000;
        }
    }
}

.rooms-section {
    h3 {
        text-align: center;
    }

    .main-room {
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        grid-gap: 20px;
        align-items: stretch;

        .img-box {
            display: flex;
            overflow: hidden;
            img{
                transform: scale(1);
                transition: transform .3s ease-in;
            }

        }

        .item:hover img{
            transform: scale(1.1);
        }

        .item-content-box {
            padding: 20px;
            background-color: aliceblue;

            ul {
                margin-top: 20px;
            }

            ul li {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px 0px;
            }

            .border {
                border-top: 1px solid #000;
                border-bottom: 1px solid #000;
            }

        }

    }

    .scondary-btn {
        text-align: center;
        margin-top: 40px;
    }
}

.about-section {
    .main-about {
        display: flex;
        gap: 40px;

        .about-img {
            width: 50%;

            img {
                border-radius: 10px;
                box-shadow: 0px 3px 12px 1px #cecece;
            }
        }

        .about-content {
            width: 50%;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
    }
}

.cta-section {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url(../uploads/banner/cta-banner.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    text-align: center;

    h3 {
        font-size: 80px;
    }

    .primary-btn {
        margin-top: 40px;
    }
}


.testimonials {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)), url(../uploads/banner/testimonial-banner.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;

    h3 {
        text-align: center;
        color: #fff;
    }

    .main-testimonials {
        margin-top: 40px;
    }

    .item {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        gap: 15px;

        img {
            width: 100px;
        }

        .author-name {
            font-size: 22px;
            font-weight: 600;
        }
    }

    .primary-btn {
        text-align: center;
        margin-top: 40px;
    }
}

footer {
    background-color: #1f1f1f;
    background-repeat: no-repeat;

    .footer-main {
        padding: 50px 0 30px;
        display: flex;
        gap: 20px;
        justify-content: space-around;
        color: #fff;
        flex-wrap: wrap
    }

    a {
        color: #d6d4d4
    }

    ul {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 10px
    }

    .contact-link {
        li a {
            display: flex;
            align-items: center;
            gap: 10px
        }
    }

    .social-icon {
        ul {
            display: flex;
            flex-direction: row;
            font-size: 22px;
            gap: 20px
        }

        img {
            width: 32px
        }
    }

    .copy-right {
        border-top: 1px solid #d1d1d171;
        padding: 20px 0;
        text-align: center;
        color: #fff;
        font-size: 12px;

        img {
            width: 100px;
            margin-top: 10px
        }
    }
}

/* ========== inner pages ======== */


.attraction-page{
    .main-attraction{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
        grid-gap: 20px;
        align-items: stretch;
    }

    .item{
        position: relative;
        cursor: pointer;
        .img-box{
            display: flex;
            overflow: hidden;
            img{
                transform: scale(1);
                transition: all .2s linear;
            }
        }
        .content-box{
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            color: #fff;
            padding: 10px 20px;
            background-color: #0000007e;
            font-size: 20px;
        }
    }
    .item:hover img{
        transform: scale(1.1);
    }

}

.gallery {
    h2{
        text-align: center;
    }

    .gallery-items {
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-gap: 20px;
        align-items: stretch;
    }

    .gallery-img {
        overflow: hidden;
        display: flex;
        border-radius: 10px;

        img {
            transition: all .2s ease-in-out;
        }
    }

    .gallery-img:hover img {
        transform: scale(1.1);
    }

    .gallery-btn {
        margin-top: 40px;
        text-align: center;
    }
}

.room-page{
    .room-details{
        .main-room{
            display: flex;
            justify-content: space-between;
            gap: 40px;
        }
        .img-box{
            width: 50%;
            display: flex;
            img{
                border-radius: 20px;
                box-shadow: 0px 0px 12px #2222228a;
            }
        }
        .content-box{
            width: 50%;
            display: flex;
            flex-direction: column;
            gap: 20px;
            ul{
                display: flex;
                flex-direction: column;
                gap: 15px;
            }
            ul li{
                display: flex;
                align-items: center;
                gap: 15px;
            }
        }
    }
    .room-details:nth-child(even){
        background-color: #eeb569;
        .main-room{
            flex-direction: row-reverse;
        }
    }
}

.contact-page{
    .contact {
        .container {
          display: flex;
          justify-content: space-between;
          gap: 100px;
          align-items: center;
        }
      
        .info-title{
            display: block;
            margin-bottom: 5px;
            font-size: 20px;
            font-weight: 600;
        }
        .info-box{
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .info-icon{
            background-color: #eeb569;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .info-content{
            a{
                font-size: 18px;
                color: #000;
            }
        }
        .contact-info{
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .contact-content {
          width: 50%;
          display: flex;
          flex-direction: column;
          gap: 30px;
      
          h4 {
            margin-bottom: 30px;
          }
        }
      
        .contact-form {
          width: 50%;
          padding: 50px;
          background: #f8f5f0;
          position: relative;
      
          h4 {
            margin-top: 15px;
          }
        }
      
        .contact-block {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          margin-bottom: 20px;
        }
    
    
        .contact-block-content {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
      }
      .map{
        display: flex;
        iframe{
            width: 100%;
            height: 300px;
        }
      }
      form {
        label {
          display: block;
          font-size: 18px;
          margin: 15px 0px 8px;
    
        }
    
        input {
          width: 100%;
          padding: 10px;
        }
    
        textarea {
          width: 100%;
        }
    
        .submit-btn {
          margin-top: 20px;
    
          input {
            width: 170px;
            padding: 15px;
            background-color: #000;
            color: #fff;
            font-size: 18px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
            cursor: pointer;
          }
        }
    
        .form-mark {
          color: var(--primary-color);
        }
      }
}

.book-page {
    .book-form {
        width: 70%;
        margin: 0px auto;
    }
    form{
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        input{
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #fff;
        }
        .box{
            display: flex;
            gap: 20px;
        }
        textarea{
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .submit{
            width: 170px;
            background-color: #000000;
            font-size: 16px;
            cursor: pointer;
            color: #fff;
        }
        select{
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        label{
            display: block;
            margin-bottom: 10px;
        }
    }
}

.suspend-sec {
  position: fixed;
  top: 175px;
  z-index: 999;
  background: #fff;
  width: 100%;
  padding: 20px 30px;
  text-align:center;
}

.content-sec-suspend h2{ color:red; font-size:25px;}
.content-sec-suspend p{ color:#000;}
.logo-sec img{ width:16%;}