* {
    box-sizing: border-box;
    
}

body {
 font-family: 'MyCustomFont', sans-serif;
 /* width: 100vw; */
 /* height: 100vh; */
}
/* h1{
    font-size: 55px;
     letter-spacing: -0.02em;
      transform: scaleY(1.8);
       transform-origin: bottom left;
        line-height: 1.2;
         margin-bottom: 40px;
} */
h1 {
  font-size: clamp(28px, 4vw, 55px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 40px;
}
img{
        object-fit: cover;

}
@font-face {
    font-family: 'MyCustomFont'; /* يمكنك اختيار أي اسم هنا */
    src: url('../fonts/dinneuzeitgroteskltw01-_812426.other.woff2') format('woff2'); /* تأكد من كتابة اسم الملف والامتداد صح */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
header{

    background-color: rgb(129, 47, 22);

}

header .head{
    width: 15px;
    height: 15px;
    background-color: rgb(184, 67, 31);
    border-radius: 50%;
}


header a:hover{
    
    color: rgb(217, 217, 217);
     scale: 1.2;
}
nav .fs-6 a{
    text-decoration: none;
    color: rgb(49, 49, 49);

        padding: 10px;
      border: 2px solid rgb(0, 0, 0);
     border-radius: 10px;

}
nav .fs-6 a:hover{
    color: rgb(129, 47, 22);
      border: 2px solid rgb(129, 47, 22);

}

nav .fs-6 a.login{
     border: 0px solid rgb(129, 47, 22);

}
nav .fs-6 a.login:hover{
     border: 0px solid rgb(129, 47, 22);
}
.cart{
    font-size: 20px;
    color: rgb(129, 47, 22);
cursor: pointer;
}



/* .shop-wrapper{
  min-width: 140px;
} */

/* shop link */
.shop{
  text-decoration: none;
  color: #222;
  padding: 10px 12px;
}

/* button */
.shop-toggle{
  width: 38px;
  height: 38px;
  cursor: pointer;
}

/* arrow */
.shop-arrow{
  font-size: 12px;
  transition: .3s ease;
}

/* rotate */
.shop-toggle.active .shop-arrow{
  transform: rotate(180deg);
}

/* dropdown */
.dropdown-box{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  z-index: 999;
}

/* open */
.dropdown-box.show{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* links inside */
.dropdown-box a{
  text-decoration: none;
  color: #222;
  padding: 10px 12px;
  border-radius: 8px;
}

.dropdown-box a:hover{
  background: #f5f5f5;
  color: rgb(129,47,22);
}

/* desktop */
@media (min-width: 992px){

  .shop-wrapper{
    width: auto !important;
  }

}

/* mobile */
@media (max-width: 991px){

  .shop-wrapper{
    width: 100%;
  }

  .dropdown-box{
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }

  .dropdown-box a{
    border-bottom: 1px solid #eee;
    padding-left: 20px;
  }

}




.home{
    font-size: 50px;
    line-height: 1.4em;
    font-weight: 500;
    letter-spacing: -0.05em;
    text-decoration: none;
    color: rgb(129, 47, 22);

}

.carousel-item img{

    object-fit: cover;

}
/* تنسيق الأسهم المخصصة */
.custom-arrow {
    position: absolute;
    top: 50%; /* توسيط رأسي بالظبط */
    transform: translateY(-50%); /* لضمان إن السهم في نص الارتفاع */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: white; /* خلفية بيضاء عشان تبان */
    border: 1px solid #ddd;
    color: rgb(129, 47, 22);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 10px rgba(129, 47, 22, 0.5);
}

.custom-arrow:hover {
    background-color: rgb(129, 47, 22);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

/* وضع السهم اليمين في أقصى اليمين واليسار في أقصى اليسار */
.prev-arrow { left: 0; }
.next-arrow { right: 0; }

/* عشان الكاردات متتمطش لو الصورة مقاسها مختلف */
.card-img-top {
    height: 250px;
    object-fit: cover;
}

.carousel-item {
    transition: transform 0.8s ease-in-out; /* يخلي السكرول ناعم جداً */
}
.SHOP-BY-CATEGORY .position-relative img{
    border-radius: 20px;
    box-shadow: 0px 4px 10px rgb(255, 255, 255);
}

.SHOP-BY-CATEGORY .position-relative div:hover{
background-color: rgb(200, 200, 200);
scale: 1.05;
transition: .5s;
}

footer a{
    text-decoration: none;
    color: white;
}





/* login */


.wrapper{
width:800px;
height:500px;
position:relative;
overflow:hidden;
background:#fff;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.form-container{
position:absolute;
width:100%;
height:100%;
display:flex;
transition:.9s ease-in-out;
}

.login,.register{
width:50%;
padding:50px;
}



.overlay{
position:absolute;
width:50%;
height:100%;
background:linear-gradient(150deg,rgb(249, 107, 64),rgb(129, 47, 22));
color:white;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
right:0;
transition:.6s;
}

.overlay-left,
.overlay-right{
text-align:center;
}

.wrapper.active .form-container{
transform:translateX(-50%);
}

.wrapper.active .overlay{
transform:translateX(-100%);
}

.wrapper.active .register{
    transform: translateX(100%);
}


/* #logOut{
    display: none;
}
#logOut.active{
    display: block;
} */
    .shutterstock{
         transform: translate( 120px,-120px);
    }
        .shutterstockText{
         transform: translate( 50px,-80px);
    }

@media(max-width: 1000px){
    .shutterstock{
        transform:translate(20px , -120px);
    }
    .shutterstockText{

         transform: translate( 10px,-40px);
    }
    .shutterstockText :first-child{
        display: flex;
        gap: 10px;

    }
}


@media(max-width: 770px) {

    .first .img-1{
        display: none;
    }
    .first .img-2{
        width: 100%;
    }
     .first .bg-light{
        width: 100%;
    }


    .shutterstock{
        transform:translate(0px , -120px);
    }
    .shutterstockText{

         transform: translate( 0px,-50px);
    }

}

/* الموبايل فقط */
@media (max-width: 767px){

  #cartSidebar{
    width: 100vw !important;
    height: 100vh !important;
  }
  .wrapper{
width:100vw;
height:100vh;
padding: 10px;

}
.form-container{

display:flex;
align-items: center;
justify-content: center;
gap: 5px;
}
  .login,.register{
padding:5px;
margin: 0px 5px;
}

}