:root {
  --pastel1: #fedcdb;
  --pastel2: #fdf1c9;
  --pastel3: #f2d9ef;
  --pastel4: #d8eedf;
  --pastel5: #d8e5f7; 
}
@font-face {
  font-family: gothic;
  src: url(fonts/gothic.ttf);
}

@font-face {
  font-family: saturday;
  src: url(fonts/saturday.otf);
}
body{font-family: 'gothic'; transition: ease .3s; padding-top: 140px; background: #000;}
.saturday{font-family: 'saturday';}
.maincolor{color: rgba(0,0,0, .7);}
.mainbg{background: rgba(0,0,0, 1.0);}
.pastel1{background: var(--pastel1);}
.pastel2{background: var(--pastel2);}
.pastel3{background: var(--pastel3);}
.pastel4{background: var(--pastel4);}
.pastel5{background: var(--pastel5);}
h1,h2,h3,h4,h5{letter-spacing: 1.5px;}
/*h1,h2,h3,h4{font-family: 'saturday';}*/

.pagehero {
position: relative;
height: 100vh;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-attachment: fixed;
}

        /* Hero Section */
        .hero {
            position: relative;
            height: 100vh;
            background: linear-gradient(rgba(0,0,0, 0.5), rgba(0,0,0, 0.5)), url('images/hero1.jpg') center/cover no-repeat;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-attachment: fixed !important;
            transition: background-position 0.1s ease-out;
            background-size: auto;
        }
        .hero h1 {
            font-size: 4rem;
            font-weight: bold;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 5px rgba(0,0,0, 0.7);
        }
        .hero p {
            font-size: 1.5rem;
            margin-bottom: 2rem;
        }

        /* Section Headers */
        .section-title {
            font-size: 2.5rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        .section-title::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 4px;
            background-color:  rgba(0,0,0, 0.1);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Grid Styling */
        .grid img {
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .grid img:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 15px rgba(0,0,0, 0.3);
        }

        /* Footer */
footer {
    background: linear-gradient(180deg, #333, #222);
    color: #ddd;
    font-size: 0.9rem;
}

footer h5 {
    color: #fff;
}

footer a:hover {
    color: #ffdddd;
}

footer .btn-primary {
    background-color: #f7b7b7;
    border: none;
    color: #333;
}

footer .btn-primary:hover {
    background-color: #e89a9a;
    color: #222;
}
.aboutus-section{background: linear-gradient(to right, #f8f9fa, #e9ecef);}
.logo{width: 230px; filter: brightness(50); transition: ease .3s;}
.topgb{position: fixed; width: 100%; z-index: 1000; top: 0; left: 0; background: #000;}
.mainbtn{background: var(--pastel1); color: #000;}
.mainbtn:hover{background: var(--pastel4); color: rgba(0,0,0,.8); border: 1px solid rgba(0,0,0,1); }
.gb{background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9));}
.mt-100{margin-top: 100px;}
#header{position: fixed;}
.fixed{background: #000 !important; top: 0;}
.fixed .logo{width: 120px;}
.square{aspect-ratio: 1; object-fit: cover;}
#contact{background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('images/hero3.jpg') center/cover; min-height: 100vh; background-attachment: fixed;}
.aboutus-banner img{border: 5px solid #ffffff;}
/*#blog .btn:hover{color: rgba(0,0,0,0.8) !important; border: 1px solid rgba(0,0,0,0.8);}*/
#services .card img{transition: 0.5s ease;}
#services .card:hover img{
    transform: scale(1.05);
}
/* Style the tab content */
.tabcontent {
  display: none;
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
.tablinks:hover{
    cursor: pointer;
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
    #category h2 {
        font-size: 2.5rem;
    }

    .category-image-wrapper {
        width: 120px;
        height: 120px;
        overflow: hidden;
        position: relative;
        transition: all 0.3s ease-in-out;
    }

    .category-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }

    .category-hover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0, 0.6);
        opacity: 0;
        border-radius: 50%;
        transition: all 0.3s ease-in-out;
    }

    .category-item:hover .category-image-wrapper img {
        transform: scale(1.1);
    }

    .category-item:hover .category-hover {
        opacity: 1;
    }

    .category-item h5 {
        font-size: 1rem;
        color: #333;
        transition: color 0.3s;
    }

    .category-item:hover h5 {
        color: #007bff;
    }
        #pslider {
    }

    #pslider h2 {
        font-size: 2.5rem;
    }

    /* Card Styling */
    #pslider .card {
        border-radius: 10px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background:#fff;
    }

    #pslider .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 15px rgba(0,0,0, 0.1);
    }

    #pslider .card-img {
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid #e9ecef;
    }

    #pslider .card-img img {
        transition: transform 0.4s ease;
        aspect-ratio: 1;
    }

    #pslider .card:hover .card-img img {
        transform: scale(1.1);
    }

    #pslider .card .btn{background: #f5f5f5; !important; color: #000 !important; letter-spacing: 1px;}

    /* Hover Effect */
    .product-hover-overlay {
        background: rgba(0,0,0, 0.6);
        opacity: 0;
        transition: opacity 0.4s ease;
        border-radius: 10px;
    }

    .card:hover .product-hover-overlay {
        opacity: 1;
    }

    .product-hover-overlay a {
        color: #000;
    }

    /* Product Name & Price */
    #pslider .card-body p {
        font-size: 1rem;
        color: #333;
    }

     #pslider .card-body span {
        font-size: 0.9rem;
    }
        #why-choose-us {
        background-color: #f8f9fa;
    }

    .section-title {
        font-size: 2.5rem;
    }

    /* Feature Box */
    .feature-box {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background-color: #fff;
    }

    .feature-box:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 20px rgba(0,0,0, 0.15);
    }

    .icon-container {
        transition: transform 0.4s ease;
    }

    .feature-box:hover .icon-container {
        transform: scale(1.2);
    }

    /* Icon Styling */
    .feature-box i {
        color: rgba(0,0,0, .7);
    }

    /* Text Styling */
    .feature-box h5 {
        font-size: 1.25rem;
        color: #333;
    }

    .feature-box p {
        font-size: 0.95rem;
        color: #666;
    }

