/* == Primary Styles == */

:root {
    --bg: #ffffff;
    --text: #000000;
    --myGreen: #d8efee;
    --myBlue: #d9ebf6;
    --table: #e8e8e8 ;
    --comment : #f2f2f2 ;
    --navbar: #ebebeb ;
    --myFONT-w: #ffffff;
    --myFONT-B: #2e2e2e;
    --myFontColor: #2aaac6;
    --myWhite: #eff1f4;
    --myBG: linear-gradient(90deg,
        rgba(255, 255, 255, 1) 0%,
        rgb(235, 235, 235) 50%,
        rgba(255, 255, 255, 1) 100%);
    --textColor: #000000;
}

.dark {
    --bg: #121212;
    --text: #ffffff;
    --myGreen: #1d2b2a;
    --myBlue: #162c3b;
    --navbar: #414a4b ;
    --table: #424b4c ;
    --comment : #1d2b2a ;
    --myFontColor: #90e0ef;
    --myWhite: #0f2027;
    --myFONT-w: #0f2027;
    --myFONT-B: #ffffff;
    --myBG: linear-gradient(90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(67, 76, 77, 1) 50%, 
    rgba(32, 36, 37, 1) 100%,
    rgba(32, 36, 37, 1) 100%);
    --textColor: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--textColor);
}

body {
    background: var(--myBG);
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    margin-bottom: 10px;
    padding: 0 160px ;}

ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size : 70px;
    text-align: center;
    text-transform: inherit;
    color: var(--myFONT);
}

a{
    text-decoration: none ;
    color:#333;
}


p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
    margin: 0;
    padding: 10px 0 0 0;
}


span{
   text-decoration: none;
    color: #333; 
}



.p_15{
    padding-left:45px ;
    padding-right: 45px;
}

.clearfix {clear: both;}


.btn{
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 190px;
    height: 60px;
    background-color: #50a4a3; 
    color: var(--myWhite);
    border: none;
    border-radius: 10px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 20px;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: #7bbab9; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: scale(1.03);
}

.btn:active {
    background-color: #50a4a3;
    transform: scale(0.98);
}

.logo{
    display: flex;
}



.logo h2 {
    font-size:x-large ;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
    font-weight:bolder ;
    padding: 25px 0px 0px 10px;
    color: var(--textColor);
    text-shadow: 2px 5px 5px var(--myGreen);
}

.logo_class{
    width: 50px;
    height: auto;
    padding-top: 10px;
    display: inline-block;

}




/* == Home - Header Section == */

.headder {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}

