/*====================================================* HOME HERO ====================================================*/ .home-hero { position: relative; width: 100%; height: 650px; overflow: hidden; background: #111; } /*====================================================* SLIDES CONTAINER ====================================================*/ .home-hero-slides { position: relative; width: 100%; height: 100%; } /*====================================================* INDIVIDUAL SLIDE ====================================================*/ .home-hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s ease; } /*====================================================* ACTIVE SLIDE ====================================================*/ .home-hero-slide.active { opacity: 1; visibility: visible; } /*====================================================* SLIDE IMAGE ====================================================*/ .home-hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /*====================================================* DARK OVERLAY ====================================================*/ .home-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.40); } /*====================================================* HERO CONTENT ====================================================*/ .home-hero-content { position: absolute; top: 50%; left: 45%; width: 90%; max-width: 900px; transform: translate(-50%, -50%); text-align: left; color: #ffffff; } /*====================================================* SMALL TITLE ====================================================*/ .home-hero-small-title { display: block; margin-bottom: 20px; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 17px; font-weight: 500; line-height: 1.4; } /*====================================================* MAIN TITLE ====================================================*/ .home-hero-content h1 { margin: 0; color: #ffffff; font-family: "Poppins", sans-serif; font-size: 52px; font-weight: 500; line-height: 1.25; text-transform: uppercase; } /*====================================================* HERO BUTTON ====================================================*/ .home-hero-button { display: inline-flex; align-items: center; justify-content: center; margin-top: 32px; min-width: 250px; height: 48px; padding: 0 28px; box-sizing: border-box; background: #f7a600; color: #ffffff; text-decoration: none; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 500; transition: background 0.3s ease, transform 0.3s ease; } /*====================================================* BUTTON HOVER ====================================================*/ .home-hero-button:hover { background: #e28f00; transform: translateY(-2px); } /*====================================================* SLIDER ARROWS ====================================================*/ .home-hero-arrow { position: absolute; top: 50%; width: 42px; height: 90px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; border: none; background: rgba(0, 0, 0, 0.30); color: #ffffff; cursor: pointer; z-index: 10; transition: background 0.3s ease; } /*====================================================* ARROW HOVER ====================================================*/ .home-hero-arrow:hover { background: rgba(0, 0, 0, 0.60); } /*====================================================* LEFT ARROW ====================================================*/ .home-hero-prev { left: 0; } /*====================================================* RIGHT ARROW ====================================================*/ .home-hero-next { right: 0; } /*====================================================* ARROW ICON ====================================================*/ .home-hero-arrow i { font-size: 18px; } /*====================================================* TABLET ====================================================*/ @media (max-width: 1100px) { .home-hero { height: 600px; } .home-hero-content { left: 42%; width: 88%; } .home-hero-content h1 { font-size: 46px; line-height: 1.25; } .home-hero-small-title { font-size: 15px; margin-bottom: 18px; } .home-hero-button { margin-top: 28px; min-width: 230px; height: 47px; } } /*====================================================* TABLET / MOBILE ====================================================*/ @media (max-width: 768px) { /*---------------------------------------------- HERO ----------------------------------------------*/ .home-hero { width: 100%; height: 560px; overflow: hidden; } /*---------------------------------------------- SLIDE IMAGE ----------------------------------------------*/ .home-hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /*---------------------------------------------- OVERLAY ----------------------------------------------*/ .home-hero-overlay { background: rgba(0, 0, 0, 0.45); } /*---------------------------------------------- HERO CONTENT ----------------------------------------------*/ .home-hero-content { position: absolute; top: 50%; left: 0; width: 100%; max-width: none; padding: 0 55px; box-sizing: border-box; transform: translateY(-50%); text-align: left; } /*---------------------------------------------- SMALL TITLE ----------------------------------------------*/ .home-hero-small-title { display: block; margin-bottom: 15px; font-size: 13px; font-weight: 500; line-height: 1.4; } /*---------------------------------------------- MAIN TITLE ----------------------------------------------*/ .home-hero-content h1 { margin: 0; font-size: 36px; font-weight: 500; line-height: 1.25; text-transform: uppercase; } /*---------------------------------------------- BUTTON ----------------------------------------------*/ .home-hero-button { margin-top: 25px; min-width: 210px; height: 45px; padding: 0 22px; font-size: 12px; } /*---------------------------------------------- ARROWS ----------------------------------------------*/ .home-hero-arrow { width: 34px; height: 70px; } .home-hero-arrow i { font-size: 15px; } .home-hero-prev { left: 0; } .home-hero-next { right: 0; } } /*====================================================* SMALL MOBILE ====================================================*/ @media (max-width: 480px) { /*---------------------------------------------- HERO ----------------------------------------------*/ .home-hero { height: 500px; } /*---------------------------------------------- IMAGE ----------------------------------------------*/ .home-hero-slide img { object-position: center center; } /*---------------------------------------------- HERO CONTENT ----------------------------------------------*/ .home-hero-content { top: 50%; left: 0; width: 100%; padding: 0 48px; transform: translateY(-50%); } /*---------------------------------------------- SMALL TITLE ----------------------------------------------*/ .home-hero-small-title { margin-bottom: 13px; font-size: 11px; line-height: 1.4; } /*---------------------------------------------- MAIN TITLE ----------------------------------------------*/ .home-hero-content h1 { font-size: 29px; line-height: 1.25; } /*---------------------------------------------- BUTTON ----------------------------------------------*/ .home-hero-button { margin-top: 21px; min-width: 190px; height: 42px; padding: 0 20px; font-size: 11px; } /*---------------------------------------------- ARROWS ----------------------------------------------*/ .home-hero-arrow { width: 30px; height: 60px; } .home-hero-arrow i { font-size: 13px; } } /*====================================================* VERY SMALL MOBILE ====================================================*/ @media (max-width: 360px) { /*---------------------------------------------- HERO ----------------------------------------------*/ .home-hero { height: 460px; } /*---------------------------------------------- HERO CONTENT ----------------------------------------------*/ .home-hero-content { padding: 0 42px; } /*---------------------------------------------- SMALL TITLE ----------------------------------------------*/ .home-hero-small-title { margin-bottom: 11px; font-size: 10px; } /*---------------------------------------------- MAIN TITLE ----------------------------------------------*/ .home-hero-content h1 { font-size: 26px; line-height: 1.25; } /*---------------------------------------------- BUTTON ----------------------------------------------*/ .home-hero-button { margin-top: 19px; min-width: 175px; height: 40px; padding: 0 18px; font-size: 10px; } /*---------------------------------------------- ARROWS ----------------------------------------------*/ .home-hero-arrow { width: 28px; height: 55px; } .home-hero-arrow i { font-size: 12px; } }