#custom-design{background: linear-gradient(rgba(0,0,0, 0.6), rgba(0,0,0, 0.5)), url('images/hero2.jpg') center/cover no-repeat; position: relative; background-attachment: fixed; color: #fff;}    

#custom-design .floating-icon {
  animation: float 5s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

#custom-design .section-title {
  font-weight: bold;
  color: #343a40;
}

#custom-design .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#custom-design .card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0, 0.2);
}
.portfolio-item img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item img:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0, 0.3);
}
#booking{background: linear-gradient(rgba(0,0,0, 0.5), rgba(0,0,0, 0.5)), url('images/hero2.jpg') center/cover no-repeat; background-attachment: fixed;}
.form-container label{color: #fff;}
#photopagehero{
      height: 100vh;
      background: linear-gradient(rgba(0,0,0, 0.5), rgba(0,0,0, 0.5)), url('images/hero2.jpg') center/cover no-repeat;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    #photopagehero h1 {
      font-size: 4rem;
      font-weight: bold;
      text-shadow: 2px 2px 5px rgba(0,0,0, 0.7);
    }

    #photopagehero p {
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }

    #photopage .section-title {
      font-size: 2.5rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 3rem;
      position: relative;
    }

    #photopage .section-title::after {
      content: '';
      position: absolute;
      width: 80px;
      height: 4px;
      background-color: rgba(0,0,0, 0.1);
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
    }

    .portfolio-carousel img {
      border-radius: 10px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .portfolio-carousel img:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 15px rgba(0,0,0, 0.3);
    }

    .pricing-plan {
      background: #f8f9fa;
      border: 1px solid #ddd;
      padding: 20px;
      border-radius: 10px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .pricing-plan:hover {
      transform: translateY(-10px);
      box-shadow: 0 10px 20px rgba(0,0,0, 0.2);
    }

    .testimonials-carousel .item {
      text-align: center;
    }

    .testimonials-carousel .item img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-bottom: 10px;
    }

    .form-container {
      max-width: 600px;
      margin: 0 auto;
    }

/* Main Product Image Styling */
.product-big-image img {
  max-width: 100%;
  border: 2px solid #ddd;
  cursor: zoom-in;
}

/* Thumbnail Styling */
.thumb-image {
  
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.3s;
  aspect-ratio: 1;
}

.thumb-image:hover,
.thumb-image.active {
  border-color: #f7b7b7;
}

/* Zoom Lens Cursor */
.zoomContainer {
  position: absolute;
  z-index: 999;
}
.filterbright{filter: brightness(0);}
.team-card img{max-width: 120px;}

@media only screen and (max-width: 768px) and (min-width: 300px){
    body{padding-top: 88px;}
    .logo{width: 120px !important;}
    }






 
.video-container { 
    position: relative; 
    height: 100vh; /* Full viewport height */ 
    overflow: hidden; /* Prevent scroll bars */ 
} 
 
#background-video { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1; /* Send video behind content */ 
    transform: translate(-50%, -50%); /* Centering */ 
} 
 
.overlay-content { 
    position: relative; 
    z-index: 1; /* Bring content above the video */ 
    color: white; /* Text color */ 
    text-align: center; /* Center text */ 
}