body {
      font-family: Times New Roman;
      margin: 0;
	  padding-right:1%;
	  padding-left:1%;
    }

    nav {
      background: cornsilk;
      color: white;
      padding: 1px;
    }

    /* Menu links */
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 2rem;
    }

    nav a {
      color: red;
      text-decoration: none;
	  font-size:30px;
	  font-family:Arial;
    }

    /* Hamburger icon (hidden on desktop) */
    .menu-toggle {
      display: none;
      flex-direction: column;
      cursor: pointer;
    }

    .menu-toggle span {
      background: green;
      height: 3px;
      width: 25px;
      margin: 4px 0;
    }

    /* Mobile styles */
    @media (max-width: 768px) {
      nav ul {
        display: none;
        flex-direction: column;
        background: #333;
        padding: 1rem;
	}

      nav ul.active {
        display: flex;
      }

      .menu-toggle {
        display: flex;
      }
    }
  h1 {font-size: 60px;
	  font-family:Arial;
	  text-align:center;}

 h2 {font-size: 38px;
	  font-family:Arial;
	 }
	  
 h3 {font-size: 28px;
	  font-family:Arial;
	 }
	 
h4 {font-size: 18px;
	  font-family:Arial;
	 }
	 
	 @media (max-width: 768px) {
     h2 {font-size: 20px;
	 font-family:Arial;
	 text-align:center;}}

	 
	   @media (max-width: 768px) {
     h1 {font-size: 40px;
	 font-family:Arial;
	 text-align:center;}}  
	 
	 

    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    .box {
      flex: 1 1 calc(33.333% - 20px);
      box-sizing: border-box;
      border: 1px solid #ddd;
      border-radius: 12px;
      overflow: hidden;
      text-align: center;
      background: #fff;

      display: flex;
      flex-direction: column;
      transition: 
        box-shadow 0.3s ease, 
        background-color 0.3s ease,
        transform 0.3s ease;
    }

    /* Hover shadow + background + scale */
    .box:hover {
      box-shadow: 0 8px 22px rgba(0,0,0,0.25);
      background-color: #f0f8ff; /* light blue tint */
      transform: scale(1.03);    /* gentle lift */
    }

    .box img {
      width: 100%;
      height: 300px;        
      object-fit: cover;    
      display: block;
      transition: transform 0.3s ease;
    }

    /* Image zoom on hover */
    .box:hover img {
      transform: scale(1.05);
    }

    .comment {
      padding: 15px;
      font-size: 16px;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #333;
      transition: color 0.3s ease;
    }

    /* Comment color change on hover */
    .box:hover .comment {
      color: #0077cc;
    }

    /* Mobile: stack boxes */
    @media (max-width: 768px) {
      .box {
        flex: 1 1 100%;
      }
    }
	
	.A {
	margin-left:30%;
	width:40%;
	}
	
	 @media (max-width: 768px) {
      .A {
       margin-left:15%;
	width:70%;
      }