@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Allura&family=Amethysta&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Gotu&family=Great+Vibes&family=Inconsolata:wght@200..900&family=Jost:ital,wght@0,100..900;1,100..900&family=Kalnia:wght@100..700&family=Martel:wght@200;300;400;600;700;800;900&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Pridi:wght@200;300;400;500;600;700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
:root {
    /* Background Color */
    --primary-color: #212122b9;
    --secondary-color: #a3a190;
    --bg-color: #f4f4f4;
    --bg-white: #fff;
    --bg-black: #000;
    --main-color: #c4a676;
	--main-font: 'Playfair', serif;
	--secondary-font: 'Jost', sans-serif;
    /* Text Style */
    --primary-font: 'Poppins', sans-serif;
    --secondary-font: 'Oswald', sans-serif;
    --tertiary-font: 'Cinzel', serif;
    --fourth: 'Cormorant Garamond', serif;
    --five: 'Outfit', sans-serif;
    --six: 'Satisfy', cursive;
    --seven: "Playfair Display", serif;
    --eight:"Jost", sans-serif;
    --primary-text: #212122b9;
    --secondary-text: #201f1f;
    --text-white: #fff;
    --text-black: rgb(79, 79, 79);
    --text-gray: #e4e4e4;
}

h1 {
    font-size: 2.75rem;
    line-height: 4.25rem;
    font-weight: 400;
    color: var(--text-white);
    margin-bottom: 1.25rem;
    text-transform:capitalize;
    font-family: "Forum", serif;
}
h2 {
    font-size: 2.2rem;
    font-weight: 400;
    color: var( --primary-text);
    text-transform: capitalize;
    font-family:"Forum", serif;
    color: rgb(39, 39, 39);
}
h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #272535;
    font-family: var(--secondary-font);
}

h3 span {
    color: var(--secondary-text);
}
h4{
    color: #625859;
    font-size: 20px;
}

h5 {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--secondary-text);
    margin-bottom: .9375rem;
    margin-top: .9375rem;
    font-weight: 600;
    font-family: var(--secondary-font);
}

h6 {
    color: var(--text-white);
    font-weight: 500;
    font-family: var(--secondary-font);
}

p{
    font-size: 17px;
}

  section {
    padding: 100px 0;
    position: relative;
}
.imgg-logoo img {
  width: 140px !important;
}
a{
  text-decoration: none !important;
}

::selection {
  color: #ffffff;
  background: #74685E;
}
.navbar .btn-secondary{
  background-color: transparent !important;
  border: none;
  color: #fff;
  font-size: 1.1em;
  padding: 0.5em 1em;
}
.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url('../img/icons8-grip-lines-64\ \(2\).png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
  }
  
.navbar-toggler{
border: none;
  }

.navbar-brand img {
  width: 120px;
  }
.navbar .nav-item a{
    margin: 0 25px;
}
.navbar-nav {
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  }

.navbar .navbar-nav .nav-link {
  color: #fff;
  font-size: 1.1em;
  padding: 0.5em 1em;
}

a.nav-link.active{
  color: #D5B155 !important;
}

.navbar{
  background-color: #090b0e !important;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
    pointer-events: none;
}

.dropdown-menu{
  padding: 20px 10px;
  background-color: #0a0c0f;
  border: 1px solid #d5b1557c;
  padding-right: 0px !important;
}
.dropdown-menu .dropdown-item:hover{
  background-color: rgba(255, 255, 255, 0.863) !important;
  margin-right: 0px !important;
}
.dropdown-item{
  color: #ffffff;
  margin-bottom: 10px !important;
  text-align: center !important;
}

.btn2 {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    background-color: #D3BC78;
    color: #181818;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
  }
  
  .btn2:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    transform: skewX(-30deg);
    transition: left 0.3s ease-in-out;
  }
  
  .btn2:hover {
    transform: scale(1.1);
  }
  
  .btn2:hover:before {
    left: 100%;
  }

