D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
buildteksolution
/
public_html
/
assets
/
css
/
Filename :
style.css
back
Copy
@charset "UTF-8"; /*---------------------------------------------------------------------- Template Name: Limestone - Construction & Building HTML Template Template URI: https://webtend.net/demo/html/limestone/ Author: WebTend Author URI: https://webtend.net/ Version: 1.0 Note: This is Main Style CSS File. */ /*---------------------------------------------------------------------- CSS INDEX ---------------------- ## Default Style ## Common Classes ## Repeat Style ## Padding Margin ## Custom Animation ## Header style ## Slider Area ## Page Banner ## About Area ## Services ## Counter Area ## Projects ## Team Area ## FAQs Area ## Testimonials ## Blog Area ## Partner ## Contact Forms ## Videos ## History ## Pricing ## Shop Area ## Skillbar ## Sidebar Widgets ## Main Footer */ /* -------------------------------------------------------------- */ /*******************************************************/ /******************* ## Default Style ******************/ /*******************************************************/ * { margin: 0; padding: 0; border: none; outline: none; -webkit-box-shadow: none; box-shadow: none; } body { color: var(--base-color); background: white; font-weight: 400; line-height: 32px; font-size: 16px; font-family: var(--base-font); --base-font: 'Hind', sans-serif; --heading-font: 'Poppins', sans-serif; --primary-color: #fc2b28; --heading-color: #000000; --base-color: #768492; --lighter-color: #F5F5F5; --border-color: rgba(42, 44, 56, 0.1); --primary-rgb: 255, 143, 38; } a { color: var(--base-color); cursor: pointer; outline: none; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; text-decoration: none; } a:hover, a:focus, a:visited { text-decoration: none; outline: none; } a:hover { color: var(--heading-color); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--heading-color); } .text-white h1, .text-white h1 a, .text-white h2, .text-white h2 a, .text-white h3, .text-white h3 a, .text-white h4, .text-white h4 a, .text-white h5, .text-white h5 a, .text-white h6, .text-white h6 a, .text-white .h1, .text-white .h1 a, .text-white .h2, .text-white .h2 a, .text-white .h3, .text-white .h3 a, .text-white .h4, .text-white .h4 a, .text-white .h5, .text-white .h5 a, .text-white .h6, .text-white .h6 a { color: white; } ul, li { list-style: none; padding: 0; margin: 0; } img { max-width: 100%; display: inline-block; } mark { color: var(--primary-color); background: transparent; text-decoration: underline; } header:after, section:after, footer:after { display: block; clear: both; content: ""; } /*======= Input Styles =======*/ input, select, textarea, .nice-select, .form-control { width: 100%; height: auto; font-weight: 500; border-radius: 0; padding: 17px 30px; background-color: #fff; border: 1px solid white; font-family: var(--heading-font); } input:focus, select:focus, textarea:focus, .nice-select:focus, .form-control:focus { outline: none; -webkit-box-shadow: none; box-shadow: none; border-color: var(--primary-color); } input:focus::-webkit-input-placeholder, select:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder, .nice-select:focus::-webkit-input-placeholder, .form-control:focus::-webkit-input-placeholder { color: var(--heading-color); } input:focus:-ms-input-placeholder, select:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder, .nice-select:focus:-ms-input-placeholder, .form-control:focus:-ms-input-placeholder { color: var(--heading-color); } input:focus::-ms-input-placeholder, select:focus::-ms-input-placeholder, textarea:focus::-ms-input-placeholder, .nice-select:focus::-ms-input-placeholder, .form-control:focus::-ms-input-placeholder { color: var(--heading-color); } input:focus::placeholder, select:focus::placeholder, textarea:focus::placeholder, .nice-select:focus::placeholder, .form-control:focus::placeholder { color: var(--heading-color); } textarea { display: inherit; padding-top: 20px; } label { cursor: pointer; font-weight: 500; margin-bottom: 5px; color: var(--base-color); } .form-group { position: relative; margin-bottom: 20px; } input[type=search]::-ms-clear { display: none; width: 0; height: 0; } input[type=search]::-ms-reveal { display: none; width: 0; height: 0; } input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { display: none; } input[type=checkbox], input[type=radio] { height: auto; width: auto; } /*******************************************************/ /****************** ## Common Classes *****************/ /*******************************************************/ .page-wrapper { position: relative; z-index: 9; width: 100%; margin: 0 auto; overflow: hidden; min-width: 300px; } @media only screen and (min-width: 1200px) { .container { max-width: 1295px; padding-left: 15px; padding-right: 15px; } .container.container-1620 { max-width: 1650px; } } @media only screen and (min-width: 576px) { .container-fluid { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 1400px) { .container-fluid { padding-left: 70px; padding-right: 70px; } } .row { --bs-gutter-x: 30px; } .no-gap { --bs-gutter-x: 0; } @media only screen and (max-width: 375px) { .col-small { width: 100%; } } @media only screen and (min-width: 1400px) { .gap-10 { --bs-gutter-x: 10px; } } @media only screen and (min-width: 1400px) { .gap-20 { --bs-gutter-x: 20px; } } @media only screen and (min-width: 1400px) { .gap-30 { --bs-gutter-x: 30px; } } @media only screen and (min-width: 1400px) { .gap-40 { --bs-gutter-x: 40px; } } @media only screen and (min-width: 1400px) { .gap-50 { --bs-gutter-x: 50px; } } @media only screen and (min-width: 1400px) { .gap-60 { --bs-gutter-x: 60px; } } @media only screen and (min-width: 1400px) { .gap-70 { --bs-gutter-x: 70px; } } @media only screen and (min-width: 1400px) { .gap-80 { --bs-gutter-x: 80px; } } @media only screen and (min-width: 1400px) { .gap-90 { --bs-gutter-x: 90px; } } @media only screen and (min-width: 1400px) { .gap-100 { --bs-gutter-x: 100px; } } @media only screen and (min-width: 1400px) { .gap-110 { --bs-gutter-x: 110px; } } @media only screen and (min-width: 1400px) { .gap-120 { --bs-gutter-x: 120px; } } @media only screen and (min-width: 1400px) { .gap-130 { --bs-gutter-x: 130px; } } @media only screen and (min-width: 1400px) { .gap-140 { --bs-gutter-x: 140px; } } @media only screen and (min-width: 1400px) { .gap-150 { --bs-gutter-x: 150px; } } @media only screen and (min-width: 1200px) { .row-cols-xl-7 > * { width: 14.2857%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } } /** Section Title style **/ .section-title { margin-top: -8px; position: relative; } .section-title .sub-title { font-weight: 500; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; text-transform: capitalize; } .section-title .sub-title:before { content: "\f101"; margin-top: -2px; margin-right: 10px; font-family: "Font Awesome 5 Pro"; } .section-title h2 { text-transform: capitalize; } @media only screen and (max-width: 991px) { .section-title h2 { font-size: 40px; } } @media only screen and (max-width: 767px) { .section-title h2 { font-size: 35px; } } @media only screen and (max-width: 575px) { .section-title h2 { font-size: 30px; line-height: 1.35; } } @media only screen and (max-width: 375px) { .section-title h2 { font-size: 25px; } } .section-title h4 { line-height: 1.33; text-transform: capitalize; } @media only screen and (max-width: 375px) { .section-title h4 { font-size: 25px; } } /** Button style **/ .theme-btn, a.theme-btn { cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-weight: 500; text-align: center; padding: 12px 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--heading-color); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: var(--heading-font); text-transform: capitalize; background: var(--primary-color); } .theme-btn i, a.theme-btn i { margin-left: 7px; } .theme-btn:hover, a.theme-btn:hover { background: #000080;color:#fff; } @media only screen and (max-width: 575px) { .theme-btn, a.theme-btn { padding: 10px 25px; } } .theme-btn.style-two, a.theme-btn.style-two { color: white; background: var(--heading-color); } /* Details Btn */ .details-btn { width: 100px; height: 100px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-size: 24px; text-align: center; line-height: 100px; border-radius: 50%; display: inline-block; color: var(--heading-color); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); border: 1px solid var(--border-color); } .details-btn:hover { color: white; background: var(--primary-color); border-color: var(--primary-color); } @media only screen and (max-width: 479px) { .details-btn { width: 65px; height: 65px; font-size: 16px; line-height: 65px; } } /* Read More */ .read-more { font-size: 14px; font-weight: 600; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-family: var(--heading-font); text-transform: capitalize; } .read-more i { float: right; font-weight: 400; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-left: 8px; margin-bottom: -2px; } .read-more:hover { color: var(--primary-color); } /* List style One */ .list-style-one li { display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 500; color: var(--heading-color); } .list-style-one li:not(:last-child) { margin-bottom: 8px; } .list-style-one li:before { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 20px; height: 20px; font-size: 11px; margin-top: 6px; content: "\f00c"; font-weight: 600; line-height: 16px; border: 2px solid; text-align: center; margin-right: 12px; border-radius: 50%; color: var(--primary-color); font-family: 'Font Awesome 5 Pro'; } /* List style Two */ .list-style-two li { font-size: 20px; font-weight: 600; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-bottom: 20px; padding-bottom: 10px; color: var(--heading-color); border-bottom: 1px solid var(--border-color); } .list-style-two li span { color: var(--primary-color); } .list-style-two li:hover { border-color: var(--heading-color); } /* List style Three */ .list-style-three li:not(:last-child) { margin-bottom: 8px; } .list-style-three li:before { content: "\f00c"; font-size: 1.2em; margin-right: 15px; color: var(--primary-color); font-family: 'Font Awesome 5 Pro'; } /* List style Four */ .list-style-four li { list-style: square; color: var(--heading-color); list-style-position: inside; } /** Social Link One **/ .social-style-one { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -12px; margin-right: -12px; } .social-style-one a { margin-left: 12px; margin-right: 12px; } /** Social Link Two **/ .social-style-two { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -5px; margin-right: -5px; } .social-style-two a { margin-left: 5px; margin-right: 5px; border: 1px solid var(--border-color); width: 35px; height: 35px; background: transparent; line-height: 35px; border-radius: 50%; text-align: center; } .social-style-two a:hover { color: var(--heading-color); background: var(--primary-color); border-color: var(--primary-color); } /** Social Link Three **/ .social-style-three { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -7.5px; margin-right: -7.5px; } .social-style-three a { margin-left: 7.5px; margin-right: 7.5px; } .social-style-three a:hover { color: var(--primary-color); } /** Social Link Four **/ .social-style-four { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -35px; margin-right: -35px; } .social-style-four a { margin-left: 35px; margin-right: 35px; } .social-style-four a i { margin-right: 10px; color: var(--primary-color); } /** Tab Style One **/ .tab-style-one { border-bottom: 1px solid var(--border-color); } .tab-style-one .nav-link { font-size: 18px; border-radius: 0; padding-left: 0; padding-right: 0; margin-bottom: -1px; background: transparent; border-bottom: 2px solid transparent; } @media only screen and (min-width: 1200px) { .tab-style-one .nav-link { padding-bottom: 25px; } } @media only screen and (max-width: 575px) { .tab-style-one .nav-link { font-size: 16px; } } .tab-style-one .nav-link.active { color: var(--primary-color); border-bottom-color: var(--primary-color); } .tab-style-one .nav-item:not(:last-child) { margin-right: 40px; } @media only screen and (max-width: 767px) { .tab-style-one .nav-item:not(:last-child) { margin-right: 20px; } } /*** BG Lines ** */ .bg-lines span { top: 0; z-index: -1; width: 1px; height: 100%; position: absolute; background: var(--border-color); -webkit-animation: leftRightOne 18s infinite; animation: leftRightOne 18s infinite; } .bg-lines span:nth-child(1) { left: 20%; } .bg-lines span:nth-child(2) { left: 40%; } .bg-lines span:nth-child(3) { left: 60%; } .bg-lines span:nth-child(4) { left: 80%; } .bg-lines span:nth-child(5) { left: 100%; } .bg-lines span:nth-child(6) { left: 120%; } .bg-lines span:nth-child(7) { left: 140%; } .bg-lines span:nth-child(8) { left: 160%; } .bg-lines span:nth-child(9) { left: 180%; } .bg-lines.for-black-bg span { background: rgba(255, 255, 255, 0.1); } /*** Preloader style ** */ .preloader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: white; background-repeat: no-repeat; background-position: center center; } .preloader .custom-loader { width: 75px; height: 75px; border-radius: 50%; background-color: transparent; border: 2px solid var(--heading-color); border-top: 2px solid var(--primary-color); border-bottom: 2px solid var(--primary-color); -webkit-animation: 1s preloader linear infinite; animation: 1s preloader linear infinite; } /* Pagination */ .pagination { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: -5px; margin-right: -5px; } .pagination li { margin: 10px 5px 0; } .pagination li a, .pagination li .page-link { padding: 0; -webkit-box-shadow: none; box-shadow: none; font-weight: 600; color: var(--base-color); width: 45px; height: 45px; background: transparent; line-height: 45px; border-radius: 50%; text-align: center; border: 1px solid var(--border-color); } .pagination li.disabled .page-link, .pagination li:last-child .page-link { border-radius: 50%; } .pagination li.active .page-link, .pagination li:hover:not(.disabled) .page-link { color: white; background: var(--primary-color); border-color: var(--primary-color); } .pagination li.dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(2, 5, 10, 0.1); } /* Rating */ .ratting { line-height: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .ratting i { margin: 3px; color: #f1b000; font-size: 14px; } .ratting.style-two i { margin: 6px; font-size: 18px; color: var(--primary-color); } /* Slick Arrows */ .slick-arrow { font-size: 20px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding-top: 2px; width: 65px; height: 65px; background: white; line-height: 65px; border-radius: 50%; text-align: center; color: var(--heading-color); -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.15); } .slick-arrow:focus, .slick-arrow:hover { background: var(--primary-color); } /*** Slick Dots ***/ .slick-dots { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .slick-dots li { position: relative; cursor: pointer; width: 5px; height: 5px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin: 0 10px; border-radius: 50%; background: var(--primary-color); } .slick-dots li button { opacity: 0; } .slick-dots li:after { content: ''; position: absolute; left: -7px; top: -7px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid transparent; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .slick-dots li.slick-active:after { border-color: var(--primary-color); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /*** Scroll Top style ***/ .scroll-top { position: fixed; bottom: 25px; right: 0; width: 40px; height: 40px; z-index: 99; display: none; font-size: 16px; cursor: pointer; line-height: 44px; background: var(--primary-color); -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; } /* Text White */ .text-white *, .text-white a, .text-white .sub-title, .text-white .read-more, .text-white .list-style-one li, .text-white .list-style-one li:before, .text-white .counter-text-wrap .count-text, .text-white .hotline .content a:not(:hover) { color: white; } .text-white .service-two-item .icon i { color: var(--primary-color); } .text-white .service-two-item .content p { opacity: 0.6; } .text-white .hotline > i { background: white; } .text-white .hotline > i { border-color: white; } /* Wave Shapes */ .wave-shapes { position: absolute; z-index: -1; top: 0; left: -100px; width: calc(100% + 100px); height: 100%; } .wave-shapes .shape { position: absolute; bottom: 0; left: 0; width: 100%; -webkit-animation: leftRightOne 6s infinite; animation: leftRightOne 6s infinite; } .wave-shapes .shape.two { -webkit-animation-delay: 3s; animation-delay: 3s; } /*Project Filter*/ .filter-btns-one { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -5px; margin-right: -5px; } .filter-btns-one li { cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-weight: 500; padding: 4px 20px; border-radius: 5px; margin: 0 5px 10px; color: var(--heading-color); } @media only screen and (max-width: 375px) { .filter-btns-one li { padding-left: 15px; padding-right: 15px; } } .filter-btns-one li.current { background: white; color: var(--primary-color); text-decoration: underline; -webkit-box-shadow: 10px 0 60px rgba(195, 195, 195, 0.5); box-shadow: 10px 0 60px rgba(195, 195, 195, 0.5); } .filter-btns-two { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-weight: 500; margin-left: -18px; margin-right: -18px; } @media only screen and (min-width: 768px) { .filter-btns-two { font-size: 18px; } } @media only screen and (max-width: 575px) { .filter-btns-two { margin-left: -8px; margin-right: -8px; } } .filter-btns-two li { cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin: 0 18px 10px; border-bottom: 3px solid transparent; } @media only screen and (max-width: 575px) { .filter-btns-two li { margin-left: 8px; margin-right: 8px; } } .filter-btns-two li.current { color: var(--primary-color); border-color: var(--primary-color); } /* Before After None */ .before-after-none:after, .before-after-none:before { display: none; } /* Position */ .rel { position: relative; } .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; } .overlay { z-index: 1; position: relative; } .overlay::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.9; background-color: #000080; } .overlay:before { mix-blend-mode: multiply; } /* Backgruond Size */ .bgs-cover { background-size: cover; background-position: center; } .bgp-top { background-repeat: no-repeat; background-position: top center; } /* Color + Background */ .bgc-black { background-color: var(--heading-color); } .bgc-gray { background-color: #000080; } .bgc-primary { background-color: var(--primary-color); } .bgc-lighter { background-color: var(--lighter-color); } /* Border Radius */ .br-5 { border-radius: 5px; } .br-10 { border-radius: 10px; } .br-15 { border-radius: 15px; } .br-20 { border-radius: 20px; } .br-25 { border-radius: 25px; } .br-30 { border-radius: 30px; } /* Color Two */ .color-two { --primary-color: #E65A11; } .color-two .theme-btn { color: white; } /*******************************************************/ /******************* ## Repeat Style ******************/ /*******************************************************/ .heading, .tab-style-one .nav-link, h1, .h1, h2, .h2, .counter-item .count-text, h3, .h3, h4, .h4, h5, .h5, blockquote, h6, .h6, .slide-content .sub-title, .blog-item .image .date, .about-image .circle-progress-wrap .progress-content .counting, .progress-with-service .service-progress .counting, .progress-contentt.style-two .counting, .company-history-item .year, .skillbar .skillbar-title, .skillbar .skill-bar-percent { font-weight: 600; color: var(--heading-color); font-family: var(--heading-font); } h1, .h1 { font-size: 75px; } h2, .h2, .counter-item .count-text { line-height: 1.25; font-size: 45px; } h3, .h3 { font-size: 35px; } h4, .h4 { line-height: 1.4; font-size: 30px; } h5, .h5, blockquote { line-height: 1.45; font-size: 22px; } h6, .h6, .slide-content .sub-title, .blog-item .image .date { line-height: 1.4; font-size: 18px; } .np-service-item .content h4 a, .project-item .content h6 a, .blog-item .content h5 a, .blog-item.style-two .blog-header h5 a { position: relative; display: inline; background-repeat: no-repeat; background-size: 0% 1.5px, 0 1.5px; background-position: 100% 100%, 0 85%; -webkit-transition: background-size 0.4s linear; -o-transition: background-size 0.4s linear; transition: background-size 0.4s linear; background-image: -webkit-gradient(linear, left top, left bottom, from(var(--heading-color)), to(var(--heading-color))), -webkit-gradient(linear, left top, left bottom, from(var(--heading-color)), to(var(--heading-color))); background-image: -webkit-linear-gradient(var(--heading-color), var(--heading-color)), -webkit-linear-gradient(var(--heading-color), var(--heading-color)); background-image: -o-linear-gradient(var(--heading-color), var(--heading-color)), -o-linear-gradient(var(--heading-color), var(--heading-color)); background-image: linear-gradient(var(--heading-color), var(--heading-color)), linear-gradient(var(--heading-color), var(--heading-color)); } .np-service-item .content h4 a:hover, .project-item .content h6 a:hover, .blog-item .content h5 a:hover, .blog-item.style-two .blog-header h5 a:hover { background-size: 0 1.5px, 100% 1.5px; } /*******************************************************/ /************** ## Padding Margin Spacing *************/ /*******************************************************/ /* Padding Around */ .p-5 { padding: 5px !important; } .p-10 { padding: 10px; } .p-15 { padding: 15px; } .p-20 { padding: 20px; } .p-25 { padding: 25px; } .p-30 { padding: 30px; } .p-35 { padding: 35px; } .p-40 { padding: 40px; } .p-45 { padding: 45px; } .p-50 { padding: 50px; } .p-55 { padding: 55px; } .p-60 { padding: 60px; } .p-65 { padding: 65px; } .p-70 { padding: 70px; } .p-75 { padding: 75px; } .p-80 { padding: 80px; } .p-85 { padding: 85px; } .p-90 { padding: 90px; } .p-95 { padding: 95px; } .p-100 { padding: 100px; } .p-105 { padding: 105px; } .p-110 { padding: 110px; } .p-115 { padding: 115px; } .p-120 { padding: 120px; } .p-125 { padding: 125px; } .p-130 { padding: 130px; } .p-135 { padding: 135px; } .p-140 { padding: 140px; } .p-145 { padding: 145px; } .p-150 { padding: 150px; } .p-155 { padding: 155px; } .p-160 { padding: 160px; } .p-165 { padding: 165px; } .p-170 { padding: 170px; } .p-175 { padding: 175px; } .p-180 { padding: 180px; } .p-185 { padding: 185px; } .p-190 { padding: 190px; } .p-195 { padding: 195px; } .p-200 { padding: 200px; } .p-205 { padding: 205px; } .p-210 { padding: 210px; } .p-215 { padding: 215px; } .p-220 { padding: 220px; } .p-225 { padding: 225px; } .p-230 { padding: 230px; } .p-235 { padding: 235px; } .p-240 { padding: 240px; } .p-245 { padding: 245px; } .p-250 { padding: 250px; } /* Padding Top */ .pt-5, .py-5 { padding-top: 5px !important; } .pt-10, .py-10 { padding-top: 10px; } .pt-15, .py-15 { padding-top: 15px; } .pt-20, .py-20 { padding-top: 20px; } .pt-25, .py-25 { padding-top: 25px; } .pt-30, .py-30 { padding-top: 30px; } .pt-35, .py-35 { padding-top: 35px; } .pt-40, .py-40 { padding-top: 40px; } .pt-45, .py-45 { padding-top: 45px; } .pt-50, .py-50 { padding-top: 50px; } .pt-55, .py-55 { padding-top: 55px; } .pt-60, .py-60 { padding-top: 60px; } .pt-65, .py-65 { padding-top: 65px; } .pt-70, .py-70 { padding-top: 70px; } .pt-75, .py-75 { padding-top: 75px; } .pt-80, .py-80 { padding-top: 80px; } .pt-85, .py-85 { padding-top: 85px; } .pt-90, .py-90 { padding-top: 90px; } .pt-95, .py-95 { padding-top: 95px; } .pt-100, .py-100 { padding-top: 100px; } .pt-105, .py-105 { padding-top: 105px; } .pt-110, .py-110 { padding-top: 110px; } .pt-115, .py-115 { padding-top: 115px; } .pt-120, .py-120 { padding-top: 120px; } .pt-125, .py-125 { padding-top: 125px; } .pt-130, .py-130 { padding-top: 130px; } .pt-135, .py-135 { padding-top: 135px; } .pt-140, .py-140 { padding-top: 140px; } .pt-145, .py-145 { padding-top: 145px; } .pt-150, .py-150 { padding-top: 150px; } .pt-155, .py-155 { padding-top: 155px; } .pt-160, .py-160 { padding-top: 160px; } .pt-165, .py-165 { padding-top: 165px; } .pt-170, .py-170 { padding-top: 170px; } .pt-175, .py-175 { padding-top: 175px; } .pt-180, .py-180 { padding-top: 180px; } .pt-185, .py-185 { padding-top: 185px; } .pt-190, .py-190 { padding-top: 190px; } .pt-195, .py-195 { padding-top: 195px; } .pt-200, .py-200 { padding-top: 200px; } .pt-205, .py-205 { padding-top: 205px; } .pt-210, .py-210 { padding-top: 210px; } .pt-215, .py-215 { padding-top: 215px; } .pt-220, .py-220 { padding-top: 220px; } .pt-225, .py-225 { padding-top: 225px; } .pt-230, .py-230 { padding-top: 230px; } .pt-235, .py-235 { padding-top: 235px; } .pt-240, .py-240 { padding-top: 240px; } .pt-245, .py-245 { padding-top: 245px; } .pt-250, .py-250 { padding-top: 250px; } /* Padding Bottom */ .pb-5, .py-5 { padding-bottom: 5px !important; } .pb-10, .py-10 { padding-bottom: 10px; } .pb-15, .py-15 { padding-bottom: 15px; } .pb-20, .py-20 { padding-bottom: 20px; } .pb-25, .py-25 { padding-bottom: 25px; } .pb-30, .py-30 { padding-bottom: 30px; } .pb-35, .py-35 { padding-bottom: 35px; } .pb-40, .py-40 { padding-bottom: 40px; } .pb-45, .py-45 { padding-bottom: 45px; } .pb-50, .py-50 { padding-bottom: 50px; } .pb-55, .py-55 { padding-bottom: 55px; } .pb-60, .py-60 { padding-bottom: 60px; } .pb-65, .py-65 { padding-bottom: 65px; } .pb-70, .py-70 { padding-bottom: 70px; } .pb-75, .py-75 { padding-bottom: 75px; } .pb-80, .py-80 { padding-bottom: 80px; } .pb-85, .py-85 { padding-bottom: 85px; } .pb-90, .py-90 { padding-bottom: 90px; } .pb-95, .py-95 { padding-bottom: 95px; } .pb-100, .py-100 { padding-bottom: 100px; } .pb-105, .py-105 { padding-bottom: 105px; } .pb-110, .py-110 { padding-bottom: 110px; } .pb-115, .py-115 { padding-bottom: 115px; } .pb-120, .py-120 { padding-bottom: 120px; } .pb-125, .py-125 { padding-bottom: 125px; } .pb-130, .py-130 { padding-bottom: 130px; } .pb-135, .py-135 { padding-bottom: 135px; } .pb-140, .py-140 { padding-bottom: 140px; } .pb-145, .py-145 { padding-bottom: 145px; } .pb-150, .py-150 { padding-bottom: 150px; } .pb-155, .py-155 { padding-bottom: 155px; } .pb-160, .py-160 { padding-bottom: 160px; } .pb-165, .py-165 { padding-bottom: 165px; } .pb-170, .py-170 { padding-bottom: 170px; } .pb-175, .py-175 { padding-bottom: 175px; } .pb-180, .py-180 { padding-bottom: 180px; } .pb-185, .py-185 { padding-bottom: 185px; } .pb-190, .py-190 { padding-bottom: 190px; } .pb-195, .py-195 { padding-bottom: 195px; } .pb-200, .py-200 { padding-bottom: 200px; } .pb-205, .py-205 { padding-bottom: 205px; } .pb-210, .py-210 { padding-bottom: 210px; } .pb-215, .py-215 { padding-bottom: 215px; } .pb-220, .py-220 { padding-bottom: 220px; } .pb-225, .py-225 { padding-bottom: 225px; } .pb-230, .py-230 { padding-bottom: 230px; } .pb-235, .py-235 { padding-bottom: 235px; } .pb-240, .py-240 { padding-bottom: 240px; } .pb-245, .py-245 { padding-bottom: 245px; } .pb-250, .py-250 { padding-bottom: 250px; } /* Margin Around */ .m-5 { margin: 5px !important; } .m-10 { margin: 10px; } .m-15 { margin: 15px; } .m-20 { margin: 20px; } .m-25 { margin: 25px; } .m-30 { margin: 30px; } .m-35 { margin: 35px; } .m-40 { margin: 40px; } .m-45 { margin: 45px; } .m-50 { margin: 50px; } .m-55 { margin: 55px; } .m-60 { margin: 60px; } .m-65 { margin: 65px; } .m-70 { margin: 70px; } .m-75 { margin: 75px; } .m-80 { margin: 80px; } .m-85 { margin: 85px; } .m-90 { margin: 90px; } .m-95 { margin: 95px; } .m-100 { margin: 100px; } .m-105 { margin: 105px; } .m-110 { margin: 110px; } .m-115 { margin: 115px; } .m-120 { margin: 120px; } .m-125 { margin: 125px; } .m-130 { margin: 130px; } .m-135 { margin: 135px; } .m-140 { margin: 140px; } .m-145 { margin: 145px; } .m-150 { margin: 150px; } .m-155 { margin: 155px; } .m-160 { margin: 160px; } .m-165 { margin: 165px; } .m-170 { margin: 170px; } .m-175 { margin: 175px; } .m-180 { margin: 180px; } .m-185 { margin: 185px; } .m-190 { margin: 190px; } .m-195 { margin: 195px; } .m-200 { margin: 200px; } .m-205 { margin: 205px; } .m-210 { margin: 210px; } .m-215 { margin: 215px; } .m-220 { margin: 220px; } .m-225 { margin: 225px; } .m-230 { margin: 230px; } .m-235 { margin: 235px; } .m-240 { margin: 240px; } .m-245 { margin: 245px; } .m-250 { margin: 250px; } /* Margin Top */ .mt-5, .my-5 { margin-top: 5px !important; } .mt-10, .my-10 { margin-top: 10px; } .mt-15, .my-15 { margin-top: 15px; } .mt-20, .my-20 { margin-top: 20px; } .mt-25, .my-25 { margin-top: 25px; } .mt-30, .my-30 { margin-top: 30px; } .mt-35, .my-35 { margin-top: 35px; } .mt-40, .my-40 { margin-top: 40px; } .mt-45, .my-45 { margin-top: 45px; } .mt-50, .my-50 { margin-top: 50px; } .mt-55, .my-55 { margin-top: 55px; } .mt-60, .my-60 { margin-top: 60px; } .mt-65, .my-65 { margin-top: 65px; } .mt-70, .my-70 { margin-top: 70px; } .mt-75, .my-75 { margin-top: 75px; } .mt-80, .my-80 { margin-top: 80px; } .mt-85, .my-85 { margin-top: 85px; } .mt-90, .my-90 { margin-top: 90px; } .mt-95, .my-95 { margin-top: 95px; } .mt-100, .my-100 { margin-top: 100px; } .mt-105, .my-105 { margin-top: 105px; } .mt-110, .my-110 { margin-top: 110px; } .mt-115, .my-115 { margin-top: 115px; } .mt-120, .my-120 { margin-top: 120px; } .mt-125, .my-125 { margin-top: 125px; } .mt-130, .my-130 { margin-top: 130px; } .mt-135, .my-135 { margin-top: 135px; } .mt-140, .my-140 { margin-top: 140px; } .mt-145, .my-145 { margin-top: 145px; } .mt-150, .my-150 { margin-top: 150px; } .mt-155, .my-155 { margin-top: 155px; } .mt-160, .my-160 { margin-top: 160px; } .mt-165, .my-165 { margin-top: 165px; } .mt-170, .my-170 { margin-top: 170px; } .mt-175, .my-175 { margin-top: 175px; } .mt-180, .my-180 { margin-top: 180px; } .mt-185, .my-185 { margin-top: 185px; } .mt-190, .my-190 { margin-top: 190px; } .mt-195, .my-195 { margin-top: 195px; } .mt-200, .my-200 { margin-top: 200px; } .mt-205, .my-205 { margin-top: 205px; } .mt-210, .my-210 { margin-top: 210px; } .mt-215, .my-215 { margin-top: 215px; } .mt-220, .my-220 { margin-top: 220px; } .mt-225, .my-225 { margin-top: 225px; } .mt-230, .my-230 { margin-top: 230px; } .mt-235, .my-235 { margin-top: 235px; } .mt-240, .my-240 { margin-top: 240px; } .mt-245, .my-245 { margin-top: 245px; } .mt-250, .my-250 { margin-top: 250px; } /* Margin Bottom */ .mb-5, .my-5 { margin-bottom: 5px !important; } .mb-10, .my-10 { margin-bottom: 10px; } .mb-15, .my-15 { margin-bottom: 15px; } .mb-20, .my-20 { margin-bottom: 20px; } .mb-25, .my-25 { margin-bottom: 25px; } .mb-30, .my-30 { margin-bottom: 30px; } .mb-35, .my-35 { margin-bottom: 35px; } .mb-40, .my-40 { margin-bottom: 40px; } .mb-45, .my-45 { margin-bottom: 45px; } .mb-50, .my-50 { margin-bottom: 50px; } .mb-55, .my-55 { margin-bottom: 55px; } .mb-60, .my-60 { margin-bottom: 60px; } .mb-65, .my-65 { margin-bottom: 65px; } .mb-70, .my-70 { margin-bottom: 70px; } .mb-75, .my-75 { margin-bottom: 75px; } .mb-80, .my-80 { margin-bottom: 80px; } .mb-85, .my-85 { margin-bottom: 85px; } .mb-90, .my-90 { margin-bottom: 90px; } .mb-95, .my-95 { margin-bottom: 95px; } .mb-100, .my-100 { margin-bottom: 100px; } .mb-105, .my-105 { margin-bottom: 105px; } .mb-110, .my-110 { margin-bottom: 110px; } .mb-115, .my-115 { margin-bottom: 115px; } .mb-120, .my-120 { margin-bottom: 120px; } .mb-125, .my-125 { margin-bottom: 125px; } .mb-130, .my-130 { margin-bottom: 130px; } .mb-135, .my-135 { margin-bottom: 135px; } .mb-140, .my-140 { margin-bottom: 140px; } .mb-145, .my-145 { margin-bottom: 145px; } .mb-150, .my-150 { margin-bottom: 150px; } .mb-155, .my-155 { margin-bottom: 155px; } .mb-160, .my-160 { margin-bottom: 160px; } .mb-165, .my-165 { margin-bottom: 165px; } .mb-170, .my-170 { margin-bottom: 170px; } .mb-175, .my-175 { margin-bottom: 175px; } .mb-180, .my-180 { margin-bottom: 180px; } .mb-185, .my-185 { margin-bottom: 185px; } .mb-190, .my-190 { margin-bottom: 190px; } .mb-195, .my-195 { margin-bottom: 195px; } .mb-200, .my-200 { margin-bottom: 200px; } .mb-205, .my-205 { margin-bottom: 205px; } .mb-210, .my-210 { margin-bottom: 210px; } .mb-215, .my-215 { margin-bottom: 215px; } .mb-220, .my-220 { margin-bottom: 220px; } .mb-225, .my-225 { margin-bottom: 225px; } .mb-230, .my-230 { margin-bottom: 230px; } .mb-235, .my-235 { margin-bottom: 235px; } .mb-240, .my-240 { margin-bottom: 240px; } .mb-245, .my-245 { margin-bottom: 245px; } .mb-250, .my-250 { margin-bottom: 250px; } /* Responsive Padding Margin */ @media only screen and (max-width: 991px) { /* Padding Around */ .rp-0 { padding: 0px !important; } .rp-5 { padding: 5px !important; } .rp-10 { padding: 10px; } .rp-15 { padding: 15px; } .rp-20 { padding: 20px; } .rp-25 { padding: 25px; } .rp-30 { padding: 30px; } .rp-35 { padding: 35px; } .rp-40 { padding: 40px; } .rp-45 { padding: 45px; } .rp-50 { padding: 50px; } .rp-55 { padding: 55px; } .rp-60 { padding: 60px; } .rp-65 { padding: 65px; } .rp-70 { padding: 70px; } .rp-75 { padding: 75px; } .rp-80 { padding: 80px; } .rp-85 { padding: 85px; } .rp-90 { padding: 90px; } .rp-95 { padding: 95px; } .rp-100 { padding: 100px; } .rp-105 { padding: 105px; } .rp-110 { padding: 110px; } .rp-115 { padding: 115px; } .rp-120 { padding: 120px; } .rp-125 { padding: 125px; } .rp-130 { padding: 130px; } .rp-135 { padding: 135px; } .rp-140 { padding: 140px; } .rp-145 { padding: 145px; } .rp-150 { padding: 150px; } /* Padding Top */ .rpt-0, .rpy-0 { padding-top: 0px !important; } .rpt-5, .rpy-5 { padding-top: 5px !important; } .rpt-10, .rpy-10 { padding-top: 10px; } .rpt-15, .rpy-15 { padding-top: 15px; } .rpt-20, .rpy-20 { padding-top: 20px; } .rpt-25, .rpy-25 { padding-top: 25px; } .rpt-30, .rpy-30 { padding-top: 30px; } .rpt-35, .rpy-35 { padding-top: 35px; } .rpt-40, .rpy-40 { padding-top: 40px; } .rpt-45, .rpy-45 { padding-top: 45px; } .rpt-50, .rpy-50 { padding-top: 50px; } .rpt-55, .rpy-55 { padding-top: 55px; } .rpt-60, .rpy-60 { padding-top: 60px; } .rpt-65, .rpy-65 { padding-top: 65px; } .rpt-70, .rpy-70 { padding-top: 70px; } .rpt-75, .rpy-75 { padding-top: 75px; } .rpt-80, .rpy-80 { padding-top: 80px; } .rpt-85, .rpy-85 { padding-top: 85px; } .rpt-90, .rpy-90 { padding-top: 90px; } .rpt-95, .rpy-95 { padding-top: 95px; } .rpt-100, .rpy-100 { padding-top: 100px; } .rpt-105, .rpy-105 { padding-top: 105px; } .rpt-110, .rpy-110 { padding-top: 110px; } .rpt-115, .rpy-115 { padding-top: 115px; } .rpt-120, .rpy-120 { padding-top: 120px; } .rpt-125, .rpy-125 { padding-top: 125px; } .rpt-130, .rpy-130 { padding-top: 130px; } .rpt-135, .rpy-135 { padding-top: 135px; } .rpt-140, .rpy-140 { padding-top: 140px; } .rpt-145, .rpy-145 { padding-top: 145px; } .rpt-150, .rpy-150 { padding-top: 150px; } /* Padding Bottom */ .rpb-0, .rpy-0 { padding-bottom: 0px !important; } .rpb-5, .rpy-5 { padding-bottom: 5px !important; } .rpb-10, .rpy-10 { padding-bottom: 10px; } .rpb-15, .rpy-15 { padding-bottom: 15px; } .rpb-20, .rpy-20 { padding-bottom: 20px; } .rpb-25, .rpy-25 { padding-bottom: 25px; } .rpb-30, .rpy-30 { padding-bottom: 30px; } .rpb-35, .rpy-35 { padding-bottom: 35px; } .rpb-40, .rpy-40 { padding-bottom: 40px; } .rpb-45, .rpy-45 { padding-bottom: 45px; } .rpb-50, .rpy-50 { padding-bottom: 50px; } .rpb-55, .rpy-55 { padding-bottom: 55px; } .rpb-60, .rpy-60 { padding-bottom: 60px; } .rpb-65, .rpy-65 { padding-bottom: 65px; } .rpb-70, .rpy-70 { padding-bottom: 70px; } .rpb-75, .rpy-75 { padding-bottom: 75px; } .rpb-80, .rpy-80 { padding-bottom: 80px; } .rpb-85, .rpy-85 { padding-bottom: 85px; } .rpb-90, .rpy-90 { padding-bottom: 90px; } .rpb-95, .rpy-95 { padding-bottom: 95px; } .rpb-100, .rpy-100 { padding-bottom: 100px; } .rpb-105, .rpy-105 { padding-bottom: 105px; } .rpb-110, .rpy-110 { padding-bottom: 110px; } .rpb-115, .rpy-115 { padding-bottom: 115px; } .rpb-120, .rpy-120 { padding-bottom: 120px; } .rpb-125, .rpy-125 { padding-bottom: 125px; } .rpb-130, .rpy-130 { padding-bottom: 130px; } .rpb-135, .rpy-135 { padding-bottom: 135px; } .rpb-140, .rpy-140 { padding-bottom: 140px; } .rpb-145, .rpy-145 { padding-bottom: 145px; } .rpb-150, .rpy-150 { padding-bottom: 150px; } /* Margin Around */ .rm-0 { margin: 0px !important; } .rm-5 { margin: 5px !important; } .rm-10 { margin: 10px; } .rm-15 { margin: 15px; } .rm-20 { margin: 20px; } .rm-25 { margin: 25px; } .rm-30 { margin: 30px; } .rm-35 { margin: 35px; } .rm-40 { margin: 40px; } .rm-45 { margin: 45px; } .rm-50 { margin: 50px; } .rm-55 { margin: 55px; } .rm-60 { margin: 60px; } .rm-65 { margin: 65px; } .rm-70 { margin: 70px; } .rm-75 { margin: 75px; } .rm-80 { margin: 80px; } .rm-85 { margin: 85px; } .rm-90 { margin: 90px; } .rm-95 { margin: 95px; } .rm-100 { margin: 100px; } .rm-105 { margin: 105px; } .rm-110 { margin: 110px; } .rm-115 { margin: 115px; } .rm-120 { margin: 120px; } .rm-125 { margin: 125px; } .rm-130 { margin: 130px; } .rm-135 { margin: 135px; } .rm-140 { margin: 140px; } .rm-145 { margin: 145px; } .rm-150 { margin: 150px; } /* Margin Top */ .rmt-0, .rmy-0 { margin-top: 0px !important; } .rmt-5, .rmy-5 { margin-top: 5px !important; } .rmt-10, .rmy-10 { margin-top: 10px; } .rmt-15, .rmy-15 { margin-top: 15px; } .rmt-20, .rmy-20 { margin-top: 20px; } .rmt-25, .rmy-25 { margin-top: 25px; } .rmt-30, .rmy-30 { margin-top: 30px; } .rmt-35, .rmy-35 { margin-top: 35px; } .rmt-40, .rmy-40 { margin-top: 40px; } .rmt-45, .rmy-45 { margin-top: 45px; } .rmt-50, .rmy-50 { margin-top: 50px; } .rmt-55, .rmy-55 { margin-top: 55px; } .rmt-60, .rmy-60 { margin-top: 60px; } .rmt-65, .rmy-65 { margin-top: 65px; } .rmt-70, .rmy-70 { margin-top: 70px; } .rmt-75, .rmy-75 { margin-top: 75px; } .rmt-80, .rmy-80 { margin-top: 80px; } .rmt-85, .rmy-85 { margin-top: 85px; } .rmt-90, .rmy-90 { margin-top: 90px; } .rmt-95, .rmy-95 { margin-top: 95px; } .rmt-100, .rmy-100 { margin-top: 100px; } .rmt-105, .rmy-105 { margin-top: 105px; } .rmt-110, .rmy-110 { margin-top: 110px; } .rmt-115, .rmy-115 { margin-top: 115px; } .rmt-120, .rmy-120 { margin-top: 120px; } .rmt-125, .rmy-125 { margin-top: 125px; } .rmt-130, .rmy-130 { margin-top: 130px; } .rmt-135, .rmy-135 { margin-top: 135px; } .rmt-140, .rmy-140 { margin-top: 140px; } .rmt-145, .rmy-145 { margin-top: 145px; } .rmt-150, .rmy-150 { margin-top: 150px; } /* Margin Bottom */ .rmb-0, .rmy-0 { margin-bottom: 0px !important; } .rmb-5, .rmy-5 { margin-bottom: 5px !important; } .rmb-10, .rmy-10 { margin-bottom: 10px; } .rmb-15, .rmy-15 { margin-bottom: 15px; } .rmb-20, .rmy-20 { margin-bottom: 20px; } .rmb-25, .rmy-25 { margin-bottom: 25px; } .rmb-30, .rmy-30 { margin-bottom: 30px; } .rmb-35, .rmy-35 { margin-bottom: 35px; } .rmb-40, .rmy-40 { margin-bottom: 40px; } .rmb-45, .rmy-45 { margin-bottom: 45px; } .rmb-50, .rmy-50 { margin-bottom: 50px; } .rmb-55, .rmy-55 { margin-bottom: 55px; } .rmb-60, .rmy-60 { margin-bottom: 60px; } .rmb-65, .rmy-65 { margin-bottom: 65px; } .rmb-70, .rmy-70 { margin-bottom: 70px; } .rmb-75, .rmy-75 { margin-bottom: 75px; } .rmb-80, .rmy-80 { margin-bottom: 80px; } .rmb-85, .rmy-85 { margin-bottom: 85px; } .rmb-90, .rmy-90 { margin-bottom: 90px; } .rmb-95, .rmy-95 { margin-bottom: 95px; } .rmb-100, .rmy-100 { margin-bottom: 100px; } .rmb-105, .rmy-105 { margin-bottom: 105px; } .rmb-110, .rmy-110 { margin-bottom: 110px; } .rmb-115, .rmy-115 { margin-bottom: 115px; } .rmb-120, .rmy-120 { margin-bottom: 120px; } .rmb-125, .rmy-125 { margin-bottom: 125px; } .rmb-130, .rmy-130 { margin-bottom: 130px; } .rmb-135, .rmy-135 { margin-bottom: 135px; } .rmb-140, .rmy-140 { margin-bottom: 140px; } .rmb-145, .rmy-145 { margin-bottom: 145px; } .rmb-150, .rmy-150 { margin-bottom: 150px; } } /*******************************************************/ /***************** ## Custom Animation ****************/ /*******************************************************/ /* Animation Delay */ .delay-1-0s { -webkit-animation-delay: 1s; animation-delay: 1s; } .delay-2-0s { -webkit-animation-delay: 2s; animation-delay: 2s; } .delay-0-1s { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .delay-0-2s { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .delay-0-3s { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .delay-0-4s { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .delay-0-5s { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } .delay-0-6s { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .delay-0-7s { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .delay-0-8s { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .delay-0-9s { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .delay-1-1s { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .delay-1-2s { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .delay-1-3s { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .delay-1-4s { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .delay-1-5s { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } .delay-1-6s { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } .delay-1-7s { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; } .delay-1-8s { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } .delay-1-9s { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } @-webkit-keyframes toggler { 0%, 10% { background-position: 0 0, 0 calc(100%/3); } 50% { background-position: 0 0, calc(100%/3) calc(100%/3); } 90%, 100% { background-position: 0 0, calc(100%/3) 0; } } @keyframes toggler { 0%, 10% { background-position: 0 0, 0 calc(100%/3); } 50% { background-position: 0 0, calc(100%/3) calc(100%/3); } 90%, 100% { background-position: 0 0, calc(100%/3) 0; } } @-webkit-keyframes pulse { to { -webkit-box-shadow: 0 0 0 35px rgba(255, 255, 255, 0); box-shadow: 0 0 0 35px rgba(255, 255, 255, 0); } } @keyframes pulse { to { -webkit-box-shadow: 0 0 0 35px rgba(255, 255, 255, 0); box-shadow: 0 0 0 35px rgba(255, 255, 255, 0); } } /* Menu Sticky */ @-webkit-keyframes sticky { 0% { top: -100px; } 100% { top: 0; } } @keyframes sticky { 0% { top: -100px; } 100% { top: 0; } } /* Rotated Circle */ @-webkit-keyframes rotated_circle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes rotated_circle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } /* Rotated Circle reverse */ @-webkit-keyframes rotated_circle_reverse { 0% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes rotated_circle_reverse { 0% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } /* Rotated Man */ @-webkit-keyframes semi_rotated { 0%, 100% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 50% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } } @keyframes semi_rotated { 0%, 100% { -webkit-transform: rotate(8deg); transform: rotate(8deg); } 50% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } } /* BG Shape Rotated */ @-webkit-keyframes semi_rotated_two { 0%, 100% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 50% { -webkit-transform: rotate(30deg); transform: rotate(30deg); } } @keyframes semi_rotated_two { 0%, 100% { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } 50% { -webkit-transform: rotate(30deg); transform: rotate(30deg); } } @-webkit-keyframes move_arround { 0% { top: 20px; left: 20px; } 25% { top: 20px; left: -20px; } 50% { top: -20px; left: -20px; } 75% { top: -20px; left: 20px; } 100% { top: 20px; left: 20px; } } @keyframes move_arround { 0% { top: 20px; left: 20px; } 25% { top: 20px; left: -20px; } 50% { top: -20px; left: -20px; } 75% { top: -20px; left: 20px; } 100% { top: 20px; left: 20px; } } /* Hero Circle */ @-webkit-keyframes upDownLeft { 0%, 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25%, 75% { -webkit-transform: translate(0px, 50px); transform: translate(0px, 50px); } 50% { -webkit-transform: translate(-50px, 50px); transform: translate(-50px, 50px); } } @keyframes upDownLeft { 0%, 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 25%, 75% { -webkit-transform: translate(0px, 50px); transform: translate(0px, 50px); } 50% { -webkit-transform: translate(-50px, 50px); transform: translate(-50px, 50px); } } @-webkit-keyframes shapeAnimationOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 0px) rotate(270deg); transform: translate(150px, 0px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationOne { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 0px) rotate(270deg); transform: translate(150px, 0px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationTwo { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px, 0px) rotate(270deg); transform: translate(-150px, 0px) rotate(270deg); } 50% { -webkit-transform: translate(-150px, 150px) rotate(180deg); transform: translate(-150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationTwo { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px, 0px) rotate(270deg); transform: translate(-150px, 0px) rotate(270deg); } 50% { -webkit-transform: translate(-150px, 150px) rotate(180deg); transform: translate(-150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(0px, 150px) rotate(90deg); transform: translate(0px, 150px) rotate(90deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationThree { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(50px, 150px) rotate(90deg); transform: translate(50px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 50px) rotate(270deg); transform: translate(150px, 50px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationThree { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(50px, 150px) rotate(90deg); transform: translate(50px, 150px) rotate(90deg); } 50% { -webkit-transform: translate(150px, 150px) rotate(180deg); transform: translate(150px, 150px) rotate(180deg); } 75% { -webkit-transform: translate(150px, 50px) rotate(270deg); transform: translate(150px, 50px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationFour { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px -50px) rotate(90deg); transform: translate(-150px -50px) rotate(90deg); } 50% { -webkit-transform: translate(-150px, -150px) rotate(180deg); transform: translate(-150px, -150px) rotate(180deg); } 75% { -webkit-transform: translate(-50px, -150px) rotate(270deg); transform: translate(-50px, -150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationFour { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-150px -50px) rotate(90deg); transform: translate(-150px -50px) rotate(90deg); } 50% { -webkit-transform: translate(-150px, -150px) rotate(180deg); transform: translate(-150px, -150px) rotate(180deg); } 75% { -webkit-transform: translate(-50px, -150px) rotate(270deg); transform: translate(-50px, -150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes shapeAnimationFive { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-100px -100px) rotate(90deg); transform: translate(-100px -100px) rotate(90deg); } 50% { -webkit-transform: translate(100px, 50px) rotate(180deg); transform: translate(100px, 50px) rotate(180deg); } 75% { -webkit-transform: translate(-100px, 150px) rotate(270deg); transform: translate(-100px, 150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @keyframes shapeAnimationFive { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 25% { -webkit-transform: translate(-100px -100px) rotate(90deg); transform: translate(-100px -100px) rotate(90deg); } 50% { -webkit-transform: translate(100px, 50px) rotate(180deg); transform: translate(100px, 50px) rotate(180deg); } 75% { -webkit-transform: translate(-100px, 150px) rotate(270deg); transform: translate(-100px, 150px) rotate(270deg); } 100% { -webkit-transform: translate(0px, 0px) rotate(360deg); transform: translate(0px, 0px) rotate(360deg); } } @-webkit-keyframes down-up-one { 0% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(25px); transform: rotateX(0deg) translateY(25px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @keyframes down-up-one { 0% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } 50% { -webkit-transform: rotateX(0deg) translateY(25px); transform: rotateX(0deg) translateY(25px); } 100% { -webkit-transform: rotateX(0deg) translateY(0px); transform: rotateX(0deg) translateY(0px); } } @-webkit-keyframes down-up-two { 0% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } 50% { -webkit-transform: rotateX(0deg) translate(0, -25px); transform: rotateX(0deg) translate(0, -25px); } 100% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } } @keyframes down-up-two { 0% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } 50% { -webkit-transform: rotateX(0deg) translate(0, -25px); transform: rotateX(0deg) translate(0, -25px); } 100% { -webkit-transform: rotateX(0deg) translate(0px); transform: rotateX(0deg) translate(0px); } } @-webkit-keyframes leftRightOne { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(50px); transform: translateX(50px); } } @keyframes leftRightOne { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(50px); transform: translateX(50px); } } @-webkit-keyframes leftRightTwo { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } @keyframes leftRightTwo { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } @-webkit-keyframes zoomInOut { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes zoomInOut { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } } /* Preloader */ @-webkit-keyframes preloader { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes preloader { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Headline */ @-webkit-keyframes marquee { 100% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } } @keyframes marquee { 100% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } } @-webkit-keyframes marquee_right { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes marquee_right { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes marquee_left { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes marquee_left { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } /*******************************************************/ /******************* ## Header style *******************/ /*******************************************************/ .main-header { position: relative; left: 0px; top: 0px; z-index: 999; width: 100%; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .main-header .header-upper { z-index: 5; width: 100%; position: relative; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .main-header .logo-outer { -webkit-box-flex: 0; -ms-flex: none; flex: none; } @media only screen and (max-width: 991px) { .main-header .logo-outer { display: none; } } .main-header .logo { z-index: 9; padding: 2px 0; position: relative; } .main-header.menu-absolute .header-upper { position: absolute; } .main-header.fixed-header .header-upper { top: 0; left: 0; position: fixed; background: white; -webkit-animation: sticky 1s; animation: sticky 1s; -webkit-box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1); box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1); } @media only screen and (min-width: 992px) { .main-header.fixed-header .main-menu .navbar-collapse > ul > li { padding-top: 25px; padding-bottom: 25px; } } @media only screen and (max-width: 991px) { .nav-outer { width: 100%; } } /** Header Main Menu **/ @media only screen and (max-width: 991px) { .main-menu { width: 100%; } } .main-menu .mobile-logo { margin-right: auto; } @media only screen and (max-width: 575px) { .main-menu .mobile-logo { max-width: 150px; } } @media only screen and (max-width: 991px) { .main-menu .collapse { overflow: auto; } } .main-menu .navbar-collapse { padding: 0px; } .main-menu .navbar-collapse > ul { display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse > ul { display: block; padding: 25px 0; background: #f9f9f9; -webkit-box-shadow: inset 0px 0px 30px 0px rgba(87, 95, 245, 0.1); box-shadow: inset 0px 0px 30px 0px rgba(87, 95, 245, 0.1); } .main-menu .navbar-collapse > ul > li:last-child { border-bottom: 1px solid var(--border-color); } } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse { left: 0; width: 100%; position: absolute; max-height: calc(100vh - 80px); } } .main-menu .navbar-collapse li { padding: 35px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 1399px) { .main-menu .navbar-collapse li { padding-left: 10px; padding-right: 10px; } } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li { display: block; padding: 0 15px; border-top: 1px solid var(--border-color); } } .main-menu .navbar-collapse li.dropdown .dropdown-btn { cursor: pointer; margin-left: 5px; margin-bottom: -3px; color: var(--heading-color); } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li.dropdown .dropdown-btn { position: absolute; right: 10px; top: 0; width: 50px; height: 43px; border-left: 1px solid var(--border-color); text-align: center; line-height: 43px; } } .main-menu .navbar-collapse li a { display: block; opacity: 1; font-weight: 600; position: relative; color: var(--heading-color); font-family: var(--heading-font); text-transform: capitalize; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } @media only screen and (min-width: 376px) { .main-menu .navbar-collapse li a { font-size: 18px; } } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li a { padding: 10px 10px; line-height: 22px; } } .main-menu .navbar-collapse li a:hover { color: var(--primary-color); text-decoration: underline; } .main-menu .navbar-collapse li.current > a, .main-menu .navbar-collapse li.current-menu-item > a { font-weight: 500; } .main-menu .navbar-collapse li li { border-top: 1px solid var(--border-color); } .main-menu .navbar-collapse li li a { text-transform: capitalize; } .main-menu .navbar-collapse li li a:before { display: none; } .main-menu .navbar-collapse li .megamenu { position: absolute; left: 0px; top: 100%; width: 100%; z-index: 100; display: none; padding: 20px 0; background: #ffffff; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); } .main-menu .navbar-collapse li .megamenu:after { display: block; clear: both; content: ""; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li .megamenu { position: relative; -webkit-box-shadow: none; box-shadow: none; width: 100%; } .main-menu .navbar-collapse li .megamenu .container { max-width: 100%; } .main-menu .navbar-collapse li .megamenu .row { margin: 0px; } } .main-menu .navbar-collapse li .megamenu ul { display: block; position: relative; top: 0; width: 100%; -webkit-box-shadow: none; box-shadow: none; } .main-menu .navbar-collapse li ul { position: absolute; left: inherit; top: 100%; min-width: 250px; z-index: 100; display: none; background: white; -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li ul { position: relative; display: none; width: 100%; -webkit-box-shadow: none; box-shadow: none; background: transparent; } .main-menu .navbar-collapse li ul:after { display: block; clear: both; content: ""; } } @media only screen and (max-width: 991px) and (max-width: 375px) { .main-menu .navbar-collapse li ul { min-width: auto; } } .main-menu .navbar-collapse li ul li { width: 100%; padding: 7px 20px; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li ul li { padding: 0 15px; } } .main-menu .navbar-collapse li ul li ul { left: 100%; top: 0%; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li ul li ul { left: auto; } } .main-menu .navbar-header { display: none; } @media only screen and (max-width: 991px) { .main-menu .navbar-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } } .main-menu .navbar-header .navbar-toggle { float: right; padding: 4px 0; cursor: pointer; background: transparent; } .main-menu .navbar-header .navbar-toggle .icon-bar { background: var(--base-color); height: 2px; width: 30px; display: block; margin: 7px 0; } /* Menu Btns */ .menu-btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 1199px) { .menu-btns .theme-btn { display: none; } } /* Header Search */ .nav-search { position: relative; margin-left: 25px; } @media only screen and (max-width: 991px) { .nav-search { margin-right: 25px; } } @media only screen and (max-width: 375px) { .nav-search { margin-left: 15px; margin-right: 15px; } } .nav-search > button { background: transparent; } .nav-search form { position: absolute; width: 320px; top: 100%; right: 0; z-index: 777; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; -webkit-animation: fadeIn 0.5s; animation: fadeIn 0.5s; -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); } @media only screen and (max-width: 479px) { .nav-search form { width: 300px; } } @media only screen and (max-width: 375px) { .nav-search form { width: 250px; } } .nav-search form.hide { display: none; } .nav-search form input { border: none; padding: 15px 5px 15px 25px; } .nav-search form button { background: transparent; padding: 15px 20px 15px 0; } /* White Menu */ .main-header.white-menu .top-left { font-weight: 400; padding-top: 12px; padding-bottom: 12px; color: rgba(255, 255, 255, 0.65); } .main-header.white-menu .top-left:before { display: none; } .main-header.white-menu .top-right ul { z-index: 1; position: relative; padding-top: 16px; padding-bottom: 16px; } @media only screen and (min-width: 992px) { .main-header.white-menu .top-right ul { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } } .main-header.white-menu .top-right ul li > i { color: white; } .main-header.white-menu .top-right ul:before { content: ''; z-index: -1; height: 100%; width: 100vw; position: absolute; left: -80px; top: 0; background: var(--heading-color); } @media only screen and (max-width: 991px) { .main-header.white-menu .top-right ul:before { left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); } } @media only screen and (min-width: 992px) { .main-header.white-menu .navbar-collapse > ul > li > a, .main-header.white-menu .navbar-collapse > ul > li > .dropdown-btn { color: white; } } .main-header.white-menu .main-menu .navbar-header .navbar-toggle .icon-bar { background: white; } .main-header.white-menu .nav-search > button { color: white; } .main-header.white-menu .menu-sidebar > button { --c: conic-gradient(from -90deg, white 90deg, #0000 0); } .main-header.white-menu.fixed-header .header-upper { background: #222222; } /* Menu Sidebar */ .menu-sidebar { display: -webkit-box; display: -ms-flexbox; display: flex; } .menu-sidebar > button { cursor: pointer; width: 25px; aspect-ratio: 1; --c: conic-gradient(from -90deg, #000000 90deg, #0000 0); background: var(--c), var(--c); background-size: 40% 40%; } .menu-sidebar > button:hover { -webkit-animation: toggler 1s infinite alternate; animation: toggler 1s infinite alternate; } /** hidden-sidebar * */ .hidden-bar { position: fixed; right: -350px; top: 0px; opacity: 0; width: 350px; height: 100%; z-index: 99999; overflow-y: auto; visibility: hidden; background-color: #222222; border-left: 1px solid #231b26; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } @media only screen and (max-width: 375px) { .hidden-bar { width: 300px; } } .hidden-bar .social-style-one a { width: 40px; height: 40px; line-height: 40px; } .hidden-bar .social-style-one a:hover { color: var(--primary-color); } .side-content-visible .hidden-bar { right: 0px; opacity: 1; visibility: visible; } .hidden-bar .inner-box { position: relative; padding: 100px 40px 50px; } @media only screen and (max-width: 375px) { .hidden-bar .inner-box { padding-left: 25px; padding-right: 25px; } } .hidden-bar .inner-box .cross-icon { position: absolute; right: 30px; top: 30px; cursor: pointer; color: #ffffff; font-size: 20px; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; } .hidden-bar .inner-box h4 { position: relative; color: #ffffff; font-size: 25px; margin-bottom: 35px; } /*Appointment Form */ .hidden-bar .appointment-form { position: relative; } .hidden-bar .appointment-form .form-group { position: relative; margin-bottom: 20px; } .hidden-bar .appointment-form input[type="text"], .hidden-bar .appointment-form input[type="email"] { position: relative; display: block; width: 100%; line-height: 23px; padding: 10px 25px; color: #ffffff; font-size: 16px; background: none; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; border: 1px solid rgba(255, 255, 255, 0.1); } .hidden-bar .appointment-form textarea { position: relative; display: block; width: 100%; line-height: 23px; padding: 10px 25px; color: #ffffff; font-size: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: none; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; resize: none; } .hidden-bar .appointment-form input::-webkit-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form input:-ms-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form input::-ms-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form input::placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form textarea::-webkit-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form textarea:-ms-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form textarea::-ms-input-placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form textarea::placeholder { font-size: 14px; color: #bdbdbd; } .hidden-bar .appointment-form .form-group button { width: 100%; font-size: 16px; padding: 10px 15px; margin-bottom: 20px; border-color: white; } .form-back-drop { position: fixed; left: 100%; top: 0px; width: 100%; height: 100%; opacity: 0; background: rgba(0, 0, 0, 0.7); visibility: hidden; z-index: 9990; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .side-content-visible .form-back-drop { opacity: 1; left: 0; visibility: visible; } @media only screen and (max-width: 991px) { .header-top { padding-bottom: 20px; } } @media only screen and (max-width: 767px) { .header-top { display: none; } } .header-top .top-left { color: var(--heading-color); font-weight: 500; line-height: 20px; padding-top: 18px; padding-bottom: 18px; position: relative; z-index: 1; } @media only screen and (min-width: 992px) { .header-top .top-left:before { content: ''; position: absolute; right: 0; top: 0; background: var(--primary-color); width: 50vw; height: 100%; -webkit-clip-path: polygon(0 0, calc(100% - 20px) 0%, 100% 100%, 0% 100%); clip-path: polygon(0 0, calc(100% - 20px) 0%, 100% 100%, 0% 100%); z-index: -1; } } @media only screen and (max-width: 991px) { .header-top .top-left { color: rgba(255, 255, 255, 0.65); } } .header-top .top-right ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 992px) { .header-top .top-right ul { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .header-top .top-right ul li { line-height: 1; } .header-top .top-right ul li:not(:last-child) { margin-right: 50px; padding-right: 50px; border-right: 2px solid rgba(255, 255, 255, 0.2); } @media only screen and (max-width: 1199px) { .header-top .top-right ul li:not(:last-child) { margin-right: 20px; padding-right: 20px; } } .header-top .top-right ul li > i { color: var(--primary-color); margin-right: 10px; } .header-top .top-right ul li a { color: rgba(255, 255, 255, 0.65); } .header-top .top-right ul li a:hover { color: var(--primary-color); } /*******************************************************/ /******************* ## Slider Area ********************/ /*******************************************************/ .slider-item { padding-top: 145px; padding-bottom: 145px; z-index: 1; position: relative; background-size: cover; background-position: center; } .slider-item::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.65; background-color: var(--heading-color); } .slider-item:before { mix-blend-mode: multiply; } @media only screen and (max-width: 991px) { .slider-item { padding-top: 100px; padding-bottom: 100px; } } .slider-item:after { position: absolute; left: 0; top: 0; content: ''; z-index: -1; width: 45%; height: 100%; background: rgba(0, 0, 0, 0.5); -webkit-clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 0% 0%); clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 0% 0%); } @media only screen and (max-width: 1199px) { .slider-item:after { width: 75%; -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%); clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0% 0%); } } .slider-item .bg-lines.for-black-bg span { background: rgba(255, 255, 255, 0.1); } .slide-content { color: white; max-width: 640px; position: relative; z-index: 2; } .slide-content > * { opacity: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } .slide-content .sub-title { line-height: 1; padding: 13px 20px; background: white; margin-bottom: 22px; display: inline-block; text-transform: capitalize; } @media only screen and (max-width: 575px) { .slide-content .sub-title { font-size: 16px; } } @media only screen and (max-width: 575px) { .slide-content .sub-title { font-size: 14px; } } .slide-content h1 { color: white; font-size: 75px; line-height: 1.2; margin-bottom: 32px; } @media only screen and (max-width: 991px) { .slide-content h1 { font-size: 65px; } } @media only screen and (max-width: 767px) { .slide-content h1 { font-size: 55px; } } @media only screen and (max-width: 575px) { .slide-content h1 { font-size: 45px; } } @media only screen and (max-width: 479px) { .slide-content h1 { font-size: 38px; line-height: 1.4; } } @media only screen and (max-width: 375px) { .slide-content h1 { font-size: 32px; } } .slide-content p { font-size: 22px; line-height: 1.8; } @media only screen and (max-width: 991px) { .slide-content p { font-size: 20px; } } @media only screen and (max-width: 575px) { .slide-content p { font-size: 18px; } } @media only screen and (max-width: 375px) { .slide-content p { font-size: 16px; } } .slide-content .theme-btn { margin-top: 15px; } .slider-image { opacity: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transform: translate(-20px); -ms-transform: translate(-20px); transform: translate(-20px); } .dot-wrap { position: absolute; right: 0; top: 38%; width: 100%; } .main-slider-dots { right: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .main-slider-dots .slick-dots { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .main-slider-dots .slick-dots li { margin: 10px 0; background: white; } .main-slider-dots .slick-dots li.slick-active:after { border-color: white; } .slick-active .slide-content > * { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .slick-active .slide-content .sub-title { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .slick-active .slide-content h1 { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .slick-active .slide-content p { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .slick-active .slide-content .theme-btn { -webkit-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; } .slick-active .slide-content .video-play-text { -webkit-transition-delay: 0.9s; -o-transition-delay: 0.9s; transition-delay: 0.9s; } .slick-active .slider-image { opacity: 1; -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } /* Slider Two */ .slider-item-two .slide-content { color: #C9CAD0; margin-bottom: 35px; } @media only screen and (max-width: 991px) { .slider-item-two .slide-content { margin-bottom: 55px; } } .slider-item-two .slide-content .sub-title-two { font-size: 26px; font-weight: 500; margin-bottom: 15px; display: inline-block; } @media only screen and (max-width: 575px) { .slider-item-two .slide-content .sub-title-two { font-size: 22px; } } @media only screen and (max-width: 375px) { .slider-item-two .slide-content .sub-title-two { font-size: 20px; } } .slider-item-two .slide-content .sub-title-two i { margin-right: 10px; color: var(--primary-color); } @media only screen and (min-width: 768px) and (max-width: 1199px) { .slider-item-two .slide-content h1 { font-size: 60px; } } .slider-two-dots .slick-dots { z-index: 2; margin-top: -15px; position: absolute; } @media only screen and (max-width: 991px) { .slider-two-dots .slick-dots { margin-top: -35px; padding: 15px 10px; background: #222222; } } .slider-two-dots .slick-dots li { background: white; } .slider-two-dots .slick-dots li:after { border-color: white; } /* Slider Three */ .main-slider-three { z-index: 1; position: relative; } .main-slider-three::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.3; background-color: black; } @media only screen and (min-width: 1400px) { .main-slider-three { margin-left: 30px; margin-right: 30px; } } .main-slider-three .dot-wrap { top: 45%; } .slider-item-three { padding-top: 50px; padding-bottom: 50px; } .slider-item-three .slide-content { max-width: 765px; } .slider-item-three .slide-content .btn-and-video .video-play-text > i { color: var(--primary-color); } .slider-item-three .slide-content .btn-and-video .video-play-text span { color: white; font-size: 14px; text-decoration: none; } .slider-item-three .slide-content .btn-and-video .video-play-text span i { margin-left: 4px; } /*******************************************************/ /******************* ## Page Banner *******************/ /*******************************************************/ .page-banner-area { z-index: 1; position: relative; } .page-banner-area::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.7; background-color: black; } .page-banner-area:before { mix-blend-mode: multiply; } .banner-inner h2 { color: white; margin-bottom: 22px; } @media only screen and (min-width: 992px) { .banner-inner h2 { font-size: 65px; } } @media only screen and (max-width: 767px) { .banner-inner h2 { font-size: 40px; margin-bottom: 10px; } } @media only screen and (max-width: 575px) { .banner-inner h2 { font-size: 36px; } } @media only screen and (max-width: 375px) { .banner-inner h2 { font-size: 33px; } } .banner-inner h3 { line-height: 1.58; margin-bottom: 20px; } @media only screen and (max-width: 991px) { .banner-inner h3 { font-size: 30px; } } @media only screen and (max-width: 767px) { .banner-inner h3 { font-size: 25px; } } @media only screen and (max-width: 575px) { .banner-inner h3 { font-size: 22px; } } @media only screen and (max-width: 375px) { .banner-inner h3 { font-size: 20px; } } .banner-inner .blog-meta li i, .banner-inner .blog-meta li a { color: rgba(255, 255, 255, 0.75); } @media only screen and (min-width: 576px) { .banner-text { font-size: 18px; } } .breadcrumb { padding: 0; margin: 0; font-size: 24px; background: transparent; text-transform: capitalize; } @media only screen and (max-width: 575px) { .breadcrumb { font-size: 18px; } } @media only screen and (max-width: 375px) { .breadcrumb { font-size: 16px; } } .breadcrumb .breadcrumb-item { padding: 0; font-weight: 400; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .breadcrumb .breadcrumb-item a { color: white; } .breadcrumb .breadcrumb-item a:hover { color: var(--primary-color); } .breadcrumb .breadcrumb-item.active { color: white; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .breadcrumb .breadcrumb-item + .breadcrumb-item::before { margin-left: 15px; margin-right: 15px; -webkit-box-flex: 0; -ms-flex: none; flex: none; color: white; content: "\f101"; font-weight: 300; font-family: "Font Awesome 5 Pro"; } /* Advertise Banner */ .advertise-banner { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; height: calc(100% - 30px); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .advertise-banner.style-one { color: var(--heading-color); background-size: cover; padding: 25px 50px 0 40px; background-position: center; } @media only screen and (max-width: 575px) { .advertise-banner.style-one { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .advertise-banner.style-one .image { -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end; } .advertise-banner.style-one .content { max-width: 215px; } @media only screen and (max-width: 575px) { .advertise-banner.style-one .content { max-width: none; margin-bottom: 20px; } } .advertise-banner.style-one .content .number { line-height: 1; display: block; font-size: 85px; font-weight: 700; margin-bottom: 8px; } @media only screen and (max-width: 375px) { .advertise-banner.style-one .content .number { font-size: 60px; } } .advertise-banner.style-one .content h6 { font-size: 20px; font-weight: 600; color: var(--heading-color); } .advertise-banner.style-one .content hr { height: 2px; background-color: var(--heading-color); opacity: 1; margin-top: 35px; } .advertise-banner.style-one .content p { font-weight: 500; } .advertise-banner.style-two { color: var(--heading-color); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-repeat: no-repeat; padding: 50px 60px 35px 60px; background-position: top right; } @media only screen and (max-width: 479px) { .advertise-banner.style-two { padding-left: 35px; padding-right: 35px; } } .advertise-banner.style-two h3 { color: white; font-size: 27px; margin-bottom: 20px; } @media only screen and (max-width: 375px) { .advertise-banner.style-two h3 { font-size: 25px; } } .advertise-banner.style-two hr { opacity: 0.7; height: 2px; background-color: white; } .advertise-banner.style-two .authors-text { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: auto; } .advertise-banner.style-two .authors-text .text { color: white; font-weight: 400; max-width: 202px; margin-top: 15px; margin-bottom: 15px; } /*******************************************************/ /******************* ## About Area ********************/ /*******************************************************/ .about-image { z-index: 1; max-width: 630px; padding-right: 7%; position: relative; padding-bottom: 20%; } .about-image:before { position: absolute; left: 0; bottom: 0; content: ''; width: 340px; height: 340px; z-index: -1; border-radius: 50%; -webkit-transform: translate(-40%); -ms-transform: translate(-40%); transform: translate(-40%); border: 65px solid var(--lighter-color); } @media only screen and (max-width: 479px) { .about-image:before { width: 200px; height: 200px; border-width: 35px; } } .about-image img { width: 100%; } .about-image .circle-progress-wrap { position: absolute; right: 0; bottom: 0; max-width: 222px; background: white; padding: 30px 45px 35px; border: 5px solid var(--primary-color); -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); } @media only screen and (max-width: 375px) { .about-image .circle-progress-wrap { max-width: 200px; padding: 15px 25px 20px; } } .about-image .circle-progress-wrap .progress-content { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: self-start; -ms-flex-align: self-start; align-items: self-start; } .about-image .circle-progress-wrap .progress-content h6 { margin-bottom: 20px; } .about-image .circle-progress-wrap .progress-content canvas { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .about-image .circle-progress-wrap .progress-content .counting { position: absolute; left: 50px; bottom: 50px; font-size: 24px; -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); transform: translate(-50%, 50%); } .about-image.style-two:before { display: none; } @media only screen and (min-width: 480px) { .about-image.style-two { padding-right: 0; padding-bottom: 0; } } .about-image.style-three:before { display: none; } @media only screen and (min-width: 480px) { .about-image.style-three { padding-right: 0; padding-bottom: 0; } } .about-image.style-three .circle-progress-wrap { left: 0; } @media only screen and (max-width: 479px) { .about-content .video-play-text span { display: none; } } /* Achievement Area */ .achievement-left-content p { font-weight: 500; } .achievement-left-content p a { color: var(--primary-color); text-decoration: underline; } .achievement-right-part .counter-item .icon { background: var(--primary-color); } .achievement-right-part .counter-item .counter-title { color: var(--base-color); } /* Why Choose */ .why-choose-video .image { padding-top: 40px; padding-right: 40px; position: relative; } @media only screen and (min-width: 1200px) { .why-choose-video .image { margin-right: 55px; } } .why-choose-video .image .video-play { position: absolute; right: 0; top: 0; width: 80px; height: 80px; font-size: 14px; line-height: 70px; color: var(--heading-color); border: 7.5px solid white; background: var(--primary-color); } /* About Three */ @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-content-three .section-title h2 { font-size: 44px; } } /* Who We Are Content */ .who-we-are-content { max-width: 500px; } .who-we-are-content .service-item-three.style-two { margin-bottom: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .who-we-are-content .service-item-three.style-two:not(:last-child) { margin-bottom: 20px; } @media only screen and (min-width: 480px) { .who-we-are-content .service-item-three.style-two:nth-child(even) { margin-right: 30px; } } .who-we-are-content .service-item-three.style-two:nth-child(odd) { margin-left: 30px; } .who-we-are-content .service-item-three.style-two .icon { font-size: 50px; margin-bottom: 0; margin-right: 25px; } .who-we-are-content .service-item-three.style-two h5 { margin-bottom: 3px; } @media only screen and (min-width: 576px) { .who-we-are-content .service-item-three.style-two h5 { font-size: 24px; } } @media only screen and (max-width: 479px) { .who-we-are-content .service-item-three.style-two h5 { font-size: 20px; } } /*******************************************************/ /****************** ## Services Area *******************/ /*******************************************************/ .bgc-lighter .service-item { background: white; } .service-item { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding: 38px 55px; margin-bottom: 30px; background: var(--lighter-color); border-top: 5px solid var(--lighter-color); } @media only screen and (max-width: 1399px) { .service-item { padding-left: 35px; padding-right: 35px; } } .service-item .icon { line-height: 1; font-size: 55px; margin-bottom: 15px; color: var(--primary-color); } .service-item h5 { margin-bottom: 12px; } .service-item p { margin-bottom: 10px; } .service-item:hover { background: white; border-color: var(--primary-color); -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); } .service-item.style-two { padding: 40px; border-top: none; background: white; -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.02); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.02); } @media only screen and (max-width: 375px) { .service-item.style-two { padding-left: 30px; padding-right: 30px; } } .service-item.style-two .icon { width: 80px; height: 80px; font-size: 50px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; line-height: 80px; text-align: center; margin-bottom: 30px; background: rgba(var(--primary-rgb), 0.1); } .service-item.style-two h5 { font-size: 20px; } .service-item.style-two p { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .service-item.style-two .read-more { width: 100%; margin-top: 18px; padding: 7px 15px; color: var(--heading-color); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: rgba(var(--primary-rgb), 0.1); } .service-item.style-two:hover { background: var(--primary-color); } .service-item.style-two:hover .icon { background: white; } .service-item.style-two:hover p { color: var(--heading-color); } .service-item.style-two:hover .read-more { color: white; background: var(--heading-color); } .service-item.style-three { border-top: none; background: white; margin-bottom: 80px; position: relative; padding: 30px 40px 20px; -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); } @media only screen and (max-width: 375px) { .service-item.style-three { padding-left: 30px; padding-right: 30px; } } .service-item.style-three .icon { width: 80px; height: 80px; font-size: 45px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; line-height: 80px; text-align: center; position: absolute; right: 30px; top: -30px; background: var(--lighter-color); } .service-item.style-three .number { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-bottom: 4px; display: inline-block; } .service-item.style-three h5 { font-size: 20px; } .service-item.style-three p { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .service-item.style-three .read-more { opacity: 0; z-index: -1; width: 100%; position: absolute; left: 0; top: 95%; padding: 7px 15px; color: var(--heading-color); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--primary-color); } .service-item.style-three:hover { z-index: 2; background: var(--heading-color); } .service-item.style-three:hover .icon { color: var(--heading-color); background: var(--primary-color); } .service-item.style-three:hover .number, .service-item.style-three:hover h5 a, .service-item.style-three:hover p { color: white; } .service-item.style-three:hover .read-more { top: 100%; opacity: 1; } .service-item-two { margin-bottom: 30px; } .service-item-two .icon { line-height: 1; font-size: 50px; margin-bottom: 11px; color: var(--primary-color); } .service-item-two h6 { margin-bottom: 15px; } @media only screen and (min-width: 376px) { .service-item-two h6 { font-size: 20px; } } .service-item-two.style-two { z-index: 1; max-width: 305px; position: relative; } .service-item-two.style-two .number { opacity: 0; z-index: -1; line-height: 1; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-size: 150px; font-weight: 700; position: absolute; right: 75px; top: -15px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.07)), to(rgba(0, 0, 0, 0))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.07) 0%, rgba(0, 0, 0, 0) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0.07) 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.07) 0%, rgba(0, 0, 0, 0) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } .service-item-two.style-two .icon { font-size: 60px; margin-bottom: 20px; } .service-item-two.style-two h5 { margin-bottom: 15px; } .service-item-two.style-two .theme-btn { font-size: 14px; margin-top: 10px; padding: 7px 30px; background: white; color: var(--base-color); } .service-item-two.style-two:hover .number { opacity: 1; } .service-item-two.style-two:hover .theme-btn { color: white; background: var(--primary-color); } @media only screen and (min-width: 376px) { .service-item-three { display: -webkit-box; display: -ms-flexbox; display: flex; } } .service-item-three:not(:last-child) { margin-bottom: 28px; } .service-item-three .icon { line-height: 1; font-size: 45px; color: var(--primary-color); margin: 8px 30px 20px 0; } .service-item-three .content h5 { margin-bottom: 11px; } .service-item-three .content p { margin-bottom: 0; } .service-item-three.style-two { background: white; margin-bottom: 5px; padding: 20px 30px 20px; -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); } .service-item-four { padding: 10px; position: relative; background: white; margin-bottom: 30px; -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); } @media only screen and (min-width: 576px) { .service-item-four { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media only screen and (max-width: 575px) { .service-item-four { text-align: center; padding-bottom: 20px; } } .service-item-four .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 50%; margin-right: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-item-four .image { margin-right: 20px; } } @media only screen and (max-width: 575px) { .service-item-four .image { margin-right: 0; max-width: none; margin-bottom: 20px; } } .service-item-four .content .icon { line-height: 1; font-size: 50px; margin-bottom: 10px; color: var(--primary-color); } .service-item-four .content h5 { font-size: 20px; margin-bottom: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-item-four .content h5 { font-size: 18px; } } .service-item-four .content p { margin-bottom: 5px; } .service-item-four .content:after { position: absolute; right: 10px; top: 10px; content: ''; width: 30px; height: 30px; background: var(--lighter-color); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%); } .why-choose-right { padding: 50px 60px 40px; background: var(--lighter-color); border: 1px solid rgba(31, 33, 44, 0.2); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .why-choose-right { padding-left: 35px; padding-right: 35px; } } @media only screen and (max-width: 575px) { .why-choose-right { padding-left: 35px; padding-right: 35px; } } @media only screen and (max-width: 479px) { .why-choose-right { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 376px) { .progress-with-service { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .progress-with-service:not(:last-child) { padding-bottom: 28px; margin-bottom: 50px; border-bottom: 1px solid var(--border-color); } .progress-with-service .service-progress { margin-right: 40px; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .progress-with-service .service-progress { margin-right: 30px; } } @media only screen and (max-width: 575px) { .progress-with-service .service-progress { margin-right: 20px; } } @media only screen and (max-width: 375px) { .progress-with-service .service-progress { margin-bottom: 10px; } } .progress-with-service .service-progress .counting { font-size: 24px; position: absolute; left: 23%; top: 29%; } @media only screen and (max-width: 375px) { .progress-with-service .service-progress .counting { left: 8%; } } @media only screen and (min-width: 376px) { .progress-with-service .content { margin-top: -8px; } } .progress-with-service .content h5 { margin-bottom: 8px; } @media only screen and (max-width: 479px) { .progress-with-service .content h5 { font-size: 18px; } } .progress-with-service .content p { margin-bottom: 0; } /* Services Two */ .services-bg { position: relative; } @media only screen and (min-width: 1200px) { .services-bg { margin-top: -55px; } } .services-bg:before { content: ''; z-index: -2; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: var(--lighter-color); width: calc(100% + 210px); height: 100%; } /* Service Theree */ .for-service-bg { z-index: 1; position: relative; } .for-service-bg:before { content: ''; z-index: -1; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: var(--lighter-color); width: calc(100% + 160px); height: 100%; } /* Services Details */ @media only screen and (max-width: 767px) { .service-details-conntent .title { font-size: 30px; } } @media only screen and (max-width: 575px) { .service-details-conntent .title { font-size: 25px; } } .next-prev-services { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .np-service-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 50px; } @media only screen and (max-width: 1199px) { .np-service-item { width: 100%; } } .np-service-item:last-child { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media only screen and (max-width: 767px) { .np-service-item .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 33%; } } .np-service-item .image:first-child { margin-right: 65px; } @media only screen and (max-width: 479px) { .np-service-item .image:first-child { margin-right: 25px; } } @media only screen and (max-width: 767px) { .np-service-item .content h4 { font-size: 25px; } } @media only screen and (max-width: 375px) { .np-service-item .content h4 { font-size: 20px; } } .np-service-item .content:first-child { text-align: right; margin-right: 65px; } @media only screen and (max-width: 479px) { .np-service-item .content:first-child { margin-right: 25px; } } /*******************************************************/ /****************** ## Counter Area *******************/ /*******************************************************/ .counter-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 80px 65px 45px; -webkit-transform: translateY(70px); -ms-transform: translateY(70px); transform: translateY(70px); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 767px) { .counter-wrap { padding: 50px 35px 15px; } } @media only screen and (max-width: 575px) { .counter-wrap { padding-left: 15px; padding-right: 15px; } } .counter-wrap .counter-item { padding-left: 15px; padding-right: 15px; } @media only screen and (min-width: 376px) and (max-width: 575px) { .counter-wrap .counter-item { max-width: 50%; } } .counter-item { margin-bottom: 30px; } .counter-item .icon { width: 20px; height: 20px; margin-bottom: 26px; background: var(--heading-color); -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%); clip-path: polygon(0 0, 0 100%, 100% 100%); } .counter-item .count-text { display: block; margin-bottom: 8px; } @media only screen and (max-width: 575px) { .counter-item .count-text { font-size: 35px; } } .counter-item .counter-title { margin-bottom: 0; } @media only screen and (max-width: 575px) { .counter-item .counter-title { font-size: 16px; } } .counter-item.style-two { margin-top: 30px; background: white; padding: 0 40px 33px; } .counter-item.style-two .icon { width: 90px; height: 90px; color: white; font-size: 50px; -webkit-clip-path: none; clip-path: none; margin-bottom: 0; line-height: 90px; text-align: center; background: var(--primary-color); -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } .counter-item.style-two .counter-title { font-weight: 500; color: var(--base-color); font-family: var(--base-font); } .count-text.plus:after { content: '+'; } .count-text.k-plus:after { content: 'k+'; } .count-text.percent:after { content: '%'; } /* Counter Two */ .counter-item-two { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 30px; } .counter-item-two .count-text { line-height: 1; font-size: 75px; font-weight: 600; margin-right: 30px; color: var(--heading-color); } @media only screen and (max-width: 375px) { .counter-item-two .count-text { font-size: 55px; } } .counter-item-two .counter-title { font-weight: 500; color: var(--base-color); } @media only screen and (min-width: 376px) { .counter-item-two .counter-title { font-size: 22px; } } /* Progress Counter */ .progress-contentt.style-two { display: -webkit-box; display: -ms-flexbox; display: flex; background: white; margin-bottom: 30px; padding: 40px 50px; position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: self-start; -ms-flex-align: self-start; align-items: self-start; } @media only screen and (max-width: 575px) { .progress-contentt.style-two { margin-top: 0; } } .progress-contentt.style-two h6 { margin-bottom: 20px; } .progress-contentt.style-two canvas { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .progress-contentt.style-two .counting { font-size: 24px; position: absolute; left: 100px; bottom: 88px; -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); transform: translate(-50%, 50%); } .progress-contentt.style-two.white { background: var(--primary-color); } /*******************************************************/ /****************** ## Projects Area *******************/ /*******************************************************/ .projects-active { margin-left: -15px; margin-right: -15px; } .projects-active .project-item { margin-left: 15px; margin-right: 15px; } .projects-active .slick-dots { margin-top: 25px; } .project-item { position: relative; margin-bottom: 50px; } .project-item .content { position: absolute; left: 0; top: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; max-width: 320px; background: white; padding: 30px 35px; -webkit-box-shadow: inset 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: inset 0px 4px 60px rgba(0, 0, 0, 0.07); } @media only screen and (max-width: 375px) { .project-item .content { padding: 20px; max-width: 200px; } } .project-item .content .category { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-weight: 500; } .project-item .content h6 { margin-bottom: 5px; } @media only screen and (min-width: 376px) { .project-item .content h6 { font-size: 20px; } } .project-item .content .read-more { color: var(--primary-color); } .project-item .image { padding-top: 10%; padding-left: 16%; } @media only screen and (max-width: 575px) { .project-item .image { padding-top: 25%; } } @media only screen and (max-width: 375px) { .project-item .image { padding-top: 35%; } } .project-item .image img { width: 100%; } .project-item:hover .content { background: var(--primary-color); } .project-item:hover .content .category, .project-item:hover .content .read-more { color: var(--heading-color); } /* Project Two */ .projects-two-active { margin-left: -15px; margin-right: -15px; } .projects-two-active .project-item-two { margin-left: 15px; margin-right: 15px; } .projects-two-active .slick-dots { margin-top: 45px; } .project-item-two { margin-bottom: 30px; } .project-item-two .project-content { max-width: 325px; background: white; margin-top: -78px; margin-left: auto; position: relative; -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); } .project-item-two .project-content .top { padding: 20px 45px; } @media only screen and (max-width: 1599px) { .project-item-two .project-content .top { padding-left: 35px; padding-right: 35px; } } .project-item-two .project-content .top .category { line-height: 1; font-size: 14px; } .project-item-two .project-content .top h6 { margin-top: -4px; } @media only screen and (min-width: 376px) { .project-item-two .project-content .top h6 { font-size: 20px; } } .project-item-two .project-content .bottom .read-more { width: 100%; padding: 10px 45px; border-top: 1px solid var(--border-color); } @media only screen and (max-width: 1599px) { .project-item-two .project-content .bottom .read-more { padding-left: 35px; padding-right: 35px; } } .project-item-two:hover .project-content .read-more { color: var(--heading-color); border-color: transparent; background: var(--primary-color); } /* Project Style Three */ .project-item-three { position: relative; margin-bottom: 30px; } .project-item-three .image { z-index: 1; position: relative; } .project-item-three .image::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0; background-color: black; } .project-item-three .image img { width: 100%; } .project-item-three .image:before { z-index: 1; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .project-item-three .project-content { position: absolute; left: 30px; bottom: 30px; z-index: 2; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; max-width: 325px; background: white; padding: 32px 50px 35px; } @media only screen and (max-width: 479px) { .project-item-three .project-content { left: 15px; bottom: 15px; } } @media only screen and (max-width: 375px) { .project-item-three .project-content { right: 15px; padding: 22px 25px 25px; } } .project-item-three .project-content .category { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; color: var(--primary-color); } .project-item-three .project-content h5 { margin-bottom: 0; } .project-item-three .project-content h5 a { text-decoration: underline; } .project-item-three .project-content .bottom { display: none; } .project-item-three .project-content .bottom .details-btn { width: 50px; height: 50px; font-size: 14px; margin-top: 15px; line-height: 50px; background: white; margin-bottom: 5px; color: var(--primary-color); } .project-item-three:hover .image:before { opacity: 0.65; } .project-item-three:hover .project-content { background: var(--primary-color); } .project-item-three:hover .project-content .category { color: white; } .project-item-three:hover .project-content h5 a { color: white; } .project-item-three:hover .project-content .details-btn { border-color: white; } .project-item-three.style-two { margin-bottom: 0; } .project-item-three.style-two .image:before { background: #1F212C; } .project-item-three.style-two .project-content { padding: 0; left: 50px; opacity: 0; bottom: 40px; background: transparent; } @media only screen and (max-width: 767px) { .project-item-three.style-two .project-content { left: 20px; } } @media only screen and (max-width: 479px) { .project-item-three.style-two .project-content { bottom: 20px; } } .project-item-three.style-two .project-content .category { color: white; } .project-item-three.style-two .project-content h5 a { color: white; } .project-item-three.style-two .project-content .details-btn { width: 55px; height: 55px; border: none; font-size: 16px; margin-top: 24px; line-height: 59px; color: var(--heading-color); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); background: var(--primary-color); } @media only screen and (max-width: 375px) { .project-item-three.style-two .project-content .details-btn { display: none; } } .project-item-three.style-two:hover .image:before { opacity: 0.85; } .project-item-three.style-two:hover .project-content { opacity: 1; } /* Project Nav */ .project-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: -5px; margin-right: -5px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .project-nav li { cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-weight: 500; padding: 2px 20px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; color: var(--heading-color); } @media only screen and (max-width: 375px) { .project-nav li { padding-left: 15px; padding-right: 15px; } } .project-nav li.active { background: var(--primary-color); } .project-active .project-item-two .project-content { -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); } .project-active .project-item-two:hover .project-content h6 a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .project-active .project-item-two:hover .read-more { background: white; color: var(--primary-color); border-top-color: var(--border-color); } /* Project Details */ .project-details-info { padding: 33px 45px 40px; background: var(--lighter-color); border-top: 3px solid var(--primary-color); } @media only screen and (max-width: 375px) { .project-details-info { padding-left: 30px; padding-right: 30px; } } .project-details-info h5 { font-size: 24px; margin-bottom: 18px; } .project-details-info table { width: 100%; font-weight: 500; color: var(--heading-color); } .project-details-info table b { font-weight: 500; color: var(--base-color); } .project-details-info table tr { border-bottom: 1px solid var(--border-color); } .project-details-info table tr td { padding-top: 10px; padding-bottom: 10px; } .project-details-info .social-style-two a { border: none; font-size: 14px; margin-top: 10px; padding-top: 2px; background: rgba(42, 44, 56, 0.1); } .project-details-info .social-style-two a:hover { color: white; background: var(--primary-color); } /*******************************************************/ /******************* ## Team Area *******************/ /*******************************************************/ .team-area { background-color: #000080; } .team-member { margin-bottom: 30px; } .team-member .image { z-index: 1; position: relative; z-index: 2; } .team-member .image::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0; background-color: #000080; } .team-member .image::before { z-index: 1; mix-blend-mode: multiply; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .team-member .image img { width: 100%; } .team-member .content { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; max-width: 100%; margin-top: -40px; margin-left: auto; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 22px 40px 30px; z-index: 1; position: relative; z-index: 2; } .team-member .content::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 1; background-color: white; } .team-member .content:before { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; height: calc(100% - 55px); -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.1); } .team-member .content h6 { font-size: 20px; margin-bottom: 3px; } .team-member .content .designation { display: block; font-weight: 500; margin-bottom: 10px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .team-member .content .social-style-two { opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; visibility: hidden; } .team-member .content .social-style-two a { color: var(--heading-color); border-color: black; line-height: 37px; } .team-member .content .social-style-two a:hover { color: white; background: black; } .team-member:hover .image::before { opacity: .7; } .team-member:hover .content:before { height: 100%; background: var(--primary-color); } .team-member:hover .content .designation { color: var(--heading-color); } .team-member:hover .content .social-style-two { opacity: 1; visibility: visible; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } /* Team Style Two */ .team-member-two { margin-bottom: 30px; } .team-member-two .image { position: relative; margin-bottom: 20px; } .team-member-two .image:before { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: #1F212C; } .team-member-two .image img { width: 100%; } .team-member-two .image .social-style-one { z-index: 2; opacity: 0; margin-left: 0; max-width: 100%; position: absolute; left: 50%; bottom: 20px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 4px 12px 2px; background: var(--primary-color); -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); } .team-member-two .image .social-style-one a { margin: 0 10px; font-size: 14px; color: var(--heading-color); } .team-member-two .content h6 { font-size: 16px; margin-bottom: 0; } .team-member-two .content h5 { margin-bottom: 0; } .team-member-two .content h5 + .designation { font-size: 16px; } .team-member-two .content .designation { font-size: 14px; } .team-member-two:hover .image:before { opacity: 0.85; } .team-member-two:hover .image .social-style-one { opacity: 1; bottom: 10px; } /* Home Three */ .team-content-three .number { line-height: 1; font-size: 100px; font-weight: 600; color: var(--primary-color); } .team-content-three > p { max-width: 280px; font-weight: 500; } .team-part-three .team-member-two .image img { width: auto; } .team-part-three .team-member-two .image:before { display: none; } .team-part-three .team-member-two .image .social-style-one { left: 30px; -webkit-transform: translate(0, -10px); -ms-transform: translate(0, -10px); transform: translate(0, -10px); } .team-part-three .team-member-two .image .social-style-one a { color: white; } /* About Page */ .more-text-with-btn { padding: 15px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--lighter-color); } .more-text-with-btn p { margin: 0; font-weight: 500; color: var(--heading-color); } @media only screen and (min-width: 376px) { .more-text-with-btn p { padding: 0 25px; } } .more-text-with-btn .theme-btn { font-size: 14px; padding: 7px 30px; margin-top: 5px; margin-bottom: 5px; } /*******************************************************/ /******************** ## FAQs Area ********************/ /*******************************************************/ .accordion-item { border: none; border-radius: 0; background: white; -webkit-box-shadow: inset 0px 0px 40px rgba(125, 125, 125, 0.08); box-shadow: inset 0px 0px 40px rgba(125, 125, 125, 0.08); } .accordion-item:first-of-type { border-top-left-radius: 0; border-top-right-radius: 0; } .accordion-item:first-of-type .accordion-button { border-top-left-radius: 0; border-top-right-radius: 0; } .accordion-item:last-of-type { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .accordion-item:last-of-type .accordion-button { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .accordion-item:not(:last-child) { margin-bottom: 15px; } .accordion-item .accordion-button { border: none; font-size: 16px; font-weight: 500; -webkit-box-shadow: none; box-shadow: none; padding: 0 0 0 30px; color: var(--heading-color); background: transparent; } @media only screen and (max-width: 479px) { .accordion-item .accordion-button { font-size: 14px; padding-left: 20px; } } .accordion-item .accordion-button:after { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 60px; height: 60px; content: "\f068"; line-height: 60px; text-align: center; color: var(--primary-color); background: transparent; font-family: "Font Awesome 5 Pro"; } .accordion-item .accordion-button.collapsed { background: var(--lighter-color); } .accordion-item .accordion-button.collapsed:after { content: "\f067"; color: var(--heading-color); background: var(--primary-color); } .accordion-item .accordion-body { padding: 20px 30px; border-top: 1px solid var(--border-color); } @media only screen and (max-width: 479px) { .accordion-item .accordion-body { padding-left: 20px; padding-right: 20px; } } .accordion-item .accordion-body p:last-child { margin-bottom: 0; } .faq-image-part { z-index: 1; position: relative; } .faq-image-part .image img { width: 100%; } .faq-image-part .image.one { width: 55%; } .faq-image-part .image.two { width: 30%; position: absolute; right: 9.5%; top: 13%; } .faq-image-part .image.three { width: 30%; position: absolute; left: 4%; bottom: 7%; } .faq-image-part .image.four { width: 55%; margin-top: -8%; margin-left: auto; } .faq-image-part .video-play { position: absolute; right: 60.5%; top: 59%; } .faq-image-part:after { content: ''; z-index: -1; position: absolute; right: -6%; top: 4.5%; width: 86%; height: 50%; background: url(../images/faqs/bg-lines.png) no-repeat center/100% 100%; } /* Home Three */ .faq-area-two:before { position: absolute; left: 0; bottom: 0; content: ''; z-index: -1; width: 100%; height: 118%; background: var(--lighter-color); } .faq-area-two .accordion-item { background: white; } .faq-area-two .accordion-item .accordion-button { background: white; } .faq-image-two { position: relative; } .faq-image-two .video-play { position: absolute; left: 0; bottom: 0; background: white; } /* FAQ Page */ .faq-page-conntent .accordion-item { -webkit-box-shadow: none; box-shadow: none; } .faq-page-conntent .accordion-item .accordion-button { background: white; } @media only screen and (min-width: 576px) { .faq-page-conntent .accordion-item .accordion-button { padding-left: 40px; } } @media only screen and (min-width: 576px) { .faq-page-conntent .accordion-item .accordion-body { padding: 35px 40px; } } .faq-page-conntent .accordion-item .content h6 { margin-bottom: 20px; } @media only screen and (min-width: 376px) { .faq-page-conntent .accordion-item .content h6 { font-size: 20px; } } .faq-page-conntent .accordion-item .content .list-style-three { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .faq-page-conntent .accordion-item .content .list-style-three li { width: 50%; margin-bottom: 0; font-weight: 500; color: var(--heading-color); } @media only screen and (max-width: 479px) { .faq-page-conntent .accordion-item .content .list-style-three li { width: 100%; } } .faq-page-conntent .accordion-item .content .list-style-three li:before { font-size: 1em; margin-right: 10px; } /*******************************************************/ /*************** ## Testimonials Area *****************/ /*******************************************************/ .testimonials-left { max-width: 525px; position: relative; } .testimonials-left img { width: 100%; } .testimonials-left .slick-dots { position: absolute; right: 0; bottom: 0; background: white; padding: 35px 40px; } .testimonials-left.style-two .slick-dots { background: var(--primary-color); } .testimonials-left.style-two .slick-dots li { background: var(--heading-color); } .testimonials-left.style-two .slick-dots li:after { border-color: var(--heading-color); } .testimonials-active { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 25px 80px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--primary-color); } @media only screen and (min-width: 1200px) { .testimonials-active { margin-left: -30px; } } @media only screen and (max-width: 1199px) { .testimonials-active { padding-top: 80px; padding-bottom: 80px; } } @media only screen and (max-width: 991px) { .testimonials-active { padding: 50px; } } @media only screen and (max-width: 575px) { .testimonials-active { padding-left: 25px; padding-right: 25px; } } .testimonials-active.style-two { background: white; } .testimonials-active.style-two .testimonial-item .ratting i { color: var(--primary-color); } .testimonials-active.style-two .testimonial-item .testi-footer:before { background: var(--primary-color); } .testimonial-item .testi-header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 5px; } .testimonial-item .testi-header h6 { margin-right: 15px; margin-bottom: 15px; } @media only screen and (min-width: 376px) { .testimonial-item .testi-header h6 { font-size: 20px; } } .testimonial-item .testi-header .ratting { margin-bottom: 15px; } .testimonial-item .testi-header .ratting i { color: var(--heading-color); } .testimonial-item .testi-text { font-size: 27px; font-weight: 500; line-height: 1.67; color: var(--heading-color); font-family: var(--heading-font); } @media only screen and (max-width: 767px) { .testimonial-item .testi-text { font-size: 19px; } } @media only screen and (max-width: 575px) { .testimonial-item .testi-text { font-size: 16px; } } .testimonial-item .testi-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--heading-color); } .testimonial-item .testi-footer b { font-size: 20px; font-weight: 600; } .testimonial-item .testi-footer:before { content: ''; width: 40px; height: 2px; margin-right: 20px; background: var(--heading-color); } .testimonial-item.style-two { margin-bottom: 30px; -webkit-box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.07); } .testimonial-item.style-two .testi-header { margin-bottom: 0; background: white; position: relative; } .testimonial-item.style-two .testi-header .author { width: 35%; max-width: 170px; margin-right: 33px; } @media only screen and (max-width: 375px) { .testimonial-item.style-two .testi-header .author { margin-right: 15px; } } .testimonial-item.style-two .testi-header h6 { margin-top: 5px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-bottom: 2px; } @media only screen and (max-width: 375px) { .testimonial-item.style-two .testi-header h6 { margin-bottom: 0; } } .testimonial-item.style-two .testi-header .ratting { margin-bottom: 0; margin-left: -3px; } .testimonial-item.style-two .testi-header .ratting i { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; color: var(--primary-color); } .testimonial-item.style-two .testi-text { font-size: 18px; font-weight: 400; background: white; padding: 33px 48px 25px; } @media only screen and (max-width: 375px) { .testimonial-item.style-two .testi-text { font-size: 16px; padding-left: 30px; padding-right: 30px; } } .testimonial-item.style-two .testi-text span { margin: 0 5px; line-height: 0; font-size: 27px; font-weight: 500; display: inline-block; } .testimonial-item.style-two .testi-text span:last-child { -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } .testimonial-item.style-two .testi-footer { margin-top: 0; background: white; position: relative; padding: 0 48px 35px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media only screen and (max-width: 375px) { .testimonial-item.style-two .testi-footer { padding-left: 30px; padding-right: 30px; } } .testimonial-item.style-two .testi-footer h6 { margin-bottom: 0; } .testimonial-item.style-two .testi-footer:before { margin-top: 10px; margin-bottom: 10px; background: var(--primary-color); } .testimonial-item.style-two.hover-style { -webkit-box-shadow: none; box-shadow: none; } .testimonial-item.style-two.hover-style .testi-header { margin: 0 15px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding: 20px 40px; background: var(--lighter-color); } @media only screen and (max-width: 375px) { .testimonial-item.style-two.hover-style .testi-header { padding-left: 30px; padding-right: 30px; } } .testimonial-item.style-two.hover-style .testi-header .author { max-width: 70px; margin-right: 20px; } .testimonial-item.style-two.hover-style .testi-text { color: var(--base-color); -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.07); } .testimonial-item.style-two.hover-style .testi-text span { color: var(--primary-color); } .testimonial-item.style-two.hover-style .testi-footer { -webkit-box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.07); box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.07); } .testimonial-item.style-two.hover-style .testi-footer:after { content: ''; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; position: absolute; left: 15px; top: 100%; background: #e8e8e8; width: calc(100% - 30px); height: 10px; } .testimonial-item.style-two.hover-style:hover .testi-header, .testimonial-item.style-two.hover-style:hover .testi-footer:after { background: var(--primary-color); } .testimonial-item.style-two.hover-style:hover .testi-header h6, .testimonial-item.style-two.hover-style:hover .testi-header i { color: white; } /* Testimonials Three */ .testimonials-three-active { margin-left: -15px; margin-right: -15px; } .testimonials-three-active .testimonial-item { margin-left: 15px; margin-right: 15px; } .testimonials-three-active .slick-dots { margin-top: 45px; } /* Testimonials Four */ .testimonials-four-active { margin-left: -15px; margin-right: -220px; } @media only screen and (max-width: 1599px) { .testimonials-four-active { margin-right: -15px; } } .testimonials-four-active .testimonial-item { margin-left: 15px; margin-right: 15px; } .testimonials-four-content > p { font-size: 18px; } .testimonials-four-dots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .testimonials-four-dots .slick-dots { padding: 25px; background: var(--primary-color); } .testimonials-four-dots .slick-dots li { background: white; } .testimonials-four-dots .slick-dots li:after { border-color: white; } /* Testimonials Five */ @media only screen and (min-width: 992px) { .testimonials-five-active { padding-top: 100px; } } .testimonials-five-active .slick-list { margin: auto; max-width: 925px; text-align: center; } .testimonials-five-active .testi-header { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .testimonials-five-active .testi-header .ratting i { color: var(--primary-color); } .testimonials-five-active .testi-footer { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .testimonials-five-active .testi-footer:before { background: var(--primary-color); } .testimonials-five-active .slick-arrow { z-index: 2; position: absolute; top: calc(50% - 35px); } @media only screen and (max-width: 1599px) { .testimonials-five-active .slick-arrow { display: none !important; } } .testimonials-five-active .slick-arrow.prev-arrow { left: -70px; } .testimonials-five-active .slick-arrow.next-arrow { right: -70px; } .testimonials-five-active .slick-dots { margin-top: 130px; } @media only screen and (max-width: 991px) { .testimonials-five-active .slick-dots { margin-top: 70px; } } .testimonials-five-active:after { z-index: -1; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); line-height: 1; content: "\f10d"; font-size: 500px; color: rgba(0, 0, 0, 0.03); font-family: "Font Awesome 5 Pro"; } @media only screen and (max-width: 991px) { .testimonials-five-active:after { font-size: 400px; } } @media only screen and (max-width: 767px) { .testimonials-five-active:after { font-size: 300px; } } @media only screen and (max-width: 479px) { .testimonials-five-active:after { font-size: 200px; } } /* Testimonials Two */ .testimonials-two-left { padding: 50px 70px; background-position: center; background-repeat: no-repeat; } @media only screen and (max-width: 575px) { .testimonials-two-left { padding-left: 35px; padding-right: 35px; } } .testimonials-two-left .sub-title { color: var(--heading-color); } .testimonials-two-left .slick-dots { margin-top: 50px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .testimonials-two-left .slick-dots li { background: var(--heading-color); } .testimonials-two-left .slick-dots li:after { border-color: var(--heading-color); } .testimonials-two-active { padding: 45px 66px; background: #1F212C; } @media only screen and (max-width: 575px) { .testimonials-two-active { padding-left: 35px; padding-right: 35px; } } @media only screen and (max-width: 375px) { .testimonials-two-active { padding-left: 25px; padding-right: 25px; } } .testimonials-two-active .testi-header { margin-bottom: 35px; } .testimonials-two-active .testi-header .author { max-width: 100px; margin-right: 50px; } @media only screen and (max-width: 479px) { .testimonials-two-active .testi-header .author { max-width: 80px; margin-right: 20px; } } .testimonials-two-active .testi-header .ratting-part h6 { color: white; margin-right: 0; margin-bottom: 7px; } @media only screen and (max-width: 375px) { .testimonials-two-active .testi-header .ratting-part h6 { font-size: 16px; } } .testimonials-two-active .testi-header .ratting-part .ratting { margin-bottom: 0; } .testimonials-two-active .testi-header .ratting-part .ratting i { color: var(--primary-color); } .testimonials-two-active .testi-text { color: white; font-weight: 400; line-height: 1.83; } @media only screen and (min-width: 576px) { .testimonials-two-active .testi-text { font-size: 18px; } } .testimonials-two-active .testi-footer { margin-top: 25px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .testimonials-two-active .testi-footer h6 { color: white; margin-bottom: 0; } @media only screen and (min-width: 376px) { .testimonials-two-active .testi-footer h6 { font-size: 20px; } } .testimonials-two-active .testi-footer .designation { color: white; } .testimonials-two-active .testi-footer:before { margin-top: 13px; background: var(--primary-color); } /*******************************************************/ /******************** ## Blog Area ********************/ /*******************************************************/ .blog-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog-meta li { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1.5; margin-bottom: 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog-meta li i { color: var(--base-color); margin: -3px 10px 0 0; } .blog-meta li a:hover { color: var(--primary-color); } .blog-meta li:first-child a { color: var(--primary-color); } .blog-meta li:not(:last-child) { margin-right: 25px; } .blog-item { margin-bottom: 30px; } .blog-item .image { position: relative; } .blog-item .image img { width: 100%; } .blog-item .image .date { width: 80px; height: 80px; position: absolute; right: 15px; top: 15px; line-height: 1.1; padding: 18px 10px; border-radius: 50%; text-align: center; background: var(--primary-color); } .blog-item .content { background: white; padding: 35px 50px; -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); } @media only screen and (min-width: 1200px) and (max-width: 1299px) { .blog-item .content { padding-left: 32px; padding-right: 32px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-item .content { padding-left: 30px; padding-right: 30px; } } @media only screen and (max-width: 479px) { .blog-item .content { padding-left: 30px; padding-right: 30px; } } .blog-item .content .blog-meta { margin-bottom: 11px; } .blog-item .content h5 { margin-bottom: 15px; } @media only screen and (max-width: 375px) { .blog-item .content h5 { font-size: 18px; } } .blog-item:hover .read-more { color: var(--primary-color); } .blog-item.style-two { padding: 10px; background: white; position: relative; -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); } .blog-item.style-two .blog-header { padding: 25px 30px; } .blog-item.style-two .blog-header .blog-meta { margin-bottom: 5px; } @media only screen and (max-width: 375px) { .blog-item.style-two .blog-header h5 { font-size: 18px; } } .blog-item.style-two .image { position: initial; } .blog-item.style-two .image .date { top: 5px; right: 5px; width: auto; height: auto; border-radius: 0; padding: 6.6px 15px; } .blog-item.style-two .blog-footer { padding: 25px 30px 30px; } .blog-item.style-two .blog-footer .read-more { margin-top: 2px; font-size: 14px; padding: 6px 30px; color: var(--heading-color); background: rgba(var(--primary-rgb), 0.1); } .blog-item.style-two:hover .blog-footer .read-more { background: var(--primary-color); } .blog-item.style-three .image .date { top: auto; right: 20px; bottom: -30px; } .blog-item.style-three .image .video-play { width: 80px; height: 80px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 14px; line-height: 80px; background: white; border-radius: 50%; color: var(--primary-color); -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); -webkit-animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1); animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1); } @media only screen and (max-width: 479px) { .blog-item.style-three .image .video-play { width: 60px; height: 60px; line-height: 60px; } } .blog-item.style-three .image .video-play:before { content: ''; width: 60%; height: 60%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); -webkit-animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1); animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1); } .blog-item.style-three .image.overlay:before { z-index: auto; opacity: 0.65; } .blog-item.style-three .content { padding-bottom: 30px; } .blog-item.style-three .content.bgc-lighter { -webkit-box-shadow: none; box-shadow: none; background-color: var(--lighter-color); } @media only screen and (max-width: 375px) { .blog-item.style-three .content { padding-left: 20px; padding-right: 20px; } } /* Blog Standard */ .blog-details-image, .blog-details-content, .service-standard-wrap { max-width: 760px; } /* Blog Details */ .blog-details-image img { width: 100%; } .blog-details-content { padding: 40px; background: white; -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); } @media only screen and (max-width: 575px) { .blog-details-content { padding-left: 25px; padding-right: 25px; } } @media only screen and (max-width: 375px) { .blog-details-content { padding-left: 15px; padding-right: 15px; } } @media only screen and (max-width: 767px) { .blog-details-content h4 { font-size: 25px; } } @media only screen and (max-width: 575px) { .blog-details-content h4 { font-size: 22px; line-height: 1.6; } } @media only screen and (max-width: 375px) { .blog-details-content h4 { font-size: 20px; } } /* Blog Area Two */ .blog-area-two .for-contact-bg { height: 88%; bottom: 30%; } blockquote { position: relative; padding: 35px 35px 33px 145px; border-left: 3px solid var(--primary-color); } blockquote:before { content: "\f10d"; line-height: 1; position: absolute; left: 50px; top: 38px; font-size: 60px; font-weight: 300; color: var(--primary-color); font-family: "Font Awesome 5 Pro"; } @media only screen and (max-width: 767px) { blockquote { font-size: 20px; padding-left: 80px; } blockquote:before { left: 20px; font-size: 40px; } } @media only screen and (max-width: 479px) { blockquote { font-size: 18px; padding-left: 50px; padding-right: 25px; } blockquote:before { left: 10px; font-size: 25px; } } @media only screen and (max-width: 375px) { blockquote { font-size: 16px; padding-left: 25px; padding-right: 15px; } blockquote:before { display: none; } } blockquote .blockquote-footer { display: block; font-size: 0.72em; margin-bottom: 0; margin-top: 26px; } blockquote .blockquote-footer:before { content: '———'; margin-right: 30px; letter-spacing: -4px; color: var(--heading-color); } .tag-share { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tag-share .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; } .tag-share .item b { margin-top: 7px; font-weight: 600; margin-right: 12px; color: var(--heading-color); } .tag-share .social-style-two a { width: 33px; height: 33px; font-size: 14px; line-height: 35px; } /* Next Prev Blog */ .next-prev-blog { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .next-prev-blog .item { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 275px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; } .next-prev-blog .item .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 100px; margin-right: 20px; } @media only screen and (max-width: 375px) { .next-prev-blog .item .image { max-width: 90px; } } .next-prev-blog .item h6 { font-size: 16px; margin-bottom: 0; line-height: 1.65; } /* Comments */ .comment-body { max-width: 620px; margin-bottom: 35px; } @media only screen and (min-width: 480px) { .comment-body { display: -webkit-box; display: -ms-flexbox; display: flex; } } .comment-body .author-thumb { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 100px; margin-right: 40px; margin-bottom: 20px; } @media only screen and (max-width: 575px) { .comment-body .author-thumb { margin-right: 25px; } } .comment-body .author-thumb img { border-radius: 50%; } .comment-body .content .blog-meta { margin-bottom: 5px; } .comment-body .content .blog-meta li { text-transform: capitalize; } .comment-body .content .blog-meta li:not(:last-child) { margin-right: 15px; } .comment-body .content h6 { font-size: 16px; margin-bottom: 0; } .comment-body .content p { margin-bottom: 0; } .comment-body.comment-child { margin-left: 70px; } @media only screen and (max-width: 767px) { .comment-body.comment-child { margin-left: 30px; } } @media only screen and (max-width: 375px) { .comment-body.comment-child { margin-left: 20px; } } .admin-comment .comment-body { max-width: none; margin-bottom: 0; padding: 30px 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 767px) { .admin-comment .comment-body { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 1200px) { .admin-comment .comment-body .author-thumb { max-width: 160px; } } @media only screen and (min-width: 576px) { .admin-comment .comment-body .author-thumb { margin-bottom: 0; margin-right: 40px; } } .admin-comment .comment-body .content h6 { font-size: 18px; margin-bottom: 10px; } .admin-comment .comment-body .content .social-icons { margin-top: 10px; } .admin-comment .comment-body .content .social-icons a { margin-right: 20px; } .admin-comment .comment-body .content .social-icons a:hover { color: var(--primary-color); } /* Comment Form */ .comment-form .form-group { margin-bottom: 20px; } .comment-form .form-control { font-size: 16px; font-weight: 400; background: var(--lighter-color); } /*******************************************************/ /******************* ## Partner Area ******************/ /*******************************************************/ .partner-item { display: inline-block; margin-bottom: 45px; } /*******************************************************/ /****************** ## Contact Forms ******************/ /*******************************************************/ .for-contact-bg { position: absolute; left: 0; bottom: 0; z-index: -2; width: 100%; height: 120%; text-align: center; background: var(--lighter-color); } .contact-image-part { padding-left: 13%; } .contact-image-part .experience-years { position: absolute; left: 0; bottom: 10%; max-width: 265px; padding: 36px 40px; background: var(--primary-color); -webkit-clip-path: polygon(74% 0%, 100% 23%, 100% 100%, 0 100%, 0 0); clip-path: polygon(74% 0%, 100% 23%, 100% 100%, 0 100%, 0 0); } @media only screen and (max-width: 375px) { .contact-image-part .experience-years { max-width: 205px; padding: 25px 20px; } } .contact-image-part .experience-years h6 { margin-bottom: 0; } @media only screen and (min-width: 376px) { .contact-image-part .experience-years h6 { font-size: 20px; } } .contact-image-part .experience-years .title { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 150px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--heading-color); } .contact-image-part .experience-years .title i { margin-left: 20px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .contact-image-part.style-two { padding-left: 0; padding-right: 13%; } .contact-image-part.style-two .experience-years { left: auto; right: 0; } /* Contact Page */ @media only screen and (min-width: 992px) { .contact-page-content { max-width: 420px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .contact-page-content h2 { font-size: 40px; } } .contact-page-content ul { max-width: 285px; } .contact-page-content ul li { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 20px; } .contact-page-content ul li:not(:last-child) { margin-bottom: 12px; } .contact-page-content ul li i { min-width: 20px; margin-top: 7px; margin-right: 10px; color: var(--primary-color); } .contact-page-form { padding: 45px 50px 50px; background: var(--lighter-color); } @media only screen and (max-width: 479px) { .contact-page-form { padding-left: 25px; padding-right: 25px; } } .contact-page-form h4 { font-size: 27px; text-align: center; margin-bottom: 30px; } @media only screen and (max-width: 375px) { .contact-page-form h4 { font-size: 25px; } } .our-location iframe { height: 650px; } @media only screen and (max-width: 1399px) { .our-location iframe { height: 500px; } } @media only screen and (max-width: 1199px) { .our-location iframe { height: 400px; } } @media only screen and (max-width: 767px) { .our-location iframe { height: 300px; } } /* Contact Form Validation */ .has-error .with-errors { color: red; margin-top: 5px; margin-bottom: -15px; } #msgSubmit { font-size: 20px; margin-bottom: 0; margin-top: 10px; } /*******************************************************/ /****************** ## Videos Area ********************/ /*******************************************************/ /* Video Play */ .video-play { width: 100px; height: 100px; font-size: 20px; text-align: center; line-height: 100px; background: #000080; display: inline-block; color: var(--primary-color); } .video-play:hover { color: white; background: var(--primary-color); } @media only screen and (max-width: 767px) { .video-play { width: 80px; height: 80px; font-size: 16px; line-height: 80px; } } .video-play.video-play { color: var(--heading-color); background: var(--primary-color); } /* Video Play With Text */ .video-play-text { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .video-play-text > i { font-size: 14px; margin-right: 15px; color: var(--heading-color); width: 55px; height: 55px; background: var(--lighter-color); line-height: 55px; border-radius: 50%; text-align: center; border: 1px solid var(--border-color); } .video-play-text span { font-weight: 500; color: var(--heading-color); font-family: var(--heading-font); text-decoration: underline; } /*******************************************************/ /******************* ## History Area ********************/ /*******************************************************/ .company-history-active { z-index: 1; margin-left: -50px; margin-right: -50px; } .company-history-active .company-history-item { margin-left: 50px; margin-right: 50px; } .company-history-active:before { content: ''; z-index: -1; position: absolute; left: 0; top: 46%; width: 100%; height: 1px; background: var(--border-color); } @media only screen and (max-width: 767px) { .company-history-active:before { display: none; } } .company-history-item { margin-bottom: 50px; } .company-history-item .content { background: white; padding: 35px 45px 10px; } @media only screen and (max-width: 375px) { .company-history-item .content { padding-left: 25px; padding-right: 25px; } } .company-history-item .content .icon { font-size: 14px; padding-top: 2px; margin-bottom: 18px; color: var(--heading-color); width: 25px; height: 25px; background: var(--primary-color); line-height: 25px; border-radius: 50%; text-align: center; } .company-history-item .content h6 { margin-bottom: 12px; } @media only screen and (min-width: 376px) { .company-history-item .content h6 { font-size: 20px; } } .company-history-item .content p { line-height: 1.6; } .company-history-item .year { font-size: 24px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-top: 40px; margin-bottom: 40px; width: 100px; height: 100px; background: white; line-height: 100px; border-radius: 50%; text-align: center; -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.1); } @media only screen and (min-width: 768px) { .company-history-item .image:first-child { margin-top: 85px; } } .company-history-item:hover .year { background: var(--primary-color); } /*******************************************************/ /******************* ## Pricing Area ******************/ /*******************************************************/ .pricing-item { padding: 50px; background: white; margin-bottom: 30px; } @media only screen and (max-width: 1199px) { .pricing-item { padding-left: 35px; padding-right: 35px; } } .pricing-item .title { text-align: center; margin-bottom: 5px; } .pricing-item .text { text-align: center; margin-bottom: 33px; } .pricing-item .price { line-height: 1; font-size: 45px; font-weight: 600; text-align: center; margin-bottom: 40px; color: var(--primary-color); font-family: var(--heading-font); } @media only screen and (max-width: 375px) { .pricing-item .price { font-size: 36px; } } .pricing-item .price .next { font-size: 16px; font-weight: 400; } @media only screen and (max-width: 375px) { .pricing-item .price .next { font-size: 14px; } } .pricing-item hr { margin-bottom: 40px; } .pricing-item .list-style-three { margin-bottom: 40px; } @media only screen and (min-width: 376px) { .pricing-item .list-style-three { font-size: 20px; } } .pricing-item .list-style-three li { margin-bottom: 15px; } .pricing-item .list-style-three li:before { font-size: 1em; color: var(--base-color); } .pricing-item.price-dark-bg { z-index: 1; position: relative; } .pricing-item.price-dark-bg::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 1; background-color: #1F212C; } .pricing-item.price-dark-bg:before { mix-blend-mode: multiply; } .pricing-item.price-dark-bg .text, .pricing-item.price-dark-bg .title, .pricing-item.price-dark-bg .price, .pricing-item.price-dark-bg .list-style-three, .pricing-item.price-dark-bg .list-style-three li:before { color: white; } .price-popular-badge { padding: 7px; margin-bottom: 0; text-align: center; text-transform: uppercase; background: var(--primary-color); } /*******************************************************/ /******************** ## Shop Area *********************/ /*******************************************************/ .product-item { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: #F8FAFD; margin-bottom: 30px; } .product-item .image img { width: 100%; } .product-item .content { padding: 28px 40px 40px 50px; } @media only screen and (max-width: 375px) { .product-item .content { padding-left: 25px; padding-right: 25px; } } .product-item .content h5 { font-size: 22px; line-height: 1.58; } .product-item .content .ratting-price .ratting i { color: #FF7425; } .product-item .content .ratting-price .ratting .price { font-size: 22px; font-weight: 600; color: var(--primary-color); margin-left: 10px; } .product-item .content .theme-btn { margin-top: 34px; padding-top: 9px; padding-bottom: 9px; } .product-item:hover { background: #0A1019; } .product-item:hover .category { color: rgba(255, 255, 255, 0.65); } .product-item:hover h5 a { color: white; } /* Shop Shorter */ .shop-shorter { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .shop-shorter .sort-text { margin-right: 25px; } @media only screen and (min-width: 376px) { .shop-shorter .sort-text { font-size: 18px; } } .shop-shorter .products-dropdown .nice-select { border: none; font-size: 16px; border-radius: 0; min-width: 300px; padding: 0 0 20px; background: transparent; border-bottom: 2px solid var(--border-color); } @media only screen and (max-width: 375px) { .shop-shorter .products-dropdown .nice-select { min-width: 250px; } } .shop-shorter .products-dropdown .nice-select:after { right: 0; top: 11px; } /* Product Details */ .preview-images { margin-bottom: 30px; } .preview-images img { width: 100%; } .thumb-images { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .thumb-images .thumb-item { width: calc(33.3333% - 20px); } .thumb-images .thumb-item img { width: 100%; } .product-details-content .section-title h2 { margin-bottom: 15px; } .product-details-content .ratting-price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-details-content .ratting-price .price { font-size: 24px; font-weight: 500; color: var(--primary-color); margin-left: 10px; } .product-details-content .ratting-price .price:before { content: '$'; } .product-details-content .category-tags li:not(:last-child) { margin-bottom: 8px; } .product-details-content .category-tags li b { font-size: 18px; font-weight: 600; margin-right: 20px; margin-bottom: 10px; color: var(--heading-color); } @media only screen and (min-width: 576px) { .product-details-content .category-tags li b { min-width: 100px; display: inline-block; } } .product-details-content .category-tags li a { padding: 2px 25px; margin-bottom: 10px; display: inline-block; border: 1px solid var(--border-color); } @media only screen and (max-width: 375px) { .product-details-content .category-tags li a { padding-left: 20px; padding-right: 20px; } } .product-details-content .category-tags li a:not(:last-child) { margin-right: 10px; } .product-details-content .category-tags li a:hover { color: var(--heading-color); background: var(--primary-color); border-color: var(--border-color); } .product-details-content .add-to-cart { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-details-content .add-to-cart input { width: 90px; font-size: 20px; border-radius: 0; padding: 8px 20px; margin: 10px 10px 0 0; background: transparent; border: 2px solid var(--border-color); } .product-details-content .add-to-cart .theme-btn { padding-top: 9px; padding-bottom: 9px; margin: 10px 10px 0 0; } .product-details-content .add-to-cart .wishlist { margin-top: 10px; padding: 8px 20px; border-radius: 5px; background: transparent; border: 1px solid var(--border-color); } .product-information-tab li:not(:last-child) { margin-right: 30px; } @media only screen and (max-width: 575px) { .product-information-tab li:not(:last-child) { margin-right: 15px; } } .product-information-tab li a { font-weight: 700; color: var(--heading-color); padding: 11px 40px; margin-bottom: 15px; display: inline-block; border: 1px solid var(--border-color); } @media only screen and (max-width: 479px) { .product-information-tab li a { padding: 8px 25px; } } .product-information-tab li a i { margin-left: 10px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .product-information-tab li a.active { background: var(--primary-color); border-color: var(--border-color); } .review-form .ratting b { font-size: 20px; font-weight: 400; margin-right: 20px; } .review-form .form-group { margin-bottom: 30px; } .review-form .form-group .nice-select, .review-form .form-group .form-control { line-height: 1.4; background: red; border-color: red; } @media only screen and (min-width: 480px) { .review-form .form-group .nice-select, .review-form .form-group .form-control { font-size: 20px; } } .review-form .form-group .nice-select::-webkit-input-placeholder, .review-form .form-group .form-control::-webkit-input-placeholder { color: red; } .review-form .form-group .nice-select:-ms-input-placeholder, .review-form .form-group .form-control:-ms-input-placeholder { color: red; } .review-form .form-group .nice-select::-ms-input-placeholder, .review-form .form-group .form-control::-ms-input-placeholder { color: red; } .review-form .form-group .nice-select::placeholder, .review-form .form-group .form-control::placeholder { color: red; } .review-form .form-group .nice-select:focus, .review-form .form-group .form-control:focus { background: transparent; border-color: red; } .review-form .form-group .nice-select .current, .review-form .form-group .form-control .current { font-weight: 400; } @media only screen and (min-width: 768px) { .review-form .theme-btn { padding: 14px 55px; } } /*******************************************************/ /****************** ## Skillbar Area *******************/ /*******************************************************/ .skillbar { height: 10px; margin-top: 45px; position: relative; margin-bottom: 30px; background: #FFE9D4; } .skillbar .skillbar-title, .skillbar .skill-bar-percent { top: -46px; font-size: 18px; font-weight: 600; position: absolute; } .skillbar .skill-bar-percent { right: 0; } .skillbar .skillbar-bar { width: 0; height: 100%; background-image: none; overflow: inherit !important; background-color: var(--primary-color); } /*******************************************************/ /***************** ## Sidebar Widgets *****************/ /*******************************************************/ .main-sidebar { background: white; padding: 50px 40px; -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.07); } @media only screen and (min-width: 1400px) { .main-sidebar { margin-left: -35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-sidebar { padding-left: 25px; padding-right: 25px; } } @media only screen and (max-width: 479px) { .main-sidebar { padding-left: 25px; padding-right: 25px; } } .main-sidebar .widget-cta { padding: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-sidebar .widget-cta { padding-left: 25px; padding-right: 25px; } } @media only screen and (max-width: 375px) { .main-sidebar .widget-cta { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-sidebar .widget-cta h4 { font-size: 25px; } } @media only screen and (max-width: 375px) { .main-sidebar .widget-cta h4 { font-size: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-sidebar .widget-cta .theme-btn { padding-left: 35px; padding-right: 35px; } } .widget:not(:last-child) { margin-bottom: 50px; } .widget-title { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); } .widget-search .widget-title { margin-bottom: 0; border-bottom: none; } .widget-search form { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 14px 25px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--lighter-color); } .widget-search form input { padding: 0; color: white; border: none; font-size: 14px; font-weight: 400; background: transparent; } .widget-search form button { -webkit-box-flex: 0; -ms-flex: none; flex: none; background: transparent; } .widget-menu ul li:not(:last-child) { margin-bottom: 9px; } .widget-menu ul li:before { content: "\f105"; margin-right: 8px; color: var(--primary-color); font-family: "Font Awesome 5 Pro"; } .widget-menu ul li a { color: #A3ADB7; font-weight: 500; } .widget-menu ul li a:hover { color: var(--primary-color); } .widget-recent-news ul li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 25px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .widget-recent-news ul li .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 80px; margin-right: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .widget-recent-news ul li .image { margin-right: 15px; } } @media only screen and (max-width: 375px) { .widget-recent-news ul li .image { max-width: 70px; margin-right: 15px; } } .widget-recent-news ul li h6 { margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1299px) { .widget-recent-news ul li h6 { font-size: 15px; } } @media only screen and (max-width: 375px) { .widget-recent-news ul li h6 { font-size: 15px; line-height: 1.3; } } .widget-recent-news ul li .date { text-transform: capitalize; } .tag-coulds { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -4px; } .tag-coulds a { font-size: 16px; font-weight: 500; padding: 0 20px; margin: 7px 3.5px 0; background: var(--lighter-color); } .tag-coulds a:hover { background: var(--primary-color); } /* Service Sidebar */ .service-sidebar .widget { padding: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-sidebar .widget { padding-left: 25px; padding-right: 25px; } } @media only screen and (max-width: 375px) { .service-sidebar .widget { padding-left: 25px; padding-right: 25px; } } .service-sidebar .widget:not(:last-child) { margin-bottom: 30px; } .service-sidebar .widget-category { background: var(--lighter-color); } .widget-category ul li:not(:last-child) { margin-bottom: 5px; } .widget-category ul li a { display: block; font-size: 18px; line-height: 1.2; font-weight: 500; padding: 17px 40px; background: white; color: var(--heading-color); } @media only screen and (max-width: 375px) { .widget-category ul li a { font-size: 16px; padding-left: 25px; padding-right: 25px; } } .widget-category ul li a:hover, .widget-category ul li a.active { background: var(--primary-color); } .widget-download { background: #1F212C; } .widget-download .image { z-index: 1; position: relative; text-align: center; margin-bottom: 10px; padding-bottom: 35px; } .widget-download .image:after { z-index: -1; width: 110%; height: 110%; content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url(../images/widget/download-bg.png); background-size: 100% 100%; } .widget-download .theme-btn { width: 100%; padding-left: 20px; padding-right: 20px; } .widget-download .theme-btn:not(:last-child) { margin-bottom: 10px; } .widget-download .theme-btn.style-two { background: rgba(255, 255, 255, 0.1); } .widget-cta { background: url(../images/widget/widget-cta-bg.jpg); background-size: cover; z-index: 1; position: relative; } .widget-cta::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.65; background-color: black; } .widget-cta h4 { color: white; margin-bottom: 26px; } /*******************************************************/ /******************* ## Main Footer *******************/ /*******************************************************/ .main-footer { background-color: #000080; } .main-footer.bgc-black { background: var(--heading-color); } .footer-clients { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer-clients .clients { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 50px; margin-bottom: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 1199px) { .footer-clients .clients { margin-right: 25px; } } .footer-clients .clients img { width: 70px; height: 70px; border-radius: 50%; border: 2px solid white; } .footer-clients .clients img:not(:last-child) { margin-right: -10px; } .footer-clients h5 { color: white; font-weight: 500; margin-bottom: 15px; } @media only screen and (min-width: 1200px) { .footer-clients h5 { font-size: 24px; } } .footer-clients h5 a { color: white; } .footer-widget { margin-bottom: 50px; } .footer-widget p { color: rgba(255, 255, 255, 0.65); } .footer-title { color: white; margin-bottom: 22px; } .footer-text p { margin-bottom: 20px; } .footer-text a { color: white; font-size: 18px; margin-bottom: 13px; display: inline-block; font-family: var(--heading-font); } .footer-text a i { color: var(--primary-color); margin-right: 10px; } .footer-links ul li:not(:last-child) { margin-bottom: 7px; } .footer-links ul li a { color: rgba(255, 255, 255, 0.65); } .footer-links ul li a:before { content: "\f101"; font-size: 14px; color: white; margin-right: 7px; font-family: "Font Awesome 5 Pro"; } .footer-links ul li a:hover { color: white; } .newsletter-form { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .newsletter-form input { border: 0; color: #818498; padding: 14px 10px 14px 30px; background: #1F212C; } .newsletter-form input::-webkit-input-placeholder { color: #818498; font-weight: 400; } .newsletter-form input:-ms-input-placeholder { color: #818498; font-weight: 400; } .newsletter-form input::-ms-input-placeholder { color: #818498; font-weight: 400; } .newsletter-form input::placeholder { color: #818498; font-weight: 400; } .newsletter-form button { -webkit-box-flex: 0; -ms-flex: none; flex: none; color: var(--heading-color); line-height: 62px; width: 60px; height: 60px; background: var(--primary-color); } .newsletter-widget .newsletter-form { margin-top: 22px; } .newsletter-widget .newsletter-part { background: #1F212C; padding: 35px 50px 40px; } @media only screen and (max-width: 479px) { .newsletter-widget .newsletter-part { padding-left: 25px; padding-right: 25px; } } .newsletter-widget .newsletter-part .footer-title { margin-bottom: 15px; } @media only screen and (max-width: 375px) { .newsletter-widget .newsletter-part .footer-title { font-size: 20px; margin-bottom: 20px; } } .newsletter-widget .newsletter-part .newsletter-form { margin-top: 0; } .newsletter-widget .newsletter-part .newsletter-form input { background: #000080; } .newsletter-widget .footer-bottom-nav { margin-left: 0; } .newsletter-widget .footer-bottom-nav li { margin-left: 0; margin-right: 33px; } .gallery { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -5px; } .gallery a { margin: 10px 5px 0; z-index: 1; position: relative; max-width: calc(33.333% - 10px); } .gallery a::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0; background-color: var(--primary-color); } .gallery a:before { z-index: 1; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .gallery a i { z-index: 2; opacity: 0; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 20px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .gallery a:hover:before { opacity: 0.85; } .gallery a:hover i { opacity: 1; } /* Footer Bottom */ .footer-bottom { position: relative; background: #1F212C; } .footer-bottom .copyright-text { color: rgba(255, 255, 255, 0.65); } .footer-bottom .copyright-text a { color: var(--primary-color); } .footer-bottom .scroll-top { color: var(--heading-color); position: absolute; top: -20px; left: calc(50% - 20px); text-align: center; } .footer-bottom-nav { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -25px; margin-right: -25px; } .footer-bottom-nav li { margin: 0 25px 5px; } .footer-bottom-nav li a { color: rgba(255, 255, 255, 0.65); } .footer-bottom-nav li a i { color: white; margin-right: 10px; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; } .footer-bottom-nav li a:hover i { color: var(--primary-color); }