*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: auto;
    background-color: #fff;
    overflow-x: hidden;
    
}
@media (max-width:768px){
    .mek{
       display: none;
  }
  #second-nav form{
    height: 30px;
  }
.ify .container-fluid #second-nav{
    display: none;
 }
 #black {
   margin-top: 2rem;
 }

 #pol{
    
    height: 90px;
 }
  .mek span{
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
  }
}
@media(max-width:1024px) {
   
   #pol{
    outline: 1px solid red;
   }
   #pol a{
     font-size: 1.5rem;
   }
   #men p br{
    display: none;
   }
   #men p{
    max-width: 500px;
   }
   .shop h5{
    margin-top: 3rem !important;
   }
   
   .dress{
    width: 100% !important;
    gap: 1rem !important;
   }
   
   .col-7{
    padding-left: 5rem !important;
   }
   .wedding{
    width: 100% !important;
    gap: 3rem !important;

   }
   .rule-2{
    padding-right: 3rem !important;

   }
   .wedding1{
    width: 100% !important;
   }
   
}
.shop p{
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: slideLeftRight 6s 2s ease-in-out infinite;
  margin: 0;
  padding: 0;
}

@keyframes slideLeftRight {
  0% {
    transform: translateX(100%);  /* start off right */
    opacity: 0;
  }
  15% {
    transform: translateX(0);     /* fully visible */
    opacity: 1;
  }
  50% {
    transform: translateX(0);     /* stay visible */
    opacity: 1;
  }
  85% {
    transform: translateX(-100%); /* move out to left */
    opacity: 0;
  }
  100% {
    transform: translateX(100%);  /* reset back to right */
    opacity: 0;
  }
}


.shop{
    
    
    overflow: hidden;
    
}


 


nav{
    width: 100%;
    height: 30px;
    background-color: #323131;
    line-height: 30px;
    text-align: center;

}
nav p{
    font-size: 13px;
    color:#fff ;
}


/* Small screens */



 .fill ul{
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 2rem; 
    
 }
 .fill ul li i{
    color: #323131;
    font-size: 1.5rem; 
 }
 .fill ul li a{
    text-decoration: none;
 }
 
 .ify{
    height: 45px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
 }
 .mek i{
    color: rgb(108,19,74);
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 16px;
 }
 .mek span{
    color: #323131;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
 }
 .ify #second-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
@media (max-width:768px){
    .shop p{
        font-size: 12px;
        
 }
 .shop{
    width: 100%;
 }
 }
@media (max-width:768px){
     #second-nav button{
        width:100% ;

    }
    .ify{
        display: none;
    }
    .fill{
        display: none;
    }
    .navbar{
        display: none;
    }
}

.mine{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   margin-left: 8rem;
   gap: 1rem;
}



#pol{
background-color:rgb(108, 19, 74);
gap: 5rem;
height: 30px;
}
#pol a {
    color: white;
}
#pol button{
   background-color:#fff;
   border: none;
}
#pol span{
    background-color:#fff ;
}

#poll ul{
    display: flex;
    justify-content: space-around;
    gap: 4rem;
}
#poll ul li a{
    color: #fff;
    font-size: 11.5px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    
}
#poll ul li a:hover{
    font-size: 13px;
}

.nav-2 ul{
    list-style: none;
    display: flex;
justify-content: space-around;
align-items: center; 
  flex-direction: row;
}
.nav-2 ul li{
    color: #fff;
    font-weight: bold;
    font-size: 11px;
}
.nav-2 ul li:hover{
    font-size: 13px;
    color: #eee;
}
.nav-2 ul li a{
    color: #fff;
    text-decoration: none;
}
.carousel-item {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

#me{
    position: absolute;
    top: 0;
    margin-top: 5.5rem;
}