.banner_wrapper {
    height:80vh;
}

.banner_wrapper .swiper {
    width: 100%;
    height: 100%;
}

.banner_wrapper .swiper-slide {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.banner_wrapper .swiper-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0.5;
    z-index: 0;
}

.banner_wrapper .swiper-slide::before {
    background: #272535; 
}

.banner_wrapper .swiper-pagination-bullets .swiper-pagination-bullet {
    width: .8375rem;
    height: .8375rem;
    margin-bottom: 20px;
    background-color: #D5B155;
    border: .0625rem solid #D5B155;
}

.banner_wrapper .swiper .slide-caption {
    height: 100%;
    position: relative;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner_wrapper .swiper .slide-caption p {
    max-width: 37.5rem;
    margin: 0 auto;
    color: var(--text-white);
}

.banner_wrapper .swiper-slide h6{
    font-size: 30px;
    font-weight: 400;
    color: var( --primary-text);
    margin-bottom: 0.25rem;
    text-transform: capitalize;
    font-family:"Forum", serif;
    color: white;
}

.banner_wrapper .swiper-slide h5{
    font-size:28px;
    letter-spacing: 7px;
    color: white !important;
    font-weight: 500;
    font-family: "Playfair Display", serif;
    margin: 60px 0;
}

.banner_wrapper .swiper-slide h1{
    font-size:100px;
    color: white;
    letter-spacing: 6px;
    text-shadow: #201f1f 2px 2px;
    font-weight: 500;
    font-family: 'Jost', sans-serif;
    margin: 30px 0;     
}

.swiper-pagination .swiper-pagination-bullet{
    color: #CDA45E !important;
    background-color: #CDA45E;
}

footer{
    background-color: #090B0E;
     padding-top: 60px;
     padding-bottom: 0px;
     padding-left: 20px;
     padding-right: 20px;
   }

   a.footer-link{
     color: white;
     font-weight: 300;
   }

   .footer-link:hover{
     color:  #D5B155;
   }
footer ul li a{
    color: white;
    font-weight: 300;
}
footer ul li:hover a{
    color:  #D5B155;
}
   .payment{
     display: flex;
   }

   .socials{
     display: flex;
     color: white;
   }

   .footer-links{
     display: flex;
     font-family: 'Courier New', Courier, monospace;
     font-size: 18px;
   }

   .footer-title{
       font-family: 'Courier New', Courier, monospace;
       color: white;
   }

   .socials a{
     text-decoration: none !important;
     color: white;
   }

   .socials a:hover h4 {
     color:  #D5B155;
   }

   hr {
     display: block;
     height: 1px;
     border: 0;
     border-top: 1px solid #ccc;
     margin: 1em 0;
     padding: 0;
   }

   .copyright{
     display: flex;
   justify-content: right;
   text-align: right ;
   align-items: end ;
   }
 
   @media(max-width:1000px){
     .footer-links {
       display: flex;
       font-family: Jost, sans-serif;
       font-size: 18px;
       padding: 0px 30px 0px 30px;
       flex-wrap: wrap;
       align-content: center;
       justify-content: space-evenly;
       align-items: baseline;
   }
     
     .socials a{
       text-decoration: none !important;
       color: white;
     }
     .socials a:hover h4 {
       color:  #D5B155;
     }
     hr {
       display: block;
       height: 1px;
       border: 0;
       border-top: 1px solid #ccc;
       margin: 1em 0;
       padding: 0;
     }
     .copyright{
       display: flex;
     justify-content: right;
     text-align: right ;
     align-items: end ;
     }
   }
.img-fluid {
    max-width: 100%;
    height: auto;
    margin: 0px;
}
.with-svg-item.svg-right-side {
    left: auto;
    right: 0;
    margin-top: -4.5rem;
    margin-right: -3rem;
}
.with-svg-item {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    margin-top: 2rem;
}

.about-section{
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .about-title{
    font-size: 62px !important;
  }

  .counter{
    background: #D5B155;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .image-container {
    position: relative;
    display: inline-block;
  }
  
  .centered-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 15px;
    width: 100px;
    height: 100px;
    color: #ffffff;
    border-radius: 50%;
    background-color: #181D24;
    border: #000000 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    backdrop-filter: blur(5px);
  }
  
  .image-container:hover .centered-button {
    opacity: 1;
  }

  .card{
    background: #00000000;
    color: white;
  }

  .card-content{
    background: #00000000;
  }
 
    .slogan{
      background: url('../img/two-3.jpg') rgba(0, 0, 0, 0.164);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-blend-mode: multiply;
      background-attachment: fixed;
      padding: 150px 0 !important;
    }

    #testimonials{
      background: #090B0E;
    }


    .Seaction-About-1 .outline {
        position: relative;
        /* display: inline-block; */
    }
    
    .Seaction-About-1 .outline img {
        display: block;
        border: 2px solid white;
        
    }
    
    .Seaction-About-1 .outline::before {
        content: '';
        position: absolute;
        top: 10px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        border: 1px solid rgb(255, 255, 255); /* Ngjyra e bordurës */
        box-sizing: border-box; /* Kjo siguron që dimensionet të përfshijnë bordurën */
    }
