@import url('./header.css'); @import url('./scrollbar.css'); @import url('./progress_bar.css'); @import url('./footer.css'); body{ background-color: #000; } main{ margin-top: 80px; } .hero-section-info-line{ background-color: #D11C1C; padding: 10px; width: 100%; box-sizing: border-box; text-align: center; font-weight: 900; text-transform: uppercase; font-size: 22px; } .main-hero-section{ width: 100%; height: 450px; background-color: #000; display: flex; justify-content: center; align-items: center; gap: 50px; } .main-hero-section h1{ text-transform: uppercase; font-size: 80px; color: #FFF; transition: 0.3s; } .main-hero-section h1::before{ content: "<"; color: #D11C1C; } .main-hero-section h1::after{ content: "/>"; color: #D11C1C; } .main-hero-section ul{ color: #FFF; list-style: none; } .main-hero-section ul li{ padding: 5px 0; max-width: 400px; font-size: 24px; } .main-hero-section ul li::before{ content: "// "; color: #D11C1C; } /* ABOUT */ .about-content-wrapper{ width: 100%; position: relative; min-height: 1000px; box-sizing: border-box; } .about-content{ width: 100%; padding: 50px 20px; max-width: 900px; margin: 50px auto; box-sizing: border-box; } .about-content-header{ margin-bottom: 50px; } .about-content-heading{ text-transform: uppercase; color: #D11C1C; font-size: 42px; text-align: center; } .about-content-heading:before{ content: "<"; color: #FFF; } .about-content-heading::after{ content: "/>"; color: #FFF; } .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 h3{ font-size: 28px; color: #FFF; } .about-content-container p{ color: #EEE; } .about-content-container img{ height: 110px; width: auto; object-fit: contain; } @media screen and (max-width:1500px) { .about-content-wrapper{ width: 100%; position: relative; height: auto; } } @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; } } @media screen and (max-width:680px) { .about-content-heading{ font-size: 24px; text-align: center; } .about-content-description{ font-size: 14px; } .about-inner-container{ max-width: 450px; padding: 10px 20px; } .about-content-container h3{ font-size: 22px; } .about-content-container p{ font-size: 14px; } } .about-info-section{ width: 90%; max-width: 1250px; margin: 0 auto; margin-bottom: 150px; } .about-info-header h4{ color: #FFF; font-size: 32px; text-align: center; padding: 10px 0; } .about-info-header h4::before{ content: "<"; color: #D11C1C; } .about-info-header h4::after{ content: "/>"; color: #D11C1C; } .about-info-inner{ display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; justify-items: center; align-items: center; } .about-info-container{ } .about-info-img-container{ height: min-content; } .about-info-img-container img{ object-fit: contain; width: 100%; max-width: 400px; } .about-info-container h3{ font-size: 32px; padding: 10px 0; color: #D11C1C; } .about-info-container ul{ padding: 10px 15px; color: #EFEFEF; font-size: 20px; list-style: none; } .about-info-container ul li::before{ content: "// "; color: #D11C1C; } .about-info-container ul li{ padding: 5px 0; } .work-plan-section{ width: 90%; max-width: 1250px; margin: 0 auto; padding-bottom: 30px; } .work-plan-section-grid div{ height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; padding: 0 10px; box-sizing: border-box; gap: 20px; padding: 10px 5px; border-radius: 5px; margin-right: 40px; } .work-plan-section-grid div p{ text-align: center; color: #EEE; } .work-plan-section-grid div img{ height: 130px; } .work-plan-section-grid{ display: grid; grid-template-columns: repeat(5,1fr); width: 100; margin: 10px 0; margin-top: 50px; justify-items: center; align-items: flex-start; } .work-plan-section-grid div::after{ content: "\f178"; font-size: 28px; color: #EEE; font-family: FontAwesome; position: absolute; right: -35px; top: calc(35%); transform: translateY(-50%); z-index: 20; } .work-plan-section-grid div:last-child{ margin-right: 0; } .work-plan-section-grid div:last-child::after{ content: ""; font-size: 28px; color: green; font-family: FontAwesome; } .work-plan-section{ display: flex; flex-direction: column; } .work-plan-header{ text-align: center; font-size: 32px; color: #EEE; } .work-plan-header h4::before{ content: "<"; color: #D11C1C; } .work-plan-header h4::after{ content: "/>"; color: #D11C1C; } .offer-section{ width: 90%; max-width: 1200px; color: #FFF; margin: 150px auto; display: flex; flex-direction: column; gap: 20px; } .offer-section-header h5{ padding: 20px 0; text-align: center; font-size: 28px; } .offer-section-header h5::before{ content: "<"; color: #D11C1C; } .offer-section-header h5::after{ content: "/>"; color: #D11C1C; } .offer-table{ width: 100%; } .offer-table tr:first-child{ width: 100%; height: 50px; } .offer-table tr:not(:first-child):hover{ background-color: #111; } .offer-table tr:first-child th:first-child{ min-width: 450px; } .offer-table tr:first-child th:not(:first-child){ width: 25%; } td{ text-align: center; padding: 15px 0; } .icon-Cells-Tick::after{ content: "\f058"; font-family: FontAwesome; color: #68c245; } .icon-Cells-Mix::after{ content: "\f058  / \f057"; font-family: FontAwesome; color: #d1b61c; } .icon-Cells-X::after{ content: "\f057"; font-family: FontAwesome; color: #D11C1C; } @media screen and (max-width:1050px) { .hero-section-info-line{ font-size: 20px; } .main-hero-section{ display: flex; flex-direction: column; height: auto; padding: 50px 0; } } @media screen and (max-width:870px) { .main-hero-section h1{ font-size: 42px; } } @media screen and (max-width:680px){ .hero-section-info-line{ font-size: 18px; } } @media screen and (max-width:980px){ .about-info-section{ margin-top: 100px; } .about-info-inner{ grid-template-columns: repeat(1,1fr); } .main-hero-section h1{ text-align: center; } .main-hero-section ul li{ padding: 5px 35px; font-size: 18px; text-align: center; } .about-info-header h4{ font-size: 24px; } .about-info-container h3{ font-size: 22px; } .about-info-container ul li{ font-size: 18px; } } @media screen and (max-width:1100px) { .work-plan-section-grid{ grid-template-columns: repeat(1,1fr); } .work-plan-section-grid div{ margin: 0; } .work-plan-section-grid div p{ max-width: 350px; } .work-plan-section-grid div::after{ display: none; } } @media screen and (max-width:980px){ .offer-table tr:first-child th:first-child{ min-width: 0px; } } @media screen and (max-width:680px){ .offer-table tr:first-child th:not(:first-child){ width: 25%; transform: rotate(-90deg); height: min-content; } .offer-table tr:first-child{ height: auto; } .offer-table table{ padding: 100px 0; } .offer-table .vertical-header{ padding: 25px 0; } .offer-section{ margin: 50px auto; } }