/* Islam */
.hero {
   padding: 7rem 0 10rem 0;
   background: linear-gradient(to bottom right, #C9E7F2, #62BADA);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   min-height: 100vh;
   display: flex;
   align-items: center;
}

.dark-mode .hero {
   background: linear-gradient(to bottom right, #144c5d, #1c004f);
}

.containerhero {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
   align-items: center;
   width: 100%;
}


.heroText h2 {
   font-family: "Open Sans";
   font-weight: lighter;
   font-size: 3rem;
   margin: 0.5rem 0;
}

.heroText h1 {
   color: var(--primary);
   font-weight: bold;
   font-family: "Open Sans";
   font-size: 3.5rem;

   margin: 0px;
}

.heroText p {
   font-size: 1rem;
   line-height: 1.6;
   margin-bottom: 1.875rem;
   color: var(--text-gray);
   font-weight: 625;
}



.feature-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 1rem;
   color: var(--primary);
}

.feature-item i {
   color: var(--primary);
   font-size: 1.2rem;
}


.containerbutton {
   display: flex;
   gap: 1.5rem;
   align-items: center;
   margin-bottom: 2rem;
}

.btn-primary {
   background-color: var(--primary);
   color: var(--body-bg);
   padding: 0.75rem 1.5rem;
   border: none;
   border-radius: 1rem;
   cursor: pointer;
   width: 17.1875rem;
   height: 4.25rem;
   font-size: 1rem;
   transition: all 0.3s ease;
}

.btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(55, 52, 169, 0.3);
}

.btn-video {
   display: flex;
   align-items: center;
   color: var(--primary);
   font-weight: 600;
   text-decoration: none;
   gap: 0.5rem;
   font-size: 1.1rem;
   transition: all 0.3s ease;
}

.btn-video:hover {
   scale: 1.05;
}

.btn-video i {
   font-size: 1.8rem;
   transition: all 0.3s ease;
}


.heroImages {
   position: relative;
   height: 100%;
}

.mainImageWrapper {
   position: relative;
   height: 100%;
}

.mainImage {
   width: 20rem;
   height: 30rem;
   border-radius: 50% 50% 50% 50% / 30% 30% 30% 30%;
   box-shadow: 0 .625rem 1.875rem rgba(0, 0, 0, 0.1);
   /* overflow: hidden; */
   position: relative;
   transition: all .4s;
}

#mainImage {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: inherit;
   transition: all .4s ease-in-out;
}

.sideImage {
   position: absolute;
   top: 59%;
   right: 0;
   transform: translateY(-50%);
   width: 13.75rem;
   height: 23.125rem;
   object-fit: cover;
   border-radius: 3.125rem;
   transition: all .4s; 
}

.gallery {
   display: flex;
   gap: 0.7rem;
   margin-top: -3rem;
   background: rgba(255, 255, 255, 0.8);
   padding: 0.8rem;
   border-radius: 1rem;
   box-shadow: 0 .125rem .625rem rgba(0, 0, 0, 0.05);
   width: fit-content;
   position: absolute;
   right: 50%;
   transform: translateX(50%);
   z-index: 1;
}

.dark-mode .gallery {
   background: rgba(22, 21, 41, 0.8);
   box-shadow: 0 .125rem .625rem rgba(0, 0, 0, 0.1);
}

.gallery .thumb {
   width: 4.375rem;
   height: 4.375rem;
   object-fit: cover;
   border-radius: 1rem;
   cursor: pointer;
   transition: all 0.3s ease;
}

.gallery .thumb:hover {
   transform: scale(1.05);
   box-shadow: 0 .25rem .75rem rgba(0, 0, 0, 0.1);
}

.features-bar {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 2rem;
   padding: 1rem 1rem;
   background: #e3f2f8;
   border-radius: 1rem;
   width: fit-content;
   flex-wrap: wrap;
   box-shadow: 0 .125rem .625rem rgba(0, 0, 0, 0.1);
}

