/* ----full body---- */
body{
     box-sizing: border-box;
     padding: 0%;
     margin: 0%;
}

/*--- back img---*/
.back{
     background-image: url("back.jpg");
     background-repeat: no-repeat;
     background-position: center;
     background-size:cover;
     padding: 0%;
     margin: 0%;  
}
.back{
     padding:0%;
     margin: 0%;
     border:rgb(20, 1, 1) 4px;
     box-shadow:0 0 5px 5px #010d12;
     border-style:solid;
}
/*--end back img--*/

/* --Font style--*/
h2{
    font-size:20px;letter-spacing:2px;color:rgb(61, 6, 2);
    text-shadow:
      0 0 6px #0ea837,
      0 0 12px #063e43,
      0 0 24px #00eaff,
      0 0 48px #00b7ff;
    
  }
  
  
/* ----Head---- */
.head{
     background-color:#043337;
     text-align: center;
     padding:8px;
     font-size: 15px;
     text-shadow: 0 4px 7px;
     backdrop-filter: blur(20px);
     overflow: hidden;
     transition: 0.3s ease;
     cursor:pointer;
}
#l1{
     color: orange;
     display: inline;
}
#l2{
     color: white; 
     display: inline;
}
#l3{
     color: green;
     display: inline;
}
/*--end head--*/


/* ----Home---- */
nav {
      background:rgb(47, 125, 156); 
      padding: 15px;
      text-align: center;
      border: #010d12 2px;
      border-style: solid;
      box-shadow:0 0 5px 3px #0f4c67;
      cursor:pointer;
    }

    nav a {
      color: white;
      margin: 10rem;      
      text-decoration:none; 
      font-weight: 900;
    }

    nav a:hover {
      text-decoration: underline; 
      color: blue;
      cursor:pointer;
    }
/*--end home--*/    


/* ----About---- */
.about{
     background-color: none;
     text-align: center;
     margin-top: 5px;
     margin: 25px;
     padding: 15px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     border-radius: 15px;    
     border:rgb(31, 25, 90) 2px;
     border-style:solid;
     box-shadow: 0 3px 6px;
     backdrop-filter: blur(10px);
     overflow: hidden;
     transition: 0.3s ease;
     cursor:pointer;
}

.about:hover {
     background-color:lightblue;
     box-shadow:0  1px 3px blue;
}
/*--end about--*/


/*--Places--*/
#places_head{
     text-align: center;
     background-color:none ;
     padding: 15px;
     text-decoration:underline;
     margin-bottom: -1px;
     cursor:pointer;

}
/* -place -*/
#pl{
     max-width: 1300px;
     margin: 0 auto;
     padding: 20px;
}
.place {
      display: flex;
      flex-wrap:wrap;
      justify-content: space-around;
      gap: 30px;
      max-width: 1300px;
      margin: 0 auto;
      cursor:pointer;
    }
  
#place1{
     display: inline-block;
     text-align: center;
}
 #place2{
     display: flex;
     flex-wrap: nowrap;
     gap: 350px;
     margin-left: 30px;
     margin-right: 30px;
     margin-top: -180px;
    
    
     
}

#place4{
     display: flex;
     flex-wrap: nowrap;
     gap: 40px;
     margin-left: 40px;
     margin-right: 40px;
     margin-top:-15px;
}
/*-end place-*/


/*  place class name */
.photo{
     background-color: lavender;
     height: 360px;
     width: 360px;
     padding:20px;
     border-radius: 300px;
     text-align:center;
     border:rgb(31, 25, 90) 2px;
     border-style:solid;
     box-shadow: 0 3px 6px;
     backdrop-filter: blur(10px);
     overflow: hidden;
     transition: 0.3s ease;
    
}

.photo:hover {
      transform: scale(1.05);
      background-color: lightblue;
      box-shadow: 0 12px 32px rgba(6, 70, 28, 0.2);
}

/* imag class name */
.photo img {      
     height:200px;
     width: 200px;
     border-radius: 150px;
     border: blue(193, 9, 33) 2px;
     border-style:solid;
     box-shadow: 0 4px 8px;

}
.photo h3{
     font-weight: 600;
     font-style: initial;
     text-align: center;
    
     text-shadow:  0 1px 3px;
     backdrop-filter: blur(10px);
     overflow: hidden;
     transition: 0.2s ease;
}
.photo p{
     font-family: 'Times New Roman', Times, serif;
     font-size: 77%;
     padding-bottom: 20px;
     padding-left: 25px;
     padding-right: 25px;
     display:flex;
     justify-content: center;

     color: rgb(4, 4, 32);
     font-weight: 300;
     text-shadow:  0 1px 4px;
     backdrop-filter: blur(10px);
     overflow: hidden;
     transition: 0.2s ease;
     gap: 10px;
     
}

/* end img */
    


/* ----Created name---- */
.name{
     background:lightgoldenrodyellow;
     padding:10px;
     text-align: center;
     margin-top:25px;
   
     border:black 2px;
     border-style: solid;
     box-shadow: 0 0 4px 2px #010d12;
     font-size: 15px;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     text-shadow:  0 3px 5px;
     backdrop-filter: blur(20px);
     overflow: hidden;
     transition: 0.3s ease;
     cursor:pointer;
     color: rgb(12, 12, 95);

}
/* --end name-- */


/* 📱 Mobile View (up to 600px) */
@media screen and (max-width: 600px) {
  .head h1 {
    font-size: 1.4rem;
    padding: 0 5px;
  }

  .home {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .place {
    grid-template-columns: 1fr;  /* only 1 column */
  }

  .photo img.pic {
    height: 180px;
  }

  .para {
    font-size: 0.85rem;
  }
}

/* 📱 Tablets (601px to 900px) */
@media screen and (min-width: 601px) and (max-width: 900px) {
  .head h1 {
    font-size: 1.8rem;
  }

  .place {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }

  .photo img.pic {
    height: 200px;
  }
}

/* 💻 Desktop (above 900px) */
/*@media screen and (min-width: 901px) {
  .head h1 {
    font-size: 2.2rem;
  }

  .place {
    grid-template-columns: repeat(3, 1fr);
  }

  .photo img.pic {
    height: 220px;
  }
} 
*/