header , nav , main , footer {
  font-family: 'Harmattan';
}
.offcanvas-body ul {
  padding: 0px !important;
}
header{
    height: 39px;
    background-color:#CE9461;
}
.dash{
    margin: 0 0 0 5px;
}
.links-header{
    padding-top: 8px;
    padding-bottom: 2px;
    font-size: 16px;
    font-weight: 500;
}
.links-header a , .links-header2 a{ 
    margin:0 10px;
    text-decoration: none;
    color: black;
}
 .nav {
      background-color: white;
    }
    .navbar-toggler{
      border: none !important;
    }
    .navbar-brand img {
        width: 198.40402221679688px;
    height:52.360198974609375px;
    }
    .icon-btn {
      border-radius: 50%;
      padding: 10px;
      margin-left: 10px;
      position: relative;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .icon-btn i {
      color: white;
    }
    .badge-notify {
      position: absolute;
      top: -4px;
      right: -4px;
      background-color: #1c2e2a;
      color: white;
      border-radius: 50%;
      font-size: 10px;
      padding: 2px 5px;
    }
    .menu-icon {
      background-color: #1c2e2a;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .menu-icon i {
      color: white;
      font-size: 20px;
    }
    .nav-link.active {
    border-bottom: 2px solid #BD845A;
    padding-bottom: 2px !important;
    font-size: 24px !important;
    font-weight: 400;
      font-family: 'Harmattan', sans-serif;
    opacity: 100%;
    }
   .dropdown-menu{
    background-color: #1E3231 !important;
    }
    .dropdown-item:hover{
    background-color: #142020 !important;
    }
    .dropdown-item{
        color: white !important;
        font-size: 18px;
        line-height: 22px;
        font-weight: 600;
    }
    .links{
        display: flex;
    }
   .nav-link{
    font-size: 21px !important;
    font-weight: 400;
    color:#000000B2;
    opacity: 70%;
    }
    .offcanvas .nav-item{
        border-bottom: 1px solid #FFFFFF36;
        font-size: 18px;
        font-weight: 500;
      padding:5px;
    }
    .offcanvas .nav-link{
        color: white !important;
        opacity: 1;
        font-size: 18px !important;
        line-height: 22px !important;
        font-weight: 500;
    }
    .btn-close{
        --bs-btn-close-opacity: 1 !important;
    }
    .btn-close:hover{
        --bs-btn-close-opacity: 0.5 !important;
    }
    .offcanvas .nav-link:hover{
        border-bottom: 1px solid rgb(112, 111, 111);
        background-color: #142020;
    }
    .dropdown .dropdown-item{
        border-bottom: 1px solid rgb(121, 118, 118);
        text-align: center;
        padding-bottom: 10px;
    }
   .activeSearch.input{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 50%;
   background-color: transparent;
    color:#17312e ;
    z-index: 100;
   }
    @media (min-width:768px) and (max-width:1390px){
      .star-sec1{
     display: none;
    }
    }
    @media (max-width:767px){
      .star-sec1{
  position: absolute;
      left: 30px !important;
      top:30px !important;
      width: 25px !important;
    }
    }
      @media (min-width:768px) and (max-width:991px){
      .star-sec1{
     display: none;
    }
  }

    /* section 1 */

    #section1{
        color: white;
        background-color: #1E3231 ;
        position: relative;
    }
    .contain-all-sec1{
      padding-top: 1.5rem;
    }
    .contain-sec1{
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .btn-custom{
      width: 218px !important;
      height: 56px !important;
      border:1px solid rgba(255, 245, 224, 1) !important; 
      border-radius: 41px !important;
      justify-content: space-around;
      transition: 0.3s;
    }
    .btn-custom:hover{
      background-color:rgba(238, 222, 188, 0.452) !important ;
      color: #559996 !important;
    }
     .star-sec1{
      position: absolute;
      left: 590px;
      top:120px;
      width: 39px;
    }
    .section1-image2{
      position: absolute;
      top: 20px;
      left:360px;
    }
    .section1-image3{
      position: absolute;
      z-index: 100;
      bottom: 70px;
      left:160px;
    }
    .btn-section1{
      color:rgba(238, 222, 188, 1)  ;
      font-size: 22.31px !important;
      font-weight: 500;
      text-align: center;
      white-space: nowrap;
      font-family: 'Harmattan' !important;
    }
    .img-frame{
  position: relative;
  border: 0.1px solid rgb(150, 146, 141,0.8) !important; 
  border-top-left-radius: 250px;
  border-top-right-radius: 250px;
  height: 511px;
  max-width: 420px;
  background: transparent;
  margin-inline: auto;
  overflow: visible; /* مهم علشان الصورة تطلع بره */
  
}

/* الصورة فوق الإطار ونازلة شوية */
.img-frame > img{
  position: absolute;
  top: 12px; /* نزلها لتحت */
  left: 46%;
  transform: translateX(-50%);
  width: 110%; /* أكبر شوية من الإطار */
  height: auto;
  z-index: 2;
}

/* الإطار نفسه كخلفية وهمية */
.img-frame::before{
  content: '';
  position: absolute;
  inset: 0;
  border:0.1px solid rgb(150, 146, 141,0.3);
  border-top-left-radius: 250px;
  border-top-right-radius: 250px;
  z-index: 1;
}
    .i-arrow-sec1{
     background-color: rgba(255, 245, 224, 1) ;
     align-items: center;
     text-align: center;
    border-radius: 50%;
   
    /* font-size: 30px !important;
      font-weight: bold !important; */
    }
    .text1-section{
        font-size: 32px;
        font-weight: 400;
        color: #CE9461;
    }
   .image1 .image-flower1{
    position: absolute;
    right: 40px;
    top:100px;
        margin-right: 20px;
        z-index: 1;
    }
    .hero-heading{
        font-size: 48px;
        font-weight: 600;
        line-height: 72px;
    }
    .paragraph-section{
        font-weight: 200;
        font-size: 18px ;
        color:rgba(255, 255, 255, 0.7) ;
        line-height: 29px;
        width: 591px;
    }
    .hero-heading span.highlight {
      background-color: #fff6e5;
      color: #0f2b28;
      padding: 0 8px;
      border-radius: 4px;
    }
    .section1-flower2{
      position: absolute;
      left:0px !important;
      bottom:50px !important;
      max-height: 400px;
    }
    .img-section1{
  position: absolute;
    background-color: transparent;
    top: 8%;
    right:15%;
    height: 511px;
    border: 1px solid white;
      border-top-left-radius: 250px;
    border-top-right-radius: 250px;
    }
    .text-sec1{
      margin-right:700px;
    }
    .section-image2{
      position: absolute;
      top:0;
    }
    .vector-sec1{
      height: 10px;
      cursor: pointer;
    }
    @media (max-width: 991px) {
     .navbar-brand img {
    width: 118.02072143554688px;
    height:31.711261749267578px;
    }
    .icon-btn img{
    width:29px;
    height:29px;
    margin: 0 !important;
    }
    .dropdown img{
    width:29px;
    height:29px;
    margin-top: 8px !important;
    }
    .dropdown{
    width: 100% !important;
    height: 100%;
    }
    }
    @media (max-width:1450px) {
  .section-image1{
  position: static !important;
  width: 100% !important;
    }
    .img-section1{
  position: static !important;
    top: 8%;
    right:15%;
    height: 511px;
    border: 1px solid white;
      border-top-left-radius: 250px;
    border-top-right-radius: 250px;
    }
    .text-sec1{
      text-align: right;
      width: 100%;
      margin-right:0px !important;
      padding-top: 5%;
    }
            .photo-left-sec1{
  position: static !important;
      display: flex;
      justify-content: space-between;
    }
    .section1-image2{
      padding-top: 60px;
      padding-left: 20px;
      padding: 60px 0px 0px 20px;
  position: static !important;
    }
    .section1-image3{
  position: static !important;
    }
    .btn-custom{
      margin-top: 5%;
    }
    }
    @media (max-width: 768px) {
  .navbar-nav {
    align-items: normal;
  }
      .user ,.favorite ,.links {
        display: none;
      }
      .links-header2{
        display: none;
      }
    }
    @media (max-width:805px) {
    .section1-image2{
      width: 45%;
    }
   .section1-image3 {
    width: 50%;
    height: 40%;
   }
        .i-arrow-sec1{
    border-radius: 50%;
    }
            .text-sec1{
          padding: 5%;
    }
      .text1-section {
        font-size: 20px !important;
        
      }
      .hero-heading{
        font-size: 28px !important;
      }
      .paragraph-section{
        font-size: 14px !important;
        line-height: 20px;
      }
      .section1-flower{
        top:0 !important;
      }
      .img-section1{
        width:60%;
        height:40% ;
      }
      .section-image1{
        width: 100%;
        height:100% ;
      }
    }
    @media (min-width:805px) and (max-width:1347px) {
.small-img-sec1{
  display: none;
}
    }
       @media (max-width:450px) {
         .img-section1{
        width:70% !important;
        height:35% !important;
      }
      .section-image1{
        width: 100% !important;
        height:100% !important;
      }
    }
    @media(max-width:402px){
        .hero-heading {
    font-size: 25px !important;
  }
    }

    #section1{
  color:#fff;
  background-color:#1E3231;
  position:relative;
  padding-top:2rem;
  overflow:hidden;
}

