/*====================================================* HOME PROJECTS SECTION ====================================================*/ .home-projects { width: 100%; background: #30453f; padding: 80px 0 90px; box-sizing: border-box; overflow: hidden; } /*====================================================* CONTAINER ====================================================*/ .home-projects-container { width: 90%; max-width: 1400px; margin: 0 auto; } /*====================================================* INTRO ====================================================*/ .home-projects-intro { width: calc(100% - 90px); margin: 0 auto 55px; display: flex; align-items: flex-start; justify-content: space-between; gap: 50px; box-sizing: border-box; } /*====================================================* INTRO CONTENT ====================================================*/ .home-projects-intro-content { max-width: 650px; } /*====================================================* TITLE ====================================================*/ .home-projects-title { margin: 0 0 12px; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 48px; font-weight: 600; line-height: 1.15; letter-spacing: -1.5px; } /*====================================================* DESCRIPTION ====================================================*/ .home-projects-description { width: 100%; max-width: 620px; margin: 0; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.8; } /*====================================================* BUTTON ====================================================*/ .home-projects-button { width: 190px; height: 52px; margin-top: 82px; padding: 0 20px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 30px; background: transparent; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 500; text-decoration: none; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .home-projects-button:hover { background: #ffffff; color: #182b34; transform: translateY(-3px); } /*====================================================* BUTTON ARROW ====================================================*/ .home-projects-button-arrow { font-size: 21px; font-weight: 300; line-height: 1; transition: transform 0.3s ease; } .home-projects-button:hover .home-projects-button-arrow { transform: translateX(4px); } /*====================================================* SLIDER ====================================================*/ .home-projects-slider { position: relative; width: calc(100% - 90px); margin: 0 auto; overflow: hidden; box-sizing: border-box; } /*====================================================* TRACK ====================================================*/ .home-projects-track { display: flex; align-items: flex-start; gap: 20px; width: max-content; margin: 0; padding: 0; will-change: transform; } /*====================================================* PROJECT CARD ====================================================*/ .home-project-card { width: var(--home-project-card-width); flex: 0 0 var(--home-project-card-width); min-width: 0; box-sizing: border-box; } /*====================================================* PROJECT IMAGE ====================================================*/ .home-project-image { width: 100%; height: 305px; overflow: hidden; border-radius: 18px; } /*====================================================* PROJECT IMAGE IMG ====================================================*/ .home-project-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .home-project-card:hover .home-project-image img { transform: scale(1.04); } /*====================================================* PROJECT TITLE ====================================================*/ .home-project-title { margin: 20px 0 12px; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 21px; font-weight: 600; line-height: 1.45; } /*====================================================* PROJECT DESCRIPTION ====================================================*/ .home-project-description { margin: 0; color: rgba(255, 255, 255, 0.9); font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 400; line-height: 1.8; } /*====================================================* LEFT ARROW ====================================================*/ .home-projects-arrow { position: absolute; top: 190px; left: -24px; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #30453f; font-family: Arial, sans-serif; font-size: 22px; font-weight: 300; cursor: pointer; z-index: 10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .home-projects-arrow:hover { background: #182b34; color: #ffffff; transform: scale(1.08); } /*====================================================* TABLET ====================================================*/ @media (max-width: 1200px) { .home-projects { padding: 70px 0 80px; } .home-projects-intro { width: calc(100% - 60px); } .home-projects-slider { width: calc(100% - 60px); } .home-projects-title { font-size: 44px; } .home-project-image { height: 280px; } } /*====================================================* TABLET / SMALL DESKTOP ====================================================*/ @media (max-width: 992px) { .home-projects-intro { width: calc(100% - 40px); margin-bottom: 45px; } .home-projects-slider { width: calc(100% - 40px); } .home-projects-title { font-size: 40px; } .home-projects-description { font-size: 14px; } .home-projects-button { margin-top: 65px; } .home-project-image { height: 240px; } .home-project-title { font-size: 18px; } .home-project-description { font-size: 11px; } .home-projects-arrow { top: 155px; } } /*====================================================* MOBILE ====================================================*/ @media (max-width: 768px) { .home-projects { padding: 55px 0 65px; } .home-projects-container { width: 90%; } .home-projects-intro { width: 100%; display: block; margin-bottom: 40px; } .home-projects-title { font-size: 36px; letter-spacing: -1px; } .home-projects-description { font-size: 13px; line-height: 1.8; } .home-projects-button { margin-top: 25px; } .home-projects-slider { width: 100%; margin: 0; } /* ONE CARD ON MOBILE */ .home-project-card { width: calc(100vw - 40px); flex: 0 0 calc(100vw - 40px); } .home-project-image { height: 300px; border-radius: 16px; } .home-project-title { font-size: 19px; } .home-project-description { font-size: 12px; } .home-projects-arrow { left: 8px; top: 145px; width: 42px; height: 42px; font-size: 20px; } } /*====================================================* SMALL MOBILE ====================================================*/ @media (max-width: 480px) { .home-projects { padding: 45px 0 55px; } .home-projects-container { width: 92%; } .home-projects-title { font-size: 31px; } .home-projects-description { font-size: 12px; line-height: 1.75; } .home-projects-button { width: 180px; height: 49px; font-size: 11px; } .home-project-card { width: calc(100vw - 30px); flex: 0 0 calc(100vw - 30px); } .home-project-image { height: 260px; } .home-project-title { font-size: 17px; } .home-project-description { font-size: 11px; } .home-projects-arrow { top: 125px; } } /*====================================================* VERY SMALL MOBILE ====================================================*/ @media (max-width: 360px) { .home-projects-title { font-size: 28px; } .home-project-card { width: calc(100vw - 24px); flex: 0 0 calc(100vw - 24px); } .home-project-image { height: 230px; } .home-project-title { font-size: 16px; } .home-project-description { font-size: 10.5px; } }