/* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .owl-carousel, .owl-carousel .owl-item { -webkit-tap-highlight-color: transparent; position: relative; } .owl-carousel { display: none; width: 100%; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; -moz-backface-visibility: hidden; } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; -webkit-transform: translate3d(0,0,0); } .owl-carousel .owl-item, .owl-carousel .owl-wrapper { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); } .owl-carousel .owl-item { min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; } .owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled { display: none; } .no-js .owl-carousel, .owl-carousel.owl-loaded { display: block; } .owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } .owl-carousel .animated { animation-duration: 1s; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .owl-height { transition: height .5s ease-in-out; } .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity .4s ease; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url(owl.video.play.png) no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform .1s ease; } .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3,1.3); transform: scale(1.3,1.3); } .owl-carousel .owl-video-playing .owl-video-play-icon, .owl-carousel .owl-video-playing .owl-video-tn { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity .4s ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } /*style.css*/ .theme-btn, .faq-body .faq-btn-box .faq-btn, .package-area .package-tab-content .tab-content .package-content .order__btn { font-weight: 500; font-size: 16px; padding: 14px 35px; background-color: #283a5e; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; text-transform: capitalize; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; color: #fff; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); position: relative; display: inline-block; border: none; } * { padding: 0; margin: 0; box-sizing: border-box; } ul { padding: 0; margin: 0; list-style-type: none; } a:hover, a:focus { text-decoration: none; } input:focus { outline: none; } h1, h2, h3, h4, h5, h6, p { margin: 0; } body { font-size: 15px; line-height: 25px; font-family: "Fira Sans", sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #677286; } /*========= m-y-auto m-x-auto ==========*/ .m-l-auto { margin-left: auto; } .m-r-auto { margin-right: auto; } .m-y-auto { margin-top: auto; margin-bottom: auto; } .m-x-auto { margin-left: auto; margin-right: auto; } /*---------------- container ----------------*/ .container { max-width: 1200px; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1200px; } } /*========= preloader ==========*/ .loader-container { width: 100%; height: 100%; position: fixed; background-color: #fff; top: 0; left: 0; z-index: 9999; } .loader-container .lds-ripple { position: relative; width: 64px; height: 64px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .loader-container .lds-ripple div { position: absolute; border: 4px solid #ff7e00; opacity: 1; border-radius: 50%; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .loader-container .lds-ripple div:nth-child(2) { animation-delay: -0.5s; } @keyframes lds-ripple { 0% { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; } 100% { top: -1px; left: -1px; width: 58px; height: 58px; opacity: 0; } } /*====== divider =======*/ .divider { position: relative; border-top: 2px solid #eee; } .divider:before, .divider:after { position: absolute; content: ''; top: -5px; left: 0; width: 8px; height: 8px; background-color: #ddd; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .divider:after { left: auto; right: 0; } .divider .divider__circle { position: absolute; content: ''; top: -5px; left: 50%; width: 8px; height: 8px; background-color: #ddd; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } /*=== theme-btn ====*/ .theme-btn { border: none; } .theme-btn .fa__arrow { font-size: 14px; margin-left: 3px; } .theme-btn:hover { background-color: #ff7e00; color: #fff; } /*=== heading-circle ====*/ .heading-circle { width: 17px; height: 17px; display: block; border: 3px solid #ff7e00; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: relative; margin-bottom: 20px; } .heading-circle:before { position: absolute; content: ''; top: 3px; left: 3px; width: 5px; height: 5px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #ff7e00; } /*==================================================== sec-heading ====================================================*/ .sec-heading .sec__meta { font-size: 18px; text-transform: capitalize; margin-bottom: 10px; color: #677286; font-weight: 500; } .sec-heading .sec__title { font-size: 45px; font-weight: 700; margin-bottom: 25px; color: #283a5e; } @media only screen and (min-width: 480px) and (max-width: 767px) { .sec-heading .sec__title { line-height: 55px; } } @media (max-width: 425px) { .sec-heading .sec__title { font-size: 35px; line-height: 45px; } } @media (max-width: 320px) { .sec-heading .sec__title { margin-bottom: 10px; } } .sec-heading .sec__desc { font-size: 16px; color: #677286; line-height: 28px; font-weight: 400; position: relative; margin-bottom: 15px; } .sec-heading .sec__desc .sec-year-time { color: #ff7e00; font-weight: 700; font-size: 62px; position: absolute; top: 13px; left: 0; } .sec-heading .sec__desc .sec-year-time:before { position: absolute; content: ''; top: -27px; left: -11px; width: 65px; height: 45px; border: 2px dashed #ddd; z-index: -1; } .sec-heading .sec__desc2 { color: #ff7e00; font-size: 18px; font-weight: 500; padding-left: 85px; margin-top: 32px; margin-bottom: 25px; } /*==== white-heading ======*/ .white-heading .sec__meta { color: #fff; opacity: .7; } .white-heading .sec__title { color: #fff; } .white-heading .sec__desc { color: #fff; } /*==================================================== header-area ====================================================*/ .header-area { position: absolute; top: 0; width: 100%; z-index: 1010; } .header-area .header-top { padding-top: 12px; position: relative; } @media only screen and (min-width: 480px) and (max-width: 767px) { .header-area .header-top .header-top-info { text-align: center; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .header-area .header-top .header-top-info { text-align: center; } } .header-area .header-top .header-top-info .info-list li { display: inline-block; font-size: 16px; color: #fff; padding-top: 3px; padding-left: 15px; position: relative; } .header-area .header-top .header-top-info .info-list li:first-child { padding-left: 0; } .header-area .header-top .header-top-info .info-list li .fa-phone { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .header-area .header-top .header-top-info .info-list li i { padding-right: 5px; font-size: 14px; } .header-area .header-top .header-top-info .info-list li a { color: #fff; font-size: 16px; padding-bottom: 12px; display: inline-block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header-area .header-top .header-top-info .info-list li a img { width: 30px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right: 2px; } .header-area .header-top .header-top-info .info-list li a i { padding-right: 3px; } .header-area .header-top .header-top-info .info-list li a:hover { color: #ff7e00; } .header-area .header-top .header-top-info .info-list li .lang-drop-menu { position: absolute; top: 60px; right: 0; width: 150px; background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; opacity: 0; visibility: hidden; z-index: 1; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header-area .header-top .header-top-info .info-list li .lang-drop-menu li { display: block; text-align: left; } .header-area .header-top .header-top-info .info-list li .lang-drop-menu li a { display: block; padding-bottom: 15px; padding-right: 15px; padding-left: 15px; color: #283a5e; text-transform: capitalize; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-weight: 400; } .header-area .header-top .header-top-info .info-list li .lang-drop-menu li a:hover { color: #ff7e00; } .header-area .header-top .header-top-info .info-list li .lang-drop-menu li a img { margin-right: 4px; } .header-area .header-top .header-top-info .info-list li .lang-drop-menu li a:first-child { padding-top: 15px; } .header-area .header-top .header-top-info .info-list li .lang-drop-menu:after { position: absolute; content: ''; left: 50%; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; bottom: 100%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .header-area .header-top .header-top-info .info-list li:hover .lang-drop-menu { top: 40px; opacity: 1; visibility: visible; } .header-area .header-top .header-login-info { text-align: right; } @media only screen and (min-width: 480px) and (max-width: 767px) { .header-area .header-top .header-login-info { text-align: center; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .header-area .header-top .header-login-info { text-align: center; } } .header-area .header-top .header-login-info .info-list li { padding-top: 0; } .header-area .header-top:after { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #fff; opacity: .1; } .header-area .header-menu-wrapper { color: #fff; padding-top: 20px; } .header-area .header-menu-wrapper .header-menu-row { background-color: #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin-right: 0; margin-left: 0; padding: 0 25px; } @media (max-width: 1199px) { .header-area .header-menu-wrapper .header-menu-row { padding-top: 20px; padding-bottom: 20px; } } .header-area .header-menu-wrapper .header-menu-row .col-lg-3, .header-area .header-menu-wrapper .header-menu-row .col-lg-9 { padding: 0; } .header-area .header-menu-wrapper .logo { padding-top: 20px; } @media (max-width: 1199px) { .header-area .header-menu-wrapper .logo { padding-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-area .header-menu-wrapper .logo { display: inline-block; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .header-area .header-menu-wrapper .logo { display: inline-block; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .header-area .header-menu-wrapper .logo { display: inline-block; } } .header-area .header-menu-wrapper .logo a img { width: 130px; } @media (max-width: 1199px) { .header-area .header-menu-wrapper .logo a img { width: 120px; } } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content { float: right; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content { margin-top: 5px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content { margin-top: -27px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content { margin-top: -27px; } } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav { float: left; } @media (max-width: 1199px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul { display: none; } } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li { display: inline-block; text-transform: uppercase; padding-top: 30px; padding-right: 30px; position: relative; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li a { color: #283a5e; font-size: 15px; font-weight: 500; display: block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; padding-bottom: 27px; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li a:hover { color: #ff7e00; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li .dropdown-menu-item { position: absolute; top: 70px; left: 0; width: 200px; background-color: #fff; padding-top: 12px; padding-bottom: 12px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; opacity: 0; visibility: hidden; z-index: 1; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li .dropdown-menu-item li { display: block; padding-top: 0; padding-right: 0; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li .dropdown-menu-item li a { color: #677286; display: block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; text-transform: capitalize; padding: 6px 25px; font-weight: 400; position: relative; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li .dropdown-menu-item li a:hover { color: #ff7e00; padding-left: 35px; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li .dropdown-menu-item li a:hover:after { width: 10px; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li .dropdown-menu-item li a .icon-right { float: right; padding-top: 4px; font-size: 14px; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li .dropdown-menu-item li a:after { position: absolute; content: ''; top: 50%; left: 20px; width: 0; height: 2px; background-color: #ff7e00; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li .dropdown-menu-item li .sub-menu { position: absolute; top: -10px; left: 190px; width: 200px; background-color: #fff; padding-top: 12px; padding-bottom: 12px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; visibility: hidden; opacity: 0; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li .dropdown-menu-item li:hover .sub-menu { left: 200px; opacity: 1; visibility: visible; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li:hover .dropdown-menu-item { top: 80px; opacity: 1; visibility: visible; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content nav ul li:last-child { padding-right: 0; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button { float: left; position: relative; } @media (max-width: 1199px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button { float: none; display: -webkit-flex; display: -ms-flex; display: flex; align-items: center; height: 46px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button { height: auto; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button { height: auto; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button { height: auto; } } @media (max-width: 1199px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button ul { padding-right: 30px; } } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button ul li { padding-top: 30px; padding-left: 30px; } @media (max-width: 1199px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button ul li { padding: 0; } } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button ul li a { color: #283a5e; font-size: 16px; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button .side-menu-open { width: 30px; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: none; } @media (max-width: 1199px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button .side-menu-open { display: block; } } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button .side-menu-open .menu__bar { height: 2px; background-color: #283a5e; display: block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button .side-menu-open .menu__bar:nth-child(1), .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button .side-menu-open .menu__bar:nth-child(2) { margin-bottom: 5px; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button .side-menu-open:hover .menu__bar:nth-child(1), .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .logo-right-button .side-menu-open:hover .menu__bar:nth-child(3) { margin-left: 5px; margin-right: 5px; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .search-option { position: absolute; top: 82px; right: -25px; width: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 0; visibility: hidden; } @media (max-width: 1199px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .search-option { top: 66px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .search-option { top: 54px; } } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .search-option .form-control { padding: 15px 20px; color: #283a5e; height: auto; font-size: 16px; font-weight: 400; -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .search-option .form-control:focus { -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; border-color: #eee; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .search-option .search-icon { position: absolute; right: 20px; color: #283a5e; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; } .header-area .header-menu-wrapper .main-menu-wrapper .main-menu-content .search-option.active { opacity: 1; visibility: visible; } .header-area .header-menu-wrapper.header-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; background-color: #fff; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); padding-top: 0; } .header-area .header-menu-wrapper.header-fixed .header-menu-row { background-color: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 0; } @media (max-width: 1199px) { .header-area .header-menu-wrapper.header-fixed .header-menu-row { padding-top: 20px; padding-bottom: 20px; } } .header-area .header-menu-wrapper.header-fixed .main-menu-wrapper .main-menu-content .search-option { right: 0; } .header-area .side-nav-container { position: fixed; top: 0; left: 0; width: 320px; height: 100%; background-color: #283a5e; overflow-x: hidden; z-index: 999; -webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1); -moz-transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1); -ms-transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1); -o-transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1); transition: all 0.4s cubic-bezier(0.7, 0, 0.2, 1); -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .header-area .side-nav-container .humburger-menu .humburger-menu-lines { display: inline-block; text-align: right; width: 22px; height: 22px; cursor: pointer; position: absolute; top: 25px; right: 18px; opacity: .5; } .header-area .side-nav-container .humburger-menu .humburger-menu-lines:before, .header-area .side-nav-container .humburger-menu .humburger-menu-lines:after { position: absolute; content: ''; height: 2px; width: 100%; top: 10px; left: 0; background-color: #fff; -webkit-transform: rotate(-43deg); -moz-transform: rotate(-43deg); -ms-transform: rotate(-43deg); -o-transform: rotate(-43deg); transform: rotate(-43deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header-area .side-nav-container .humburger-menu .humburger-menu-lines:after { -webkit-transform: rotate(43deg); -moz-transform: rotate(43deg); -ms-transform: rotate(43deg); -o-transform: rotate(43deg); transform: rotate(43deg); } .header-area .side-nav-container .humburger-menu .humburger-menu-lines:hover:before, .header-area .side-nav-container .humburger-menu .humburger-menu-lines:hover:after { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .header-area .side-nav-container .side-menu-wrap { margin-top: 100px; } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item { position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item:after { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.12); } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item a { font-size: 16px; color: #fff; display: block; text-transform: capitalize; font-weight: 600; padding: 14px 20px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item .menu-plus-icon { position: absolute; top: 0; right: 0; width: 50px; height: 52px; line-height: 50px; cursor: pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item .menu-plus-icon:before, .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item .menu-plus-icon:after { position: absolute; top: 24px; right: 20px; content: ''; width: 11px; height: 2px; background-color: #fff; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item .menu-plus-icon:after { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item .menu-plus-icon:hover { background-color: rgba(255, 255, 255, 0.1); } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item .side-sub-menu { display: none; } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item .side-sub-menu li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item .side-sub-menu li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.12); } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item .side-sub-menu li a { padding-left: 30px; padding-top: 12px; padding-bottom: 12px; opacity: .8; } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item .side-sub-menu li a:hover { color: #ff7e00; opacity: 1; } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item:hover > a { background-color: rgba(255, 255, 255, 0.12); } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item.active .menu-plus-icon:before { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item2 i { font-size: 14px; } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item2:after { background-color: rgba(255, 255, 255, 0.1); } .header-area .side-nav-container .side-menu-wrap .side-menu-ul .sidenav__item2 a { background-color: rgba(255, 255, 255, 0.12); } .header-area .side-nav-container.active { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } /*==================================================== header-area2 ====================================================*/ .header-area2 .header-top .header-top-info .info-list li { color: #283a5e; } .header-area2 .header-top .header-top-info .info-list li a { color: #283a5e; } .header-area2 .header-top:after { background-color: #677286; } .header-area2 .header-menu-wrapper .main-menu-wrapper .main-menu-content .search-option { right: 15px; } @media (max-width: 1199px) { .header-area2 .header-menu-wrapper.header-fixed { padding-top: 20px; padding-bottom: 20px; } } .header-area2 .header-menu-wrapper.header-fixed .main-menu-wrapper .main-menu-content .search-option { right: 15px; } /*=== error-menu-area ===*/ .error-menu-area .header-menu-wrapper { padding-top: 0; background-color: #fff; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); } .error-menu-area .header-menu-wrapper .header-menu-row { padding: 0; } @media (max-width: 1199px) { .error-menu-area .header-menu-wrapper .header-menu-row { padding-top: 20px; padding-bottom: 20px; } } /*==================================================== hero-area ====================================================*/ .hero-area { background-color: #4e3a9d; color: #fff; position: relative; padding-top: 320px; padding-bottom: 465px; overflow: hidden; } @media (max-width: 1366px) { .hero-area { padding-bottom: 390px; } } @media (max-width: 1199px) { .hero-area { padding-bottom: 360px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-area { padding-bottom: 340px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .hero-area { padding-bottom: 270px; } } @media (max-width: 480px) { .hero-area { padding-bottom: 220px; } } @media (max-width: 425px) { .hero-area { padding-top: 270px; padding-bottom: 180px; } } @media (max-width: 375px) { .hero-area { padding-bottom: 150px; } } @media (max-width: 320px) { .hero-area { padding-top: 320px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-area .col-lg-7, .hero-area .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-area .hero-content { margin-bottom: 80px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .hero-area .hero-content { margin-bottom: 80px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .hero-area .hero-content { margin-bottom: 80px; } } .hero-area .hero-content .hero__title { font-size: 62px; text-transform: capitalize; font-weight: 700; margin-bottom: 15px; line-height: 85px; } @media (max-width: 1199px) { .hero-area .hero-content .hero__title { line-height: 75px; } } @media (max-width: 480px) { .hero-area .hero-content .hero__title { font-size: 55px; line-height: 65px; } } @media (max-width: 425px) { .hero-area .hero-content .hero__title { font-size: 45px; line-height: 51px; } } .hero-area .hero-content .hero__title span { position: relative; } .hero-area .hero-content .hero__title span:before { content: ''; background-color: #283a5e; opacity: 0.1; width: 100%; height: 8px; position: absolute; bottom: 12px; left: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .hero-area .hero-content .hero__desc { font-size: 20px; margin-bottom: 43px; line-height: 33px; font-weight: 400; } @media only screen and (min-width: 480px) and (max-width: 767px) { .hero-area .hero-content .hero__desc br { display: none; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .hero-area .hero-content .hero__desc br { display: none; } } @media (max-width: 395px) { .hero-area .hero-content .hero-btn { text-align: center; padding-right: 80px; padding-left: 80px; } } @media (max-width: 375px) { .hero-area .hero-content .hero-btn { padding-right: 0px; padding-left: 0px; } } .hero-area .hero-content .hero-btn .theme-btn { margin-right: 20px; background-color: #ff7e00; color: #fff; } @media (max-width: 395px) { .hero-area .hero-content .hero-btn .theme-btn { display: block; margin-right: 0; margin-bottom: 20px; } } @media (max-width: 375px) { .hero-area .hero-content .hero-btn .theme-btn { display: inline-block; } } .hero-area .hero-content .hero-btn .theme-btn:hover { background-color: #fff; color: #ff7e00; } .hero-area .hero-content .video-play-btn { color: #fff; font-size: 16px; display: inline-block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .hero-area .hero-content .video-play-btn i { width: 40px; height: 40px; border: 1px solid #fff; line-height: 40px; display: inline-block; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-left: 8px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-size: 14px; } .hero-area .hero-content .video-play-btn:hover i { background-color: #ff7e00; border-color: #ff7e00; color: #fff; } .hero-area .hero-img-box { margin-top: -20px; } @media (max-width: 1199px) { .hero-area .hero-img-box { margin-top: 0; } } .hero-area .hero-img-box .hero__img { width: 100%; } .hero-area:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/dots2.png"); background-size: cover; background-position: center; opacity: 0.3; } .hero-area .wave-svg-box { position: absolute; bottom: 0; left: 0; } /*==================================================== hero-area2 ====================================================*/ .hero-area2 { padding-top: 320px; padding-bottom: 120px; position: relative; background-color: #fff; z-index: 1; overflow: inherit; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-area2 .col-lg-8 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .hero-area2 .col-lg-8 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .hero-area2 .col-lg-8 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-area2 { overflow: hidden; padding-top: 261px; padding-bottom: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .hero-area2 { overflow: hidden; padding-top: 298px; padding-bottom: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .hero-area2 { overflow: hidden; padding-top: 260px; padding-bottom: 0; } } .hero-area2 .bubble { width: 30px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; background-color: #ede8ff; border: 3px solid #a98fff; opacity: 0.5; -webkit-perspective: 100px; perspective: 100px; -webkit-animation: bubbleMover 9s linear infinite; animation: bubbleMover 9s linear infinite; } .hero-area2 .bubble:nth-child(1) { background-color: #fff7e0; border-color: #ffdd83; top: 10px; left: 20px; } .hero-area2 .bubble:nth-child(2) { background-color: #fff1ec; border-color: #ffb59d; top: 41%; left: 20%; } .hero-area2 .bubble:nth-child(3) { background-color: #ebf3ff; border-color: #b9d4ff; bottom: 30px; left: 7%; } .hero-area2 .bubble:nth-child(4) { background-color: #ddffe4; border-color: #93ff6d; top: 5px; right: 13%; } .hero-area2 .bubble:nth-child(5) { background-color: #ede8ff; border-color: #a98fff; bottom: 30px; right: 25%; } .hero-area2 .bubble:nth-child(6) { background-color: #ffe8fb; border-color: #ffa6ef; top: 40%; right: 10%; } .hero-area2 .bubble:nth-child(7) { background-color: #ffe8fb; border-color: #ffa6ef; top: 65px; left: 44%; } .hero-area2 .hero-content { position: relative; z-index: 1; } .hero-area2 .hero-content .hero__title { color: #283a5e; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-area2 .hero-content .hero__title { font-size: 55px; line-height: 69px; } } @media (max-width: 480px) { .hero-area2 .hero-content .hero__title { line-height: 75px; } } @media (max-width: 425px) { .hero-area2 .hero-content .hero__title { line-height: 60px; } } @media (max-width: 375px) { .hero-area2 .hero-content .hero__title { font-size: 35px; line-height: 45px; } } .hero-area2 .hero-content .hero__desc { color: #677286; } .hero-area2 .hero-content .hero-btn2 .theme-btn { border: 1px solid rgba(103, 114, 134, 0.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding-top: 15px; padding-bottom: 15px; background-color: #fff; color: #283a5e; margin-right: 0; } .hero-area2 .hero-content .hero-btn2 .theme-btn:hover { border-color: #ff7e00; background-color: #ff7e00; color: #fff; } .hero-area2 .hero-content .hero-btn2 .started__btn { margin-right: 10px; } @media (max-width: 320px) { .hero-area2 .hero-content .hero-btn2 .started__btn { margin-right: 0; margin-bottom: 10px; } } .hero-area2:before, .hero-area2:after { content: ''; width: 318px; height: 318px; border-radius: 50%; border: 43px solid; position: absolute; -webkit-animation: bannerImgBounce 2s ease-in-out 0s infinite alternate; animation: bannerImgBounce 2s ease-in-out 0s infinite alternate; } .hero-area2:after { border-color: #f9f5fe; top: 0; left: 8%; } .hero-area2:before { border-color: #FFF3FD; bottom: 10%; right: 25%; left: auto; top: auto; background: transparent; } .hero-area2 .hero-svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; stroke: none; fill: #FDF9F7; z-index: -1; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } /*=== keyframes ===*/ @-webkit-keyframes bannerImgBounce { 0% { -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } 100% { -webkit-transform: translateY(-40px) translateX(-40px); transform: translateY(-40px) translateX(-40px); } } @keyframes bannerImgBounce { 0% { -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); } 100% { -webkit-transform: translateY(-20px) translateX(-20px); transform: translateY(-20px) translateX(-20px); } } @keyframes bubbleMover { 0% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); } 30% { -webkit-transform: translateY(30px) translateX(50px) rotate(15deg); transform: translateY(30px) translateX(50px) rotate(15deg); -webkit-transform-origin: center center; transform-origin: center center; } 50% { -webkit-transform: translateY(50px) translateX(100px) rotate(45deg); transform: translateY(50px) translateX(100px) rotate(45deg); -webkit-transform-origin: right bottom; transform-origin: right bottom; } 80% { -webkit-transform: translateY(30px) translateX(50px) rotate(15deg); transform: translateY(30px) translateX(50px) rotate(15deg); -webkit-transform-origin: left top; transform-origin: left top; } 100% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); -webkit-transform-origin: center center; transform-origin: center center; } } /*==================================================== breadcrumb-area ====================================================*/ .breadcrumb-area { padding-top: 259px; padding-bottom: 115px; position: relative; z-index: 1; color: #fff; background-image: url("../images/bg.jpg"); background-size: cover; background-position: center; background-attachment: fixed; } @media only screen and (min-width: 480px) and (max-width: 767px) { .breadcrumb-area { padding-top: 285px; } } @media (max-width: 480px) { .breadcrumb-area { padding-top: 280px; padding-bottom: 90px; } } @media (max-width: 320px) { .breadcrumb-area { padding-top: 304px; padding-bottom: 75px; } } .breadcrumb-area .breadcrumb-content { position: relative; } .breadcrumb-area .breadcrumb-content .breadcrumb-inner { display: -webkit-flex; display: -ms-flex; display: flex; -ms-flex-align: center; align-items: center; } @media (max-width: 480px) { .breadcrumb-area .breadcrumb-content .breadcrumb-inner { display: block; text-align: center; } } .breadcrumb-area .breadcrumb-content .breadcrumb__title { font-size: 45px; text-transform: capitalize; font-weight: 700; } @media (max-width: 480px) { .breadcrumb-area .breadcrumb-content .breadcrumb__title { margin-bottom: 10px; } } @media (max-width: 395px) { .breadcrumb-area .breadcrumb-content .breadcrumb__title { font-size: 35px; margin-bottom: 8px; } } @media (max-width: 480px) { .breadcrumb-area .breadcrumb-content .breadcrumb__title br { display: none; } } .breadcrumb-area .breadcrumb-content .breadcrumb__list { margin-left: auto; } .breadcrumb-area .breadcrumb-content .breadcrumb__list li { display: inline-block; text-transform: capitalize; color: #f6f8f9; font-size: 16px; font-weight: 500; position: relative; padding-right: 22px; } @media (max-width: 320px) { .breadcrumb-area .breadcrumb-content .breadcrumb__list li { font-size: 15px; } } .breadcrumb-area .breadcrumb-content .breadcrumb__list li:last-child { padding-right: 0; } .breadcrumb-area .breadcrumb-content .breadcrumb__list li a { color: #f6f8f9; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .breadcrumb-area .breadcrumb-content .breadcrumb__list li a:hover { color: #ff7e00; } .breadcrumb-area .breadcrumb-content .breadcrumb__list li.active__list-item:after { position: absolute; content: '.'; top: -7px; right: 0; padding: 0 6px; font-size: 28px; } .breadcrumb-area .breadcrumb-content .text-outline { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgba(255, 255, 255, 0.1); -ms-text-stroke-color: rgba(255, 255, 255, 0.1); -o-text-stroke-color: rgba(255, 255, 255, 0.1); color: transparent; text-transform: uppercase; font-size: 170px; letter-spacing: -0.02em; position: absolute; text-align: center; width: 100%; bottom: -65px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumb-area .breadcrumb-content .text-outline { display: none; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .breadcrumb-area .breadcrumb-content .text-outline { display: none; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .breadcrumb-area .breadcrumb-content .text-outline { display: none; } } .breadcrumb-area:after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(40, 58, 94, 0.9); z-index: -1; } /*======== sidebar ===========*/ @media only screen and (min-width: 768px) and (max-width: 991px) { .sidebar { margin-top: 50px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .sidebar { margin-top: 50px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .sidebar { margin-top: 50px; } } .sidebar .contact-form-action { padding-left: 0; } .sidebar .contact-form-action .form-group { position: relative; } .sidebar .contact-form-action .form-group .search__btn { position: absolute; right: 20px; top: 50%; border: none; background-color: transparent; color: #283a5e; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .sidebar .sidebar-widget { margin-bottom: 40px; } .sidebar .sidebar-widget .widget__title { font-size: 25px; text-transform: capitalize; font-weight: 600; color: #283a5e; margin-bottom: 30px; position: relative; display: inline-block; padding-bottom: 15px; } .sidebar .sidebar-widget .widget__title .footer-title-shape { position: absolute; bottom: 0; left: 0; width: 15px; height: 4px; background-color: #ff7e00; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .sidebar .sidebar-widget .widget__title .footer-title-shape:nth-child(2) { left: 17px; width: 10px; opacity: 0.8; } .sidebar .sidebar-widget .widget__title .footer-title-shape:nth-child(3) { left: 29px; width: 8px; opacity: 0.6; } .sidebar .sidebar-widget .widget__list { font-weight: 400; } .sidebar .sidebar-widget .widget__list li { display: block; } .sidebar .sidebar-widget .widget__list li:last-child a { margin-bottom: 0; } .sidebar .sidebar-widget .widget__list li a { color: #677286; position: relative; padding: 12px 20px 12px 20px; display: block; border: 1px solid #eee; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; text-transform: capitalize; font-size: 16px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom: 10px; } .sidebar .sidebar-widget .widget__list li a span { margin-top: -4px; float: right; width: 34px; height: 34px; text-align: center; line-height: 36px; background-color: #eee; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .sidebar .sidebar-widget .widget__list li a:hover { color: #ff7e00; } .sidebar .sidebar-widget .widget__list li a:hover span { background-color: #ff7e00; color: #fff; } .sidebar .sidebar-widget .recent-item { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #eee; display: -webkit-flex; display: -ms-flex; display: flex; } .sidebar .sidebar-widget .recent-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .sidebar .sidebar-widget .recent-item .recent-img img { width: 85px; height: 85px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); margin-right: 15px; } .sidebar .sidebar-widget .recent-item .recentpost-body .recent__meta { font-size: 14px; color: #677286; } .sidebar .sidebar-widget .recent-item .recentpost-body .recent__meta a { color: #283a5e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .sidebar .sidebar-widget .recent-item .recentpost-body .recent__meta a:hover { color: #ff7e00; } .sidebar .sidebar-widget .recent-item .recentpost-body .recent__link a { color: #283a5e; font-size: 16px; font-weight: 500; line-height: 22px; display: block; margin-top: 4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .sidebar .sidebar-widget .recent-item .recentpost-body .recent__link a:hover { color: #ff7e00; } .sidebar .sidebar-widget .tag__list li { display: inline-block; } .sidebar .sidebar-widget .tag__list li:last-child a { border: 1px solid #eee; margin-right: 0; } .sidebar .sidebar-widget .tag__list li a { padding-top: 5px; padding-bottom: 4px; margin-right: 5px; margin-bottom: 8px; border: 1px solid #eee; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #fff; } .sidebar .sidebar-widget .tag__list li a:hover { background-color: #ff7e00; color: #fff; border-color: #ff7e00; } .sidebar .sidebar-widget .social__links li { display: inline-block; } .sidebar .sidebar-widget .social__links li a { color: #677286; display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; border: 1px solid #eee; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; font-size: 16px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; margin-right: 5px; background-color: #fff; } .sidebar .sidebar-widget .social__links li a:hover { background-color: #ff7e00; border-color: #ff7e00; color: #fff; } .sidebar .tag-widget { margin-bottom: 32px; } .sidebar .social-widget { margin-bottom: 0; } .sidebar .subscribe-form form .form-group .theme-btn { margin-top: 15px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; outline: none; padding: 10px 25px; } /*====================================== faq-area ======================================*/ .faq-area { padding-top: 120px; position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .faq-area .col-lg-8, .faq-area .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .faq-area .col-lg-8, .faq-area .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .faq-area .col-lg-8, .faq-area .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .faq-area .sidebar { margin-top: 56px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .faq-area .sidebar { margin-top: 56px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .faq-area .sidebar { margin-top: 56px; } } .faq-body { margin-top: -20px; } .faq-body .faq-panel .faq-heading { margin-top: 20px; } .faq-body .faq-panel .faq-heading .faq__title { color: #283a5e; width: 100%; cursor: pointer; padding: 20px 30px 18px 30px; display: block; -webkit-box-shadow: 1px 7px 41px -8px rgba(82, 85, 90, 0.1); -moz-box-shadow: 1px 7px 41px -8px rgba(82, 85, 90, 0.1); box-shadow: 1px 7px 41px -8px rgba(82, 85, 90, 0.1); border: 1px solid #eee; font-weight: 500; font-size: 20px; background-color: #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @media (max-width: 425px) { .faq-body .faq-panel .faq-heading .faq__title { font-size: 18px; } } @media (max-width: 320px) { .faq-body .faq-panel .faq-heading .faq__title { font-size: 16px; } } @media (max-width: 320px) { .faq-body .faq-panel .faq-heading .faq__title { padding-right: 20px; padding-left: 20px; } } .faq-body .faq-panel .faq-heading .faq__title i { float: right; font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .faq-body .faq-panel .faq-heading .faq__title:hover { color: #ff7e00; } .faq-body .faq-panel .faq-content { padding: 23px 30px 21px 30px; display: none; -webkit-box-shadow: 1px 7px 41px -8px rgba(82, 85, 90, 0.1); -moz-box-shadow: 1px 7px 41px -8px rgba(82, 85, 90, 0.1); box-shadow: 1px 7px 41px -8px rgba(82, 85, 90, 0.1); -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; font-weight: 400; } @media (max-width: 320px) { .faq-body .faq-panel .faq-content { padding-right: 20px; padding-left: 20px; } } .faq-body .faq-panel .faq-content .faq__desc { font-size: 16px; color: #677286; line-height: 28px; } .faq-body .faq-panel.active .faq-heading .faq__title { color: #fff; background-color: #ff7e00; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; border: transparent; } .faq-body .faq-panel.active .faq-heading .faq__title i { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .faq-body .faq-panel.active .faq-heading .faq__title:after { z-index: -1; } .faq-body .faq-btn-box { margin-top: 60px; } .faq-body .faq-btn-box .faq-btn { background-color: #283a5e; color: #fff; padding-left: 25px; padding-right: 25px; } .faq-body .faq-btn-box .faq-btn:hover { background-color: #ff7e00; } /*==================================================== contact-area ====================================================*/ .contact-area { padding-top: 120px; padding-bottom: 100px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-area { padding-top: 44px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .contact-area { padding-top: 44px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .contact-area { padding-top: 44px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-area .sec-heading { margin-bottom: 14px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .contact-area .sec-heading { margin-bottom: 50px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .contact-area .sec-heading { margin-bottom: 50px; } } .contact-area .sec-heading .sec__title { line-height: 55px; margin-bottom: 28px; } @media (max-width: 480px) { .contact-area .sec-heading .sec__title { line-height: 45px; } } .contact-area .sec-heading .sec__list { margin-top: 25px; } .contact-area .sec-heading .sec__list li { display: inline-block; margin-right: 23px; } .contact-area .sec-heading .sec__list li:last-child { margin-right: 0; } .contact-area .sec-heading .sec__list li a { color: #283a5e; font-size: 16px; } .contact-area .sec-heading .sec__list li a i.fa-facebook-f { color: #182eb2; } .contact-area .sec-heading .sec__list li a i.fa-twitter { color: #31a5ff; } .contact-area .sec-heading .sec__list li a i.fa-instagram { color: #CD3099; } .contact-area .sec-heading .sec__list li a i.fa-youtube { color: #ff2e2e; } /*======== contact-form-action =========*/ .contact-form-action { padding-left: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-form-action { padding-left: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .contact-form-action { padding-left: 0; } } @media (max-width: 425px) { .contact-form-action { padding-left: 0; } } .contact-form-action form .form-group { margin-bottom: 20px; } .contact-form-action form .form-group .form-control { height: auto; line-height: inherit; padding: 15px 20px; font-size: 16px; color: #283a5e; border: 1px solid #ddd; font-weight: 400; resize: none; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .contact-form-action form .form-group .form-control:focus { border-color: #eee; } .contact-form-action form .form-group .message-control { height: 150px; } /*==================================================== form-shared ====================================================*/ .form-shared { padding-top: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .form-shared .col-lg-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .form-shared .col-lg-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .form-shared .col-lg-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .form-shared .form-shared-content { margin-bottom: 60px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .form-shared .form-shared-content { margin-bottom: 60px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .form-shared .form-shared-content { margin-bottom: 60px; } } .form-shared .form-shared-content .login-box { background-image: url("../images/video.jpg"); background-size: cover; background-position: center; position: relative; z-index: 1; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 47px 50px 50px 50px; color: #fff; } @media (max-width: 375px) { .form-shared .form-shared-content .login-box { padding: 35px; } } .form-shared .form-shared-content .login-box h3 { font-size: 28px; font-weight: 600; margin-bottom: 25px; } .form-shared .form-shared-content .login-box p { font-size: 16px; font-weight: 400; margin-bottom: 20px; color: rgba(255, 255, 255, 0.7); } .form-shared .form-shared-content .login-box .theme-btn { background-color: #fff; color: #283a5e; margin-top: 15px; } .form-shared .form-shared-content .login-box .theme-btn:hover { background-color: #ff7e00; color: #fff; } .form-shared .form-shared-content .login-box:after { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; background-color: #283a5e; z-index: -1; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; opacity: 0.9; } .form-shared .form-shared-content ul li { background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); padding: 40px 40px 37px 112px; position: relative; z-index: 2; } @media (max-width: 320px) { .form-shared .form-shared-content ul li { padding-left: 40px; } } .form-shared .form-shared-content ul li i { font-size: 20px; color: #ff7e00; background-color: rgba(255, 126, 0, 0.1); position: absolute; top: 40px; left: 45px; width: 50px; height: 50px; text-align: center; line-height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: -1; } @media (max-width: 320px) { .form-shared .form-shared-content ul li i { position: inherit; top: auto; left: auto; } } .form-shared .form-shared-content ul li h4 { font-size: 20px; color: #283a5e; text-transform: capitalize; margin-bottom: 10px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @media (max-width: 320px) { .form-shared .form-shared-content ul li h4 { margin-top: 20px; } } .form-shared .form-shared-content ul li p { font-weight: 400; margin-bottom: 10px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .form-shared .form-shared-content ul li a { color: #677286; text-transform: capitalize; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .form-shared .form-shared-content ul li a:hover { color: #ff7e00; } .form-shared .form-shared-content ul li:before, .form-shared .form-shared-content ul li:after { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; background-color: #283a5e; z-index: -1; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .form-shared .form-shared-content ul li:after { background-image: url("../images/blog-img4.jpg"); background-position: center; z-index: -2; } .form-shared .form-shared-content ul li + li { margin-top: 30px; } .form-shared .form-shared-content ul li:hover h4, .form-shared .form-shared-content ul li:hover p, .form-shared .form-shared-content ul li:hover a { color: #fff; } .form-shared .form-shared-content ul li:hover i { background-color: #fff; color: #ff7e00; } .form-shared .form-shared-content ul li:hover:after, .form-shared .form-shared-content ul li:hover:before { height: 100%; bottom: auto; top: 0; opacity: 0.9; visibility: visible; } .form-shared .contact-form-action { background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); padding: 46px 30px 42px 30px; } .form-shared .contact-form-action .form-heading { margin-bottom: 33px; } .form-shared .contact-form-action .form-heading .form__title { font-size: 35px; color: #283a5e; font-weight: 600; margin-bottom: 5px; } @media (max-width: 425px) { .form-shared .contact-form-action .form-heading .form__title { font-size: 35px; } } .form-shared .contact-form-action .form-heading .form__desc { font-size: 18px; color: #677286; } .form-shared .contact-form-action .form-heading .reset__desc { line-height: 30px; margin-top: 15px; font-weight: 400; } .form-shared .contact-form-action .form-heading .reset__desc a { color: #ff7e00; } .form-shared .contact-form-action form .col-lg-4.button-wrap { padding-right: 6px; padding-left: 6px; text-align: center; } .form-shared .contact-form-action form .form-group .theme-btn { width: 100%; } .form-shared .contact-form-action form .form-group .theme-btn i { margin-right: 10px; } .form-shared .contact-form-action form .form-group .register-btn, .form-shared .contact-form-action form .form-group .login-btn, .form-shared .contact-form-action form .form-group .reset__btn { margin-top: 20px; width: auto; } .form-shared .contact-form-action form .form-group .facebook-btn { background-color: #3B5998; } .form-shared .contact-form-action form .form-group .twitter-btn { background-color: #31a5ff; } .form-shared .contact-form-action form .form-group .google-btn { background-color: #ff2e2e; } .form-shared .contact-form-action form .account-assist { margin-top: 15px; } .form-shared .contact-form-action form .account-assist .account__desc { font-size: 16px; color: #677286; } .form-shared .contact-form-action form .account-assist .account__desc a { color: #ff7e00; } @media only screen and (min-width: 768px) and (max-width: 991px) { .form-shared .contact-form-action form .account-assist .account__desc.text-right { text-align: left !important; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .form-shared .contact-form-action form .account-assist .account__desc.text-right { text-align: left !important; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .form-shared .contact-form-action form .account-assist .account__desc.text-right { text-align: left !important; } } .form-shared .contact-form-action form .account-assist .account__desc2 { font-size: 22px; position: relative; margin-bottom: 32px; } .form-shared .contact-form-action form .account-assist .account__desc2:before { position: absolute; content: ''; left: 0; top: 50%; width: 45%; height: 1px; background-color: #ddd; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .form-shared .contact-form-action form .account-assist .account__desc2:after { position: absolute; content: ''; right: 0; top: 50%; width: 45%; height: 1px; background-color: #ddd; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } /*==================================================== reset-area ====================================================*/ .reset-area { position: relative; overflow: hidden; z-index: 1; padding-bottom: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .reset-area { padding-bottom: 30px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .reset-area { padding-bottom: 30px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .reset-area { padding-bottom: 30px; } } .reset-area:before, .reset-area:after { position: absolute; content: ''; bottom: 0; left: 0; width: 26%; height: 33%; background-image: url("../images/dots.png"); background-position: center; background-attachment: fixed; -webkit-transform: rotate(-33deg); -moz-transform: rotate(-33deg); -ms-transform: rotate(-33deg); -o-transform: rotate(-33deg); transform: rotate(-33deg); opacity: 0.1; z-index: -1; } .reset-area:after { left: auto; right: 0; bottom: auto; top: 0; -webkit-transform: rotate(33deg); -moz-transform: rotate(33deg); -ms-transform: rotate(33deg); -o-transform: rotate(33deg); transform: rotate(33deg); } /*=== custom-checkbox ===*/ .custom-checkbox { margin-bottom: 8px; } .custom-checkbox label { color: #677286; font-size: 16px; font-weight: 500; } .custom-checkbox label a { color: #ff7e00; } .custom-checkbox label a:hover { text-decoration: underline; } .custom-checkbox .pass__desc { color: #ff7e00; font-weight: 500; } @media (max-width: 375px) { .custom-checkbox .pass__desc.float-right { float: none !important; text-align: left; display: block; margin-top: 5px; } } .custom-checkbox .pass__desc:hover { text-decoration: underline; } .custom-checkbox input[type=checkbox]:not(:checked), .custom-checkbox input[type=checkbox]:checked { position: absolute; left: -9999px; } .custom-checkbox input[type=checkbox]:not(:checked) + label, .custom-checkbox input[type=checkbox]:checked + label { position: relative; padding-left: 26px; cursor: pointer; } .custom-checkbox input[type=checkbox]:not(:checked) + label:before, .custom-checkbox input[type=checkbox]:checked + label:before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border: 1px solid #ddd; background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .custom-checkbox input[type=checkbox]:not(:checked) + label:after, .custom-checkbox input[type=checkbox]:checked + label:after { content: '\f00c'; position: absolute; top: -1px; left: 3px; font-size: 12px; color: #fff; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-family: FontAwesome,sans-serif; } .custom-checkbox input[type=checkbox]:not(:checked) + label:after { opacity: 0; visibility: hidden; } .custom-checkbox input[type=checkbox]:checked + label:after { opacity: 1; visibility: visible; } .custom-checkbox input[type=checkbox]:checked + label:before { background-color: #ff7e00; border-color: #ff7e00; } /*==================================================== map ====================================================*/ .gmaps { position: relative; padding-top: 120px; } .gmaps #map { width: 100%; height: 500px; margin-bottom: 70px; } .gmaps .map-address-box { background-color: #fff; text-align: center; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; padding: 63px 40px 32px 40px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .gmaps .map-address-box { margin-bottom: 75px; padding-right: 30px; padding-left: 30px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .gmaps .map-address-box { margin-bottom: 75px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .gmaps .map-address-box { margin-bottom: 75px; } } .gmaps .map-address-box .map-address li i { font-size: 22px; position: absolute; top: 0; left: 50%; margin-top: -35px; color: #ff7e00; width: 70px; height: 70px; line-height: 70px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); background-color: #fff; -webkit-box-shadow: 0 10px 40px rgba(82, 85, 90, 0.2); -moz-box-shadow: 0 10px 40px rgba(82, 85, 90, 0.2); box-shadow: 0 10px 40px rgba(82, 85, 90, 0.2); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .gmaps .map-address-box .map-address li .map__title { font-size: 18px; text-transform: capitalize; font-weight: 600; margin-bottom: 11px; color: #283a5e; } .gmaps .map-address-box .map-address li .map__desc { color: #677286; font-size: 16px; font-weight: 400; } @media only screen and (min-width: 768px) and (max-width: 991px) { .gmaps .map-address-box .map-address li .map__desc br { display: none; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .gmaps .map-address-box .map-address li .map__desc br { display: none; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .gmaps .map-address-box .map-address li .map__desc br { display: none; } } .gmaps .map-address-box .map-address li .map__desc a { color: #677286; } .gmaps .map-address-box .map-address li .map__desc a:hover { color: #ff7e00; } .gmaps .map-address-box:hover .map-address li i { background-color: #ff7e00; color: #fff; } /*==================================================== feature-area ====================================================*/ .feature-area { position: relative; z-index: 1; margin-top: -63px; } @media (max-width: 1366px) { .feature-area { margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .feature-area { margin-top: 30px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .feature-area { margin-top: 30px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .feature-area { margin-top: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .feature-area .feature-box .col-lg-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } .feature-area .feature-box .feature-item { position: relative; background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; border: 2px solid rgba(103, 114, 134, 0.1); padding: 45px 30px 40px 30px; } @media (max-width: 1199px) { .feature-area .feature-box .feature-item { padding-right: 20px; padding-left: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .feature-area .feature-box .feature-item { padding-right: 30px; padding-left: 30px; margin-bottom: 30px; } } @media only screen and (min-width: 481px) and (max-width: 767px) { .feature-area .feature-box .feature-item { width: 70%; margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .feature-area .feature-box .feature-item { padding-right: 30px; padding-left: 30px; margin-bottom: 30px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .feature-area .feature-box .feature-item { padding-right: 30px; padding-left: 30px; margin-bottom: 30px; } } .feature-area .feature-box .feature-item .feature__number { font-size: 40px; position: absolute; top: 30px; right: 20px; color: #283a5e; opacity: .1; } .feature-area .feature-box .feature-item .feature__icon { font-size: 35px; color: #ff7e00; margin-bottom: 30px; width: 70px; height: 70px; line-height: 70px; text-align: center; display: inline-block; position: relative; z-index: 1; background-color: rgba(255, 126, 0, 0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .feature-area .feature-box .feature-item .feature__title { font-size: 20px; font-weight: 500; margin-bottom: 16px; text-transform: capitalize; color: #283a5e; } @media (max-width: 1199px) { .feature-area .feature-box .feature-item .feature__title { font-size: 16px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .feature-area .feature-box .feature-item .feature__title { font-size: 20px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .feature-area .feature-box .feature-item .feature__title { font-size: 20px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .feature-area .feature-box .feature-item .feature__title { font-size: 20px; } } .feature-area .feature-box .feature-item .feature__desc { font-size: 16px; margin-bottom: 30px; line-height: 28px; font-weight: 400; } .feature-area .feature-box .feature-item .feature__btn { font-size: 15px; background-color: transparent; color: #283a5e; padding-top: 8px; padding-bottom: 8px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border: 2px solid rgba(103, 114, 134, 0.1); -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; text-transform: inherit; } .feature-area .feature-box .feature-item:hover .feature__icon { background-color: #ff7e00; color: #fff; } .feature-area .feature-box .feature-item:hover .feature__btn { background-color: #ff7e00; color: #fff; border-color: #ff7e00; } /*==================================================== about-area ====================================================*/ .about-area { padding-top: 120px; padding-bottom: 118px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area { padding-top: 90px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area { padding-top: 90px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area { padding-top: 90px; } } .about-area .container { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area .col-lg-6, .about-area .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area .col-lg-6, .about-area .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area .col-lg-6, .about-area .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area .about-item { margin-bottom: 80px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area .about-item { margin-bottom: 80px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area .about-item { margin-bottom: 70px; } } .about-area .about-item .sec-heading .sec__title { line-height: 60px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area .about-item .sec-heading .sec__title { line-height: 55px; } } @media (max-width: 425px) { .about-area .about-item .sec-heading .sec__title { line-height: 45px; } } .about-area .about-item .theme-btn { margin-top: 24px; } .about-area .about-img-box { position: relative; text-align: right; } .about-area .about-img-box img { width: 92%; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area .about-img-box img { width: 94%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area .about-img-box img { width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area .about-img-box img { width: 100%; } } .about-area .about-img-box img:nth-child(2) { top: auto; margin-bottom: -185px; right: auto; left: 0; bottom: 0; position: absolute; } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area .about-img-box img:nth-child(2) { position: inherit; left: auto; bottom: auto; margin-top: 30px; margin-left: 0; margin-bottom: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area .about-img-box img:nth-child(2) { position: inherit; left: auto; bottom: auto; margin-top: 30px; margin-left: 0; margin-bottom: 0; } } .about-area .about-img-box .video-play-btn { position: absolute; bottom: -130px; right: 0; background-color: #fff; text-align: center; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color: #283a5e; font-size: 18px; width: 80px; height: 80px; line-height: 80px; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; display: inline-block; } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area .about-img-box .video-play-btn { position: inherit; right: 50%; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%); bottom: 40px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area .about-img-box .video-play-btn { position: inherit; right: 50%; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%); bottom: 40px; } } .about-area .about-img-box .video-play-btn:hover { background-color: #ff7e00; color: #fff; } .about-area .about-img-box .heboo-text { position: absolute; top: 0; left: 18px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); transform-origin: left; color: rgba(103, 114, 134, 0.2); font-size: 45px; margin-top: 160px; line-height: 45px; letter-spacing: 5px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area .about-img-box .heboo-text { left: 18px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area .about-img-box .heboo-text { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); margin-top: 0; top: 15px; left: 15px; color: #677286; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area .about-img-box .heboo-text { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); margin-top: 0; top: 15px; left: 15px; color: #677286; } } .about-area .funfact-wrapper { text-align: center; margin-top: 132px; margin-bottom: 52px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area .funfact-wrapper { margin-top: 318px; margin-bottom: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area .funfact-wrapper { margin-top: 90px; margin-bottom: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area .funfact-wrapper { margin-top: 90px; margin-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area .funfact-wrapper .col-lg-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area .funfact-wrapper .col-lg-3 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area .funfact-wrapper .col-lg-3 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area .funfact-wrapper .funfact-item { margin-bottom: 60px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area .funfact-wrapper .funfact-item { margin-bottom: 60px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area .funfact-wrapper .funfact-item { margin-bottom: 60px; } } .about-area .funfact-wrapper .funfact-item .funfact-icon { position: relative; width: 60px; height: 60px; line-height: 60px; margin-left: auto; margin-right: auto; } .about-area .funfact-wrapper .funfact-item .funfact-icon .funfact__icon { font-size: 50px; display: block; } .about-area .funfact-wrapper .funfact-item .funfact-icon:before, .about-area .funfact-wrapper .funfact-item .funfact-icon:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 12px; background-color: rgba(103, 114, 134, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transform: rotate(-33deg); -moz-transform: rotate(-33deg); -ms-transform: rotate(-33deg); -o-transform: rotate(-33deg); transform: rotate(-33deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .about-area .funfact-wrapper .funfact-item .funfact-icon:after { left: auto; right: 0; top: auto; bottom: 0; } .about-area .funfact-wrapper .funfact-item .funfact__number { font-size: 50px; font-weight: 400; display: inline-block; margin-top: 48px; margin-bottom: 25px; } .about-area .funfact-wrapper .funfact-item .funfact__meta { font-size: 18px; text-transform: capitalize; font-weight: 400; margin-top:20px;} .about-area .funfact-wrapper .funfact-item:hover .funfact-icon:before, .about-area .funfact-wrapper .funfact-item:hover .funfact-icon:after { -webkit-transform: rotate(33deg); -moz-transform: rotate(33deg); -ms-transform: rotate(33deg); -o-transform: rotate(33deg); transform: rotate(33deg); } .about-area .about-sub-box { text-align: center; margin-top: 59px; position: relative; } .about-area .about-sub-box p { font-size: 16px; } .about-area .about-sub-box p .theme-btn { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background-color: transparent; border: 2px solid #eee; color: #283a5e; padding-top: 8px; padding-bottom: 8px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area .about-sub-box p .theme-btn { margin-top: 20px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area .about-sub-box p .theme-btn { margin-top: 20px; } } .about-area .about-sub-box p .theme-btn:hover { background-color: #ff7e00; color: #fff; border-color: #ff7e00; } /*==================================================== about-area2 ====================================================*/ .about-area2 { padding-top: 85px; position: relative; z-index: 1; } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area2 { padding-top: 40px; } } .about-area2 .sec-heading .sec__meta { font-size: 22px; text-transform: uppercase; font-weight: 400; } .about-area2 .funfact-wrapper { margin-top: 40px; } .about-area2 .funfact-wrapper .funfact-item .funfact-icon { z-index: 1; } .about-area2 .funfact-wrapper .funfact-item .funfact-icon:before { top: auto; left: auto; bottom: -20px; right: -20px; width: 100%; height: 100%; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: -1; } .about-area2 .funfact-wrapper .funfact-item .funfact-icon:after { display: none; } .about-area2 .funfact-wrapper .funfact-item .funfact__number { margin-top: 57px; } .about-area2 .funfact-wrapper .funfact-item:hover .funfact-icon:before { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .about-area2 .about-sub-box { margin-bottom: 120px; } .about-area2 .about-sub-box p .theme-btn { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .about-area2 .about-img-box { text-align: left; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area2 .about-img-box { margin-bottom: 120px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area2 .about-img-box { margin-bottom: 120px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area2 .about-img-box { margin-bottom: 120px; } } .about-area2 .about-img-box img { width: 220px; height: 220px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.3); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.3); box-shadow: 0 0 40px rgba(82, 85, 90, 0.3); border: 6px solid #fff; position: absolute; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area2 .about-img-box img { position: inherit; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 100%; height: auto; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area2 .about-img-box img { position: inherit; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 100%; height: auto; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area2 .about-img-box img { position: inherit; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 100%; height: auto; } } .about-area2 .about-img-box img:nth-child(2) { top: 0; bottom: auto; left: auto; right: 0; margin: 72px 85px 0 0; } @media (max-width: 1199px) { .about-area2 .about-img-box img:nth-child(2) { width: 190px; height: 190px; margin-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area2 .about-img-box img:nth-child(2) { width: 100%; height: auto; margin: 30px 0; top: auto; right: auto; position: inherit; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area2 .about-img-box img:nth-child(2) { width: 100%; height: auto; margin: 30px 0; top: auto; right: auto; position: inherit; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area2 .about-img-box img:nth-child(2) { width: 100%; height: auto; margin: 30px 0; top: auto; right: auto; position: inherit; } } .about-area2 .about-img-box img:nth-child(3) { margin-left: 65px; top: 0; left: 0; margin-top: 265px; } @media (max-width: 1199px) { .about-area2 .about-img-box img:nth-child(3) { margin-top: 235px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area2 .about-img-box img:nth-child(3) { margin-top: 0; margin-left: 0; margin-bottom: 30px; top: auto; left: auto; position: inherit; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area2 .about-img-box img:nth-child(3) { margin-top: 0; margin-left: 0; margin-bottom: 30px; top: auto; left: auto; position: inherit; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area2 .about-img-box img:nth-child(3) { margin-top: 0; margin-left: 0; margin-bottom: 30px; top: auto; left: auto; position: inherit; } } .about-area2 .about-img-box .video-play-btn { margin-top: 340px; bottom: auto; top: 0; right: 0; margin-right: 105px; padding: 0; width: 130px; height: 130px; display: inline-block; line-height: 130px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); } @media (max-width: 1199px) { .about-area2 .about-img-box .video-play-btn { margin-top: 290px; margin-right: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area2 .about-img-box .video-play-btn { position: inherit; top: auto; right: auto; margin-right: 0; margin-top: 0; display: block; width: 100%; height: auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area2 .about-img-box .video-play-btn { position: inherit; top: auto; right: auto; margin-right: 0; margin-top: 0; display: block; width: 100%; height: auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area2 .about-img-box .video-play-btn { position: inherit; top: auto; right: auto; margin-right: 0; margin-top: 0; display: block; width: 100%; height: auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @media (max-width: 320px) { .about-area2 .about-img-box .video-play-btn { line-height: 100px; } } .about-area2 .about-img-box .video-play-btn .vdo-btn { width: auto; height: auto; line-height: inherit; background-color: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; margin-bottom: 0; color: #283a5e; font-size: 22px; } .about-area2 .about-img-box .video-play-btn .vdo-btn:before { display: none; } .about-area2 .about-img-box .video-play-btn:hover { background-color: #ff7e00; border-color: #ff7e00; } .about-area2 .about-img-box .video-play-btn:hover .vdo-btn { background-color: transparent; color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area2 .about-item { margin-bottom: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area2 .about-item { margin-bottom: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area2 .about-item { margin-bottom: 0; } } .about-area2 .about-item .sec-heading .sec__meta { text-transform: capitalize; font-size: 18px; font-weight: 500; } .about-area2 .about-item .readmore__btn { border: 1px solid rgba(103, 114, 134, 0.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding-top: 15px; padding-bottom: 15px; background-color: #fff; color: #283a5e; } .about-area2 .about-item .readmore__btn:hover { border-color: #ff7e00; background-color: #ff7e00; color: #fff; } .about-area2:before, .about-area2:after { content: ''; width: 218px; height: 218px; border-radius: 50%; border: 23px solid; position: absolute; -webkit-animation: bannerImgBounce 2s ease-in-out 0s infinite alternate; animation: bannerImgBounce 2s ease-in-out 0s infinite alternate; z-index: -1; opacity: 0.5; } .about-area2:after { border-color: #f9f5fe; top: 30%; right: 8%; } .about-area2:before { border-color: #FFF3FD; bottom: 0; left: 2%; top: auto; background: transparent; } /*==================================================== about-area 3 ====================================================*/ @media only screen and (min-width: 768px) and (max-width: 991px) { .about-area3 { padding-top: 120px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .about-area3 { padding-top: 120px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .about-area3 { padding-top: 120px; } } /*==================================================== howitworks-area ====================================================*/ .howitworks-area { background-color: #f8f9fe; padding-top: 119px; padding-bottom: 120px; position: relative; z-index: 1; } .howitworks-area .sec-heading .sec__title { line-height: 60px; } @media (max-width: 768px) { .howitworks-area .sec-heading .sec__title br { display: none; } } @media (max-width: 480px) { .howitworks-area .sec-heading .sec__title { line-height: 55px; } } @media (max-width: 425px) { .howitworks-area .sec-heading .sec__title { line-height: 45px; } } .howitworks-area .hiw-content { margin-top: 28px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .howitworks-area .hiw-content .col-lg-4 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .howitworks-area .hiw-content .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .howitworks-area .hiw-content .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .howitworks-area .hiw-content .hiw-item { background-color: #fff; padding: 65px 30px 40px 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; margin-bottom: 30px; position: relative; z-index: 1; border: 1px solid rgba(103, 114, 134, 0.2); } @media only screen and (min-width: 481px) and (max-width: 767px) { .howitworks-area .hiw-content .hiw-item { width: 70%; margin-left: auto; margin-right: auto; } } .howitworks-area .hiw-content .hiw-item .flaticon__icon { width: 70px; height: 70px; margin-left: auto; margin-right: auto; color: #283a5e; line-height: 70px; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .howitworks-area .hiw-content .hiw-item .flaticon__icon span { font-size: 50px; position: absolute; top: 50%; left: 50%; line-height: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .howitworks-area .hiw-content .hiw-item .flaticon__icon:before, .howitworks-area .hiw-content .hiw-item .flaticon__icon:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 12px; background-color: rgba(103, 114, 134, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transform: rotate(33deg); -moz-transform: rotate(33deg); -ms-transform: rotate(33deg); -o-transform: rotate(33deg); transform: rotate(33deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .howitworks-area .hiw-content .hiw-item .flaticon__icon:after { left: auto; right: 0; top: auto; bottom: 0; } .howitworks-area .hiw-content .hiw-item .hiw__title { font-size: 22px; text-transform: capitalize; font-weight: 500; margin-top: 43px; margin-bottom: 25px; } .howitworks-area .hiw-content .hiw-item .hiw__title a { color: #283a5e; } .howitworks-area .hiw-content .hiw-item .hiw__desc { color: #677286; font-size: 18px; line-height: 28px; font-weight: 400; } .howitworks-area .hiw-content .hiw-item:hover { border: 1px solid rgba(103, 114, 134, 0.1); } .howitworks-area .hiw-content .hiw-item:hover .flaticon__icon span { color: #fff; } .howitworks-area .hiw-content .hiw-item:hover .flaticon__icon:before, .howitworks-area .hiw-content .hiw-item:hover .flaticon__icon:after { background-color: rgba(255, 255, 255, 0.2); } .howitworks-area .hiw-content .hiw-item:hover .hiw__title a, .howitworks-area .hiw-content .hiw-item:hover .hiw__desc { color: #fff; z-index: 1; position: relative; } .howitworks-area .hiw-content .hiw-item:hover:before, .howitworks-area .hiw-content .hiw-item:hover:after { opacity: 1; visibility: visible; top: 0; bottom: auto; height: 100%; } .howitworks-area .hiw-content .hiw-item:before, .howitworks-area .hiw-content .hiw-item:after { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: rgba(30, 22, 107, 0.8); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; opacity: 0; visibility: hidden; } .howitworks-area .hiw-content .hiw-item:after { background-image: url("../images/blog-img4.jpg"); background-position: center; background-color: transparent; z-index: -1; } .howitworks-area .button-shared-wrap { margin-top: 30px; } /*==== wave-svg-box =====*/ .wave-svg-box { width: 100%; z-index: 1; } .wave-svg-box .wave { animation: wave 9s linear; animation-iteration-count: infinite; fill: #fff; } .wave-svg-box #wave2 { animation-duration: 6s; animation-direction: reverse; opacity: .6; } .wave-svg-box #wave3 { animation-duration: 8s; opacity: .3; } .wave-svg-box .gooeff { filter: url(#goo); } .wave-svg-box .gooeff .drop { fill: #fff; xfill: #99000055; animation: drop 8.3s linear infinite normal; stroke: var(#fff); transform: translateY(25px); transform-box: fill-box; transform-origin: 50% 100%; } .wave-svg-box .gooeff .drop2 { animation-delay: 3s; animation-duration: 5s; } .wave-svg-box .gooeff .drop3 { animation-delay: -3s; animation-duration: 4.4s; } .wave-svg-box .gooeff .drop4 { animation-delay: 2.7s; } .wave-svg-box .gooeff .drop5 { animation-delay: 3.7s; animation-duration: 4.1s; } .wave-svg-box .gooeff .drop6 { animation-delay: -2.1s; animation-duration: 5.2s; } @keyframes drop { 0% { transform: translateY(25px); } 30% { transform: translateY(-10px) scale(0.1); } 30.001% { transform: translateY(25px) scale(1); } 70% { transform: translateY(25px); } 100% { transform: translateY(-10px) scale(0.1); } } @keyframes wave { to { transform: translateX(-100%); } } /*==================================================== howitworks-area2 ====================================================*/ .howitworks-area2 { position: relative; padding-bottom: 120px; background-color: transparent; z-index: 1; } .howitworks-area2 .hiw-content { padding-bottom: 119px; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-img { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); position: relative; z-index: 1; overflow: hidden; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-img .mining__img { width: 100%; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-img .video-play-btn { position: absolute; right: -150px; bottom: 40px; text-transform: capitalize; font-size: 20px; color: #fff; display: inline-block; padding: 10px 30px 10px 10px; background-color: #283a5e; -webkit-border-radius: 50px 0 0 50px; -moz-border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px; font-weight: 500; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-img .video-play-btn i { margin-right: 10px; width: 60px; height: 60px; line-height: 60px; background-color: #fff; color: #283a5e; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-img:hover .video-play-btn { background-color: #ff7e00; right: 0; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-img:hover .video-play-btn i { color: #ff7e00; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-content { padding-top: 45px; position: relative; z-index: 1; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list { padding-bottom: 28px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list { column-count: 2; text-align: left; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list { column-count: 1; text-align: left; } } .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li { display: inline-block; font-size: 16px; margin-right: 50px; color: #283a5e; } @media only screen and (min-width: 768px) and (max-width: 991px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li { margin-bottom: 25px; display: block; margin-right: 0; text-align: left; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li { display: block; margin-right: 0; margin-bottom: 25px; text-align: left; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li { display: block; margin-right: 0; margin-bottom: 25px; text-align: left; } } .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li:last-child { margin-right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li:last-child { margin-bottom: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li:last-child { margin-bottom: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li:last-child { margin-bottom: 0; } } .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li i { width: 33px; height: 33px; line-height: 34px; background-color: #283a5e; color: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right: 10px; font-size: 14px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li i { text-align: center; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li i { text-align: center; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li i { text-align: center; } } .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li i.check-one { background-color: #ff7e00; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li i.check-two { background-color: #8B62A7; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__list li i.check-three { background-color: #a98fff; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__desc { padding-right: 100px; padding-left: 100px; font-size: 16px; font-weight: 400; padding-bottom: 40px; line-height: 28px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__desc { padding-right: 0; padding-left: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__desc { padding-right: 0; padding-left: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .mining__desc { padding-right: 0; padding-left: 0; } } .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .theme-btn { border: 1px solid rgba(103, 114, 134, 0.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding-top: 15px; padding-bottom: 15px; background-color: #fff; color: #283a5e; } .howitworks-area2 .hiw-content .mining-content-wrap .mining-content .theme-btn:hover { border-color: #ff7e00; background-color: #ff7e00; color: #fff; } .howitworks-area2:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 699px; background-color: #f8f9fe; z-index: -1; } @media (max-width: 1199px) { .howitworks-area2:after { height: 677px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .howitworks-area2:after { height: 566px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .howitworks-area2:after { height: 596px; } } @media (max-width: 600px) { .howitworks-area2:after { height: 555px; } } @media (max-width: 480px) { .howitworks-area2:after { height: 555px; } } @media (max-width: 425px) { .howitworks-area2:after { height: 505px; } } @media (max-width: 375px) { .howitworks-area2:after { height: 478px; } } @media (max-width: 320px) { .howitworks-area2:after { height: 435px; } } /*==================================================== howitworks-area3 ====================================================*/ .howitworks-area3 .sec-heading { padding-right: 100px; padding-left: 100px; } @media (max-width: 1199px) { .howitworks-area3 .sec-heading { padding-right: 0; padding-left: 0; } } .howitworks-area3 .hiw-content .mining-content-wrap .mining-img .video-play-btn { right: auto; left: -148px; padding-right: 10px; padding-left: 30px; -webkit-border-radius: 0 50px 50px 0; -moz-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; } .howitworks-area3 .hiw-content .mining-content-wrap .mining-img .video-play-btn i { margin-left: 10px; margin-right: 0; } .howitworks-area3 .hiw-content .mining-content-wrap .mining-img:hover .video-play-btn { left: 0; right: auto; } .howitworks-area3 .hiw-content .mining-content-wrap .mining-content { padding-top: 40px; } .howitworks-area3 .hiw-content .mining-content-wrap .mining-content .theme-btn { color: #fff; padding-top: 14px; padding-bottom: 14px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border: none; } .howitworks-area3 .hiw-content .mining-content-wrap .mining-content .contact-btn { background-color: #39BA5E; } .howitworks-area3 .hiw-content .mining-content-wrap .mining-content .join-btn { background-color: #ff7e00; margin-left: 10px; } @media (max-width: 320px) { .howitworks-area3 .hiw-content .mining-content-wrap .mining-content .join-btn { margin-left: 0; margin-top: 10px; } } .howitworks-area3:after { background-color: #f6f8f9; height: 760px; } @media (max-width: 1199px) { .howitworks-area3:after { height: 734px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .howitworks-area3:after { height: 688px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .howitworks-area3:after { height: 597px; } } @media (max-width: 480px) { .howitworks-area3:after { height: 609px; } } @media (max-width: 425px) { .howitworks-area3:after { height: 505px; } } @media (max-width: 375px) { .howitworks-area3:after { height: 524px; } } @media (max-width: 320px) { .howitworks-area3:after { height: 479px; } } /*==================================================== service-area ====================================================*/ .service-area { background-color: transparent; padding-bottom: 90px; } .service-area .hiw-content { margin-top: 0; } .service-area .hiw-content .hiw-item { -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); } /*====================================== roadmap-area ======================================*/ .roadmap-area { padding-top: 120px; padding-bottom: 120px; background-color: #f6f8f9; } @media (max-width: 480px) { .roadmap-area { padding-bottom: 90px; } } .roadmap-area .road-map { margin-top: 26px; position: relative; z-index: 1; } .roadmap-area .road-map:after { position: absolute; content: ''; left: 50%; top: 0; width: 4px; height: 100%; background-color: #283a5e; opacity: .2; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } @media (max-width: 425px) { .roadmap-area .road-map:after { display: none; } } .roadmap-area .road-map .happening:hover .happening-period .happening__desc { background-color: #283a5e;} .roadmap-area .road-map .happening:hover .happening-period:before { background-color: #283a5e; border-color: #fff; } .roadmap-area .road-map .happening:nth-child(2n+2) .happening-period { float: right; text-align: left; padding-top: 60px; padding-right: 0; padding-left: 45px; } @media (max-width: 425px) { .roadmap-area .road-map .happening:nth-child(2n+2) .happening-period { padding-left: 0; float: none; text-align: right; } } .roadmap-area .road-map .happening:nth-child(2n+2) .happening-period:before { right: auto; left: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .roadmap-area .road-map .happening:nth-child(2n+2) .happening-detail { float: left; text-align: right; margin-top: 31px; margin-bottom: 31px; } .roadmap-area .road-map .happening:nth-child(2n+2) .happening-detail:before { left: auto; right: -12px; -webkit-transform: rotate(-179deg); -moz-transform: rotate(-179deg); -ms-transform: rotate(-179deg); -o-transform: rotate(-179deg); transform: rotate(-179deg); } @media (max-width: 425px) { .roadmap-area .road-map .happening:nth-child(2n+2) .happening-detail:before { top: -18px; right: 37px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } } .roadmap-area .road-map .happening .happening-period { width: 50%; padding: 27px 42px 0 0; float: left; vertical-align: top; text-align: right; position: relative; } @media (max-width: 425px) { .roadmap-area .road-map .happening .happening-period { width: 100%; float: none; text-align: left; padding-right: 0; } } .roadmap-area .road-map .happening .happening-period .happening__desc { font-size: 15px; line-height: 16px; font-weight: 500; color: #fff; display: inline-block; background-color: #ff7e00; padding: 8px 15px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .roadmap-area .road-map .happening .happening-period:before { position: absolute; content: ""; height: 20px; width: 20px; border: 3px solid #fff; background-color: #ff7e00; right: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } @media (max-width: 425px) { .roadmap-area .road-map .happening .happening-period:before { display: none; } } .roadmap-area .road-map .happening .happening-detail { width: 45%; float: right; padding: 27px 30px 23px 30px; position: relative; background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); } @media (max-width: 425px) { .roadmap-area .road-map .happening .happening-detail { width: 100%; float: none; text-align: left; margin-top: 30px; } } .roadmap-area .road-map .happening .happening-detail .happening__title { font-size: 22px; color: #283a5e; font-weight: 500; margin-bottom: 15px; } .roadmap-area .road-map .happening .happening-detail .happening__desc { font-size: 16px; color: #677286; line-height: 28px; font-weight: 400; margin-top:20px; } .roadmap-area .road-map .happening .happening-detail:before { position: absolute; top: 26px; left: -12px; content: ''; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 12px solid #fff; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); } @media (max-width: 425px) { .roadmap-area .road-map .happening .happening-detail:before { top: -18px; left: 37px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } } /*==================================================== team-area ====================================================*/ .team-area { padding-top: 120px; padding-bottom: 82px; position: relative; z-index: 1; } .team-area .sec-heading .sec__title { line-height: 58px; } @media (max-width: 768px) { .team-area .sec-heading .sec__title br { display: none; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .team-area .sec-heading .sec__title { line-height: 45px; } } .team-area .team-experts-wrapper { margin-top: 28px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-area .team-experts-wrapper .col-lg-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .team-area .team-experts-wrapper .col-lg-3 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .team-area .team-experts-wrapper .col-lg-3 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .team-area .team-experts-wrapper .team-item { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; margin-bottom: 60px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #eee; } @media only screen and (min-width: 481px) and (max-width: 767px) { .team-area .team-experts-wrapper .team-item { width: 70%; margin-left: auto; margin-right: auto; } } .team-area .team-experts-wrapper .team-item .team-img-box { -webkit-border-radius: 4px 4px 30px 30px; -moz-border-radius: 4px 4px 30px 30px; border-radius: 4px 4px 30px 30px; } .team-area .team-experts-wrapper .team-item .team-img-box .team__img { width: 100%; -webkit-border-radius: 4px 4px 30px 30px; -moz-border-radius: 4px 4px 30px 30px; border-radius: 4px 4px 30px 30px; } .team-area .team-experts-wrapper .team-item .team-content { padding: 30px 20px 50px 20px; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .team-area .team-experts-wrapper .team-item .team-content .team__title { font-size: 22px; font-weight: 500; color: #283a5e; text-transform: capitalize; margin-bottom: 5px; } .team-area .team-experts-wrapper .team-item .team-content .team__title a { color: #283a5e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .team-area .team-experts-wrapper .team-item .team-content .team__title a:hover { color: #ff7e00; } .team-area .team-experts-wrapper .team-item .team-content .team__meta { font-size: 16px; color: #677286; text-transform: capitalize; font-weight: 400; } .team-area .team-experts-wrapper .team-item .team-content .team__social { position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); background-color: #fff; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); display: -webkit-flex; display: -ms-flex; display: flex; padding: 10px 30px; margin-bottom: -22px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .team-area .team-experts-wrapper .team-item .team-content .team__social li { display: inline-block; font-size: 18px; margin-right: 15px; } .team-area .team-experts-wrapper .team-item .team-content .team__social li:last-child { margin-right: 0; } .team-area .team-experts-wrapper .team-item .team-content .team__social li a { color: #cccdce; display: block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .team-area .team-experts-wrapper .team-item .team-content .team__social li a i.fa-facebook-f { color: #182eb2; } .team-area .team-experts-wrapper .team-item .team-content .team__social li a i.fa-twitter { color: #31a5ff; } .team-area .team-experts-wrapper .team-item .team-content .team__social li a i.fa-linkedin-in { color: #3B5998; } .team-area .team-experts-wrapper .team-item .team-content .team__social li a i.fa-youtube { color: #ff2e2e; } .team-area .team-experts-wrapper .team-item .team-content .team__social li a:hover { color: #ff7e00; } /*==================================================== team-area2 ====================================================*/ .team-area2 { padding-bottom: 0; } .team-area2 .team-experts-wrapper { padding-bottom: 81px; } /*==================================================== team-area3 ====================================================*/ .team-area3 { padding-bottom: 0; } .team-area3 .team-experts-wrapper { margin-top: 0; } /*==================================================== team-detail-area ====================================================*/ .team-detail-area { padding-top: 119px; padding-bottom: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-detail-area { padding-bottom: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .team-detail-area { padding-bottom: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .team-detail-area { padding-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-detail-area .col-lg-8, .team-detail-area .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .team-detail-area .col-lg-8, .team-detail-area .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .team-detail-area .col-lg-8, .team-detail-area .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .team-detail-area .team-single-img { position: relative; z-index: 1; } .team-detail-area .team-single-img .div-strokes { position: absolute; top: -10px; left: 30px; width: 70px; display: inline-block; -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); -ms-transform: rotate(55deg); -o-transform: rotate(55deg); transform: rotate(55deg); } .team-detail-area .team-single-img .div-strokes .stroke__bar { background-color: #fff; height: 5px; display: block; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .team-detail-area .team-single-img .div-strokes .stroke__bar:nth-child(1), .team-detail-area .team-single-img .div-strokes .stroke__bar:nth-child(2) { margin-bottom: 10px; } .team-detail-area .team-single-img .team__img { width: 100%; -webkit-border-radius: 10px 0 10px 10px; -moz-border-radius: 10px 0 10px 10px; border-radius: 10px 0 10px 10px; } .team-detail-area .team-single-img:after { position: absolute; content: ''; background-image: url(../images/dots.png); background-size: cover; background-position: center; left: -41px; bottom: -50px; z-index: -1; height: 85%; width: 85%; opacity: 0.2; } @media (max-width: 1199px) { .team-detail-area .team-single-img:after { left: -30px; bottom: -35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-detail-area .team-single-img:after { bottom: -40px; } } @media (max-width: 480px) { .team-detail-area .team-single-img:after { bottom: -35px; left: -50px; } } @media (max-width: 425px) { .team-detail-area .team-single-img:after { bottom: -28px; left: -43px; } } @media (max-width: 320px) { .team-detail-area .team-single-img:after { left: -54px; bottom: -23px; } } .team-detail-area .team-single-content { padding-left: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-detail-area .team-single-content { margin-top: 85px; padding-left: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .team-detail-area .team-single-content { margin-top: 85px; padding-left: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .team-detail-area .team-single-content { margin-top: 85px; padding-left: 0; } } @media (max-width: 320px) { .team-detail-area .team-single-content { margin-top: 70px; } } .team-detail-area .team-single-content .ts_title { font-size: 35px; color: #283a5e; text-transform: capitalize; font-weight: 700; margin-bottom: 10px; position: relative; display: inline-block; } .team-detail-area .team-single-content .ts_title:after { position: absolute; content: ''; top: -16px; left: -25px; width: 65px; height: 65px; background-color: #283a5e; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); z-index: -1; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: .1; } .team-detail-area .team-single-content .ts__meta { font-size: 16px; color: #677286; display: block; font-weight: 400; } .team-detail-area .team-single-content .ts__meta2 { border-bottom: 1px solid rgba(103, 114, 134, 0.1); padding-bottom: 20px; } .team-detail-area .team-single-content .ts-box { margin-top: 27px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-detail-area .team-single-content .ts-box .ts-item { margin-bottom: 40px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .team-detail-area .team-single-content .ts-box .ts-item { margin-bottom: 40px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .team-detail-area .team-single-content .ts-box .ts-item { margin-bottom: 40px; } } .team-detail-area .team-single-content .ts-box .ts-item .ts__title { font-size: 22px; color: #283a5e; font-weight: 600; margin-bottom: 25px; } .team-detail-area .team-single-content .ts-box .ts-item .ts__list li { position: relative; font-size: 16px; color: #677286; font-weight: 400; margin-bottom: 10px; padding-left: 20px; } .team-detail-area .team-single-content .ts-box .ts-item .ts__list li:after { position: absolute; content: ''; top: 9px; left: 0; width: 7px; height: 7px; background-color: #ff7e00; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .team-detail-area .team-single-content .ts-box2 { margin-top: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-detail-area .team-single-content .ts-box2 { margin-top: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .team-detail-area .team-single-content .ts-box2 { margin-top: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .team-detail-area .team-single-content .ts-box2 { margin-top: 0; } } .team-detail-area .team-single-content .ts-box2 .ts-item .ts__contact { display: inline-block; } .team-detail-area .team-single-content .ts-box2 .ts-item .ts__contact li { margin-bottom: 5px; } .team-detail-area .team-single-content .ts-box2 .ts-item .ts__contact li a { color: #677286; font-size: 16px; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .team-detail-area .team-single-content .ts-box2 .ts-item .ts__contact li a:hover { color: #ff7e00; } .team-detail-area .team-single-content .ts-box2 .ts-item .ts__contact li a:hover i { background-color: #ff7e00; color: #fff; border-color: #ff7e00; } .team-detail-area .team-single-content .ts-box2 .ts-item .ts__contact li a i { font-size: 13px; margin-right: 10px; color: #677286; width: 35px; height: 35px; line-height: 35px; text-align: center; background-color: #fff; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid rgba(103, 114, 134, 0.1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .team-detail-area .team-single-content .ts-box2 .ts-item .ts__social li { display: inline-block; } .team-detail-area .team-single-content .ts-box2 .ts-item .ts__social li a { font-size: 16px; color: #677286; width: 40px; height: 40px; line-height: 40px; text-align: center; display: block; background-color: #fff; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid rgba(103, 114, 134, 0.1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .team-detail-area .team-single-content .ts-box2 .ts-item .ts__social li a:hover { background-color: #ff7e00; color: #fff; border-color: #ff7e00; } .team-detail-area .about-item .about-tab-content { margin-top: 68px; margin-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-detail-area .about-item .about-tab-content { margin-top: 19px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .team-detail-area .about-item .about-tab-content { margin-top: 19px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .team-detail-area .about-item .about-tab-content { margin-top: 19px; } } .team-detail-area .about-item .about-tab-content .nav-tabs { border-bottom: none; margin-bottom: 20px; } .team-detail-area .about-item .about-tab-content .nav-tabs li { margin-right: 3px; margin-bottom: 10px; } @media (max-width: 400px) { .team-detail-area .about-item .about-tab-content .nav-tabs li { margin-bottom: 38px; margin-right: 10px; } } .team-detail-area .about-item .about-tab-content .nav-tabs li:last-child { margin-right: 0; margin-bottom: 0; } .team-detail-area .about-item .about-tab-content .nav-tabs li a { border: none; background-color: #f4f6fb; color: #283a5e; font-size: 16px; text-transform: capitalize; padding: 12px 25px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; font-weight: 500; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .team-detail-area .about-item .about-tab-content .nav-tabs li a:hover, .team-detail-area .about-item .about-tab-content .nav-tabs li a.active { background-color: #ff7e00; color: #fff; } .team-detail-area .about-item .about-tab-content .tab-content .tab-pane { font-size: 16px; color: #677286; line-height: 30px; background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); padding: 25px 30px; border: 1px solid #eee; font-weight: 400; } .team-detail-area .about-item .blockquote-box { background-color: rgba(103, 114, 134, 0.1); border-left: 4px solid #677286; padding: 20px; margin-bottom: 40px; } .team-detail-area .about-item .about__desc { font-size: 16px; line-height: 30px; font-weight: 400; } .team-detail-area .recent-news { padding-top: 45px; } .team-detail-area .recent-news .col-lg-12 .recent__title { color: #283a5e; text-transform: capitalize; font-size: 22px; font-weight: 600; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 30px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .team-detail-area .recent-news .recent-item { margin-bottom: 20px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .team-detail-area .recent-news .recent-item { margin-bottom: 20px; } } .team-detail-area .recent-news .recent-item .recent__link { display: block; color: #283a5e; font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; margin-bottom: 6px; } .team-detail-area .recent-news .recent-item .recent__link:hover { color: #ff7e00; text-decoration: underline; } .team-detail-area .recent-news .recent-item .recent__meta { font-weight: 400; } .team-detail-area .recent-news .recent-item .recent__meta i { color: #ff7e00; font-size: 14px; } .team-detail-area .contact-form-action { margin-top: 50px; padding-left: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-detail-area .contact-form-action { margin-top: 48px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .team-detail-area .contact-form-action { margin-top: 40px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .team-detail-area .contact-form-action { margin-top: 25px; } } .team-detail-area .contact-form-action .sec-heading .sec__title { font-size: 35px; margin-bottom: 30px; } .team-detail-area .side-btn-box { margin-top: 40px; } @media (max-width: 425px) { .team-detail-area .side-btn-box { text-align: center; } } .team-detail-area .side-btn-box .theme-btn { display: block; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom: 10px; padding-top: 20px; padding-bottom: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-detail-area .side-btn-box .theme-btn { display: inline-block; margin-right: 10px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .team-detail-area .side-btn-box .theme-btn { display: inline-block; margin-right: 10px; } } @media (max-width: 480px) { .team-detail-area .side-btn-box .theme-btn { margin-right: 0; } } .team-detail-area .side-btn-box .theme-btn:nth-child(1) { background-color: #ff7e00; } .team-detail-area .side-btn-box .theme-btn i { margin-right: 5px; } /*==================================================== calculator-area ====================================================*/ .calculator-area { padding-top: 119px; padding-bottom: 118px; background-color: #f8f9fe; position: relative; z-index: 1; overflow: hidden; } .calculator-area .howitworks-shape { width: 100px; height: 100px; position: absolute; border: 3px solid #f4eefd; background-color: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .calculator-area .howitworks-shape:nth-child(1) { top: -20px; right: 90px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg); } .calculator-area .howitworks-shape:nth-child(2) { bottom: -20px; left: 2%; width: 50px; height: 50px; } .calculator-area .howitworks-shape:nth-child(3) { top: 20px; left: 20%; width: 100px; height: 100px; } .calculator-area .howitworks-shape:nth-child(4) { bottom: 40px; right: 10%; width: 50px; height: 50px; } .calculator-area .crypto-calculator { margin-top: 31px; margin-right: -15px; } .calculator-area .crypto-calculator .form-inline .input-group-box { width: 50%; float: left; font-size: 15px; color: #283a5e; font-weight: 700; padding-right: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .calculator-area .crypto-calculator .form-inline .input-group-box { width: 100%; float: none; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .calculator-area .crypto-calculator .form-inline .input-group-box { width: 100%; float: none; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .calculator-area .crypto-calculator .form-inline .input-group-box { width: 100%; float: none; } } .calculator-area .crypto-calculator .form-inline .input-group-box .cyptocurrency, .calculator-area .crypto-calculator .form-inline .input-group-box .decrement { margin-bottom: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .calculator-area .crypto-calculator .form-inline .input-group-box .decrement { margin-top: 15px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .calculator-area .crypto-calculator .form-inline .input-group-box .decrement { margin-top: 15px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .calculator-area .crypto-calculator .form-inline .input-group-box .decrement { margin-top: 15px; } } .calculator-area .crypto-calculator .form-inline .input-group-box .form-control { width: 100%; padding: 16px 20px; line-height: inherit; height: auto; border: 1px solid rgba(40, 58, 94, 0.1); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; font-size: 18px; color: #283a5e; font-weight: 500; -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; } .calculator-area .crypto-calculator .form-inline .input-group-box .form-control:focus { -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; border-color: rgba(40, 58, 94, 0.2); } .calculator-area .nice-select .list { height: 114px; } /*==================================================== chart-area ====================================================*/ .chart-area { padding-top: 119px; padding-bottom: 116px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .chart-area .chart-wrapper .col-lg-6, .chart-area .chart-wrapper .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .chart-area .chart-wrapper .col-lg-6, .chart-area .chart-wrapper .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .chart-area .chart-wrapper .col-lg-6, .chart-area .chart-wrapper .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .chart-area .chart-wrapper .chart-item { margin-bottom: 100px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .chart-area .chart-wrapper .chart-item { margin-bottom: 100px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .chart-area .chart-wrapper .chart-item { margin-bottom: 100px; } } @media (max-width: 320px) { .chart-area .chart-wrapper .chart-item { margin-bottom: 80px; } } .chart-area .chart-wrapper .chart-item .sec-heading .sec__desc { margin-bottom: 40px; } .chart-area .chart-wrapper .chart-item .sec-heading .sec__list { margin-bottom: 45px; } .chart-area .chart-wrapper .chart-item .sec-heading .sec__list li { font-size: 18px; color: #677286; padding-bottom: 24px; font-weight: 500; } .chart-area .chart-wrapper .chart-item .sec-heading .sec__list li:last-child { padding-bottom: 0; } .chart-area .chart-wrapper .chart-item .sec-heading .sec__list li .fa-check { color: #fff; width: 27px; height: 27px; line-height: 28px; text-align: center; font-size: 13px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right: 10px; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); box-shadow: 0 0 40px rgba(82, 85, 90, 0.2); } .chart-area .chart-wrapper .chart-item .sec-heading .sec__list li .check-one { background-color: #ff7e00; } .chart-area .chart-wrapper .chart-item .sec-heading .sec__list li .check-two { background-color: #4e3a9d; } .chart-area .chart-wrapper .chart-item .sec-heading .sec__list li .check-three { background-color: #283a5e; } .chart-area .chart-wrapper .chart-img { text-align: center; } @media (max-width: 600px) { .chart-area .chart-wrapper .chart-img { margin-bottom: 30px; } } @media (max-width: 320px) { .chart-area .chart-wrapper .chart-img { margin-bottom: 0; } } .chart-area .chart-wrapper .line-legend { padding-top: 25px; padding-left: 18px; } .chart-area .chart-wrapper .line-legend .chart-legend li { display: inline-block; font-size: 16px; text-transform: capitalize; position: relative; color: #283a5e; margin-left: 28px; } .chart-area .chart-wrapper .line-legend .chart-legend li span { width: 15px; height: 15px; display: inline-block; background-color: #4e3a9d; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; left: -22px; top: 3px; } .chart-area .chart-wrapper .line-legend .chart-legend li span.legend__two { background-color: #ff7e00; } .chart-area .chart-wrapper2 { margin-top: 110px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .chart-area .chart-wrapper2 .chart-item { margin-bottom: 0; margin-top: 115px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .chart-area .chart-wrapper2 .chart-item { margin-bottom: 0; margin-top: 115px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .chart-area .chart-wrapper2 .chart-item { margin-bottom: 0; margin-top: 115px; } } .chart-area .chart-wrapper2 .sec-heading .sec__title { line-height: 65px; } @media (max-width: 425px) { .chart-area .chart-wrapper2 .sec-heading .sec__title { line-height: 45px; } } .chart-area .chart-wrapper2 .line-legend { text-align: center; padding-left: 0; } .chart-area .chart-wrapper2 .line-legend .chart-legend li span.legend__one { background-color: #ff7e00; } .chart-area .chart-wrapper2 .line-legend .chart-legend li span.legend__two { background-color: #4e3a9d; } .chart-area .chart-wrapper2 .line-legend .chart-legend li span.legend__three { background-color: #283a5e; } /*==================================================== clientlogo-area ====================================================*/ .clientlogo-area { background-color: #f6f8f9; padding-top: 60px; padding-bottom: 51px; text-align: center; position: relative; } .clientlogo-area .client-logo .owl-item .client-logo-item { display: inline-block; } .clientlogo-area .client-logo .owl-item .client-logo-item img { width: 160px; } /*==================================================== clientlogo-area 2 ====================================================*/ .clientlogo-area2 { background-color: transparent; padding-top: 0; padding-bottom: 83px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .clientlogo-area2 .col-lg-5, .clientlogo-area2 .col-lg-7 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .clientlogo-area2 .col-lg-5, .clientlogo-area2 .col-lg-7 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .clientlogo-area2 .col-lg-5, .clientlogo-area2 .col-lg-7 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .clientlogo-area2 .sec-heading { text-align: left; } .clientlogo-area2 .client-logo2 { display: flex; align-items: center; justify-content: center; height: 195px; text-align: right; } @media only screen and (min-width: 768px) and (max-width: 991px) { .clientlogo-area2 .client-logo2 { display: block; height: auto; text-align: left; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .clientlogo-area2 .client-logo2 { display: block; height: auto; text-align: left; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .clientlogo-area2 .client-logo2 { display: block; height: auto; text-align: left; } } .clientlogo-area2 .client-logo2 .owl-item .client-logo-item { display: inline-block; } .clientlogo-area2 .client-logo2 .owl-item .client-logo-item img { width: 100%; } /*==================================================== cta-area ====================================================*/ .cta-area { padding-top: 110px; padding-bottom: 90px; position: relative; background-image: url("../images/blog-img4.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; z-index: 1; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-area { padding-bottom: 110px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .cta-area { padding-bottom: 110px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .cta-area { padding-bottom: 110px; } } .cta-area .box-icons { position: absolute; left: 80px; bottom: 40px; } .cta-area .box-icons div { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.1); position: absolute; } .cta-area .box-icons .box-one { left: -40px; bottom: 60px; width: 15px; height: 15px; border: 3px solid rgba(255, 255, 255, 0.1); } .cta-area .box-icons .box-two { left: 0; top: -30px; width: 46px; height: 46px; } .cta-area .box-icons .box-three { left: 60px; top: -180px; width: 97px; height: 97px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-area .col-lg-8, .cta-area .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .cta-area .col-lg-8, .cta-area .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .cta-area .col-lg-8, .cta-area .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-area .sec-heading { text-align: center; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .cta-area .sec-heading { text-align: center; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .cta-area .sec-heading { text-align: center; } } .cta-area .sec-heading .heading-circle { border-color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-area .sec-heading .heading-circle { margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .cta-area .sec-heading .heading-circle { margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .cta-area .sec-heading .heading-circle { margin-left: auto; margin-right: auto; } } .cta-area .sec-heading .heading-circle:before { background-color: #fff; } .cta-area .sec-heading .sec__title, .cta-area .sec-heading .sec__desc { color: #fff; } .cta-area .sec-heading .sec__title { margin-bottom: 15px; } @media (max-width: 1199px) { .cta-area .sec-heading .sec__title { margin-bottom: 10px; } } .cta-area .sec-heading .sec__desc { font-size: 18px; } .cta-area .cta-btn-box { position: relative; padding-top: 40px; text-align: right; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-area .cta-btn-box { text-align: center; padding-top: 30px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .cta-area .cta-btn-box { text-align: center; padding-top: 30px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .cta-area .cta-btn-box { text-align: center; padding-top: 30px; } } .cta-area .cta-btn-box .box-icons2 { position: absolute; right: -235px; top: -87px; } @media (max-width: 1366px) { .cta-area .cta-btn-box .box-icons2 { right: 50px; } } @media (max-width: 1280px) { .cta-area .cta-btn-box .box-icons2 { right: 90px; } } @media (max-width: 1199px) { .cta-area .cta-btn-box .box-icons2 { right: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-area .cta-btn-box .box-icons2 { top: -220px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .cta-area .cta-btn-box .box-icons2 { top: -280px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .cta-area .cta-btn-box .box-icons2 { top: -280px; } } .cta-area .cta-btn-box .box-icons2 div { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.1); position: absolute; } .cta-area .cta-btn-box .box-icons2 .box-one { right: -10px; top: 0; width: 15px; height: 15px; border: 3px solid rgba(255, 255, 255, 0.1); } .cta-area .cta-btn-box .box-icons2 .box-two { left: -70px; top: 30px; width: 46px; height: 46px; } .cta-area .cta-btn-box .box-icons2 .box-three { left: 10px; top: 100px; width: 97px; height: 97px; } .cta-area .cta-btn-box .theme-btn { background-color: #fff; color: #283a5e; } .cta-area .cta-btn-box .theme-btn:hover { background-color: #ff7e00; color: #fff; } .cta-area:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: #283a5e; z-index: -1; opacity: 0.97; } /*==================================================== cta-area2 ====================================================*/ .cta-area2:after { background-color: #fff; } /*==================================================== package-area ====================================================*/ .package-area { padding-top: 119px; position: relative; z-index: 1; } .package-area .package-tab-content { margin-top: 44px; padding-bottom: 90px; } .package-area .package-tab-content .nav-tabs { border: none; } .package-area .package-tab-content .nav-tabs li { float: none; display: inline-block; margin-bottom: 0; margin-right: 6px; } .package-area .package-tab-content .nav-tabs li:last-child { margin-right: 0; } .package-area .package-tab-content .nav-tabs li a { background-color: #fff; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); border: 1px solid #eee; color: #283a5e; font-size: 16px; text-transform: capitalize; padding: 12px 25px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; font-weight: 500; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .package-area .package-tab-content .nav-tabs li a:hover, .package-area .package-tab-content .nav-tabs li a.active { background-color: #ff7e00; color: #fff; border-color: #ff7e00; } .package-area .package-tab-content .tab-content { margin-top: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .package-area .package-tab-content .tab-content .col-lg-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .package-area .package-tab-content .tab-content .col-lg-3 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .package-area .package-tab-content .tab-content .col-lg-3 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .package-area .package-tab-content .tab-content .package-content { background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); padding: 45px 20px; position: relative; margin-bottom: 30px; } @media only screen and (min-width: 481px) and (max-width: 767px) { .package-area .package-tab-content .tab-content .package-content { width: 70%; margin-left: auto; margin-right: auto; } } .package-area .package-tab-content .tab-content .package-content .package__title { font-size: 20px; text-transform: uppercase; color: #283a5e; font-weight: 600; } .package-area .package-tab-content .tab-content .package-content .package__title span { display: block; font-size: 20px; text-transform: capitalize; margin-top: 20px; } .package-area .package-tab-content .tab-content .package-content .price__box { margin-top: 40px; margin-bottom: 45px; } .package-area .package-tab-content .tab-content .package-content .price__box span { font-size: 40px; font-weight: 600; color: #ff7e00; position: relative; letter-spacing: -1px; margin-top: 50px; } .package-area .package-tab-content .tab-content .package-content .price__box span.currency { font-size: 35px; } .package-area .package-tab-content .tab-content .package-content .order__btn { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; padding: 10px 24px; background-color: #fff; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); border: 1px solid #eee; color: #283a5e; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .package-area .package-tab-content .tab-content .package-content .order__btn .fa-shopping-cart { padding-right: 3px; font-size: 13px; } .package-area .package-tab-content .tab-content .package-content:hover { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .package-area .package-tab-content .tab-content .package-content:hover:after { height: 100%; } .package-area .package-tab-content .tab-content .package-content:hover .order__btn { background-color: #ff7e00; color: #fff; border: 1px solid #ff7e00; } .package-area .package-tab-content .tab-content .package-content:after { position: absolute; content: ''; top: 0; left: 0; width: 4px; height: 8%; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; background-color: #ff7e00; } /*==================================================== package-area 2 ====================================================*/ .package-area2 .package-tab-content { margin-top: 14px; } /*==================================================== error-area ====================================================*/ .error-area { padding-top: 230px; margin-bottom: 50px; position: relative; z-index: 1; overflow: hidden; } @media (max-width: 1199px) { .error-area { margin-bottom: 0; } } @media (max-width: 375px) { .error-area { padding-top: 180px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .error-area .col-lg-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .error-area .col-lg-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .error-area .col-lg-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .error-area .error-content img { width: 100%; } .error-area .error-content .error-title { font-size: 35px; color: #283a5e; font-weight: 700; margin-top: 40px; margin-bottom: 30px; } @media (max-width: 375px) { .error-area .error-content .error-title { line-height: 50px; margin-bottom: 20px; } } .error-area .error-content .error-desc { font-size: 18px; color: #677286; line-height: 32px; margin-bottom: 32px; font-weight: 400; } @media only screen and (min-width: 768px) and (max-width: 991px) { .error-area .error-content .error-desc br { display: none; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .error-area .error-content .error-desc br { display: none; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .error-area .error-content .error-desc br { display: none; } } .error-area .error-content .error-desc a { color: #283a5e; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .error-area .error-content .error-desc a:after { position: absolute; content: ''; left: 0; bottom: -4px; width: 100%; height: 1px; background-color: #ff7e00; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 0; visibility: hidden; } .error-area .error-content .error-desc a:hover { color: #ff7e00; } .error-area .error-content .error-desc a:hover:after { width: 100%; bottom: 1px; opacity: 1; visibility: visible; } .error-area .error-content .or-box { margin-bottom: 54px; } .error-area .error-content .or-box span { color: #283a5e; font-size: 35px; width: 60px; height: 60px; line-height: 60px; background-color: #fceaee; opacity: .5; display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .error-area:before, .error-area:after { position: absolute; content: ''; top: 0; left: 0; width: 26%; height: 34%; background-image: url("../images/dots.png"); background-position: center; background-attachment: fixed; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); opacity: 0.1; } .error-area:after { top: auto; left: auto; right: 0; bottom: 0; } /*==================================================== marketprice-area ====================================================*/ .marketprice-area { padding-top: 119px; padding-bottom: 119px; } .marketprice-area .coinprice-table { margin-top: 32px; } .marketprice-area .coinprice-table .table-bordered { border: 1px solid #eee; } .marketprice-area .coinprice-table table { margin-bottom: 0; border-top: 0; border-left: 0; border-right: 0; } .marketprice-area .coinprice-table table thead { background-color: #283a5e; } .marketprice-area .coinprice-table table thead tr th { text-transform: capitalize; font-size: 22px; padding: 18px 20px; vertical-align: middle; position: relative; border-bottom-width: 0; border-color: #677286; color: #fff; font-weight: 500; } .marketprice-area .coinprice-table table tbody tr:hover { background-color: #fafafa; } .marketprice-area .coinprice-table table tbody tr td .inner-table tbody tr td { border: none; padding: 0; } .marketprice-area .coinprice-table table tbody tr td .inner-table tbody tr td img { width: 26px; margin-right: 10px; } .marketprice-area .coinprice-table table tbody tr td .inner-table tbody tr td .currency__title { color: #283a5e; font-size: 18px; font-weight: 500; } .marketprice-area .coinprice-table .table-bordered > tbody > tr > td, .marketprice-area .coinprice-table .table-bordered > tbody > tr > th { border-bottom-width: 0; border-color: #eee; vertical-align: middle; padding: 18px 20px; font-size: 16px; color: #677286; text-transform: capitalize; } /*==================================================== testimonial-area ====================================================*/ .testimonial-area { position: relative; padding-top: 119px; padding-bottom: 112px; z-index: 1; background-color: #f6f8f9; } .testimonial-area .random-img { width: 95px; height: 95px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; top: 0; left: 0; -webkit-box-shadow: 0 10px 30px rgba(255, 126, 0, 0.1); -moz-box-shadow: 0 10px 30px rgba(255, 126, 0, 0.1); box-shadow: 0 10px 30px rgba(255, 126, 0, 0.1); border: 5px solid #fff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial-area .random-img { display: none; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .testimonial-area .random-img { display: none; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .testimonial-area .random-img { display: none; } } .testimonial-area .random-img:nth-child(1) { top: 10%; left: -20px; } @media (max-width: 600px) { .testimonial-area .random-img:nth-child(1) { display: none; } } .testimonial-area .random-img:nth-child(2) { top: 32%; left: 15%; } .testimonial-area .random-img:nth-child(3) { top: 60%; left: 6%; } .testimonial-area .random-img:nth-child(4) { top: auto; bottom: 8%; left: 15%; width: 70px; height: 70px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .testimonial-area .random-img:nth-child(4) { left: 6%; } } .testimonial-area .random-img:nth-child(5) { top: 20%; left: auto; right: 7%; } @media (max-width: 600px) { .testimonial-area .random-img:nth-child(5) { display: none; } } .testimonial-area .random-img:nth-child(6) { top: 53%; left: auto; right: 20%; } .testimonial-area .random-img:nth-child(7) { top: auto; left: auto; bottom: 20%; right: 4%; } .testimonial-area .client-testimonial { margin-top: 27px; position: relative; } .testimonial-area .client-testimonial:after { position: absolute; content: "\f10e"; top: 50%; left: 80px; font-family: "FontAwesome"; font-size: 120px; color: #283a5e; opacity: .1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } .testimonial-area .client-testimonial .owl-stage-outer { padding: 30px 0; } .testimonial-area .client-testimonial .testimonial-item .testi__img { width: 130px; height: 130px; position: relative; margin-left: auto; margin-right: auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); background-color: #fafafa; } .testimonial-area .client-testimonial .testimonial-item .testi__img .testi__img-cercle { position: absolute; width: 8px; height: 8px; top: 22px; right: 19px; background-color: #283a5e; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: .1; } .testimonial-area .client-testimonial .testimonial-item .testi__img img { width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .testimonial-area .client-testimonial .testimonial-item .testi__img:after { position: absolute; content: ""; top: 5px; right: 1px; width: 16px; height: 16px; background-color: #283a5e; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: .2; } .testimonial-area .client-testimonial .testimonial-item .testi__img:before { position: absolute; content: ""; top: -25px; right: -32px; width: 32px; height: 32px; background-color: #283a5e; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; opacity: .3; } .testimonial-area .client-testimonial .testimonial-item .testi__desc { font-size: 18px; color: #677286; line-height: 33px; margin-top: 25px; margin-bottom: 25px; font-weight: 500; font-style: italic; } .testimonial-area .client-testimonial .testimonial-item .tesi__title { font-size: 20px; font-weight: 500; margin-bottom: 9px; color: #283a5e; } .testimonial-area .client-testimonial .testimonial-item .testi__meta { font-size: 15px; text-transform: capitalize; font-weight: 400; color: #677286; background-color: rgba(103, 114, 134, 0.1); display: inline-block; padding: 4px 20px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .testimonial-area .client-testimonial .owl-dots { width: 100%; } .testimonial-area .client-testimonial .owl-dots div { width: 15px; height: 15px; border: 5px solid #ddd; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; display: inline-block; margin: 0 3px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .testimonial-area .client-testimonial .owl-dots div:hover, .testimonial-area .client-testimonial .owl-dots div.active { background-color: #fff; border-color: #ff7e00; } /*==================================================== testimonial-area 2 ====================================================*/ .testimonial-area2 { padding-bottom: 110px; } /*==================================================== blog-area ====================================================*/ .blog-area { padding-top: 119px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-area .col-lg-8 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-area .col-lg-8 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-area .sec-heading { text-align: center; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-area .sec-heading { text-align: center; } } .blog-area .sec-heading .sec__title { line-height: 60px; } @media (max-width: 425px) { .blog-area .sec-heading .sec__title { line-height: 45px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-area .sec-heading .heading-circle { margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-area .sec-heading .heading-circle { margin-left: auto; margin-right: auto; } } .blog-area .blog-btn { margin-top: 132px; text-align: right; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-area .blog-btn { text-align: center; margin-top: 28px; margin-bottom: 32px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-area .blog-btn { text-align: center; margin-top: 28px; margin-bottom: 32px; } } .blog-area .blog-post-wrapper { margin-top: 28px; padding-bottom: 90px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-area .blog-post-wrapper .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .blog-area .blog-post-wrapper .blog-post-item { -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; margin-bottom: 30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #fff; } @media only screen and (min-width: 481px) and (max-width: 767px) { .blog-area .blog-post-wrapper .blog-post-item { width: 70%; margin-left: auto; margin-right: auto; } } .blog-area .blog-post-wrapper .blog-post-item .blog-post-img { position: relative; overflow: hidden; -webkit-border-radius: 4px 4px 0 30px; -moz-border-radius: 4px 4px 0 30px; border-radius: 4px 4px 0 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-img .blog__img { width: 100%; -webkit-border-radius: 4px 4px 0 30px; -moz-border-radius: 4px 4px 0 30px; border-radius: 4px 4px 0 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-img .blog__date { position: absolute; left: 20px; top: 20px; padding: 5px 15px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background-color: #fff; color: #283a5e; font-size: 14px; font-weight: 500; text-transform: capitalize; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog-title { padding: 29px 28px 29px 28px; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog-title .blog__title { font-size: 20px; color: #283a5e; font-weight: 700; line-height: 28px; display: block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog-title .blog__title:hover { color: #ff7e00; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog-title .blog__title { font-size: 22px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog-title .blog__title { font-size: 22px; } } .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog-title .blog__desc { font-size: 16px; font-weight: 400; margin-top: 20px; line-height: 28px; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__panel { padding: 26px 28px; display: flex; align-items: center; position: relative; overflow: hidden; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__panel:before { position: absolute; content: ''; top: 0; left: 28px; width: 50px; height: 2px; background-color: #ff7e00; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__panel li { flex: 1; text-transform: capitalize; color: #677286; font-weight: 400; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__panel li a { color: #283a5e; font-size: 14px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__panel li a:hover { color: #ff7e00; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__panel li a.blog-admin-btn { float: right; background-color: #fff; border: 1px solid #eee; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); padding: 6px 12px; text-align: center; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; color: #677286; } .blog-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__panel li a.blog-admin-btn:hover { background-color: #ff7e00; border-color: #ff7e00; color: #fff; } .blog-area .blog-post-wrapper .blog-post-item:hover .blog-post-img { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .blog-area .blog-post-wrapper .blog-post-item:hover .blog-post-img .blog__img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .blog-area .blog-post-wrapper .blog-post-item:hover .blog-post-img .blog__date { background-color: #ff7e00; color: #fff; } .blog-area .blog-post-wrapper .blog-post-item:hover .blog-post-body .blog__panel:before { width: 80px; } /*==================================================== blog-area2 ====================================================*/ .blog-area2 { background-color: #f6f8f9; padding-top: 119px; padding-bottom: 290px; position: relative; z-index: 1; } .blog-area2 .blog-post-wrapper { padding-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-area2 .blog-post-wrapper .service-wrap .blog-post-item { width: 70%; margin-left: auto; margin-right: auto; } } .blog-area2 .blog-post-wrapper .service-wrap .owl-dots { margin-top: 28px; width: 100%; text-align: center; } .blog-area2 .blog-post-wrapper .service-wrap .owl-dots div { width: 15px; height: 15px; border: 5px solid #ddd; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; display: inline-block; margin: 0 3px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .blog-area2 .blog-post-wrapper .service-wrap .owl-dots div:hover, .blog-area2 .blog-post-wrapper .service-wrap .owl-dots div.active { background-color: #fff; border-color: #ff7e00; } .blog-area2 .blog-post-wrapper .blog-post-item .blog-post-body { position: relative; z-index: 1; } .blog-area2 .blog-post-wrapper .blog-post-item .blog-post-body .blog__panel { padding-top: 36px; padding-bottom: 35px; } .blog-area2 .blog-post-wrapper .blog-post-item .blog-post-body .blog__panel li a { color: #677286; font-size: 15px; font-weight: 400; border: 1px solid rgba(103, 114, 134, 0.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; display: inline-block; padding: 8px 20px; } .blog-area2 .blog-post-wrapper .blog-post-item .blog-post-body .blog__panel li a:hover { background-color: #ff7e00; border-color: #ff7e00; color: #fff; } .blog-area2 .blog-post-wrapper .blog-post-item .blog-post-body:after { position: absolute; content: ''; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; opacity: 0; visibility: hidden; background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e1e0e3' fill-opacity='0.44'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .blog-area2 .blog-post-wrapper .blog-post-item:hover .blog-post-body:after { opacity: 0.6; visibility: visible; } .blog-area2 .blog-svg-shape { fill: #fff; stroke: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 256px; z-index: -1; } /*==================================================== blog-area3 ====================================================*/ .blog-area3 .blog-btn { margin-top: 128px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-area3 .blog-btn { margin-top: 26px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-area3 .blog-btn { margin-top: 26px; } } .blog-area3 .blog-btn .theme-btn { border: 1px solid rgba(103, 114, 134, 0.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding-top: 15px; padding-bottom: 15px; background-color: #fff; color: #283a5e; } .blog-area3 .blog-btn .theme-btn:hover { border-color: #ff7e00; background-color: #ff7e00; color: #fff; } /*==================================================== blog-grid ====================================================*/ .blog-grid .blog-post-wrapper, .blog-single-area .blog-post-wrapper { margin-top: 0; } /*==================================================== blog-grid ====================================================*/ .blog-grid { padding-bottom: 50px; } @media (max-width: 1199px) { .blog-grid { padding-bottom: 0; } } .blog-grid .blog-post-wrapper { padding-bottom: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-grid .blog-post-wrapper .col-lg-4 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-grid .blog-post-wrapper .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-grid .blog-post-wrapper .col-lg-4 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } /*==================================================== pagination-wrap ====================================================*/ .pagination-wrap .pagination { margin: 0; } .pagination-wrap .pagination li { margin: 0 1px; display: inline-block; } @media (max-width: 320px) { .pagination-wrap .pagination li { margin: 0 -1px; } } .pagination-wrap .pagination li a { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-left: 0; font-size: 16px; padding: 0; width: 50px; height: 50px; line-height: 50px; color: #677286; border-color: rgba(103, 114, 134, 0.2); background-color: #fff; -webkit-box-shadow: 0 15px 40px rgba(82, 85, 90, 0.2); -moz-box-shadow: 0 15px 40px rgba(82, 85, 90, 0.2); box-shadow: 0 15px 40px rgba(82, 85, 90, 0.2); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } @media (max-width: 320px) { .pagination-wrap .pagination li a { width: 40px; height: 40px; line-height: 40px; } } .pagination-wrap .pagination li:hover a, .pagination-wrap .pagination li.active a { background-color: #ff7e00; border-color: #ff7e00; color: #fff; } .pagination-wrap .pagination li:first-child a, .pagination-wrap .pagination li:last-child a { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } /*==================================================== blog-single-area ====================================================*/ .blog-single-area .blog-post-wrapper { padding-bottom: 0; } .blog-single-area .blog-post-wrapper .blog-post-item { -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; margin-bottom: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background-color: transparent; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item { width: auto; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-img { -webkit-border-radius: 4px 4px 30px 0; -moz-border-radius: 4px 4px 30px 0; border-radius: 4px 4px 30px 0; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-img .blog__img { -webkit-border-radius: 4px 4px 30px 0; -moz-border-radius: 4px 4px 30px 0; border-radius: 4px 4px 30px 0; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body { padding-top: 30px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .post__meta { display: flex; margin-bottom: 24px; border-bottom: 1px solid #eee; padding-bottom: 10px; } @media (max-width: 480px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .post__meta { display: block; column-count: 2; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .post__meta li { padding-right: 8px; } @media (max-width: 480px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .post__meta li { padding-right: 0; padding-bottom: 8px; display: inline-block; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .post__meta li a { color: #677286; text-transform: capitalize; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .post__meta li a:hover { color: #ff7e00; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .post__meta li i { font-size: 13px; margin-right: 2px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__title { color: #283a5e; font-size: 35px; font-weight: 600; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; line-height: 45px; display: block; margin-bottom: 25px; padding-bottom: 20px; position: relative; } @media (max-width: 480px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__title { font-size: 30px; line-height: 38px; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__title:after { position: absolute; content: ''; bottom: 0; left: 0; width: 60px; height: 2px; background-color: #ff7e00; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__title:hover { color: #ff7e00; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__title:hover:after { width: 90px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__desc { font-size: 16px; font-weight: 400; line-height: 30px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blog__desc + .blog__desc { margin-top: 20px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blockquote-box { background-color: rgba(103, 114, 134, 0.1); border-left-color: #677286; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-top: 32px; margin-bottom: 32px; padding: 35px; font-size: 18px; line-height: 30px; text-align: center; position: relative; background-image: url("../images/blog-img5.jpg"); background-size: cover; background-position: center; z-index: 1; color: #fff; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blockquote-box h4 { font-size: 20px; margin-bottom: 25px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blockquote-box h4 span { display: block; opacity: 0.8; font-size: 16px; margin-top: 8px; font-weight: 400; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blockquote-box p { font-weight: 400; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blockquote-box i { font-size: 140px; position: absolute; right: 30px; bottom: 15px; z-index: -2; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .blockquote-box:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(40, 58, 94, 0.9); z-index: -1; -webkit-border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item { display: -webkit-flex; display: -ms-flex; display: flex; align-items: center; padding-top: 35px; padding-bottom: 35px; margin-top: 35px; margin-bottom: 40px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item { display: block; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item { display: block; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul { display: -webkit-flex; display: -ms-flex; display: flex; align-items: center; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul { margin-top: 20px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul { margin-top: 20px; } } @media (max-width: 320px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul { display: block; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul li { margin-right: 5px; margin-bottom: 5px; font-size: 16px; text-transform: capitalize; } @media (max-width: 320px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul li { display: inline-block; margin-bottom: 15px; } } @media (max-width: 320px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul li:last-child { margin-bottom: 0; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul li span { color: #283a5e; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul li a { background-color: #283a5e; color: #fff; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; padding: 5px 20px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-weight: 400; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul li a:hover { background-color: #ff7e00; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul li:last-child { margin-right: 5px; margin-bottom: 5px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul.social__links { margin-left: auto; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .tags-item ul.social__links li a { padding: 0; width: 35px; height: 35px; line-height: 35px; text-align: center; display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; font-size: 15px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-title { font-size: 35px; color: #283a5e; font-weight: 600; } @media (max-width: 600px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-title { text-align: center; } } @media (max-width: 320px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-title { font-size: 30px; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list { margin-top: 42px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment { display: -webkit-flex; display: -ms-flex; display: flex; margin-bottom: 50px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment { display: block; text-align: center; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment { display: block; text-align: center; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .avatar__img { width: 100px; height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-right: 25px; flex-shrink: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .avatar__img { margin-right: 0; margin-bottom: 20px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .avatar__img { margin-right: 0; margin-bottom: 20px; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .meta-data .comment__author { font-size: 18px; text-transform: capitalize; color: #283a5e; margin-bottom: 12px; display: inline-block; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .meta-data .comment__author { display: block; margin-bottom: 1px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .meta-data .comment__author { display: block; margin-bottom: 1px; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .meta-data .comment__date { font-weight: 400; float: right; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .meta-data .comment__date { float: none; display: block; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .meta-data .comment__date { float: none; display: block; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-content { font-size: 16px; margin-bottom: 25px; font-weight: 400; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-content { margin-top: 15px; margin-bottom: 20px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-content { margin-top: 15px; margin-bottom: 20px; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply { display: -webkit-flex; display: -ms-flex; display: flex; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply { display: block; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply { display: block; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply .comment__btn { display: block; padding: 6px 20px; background-color: rgba(128, 137, 150, 0.1); color: #283a5e; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; font-weight: 400; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply .comment__btn { display: inline-block; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply .comment__btn { display: inline-block; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply .comment__btn:hover { background-color: #ff7e00; color: #fff; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply .helpful__box { margin-left: auto; font-weight: 400; } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply .helpful__box { margin-top: 20px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply .helpful__box { margin-top: 20px; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply .helpful__box span { border: 1px solid rgba(128, 137, 150, 0.4); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 4px 12px; color: #677286; margin-left: 3px; margin-right: 3px; cursor: pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; text-transform: capitalize; } @media (max-width: 320px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply .helpful__box span { margin-top: 10px; display: block; width: 80px; margin-left: auto; margin-right: auto; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply .helpful__box span i { font-size: 13px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comment .comment-body .comment-reply .helpful__box span:hover { background-color: rgba(128, 137, 150, 0.1); color: #283a5e; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comments-reply { margin-left: 124px; } @media (max-width: 1199px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comments-reply { margin-left: 50px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comments-reply { margin-left: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .comments-list li .comments-reply { margin-left: 0; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .contact-form-action { padding-left: 0; padding-top: 45px; border-top: 1px solid #eee; } @media (max-width: 600px) { .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .contact-form-action .leave-title { text-align: inherit; } } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .contact-form-action .leave-desc { font-weight: 400; font-size: 16px; margin-top: 4px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .contact-form-action form { margin-top: 30px; } .blog-single-area .blog-post-wrapper .blog-post-item .blog-post-body .comments-wrapper .contact-form-action form .custom-checkbox label { font-weight: 400; } .blog-single-area .blog-post-wrapper .blog-post-item:hover { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } /*==================================================== app-area ====================================================*/ .app-area { padding-top: 119px; padding-bottom: 119px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .app-area .col-lg-6, .app-area .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .app-area .col-lg-6, .app-area .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .app-area .col-lg-6, .app-area .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .app-area .sec-heading .sec__title { line-height: 60px; margin-bottom: 21px; } @media (max-width: 425px) { .app-area .sec-heading .sec__title { line-height: 45px; } } .app-area .sec-heading .sec__title span { position: relative; } .app-area .sec-heading .sec__title span:before { content: ''; background-color: #283a5e; opacity: 0.1; width: 100%; height: 8px; position: absolute; bottom: 9px; left: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .app-area .sec-heading .download-btn { margin-top: 25px; } @media (max-width: 395px) { .app-area .sec-heading .download-btn { text-align: center; } } .app-area .sec-heading .download-btn .download__text { color: #283a5e; font-size: 20px; margin-bottom: 25px; } .app-area .sec-heading .download-btn .apple-store { margin-right: 10px; } @media (max-width: 395px) { .app-area .sec-heading .download-btn .apple-store { margin-right: 0; margin-bottom: 10px; } } .app-area .sec-heading .download-btn .theme-btn { background-color: #fff; color: #283a5e; border: 1px solid #eee; } .app-area .sec-heading .download-btn .theme-btn:hover { background-color: #ff7e00; color: #fff; border-color: #ff7e00; } .app-area .mobile-overview { text-align: right; margin-top: -3px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .app-area .mobile-overview { text-align: center; margin-top: 60px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .app-area .mobile-overview { text-align: center; margin-top: 60px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .app-area .mobile-overview { text-align: center; margin-top: 60px; } } .app-area .mobile-overview img { width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .app-area .mobile-overview img { width: 63%; } } /*==================================================== app-area 2 ====================================================*/ .app-area2 { padding-top: 0; } @media (max-width: 1199px) { .app-area2 { padding-bottom: 120px; } } .app-area2 .sec-heading .download-btn .theme-btn { border: 1px solid rgba(103, 114, 134, 0.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding-top: 15px; padding-bottom: 15px; background-color: #fff; color: #283a5e; } .app-area2 .sec-heading .download-btn .theme-btn:hover { border-color: #ff7e00; background-color: #ff7e00; color: #fff; } .app-area2 .mobile-overview { text-align: left; } @media only screen and (min-width: 768px) and (max-width: 991px) { .app-area2 .mobile-overview { margin-top: 0; margin-bottom: 120px; text-align: center; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .app-area2 .mobile-overview { margin-top: 0; margin-bottom: 120px; text-align: center; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .app-area2 .mobile-overview { margin-top: 0; margin-bottom: 120px; text-align: center; } } /*==================================================== newsleller-area ====================================================*/ .newsleller-area { position: relative; z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px) { .newsleller-area .col-lg-7, .newsleller-area .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .newsleller-area .col-lg-7, .newsleller-area .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .newsleller-area .col-lg-7, .newsleller-area .col-lg-5 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .newsleller-area .subscriber-box { background-color: #fff; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; padding: 40px 40px 32px 40px; border: 1px solid rgba(103, 114, 134, 0.2); -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); position: relative; z-index: 1; overflow: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } @media only screen and (min-width: 480px) and (max-width: 767px) { .newsleller-area .subscriber-box { padding-bottom: 40px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .newsleller-area .subscriber-box { padding-bottom: 40px; padding-right: 15px; padding-left: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .newsleller-area .subscriber-box .sec-heading { text-align: center; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .newsleller-area .subscriber-box .sec-heading { text-align: center; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .newsleller-area .subscriber-box .sec-heading { text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .newsleller-area .subscriber-box .sec-heading .heading-circle { margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .newsleller-area .subscriber-box .sec-heading .heading-circle { margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .newsleller-area .subscriber-box .sec-heading .heading-circle { margin-left: auto; margin-right: auto; } } .newsleller-area .subscriber-box .sec-heading .sec__title { font-size: 35px; margin-bottom: 0; } @media only screen and (min-width: 480px) and (max-width: 767px) { .newsleller-area .subscriber-box .sec-heading .sec__title { line-height: 45px; } } .newsleller-area .subscriber-box .subscriber-wrap { margin-top: 25px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .newsleller-area .subscriber-box .subscriber-wrap { margin-top: 30px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .newsleller-area .subscriber-box .subscriber-wrap { margin-top: 30px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .newsleller-area .subscriber-box .subscriber-wrap { margin-top: 30px; } } .newsleller-area .subscriber-box .subscriber-wrap form .subscriber-form { position: relative; } @media (max-width: 375px) { .newsleller-area .subscriber-box .subscriber-wrap form .subscriber-form { text-align: center; } } .newsleller-area .subscriber-box .subscriber-wrap form .subscriber-form .form-control { height: auto; padding: 18px 0 18px 45px; border-color: rgba(103, 114, 134, 0.2); -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; color: #283a5e; font-weight: 400; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .newsleller-area .subscriber-box .subscriber-wrap form .subscriber-form .form-control:focus { -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; } .newsleller-area .subscriber-box .subscriber-wrap form .subscriber-form .fa-envelope { position: absolute; top: 50%; left: 25px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #677286; font-size: 14px; } @media (max-width: 375px) { .newsleller-area .subscriber-box .subscriber-wrap form .subscriber-form .fa-envelope { top: 17%; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .newsleller-area .subscriber-box .subscriber-wrap form .subscriber-form .theme-btn { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 5px; padding-top: 13px; padding-bottom: 13px; background-color: #ff7e00; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; color: #fff; -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; } @media (max-width: 375px) { .newsleller-area .subscriber-box .subscriber-wrap form .subscriber-form .theme-btn { position: inherit; top: auto; right: auto; margin-top: 20px; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .newsleller-area .subscriber-box .subscriber-wrap form .subscriber-form .theme-btn:hover { background-color: #283a5e; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); } .newsleller-area .subscriber-box:before { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23677286' fill-opacity='0.36'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); } .newsleller-area .subscriber-box:hover { -webkit-transform: scale(0.98); -moz-transform: scale(0.98); -ms-transform: scale(0.98); -o-transform: scale(0.98); transform: scale(0.98); } /*==================================================== newsleller-area2 ====================================================*/ .newsleller-area2 { padding-top: 120px; } /*==================================================== footer-area ====================================================*/ .footer-area { padding-top: 119px; position: relative; z-index: 1; } .footer-area .footer-svg { height: 600px; width: 100%; fill: rgba(248, 245, 252, 0.55); position: absolute; bottom: 0; z-index: -1; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area .col-lg-3.col-sm-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .footer-area .col-lg-3.col-sm-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .footer-area .col-lg-3.col-sm-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .footer-area .footer-shared { height: 100%; margin-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area .footer-shared { height: 280px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .footer-area .footer-shared { height: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .footer-area .footer-shared { height: 100%; } } .footer-area .footer-shared a .footer__logo { width: 125px; } .footer-area .footer-shared .footer-title { font-size: 20px; text-transform: capitalize; font-weight: 500; padding-bottom: 15px; margin-bottom: 24px; display: inline-block; position: relative; color: #283a5e; } .footer-area .footer-shared .footer-title .footer-title-shape { position: absolute; bottom: 0; left: 0; width: 15px; height: 4px; background-color: #ff7e00; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .footer-area .footer-shared .footer-title .footer-title-shape:nth-child(2) { left: 17px; width: 10px; opacity: 0.8; } .footer-area .footer-shared .footer-title .footer-title-shape:nth-child(3) { left: 29px; width: 8px; opacity: 0.6; } .footer-area .footer-shared .footer-address-links { font-size: 16px; color: #677286; line-height: 30px; margin-top: 26px; font-weight: 400; } .footer-area .footer-shared .footer-address-links a { display: block; color: #677286; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; position: relative; } .footer-area .footer-shared .footer-address-links a:hover { color: #ff7e00; } .footer-area .footer-shared .footer-meta { font-size: 18px; color: #283a5e; text-transform: capitalize; font-weight: 700; margin-top: 25px; margin-bottom: 27px; } .footer-area .footer-shared .footer-link li { display: inline-block; color: #283a5e; } @media (max-width: 1199px) { .footer-area .footer-shared .footer-link li { margin-left: -1px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area .footer-shared .footer-link li { margin-left: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .footer-area .footer-shared .footer-link li { margin-left: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .footer-area .footer-shared .footer-link li { margin-left: 0; } } .footer-area .footer-shared .footer-link li a { color: #283a5e; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; font-size: 16px; width: 40px; height: 40px; text-align: center; line-height: 40px; background-color: #fff; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid rgba(103, 114, 134, 0.1); display: block; position: relative; } .footer-area .footer-shared .footer-link li a i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .footer-area .footer-shared .footer-link li a i.fa-facebook-f { color: #182eb2; } .footer-area .footer-shared .footer-link li a i.fa-twitter { color: #31a5ff; } .footer-area .footer-shared .footer-link li a i.fa-instagram { color: #CD3099; } .footer-area .footer-shared .footer-link li a i.fa-linkedin-in { color: #31a5ff; } .footer-area .footer-shared .footer-link li a i.fa-google-plus-g { color: #ff2e2e; } .footer-area .footer-shared .footer-link li a:hover { background-color: #ff7e00; border-color: #ff7e00; } .footer-area .footer-shared .footer-link li a:hover i { color: #fff; } .footer-area .footer-shared .company-link li { display: block; margin-bottom: 10px; } .footer-area .footer-shared .company-link li a { width: auto; height: auto; display: inline-block; background-color: transparent; -webkit-box-shadow: 0 0 0 0; -moz-box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; text-transform: capitalize; font-size: 16px; line-height: inherit; font-weight: 400; color: #677286; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; border: none; } .footer-area .footer-shared .company-link li a:hover { background-color: transparent; color: #ff7e00; } .footer-area .footer-shared .company-link li a:hover:after { bottom: 4px; opacity: 1; visibility: visible; } .footer-area .footer-shared .company-link li a:after { position: absolute; content: ''; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #ff7e00; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 0; visibility: hidden; } .footer-area .footer-widget { padding-left: 36px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area .footer-widget { padding-left: 0; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .footer-area .footer-widget { padding-left: 0; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .footer-area .footer-widget { padding-left: 0; } } .footer-area .copyright-content { padding-top: 34px; padding-bottom: 34px; display: flex; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area .copyright-content { text-align: center; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .footer-area .copyright-content { text-align: center; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .footer-area .copyright-content { text-align: center; } } @media (max-width: 320px) { .footer-area .copyright-content { margin-top: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area .copyright-content .col-lg-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .footer-area .copyright-content .col-lg-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .footer-area .copyright-content .col-lg-6 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } .footer-area .copyright-content .copy__desc { font-size: 15px; color: #677286; font-weight: 400; } .footer-area .copyright-content .copy__desc a { color: #283a5e; position: relative; display: inline-block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .footer-area .copyright-content .copy__desc a:after { position: absolute; content: ''; width: 100%; height: 1px; bottom: 0; left: 0; background-color: #ff7e00; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 0; visibility: hidden; } .footer-area .copyright-content .copy__desc a:hover { color: #ff7e00; } .footer-area .copyright-content .copy__desc a:hover:after { opacity: 1; visibility: visible; bottom: 4px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area .copyright-content .payment__currency { text-align: center; margin-top: 30px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .footer-area .copyright-content .payment__currency { text-align: center; margin-top: 30px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .footer-area .copyright-content .payment__currency { text-align: center; margin-top: 30px; } } .footer-area .copyright-content .payment__currency li { display: inline-block; margin-right: 12px; } @media (max-width: 320px) { .footer-area .copyright-content .payment__currency li { margin-right: 15px; margin-bottom: 15px; } } .footer-area .copyright-content .payment__currency li:last-child { margin-right: 0; margin-bottom: 0; } /*==================================================== footer-area 2 ====================================================*/ @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-area2 { padding-top: 70px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .footer-area2 { padding-top: 70px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .footer-area2 { padding-top: 70px; } } /*==== nice-select ====*/ .nice-select { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px rgba(40, 58, 94, 0.1); box-sizing: border-box; clear: both; cursor: pointer; display: block; font-family: inherit; font-size: 16px; color: #677286; font-weight: normal; height: auto; padding-top: 16px; padding-bottom: 16px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; text-align: left !important; transition: all 0.2s ease-in-out; user-select: none; white-space: nowrap; width: auto; } .nice-select:hover { border-color: #dbdbdb; } .nice-select:active, .nice-select.open, .nice-select:focus { border-color: rgba(40, 58, 94, 0.2); } .nice-select:after { border-bottom: 2px solid #677286; border-right: 2px solid #677286; content: ''; display: block; height: 8px; margin-top: -4px; pointer-events: none; position: absolute; right: 18px; top: 50%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.15s ease-in-out; width: 8px; } .nice-select.open:after { transform: rotate(-135deg); } .nice-select.open .list { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); } .nice-select.disabled { border-color: #ededed; color: #999; pointer-events: none; } .nice-select.disabled:after { border-color: #cccccc; } .nice-select.wide { width: 100%; } .nice-select.wide .list { left: 0 !important; right: 0 !important; } .nice-select.right { float: right; } .nice-select.right .list { left: auto; right: 0; } .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; } .nice-select.small:after { height: 4px; width: 4px; } .nice-select.small .option { line-height: 34px; min-height: 34px; } .nice-select .list { background-color: #fff; border-radius: 5px; box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-sizing: border-box; margin-top: 4px; opacity: 0; overflow-y: auto; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; width: 100%; transform-origin: 50% 0; transform: scale(0.75) translateY(-21px); transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; } .nice-select .list:hover .option:not(:hover) { background-color: transparent !important; } .nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; transition: all 0.2s; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: rgba(128, 137, 150, 0.1); color: #ff7e00; } .nice-select .option.selected { font-weight: 600; } .nice-select .option.disabled { background-color: transparent; color: #999; cursor: default; } .no-csspointerevents .nice-select .list { display: none; } .no-csspointerevents .nice-select.open .list { display: block; } #back-to-top { position: fixed; right: 20px; bottom: 40px; z-index: 9999; width: 40px; height: 40px; text-align: center; line-height: 40px; background-color: #fff; color: #677286; -webkit-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -moz-box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); box-shadow: 0 0 40px rgba(82, 85, 90, 0.1); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid rgba(103, 114, 134, 0.3); font-size: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; cursor: pointer; opacity: 0; visibility: hidden; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } #back-to-top i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #back-to-top:hover { background-color: #ff7e00; color: #fff; border-color: #ff7e00; } #back-to-top.show-back-to-top { opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } /*Custom*/ .newsleller-area .subscriber-box .subscriber-wrap form .subscriber-form .la-phone { position: absolute; top: 50%; left: 25px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #677286; font-size: 14px; } .payment__currency img { width: 40px; height: 60px; } .payment__currency img:hover { filter: brightness(0.9); -webkit-filter: brightness(0.9); } .subscriber-form a { color: #666; } @media (max-width: 400px) { #btnContact { display: none; } } .team__img:hover { filter: brightness(0.8); -webkit-filter: brightness(0.8); } .title1 { font-size: 24px; font-weight: 300; margin:30px 0 20px 0}