#me h5{
    letter-spacing: .2rem;
    font-size: 1.4rem;
    font-weight: 500;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#me h3{
    margin-top: 1rem;
    letter-spacing: .4em;
    font-size: 3rem;
    font-weight: 500;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#me p{
    margin-top: 1rem;
    letter-spacing: .1rem;
    font-size: 13px;
    margin-bottom: 2rem;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#me button{
    font-size: 11px;
    border: none;
    padding: 2px;
    font-weight: bold;
    color: #323131;
    letter-spacing: .2rem;
}
#me button a{
    text-decoration: none;
    color: #323131;
}
#me button a:hover{
    color: rgb(108, 19, 74);
    padding: 2.2px;
    font-size: 11.2px;    
}
#men{
text-align: left;
}
@media (max-width:768px){
    #me{
      display: flex;
      flex-direction: column;
      
      
    }
    #black{
        margin-top: -2em;
    }
    #me h5{
     font-size:1.5rem ;
     font-weight: bold;
    }
    #me h3{
        font-size:2.5rem;
        font-weight: 400;
        letter-spacing:10px ;
    
    }
    #leg{
        background-image: url(../image/IMG-20250524-WA0039.jpg);
        background-position: center;
        background-size: cover;
    }
    #me .now{
        display: none;
    }
    
}

#second-nav button{
    color:black;
    border: 1px solid black;
    
}
#second-nav button:hover{
    background-color: rgb(206, 199, 203);
}
#leg{
width: 100%;
height: 420px;
background-color: rgb(236,217,236);

}
.circle{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 2px solid rgb(108, 19, 74);
    position: absolute;
    right: 0;top: 4rem;
    margin-right: 1rem;
    background-image: url(../image/IMG-20250524-WA0039.jpg);
    background-position: center;
    background-size: cover;
    
}
@media(max-width:768px){
    .circle{
        display: none;
    }
    
}
#men{
    text-align: left;
    margin-bottom: 2rem;
    color: #323131;
    margin-left: -4rem;


}
#men h5{
    font-size: 3rem;
    font-weight: bold;
}
#men span{
    font-weight: 350;
}
#men p{ 
    font-size: 15px;
}


#men button{
    font-size: 11px;
    border: none;
    padding: 2px;
    font-weight: bold;
    background-color: #323131;
    letter-spacing:1px;
}
#men button a{
    text-decoration: none;
    color: #fff;
}
#men button a:hover{
    color: rgb(108, 19, 74);
    padding: 2.2px;
    font-size: 11.2px;    
}
.tops img{
    width: 300px;
    display: flex;
    height: 20rem;
    object-fit: cover;
    border-left: 9px solid rgb(145, 83, 121);
    border-radius:20px;
    
    
}
.tops{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
    
}
.dress{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap:.4em;
    
}
@media (max-width:768px){
    .dress {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 4px;
        width: 100% !important;
        overflow: hidden !important;    
    }
    
   .tops{
        width: 100%;
        padding-left: 0;   /* prevents left push */
    }

    .tops img{
        width: 100% !important;
        box-sizing: border-box;
        height: 250px; /* THIS is the key */
    }

    .tops span{
        letter-spacing: 2px;
    }
    .tops img{
        animation: fadeIn 2.5s 3ms ;
    }
    @keyframes fadeIn{
        0%{
            opacity: 0;
        }
    }
     }
@media (min-width: 769px) and (max-width: 1024px){
    .tops img{
        max-width: 260px !important;
        box-sizing: border-box;
        margin: auto;
    }
    .my-image{
        margin-top: 2rem !important;
    }
}

.tops span{
    color: #fff;
    position: absolute;
    bottom: 0;
    margin-bottom: 2rem;
    font-size: 16px;
    font-weight: 500;
}
 

@media (max-width:768px){
    #men button{
        display: none;
    }
    #men{
        color: white;
        text-align: center;
        margin-top: 1rem;
    }
    #men h5{
        font-size: 2rem;
    }
}


