header {  background: #e4fc0b;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

h1{
font-weight: bold;
text-shadow: 13px 9px 7px fuchsia,-12px 8px 9px black,-7px 6px 5px green;
letter-spacing: 4px;}
  header h1 {
    margin: 0;
margin-left: 540px;
   font-size: 40px;
  }

  .sidebar{position: fixed;
  top: 0;
  background-image: url(https://quntan.neocities.org/image.png/Untitled-design.png);
  background-size: cover;
  background-repeat: no-repeat;
right: -280px;
width: 250px;
height: 100%;
background-color: rgb(78, 219, 196);
 box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    padding-top: 60px;
  }


.sidebar.open {
    right: 0;
  }
.she{background-color: rgb(0, 0, 0);
border-radius: 10%;
box-shadow: 1px 3px 10px fuchsia,-2px 4px 11px brown;}


.sidebar a{   display: block;
margin-top: 20px;
text-align: center;
    font-weight: 600;
  color:white;
text-decoration: none;}

.sidebar,a:hover{filter: brightness(100%);
zoom: 120%;
cursor: pointer;}

.menu-btn {
    font-size: 22px;
    background: rgb(4, 233, 42);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
  }

   .own-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: #0b6b4f;
    cursor: pointer;
    border: none;
    background: none;
  }


.overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 5;
  }

  .overlay.show {
    display: block;
  }

  .sidebar, .menu-btn, .own-btn {color:white;
    border: 3px solid white;
    background-color: black;
    z-index: 10;
  }

.grab:hover{filter: brightness(100%);
zoom: 125%;
cursor: pointer;
clip-path: circle(50% at 50% 50%);}

