%PDF- %PDF-
Direktori : /var/www/html/styles/ |
Current File : //var/www/html/styles/Header.css |
.hero-wrapper { width: 100%; height: 100vh; overflow: hidden; } .mainHeader { background: #fef2ef; background-image: url("../public/img/header_background.svg"); background-repeat: no-repeat; background-position: center; background-size: cover; width: 100%; overflow: hidden; height: 100vh; z-index: 10; position: relative; /* min-height: -webkit-fill-available; */ } .mainHeader .intro { display: flex; justify-content: center; flex-direction: column; align-items: center; height: 100vh; width: 100%; max-width: 100vw; min-height: -webkit-fill-available; } .mainHeader .intro h4 { font-family: "Anton"; font-style: normal; font-weight: normal; font-size: 7.5rem; line-height: 11.3rem; letter-spacing: 0.005em; text-transform: uppercase; color: #2d2d2d; margin: 0; margin-bottom: 3rem; } /* .mainHeader .intro h1 { font-family: "Anton"; font-style: normal; font-weight: normal; font-size: 39rem; line-height: 40.5rem; letter-spacing: -0.02em; text-transform: uppercase; color: #f26739; margin: 0; } */ .mainHeader .intro .adventure-title-div { width: 154.6rem; height: auto; } .mainHeader .intro .adventure-title-div svg { width: 100%; height: 100%; } .mainHeader .intro .atvTours { font-family: "Inter"; font-style: normal; font-weight: normal; font-size: 3rem; line-height: 3.6rem; letter-spacing: -0.005em; color: #2d2d2d; margin-top: 6rem; } .mainHeader .intro .atvTours span { font-weight: bold; } .mainHeader .intro a { text-decoration: none; } .mainHeader .intro .explore { display: flex; align-items: center; justify-content: space-evenly; padding: 0.8rem 3.8rem 0.8rem 1rem; background: #fef2ef; border: 1.5px solid #2d2d2d; border-radius: 4.3rem; cursor: pointer; text-decoration: none; } .mainHeader .intro .explore span { font-family: "Anton"; font-style: normal; font-weight: normal; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: -0.005em; text-transform: uppercase; color: #2d2d2d; margin-left: 2.2rem; } .mainHeader .intro .explore a { text-decoration: none; } .mainHeader .intro .arrows { display: flex; justify-content: center; align-items: center; width: 4.2rem; height: 4.2rem; background: #2d2d2d; border-radius: 50%; } .mainHeader .intro .arrows svg { width: 1.5rem; height: 1.5rem; } /* Responsive */ @media (min-width: 260px) and (max-width: 720px) { .mainHeader .intro .adventure-title-div { width: 90%; height: auto; } .mainHeader .intro a { margin-bottom: 24rem; } .mainHeader .intro .arrows { padding: 3px; margin-bottom: 3px; } .mainHeader .intro .arrows svg { width: 12px; height: 12px; } .mainHeader .intro .explore { padding: 5px 20px 3px 10px; } .mainHeader .intro .explore span { font-size: 20px; } .mainHeader .intro h1 { font-family: "Anton", fantasy, sans-serif; font-style: normal; font-weight: normal; font-size: 21.7rem; line-height: 40.5rem; letter-spacing: -0.02em; text-transform: uppercase; color: #f26739; margin: 0; } .mainHeader .intro h4 { font-size: 7.2rem; line-height: 10.8rem; } .mainHeader .intro .atvTours { font-size: 4.5rem; font-weight: 600; margin-bottom: 6rem; } } @media (min-width: 721px) and (max-width: 1024px) { /* .mainHeader .intro h1 { font-family: "Anton"; font-style: normal; font-weight: normal; font-size: 21.7rem; line-height: 40.5rem; letter-spacing: -0.02em; text-transform: uppercase; color: #f26739; margin: 0; } */ .mainHeader .intro .adventure-title-div { width: 90%; height: auto; } .mainHeader .intro h4 { font-size: 7.2rem; line-height: 10.8rem; } .mainHeader .intro .atvTours { font-size: 3.8rem; } .mainHeader .intro .explore span { font-size: 2.6rem; } }