.dark-mode .features-bar {
   background: #267798;
}

.feature {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   color: var(--text-gray);
}

.feature span:first-child {
   color: var(--primary);
}




@media (max-width: 992px) {
   .containerhero {
      grid-template-columns: 1fr;
      text-align: center;
   }

   .heroText {
      padding-right: 0;
   }

   .features {
      margin: 0 auto;
      font-size: 0.8rem;
   }

   .features-bar {
      gap: 1rem;
      padding: 1rem;
      margin: auto;
   }

   .containerbutton {
      justify-content: center;
   }

   .mainImage {
      margin: 0 auto;
   }

   .sideImage {
      right: 10%;
   }

   .gallery {
      right: 50%;
      transform: translateX(50%);
   }

   .sideImage {
      display: none;
   }
}

@media (max-width: 768px) {
   .hero {
      min-height: auto;
   }

   .heroText h2 {
      font-size: 2.8rem;
   }

   .heroText h1 {
      font-size: 2.2rem;
   }

   .mainImage {
      width: 18rem;
      height: 27rem;
   }

   .sideImage {
      display: none;
   }

}

@media (max-width: 576px) {
   .heroText h2 {
      font-size: 2.2rem;
   }

   .heroText h1 {
      font-size: 1.8rem;
   }

   .heroText p {
      font-size: 0.9rem;
   }

   .mainImage {
      width: 16rem;
      height: 24rem;
   }

   .gallery .thumb {
      width: 3.5rem;
      height: 3.5rem;
   }

   .containerbutton {
      flex-direction: column;
      gap: 1rem;
   }

   .btn-video {
      justify-content: center;
   }

}

/*testimonial*/



.brands-section {
   top: .3125rem;
   padding: 4rem 0 0 0;
   position: relative;
   top: -6.6875rem;

}

.container-brands {
   background-color: #ebfaff;
   width: 100%;
   max-width: 75rem;
   margin: 0 auto;
   padding: 0 1rem;
   box-shadow: 0 .125rem .625rem rgba(0, 0, 0, 0.1);
   border-radius: 1rem;
}

.dark-mode .container-brands {
   background-color: #005371;
   color: #fff;
}

.brands-box {
   padding: 2rem;
   border-radius: 1rem;
   text-align: center;
   max-width: 60.125rem;
   width: 100%;
   margin: 0 auto;
   animation: fadeInUp 1s ease-in-out;
}

.brands-box p {
   font-size: 1.5rem;
   margin-bottom: 2rem;
   line-height: 1.5;
}

.brands-box .highlight {
   color: var(--primary);
   font-weight: 700;
}

.brands-box strong {
   font-weight: 600;
}

.logo-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 2rem;
   align-items: center;
}

.logo-grid img {
   max-height: 2.5rem;
   width: auto;
   object-fit: contain;
   filter: grayscale(100%);
   opacity: 0.8;
   transition: all 0.3s ease;
}

.logo-grid img:hover {
   filter: grayscale(0);
   opacity: 1;
}

@keyframes fadeInUp {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width: 992px) {
   .container-brands {
      padding: 1.5rem;
   }

   .logo-grid {
      gap: 1rem;
   }

   .container-brands {
      max-width: 50rem;
   }
}

@media (max-width: 768px) {
   .brands-section {
      padding: 2rem 1rem;
   }

   .container-brands {
      padding: 1.25rem;
   }

   .brands-box p {
      margin-bottom: 1.5rem;
   }

   .container-brands {
      max-width: 100%;
      padding: 1.5rem;
   }
}

