.home-section { display: flex; align-items: center; border-bottom: 1px solid black; } .home-carousel-container { position: relative; width: 100%; height: 100%; /* max-width: 600px; */ margin: 0 auto; overflow: hidden; align-items: center; justify-content: center; } .home-slogan { font-size: 5vw; font-weight: 600; line-height: 1.2; } .home-sub-slogan { font-size: 2vw; font-weight: 600; color: #6d6b6b; } .home-carousel-container-to-slide { height: 100%; padding: 0 0 0 5%; } .home-carousel-slide { display: none; opacity: 0; } .home-carousel-slide.active { display: flex; animation: fadeIn 1s ease forwards; height: 100%; align-items: center; } .home-carousel-wrapper { display: flex; height: 100%; align-items: center; flex-direction: row-reverse; padding: 0 5%; } .home-carousel-content, .home-carousel-images { flex: 1 0 0; } .enquiry-button { padding: 15px 40px; } .home-carousel-content { padding: 5% 0 0 0; display: flex; flex-direction: column; justify-content: space-around; gap: 2rem; } .home-carousel-images { display: flex; height: 100%; align-items: center; justify-content: center; } .home-carousel-images img { width: 75%; height: auto; display: block; } .home-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); /* background-color: rgba(255, 255, 255, 0.5); */ padding: 10px; cursor: pointer; } .home-carousel-arrow.left { left: 0; } .home-carousel-arrow.right { right: 0; } @keyframes home-slideLeft { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0%); opacity: 1; } } @keyframes home-slideRight { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0%); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* media queries */ @media (max-width: 575.98px) { .home-carousel-slide.active { height: 50%; } .home-carousel-container-to-slide { height: 50%; align-items: center; display: flex; justify-content: center; } .home-carousel-wrapper { flex-direction: column; } .home-carousel-content { gap: 0rem; } .home-carousel-content { padding: 0; } .home-carousel-container-to-slide { padding: 5% 5% 0 5%; } .home-slogan { font-size: 8vw; } .home-sub-slogan { font-size: 6vw; } .home-carousel-arrow { top: 35%; } } @media (min-width: 576px) and (max-width: 767.98px) { .home-carousel-slide.active { height: 50%; } .home-carousel-container-to-slide { height: 50%; align-items: center; display: flex; justify-content: center; } .home-carousel-wrapper { flex-direction: column; gap: 2rem; } .home-carousel-wrapper { justify-content: space-evenly; } .home-carousel-content { gap: 0rem; } .home-carousel-content { padding: 0; } .home-carousel-container-to-slide { padding: 5% 5% 0 5%; } .home-slogan { font-size: 7vw; } .home-sub-slogan { font-size: 3vw; } .home-carousel-arrow { top: 35%; } } @media (min-width: 768px) and (max-width: 991.98px) { .home-carousel-slide.active { height: 50%; } .home-carousel-container-to-slide { height: 50%; align-items: center; display: flex; justify-content: center; } .home-carousel-wrapper { flex-direction: column; gap: 2rem; } .home-carousel-wrapper { justify-content: space-evenly; } .home-carousel-content { gap: 0rem; } .home-carousel-content { padding: 0; display: flex; align-items: center; } .home-carousel-container-to-slide { padding: 5% 5% 0 5%; } .home-slogan { font-size: 6vw; text-align: center; } .home-sub-slogan { font-size: 2vw; } .home-carousel-arrow { top: 35%; } } @media (min-width: 992px) and (max-width: 1199.98px) { .home-carousel-wrapper { padding: 0 0 0 5%; } .home-carousel-container-to-slide { padding: 0; } .home-slogan { font-size: 4vw; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .home-carousel-wrapper { padding: 0 0 0 5%; } .home-carousel-container-to-slide { padding: 0; } } @media (min-width: 1400px) {}