@media (max-width:768px){
    .row .col-6 {
        display: flex;
        flex-direction: column;
        align-items: center;    
    }
    .row .col-6{
        width: 100%;
        text-align: center;
    }
   .row .col-2 img{
      width: 100%; 
       
    }
    
    .row.col-2{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .myt{
        display: flex;
        flex-direction: row;
    
    }
    .im{
        display: none;
    }
    .col-2{
        width: 50%;
        object-fit: cover;
    }
    
    .my-image h1{
        margin-top: 2rem !important;
    }
    }
@media (max-width:768px){
    .tops{
        justify-content: center !important;
    }
}

@media (max-width: 768px) {
    .my-image {
        margin-left: 0;   /* remove Bootstrap row negative margin */
        margin-right: 0;
        padding-left: 1rem;  /* horizontal padding */
        padding-right: 1rem;
        box-sizing: border-box;
    }

    .my-image .col-6,
    .my-image .col-2 {
         /* 2 per row on tablet/mobile */
        padding-left: 0.5rem;  /* small gap between images */
        padding-right: 0.5rem;
        margin-bottom: 1rem;   /* spacing between rows */
    }

    .my-image img {
        width: 100%;       /* image fills its column */
        height: auto;      /* maintain aspect ratio */
        display: block;
    }
    
}
@media (max-width: 768px) {
    /* Center all text under images */
    .moot, .wedding-2, .wedding-22, .rule-11 {
        display: flex;
        flex-direction: column;
        align-items: center; /* horizontally center */
        text-align: center;  /* text itself centered */
        margin: 0 auto !important;
        width: 100% !important;
        padding: 0 !important; /* remove leftover padding */
    }

    .moot h1, .moot h3, .moot p,
    .wedding-2 h1, .wedding-2 h3, .wedding-2 p,
    .wedding-22 h1, .wedding-22 h3, .wedding-22 p,
    .rule-11 h1, .rule-11 h3, .rule-11 p {
        text-align: center !important;
        margin: 0.3rem auto !important;
    }
}


.row{
    margin-top: 12px;
    display: flex;
    flex-direction: center;
    justify-content: center;
    align-items: center;
    
    
}
.col-6 h1{
    letter-spacing: 2px;
    font-size: 2rem;
    color: #323131;
    text-align: center;
}
.col-6 p{
    margin-top: 1rem;
    letter-spacing: 1px;
    text-align: center;
}
.col-2 img{ 
height: 16rem;
width: 13rem;
object-fit: cover;
}
.im img{
    width: 10rem;

}
@media (max-width:768px){
  .myt .bit1{
        
        width:230px;
        height: 350px;
        object-fit: cover;
        

    }

  .myt .byte{
        width: 140px; 
        height: 275px; 
        object-fit: cover; 
        margin-top: 2.5rem;
    }
    

 .row.myt{
        
       margin-top:3rem;
        flex-direction:column ;
        display: flex;
        margin-left: 0;
        margin-right: 0;
    
    }
    .moot h1{
      text-align: center;
      
    }
    .moot h3{
        margin-top: 1rem;
    }
    .col-7{
        width: 100%;
    }
    .col-5{
        width: 100%;
    }
     .rule-2{
        order: 1;
        
        
    }
    .wedding-2{
        order: 2;
    }
   
    #hh img{
        width: 195px;
    }
}

.myt{
    margin: 4rem;
    
    
}
.bit1{
    width:300px;  background-position: center; background-size: cover;
      height: 22rem; background-image: url(../image/IMG-20250524-WA0025.jpg);
      position: relative; 
      border-left: 6px solid  rgb(145, 83, 121);
}

.byte {
    width: 150px; height: 220px; background-position: center; background-size: cover; 
         border: 2px solid #fff; outline: 2px solid #fff; position: absolute; left: 80%;
          margin-top: 4.2rem;
         
         background-image: url(../image/IMG-20250524-WA0081.jpg);
}

