/*** ===================================================== Main Slider style ===================================================== ***/ .main-slider { position: relative; display: block; z-index: 10; } .main-slider.style1 { position: relative; display: block; background-color: #ffffff; background-attachment: scroll; background-repeat: no-repeat; background-position: bottom center; background-size: cover; } .main-slider .slide { position: relative; display: block; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; } .main-slider .slide .image-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center bottom; background-size: cover; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 6000ms linear; -moz-transition: all 6000ms linear; -ms-transition: all 6000ms linear; -o-transition: all 6000ms linear; transition: all 6000ms linear; z-index: 1; } .main-slider .active .slide .image-layer { -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); } .main-slider .slide .image-layer:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: var(--thm-primary); opacity: 0.50; z-index: -1; } .main-slider .content { position: relative; z-index: 11; } .main-slider .auto-container { position: relative; } .main-slider .active .slide .image-layer { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } .main-slider .slide { position: relative; display: block; padding-top: 247px; padding-bottom: 230px; } .main-slider .content { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .main-slider .sub-title { position: relative; display: block; opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg) translateY(-80px); -ms-transform: perspective(400px) rotateY(0deg) translateY(-80px); transform: perspective(400px) rotateY(0deg) translateY(-80px); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all 1500ms ease; -moz-transition: all 1500ms ease; -ms-transition: all 1500ms ease; -o-transition: all 1500ms ease; transition: all 1500ms ease; z-index: 10; } .main-slider .active .sub-title { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px); -ms-transform: perspective(400px) rotateY(0deg) translateY(0px); transform: perspective(400px) rotateY(0deg) translateY(0px); -webkit-transition-delay: 1500ms; -moz-transition-delay: 1500ms; -ms-transition-delay: 1500ms; -o-transition-delay: 1500ms; transition-delay: 1500ms; } .main-slider .sub-title h3 { position: relative; display: inline-block; color: #ffffff; font-size: 20px; line-height: 30px; font-weight: 700; text-transform: none; font-family: var(--thm-font); } .main-slider .sub-title h3::before { content: ""; position: absolute; left: 0; bottom: 2px; right: 0; height: 1px; background: #ffffff; } .main-slider .content .big-title { position: relative; display: block; margin-top: 21px; opacity: 0; -webkit-transform: perspective(400px) rotateY(20deg) translateY(80px); -ms-transform: perspective(400px) rotateY(20deg) translateY(80px); transform: perspective(400px) rotateY(20deg) translateY(80px); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -ms-transition: all 1000ms ease; -o-transition: all 1000ms ease; transition: all 1000ms ease; z-index: 10; } .main-slider .active .content .big-title { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px); -ms-transform: perspective(400px) rotateY(0deg) translateY(0px); transform: perspective(400px) rotateY(0deg) translateY(0px); -webkit-transition-delay: 1000ms; -moz-transition-delay: 1000ms; -ms-transition-delay: 1000ms; -o-transition-delay: 1000ms; transition-delay: 1000ms; } .main-slider .content .big-title h2 { color: #ffffff; font-size: 80px; line-height: 1.1em; font-weight: 700; text-transform: none; } .main-slider .content .btns-box { position: relative; display: block; overflow: hidden; width: 100%; line-height: 0; margin-top: 45px; opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg) translateY(80px); -ms-transform: perspective(400px) rotateY(0deg) translateY(80px); transform: perspective(400px) rotateY(0deg) translateY(80px); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transition: all 1500ms ease; -moz-transition: all 1500ms ease; -ms-transition: all 1500ms ease; -o-transition: all 1500ms ease; transition: all 1500ms ease; z-index: 10; } .main-slider .active .content .btns-box { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg) translateY(0px); -ms-transform: perspective(400px) rotateY(0deg) translateY(0px); transform: perspective(400px) rotateY(0deg) translateY(0px); -webkit-transition-delay: 2500ms; -moz-transition-delay: 2500ms; -ms-transition-delay: 2500ms; -o-transition-delay: 2500ms; transition-delay: 2500ms; } .main-slider .content .btns-box a { padding-left: 50px; padding-right: 50px; } .slider-contact-info-box { position: absolute; left: 0; bottom: 0; right: 0; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 15px; z-index: 10; } .slider-contact-info { position: relative; display: block; max-width: 540px; width: 100%; background: #ffffff; float: right; padding: 47px 60px 30px; padding-bottom: 0; } .slider-contact-info .icon { width: 100px; } .slider-contact-info .icon .inner { position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; background: var(--thm-base); border-radius: 50%; color: #ffffff; font-size: 60px; z-index: 1; } .slider-contact-info .icon .inner:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: var(--thm-primary); border-radius: 50%; opacity: 0; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; z-index: -1; } .slider-contact-info:hover .icon .inner:before { opacity: 1.0; -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } .slider-contact-info .icon .inner span:before { position: relative; display: inline-block; transition: all 200ms linear; transition-delay: 0.1s; } .slider-contact-info:hover .icon .inner span:before { transform: scale(0.8); } .slider-contact-info .icon, .slider-contact-info .text { display: table-cell; vertical-align: middle; } .slider-contact-info .text { position: relative; padding-left: 30px; } .slider-contact-info .text h2 { font-size: 30px; line-height: 38px; font-weight: 400; } .slider-contact-info .text h2 a { color: var(--thm-primary); transition: all 200ms linear; transition-delay: 0.1s; } .slider-contact-info .text h2 a:hover { color: var(--thm-base); } .slider-contact-info .text p { line-height: 30px; margin: 8px 0 0; } /*=== Main Slider Nav Style=========*/ .main-slider .owl-theme .owl-nav { position: absolute; top: 50%; right: 15%; height: 150px; line-height: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; opacity: 0; transform: scaleX(1.0) translateX(0px); display: flex; flex-direction: column; align-items: flex-end; transition: all 500ms ease; z-index: 3; } .main-slider:hover .owl-theme .owl-nav { opacity: 1; transform: scaleX(1.0) translateY(-50%); } .main-slider .owl-theme .owl-nav .owl-prev, .main-slider .owl-theme .owl-nav .owl-next { position: relative; display: block; height: 70px; width: 70px; background: transparent; border: 2px solid rgba(255, 255, 255, .20); border-radius: 50%; text-align: center; color: rgba(255, 255, 255, .20); font-size: 25px; line-height: 66px; font-weight: 100; opacity: 1; margin: 0; padding: 0; transform: translateY(0px); -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .main-slider .owl-theme .owl-prev span, .main-slider .owl-theme .owl-next span { display: block; } .main-slider .owl-theme .owl-prev span:before { transition: all 100ms ease; } .main-slider .owl-theme .owl-nav .owl-prev { transform: rotate(180deg); } .main-slider .owl-theme .owl-nav .owl-next { transform: rotate(0deg); } .main-slider .owl-theme .owl-nav .owl-prev:hover, .main-slider .owl-theme .owl-nav .owl-next:hover { color: rgba(255, 255, 255, 1.0); border-color: rgba(255, 255, 255, 1.0); } .banner-carousel .owl-dots { display: block; } .main-slider.style2 .owl-theme .owl-nav { position: absolute; display: block; top: 50%; left: 0; bottom: 0; right: 0; height: 0px; opacity: 1; line-height: 0; transform: scaleX(1.0) translateY(-50px); transition: all 500ms ease; } .main-slider.style2 .owl-theme .owl-nav .owl-prev { position: absolute; left: 20px; } .main-slider.style2 .owl-theme .owl-nav .owl-next { position: absolute; right: 20px; } /*===== Main Slider Dot Style ====*/ .main-slider .banner-carousel.owl-carousel .owl-dots { position: absolute; top: 0; right: 70px; bottom: 0px; display: flex; align-items: center; justify-content: center; flex-direction: column; opacity: 0; transform: scaleX(1.0) translateX(0px); -webkit-transition: all 1500ms ease; -moz-transition: all 1500ms ease; -ms-transition: all 1500ms ease; -o-transition: all 1500ms ease; transition: all 1500ms ease; display: none; } .main-slider .banner-carousel.owl-carousel .owl-dots:before { content: ""; position: absolute; top: auto; left: 6px; bottom: auto; width: 3px; height: 95px; background: #262626; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .main-slider:hover .banner-carousel.owl-carousel .owl-dots { opacity: 1; transform: scaleX(1.0) translateX(0px); } .main-slider .banner-carousel.owl-carousel button.owl-dot { position: relative; display: block; width: 15px; height: 15px; background: #262626; float: none; border-radius: 50%; margin: 20px 0px; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; z-index: 1; } .main-slider .banner-carousel.owl-carousel button.owl-dot.active:before { transform: scaleX(1.0); } .main-slider .banner-carousel.owl-carousel button.owl-dot.active { background-image: -moz-linear-gradient(0deg, rgb(128, 183, 87) 0%, rgb(147, 188, 48) 40%, rgb(165, 193, 9) 100%); background-image: -webkit-linear-gradient(0deg, rgb(128, 183, 87) 0%, rgb(147, 188, 48) 40%, rgb(165, 193, 9) 100%); background-image: -ms-linear-gradient(0deg, rgb(128, 183, 87) 0%, rgb(147, 188, 48) 40%, rgb(165, 193, 9) 100%); } /*** ===================================================== Main Slider style2 Css ===================================================== ***/ .main-slider.style2 { position: relative; display: block; } .main-slider.style2 .slide .image-layer:before { opacity: 0.60; }