@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

  

main#carousel {
    width: 100vw;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 600px;
    position: relative;
    --items: 11;
    --position: 1;
}

div.item {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    width: 300px;
    height: 400px;
    background-color: coral;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 20px;
    --r: calc(var(--position) - var(--offset));
    --abs: max(calc(var(--r) * -1), var(--r));
    transition: all 0.25s linear;
    transform: rotateY(calc(-10deg * var(--r))) translateX(calc(-300px * var(--r)));
    z-index: calc((var(--position) - var(--abs)));
}

div.item::before {
    content: '';
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: -1;
}

div.item h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

div.item p {
    font-size: 1rem;
    font-weight: 300;
}

/* div.item:nth-of-type(1) { --offset: 1; background-color: #90f1ef; }
div.item:nth-of-type(2) { --offset: 2; background-color: #ff70a6; }
div.item:nth-of-type(3) { --offset: 3; background-color: #ff9770; }
div.item:nth-of-type(4) { --offset: 4; background-color: #ffd670; }
div.item:nth-of-type(5) { --offset: 5; background-color: #e9ff70; }
div.item:nth-of-type(6) { --offset: 6; background-color: #70ffb3; }
div.item:nth-of-type(7) { --offset: 7; background-color: #70d6ff; }
div.item:nth-of-type(8) { --offset: 8; background-color: #ff70a6; }
div.item:nth-of-type(9) { --offset: 9; background-color: #ff9770; }
div.item:nth-of-type(10) { --offset: 10; background-color: #ffd670; }
div.item:nth-of-type(11) { --offset: 11; background-color: #e9ff70; } */





/* Specific gradients for each card */
/* div.item:nth-of-type(1) { 
  background: linear-gradient(135deg, #ff9a8b, #ff6f91);
}
div.item:nth-of-type(2) { 
  background: linear-gradient(135deg, #ff6f9f, #ff4d77);
}
div.item:nth-of-type(3) { 
  background: linear-gradient(135deg, #ff7f9c, #ff5e6e);
}
div.item:nth-of-type(4) { 
  background: linear-gradient(135deg, #ff9a9e, #ff6f7f);
}
div.item:nth-of-type(5) { 
  background: linear-gradient(135deg, #ff6f7d, #ff4b6d);
}
div.item:nth-of-type(6) { 
  background: linear-gradient(135deg, #ff8f9f, #ff6b9c);
}
div.item:nth-of-type(7) { 
  background: linear-gradient(135deg, #ff5f6c, #ff2d5a);
}
div.item:nth-of-type(8) { 
  background: linear-gradient(135deg, #ff8b8d, #ff6e6b);
}
div.item:nth-of-type(9) { 
  background: linear-gradient(135deg, #ff9f9e, #ff6f9b);
}
div.item:nth-of-type(10) { 
  background: linear-gradient(135deg, #ff6e9e, #ff4f7e);
}
div.item:nth-of-type(11) { 
  background: linear-gradient(135deg, #ff7f8d, #ff5c7f);
} */

/* Specific gradients for each card */
div.item:nth-of-type(1) { 
  background: linear-gradient(135deg, #ff7eb3, #ff65a3);
}
div.item:nth-of-type(2) { 
  background: linear-gradient(135deg, #ff6393, #ff4d7e);
}
div.item:nth-of-type(3) { 
  background: linear-gradient(135deg, #ff94c9, #ff7bb2);
}
div.item:nth-of-type(4) { 
  background: linear-gradient(135deg, #ff78a5, #ff5d8b);
}
div.item:nth-of-type(5) { 
  background: linear-gradient(135deg, #ff6f85, #ff5268);
}
div.item:nth-of-type(6) { 
  background: linear-gradient(135deg, #ff99b5, #ff7d96);
}
div.item:nth-of-type(7) { 
  background: linear-gradient(135deg, #ff5470, #ff3a55);
}
div.item:nth-of-type(8) { 
  background: linear-gradient(135deg, #ff849b, #ff617e);
}
div.item:nth-of-type(9) { 
  background: linear-gradient(135deg, #ff99aa, #ff6f8c);
}
div.item:nth-of-type(10) { 
  background: linear-gradient(135deg, #ff8fb3, #ff699c);
}
div.item:nth-of-type(11) { 
  background: linear-gradient(135deg, #ff7b9c, #ff5782);
}


/* Optional: Adjust the glow intensity and color */
div.item::before {
  background-color: rgba(255, 105, 180, 0.3); /* Light pink glow */
}

input {
    display: none;
}

main#carousel {
    animation: auto-rotate 15s infinite linear;
}

.nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #333;
    background: rgba(255, 255, 255, 0.7);
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
}

.nav.left {
    left: 10px;
}

.nav.right {
    right: 10px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    /* bottom: 20px; */
    left: 50%;
    transform: translateX(-50%);
}

.pagination .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    transition: background-color 0.3s;
}

.pagination .circle.active {
    background-color: #333;
}

.whatweoff {
    height: 500px;
    background-color: #939393;
    position: relative;
}