html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

 .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }

/*Animations*/
.fadeinleft {
    opacity:0;
    transform: translateX(200px);
    transition: all 1.3s ease-out;
}

.fadeinright{
    opacity: 0;
    transform: translateX(-200px);
    transition: all 0.8s ease-out;
}

.fadeindown{
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1.2s ease-out;
}

.fade-in{
    opacity:0;
    transition: all 1.6s ease-in;
}

.active-left,.active,.active-right,.active-down{
    opacity:1;
    transform: translateX(0);
    transform: translateY(0);
}





.rotate{

}

/* End Animations*/

h1{
    text-align: left;
}


h2,h3,h4,h5,h6{
    font-family: "Gilda Display";
}

p{
    text-align: left;
    font-family: Outfit;
}

.navbar{
    background-color: #0a1b1b15!important;
    box-shadow: none;

    padding-top: 25px;
    
}

.navbar li{
    margin: 0 15px;
}

.navbar li a{
    font-family: Barlow Condensed;
    font-weight: 400;
    color: #020202;
    font-size: 21px;
    border-bottom: 2px solid transparent;
}

.navbar li a.active{
    color: rgb(15, 15, 15)!important;
    border-bottom: 2px solid #c5a880;
}

.navbar li a:hover{
    border-bottom: 2px solid #c5a880;
    color: rgb(209, 165, 165);
    scale: 0.92;
}



  #rooms-head{
    background: url('/new/a\ \(42\).jpg')rgba(0, 0, 0, 0.6);
    background-position: 10% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    background-blend-mode: multiply;
    display: flex;
    align-items: bottom;
  }

  .navbar-2{
    background-color: #0a1b1b15!important;
    padding: 15px 0;
  }

  .navbar-2 li{
    margin: 0 15px!important;
  }


  #about-head{
    background: url('/new/a\ \(15\).jpg')rgba(0, 0, 0, 0.6);
    
    background-position: 10% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
  }


  #contact-head{
    background: url('/Photo/a\ \(32\).jpg')rgba(0, 0, 0, 0.6);
    
    background-position: 10% 20%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
  }
  .footer{
   background:url('/img/foooter.jpg')rgba(0, 0, 0, 0.6)!important;
  }
  .text-dark{
    Color: #000000!important;
  }

   
  #bottone5 {
    align-items: center;
    background-color: #224438!important;
    border: 1px solid #ffffff;
   margin-top: 10px;
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: inline-flex;
    font-family: 'Barlow', sans-serif;
    font-size: 16px;
    font-weight: 500;
    justify-content: center;
    line-height: 1.25;
    min-height: 3rem;
    padding: calc(.875rem - 1px) calc(1.5rem - 1px);
    text-decoration: none;
    transition: all 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    width: auto;
   }
   
   #bottone5:hover,
   #bottone5:focus {
    border-color: #ffffff;
    box-shadow: #ffffff 0 4px 12px;
    color: #ffffff;
   }
   
   #bottone5:hover {
    transform: translateY(-1px);
   }
   
   #bottone5:active {
    background-color: #F0F0F1;
    border-color: #ffffff;
    box-shadow: #ffffff 0 2px 4px;
    color: #ffffff;
    transform: translateY(0);
   }
  

    .typewriter h1 {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      border-right: .15em solid #ccc;
      animation: typing 4s steps(40, end), blink-caret .75s step-end infinite;
      font-family: 'Georgia', serif;
      font-size: 2.5rem;
      color: #b19c9c;
      font-weight: normal;
    }

    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }

    @keyframes blink-caret {
      from, to { border-color: transparent }
      50% { border-color: #ccc }
    }



.carousel-1{
    background: url('/new/a\ \(6\).jpg')rgba(0, 0, 0, 0.6);
    height: 85vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex!important;
    align-items: end!important;

}

.carousel-2{
    background: url('/Photo/rd.jpg')rgba(0, 0, 0, 0.6);
    height: 85vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex!important;
    align-items: end!important;
}

.carousel-3{
    background: url('/new/a\ \(10\).jpg')rgba(0, 0, 0, 0.6);
    height: 85vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex!important;
    align-items: end!important;
}

.carousel-caption{
    margin-bottom: 20vh;
}
@media (max-width: 480px) {
  .carousel-1, .carousel-2 {

    width: 60hv;
  }
  .carousel-1 {
    background-size: absolute;  
    background-position: center; 

  }

  .carousel-caption {
    bottom: 10%;
    padding: 0 10px;
    margin-bottom: 25vh !important; 
    font-size: 10px;
  }

  .carousel-caption h1 {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  .carousel-caption h3.quote {
    font-size: 0.9rem;
  }

  .typewriter {
    padding: 0 5px;
  }
}

        .section-padding {
            padding: 80px 0;
        }
        .text-center-desktop {
            text-align: center;
        }
        .top-section {
            background-color: #ffffff;
            padding: 60px 0;
            border-radius: 15px; }

        .top-section h1 {
            font-size: 3.5rem;
            font-weight: bold;
            color: #343a40;
            margin-bottom: 15px;
        }
        .top-section h5 {
            font-size: 1rem;
            color: #6c757d;
            margin-bottom: 30px;
        }
        .top-section p {
            font-size: 0.95rem;
            color: #495057;
            line-height: 1.6;
            margin-bottom: 30px;
        }
        .top-section .btn-view-more {
            background-color: transparent;
            border: 1px solid #6c757d;
            color: #6c757d;
            padding: 10px 30px;
            border-radius: 50px;
            text-transform: uppercase;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        .top-section .btn-view-more:hover {
            background-color: #f8c8e6;
            color: #ffffff;
        }
        .image-container {
            overflow: hidden;
            border-radius: 15px;  rrumbullakosura për imazhet */
        }
        .image-container img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;  
        }

        @media (min-width: 768px) {
            .top-section .col-md-4:first-child .image-container {
                margin-top: -80px; 
            }
            .top-section .col-md-4:last-child .image-container {
                margin-top: 80px; 
            }
        }

        .bottom-section {
            padding: 80px 0 40px 0; 
        }
        .feature-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 20px;
            border-right: 1px solid #e9ecef;
        }
        .feature-item:last-child {
            border-right: none; 
        }
        .feature-item i {
            font-size: 3rem;
            color: #6c757d;
            margin-bottom: 15px;
        }
        .feature-item h3 {
            font-size: 1.2rem;
            color: #495057;
            margin-bottom: 5px;
        }
        .feature-item p {
            font-size: 2.5rem;
            font-weight: bold;
            color: #343a40;
        }

        @media (max-width: 767.98px) {
            .top-section h1 {
                font-size: 2.5rem;
            }
            .feature-item {
                border-right: none; 
                border-bottom: 1px solid #e9ecef; 
                margin-bottom: 20px;
            }
            .feature-item:last-child {
                border-bottom: none;
            }
            .text-center-desktop {
                text-align: center; 
            }
        }
        .header-section {
            background-color: #10454e; 
            color: #ffffff;
            padding: 100px 20px; 
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 40vh; 
        }
        .header-section h1 {
            font-size: 2.5rem;
            font-weight: 300; 
            margin-bottom: 20px;
        }
        .header-section p {
            font-size: 0.9rem;
            max-width: 600px;
            line-height: 1.6;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.8);
        }
        .header-section .contact-info {
            font-size: 1rem;
            margin-bottom: 15px;
        }
 .header-section .btn-view-more {
            background-color: transparent;
            border: 1px solid #ffffff;
            color: #ffffff;
            padding: 10px 30px;
            border-radius: 50px; /* Buton i rrumbullakosur */
            text-transform: uppercase;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        .header-section .btn-view-more:hover {
            background-color: #ffffff;
            color: #0e493c;
        }
        
        .room-details-section {
            padding: 50px 0; 
            background-color: #ffffff;
        }
        .room-details-section .room-image-container {
            overflow: hidden;
            border-radius: 15px; 
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .room-details-section .room-image-container img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            border-radius: 15px; 
        }
        .room-details-content {
            padding: 20px;
            background-color: #e6e0e4;
        }
        .room-details-content .subtitle {
            font-size: 0.8rem;
            color: #6c757d;
            text-transform: uppercase;
            margin-bottom: 5px;
        }
        .room-details-content h2 {
            font-size: 2rem;
            font-weight: bold;
            color: #343a40;
            margin-bottom: 20px;
        }
        .room-details-content ul {
            list-style: none;
            padding: 0;
            margin-bottom: 30px;
        }
        .room-details-content ul li {
            font-size: 0.95rem;
            color: #495057;
            margin-bottom: 10px;
        }
        .room-details-content .btn-check-availability {
            background-color: #0e493c; 
            color: #ffffff;
            padding: 12px 40px;
            border-radius: 5px;
            text-transform: uppercase;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }
        .room-details-content .btn-check-availability:hover {
            background-color: #343a40; 
            color: #ffffff;
        }

        
        @media (max-width: 767.98px) {
            .header-section h1 {
                font-size: 2rem;
            }
            .room-details-section .room-image-container {
                margin-bottom: 30px; 
            }
        }
    .restaurant-section {
            display: flex;
            flex-wrap: wrap; 
            min-height: 100vh; 
            background-color: #f8f9fa; 
        }

        .content-left {
            flex: 1; 
            padding: 80px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start; 
            background-color: #ffffff; 
            
        }

        .content-left h2 {
            font-size: 2.5rem;
            font-weight: bold;
            color: #343a40;
            margin-bottom: 20px;
        }

        .content-left p {
            font-size: 0.95rem;
            color: #6c757d;
            line-height: 1.6;
            max-width: 400px; 
            margin-bottom: 30px;
        }

        .icon-list {
            display: flex;
            gap: 30px; 
            margin-bottom: 40px;
        }

        .icon-item {
            text-align: center;
            color: #6c757d;
        }

        .icon-item i {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .icon-item span {
            display: block;
            font-size: 0.8rem;
            text-transform: uppercase;
            font-weight: bold;
        }

        .btn-discover-more {
            background-color: transparent;
            border: 1px solid #0e493c;
            color: #6c757d;
            padding: 10px 30px;
            border-radius: 50px; 
            text-transform: uppercase;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .btn-discover-more:hover {
            background-color: #6c757d;
            color: #ffffff;
        }

        .carousel-right {
            flex: 2; 
            position: relative;
        }

        .carousel-item img {
            width: 100%;
            height: 100vh; 
            object-fit: cover; 
        }

        .carousel-control-prev,
        .carousel-control-next {
            width: 5%; 
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 15px;
        }

        @media (max-width: 767.98px) {
            .restaurant-section {
                flex-direction: column;
            }
            .content-left {
                padding: 40px 20px;
                align-items: center; 
                text-align: center;
            }
            .icon-list {
                justify-content: center;
            }
            .carousel-item img {
                height: 50vh; 
            }
        }
         .section-title {
            font-size: 2.5rem;
            font-weight: bold;
            color: #343a40;
            text-align: center;
            margin-bottom: 60px; 
        }

        .offer-card {
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
            overflow: hidden; 
            margin-bottom: 30px; 
            position: relative; 
        }

        .offer-card img {
            width: 100%;
            height: 250px; 
            object-fit: cover; 
            display: block;
        }

        .offer-card-body {
            padding: 25px;
        }

        .offer-card-body h3 {
            font-size: 1.5rem;
            font-weight: bold;
            color: #343a40;
            margin-bottom: 10px;
        }


        .offer-card-body .description {
            font-size: 0.9rem;
            color: #495057;
            line-height: 1.5;
            margin-bottom: 15px;
        }


        .offer-card-body .btn-buy-now {
            background-color: #1a2a4a; 
            color: #ffffff;
            padding: 10px 25px;
            border-radius: 5px;
            text-transform: uppercase;
            font-weight: bold;
            transition: background-color 0.3s ease;
            width: 100%; 
        }

        .offer-card-body .btn-buy-now:hover {
            background-color: #343a40; 
            color: #ffffff;
        }

       

        /* Përshtatje responsive */
        @media (min-width: 768px) {
            .offer-card {
                margin-bottom: 0; 
            }
        }
        .image-gallery-section {
    padding: 0;
    background-color: #ffffff;
    border-radius: 0;
}

.image-gallery-section .gallery-item {
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.image-gallery-section .gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease-in-out;
}

.image-gallery-section .gallery-item:hover img {
    transform: scale(1.05);
}

.image-gallery-section .gallery-item .overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    font-size: 1.2rem;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
    padding: 10px;
}

.image-gallery-section .gallery-item:hover .overlay-text {
    opacity: 1;
}


.welcome-image-1 {
  position: relative;
  margin-top: 110px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  right: -150px;
  z-index: 10;
}
.welcome-image-2 {
  margin-top: 600px;
  z-index: 10 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.welcome-about-text {
  margin-right: -150px;
  background-color: #f3f1f1;
  padding: 100px 200px 200px 200px;
}

@media (max-width: 768px) {
  .welcome-image-1 {
    display: none;
  }
  .welcome-image-2 {
    margin-top: 0px;
    z-index: 10 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  .welcome-text {
    margin-right: -150px;
    background-color: #f3f1f1;
    padding: 100px 20px;
  }
  .header-text {
    font-size: 70px !important;
  }
  .header-p {
    font-size: 15px;
  }
  .slash {
    display: none;
  }
  .facility-item {
    text-align: center !important;
  }
  .minus-img {
    display: none;
  }
 .welcome-home-text,
  .welcome-about-text {
    padding: 50px 20px !important;
  }



}