* {
  box-sizing: border-box;
  margin: 0;
}

@media screen and (min-width: 360px) and (max-width: 576px) {
  /*header and hero section  */
  body {
    font-family: var(--primaryFont);
  }
  .main {
    width: 100%;
    margin: auto;
    background-size: cover;
    height: 100vh;
    padding: 0px;
    background-position: top;
  }

  .mobile_header {
    padding: 0px 32px;
    display: block;
  }
  /* .navbar{
		margin-top: 20px;
	} */
  .logo-link {
    margin-top: 20px;
    width: 160px;
    height: 77px;
    position: static;
  }
  .mobile-side-menu-link i {
    background-color: var(--contrastColor);
    font-size: 20px;
    padding: 14px;
    border-radius: 50%;
    box-shadow: 2px 0 4px var(--headingColor);
  }

  .dropdown {
    left: 0;
    top: 0;
    right: 0;
    /* display: block; */
  }

  .mobile-navbar-dropdown {
    /* display: none; */
    opacity: 0;
    overflow: hidden;
    max-height: 0;
    transition: 500ms ease-out;
    position: absolute;
    inset: 0 0 0 0;
  }

  .mobile-navbar-dropdown.active {
    transition: 500ms ease-out;
    opacity: 1;
    max-height: 1000px;
    /* display: block; */
  }

  .inner-logo {
    padding: 0px 32px;
  }

  .nav-link {
    font-size: 24px;
    text-align: center;
  }
  .header {
    display: none;
  }

  .container {
    width: 100%;
  }

  .slick-prev {
    /* left: 14px; */
    left: 20px;
    z-index: 1;
  }
  .slick-next {
    /* right: 22px; */
    right: 32px;
  }
  /* grid section */
  

  .mobile-grid {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .grid {
    display: none;
  }

  .milk-bottle{
    display: none;
  }
  .mobile-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 500ms ease-in-out;
  }

  .m-item3 {
    grid-row: 2;
    grid-row-end: 4;
  }

  .img-container {
    height: 100%;
  }

  .img-container:hover img {
    transform: scale(1.1);
  }

  .overlay-content-wrapper h3{
    font-size: 18px;
  }

  .overlay-content-wrapper p{
    font-size: 14px;
  }
  .news-section {
    flex-direction: column;
  }

  .latest-news{
    margin-top: -130px;
  }
  .news-content{
  bottom:40px;
  padding-bottom: 10px;
}
  .news-content-img {
    height: 308px;
  }
  .news-right {
    margin-top: 8px;
  }

  .news-content p{
    font-size: 18px;
  }

  .footer-nav {
    flex-direction: column;
  }

  .social-wrapper {
    flex-direction: column;
    margin: 132px 0px 12px 0px;
  }

  .social-logo-link {
    position: absolute;
    top: -230px;
    left: -132px;
    width: 255px;
    height: 150px;
  }

  .social-logo-link img{
    width: 100%;
    transform: rotateZ(-12deg);
  }
  .social-icons {
    flex-direction: column-reverse;
  }
  .social-icons-container {
    margin-top: 14px;
  }

  .subscribe {
    width: 100%;
  }

  .plane-icon-bg{
    width: 34%;
    top:-32px;
    right: 0;
  }

  .verse-content {
    flex-direction: column; /* Stack slider and image vertically */
  }

  .verse-slider,
  .verse-right-content,.rocket-img-wrapper {
    width: 100%;
  }

  .verse-right-content{
    background-image: none;
    margin-top: 200px;
  }
  .v-slide-content-wrapper .arabic-title{
    font-size: 32px;
  }
  .v-slide-content-wrapper .v-content-detail{
    font-size: 24px;
  }
  .rocket-img-wrapper{
    height: auto;
  }
  .rocket-img-wrapper img{
    height: 600px;
  }

  .verse-s-slider {
    height: 200px; /* Reduce height for smaller screens */
  }

  .v-slick-prev,
  .v-slick-next{
    top:-18px;
  }

  .v-slick-prev{
    left: auto;
    /* right: 52px; */
    right: 62px;
  }

  .v-inner-slider h2{
    padding: 20px 24px;
    font-size: 26px;
  }

  .youtube-btn-link{
    padding: 4px 50px;
  }

}