| Current File : //var/www/html/css/vtp-slider.css |
/* banner css */
/* default slider */
.vtp-index-slider{margin-top: 148px;position: relative;}
.swiper-button-prev, .swiper-button-next {color: #fff !important;transition: all .2s;opacity: 0;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: 10px;right: auto;z-index: 1;}
.swiper-button-prev::after, .swiper-button-next::after {font-family: swiper-icons;font-size: var(--swiper-navigation-size);text-transform: none !important;letter-spacing: 0;text-transform: none;font-variant: initial;line-height: 1;}
.swiper-button-prev::after, .swiper-button-next::after {font-size: 28px !important;}
.swiper-button-prev:hover, .swiper-button-next:hover {color: #f7bf00 !important;}
.swiper-pagination-bullet{background: #fff !important;margin-bottom: 12px !important;width: 10px !important;height: 10px !important;opacity: 1 !important;display: none;}
.swiper-pagination-bullet-active {opacity: 1;background: #f7bf00 !important;display: none;}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{left: initial !important;right: 10%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;width: 20px !important;display: none;}
.vtp-index-slider:hover .swiper-button-prev,.vtp-index-slider:hover .swiper-button-next {opacity: 1;transition: all .4s;}
/* default slider */
/* banner content */
.swiper-wrapper .swiper-slide {background: no-repeat center center/cover;height: 600px;position: relative;z-index: 0;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.swiper-wrapper .swiper-slide section{position: absolute;top: 0;left: 0;width: 100%;height: 100%;color: #fff;}
.swiper-wrapper .swiper-slide section i{margin-top: 40px;font-style: initial;}
.swiper-wrapper .swiper-slide section i a,.swiper-wrapper .swiper-slide section i a span{color: #fff;background-color: #2f8aca;}
.swiper-wrapper .swiper-slide section i a{color: #fff;background-color: #2f8aca;background: linear-gradient(33deg, #134b8ee3 10%, #2f8aca);}
.swiper-wrapper .swiper-slide section i a{opacity: 0;transform: translateY(100px);transition-delay: .8s;}
.swiper-wrapper .swiper-slide-active section i a{opacity: 1;transform: translateY(0);}
.swiper-wrapper .swiper-slide section i a img{filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(320deg) brightness(107%) contrast(101%);}
.swiper-wrapper .swiper-slide section .fluid-container {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 100%;gap: 20px;}
.swiper-wrapper .swiper-slide section .fluid-container .content {display: flex;justify-content: flex-start;align-items: flex-start;flex-direction: column;width: 100%;max-width: 650px;}
/* .swiper-slide section .fluid-container .content h2{font-size: 40px;font-weight: 600;text-transform: uppercase;opacity: 0;transform: translateX(-500px);transition: all 1s;line-height: 1.6;} */
.swiper-slide section .fluid-container .content h2{font-size: 40px;font-weight: 600;text-transform: uppercase;transition: all 1s;line-height: 1.6;}
/* .swiper-slide section .fluid-container .content p {font-size: 20px;font-weight: 400;color: #fff;opacity: 0;transform: translateX(-500px);transition: all 1s;transition-delay: .8s;display: inline-block;margin: 20px 0;line-height: 1.6;} */
.swiper-slide section .fluid-container .content p {font-size: 20px;font-weight: 400;color: #fff;transition: all 1s;transition-delay: .8s;display: inline-block;margin: 20px 0;line-height: 1.6;}
.swiper-slide section .fluid-container .banner-img img{transform: translateX(500px);transition: all 1s;transition-delay: .8s;opacity: 0;}
.swiper-slide section .fluid-container .content h2 span{color: #2f8aca;}
.swiper-slide-active section .fluid-container .content h2,.swiper-slide-active section .fluid-container .content p,.swiper-slide-active section .fluid-container .banner-img img{opacity: 1;transform: translate(0);}
/* banner content */
/* below banner section */
.below-banner-section {display: flex;justify-content: center;position: relative;z-index: 1;top: -52px;}
.below-banner-section article {display: flex;justify-content: center;align-items: center;margin: 0 auto;padding: 32px 20px;background: #fff url('../images/bg-1.png') no-repeat right/100px;width: 100%;max-width: 1200px;border-radius: 2px;box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;}
.below-banner-section p {text-transform: uppercase;font-size: 28px;}
.below-banner-section p span{color: #2f8aca;position: relative;}
.below-banner-section p span:before{content: '';position: absolute;bottom: -6px;left: 0;right: 0;margin: 0 auto;width: 100%;height: 4px;background-color: #2f8aca;}
.below-banner-section div{margin-left: 40px;}
.below-banner-section div a {padding: 10px 10px;margin-right: 14px;text-transform: uppercase;letter-spacing: 1px;background: #5cc2f0;color: #fff;transform: skew(-14deg);}
.common-button {display: inline-block;padding: 14px 24px;background: #0275f3;position: relative;transition: all 0.4s;border-radius: 8px 0 0 8px;text-transform: uppercase;letter-spacing: 1px;}
.common-button span {position: absolute;right: -60px;height: 100%;font-size: 14px;top: 0;bottom: 0;display: flex;justify-content: center;align-items: center;width: 60px;border-left: 1px solid rgba(255,255,255,0.2);background: #0275f3;border-radius: 0px 8px 8px 0px;transition: all 0.4s;overflow: hidden;}
.common-button span img {width: 30px;}
.common-button span .first-img {transition: all 0.2s;transform: translate(0,0);}
.common-button span .second-img {transition: all 0.2s;transform: translate(-60px,0px);color: #fff;position: absolute;}
.common-button:hover span .first-img {transform: translate(60px,0px);}
.common-button:hover span .second-img {transform: translate(0px,0px);}
/* below banner section */
/* banner css */
/* .swiper-slide section .fluid-container .content h2{font-size: 40px;font-weight: 600;text-transform: uppercase;opacity: 0;transform: translateX(-500px);transition: all 1s;line-height: 1.6;} */
.swiper-slide section .fluid-container .content h2{font-size: 40px;font-weight: 600;text-transform: uppercase;transition: all 1s;line-height: 1.6;}
/* .swiper-slide section .fluid-container .content p {font-size: 20px;font-weight: 400;color: #fff;opacity: 0;transform: translateX(-500px);transition: all 1s;transition-delay: .8s;display: inline-block;margin: 20px 0;line-height: 1.6;} */
.swiper-slide section .fluid-container .content p {font-size: 20px;font-weight: 400;color: #fff;transition: all 1s;transition-delay: .8s;display: inline-block;margin: 20px 0;line-height: 1.6;}