/* الزخارف */
.section1-flower{
  position:absolute; 
  right:14%;
   top:20%; 
  max-height:380px; 
  pointer-events:none;
}
@media (max-width:991px) {
  #section1{
    padding-top: 0 !important;
  }
  .contant-left-sec1{
  margin-top:0% !important ;
  padding-bottom:0% !important ;
}
.sec1-btn-more{
  padding-top:5% !important ;
  padding-bottom: 11% !important;
}
.contain-all-sec1{
  padding-bottom: 10% !important;
}
/* .paragraph-section{
  padding-bottom: 20% !important;
} */
}
@media (max-width:1785px) {
  .section1-flower{
  position:absolute; 
  right:12%;
   top:20%; 
  max-height:380px; 
  pointer-events:none;
}
}
@media (max-width:1715px) {
  .section1-flower{
  position:absolute; 
  right:10%;
   top:20%; 
  max-height:380px; 
  pointer-events:none;
}
}
@media (max-width:1623px) {
  .section1-flower{
  position:absolute; 
  right:7%;
   top:20%; 
  max-height:380px; 
  pointer-events:none;
}
.section1-image2 {
  position: absolute;
  top: 5px;
  left: 250px;
}
}
@media (max-width:1497px) {
  .section1-flower{
  position:absolute; 
  right:4%;
   top:20%; 
  max-height:380px; 
  pointer-events:none;
}
}
@media (max-width:1175px) {
  .section1-flower{
  position:absolute; 
  right:1%;
   top:20%; 
  max-height:380px; 
  pointer-events:none;
}
}
@media (max-width:500px) {
  .section1-flower{
  position:absolute; 
    right:-12% !important;
   top:0% !important; 
  width:280px; 
  pointer-events:none;
}
}