.left_side {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* .logo img {
  width: 140px;
  height: 75px;
  object-fit: contain;
} */

.search_box form {
  
  display: flex;
  align-items: center;
  border: 1px solid var(--navbar);
  margin-top: 25px;
  border-radius: 10px;
  overflow: hidden;
  max-width: 350px;
  width: 100%;
}

.search_box input {
  padding: 10px 15px;
  border: none;
  outline: none;
  /* width: 50px; */
  flex: 1;
}

.search_box button {
  background-color: #50a4a3;
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

.search_box i {
  font-size: 16px;
}

.right_side {
  display: flex;
  align-items: center;
  gap: 15px;
}

.right_side button {
  padding: 8px 15px;
  margin-right: 10px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  background-color: #50a4a3;
  color: white;
  cursor: pointer;
}

.icon i {
  font-size: 25px;
  margin: 0 8px;
  color: var(--textColor);
  cursor: pointer;
}





.Day-light{
    width: 75px;
    height: 32px;
}
.Day-light i{
    font-weight: bold;
    font-size: 18px;
    margin: 2px;
    color: #ededed;
}

.main_header{
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-end;
	align-content: flex-start;
}



.hamburgerMenu {
    top: 40px;
    width: 40px; 
    height: 40px;
    background-color: #2e706e;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: fixed;
    /* margin: 25px 225px 0px 0px; */
    cursor: pointer;
    right: 20px;
    transition: right 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;

    z-index: 100000;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.hamburger {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
    border-radius: 2px;
}


/* .sideMenu{
    width: 300px;
    height: 100%;
    background-color: #b9b9b9;
    position: fixed;
    right: 10px;
    transition: ease 0.3s;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
} */
.sideMenu button {
    width: 80%;
    margin: 10px 0;
}


.sideMenu {
    width: 300px;
    height: 100%;
    background-color: var(--myBlue);
    color: #f0f0f0;
    position: fixed;
    top: 0;
    right: -340px;
    padding: 30px 20px;
    box-sizing: border-box;
    transition: right 0.3s ease;
    z-index: 99999;

    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sideMenu.open {
    right: 0;
}

.sideMenu h2 u {
    font-weight: 700;
    font-size: 24px;
    text-decoration: underline;
    margin-bottom: 30px;
    color:var(--text);
    text-align: center;
    display: block;
    width: 100%;
}

.sideMenu nav ul {
    list-style: none;
    padding: 0;
    width: 100%;
    margin-bottom: 30px;
}

.sideMenu nav ul li {
    padding: 12px 15px;
    border-bottom: 1px solid #558080;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.2s ease;
    border-radius: 6px;
}

.sideMenu nav ul li:hover {
    background-color: #476a6a;
}

.sideMenu button {
    width: 100%;
    padding: 12px 0;
    margin: 8px 0;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #2f4f4f;
    background-color: #aad4d4;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sideMenu button:hover {
    background-color: #91c7c7;
    color: #1f3939;
}

/* @media (max-width: 480px) {
    .sideMenu {
        width: 100%;
        right: -100%;
    }
    .sideMenu.open {
        right: 0;
    }
    .sideMenu h2 u {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .sideMenu nav ul li {
        font-size: 16px;
        padding: 10px 12px;
    }
    .sideMenu button {
        font-size: 14px;
        padding: 10px 0;
    }
} */



#myBtn {
  display: none;
  position: fixed;
  bottom: 20px; 
  right: 30px; 
  z-index: 99; 
  border: none; 
  outline: none; 
  background-color: var(--myFontColor);
  color: white; 
  cursor: pointer;
  padding: 15px 18px;
  border-radius: 10px;
  font-size: 18px;
  
}

#myBtn:hover {
  background-color: #555;
  scale: 1.05;
}

/* Pop Up login menu */

#close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    color: var(--bg);
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--text);
    font-size: x-large;
}

.popup_login {
    width: 350px;
    max-width: 90%;
    background-color: var(--navbar, #fff);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: fixed;
    z-index: 999999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 25px;
    text-align: center;
    font-family: sans-serif;
    box-sizing: border-box;
    visibility: hidden;
}

.popup_login h2 {
    font-weight: bolder;
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: var(--text);
}

.popup_login label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text);
}

.popup_login input {
    width: 100%;
    height: 35px;
    margin-bottom: 15px;
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid var(--text);
    box-sizing: border-box;
    font-size: 0.95rem;
}

.popup_login input:focus {
    outline: none;
    border-color: #007BFF;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.4);
}

.popup_login button {
    width: 100%;
    height: 40px;
    background: #007BFF;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.popup_login button:hover {
    background: #0056b3;
}

.popup_login a {
    display: block;
    margin-top: 15px;
    font-size: 0.85rem;
    color: #007BFF;
    text-decoration: none;
}

.popup_login a:hover {
    text-decoration: underline;
}

/* Cart Menu */
#cart_side {
    right: -280px;
    position: fixed;
    width: 280px;
    height: 100%;
    z-index: 99999;
    background-color: var(--myGreen);
    display: flex;
    flex-direction: column; 
    align-items: center;
    border: 0.1px dotted var(--text);

    transition: right 0.3s ease;
}

#cart_side.active {
    right: 0;
}

#cart_side h2 {
    text-align: center;
    color: var(--text);
    padding-top: 50px;
    font-size: 30px;
}

.box {
    width: 80%;
    height: 80px;
    background-color: var(--navbar);
    margin-top: 20px;
    border-radius: 10px;
}
.box p {
    font-size: 20px;
    color: var(--text);
    text-align: center;
    margin-top: 10px;
}

#close_cart {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 35px;
    color: var(--bg);
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--text);
    font-size: x-large;
}


/* Notification Popup */
#notification {
    position: fixed;
    z-index: 99999;
    width: 300px;
    height: 300px;
    top: 10px;
    right: 30px;
    background-color: var(--myGreen);
    border-radius: 10px;
    overflow: scroll;

    transform: scale(0.1);
    opacity: 0;
    visibility: hidden;

    transition: transform 0.3s ease, opacity 0.3s ease;
}

#notification.show {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    
}

#notification h2 {
    text-align: center;
    margin: 20px;
}

#notif_box {
    background-color: var(--myFONT-w);
    border-radius: 10px;
    margin: 10px;
}