.moot{ 
     display: flex; justify-content: center; 
      flex-direction: column;
      align-items: center;
}
.moot h3{
    font-size: small; color: #323131; letter-spacing: 1px;
}
.moot h1{
    letter-spacing: 2px; font-size: 2rem; color: #323131; margin-top: 1.5rem;
}
.moot p{
    margin-top: 1rem; letter-spacing: 1px; text-align: center;
}

.wedding{
     margin: 4rem; 
     gap: 4rem;
     
}
 .wedding-2{
    display: flex; justify-content: center;
       align-items: center;
      flex-direction: column;
      
}
.wedding-2 h3{
    font-size: small; color: #323131; letter-spacing: 1px;
}
.wedding-2 h1{
    letter-spacing: 2px; font-size: 2rem; color: #323131; margin-top: 1.5rem;
}
.wedding-2 span{
    margin-left: 4rem;
}
.wedding-2 p{
    margin-top: 1rem; letter-spacing: 1px; text-align: center;
}
.own{
    width: 160px; height: 20px; background-color: #323131;
}
.own h4{
    font-size: 10px; color: #fff; letter-spacing: 1px; margin-top: .2rem;
           text-align: center;
}
.rule-2{
    width: 300px;  background-position: center; background-size: cover;
      height: 22rem; background-image: url(../image/IMG-20250524-WA0060.jpg);
      position: relative;  border-right: 6px solid  rgb(145, 83, 121);
}
@media(max-width:1024px){
    .rule-2{
        margin-right: 1.5rem !important;
    }
    .wedding{
        margin-left: -1.8rem !important;
    }
    .wedding1{
        margin-left: -1.8rem !important;
    }
    .rule-22{
        margin-right: 1.5rem !important;
    }
}
@media (max-width: 768px) {
    .wedding {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* 🔑 THIS centers it */
        gap: 1.5rem;
    }

    .col-5,
    .col-7 {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex;
        justify-content: center;
    }
}
@media (max-width: 768px) {
    .rule-2 {
        width: 230px;
        height: 350px;
        position: relative;
        margin: 0 auto !important; /* 🔥 hard center */
    }
}