.section1-flower2{
  position:absolute; left:0; bottom:60px; max-height:380px; pointer-events:none;
}

/* الإطار البيضاوي للصورة الرئيسية */
.img-frame{
  position:relative;
  height: 511px;
  max-width: 420px;
}
.img-frame > img{
  width: 220px;
  height:100%;
}

/* نصوص */
.text1-section{ font-size:32px; font-weight:400; color:#CE9461; }
.hero-heading{ font-size:48px; font-weight:600; line-height:1.3; }
.paragraph-section{ font-weight:300; font-size:18px; color:rgba(255,255,255,.8); line-height:1.7; max-width: 600px; }
.hero-heading .highlight{ background:#fff6e5; color:#0f2b28; padding:0 .5rem; border-radius:4px; }

/* زر رئيسي */

.btn-custom:hover{ background:rgba(238,222,188,.45); color:#559996; }
.btn-section1{ color:rgba(238,222,188,1); font-size:20px; font-weight:800; }
.i-arrow-sec1{
  background:rgba(255,245,224,1); padding:10px; border-radius:50%; font-size:28px; font-weight:700;
}

/* زر السهم السفلي للتبديل */
.btn-arrow-next{
  width:44px; height:44px; border:1px solid #fff; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent;
}
.btn-arrow-next .material-icons{ font-size:22px; }

/* صور صغيرة جوار الزر */

/* مؤشرات الكاروسيل */
.carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%;
}

/* Responsiveness */
@media (max-width: 991.98px){ /* md وأقل: فوق بعض */
  .img-frame{ height:500px; }
  .text1-section{ font-size:22px; }
  .hero-heading{ font-size:28px;line-height: 52px;}
  .paragraph-section{ font-size:14px; line-height:24px; font-weight: 400;width: 318px; height: 58.2432975769043px; }
  .section1-flower{ top:4%; right:4%; max-height:260px; }
  .section1-flower2{ max-height:240px; }
}
@media (min-width:576px) and (max-width:991px) {
  
}

@media (max-width: 575.98px){
  .img-frame{ height:327.51220703125px !important; max-width: 299px; }
  .btn-custom{ height:45.24964141845703px !important; width:140.57142639160156px !important; }
    .btn-section1{ font-size:15px !important; font-weight: 400 !important;}
  .i-arrow-sec1{ width: 35px !important; height: 35px !important;margin-right: 15% !important; }
  .hero-heading{ font-size:28px; }
   .section1-image3 {
    margin-top: -9px !important;
    width: 72.23932647705078px;
    height: 77.3178482055664px;
  }
   .section1-image2 {
 width: 57%;
    padding-right: 30px;
    margin-top: -45px !important;
    /* height: 45%; */
  }
    .section1-flower2{
    bottom:-5% !important;
    left: -20px !important;
  }
  .slide-index , .slide-count{
  font-size: 20.05px;
  font-weight: 500;
}
  }

  .sec1-btn-more{
  padding-top:0% !important ;
  padding-bottom: 0% !important;
}

.contant-left-sec1{
  margin-top:9% !important ;
  /* padding-bottom:4% !important ; */
}
.sec1-btn-more{
  padding-top:5% !important ;
  padding-bottom: 11% !important;
}
.contain-all-sec1{
  padding-bottom: 5%;
}


  /* section 2 offer products */

  #section2{
    background-color: #F0E5D3;
    height: auto;
    position: relative;
  }
  .line1-section2{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 18%;
  }
  .line2-section2{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 18%;
  }
  .line3-section2{
content: '';
    position: absolute;
    top: 100px;
    right: 0;
    width: 18%;
  }
  .line4-section2{
content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 18%;
  }
    .offer-section {
      padding: 70px 20px 0px 20px;
      display: flex;
      justify-content: center;
    }
.offer-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center ;
  flex-wrap: wrap;
  max-width: 40% !important;
}
.all-contant-sec2{
  display: flex;
  justify-content: center;
  align-items: center;
}
.text-up-card{
  position: relative;
  bottom: 100px;
}
.card-newoffer{
width: 302px; 
height: 450px !important; 
  justify-content: center;
  background-color: rgba(247, 242, 233, 1) !important;
  border: none !important;
  text-align: start;
  bottom: 80px !important;
}
.img-newoffer{
  height: 300px !important;
  padding: 10px !important;
}
@media (max-width:1199px) {
  .img-newoffer{
  height: 300px !important;
  padding: 10px !important;
}
  
}
.card-body{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.arrow-btn {
  background-color: #BD845A;
  border: none;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 10;
  padding: 0;
}
.arrow-right {
  margin-right: 350px !important;
  transform: translateX(-100%) translateY(-50%);
}
.arrow-left {
  margin-left: 350px !important;
  transform: translateX(100%) translateY(-50%);
}
    .old-price {
      text-decoration: line-through;
      color: grey;
      font-size: 21px;
    }
    .new-price {
      color: rgba(183, 4, 4, 1);
      font-size: 21px;
    }
    .product-h{
      color: rgba(206, 148, 97, 1) !important;
      font-size: 20px;
    }
    .product-title-sec2{
      font-size: 20px !important;
      line-height: 14.38px !important;
      font-weight: 500 !important;
      color: rgba(37, 37, 37, 0.9);
      font-family: 'Baloo Bhaijaan' !important;
    }  
     .new-price-sec2 {
      color: rgba(183, 4, 4, 1);
      font-size: 21px;
    }
    .old-price-sec2 {
      text-decoration: line-through !important;
      color: grey;
      font-size: 21px;
    }
    .stars  {
      color: rgba(255, 198, 42, 1);
    }
    .left-image-offer {
      flex: 1;
      width: 100%;
    }
    #mainImage  {
      width: 90%;
  object-fit: cover;
  height: 600px;
  border-radius: 5%;
    }