.apartments{
    background: url('../img/519d38_abfb6ff1d56c44f980afcfdec8098dd9~mv2.webp') rgba(0, 0, 0, 0.164);
      background-position: center 60%;
      background-repeat: no-repeat;
      background-size: cover;
      background-blend-mode: multiply;
      background-attachment: none;
}
    .image-container:hover .centered-button {
        opacity: 1;
      }
      .card{
        background: #00000000;
        color: white;
      }
      .card-content{
        background: #00000000;
      }


/* Facilities */
      .facilities{
        padding-top: 100px;
        padding-bottom: 100px;
        justify-content: center;
        text-align: center;
        align-items: center;
      
      }
      .facility-box{
      position: relative;
      
        left: 38%;
        border: 1px solid #090B0E;
       border-radius: 50%;
        padding: 20px;
        background: rgba(44, 52, 64, 0);
      height: 100px;
      width: 100px;
      transition: 0.35s ease-in-out;
      }
      .facility-box:hover{
        background: #090B0E;
        transition: 0.35s ease-in-out;
      }
      .facility-box1{
        position: relative;
          left: 38%;
          border: 1px solid #090B0E;
          border-radius: 50%;
          padding: 20px;
          background: #090B0E;
        height: 100px;
        width: 100px;
        transition: 0.35s ease-in-out;
        }
        .facility-box1:hover{
          background: #090B0E;
          transition: 0.35s ease-in-out;
        }
    .facilities h2{
        font-size: 27px;
        margin-top: 5px;
    }
        .slogan{
          background: url('../img/residence1/apartment1-3.jpg') rgba(0, 0, 0, 0.493);
          background-position: center 80%;
          background-repeat: no-repeat;
          background-size: cover;
          background-blend-mode: multiply;
          background-attachment: fixed;
          padding: 150px 0 !important;
        }


        .title-head{
            padding: 100px 0px !important;
            margin: 0 !important;
            color: white;
            font-size:70px;
            font-style: italic;
            font-weight: 300;
            font-family:"Jost", sans-serif;
          }
          .About-head{
            background: url('../img/residence2/two1-8.jpg')rgba(0, 0, 0, 0.425);
            background-position: center 70%;
            background-repeat: no-repeat;
            background-size: cover;
            background-blend-mode: multiply;
            background-attachment: fixed;  
        }
        .slogan2{
            background: url('../img/residence2/two1-8.jpg') rgba(0, 0, 0, 0.493);
            background-position: center 40%;
            background-repeat: no-repeat;
            background-size: cover;
            background-blend-mode: multiply;
            background-attachment: fixed;
            padding: 150px 0 !important;  
        }
    .Apartment1-head{
        background: url('../img/residence1/img2.jpg')rgba(0, 0, 0, 0.425);
            background-position: center 120%;
            background-repeat: no-repeat;
            background-size: cover;
            background-blend-mode: multiply;
            background-attachment: fixed;   
    }
    .Apartment2-head{
        background: url('../img/residence2/two1-8.jpg')rgba(0, 0, 0, 0.425);
            background-position: center 50%;
            background-repeat: no-repeat;
            background-size: cover;
            background-blend-mode: multiply;
            background-attachment: fixed; 
    }
    .Gallery-head{
        background: url('../img/residence1/apartment1-4.jpg')rgba(0, 0, 0, 0.425);
        background-position: center 110%;
        background-repeat: no-repeat;
        background-size: cover;
        background-blend-mode: multiply;
        background-attachment: fixed;
    }
    .transition {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        transition: all 0.5s;
    }
    
    .thumb {
        overflow: hidden;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    
    .read-btn {
        background: none;
        border: 0;
        font-family: 'Poppins', sans-serif;
        color: white;
        letter-spacing: 2px;
        font-weight: bold;
         transition: all 0.5s;
    }
    .Contact-head{
        background: url('../img/residence2/two1-8.jpg')rgba(0, 0, 0, 0.425);
        background-position: center 80%;
        background-repeat: no-repeat;
        background-size: cover;
        background-blend-mode: multiply;
        background-attachment: fixed;
      }
      .sec-contact{
        position: relative;
        overflow: hidden;
      }
      .sec-contact .icons-con i{
      background-color: #2B2A38;
      color: white;
      padding: 30px;
      font-size: 20px;
      border-radius: 50%;
      }
      .sec-contact .text-con h3{
      color: #000000d3 !important;
      font-size: 22px;
      }
      .sec-contact .text-con p{
        color: #000000bb !important;
        font-size: 18px;
     }

     @media (max-width: 1199px){
      .navbar .nav-item a{
        margin: 0 0px;
    }
      .d-lg-block{
          display: block;
         width: 130px !important;
      }
      footer .copyright{
        margin: 0 !important;
      }
      .navbar .container{
        position: relative;
       margin: auto;
       padding:  auto !important;
       justify-content: center;
      }
  }
  @media (max-width: 1024px){
.slide-text{
  margin-left: 60px;
}
.banner_wrapper .swiper-slide h1{
  font-size:90px;
  color: white;
  letter-spacing: 10px;
  text-shadow: #201f1f 2px 2px;
  font-weight: 500;
  font-family: 'Jost', sans-serif;
  margin: 70px 0;     
}
  }
  @media (max-width: 991px){
    .navbar .container{
      position: relative;
     margin: auto;
     justify-content:space-between;
    }  
    section {
      padding: 50px 0;
      position: relative;
  }
  }
  @media (max-width: 575px){
    .banner_wrapper .swiper-slide h1{
      font-size:60px;
      color: white;
      letter-spacing: 10px;
      text-shadow: #201f1f 2px 2px;
      font-weight: 500;
      font-family: 'Jost', sans-serif;
      margin: 30px 0;     
    }
    .facilities .col-lg-4 h2{
      font-size: 18px !important;
      text-align: center !important;
    }
    .facility-box{
      position: relative;
      
        left: 15%;
        border: 1px solid #181D24;
       
        padding: 20px;
        background: rgba(44, 52, 64, 0);
      height: 100px;
      width: 100px;
      transition: 0.35s ease-in-out;
      }
      .facility-box1{
        position: relative;
          left: 15%;
          border: 1px solid #181D24;
         
          padding: 20px;
          background: rgb(44, 52, 64);
        height: 100px;
        width: 100px;
        transition: 0.35s ease-in-out;
        }
  }
  @media (max-width: 430px){

    .imgg-logoo img {
      width: 140px !important;
    }
    .banner_wrapper .swiper-slide h1{
      font-size:50px;
      color: white;
      letter-spacing: 5px;
      text-shadow: #201f1f 2px 2px;
      font-weight: 500;
      font-family: 'Jost', sans-serif;
      margin: 10px 0;     
    }
    .banner_wrapper .swiper-slide h6{
      font-size: 30px;
      font-weight: 400;
      color: var( --primary-text);
      margin-bottom: 1.25rem;
      text-transform: capitalize;
      font-family:"Forum", serif;
      color: white;
  }
  .facilities .col-lg-4 h2{
    font-size: 18px !important;
    text-align: center !important;
  }
  .facility-box{
    position: relative;
    
      left: 5%;
      border: 1px solid #181D24;
     
      padding: 20px;
      background: rgba(44, 52, 64, 0);
    height: 100px;
    width: 100px;
    transition: 0.35s ease-in-out;
    }
    .facility-box1{
      position: relative;
        left: 5%;
        border: 1px solid #181D24;
       
        padding: 20px;
        background: rgb(44, 52, 64);
      height: 100px;
      width: 100px;
      transition: 0.35s ease-in-out;
      }

      .slogan{
        background: url('../img/two-3.jpg') rgba(0, 0, 0, 0.164);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-blend-mode: multiply;
        background-attachment: none;
        padding: 150px 0 !important;
      }
      .apartments{
        background: url('../img/519d38_abfb6ff1d56c44f980afcfdec8098dd9~mv2.webp') rgba(0, 0, 0, 0.164);
          background-position: center 60%;
          background-repeat: no-repeat;
          background-size: cover;
          background-blend-mode: multiply;
          background-attachment: none;
    }

    .slogan{
      background: url('../img/residence1/apartment1-3.jpg') rgba(0, 0, 0, 0.493);
      background-position: center 80%;
      background-repeat: no-repeat;
      background-size: cover;
      background-blend-mode: multiply;
      background-attachment: none;
      padding: 150px 0 !important;
    }
    .title-head{
      padding: 100px 0px !important;
      margin: 0 !important;
      color: white;
      font-size:50px;
      font-style: italic;
      font-weight: 300;
      font-family:"Jost", sans-serif;
    }
    .About-head{
      background: url('../img/residence2/two1-8.jpg')rgba(0, 0, 0, 0.425);
      background-position: center 70%;
      background-repeat: no-repeat;
      background-size: cover;
      background-blend-mode: multiply;
      background-attachment: none;  
  }
  .slogan2{
      background: url('../img/residence2/two1-8.jpg') rgba(0, 0, 0, 0.493);
      background-position: center 40%;
      background-repeat: no-repeat;
      background-size: cover;
      background-blend-mode: multiply;
      background-attachment: none;
      padding: 150px 0 !important;  
  }
.Apartment1-head{
  background: url('../img/residence1/img2.jpg')rgba(0, 0, 0, 0.425);
      background-position: center 120%;
      background-repeat: no-repeat;
      background-size: cover;
      background-blend-mode: multiply;
      background-attachment: none;   
}
.Apartment2-head{
  background: url('../img/residence2/two1-8.jpg')rgba(0, 0, 0, 0.425);
      background-position: center 50%;
      background-repeat: no-repeat;
      background-size: cover;
      background-blend-mode: multiply;
      background-attachment: none; 
}
.Gallery-head{
  background: url('../img/residence1/apartment1-4.jpg')rgba(0, 0, 0, 0.425);
  background-position: center 110%;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  background-attachment: none;
}
.Contact-head{
  background: url('../img/residence2/two1-8.jpg')rgba(0, 0, 0, 0.425);
  background-position: center 80%;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  background-attachment: none;
}
  }


  /* animation */
.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;
}
.fadeinup{
  opacity: 0;
  transform: translateY(100px);
  transition: all 1.2s ease-out;
}
.fade-in{
  opacity:0;
  transition: all 1.3s ease-in;
}
.active-left,.active,.active-right,.active-down,.active-up{
  opacity:1;
  transform: translateX(0);
  transform: translateY(0);
}
.fadein{
opacity: 0;
}