@media (max-width: 576px) {
   .brands-section {
      padding: 1.5rem 0.5rem;
   }

   .container-brands {
      padding: 1rem;
   }

   .logo-grid {
      gap: 0.75rem;
   }

   .brands-section {
      padding: 1rem 0.5rem;
      margin-top: 0;
   }

   .container-brands {
      max-width: 100%;
      padding: 1rem;
   }

   .brands-box {
      padding: 0.5rem;
   }

   .brands-box p {
      font-size: 0.9rem;
      margin-bottom: 1rem;
      line-height: 1.4;
   }



   .logo-grid img {
      max-height: 1.25rem;
   }
}

@keyframes fadeInUp {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}






/*what to do*/
.what-we-do {
   text-align: center;
}

.what-we-do h2 {
   font-size: 2.5rem;
   font-weight: bold;
   margin-bottom: 2.5rem;
}

.cards {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
      "shop measure"
      "sell deliver";
   gap: .75rem 1.25rem;
   margin: 0 auto;
   padding: 1.875rem 2.5rem;
   background: var(--gray);
   box-shadow: 0 .25rem .75rem rgba(0, 0, 0, 0.05);
   border-radius: 1rem;
   box-sizing: border-box;
}

.cards .card {
   display: flex;
   align-items: flex-start;
   gap: 1.25rem;
   background: transparent;
   padding: .625rem;
   box-sizing: border-box;
}

.shop {
   grid-area: shop;
}

.measure {
   grid-area: measure;
}

.sell {
   grid-area: sell;
}

.deliver {
   grid-area: deliver;
}

