.slider-height { height: 980px; @media #{$lg}{ height: 600px; } @media #{$md}{ height: 500px; } @media #{$sm}{ height: 500px; } @media #{$xs}{ height: 350px; } } .slider-height2{ height: 500px; background-size: cover; @media #{$md}{ height: 350px; } @media #{$sm}{ height: 260px; } @media #{$xs}{ height: 260px; } } .slider-area2{ background-image: url(../img/hero/hero2.png); background-repeat:no-repeat ; background-size: cover; } .slider-area{ background-image: url(../img/hero/homeHero_1.jpg); background-repeat:no-repeat ; background-position: center center; background-size: cover; //margin-top: -1px; .hero__caption{ overflow: hidden; span{ color: #fff; text-transform: uppercase; font-size:22px; font-weight: 700; font-family: $font_3; position: relative; display: inline-block; padding-left: 50px; line-height: 2.1; letter-spacing: 0.3em; @media #{$sm}{ font-size:18px; margin-bottom: 7px; } @media #{$xs}{ font-size:18px; margin-bottom: 7px; } position: relative; &::before{ content: ""; position: absolute; left: 0; bottom: 0; top: 0; background-image: url(../img/hero/hero_shape1.png); width: 36px; height: 45px; background-repeat: no-repeat; } } h1{ font-size: 99px; font-weight: 700; margin-bottom: 14px; color: #fff; font-family: $font_1; line-height: 1.2; text-transform: capitalize; margin-bottom: 30px; position: relative; &::before{ content: ""; position: absolute; right:34px; top: -17px; background-image: url(../img/hero/hero_shape2.png); width: 80px; height: 84px; background-repeat: no-repeat; @media #{$lg}{ right: 0; top: -39px; } @media #{$md}{ right: -2px; top: -42px; } @media #{$sm}{ display: none; } @media #{$xs}{ display: none; } } @media #{$lg}{ font-size: 50px; line-height: 1.2; } @media #{$md}{ font-size: 52px; line-height: 1.2; margin-bottom: 10px; } @media #{$sm}{ font-size: 47px; line-height: 1.4; margin-bottom: 8px; } @media #{$xs}{ font-size: 33px; line-height: 1.4; margin-bottom: 8px; } strong{ font-style: italic; font-size: 49px; font-family: $font_1; font-weight: 400; padding: 0 7px 0 4px; @media #{$md}{ font-size: 40px; } @media #{$sm}{ font-size: 25px; } @media #{$xs}{ font-size: 20px; } } } p{ color: #fff; text-transform: uppercase; font-size: 23px; letter-spacing: 0.2em; @media #{$md}{ font-size: 15px; } @media #{$sm}{ font-size: 15px; } @media #{$xs}{ font-size: 13px; } } } .hero__img img { max-width: 584px; max-height: 607px; @media #{$lg}{ max-width: 386px; } } } // Overly .hero-overly { position: relative; z-index: 0; &::before { position: absolute; content: ""; background-color: rgba(0, 0, 0, 0.1); width: 100%; height: 100%; left: 0; top: 0; bottom: 0; right: 0; z-index: 1; background-repeat: no-repeat; } } // Another Hero Page .slider-area2{ .hero-cap{ position: relative; z-index: 1; & h2{ color: #fff; font-size: 50px; font-weight: 700; text-transform: capitalize; } } } // services page .services-area{ padding-top: 270px; } .header2{ background: #fbf7f3; }