.h-banner-sec{ height: 100vh; max-height: 900px; position: relative; z-index: 1; &::after{ position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.4; } .prop-img-block{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; img{ width: 100%; height: 100%; object-fit: cover; } } .content-wrapper{ display: flex; position: relative; z-index: 2; height: 100%; padding: 80px 0; align-items: center; .txt-block{ padding-right: 50px; flex: 1 1 auto; color: #fff; font-family: "Sora", sans-serif; h2{ text-transform: capitalize; font-size: 58px; margin-bottom: 25px; } p{ margin-bottom: 20px; font-size: 24px; } .story{ font-size: 20px; } } .form-block{ flex: 0 0 auto; } } .container{ height: 100%; @media (min-width: 1700px) { max-width: 1450px; } } .form-cover{ padding: 70px 50px; width: 500px; max-width: 100%; color: black; border-radius: 18px; background-color: #fff; h3{ font-size: 30px; font-weight: 600; text-transform: capitalize; margin-bottom: 25px; } .form-inp-cover{ .inp-block{ margin-bottom: 25px; .custom-inp{ width: 100%; color: #212529; background-color: #fff; border: 1px solid #ced4da; border-radius: 10px; padding: 10px 15px; font-size: 18px; height: 50px; } } .btn-block{ .submt-btn{ color: #fff; transition: 0.5s all ease; text-decoration: none; background: linear-gradient(106.08deg, #00bfff -6.77%, #00c469 80.45%); border-radius: 40px; font-size: 15px; font-weight: 700; display: inline-block; padding: 12px 40px; border: 0 !important; cursor: pointer; } } } } } @media (max-width: 1679px) { .h-banner-sec .content-wrapper .txt-block h2{ font-size: 48px; } .h-banner-sec .content-wrapper .txt-block p{ font-size: 21px; } .h-banner-sec .content-wrapper .txt-block .story { font-size: 18px; } .h-banner-sec .form-cover { padding: 50px 40px; width: 460px; } .h-banner-sec .form-cover h3 { font-size: 28px; } .h-banner-sec .form-cover .form-inp-cover .inp-block .custom-inp{ font-size: 16px; height: 46px; } .h-banner-sec .form-cover .form-inp-cover .inp-block{ margin-bottom: 20px; } .h-banner-sec .form-cover .form-inp-cover .btn-block .submt-btn{ padding: 10px 40px; } } @media (max-width: 1441px) { .h-banner-sec .content-wrapper .txt-block h2 { font-size: 38px; } .h-banner-sec .content-wrapper .txt-block p { font-size: 18px; margin-bottom: 15px; } .h-banner-sec .content-wrapper .txt-block .story { font-size: 16px; } .h-banner-sec .form-cover { padding: 40px 35px; width: 400px; } .h-banner-sec .form-cover h3 { font-size: 24px; margin-bottom: 20px; } .h-banner-sec .form-cover .form-inp-cover .inp-block .custom-inp { font-size: 15px; height: 44px; } } @media (max-width: 1199px) { .h-banner-sec .content-wrapper .txt-block h2 { font-size: 30px; } .h-banner-sec .content-wrapper .txt-block p { font-size: 16px; margin-bottom: 15px; } .h-banner-sec .content-wrapper .txt-block .story { font-size: 15px; } .h-banner-sec .form-cover .form-inp-cover .btn-block .submt-btn { padding: 8px 40px; } } @media (max-width: 991px) { .h-banner-sec .content-wrapper{ flex-wrap: wrap; } .h-banner-sec .content-wrapper .txt-block{ width: 100%; text-align: center; } .h-banner-sec .content-wrapper .form-block{ width: 100%; } .h-banner-sec .form-cover{ margin: 0 auto; margin-top: 30px; } .h-banner-sec .prop-img-block { height: 80vh; } .h-banner-sec::after{ background: rgba(0,0,0,0.4); height: 50vh; background: linear-gradient(to bottom, #000 60%, transparent); } .h-banner-sec{ height: auto; max-height: none; } .h-banner-sec .content-wrapper { padding: 100px 0 50px; height: auto; } .h-banner-sec .form-cover{ box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; } .h-banner-sec .form-cover { width: 500px; } .h-banner-sec .content-wrapper .txt-block{ padding-right: 0; } } @media (max-width: 767px) { .h-banner-sec .content-wrapper .txt-block h2 { font-size: 24px; margin-bottom: 15px; } .h-banner-sec .content-wrapper .txt-block p { font-size: 15px; margin-bottom: 10px; } .h-banner-sec .content-wrapper .txt-block{ min-height: 50vh; } .h-banner-sec::after{ height: 50vh; } .h-banner-sec .prop-img-block { height: 100vh; } .h-banner-sec .content-wrapper .txt-block { min-height: 55vh !important; } } @media (max-width: 579px) { .h-banner-sec{ min-height: 100vh; } .h-banner-sec .content-wrapper .txt-block { text-align: left; padding-top: 40px; } .h-banner-sec .content-wrapper .txt-block p { font-size: 14px; margin-bottom: 10px; } .h-banner-sec .content-wrapper { padding: 85px 0 50px; height: auto; } .h-banner-sec .form-cover h3 { font-size: 20px; } .h-banner-sec .form-cover .form-inp-cover .inp-block .custom-inp { font-size: 14px; height: 42px; } .h-banner-sec .content-wrapper .txt-block h2 { font-size: 22px; margin-top:5% !important; } } @media (max-width: 479px) { .h-banner-sec .form-cover { padding: 30px 22px; width: 400px; } }