@charset "UTF-8"; /*---------------------------------------------------------------------- Template Name: WellFood - Resturent HTML Template Template URI: https://webtend.net/demo/html/limestone/ Author: WebTend Author URI: https://webtend.net/ Version: 1.0 Note: This is Main Style CSS File. */ /*---------------------------------------------------------------------- CSS INDEX ---------------------- ## Default Style ## Common Classes ## Repeat Style ## Padding Margin ## Custom Animation ## Header style ## Hero Area ## Offer Area ## Banner Area ## About Area ## Counter Area ## Category Area ## Popular Food ## Call To Action ## Products Area ## Features Area ## Client Area ## Headline Text ## Gallery Area ## Services Area ## Testimonials ## Booking Table ## Cart Checkout ## Contact Forms ## Videos Area ## Blog Area ## FAQs Area ## Chefs Area ## Awards Area ## History Area ## Instagram 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: 30px; font-size: 16px; font-family: var(--base-font); --base-font: "Roboto", sans-serif; --heading-font: "Bebas Neue", sans-serif; --primary-color: #ffb936; --secondary-color: #ffb936; --heading-color: #0e1317; --base-color: #696969; --lighter-color: #f4f1ea; --border-color: rgba(23, 26, 33, 0.1); --primary-rgb: 236, 61, 8; } a { color: var(--base-color); cursor: pointer; outline: none; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; text-decoration: none; } a:hover, a:focus, a:visited { text-decoration: none; outline: none; } a:hover { color: var(--heading-color); } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--heading-color); } .text-white h1, .text-white h1 a, .text-white h2, .text-white h2 a, .text-white h3, .text-white h3 a, .text-white h4, .text-white h4 a, .text-white h5, .text-white h5 a, .text-white h6, .text-white h6 a, .text-white .h1, .text-white .h1 a, .text-white .h2, .text-white .h2 a, .text-white .h3, .text-white .h3 a, .text-white .h4, .text-white .h4 a, .text-white .h5, .text-white .h5 a, .text-white .h6, .text-white .h6 a { color: white; } ul, li { list-style: none; padding: 0; margin: 0; } img { max-width: 100%; display: inline-block; } mark { color: var(--primary-color); background: transparent; text-decoration: underline; } header:after, section:after, footer:after { display: block; clear: both; content: ""; } /*======= Input Styles =======*/ input, select, textarea, .nice-select, .form-control { width: 100%; height: auto; font-weight: 400; border-radius: 0; font-size: 16px; padding: 17px 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: 1290px; padding-left: 15px; padding-right: 15px; } .container.container-1520 { max-width: 1550px; } .container.container-1200 { max-width: 1230px; } .container.container-1290 { max-width: 1320px; } .container.container-1050 { max-width: 1080px; } } @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%; } } @media only screen and (min-width: 1400px) { .gap-10 { --bs-gutter-x: 10px; } } @media only screen and (min-width: 1400px) { .gap-20 { --bs-gutter-x: 20px; } } @media only screen and (min-width: 1400px) { .gap-30 { --bs-gutter-x: 30px; } } @media only screen and (min-width: 1400px) { .gap-40 { --bs-gutter-x: 40px; } } @media only screen and (min-width: 1400px) { .gap-50 { --bs-gutter-x: 50px; } } @media only screen and (min-width: 1400px) { .gap-60 { --bs-gutter-x: 60px; } } @media only screen and (min-width: 1400px) { .gap-70 { --bs-gutter-x: 70px; } } @media only screen and (min-width: 1400px) { .gap-80 { --bs-gutter-x: 80px; } } @media only screen and (min-width: 1400px) { .gap-90 { --bs-gutter-x: 90px; } } @media only screen and (min-width: 1400px) { .gap-100 { --bs-gutter-x: 100px; } } @media only screen and (min-width: 1400px) { .gap-110 { --bs-gutter-x: 110px; } } @media only screen and (min-width: 1400px) { .gap-120 { --bs-gutter-x: 120px; } } @media only screen and (min-width: 1400px) { .gap-130 { --bs-gutter-x: 130px; } } @media only screen and (min-width: 1400px) { .gap-140 { --bs-gutter-x: 140px; } } @media only screen and (min-width: 1400px) { .gap-150 { --bs-gutter-x: 150px; } } @media only screen and (min-width: 1200px) { .row-cols-xl-7>* { width: 14.2857%; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } } /** Section Title style **/ .section-title { margin-top: -8px; position: relative; } .section-title .sub-title { font-size: 20px; display: inline-block; color: var(--primary-color); text-transform: uppercase; font-family: var(--heading-font); } .section-title h2 { text-transform: capitalize; } @media only screen and (max-width: 991px) { .section-title h2 { font-size: 45px; } } @media only screen and (max-width: 767px) { .section-title h2 { font-size: 40px; } } @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; } } /** Button style **/ .theme-btn, a.theme-btn { color: white; cursor: pointer; font-size: 18px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; text-align: center; padding: 11px 36px; -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; font-family: var(--heading-font); text-transform: uppercase; background: var(--primary-color); } .theme-btn i, a.theme-btn i { font-size: 14px; margin-left: 7px; margin-top: -2px; } .theme-btn:hover, a.theme-btn:hover { color: var(--heading-color); background: var(--secondary-color); } @media only screen and (max-width: 575px) { .theme-btn, a.theme-btn { padding: 10px 25px; } } .theme-btn.style-two, a.theme-btn.style-two { color: var(--heading-color); background: var(--secondary-color); } .theme-btn.style-two:hover, a.theme-btn.style-two:hover { color: white; background: var(--primary-color); } .theme-btn.style-three, a.theme-btn.style-three { color: white; border: 1px solid; background: transparent; } .theme-btn.style-three:hover, a.theme-btn.style-three: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; color: var(--primary-color); font-family: var(--heading-font); text-transform: capitalize; text-decoration: underline; } .read-more i { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-top: -3px; margin-left: 8px; font-size: 0.8em; } .read-more:hover { color: var(--primary-color); } /* More Btn */ .more-btn { width: 50px; height: 50px; color: white; line-height: 50px; text-align: center; display: inline-block; background: var(--primary-color); } .more-btn:hover { color: white; } /* List style One */ .list-style-one li { display: -webkit-box; display: -ms-flexbox; display: flex; } .list-style-one li:not(:last-child) { margin-bottom: 6px; } .list-style-one li:before { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 16px; height: 16px; color: white; font-size: 8px; margin-top: 6px; content: "\f00c"; line-height: 16px; text-align: center; margin-right: 12px; border-radius: 50%; background: 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 { margin-left: 5px; margin-right: 5px; color: var(--base-color); border: 1px solid rgba(255, 255, 255, 0.1); width: 45px; height: 45px; background: transparent; line-height: 45px; border-radius: 50%; text-align: center; } .social-style-one a:hover { color: white; background: var(--primary-color); border-color: var(--primary-color); } /** Social Link Three **/ .social-style-three { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -7.5px; margin-right: -7.5px; } .social-style-three a { margin-left: 7.5px; margin-right: 7.5px; } .social-style-three a:hover { color: var(--primary-color); } /** Social Link Four **/ .social-style-four { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: -35px; margin-right: -35px; } .social-style-four a { margin-left: 35px; margin-right: 35px; } .social-style-four a i { margin-right: 10px; color: var(--primary-color); } /* Tab Style One */ .tab-style-one { border-bottom: 1px solid var(--border-color); } .tab-style-one 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; } } /** Food Menu Tab **/ .food-menu-tab { margin-left: -15px; margin-right: -15px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (max-width: 767px) { .food-menu-tab { margin-left: -7.5px; margin-right: -7.5px; } } .food-menu-tab li { margin: 0 15px 30px; } @media only screen and (max-width: 767px) { .food-menu-tab li { margin: 0 7.5px 15px; } } .food-menu-tab .nav-link { 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; padding: 8px 20px; background: transparent; border: 1px solid var(--border-color); } @media only screen and (max-width: 991px) { .food-menu-tab .nav-link { padding: 17px 20px 13px; } } @media only screen and (max-width: 767px) { .food-menu-tab .nav-link { padding-left: 15px; padding-right: 15px; } } @media only screen and (max-width: 575px) { .food-menu-tab .nav-link { padding-top: 12px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; } } .food-menu-tab .nav-link i { line-height: 1; font-size: 45px; color: var(--primary-color); } @media only screen and (max-width: 991px) { .food-menu-tab .nav-link i { font-size: 30px; } } @media only screen and (max-width: 575px) { .food-menu-tab .nav-link i { display: none; } } .food-menu-tab .nav-link span { font-size: 16px; margin-top: 10px; } @media only screen and (max-width: 991px) { .food-menu-tab .nav-link span { font-size: 15px; } } @media only screen and (max-width: 575px) { .food-menu-tab .nav-link span { margin-top: 0; font-size: 15px; } } .food-menu-tab .nav-link.active { border-color: var(--primary-color); } /*** 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; text-align: center; } @media only screen and (min-width: 576px) { .pagination li { font-size: 24px; } } .pagination li a, .pagination li .page-link { padding: 0; width: 60px; height: 60px; -webkit-box-shadow: none; box-shadow: none; line-height: 58px; color: var(--base-color); border: 1px solid var(--border-color); } @media only screen and (max-width: 575px) { .pagination li a, .pagination li .page-link { width: 45px; height: 45px; line-height: 43px; } } .pagination li.disabled .page-link, .pagination li:last-child .page-link { color: white; border-radius: 0; background: var(--heading-color); border-color: var(--heading-color); } .pagination li.active .page-link, .pagination li:hover:not(.disabled) .page-link { color: white; background: var(--primary-color); border-color: var(--primary-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 { position: absolute; top: 40%; right: 100%; transform: translateY(-50%); font-size: 20px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; padding-top: 2px; width: 40px; height: 40px; background: black; line-height: 40px; border-radius: 50%; text-align: center; color: #ffff; -webkit-box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.15); z-index: 10; cursor: pointer; } @media (max-width: 1024px) { .slick-arrow { right: 98%; } } @media (max-width: 992px) { .slick-arrow { right: 97%; } } @media (max-width: 500px) { .slick-arrow { right: 92%; } } @media (max-width: 992px) { .slick-prev { left: -1% !important; } } .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 { cursor: pointer; width: 10px; height: 10px; margin: 0 7px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; border-radius: 5px; background: var(--primary-color); } .slick-dots li button { opacity: 0; } .slick-dots li.slick-active { width: 30px; } /*** Scroll Top style ***/ .scroll-top { width: 80px; height: 80px; z-index: 99; color: white; font-size: 24px; cursor: pointer; text-align: center; line-height: 80px; border-radius: 50%; background-color: transparent; background-image: url(../images/shapes/8.webp); background-repeat: no-repeat; background-size: cover; -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; } @media only screen and (max-width: 991px) { .scroll-top { width: 60px; height: 60px; line-height: 60px; } } @media(max-width:768px) { .slick-dots li { width: 5px; height: 5px; margin: 0 4px; } .slick-dots li.slick-active { width: 10px; } } /* Text White */ .text-white *, .text-white a, .text-white .read-more, .text-white .counter-text-wrap .count-text { color: white; } .text-white .sub-title { color: var(--secondary-color); } /* Wave Shapes */ .wave-shapes { position: absolute; z-index: -1; top: 0; left: -100px; width: calc(100% + 100px); height: 100%; } .wave-shapes .shape { position: absolute; bottom: 0; left: 0; width: 100%; -webkit-animation: leftRightOne 6s infinite; animation: leftRightOne 6s infinite; } .wave-shapes .shape.two { -webkit-animation-delay: 3s; animation-delay: 3s; } /*Project Filter*/ .filter-btns-one { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -5px; margin-right: -5px; } .filter-btns-one li { cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; font-weight: 500; padding: 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.75; background-color: var(--heading-color); } .overlay:before { mix-blend-mode: multiply; } /* Backgruond Size */ .bgs-cover { background-size: cover; background-position: center; } .bgp-top { background-repeat: no-repeat; background-position: top center; } /* Color + Background */ .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); } .bgc-dark-green { background-color: #1e3233; } /* 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, .food-menu-tab .nav-link span, h1, .h1, h2, .h2, .count-text, h3, .h3, .offer-card-item .badge, .offer-image .offer-badge span, .about-image-part .quality-food .text, .cta-content .cta-badge span, blockquote, h4, .h4, .tab-style-one li a, h5, .h5, .food-item .content .price span, .food-menu-item .content .price, .testimonial-item .text, h6, .h6, .offer-card-item .available-item, .about-image-part .food-review .text, .product-item .image .pizza-badge, .product-item-two .image .pizza-badge, .hero-three-image .offer-badge, .offer-card-item .title, .history-progress .counting { font-weight: 400; line-height: 1.2; color: var(--heading-color); font-family: var(--heading-font); } h1, .h1 { font-size: 110px; } h2, .h2, .count-text { font-size: 55px; } h3, .h3, .offer-card-item .badge, .offer-image .offer-badge span, .about-image-part .quality-food .text, .cta-content .cta-badge span, blockquote { font-size: 30px; } h4, .h4, .tab-style-one li a { font-size: 27px; } h5, .h5, .food-item .content .price span, .food-menu-item .content .price, .testimonial-item .text { line-height: 1.66; font-size: 24px; } h6, .h6, .offer-card-item .available-item, .about-image-part .food-review .text, .product-item .image .pizza-badge, .product-item-two .image .pizza-badge { 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 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; } } .new-class{ font-size: 16px; } .main-header .logo { z-index: 9; padding: 2px 0; position: relative; } .main-header.menu-absolute .header-upper { position: absolute; } .main-header.fixed-header .header-upper { top: 0; left: 0; position: fixed; background: white; -webkit-animation: sticky 1s; animation: sticky 1s; -webkit-box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1); box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1); } @media only screen and (min-width: 992px) { .main-header.fixed-header .main-menu .navbar-collapse>ul>li { padding-top: 25px; padding-bottom: 25px; } } @media only screen and (max-width: 991px) { .nav-outer { width: 100%; } } /** Header Main Menu **/ @media only screen and (max-width: 991px) { .main-menu { width: 100%; } } .main-menu .mobile-logo { margin-right: auto; } @media only screen and (max-width: 575px) { .main-menu .mobile-logo { max-width: 150px; } } @media only screen and (max-width: 991px) { .main-menu .collapse { overflow: auto; } } .main-menu .navbar-collapse { padding: 0px; } .main-menu .navbar-collapse>ul { display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse>ul { display: block; padding: 25px 0; background: #f9f9f9; -webkit-box-shadow: inset 0px 0px 30px 0px rgba(87, 95, 245, 0.1); box-shadow: inset 0px 0px 30px 0px rgba(87, 95, 245, 0.1); } .main-menu .navbar-collapse>ul>li:last-child { border-bottom: 1px solid var(--border-color); } } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse { left: 0; width: 100%; position: absolute; max-height: calc(100vh - 80px); } } .main-menu .navbar-collapse li { padding: 35px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 1399px) { .main-menu .navbar-collapse li { padding-left: 10px; padding-right: 10px; } } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li { display: block; padding: 0 15px; border-top: 1px solid var(--border-color); } } .main-menu .navbar-collapse li.dropdown .dropdown-btn { cursor: pointer; margin-left: 5px; margin-bottom: -3px; color: var(--heading-color); } @media only screen and (max-width: 991px) { .main-menu .navbar-collapse li.dropdown .dropdown-btn { position: absolute; right: 10px; top: 0; width: 50px; height: 43px; border-left: 1px solid var(--border-color); text-align: center; line-height: 43px; } } .main-menu .navbar-collapse li a { display: block; opacity: 1; 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: flex-start; } } .main-menu .navbar-header .navbar-toggle { float: right; padding: 4px 0; cursor: pointer; background: transparent; } .main-menu .navbar-header .navbar-toggle .icon-bar { background: var(--base-color); height: 2px; width: 30px; display: block; margin: 7px 0; } .header-number { font-size: 18px; margin-left: auto; font-family: var(--heading-font); } @media only screen and (max-width: 991px) { .header-number { display: none; } } .header-number i { margin-right: 10px; color: var(--secondary-color); } /* 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: 35px; } @media only screen and (max-width: 1199px) { .menu-btns .theme-btn { display: none; } } .menu-btns .theme-btn.style-three:hover { border-color: white; } /* Header Search */ .nav-search { position: relative; margin-left: 40px; } @media only screen and (max-width: 1299px) { .nav-search { margin-left: 25px; } } @media only screen and (max-width: 479px) { .nav-search { margin-left: 15px; margin-right: 15px; } } .nav-search>button { background: transparent; } .nav-search form { position: absolute; width: 320px; top: 100%; right: 0; z-index: 777; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; -webkit-animation: fadeIn 0.5s; animation: fadeIn 0.5s; -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); } @media only screen and (max-width: 479px) { .nav-search form { width: 300px; } } @media only screen and (max-width: 375px) { .nav-search form { width: 250px; } } .nav-search form.hide { display: none; } .nav-search form input { border: none; padding: 15px 5px 15px 25px; } .nav-search form button { background: transparent; padding: 15px 20px 15px 0; } /* White Menu */ .main-header.white-menu .top-left { font-weight: 400; padding-top: 12px; padding-bottom: 12px; color: rgba(255, 255, 255, 0.65); } .main-header.white-menu .top-left:before { display: none; } .main-header.white-menu .top-right ul { z-index: 1; position: relative; padding-top: 16px; padding-bottom: 16px; } @media only screen and (min-width: 992px) { .main-header.white-menu .top-right ul { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } } .main-header.white-menu .top-right ul li>i { color: white; } .main-header.white-menu .top-right ul:before { content: ""; z-index: -1; height: 100%; width: 100vw; position: absolute; left: -80px; top: 0; background: var(--heading-color); } @media only screen and (max-width: 991px) { .main-header.white-menu .top-right ul:before { left: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); } } @media only screen and (min-width: 992px) { .main-header.white-menu .navbar-collapse>ul>li>a, .main-header.white-menu .navbar-collapse>ul>li>.dropdown-btn { color: white; } } .main-header.white-menu .main-menu .navbar-header .navbar-toggle .icon-bar { background: white; } .main-header.white-menu .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 { --c: conic-gradient(from -90deg, white 90deg, #0000 0); } .main-header.white-menu.fixed-header .header-upper { background: #222222; } /* Menu Sidebar */ .menu-sidebar { display: -webkit-box; display: -ms-flexbox; display: flex; } .menu-sidebar>button { cursor: pointer; width: 25px; aspect-ratio: 1; --c: conic-gradient(from -90deg, #000000 90deg, #0000 0); background: var(--c), var(--c); background-size: 40% 40%; } .menu-sidebar>button:hover { -webkit-animation: toggler 1s infinite alternate; animation: toggler 1s infinite alternate; } /** hidden-sidebar * */ .hidden-bar { position: fixed; right: -350px; top: 0px; opacity: 0; width: 350px; height: 100%; z-index: 99999; overflow-y: auto; visibility: hidden; background-color: #222222; border-left: 1px solid #231b26; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } @media only screen and (max-width: 375px) { .hidden-bar { width: 300px; } } .hidden-bar .social-style-one a { width: 40px; height: 40px; line-height: 40px; } .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-area { z-index: 1; position: relative; } .hero-area::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.8; background-color: #030303; } .hero-content { max-width: 590px; } .hero-content .sub-title { font-size: 24px; color: var(--secondary-color); display: block; margin-bottom: 22px; } @media only screen and (max-width: 479px) { .hero-content .sub-title { font-size: 20px; } } .hero-content .sub-title i { color: var(--secondary-color); margin-right: 5px; } .hero-content h1 { margin-bottom: 20px; } @media only screen and (max-width: 1299px) { .hero-content h1 { font-size: 95px; } } @media only screen and (max-width: 1199px) { .hero-content h1 { font-size: 80px; } } @media only screen and (max-width: 767px) { .hero-content h1 { font-size: 70px; } } @media only screen and (max-width: 479px) { .hero-content h1 { font-size: 60px; } } @media only screen and (max-width: 375px) { .hero-content h1 { font-size: 50px; } } .hero-content p { margin-bottom: 40px; } @media only screen and (min-width: 376px) { .hero-content p { font-size: 18px; } } .hero-content.style-two { max-width: none; } .hero-content.style-two h2 { margin-bottom: 20%; } @media only screen and (min-width: 1400px) { .hero-content.style-two h2 { font-size: 85px; } } @media only screen and (max-width: 1599px) { .hero-content.style-two h2 { margin-bottom: 30px; } } @media only screen and (max-width: 575px) { .hero-content.style-two h2 { font-size: 45px; } } @media only screen and (max-width: 375px) { .hero-content.style-two h2 { font-size: 38px; } } .hero-images { position: relative; } @media only screen and (min-width: 1600px) { .hero-images { text-align: right; margin-right: -18%; } } .hero-images .price { max-width: 31%; position: absolute; right: -14%; bottom: 35%; } @media only screen and (max-width: 1399px) { .hero-images .price { right: -5%; } } .hero-shapes .shape { position: absolute; max-width: 7%; z-index: -1; } .hero-shapes .shape.one { left: 50%; top: 0; } .hero-shapes .shape.two { left: 4%; top: 18%; } .hero-shapes .shape.three { right: 5%; top: 19%; } .hero-shapes .shape.four { left: 6%; bottom: 11%; } .hero-shapes .shape.five { left: 52%; bottom: 11%; } /* Hero Two */ .hero-area-two .pizza { z-index: -1; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 38%; } @media only screen and (max-width: 991px) { .hero-area-two .pizza { left: 65%; } } .hero-area-two .price-badge { z-index: -1; width: 170px; height: 170px; color: white; position: absolute; left: 62%; top: 20%; font-size: 35px; 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-size: cover; font-family: var(--heading-font); } @media only screen and (max-width: 1199px) { .hero-area-two .price-badge { width: 120px; height: 120px; font-size: 25px; } } @media only screen and (max-width: 767px) { .hero-area-two .price-badge { width: 80px; height: 80px; font-size: 16px; line-height: 1.3; } } @media only screen and (max-width: 991px) { .hero-area-two .price-badge { top: 30%; } } .hero-area-two .price-badge b { font-size: 1.2em; } @media only screen and (min-width: 1200px) { .hero-area-two .price-badge b { margin-top: 15px; } } .hero-area-two .shape.three { top: 40%; max-width: 5%; } .hero-area-two .letter-shape-one { z-index: -1; position: absolute; right: 0; top: 18%; max-width: 20%; } .hero-area-two .letter-shape-two { position: absolute; left: 0; bottom: 4%; z-index: -1; max-width: 10%; } .hero-content-two { max-width: 234px; } @media only screen and (min-width: 1200px) { .hero-content-two { margin-left: 16%; } } .hero-content-two .price { line-height: 1; display: block; font-size: 30px; margin-bottom: 33px; color: var(--secondary-color); font-family: var(--heading-font); } .hero-title { color: white; display: block; line-height: 0.8; font-size: 300px; font-family: var(--heading-font); } @media only screen and (max-width: 1399px) { .hero-title { font-size: 200px; } } @media only screen and (max-width: 991px) { .hero-title { font-size: 150px; } } @media only screen and (max-width: 767px) { .hero-title { font-size: 100px; } } @media only screen and (max-width: 575px) { .hero-title { font-size: 80px; } } /* Hero Three */ .hero-area-three { background-size: cover; background-position: bottom center; } .hero-area-three .marquee-wrap.style-two { top: 11%; opacity: 1; position: absolute; } @media only screen and (min-width: 992px) and (max-width: 1399px) { .hero-area-three .marquee-wrap.style-two { font-size: 400px; } } @media only screen and (max-width: 575px) { .hero-area-three .marquee-wrap.style-two { top: 13%; font-size: 85px; } } @media only screen and (max-width: 1199px) { .hero-content-three h1 { font-size: 85px; } } @media only screen and (max-width: 479px) { .hero-content-three h1 { font-size: 55px; } } @media only screen and (max-width: 375px) { .hero-content-three h1 { font-size: 50px; } } .hero-content-three p { font-weight: 500; max-width: 515px; margin-bottom: 35px; } @media only screen and (min-width: 480px) { .hero-content-three p { line-height: 2; font-size: 20px; } } .hero-content-three .theme-btn { border: 1px solid var(--secondary-color); } .hero-content-three .theme-btn:not(:hover) i { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; color: var(--heading-color); } .hero-three-image { position: relative; } @media only screen and (min-width: 1200px) { .hero-three-image { margin-right: -25%; } } .hero-three-image .offer-badge { width: 170px; height: 170px; line-height: 1; position: absolute; left: -5%; top: 10%; font-size: 45px; 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; background-size: cover; } @media only screen and (max-width: 479px) { .hero-three-image .offer-badge { left: 0; width: 120px; height: 120px; font-size: 30px; } } @media only screen and (max-width: 375px) { .hero-three-image .offer-badge { top: 0; width: 100px; height: 100px; font-size: 25px; } } /* Hero Four */ .hero-area-four { position: relative; z-index: 1; } .hero-area-four:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0.95))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.95) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.95) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.95) 100%); } .hero-area-four .shape.five { left: 85%; } .hero-content-four { position: relative; padding: 60px 0px; } .hero-content-four .quality-food { position: absolute; left: 10%; bottom: 3%; width: 180px; height: 180px; font-size: 30px; line-height: 1.2; 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; background-size: cover; font-family: var(--heading-font); background-repeat: no-repeat; } @media only screen and (max-width: 767px) { .hero-content-four .quality-food { width: 130px; height: 130px; bottom: -5%; font-size: 22px; } } @media only screen and (max-width: 479px) { .hero-content-four .quality-food { width: 100px; height: 100px; font-size: 16px; } } .hero-content-four .quality-food .for-border { width: 70%; height: 70%; position: absolute; left: 15%; top: 15%; border: 2px dashed white; border-radius: 50%; } .hero-content-four .sub-title { color: white; font-size: 24px; font-weight: 600; text-transform: uppercase; } @media only screen and (max-width: 767px) { .hero-content-four .sub-title { font-size: 20px; } } @media only screen and (max-width: 479px) { .hero-content-four .sub-title { font-size: 16px; } } .hero-content-four h1 { margin-bottom: -10%; } @media only screen and (min-width: 1400px) { .hero-content-four h1 { font-size: 100px; margin-top: -10px; } } @media only screen and (min-width: 992px) and (max-width: 1399px) { .hero-content-four h1 { font-size: 170px; } } @media only screen and (max-width: 1399px) { .hero-content-four h1 { margin-bottom: -7%; } } @media only screen and (max-width: 767px) { .hero-content-four h1 { font-size: 88px; } } @media only screen and (max-width: 479px) { .hero-content-four h1 { font-size: 68px; } } @media only screen and (max-width: 375px) { .hero-content-four h1 { font-size: 50px; } } .hero-content-four.style-two { max-width: 775px; margin-left: auto; margin-right: auto; } .hero-content-four.style-two .sub-title { display: block; margin-bottom: 20px; color: var(--secondary-color); } .hero-content-four.style-two h1 { margin-top: 0; line-height: 1; margin-bottom: 35px; } @media(max-width:1440px) { .hero-content-four.style-two h1 { font-size: 100px; } } @media(max-width:1200px) { .hero-content-four.style-two h1 { font-size: 70px; } } @media(max-width:992px) { .hero-content-four.style-two h1 { font-size: 40px; } } @media(max-width:768px) { .hero-content-four.style-two h1 { font-size: 40px; } } @media only screen and (min-width: 992px) { .hero-content-four.style-two h1 { letter-spacing: 5px; } } .hero-content-four.style-two p { max-width: 575px; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 376px) { .hero-content-four.style-two p { font-size: 20px; } } /* Hero Five */ .hero-area-five { z-index: 1; position: relative; background-position: bottom center; height: 100vh; } .hero-area-five::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.8; background-color: #030303; } .hero-area-five .shape.five { left: 90%; } .hero-area-five .hero-left, .hero-area-five .hero-right { z-index: -1; max-width: 30%; position: absolute; } .hero-area-five .hero-left { left: 4%; bottom: 10%; } .hero-area-five .hero-right { right: 4%; bottom: 30%; } @media (max-width:1440px) { .hero-area-five { height: auto; } } @media (max-width:1024px) { .hero-content-four { padding: 60px 0px 450px; } .hero-area-five .hero-right { right: 25%; bottom: 13%; max-width: 50%; } .hero-area-five .hero-left { display: none; } } @media (max-width:500px) { .hero-content-four { padding: 60px 0px 450px; } .hero-area-five .hero-right { right: 0%; bottom: 10%; max-width: 100%; } .hero-area-five .hero-left { display: none; } } /* Hero Six */ .hero-btns { 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; } .hero-btns>* { margin-bottom: 15px; } .hero-btns .theme-btn:not(:last-child) { margin-right: 40px; } @media only screen and (max-width: 479px) { .hero-btns .theme-btn:not(:last-child) { margin-right: 20px; } } .hero-btns .header-number { display: block; margin-left: 0; } /*******************************************************/ /******************* ## Offer Area *********************/ /*******************************************************/ .offer-card-item { padding: 40px 0; position: relative; text-align: center; background-color: var(--primary-color); background-image: url(../images/offer/offer-card-bg.png); } .offer-card-item .badge { width: 90px; height: 90px; z-index: 1; position: absolute; right: 15%; top: 18%; line-height: 72px; background-image: url(../images/offer/badge-bg.png); } .offer-card-item .image { position: relative; padding-bottom: 80%; } .offer-card-item .image img { left: 50%; top: 68%; position: absolute; max-width: calc(100% + 80px); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .offer-card-item .title { color: white; display: block; font-size: 100px; position: relative; } @media only screen and (max-width: 375px) { .offer-card-item .title { font-size: 80px; } } .offer-card-item .available-item { color: white; padding: 5px 10px 2px; display: inline-block; border: 1px solid white; background: var(--primary-color); } .offer-card-item .bg-text { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); line-height: 1; top: 45%; font: 8em var(--heading-font); line-height: 0.8; color: rgba(255, 255, 255, 0.1); } @media only screen and (max-width: 767px) { .offer-card-item .bg-text { font-size: 6em; } } .offer-card-item.style-two { background-color: var(--secondary-color); } .offer-card-item.style-two .badge { color: white; background-image: url(../images/offer/badge-bg-two.png); } .offer-area .marquee-wrap.style-two { position: absolute; z-index: -1; top: 55px; } .offer-area .offer-shapes .shape { z-index: -1; max-width: 8%; position: absolute; } .offer-area .offer-shapes .shape.one { left: 0; bottom: 50px; } .offer-area .offer-shapes .shape.two { top: 15%; right: 18%; } .offer-area .offer-shapes .shape.three { left: 30%; bottom: 6%; } .offer-content img { max-width: 50%; } .offer-content h2 { font-size: 95px; margin-top: 15px; line-height: 1.1; } @media only screen and (max-width: 1299px) { .offer-content h2 { font-size: 70px; } } @media only screen and (max-width: 575px) { .offer-content h2 { font-size: 60px; } } @media only screen and (max-width: 479px) { .offer-content h2 { font-size: 55px; } } @media only screen and (max-width: 375px) { .offer-content h2 { font-size: 45px; } } .offer-content h3 { color: var(--secondary-color); } @media only screen and (max-width: 479px) { .offer-content h3 { font-size: 26px; } } @media only screen and (max-width: 375px) { .offer-content h3 { font-size: 22px; } } .offer-content h3 span { font-size: 1.66em; color: var(--secondary-color); } .offer-content p { max-width: 460px; margin-top: 15px; margin-bottom: 30px; } .offer-image { position: relative; text-align: right; max-width: 676px; } @media only screen and (min-width: 992px) { .offer-image { margin-left: auto; } } @media only screen and (min-width: 1400px) { .offer-image { margin-right: -100px; } } .offer-image .offer-badge { position: absolute; left: 19%; bottom: -4%; width: 226px; height: 226px; background-repeat: no-repeat; background-size: cover; 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; text-align: center; } @media only screen and (max-width: 767px) { .offer-image .offer-badge { width: 130px; height: 130px; } } @media only screen and (max-width: 375px) { .offer-image .offer-badge { width: 100px; height: 100px; } } .offer-image .offer-badge span { font-size: 45px; } @media only screen and (max-width: 767px) { .offer-image .offer-badge span { font-size: 25px; } } @media only screen and (max-width: 375px) { .offer-image .offer-badge span { font-size: 20px; } } .offer-image .offer-badge span .price { line-height: 1; font-size: 1.66em; } .offer-image.style-two .offer-badge { left: auto; top: 0; right: 0; } @media only screen and (min-width: 768px) { .offer-image.style-two .offer-badge { width: 180px; height: 180px; } .offer-image.style-two .offer-badge>span { font-size: 30px; } } .offer-image.style-two .offer-badge .price { display: block; font-size: 2em; font-weight: 600; } @media only screen and (min-width: 768px) { .offer-image.style-two .offer-badge .price { margin-top: 10px; } } .offer-image.style-two .marquee-wrap.style-two { z-index: -1; position: absolute; left: 35%; bottom: -28%; } .offer-image.style-two.style-three .offer-badge span { color: white; } .offer-image.style-two.style-three .marquee-wrap.style-two { left: 0; bottom: -40%; } /* Special Offer Two */ .offer-content-two img { max-width: 90%; } .offer-content-two .section-title h2 { color: var(--secondary-color); } .offer-content-two p { max-width: 455px; margin-left: auto; margin-right: auto; } .offer-countdown-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: -12px; margin-right: -12px; } .offer-countdown-wrap li { color: white; line-height: 1; font-size: 22px; min-width: 110px; padding: 20px 30px; text-align: center; margin-bottom: 25px; border-radius: 10px; margin-left: 12px; margin-right: 12px; background: var(--primary-color); font-family: var(--heading-font); } .offer-countdown-wrap li span { display: block; font-size: 75px; } @media only screen and (max-width: 767px) { .offer-countdown-wrap li { font-size: 20px; min-width: 100px; } .offer-countdown-wrap li span { font-size: 55px; } } /*******************************************************/ /******************* ## Banner Area *******************/ /*******************************************************/ .category-banner-item { padding: 40px; color: white; z-index: 1; margin-bottom: 30px; position: relative; background-size: cover; background-position: center center; } .category-banner-item:before { position: absolute; left: 0; top: 0; z-index: -1; content: ""; width: 100%; height: 100%; background: -webkit-linear-gradient(334.77deg, #0e1317 11.42%, rgba(14, 19, 23, 0) 74.78%); background: -o-linear-gradient(334.77deg, #0e1317 11.42%, rgba(14, 19, 23, 0) 74.78%); background: linear-gradient(115.23deg, #0e1317 11.42%, rgba(14, 19, 23, 0) 74.78%); } .category-banner-item .price { display: block; font-size: 24px; margin-top: -5px; margin-bottom: 10px; color: var(--secondary-color); font-family: var(--heading-font); } .category-banner-item h3 { color: white; line-height: 1; max-width: 200px; } @media only screen and (min-width: 480px) { .category-banner-item h3 { font-size: 50px; } } .category-banner-item .ratting { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; } .category-banner-item.style-two:before { display: none; } .category-banner-item.style-two .price { color: white; } @media only screen and (max-width: 375px) { .category-banner-item.style-two .price { font-size: 20px; } } .category-banner-item.style-two h3 { max-width: 250px; margin-bottom: 16px; } @media only screen and (min-width: 1200px) { .category-banner-item.style-two h3 { font-size: 60px; } } .category-banner-item.style-two .ratting { margin-bottom: 26px; } .category-banner-item.style-two .theme-btn { font-size: 16px; padding: 7px 30px; } .category-banner-item.style-two .theme-btn:hover { outline: 1px solid white; } .category-banner-item.style-two .food-image { z-index: -1; max-width: 45%; position: absolute; right: 25px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .category-banner-item.style-two.color-black h3, .category-banner-item.style-two.color-black .price, .category-banner-item.style-two.color-black .ratting, .category-banner-item.style-two.color-black .ratting i { color: var(--heading-color); } .category-banner-item.style-two.color-black .food-image { max-width: 40%; } .category-banner-item.style-three { padding: 190px 60px 50px; height: calc(100% - 30px); } .category-banner-item.style-three:before { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9))); background: -webkit-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); background: -o-linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); } .category-banner-item.style-three h3 { margin-bottom: 20px; } .category-banner-item.style-three h2 { color: white; max-width: 305px; } @media only screen and (max-width: 1299px) { .category-banner-item.style-three h2 { font-size: 45px; } } @media only screen and (max-width: 375px) { .category-banner-item.style-three h2 { font-size: 40px; } } .category-banner-item.style-three .theme-btn { padding: 7px 30px; } .category-banner-item.style-three .quality { color: white; font-size: 18px; font-weight: 500; padding: 3px 20px; border: 1px solid; margin-bottom: 20px; border-radius: 30px; display: inline-block; } .category-banner-item.style-three.gradient-two { padding-top: 85px; } @media only screen and (max-width: 1299px) { .category-banner-item.style-three.gradient-two { padding-left: 44px; padding-right: 44px; } } .category-banner-item.style-three.gradient-two:before { background: -webkit-linear-gradient(154.36deg, rgba(236, 61, 8, 0.2) 0.49%, rgba(236, 61, 8, 0.7) 100%); background: -o-linear-gradient(154.36deg, rgba(236, 61, 8, 0.2) 0.49%, rgba(236, 61, 8, 0.7) 100%); background: linear-gradient(295.64deg, rgba(236, 61, 8, 0.2) 0.49%, rgba(236, 61, 8, 0.7) 100%); } .category-banner-item.style-three.gradient-three { padding-top: 85px; } @media only screen and (max-width: 1299px) { .category-banner-item.style-three.gradient-three { padding-left: 44px; padding-right: 44px; } } .category-banner-item.style-three.gradient-three:before { background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%); } .category-banner-item.style-four { 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; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: calc(100% - 30px); } .category-banner-item.style-four:before { display: none; } .category-banner-item.style-four h3 { max-width: none; margin-bottom: 0; } @media only screen and (min-width: 1200px) { .category-banner-item.style-four h3 { font-size: 120px; } } .category-banner-item.style-four .get-one { display: block; font-size: 24px; margin-bottom: 22px; } .category-banner-item.style-four .theme-btn { padding: 6px 30px; border: 1px solid white; } .category-banner-item.style-five { display: -webkit-box; display: -ms-flexbox; display: flex; -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; } .category-banner-item.style-five .badge { color: white; width: 85px; height: 85px; z-index: 1; position: absolute; right: 40px; top: 40px; font-size: 25px; font-weight: 400; line-height: 72px; background-image: url(../images/offer/badge-bg-two.png); background-size: cover; } .category-banner-item.style-five .price { font-size: 20px; } .category-banner-item.style-five h3 { max-width: 250px; } .category-banner-item.style-five .read-more { color: white; margin-top: 55px; background-size: cover; } .category-banner-item.style-five.height-100 { padding-top: 150px; height: calc(100% - 30px); } /* Category Banner Five */ .category-banner-area-five { position: relative; } .category-banner-area-five:before { position: absolute; left: 0; top: 0; content: ""; z-index: -1; width: 100%; height: 60%; background: var(--lighter-color); } .page-banner-area { z-index: 1; position: relative; } .page-banner-area::before { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.8; background-color: #030303; } .page-banner-area:before { mix-blend-mode: multiply; } @media only screen and (max-width: 991px) { .page-title { font-size: 90px; } } @media only screen and (max-width: 767px) { .page-title { font-size: 70px; } } @media only screen and (max-width: 575px) { .page-title { font-size: 50px; } } @media only screen and (max-width: 375px) { .page-title { font-size: 40px; } } .breadcrumb { padding: 0; margin: 0; font-size: 24px; background: transparent; text-transform: capitalize; } @media only screen and (max-width: 575px) { .breadcrumb { font-size: 18px; } } @media only screen and (max-width: 375px) { .breadcrumb { font-size: 16px; } } .breadcrumb .breadcrumb-item { padding: 0; font-weight: 400; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .breadcrumb .breadcrumb-item a { color: white; } .breadcrumb .breadcrumb-item a:hover { color: var(--primary-color); } .breadcrumb .breadcrumb-item.active { color: var(--secondary-color); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .breadcrumb .breadcrumb-item+.breadcrumb-item::before { -webkit-box-flex: 0; -ms-flex: none; flex: none; color: white; content: "\f105"; font-size: 1.1em; font-weight: 300; margin-left: 25px; margin-right: 15px; font-family: "Font Awesome 5 Pro"; } @media only screen and (max-width: 575px) { .breadcrumb .breadcrumb-item+.breadcrumb-item::before { margin-left: 15px; margin-right: 5px; } } /*******************************************************/ /******************** ## About Area ********************/ /*******************************************************/ .about-us-content { max-width: 510px; } @media only screen and (min-width: 1200px) { .about-us-content { margin-left: auto; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-us-content .section-title h2 { font-size: 50px; } } .why-choose-area .marquee-wrap.style-two { position: absolute; z-index: -1; top: 55px; } .why-choose-area .headline-shapes .shape { z-index: -1; } .why-choose-area .headline-shapes .shape.one { left: 5%; } .why-choose-area .headline-shapes .shape.two { top: 15%; right: 5%; } .why-choose-content { max-width: 530px; } .about-image-part { position: relative; padding-left: 12%; padding-top: 18%; } .about-image-part:before { position: absolute; left: 0; top: 0; content: ""; width: 95%; height: 95%; z-index: -1; border-radius: 50%; border: 1px solid var(--primary-color); } .about-image-part:after { position: absolute; left: 7%; top: 10%; content: ""; width: 85%; height: 85%; z-index: -1; border-radius: 50%; border: 1px solid var(--primary-color); } .about-image-part img { border-radius: 50%; } .about-image-part .food-review { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; right: -4%; top: 22%; padding: 9px; background: white; border-radius: 33px; border: 1px solid var(--primary-color); -webkit-box-shadow: 0px 10px 60px rgba(35, 116, 231, 0.3); box-shadow: 0px 10px 60px rgba(35, 116, 231, 0.3); } @media only screen and (max-width: 1199px) { .about-image-part .food-review { right: -10px; top: 44%; } } @media only screen and (max-width: 375px) { .about-image-part .food-review { display: none; } } .about-image-part .food-review .author { width: 36px; height: 36px; } .about-image-part .food-review .text { color: var(--primary-color); -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-left: 15px; margin-right: 12px; margin-bottom: -5px; } .about-image-part .food-review .ratting { -webkit-box-flex: 0; -ms-flex: none; flex: none; padding-right: 8px; } .about-image-part .food-review .ratting i { font-size: 14px; } .about-image-part .quality-food { position: absolute; right: 14%; bottom: -2%; width: 180px; height: 180px; border-radius: 50%; background-size: cover; background-repeat: no-repeat; } @media only screen and (max-width: 479px) { .about-image-part .quality-food { width: 130px; height: 130px; right: 4%; } } .about-image-part .quality-food .for-border { width: calc(100% - 50px); height: calc(100% - 50px); position: absolute; left: 25px; top: 25px; border: 2px dashed white; border-radius: 50%; } @media only screen and (max-width: 479px) { .about-image-part .quality-food .for-border { width: calc(100% - 30px); height: calc(100% - 30px); top: 15px; left: 15px; } } .about-image-part .quality-food .text { color: white; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; } @media only screen and (max-width: 479px) { .about-image-part .quality-food .text { font-size: 20px; } } .about-image-part.style-two { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; padding-left: 0; padding-top: 20px; } .about-image-part.style-two:before, .about-image-part.style-two:after { content: none; } .about-image-part.style-two .quality-food { bottom: auto; top: 0; right: 0; } .about-image-part.style-two .quality-food .for-border { border-color: var(--heading-color); } .about-image-part.style-two .quality-food .text { color: var(--heading-color); } .about-image-part.style-three { max-width: 400px; text-align: right; padding-top: 55px; } .about-image-part.style-three:before, .about-image-part.style-three:after { content: none; } .about-image-part.style-three img { border-radius: 0; } .about-image-part.style-three .quality-food { left: 0; top: 0; } .about-image-part.style-four { max-width: 600px; padding: 70px 12% 0 0; } .about-image-part.style-four img { border-radius: 0; } .about-image-part.style-four .quality-food { right: 0; top: 0; } /* Why Choose Two */ @media only screen and (min-width: 992px) { .why-choose-two-image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .why-choose-two-image img { max-width: none; max-height: 100%; } } .why-choose-two-content { padding-left: 40px; position: relative; z-index: 1; } @media only screen and (max-width: 375px) { .why-choose-two-content { padding-left: 20px; } } .why-choose-two-content .section-title { max-width: 455px; } .why-choose-two-content .service-item { max-width: 300px; margin-right: 30px; } @media only screen and (max-width: 375px) { .why-choose-two-content .service-item { max-width: 270px; } } .why-choose-two-content .shape { z-index: -1; position: absolute; } .why-choose-two-content .shape.one { right: 10%; bottom: 63%; max-width: 20%; } .why-choose-two-content .shape.two { top: 93%; left: 10%; max-width: 10%; } /* About Shapes */ .about-shapes .shape { z-index: -1; position: absolute; } .about-shapes .shape.one { left: 0; bottom: 14%; max-width: 10%; } .about-bg-text { position: absolute; left: 0; bottom: 85px; z-index: -1; font-size: 9.6vw; line-height: 1; color: var(--primary-color); font-family: var(--heading-font); } @media only screen and (max-width: 991px) { .about-bg-text { bottom: 48%; } } @media only screen and (max-width: 575px) { .about-bg-text { bottom: 55%; } } @media only screen and (max-width: 479px) { .about-bg-text { display: none; } } .about-btn-author { 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; } .about-btn-author .theme-btn { margin-top: 20px; margin-right: 35px; } .about-btn-author .author { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .about-btn-author .author img { max-width: 52px; border-radius: 50%; margin-right: 18px; } .about-btn-author .author h6 { margin-bottom: 0; } .about-btn-author .author h6 span { font-size: 14px; font-family: var(--base-font); } .about-btn-author .read-more { margin-top: 20px; } .about-video { position: relative; } .about-video:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: rgba(14, 19, 23, 0.2); } .about-video .video-play { width: 55px; height: 55px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 13px; line-height: 55px; } .about-video img { width: 100%; } .about-middle-content { max-width: 380px; } @media only screen and (min-width: 1200px) { .about-middle-content { margin-right: -35px; } } @media only screen and (min-width: 768px) { .about-middle-content { margin-left: auto; } } .about-middle-content h4 { font-size: 26px; margin-bottom: 13px; } .about-btn-customer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .about-btn-customer .theme-btn { margin-right: 45px; } @media only screen and (max-width: 991px) { .about-btn-customer .theme-btn { margin-right: 15px; } } .about-btn-customer .customer h6 { font-size: 18px; } @media only screen and (max-width: 375px) { .about-btn-customer .customer h6 { font-size: 16px; } } .about-btn-customer .customer .customer-image img { width: 40px; height: 40px; border-radius: 50%; margin-right: -15px; } @media only screen and (max-width: 375px) { .about-btn-customer .customer .customer-image img { margin-right: -25px; } } /* About Four */ .about-image-four { position: relative; } .about-image-four .badge { max-width: 35%; position: absolute; left: 25%; bottom: 20px; } .about-image-four .badge img { border-radius: 50%; } .about-image-four.style-two { z-index: 1; } .about-image-four.style-two:before { content: ""; z-index: -1; width: 310px; height: 310px; position: absolute; left: 50%; top: -60px; border-radius: 50%; border: 1px solid var(--primary-color); -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); } @media only screen and (max-width: 991px) { .about-image-four.style-two:before { top: -30px; } } @media only screen and (max-width: 767px) { .about-image-four.style-two:before { width: 200px; height: 200px; } } @media only screen and (max-width: 375px) { .about-image-four.style-two:before { width: 150px; height: 150px; } } /* Why Choose Five */ .why-choose-five-content { max-width: 480px; } /* Menu Page */ .experience-year { position: absolute; right: 0; bottom: 0; color: white; padding: 45px; font-size: 20px; max-width: 300px; background: var(--primary-color); } @media only screen and (max-width: 575px) { .experience-year { padding: 25px; font-size: 16px; max-width: 210px; } } @media only screen and (max-width: 479px) { .experience-year { right: -15px; bottom: -25px; } } .experience-year .years { font-size: 5em; line-height: 1; display: block; font-family: var(--heading-font); } @media only screen and (max-width: 375px) { .experience-year .years { font-size: 3em; } } /* About Five */ /* .about-image-five { margin-left: -90px; } */ /* @media only screen and (max-width: 991px) { .about-image-five { margin-left: -15%; } } */ /* About Six */ .about-six-service-part { padding-left: 100px; padding-right: 100px; } @media only screen and (max-width: 1199px) { .about-six-service-part { padding-left: 50px; padding-right: 50px; } } @media only screen and (max-width: 375px) { .about-six-service-part { padding-left: 25px; padding-right: 25px; } } .about-six-service-part .headline-shapes .shape.two { right: 36%; max-width: 10%; } .about-six-content { max-width: 310px; } @media only screen and (max-width: 1399px) { .about-six-content { margin-left: 20px; margin-right: 30px; } } @media only screen and (max-width: 991px) { .about-six-content { max-width: none; margin-left: 50px; margin-right: 50px; } } @media only screen and (max-width: 375px) { .about-six-content { margin-left: 25px; margin-right: 25px; } } /*******************************************************/ /******************* ## Counter Area *******************/ /*******************************************************/ .counter-item { margin-bottom: 30px; } .counter-item.style-two .count-text { font-size: 48px; } .counter-item.style-three { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 20px; padding: 28px 35px 22px; background: var(--lighter-color); border: 1px solid rgba(14, 19, 23, 0.05); } @media only screen and (max-width: 375px) { .counter-item.style-three { padding-left: 25px; padding-right: 25px; } } .counter-item.style-three .icon { -webkit-box-flex: 0; -ms-flex: none; flex: none; font-size: 40px; color: var(--primary-color); width: 70px; height: 70px; background: white; line-height: 70px; border-radius: 50%; text-align: center; margin-right: 20px; } .counter-item.style-three .count-text { margin-bottom: -5px; } .counter-item.style-four { background: var(--lighter-color); padding: 45px 50px 30px; margin-bottom: 0; } .counter-item.style-four .count-text { font-size: 75px; } .counter-item.style-four .wave { margin-top: 10px; margin-bottom: 22px; } .counter-item.style-four.text-white .count-text { color: white; } .counter-item.style-four.bgc-primary { background-color: var(--primary-color); } .counter-item.style-four.bgc-secondary { background-color: var(--secondary-color); } .counter-area-four { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 690px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .count-text { display: block; line-height: 1; } .count-text.plus:after { content: "+"; } .count-text.k-plus:after { content: "k+"; } .count-text.m-plus:after { content: "m+"; } .chef-content-part { max-width: 435px; } @media only screen and (min-width: 1200px) { .chef-content-part { margin-left: auto; margin-right: auto; } } .chef-content-part .section-title h2 { margin-bottom: -5px; } .chef-content-part .social-style-one a:not(:hover) { background: var(--lighter-color); } /* Circle Counter */ .history-progress { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 30px; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .history-progress canvas { margin-right: 30px; } .history-progress .counting { width: 120px; position: absolute; left: 0; top: 50%; line-height: 1; font-size: 35px; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .history-progress h3 { margin-bottom: 0; } @media only screen and (max-width: 375px) { .history-progress h3 { font-size: 28px; line-height: 1.4; } } .history-progress.style-two { display: block; text-align: center; } .history-progress.style-two canvas { margin-right: 0; margin-bottom: 12px; } .history-progress.style-two .counting { top: 60px; width: 100%; } /*******************************************************/ /****************** ## Category Area *******************/ /*******************************************************/ .food-category-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 25px 50px 25px 70px; border: 1px solid var(--border-color); } @media only screen and (max-width: 1399px) { .food-category-item { padding: 15px 25px 15px 45px; } } @media only screen and (max-width: 375px) { .food-category-item { padding: 10px 15px 10px 35px; } } .food-category-item .image { max-width: 100px; margin-right: 25px; position: relative; } @media only screen and (max-width: 1399px) { .food-category-item .image { max-width: 80px; margin-right: 15px; } } @media only screen and (max-width: 375px) { .food-category-item .image { max-width: 60px; } } .food-category-item .image .pizza-badge { width: 40px; height: 40px; position: absolute; left: -20px; top: 0; text-align: center; color: var(--heading-color); background-size: cover; background-repeat: no-repeat; font-family: var(--heading-font); line-height: 42px; } @media only screen and (max-width: 375px) { .food-category-item .image .pizza-badge { width: 30px; height: 30px; font-size: 13px; line-height: 32px; } } .food-category-item h3 { margin-bottom: 0; } @media only screen and (max-width: 1399px) { .food-category-item h3 { font-size: 25px; } } @media only screen and (max-width: 375px) { .food-category-item h3 { font-size: 20px; } } .food-category-active .slick-track { display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .food-category-active .slick-track .food-category-item { display: -webkit-box; display: -ms-flexbox; display: flex; height: auto; border-width: 0 1px 0 0; } /* Food Category Two */ .fc-two-active { margin-left: -15px; margin-right: -15px; } .fc-two-active .fc-two-item { margin-left: 15px; margin-right: 15px; } .fc-two-active .fc-two-item img { display: inline-block; } .fc-two-active .slick-dots { margin-top: 20px; } .fc-two-item { padding: 30px; text-align: center; margin-bottom: 30px; background: var(--lighter-color); border: 1px solid var(--border-color); } .fc-two-item .icon { margin-bottom: 25px; } .fc-two-item .btn { color: black; border: none; font-weight: 500; background: white; padding: 3px 15px; border-radius: 0; } .fc-two-item.style-two { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 30px 15px 15px; background: transparent; height: calc(100% - 30px); } .fc-two-item.style-two .icon { margin-bottom: 15px; } .fc-two-item.style-two h5 { font-size: 22px; margin-top: auto; } /*******************************************************/ /***************** ## Popular Food Area *****************/ /*******************************************************/ .food-item { position: relative; padding: 25px 45px 8px; background-color: var(--lighter-color); border: 1px dashed var(--border-color); background-repeat: no-repeat; background-size: cover; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media only screen and (min-width: 1200px) and (max-width: 1299px) { .food-item { padding-left: 30px; padding-right: 30px; } } @media only screen and (max-width: 375px) { .food-item { padding-left: 25px; padding-right: 25px; } } .food-item .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .food-item .content h5 { margin-bottom: 4px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .food-item .content .price { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 40px; text-align: right; } .food-item .content .price span { color: var(--primary-color); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .food-item .image { position: absolute; right: 0; bottom: 0; opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 2; } .food-item .image img { max-width: 120px; border-radius: 50%; } .food-item:hover { color: white; background-color: var(--primary-color); background-image: url(../images/shapes/food-shape.png); } .food-item:hover .content h5, .food-item:hover .content .price span { color: white; } .food-item:hover .image { opacity: 1; visibility: visible; right: -25%; bottom: 36%; } @media only screen and (max-width: 1199px) { .food-item:hover .image { right: 0; bottom: 10%; } } /* Pizza Menu Item */ .food-menu-item { padding: 25px 25px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1.2px dashed rgba(14, 19, 23, 0.1); margin-bottom: 30px; } @media only screen and (max-width: 991px) { .food-menu-item { padding-left: 15px; padding-right: 15px; } } @media only screen and (max-width: 375px) { .food-menu-item { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .food-menu-item .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-right: 35px; } @media only screen and (max-width: 991px) { .food-menu-item .image { margin-right: 15px; } } .food-menu-item .content { margin-right: 10px; } .food-menu-item .content h5 { margin-bottom: 0; line-height: 1; } .food-menu-item .content p { margin-bottom: 5px; } .food-menu-item .content .price { line-height: 1; color: var(--primary-color); } .food-menu-item .details-btn { -webkit-box-flex: 0; -ms-flex: none; flex: none; text-align: center; line-height: 35px; font-size: 13px; color: var(--heading-color); margin-left: auto; width: 35px; height: 35px; background: var(--secondary-color); } .food-menu-item.style-two { padding: 0; border: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .food-menu-item.style-two .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 100px; margin-right: 20px; } @media(max-width:500px) { .food-menu-item.style-two .image { width: 50px; margin-right: 5px; } } @media only screen and (max-width: 375px) { .food-menu-item.style-two .image { margin-bottom: 5px; width: 80px; margin-right: 0px; } } .food-menu-item.style-two .content { width: 100%; margin-right: 0; } .food-menu-item.style-two .content h5 { margin-top: 8px; margin-bottom: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .food-menu-item.style-two .content h5 .title { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .food-menu-item.style-two .content h5 .dots { height: 2px; width: 100%; margin-left: 25px; margin-bottom: 10px; border-bottom: 2px dotted var(--base-color); } .food-menu-item.style-two .content h5 .price { margin-left: 20px; } @media(max-width:425px) { .food-menu-item.style-two .content h5 .price { margin-left: 5px; } } .food-menu-item.style-two .content p { margin-bottom: 0; } .food-menu-item.style-two:last-child { margin-bottom: 0; } @media(max-width:500px) { .food-menu-item.style-two .content h5 { font-size: 20px; } .food-menu-item.style-two .content p { font-size: 14px; line-height: 20px; } } @media(max-width:425px) { .food-menu-item.style-two .content h5 { font-size: 17px; } } .popular-menu-wrap { height: 100%; background: white; margin-top: -1px; margin-right: -1px; padding: 50px 60px; border: 1px solid var(--border-color); -webkit-box-shadow: 0px 10px 60px rgba(220, 220, 220, 0.25); box-shadow: 0px 10px 60px rgba(220, 220, 220, 0.25); } @media only screen and (max-width: 767px) { .popular-menu-wrap { padding: 35px 25px; } } .popular-menu-wrap.bgc-black { -webkit-box-shadow: none; box-shadow: none; background-color: var(--heading-color); border: 1px solid rgba(255, 255, 255, 0.05); } .popular-menu-wrap.bgc-black .food-menu-item.style-two .content h5 { color: white; } .popular-menu-wrap.bgc-black .food-menu-item.style-two .content p { color: #acacac; } .menu-items-shape .shape { top: 15%; z-index: -1; max-width: 15%; position: absolute; } .menu-items-shape .shape.one { left: 3%; } .menu-items-shape .shape.two { right: 3%; top: 80%; } .special-offer-area-two:after { position: absolute; content: ""; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; opacity: 0.8; background-color: #030303; } .special-pizza { position: relative; z-index: 1; padding: 30px 35px 35px; background-color: var(--primary-color); background-size: cover; background-repeat: no-repeat; overflow: hidden; margin-bottom: 30px; } @media only screen and (max-width: 375px) { .special-pizza { padding-left: 25px; padding-right: 25px; } } .special-pizza:after { position: absolute; right: 0; bottom: 0; content: ""; width: 38%; height: 73%; background-image: url(../images/shapes/special-pizza-shape.png); background-repeat: no-repeat; background-size: cover; z-index: -2; } .special-pizza .image { z-index: -1; position: absolute; right: 0; top: 40px; max-width: 52%; } .special-pizza .price { font-size: 24px; font-family: var(--heading-font); color: var(--secondary-color); display: block; margin-bottom: 4px; } .special-pizza h3 { font-size: 50px; color: white; line-height: 1.05; } @media only screen and (max-width: 479px) { .special-pizza h3 { font-size: 40px; } } .special-pizza .ratting { margin-left: -3px; } .special-pizza .ratting span { color: white; margin-left: 10px; margin-bottom: -3px; font-family: var(--heading-font); } .special-pizza .theme-btn.style-two { margin-top: 16px; font-size: 16px; padding: 6px 30px; border: 1px solid var(--secondary-color); } .restaurant-menu-area .shape { max-width: 10%; } /* Food Menu Five */ .food-menu-five .food-menu-item.style-two { padding: 25px 30px; border: 2px dashed var(--border-color); } @media only screen and (max-width: 479px) { .food-menu-five .food-menu-item.style-two { display: block; } } .food-menu-five .food-menu-item.style-two:not(:last-child) { margin-bottom: 20px; } @media only screen and (max-width: 479px) { .food-menu-five .food-menu-item.style-two .image { margin-bottom: 15px; } } .food-menu-five .food-menu-item.style-two .image img { width: 80px; height: 80px; border-radius: 50%; border: 3px solid white; -webkit-box-shadow: 0px 10px 30px rgba(150, 150, 150, 0.25); box-shadow: 0px 10px 30px rgba(150, 150, 150, 0.25); } /* Grill Menu */ .grill-menu-image { height: 100%; min-height: 500px; } @media only screen and (min-width: 992px) { .grill-menu-image { margin-right: -100px; } } .grill-menu-wrap .popular-menu-wrap { margin-top: 60px; position: relative; margin-bottom: -60px; } @media only screen and (max-width: 1199px) { .grill-menu-wrap .popular-menu-wrap { padding-left: 25px; padding-right: 25px; } } .grill-menu-wrap .popular-menu-wrap .food-menu-item.style-two:not(:last-child) { padding-bottom: 30px; border-bottom: 2px dotted var(--border-color); } .grill-menu-wrap .popular-menu-wrap .food-menu-item.style-two .image { width: 80px; } .grill-menu-wrap .popular-menu-wrap .food-menu-item.style-two .content h5 { font-size: 22px; } @media only screen and (max-width: 375px) { .grill-menu-wrap .popular-menu-wrap .food-menu-item.style-two .content h5 { font-size: 20px; } .grill-menu-wrap .popular-menu-wrap .food-menu-item.style-two .content h5 .dots { margin-left: 15px; } } @media only screen and (max-width: 479px) { .grill-menu-wrap .popular-menu-wrap .food-menu-item.style-two { display: block; } .grill-menu-wrap .popular-menu-wrap .food-menu-item.style-two .image { margin-bottom: 15px; } } .grill-menu-wrap .popular-menu-wrap .vertical-text { height: 100%; color: white; padding: 5px; position: absolute; right: 100%; top: 0; font-size: 24px; 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-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); background: var(--primary-color); } @media only screen and (max-width: 991px) { .grill-menu-wrap .popular-menu-wrap .vertical-text { display: none; } } .grill-menu-wrap .popular-menu-wrap .vertical-text i { margin: 25px 0; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } /*******************************************************/ /**************** ## Call To Action Area ****************/ /*******************************************************/ .cta-content:before { content: ""; position: absolute; left: 0; top: 0; width: 50vw; height: 100%; background-color: var(--primary-color); /* background-image: url(../images/background/hero.jpg); */ background-repeat: no-repeat; background-size: cover; z-index: -1; } @media only screen and (max-width: 991px) { .cta-content:before { width: 100%; } } .cta-content .cta-badge { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 180px; height: 180px; background-repeat: no-repeat; background-size: cover; 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; text-align: center; } @media only screen and (max-width: 991px) { .cta-content .cta-badge { right: 5%; left: auto; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } } @media only screen and (max-width: 767px) { .cta-content .cta-badge { width: 130px; height: 130px; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } } @media only screen and (max-width: 375px) { .cta-content .cta-badge { width: 100px; height: 100px; } } .cta-content .cta-badge span { font-size: 35px; } @media only screen and (max-width: 767px) { .cta-content .cta-badge span { font-size: 25px; } } @media only screen and (max-width: 375px) { .cta-content .cta-badge span { font-size: 20px; } } .cta-content .theme-btn.style-two { border: 1px solid var(--secondary-color); } .cta-bg { position: absolute; right: 0; top: 0; width: 50vw; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } @media only screen and (max-width: 991px) { .cta-bg { display: none; } } /* CTA Area Two */ .cta-content-two { max-width: 380px; } .cta-two-image { position: relative; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; z-index: 1; } .cta-two-image .badge { max-width: 44%; position: absolute; right: 25px; top: -25px; } .cta-two-image:before { content: ""; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; border-radius: 50%; -webkit-filter: blur(35px); filter: blur(35px); background: var(--primary-color); } .cta-content-list { width: 350px; } @media only screen and (min-width: 1200px) { .cta-content-list { margin-left: auto; } } .cta-two-shapes .shape { z-index: -1; max-width: 15%; position: absolute; } .cta-two-shapes .shape.one { top: 10%; left: 3%; } .cta-two-shapes .shape.two { left: 3%; bottom: 10%; } .cta-two-shapes .shape.three { top: 10%; right: 3%; } .cta-two-shapes .shape.four { right: 3%; bottom: 10%; } /*******************************************************/ /****************** ## Products Area ******************/ /*******************************************************/ /* Pizza Products */ .product-item { text-align: center; margin-bottom: 30px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .product-item .image { position: relative; margin-bottom: 22px; min-height: 250px; 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; } .product-item .image .pizza-badge { position: absolute; left: 25px; top: 2px; width: 65px; height: 65px; background-image: url(../images/shapes/pizza-badge-shape.png); background-size: cover; background-repeat: no-repeat; border-radius: 50%; color: white; line-height: 65px; } .product-item .content .ratting { margin-bottom: 10px; } .product-item .content h5 { margin-bottom: 0; } @media only screen and (max-width: 767px) { .product-item .content h5 { font-size: 22px; } } .product-item .content .price { font-size: 20px; font-weight: 500; color: var(--primary-color); } .product-item .content .price del { color: var(--base-color); } .pizza-active .slick-dots { margin-top: 30px; } /* Dish Products */ .product-item-two { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; background: white; text-align: center; position: relative; margin-bottom: 30px; padding: 35px 38px 30px; border: 1px solid var(--border-color); } @media only screen and (max-width: 767px) { .product-item-two { padding-left: 20px; padding-right: 20px; } } .product-item-two .image { min-height: 180px; 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-bottom: 20px; } .product-item-two .image .pizza-badge { position: absolute; right: 20px; top: 20px; width: 65px; height: 65px; background-image: url(../images/shapes/pizza-badge-shape.png); background-size: cover; background-repeat: no-repeat; border-radius: 50%; color: white; line-height: 65px; } .product-item-two .content .ratting { margin-bottom: 10px; } .product-item-two .content h5 { margin-bottom: 0; } @media only screen and (max-width: 767px) { .product-item-two .content h5 { font-size: 22px; } } .product-item-two .content .price { font-size: 20px; font-weight: 500; color: var(--primary-color); } .product-item-two .content .price del { color: var(--base-color); } .product-item-two .theme-btn { 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.5s; -o-transition: 0.5s; transition: 0.5s; padding: 7px 30px; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .product-item-two:hover { background: var(--lighter-color); border-color: var(--lighter-color); } .product-item-two:hover .theme-btn { opacity: 1; } /* Shop Page */ .shop-shorter { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .shop-shorter .sort-text { font-size: 22px; } .shop-shorter .nice-select { border: none; padding-right: 70px; padding-top: 6px; padding-bottom: 6px; font-family: var(--base-font); background: var(--lighter-color); } .shop-shorter .nice-select:after { width: 9px; height: 9px; right: 30px; margin-top: -7px; } /* Product Details */ .product-details-content .price { display: block; font-size: 20px; font-weight: 600; color: var(--primary-color); } .product-details-content .section-title h2 { margin-bottom: 2px; } .product-details-content .ratting i { color: var(--primary-color); } .product-details-content .ratting i:first-child { margin-left: 0; } .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 h5 { margin-right: 25px; margin-bottom: 15px; } .product-details-content .add-to-cart input { font-size: 20px; max-width: 120px; padding: 10px 30px; margin-bottom: 15px; margin-right: 25px; border-color: var(--border-color); } .product-details-content .category-tags li { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 20px; margin-bottom: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-details-content .category-tags li h6 { margin-bottom: 0; min-width: 85px; } .product-details-content .category-tags li a { margin-left: 10px; } .product-details-content .category-tags li a:not(:last-child):after { content: ","; } .product-details-content .social-style-one { margin-left: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .product-details-content .social-style-one h5 { margin-bottom: 0; margin-right: 30px; } @media only screen and (max-width: 375px) { .product-details-content .social-style-one h5 { margin-right: 20px; } } .product-details-content .social-style-one a { border: none; } .product-details-content .social-style-one a:not(:hover) { background: var(--lighter-color); } /* Filtarable Food */ .product-filter-active .product-item-two { background: white; border-color: white; } /*******************************************************/ /****************** ## Features Area *******************/ /*******************************************************/ /* Featured Style */ .featured-item { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 25px 40px; border-radius: 10px; background: white; margin-bottom: 30px; border: 1px solid var(--lighter-color); -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } @media only screen and (min-width: 1200px) and (max-width: 1299px) { .featured-item { padding-left: 25px; padding-right: 25px; } } @media only screen and (max-width: 991px) { .featured-item { padding-left: 20px; padding-right: 20px; } } .featured-item .icon { -webkit-box-flex: 0; -ms-flex: none; flex: none; font-size: 60px; line-height: 1; margin-right: 35px; color: var(--primary-color); } @media only screen and (min-width: 1200px) and (max-width: 1299px) { .featured-item .icon { margin-right: 25px; } } @media only screen and (max-width: 991px) { .featured-item .icon { font-size: 50px; margin-right: 20px; } } @media only screen and (max-width: 991px) { .featured-item .content h4 { font-size: 24px; } } @media only screen and (max-width: 375px) { .featured-item .content h4 { font-size: 22px; } } .featured-item .content p { margin-bottom: 0; } .featured-item:hover { border-color: transparent; -webkit-box-shadow: 0px 10px 60px rgba(236, 61, 8, 0.1); box-shadow: 0px 10px 60px rgba(236, 61, 8, 0.1); } @media only screen and (max-width: 991px) { .features-five-wrap { max-width: 600px; } } .featured-item-two { display: -webkit-box; display: -ms-flexbox; display: flex; } .featured-item-two:not(:last-child) { padding-bottom: 40px; margin-bottom: 50px; border-bottom: 1px dashed white; } .featured-item-two .icon { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-right: 50px; font-size: 50px; color: black; width: 100px; height: 100px; background: var(--secondary-color); line-height: 100px; border-radius: 50%; text-align: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .featured-item-two .icon { width: 70px; height: 70px; font-size: 40px; line-height: 70px; margin-right: 20px; } } @media only screen and (max-width: 575px) { .featured-item-two .icon { width: 70px; height: 70px; font-size: 40px; line-height: 70px; margin-right: 20px; } } .featured-item-two .content h4 { color: white; } @media only screen and (max-width: 375px) { .featured-item-two .content h4 { font-size: 24px; } } .featured-item-two .content p { color: white; margin-bottom: 0; } .food-category-shape .shape { z-index: -1; max-width: 11%; position: absolute; } .food-category-shape .shape.one { top: 27%; left: 6%; } .food-category-shape .shape.two { top: 15%; right: 9%; } /* Features Style Two */ .feature-two-image { height: 100%; overflow: hidden; } .feature-two-image img { height: 100%; max-width: none; } @media only screen and (max-width: 991px) { .feature-two-image img { width: 100%; } } .feature-two-content { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 50px 70px; -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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid black; } @media only screen and (max-width: 575px) { .feature-two-content { padding-left: 50px; padding-right: 50px; } } @media only screen and (max-width: 479px) { .feature-two-content { padding-left: 25px; padding-right: 25px; } } .feature-two-content h3 { margin-top: -5px; margin-bottom: 12px; } .feature-two-content .theme-btn { font-size: 16px; padding: 7px 30px; } /*******************************************************/ /******************* ## Client Area *******************/ /*******************************************************/ .client-wrap { margin-top: -85px; padding: 50px 80px; background: white; -webkit-box-shadow: 0px 10px 60px rgba(200, 200, 200, 0.25); box-shadow: 0px 10px 60px rgba(200, 200, 200, 0.25); } @media only screen and (max-width: 991px) { .client-wrap { padding-left: 40px; padding-right: 40px; } } @media only screen and (max-width: 375px) { .client-wrap { padding-left: 20px; padding-right: 20px; } } .client-wrap-two { border-top: 1px solid var(--border-color); } .client-item { text-align: center; opacity: 0.4; } .client-item img { display: inline-block; } .client-item:hover { opacity: 1; } /*******************************************************/ /******************* ## Headline Text *******************/ /*******************************************************/ .marquee-inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .marquee-inner.left { -webkit-animation: marquee_left 20s linear infinite; animation: marquee_left 20s linear infinite; } .marquee-inner.right { -webkit-animation: marquee_right 20s linear infinite; animation: marquee_right 20s linear infinite; } /* Headline style */ .marquee-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; overflow: hidden; font-size: 130px; color: transparent; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; font-family: var(--heading-font); -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: rgba(14, 19, 23, 0.1); } @media only screen and (max-width: 1399px) { .marquee-wrap { font-size: 100px; } } @media only screen and (max-width: 991px) { .marquee-wrap { font-size: 80px; } } @media only screen and (max-width: 575px) { .marquee-wrap { font-size: 60px; } } .marquee-wrap .marquee-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 35px; margin-right: 35px; } @media only screen and (max-width: 1399px) { .marquee-wrap .marquee-item { margin-left: 15px; margin-right: 15px; } } @media only screen and (max-width: 575px) { .marquee-wrap .marquee-item { margin-left: 6px; margin-right: 6px; } } .marquee-wrap .marquee-item i { font-size: 0.35em; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -webkit-text-stroke-width: 2.5px; } .marquee-wrap .marquee-item i:hover { color: var(--primary-color); -webkit-text-stroke-color: var(--primary-color); } .marquee-wrap .marquee-item i:hover:before { content: "\f102"; } .marquee-wrap.style-two { opacity: 0.04; color: var(--heading-color); -webkit-text-stroke-width: 0; } @media only screen and (min-width: 1400px) { .marquee-wrap.style-two { font-size: 450px; } } .marquee-wrap.white-text { -webkit-text-stroke-color: rgba(255, 255, 255, 0.1); } .marquee-wrap.white-text .marquee-item i:not(:hover) { -webkit-text-stroke-color: rgba(255, 255, 255, 0.1); } /* Hero Shapes */ .headline-shapes .shape { z-index: 2; max-width: 7%; position: absolute; } .headline-shapes .shape.one { top: 80%; left: 8%; } .headline-shapes .shape.two { top: 75%; right: 10%; -webkit-filter: drop-shadow(0px 10px 60px rgba(236, 61, 8, 0.5)); filter: drop-shadow(0px 10px 60px rgba(236, 61, 8, 0.5)); } .headline-shapes .shape.three { right: 0; bottom: 0; max-width: 20%; } /*******************************************************/ /****************** ## Gallery Area ********************/ /*******************************************************/ .gallery-area:before { position: absolute; left: 0; bottom: 0; z-index: -1; content: ""; width: 100%; height: 40%; background: var(--lighter-color); } .gallery-item { position: relative; margin-bottom: 30px; } .gallery-item .gallery-image img { width: 100%; } .gallery-item .gallery-content { opacity: 0; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -ms-flex-wrap: wrap; flex-wrap: wrap; position: absolute; left: 50%; bottom: 50px; background: white; padding: 24px 30px 22px; width: calc(100% - 90px); -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); 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: 767px) { .gallery-item .gallery-content { width: calc(100% - 40px); } } .gallery-item .gallery-content h5 { margin-bottom: 0; } .gallery-item:hover .gallery-content { opacity: 1; bottom: 30px; } /* Galery Style Two */ .gallery-item-two { margin-bottom: 30px; } @media only screen and (max-width: 1199px) { .gallery-item-two img { width: 100%; } } @media only screen and (max-width: 1199px) { .gallery-order { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } } /* Gallery Style Three */ .gallery-item-three { margin-bottom: 60px; } .gallery-item-three img { width: 100%; margin-bottom: 30px; } .gallery-item-three h3 { margin-bottom: 0; } @media only screen and (min-width: 1200px) { .gallery-item-three h3 { font-size: 35px; } } /* Gallery Style Four */ .gallery-item-four { margin-bottom: 30px; } .gallery-item-four img { width: 100%; } /*******************************************************/ /****************** ## Services Area ********************/ /*******************************************************/ .service-item { background: white; margin-bottom: 30px; padding: 40px 30px 16px; } .service-item .icon { line-height: 1; font-size: 55px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; margin-bottom: 25px; color: var(--primary-color); } .service-item h4 { margin-bottom: 13px; } .service-item .wave { margin-top: 25px; margin-bottom: 30px; } .service-item.style-two { padding: 0; background: transparent; } .service-item.style-two .icon { font-size: 45px; margin-bottom: 5px; } .service-item.style-two h5 { font-size: 22px; } .service-item.style-three { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .service-item.style-three:hover { background: var(--secondary-color); } .service-item.style-three:hover .icon { color: var(--heading-color); } /*******************************************************/ /*************** ## Testimonials Area *****************/ /*******************************************************/ .testimonials-active { margin-left: -15px; margin-right: -15px; } .testimonials-active .testimonial-item { margin-left: 15px; margin-right: 15px; } .testimonials-active .slick-dots { margin-top: 35px; } .testimonial-item { background: white; margin-bottom: 30px; padding: 40px 40px 35px 45px; } @media only screen and (max-width: 375px) { .testimonial-item { padding-left: 25px; padding-right: 25px; } } .testimonial-item .quote { font-size: 75px; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin-bottom: 26px; color: var(--primary-color); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media only screen and (max-width: 375px) { .testimonial-item .text { font-size: 20px; } } .testimonial-item .author { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 28px; padding-top: 35px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid var(--border-color); } .testimonial-item .author img { max-width: 55px; border-radius: 50%; margin-right: 20px; } .testimonial-item .author h5 { line-height: 1; margin-top: 10px; margin-bottom: 0; } .testimonials-shapes .shape { z-index: -1; min-width: 5%; position: absolute; } .testimonials-shapes .shape.one { left: 5%; bottom: 15%; } .testimonials-shapes .shape.two { right: 5%; bottom: 20%; } .testimonials-shapes .shape.three { left: 5%; top: 13%; } .testimonials-shapes .shape.four { right: 8%; top: 16%; } .testimonials-shapes .shape.five { right: 28%; bottom: 0; } .testimonials-three .testimonials-shapes .shape { max-width: 10%; } @media(max-width:768px) { .testimonials-shapes .shape.one { opacity: 0.3; } .testimonials-shapes .shape.two { opacity: 0.3; } .testimonials-shapes .shape.three { opacity: 0.3; } .testimonials-shapes .shape.four { opacity: 0.3; } .testimonials-shapes .shape.five { opacity: 0.3; } } /* Testimonials Two */ .testimonials-two-content { max-width: 750px; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 1199px) { .testimonials-two-content { padding-left: 0; padding-right: 25px; } } @media only screen and (max-width: 991px) { .testimonials-two-content { padding-left: 25px; } } .testimonials-two-content .marquee-wrap.style-two { position: absolute; left: 0; top: -35px; } @media only screen and (max-width: 991px) { .testimonials-two-content .marquee-wrap.style-two { top: 2%; } } .testimonials-two-content .shape { position: absolute; right: 10%; bottom: 0; z-index: -1; max-width: 10%; } .testimonials-two-carousel .slick-dots { margin-top: 60px; } .testimonials-two-carousel .slick-dots li { background: var(--secondary-color); } .testimonial-two-item .quote i { line-height: 1; font-size: 88px; display: inline-block; color: var(--secondary-color); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .testimonial-two-item .text { font-size: 20px; max-width: 610px; margin-left: auto; margin-right: auto; line-height: 1.66; /* font-family: var(--heading-font); */ } @media only screen and (max-width: 479px) { .testimonial-two-item .text { font-size: 16px; } } .testimonial-two-item .author { display: block; margin-top: 20px; font-size: 24px !important; /* font-family: var(--heading-font); */ } @media only screen and (min-width: 480px) { .testimonial-two-item .author { font-size: 20px; } } @media only screen and (min-width: 992px) { .testimonial-two-item.style-two { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .testimonial-two-item.style-two .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 3%; } @media only screen and (max-width: 991px) { .testimonial-two-item.style-two .image { margin-bottom: 25px; } } .testimonial-two-item.style-two .image .quote { margin-right: -12%; border: 1px solid white; width: 185px; height: 185px; background: transparent; line-height: 185px; border-radius: 50%; text-align: center; } @media only screen and (max-width: 479px) { .testimonial-two-item.style-two .image .quote { width: 100px; height: 100px; margin-right: -6%; line-height: 100px; } .testimonial-two-item.style-two .image .quote i { font-size: 50px; } } .testimonial-two-item.style-two .image .quote i { color: white; line-height: 1.8; } .testimonial-two-item.style-two .image img { border-radius: 50%; } @media only screen and (max-width: 479px) { .testimonial-two-item.style-two .image img { width: 100px; height: 100px; } } .testimonial-two-item.style-two .content .icon { margin-bottom: 30px; } .testimonial-two-item.style-two .content .icon img { border-radius: 50%; } .testimonial-two-item.style-two .content .text { margin-left: 0; margin-bottom: 18px; } .testimonials-three-content .testimonial-two-item .image img, .testimonials-three-content .testimonial-two-item .image .quote { opacity: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transform: translate(50px); -ms-transform: translate(50px); transform: translate(50px); } .testimonials-three-content .testimonial-two-item .content { opacity: 0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s; -webkit-transform: translate(-50px); -ms-transform: translate(-50px); transform: translate(-50px); } .testimonials-three-content .testimonial-two-item.slick-active .content, .testimonials-three-content .testimonial-two-item.slick-active .image img, .testimonials-three-content .testimonial-two-item.slick-active .image .quote { opacity: 1; -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } .testimonials-three-content .testimonial-two-item.slick-active .image .quote { -webkit-transition-delay: 0.35s; -o-transition-delay: 0.35s; transition-delay: 0.35s; } /* Testimonials Five */ .testimonials-five-authors { height: 75px; max-width: 215px; margin-left: auto; margin-right: auto; } .testimonials-five-authors .slick-track { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .testimonial-five-author-item img { width: 55px; height: 55px; cursor: pointer; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; border-radius: 50%; } .testimonial-five-author-item.slick-center { margin-left: 15px; margin-right: 15px; } .testimonial-five-author-item.slick-center img { width: 75px; height: 75px; border: 3px solid var(--primary-color); } .testimonials-five-content .slick-dots { margin-top: 70px; } .testimonial-five-item { color: var(--heading-color); padding: 30px 40px; position: relative; background: white; line-height: 1.66; margin-top: 30px; font-size: 24px; } @media only screen and (max-width: 575px) { .testimonial-five-item { font-size: 20px; } } @media only screen and (max-width: 479px) { .testimonial-five-item { padding-left: 20px; padding-right: 20px; } } @media only screen and (max-width: 375px) { .testimonial-five-item { font-size: 16px; } } .testimonial-five-item:before { opacity: 0; content: ""; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); position: absolute; left: 50%; bottom: calc(100% - 30px); border-bottom: 30px solid white; border-left: 25px solid transparent; border-right: 25px solid transparent; } .testimonial-five-item .author { display: block; line-height: 1; margin-top: 25px; font-family: var(--heading-font); } .testimonial-five-item .designation { font-size: 0.6em; } .testimonial-five-item.slick-active:before { opacity: 1; bottom: 100%; } .testimonials-five .testimonials-shapes .shape { max-width: 10%; } .testimonials-five-shapes .shape { z-index: -1; position: absolute; } .testimonials-five-shapes .shape.left { top: 50%; left: -5%; max-width: 24%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .testimonials-five-shapes .shape.right { bottom: 0; right: -7%; max-width: 27%; } /* Testimonials Six */ .testimonials-six { margin-top: -170px; } .testimonials-six .slick-dots { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .testimonial-quote-badge { max-width: 350px; } .testimonial-quote-badge .testi-badge { text-align: right; margin-bottom: -33%; } .testimonial-quote-badge .testi-badge img { max-width: 55%; } .testimonial-quote-badge .quote { width: 285px; height: 285px; font-size: 150px; margin-right: 18%; line-height: 285px; text-align: center; border-radius: 50%; color: var(--secondary-color); border: 1px solid white; } @media only screen and (max-width: 375px) { .testimonial-quote-badge .quote { width: 222px; height: 222px; font-size: 100px; line-height: 222px; } } .testimonial-quote-badge .quote i { display: inline-block; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } /*******************************************************/ /****************** ## Booking Table ******************/ /*******************************************************/ .booking-table-wrap { padding: 60px 80px; } @media only screen and (max-width: 1199px) { .booking-table-wrap { padding-left: 50px; padding-right: 50px; } } @media only screen and (max-width: 479px) { .booking-table-wrap { padding-left: 20px; padding-right: 20px; } } .contact--number { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 210px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contact--number .icon { -webkit-box-flex: 0; -ms-flex: none; flex: none; color: white; margin-right: 15px; width: 50px; height: 50px; background: var(--primary-color); line-height: 50px; border-radius: 50%; text-align: center; } .contact--number .number { font-family: var(--heading-font); } .contact--number .number .title { color: white; display: block; font-size: 18px; } .contact--number .number>a { font-size: 27px; color: var(--secondary-color); } .booking-table-form { padding: 55px 50px 60px; background-size: cover; background-repeat: no-repeat; background-color: var(--secondary-color); margin-bottom: -110px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .booking-table-form { padding-left: 30px; padding-right: 30px; } } @media only screen and (max-width: 479px) { .booking-table-form { padding-left: 30px; padding-right: 30px; } } @media only screen and (max-width: 375px) { .booking-table-form { padding-left: 20px; padding-right: 20px; } } .booking-table-form p { margin-top: -10px; color: var(--heading-color); } @media only screen and (min-width: 376px) { .booking-table-form p { font-size: 18px; } } .booking-form label { font-size: 13px; position: absolute; right: 20px; top: 12px; color: var(--heading-color); } .booking-form input, .booking-form select, .booking-form textarea, .booking-form .nice-select, .booking-form .form-control { padding: 12px 20px; border-width: 2px; color: var(--heading-color); font-family: var(--base-font); } .booking-form input:hover, .booking-form select:hover, .booking-form textarea:hover, .booking-form .nice-select:hover, .booking-form .form-control:hover { border-color: white; } .booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus, .booking-form .nice-select:focus, .booking-form .form-control:focus { border-color: white; background-color: transparent; } .booking-form .nice-select { line-height: 24px; } .booking-form .nice-select .list { width: 100%; border-radius: 0; } .booking-form .nice-select:after { right: 20px; height: 9px; width: 8px; margin-top: -6px; border-color: var(--heading-color); } .booking-form .theme-btn { border: 1px solid var(--primary-color); } .booking-table-content.style-two .video-play { margin: 10px; position: relative; } .booking-table-content.style-two .video-play:before { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% + 20px); height: calc(100% + 20px); border: 1px solid white; border-radius: 50%; } @media only screen and (min-width: 768px) { .booking-table-content.style-two .video-play { width: 85px; height: 85px; font-size: 20px; line-height: 85px; } } .booking-table-content.style-two hr { opacity: 1; margin-bottom: 0; max-width: 200px; background: white; } .booking-table-content.style-three { max-width: 410px; } .booking-table-content.style-three .contact--number .number .title { color: var(--base-color); } .booking-table-content.style-three .contact--number .number>a { color: var(--heading-color); } /*******************************************************/ /****************** ## Cart Checkout ******************/ /*******************************************************/ /* Cart Page */ .shoping-table table, .shoping-cart-total table { width: 100%; } .shoping-table td, .shoping-table th, .shoping-cart-total td, .shoping-cart-total th { padding: 15px 8px; text-align: center; border: 1px solid var(--border-color); } .shoping-table th, .shoping-cart-total th { text-transform: capitalize; } .shoping-table td img, .shoping-cart-total td img { max-height: 60px; } .shoping-table td .title, .shoping-cart-total td .title { font-size: 18px; color: var(--heading-color); } .shoping-table td .price:before, .shoping-cart-total td .price:before { content: '$'; } .shoping-table td button, .shoping-cart-total td button { background: transparent; } @media only screen and (max-width: 767px) { .shoping-table thead { display: none; } .shoping-table tr { display: -ms-grid; display: grid; } .shoping-table tr:not(:last-child) { margin-bottom: 50px; } .shoping-table td:not(:last-child) { border-bottom: none; } } .quantity-input { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .quantity-input button { width: 45px; background: transparent; border: 1px solid var(--border-color); } .quantity-input button.quantity-down { letter-spacing: -3px; } .quantity-input input { width: 55px; padding: 5px 15px; border-radius: 0; text-align: center; background: transparent; border: 1px solid var(--border-color); } .discount-wrapper input { width: 200px; padding: 10px 25px; border: 1px solid var(--border-color); } /* Checkout Page */ .checkout-faqs .alert { padding: 20px 30px; margin-bottom: 25px; } @media only screen and (max-width: 375px) { .checkout-faqs .alert { padding-left: 20px; padding-right: 20px; } } .checkout-faqs .alert h6 { margin-bottom: 0; } .checkout-faqs .alert h6 a { padding: 0; color: var(--primary-color); background: transparent; } .checkout-faqs .alert form { padding: 20px 0 10px; } .checkout-faqs .alert form input, .checkout-faqs .alert form textarea, .checkout-faqs .alert form .nice-select { background: white; } .checkout-faqs .alert form .nice-select { padding: 12px 30px; border-radius: 15px; } .checkout-faqs .alert form .nice-select:not(:focus) { border-color: var(--lighter-color); } .checkout-faqs .alert form .nice-select:after { top: 30px; right: 30px; } .checkout-faqs .alert form .form-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; } .checkout-faqs .alert form .form-footer button { margin-right: 15px; } @media only screen and (max-width: 375px) { .checkout-faqs .alert form .form-footer button { margin-right: 8px; padding-left: 20px; padding-right: 20px; } } .checkout-faqs .alert form .form-footer label { line-height: 1.4; margin: 0 0 0 5px; } .checkout-faqs .checkout-form h5 { margin-bottom: 20px; } /*******************************************************/ /****************** ## Contact Forms *******************/ /*******************************************************/ .our-location iframe { height: 550px; } @media only screen and (max-width: 1199px) { .our-location iframe { height: 500px; } } @media only screen and (max-width: 767px) { .our-location iframe { height: 300px; } } /* Contact Form Validation */ .has-error .with-errors { color: red; margin-top: 5px; margin-bottom: -15px; } #msgSubmit { font-size: 20px; margin-bottom: 0; margin-top: 10px; } /* Contact Page */ .contact-info-item { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 410px; padding: 30px 40px; background: var(--lighter-color); } @media only screen and (max-width: 479px) { .contact-info-item { padding-left: 25px; padding-right: 25px; } } .contact-info-item:not(:last-child) { margin-bottom: 20px; } .contact-info-item .icon { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 70px; height: 70px; font-size: 28px; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; line-height: 70px; text-align: center; background: white; margin-right: 30px; color: var(--primary-color); } @media only screen and (max-width: 375px) { .contact-info-item .icon { width: 50px; font-size: 20px; margin-right: 20px; } } .contact-info-item .content .title { display: block; font-size: 18px; margin-top: -10px; margin-bottom: 5px; color: #fff; } .contact-info-item .content a { color: #fff; } .contact-info-item .content p { color: #fff; } .contact-info-item .content h6 { line-height: 1.43; margin-bottom: -10px; color: #ffffff; } @media only screen and (min-width: 480px) { .contact-info-item .content h6 { font-size: 22px; } } .contact-info-item:hover .icon { color: white; background: var(--primary-color); } .contact-page-form { padding: 55px 50px 50px; background: var(--lighter-color); border: 1px solid var(--border-color); } @media only screen and (max-width: 479px) { .contact-page-form { padding-left: 25px; padding-right: 25px; } } .contact-page-form h3 { margin-bottom: 5px; /* color:#fff; */ } /* .contact-page-form p{ color:#fff; } */ @media only screen and (min-width: 576px) { .contact-page-form h3 { font-size: 35px; } } .contact-page-form .form-control { font-family: var(--base-font); } /*******************************************************/ /****************** ## 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; } } @media only screen and (min-width: 992px) { .video-wrap { max-width: 85%; margin-left: auto; margin-right: auto; } } .video-wrap .video-play { z-index: 2; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media only screen and (min-width: 576px) { .video-wrap .video-play { width: 85px; height: 85px; font-size: 20px; line-height: 85px; } } .video-wrap:before { z-index: 1; opacity: 0.55; background: black; } /*******************************************************/ /******************** ## Blog Area ********************/ /*******************************************************/ .blog-meta { line-height: 1; -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; text-transform: uppercase; font-family: var(--heading-font); background: var(--primary-color); } .blog-meta li { font-size: 18px; margin: 3px 15px; } @media only screen and (max-width: 375px) { .blog-meta li { font-size: 16px; margin-left: 8px; margin-right: 8px; } } .blog-meta li a { color: white; } .blog-meta-two { line-height: 1; -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: start; -ms-flex-pack: start; justify-content: flex-start; text-transform: uppercase; font-family: var(--heading-font); } .blog-meta-two li { font-size: 18px; margin-right: 30px; margin-bottom: 5px; } @media only screen and (max-width: 375px) { .blog-meta-two li { font-size: 16px; margin-right: 16px; } } .blog-meta-two li i { margin-right: 5px; } .blog-meta-two li a:hover { color: var(--primary-color); } .blog-meta-two.style-two { font-family: var(--base-font); text-transform: capitalize; } .blog-meta-two.style-two li { font-size: 16px; } .blog-item { margin-bottom: 30px; } .blog-item .image { position: relative; margin-bottom: 35px; } .blog-item .image img { width: 100%; } .blog-item .blog-meta { position: absolute; left: 0; bottom: 0; width: 100%; padding-top: 15px; padding-bottom: 10px; } .blog-item .content h4 { margin-bottom: 15px; } @media only screen and (max-width: 375px) { .blog-item .content h4 { font-size: 22px; } } .blog-item.style-two .blog-meta-two { margin-bottom: 13px; } .blog-item.style-two .read-more { color: var(--base-color); text-decoration: none; } .blog-item.style-two .read-more:hover { color: var(--heading-color); } .blog-item.style-two .content h3 { max-width: 650px; } @media only screen and (min-width: 768px) { .blog-item.style-two .content h3 { font-size: 35px; } } @media only screen and (max-width: 479px) { .blog-item.style-two .content h3 { font-size: 25px; line-height: 1.4; } } .blog-item.style-two .content .theme-btn { color: white; font-size: 16px; padding: 7px 30px; background: var(--heading-color); } .blog-item.style-two .content .theme-btn i { font-size: 12px; } @media only screen and (min-width: 768px) { .blog-item.style-two.image-left { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media only screen and (min-width: 768px) { .blog-item.style-two.image-left .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 300px; margin-right: 50px; margin-bottom: 0; } } @media only screen and (min-width: 768px) { .blog-item.style-three { display: -webkit-box; display: -ms-flexbox; display: flex; } } .blog-item.style-three .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-bottom: 0; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } @media only screen and (min-width: 768px) { .blog-item.style-three .image { width: 46%; } } .blog-item.style-three .content { padding: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid var(--border-color); } @media only screen and (max-width: 479px) { .blog-item.style-three .content { padding-left: 25px; padding-right: 25px; } } .blog-item.style-three .content .blog-meta-two { margin-bottom: 15px; } .blog-item.style-three .content .blog-meta-two li a:hover { color: var(--secondary-color); } .blog-item.style-three .content p { margin-top: auto; margin-bottom: 25px; } .blog-item.style-three .content .read-more { line-height: 1.2; } .blog-item.style-three:hover .content { background: #f4f1ea; border-color: #f4f1ea; } .blog-item.style-three.black-bg { background: #0d0d0d; } .blog-item.style-three.black-bg .content { border: none; background: transparent; } .blog-item.style-three.black-bg .content .blog-meta-two li a { color: #acacac; } .blog-item.style-three.black-bg .content .blog-meta-two li a:hover { color: var(--secondary-color); } .blog-item.style-three.black-bg .content h4 a { color: white; } .blog-item.style-three.black-bg .content p { color: #acacac; } .blog-two-wrap { max-width: 750px; } .blog-item-two { margin-bottom: 30px; } .blog-item-two .image { position: relative; margin-bottom: 27px; } .blog-item-two .image img { width: 100%; } .blog-item-two .image .date { position: absolute; right: 10px; top: 10px; max-width: 55px; color: white; padding: 12px 13px; line-height: 1.2; border-radius: 7px; background: var(--primary-color); } .blog-item-two .content .tag { margin-bottom: 10px; display: inline-block; } .blog-item-two .content .tag i { color: var(--primary-color); margin-right: 6px; } .blog-item-two .content h4 { margin-bottom: 14px; } /* Blog Standard */ .blog-details-wrap, .blog-standard-wrap { max-width: 100%; } .blog-details-wrap .blog-item.style-two, .blog-standard-wrap .blog-item.style-two { margin-bottom: 50px; } /* Blog Details */ .blog-details-wrap h3 { margin-bottom: 20px; } .blog-details-wrap img { width: 100%; } blockquote { position: relative; padding: 30px 60px 40px; background: var(--lighter-color); } @media only screen and (max-width: 767px) { blockquote { font-size: 25px; line-height: 1.4; padding-left: 35px; padding-right: 15px; } } @media only screen and (max-width: 375px) { blockquote { font-size: 22px; line-height: 1.4; padding-right: 10px; } } blockquote .text span { line-height: 1; font-size: 1.7em; } blockquote .blockquote-footer { display: block; margin-bottom: 0; margin-top: 26px; font-size: 0.7em; font-family: var(--base-font); } blockquote .blockquote-footer:before { content: "———"; margin-right: 20px; 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 { margin-top: 10px; margin-right: 25px; } .tag-share .item .tags a:not(:last-child):after { content: ","; } .tag-share .item .social-style-one a:not(:hover) { background: var(--lighter-color); } @media only screen and (max-width: 375px) { .tag-share .item .social-style-one a { width: 35px; height: 35px; line-height: 35px; } } /* Next Prev Blog */ .next-prev-blog { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .next-prev-blog .item { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 322px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; } .next-prev-blog .item .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 80px; margin-right: 30px; } .next-prev-blog .item h6 { font-size: 18px; margin-bottom: 0; line-height: 1.5; } /* Comments */ .comment-body { margin-bottom: 35px; } @media only screen and (min-width: 480px) { .comment-body { display: -webkit-box; display: -ms-flexbox; display: flex; } } .comment-body .author-thumb { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 80px; margin-right: 40px; margin-bottom: 20px; } @media only screen and (max-width: 575px) { .comment-body .author-thumb { margin-right: 25px; } } .comment-body .author-thumb img { border-radius: 50%; } .comment-body .content .comment-header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 2px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .comment-body .content .comment-header li { margin-bottom: 5px; } .comment-body .content .comment-header li:not(:last-child) { margin-right: 15px; } .comment-body .content .comment-header li h6 { margin-bottom: 0; } @media only screen and (min-width: 576px) { .comment-body .content .comment-header li h6 { font-size: 22px; } } .comment-body .content p { margin-bottom: 5px; } .comment-body .content .read-more { color: var(--base-color); text-decoration: none; } .comment-body.comment-child { margin-left: 60px; } @media only screen and (max-width: 767px) { .comment-body.comment-child { margin-left: 30px; } } @media only screen and (max-width: 375px) { .comment-body.comment-child { margin-left: 20px; } } @media only screen and (min-width: 768px) { .comment-title { font-size: 35px; } } .comments.rattings .comment-body { margin-bottom: 30px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); } .comments.rattings .comment-body .author-thumb { max-width: 135px; margin-right: 30px; } .comments.rattings .comment-body .content .ratting { margin-bottom: 12px; } .comments.rattings .comment-body .content .ratting i { margin: 0 8px 0 0; color: var(--primary-color); } .admin-comment .comment-body { max-width: none; margin-bottom: 0; padding: 30px 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 767px) { .admin-comment .comment-body { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 1200px) { .admin-comment .comment-body .author-thumb { max-width: 160px; } } @media only screen and (min-width: 576px) { .admin-comment .comment-body .author-thumb { margin-bottom: 0; margin-right: 40px; } } .admin-comment .comment-body .content h4 { margin-bottom: 0; } .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 */ @media only screen and (min-width: 992px) { .review-form .form-group, .comment-form .form-group { margin-bottom: 30px; } } .review-form .form-control, .comment-form .form-control { font-size: 16px; font-weight: 400; font-family: var(--base-font); background: var(--lighter-color); border-color: var(--lighter-color); } .review-form .form-control:focus, .comment-form .form-control:focus { border-color: var(--heading-color); } .review-form .ratting b, .comment-form .ratting b { margin-right: 20px; } .review-form .ratting i, .comment-form .ratting i { color: var(--base-color); } /*******************************************************/ /******************** ## FAQs Area ********************/ /*******************************************************/ .accordion-item { border: none; border-radius: 0; background: var(--lighter-color); } .accordion-item:first-of-type { border-top-left-radius: 0; border-top-right-radius: 0; } .accordion-item:first-of-type .accordion-button { border-top-left-radius: 0; border-top-right-radius: 0; } .accordion-item:last-of-type { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .accordion-item:last-of-type .accordion-button { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .accordion-item:not(:last-child) { margin-bottom: 10px; } .accordion-item .accordion-button { border: none; font-size: 20px; -webkit-box-shadow: none; box-shadow: none; color: var(--heading-color); -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 15px 30px 12px; background: transparent; } @media only screen and (max-width: 479px) { .accordion-item .accordion-button { font-size: 16px; padding: 12px 20px; } } .accordion-item .accordion-button:after { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: auto; height: auto; margin-top: -2px; content: "\f107"; text-align: center; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); background: transparent; font-family: "Font Awesome 5 Pro"; } .accordion-item .accordion-button.collapsed:after { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .accordion-item .accordion-body { padding: 20px 30px; border-top: 1px solid var(--border-color); } @media only screen and (max-width: 479px) { .accordion-item .accordion-body { font-size: 16px; padding-left: 20px; padding-right: 20px; } } .accordion-item .accordion-body p:last-child { margin-bottom: 0; } /*******************************************************/ /******************** ## Chefs Area ********************/ /*******************************************************/ .chefs-item { margin-bottom: 60px; } .chefs-item .image { margin-bottom: 26px; } .chefs-item .image img { width: 100%; } .chefs-item .description { position: relative; padding-right: 50px; } .chefs-item .description h5 { padding-top: 3px; margin-bottom: 0; line-height: 1.2; } .chefs-item .description .more-btn { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /*******************************************************/ /******************* ## Awards Area *******************/ /*******************************************************/ .award-item { -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; text-align: center; margin: 0 -1px -1px 0; padding: 60px 30px 50px; border: 1px solid var(--border-color); } .award-item img { margin-bottom: 33px; } .award-item h5 { line-height: 1.4; margin-bottom: 0; } .award-item:hover { border-color: white; -webkit-box-shadow: 0px 10px 60px rgba(204, 204, 204, 0.25); box-shadow: 0px 10px 60px rgba(204, 204, 204, 0.25); } /*******************************************************/ /****************** ## History Area ********************/ /*******************************************************/ .history-wrapper { padding-top: 80px; max-width: 1070px; margin-left: auto; margin-right: auto; position: relative; } .history-wrapper:before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #f4f1ea; } @media only screen and (max-width: 991px) { .history-wrapper:before { left: 0; } } .history-wrapper:after { color: white; position: absolute; left: 50%; bottom: 0; content: "\f107"; font-weight: 300; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); width: 20px; height: 20px; background: var(--primary-color); line-height: 20px; border-radius: 50%; text-align: center; font-family: "Font Awesome 5 Pro"; } @media only screen and (max-width: 991px) { .history-wrapper:after { left: 0; } } .history-wrapper>.row:before { content: ""; width: 15px; height: 15px; position: absolute; left: 50%; top: 0; border-radius: 50%; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); background: var(--primary-color); } @media only screen and (max-width: 991px) { .history-wrapper>.row:before { left: 0; } } .history-item-wrap { position: relative; margin-bottom: 100px; } @media only screen and (max-width: 991px) { .history-item-wrap { padding-left: 50px; } } @media only screen and (max-width: 575px) { .history-item-wrap { padding-left: 30px; } } .history-item-wrap:before { position: absolute; right: 0; top: 0; content: ""; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; border-right: 20px solid #f4f1ea; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } @media only screen and (max-width: 991px) { .history-item-wrap:before { left: 0; border-right-color: transparent; border-left: 20px solid #f4f1ea; } } .history-item-wrap:hover:before { border-right-color: var(--primary-color); } @media only screen and (max-width: 991px) { .history-item-wrap:hover:before { border-left-color: var(--primary-color); border-right-color: transparent; } } @media only screen and (min-width: 992px) { .history-item-wrap.history-right { margin-top: 150px; } } .history-item-wrap.history-right:before { left: 0; border-right-color: transparent; border-left: 20px solid #f4f1ea; } .history-item-wrap.history-right .history-item { margin-left: auto; } .history-item-wrap.history-right:hover:before { border-left-color: var(--primary-color); } .history-item { max-width: 410px; } .history-item .image { margin-bottom: 35px; } .history-item .content .year { line-height: 1; font-size: 48px; display: block; margin-bottom: 10px; color: var(--primary-color); font-family: var(--heading-font); } /*******************************************************/ /****************** ## Instagram Area ******************/ /*******************************************************/ .instagram-item img { width: 100%; } .instagram-item:before { position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; background: #000000ba; opacity: 0; visibility: hidden; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .instagram-item a { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: white; font-size: 50px; opacity: 0; visibility: hidden; } .instagram-item:hover:before, .instagram-item:hover a { opacity: 0.8; visibility: visible; } /*******************************************************/ /***************** ## 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: 12px 25px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid var(--border-color); } .widget-search form input { padding: 0; border: none; font-family: var(--base-font); background: transparent; } .widget-search form button { -webkit-box-flex: 0; -ms-flex: none; flex: none; background: transparent; } .widget-category ul li { list-style: disc; list-style-position: inside; } .widget-category ul li:not(:last-child) { margin-bottom: 15px; } .widget-category ul li a span { color: var(--primary-color); display: inline-block; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .price-filter-wrap .price { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 15px; -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: 3px; border: none; cursor: pointer; background: rgba(var(--primary-rgb), 0.1); } .ui-widget-header { background: var(--primary-color); } .ui-slider .ui-slider-handle { width: 10px; height: 10px; top: -3px; border: none; cursor: e-resize; border-radius: 50%; background: var(--primary-color); } .widget-products ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .widget-products ul li:not(:last-child) { margin-bottom: 20px; } .widget-products ul li .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 80px; margin-right: 25px; } .widget-products ul li .content { line-height: 1; } .widget-products ul li .content .ratting { margin-bottom: 10px; } .widget-products ul li .content .ratting i { font-size: 11px; margin: 0 8px 0 0; color: var(--primary-color); } .widget-products ul li .content h6 { font-size: 18px; margin-bottom: 10px; } .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: 0 20px; font-size: 14px; margin: 0 10px 10px 0; border: 1px solid var(--border-color); } .tag-coulds a:hover { color: white; background: var(--primary-color); border-color: var(--primary-color); } .widget-banner .category-banner-item { padding: 35px 30px; } .widget-banner .category-banner-item:before { display: none; } @media only screen and (min-width: 480px) { .widget-banner .category-banner-item h3 { font-size: 45px; } } .widget-banner .category-banner-item .theme-btn { font-size: 16px; padding: 7px 30px; } .widget-recent-news>ul>li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .widget-recent-news>ul>li:not(:last-child) { margin-bottom: 12px; } .widget-recent-news>ul>li .image { -webkit-box-flex: 0; -ms-flex: none; flex: none; max-width: 80px; margin-right: 30px; } @media only screen and (max-width: 375px) { .widget-recent-news>ul>li .image { margin-right: 15px; } } .widget-recent-news>ul>li .content .date { font-size: 14px; } .widget-recent-news>ul>li .content h6 { font-size: 18px; line-height: 1.45; margin-bottom: 5px; } @media only screen and (max-width: 375px) { .widget-recent-news>ul>li .content h6 { font-size: 16px; } } /*******************************************************/ /******************* ## Main Footer *******************/ /*******************************************************/ .footer-widget { margin-bottom: 50px; } .footer-widget p { color: white; } .footer-title { margin-bottom: 20px; } .footer-title h5 { color: white; } @media only screen and (min-width: 1200px) { .footer-links { max-width: 340px; margin-left: auto; } } .footer-links ul li { color: white; } .footer-links ul li:not(:last-child) { margin-bottom: 7px; } .footer-links ul li a { color: white; } .footer-links ul li a:hover { color: var(--secondary-color); text-decoration: underline; } .footer-links ul.two-column { 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; } .footer-links ul.two-column li { width: 50%; } .footer-contact ul li { color: white; } .footer-contact ul li:not(:last-child) { margin-bottom: 15px; } .footer-contact ul li a { color: white; } .footer-contact ul li a:hover { color: var(--secondary-color); } .opening-hour ul li { color: white; } .opening-hour ul li span { color: var(--secondary-color); } .opening-hour .any-question h5 { color: white; margin-bottom: 15px; } .opening-hour .any-question .theme-btn { font-size: 16px; padding: 7px 30px; } .newsletter-form { max-width: 630px; margin-left: auto; margin-right: auto; padding: 10px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; background: #fff; } .newsletter-form label { color: var(--primary-color); font-size: 18px; position: absolute; left: 30px; top: 21px; } .newsletter-form input { border: 0; color: #9b9b9b; font-size: 18px; padding: 11px 10px 11px 50px; } .newsletter-form input::-webkit-input-placeholder { color: #9b9b9b; } .newsletter-form input:-ms-input-placeholder { color: #9b9b9b; } .newsletter-form input::-ms-input-placeholder { color: #9b9b9b; } .newsletter-form input::placeholder { color: #9b9b9b; } @media only screen and (max-width: 375px) { .newsletter-form .theme-btn i { display: none; } } .newsletter-form.style-two { background: var(--lighter-color); margin-left: 0; } .newsletter-form.style-two input { background-color: transparent; } /* Newsleter HomeFive */ .newsletter-wrap { padding: 80px 70px 60px; border: 2px dashed rgba(255, 255, 255, 0.7); } @media only screen and (max-width: 767px) { .newsletter-wrap { padding: 40px 30px 20px; } } @media only screen and (max-width: 479px) { .newsletter-wrap { padding-left: 20px; padding-right: 20px; } } @media only screen and (max-width: 375px) { .newsletter-wrap { padding-left: 15px; padding-right: 15px; } } .newsletter-wrap .section-title { max-width: 580px; } .newsletter-wrap .newsletter-form-wrap h6 { color: white; } .newsletter-wrap .newsletter-form-wrap .check-field label { color: #989898; } @media only screen and (max-width: 375px) { .newsletter-wrap .newsletter-form-wrap .check-field label { font-size: 13px; } } @media only screen and (max-width: 375px) { .newsletter-wrap .newsletter-form-wrap .newsletter-form label { top: 15px; left: 15px; } .newsletter-wrap .newsletter-form-wrap .newsletter-form input { padding: 5px 5px 5px 30px; } .newsletter-wrap .newsletter-form-wrap .newsletter-form button { padding: 5px 15px; } } @media only screen and (min-width: 768px) and (max-width: 1199px) { .newsletter-area .section-title h2 { font-size: 45px; } } /* Newsletter Shapes */ .newsletter-shapes .shape { z-index: 2; max-width: 17%; position: absolute; right: 0; bottom: 0; } /* Footer Bottom */ .footer-bottom { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-bottom .copyright-text { color: white; } .footer-bottom .copyright-text a { color: var(--secondary-color); } .footer-bottom .scroll-top { position: absolute; top: -50px; /* left: calc(50% - 40px); */ right: 50px; } @media only screen and (max-width: 991px) { .footer-bottom .scroll-top { top: -40px; left: calc(50% - 30px); } } .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; } .footer-bottom-nav li a { color: white; } /* Footer Shapes */ .footer-shapes .shape { z-index: -1; position: absolute; } .footer-shapes .shape.one { left: 5%; bottom: 15%; max-width: 5%; -webkit-filter: drop-shadow(0px 10px 30px rgba(236, 61, 8, 0.5)); filter: drop-shadow(0px 10px 30px rgba(236, 61, 8, 0.5)); } .footer-shapes .shape.two { top: 10%; right: 5%; max-width: 7%; -webkit-filter: drop-shadow(0px 10px 60px rgba(236, 61, 8, 0.5)); filter: drop-shadow(0px 10px 60px rgba(236, 61, 8, 0.5)); } .footer-shapes .shape.three { left: 0; top: 0; max-width: 20%; } /* Footer Two */ .main-footer.footer-two .footer-widget { max-width: 236px; } .main-footer.footer-two .footer-widget.footer-contact ul li { margin-bottom: 0; } .main-footer.footer-two .scroll-top { right: 0; left: auto; top: -65px; color: var(--heading-color); background-image: url(../images/shapes/scroll-top-yellow-bg.png); } /* hero banner */ .hero-section { height: 100vh; } .slick-prev, .slick-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: #222222; color: #fff; display: flex !important; align-items: center; justify-content: center; border-radius: 50%; z-index: 10; } .slick-prev { left: -3%; top: 40%; } .slick-next { right: -3% !important; top: 40% } .about-biryani-category-1 { margin-bottom: 0px; } /* Default styles (desktop) */ .custom-prev-arrow { left: -40px !important; } .custom-next-arrow { right: -40px !important; } @media (max-width: 1200px) { .custom-next-arrow { right: 0px !important; } } /* For screen widths 1024px and below */ @media (max-width: 1024px) { .custom-prev-arrow { left: -20px !important; } .custom-next-arrow { right: -20px !important; } } @media (max-width: 992px) { .custom-prev-arrow { left: -10px !important; } .custom-next-arrow { right: -10px !important; } } @media (max-width: 500px) { .custom-prev-arrow { left: 0px !important; } .custom-next-arrow { right: 0px !important; } } @media(max-width:768px) { .about-biryani-category-1 { margin-bottom: 20px; } } @media (max-width: 320px) { .slick-arrow { right: 87%; } .food-menu-tab .nav-link { padding-top: 12px; padding-bottom: 8px; padding-left: 7px; padding-right: 8px; } .food-menu-tab .nav-link span { margin-top: 0; font-size: 14px; } }