#notif_box h3 {
    font-size: medium;
    padding: 10px 0px 10px 10px;
    color: var(--text);
}

#notif_box p {
    font-size: 15px;
    padding: 10px 0px 10px 10px;
    color: var(--text);
}

#close_notif {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 35px;
    color: var(--bg);
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--text);
    font-size: x-large;
}


/* ===== Manu - Navigation ====== */
.Main_menu {
    background-color: var(--navbar);
    /* border-radius: 15px; */
    position: relative;
    z-index: 9999;
}

.about_icon{
    width: 17px;
    height: 17px;
    background: url(../IMAGES/Icons/dropdown.svg) center no-repeat;
    background-size: cover;
    display: inline-block;
    vertical-align: -5px;
}

.Home_icon{
    width: 18px;
    height: 18px;
    background: url(../Images/Icons/home.svg) center no-repeat;
    background-size: cover;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 5px;
}


.drop_down_menu{
    position: absolute;
    background-color: rgb(255, 255, 255);
    width: 130px;
    height: auto;
    top: 100%;
    left: 0px;
    box-shadow: 0px 2px 3px ;
    display: none;
    border-radius: 8px;
    
}
.search_box i {
    color: #fff;
}
.drop_down_menu li {
    font-size: 16px;
    padding: 10px;
}

.drop_down_menu li:hover {
    background-color: #d8efee;
    border-radius: 5px;
}

.dropdown .drop_down_menu{
    display: none;
}
.dropdown:hover .drop_down_menu{
    display: block;
}


nav{
    display: inline-block;
    margin: 5px;
    

}
.nav_ul {
    display: inline-block;
    
}

.nav_ul > li {
    display: inline-block;   
    /* برای اینکه منو ها روبروی هم باشن نه زیر هم */
    padding-right: 20px;
    margin: 4px;
    position: relative;
}
.nav_ul > li > a,
.nav_ul > li > a >i>span {
    color: var(--textColor);
}
.nav_ul > li > a > i,
.nav_ul > li > a >span {
    color: var(--textColor);
}




/* ===== Sliders ===== */
.Sliders {
    margin-top: 30px;
    
}

.Sliders .container {
    padding: 0px 25px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    
}

.left_slider{
    /* width: 70%; */
    min-height: 453px;
    /* background-color:rgb(238, 238, 238); */
    border-radius: 25px ;
    margin-left: 3px;
    /* border: solid 0.1px #626262; */
    display: inline-block;
}

.right_products{
    width: 25%;
    height: auto;
    min-height: 300px;
    background-color:var(--myWhite);
    border-radius: 15px;
    margin-left: 3px;
    border: solid 0.1px #626262;
    /* display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center; */
}