.icon {
   width: 5rem;
   height: 5rem;
   border-radius: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.icon img {
   width: 3.125rem;
   height: 3.125rem;
   object-fit: contain;
}


.bg-peach {
   background: #fdeee6;
}

.bg-purple {
   background: #eee9fd;
}

.bg-blue {
   background: #e6f2fd;
}

.bg-green {
   background: #e8fdeb;
}

.content {
   text-align: left;
}

.content h3 {
   margin: 0 0 .5rem;
   font-size: 1.5rem;
   font-weight: 700;
   font-family: 'Open Sans', sans-serif;
   letter-spacing: .0313rem;
}

.content p {
   margin: 0;
   color: var(--text-gray);
   font-size: 1rem;
   line-height: 1.5rem;
   letter-spacing: .0187rem;
}

@media (max-width: 1024px) {
   .cards {
      width: 100%;
      height: auto;
      padding: 1.5rem;
      grid-template-columns: 1fr;
      grid-template-areas:
         "shop"
         "measure"
         "sell"
         "deliver";
   }

   .card {
      padding: 1rem 0;
   }
}

@media (max-width: 600px) {
   .what-we-do {
      padding: 3rem 1rem;
   }

   .cards {
      gap: 1rem;
      padding: 1rem;
   }

   .icon {
      width: 3.5rem;
      height: 3.5rem;
   }

   .icon img {
      width: 2rem;
      height: 2rem;
   }

   .content h3 {
      font-size: 1.25rem;
   }

   .content p {
      font-size: 0.95rem;
      line-height: 1.4rem;
   }
}

/* Islam */

/* Mohamed */
.text-header {
   text-align: center;
}

/*-----testimonials------*/

.testimonials-slider {
   position: relative;
   min-height: 17rem;
   overflow: hidden;
}

.slider-content {
   position: absolute;
   display: flex;
   flex-direction: column;
   width: 30%;
   margin: 2rem 0;
   margin-left: 20px;
   gap: 2rem;
   padding: 1rem;
   border-radius: 1rem;
   background-color: var(--gray);
   transition: all 1s;
}

.customer-details {
   display: flex;
   align-items: center;
   position: relative;
   margin-top: 20px;
   gap: 1rem;
}

.customer-details::after {
   position: absolute;
   content: "";
   left: 0;
   top: -25px;
   width: 84px;
   height: 2px;
   border-radius: 10px;
   background: var(--primary);
   background: linear-gradient(90deg,
         rgba(55, 52, 169, 1) 0%,
         rgba(55, 52, 168, 0) 100%);
}

.customer-details>.customer>span {
   font-size: 0.75rem;
   color: var(--secondary-color);
}

.customer-details>img {
   width: 40px;
}

.btn-testimonials {
   text-align: center;
}

.testimonials .btn {
   margin: 1rem;
   text-align: center;
   padding: 0.75rem 1.5rem;
   border-radius: 10px;
   border: none;
   background-color: var(--primary);
   color: var(--body-bg);
   cursor: pointer;
   width: fit-content;
}

.dots {
   display: flex;
   justify-content: center;

   margin: 0.75rem 0;
}

.dots__dot {
   border: none;
   background-color: #b4b4b4;
   opacity: 0.7;
   height: 0.5rem;
   width: 0.5rem;
   border-radius: 50%;
   margin-right: 0.25rem;
   cursor: pointer;
   transition: all 0.5s;
}

.dots__dot:last-child {
   margin: 0;
}

.dots__dot--active {
   background-color: var(--primary);
   width: 25px;
   border-radius: 10px;
   opacity: 1;
}

/*-----question----*/

.question-container {
   display: flex;
   justify-content: space-between;
   margin-top: 3rem;
}

.question-row1 {
   width: 55%;
}

.question-text {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   background-color: var(--gray);
   margin: 1rem;
   padding: 1.5rem;
   border-radius: 15px;
}

.question-text>img {
   width: 10px;
   cursor: pointer;
}
.question-text button{
   background: var(--body-bg);
   padding: 0.5rem 1rem;
   border: none;
   color: var(--text-gray);
   border-radius: 0.5rem;
}

.show-more i {
   transition: all 1s;
}

.show-more i.rotat {
   transform: rotate(180deg);
}

.moreQuestions {
   display: flex;
   flex-direction: column;
   align-items: center;
   height: fit-content;
   padding: 3rem;
   border-radius: 10px;
   border: 1px solid var(--primary);
   width: 40%;
}

.moreQuestions>p {
   text-align: center;
}

.qa-img {
   width: 40px;
   margin-bottom: 1rem;
}
.dark-mode .qa-img {
   filter: invert(99%) sepia(1%) saturate(0%) hue-rotate(134deg) brightness(102%) contrast(102%);
}


.message {
   max-height: 0px;
   transition: 0.5s;
   margin-top: 10px;
   overflow: hidden;
   color: var(--secondary-color);
   font-size: 0.89rem;
}
.show {
   max-height: 500px;
}

.question-btn {
   margin-top: 3rem;
   padding: 0.75rem 1.5rem;
   border-radius: 0.4rem;
   border: none;
   background-color: var(--primary);
   color: var(--body-bg);
   cursor: pointer;
}

/* Mohamed */

@media (max-width: 992px) {
  .question-container {
    margin-top: 3rem;
  }
  .newsletter {
    margin: 2rem;
  }
  .newsletter-container {
    margin: 1rem 0;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 0.75rem;
  }
  .footer-body {
    flex-direction: column;
    gap: 2rem;
    align-items: start;
  }
  .row1 {
    width: 70%;
  }
  .row2 {
    width: 70%;
  }
  .slider-content {
    width: 45%;
  }
  .testimonials-slider {
    min-height: 18rem;
  }
  .question-container {
    flex-direction: column;
  }
  .question-row1 {
    width: 100%;
  }
  .moreQuestions {
    width: 100%;
  }
  .newsletter {
    margin: 0;
  }
  .newsletter-container {
    margin: 1rem 0;
  }
  .newsletter-container > input {
    width: 65%;
  }
  .newsletter-btn {
    width: 33%;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 0.5rem;
  }
  .footer-body {
    padding: 2.5rem 15px;
  }
  .row1 {
    width: 100%;
  }
  .row2 {
    width: 100%;
  }
  .slider-content {
    width: 90%;
  }
  .question-container {
    flex-direction: column;
  }
  .question-row1 {
    width: 100%;
  }
  .moreQuestions {
    width: 100%;
  }
}