body{background-image: url(https://quntan.neocities.org/image.png/milk-product-image.413Z.png);
background-blend-mode:lighten;
background-repeat: no-repeat;
background-size: cover;}

.box{display: flex;
    background-image:url(https://quntan.neocities.org/image.png/cow.two.jpg);
justify-content: center;
text-align: center;
align-items: center;
background-color: rgb(77, 199, 199);
 width: 800px;
height: 300px;
margin-top: 20px;
margin-left: 260px;}


.vm{display: flex;
justify-content: center;
text-align: center;
align-items: center;
width: 990px;
height: 600px;
background-color: rgb(33, 216, 201);
margin-top: 10px;
margin-left: 200px;
gap: 20px;}

.bv,dt,dd{background-image: url(https://quntan.neocities.org/image.png/cow.three.jpg);
background-repeat: no-repeat;
background-size: cover;}

dd{padding: 5px;}

span{border: 3px solid cyan;
background-color: white;
font-size: large;}


dt,dd{padding: 13px;}

.bow{color: #000;}




.one,h2,p{background-color: rgb(92, 212, 92);
font-weight: bold;
opacity: 10;}
.box .grab{gap: 50px;}
.one,h2,p{color: white}
.grab{width: 370px;
height: 180px;
border-radius: 20%;
box-shadow: 1px 4px 8px black,-3px 5px 10px white;}

.own{width: 50%;}
.vm.own,img{margin-left: 10px;
gap: 20px;}

dt,dd:hover{zoom: 120%;}
marquee{ background-image: url(https://quntan.neocities.org/image.png/ghee.four.jpg);}
 

.ctrl {
      width: 350px;
      margin: 40px auto;
      background: #e949ce;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      text-align: center;
      padding: 20px;}

      h6,p{color: white;}

.ben{width: 200px;
height: 170px;
 margin-right: 220px;
border-radius: 10%;
margin-left: 35px;
box-shadow: 4px 3px 8px white,-5px 7px 6px black;}
.no{color:white;}

.ben:hover{filter: brightness(100%);
zoom: 120%;}


.now{
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.7);
      display: none;
      justify-content: center;
      align-items: center;
    }
   

    .now-pop {
      background:rgb(226, 73, 213);
      background-image: url(https://quntan.neocities.org/image.png/robot-canva.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      padding: 20px;
      width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }




    .now.jio {
      text-align: left;
      font-size: 14px;
      color: #333;
    }


.btn {
      display: inline-block;
      margin-top: 15px;
      padding: 10px 20px;
      background: #c62828;
      color: #fff;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
      transition: background 0.3s ease;
    }

.close-btn {
      display: inline-block;
      margin-top: 15px;
      padding: 8px 16px;
      background: #000;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
    }

    .alt{display: grid;
justify-content: space-between;
align-items: flex-start;
grid-template-columns: repeat(3,1fr);
padding: 20px;
flex-wrap: wrap;}


.end{width: 50%;}
.card{
  width: 350px;
      margin: 40px auto;
      background: #f7e70e;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      text-align: center;
      padding: 20px;}

      .sun-rice{
      background:rgb(90, 216, 233);
      background-image: url(https://quntan.neocities.org/image.png/curd-product-image.png);
      background-size: cover;
      background-repeat: no-repeat;
     
      padding: 20px;
      width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    
}

 .sun{position: fixed;
    top: 0;
  left: 0;
width: 100%;
height: 100%;
background: rgb(0,0,0,0.7);
display: none;
justify-content: center;
align-items: center;}

      .sun.jio,ol,li{ text-align: left;
font-size: 14px;
color: #333;}


.down{width: 30%;}

.exit{width: 350px;
margin: 40px auto;
background: rgb(235, 175, 65);
border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      text-align: center;
      padding: 20px;}

      .list{position: fixed;
      top: 0;
    left: 0;
  width: 100%;
height: 100%;
background: rgb(0,0,0,0.7);
justify-content: center;
align-items: center;
display: none;}

.list-fav{background:rgb(17, 243, 47);
      padding: 20px;
      background-image: url(https://quntan.neocities.org/image.png/ghee.four.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3)}

.list h3,h4 {
      color: #222;}

  .thisai{background-color: aquamarine;
  color: brown;
font-size: 22px;}

.jio{font-size: 15px;
font-weight: bold;
padding: 7px;

background-color: rgb(81, 241, 67);
color: black;
list-style: none;}


.high{text-align: center;
background-color:#913a3a ;
color: white;}
.slow{text-align: center;
background-color: white;
color: #000;
border: 3px solid orangered;
margin-left: 560px;}

.mop{background-color:olivedrab;
width: 1340px;
height: 800px;}


.fifty{ background-color: #c9c14f;
width: 1340px;
height: 600px;
display: grid;
grid-template-columns: repeat(2,1fr);
padding: 5px;
gap: 20px;
justify-content: space-between;
align-items: flex-start;}

.xov{width: 50%;}

.uno{width: 580px;
height: 598px;
box-shadow: 3px 4px 6px green,-5px 3px 7px fuchsia,-4px 6px 8px red,-19px 18px 17px white;
border-radius: 10%;
}

h6{font-size: 10px;
font-weight: bold;
color: black;
text-align: center;
align-items: center;}


.max{
      margin: 2px auto;
    background-color:rgb(133, 228, 228);
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      text-align: center;
      padding: 20px;
    height: 87vh;}






    .hard{
      width:100%;
      max-width:880px;
      background:var(--card);
      border-radius:var(--radius);
      box-shadow: 0 6px 24px rgba(15,23,42,0.08);
      padding:28px;
      box-sizing:border-box;
      
    }

    h5{
      margin:0 0 6px 0;
      font-size:1.25rem;
      letter-spacing:0.2px;
    }
    p.lead{
      margin:0 0 20px 0;
      color:var(--muted);
      font-size:0.95rem;
    }

    form{
      display:grid;
      gap:var(--gap);
      align-items:start;
    }

    /* Two-column layout on larger screens */
    .grid-2{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:var(--gap);
    }

    label{
      display:block;
      font-size:0.875rem;
      margin-bottom:6px;
      color:#111827;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
      width:100%;
      box-sizing:border-box;
      padding:10px 12px;
      border:1px solid #e6e9ee;
      border-radius:10px;
      font-size:0.95rem;
      background:transparent;
      transition:box-shadow .12s, border-color .12s;
    }

    input:focus, textarea:focus, select:focus{
      outline:none;
      border-color:var(--accent);
      box-shadow:0 0 0 4px rgba(11,107,79,0.08);
    }

    textarea{
      min-height:120px;
      resize:vertical;
    }

    .row{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }

    .small{
      font-size:0.85rem;
      color:var(--muted);
    }

    .actions{
      display:flex;
      gap:12px;
      align-items:center;
      justify-content:flex-end;
    }

    button{
      background:var(--accent);
      color:white;
      border:0;
      padding:10px 16px;
      font-size:0.95rem;
      border-radius:10px;
      cursor:pointer;
      box-shadow: 0 6px 14px rgba(11,107,79,0.12);
    }

    button.secondary{
      background:transparent;
      color:var(--muted);
      border:1px solid #e6e9ee;
      box-shadow:none;
    }

button.ear{color: #000;}


    .required { color:#dc2626; margin-left:6px; }

    /* small screens */
    @media (max-width:720px){
      .grid-2{ grid-template-columns: 1fr; }
      .actions{ justify-content:stretch; flex-direction:column-reverse; }
      button{ width:100%; }
    }