.text-title-sec2{
  color:rgba(37, 37, 37, 0.75);
}
@media (min-width:1239px) and (max-width:1399px){
.arrow-btn{
  width: 20px;
}
}
@media(min-width:1617px){
  .text-title-sec2{
  font-size: 21px;
  font-weight: 400;
}
}
    .product-title {
      font-weight: bold;
      font-size: 18px;
      color: rgba(37, 37, 37, 0.75);
    }
    .countdown {
      display: flex;
      justify-content: center;
      position: relative;
      bottom:160px;
      left: 0;
    }
      .text-date{
      font-size: 20px;
    }
    .seperate{
      font-size: 80px;
      font-weight: bold;
      height: 84px;
    }
    .time-box {
      color: white;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
    }
    .num-time{
      font-size: 40px;
      font-weight: 400;
        width: 81px;
      height: 84px;
      background-color: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  @media (max-width:1238px) {
    .arrow-btn {
      background-color: #BD845A;
      border: none;
      color: white;
      border-radius: 50%;
      width: 20px !important;
      height: 20px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
  @media(max-width:1219px){
      .offer-container{
        max-width: 100% !important;
      }
       .left-image-offer{
        max-width: 100% !important;
       }
  }
  @media (max-width:1199px) {
.card-img-top{
  padding: 0 !important;
}
.arrow-btn {
  top: 50%;
}
  } 
  @media (max-width:900px) {
       #mainImage {
      width: 80%;
       }
         .countdown {
      bottom:120px;
      left: 0;
    }
    .seperate{
      font-size: 70px;
      font-weight: bold;
      height: 84px;
    }
    .time-box {
      font-size: 2px !important;
    }
    .num-time{
      font-size: 30px;
      font-weight: 400;
        width: 60px;
      height: 60px;
    }
      .text-date{
      font-size: 12px;
    }
  }
  @media (max-width: 768px) {
  .arrow-btn {
    width: 30px !important;
    height: 30px !important;
    top:180px;
  }
  .arrow-left img{
    width:28px ;
    height:28px ;
  }
  .arrow-right img{
    width:28px ;
    height:28px ;
  }
  .offer-container {
    max-width: 100% !important;
  }
  .text-up-card{
  position: relative;
  bottom: 100px;
}
.card-newoffer{
width: 100% !important; 
height: 100% !important; 
  justify-content: center;
  background-color: rgba(247, 242, 233, 1) !important;
  border: none !important;
  text-align: start;
  bottom: 80px !important;
}
.img-newoffer{
  height: 250px !important;
}
.stars-sec{
  padding-top: 15px !important;
  font-size: 20px;
}
  .product-h{
    padding-top: 0% !important;
  }
}
  .arrow-right {
    transform: translateX(-110%) translateY(-50%);
  }
  .arrow-left {
    transform: translateX(110%) translateY(-50%);
  }
  #mainImage{
  width: 100% !important;
}

  @media (max-width:632px) {
       .countdown {
      bottom:90px;
    }
    .num-time{
       width: 41.43913269042969px;
      height: 42.97391128540039px;
      font-size: 20.46px;
    }
     .seperate{
      font-size: 50px;
      font-weight: bold;
      height: 60px;
    }
    #mainImage{
  height: auto !important;
    }
  }
  @media (max-width:500px) {
.arrow-right {
  margin-right: 250px !important;
  transform: translateX(-100%) translateY(-50%);
}
.arrow-left {
  margin-left: 260px !important;
  transform: translateX(100%) translateY(-50%);
}
  } 
  @media (max-width:430px) {
       .countdown {
      bottom:70px;
    }
    .num-time{
       width: 35px;
      height: 35px;
      font-size: 20.46px;
    }
     .seperate{
      font-size: 50px;
      font-weight: bold;
      height: 40px;
    }
      .time-box {
      padding: 3px;
    }
      .arrow-btn {
    /* width: 25px !important; */
    /* height: 30px !important; */
    top:180px;
  }
  } 
  @media (max-width:400px) {
   .offer .card-body {
    line-height: 10px !important;
  }
  } 
  @media (max-width:355px) {
      .arrow-btn {
    width: 12px !important;
    height: 30px !important;
    top:200px;
  }
  } 

  /* section 3 modern products */
#section3{
  background-color: rgba(251, 249, 246, 1);
  font-family: 'Harmattan' ;
}
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 50px 0;
  position: relative;
  font-size: 20px;
  color: #1E1E1E;
}

.card-sec3{
  position: relative;
  background-color: rgba(247, 242, 233, 1) !important;
  border: none !important;
}
.container-img-sec3{
 position: relative;
 overflow: hidden;
 height: 300px !important;
}
@media (max-width:767px) {
  .container-img-sec3{
 position: relative;
 overflow: hidden;
 height: 170px !important;
}
.heart-icon{
  bottom:50px !important;
}
}
.container-img-sec3 img{
  width:100%;
  height: 100%;
  transition: transform 0.4s ease , opacity 0.4s ease;
}
.card-hover-sec3{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(1.1);
}
    .stars-sec1 span {
  cursor: pointer;
  color: #ccc; /* اللون الافتراضي */
  transition: color 0.2s ease;
}

