*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    body{
      font-family:'Inter',sans-serif;
      overflow-x:hidden;
      background:#fff;
      color:#111;
    }

    h1,h2,h3,h4,h5{
      font-family:'Cormorant Garamond',serif;
    }

    /* NAVBAR */

    .custom-navbar{
      background:#fff;
      padding:16px 0;
      border-bottom:1px solid #e5e5e5;
      transition:0.4s;
      z-index:999;
    }

    .logo{
      font-size:42px;
      font-weight:700;
      letter-spacing:2px;
      color:#000 !important;
    }

    .nav-link{
      color:#111 !important;
      font-size:14px;
      margin:0 12px;
      font-weight:500;
      transition:0.3s;
    }

    .nav-link:hover{
      opacity:0.7;
    }

    /* HERO */

   .hero-section{

  min-height:100vh;

  background:
    linear-gradient(
      rgba(0,0,0,0.58),
      rgba(0,0,0,0.58)
    ),
    url('img/products/17.jpeg');

  background-size:cover;
  background-position:center;

  display:flex;
  justify-content:center;
  align-items:center;

  text-align:center;

  padding:120px 20px 80px;

  position:relative;

}

/* CONTENT */

.hero-content{

  color:#fff;

  max-width:980px;

  padding:20px;

}

/* SMALL HEADING */

.small-heading{

  font-size:15px;

  letter-spacing:3px;

  line-height:1.8;

  margin-bottom:28px;

  text-transform:uppercase;

  font-weight:500;

}

/* DESCRIPTION */

.hero-content p{

  font-size:22px;

  line-height:1.8;

  max-width:850px;

  margin:auto;

  margin-bottom:40px;

  color:rgba(255,255,255,0.92);

}

/* BUTTON AREA */

.hero-buttons{

  display:flex;

  justify-content:center;

  gap:18px;

  flex-wrap:wrap;

}

/* BUTTON */

.custom-btn{

  min-width:220px;

  padding:15px 34px;

  border:1px solid #fff;

  background:transparent;

  color:#fff;

  font-size:14px;

  transition:0.3s ease;
text-decoration:none;
}

.custom-btn:hover{

  background:#fff;

  color:#000;

}

/* MOBILE */

@media(max-width:768px){

  .small-heading{

    font-size:13px;

    letter-spacing:2px;

  }

  .hero-content p{

    font-size:17px;

    line-height:1.7;

  }

  .custom-btn{

    width:100%;

  }

}

    /* BUTTON */

    .custom-btn{
      background:transparent;
      border:1px solid #fff;
      color:#fff;
      padding:14px 40px;
      font-size:14px;
      letter-spacing:1px;
      transition:0.4s;
	  margin-bottom: 10px;
    }

    .custom-btn:hover{
      background:#fff;
      color:#000;
    }

    .dark-btn{
      border:1px solid #111;
      color:#111;
    }

    .dark-btn:hover{
      background:#111;
      color:#fff;
    }

    /* SECTION */

    .section-padding{
      padding:110px 0;
    }

    .section-subtitle{
      font-size:13px;
      letter-spacing:3px;
      margin-bottom:20px;
    }

    .section-title{
      font-size:60px;
      line-height:1.15;
      max-width:1100px;
      margin:auto;
      margin-bottom:35px;
      font-weight:600;
    }

    /* IMAGE CARDS */

    .card-block{
      position:relative;
      overflow:hidden;
      cursor:pointer;
    }

    .card-block img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:0.6s;
    }

    .card-block:hover img{
      transform:scale(1.05);
    }

    .large-card{
      height:760px;
    }

    .small-card{
      height:373px;
    }

    .normal-card{
      height:500px;
    }

    .architecture-card{
      height:520px;
    }

    .card-overlay{
      position:absolute;
      
      left:40px;
      color:#000;
       
    }

    .card-overlay h3{
      font-size:48px;
      margin-bottom:10px;
      font-weight:600;
    }

    .card-overlay p{
      font-size:16px;
    }

    /* DARK SECTION */

    .magazine-section{
      background:#111;
      color:#fff;
      padding:90px 0;
    }

    .magazine-section h2{
      font-size:60px;
      margin-bottom:30px;
    }

    .magazine-section p{
      font-size:20px;
      line-height:1.8;
      max-width:1000px;
    }

    /* RESPONSIVE */

    @media(max-width:991px){

      .hero-content h1{
        font-size:42px;
      }

      .section-title{
        font-size:38px;
      }

      .card-overlay h3{
        font-size:34px;
      }

      .large-card,
      .small-card,
      .normal-card,
      .architecture-card{
        height:auto;
      }

      .card-block img{
        height:450px;
      }

      .navbar-nav{
        padding-top:20px;
      }

    }
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--bs-navbar-active-color);
    font-weight: 900;
	text-decoration: underline;
}

.footer_area {
    
    position: relative;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.footer_area .copyright_area {
    background: #000;
    font: 400 14px / 100px "Roboto", sans-serif;
    color: #fefefe;
    text-align: center;
}



/* ========================= */
/* ULTRA PERFORMANCE CSS */
/* ========================= */
 

/* SECTION */

.gallery-section{

  padding:80px 0;

}

/* HEADER */

.gallery-header{

  margin-bottom:50px;

}

.main-title{

  font-size:52px;
  margin-bottom:10px;
  font-family:Georgia,serif;

}

.sub-title{

  font-size:14px;
  opacity:0.8;
  margin-bottom:30px;

}

/* FILTERS */

.filters{

  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;

}

.filter-btn{

  background:transparent;
  border:1px solid #fff;
  color:#fff;

  padding:10px 22px;

  font-size:12px;
  cursor:pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease;

}

.filter-btn.active,
.filter-btn:hover{

  background:#fff;
  color:#000;

}

/* GRID */

.gallery-grid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap:18px;

}

/* CARD */

.gallery-item{

  position:relative;

  overflow:hidden;

  background:#222;

  content-visibility:auto;
  contain-intrinsic-size:420px;

}

/* HIDE */

.gallery-item.hidden{

  display:none;

}

/* IMAGE */

.gallery-item img{

  width:100%;
  height:420px;

  object-fit:cover;

  display:block;

  transition:transform 0.4s ease;

}

/* HOVER */

.gallery-item:hover img{

  transform:scale(1.03);

}

/* OVERLAY */

.overlay{

  position:absolute;

  left:20px;
  bottom:20px;

  z-index:2;

}

.overlay h3{

  font-size:22px;
  margin-bottom:5px;

}

.overlay p{

  font-size:13px;
  margin:0;

}

/* DARK OVERLAY */

.gallery-item::after{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.55),
      rgba(0,0,0,0.05)
    );

}

/* RESPONSIVE */

@media(max-width:768px){

  .main-title{

    font-size:34px;

  }

  .gallery-item img{

    height:320px;

  }

}