/** banner-section **/ .banner-section{ position: relative; } .banner-section .booking-inner{ margin-top: -45px; z-index: 2; } .banner-carousel .slide-item{ position: relative; padding: 183px 0px 240px 0px; } .banner-carousel .slide-item:before{ position: absolute; content: ''; background: #000; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1; opacity: 0.2; } .banner-carousel .slide-item .big-text{ position: absolute; left: 0px; bottom: 0px; width: 100%; text-align: center; font-size: 300px; line-height: 210px; font-family: var(--title-font); font-weight: 900; text-transform: uppercase; min-height: 210px; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgba(255, 255, 255, 0.30); z-index: 1; } .banner-carousel .content-box{ position: relative; display: block; z-index: 5; } .banner-carousel .slide-item .bg-layer{ position: absolute; left:0; top:0; width:100%; height:100%; background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); -webkit-transition: all 8000ms linear; -moz-transition: all 8000ms linear; -ms-transition: all 8000ms linear; -o-transition: all 8000ms linear; transition: all 8000ms linear; } .banner-carousel .active .slide-item .bg-layer{ -webkit-transform:scale(1.25); -ms-transform:scale(1.25); transform:scale(1.25); } .banner-carousel .content-box .special-text{ position: relative; display: block; font-size: 40px; line-height: 48px; font-family: var(--secondary-font); margin-bottom: 15px; opacity: 0; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .banner-carousel .active .content-box .special-text{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; -ms-transition-delay: 700ms; -o-transition-delay: 700ms; transition-delay: 700ms; } .banner-carousel .content-box h2{ font-size: 76px; line-height: 68px; font-weight: 700; color: #fff; margin-bottom: 30px; opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .banner-carousel .active .content-box h2{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; -ms-transition-delay: 700ms; -o-transition-delay: 700ms; transition-delay: 700ms; } .banner-carousel .content-box p{ font-size: 18px; line-height: 32px; color: #fff; opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; } .banner-carousel .active .content-box p{ opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } /** banner-style-two **/ .banner-style-two{ position: relative; } .banner-style-two .content-box{ position: relative; display: block; } .banner-style-two .content-box .title-text{ position: relative; display: block; font-size: 32px; line-height: 48px; font-family: var(--secondary-font); margin-bottom: 10px; } .banner-style-two .content-box h2{ position: relative; display: block; font-size: 56px; line-height: 64px; margin-bottom: 27px; } .banner-style-two .content-box p{ font-size: 18px; line-height: 32px; color: var(--title-color); margin-bottom: 32px; } .banner-style-two .booking-form{ position: relative; min-width: 1010px; z-index: 1; } .banner-style-two .booking-inner .form-group .nice-select, .banner-style-two .booking-inner .form-group input[type='text']{ width: 170px; } .banner-style-two .image-box{ position: relative; display: block; padding-right: 310px; } .banner-style-two .image-box .image{ position: relative; display: block; border-radius: 10px; } .banner-style-two .image-box .image img{ width: 100%; border-radius: 10px; } .banner-style-two .image-box .image-3{ position: absolute; top: 220px; right: 0px; } .banner-style-two .curve-text{ position: absolute; top: 0px; right: 0px; text-align: center; width: 192px; height: 192px; text-align: center; border: 37px solid #fff; border-radius: 50%; box-shadow: 0px 20px 60px 0px rgba(0, 0, 0, 0.08); background: #F1F1F1; } .banner-style-two .curve-text .curved-circle{ position: absolute; top: -30px; left: 60px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--title-color); letter-spacing: 1px; text-transform: uppercase; } .banner-style-two .curve-text .icon-box{ position: absolute; left: 35px; top: 37px; } .banner-style-two .pattern-layer{ position: absolute; top: -10px; right: 0px; width: 677px; height: 462px; background-repeat: no-repeat; } .banner-style-two .big-text{ position: absolute; left: -290px; bottom: 0px; font-size: 300px; line-height: 210px; font-family: var(--title-font); font-weight: 900; text-transform: uppercase; min-height: 210px; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgba(0, 0, 0, 0.10); } /** banner-style-three **/ .banner-style-three{ padding: 206px 0px 305px 0px; } .banner-style-three .bg-layer{ position: absolute; left: 0px; bottom: 0px; width: 100%; height: 611px; background-size: cover; background-repeat: no-repeat; background-position: bottom center; } .banner-style-three .content-box{ position: relative; max-width: 1010px; width: 100%; margin: 0 auto; } .banner-style-three .content-box .title-text{ position: relative; display: block; font-size: 40px; line-height: 48px; font-family: var(--secondary-font); margin-bottom: 8px; } .banner-style-three .content-box h2{ position: relative; display: block; font-size: 76px; line-height: 68px; margin-bottom: 75px; } /** rtl-css **/ /** responsive-css **/ @media only screen and (max-width: 1200px){ .banner-style-two .booking-form{ min-width: 990px; } } @media only screen and (max-width: 991px){ .banner-style-two .image-box{ margin-left: 0px; margin-top: 30px; } .banner-style-two .booking-form{ min-width: 100%; } } @media only screen and (max-width: 767px){ .banner-carousel .slide-item .big-text{ display: none; } .banner-carousel .content-box h2{ font-size: 50px; line-height: 60px; } .banner-carousel .slide-item{ padding: 100px 0px; } .banner-style-two .content-box h2{ font-size: 40px; line-height: 50px; } .banner-style-three .content-box h2{ font-size: 50px; line-height: 60px; margin-bottom: 40px; } .banner-style-three{ padding: 90px 0px 100px 0px; } } @media only screen and (max-width: 599px){ } @media only screen and (max-width: 499px){ .banner-style-two .image-box{ padding: 0px; } .banner-style-two .image-box .image-3{ position: relative; top: 0px; margin-top: 30px; } .booking-inner .form-group:before{ display: none; } }