.stars-sec1 span.active-star {
  color: rgba(255, 198, 42, 1); /* اللون الذهبي */
}

    .stars span {
  cursor: pointer;
  color: #ccc; /* اللون الافتراضي */
  transition: color 0.2s ease;
}

.stars span.active-star2 {
  color: rgba(255, 198, 42, 1); /* اللون الذهبي */
}

 .main-img-sec3{
 padding: 8px !important;

 }
.container-img-sec3:hover .card-hover-sec3{
  opacity: 1;
  transform: scale(1);
}
.container-img-sec3:hover .main-img-sec3{
  opacity: 0;
  transform: scale(1.2);
}
.icon-buy-sec3{
  position: absolute;
  bottom: 30px;
  right: 110px;
  background-color: white;
  padding: 7px 7px;
  border-radius: 50%;
  width: 35px !important;
  height: 35px !important;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
   transition: transform 0.4s ease , opacity 0.4s ease;
}
.container-img-sec3:hover .icon-buy-sec3{
  opacity: 1;
  transform: scale(1);
}
.icon-eye-sec3{
  position: absolute;
  bottom: 30px;
  left: 110px;
  background-color: white;
  padding: 7px 7px;
  border-radius: 50%;
  width: 35px !important;
  height: 35px !important;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
   transition: transform 0.4s ease , opacity 0.4s ease;
}
.container-img-sec3:hover .icon-eye-sec3{
  opacity: 1;
  transform: scale(1);
}


.section-title::before,
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color:rgba(62, 31, 4, 0.24); 
  margin: 0 20px;
}
.image-card-container{
  position: relative;
  width: 100%;
  height: 250px;
}
 .heart-icon{
  position: absolute;
  width: 25px;
  height: 25px;
  cursor: pointer;
  top:8px;
  left:8px;
  color: rgb(209, 203, 203);
}
.back-heart{
  position: absolute;
  width: 40px;
  height: 40px;
  cursor: pointer;
  top:20px;
  left:20px;
  border-radius: 50%;
  background-color: rgba(243, 243, 243, 1);
} 
.card-sec{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
  .stars span {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}
.stars {
  font-size: 24px; /* حجم النجوم */
  line-height: 1;  /* يمنع المسافة العمودية */
}

.stars{
  letter-spacing: 0 !important;
}
#section2 .card-body{
  padding-bottom: 10px !important;
}
#section2 .card{
  border-radius: 2% !important;
}
#section3 .card-body{
  padding: 7px !important;
  padding-bottom: 12px !important;
  padding-top: 15px !important;
  line-height: 9px !important;
}
#section3 .card{
  border-radius: 2% !important;
}
 .heart-icon.red {
      color: red; /* اللون لما يتضغط */
    }
    .new-price{
      font-size: 20px ;
    }
    .old-price{
      font-size: 18px ;
    }
    .text-section3{
      font-size: 48px;
    }
    .all-price{
      padding-top:3%;
    }
    
    @media(max-width:480px){
      .cards-section3{
        height: 50% !important;
      }
    }
    @media(max-width:415px){
         .old-price {
      font-size: 14px;
    }
    #section3 .card-body{
  padding-bottom: 5px !important;
}
    .new-price {
      color: rgba(183, 4, 4, 1);
      font-size: 16px;
    }
    .stars {
      color: rgba(255, 198, 42, 1);
      font-size: 18px !important;
    }
    .stars span {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}
.stars {
  font-size: 24px; /* حجم النجوم */
  line-height: 1;  /* يمنع المسافة العمودية */
}