@media (max-width:768px){
    .wedding .rule-2{
        width: 230px;
        height: 350px;
        object-fit: cover; 
        
    }
    

   .wedding .bytes{
        width: 140px;
        height: 275px;
        object-fit: cover;
        margin-top: 2.5rem;
        
        
    }
    .wedding-2 h3{
        margin-top: 1rem;
    }
}
@media (max-width: 768px) {
    .wedding {
        margin: 0;          /* remove left/right margin */
        padding: 0 1rem !important;    /* optional padding */
        display: flex !important;
        flex-direction: column !important; /* 
        align-items: center !important; /* center all children horizontally */
        gap: 1rem !important;          /* spacing between image and text */
    }

    .wedding-2 {
        width: 100% !important;
        text-align: center !important;  /* center the text itself */
        padding: 0 !important;          /* remove leftover padding */
        margin: 0 auto !important;
        
    }
   .wedding-2 br{
      display: none !important;
   }
   .wedding-2 span,
    .wedding-2 h3,
    .wedding-2 h1,
    .wedding-2 p {
        text-align: center !important;
        margin: 0.5rem auto !important;
    }

    .own {
        margin: 1rem auto 0 auto !important; /* center button-like div */
    }
}
@media (max-width: 768px) {

  .rule-2 {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
  }

  .bytes {
    left: 50% !important;
    left: auto !important;
    transform: translateX(40%); /* keeps it by the side, not centered */
  }

}
@media (max-width: 768px) {

  /* main image stays centered */
  .rule-2 {
    position: relative;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* side image aligned to the centered image */
  .bytes {
    position: absolute;
    left: 50% !important;
    transform: translateX(-20%); /* pulls it inward from the edge */
    right: auto !important;
  }

}

.bytes {
    width: 150px; height: 220px; 
    background-position: center; background-size: cover; 
         border: 2px solid #fff; outline: 2px solid #fff; position: absolute; right: 80%;
          margin-top: 4.2rem;
         
         background-image: url(../image/IMG-20250524-WA0063.jpg);

}

.bytes {
    width: 150px;
    height: 220px;
    background-position: center;
    background-size: cover;
    border: 2px solid #fff;
    outline: 2px solid #fff;
    position: absolute;
    right: 80%;
    margin-top: 4.2rem;
    background-image: url(../image/IMG-20250524-WA0063.jpg);
    transition: transform 0.4s ease, z-index 0.4s ease;
    z-index: 1; /* ensure hover works on top */
}


.bit2{
    margin: 4rem;
}
.bit22{
    width:300px;  background-position: center; background-size: cover;
         background-image: url(../image/IMG-20250508-WA0062.jpg);
      height: 22rem;
      position: relative;  border-left: 6px solid  rgb(145, 83, 121);
}

.byte2 {
    width: 150px; height: 220px; background-position: center; background-size: cover; 
         border: 2px solid #fff; outline: 2px solid #fff; position: absolute; left: 80%;
          margin-top: 4.2rem;
         background-image: url(../image/IMG-20250514-WA0010.jpg);
}
.rule-11{
     display: flex; justify-content: center; 
      flex-direction: column;
      align-items: center;
}
.rule-11 h3{
    font-size: small; color: #323131; letter-spacing: 1px;
}
.rule-11 h1{
    letter-spacing: 2px; font-size: 2rem; color: #323131; margin-top: 1.5rem;
}
.rule-11 p{
    margin-top: 1rem; letter-spacing: 1px; text-align: center;
}
@media (max-width:768px){
   .bit2{
    margin:0;
    padding-left: .5rem;
    padding-top: 3rem;
   } 
   .bit22{
    width: 230px;
    height: 350px;
    object-fit: cover;
   }
   .byte2{
    width: 140px;
    height: 275px;
    object-fit: cover;
    margin-top: 2.5rem;
   }
   .rule-11 h3{
    margin-top: 1rem;
   }
}

.wedding1{
    margin: 4rem;
    gap: 4rem;
}
.wedding-22{
     display: flex; justify-content: center;
       align-items: center;
      flex-direction: column;
}
.wedding-22 h3{
    font-size: small; color: #323131; letter-spacing: 1px;
}
.wedding-22 h1{
    letter-spacing: 2px; font-size: 2rem; color: #323131; margin-top: 1.5rem; text-align: center;
}
.wedding-22 span{
    margin-left: 2rem;
}
.wedding-22 p{
    margin-top: 1rem; letter-spacing: 1px; text-align: center;

}
.rule-22{
    width: 300px;  background-position: center; background-size: cover;
      height: 22rem; background-image: url(../image/IMG-20250508-WA0055.jpg);
      position: relative; border-right: 6px solid  rgb(145, 83, 121);
}
.bytes3 {
    width: 150px; height: 220px; background-position: center; background-size: cover; 
         border: 2px solid #fff; outline: 2px solid #fff; position: absolute; right: 80%;
          margin-top: 4.2rem;
         
         background-image: url(../image/IMG-20250516-WA0002.jpg);
}
@media (max-width:768px){
    .wedding1{
        margin: 0;
        gap: 0;
         padding-left: 4rem;
    padding-top: 3rem;
    }
    .rule-22{
        order: 1;
        
    }
    .wedding-22{
        order: 2;
        margin-right: 5rem;
    }
    .wedding-22 h3{
        margin-top: 1rem;
    }
    .rule-22{
        width: 230px;
        height: 350px;
        object-fit: cover;
    }
    .bytes3{
        width: 140px;
        height: 275px;
        object-fit: cover;
        margin-top: 2.5rem;
    }
}
.designer{
    margin-left: 4rem; margin-right: 4rem; position: relative;
     margin-top: 1rem;
}
.designer p{
    letter-spacing: 1px; font-size: 1.1rem; color: rgb(108, 19, 74);
}
@media (max-width:768px){
    .designer{
        margin:0;
        width: 100%;
        break-after: avoid;
    }
    .new {
        margin: 0;
        
    
        gap: 1rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        
        
    }
    .designer p::after{
        width: 100%;
    }
  .new  .news{
        width: 200px;
        height: 250px;    
    }
 .new   .news img{
        width: 200px;
        height: 220px;object-fit: cover;
    }
  
}

.designer p::after{
    content: "";
    position: absolute;
    left: 0;
    bottom:-10px ;
    width: 100%;
    height: 1px;
    background-color: #000;
}

.news{
    width:263px ;
    height: 400px;
    background-color: #fff;
    
}
/* Hide toggle for mobile (<768px) and desktop (>1024px) */
.navbar-toggler {
    display: none !important;
}

/* Show toggle only for iPad (769px–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .navbar-toggler {
        display: block !important;
    }

    /* Optional: make collapse full width */
    .navbar-collapse {
        width: 100%;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .navbar-collapse {
        display: none; /* start hidden */
    }

    .navbar-collapse.show {
        display: flex !important; /* show when toggled */
        flex-direction: column;    /* vertical menu for iPad */
        gap: 1rem;
    }
}

.news img{
    width: 263px ;
    height: 280px;
    object-fit: cover;
}
.new{
    display: grid;
    grid-template-columns:repeat(4, 1fr);

    

}
.new{
margin-left: 4rem; margin-right: 4rem; color: #323131;
}
.news h3{
    font-size: 14px; margin-top: .5rem;
}
.magic{
    gap: 1rem; letter-spacing: 2px;margin-top: -.5rem;
}
.news p{
    font-size: 10px;
}

@media(max-width:768px){
    #whyl{
        width: 100%;
        height: 450px;
    }
   .mine  .fast{
        width: 150px;
        height: 150px;
    }
    body{
        width: 100%;
    }
     .mine{
        margin: 0;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        margin-top: 2em;

     }
    .mine .fast p{
        font-size: 10px;
     }
   .mine  .fast h6{
        color: #323131;
        font-size: 15px;
     }
     
}
.why{
    width: 100%; height: 400px; background-color:#f5f1f3;
           margin-top: 3rem; padding: 1.3rem;
}
.why h2{
    text-align: center; font-size: 1.5em;color: #323131;
}
.fast{
    width: 400px; height: 140px; 
            display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.fast h6{
    color: #323131;
}
.fast p{
    font-size: 12px; text-align: center;
}
@media(max-width:768px){
   .newbe .item{
        margin: 1em;
    }
  .accordion{
        margin: 0;
        width: 100%;
        
    }
    .newbe .accordion{
        margin: 1em;
        margin-top: 2em;
    }
    .accordion-item{
        width: 600px;
    }
    #tija{
        margin-top: 4em;
        margin-left: 3em;
        color: #323131;
        font-size: 13px;
    }
    #yh h3{
        margin-top: 3.6em;
        margin-right: -.6em;
    }
    #jg{
        font-size: 10px;
    }
     #yh{
        height: 500px;
    }
    #iy{
        margin: 0;
        
    }
}
@media(max-width:1024px){
    .news img{
        width: 240px !important;
        gap: 1.2rem !important;
    }
}
.newbe{
    width: 100%; height: 350px; background-color:#c2a7b3 ;
}
.item{
    margin-left: 3rem;position: relative;

}
.item h4{
    font-size: 1.3rem; font-weight: 400; margin-top: 2.5rem;
}
.item h3{
    position: absolute; right: 0; font-size: 12px; gap: 2px; margin-top: 2.5rem
        ; margin-right: 3rem;
}
.mehek{
    gap: 7rem;
}
.about{
     margin-top: 1.5rem; margin-left: 3rem;
}
.about h2{
    font-size: 12px;
}
#acc{
    width: 90%;
    border: none;
    background-color:#f5f1f3;
    outline: none;
    

}

