@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

:root {
    --header-height: 3.5rem;
    --nav-width: 219px;

    --first-color: #6923D0;
    --first-color-light: #F4F0FA;
    --title-color: #19181B;
    --text-color: #58555E;
    --text-color-light: #A5A1AA;
    --body-color: #F9F6FD;
    --container-color: #FFFFFF;

    --body-font: 'Poppins', sans-serif;
    --signature-font: 'Turret Road', sans-serif;
    --normal-font-size: .938rem;
    --small-font-size: .75rem;
    --smaller-font-size: .75rem;

    --font-medium: 500;
    --font-semi-bold: 600;

    --z-fixed: 100;
}

@media screen and (min-width: 1024px) {
    :root {
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

*,::before,::after { box-sizing: border-box; }
body { margin: var(--header-height) 0 0 0; padding: 1rem 1rem 0; font-family: var(--body-font); font-size: var(--normal-font-size); color: var(--text-color); width: 100%; height: 100vh; background-image: url(''); background-position: center; background-size: cover; background-repeat: no-repeat; }
h3 { margin: 0; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }

/*Header*/

.header { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--container-color); box-shadow: 0 1px 0 rgba(22, 8, 43, .1); padding: 0 1rem; z-index: var(--z-fixed); }
.header-container { display: flex; align-items: center; height: var(--header-height); justify-content: space-between; }
.header-img { width: 45px; height: 45px; border-radius: 15%; }
.header-logo { color: var(--title-color); font-weight: var(--font-medium); font-family: var(--signature-font); display: none; }
.header-search { display: flex; padding: 0.4rem 0.75rem; background-color: var(--first-color-light); border-radius: .25rem; }
.header-input { width: 100%; border: none; outline: none; background-color: var(--first-color-light); }
    .header-input::placeholder { font-family: var(--body-font); color: var(--text-color); }
.header-icon, .header-toggle { font-size: 1.2rem; }
    .header-toggle { color: var(--title-color); cursor: pointer; }

/*Nav*/

.nav { position: fixed; top: 0; left: -100%; height: 100vh; padding: 1rem 1rem 3rem; background-color: var(--container-color); box-shadow: 1px 0 0 rgba(22, 8, 43, .1); z-index: var(--z-fixed); transition: .4s; }
.nav-container { height: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: auto; scrollbar-width: none; }
.nav-container::-webkit-scrollbar { display: none; }
.nav-logo { font-weight: var(--font-semi-bold); margin-bottom: 2.5rem; font-family: var(--signature-font); }
.nav-list, .nav-items { display: grid; }
    .nav-list { row-gap: 2.5rem; }
    .nav-items { row-gap: 1.5rem; }
.nav-subtitle { font-size: var(--normal-font-size); text-transform: uppercase; letter-spacing: 0.1rem; color: var(--text-color-light); }
.nav-link { display: flex; align-items: center; color: var(--text-color); }
.nav-icon { font-size: 1.2rem; margin-right: 0.5rem; }
.nav-name { font-size: var(--small-font-size); font-weight: var(--font-medium); white-space: nowrap; }
.nav-logout { margin-top: 5rem; }

/*Dropdown*/

.nav-dropdown { overflow: hidden; transition: .4s ease-in-out; max-height: 21px; }
    .nav-dropdown:hover { max-height: 100rem; }
.nav-dropdown-collapse { background-color: var(--first-color-light); border-radius: .25rem; margin-top: 1rem; }
.nav-dropdown-content { display: grid; row-gap: .5rem; padding: 0.75rem 2.5rem 0.75rem 1.8rem; }
.nav-dropdown-item { font-size: var(--smaller-font-size); font-weight: var(--font-medium); color: var(--text-color); }
    .nav-dropdown-item:hover { color: var(--first-color); }
.nav-dropdown-icon { margin-left: auto; transition: .4s; }
    .nav-dropdown:hover .nav-dropdown-icon { transform: rotate(180deg); }
.show-menu { left: 0; }
.active { color: var(--first-color); }



@media screen and (max-width: 320px) {
    .header-search { width: 70%; }
}

@media screen and (min-width: 768px) {
    body { padding: 1rem 3rem 0 6rem; }
    .header { padding: 0 3rem 0 6rem; }
    .header-container { height: calc(var(--header-height) + .5rem); }
    .header-search { width: 300px; padding: 0.55rem .75rem; }
    .header-toggle { display: none; }
    .header-logo { display: block; }
    .header-img { width: 40px; height: 40px; order: 1; }
    .nav { left: 0; padding: 1.2rem 1.5rem 3rem; width: 68px; }
        .nav:hover { width: var(--nav-width); }
    .nav-items { row-gap: 1.7rem; }
    .nav-icon { font-size: 1.3rem; }
    .nav-logo-name, .nav-name, .nav-subtitle, .nav-dropdown-icon { opacity: 0; transition: .3s; }
        .nav:hover .nav-logo-name, .nav:hover .nav-name, .nav:hover .nav-subtitle, .nav:hover .nav-dropdown-icon { opacity: 1; }
}
main{
    background-image: url("../image/color.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.clock-digit{
    display: flex;
    justify-content :center;
}
.hour,.minute, .second,.pm-am{
    border :1px solid #606D66;
    background-color :#5D390E;
    color :white;
    display :flex;
    justify-content :center;
    border-radius :10px;
    width: 35px;
    height: 30px;
}
.date{
    border :1px solid #606D66;
    background-color :#606D66;
    color :white;
    display :flex;
    justify-content :center;
    border-radius :10px;
    width: 90px;
    height: 30px;
}
.divar{
  max-width: 100%;
  overflow: hidden;
}
.one{
                background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../backen.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
            text-align: center;
            padding: 200px 0;
}
     h1{ font-weight: 300;
            font-size: 60px;
            line-height: 1;
            margin: 30px 0;}
     h3{ font-weight: 900;
            font-size: 24px;
            line-height: 1.5;
            letter-spacing: 5px;
            margin: 0;}
            .learn{
              display: flex;
              justify-content: flex-end;
              font-size: 16px;
              border: 1px solid rgb(203, 167, 167);
              margin: 50px;
              padding: 12px;
              border-radius: 15px;
              background-color: #cdbfe4;
            }
            .learn:hover{
              background-color: #9562e1;
            }
            h2{
                text-align :center;
                font-size :20px;
            }
            .zan-0{
                font-size: 36px;
            }


.cards {
  background-color: #f4f4f4;
  padding: 20px;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card img {
  width: 200%;
  height: 600px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
  text-align: center;
}

.card-content h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}

.card-content .price {
  font-size: 1.2rem;
  color: #e91e63;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-content .description {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 15px;
}

.buy-btn {
  background: #e91e63;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.buy-btn:hover {
  background: #c2185b;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }

  .card img {
    height: 300px;
  }

  .card-content h3 {
    font-size: 1.3rem;
  }

  .card-content .price {
    font-size: 1.1rem;
  }

  .card-content .description {
    font-size: 0.85rem;
  }
}
.btn-lan{
  margin: 0 auto;
  background-color: #6d6d60;
  border-radius: 15px;
  color: white;
}
.containerer{
  margin: 0 auto;
}
.col{
    border-radius: 15px;
    border: 1px solid #6e7086;
    background-color: #f4f4f4;
    padding-bottom: 12px;
    
    
}
.dogm{
    border-radius: 15px;
    color: white;
    border: 2px solid #e91e63;
    background-color: #e91e63;
    padding: 3px;
}
.dogm:hover{
    background-color: #791d3b;
}
.chi{
    transition: all 150ms ease-in-out;
}
.chi:hover{
    transform: scale(1.2);
}
.ham{
  text-align: center;
  font-size: 30px;
}
.containeriii{
    border: 1px solid rgb(172, 175, 232);
    background-color: rgb(204, 206, 238);
    margin: 0 auto;
    padding: 0;
    width: 60%;
    border-radius: 15px;
    
}