.produt_box{
    width: 97.5%;
    margin: 5px;
    overflow: hidden;
    display: inline-block;
    background-color:var(--table);
    height: 70px;
    border: solid 0.05px #b1b1b1;
    border-radius: 10px;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.produt_box:hover{
    background-color : var(--myGreen);

}


.img_box{
    width: 50px;
    height: 50px;
    margin: 10px;
    /* background-color: #007bff; */
    float: right;
    border-radius: 10px;
}
.img_box img{
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.produt_box  h2 {
    margin: 10px;
    text-align: left;
    font-weight:800 ;
    font-size: medium;
    /* display: -webkit-box;  */
/* Prevents the box contents from overflowing when the size changes */
}

.produt_box a{ color: var(--text);
}

.produt_box   p {
    color: var(--text);
    text-align: left;
    font-weight:800 ;
    font-size: medium;
    padding: 0px 0 0 10px;
    font-weight:100 ;
    font-size: small;
}














.carousel-inner{
    border-radius: 20px;
}
/* Slider_show_from_w3school */
.slideshow-container {
  max-width: 845px;
  position: relative;
  margin: auto;
  border-radius: 20px;
  
}

/* Hide the images by default */
.mySlides {
  display: none;
    border-radius: 15px;
    overflow: auto;
  
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}



/* ========= Product - Section ========= */

.products{
	flex-wrap: wrap;
}

.products h2{
    font-size: x-large;
    padding: 0 0 10px 0px;
    transition:all 0.3s ease ;
}
.products h2:hover{
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.products .container{
    width: 100%;
    max-width: 1440px;
    /* max-width: 1570px; */

    margin: 0 auto;
}
.pdc_sec{
    /* max-width: 2200px; */
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}

.p_box{
    width: 23%;
    height: 400px;
    margin: 10px;
    background-color: var(--table);
    border: 1px solid #bbb;
    border-radius: 15px;
    overflow: hidden;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.p_box:hover{
    background-color: var(--myGreen);

}

.price{
    font-weight: bold;
}
.amount{
    color: red;
}

.p_box h2 {
    text-align: center;
    font-size: large;
    color: var(--text);
    
}


.img_sec{
    display: flex;
    justify-content: center;
}
.img_sec img {
    width: 250px;
    height: auto;
    padding: 20px;
    border-radius: 35px;
}

.p_box p {
    /* font-weight: ; */
    font-size: medium;
    text-align: center;
}

.p_box button{
    margin: 10px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 40px;
    background-color: #50a4a3; 
    color: white;
    border: none;
    border-radius: 10px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}

.p_box button:hover {
    background-color: #7bbab9; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transform: scale(1.03);
}

.p_box button:active {
    background-color: #50a4a3;
    transform: scale(0.98);
}

/* ========= Advertisment ========= */

.advertisment .container {
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
    max-width: 1440px;
    margin: 0 auto; /* این خط باعث میشه همیشه وسط بمونه */

}

.left_ad{
    width: 23%;
    height: 344px;
    background-color: var(--myGreen);
    margin: 15px;
    border-radius: 15px;
}

.right_ad{
    width: 74%;
    height: 344px;
    margin: 10px;
    border-radius: 15px;

}

.right_ad img{
    width: 100%;
    height: 344px;
    border-radius: 15px;
    transition: ease 0.3s;
}

.right_ad img:hover{
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.4);
}




/* ========= Footer ========= */
footer{
    margin-top: 100px;
    width: 100%;
    height: 400px;
    background-color: #295858;
}

footer .container{
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	align-content: center;
    margin: 0 auto;
    gap: 8%;
    padding-top: 30px;
    padding-bottom: 10px;
    border-bottom: #c4c4c4 0.1px dotted;

}


.First_column{
    width: 25%;
    height: 300px;
    /* background-color: #abdedd; */
    border-radius: 5px;
}

.Sec_column{
    width: 25%;
    height: 300px;
    /* background-color: #abdedd; */
    border-radius: 5px;

}

.Third_column{
    width: 25%;
    height: 300px;
    /* background-color: #abdedd; */
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;   
    justify-content: flex-start;
    overflow: hidden;

}

.copyright_sec{
    width: 100%;
    height: auto;
    background-color: #295858;

}

.copyright_sec p{
    text-align: center;
    color: #dafffe;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
    font-weight: 400;
    font-size: medium;
    padding: 10px 0px;
}

.copyright_sec a{
    text-align: center;
    color: #dafffe;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
    font-weight: 400;
    font-size: medium;
    padding: 10px 0px;
}

.First_column h2{
    text-align: center;
    padding: 10px;
    color: #abdedd;
    font-size: x-large;
    border-bottom: solid #abdedd 1px;

}

.First_column a {
  text-align: center;
    padding: 10px;
    color: #abdedd;
    font-size: 16px;
    border-bottom: solid #abdedd 1px;
  display: block;
  border-bottom: none;
  transition: all 0.3s ease  ;
}
.First_column a:hover{
    color: #fff;
    font-weight: bold;
}


/*  */
.Sec_column h2{
    text-align: center;
    padding: 10px;
    color: #abdedd;
    font-size: x-large;
    border-bottom: solid #abdedd 1px;

}

.Sec_column a {
  text-align: center;
    padding: 10px;
    color: #abdedd;
    font-size: 16px;
    border-bottom: solid #abdedd 1px;
  display: block;
  border-bottom: none;
  transition: all 0.3s ease  ;
}
.Sec_column a:hover{
    color: #fff;
    font-weight: bold;
}
/*  */
.Third_column h2{
    text-align: center;
    padding: 10px;
    color: #abdedd;
    font-size: x-large;
    border-bottom: solid #abdedd 1px;

}

.Third_column a {
  text-align: center;
    padding: 10px;
    color: #abdedd;
    font-size: 16px;
    border-bottom: solid #abdedd 1px;
  display: block;
  border-bottom: none;
  transition: all 0.3s ease  ;
}
.Third_column a:hover{
    color: #fff;
    font-weight: bold;
}

.Third_column img{
    width: 150px;
    height:150px ;
    border-radius: 10px;
    margin-top: 15px;
}





