/* Responsive Columns */
@media (max-width: 1200px) {
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .col-md-3 {
    width: 25%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-12 {
    width: 100%;
  }
  /* header top  */
  .header-top {
    display: none;
  }

  .cover {
    height: 80vh;
  }
  /* Toggle Button */
  .toggle-btn {
    display: block;
    cursor: pointer;
    font-size: 24px;
    color: var(--white-color);
    position: relative;
    text-align: right;
  }

  /* Open and Close Icons */
  .open-btn.hide {
    display: none;
  }

  /* Show Close Button & Hide Open Button When Menu is Open */
  .show.close-btn {
    display: block;
  }
  .show.open-btn {
    display: none;
  }
  .menu.show {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }

  .menu {
    background: var(--dark-gray);
    position: absolute;
    width: 250px;
    padding: 20px 0;
    top: 65px;
    right: 0;
    visibility: hidden;
    display: none;
    opacity: 0;
    transform: translateX(100%);
    transition: 0.3s ease-in-out;
  }
  .navbar {
    display: flex;
    justify-content: end;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .col-sm-12 {
    width: 100%;
    margin: 10px 0;
  }
  .section-title span {
    font-size: 14px;
    line-height: 25px;
  }
  .section-title h4 {
    font-size: 38px;
    line-height: 57px;
  }
  .section-title h4::after {
    left: 42%;
  }
  .menu {
    
    width: 100%;
    
  }
}

/* Additional Media Queries for Responsiveness */
@media (max-width: 1200px) {
  .hero-text h1 {
    font-size: 60px;
    line-height: 70px;
  }
  .hero-text p {
    font-size: 18px;
    line-height: 28px;
  }
}

@media (max-width: 992px) {
  .hero-text {
    width: 100%;
  }
  .hero-text h1 {
    font-size: 50px;
    line-height: 60px;
  }
  .hero-text p {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 40px;
    line-height: 50px;
  }
  .hero-text p {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (max-width: 576px) {
  .hero-text h1 {
    font-size: 30px;
    line-height: 40px;
  }
  .hero-text p {
    font-size: 12px;
    line-height: 18px;
  }
  .header-info a,
  .header-social a {
    font-size: 14px;
  }
  .services-box h3 {
    font-size: 30px;
    line-height: 40px;
  }
  .services-box p {
    font-size: 14px;
    line-height: 24px;
  }
}