.stars{
  letter-spacing: 0 !important;
}
    .product-h{
      color: rgba(206, 148, 97, 1) !important;
      font-size: 16px;
      font-weight: 400;
    }
    .product-title{
      font-weight: 500 !important;
      color:rgba(37, 37, 37, 0.9);
    }
    .heart-icon{
      font-size: 20px !important;
      left:5px;
      top:6px;
    }
    .back-heart {
  width:30px;
  height:30px;
      top: 12px !important;
    left: 12px;
  }
    }
  @media (max-width:767px) {
      .text-section3{
      font-size: 20px;
    }
      .text-section3 img{
      width: 42px;
      height: 21px;
    }

  }

  /* section 4 modern sections */
    :root{
      --bg-color:#17312e; 
      --card-radius:22px;
      --accent: #fff;
      --overlay: rgba(0,0,0,0.45);
      --trans-speed: 450ms;
    }
    #section4{
      height:100%;
      margin:0;
      font-family: "Segoe UI", Tahoma, Arial, sans-serif;
      background: var(--bg-color);
      color: #fff;
      position: relative;
    }
    .imgflower-section4{
      content: "";
      position:absolute;
      bottom: 0;
      left:20px;
      width: 25%;

    }
    .imgflower2-section4{
      content: "";
      position:absolute;
      top: 0;
      right:0;
    }
    .title2-section4{
      font-size: 38px;
      font-weight: 700;
    }
    .title1-section4{
   font-size: 18px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.75);
    }
    .hero {
      min-height:100vh;
      padding:60px 24px;
      box-sizing:border-box;
      background-image: url('bg-frame.png');
      background-size: cover;
      background-position: center;
      background-color: var(--bg-color);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:28px;
      position:relative;
      overflow:hidden;
    }
    .hero .title {
      text-align:center;
      max-width:1000px;
    }
    .hero .title small{
      display:block;
      color: rgba(255,255,255,0.65);
      font-size:15px;
      margin-bottom:6px;
    }
    .hero .title h1{
      font-size:46px;
      margin:0;
      font-weight:700;
    }
    .carousel-wrap{
      width:100%;
      max-width:1200px;
      margin:0 auto;
      position:relative;
      height:520px;
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events: auto;
    }
    .cards-section4 {
      position:relative;
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:20px;
      transform-style:preserve-3d;
      perspective:1400px;
    }
    .card-item-section4{
      --w:220px;
      width:var(--w);
      height:420px;
      border-radius:var(--card-radius);
      overflow:hidden;
      position:absolute;
      transition: transform var(--trans-speed) ease, opacity var(--trans-speed) ease, z-index var(--trans-speed);
      box-shadow: 0 8px 30px rgba(0,0,0,0.5);
      display:flex;
      align-items:flex-end;
      justify-content:center;
      cursor:pointer;
      background:#222;
      backface-visibility:hidden;
    }
    .card-item-section4 img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transform-origin:center center;
      transition: transform var(--trans-speed) ease;
    }
    .card-caption{
      position:absolute;
      bottom:22px;
      left:22px;
      right:22px;
      color:#fff;
      z-index:5;
      text-align:center;
      pointer-events:none;
    }
    .card-caption .cat{
      font-size:20px;
      font-weight:700;
      text-shadow:0 4px 12px rgba(0,0,0,0.6);
    }
    .card-caption .count{
      display:block;
      font-size:13px;
      color:rgba(255,255,255,0.75);
      margin-top:6px;
      font-weight:600;
    }
    .card-caption .cta{
      display:block;
      margin-top:10px;
      font-size:14px;
      text-decoration:underline;
      opacity:0.95;
    }
    .card-item-section4.center{
      --w:360px;
      width:var(--w);
      height:520px;
      transform: translateX(0) translateZ(120px) scale(1) rotateY(0deg);
      z-index:40;
      opacity:1;
      border-radius:28px;
    }
    .card-item-section4.center img{ transform: scale(1.03); }

    .card-item-section4.left-front{
      transform: translateX(-290px) translateZ(30px) rotateY(14deg) scale(0.86);
      z-index:30;
      opacity:0.95;
    }

    .card-item-section4.left-back{
      transform: translateX(-520px) translateZ(-80px) rotateY(22deg) scale(0.75);
      z-index:20;
      opacity:0.6;
      filter: blur(0.6px);
    }
    .card-item-section4.right-front{
      transform: translateX(290px) translateZ(30px) rotateY(-14deg) scale(0.86);
      z-index:30;
      opacity:0.95;
    }
    .card-item-section4.right-back{
      transform: translateX(520px) translateZ(-80px) rotateY(-22deg) scale(0.75);
      z-index:20;
      opacity:0.6;
      filter: blur(0.6px);
    }
    .card-item-section4.inactive{
      opacity:0;
      pointer-events:none;
      transform: translateZ(-200px) scale(0.6);
      z-index:0;
    }
    .controls {
      margin-top:18px;
      display:flex;
      gap:14px;
      align-items:center;
      justify-content:center;
    }
    .ctrl-btn {
      width:46px;
      height:46px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,0.25);
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(0,0,0,0.15);
      color:#fff;
      cursor:pointer;
      transition: transform 180ms ease, background 180ms;
    }
    .ctrl-btn:hover{ 
      transform: scale(1.05); 
      background: rgba(255,255,255,0.06);
     }

    @media (max-width: 992px) {
      .hero .title h1{ font-size:36px; }
      .carousel-wrap{ height:480px; }
      .card-item-section4.center{ height:480px; width:320px; }
      .card-item-section4{ height:380px; width:180px; }
    }
    @media (max-width: 720px) {
      .hero{ padding:28px 12px; }
      .hero .title h1{ font-size:28px; }
      .carousel-wrap{ height:520px; }
      .cards-section4 { justify-content:center; }
      .card-item-section4{
        position:relative;
        width:100%;
        max-width:420px;
        height:520px;
        transform:none !important;
        opacity:1 !important;
        z-index:30 !important;
        margin:0 auto;
        box-shadow: 0 10px 40px rgba(0,0,0,0.6);
        border-radius:18px;
      }
      .card-item-section4 img{ object-position:center; }
      .card-item-section4:not(.center){ display:none; }
      .controls{ margin-top:14px; }
    }
    .ctrl-btn svg{ 
      width:20px; 
      height:20px; 
    }
    /*  section 5 */
#section5{
  background-color: rgba(251, 249, 246, 1) !important;
}
.contain-img-strip{
  max-width: 478px !important;
  height: 547px !important;
  background-size: cover !important;
}
.accordion-button:not(.collapsed) {
  background-color:transparent !important;
    color: #1E3231 !important;   
  font-size: 32.17px !important;              
  font-weight: 400 !important;         
}
.accordion-button p:not(.collapsed) {
  border-bottom: 1px solid rgba(206, 148, 97, 1) !important;       
  background-color:transparent !important;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed)::after {
  content: "";
  background-image: url('./assets/Images/star2sec5.png') !important;
  background-size: cover !important;
    width: 34px !important;
  height: 34px !important;
  position: absolute;
  left: 10px;
}
.accordion-button.collapsed {
  border-bottom: 1px solid rgba(206, 148, 97, 0.6) !important; 
  padding-top: 20px !important;      
  padding-bottom: 20px !important;      
}
.accordion{
  --bs-accordion-bg:transparent !important;
}
.accordion-button::after{
  content: "";
  background-image: url('./assets/Images/star-according.png') !important;
  background-size: cover !important;
  width: 34px !important;
  height: 34px !important;
  position: absolute;
  left: 10px;
}

