* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.body_crousal {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f8fafc;
overflow-x: hidden;
padding: 80px 20px;
}
.about-title {
font-size: 3rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
position: absolute;
top: 40px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
color: #1e293b;
z-index: 1;
text-align: center;
}
.carousel-container {
width: 100%;
max-width: 1200px;
height: 500px;
position: relative;
perspective: 2000px;
margin-top: 60px;
z-index: 2;
}
.carousel-track {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s ease;
}
.carousel-container .card {
position: absolute;
width: 320px;
height: 380px;
background: white; overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
transition: all 0.8s ease;
cursor: pointer;
will-change: transform, opacity;
transform-origin: center;
border: 1px solid #e2e8f0;
display: flex;
flex-direction: column;
}
.carousel-container .card-img {
width: 130px;
height: 130px;
border-radius: 50%;
margin: 25px auto 15px;
object-fit: cover;
border: 3px solid #e2e8f0;
}
.carousel-container .card-content { text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.card-name {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 5px;
color: #1e293b;
}
.card-role {
font-size: 0.9rem;
color: #64748b;
margin-bottom: 15px;
font-weight: 500;
margin-block-end: 0 !important
}
.card-description {
color: #64748b;
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 20px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
} .carousel-container .card.center {
z-index: 10;
transform: scale(1.1) translateZ(0);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.carousel-container .card.left-2 {
z-index: 1;
transform: translateX(-380px) scale(0.8) translateZ(-200px) rotateY(15deg);
opacity: 0.5;
}
.carousel-container .card.left-1 {
z-index: 5;
transform: translateX(-190px) scale(0.9) translateZ(-50px) rotateY(8deg);
opacity: 0.7;
}
.carousel-container .card.right-1 {
z-index: 5;
transform: translateX(190px) scale(0.9) translateZ(-50px) rotateY(-8deg);
opacity: 0.7;
}
.carousel-container .card.right-2 {
z-index: 1;
transform: translateX(380px) scale(0.8) translateZ(-200px) rotateY(-15deg);
opacity: 0.5;
}
.carousel-container .card.hidden {
opacity: 0;
pointer-events: none;
} .carousel-container .dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 50px;
z-index: 2;
}
.carousel-container .dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #cbd5e1;
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-container .dot.active {
background: #3b82f6;
transform: scale(1.2);
} .carousel-container .nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: white;
color: #64748b;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
transition: all 0.3s ease;
font-size: 1.2rem;
border: 1px solid #e2e8f0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.carousel-container .nav-arrow:hover {
background: #3b82f6;
color: white;
border-color: #3b82f6;
}
.carousel-container .nav-arrow.left {
left: 10px;
}
.carousel-container .nav-arrow.right {
right: 10px;
} @media (max-width: 1024px) {
.about-title {
font-size: 2.5rem;
}
.carousel-container .card {
width: 280px;
height: 400px;
}
.carousel-container .card.left-2 {
transform: translateX(-320px) scale(0.8) translateZ(-200px) rotateY(15deg);
}
.carousel-container .card.left-1 {
transform: translateX(-160px) scale(0.9) translateZ(-50px) rotateY(8deg);
}
.carousel-container .card.right-1 {
transform: translateX(160px) scale(0.9) translateZ(-50px) rotateY(-8deg);
}
.carousel-container .card.right-2 {
transform: translateX(320px) scale(0.8) translateZ(-200px) rotateY(-15deg);
}
}
@media (max-width: 768px) {
.about-title {
font-size: 2rem;
top: 30px;
}
.carousel-container {
height: 450px;
}
.carousel-container .card {
width: 240px;
height: 380px;
}
.carousel-container .card.left-2 {
transform: translateX(-260px) scale(0.8) translateZ(-200px) rotateY(15deg);
}
.carousel-container .card.left-1 {
transform: translateX(-130px) scale(0.9) translateZ(-50px) rotateY(8deg);
}
.carousel-container .card.right-1 {
transform: translateX(130px) scale(0.9) translateZ(-50px) rotateY(-8deg);
}
.carousel-container .card.right-2 {
transform: translateX(260px) scale(0.8) translateZ(-200px) rotateY(-15deg);
}
.carousel-container .nav-arrow {
width: 40px;
height: 40px;
font-size: 1rem;
}
}
@media (max-width: 540px) {
.about-title {
font-size: 1.7rem;
}
.carousel-container {
height: 400px;
}
.carousel-container .card {
width: 200px;
height: 340px;
}
.card.left-2,
.card.right-2 {
display: none;
}
.card.left-1 {
transform: translateX(-110px) scale(0.85) translateZ(-50px) rotateY(8deg);
}
.card.right-1 {
transform: translateX(110px) scale(0.85) translateZ(-50px) rotateY(-8deg);
}
.carousel-container .card-img {
width: 100px;
height: 100px;
}
.card-name {
font-size: 1.2rem;
}
.card-description {
-webkit-line-clamp: 4;
font-size: 0.8rem;
}
.dots {
margin-top: 40px;
}
}