.accordion{
    margin: 2rem;
    
    
}
#acc button {
  background-color:#c2a7b3 ;
  outline:none;
  border-bottom: 1px solid #323131;
  

}
#acc button:hover{
    color:#323131;
    
}
#blow button:focus, #blow button:active{
    border: black;
    outline: none;
}
.newbe p{
    margin-left: 3rem; 
    font-size: 12px;

}
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* dropdown appears under the icon */
    left: 0;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    padding: 8px 0;
    min-width: 140px;
    border-radius: 6px;
    z-index: 1000;
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu li a {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;

}

.dropdown-menu li a:hover {
    background: #f5f5f5;
}

.dropdown:hover .dropdown-menu {
    display: block;
}
@media (max-width: 768px) {
  /* Main image stays fixed width and centered */
  .rule-2 {
    width: 230px !important;   /* fixed width */
    height: 350px !important;
    margin: 0 auto !important; /* horizontally center */
    position: relative;
    flex: none !important;     /* prevent parent flex from stretching it */
  }

  /* Side image stays by the side of main image */
  .bytes {
    width: 140px !important;
    height: 275px !important;
    position: absolute;
    left: -30px;               /* keeps it to the side */
    top: 50%;
    transform: translateY(-50%);
    right: auto !important;
    margin: 0 !important;
    z-index: 1;
    transition: transform 0.4s ease, z-index 0.4s ease;
  }

  /* Hover effect remains */
  
}
@media (max-width: 768px) {

  /* Ensure wedding containers don't force children full width */
  .wedding, .wedding1 {
      display: flex !important;
      flex-direction: column !important; /* stack images vertically */
      align-items: center !important;    /* center children horizontally */
      margin: 0 !important;
      padding: 0 1rem !important;        /* optional horizontal padding */
      gap: 1.5rem !important;            /* space between images */
  }

  /* Main image stays fixed width and centered */
  .rule-2, .rule-22 {
      width: 230px !important;
      height: 350px !important;
          /* center horizontally */
      flex: none !important;        /* prevent parent flex stretching */
      position: relative;
      right: -30px !important;
  }
.rule-22{
    margin-top: 2rem !important;
}
.wedding{
    margin-bottom: -1rem !important;
}
  /* Side images */
 .bytes3 {
      width: 140px !important;
      height: 250px !important;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: -70px;       /* keeps it at the side */
      margin: 0 !important;
      z-index: 1;
      transition: transform 0.4s ease, z-index 0.4s ease;
  }

  /* Hover effect for side images */
  .bytes:hover, .bytes2:hover, .bytes3:hover {
      
  }

}
@media (max-width: 768px) {
    .myt {
        display: flex;
        flex-direction: column;  /* stack left/right columns */
        align-items: center;     /* center horizontally */
        margin: 2rem 0;          /* spacing on top/bottom */
    }

    .myt .col-5, .myt .col-7 {
        width: 100% !important;  /* each column full width */
        padding: 0;
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    /* Main image */
    .bit1 {
        width: 230px !important;
        height: 350px !important;
        position: relative;
        margin: 0 auto;
        background-position: center;
        background-size: cover;
        border-left: 6px solid rgb(145, 83, 121);
        left: -50px !important;
    }

    /* Side image stays by the side of main image */
    .byte{
        width: 140px !important;
        height: 250px !important;
        position: absolute;
        top: 50%;
        right: -70px;          /* stays to the left side of main image */
        transform: translateY(-50%);
        z-index: 1;
        margin: 0 !important;
        background-position: center;
        background-size: cover;
        transition: transform 0.4s ease, z-index 0.4s ease;
    }
    .bytes {
        width: 140px !important;
        height: 250px !important;
        position: absolute;
        top: 50%;
        left: -70px !important;          /* stays to the left side of main image */
        transform: translateY(-50%);
        z-index: 1;
        margin: 0 !important;
        background-position: center;
        background-size: cover;
        transition: transform 0.4s ease, z-index 0.4s ease;
    }


    
}
@media (max-width: 768px) {
    .bit2 {
        display: flex;
        flex-direction: column;   /* stack columns */
        align-items: center;
        margin: 2rem 0;
    }

    .bit2 .col-5 {
        width: 100% !important;
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 0 auto;
    }

    /* Main image */
    .bit22 {
        width: 230px !important;
        height: 350px !important;
        position: relative;
        margin: 0 auto;
        background-position: center;
        background-size: cover;
        border-left: 6px solid rgb(145, 83, 121);
        left: -50px !important;
    }

    /* Side image */
    .byte2 {
        width: 140px !important;
        height: 250px !important;
        position: absolute;
        top: 50%;
          right: -70px;              /* stays by the side */
        transform: translateY(-50%);
        z-index: 1;
        margin: 0 !important;
        background-position: center;
        background-size: cover;
        transition: transform 0.4s ease, z-index 0.4s ease;
    }

    
   body, html {
    max-width: 100%;
    overflow-x: hidden; /* 🔑 prevents horizontal scroll */
}
 
}
@media (max-width: 768px) {

  /* stop horizontal overflow */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }
.designer{
    margin-top: 5rem !important;
    margin: 1rem !important;
}
.designer p{
    margin-top: 3rem !important;
}
  /* designer heading */
  
  .designer p::after {
    
    width: 90%;
  }

  /* product grid */
  .new {
    margin: 0 !important;
    padding: 0 1rem;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;
  }

  /* product cards */
  .news {
    width: 100% !important;
  }

  .news img {
    width: 100% !important;
    height: 220px;
    object-fit: cover;
  }

  

  
}
@media (min-width: 769px) and (max-width: 1024px) {

  /* keep layout balanced */
  .designer {
    margin: 2rem !important;
    
  }

  .new {

    grid-template-columns: repeat(4, 1fr) !important;
margin: 0 !important;
    padding: 0 1rem;

  }

  .news img {
    height: 260px;
  }
  
}