.accordion-item {
  border:none !important;
}
.all-strip{
  display:flex;
  justify-content: space-around !important;
  align-items: center;
  flex-wrap: wrap;
}
.image-strip{
   height:450px;
}
.contain-img-strip{
  width: 100%;
  display: flex;
  align-items: center;
}
.groundImg-sec5{
  margin-top: 20px;
  width: 100%;
  height: 100%;
}
.accordion-button,
.accordion-button:not(.collapsed) {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.accordion-button{
  color: rgba(206, 148, 97, 1) !important;
  font-size: 24px !important;
  font-weight: 400;
}
.accordion-button:focus{
  outline: none !important;
  box-shadow: none !important;
}
.accordion-body p {
  font-size: 22px;
  font-weight:100;
  line-height: 36.8px;
  color: rgba(30, 50, 49, 1);
  opacity: 0.9;
    margin-top: -10px;
  margin-right: 20px;
}
.accordion-body {
  padding:0 !important;
  border-bottom: 1px solid rgba(206, 148, 97, 1) !important;
}
@media (max-width:1199px) {
.contain-img-strip{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5%;
}
.image-strip{
   height:auto;
   width: 100%;
}
.accordion-button,
.accordion-button:not(.collapsed) {
   font-size: 20px !important;
     padding: 10px !important;
}
.accordion-body  {
  font-size: 20px !important;
}
.accordion-body p {
  font-size: 18px !important;
     margin-top: 0px !important;
  margin-right: 0px !important;
}
#headingFifth:not(.collapsed){

}
.accordion-item {
  border:none !important;
}
}
@media (max-width:991px) {
  .front-img-sec5{
    flex-wrap: wrap-reverse !important;
  }
  
}


    /* section 6 الشريط  */
    #section6{
      background-color: rgba(251, 249, 246, 1) !important;
    }
    .logo-strip {
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      padding: 20px 0;
      background-color: rgba(30, 50, 49, 1);
      padding: 5%;
    }

    .logo-track {
      display: inline-block;
      animation: moveLeft 12s linear infinite;
    }

    .logo-track img {
      height: 43px; 
      margin: 0 40px;
      vertical-align: middle;
    }

    @keyframes moveLeft {
      0%   { transform: translateX(0); }
      100% { transform: translateX(50%); }
    }

    /* section7 */
       .cards-wrapper {
      display: flex;
      overflow-x: auto;
      gap: 1rem;
      padding-bottom: 1rem;
      cursor: grab;
      scroll-behavior: smooth;
      direction: rtl;
      padding-top: 4%;
    }
        .title-sec7-one{
        text-align: center ;
      }
      .title-sec7-two{
        text-align: center ;
      }
    @media (max-width:500px) {
      .title-sec7-one{
        text-align: right !important;
      }
      .title-sec7-two{
        text-align: right !important;
        font-size: 30px;
        width: 335px;
      }
    }
    .cards-wrapper::-webkit-scrollbar {
      display: none;
    }

    .text-user-sec7 {
      font-size: 20px;
      font-weight: 400;
      line-height: 35px;
      color: rgba(251, 249, 246, 1);
      padding-right: 25px;
    }
    .section7-left-top {
      position: relative;
      left: 150px;
    }

    .column-top {
      position: absolute;
      top: 0;
      right: 0;
    }

    .column-bottom {
      position: absolute;
      bottom: 90px;
      left: 70px;
    } 
    .cards-wrapper::-webkit-scrollbar {
      display: none;
    }
    .text-user-sec7 {
      font-size: 24px;
      font-weight: 400;
      line-height: 35px;
      text-align: right !important;
      color: rgba(251, 249, 246, 1);
      padding-top: 50px;
      padding-left: 10px !important;
    }
  .name-person-opinion{
    color:rgba(206, 148, 97, 1); font-size: 32px; font-weight: 400;
  }
  .work-person-opinion{
   color:rgba(255, 245, 224, 1); font-size: 24px; font-weight: 400;
  }
  .person-opinion{
    display: flex;
    justify-content: center;
    align-items: center;
  }

    .section7-left-top {
      flex-wrap: wrap;
      flex-direction: column;
      position: relative;
      left: 120px;
      background-color: rgba(30, 50, 49, 1);
      border-radius: 16px;
    }
    @media(max-width:1400px){
      .section7-left-top {
       width: 100% !important;
    }
    .text-user-sec7{
      font-size: 20px;
      font-weight: 400;
      line-height: 32px;
    }
    .name-person-opinion{
     font-size: 21.98px; 
     font-weight: 400;
  }
    .work-person-opinion{
   font-size: 18.32px;
    font-weight: 400;
  }
    .person-opinion{
    display: flex;
    justify-content: right;
    align-items: normal;
  }
   .dashed-sec7{
    position: static !important;
    display: block;
    padding-bottom: 10%;
    width: 100% !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
  }
  }
  .dashed-sec7{
    position: absolute;
    left:400px ;
    bottom: 500px;
  }


  @media(max-width:900px){
    .column-top{
      width:28.39495849609375px ;
      height:28.39495849609375px ;
        top: 25px !important;
  right: 25px !important;
  padding: 0px !important;
    }
    .column-bottom{
      width:28.39495849609375px;
      height:28.39495849609375px ; 
}
  }
    .username-opinion{
     position: absolute !important;
     bottom:0 !important;
     right: 0 !important;
    }
    .column-top {
      position: absolute;
      top: 0;
      right:0; 
      padding: 20px; 
      display: block;
      margin-bottom: 2000px !important;
    }

    .column-bottom {
      position: absolute;
      bottom: 90px;
      left: 70px;
    }
 .card-img-wrap {
  overflow: hidden;
  position: relative;
}
.contain-image-sec7{
 width:316.4541931152344px !important ;
height:228.92430114746094px  !important;
overflow: hidden !important;
background-color: transparent !important;
}
.contain-image-sec7 .card-img-top-sec7{
  width: 100%;
  height: 100%;
background-color: transparent !important;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.77 , 0 , 0 , 0.175 , 1) , filter 1s ease;
}
.card:hover .card-img-top-sec7 {
    transform: scale(1.3);
    filter: blur(2px);
animation: blurIn 0.6s ease forwards;
}
.card:not(:hover) .card-img-top-sec7 {
    transform: scale(1);
animation: blurOut 0.6s ease forwards;
transition-delay: 0s , 0.2s;
}
 .cards-wrapper .card:hover .contain-image-sec7{
  border-top-left-radius:500px;
  border-top-right-radius: 500px ;
}
 .cards-wrapper .card .read{
display: inline-block;
transform: scale(1px) !important;
transition:transform 0.6s ease-in-out;
}
.cards-wrapper .card:hover .read{
transform: scale(0.9) !important;
}
@keyframes blurIn {
  0%{
    filter:  blur(0);
    transform: scale(1.1);
  }
  50%{
    filter: blur(1.5px);
  }
  100%{
    filter: blur(0);
    transform: scale(1.3);
  }
}
@keyframes blurOut {
  0%{
    filter:  blur(1.5px);
    transform:scale(1.2);
  }
  50%{
    filter: blur(1px);
  }
  100%{
    filter: blur(0);
    transform:scale(1);
  }
}
.cards-wrapper .card{
  border: none !important;
  transition: transform 0.5 ease-in-out;
}
.cards-wrapper .card-body{
    padding: 0 !important;
  margin: 0 !important;
}
  .title-sec7{
    width:316.4541931152344px !important;
    height:166.90969848632812px !important ;
  }
    .card-title-sec7{
      font-size: 22px;
      line-height: 31px;
      font-weight: 500;
      color: rgba(37, 37, 37, 1);
    }
    .card-title{
      margin: 0px !important;
      padding: 0px !important;
    }
    .card-text-sec7{
      font-size: 15.71px;
      line-height: 17.95px;
      font-weight: 400;
      color: rgba(37, 37, 37, 0.71);
         margin: 0px !important;
      padding: 0px !important;
    }
    .read{
      font-size: 22px;
      font-weight: 400;
      color: rgba(206, 148, 97, 1);
      margin-bottom: 20px !important;
    }
    .address-sec7{
      font-size: 48.86px; 
      line-height: 65px;
       font-weight: 500;
        color: rgba(37, 37, 37, 1);
    }

    @media (max-width:991px) {
      .cards-wrapper , .title-sec7{
        width: 100% !important;
      }
      .title-sec7{
        padding-right: 8%;
      }
      .title-sec7 {
  height: 100% !important;
}
    }

    @media (max-width:500px) {
     .address-sec7{
      font-size: 30px !important;
     }
     .address2-sec7{
      font-size: 20px !important;
     }
    }
    @media (max-width:767px) {
      .section7-left-top {
        position: relative;
        left: 0px;
      }
      .line-section7 {
        display: block;
      }
    }

