@import url('./header.css'); @import url('./progress_bar.css'); @import url('./scrollbar.css'); @import url('./trial14days.css'); @import url('./footer.css'); .hero-section{ margin-top: 80px; width: 100%; height: calc(100vh - 145px); background-color: #000; min-height: 750px; max-height: 1000px; padding: 50px 0; } .hero-section-inner{ width: 100%; max-width: 1300px; margin: 0 auto; height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 30px; animation: slideToRight 3s; transition: 0.2s; } .hero-section-inner-container{ position: relative; width: 500px; } .hero-section-img-banner{ width: 100%; position: relative; animation: slideToRight 1s; } .clip{ clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%); } .hero-section-heading{ position: absolute; top: -55px; left: -80px; color: #FFF; font-size: 42px; z-index: 10; } .hero-section-heading::before{ content: "<"; color: #D11C1C; } .hero-section-heading::after{ content: "/>"; color: #D11C1C; } .hero-section-header{ font-size: 88px; color: #D11C1C;; } .featured-image-container p{ color: #FFF; font-weight: 900; font-size: 22px; max-width: 300px; } .description-container{ display: flex; flex-direction: column; } .description-container-text-content{ display: flex; justify-content: space-between; flex-shrink: 0; } .description-container-text-content .arrows-container{ height: 100px; width: 100%; position: relative; } .description-container-paragraphs{ flex-shrink: 0; } .description-container-text-content .arrows-container .arrows{ animation: backNforward 1s infinite; height: 100%; position: absolute; left: 0; top: 0; cursor: pointer; } .hero-section-info-line{ background-color: #aa1717; padding: 10px; width: 100%; box-sizing: border-box; text-align: center; font-weight: 900; text-transform: uppercase; font-size: 22px; color: #FFF; } .hero-section-info-line:nth-child(even){ background-color: #d3d1cd; } .hero-section-inner-container .hero-section-info{ color: #DDD; font-size: 32px; max-width: 500px; text-align: justify; padding-bottom: 10px; font-style: italic; } .hero-section-inner-container .hero-section-info b{ color: #FFF; } /* ABOUT */ .about-content-wrapper{ width: 100%; position: relative; height: 1000px; } .to-know-more-container{ position: sticky; top:110px; width: min-content; padding: 90px 80px; display: block; text-decoration: none; animation: backNforward 1s infinite; } .to-know-more-container a{ text-decoration: none; } .to-know-more-container img{ height: 90px; } .to-know-more-container p{ padding-left: 10px; color: #232323; } .about-content{ background-color: #EFEFEF; width: 100%; padding: 50px 20px; max-width: 900px; margin: 50px auto; position: absolute; top:0; left: 50%; transform: translateX(-50%); } .about-content-heading{ text-transform: uppercase; color: #D11C1C; font-size: 42px; } .about-content-heading:before{ content: "<"; color: #111; } .about-content-heading::after{ content: "/>"; color: #111; } .about-inner-container{ margin-top: 10px; display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; } .about-content-container{ padding: 10px; display: flex; flex-direction: column; align-content: center; justify-content: flex-start; text-align: center; gap: 10px; transition: 0.4s; cursor: default; } .about-content-container h4{ font-size: 28px; color: #111; } .about-content-container p{ color: #333; } .about-content-container img{ height: 60px; width: auto; object-fit: contain; } /* INTRODUCTION SECTION */ .introduction-section{ background-color: #212121; padding: 20px 0; box-sizing: border-box; } .introduction-section-inner{ width: 100%; max-width: 900px; display: grid; grid-template-columns: repeat(2,1fr); margin: 0 auto; gap: 20px; } .introduction-container{ display: flex; flex-direction: column; justify-content: center; } .introduction-container h5::before{ content: "<"; color: #D11C1C; } .introduction-container h5::after{ content: "/>"; color: #D11C1C; } .introduction-container h5{ font-size: 48px; color: #FFF; text-transform: uppercase; } .introduction-container p{ padding: 15px 10px; text-align: justify; color: #EEE; } .introduction-container p b{ color: #ffffff; } .introduction-container ul{ color: #EEE; padding-left: 40px; } .introduction-container li::marker { color: #D11C1C; } .introduction-container img{ width: 100%; object-fit: contain; } /* INFORMATIONS */ .informations-wrapper{ width: 100%; background-color: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 120px 40px; box-sizing: border-box; } .informations-container{ width: 100%; max-width: 900px; display: flex; justify-content: space-between; align-items: center; } .information-box{ display: flex; align-items: center; flex-direction: column; } .information-box h5{ color: #D11C1C; font-size: 64px; } .information-box p{ color: #EEE; font-size: 22px; text-transform: capitalize; } .informations-wrapper-header{ color: #FFF; width: 100%; max-width: 900px; font-size: 64px; } .informations-wrapper-header::before{ content: "<"; color: #D11C1C; } .informations-wrapper-header::after{ content: "/>"; color: #D11C1C; } /* NEWSLETTER SECTION */ .newsletter-section{ background-color: #000; height: 500px; width: 100%; position: relative; } .newsletter-section video{ width: 100%; height: 100%; object-fit: cover; opacity: 0.55; } .newsletter-content-container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: auto; min-height: 200px; display: flex; justify-content: center; align-content: center; flex-direction: column; gap: 10px; text-align: center; } .newsletter-content-container h5{ font-size: 48px; color: #FFF; text-transform: uppercase; } .newsletter-content-container p{ color: #EEE; font-weight: 600; max-width: 900px; margin: auto; } .newsletter-content-container h5::before{ content: "<"; color: #D11C1C; } .newsletter-content-container h5::after{ content: "/>"; color: #D11C1C; } .newsletter-content-container #newsletter-form{ display: flex; gap: 10px; justify-content: center; flex-direction: column; } #newsletter-form{ display: flex; justify-content: center; align-items: center; } .jCaptcha-newsletter{ width: 200px; padding: 10px 20px; border-radius: 10px; border: 3px solid #D11C1C; background: none; color: #FFF; display: block; margin: 10px auto; } .jCaptcha-newsletter:focus{ outline: none; } .jCaptcha-newsletter::placeholder{ color:#FFF; opacity: 1; font-weight: 900; } #email-input{ width: 200px; padding: 10px 20px; border-radius: 10px; border: 3px solid #D11C1C; background: none; color: #FFF; display: block; } #email-input:focus{ outline: none; background-color: #000; } #email-input::placeholder { color: #FFF; opacity: 1; font-weight: 900; } #emain-sign-in-btn{ width: 50px; height: 50px; background-color: #FFF; color: #111; border-radius: 10px; border: 0; cursor: pointer; } /* SOCIALMEDIA SECTION */ .socialmedia-section{ width: 100%; height: auto; padding: 50px 20px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; background-color: #222; text-align: center; gap: 20px; } .socialmedia-section h5{ color: #FFF; font-size: 28px; } .socialmedia-section p{ color: #eee; } .social-media-container{ display: flex; justify-content: space-around; align-items: center; max-width: 450px; gap: 15px; } .social-media-container img{ height: 50px; transition: 0.3s ease; } .social-media-container img:hover{ transform: scale(1.15); } .contact-us-arrows-container{ position: absolute; left: 20px; bottom: 20px; } .contact-us-arrows-container a{ text-decoration: none; } .contact-us-arrows-container img{ height: 60px; } .contact-us-arrows-container p{ padding-left: 5px; color: #000; } @media screen and (max-width:600px){ .social-media-container{ display: grid; grid-template-columns: repeat(4,1fr); } } @media screen and (max-width:1225px) { .hero-section-inner{ transform: scale(.8); } } @media screen and (max-width:1500px) { .about-content-wrapper{ width: 100%; position: relative; height: auto; } .to-know-more-container{ position: static; padding: 10px; display: block; width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; margin-bottom: 50px; box-sizing: border-box; } .to-know-more-container img{ height: 80px; width: min-content; } .about-content{ background-color: #EFEFEF; width: 100%; padding: 50px 20px; max-width: 900px; margin: 50px auto; margin-bottom: 0; position: static; left: 50%; top: 0; transform: translateX(0%); box-sizing: border-box; } } @media screen and (max-width:1050px) { .hero-section{ margin-top: 80px; height: auto; max-height: 2000px; padding: 150px 0; } .hero-section-inner{ flex-direction: column; } .hero-section-inner{ transform: scale(1); display: flex; flex-direction: column; } .hero-section-inner-container:nth-child(2){ display: flex; flex-direction: column-reverse; gap: 10px; } .hero-section-info-line{ font-size: 24px; } .introduction-section-inner{ display: flex; flex-direction: column; max-width: 500px; } } /* TABLET */ @media screen and (max-width:980px) { .about-inner-container{ grid-template-columns: repeat(1,1fr); max-width: 550px; margin: auto; } .about-content-header{ max-width: 550px; margin: auto; } .to-know-more-container{ max-width: 550px; width: min-content; } .informations-wrapper-header{ text-align: center; padding: 10px; box-sizing: border-box; } .informations-container{ display: flex; flex-direction: column; gap: 50px; font-size: 42px; } .hero-section-info-line{ font-size: 22px; } /* INFORMATIONS */ #counter-section{ font-size: 32px; } .informations-container .information-box h5{ color: #D11C1C; font-size: 32px; } .informations-container .information-box p{ font-size: 18px; } .newsletter-content-container h5{ font-size: 32px; padding: 0 20px; } .newsletter-content-container p{ max-width: 450px; width: 100%; padding: 0 20px; box-sizing: border-box; } } @media screen and (max-width:850px) { .hero-section-inner{ transform: scale(0.8); } .hero-section{ margin-top: 80px; padding: 0; padding-top: 0px; } } /* MOBILE */ @media screen and (max-width:680px){ .hero-section{ margin-top: 80px; width: 100%; height: auto; background-color: #000; min-height: 750px; max-height: 3000px; padding: 0; padding-top: 100px; margin-bottom: 0; } .hero-section-inner{ transform: scale(1); } .hero-section-inner-container{ position: relative; width: 100%; } .featured-image-container .hero-section-img-banner{ width: 300px; position: relative; animation: slideToRight 1s; display: block; margin: 0 auto; } .laptop-container .hero-section-img-banner{ width: 300px; margin: 0 auto; } .hero-section-header{ font-size: 24px; text-align: center; padding: 10px 0; } .description-container-text-content{ display: flex; flex-direction: column; align-items: center; } .description-container-paragraphs p{ font-size: 16px; text-align: center; } .description-container-text-content .arrows-container{ margin-top: 20px; height: 55px; width: 100px; } .description-container-text-content .arrows-container .arrows{ left: 50%; width: min-content; } .hero-section-heading{ position: absolute; top: -35px; left: 0px; color: #FFF; font-size: 22px; z-index: 10; } .featured-image-container{ width: min-content; margin: 0 auto; position: relative; } .hero-section-inner-container .hero-section-info{ color: #DDD; font-size: 18px; max-width: 300px; margin: auto; text-align: justify; padding-bottom: 10px; font-style: italic; } .hero-section-inner-container .hero-section-info b{ color: #FFF; } .hero-section-info-line{ font-size: 18px; } .about-inner-container{ grid-template-columns: repeat(1,1fr); max-width: 550px; margin: auto; } .about-content-header{ max-width: 450px; margin: auto; padding: 10px 20px; } .about-content-heading{ font-size: 24px; } .about-content-description{ font-size: 14px; } .about-inner-container{ max-width: 450px; padding: 10px 20px; } .about-content-container h4{ font-size: 22px; } .about-content-container p{ font-size: 14px; } .to-know-more-container{ display: flex; align-items: center; } .to-know-more-container img{ height: 50px; } .to-know-more-container p{ padding: 10px 0; } .introduction-section-inner{ display: flex; flex-direction: column; max-width: 500px; width: 100%; padding: 20px 50px; box-sizing: border-box; } .introduction-container h5{ font-size: 28px; } main .informations-wrapper{ padding: 60px 40px; } .newsletter-content-container h5{ font-size: 24px; } } @keyframes backNforward { 0%{ left: 0; } 75%{ left: 30px; } 100%{ left: 0; } } @keyframes slideToRight { 0%{ opacity: 0; left: 100px; } 100%{ opacity: 1; left: 0; } } @keyframes hithere { 30% { transform: scale(1.02); } 40%, 60% { transform: rotate(-2deg) scale(1.02); } 50% { transform: rotate(2deg) scale(1.02); } 70% { transform: rotate(0deg) scale(1.02); } 100% { transform: scale(1); } } @media screen and (max-width: 680px) { .featured-image-container .hero-section-img-banner{ animation: none; height: min-content; } .hero-section-inner{ animation: none; } .hero-section-img-banner{ animation: none; height: min-content; } }