@charset "UTF-8"; /*---------------------------------------------------------------------- Template Name: Ravelo - Travel & Tour Booking HTML Template Template URI: https://webtend.net/demo/html/ravelo/ 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 ## Hero Area ## Banner Area ## Destinations Area ## Counter Area ## About Area ## Features Area ## Mobile App ## Testimonials ## Instagram ## Newsletter ## Team Area ## CTA Area ## Benefit Area ## Products ## Client Logo ## Contact Forms ## Videos ## Gallery ## Blog Area ## FAQs Area ## 404 Error ## Pricing ## Skillbar ## Activity Area ## 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: 28px; font-size: 16px; font-family: var(--base-font); --base-font: 'Outfit', sans-serif; --heading-font: 'Outfit', sans-serif; --primary-color: #63AB45; --secondary-color: #e90000; --heading-color: #1C231F; --base-color: #484848; --lighter-color: #F9F9F7; --border-color: #d8d8d8; --primary-rgb: 99, 171, 69; --secondary-rgb: 247, 146, 30; } 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; } hr { opacity: 1; background: var(--border-color); } 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: 400; border-radius: 0; font-size: 16px; padding: 15px 30px; background-color: #fff; border: 1px solid white; font-family: var(--heading-font); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } 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: 400; 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: 1320px; padding-left: 15px; padding-right: 15px; } .container.container-1400 { max-width: 1430px; } .container.container-1500 { max-width: 1530px; } } @media only screen and (min-width: 576px) { .container-fluid { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 1600px) { .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%; } } .gap-10 { --bs-gutter-x: 10px; } .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: -10px; position: relative; } .section-title h2 { margin-bottom: 15px; letter-spacing: -1px; text-transform: capitalize; } @media only screen and (max-width: 575px) { .section-title h2 { font-size: 35px; } } @media only screen and (max-width: 375px) { .section-title h2 { font-size: 30px; } } .section-title h2 span { color: white; border-radius: 25px; display: inline-block; padding: 0 10px 0 15px; background: var(--secondary-color); } @media only screen and (min-width: 376px) { .section-title p { font-size: 18px; } } .section-title p span { color: white; font-weight: 500; padding-left: 8px; padding-right: 5px; border-radius: 12px; background: var(--secondary-color); } .section-title p span.bgc-primary { background: var(--primary-color); } .subtitle { font-weight: 600; padding: 3px 20px; border: 1px solid; border-radius: 30px; background: #F0F7ED; color: var(--primary-color); display: inline-block; } @media only screen and (min-width: 576px) { .subtitle { font-size: 18px; } } /* Divider */ .divider { z-index: 1; text-align: center; position: relative; } .divider:before { z-index: -1; content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--border-color); } .divider > span { line-height: 1.4; background: white; border-radius: 20px; display: inline-block; padding: 4px 20px 7px; border: 1px solid var(--border-color); -webkit-box-shadow: 0px 10px 60px rgba(151, 151, 151, 0.25); box-shadow: 0px 10px 60px rgba(151, 151, 151, 0.25); } .divider > span > span { color: white; font-size: 0.88em; border-radius: 12px; padding: 1px 10px 2px; background: var(--secondary-color); } .divider.style-two > span { color: white; border: none; font-size: 14px; padding: 2px 10px 2px; background: var(--primary-color); } .divider.style-two > span span { padding: 0; font-size: 1em; background: transparent; } /** Button style **/ .theme-btn, a.theme-btn { color: white; cursor: pointer; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; font-weight: 600; overflow: hidden; text-align: center; padding: 11px 36px; border-radius: 30px; position: relative; -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; text-transform: capitalize; background: var(--primary-color); } @media only screen and (max-width: 375px) { .theme-btn, a.theme-btn { padding: 8px 28px; } } .theme-btn span, a.theme-btn span { -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .theme-btn span:before, a.theme-btn span:before { opacity: 0; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; position: absolute; content: attr(data-hover); -webkit-transform: translateY(150%); -ms-transform: translateY(150%); transform: translateY(150%); } .theme-btn i, a.theme-btn i { -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; margin-left: 10px; } .theme-btn.style-two i, a.theme-btn.style-two i { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .theme-btn:hover span, a.theme-btn:hover span { -webkit-transform: translateY(-150%); -ms-transform: translateY(-150%); transform: translateY(-150%); } .theme-btn:hover span:before, a.theme-btn:hover span:before { opacity: 1; } .theme-btn.bgc-secondary, a.theme-btn.bgc-secondary { background: var(--secondary-color); } .theme-btn.style-three, a.theme-btn.style-three { border: 1px solid; } .theme-btn.style-three:not(:hover), a.theme-btn.style-three:not(:hover) { color: var(--heading-color); background: transparent; } .theme-btn.style-three:hover, a.theme-btn.style-three:hover { border-color: var(--primary-color); } .theme-btn.style-four, a.theme-btn.style-four { background: transparent; border: 1px solid white; } .theme-btn.style-four:hover, a.theme-btn.style-four:hover { background: var(--primary-color); border-color: var(--primary-color); } /* Read More */ .read-more { -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; } .read-more i { color: white; float: right; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-top: -2px; margin-left: 5px; font-size: 0.9em; width: 20px; height: 20px; background: var(--primary-color); line-height: 20px; border-radius: 50%; text-align: center; } .read-more:hover { text-decoration: underline; } .read-more:hover i { background: var(--secondary-color); } /* List style One */ .list-style-one li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 12px; } .list-style-one li i { font-size: 18px; margin-right: 15px; color: var(--secondary-color); } /* List Style Two */ .list-style-two li { display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 500; margin-bottom: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 376px) { .list-style-two li { font-size: 18px; } } .list-style-two li:before { -webkit-box-flex: 0; -ms-flex: none; flex: none; color: white; content: "\f00c"; font-size: 12px; margin-right: 10px; width: 24px; height: 24px; background: var(--secondary-color); line-height: 24px; border-radius: 50%; text-align: center; font-family: "Font Awesome 5 Pro"; } /* List Style Three */ .list-style-three li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 16px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .list-style-three li:before { content: "\f105"; margin-right: 8px; margin-bottom: -2px; font-family: "Font Awesome 5 Pro"; } /* List Style Four */ .list-style-four li { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 18px; } @media only screen and (min-width: 376px) { .list-style-four li { font-size: 18px; } } .list-style-four li:before { content: "\f00c"; margin-right: 12px; color: var(--primary-color); font-family: "Font Awesome 5 Pro"; } /** 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: -5px; margin-right: -5px; } .social-style-one a { color: white; margin-left: 5px; margin-right: 5px; width: 45px; height: 45px; background: rgba(255, 255, 255, 0.1); line-height: 45px; border-radius: 50%; text-align: center; } .social-style-one a:hover { background: var(--primary-color); } /** 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; color: var(--secondary-color); width: 35px; height: 35px; background: rgba(var(--secondary-rgb), 0.15); line-height: 35px; border-radius: 50%; text-align: center; } .social-style-two a:hover { color: white; background: var(--secondary-color); } /* Tab Style One */ .tab-style-one { border-bottom: 1px solid var(--border-color); } .tab-style-one li { margin-right: 30px; } .tab-style-one li a { margin-bottom: -1px; padding: 0 20px 16px; display: inline-block; border-bottom: 2px solid transparent; } @media only screen and (max-width: 767px) { .tab-style-one li a { padding-bottom: 10px; font-size: 20px !important; } } .tab-style-one li a:first-child { padding-left: 0; } .tab-style-one li a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); } @media only screen and (max-width: 575px) { .tab-style-one li a.active { border-bottom-color: transparent; } } /*** 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; font-size: 20px; -webkit-box-shadow: none; box-shadow: none; font-weight: 600; color: var(--base-color); width: 44px; height: 44px; background: transparent; line-height: 44px; border-radius: 50%; text-align: center; border: 1px solid var(--border-color); line-height: 42px; } .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(--secondary-color); border-color: var(--secondary-color); } /* 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: var(--secondary-color); font-size: 13px; } .ratting span { margin-left: 7px; } .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 { width: 7px; height: 7px; margin: 0 7px; cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; border-radius: 50%; position: relative; background: var(--primary-color); } .slick-dots li:before { width: 0; height: 0; content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; border-radius: 50%; border: 1px solid var(--primary-color); } .slick-dots li button { opacity: 0; } .slick-dots li.slick-active { margin-left: 15px; margin-right: 15px; } .slick-dots li.slick-active:before { width: 22px; height: 22px; } /*** Scroll Top style ***/ .scroll-top { width: 56px; height: 56px; z-index: 99; color: white; font-size: 24px; cursor: pointer; text-align: center; border-radius: 50%; background-color: transparent; background-repeat: no-repeat; background-size: cover; -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; } /* Text White */ .text-white *, .text-white a, .text-white .read-more, .text-white .counter-text-wrap .count-text { color: white; } .text-white.section-title p span { background: var(--primary-color); } .text-white .subtitle { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } /*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: 5px 20px; margin: 0 5px 10px; color: var(--heading-color); border: 1px solid var(--border-color); } @media only screen and (min-width: 480px) { .filter-btns-one li { font-size: 18px; } } @media only screen and (max-width: 375px) { .filter-btns-one li { padding-left: 15px; padding-right: 15px; } } .filter-btns-one li.active { background: var(--secondary-color); border-color: var(--secondary-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.95; background-color: #1D231F; } /* Backgruond Size */ .bgs-cover { background-size: cover; background-position: center; } .bgp-top { background-repeat: no-repeat; background-position: top center; } .bgp-bottom { background-repeat: no-repeat; background-position: bottom center; } /* Color + Background */ .bg-black { background-color: black; } .bgc-black { background-color: var(--heading-color); } .bgc-lighter { background-color: var(--lighter-color); } .bgc-primary { background-color: var(--primary-color); } .bgc-secondary { background-color: var(--secondary-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, h1, .h1, h2, .h2, .pricing-plan-item .content .price span, h3, .h3, h4, .h4, .tab-style-one li a, h5, .h5, .product-details-content .price, h6, .h6, blockquote, .counter-item .count-text { font-weight: 500; line-height: 1.23; color: var(--heading-color); font-family: var(--heading-font); } h1, .h1 { font-weight: 600; line-height: 1.2; font-size: 85px; } h2, .h2, .pricing-plan-item .content .price span { font-size: 42px; } h3, .h3 { font-size: 30px; } h4, .h4, .tab-style-one li a { font-size: 27px; } h5, .h5, .product-details-content .price { line-height: 1.44; font-size: 24px; } h6, .h6, blockquote { line-height: 1.5; font-size: 20px; } /*******************************************************/ /************** ## 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 circle_animation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes circle_animation { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes circle_animation_invers { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes circle_animation_invers { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-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; -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: 5px; } .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; 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; } @media only screen and (max-width: 991px) { .main-menu .navbar-header .navbar-toggle { margin-right: 12px; } } .main-menu .navbar-header .navbar-toggle .icon-bar { background: var(--base-color); height: 2px; width: 30px; display: block; margin: 7px 0; } /* Header One */ @media only screen and (min-width: 992px) { .main-header.header-one .main-menu .navbar-collapse { padding: 5px; border-radius: 40px; background: var(--lighter-color); border: 1px solid var(--border-color); } .main-header.header-one .main-menu .navbar-collapse .navigation > li { padding: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; border-radius: 30px; } .main-header.header-one .main-menu .navbar-collapse .navigation > li > a { padding: 10px 20px; } } @media only screen and (min-width: 992px) and (min-width: 992px) and (max-width: 1299px) { .main-header.header-one .main-menu .navbar-collapse .navigation > li > a { padding: 10px 20px; } } @media only screen and (min-width: 992px) { .main-header.header-one .main-menu .navbar-collapse .navigation > li.dropdown > a { padding-right: 8px; } .main-header.header-one .main-menu .navbar-collapse .navigation > li.dropdown > .dropdown-btn { margin-left: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding-right: 30px; } } @media only screen and (min-width: 992px) and (min-width: 992px) and (max-width: 1299px) { .main-header.header-one .main-menu .navbar-collapse .navigation > li.dropdown > .dropdown-btn { padding-right: 20px; } } @media only screen and (min-width: 992px) { .main-header.header-one .main-menu .navbar-collapse .navigation > li:hover { background: var(--primary-color); } .main-header.header-one .main-menu .navbar-collapse .navigation > li:hover > a, .main-header.header-one .main-menu .navbar-collapse .navigation > li:hover > .dropdown-btn { color: white; } .main-header.header-one.fixed-header .header-upper { padding-top: 10px; padding-bottom: 10px; } } /* Header Two */ @media only screen and (min-width: 992px) { .main-header.header-two { display: none; } } .main-header.header-two .header-upper { background: white; -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); } .main-header.header-two .menu-sidebar > button { border-color: var(--heading-color); } .main-header.header-two .menu-sidebar > button .icon-bar { background: var(--heading-color); } @media only screen and (min-width: 992px) { .for-sidebar-menu.page-wrapper { padding-left: 315px; padding-right: 10px; } } .for-sidebar-menu.page-wrapper .hidden-bar { top: 10px; right: auto; border: none; width: 295px; left: -315px; background: white; border-radius: 10px; height: calc(100% - 20px); max-width: calc(100% - 20px); -webkit-box-shadow: 0px 4px 40px rgba(179, 179, 179, 0.25); box-shadow: 0px 4px 40px rgba(179, 179, 179, 0.25); } @media only screen and (min-width: 992px) { .for-sidebar-menu.page-wrapper .hidden-bar { left: 10px; opacity: 1; visibility: visible; } } .for-sidebar-menu.page-wrapper .hidden-bar .inner-box { padding: 40px 30px; } .for-sidebar-menu.page-wrapper .hidden-bar .inner-box .cross-icon { color: var(--base-color); } @media only screen and (min-width: 992px) { .for-sidebar-menu.page-wrapper .hidden-bar .inner-box .cross-icon { display: none; } } .for-sidebar-menu.page-wrapper .hidden-bar .inner-box .theme-btn { margin-left: 20px; } .for-sidebar-menu.page-wrapper .form-back-drop { left: -100%; } .side-content-visible .for-sidebar-menu.page-wrapper .hidden-bar { left: 10px; } @media only screen and (max-width: 991px) { .side-content-visible .for-sidebar-menu.page-wrapper .form-back-drop { left: 0; } } /* Sidebar Menu */ .sidebar-menu li a { display: block; font-size: 18px; font-weight: 500; padding: 6px 20px; border-radius: 20px; color: var(--heading-color); text-transform: capitalize; } .sidebar-menu li.dropdown > ul { display: none; } .sidebar-menu li.dropdown .dropdown-btn { position: absolute; right: 5px; top: 0; width: 45px; height: 40px; cursor: pointer; line-height: 40px; text-align: center; } .sidebar-menu li ul { margin-top: 5px; margin-left: 10px; } .sidebar-menu > li { margin-bottom: 12px; } .sidebar-menu > li:hover > a, .sidebar-menu > li.active > a { color: white; background: var(--primary-color); } .sidebar-menu > li:hover > .dropdown-btn, .sidebar-menu > li.active > .dropdown-btn { color: white; } /* Menu Btns */ .menu-btns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .menu-btns > button { font-size: 20px; position: relative; margin-left: 30px; background-color: transparent; } @media only screen and (min-width: 1300px) { .menu-btns > button { margin-right: 60px; } } @media only screen and (max-width: 1299px) { .menu-btns > button { margin-right: 35px; } } @media only screen and (max-width: 479px) { .menu-btns > button { display: none; } } .menu-btns > button span { position: absolute; left: 95%; bottom: 95%; color: white; font-size: 14px; font-family: var(--heading-font); width: 20px; height: 20px; background: var(--primary-color); line-height: 20px; border-radius: 50%; text-align: center; } @media only screen and (max-width: 991px) { .menu-btns > button span { bottom: 80%; } } .menu-btns > button span.bgc-secondary { color: var(--heading-color); background-color: var(--secondary-color); } .menu-btns .theme-btn { margin-right: 10px; } @media only screen and (max-width: 1199px) { .menu-btns .theme-btn { display: none; } } /* Header Search */ .nav-search { position: relative; margin-right: 10px; } @media only screen and (max-width: 375px) { .nav-search { display: none; } } .nav-search > button { width: 50px; height: 50px; border-radius: 50%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); } .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 .header-number, .main-header.white-menu .header-number a, .main-header.white-menu .menu-btns > button, .main-header.white-menu .nav-search > button { color: white; } .main-header.white-menu .menu-sidebar > button { border-color: rgba(255, 255, 255, 0.1); } .main-header.white-menu .menu-sidebar > button .icon-bar { background: white; } .main-header.white-menu.fixed-header .header-upper { background: #222222; } .main-header.white-menu.header-one .main-menu .navbar-collapse { background: #232C26; border-color: rgba(255, 255, 255, 0.1); } /* Menu Sidebar */ .menu-sidebar { display: -webkit-box; display: -ms-flexbox; display: flex; } .menu-sidebar > button { width: 50px; height: 50px; border-radius: 50%; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid var(--border-color); } .menu-sidebar > button .icon-bar { width: 20px; height: 2px; margin: 3px 0; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: var(--heading-color); } .menu-sidebar > button .icon-bar:nth-child(2) { width: 25px; } .menu-sidebar > button:hover .icon-bar { width: 25px; } /** 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; } .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); } /*******************************************************/ /******************** ## Hero Area ********************/ /*******************************************************/ .hero-title { z-index: 2; color: white; font-weight: 700; font-size: 72px; position: relative; text-align: center; text-transform: uppercase; } @media only screen and (max-width: 1599px) { .hero-title { font-size: 72px; } } @media only screen and (max-width: 1299px) { .hero-title { font-size: 72px; } } @media only screen and (max-width: 991px) { .hero-title { font-size: 72px; } } @media only screen and (max-width: 767px) { .hero-title { font-size: 60px; } } @media only screen and (max-width: 575px) { .hero-title { font-size: 50px; } } @media only screen and (max-width: 479px) { .hero-title { font-size: 40px; } } @media only screen and (max-width: 375px) { .hero-title { font-size: 35px; } } .main-hero-image { height: 790px; margin-top: -8%; position: relative; border-radius: 20px; } @media only screen and (max-width: 1399px) { .main-hero-image { height: 555px; } } @media only screen and (max-width: 991px) { .main-hero-image { height: 450px; } } @media only screen and (max-width: 575px) { .main-hero-image { height: 400px; } } .main-hero-image:before { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#1D231F), to(rgba(29, 35, 31, 0))); background: -webkit-linear-gradient(top, #1D231F 0%, rgba(29, 35, 31, 0) 100%); background: -o-linear-gradient(top, #1D231F 0%, rgba(29, 35, 31, 0) 100%); background: linear-gradient(180deg, #1D231F 0%, rgba(29, 35, 31, 0) 100%); } .search-filter-inner { display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 2; position: relative; margin-top: -50px; background: white; border-radius: 12px; padding: 28px 55px 10px; -webkit-box-shadow: 10px 4px 60px rgba(197, 197, 197, 0.25); box-shadow: 10px 4px 60px rgba(197, 197, 197, 0.25); } @media only screen and (max-width: 1299px) { .search-filter-inner { padding-left: 35px; padding-right: 35px; } } @media only screen and (max-width: 1199px) { .search-filter-inner { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .search-filter-inner .filter-item { min-width: 18%; padding-left: 28px; position: relative; margin-bottom: 15px; padding-right: 20px; margin-right: 30px; border-right: 1px solid var(--border-color); } @media only screen and (max-width: 767px) { .search-filter-inner .filter-item { margin-right: 15px; padding-right: 5px; width: calc(50% - 15px); } } @media only screen and (max-width: 479px) { .search-filter-inner .filter-item { width: 100%; margin-right: 0; } } .search-filter-inner .filter-item .icon { position: absolute; left: 0; top: 3px; } .search-filter-inner .filter-item .title { font-size: 14px; } .search-filter-inner .filter-item .nice-select { border: none; line-height: 1.1; padding: 0 20px 0 0; } .search-filter-inner .filter-item .nice-select .current { font-weight: 500; color: var(--heading-color); } .search-filter-inner .filter-item .nice-select:after { top: 0; width: 8px; height: 8px; } .search-filter-inner .search-button { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; margin-bottom: 15px; } @media only screen and (min-width: 1200px) { .search-filter-inner .search-button { margin-left: auto; } } .search-filter-inner.style-two { margin-top: 0; border-radius: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 40px 30px 25px; background: var(--heading-color); } @media only screen and (max-width: 375px) { .search-filter-inner.style-two { padding-left: 20px; padding-right: 20px; } } .search-filter-inner.style-two .filter-item { width: 100%; max-width: none; margin-right: 0; border-right: none; margin-bottom: -1px; border-radius: 10px; background: #292E2A; padding: 15px 20px 20px 55px; border: 1px solid rgba(255, 255, 255, 0.07); } .search-filter-inner.style-two .filter-item .icon { top: 20px; left: 30px; } .search-filter-inner.style-two .filter-item .title { color: #939393; } .search-filter-inner.style-two .filter-item .nice-select { background-color: transparent; } .search-filter-inner.style-two .filter-item .nice-select .current { color: white; } .search-filter-inner.style-two .filter-item .nice-select .list li { color: var(--base-color); } /* Hero Two */ @media only screen and (min-width: 1200px) { .hero-area-two { padding-bottom: 160px; } } .hero-image-two { min-height: 500px; border-radius: 10px; } @media only screen and (min-width: 1200px) { .hero-image-two { position: absolute; right: 0; bottom: 0; width: calc(50vw - 155px); height: calc(100% - 10px); } } .hero-content-two { max-width: 535px; } @media only screen and (min-width: 992px) { .hero-content-two { padding-right: 20px; } } @media only screen and (max-width: 1199px) { .hero-content-two { margin-bottom: 55px; } } .hero-content-two h1 { margin-bottom: 22px; letter-spacing: -2px; } @media only screen and (max-width: 1599px) { .hero-content-two h1 { font-size: 72px; } } @media only screen and (min-width: 992px) and (max-width: 1299px) { .hero-content-two h1 { font-size: 65px; } } @media only screen and (max-width: 767px) { .hero-content-two h1 { font-size: 55px; } } @media only screen and (max-width: 575px) { .hero-content-two h1 { font-size: 50px; } } @media only screen and (max-width: 479px) { .hero-content-two h1 { font-size: 45px; } } @media only screen and (max-width: 375px) { .hero-content-two h1 { font-size: 40px; } } .hero-content-two p { line-height: 1.66; } @media only screen and (min-width: 376px) { .hero-content-two p { font-size: 18px; } } /* Hero Three */ .hero-area-three { margin-left: 30px; margin-right: 30px; } @media only screen and (max-width: 991px) { .hero-area-three { margin-left: 15px; margin-right: 15px; } } @media only screen and (min-width: 992px) { .hero-content-three .subtitle { font-size: 20px; } } .hero-content-three h1 { font-size: 80px; font-weight: 500; margin-bottom: 50px; letter-spacing: -2px; } @media only screen and (max-width: 1199px) { .hero-content-three h1 { font-size: 65px; } } @media only screen and (max-width: 767px) { .hero-content-three h1 { font-size: 55px; margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .hero-content-three h1 { font-size: 50px; } } @media only screen and (max-width: 479px) { .hero-content-three h1 { font-size: 42px; } } @media only screen and (max-width: 375px) { .hero-content-three h1 { font-size: 36px; } } @media only screen and (min-width: 1400px) { .hero-content-three p { font-size: 27px; } } @media only screen and (min-width: 768px) and (max-width: 1399px) { .hero-content-three p { font-size: 22px; } } .hero-content-three p span { color: white; font-weight: 600; padding-left: 8px; padding-right: 5px; border-radius: 12px; background: var(--secondary-color); } .hero-shapes .shape { z-index: -1; position: absolute; } .hero-shapes .shape.one { left: 0; top: 6%; max-width: 30%; } .hero-shapes .shape.two { top: 0; right: 25%; max-width: 10%; } .hero-shapes .shape.three { left: 5%; bottom: 3%; max-width: 20%; } .hero-shapes .shape.four { bottom: 0; right: 3%; max-width: 30%; } /*******************************************************/ /******************* ## Banner Area *******************/ /*******************************************************/ .page-banner-area { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; min-height: 590px; border-radius: 10px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-left: 30px; margin-right: 30px; } @media only screen and (max-width: 991px) { .page-banner-area { margin-left: 15px; margin-right: 15px; } } @media only screen and (max-width: 1399px) { .page-banner-area { min-height: 450px; } } @media only screen and (max-width: 1199px) { .page-banner-area { min-height: 400px; } } @media only screen and (max-width: 767px) { .page-banner-area { min-height: 350px; } } @media only screen and (max-width: 575px) { .page-banner-area { min-height: 300px; } } .page-banner-area:before { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(29, 35, 31, 0)), to(#1D231F)); background: -webkit-linear-gradient(top, rgba(29, 35, 31, 0) 0%, #1D231F 100%); background: -o-linear-gradient(top, rgba(29, 35, 31, 0) 0%, #1D231F 100%); background: linear-gradient(180deg, rgba(29, 35, 31, 0) 0%, #1D231F 100%); } .banner-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .banner-inner .page-title { max-width: 800px; margin-right: 15px; } @media only screen and (min-width: 1200px) { .banner-inner .page-title { font-size: 65px; } } @media only screen and (max-width: 767px) { .banner-inner .page-title { font-size: 35px; } } @media only screen and (max-width: 575px) { .banner-inner .page-title { font-size: 30px; } } @media only screen and (min-width: 768px) { .banner-inner .breadcrumb { font-size: 20px; } } .banner-inner .breadcrumb .breadcrumb-item { font-weight: 300; color: var(--heading-color); } .banner-inner .breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 15px; } .banner-inner .breadcrumb .breadcrumb-item + .breadcrumb-item:before { font-weight: 300; content: "\f054"; font-size: 0.8em; padding-right: 15px; color: var(--heading-color); font-family: "Font Awesome 5 Pro"; } .banner-inner .breadcrumb .breadcrumb-item.active { font-weight: 500; text-decoration: underline; } .text-white .breadcrumb .breadcrumb-item { color: white; } .text-white .breadcrumb .breadcrumb-item + .breadcrumb-item:before { color: white; } @media only screen and (max-width: 991px) { .banner-and-search { padding-left: 10px; padding-right: 10px; } } .banner-and-search > .row { --bs-gutter-x: 10px; } .search-banner { min-height: 400px; margin-bottom: 10px; border-radius: 10px; background-size: cover; height: calc(100% - 10px); background-position: center; } .search-banner .content { background-repeat: repeat-x; padding: 15px 20px 100px 35px; border-radius: 10px 10px 0 0; } @media only screen and (min-width: 480px) { .search-banner .content { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media only screen and (max-width: 375px) { .search-banner .content { padding-left: 25px; } } .search-banner .content .left { color: white; font-size: 30px; font-weight: 300; line-height: 1.4; letter-spacing: -1px; padding-top: 20px; padding-bottom: 20px; } .search-banner .content .left > i { margin-left: 10px; } .search-banner .content .left > b { font-weight: 600; } .search-banner .content .left span > b { font-weight: 700; } .search-banner .content .right { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 180px; height: 180px; text-align: center; 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; color: var(--heading-color); background-size: cover; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .search-banner .content .right span { font-size: 2em; font-weight: 500; line-height: 0.9; } /*******************************************************/ /**************** ## Destinations Area ****************/ /*******************************************************/ .destination-item { color: #92A498; margin-bottom: 30px; background: #232C26; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); } .destination-item .image { margin: 10px; overflow: hidden; position: relative; border-radius: 10px; } .destination-item .image img { width: 100%; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .destination-item .image .ratting { position: absolute; left: 0; top: 0; z-index: 2; color: white; font-size: 18px; padding: 30px 50px 20px; background: var(--secondary-color); -webkit-transform: rotate(-45deg) translate(-30px, -40px); -ms-transform: rotate(-45deg) translate(-30px, -40px); transform: rotate(-45deg) translate(-30px, -40px); } .destination-item .image .ratting i { color: white; font-size: 16px; margin: 0 5px 0 0; } .destination-item .image .heart { z-index: 2; position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; background: white; line-height: 40px; border-radius: 50%; text-align: center; color: var(--secondary-color); } .destination-item .content { padding: 18px 40px 40px; } @media only screen and (max-width: 1599px) { .destination-item .content { padding-left: 22px; padding-right: 22px; } } .destination-item .content .location { display: block; margin-bottom: 3px; } .destination-item .content .location i { margin-right: 5px; } @media only screen and (max-width: 375px) { .destination-item .content h5 { font-size: 22px; } } .destination-item .content h5 a { color: white; } .destination-item .content h5 a:hover { text-decoration: underline; } .destination-item .destination-footer { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 20px 40px 15px; 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; border-top: 1px solid rgba(255, 255, 255, 0.1); } @media only screen and (max-width: 1599px) { .destination-item .destination-footer { padding-left: 22px; padding-right: 22px; } } .destination-item .destination-footer .price { font-size: 14px; margin-bottom: 5px; } .destination-item .destination-footer .price span { color: white; font-size: 24px; font-weight: 500; } .destination-item .destination-footer .read-more { color: white; margin-bottom: 5px; } .destination-item:hover .image img { -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); } .destination-item.style-two { background: white; text-align: center; margin-bottom: 10px; border: 1px solid var(--border-color); } .destination-item.style-two .image { display: inline-block; } .destination-item.style-two .image .heart { width: 30px; height: 30px; font-size: 13px; line-height: 30px; } .destination-item.style-two .image .location { position: absolute; right: 10px; bottom: 10px; font-size: 14px; padding: 0 10px; font-weight: 500; background: white; border-radius: 7px; color: var(--heading-color); } .destination-item.style-two .image .location i { margin-right: 5px; } .destination-item.style-two .content { position: relative; padding: 15px 45px 20px 30px; } @media only screen and (max-width: 1299px) { .destination-item.style-two .content { padding-left: 20px; padding-right: 35px; } } .destination-item.style-two .content h6 { margin-bottom: 0; } @media only screen and (max-width: 375px) { .destination-item.style-two .content h6 { font-size: 18px; } } .destination-item.style-two .content .time { font-size: 14px; } .destination-item.style-two .content .more { color: #ADADAD; position: absolute; right: 30px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (max-width: 1299px) { .destination-item.style-two .content .more { right: 20px; } } .destination-item.style-two:hover .more { color: var(--heading-color); } .destination-item.style-two.bgc-lighter { background: var(--lighter-color); } .destination-item.style-two.bgc-lighter .content { padding: 10px 35px 15px; } .destination-item.style-three { 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: 767px) { .destination-item.style-three { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .destination-item.style-three .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 48%; } @media only screen and (max-width: 767px) { .destination-item.style-three .image { max-width: none; width: calc(100% - 20px); } } .destination-item.style-three .content { padding: 30px 50px 25px 40px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .destination-item.style-three .content { padding-left: 15px; padding-right: 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .destination-item.style-three .content { padding-left: 25px; padding-right: 35px; } } @media only screen and (max-width: 767px) { .destination-item.style-three .content { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; padding-left: 50px; padding-right: 50px; } } @media only screen and (max-width: 479px) { .destination-item.style-three .content { padding-left: 35px; padding-right: 35px; } } @media only screen and (max-width: 375px) { .destination-item.style-three .content { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 1600px) { .destination-item.style-three .content:first-child { padding-left: 50px; padding-right: 40px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .destination-item.style-three .content:first-child { padding-left: 25px; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .destination-item.style-three .content:first-child { padding-left: 35px; padding-right: 25px; } } .destination-item.style-three .content h5 { max-width: 320px; } .destination-item.style-three .content .list-style-one { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 25px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .destination-item.style-three .content .list-style-one li:nth-child(odd) { width: 55%; } .destination-item.style-three .content .list-style-one li:nth-child(even) { width: 42%; } .destination-item.style-three .content .destination-footer { margin-top: 20px; padding: 20px 0 0; } .destination-item.style-three.bgc-lighter { color: var(--base-color); background: var(--lighter-color); border: 1px solid var(--border-color); } .destination-item.style-three.bgc-lighter .image .badge { position: absolute; left: 10px; top: 10px; z-index: 2; font-size: 16px; font-weight: 500; padding: 5px 12px; border-radius: 10px; background: var(--secondary-color); } .destination-item.style-three.bgc-lighter .image .badge.bgc-pink { background: #FD4C5C; } .destination-item.style-three.bgc-lighter .image .badge.bgc-primary { background: var(--primary-color); } @media only screen and (min-width: 992px) { .destination-item.style-three.bgc-lighter .content { padding-left: 30px; padding-right: 40px; } } .destination-item.style-three.bgc-lighter .content .destination-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; } .destination-item.style-three.bgc-lighter .content .destination-header .location { margin-right: 20px; margin-bottom: 5px; } .destination-item.style-three.bgc-lighter .content .destination-header .ratting { padding: 5px 10px; background: white; margin-bottom: 5px; border-radius: 30px; } .destination-item.style-three.bgc-lighter .content .destination-header .ratting i { font-size: 10px; } .destination-item.style-three.bgc-lighter .content h5 { max-width: none; } .destination-item.style-three.bgc-lighter .content h5 a { color: var(--heading-color); } .destination-item.style-three.bgc-lighter .content p { margin-top: 12px; } .destination-item.style-three.bgc-lighter .content .destination-footer { border-top-color: var(--border-color); } .destination-item.style-three.bgc-lighter .content .destination-footer .price span { color: var(--heading-color); } .destination-item.style-three.bgc-lighter .content .destination-footer .read-more { color: var(--base-color); text-decoration: underline; } .destination-item.style-three.bgc-lighter .content .destination-footer .read-more i { background: var(--secondary-color); } .destination-item.style-three.bgc-lighter .content .destination-footer .theme-btn.style-three { margin-bottom: 5px; padding: 5px 20px; font-size: 14px; } .destination-item.style-three.tour-grid { display: block; } .destination-item.style-three.tour-grid .image { max-width: none; } .destination-item.style-three.tour-grid .content { padding: 20px 30px 30px; } @media only screen and (max-width: 375px) { .destination-item.style-three.tour-grid .content { padding-left: 20px; padding-right: 20px; } } .destination-item.style-three.tour-grid .content .destination-footer { margin-top: 15px; border-top: none; } .destination-item.style-three.tour-grid .content .destination-footer .theme-btn.style-three:hover { background: var(--secondary-color); border-color: var(--secondary-color); } .destination-item.style-four { color: var(--base-color); background: var(--lighter-color); border: 1px solid var(--border-color); } .destination-item.style-four .content h5 a, .destination-item.style-four .destination-footer .read-more, .destination-item.style-four .destination-footer .price span { color: var(--heading-color); } @media only screen and (min-width: 576px) { .destination-item.style-four.image-left { display: -webkit-box; display: -ms-flexbox; display: flex; } } .destination-item.style-four.image-left .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } @media only screen and (min-width: 576px) { .destination-item.style-four.image-left .image { max-width: 46%; } } .destination-item.style-four.image-left .content { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 50px 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media only screen and (max-width: 575px) { .destination-item.style-four.image-left .content { padding-top: 30px; padding-bottom: 40px; } } .destination-item.style-four.image-left .content .price { display: block; font-size: 14px; margin-top: auto; margin-bottom: 15px; } .destination-item.style-four.image-left .content .price span { font-size: 24px; font-weight: 500; color: var(--heading-color); } .destination-item.style-four.image-left .content .theme-btn { font-size: 14px; padding: 4px 20px; } .destination-item.style-four.no-border { border: none; margin-bottom: 50px; background: transparent; } .destination-item.style-four.no-border .image { margin: 0 0 22px; } .destination-item.style-four.no-border .image .badge { position: absolute; left: 10px; top: 10px; z-index: 2; font-size: 16px; font-weight: 500; padding: 5px 12px; border-radius: 10px; background: var(--secondary-color); } .destination-item.style-four.no-border .image .badge.bgc-pink { background: #FD4C5C; } .destination-item.style-four.no-border .image .badge.bgc-primary { background: var(--primary-color); } .destination-item.style-four.no-border .content { padding: 0; } .destination-item.style-four.no-border .destination-footer { border-top: none; padding: 18px 0 10px; } .destination-item.style-four.no-border .theme-btn.style-three { font-size: 14px; padding: 4px 20px; } .text-white .destination-item.style-four.no-border .image .heart i { color: var(--secondary-color); } .text-white .destination-item.style-four.no-border .content .location, .text-white .destination-item.style-four.no-border .content .location i { color: #92A498; } .text-white .destination-item.style-four.no-border .destination-footer .price span { color: white; } .text-white .destination-item.style-four.no-border .theme-btn.style-three:not(:hover) { color: #92A498; border-color: #92A498; } .text-white .destination-item.style-four.no-border .theme-btn.style-three:not(:hover) i, .text-white .destination-item.style-four.no-border .theme-btn.style-three:not(:hover) span { color: #92A498; } .popular-destinations-wrap { border: 1px solid var(--border-color); } .destination-active { margin-left: -5px; margin-right: -5px; } .destination-active .destination-item.style-two { padding: 30px; text-align: center; margin-left: 5px; margin-right: 5px; } .destination-active .destination-item.style-two .image { margin: 0 0 25px; border-radius: 50%; } .destination-active .destination-item.style-two .image img { border-radius: 50%; display: inline-block; } .destination-active .destination-item.style-two .content { padding: 0; } .destination-active .slick-dots { margin-top: 50px; } .destinations-page-area .destination-item.style-two .content { padding-left: 20px; padding-right: 20px; } @media only screen and (max-width: 375px) { .destinations-page-area .destination-item.style-two .content { padding-left: 0; padding-right: 0; } } .hot-deals-active { margin-left: -15px; margin-right: -15px; } .hot-deals-active .destination-item.style-four.no-border { margin-left: 15px; margin-right: 15px; } .hot-deals-active .slick-list { padding-top: 40px; } .hot-deals-active .slick-dots { margin-top: 10px; } @media only screen and (min-width: 1200px) { .destination-left-content { margin-top: 65px; } } .destinations-nav { padding: 5px; -ms-flex-wrap: wrap; flex-wrap: wrap; border-radius: 30px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid var(--border-color); } .destinations-nav li { cursor: pointer; font-size: 20px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-weight: 500; padding: 10px 25px; border-radius: 30px; } @media only screen and (max-width: 991px) { .destinations-nav li { font-size: 18px; } } @media only screen and (max-width: 767px) { .destinations-nav li { font-size: 16px; padding: 5px 15px; } } .destinations-nav li.active { color: white; background: var(--primary-color); } .destinations-nav.style-two li { font-size: 16px; padding: 1px 15px; } .destinations-nav.style-two li.active { background: var(--secondary-color); } .text-white .destinations-nav { border-color: rgba(255, 255, 255, 0.1); } .text-white .destinations-nav li:not(.active) { color: #92A498; } /* Destination Details */ .gallery-more-btn { position: absolute; right: 27%; bottom: 60px; } @media only screen and (max-width: 1199px) { .destination-details-content .section-title .h2 { font-size: 35px; } } @media only screen and (max-width: 991px) { .destination-details-content .section-title .h2 { font-size: 30px; } } @media only screen and (max-width: 575px) { .destination-details-content .section-title .h2 { font-size: 25px; } } @media only screen and (max-width: 375px) { .destination-details-content .section-title .h2 { font-size: 20px; } } @media only screen and (min-width: 1200px) { .destination-details-content .section-title h2 { font-size: 65px; } } /* Tour Grid */ .tour-grid-wrap .tour-grid.destination-item .content { padding-top: 10px; position: relative; padding-bottom: 15px; } .tour-grid-wrap .tour-grid.destination-item .content .ratting { position: absolute; right: 20px; top: -46px; } .tour-grid-wrap .tour-grid.destination-item .content .blog-meta { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tour-grid-wrap .tour-grid.destination-item .content .blog-meta li:not(:last-child) { margin-right: 10px; } .tour-grid-wrap .tour-grid.destination-item .content .destination-footer { margin-top: 25px; padding-top: 25px; border-top: 1px solid var(--border-color); } .tour-grid-wrap .tour-grid.destination-item .content .destination-footer .theme-btn.style-three { width: 35px; height: 35px; padding: 0; line-height: 35px; } .tour-grid-wrap .tour-grid.destination-item .content .destination-footer .theme-btn.style-three i { margin-left: 0; } /* Tour Details */ @media only screen and (min-width: 576px) { .tour-header-content .ratting i { font-size: 18px; } } .tour-header-social a { margin-bottom: 10px; border-radius: 20px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px 20px 5px 5px; border: 1px solid var(--border-color); } .tour-header-social a:not(:last-child) { margin-right: 20px; } @media only screen and (max-width: 375px) { .tour-header-social a:not(:last-child) { margin-right: 10px; } } .tour-header-social a i { -webkit-box-flex: 0; -ms-flex: none; flex: none; color: white; font-size: 12px; margin-right: 10px; width: 30px; height: 30px; background: var(--primary-color); line-height: 30px; border-radius: 50%; text-align: center; } .tour-header-social a i.bgc-secondary { background: var(--secondary-color); } .tour-details-content h3 { margin-bottom: 20px; } .tour-include-exclude { border-radius: 10px; padding: 35px 50px 28px; border: 1px solid var(--border-color); } @media only screen and (max-width: 1199px) { .tour-include-exclude { padding-left: 25px; padding-right: 20px; } } .tour-include-exclude .check li i { color: var(--primary-color); } .tour-map iframe { height: 500px; border-radius: 10px; } @media only screen and (max-width: 767px) { .tour-map iframe { height: 400px; } } @media only screen and (max-width: 575px) { .tour-map iframe { height: 300px; } } .clients-reviews { padding: 50px; border-radius: 10px; } @media only screen and (min-width: 768px) { .clients-reviews { 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: 479px) { .clients-reviews { padding-left: 30px; padding-right: 30px; } } @media only screen and (max-width: 375px) { .clients-reviews { padding-left: 20px; padding-right: 20px; } } .clients-reviews .left { padding: 60px; margin-right: 8%; border-radius: 10px; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } @media only screen and (max-width: 1199px) { .clients-reviews .left { padding-left: 30px; padding-right: 30px; } } @media only screen and (max-width: 767px) { .clients-reviews .left { margin-right: 0; margin-bottom: 30px; } } .clients-reviews .left b { color: white; line-height: 1; font-size: 70px; margin-top: -5px; } .clients-reviews .left span { color: white; margin-top: 5px; margin-bottom: 10px; } .clients-reviews .left .ratting { margin-bottom: 5px; } .clients-reviews .left .ratting i { font-size: 16px; } .clients-reviews .right { width: 100%; } .ratting-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .ratting-item:not(:last-child) { margin-bottom: 10px; } .ratting-item .title { color: white; font-size: 18px; min-width: 68px; font-weight: 500; } @media only screen and (max-width: 375px) { .ratting-item .title { font-size: 16px; min-width: 59px; } } .ratting-item .line { width: 100%; height: 5px; margin-left: 22px; margin-right: 22px; background: rgba(255, 255, 255, 0.2); } @media only screen and (max-width: 479px) { .ratting-item .line { margin-left: 10px; margin-right: 10px; } } .ratting-item .line span { height: 100%; display: block; background: var(--secondary-color); } .ratting-item .ratting { min-width: 97px; } @media only screen and (max-width: 375px) { .ratting-item .ratting { min-width: 75px; } } .ratting-item .ratting i { font-size: 12px; } @media only screen and (max-width: 375px) { .ratting-item .ratting i { font-size: 8px; } } /*******************************************************/ /******************* ## Counter Area *******************/ /*******************************************************/ .counter-item { margin-bottom: 30px; } .counter-item .count-text { display: block; font-size: 55px; } .counter-item.style-two { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding: 50px 70px; margin: 0 -1px -1px 0; background: var(--lighter-color); border: 1px solid var(--border-color); } @media only screen and (max-width: 1199px) { .counter-item.style-two { padding-left: 50px; padding-right: 50px; } } @media only screen and (min-width: 376px) and (max-width: 479px) { .counter-item.style-two { padding-left: 30px; padding-right: 30px; } } .counter-item.style-two .icon { line-height: 1; font-size: 55px; margin-bottom: 15px; color: var(--secondary-color); } .counter-item.style-two .count-text { margin-bottom: 3px; } @media only screen and (max-width: 479px) { .counter-item.style-two .count-text { font-size: 45px; } } .counter-item.style-two .counter-title { display: block; font-size: 20px; } @media only screen and (max-width: 479px) { .counter-item.style-two .counter-title { font-size: 18px; } } .counter-item.style-two:hover { background: white; border-color: white; -webkit-box-shadow: 10px 0px 60px rgba(175, 175, 175, 0.25); box-shadow: 10px 0px 60px rgba(175, 175, 175, 0.25); } .count-text.plus:after { content: '+'; } .count-text.k-plus:after { content: 'k+'; } .count-text.m-plus:after { content: 'm+'; } /*******************************************************/ /******************** ## About Area ********************/ /*******************************************************/ .about-us-content { max-width: 450px; } .about-us-image { z-index: 1; padding: 5%; margin: 30px; max-width: 630px; border-radius: 50%; position: relative; 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; border: 1px solid var(--border-color); -webkit-animation: circle_animation 30s linear infinite; animation: circle_animation 30s linear infinite; } @media only screen and (min-width: 992px) { .about-us-image { margin-left: auto; } } .about-us-image:before { content: ''; width: 82%; height: 82%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; background: rgba(var(--primary-rgb), 0.1); } .about-us-image > img { max-width: 88%; -webkit-animation: circle_animation_invers 30s linear infinite; animation: circle_animation_invers 30s linear infinite; } .about-us-image .shape { position: absolute; width: 65px; height: 65px; background: white; line-height: 65px; border-radius: 50%; text-align: center; -webkit-animation: zoomInOut 5s linear infinite; animation: zoomInOut 5s linear infinite; -webkit-box-shadow: 0px 10px 30px rgba(184, 184, 184, 0.25); box-shadow: 0px 10px 30px rgba(184, 184, 184, 0.25); } @media only screen and (max-width: 479px) { .about-us-image .shape { width: 45px; height: 45px; line-height: 45px; } } .about-us-image .shape img { max-width: 50%; } .about-us-image .shape:nth-child(1) { left: 22%; top: -5px; } .about-us-image .shape:nth-child(2) { left: 70%; top: 1%; } .about-us-image .shape:nth-child(3) { top: 43%; right: -30px; } .about-us-image .shape:nth-child(4) { right: 8%; bottom: 8%; } .about-us-image .shape:nth-child(5) { left: 38%; bottom: -30px; } .about-us-image .shape:nth-child(6) { left: 0; bottom: 20%; } .about-us-image .shape:nth-child(7) { top: 30%; left: -25px; } .about-us-image .shape:nth-child(odd) { -webkit-animation-delay: 1s; animation-delay: 1s; } /* About Two */ .experience-years { width: 216px; height: 216px; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 35px; border-radius: 50%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid var(--border-color); } .experience-years .title { color: white; padding: 2px 15px; position: absolute; border-radius: 20px; background: var(--primary-color); -webkit-transform: rotate(25deg) translate(40px, -60px); -ms-transform: rotate(25deg) translate(40px, -60px); transform: rotate(25deg) translate(40px, -60px); } .experience-years .title.bgc-secondary { background: var(--secondary-color); } .experience-years .text { font-weight: 500; color: var(--heading-color); } .experience-years .years { line-height: 1; font-size: 80px; font-weight: 600; color: var(--heading-color); } /* About Page */ .about-page-content .list-style-two { 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; } .about-page-content .list-style-two li { width: 48%; } @media only screen and (max-width: 479px) { .about-page-content .list-style-two li { width: 100%; } } .about-feature-image { margin-bottom: 30px; } .about-feature-image img { width: 100%; border-radius: 10px; } .about-feature-boxes .feature-item.style-three { padding-top: 40px; margin-bottom: 30px; padding-bottom: 20px; } /* FAQ Page About */ .faq-page-about-content { max-width: 525px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .faq-page-about-content .section-title h2 { font-size: 40px; } } .faq-page-about-content .list-style-two { 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-about-content .list-style-two li { width: 48%; } @media only screen and (max-width: 479px) { .faq-page-about-content .list-style-two li { width: 100%; } } /*******************************************************/ /******************* ## Features Area *******************/ /*******************************************************/ .feature-item { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; border-radius: 10px; margin-bottom: 30px; padding: 40px 40px 20px; background: var(--lighter-color); border: 1px solid var(--border-color); } @media only screen and (max-width: 767px) { .feature-item { margin-top: 0; } } @media only screen and (max-width: 375px) { .feature-item { padding-left: 30px; padding-right: 30px; } } .feature-item .icon { z-index: 1; line-height: 1; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-size: 55px; position: relative; margin-bottom: 50px; color: var(--primary-color); } .feature-item .icon:before { content: ''; width: 50px; height: 50px; z-index: -1; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: white; position: absolute; left: 15px; bottom: -10px; border-radius: 50%; } .feature-item:hover { background: white; border-radius: 20px; -webkit-box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25); box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25); } .feature-item:hover .icon { color: var(--secondary-color); } .feature-item:hover .icon:before { background: rgba(var(--secondary-rgb), 0.1); } .feature-item.style-two { background: white; border-radius: 10px; } .feature-item.style-two .icon { margin-bottom: 18px; color: var(--secondary-color); } .feature-item.style-two .icon:before { display: none; } .feature-item.style-two .content h5 { margin-bottom: 0; letter-spacing: -1px; } .feature-item.style-two .content p { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .feature-item.style-two:hover { background: var(--primary-color); border-color: var(--primary-color); -webkit-box-shadow: 10px 4px 40px rgba(99, 171, 69, 0.5); box-shadow: 10px 4px 40px rgba(99, 171, 69, 0.5); } .feature-item.style-two:hover .icon, .feature-item.style-two:hover .content p, .feature-item.style-two:hover .content h5 a { color: white; } .feature-item.style-three { border: none; border-radius: 10px; margin-bottom: 10px; padding: 50px 50px 30px; height: calc(100% - 10px); background: var(--heading-color); } @media only screen and (max-width: 479px) { .feature-item.style-three { padding-left: 35px; padding-right: 35px; } } @media only screen and (max-width: 375px) { .feature-item.style-three { padding-left: 25px; padding-right: 25px; } } .feature-item.style-three .icon, .feature-item.style-three .content p, .feature-item.style-three .content h3 a, .feature-item.style-three .content h6 a, .feature-item.style-three .icon-title h5 a { color: white; } .feature-item.style-three .icon { margin-bottom: 25px; } .feature-item.style-three .icon:before { display: none; } @media only screen and (max-width: 1599px) { .feature-item.style-three .content h3 { font-size: 25px; } } .feature-item.style-three.bgc-primary { background: var(--primary-color); } .feature-item.style-three.bgc-secondary { background: var(--secondary-color); } .feature-item.style-three.bgc-pink { background: #FD4C5C; } .feature-item.style-three .icon-title { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .feature-item.style-three .icon-title .icon { margin-right: 30px; margin-bottom: 15px; } @media only screen and (max-width: 375px) { .feature-item.style-three .icon-title .icon { font-size: 45px; margin-right: 20px; } } .feature-item.style-three .icon-title h5 { line-height: 1.3; margin-top: -7px; margin-bottom: 15px; } @media only screen and (max-width: 375px) { .feature-item.style-three .icon-title h5 { font-size: 20px; } } .features-content-part { max-width: 580px; } .features-content-part .section-title { max-width: 500px; } @media only screen and (min-width: 768px) { .features-customer-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .features-customer-box .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 50%; position: relative; } @media only screen and (max-width: 767px) { .features-customer-box .image { max-width: none; margin-left: 15px; margin-right: 15px; } } .features-customer-box .content { margin-left: -20%; background: white; border-radius: 20px; padding: 50px 55px 40px 30%; padding-left: calc(20% + 55px); border: 1px solid var(--border-color); -webkit-box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25); box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25); } @media only screen and (max-width: 767px) { .features-customer-box .content { margin-left: 0; margin-top: -35px; padding: 70px 45px 30px; } } @media only screen and (max-width: 375px) { .features-customer-box .content { padding-left: 25px; padding-right: 25px; } } .features-customer-box .content h6 { font-size: 18px; } .feature-authors { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .feature-authors > * { width: 50px; height: 50px; border-radius: 50%; border: 2px solid white; } .feature-authors img { margin-right: -15px; } .feature-authors > span { color: white; line-height: 46px; text-align: center; background: var(--secondary-color); } /* Features Two */ @media only screen and (min-width: 992px) { .features-wrap-two { margin-right: -350px; } } .features-image-two img { border-radius: 10px; } /* Features Three */ .features-area-three { margin-left: 30px; margin-right: 30px; } @media only screen and (max-width: 991px) { .features-area-three { margin-left: 15px; margin-right: 15px; } } .features-area-three .row { --bs-gutter-x: 10px; } .about-feature-two .feature-item.style-two:hover { background: var(--secondary-color); border-color: var(--secondary-color); -webkit-box-shadow: 10px 4px 40px rgba(247, 146, 30, 0.5); box-shadow: 10px 4px 40px rgba(247, 146, 30, 0.5); } .about-feature-two .shape { position: absolute; left: 0; top: 28px; max-width: 15%; } /* Feature FAQ Page */ .faq-page-featuers .feature-item.style-three { height: calc(100% - 30px); padding-bottom: 20px; margin-bottom: 30px; padding-top: 40px; } @media only screen and (min-width: 376px) { .faq-page-featuers .feature-item.style-three { padding-left: 40px; padding-right: 40px; } } .faq-page-featuers .feature-item.style-three .icon { font-size: 45px; } /*******************************************************/ /***************** ## Mobile App Area *****************/ /*******************************************************/ .mobile-app-content { max-width: 475px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .mobile-app-content .section-title h2 { font-size: 40px; } } .mobile-app-content .list-style-two { 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; } .mobile-app-content .list-style-two li { width: 48%; } @media only screen and (max-width: 479px) { .mobile-app-content .list-style-two li { width: 100%; } } .google-play-app-store { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .google-play-app-store a { max-width: 205px; } .google-play-app-store a:first-child { margin-right: 25px; } .google-play-app-store a img { border-radius: 8px; } .mobile-app-images { z-index: 1; position: relative; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; } @media only screen and (min-width: 1200px) { .mobile-app-images { margin-left: auto; } } .mobile-app-images .images { display: -webkit-box; display: -ms-flexbox; display: flex; } .mobile-app-images .images img:nth-child(1) { max-width: 23%; margin-bottom: 3.5%; -ms-flex-item-align: end; align-self: flex-end; } .mobile-app-images .images img:nth-child(2) { max-width: 50%; margin-bottom: 1%; margin-left: -0.7%; } .mobile-app-images .images img:nth-child(3) { max-width: 26%; margin-top: 10%; -ms-flex-item-align: start; align-self: flex-start; } .mobile-app-images .bg { width: 83%; z-index: -1; position: absolute; left: 6%; bottom: 0; } /*******************************************************/ /**************** ## Testimonials Area ****************/ /*******************************************************/ .testimonials-wrap { padding: 100px 85px; border-radius: 20px; border: 1px solid var(--border-color); } @media only screen and (max-width: 1299px) { .testimonials-wrap { padding-left: 40px; padding-right: 40px; } } @media only screen and (max-width: 767px) { .testimonials-wrap { padding-left: 25px; padding-right: 25px; } } .testimonial-left-image { min-height: 500px; border-radius: 20px; background-size: cover; background-position: center; } @media only screen and (min-width: 992px) { .testimonial-left-image { position: absolute; right: 0; top: -30px; width: calc(50vw - 20%); height: calc(100% + 60px); } } .testimonial-right-content { max-width: 570px; } @media only screen and (min-width: 992px) { .testimonial-right-content { margin-left: auto; } } .testimonial-item .text { font-size: 30px; line-height: 1.5; margin-bottom: 60px; } @media only screen and (max-width: 767px) { .testimonial-item .text { font-size: 25px; } } @media only screen and (max-width: 575px) { .testimonial-item .text { font-size: 22px; } } @media only screen and (max-width: 375px) { .testimonial-item .text { font-size: 20px; } } .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: 15px; } .testi-header .quote { font-size: 60px; margin-right: 30px; margin-bottom: 15px; color: var(--primary-color); } @media only screen and (max-width: 767px) { .testi-header .quote { font-size: 45px; margin-right: 15px; } } .testi-header h4 { margin-right: 15px; margin-bottom: 15px; } @media only screen and (max-width: 767px) { .testi-header h4 { font-size: 20px; } } .testi-header .ratting { padding: 5px 12px; margin-bottom: 15px; border-radius: 20px; background: var(--secondary-color); } .testi-header .ratting i { color: white; } @media only screen and (min-width: 768px) { .testi-header .ratting i { font-size: 16px; } } .author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .author .image { max-width: 65px; margin-right: 25px; } @media only screen and (max-width: 575px) { .author .image { margin-right: 15px; } } @media only screen and (max-width: 375px) { .author .image { max-width: 55px; } } .author .image img { border-radius: 50%; } .author .content h5 { margin-bottom: 0; } @media only screen and (max-width: 375px) { .author .content h5 { font-size: 18px; } } .testimonial-left-content { position: relative; max-width: 595px; padding-right: 50px; padding-bottom: 60px; } @media only screen and (max-width: 479px) { .testimonial-left-content { padding-right: 20px; } } .testimonial-left-content .happy-customer { position: absolute; right: 0; bottom: 0; padding: 35px 40px 40px; max-width: 270px; border-radius: 10px; } @media only screen and (max-width: 479px) { .testimonial-left-content .happy-customer { padding: 25px 30px 30px; } } .testimonial-left-content .happy-customer h6 { font-size: 18px; font-weight: 400; margin-bottom: 18px; letter-spacing: -0.02em; } .testimonial-left-content .happy-customer hr { margin-top: 30px; margin-bottom: 20px; opacity: .3; } .testimonial-left-content .happy-customer p { margin-bottom: 13px; } .testimonial-left-content .happy-customer .testi-header { margin-bottom: 0; } .testimonial-left-content .happy-customer .testi-header .ratting { margin-bottom: 0; } .testimonial-left-content .happy-customer.bgc-black { outline: 5px solid white; } .testimonial-left-content .happy-customer.bgc-black .feature-authors > span { background: var(--primary-color); } /*******************************************************/ /***************** ## Instagram Area *****************/ /*******************************************************/ .footer-instagram .row { --bs-gutter-x: 10px; } .instagram-item { display: block; margin-bottom: 10px; } .instagram-item img { width: 100%; border-radius: 7px; } /*******************************************************/ /***************** ## Newsletter Area *****************/ /*******************************************************/ .newsletter-content-part { max-width: 545px; } .newsletter-content-part > p { margin-bottom: 0; } @media only screen and (min-width: 376px) { .newsletter-content-part > p { margin-left: 30px; } } .text-white.newsletter-content-part .newsletter-form input { color: var(--base-color); } .newsletter-bg-image { position: absolute; left: 0; bottom: 0; z-index: -1; text-align: center; width: calc(50vw - 140px); } @media only screen and (max-width: 991px) { .newsletter-bg-image { width: 100%; } } .newsletter-image-part { min-height: 500px; } @media only screen and (min-width: 992px) { .newsletter-image-part { height: 100%; width: calc(50vw - 200px); position: absolute; left: calc(50vw - 140px); top: 0; } } .newsletter-three .newsletter-image-part { right: 0; left: auto; } @media only screen and (min-width: 992px) { .newsletter-three .newsletter-image-part { width: calc(50vw - 15px); } } @media only screen and (min-width: 992px) { .newsletter-three .newsletter-bg-image { width: calc(50vw - 15px); } } /*******************************************************/ /******************** ## Team Area ********************/ /*******************************************************/ .team-area:before { position: absolute; left: 0; top: 0; z-index: -1; content: ''; width: 100%; height: 100%; background: -webkit-linear-gradient(88.59deg, rgba(29, 35, 31, 0.3) 1.2%, #1D231F 98.81%); background: -o-linear-gradient(88.59deg, rgba(29, 35, 31, 0.3) 1.2%, #1D231F 98.81%); background: linear-gradient(1.41deg, rgba(29, 35, 31, 0.3) 1.2%, #1D231F 98.81%); } .team-item { margin-bottom: 30px; } .team-item img { width: 100%; border-radius: 10px; } .team-item .content { position: absolute; left: 10px; bottom: 10px; right: 10px; background: white; text-align: center; border-radius: 10px; padding: 15px 10px; } .team-item .content h6 { margin-bottom: 0; } .team-item .content .designation { display: block; } .team-item .content .social-style-one { display: none; margin-top: 10px; margin-bottom: 5px; } .team-item .content .social-style-one a { width: 40px; height: 40px; line-height: 40px; display: inline-block; } .team-item .content .social-style-one a:not(:hover) { color: var(--primary-color); background: rgba(var(--primary-rgb), 0.15); } .guide-shapes .shape { top: 0; z-index: -1; max-width: 15%; position: absolute; } .guide-shapes .shape.one { left: 0; } .guide-shapes .shape.two { right: 2%; } /*******************************************************/ /******************** ## CTA Area ********************/ /*******************************************************/ .cta-item { z-index: 1; padding: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; min-height: 400px; position: relative; border-radius: 15px; margin-bottom: 30px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-size: cover; height: calc(100% - 30px); background-position: center; } @media only screen and (max-width: 991px) { .cta-item { padding-left: 45px; padding-right: 45px; } } @media only screen and (max-width: 479px) { .cta-item { padding-left: 35px; padding-right: 35px; } } @media only screen and (max-width: 375px) { .cta-item { padding-right: 30px; } } .cta-item:before { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; z-index: -1; background: -webkit-gradient(linear, left bottom, left top, from(rgba(29, 35, 31, 0.5)), to(rgba(29, 35, 31, 0))); background: -webkit-linear-gradient(bottom, rgba(29, 35, 31, 0.5) 0%, rgba(29, 35, 31, 0) 100%); background: -o-linear-gradient(bottom, rgba(29, 35, 31, 0.5) 0%, rgba(29, 35, 31, 0) 100%); background: linear-gradient(360deg, rgba(29, 35, 31, 0.5) 0%, rgba(29, 35, 31, 0) 100%); } .cta-item .category { color: white; display: block; margin-top: -5px; margin-bottom: 5px; } .cta-item h2 { color: white; max-width: 400px; margin-bottom: 30px; } @media only screen and (max-width: 1399px) { .cta-item h2 { font-size: 38px; } } @media only screen and (max-width: 375px) { .cta-item h2 { font-size: 33px; } } .cta-item .theme-btn { margin-top: auto; } /* CTA Two */ .cta-area-two { border-radius: 10px; } .cta-area-two:before { opacity: 0.75; } .cta-content-part { max-width: 444px; } .cta-content-part .section-title h2 { letter-spacing: -2px; } @media only screen and (min-width: 1400px) { .cta-content-part .section-title h2 { font-size: 65px; } } .cta-content-part .section-title h2 span { line-height: 1; border-radius: 7px; background: var(--primary-color); } .cta-content-part p { max-width: 350px; } @media only screen and (min-width: 576px) { .cta-content-part p { font-size: 20px; } } /* CTA Three */ .cta-three-content { max-width: 550px; padding: 100px 80px; } @media only screen and (max-width: 575px) { .cta-three-content { padding-left: 50px; padding-right: 50px; } } @media only screen and (max-width: 479px) { .cta-three-content { padding-left: 35px; padding-right: 35px; } } @media only screen and (max-width: 375px) { .cta-three-content { padding-left: 25px; padding-right: 25px; } } .cta-three-shape { z-index: -1; position: absolute; right: 8%; bottom: 0; max-width: 25%; } .cta-three-image { height: 100%; min-height: 400px; } /*******************************************************/ /******************* ## Benefit Area *******************/ /*******************************************************/ .benefit-area-inner { position: relative; z-index: 1; } .benefit-area-inner:before { content: ''; background-size: cover; background-position: center; background-color: var(--heading-color); background-image: url(../images/shapes/benefit-bg-shape.png); position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 1650px; height: 100%; border-radius: 20px; } @media only screen and (min-width: 376px) { .benefit-content-part .happy-customer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .benefit-content-part .happy-customer h6 { font-size: 18px; font-weight: 400; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-right: 20px; margin-bottom: 0; } @media only screen and (max-width: 375px) { .benefit-content-part .happy-customer .feature-authors { margin-top: 15px; } } .benefit-content-part .happy-customer .feature-authors > span { background: var(--primary-color); } .benefit-image-part { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 740px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media only screen and (min-width: 1200px) { .benefit-image-part { margin-left: auto; } } .benefit-image-part .image-two { margin-top: 50px; margin-left: -80px; } @media only screen and (min-width: 1200px) { .benefit-image-part.style-two { margin-left: -30px; } } /*******************************************************/ /****************** ## Products Area ******************/ /*******************************************************/ .product-item { margin-bottom: 40px; } .product-item .image { max-height: 400px; position: relative; border-radius: 7px; margin-bottom: 18px; padding-bottom: 110%; background: var(--lighter-color); border: 1px solid var(--border-color); } .product-item .image img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 80%; max-height: 80%; } .product-item .content h6 { margin-bottom: 0; } .product-slider { margin-left: -15px; margin-right: -15px; } .product-slider .product-item { margin-left: 15px; margin-right: 15px; } .product-slider .slick-dots { margin-top: 10px; } .shop-shorter { 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; } @media only screen and (max-width: 1199px) { .shop-shorter { margin-right: -10px; } } .shop-shorter .grid-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .shop-shorter .grid-list li { margin-right: 15px; } .shop-shorter .nice-select { font-size: 14px; max-width: 190px; margin-bottom: 10px; border-radius: 22px; width: calc(50% - 10px); padding: 1px 35px 1px 20px; border: 1px solid var(--border-color); } .shop-shorter .nice-select:not(:last-child) { margin-right: 10px; } .shop-shorter .nice-select:after { width: 8px; height: 8px; right: 20px; margin-top: -5px; } .shop-shorter .sort-text { font-weight: 500; color: var(--heading-color); } @media only screen and (min-width: 576px) { .shop-shorter.style-two .sort-text { font-size: 20px; } } .shop-shorter.style-two .nice-select { width: auto; font-size: 16px; border-color: black; } @media only screen and (min-width: 576px) { .shop-shorter.style-two .nice-select { max-width: 230px; border-radius: 25px; padding: 4px 45px 4px 25px; } } /* Product Details */ .preview-images { margin-bottom: 30px; border-radius: 10px; background: var(--lighter-color); border: 1px solid var(--border-color); } .preview-images .preview-item { position: relative; padding-bottom: 94%; } .preview-images .preview-item img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 60%; max-height: 70%; } .thumb-images { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .thumb-images .thumb-item { position: relative; padding-bottom: 30%; border-radius: 7px; width: calc(33% - 18px); background: var(--lighter-color); border: 1px solid var(--border-color); } .thumb-images .thumb-item img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 65%; max-height: 70%; } @media only screen and (min-width: 1200px) { .product-details-content { margin-top: 55px; max-width: 520px; margin-left: auto; } } .product-details-content .section-title h2 { margin-bottom: 7px; } .product-details-content .ratting i { font-size: 16px; } .product-details-content .price { display: block; } @media only screen and (max-width: 375px) { .product-details-content .price { font-size: 18px; } } .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 h6 { margin-bottom: 0; margin-top: 15px; margin-right: 30px; } .product-details-content .add-to-cart .theme-btn { margin-top: 15px; } .product-details-content .add-to-cart input { font-size: 22px; font-weight: 600; max-width: 130px; margin-top: 15px; margin-right: 20px; padding: 10px 30px; border-radius: 25px; background: transparent; border: 1px solid var(--border-color); } .product-details-content .wishlist { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .product-details-content .wishlist i { margin-right: 5px; } .product-details-content .category-tags li { 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 .category-tags li b { min-width: 85px; font-weight: 600; margin-right: 5px; margin-bottom: 5px; color: var(--heading-color); } .product-details-content .category-tags li a { margin-bottom: 5px; display: inline-block; } .product-details-content .category-tags li a:not(:last-child) { margin-right: 5px; } .product-details-content .category-tags li a:not(:last-child):after { content: ','; } .product-tab { margin-right: -10px; } .product-tab li { margin-right: 10px; margin-bottom: 10px; } .product-tab li a { cursor: pointer; font-weight: 600; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding: 10px 35px; border-radius: 30px; display: inline-block; color: var(--heading-color); border: 1px solid var(--border-color); } @media only screen and (max-width: 767px) { .product-tab li a { font-size: 14px; padding: 7px 20px; } } .product-tab li a i { margin-left: 10px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .product-tab li a.active { color: white; background: var(--primary-color); border-color: var(--primary-color); } .tab-content .list-style-two li { font-size: 16px; font-weight: 400; } .tab-content .list-style-two li:before { width: 20px; height: 20px; font-size: 10px; line-height: 20px; } /*******************************************************/ /**************** ## Client Logo Area ****************/ /*******************************************************/ .client-logo-wrap { border-radius: 10px; margin-left: -10px; margin-right: -10px; background: var(--lighter-color); border: 1px solid var(--border-color); } .client-logo-wrap .client-logo-item { margin-left: 10px; margin-right: 10px; } .client-logo-item { text-align: center; margin-bottom: 15px; } .client-logo-item img { display: inline-block; } /*******************************************************/ /****************** ## Contact Forms *******************/ /*******************************************************/ .contact-info-content { max-width: 385px; } .features-team-box { background: white; padding: 30px 40px; border-radius: 7px; border: 1px solid var(--border-color); -webkit-box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25); box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25); } @media only screen and (max-width: 1199px) { .features-team-box { padding-left: 30px; padding-right: 30px; } } .features-team-box h6 { font-size: 18px; margin-top: -5px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); } .features-team-box .feature-authors > * { width: 40px; height: 40px; border: none; line-height: 40px; } @media only screen and (min-width: 1200px) { .features-team-box .feature-authors img { margin-right: -8px; } } .features-team-box .feature-authors > span { font-size: 22px; } .contact-info-item { padding: 40px 50px; border-radius: 7px; margin-bottom: 30px; background: var(--lighter-color); border: 1px solid var(--border-color); } @media only screen and (max-width: 1199px) { .contact-info-item { padding-left: 33px; padding-right: 33px; } } .contact-info-item .icon { width: 55px; height: 55px; font-size: 22px; background: white; line-height: 53px; border-radius: 50%; text-align: center; margin-bottom: 33px; color: var(--primary-color); border: 1px solid var(--border-color); } @media only screen and (max-width: 375px) { .contact-info-item .icon { margin-bottom: 22px; } } .contact-info-item h5 { margin-bottom: 12px; } @media only screen and (max-width: 375px) { .contact-info-item h5 { font-size: 22px; } } .contact-info-item .text { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 20px; line-height: 1.6; } @media only screen and (max-width: 1199px) { .contact-info-item .text { font-size: 18px; } } .contact-info-item .text i { margin-top: 8px; margin-right: 10px; } .contact-images-part { position: relative; } .contact-images-part img { width: 100%; margin-bottom: 30px; } .contact-images-part .circle-logo { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; 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; width: 250px; height: 250px; background: white; line-height: 250px; border-radius: 50%; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 10px solid var(--secondary-color); } .contact-images-part .circle-logo img { width: auto; margin-bottom: 10px; } @media only screen and (max-width: 479px) { .contact-images-part .circle-logo { width: 170px; height: 170px; border-width: 8px; line-height: 170px; } .contact-images-part .circle-logo img { max-width: 33%; margin-bottom: 5px; } .contact-images-part .circle-logo .h2 { font-size: 30px; } } .contact-map iframe { margin-bottom: -10px; height: 616px; } @media only screen and (max-width: 1199px) { .contact-map iframe { height: 500px; } } @media only screen and (max-width: 767px) { .contact-map iframe { height: 350px; } } /* 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 { padding-left: 4px; width: 65px; height: 65px; background: white; line-height: 65px; border-radius: 50%; text-align: center; display: inline-block; color: var(--primary-color); } .video-play:hover { color: white; 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; } /* Video Section */ .video-title-wrap { z-index: 2; position: relative; margin-bottom: -7%; } @media only screen and (max-width: 991px) { .video-title-wrap { margin-bottom: -5%; } } .video-title { color: white; display: block; font-size: 180px; line-height: 0.93; font-family: var(--heading-font); } @media only screen and (max-width: 1199px) { .video-title { font-size: 120px; } } @media only screen and (max-width: 991px) { .video-title { font-size: 90px; } } @media only screen and (max-width: 767px) { .video-title { font-size: 70px; } } @media only screen and (max-width: 575px) { .video-title { font-size: 50px; } } @media only screen and (max-width: 375px) { .video-title { font-size: 40px; } } .video-area .for-bg { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 80%; } .video-area .shape { position: absolute; right: 4%; bottom: 0; max-width: 15%; } .video-wrap { z-index: 1; position: relative; } .video-wrap::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.3; background-color: var(--heading-color); } .video-wrap:before { z-index: 1; border-radius: 20px; } .video-wrap img { border-radius: 20px; } .video-wrap .video-play { z-index: 2; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: var(--secondary-color); font-size: 18px; line-height: 100px; background: white; -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 linear; animation: pulse 1.5s infinite linear; } @media only screen and (max-width: 991px) { .video-wrap .video-play { width: 70px; height: 70px; line-height: 70px; } } @media only screen and (max-width: 479px) { .video-wrap .video-play { width: 50px; height: 50px; font-size: 15px; line-height: 50px; } } /*******************************************************/ /****************** ## Gallery Area ******************/ /*******************************************************/ .gallery-item { margin-bottom: 10px; } .gallery-item img { width: 100%; } .destination-map iframe { height: 500px; border-radius: 10px; margin-bottom: -10px; } .gallery-two-item { margin-bottom: 40px; } .gallery-two-item .image { overflow: hidden; position: relative; margin-bottom: 20px; border-radius: 10px; } .gallery-two-item .image:after { position: absolute; left: 0; top: 0; opacity: 0; content: ''; width: 100%; height: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: var(--heading-color); } .gallery-two-item .image img { width: 100%; } .gallery-two-item .image .link { z-index: 2; top: -70px; opacity: 0; color: white; font-size: 22px; position: absolute; left: calc(50% - 32.5px); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); width: 65px; height: 65px; background: var(--secondary-color); line-height: 65px; border-radius: 50%; text-align: center; } @media only screen and (max-width: 767px) { .gallery-two-item .content h5 { font-size: 22px; } } .gallery-two-item:hover .image:after { height: 100%; opacity: 0.5; } .gallery-two-item:hover .image .link { opacity: 1; top: calc(50% - 32.5px); } .gallery-slider-active { margin-left: -5px; margin-right: -5px; } .gallery-slider-active .gallery-three-item { margin-left: 5px; margin-right: 5px; } .gallery-slider-active .slick-dots { margin-top: 45px; } .gallery-three-item { margin-bottom: 10px; } .gallery-three-item .image img { width: 100%; } .gallery-three-item .content { opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; position: absolute; left: 30px; bottom: 60px; background: white; padding: 13px 30px; border-radius: 10px; } @media only screen and (max-width: 991px) { .gallery-three-item .content { left: 10px; } } @media only screen and (max-width: 767px) { .gallery-three-item .content { padding-left: 15px; padding-right: 15px; } } @media only screen and (max-width: 479px) { .gallery-three-item .content .category { font-size: 14px; } } .gallery-three-item .content h5 { margin-bottom: 0; line-height: 1.3; } @media only screen and (max-width: 991px) { .gallery-three-item .content h5 { font-size: 20px; } } @media only screen and (max-width: 479px) { .gallery-three-item .content h5 { font-size: 16px; } } @media only screen and (max-width: 375px) { .gallery-three-item .content h5 { font-size: 14px; } } .gallery-three-item:hover .content { opacity: 1; bottom: 30px; } @media only screen and (max-width: 991px) { .gallery-three-item:hover .content { bottom: 10px; } } /*******************************************************/ /******************** ## 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 { margin-bottom: 2px; } .blog-meta li i { margin-right: 5px; } .blog-meta li img { width: 25px; height: 25px; border-radius: 50%; margin-right: 10px; } .blog-meta li:not(:last-child) { margin-right: 30px; } .blog-item { padding: 30px; margin-bottom: 30px; border-radius: 20px; background: var(--lighter-color); border: 1px solid var(--border-color); } @media only screen and (max-width: 375px) { .blog-item { padding-left: 25px; padding-right: 25px; } } .blog-item .content { padding-bottom: 40px; } @media only screen and (min-width: 1400px) { .blog-item .content { padding-left: 20px; padding-right: 20px; } } .blog-item .content .category { font-weight: 500; padding: 2px 15px; background: white; margin-bottom: 20px; border-radius: 10px; display: inline-block; } .blog-item .content h5 { margin-bottom: 25px; } @media only screen and (max-width: 479px) { .blog-item .content h5 { font-size: 22px; } } @media only screen and (max-width: 375px) { .blog-item .content h5 { font-size: 20px; } } .blog-item .theme-btn { margin-top: 30px; } .blog-item .theme-btn > span:before { color: white; } .blog-item:not(:hover) .theme-btn { background: white; color: var(--heading-color); } .blog-item.style-two { padding: 10px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; border-radius: 10px; } .blog-item.style-two .image img { width: 100%; border-radius: 10px; } .blog-item.style-two .content { padding: 0 40px 25px; } @media only screen and (max-width: 479px) { .blog-item.style-two .content { padding-left: 20px; padding-right: 20px; } } .blog-item.style-two .content .blog-meta { margin-top: -22px; padding: 6px 25px; background: white; position: relative; margin-bottom: 25px; border-radius: 10px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-shadow: 10px 4px 60px rgba(133, 133, 133, 0.25); box-shadow: 10px 4px 60px rgba(133, 133, 133, 0.25); } .blog-item.style-two .content .blog-meta li i { font-size: 0.9em; } .blog-item.style-two .content .blog-meta li:not(:last-child) { margin-right: 15px; } .blog-item.style-two .content h5 { margin-bottom: 20px; } .blog-item.style-two:not(:hover) { background: transparent; } .blog-item.style-three { padding: 10px; } @media only screen and (min-width: 768px) { .blog-item.style-three { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .blog-item.style-three .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; } @media only screen and (min-width: 768px) { .blog-item.style-three .image { max-width: 45%; } } @media only screen and (min-width: 1200px) { .blog-item.style-three .image { margin-right: 6%; } } @media only screen and (max-width: 767px) { .blog-item.style-three .image img { margin-bottom: 10px; } } .blog-item.style-three .content { padding: 20px; } @media only screen and (min-width: 768px) { .blog-item.style-three .content { max-width: 350px; } } @media only screen and (max-width: 375px) { .blog-item.style-three .content { padding-left: 10px; padding-right: 10px; } } .blog-item.style-three .content .category { margin-bottom: 15px; -webkit-box-shadow: 10px 4px 40px rgba(153, 153, 153, 0.25); box-shadow: 10px 4px 40px rgba(153, 153, 153, 0.25); } .blog-item.style-three .content h5 { margin-bottom: 14px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-item.style-three .content h5 { font-size: 22px; } } .blog-item.style-three .content .blog-meta { margin-bottom: 15px; } @media only screen and (min-width: 1200px) { .blog-item.style-three .content .blog-meta { margin-top: 15%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-item.style-three .content .blog-meta li:not(:last-child) { margin-right: 10px; } } .blog-item.style-three .content p { margin-top: auto; } .blog-item.style-three .content .theme-btn { margin-top: 5px; font-size: 14px; padding: 4px 20px; } /* Blog Details */ .blog-details-content h1, .blog-details-content h2, .blog-details-content h3, .blog-details-content h4, .blog-details-content h5 { margin-bottom: 15px; } .blog-details-content .category { color: white; font-weight: 500; padding: 2px 15px; border-radius: 10px; margin-bottom: 30px; display: inline-block; background: var(--secondary-color); } .blog-details-content .blog-meta li { -webkit-box-flex: 1; -ms-flex: 1 auto; flex: 1 auto; padding: 13px; 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; margin: 0 -1px -1px 0; border: 1px solid var(--border-color); } @media only screen and (max-width: 479px) { .blog-details-content .blog-meta li { padding-top: 6px; padding-bottom: 6px; } } .blog-details-content .image img { border-radius: 10px; } .blog-details-content .list-style-two li { font-size: 16px; font-weight: 400; } .blog-details-content .list-style-two li:before { width: 20px; height: 20px; font-size: 10px; line-height: 20px; background: var(--primary-color); } blockquote { position: relative; padding: 40px 60px 25px 130px; background: var(--lighter-color); border-radius: 7px; border: 1px solid var(--border-color); } @media only screen and (max-width: 767px) { blockquote { padding-top: 30px; padding-left: 70px; padding-right: 20px; font-size: 18px; } } @media only screen and (max-width: 375px) { blockquote { padding-right: 10px; padding-left: 50px; font-size: 16px; } } blockquote i { position: absolute; left: 40px; top: 15px; font-size: 70px; color: var(--primary-color); } @media only screen and (max-width: 767px) { blockquote i { top: 8px; left: 15px; font-size: 45px; } } @media only screen and (max-width: 375px) { blockquote i { font-size: 35px; left: 10px; } } blockquote .blockquote-footer { display: block; color: var(--base-color); margin-bottom: 0; margin-top: 15px; font-size: 0.9em; } blockquote .blockquote-footer:before { content: '————'; margin-right: 22px; letter-spacing: -4px; } .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 h6 { font-size: 18px; margin-top: 5px; margin-right: 15px; } .tag-share .item .social-style-one a { width: 35px; height: 35px; font-size: 13px; line-height: 35px; border: 1px solid var(--border-color); } .tag-share .item .social-style-one a:not(:hover) { color: var(--base-color); } .tag-share .item .social-style-one a:hover { border-color: var(--primary-color); } /* 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: 340px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; } .next-prev-blog .item .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 100px; margin-right: 30px; } @media only screen and (max-width: 375px) { .next-prev-blog .item .image { max-width: 80px; margin-right: 20px; } } .next-prev-blog .item h6 { line-height: 1.5; margin-bottom: 5px; } @media only screen and (max-width: 375px) { .next-prev-blog .item h6 { font-size: 17px; } } .next-prev-blog .item .date i { margin-right: 4px; } /* Comments */ .comments { border-radius: 10px; /* border: 1px solid var(--border-color); */ } .comment-body { padding: 50px; } @media only screen and (min-width: 480px) { .comment-body { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media only screen and (max-width: 767px) { .comment-body { padding-left: 25px; padding-right: 25px; } } .comment-body .author-thumb { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 85px; margin-right: 35px; margin-bottom: 20px; } @media only screen and (max-width: 575px) { .comment-body .author-thumb { margin-right: 20px; } } .comment-body .author-thumb img { border-radius: 50%; } .comment-body .content h6 { font-size: 16px; margin-bottom: 0; font-weight: 600; } .comment-body .content .ratting { margin-bottom: 15px; } .comment-body .content .ratting i { font-size: 12px; margin: 0 5px 0 0; } .comment-body .content .time { display: block; font-weight: 500; margin-bottom: 2px; color: var(--heading-color); } .comment-body .content .read-more { text-decoration: none; color: var(--heading-color); } .comment-body .content .read-more i { margin-top: 2px; background: var(--heading-color); } .comment-body .content .read-more:hover i { background: var(--primary-color); } .comment-body:not(:first-child) { border-top: 1px solid var(--border-color); } .comment-body.comment-child { padding-top: 0; border-top: none; padding-left: 90px; } @media only screen and (max-width: 767px) { .comment-body.comment-child { padding-left: 40px; } } .admin-comment { border-radius: 10px; border: 1px solid var(--border-color); } .admin-comment .comment-body { max-width: none; margin-bottom: 0; padding: 35px 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: 130px; } } @media only screen and (min-width: 576px) { .admin-comment .comment-body .author-thumb { margin-bottom: 0; margin-right: 40px; } } .admin-comment .comment-body .content h4 { font-size: 20px; margin-bottom: 12px; } .admin-comment .comment-body .content .author { display: block; margin-bottom: 15px; } .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 { padding: 50px; border-radius: 10px; border: 1px solid var(--border-color); } @media only screen and (max-width: 767px) { .comment-form { padding-left: 35px; padding-right: 35px; } } @media only screen and (max-width: 375px) { .comment-form { padding-left: 25px; padding-right: 25px; } } .comment-form .section-title h2 { margin-bottom: 4px; } .comment-form .form-group { margin-bottom: 20px; } .comment-form .form-group label { font-size: 18px; font-weight: 500; margin-bottom: 10px; color: var(--heading-color); } .comment-form .form-control { background: white; border-radius: 7px; border-color: var(--border-color); } .comment-form .form-control:focus { border-color: var(--heading-color); } .comment-form .radio-filter input { width: 25px; height: 25px; border-width: 2px; } .comment-form .radio-filter input:before { opacity: 1; background: var(--border-color); } .comment-form .radio-filter input:checked:before { background: var(--secondary-color); } .comment-form .radio-filter label { font-size: 16px; margin-bottom: 0; font-weight: 400; } .comment-review-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: -5px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .comment-review-wrap .comment-ratting-item { width: 30%; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 767px) { .comment-review-wrap .comment-ratting-item { width: 45%; } } @media only screen and (max-width: 479px) { .comment-review-wrap .comment-ratting-item { width: 100%; } } .comment-review-wrap .comment-ratting-item .title { font-size: 18px; font-weight: 500; margin-right: 25px; } .comment-review-wrap .comment-ratting-item .ratting i { font-size: 12px; } /*******************************************************/ /******************** ## FAQs Area ********************/ /*******************************************************/ .accordion-item { border-radius: 10px; margin-bottom: 15px; background: var(--lighter-color); border: 1px solid var(--border-color); } .accordion-item:first-of-type { border-top-left-radius: 10px; border-top-right-radius: 10px; } .accordion-item:first-of-type .accordion-button { border-top-left-radius: 10px; border-top-right-radius: 10px; } .accordion-item:last-of-type { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .accordion-item:last-of-type .accordion-button { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .accordion-item:not(:last-child) { margin-bottom: 10px; } .accordion-item:not(:first-of-type) { border-top: 1px solid var(--border-color); } .accordion-item .accordion-button { border: none; font-size: 20px; -webkit-box-shadow: none; box-shadow: none; font-weight: 500; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--heading-color); background: transparent; padding: 12px 10px 10px 30px; } @media only screen and (max-width: 479px) { .accordion-item .accordion-button { font-size: 16px; padding: 8px 10px 8px 20px; } } .accordion-item .accordion-button:after { -webkit-box-flex: 0; -ms-flex: none; flex: none; font-size: 15px; font-weight: 300; margin-top: -2px; content: "\f068"; text-align: center; width: 40px; height: 40px; background: white; line-height: 40px; border-radius: 50%; text-align: center; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); border: 1px solid var(--border-color); font-family: "Font Awesome 5 Pro"; } @media only screen and (max-width: 375px) { .accordion-item .accordion-button:after { width: 30px; height: 30px; font-size: 13px; line-height: 30px; } } .accordion-item .accordion-button.collapsed:after { content: "\f067"; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .accordion-body { padding: 0 30px 8px; } @media only screen and (max-width: 479px) { .accordion-body { font-size: 15px; padding-left: 20px; padding-right: 20px; } } .accordion-body .list-style-two { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .accordion-body .list-style-two li { font-size: 16px; font-weight: 400; margin-right: 70px; } @media only screen and (max-width: 1199px) { .accordion-body .list-style-two li { margin-right: 30px; } } .accordion-body .list-style-two li:before { width: 20px; height: 20px; font-size: 10px; margin-top: 2px; line-height: 20px; background: var(--primary-color); } .accordion-two { position: relative; padding-left: 50px; } .accordion-two:before { content: ''; position: absolute; left: 15px; top: 30px; background: var(--border-color); width: 1px; height: calc(100% - 50px); } .accordion-two .accordion-item { border: none; border-radius: 0; position: relative; margin-bottom: 35px; background: transparent; } .accordion-two .accordion-item:before { color: white; font-size: 14px; content: "\f00c"; position: absolute; left: -50px; top: 5px; width: 30px; height: 30px; background: var(--primary-color); line-height: 30px; border-radius: 50%; text-align: center; font-family: "Font Awesome 5 Pro"; } .accordion-two .accordion-item .accordion-button { padding: 0 0 15px; background: transparent; border-bottom: 1px solid var(--border-color); } .accordion-two .accordion-item .accordion-button:after { width: auto; height: auto; border: none; font-size: 20px; font-weight: 400; content: "\f35a"; background: transparent; color: var(--secondary-color); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .accordion-two .accordion-item .accordion-button.collapsed:after { content: "\f35a"; color: var(--heading-color); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .accordion-two .accordion-item .accordion-body { padding: 20px 0 0; } .accordion-two .accordion-item .accordion-body p:last-child { margin-bottom: 0; } /*******************************************************/ /******************** ## 404 Error ********************/ /*******************************************************/ @media only screen and (min-width: 1200px) { .error-content h1 { font-size: 100px; } } @media only screen and (max-width: 575px) { .error-content h1 { font-size: 70px; } } @media only screen and (max-width: 375px) { .error-content h1 { font-size: 55px; } } .error-content .newsletter-form { padding: 5px; background: var(--lighter-color); border: 1px solid var(--border-color); } .error-content .newsletter-form input { background: transparent; } .error-content .keywords { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; } .error-content .keywords a { padding: 3px 20px; margin-right: 10px; margin-bottom: 10px; border-radius: 20px; border: 1px solid var(--border-color); } .error-content .keywords a:hover { color: var(--heading-color); border-color: var(--heading-color); } /*******************************************************/ /******************* ## Pricing Area *******************/ /*******************************************************/ .pricing-plan-item { position: relative; margin-bottom: 30px; border-radius: 10px; padding: 30px 10px 40px; background: var(--lighter-color); border: 1px solid var(--border-color); } .pricing-plan-item .images { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 30px; margin-right: -5px; margin-bottom: 30px; } .pricing-plan-item .images img { margin-right: 5px; border-radius: 7px; } .pricing-plan-item .images img.one { width: calc(25% - 5px); } .pricing-plan-item .images img.two { width: calc(50% - 5px); } .pricing-plan-item .images img.three { width: calc(75% - 5px); } .pricing-plan-item .content { padding-left: 40px; padding-right: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .pricing-plan-item .content { padding-left: 25px; padding-right: 25px; } } @media only screen and (max-width: 479px) { .pricing-plan-item .content { padding-left: 20px; padding-right: 20px; } } .pricing-plan-item .content .price { display: block; margin-bottom: 5px; } .pricing-plan-item .content h6 { margin-bottom: 24px; } @media only screen and (min-width: 480px) { .pricing-plan-item .content h6 { font-size: 22px; } } @media only screen and (max-width: 375px) { .pricing-plan-item .content h6 { font-size: 18px; } } .pricing-plan-item .content .theme-btn.style-three { margin-top: 15px; width: 100%; } .pricing-plan-item .badge { position: absolute; right: 10px; top: 10px; font-size: 14px; font-weight: 400; padding: 7px 10px; border-radius: 7px; text-transform: uppercase; background: var(--primary-color); } .pricing-plan-item.bgc-black { border-color: var(--heading-color); background-color: var(--heading-color); } .pricing-plan-item.bgc-black .list-style-four li:before { color: var(--secondary-color); } .pricing-plan-item.bgc-black .theme-btn.style-three { color: white; background: var(--primary-color); border-color: var(--primary-color); } .pricing-plan-item.text-white .price span { color: white; } /*******************************************************/ /****************** ## Skillbar Area *******************/ /*******************************************************/ .skillbar { height: 15px; margin-top: 70p; position: relative; border-radius: 7.5px; border: 1px solid var(--base-color); } .skillbar .skillbar-title, .skillbar .skill-bar-percent { top: -40px; color: white; font-size: 18px; font-weight: 500; position: absolute; color: var(--heading-color); } .skillbar .skillbar-title { z-index: 2; } .skillbar .skill-bar-percent { right: 0; } .skillbar .skillbar-bar { width: 0; margin: 4px; height: 5px; position: relative; border-radius: 2.5px; background-image: none; overflow: inherit !important; background-color: var(--secondary-color); } /*******************************************************/ /***************** ## Activity Area *****************/ /*******************************************************/ .popular-activity-area { border: 1px solid var(--border-color); } .activity-item { padding: 20px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; background: white; margin-bottom: 30px; border-radius: 10px; border: 1px solid var(--border-color); 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: 375px) { .activity-item { padding-left: 15px; padding-right: 15px; } } .activity-item .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-right: 25px; } @media only screen and (max-width: 1399px) { .activity-item .image { margin-right: 15px; } } .activity-item .image img { border-radius: 50%; } @media only screen and (max-width: 1399px) { .activity-item .image img { width: 65px; height: 65px; } } .activity-item .content { margin-right: 10px; } .activity-item .content h5 { line-height: 1.2; margin-bottom: 5px; } @media only screen and (max-width: 1399px) { .activity-item .content h5 { font-size: 20px; } } .activity-item .right-btn { margin-left: auto; } .activity-item .right-btn .more { color: white; font-size: 14px; display: inline-block; width: 30px; height: 30px; background: var(--secondary-color); line-height: 30px; border-radius: 50%; text-align: center; } .activity-item:hover { border-color: var(--secondary-color); -webkit-box-shadow: 10px 4px 60px rgba(247, 146, 30, 0.3); box-shadow: 10px 4px 60px rgba(247, 146, 30, 0.3); } /* Tour Activity */ .tour-activities { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; } .tour-activity-item { display: -webkit-box; display: -ms-flexbox; display: flex; background: white; padding: 15px 25px; border-radius: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 15px 15px 0; border: 1px solid var(--border-color); -webkit-box-shadow: 10px 4px 60px rgba(197, 197, 197, 0.25); box-shadow: 10px 4px 60px rgba(197, 197, 197, 0.25); } @media only screen and (max-width: 767px) { .tour-activity-item { padding: 8px 15px; margin: 0 5px 5px 0; } } @media only screen and (max-width: 375px) { .tour-activity-item { padding: 5px 12px; } } .tour-activity-item i { font-size: 40px; margin-right: 15px; color: var(--primary-color); } @media only screen and (max-width: 1199px) { .tour-activity-item i { font-size: 25px; margin-right: 10px; } } @media only screen and (max-width: 479px) { .tour-activity-item i { font-size: 18px; } } .tour-activity-item b { font-size: 22px; font-weight: 500; color: var(--heading-color); } @media only screen and (max-width: 991px) { .tour-activity-item b { font-size: 18px; } } @media only screen and (max-width: 479px) { .tour-activity-item b { font-size: 16px; } } /*******************************************************/ /***************** ## Sidebar Widgets *****************/ /*******************************************************/ .widget:not(:last-child) { margin-bottom: 45px; } .widget-title { margin-bottom: 14px; } .widget-search form { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 15px 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--lighter-color); } .widget-search form input { padding: 0; border: none; background: transparent; } .widget-search form button { -webkit-box-flex: 0; -ms-flex: none; flex: none; background: transparent; } .widget-gallery .gallery { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; margin-bottom: -10px; } .widget-gallery .gallery a { margin-right: 10px; margin-bottom: 10px; max-width: calc(33.333% - 10px); } .widget-gallery .gallery a img { border-radius: 7px; } .widget-cta { z-index: 1; border: none; overflow: hidden; position: relative; padding: 0 !important; background: var(--heading-color); } .widget-cta .content { padding: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .widget-cta .content { padding-left: 25px; padding-right: 25px; } } @media only screen and (max-width: 375px) { .widget-cta .content { padding-left: 25px; padding-right: 25px; } } .widget-cta .content .h6 { display: block; font-weight: 300; margin-bottom: 5px; } .widget-cta .content h3 { margin-bottom: 20px; } @media only screen and (max-width: 375px) { .widget-cta .content h3 { font-size: 28px; } } .widget-cta .content .theme-btn.style-two { padding: 5px 20px; font-size: 14px; } .widget-cta .image img { width: 100%; } .widget-cta .cta-shape { z-index: -1; position: absolute; right: 20px; top: 0; max-width: 44%; } .price-filter-wrap { margin-top: 25px; } .price-filter-wrap .price { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--heading-color); } .price-filter-wrap .price span { margin-right: 5px; } .price-filter-wrap .price input { padding: 0; border: none; font-size: 16px; font-weight: 500; background: transparent; } .ui-widget.ui-widget-content { height: 5px; border: none; cursor: pointer; background: rgba(var(--primary-rgb), 0.2); } .ui-widget-header { background: var(--primary-color); } .ui-slider .ui-slider-handle { width: 12px; height: 12px; top: -4px; border: none; cursor: e-resize; border-radius: 50%; background: var(--primary-color); } .widget-news li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .widget-news li:not(:last-child) { margin-bottom: 30px; } .widget-news li .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 100px; margin-right: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .widget-news li .image { max-width: 80px; margin-right: 15px; } } @media only screen and (max-width: 375px) { .widget-news li .image { max-width: 75px; margin-right: 12px; } } .widget-news li .image img { border-radius: 7px; } .widget-news li .content h6 { margin-bottom: 5px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .widget-news li .content h6 { font-size: 15px; } } @media only screen and (min-width: 1200px) and (max-width: 1299px) { .widget-news li .content h6 { font-size: 17px; } } @media only screen and (max-width: 479px) { .widget-news li .content h6 { font-size: 16px; } } @media only screen and (max-width: 375px) { .widget-news li .content h6 { font-size: 15px; } } @media only screen and (max-width: 375px) { .widget-news li .content .date { font-size: 14px; } } .widget-news li .content .date i { margin-right: 5px; } .tag-coulds { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; margin-bottom: -10px; } .tag-coulds a { padding: 3px 15px; font-size: 16px; font-weight: 500; margin: 0 10px 10px 0; border-radius: 7px; border: 1px solid var(--border-color); } .tag-coulds a:hover { color: white; background: var(--secondary-color); border-color: var(--secondary-color); } .widget-booking form .date { 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; } .widget-booking form .date b { line-height: 1.3; } .widget-booking form .date input { max-width: 190px; padding: 5px 15px; border: 1px solid var(--border-color); } .widget-booking form .time { 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; } .widget-booking form .time .radio-filter { width: 55%; 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; } .widget-booking form .time .radio-filter li { margin-bottom: 0; } .widget-booking form .tickets li { 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; } .widget-booking form .tickets li .nice-select { width: auto; border: none; padding: 0 18px 0 0; background: transparent; } .widget-booking form .tickets li .nice-select:after { width: 9px; height: 9px; right: 2px; margin-top: -6px; } .widget-booking form h6 { 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; } .widget-booking form h6 span { font-size: 1.2em; } /* Blog Sidebar */ .blog-sidebar .widget { padding: 40px 30px; border-radius: 10px; border: 1px solid var(--border-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-sidebar .widget { padding-left: 20px; padding-right: 20px; } } @media only screen and (max-width: 375px) { .blog-sidebar .widget { padding-left: 20px; padding-right: 20px; } } .blog-sidebar .widget:not(:last-child) { margin-bottom: 30px; } .blog-sidebar .widget .widget-title { margin-top: -8px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color); } .blog-sidebar .widget .list-style-one li:last-child, .blog-sidebar .widget .list-style-three li:last-child { margin-bottom: 0; } .blog-sidebar .widget-search { padding: 0; } /* Tour Sidebar */ .tour-sidebar .widget:not(.widget-cta) { background: var(--lighter-color); } @media only screen and (min-width: 1200px) { .tour-sidebar .widget:not(.widget-cta) { padding-left: 40px; padding-right: 40px; } } .tour-sidebar .widget-cta .content .h6 { font-size: 14px; } .tour-sidebar .widget-cta .content h3 { font-size: 22px; } .tour-sidebar .widget-cta .cta-shape { right: 0; } /* Shop Sidebar */ .radio-filter li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .radio-filter li:not(:last-child) { margin-bottom: 10px; } .radio-filter li input { width: 15px; height: 15px; -webkit-box-flex: 0; -ms-flex: none; flex: none; padding: 0; margin-top: 0; margin-right: 7px; border-radius: 50%; position: relative; background: transparent; border: 2px solid var(--border-color); } .radio-filter li input:before { content: ''; width: 5px; height: 5px; opacity: 0; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; border-radius: 50%; background: var(--secondary-color); } .radio-filter li input:checked { background: transparent; border-color: var(--secondary-color); } .radio-filter li input:checked:before { opacity: 1; } .radio-filter li input:focus { -webkit-box-shadow: none; box-shadow: none; } .radio-filter li label { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .radio-filter li label .ratting i { font-size: 12px; line-height: 1.8; } .radio-filter li label .ratting i.white { color: #AAAAAA; } .widget-tour .tour-grid.style-three { border: none; border-radius: 0; margin-bottom: 0; background: transparent; } .widget-tour .tour-grid.style-three:not(:last-child) { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); } .widget-tour .tour-grid.style-three .image { width: 100%; margin: 0 0 12px; } .widget-tour .tour-grid.style-three .content { padding: 0; } .widget-tour .tour-grid.style-three .content .destination-header { font-size: 14px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .widget-tour .tour-grid.style-three .content .destination-header .location { margin-right: 0; } .widget-tour .tour-grid.style-three .content .destination-header .ratting { padding: 0; } .widget-tour .tour-grid.style-three .content h6 { font-size: 16px; font-weight: 500; margin-bottom: 0; color: var(--heading-color); } .shop-sidebar { padding: 30px; border-radius: 10px; border: 1px solid var(--border-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .shop-sidebar { padding-left: 15px; padding-right: 15px; } } .shop-sidebar .widget:not(:last-child) { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--border-color); } .shop-sidebar .widget .widget-title { margin-bottom: 15px; } .shop-sidebar + .widget-cta { border-radius: 7px; } .shop-sidebar + .widget-cta .content .h6 { font-size: 14px; } .shop-sidebar + .widget-cta .content h3 { font-size: 22px; } .shop-sidebar + .widget-cta .cta-shape { right: 0; top: 22%; max-width: 35%; } /*******************************************************/ /******************* ## Main Footer *******************/ /*******************************************************/ .main-footer { color: #B6CABC; } .main-footer a { color: #B6CABC; } .main-footer a:hover { color: white; text-decoration: underline; } .footer-widget { margin-bottom: 50px; } .footer-title { margin-bottom: 24px; } .footer-title h5 { color: white; font-size: 22px; text-transform: capitalize; } .footer-contact .list-style-one li { margin-bottom: 0; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } .footer-contact .list-style-one li i { font-size: 16px; margin-top: 7px; } .footer-contact .list-style-one li:not(:last-child) { margin-bottom: 15px; } .footer-map iframe { height: 125px; border-radius: 6px; } .footer-top { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } @media only screen and (min-width: 992px) { .footer-top:before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.1); } } .footer-top .section-title h2 { color: white; } .newsletter-form { padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; background: #fff; position: relative; border-radius: 35px; } .newsletter-form input { border: 0; padding: 11px 5px 11px 30px; } @media only screen and (max-width: 375px) { .newsletter-form input { padding-left: 22px; } } .newsletter-form .theme-btn { -webkit-box-flex: 0; -ms-flex: none; flex: none; } @media only screen and (max-width: 479px) { .newsletter-form .theme-btn i { display: none; } } /* Widget Area */ @media only screen and (min-width: 1200px) { .widget-area .col-md-6 { width: 20%; } } /* Footer Two */ @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer-two .widget-area .col-md-6 { width: 40%; } } /* Footer Bottom */ .footer-bottom { position: relative; background: #222924; } .footer-bottom .copyright-text a { color: var(--secondary-color); } .footer-bottom .scroll-top { top: -30px; position: absolute; left: calc(50% - 28px); } .footer-bottom-nav { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -13px; margin-right: -13px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer-bottom-nav li { margin: 0 13px 5px; }