body{background-image: url(https://quntan.neocities.org/image.png/natural.jpg);
        background-position: cover;
        background-size: cover;
        background-repeat: no-repeat;
        
      }
.one{display: flex;
flex-wrap: wrap ;
justify-content:center;
align-items: center;

gap: 10px;
  margin-top: 130px;
}

.three{width: 50%;
background-image: url(https://quntan.neocities.org/image.png/nom.png);
width: 580px;
background-size: cover;
margin-top: 100px;}

li{list-style: none;
padding: 22px;
}
.no{font-weight: bold;
padding: 6px;
color:black;}
.two{
width: 450px;
background-color:aquamarine;
}

p{padding: 20px;}
q{border: 2px solid blue;
background-color: burlywood;
color: black;
font-weight: bolder;}

.are{display:flex;
    flex-direction: row;
   margin-top: 110px;
    width: 250px;
height: 250px;
object-fit: cover;
clip-path: circle(50% at 50% 50%);
gap: 20px;}

.wow {display:flex;
    flex-direction: row;
   margin-left: 200px;
    width: 210px;
height: 210px;
object-fit: cover;
clip-path: circle(50% at 50% 50%);}

.vko{display: flex;
flex-direction: row;
width: 250px;
height: 250px;
object-fit: cover;
clip-path: circle(50% at 50% 50%)}

.pm{display: flex;
flex-direction: row;
width: 250px;
height: 250px;
object-fit: cover;
clip-path: circle(50% at 50% 50%)}


.are:hover{cursor: pointer;
zoom: 145%;
clip-path: view-box;
 box-shadow: 2px 4px 6px black,-3px 5px 8px green,-5px 7px 3px white,-5px 7px 9px fuchsia;
border-radius: 10%;}


.pm:hover{cursor: pointer;
zoom: 145%;
clip-path: view-box;
 box-shadow: 2px 4px 6px black,-3px 5px 8px green,-5px 7px 3px white,-5px 7px 9px fuchsia;
border-radius: 10%;}

.wow:hover{cursor: pointer;
zoom: 125%;
clip-path: view-box;
 box-shadow: 2px 4px 6px black,-3px 5px 8px green,-5px 7px 3px white,-5px 7px 9px fuchsia;
border-radius: 10%;}

.vko:hover{cursor: pointer;
zoom: 145%;
clip-path: view-box;
 box-shadow: 2px 4px 6px black,-3px 5px 8px green,-5px 7px 3px white,-5px 7px 9px fuchsia;
border-radius: 10%;}


.bow{background-image: url(https://quntan.neocities.org/image.png/natural.jpg);
background-repeat: no-repeat;
background-size: cover;
margin-top: 150px;}

.muted{color:black;}
    .small{font-size:16px}
    .male{font-size: 18px;}
    
     .five{display:flex;
     flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
  
gap: 5px;
margin-top: 150px;}

.six{
background-color: aquamarine;
color: black;
width: 620px;}

.will{color: black;
font-size: 15px;}
.seven{width: 50%;}

.fix{width: 580px;
height: 650px;
border-radius: 10%;
box-shadow: 3px 4px 6px fuchsia,-5px 7px 4px green,-6px 7px 8px black;}

  

.dog{display: flex;
justify-content:space-between;
align-items: center;
flex-wrap: wrap;
gap: 3px;}

.verk{width: 210px;
height: 215px;
margin-left: 50px;}

.cat{width: 50%;
background-color:pink;
width: 300px;
border-radius: 5%;}

.adap{width: 20%;
background-color: lawngreen;
width: 300px;
border-radius: 5%;}


.gov{width: 20%;
background-color: lawngreen;
width: 300px;
border-radius: 5%;}

.dell{width: 20%;
background-color: lawngreen;
width: 300px;
border-radius: 5%;}


.rs{font-size: 500;
font-weight: bold;
color: black;}




.for{border: 0.5px solid white;
background-color: rgb(253, 158, 124);
color: black;
margin-top: 150px;}

.sow{font-weight: bold;
text-align: center;
margin-top: 18px;
font-size: 30px;
}

.dow{text-align: center;}

h4{margin:8px 0 6px;}
 .thumb{width:330pxpx;
    height:350px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid #eef4ff}

    .tablet{display: flex;
      justify-content: space-between;
      align-items: center;
      
      flex-wrap: wrap;
      gap: 3px;
}

.lop{width:250px;
height: 50px;
filter: brightness(120%);
clip-path: fill-box;
}

.mom{width: 350px;
height: 250px;}

.am{width: 360px;
height: 250px;}





.official{background-color:rgb(148, 205, 228);}



.out{display: flex;
flex-wrap: wrap;
justify-content:space-around;
align-items: center;

gap: 30px;}

.kio{border: 2px solid green;
background-color:white;
color:black;
font-size: 18px;
line-height: 22px;
font-weight: bold;}

.white{ width: 580px;
height: 830px;}
.time{width: 610px;
height: 830px;}


.morning{background-color: palevioletred;
width: 690px;}



 main{max-width:var(--maxw);margin:22px auto;padding:18px}
    .hero{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
    .card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:0 8px 30px rgba(30,60,100,0.06)}
    .doctor{display:flex;gap:14px;align-items:center}
    .avatar{width:84px;height:84px;border-radius:12px;background:linear-gradient(135deg,#fff,#f3f7ff);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-size:28px}
.list{padding-left:18px;margin:8px 0}
   form{display:grid;gap:8px}
    input,textarea,select{padding:10px;border-radius:8px;border:1px solid #e7eefc;font-size:14px}
    button.cta{padding:10px 12px;border-radius:10px;border:0;background:var(--accent);color:white;font-weight:700;cursor:pointer}



:root{--accent:#0b74de;}

@media (max-width:980px){
      .hero{grid-template-columns:1fr}
      nav.desktop{display:none}
      .menu-toggle{display:inline-flex}
      .drawer{width:100%;right:-100%}
      .drawer.open{right:0}
      .img-cover{height:160px}
    }



    header {
  width: 100%;
  background: skyblue;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  z-index: 1000;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
  color: black; /* Kidney theme color */
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 25px;
}

.nav-links li a {
  text-decoration: none;
  color: #333;
  font-size: 17px;
  transition: 0.3s;
}

.nav-links li a:hover {
 color: black;
  text-decoration: underline;
  background-color: #fff;
  font-size: 25px;
  border: 3px solid lightseagreen;
  font-weight: bold;
}

.btn {
  padding: 8px 15px;
  background: #c4004a;
  color: black !important;
  border-radius: 5px;
}

.menu-icon {
  display: none;
  font-size: 30px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 65px;
    right: -100%;
     background: linear-gradient(fuchsia,rgb(99, 233, 226),rgb(238, 255, 0));
    width: 250px;
    height: 100vh;
    flex-direction: column;
    padding-top: 40px;
    gap: 25px;
    text-align: left;
    transition: 0.4s;
    padding-left: 25px;
  }

  .nav-links.active {
    right: 0;
  }

  .menu-icon {
    display: block;
  }
}

 .sun-rice{
      background:rgb(90, 216, 233);
      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);
    
}
h2{text-align: center;}

.back{text-decoration: none;
border: 3px solid blueviolet;
background-color: #000;
color: white;
font-weight: bold;
font-size: 20px;}
 .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;}


.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;
      margin-left: 60px;
    }

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



.sky{width: 20%;
background-color: lawngreen;
width: 300px;
border-radius: 5%;}

.key{width: 20%;
background-color: lawngreen;
width: 300px;
border-radius: 5%;}

.keyh2{font-size: 18px;
margin: 15px 0px 10px;
color: black;}

.key p{font-size: 14px;
      color: #444;}

.sky h2{font-size: 18px;
margin: 15px 0px 10px;
color: black;}

.sky p{font-size: 14px;
      color: #444;}


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

 .sports-gold{background: skyblue;
      padding: 20px;
      width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);}



       .sports{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;}

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

.lofa-rice{background: skyblue;
      padding: 20px;
      width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);}



       .lofa{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;}

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


    .example{ display: grid;
    grid-template-columns:repeat( 2,1fr) ;
  padding: 5px;
gap: 10px;}

.boat{width: 50%;
width: 150px;
height: 100px;
background-color: white;}

min.media{color: fuchsia;}

kill.social-media{width: 50%;
background-color: brown;}

social-media{ margin: 0 10px;
text-decoration: none;
font-size: 24px;
}

fa-square-x-twitter{color: #000;}





.socials-container{
  display: flex;
  gap: 20px;
}
.socials-container a{
  background-color: white;
  padding: 1em;
  border-radius: 50%;
  height: 44px;
  width: 44px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.socials-container a svg{
  height: 12px;
}
.socials-container a::before{
  content: attr(data-social);
  position: absolute;
  background-color: var(--accent-color);
  color: white;
  text-decoration: none;
  padding: 0.5em 1em;
  border-radius: 100px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  transform: translateY(-30px) rotate(25deg);
  opacity: 0;
  transition: 200ms cubic-bezier(.42,0,.44,1.68);
}
.socials-container a:hover{
  background-color: var(--accent-color);
  fill: white;
}
.socials-container a::after{
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid var(--accent-color);
  transform: translateY(0) rotate(25deg);
  opacity: 0;
  transition: 200ms cubic-bezier(.42,0,.44,1.68);
}
.socials-container a:hover::before{
  transform: translateY(-65px) rotate(0);
  opacity: 1;
}
.socials-container a:hover::after{
  transform: translateY(-42px) rotate(0);
  opacity: 1;
}
.copy{text-align: center;
margin-bottom: 20px;}

.up
{position: fixed;
width: 250px;
height: 250px;
top: 250px;
right: 90px;
background-image: linear-gradient(skyblue,pink);}
.them{width: 150px;
height: 150px;
opacity: 0.9;
transition-duration: 5s;
margin-top: 30px;
margin-left: 30px;
border-radius: 20%;}

.back{text-decoration: none;
border: 3px solid blueviolet;
background-color: #000;
color: white;
font-weight: bold;
margin-bottom: 50px;}

p{text-align: center;}
        .lop{width:90px;
height: 88px;
filter: brightness(100%);
clip-path: fill-box;
object-fit: cover;
}
h1{font-size: 21px;}
p{font-size: 12px;}