@import url('https://fonts.cdnfonts.com/css/trajan-pro');

.product-card-body,.card-product-body{
  border-top-right-radius: 90px;
  border-bottom-left-radius: 90px;

}

.logo-mob{
  display: block;
  visibility: hidden;
}

.logo,.arabic-logo{
    width: 10vh;
}

body{
  padding-top: 12vh;
}

.arabic-welcome{
  font-family: Al-Battar !important;
  font-size: 4vh;
}

.arabic{
  display: none;
  visibility: hidden;
}

@font-face {
  font-family: 'Jannat-lt-bold';
  src: url('fonts/jannat-lt-bold.ttf') format('ttf'),

}

@font-face {
    font-family: "ChocolateBoxDecorative Regular";
    src: local("ChocolateBoxDecorative Regular"), url("fonts/C_BOX_D.woff") format("woff");
  }

  @font-face {
    font-family: 'Trajan Pro Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Trajan Pro Regular'), url('fonts/TrajanPro-Regular.woff') format('woff');
  }

  .navbar-nav .nav-link.active-tab {
    text-decoration: underline;
}

    
.bg-img{
    background-image: url("images/banner-img.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 87vh;
  width: auto;
}

.bg-img-2{
  background-image: url("images/bannae-img-2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 87vh;
width: auto;
}

.bg-img-3{
  background-image: url("images/bg-img-3.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 87vh;
width: auto;
}


.perfumes-slogan{
    color: rgb(174, 0, 255);
    padding-top: 25vh;
    font-family: "ChocolateBoxDecorative Regular";
    font-weight: bold;
    font-size: 6vh;
    text-align: justify;
}

.text-collection{
  font-family: "ChocolateBoxDecorative Regular";
  font-size: 34.5px;
  text-align: center;
  color: rgb(130 0 166);
  padding-top: 17px;
}

.btn-view-collection{
  font-size: 18px;
  font-family: "Trajan Pro Regular";
  padding-top: 10px;
}

.img-collection-2{
  height: 338px;
  width: 633px;
  /* border: 5px solid blue; */
}

.card-collection{
  background: linear-gradient(-45deg, #f5ef81, #90f1e4, #dc7aff);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite; 
  backdrop-filter: blur(10px);
  width:auto;
  height: 338px;

}


.perfumes-slogan-arrow{
    padding-top: 1vh;
    color: rgb(0, 130, 144);
    font-size: 4vh;
    /* margin-left: 250px; */

    
  }

  .perfumes-slogan-two,.perfumes-slogan-arrow-2{
    color: rgb(0, 93, 126);
    padding-top: 25vh;
    font-family: "ChocolateBoxDecorative Regular";
    font-weight: bold;
    font-size: 6vh;
    /* margin-left: 5px; */
    /* text-align: center; */
}

/* .perfumes-slogan-2-1,.perfumes-slogan-arrow-2{
  margin-left: 5px;

  } */

.perfumes-slogan-arrow-2{
    padding-top: 1vh;
    color: rgb(46, 0, 144);
    font-size: 4vh;
    /* margin-left: 250px; */
}

.perfumes-slogan-three{
color: rgb(0 126 38);
  padding-top :12vh;
  font-family: "ChocolateBoxDecorative Regular";
  font-weight: bold;
  font-size: 25px;
  font-size: 4.5vh;

  /* margin-left: 5px; */
  /* padding-right: 80px; */
  /* text-align: center; */
}

.perfumes-slogan-arrow-3{
  padding-top: 1vh;
  color:rgb(107, 61, 1) ;
  font-size: 4vh;
  /* margin-left: 250px; */
  font-family: "ChocolateBoxDecorative Regular";
  font-weight: bold;

  
}

.perfume-img-1{
  width:51vh;
}

.perfume-img-2{
  width:51vh;
}

.collection-text{
  font-family: "Trajan Pro Regular";
  text-decoration: solid;
  font-size: 29px;
  text-align: center;       
  /* margin-top: 18px;*/
  color: blueviolet;
}

.collection-text-2{
  font-family: "Trajan Pro Regular";
  text-decoration: solid;
  font-size: 22px;
  text-align: center;       
  /* margin-top: 18px;*/
 color: burlywood;
}

.bakhoor-image{
  width:51vh;

}

.cards-sec-2{
  padding: 0px;
}

.card-perfume{
  background-color: rgb(66, 255, 236);
  height: 254px;
  width: 51vh;
}

.card-perfume-2{
  background-color: rgb(123, 66, 255);
  width: 379px; height: 254px;
}

.text-brands{
  font-size: 35px;
  text-align: center;
  color: rgb(0, 14, 39);
  margin-top: 25px;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  margin-top: 20px;
  margin-bottom: 20px;
}

.text-arabic-brand{
  font-size: 35px;
  text-align: center;
  color: rgb(0, 14, 39);
  margin-top: 25px;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  margin-top: 30px;
  margin-bottom: 20px;
}

.brand-logo-1,.brand-logo-2{
  width: 30vh;
  /* border-image: linear-gradient(#d43cf6, #ff8800) 100; */
  background: linear-gradient(-45deg, #f581e7, #90f1e4, #c47aff);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite; 
  border-width: 4px;
  border-style: solid;
  border-radius: 120px;
  height: 226px;
  padding: 25px;
}

.brand-logo-3{
  width: 30vh;
  /* border-image: linear-gradient(#d43cf6, #ff8800) 30; */
  border-width: 4px;
  border-style: solid;
  padding: 4px;
  height: 30vh;
  border-radius: 120px;
  background: linear-gradient(-45deg, #fff374, #b7f190, #ffa9a8, #ffadca);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;  
}


.product-card {
  width: 284px;
  position: relative;
}

.card-product-body{
  height: 400px;
  background: linear-gradient(-45deg, #8d2dfb, #33eb98, rgb(241, 248, 144), #f6bb83);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
  

.lailatul-ziarat-card{
  height: 400px;
	background: linear-gradient(-45deg, #22eb9e, #f190b6, #a8e8ff, #adffec);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


.oud-kalakasi{
  height: 400px;
  background: linear-gradient(-45deg, #fff374, #b7f190, #ffa9a8, #ffadca);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

.shaikha-card{
  height: 400px;
  background: linear-gradient(-45deg, #ff6f6f, #90a5f1, #db3ae09c, #fb6464);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

.product-card .card-img {
  border-top-right-radius: 90px;
  border-bottom-left-radius: 90px;
  position: absolute;
  top: 205px;
  left: 21%;
  width: 240px;
  height: 30vh;
}

.arabic-title{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #009797;
}

.title-salamah{
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 25px;
color: rgb(0, 95, 71);
}

.lailat-title{
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 25px;
  color: rgb(0, 51, 95);
}

.shaikha-title{
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 25px;
  color: rgb(60, 0, 82);
}

.arabic-shaikha{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 color:rgb(38, 0, 41);
}

.kalakasi-title{
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 25px;
  color: rgb(124, 34, 34);
}
 
.kalakasi-arabic{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color:rgb(101, 72, 26);
}

.arabic-lailat{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 color:darkslateblue;
}

.qty-text{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 16px;
}

.card-text-2{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 20px;
  color:rgb(153, 143, 0);
}

.arabic-qty{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.arabic-price{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: rgb(0, 55, 182);
}

.quote-perfumes{
  margin-top: 70px;
  font-size: 18px;
  text-align: center;
  font-family: "Trajan Pro Regular";
  color: #8d2dfb;
  border: 5px solid violet;
  padding: 25px;
  border-top-left-radius: 100px;
  border-bottom-right-radius: 100px;
}

.owl-nav{
  text-align: center;
  font-size: 20;
  position: absolute;
  text-align: center;
  top: 580px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}


.owl-carousel .owl-nav button.owl-next,
 .owl-carousel .owl-nav button.owl-prev{
  border: 2px solid rgb(255, 153, 0);
  background-color:aliceblue;
  border-radius: 30%;
  height: 50px;
  width: 50px;
  margin: 10px 5px;
  color: rgb(11, 129, 0);
  font-size: 30px;
}


.owl-dots {
  text-align: center;
  justify-content: space-between;
}
.owl-dots button.owl-dot.active span,
.owl-dots button.owl-dot:hover span {
  background-color: #feae00;
  border-radius: 20%;
  height: 11px;
  width: 12px;
  position: absolute;
  top: 1px;
  left: 1px;
}
.owl-dots button.owl-dot {
  border: 1px solid gray;
  background: white;
  border-radius: 20%;
  height: 16px;
  width: 16px;
  position: relative;
  top: -62px;
  margin: 10px;
}


.footer {
  background-color: #f8f9fa;
  padding: 20px;
}
.footer a {
    color: #343a40;
    text-decoration: none;
}
.footer a:hover {
    color: #007bff;
}

.bg-2-perfume:hover,.img-collection-2:hover{
  box-shadow: 0 0 25px rgb(93, 0, 255); 
  border: 3px solid cyan;
}

.brand-logo-1:hover{
  box-shadow: 0 0 50px rgb(134, 104, 233); 
  /* border: 3px solid cyan; */
}

.brand-logo-3:hover{
  box-shadow: 0 0 70px rgb(158, 233, 104); 

}

.navbar-toggler {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: 40px;
  height: 40px;
}

.navbar-toggler span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin-bottom: 4px;
  transition: transform 0.3s;
}

.navbar-toggler.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.navbar-toggler.active span:nth-child(2) {
  opacity: 0;
}

.navbar-toggler.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 167, 159, 0);
  border: 2px rgb(255, 245, 156) solid;
  border-radius: 6px;
}

@keyframes AnimationName {
  0%{background-position:61% 0%}
  50%{background-position:40% 100%}
  100%{background-position:61% 0%}
}

::-webkit-scrollbar-thumb:hover {
  background-color: #00595b;
}

::-webkit-scrollbar-track {
  background-color: #00878a;
  /* width: 12px; */
  border-radius: 6px;
}

.navbar-bottom{
  display: none;
  visibility: hidden;
}

/* Mobile devices (portrait and landscape) */
@media only screen  and (max-width: 790px) {
  body {
    padding-top: 7vh;
    padding-bottom: 8vh;
  }
  .bg-img{
    background-image: url("images/banner-img.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 33vh;
  width: 87vh;
}

.bg-img-2{
  background-image: url("images/bannae-img-2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 33vh;
width: auto;
}

.bg-img-3{
  background-image: url("images/bg-img-3.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 33vh;
width: auto;
}



.perfumes-slogan{
  color: rgb(174, 0, 255);
  padding-top: 10vh;
  font-family: "ChocolateBoxDecorative Regular";
  font-weight: bold;
  /* margin-left: 10px; */
  font-size: 15PX;
  text-align: justify;
}

.perfumes-slogan-arrow{
  padding-top:5px;
  color: rgb(0, 130, 144);
  font-size: 10px;
  margin-left: 0px;
}

.perfumes-slogan-two{
  color: rgb(0, 93, 126);
  padding-top: 10vh;
  font-family: "ChocolateBoxDecorative Regular";
  font-weight: bold;
  font-size: 15px;

}


.perfumes-slogan-arrow-2{
  padding-top: 0px;
  color: rgb(46, 0, 144);
  font-size: 10px;
  margin-left: 0px;
}

.perfumes-slogan-three{
color: rgb(0 126 38);
padding-top :6vh;
font-family: "ChocolateBoxDecorative Regular";
font-weight: bold;
font-size: 12px;
}

.perfumes-slogan-arrow-3{
padding-top: 0px;
color:rgb(107, 61, 1) ;
font-size: 10px;
font-family: "ChocolateBoxDecorative Regular";
font-weight: bold;
}

.logo{
  width: 6vh;
}

.collection-text{
  font-size: 9px;
  margin-top: 0px;
}

.collection-text-2{
  font-size: 8px;
  margin-top: 0px;
  padding: 0px;
}

.btn-1,.btn-2{
  font-size: 5px;
  margin-top: 2px;
  padding: 3px;
}


.perfume-img-1,.perfume-img-2,.bakhoor-image{
  height: 145px;
}

.card-perfume,.card-perfume-2{
  width: auto;
  height: auto;
} 

.brand-logo-1,.brand-logo-2,.brand-logo-3{
  margin: 10px;
}

.product-card {
  width: 284px;
  margin-top: 93px;
  position: relative;
}

.product-card-1{
  margin-top: 0px;
}

.quote-perfumes{
  font-size: 10px;
  margin-top: 96px;
}

.owl-dots button.owl-dot {
  border: 1px solid gray;
  background: white;
  border-radius: 20%;
  height: 11px;
  width: 11px;
  position: relative;
  top: -24px;
  margin: 10px;
}

.owl-dots button.owl-dot.active span, .owl-dots button.owl-dot:hover span {
  background-color: #feae00;
  border-radius: 20%;
  height: 7px;
  width: 7px;
  position: absolute;
  top: 1px;
  left: 1px;

}

.owl-nav{
  visibility: hidden;
  /* top: 250px; */
}


.arabic-title{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #009797;
}

.title-salamah{
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 25px;
color: rgb(0, 95, 71);
}

.lailat-title{
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 25px;
  color: rgb(0, 51, 95);
}

.shaikha-title{
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 25px;
  color: rgb(60, 0, 82);
}

.arabic-shaikha{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 color:rgb(38, 0, 41);
}

.kalakasi-title{
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 25px;
  color: rgb(124, 34, 34);
}
 
.kalakasi-arabic{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color:rgb(101, 72, 26);
}

.arabic-lailat{
  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 color:darkslateblue;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
  border: 2px solid rgb(255, 153, 0);
  background-color: aliceblue;
  border-radius: 30%;
  height: 20px;
  width: 20px;
  margin: 23px 4px;
  color: rgb(11, 129, 0);
  font-size: 10px;
}

.arabic-welcome{
  font-family: Al-Battar;
  font-size: 3vh;
}

.arabic{
  display: inline;
  visibility:visible;

}

.arabic-welcome-sec{
  border-top: 3px solid rgb(93, 0, 255);

}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 167, 159, 0);
  border: 2px rgb(255, 245, 156) solid;
  border-radius: 6px;
}

@keyframes AnimationName {
  0%{background-position:61% 0%}
  50%{background-position:40% 100%}
  100%{background-position:61% 0%}
}

::-webkit-scrollbar-thumb:hover {
  background-color: #00595b;
}

::-webkit-scrollbar-track {
  background-color: #00878a;
  /* width: 12px; */
  border-radius: 6px;
}

.logo-mob{
  display: block;
  visibility:inherit;
}

.navbar-bottom{
  display: block;
  visibility: inherit;
}

.text-arabic-welcome{
  font-size: 20px;
  color: #7a1eff;
  font-family: Jannat-lt-bold !important;
}

.arabic-logo{
width: 8vh;
}

.navbar-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: rgb(155, 244, 231);
  background: linear-gradient(-45deg, rgba(245, 222, 179, 0.538), rgba(251, 223, 255, 0.5), #fdffbb7d);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
  border-top: 5px solid rgb(255, 195, 83);
  display: flex;
  justify-content: space-around;
  backdrop-filter: blur(10px);
  z-index: 1000;
  padding: 0vh 2vh 0vh 2vh;
}

.nav-item {
  list-style-type: none;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  border-color: yellow;
}

.nav-item.active {
  border-radius: 100%;
  color: blue;
  /* background: yellow; */
}

.nav-item.active.home {
  color: rgb(151, 54, 254);
  /* border: 3px solid rgb(255, 195, 83); */
}

.nav-item.active.search {
  color: rgb(151, 54, 254);
}
.nav-item.active.notifications {
  color: rgb(151, 54, 254);
}

.nav-item.active.profile {
  color: rgb(151, 54, 254);
}

.nav-link {
  text-decoration: none;
  color: rgb(0, 127, 80);
  font-size: 1.8vh;
}

.nav-icon {
  font-size: 1.5em;
  margin-bottom: 5px;
}

}