.hero-1 { padding: 0px 2rem 0; text-align: center; background-position: bottom center; background-repeat: no-repeat; background-size: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; //min-height: 60rem; position: relative; padding: 5rem 2rem 2rem; background-image: linear-gradient(179deg,var(--bs-body-bg) 49%,var(--bs-body-bg) 77%, rgba(var(--bs-body-bg-rgb), 0.8) 100%); /* &::before { background: url(../img/background.svg); width: 100%; height: 100%; content: " "; position: absolute; top: 0px; left: 0px; pointer-events:none; opacity:0.1; background-size: 100%; background-position: bottom center; background-size: cover; background-position: bottom 0px center; background-repeat: no-repeat; background-blend-mode: luminosity; } */ h1 { //line-height: 1.2; //font-size: 4.2rem; color: var(--bs-body-color); font-weight:700; z-index: 2; text-shadow: 1px 1px 2px var(--bs-body-bg); letter-spacing:-0.04em; //letter-spacing: 0.014em; //line-height: 64px; } /* @media (max-width: 1601px) { h1 { font-size: 5rem; } } @media (max-width: 1281px) { h1 { font-size: 5rem; } } @media (max-width: 961px) { h1 { font-size: 4.5rem; line-height: 4.5rem; } } @media (max-width: 661px) { h1 { font-size: 3.2rem; line-height: 3.2rem; } } @media (max-width: 481px) { h1 { font-size: 3rem; line-height: 3rem; } } */ h2 { //font-size: 1.5rem; //line-height: 1.5; font-weight: normal; line-height: 1.5; margin: 1.4rem auto 0rem; z-index: 2; position: relative; text-shadow: 1px 1px 2px var(--bs-body-bg); //letter-spacing: 0.03em; max-width: 750px; color: var(--bs-body-color); } .heading { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: var(--width-xl); width: 100%; z-index: 3; padding: 2rem 0 0rem; } .btns { margin-top:4rem; } .btn { b { margin-left: 5px; display: inline-block; font-family:system-ui; } //min-width:250px; display: inline-block; //width: 200px; //height: 49px; border-radius: 2px; //background-color: #419bf9; //background-color: rgb(65, 155, 249); //padding: 12px 20px; line-height: 20px; font-size: 16px; text-align: center; //color: var(--bs-body-color); margin-right: 7px; margin-left: 7px; margin-bottom: 20px; border-radius: 6px; //font-weight: 600; //box-shadow:0 1px 3px 0 rgba(var(--bs-body-color-rgb), 0.07); //letter-spacing: 0.01em; &:hover { //background: var(--bs-dark); //background: #2781df; } span { //font-size: 24px; //line-height: 24px; //vertical-align: text-top; margin-left: 0.2rem; //display: none; } } .btn.btn-outline-primary { b { transform: rotate(90deg); } //background-color: transparent; //background-color: rgba(65, 155, 249, 0.07); //background-color: #f1f8ff; box-shadow: -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.2) inset; box-shadow: 0 1px 3px 0 rgba(var(--bs-body-color-rgb), 0.07); //border: 1px solid var(--bs-border-color); //background:var(--bs-body-bg); //color: var(--bs-blue); &:hover { //background-color: rgba(65, 155, 249, 0.14); background: rgba(var(--bs-primary-rgb), 0.07); color: var(--bs-primary); } &:after { display:none; } } .btn.btn-outline-secondary { border: 1px solid var(--bs-dark-border-subtle); --bs-secondary: var(--bs-border-color); color:var(--bs-body-color); } .btn.btn-primary { //box-shadow: -1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.2) inset; //box-shadow: 0 1px 3px 0 rgba(var(--bs-body-color-rgb), 0.07); //padding: 1rem 2.5rem; border:none; span { //font-size: 28px; margin-right: 0.2rem; } &:hover { //color: var(--bs-body-color); //background: var(--bs-dark); } } .dropdown { display: inline-block; .dropdown-menu { min-width: 240px; z-index:3; } } > img { margin-top: 2rem; max-width: 100%; //opacity: 0; transition: opacity 3s; border-radius: 10px 10px 0px 0px; border: 1px solid var(--bs-border-color); background: #f0f4f9; box-shadow: 0 0 1px 0 rgba(var(--bs-body-color-rgb), 0.2), 0 3px 4px 0 rgba(87, 87, 87, 0.1), 0 10px 15px 0 rgba(5, 4, 10, 0.06%); border-radius: 4px; width: 100%; overflow: hidden; padding-top: 2rem; position: relative; } .show { img { opacity: 1; } } @media screen and (max-width: 767px) { .btn { min-width: 300px; width: 100%; } } .overlay { background:var(--bs-body-bg); } }