/* Small devices (landscape phones, 576px and up) */
@media (width <= 575px) {
  #header-top .container .row .header-top-left p {
    display: none;
  }
  #header-top .container .row .header-top-right {
    width: 100%;
    text-align: center;
  }
  #banner .container .row .col-md-6 .ayat-block {
    margin-top: 45px;
  }
  .navbar-toggler {
    margin-left: 10%;
  }
  #header-nav .container .row .col-md-12 .navbar .container-fluid .donate-btn {
    margin: 10px auto;
  }
  #footer .container .row .col-sm-6 .important-links {
    margin-left: 26%;
  }
  #footer .container .row .col-sm-6 .contact-us-list {
    margin-left: 6%;
  }
  #blog .container .row .col-md-12 h2,
  #gallery .container .row .col-md-12 h2,
  #contact-us .container .row .col-md-12 h2 {
    font-size: 24px;
  }
  #contact-us .container .row .col-md-12 form .col-md-5 textarea {
    width: 300px;
  }
  /* #footer .container .row .col-md-4 {
    text-align: center;
  } */
  #footer .container .row .col-md-4 ul {
    margin-left: 25px;
    list-style: none;
  }
  #footer .container .row .col-md-4 .contact-us-list {
    margin-left: -15px;
  }
  #footer .container .row .col-mobile {
    display: flex;
    flex-direction: column;
  }
  #copyright-claim .container .row .col-md-12 p {
    font-size: 8px;
  }
  /* Maktab Page Start */
  #team-card .container .row .col-md-6 .card {
    margin: 10px auto;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (576px <= width <= 768px) {
  #header-top .container .row .header-top-left p {
    display: none;
  }
  .navbar-toggler {
    margin-left: 25%;
  }
  #header-nav .container .row .col-md-12 .navbar .container-fluid .donate-btn {
    margin: 10px auto;
  }
  #header-top .container .row .header-top-right {
    width: 100%;
    text-align: center;
  }
  #banner .container .row .col-md-6 .ayat-block {
    margin-top: 220px;
  }
  #contact-us .container .row .col-md-12 form .col-md-5 textarea {
    width: 460px;
  }
  #footer .container .row .col-md-4 ul {
    margin-left: 48px;
    list-style: none;
  }
  #footer .container .row .col-md-4 .contact-us-list {
    margin-left: 0px;
  }
  #footer .container .row .col-mobile {
    display: flex;
    flex-direction: column;
  }
  #footer .container .row .col-md-4 ul {
    margin-left: 50px;
    list-style: none;
  }
  #footer .container .row .col-md-4 .contact-us-list {
    margin-left: 4px;
  }
}
/* Large devices (desktops, 992px and up) */
@media (769px <= width <= 992px) {
  #header-top .container .row .header-top-left p {
    display: none;
  }
  #header-top .container .row .header-top-right {
    width: 100%;
    text-align: center;
  }
  .navbar-toggle {
    display: block;
  }
  #header-nav .container .row .col-md-9 .navbar .container-fluid .navbar-nav a {
    color: white;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
  }
  #banner .container .row .col-md-6 .ayat-block {
    margin-top: 50%;
  }
  #header-nav .container .row .col-md-12 .navbar .container-fluid .donate-btn {
    margin: 10px auto;
  }
  #header-nav .container .mobile-nav {
    display: block;
  }
  #footer .container .row .col-md-4 ul {
    margin-left: 90px;
    list-style: none;
  }
  #footer .container .row .col-md-4 .contact-us-list {
    margin-left: 40px;
  }
  #footer .container .row .col-mobile {
    width: 50%;
    text-align: start;
  }
  #contact-us .container .row .col-md-12 form .col-md-5 textarea {
    width: 235px;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (992px <= width <= 1200px) {
  #header-nav .container .row .col-md-12 .navbar .navbar-collapse .navbar-nav {
    margin-left: 35px;
  }
  #header-nav
    .container
    .row
    .col-md-12
    .navbar
    .navbar-collapse
    .navbar-nav
    li
    a {
    color: white;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
  }
  #header-top .container .row .header-top-right {
    width: 50%;
    text-align: end;
  }
  #header-top .container .row .header-top-left p {
    display: flex;
  }

  #blog .container .row .col-md-12 h2,
  #gallery .container .row .col-md-12 h2,
  #contact-us .container .row .col-md-12 h2 {
    font-size: 40px;
  }
  #contact-us .container .row .col-md-12 form .col-md-5 textarea {
    width: 335px;
  }
  #footer .container .row .col-md-4 ul {
    margin-left: 117px;
    list-style: none;
  }
  #footer .container .row .col-md-4 .contact-us-list {
    margin-left: 67px;
  }
  #copyright-claim .container .row .col-md-12 p {
    font-size: 12px;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1201px) {
  /* #contact-us .container .row .col-md-12 form .col-md-5 textarea {
    width: 490px;
  } */
}