/*====================================================* HOME SERVICES SECTION ====================================================*/ .home-services { width: 100%; background: #e4eee3; padding: 80px 0 90px; box-sizing: border-box; overflow: hidden; } /*====================================================* CONTAINER ====================================================*/ .home-services-container { width: 90%; max-width: 1400px; margin: 0 auto; } /*====================================================* INTRO ====================================================*/ .home-services-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-services-intro-content { max-width: 650px; } /*====================================================* TITLE ====================================================*/ .home-services-title { margin: 0 0 12px; color: #080808; font-family: "Poppins", sans-serif; font-size: 48px; font-weight: 600; line-height: 1.15; letter-spacing: -1.5px; } /*====================================================* DESCRIPTION ====================================================*/ .home-services-description { width: 100%; max-width: 620px; margin: 0; color: #747878; font-family: "Poppins", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.8; } /*====================================================* BUTTON ====================================================*/ .home-services-button { width: 175px; 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-radius: 30px; background: #080808; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 12px; font-weight: 500; text-decoration: none; transition: background 0.3s ease, transform 0.3s ease; } .home-services-button:hover { background: #182b34; transform: translateY(-3px); } /*====================================================* BUTTON ARROW ====================================================*/ .home-services-button-arrow { font-size: 21px; font-weight: 300; line-height: 1; transition: transform 0.3s ease; } .home-services-button:hover .home-services-button-arrow { transform: translateX(4px); } /*====================================================* SLIDER ====================================================*/ .home-services-slider { /* IMPORTANT The slider itself is made slightly smaller so there is equal space on left and right. */ width: calc(100% - 90px); margin: 0 auto; overflow: hidden; box-sizing: border-box; } /*====================================================* TRACK ====================================================*/ .home-services-track { display: flex; align-items: flex-start; gap: 24px; width: max-content; margin: 0; padding: 0; will-change: transform; } /*====================================================* SERVICE CARD ====================================================*/ .home-service-card { width: var(--home-service-card-width); flex: 0 0 var(--home-service-card-width); min-width: 0; box-sizing: border-box; } /*====================================================* ICON ====================================================*/ .home-service-icon { width: 75px; height: 75px; margin: 0 0 15px; border: 1px solid #aec1c2; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); box-sizing: border-box; overflow: hidden; } .home-service-icon img { display: block; width: 70px; height: 70px; object-fit: contain; } /*====================================================* SERVICE TITLE ====================================================*/ .home-service-title { margin: 0 0 10px; color: #080808; font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 600; line-height: 1.35; } /*====================================================* SERVICE DESCRIPTION ====================================================*/ .home-service-description { min-height: 78px; margin: 0 0 22px; color: #444b4b; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.7; } /*====================================================* SERVICE IMAGE ====================================================*/ .home-service-image { width: 100%; height: 250px; overflow: hidden; border-radius: 18px; } .home-service-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .home-service-card:hover .home-service-image img { transform: scale(1.04); } /*====================================================* TABLET ====================================================*/ @media (max-width: 1200px) { .home-services { padding: 70px 0 80px; } .home-services-title { font-size: 44px; } .home-services-slider { width: calc(100% - 60px); } .home-service-image { height: 235px; } } /*====================================================* TABLET / SMALL DESKTOP ====================================================*/ @media (max-width: 992px) { .home-services-intro { margin-bottom: 45px; } .home-services-title { font-size: 40px; } .home-services-description { font-size: 14px; } .home-services-button { margin-top: 65px; } .home-services-slider { width: calc(100% - 40px); } .home-service-title { font-size: 18px; } .home-service-description { font-size: 12px; } .home-service-image { height: 220px; } } /*====================================================* MOBILE ====================================================*/ @media (max-width: 768px) { .home-services { padding: 55px 0 65px; } .home-services-container { width: 90%; } .home-services-intro { display: block; margin-bottom: 40px; } .home-services-title { font-size: 36px; letter-spacing: -1px; } .home-services-description { font-size: 13px; line-height: 1.8; } .home-services-button { margin-top: 25px; } /* MOBILE SLIDER */ .home-services-slider { width: 100%; margin: 0; } /* ONE CARD ON MOBILE */ .home-service-card { width: calc(100vw - 40px); flex: 0 0 calc(100vw - 40px); } .home-service-icon { width: 68px; height: 68px; } .home-service-title { font-size: 19px; } .home-service-description { font-size: 12px; min-height: auto; margin-bottom: 18px; } .home-service-image { height: 300px; border-radius: 16px; } } /*====================================================* SMALL MOBILE ====================================================*/ @media (max-width: 480px) { .home-services { padding: 45px 0 55px; } .home-services-container { width: 92%; } .home-services-title { font-size: 31px; } .home-services-description { font-size: 12px; line-height: 1.75; } .home-services-button { width: 165px; height: 49px; font-size: 11px; } .home-service-card { width: calc(100vw - 30px); flex: 0 0 calc(100vw - 30px); } .home-service-icon { width: 62px; height: 62px; } .home-service-title { font-size: 17px; } .home-service-description { font-size: 11px; } .home-service-image { height: 260px; } } /*====================================================* VERY SMALL MOBILE ====================================================*/ @media (max-width: 360px) { .home-services-title { font-size: 28px; } .home-service-card { width: calc(100vw - 24px); flex: 0 0 calc(100vw - 24px); } .home-service-image { height: 230px; } .home-service-title { font-size: 16px; } .home-service-description { font-size: 10.5px; } }