@media (max-width: 1200px) 
 {


 

 .sidebaar {


  display: flex;
  width: auto;
 }

 .sidebaar button
 {

  width: auto;
  height: auto;
 }

  .mainheader{
    gap: 10px;  
 
  }

.left 
{

  flex-shrink: 1;   /* 👈 screen choti → div shrink */
  min-width: 0;   }
 
.right
{

width: 30%;
height: 100%;
display: flex;
  align-items: center;
    flex-shrink: 1;        /* 👈 width kam hote hi shrink */
  min-width: 0; 

}
}


 @media (max-width: 992px) 
 {



 .mainheader{
    gap: 10px;       /* 👈 gap kam */
  }


 }

 @media (max-width: 768px) 

 {

.left_box_middle p
{


margin-top: 0px;  

}

.potfolio
{

  display: flex;
  flex-direction: column;
  height: auto;
}
 .mainheader{
    width: 100%;
  
  
  
  }
left a,
  .left i,
  .right i{
    font-size: 16px;
  }

  
 }

 @media (max-width: 576px) { 


.mainheder{

display: flex;
flex-direction: column;
 align-items: center;


}

.left {

   width: 100%;

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

    text-align: center;

    margin-left: 0;     /* 👈 MOST IMPORTANT */
    margin-right: 0; 


}

.right
{

   width: 100%;

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

    text-align: center;

    margin-left: 0;     /* 👈 MOST IMPORTANT */
    margin-right: 0; 


}
.yellow-section{

height: auto;

}

.card_section
{

 margin-left: 0;
  margin-right: 0;

}

.card_main
{

    justify-content: center;


}

 .girl_card {
    width: 100%;
    margin: 10px auto;
  }

.left_box_middle
{

height: auto;


}

.card {

width: 100%;
background-color: #630000;
height: 100%;
margin-top: 0px;
background-repeat: no-repeat;
 background-size: cover;         /* full background */
  background-position: center;


}

.card h2 {
            font-size: 42px;
            color: rgb(80, 202, 18);
        }

        .card p {
            font-size: 30px;
            color: #fcfcfc;
        }

.card_main{

display: flex;
flex-direction: column;



}
.girl_card
{
width: 100%;
margin-top: 5px;
height: auto;



}

.author h1
{

font-size: 25px;


}
.contener
{

    display: flex;
    flex-direction: column;
    width: 100%;
}
.cantent h1
{
 width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;

}

.author
{


display: flex;
flex-direction: column;
    width: 100%;

    
}

.main_box{


display: flex;
flex-direction: column;
width: 100%;


}

.box_left 
{
    width: 100%;

display: flex;
flex-direction: column;
height: auto;


}

.box_right{

 width: 100%;
margin-left: 0px;
display: flex;
flex-direction: column;
height: auto;


}

.box_left img

{
 width: 100%;   

}

.box_right img

{
 width: 100%;   

}

.left_box_footer img {


    width: 30%;
}


.sidebaar h3
{

   font-size: 15px; 
}


.potfolio
{

display: flex;
flex-direction: column;
height: auto;

}

.potfolio p {
    color: #fffffe;
    padding: 9px;
}

.pcontent
{
display: flex;
flex-direction: column;
height: auto;

}

.main_footer
{

display: flex;
flex-direction: column;


}
.rights{

display: none;
    
}


.popup-box{
     width: 50%; 
     margin-left: auto;                 /* mobile responsive */
    margin-right: auto;
    border-radius: 10px 10px 10px 10px;
}

.popup-box h2{
  margin-bottom: 10px;
  font-size: 25px;
}
.navbar{
    padding: 0 15px;
    position: relative;   /* ya fixed */
  z-index: 9999; 
  }
  .popup-btns button{
  padding: 10px 20px;
  margin-top: 10px;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

  .menu{
    gap: 10px;
  }

  .menu li a{
    padding: 8px 14px;
    font-size: 19px;
  }
   .menu-toggle{
    display: block;
  }

  .menu{
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: #8f0404;
    flex-direction: column;
    align-items: center;
    display: none;
  }

  .menu li{
    width: 100%;
    text-align: center;
  }

  .menu li a{
    display: block;
    width: 100%;
    padding: 15px;
    border-radius: 0;
  }

  .menu.active{
    display: flex;
  }

  .left_box_footer button span {
    color: rgb(10, 10, 10);
    font-size: 15px;
    padding-top: 2px;
}

.lastfooter
{
   border: 2px solid #d4af37; /* real gold color */
  width: 100%;
  background-color: #111;
  padding: 40px 0;
  display: flex;
  justify-content: center;
}
.footer-menu {
  width: 80%;
}


.footer-menu ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-menu ul li {
  margin-bottom: 10px;
  margin-left: 10px;

}

.footer-menu ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  transition: 0.3s;
}
.main-div {
            display: flex;
  flex-wrap: wrap;
  gap: 5px;
  
        }

.card {
    flex: 1 1 100%;     /* 👈 1 card per row */
    max-width: 100%;
    margin-top: 0;     /* 👈 negative margin remove */
  }

  .card h2 {
        font-size: 28px;
    line-height: 1.6;
  }

  .card p {
    font-size: 28px;
  }
h1{

margin-top: 5px;
margin-bottom: 10px;

}
.banner{
    height: 60vh;
    background-image: url("/img/komal_mobile.webp");
        clip-path: none;          /* optional */

  }

}