* {
        font-family: sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      header {
        position: relative;
        width: 100%;
        height: 100vh;   
        overflow: hidden;
      }

      /* Background slideshow */
      .header-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
      }

      .header-bg .slide {
        position: absolute;
        inset: 0;
        background-size: 100% 100%;   
        width:100%;
        background-position: center;
        opacity: 0;
        animation: fade 6s infinite;
      }

      /* Har 1s ke baad change */
      .header-bg .slide:nth-child(1) { background-image: url('bg1.jpg'); animation-delay: 0s; }
      .header-bg .slide:nth-child(2) { background-image: url('bg2.jpg'); animation-delay: 1s; }
      .header-bg .slide:nth-child(3) { background-image: url('bg3.png'); animation-delay: 2s; }
      .header-bg .slide:nth-child(4) { background-image: url('bg4.png'); animation-delay: 3s; }
      .header-bg .slide:nth-child(5) { background-image: url('bg2.png'); animation-delay: 4s; }
      .header-bg .slide:nth-child(6) { background-image: url('bg.jpg'); animation-delay: 5s; }

      @keyframes fade {
        0%   { opacity: 0; }
        10%  { opacity: 1; }
        25%  { opacity: 1; }
        35%  { opacity: 0; }
        100% { opacity: 0; }
      }

      /* Navbar content (upar dikhna chahiye) */
      .navbar-content {
        position: relative;
        z-index: 1;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px;
       
      }

      .navbar-content img {
        height: 70px;
      }

      .navbar-content nav {
        display: flex;
        align-items: center;
        gap: 20px;
      }

      .navbar-content a {
  text-decoration: none;
  color: #ffffff;
  padding: 8px 12px;           
  display: inline-block;  
     }

.navbar-content a:hover {
  border-bottom: 2px solid #ffffff; /* hover pe white underline */
}


      .navbar-content span {
        font-size: 22px;
        color: #f2a400;
      }

      /* Responsive */
      @media (max-width: 768px) {
        .navbar-content {
          flex-direction: column;
          height: auto;
          padding: 15px;
          gap: 8px;
        }
        .navbar-content img {
          height: 50px;
        }
        .navbar-content nav {
          flex-direction: column;
          gap: 10px;
        }
      }
      .btn{
        border-radius: 15px;
        /* border: 2 solid rgb(0, 140, 255); */
        background-color: rgb(0, 140, 255);
      }
      .mycon{
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;
        font-size: 20px;


      }
      h1{
        color: rgb(0, 140, 255);
        font-weight: bold;
      }
      .ab{
        border-radius: 25px;
       border: 2 solid black;
        font-weight: bold;
        padding: 5px 10px;

      }
      .mycard {
  background-image: url('card1.jpg');
  background-size: cover;              
  background-position: center;         
  width: 100%;
  height: 350px;                       
  border-radius: 5px;
  overflow: hidden;
  position: relative
        }
.card-body {
  position: absolute;       
  bottom: 10px;            
  left: 10px;               
  color: #ffffff;             
  right: 10px;              
  text-align: left;        
}

.cards i {
  margin-right: 35px;    }   

.cards h5 {
  display: inline-block;   
  margin: 0;
  font-size: 35px;
  font-weight: bold;
}
.mycard1 {
  background-image: url('card 1.jpg');
  background-size: cover;              
  background-position: center;         
  width: 100%;
  height: 350px;                       
  border-radius: 5px;
  overflow: hidden;
  position: relative
        }
        .mycard2 {
  background-image: url('card 3.jpg');
  background-size: cover;              
  background-position: center;         
  width: 100%;
  height: 350px;                       
  border-radius: 5px;
  overflow: hidden;
  position: relative
        }
         .mycard3 {
  background-image: url('card 4.jpg');
  background-size: cover;              
  background-position: center;         
  width: 100%;
  height: 350px;                       
  border-radius: px;
  overflow: hidden;
  position: relative
        }
        .bb{
          font-size: 40px;
        }
        .ac{
          display: flex;
          flex-direction: column;
          text-align: center;
      
        }
        h4{
          font-size:50px ;
          color:  #f2a400;
        }
        .sh{
          background-color: rgb(219, 218, 218);
        }
        .blogs-section {
      padding: 40px 20px;
      max-width: 1200px;
      margin: auto;
    }

    .blogs-section h1 {
      text-align: center;
      color: rgb(0, 140, 255) ;
      margin-bottom: 30px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }

    .card {
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .card-content {
      padding: 15px;
    }

    .card-content h2 {
      font-size: 20px;
      margin: 10px 0;
      color: rgb(0, 140, 255) ;
    }

    .card-content p {
      font-size: 15px;
      color: #555;
      text-align: center;
    }
    h3{
      text-align: center;
      color: black;
      font-weight: bold;
    }
       .gg{
        gap: 20px;
        align-items: center;

       }
       .form {
      max-width: 700px;
      margin: 50px auto;
      padding: 20px;
    }

    .form h1 {
      text-align: center;
      margin-bottom: 30px;
      color:rgb(0, 140, 255) ;
      font-weight: bold;
    }

    form {
      display: grid;
      grid-template-columns: 1fr 1fr; 
      gap: 30px; 
    }

    .form-group {
      display: flex;
      flex-direction: column;
    }

    label {
      font-weight: bold;
      margin-bottom: 5px;
    }

    input[type="text"],
    input[type="email"] {
      width: 100%;
      padding: 10px;
      background: #f1f1f1;
      border: none;
      border-bottom: 2px solid #555; 
      outline: none;
      font-size: 15px;
      border-radius: 4px 4px 0 0;
    }

    input[type="text"]:focus,
    input[type="email"]:focus {
      border-bottom-color: #008cff; 
      background: #fff;
    }

    /* responsive: mobile per 1 column */
    @media (max-width: 600px) {
      form {
        grid-template-columns: 1fr;
      }
    }
    .myfoot{
      gap: 30px;
      line-height: 1.9;
      background-color: #ffffff;
    }
    h6{
      font-size: 20px;
      font-weight: bold;
    }
     .myff {
  text-align: center;       
  padding: 20px;
  background: #1b1b1b; 
  color: #555;     
}

.myff h6 {
  margin-bottom: 15px;      
}

.myff .icons {
  display: flex;
  justify-content: center;  
  gap: 15px;               
  font-size: 22px;          
}