@media (max-width: 360px) {

  /* product grid spacing */
  .new {
    padding: 0 0.5rem !important;
    gap: 0.6rem;
  }

  /* prevent image cutting */
  .news img {
    height: auto !important;     /* 🔑 allow natural height */
    max-height: 200px;           /* safe limit */
    object-fit: contain !important;
  }

  .news {
    height: auto !important;
  }

  .news h3 {
    font-size: 12px;

  }

  .magic span,
  .magic s {
    font-size: 11px;
  }
  
}


@media (max-width: 320px) {

  .why {
    padding: 1.2rem 0.8rem;
    height: 700px !important;
  }

  .why h2 {
    font-size: 1.4rem;
    text-align: center;
  }

  .mine {
        /* center container */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    grid-template-columns: 1fr !important; 
  }
.wedding-22 h1{
    margin-left: -1.2rem !important;
}
  .fast {
    width: 100% !important;
    max-width: 260px;              /* fits 360px perfectly */
    padding: 0.8rem;
  }

  .fast i {
    font-size: 1.6rem !important;
  }

  .fast h6 {
    font-size: 0.95rem;
  }

  .fast p {
    font-size: 10.5px;
    line-height: 1.45;
  }

  /* remove forced line breaks on tiny screens */
  .fast p br {
    display: none;
  }

  /* prevent any horizontal overflow */
  html, body {
    overflow-x: hidden;
  }
}
@media (max-width: 768px) {

  .why {
    height: auto !important;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;

  }

  .mine {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 × 2 layout */
    gap: 1rem;
    justify-items: center;
    padding: 0 !important;
    
  }

   

  
}