/* =================== google-font-Roboto & Ek-mesirri =================== */
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* font-family: "Roboto", sans-serif; */
/* font-family: "El Messiri", sans-serif; */

    *{
      margin: 0;
      padding: 0;
      border: none;
      box-sizing: border-box;
      text-decoration: none;
      scroll-behavior: smooth;
    }
    
    body {
      background: var(--bg-color);
      font-family: 'Arial', sans-serif;
      color: var(--text-color);
      margin-top: 30px;
    }
    h1,h2,h3,h4,h5{
      font-family: "El Messiri", sans-serif;
    }

    header {
      color: #fff;
      text-align: center;
      padding: 120px 20px;
      box-shadow: 0 0 25px rgba(0, 238, 255, 0.2);
    }
    .blogsite-head{
      background: linear-gradient(rgba(13, 19, 33, 0.756), rgba(31, 36, 45, 0.573)),
        url('../../image/islamic-bg.webp') center/cover no-repeat;
    }
    .raficon-head{
      background: linear-gradient(rgba(13, 19, 33, 0.756), rgba(31, 36, 45, 0.573)),
        url('../../image/tech.webp') center/cover no-repeat;
    }
    .pharma-head{
      background: linear-gradient(rgba(13, 19, 33, 0.756), rgba(31, 36, 45, 0.573)),
        url('../../image/banner1.webp') center/cover no-repeat;
    }
    .bicycle-head{
      background: linear-gradient(rgba(13, 19, 33, 0.756), rgba(31, 36, 45, 0.573)),
        url('../../image/ridestar00.webp') center/cover no-repeat;
    }
    .bus-head{
      background: linear-gradient(rgba(13, 19, 33, 0.756), rgba(31, 36, 45, 0.573)),
        url('../../image/bus00.webp') center/cover no-repeat;
    }

    header h1 {
      font-size: 2.8rem;
      color: var(--main-color);
      margin-bottom: 15px;
    }

    header p {
      font-size: 1.1rem;
      max-width: 700px;
      margin: 0 auto;
      color: #ccc;
    }

    .sections {
      padding: 60px 10%;
      background-color: var(--second-bg-color);
      margin-bottom: 40px;
      border-radius: 20px;
      box-shadow: 0 0 25px rgba(0, 238, 255, 0.1);
    }

    .sections h2 {
      color: var(--main-color);
      margin-bottom: 20px;
      font-size: 1.8rem;
      border-left: 5px solid var(--main-color);
      padding-left: 10px;
    }

    .overview p,
    .learning p {
      color: #ccc;
      font-size: 1rem;
    }

    .tech-list {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 15px;
    }

    .tech-list span {
      color: #000;
      padding: 8px 15px;
      border-radius: 25px;
      font-weight: 600;
      transition: all 0.3s;
    }
    .tech-list .htmls {
      background: #fc2f00;
    }
    .tech-list .css {
      background: #ff00c1;
    }
    .tech-list .bootstrap {
      background: #45dc89;
    }
    .tech-list .java {
      background: #ffd400;
    }
    .tech-list .jQuery {
      background: #eb2186;
    }
    .tech-list .php {
      background: #c200fb;
    }
    .tech-list .mysql {
      background: #52ffb8;
    }
    .tech-list .wordpress {
      background: #52ffb8;
    }
    .tech-list .woo {
      background: #c200fb;
    }
    .tech-list .laravel {
      background: #fb4700;
    }
    .tech-list .react {
      background: #52c0ff;
    }
    
    

    .tech-list span:hover {
      background: none;
      border: 2px solid var(--main-color);
      color: var(--main-color);
      box-shadow: 0 0 15px var(--main-color);
    }

    .features ul {
      margin-left: 20px;
      color: #ccc;
      list-style: square;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    .gallery img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(0, 238, 255, 0.2);
      cursor: pointer;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .gallery img:hover {
      transform: scale(1.05);
      box-shadow: 0 0 25px var(--main-color);
    }

    .buttons {
      margin-top: 25px;
    }

    footer {
      background-color: var(--second-bg-color);
      color: #ccc;
      text-align: center;
      padding: 30px 0;
      font-size: 0.9rem;
      letter-spacing: 0.5px;
      border-top: 1px solid rgba(0, 238, 255, 0.2);
    }

    .back-btns {
      display: inline-block;
      margin-top: 2%;
      margin-bottom: 2%;
      padding: 10px 25px;
      border: 2px solid var(--main-color);
      border-radius: 30px;
      text-decoration: none;
      color: var(--main-color);
      font-weight: 600;
      transition: all 0.3s;
    }

    .back-btns:hover {
      background-color: var(--main-color);
      color: #000;
      box-shadow: 0 0 20px var(--main-color);
    }

    /* Lightbox */
    .lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .lightbox img {
      max-width: 80%;
      border-radius: 10px;
      box-shadow: 0 0 25px var(--main-color);
    }

    .lightbox.active {
      display: flex;
    }

    @media (max-width: 768px) {
      header h1 {
        font-size: 2.2rem;
      }
      section {
        padding: 40px 8%;
      }
    }