/* footer  */
    
    footer{
      background-color: rgba(30, 50, 49, 1);
      color: white;
      text-align: right !important;
    }
    .links-foot{
      text-align: start;
    }
    .paragraph-footer{
      line-height: 28px;
      font-size:18px;
      font-weight:400;
      text-align: right;
    }
    .links-foot h6{
      text-decoration: none;
      font-size: 24px;
      line-height: 24px;
      font-weight: 200 !important;
    }
    .links-foot a{
      text-decoration: none;
      font-size: 19px;
      line-height: 25px;
      font-weight: 400;
      text-align: right ;
    }
    .links-foot i{
      font-size: 25px;
      background-color: rgba(255, 245, 224, 1);
      color:rgba(30, 50, 49, 1);
      padding: 5px;
      margin: 5px;
      border-radius: 50%;
    }
    .links-foot span{
      margin-right: 5px;
      font-size: 20px;
      line-height: 25px;
      font-weight: 400;
      text-align: right;
      margin-top: 10px !important;
    }
    .contact-footer{
      border-radius: 24px;
      background-color: rgba(240, 229, 211, 1);
      color: black;
      margin-bottom: 5%;
    }
    .contact-footer h2{
      text-align: right;
      font-size:24px ;
      font-weight:bold ;
    } 
    .contact-footer p{
      text-align: right;
       font-size:20 ;
      font-weight:400 ;
    }
    .contact-footer .mail-footer{
      max-width: 100%;
      width: 300px;
      padding: 10px;
      border-radius: 13px;
      background-color: transparent;
    }
    .mail-footer::placeholder{
      font-size: 18px;
      font-weight: 500;
    }
    .contact-footer button{
      max-width: 100%;
      width:150px;
      padding: 5px;
      border-radius: 66px;
      font-size: 20px;
      font-weight: 500;
      border: none;
      background-color: rgba(30, 50, 49, 1);
      color: white;
    }
@media (max-width:1000px) {
      .logo-footer{
      width: 200px !important;
    }
}