/*
================================================================
  Responsive Stylesheet for Wadeng - Wedding & Event Planner
================================================================
*/

/* ----------------------------------------------------------------
  Large Desktops (Screens smaller than 1400px)
----------------------------------------------------------------
*/
html{
    .navbar-navs{display: nonenavbar-navs;}
}
@media (max-width: 1400px) {
    .bride-img {
        width: 24rem; /* Adjust bride image size */
    }
}
.column-gallery-container {
    display: none;
}
.navbar-navs{
    display: none;
}
.makeleft{
    
}

/* ----------------------------------------------------------------
  Standard Desktops & Laptops (Screens smaller than 1200px)
----------------------------------------------------------------
*/
@media (max-width: 1199.98px) {
    .bride-img {
        position: static; /* Remove absolute positioning */
        width: 100%;
        margin-top: 2rem;
    }

    .bg-homepage {
        height: auto;
        padding-bottom: 5rem;
    }

    .coverbg {
        height: 900px; /* Adjust cover background height */
    }

    @keyframes moveUpDown {
      100% { transform: translateY(-950px); }
    }
}
/* ----------------------------------------------------------------
  Tablets (Screens smaller than 992px)
----------------------------------------------------------------
*/
@media (max-width: 991.98px) {
    html{
        overflow-x: hidden;
        
        width: 100%;
    }
    h1, .display-1, .display-2 {
        font-size: 3rem !important; /* Reduce heading sizes */
    }
    .nav-item{
        font-size:0.8rem
    }
    .navbar-nav{
    position: relative;
    right:4rem;
    width: 100%;
  background-color: #000;
}
.sidermen{
    display: hidden;
    opacity: 0%;
}
.helll{
    margin-top: 1rem;
}
.navbar{
    background-color: #000;
}
    .wedding-nav a.nav-link {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .navbar-collapse {
        background-color: transparent !important; /* Remove black background on mobile nav dropdown */
    }

    .video-container {
        width: 8rem;
        height: 6rem;
    }

    .coverbg {
        height: 800px;
    }

    @keyframes moveUpDown {
      100% { transform: translateY(-850px); }
    }

    .bg-white.shadow.p-5 {
        padding: 3rem !important; /* Reduce padding */
    }

    .footer .col-lg-6, .footer .col-lg-3 {
        text-align: center !important;
    }

    .footer .text-lg-end {
        text-align: center !important;
    }

    .contact-form-container {
        padding: 40px 15px;
    }
}

/* ----------------------------------------------------------------
  Large Mobile Phones (Screens smaller than 768px)
----------------------------------------------------------------
*/
@media (max-width: 767.98px) {
    h1, .display-1, .display-2 {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }

    .lead {
        font-size: 1rem;
    }

    .py-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .coverbg {
        height: 750px;
    }

     @keyframes moveUpDown {
      100% { transform: translateY(-450px); }
    }

    .bg-white.shadow.p-5 {
        padding: 2rem !important;
        margin-top: -2rem;
    }

    .gallery .col-lg-4, .gallery .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%; /* Make gallery single column */
    }
    
    .gallery-media {
        height: auto; /* Adjust gallery image height */
    }

    .card.p-5 {
        padding: 2rem !important;
    }

    .contact-form-container {
        margin-top: 2rem;
    }

    .contact-form-container .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .left-logo {
        width: 35%;
        opacity: 0.3;
    }

    .right-bg-logo {
        max-width: 250px;
    }

    .footer .social-links .icon-sm {
        margin: 0.5rem;
    }
   

    .column-gallery-container {
        
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, auto);
      gap: 20px;
      padding: 20px;
    }

    .story {
      height: 600px;
      overflow: hidden;
      background: white;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      position: relative;
      padding: 10px;
    }

    .column-track {
      display: flex;
      flex-direction: column;
    }

    .scroll-up {
      animation: scrollUp 20s linear infinite;
    }

    .scroll-down {
      animation: scrollDown 22s linear infinite;
    }

    .story img {
      width: 100%;
      height: auto;
      margin-bottom: 8px;
      border: 4px solid transparent;
      animation: borderAnimation 3s linear infinite;
    }

    @keyframes scrollUp {
      0% { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }

    @keyframes scrollDown {
      0% { transform: translateY(-50%); }
      100% { transform: translateY(0); }
    }

    @keyframes borderAnimation {
      0% {
        border-image-source: linear-gradient(90deg, #ff6a00, #ee0979, #ff6a00);
      }
      50% {
        border-image-source: linear-gradient(90deg, #ee0979, #ff6a00, #ee0979);
      }
      100% {
        border-image-source: linear-gradient(90deg, #ff6a00, #ee0979, #ff6a00);
      }
    }
  
}


/* ----------------------------------------------------------------
  Small Mobile Phones (Screens smaller than 576px)
----------------------------------------------------------------
*/
@media (max-width: 575.98px) {
    .navbar-brand .d-none {
        display: inline-block !important; /* Show brand text on small screens if hidden */
    }

   .sidermen {
  position: absolute;
  opacity: 1;
  right: 2rem;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 1000;
}

.sidermen.rotate {
  transform: rotate(90deg);
}

.navbar-navs {
    
  position: absolute;
  top: 3rem;
  right: 3rem;
  list-style: none;
  padding: 0;
  margin: 0;
   display: none;
   color: #0000ea;
  flex-direction: column;
  background-color: #000;
  box-shadow: 10px 10px 20px #5723ff1a;
  border-radius: 0.5rem;
  z-index: 10;
}


.navbar-navs.show {
   
  display: flex;
  animation: fadeIn 0.3s ease-in-out;
}

.nav-items {
  padding: 0.5rem 1.5rem;
  margin: 0.5rem 1rem;
  height: 80px;
  border-radius: 8px;         /* Rounded corners */
  box-shadow: 2px 6px 6px rgba(255, 248, 248, 0.1); /* Subtle shadow */
  display: inline-block;
  transition: background-color 0.3s ease;
}

.nav-link {
  text-decoration: none;
  color: #000;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nav-item{
    display:none
}

.logo{
    left:4rem;
}
    .site-brand {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    h1, .display-1, .display-2 {
        font-size: 2rem !important;
    }

    .coverbg {
        height: 700px;
    }

    @keyframes moveUpDown {
      100% { transform: translateY(-700px); }
    }

    .bg-white.shadow.p-5 {
        padding: 1.5rem !important;
        margin-top: -1.5rem;
    }

    .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }

    .contact-us-button {
        padding: 10px 15px;
        font-size: 14px;
        bottom: 15px;
        right: 15px;
    }
    
    .contact-form-container {
        padding: 20px 10px;
    }
    
    .left-logo {
        display: none; /* Hide decorative logos on smallest screens */
    }

    .right-bg-logo {
        display: none;
    }
    .v{
        padding-left: 300px;
    }
    .v1{
        padding-right: 500px;
        left:-120px
    }
}