/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Utility # Cards # Common # Form # Navigations # Animations # Mobile Nav # Search Popup # Page Header # Google Map # Client Carousel --------------------------------------------------------------*/ :root { --solinom-font: "Plus Jakarta Sans", sans-serif; --solinom-heading-font: "Plus Jakarta Sans", sans-serif; --solinom-special-font: "DM Sans", sans-serif; --solinom-text: #101D22; --solinom-text-rgb: 16, 29, 34; --solinom-text-dark: #15262C; --solinom-text-dark-rgb: 21, 38, 44; --solinom-text-gray: #7D8B90; --solinom-text-gray-rgb: 125, 139, 144; --solinom-base: #CBA36B; --solinom-base-rgb: 203, 163, 107; --solinom-gray: #1C2F36; --solinom-gray-rgb: 28, 47, 54; --solinom-gray2: #283E46; --solinom-gray2-rgb: 40, 62, 70; --solinom-white: #fff; --solinom-white-rgb: 255, 255, 255; --solinom-black: #000; --solinom-black-rgb: 0, 0, 0; --solinom-border-color: #FAF6F0; --solinom-border-color-rgb: 250, 246, 240; --solinom-letter-space: 0.1em; --solinom-letter-space-xl: 0.2em; --solinom-black: #1c1a1d; --solinom-black-rgb: 28, 26, 29; --solinom-black2: #141215; --solinom-black2-rgb: 20, 18, 21; } /*-------------------------------------------------------------- # Utility --------------------------------------------------------------*/ .mt-20 { margin-top: 20px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .mt-80 { margin-top: 80px; } .mt-120 { margin-top: 120px; } .mt--60 { margin-top: -60px; } .mt--120 { margin-top: -120px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-80 { margin-bottom: 80px; } .mb-120 { margin-bottom: 120px; } .mb--60 { margin-bottom: -60px; } .mb--120 { margin-bottom: -120px; } .pt-20 { padding-top: 20px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-80 { padding-top: 80px; } .pt-100 { padding-top: 100px; } .pt-110 { padding-top: 110px; } .pt-115 { padding-top: 115px; } .pt-120 { padding-top: 120px; } .pt-142 { padding-top: 142px; } .pb-20 { padding-bottom: 20px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-80 { padding-bottom: 80px; } .pb-90 { padding-bottom: 90px; } .pb-100 { padding-bottom: 100px; } .pb-110 { padding-bottom: 110px; } .pb-115 { padding-bottom: 115px; } .pb-120 { padding-bottom: 120px; } .pl-5 { padding-right: 5px; } .pl-10 { padding-right: 10px; } .pl-15 { padding-right: 15px; } .pl-20 { padding-right: 20px; } .pl-30 { padding-right: 30px; } .pr-5 { padding-left: 5px; } .pr-10 { padding-left: 10px; } .pr-15 { padding-left: 15px; } .pr-20 { padding-left: 20px; } .pr-30 { padding-left: 30px; } .solinom-btn { display: inline-block; vertical-align: middle; -webkit-appearance: none; border: none; outline: none !important; background-color: var(--solinom-gray, #1C2F36); color: #fff; font-size: 16px; font-weight: 600; font-family: var(--solinom-font, "Plus Jakarta Sans", sans-serif); padding: 11px 30px; transition: 500ms; text-transform: uppercase; overflow: hidden; z-index: 2; position: relative; background-color: var(--solinom-gray, #1C2F36); color: #fff; position: relative; overflow: hidden; text-align: center; } .solinom-btn:hover { color: var(--solinom-gray, #1C2F36); background-color: #fff; } .solinom-btn::after { content: ""; position: absolute; height: 0%; right: 50%; top: 50%; width: 150%; transition: all 0.3s ease; z-index: -1; background: var(--solinom-base, #CBA36B); transform: translateX(50%) translateY(-50%) rotate(25deg); } .solinom-btn:hover { color: var(--solinom-gray, #1C2F36); } .solinom-btn:hover::after { height: 450%; transition: all 1s ease 0s; } .solinom-btn--base { background: var(--solinom-base, #CBA36B); } .solinom-btn--base::after { background: var(--solinom-gray, #1C2F36); } .solinom-btn--base:hover { color: var(--solinom-white, #fff); } .solinom-btn--base:hover::after { height: 450%; transition: all 1s ease 0s; } /*-------------------------------------------------------------- # Common --------------------------------------------------------------*/ body { font-family: var(--solinom-font, "Plus Jakarta Sans", sans-serif); color: var(--solinom-text, #101D22); font-size: 16px; line-height: 2.125; font-weight: 500; } body.locked { overflow: hidden; } a { color: var(--solinom-base, #CBA36B); transition: all 400ms ease; } a, a:hover, a:focus, a:visited { text-decoration: none; } ::placeholder { color: inherit; opacity: 1; } h1, h2, h3, h4, h5, h6 { font-family: var(--solinom-heading-font, "Plus Jakarta Sans", sans-serif); color: var(--solinom-text, #101D22); } @media (max-width: 575px) { h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { display: none; } } p { color: var(--solinom-text-gray, #7D8B90); } @media (max-width: 575px) { p br { display: none; } } ::placeholder { color: inherit; opacity: 1; } .background-base { background-color: var(--solinom-base, #CBA36B); } .background-gray { background-color: var(--solinom-gray, #1C2F36); } .background-black { background-color: var(--solinom-black, #000); } .background-black-2 { background-color: var(--solinom-black2, #141215); } .solinom-text-dark { color: var(--solinom-text-dark, #15262C); } .page-wrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; } .container-fluid, .container { padding-right: 15px; padding-left: 15px; } @media (min-width: 1200px) { .container { max-width: 1200px; } } /*******Row Gutter Style*********/ .row { --bs-gutter-x: 30px; } .gutter-y-10 { --bs-gutter-y: 10px; } .gutter-y-15 { --bs-gutter-y: 15px; } .gutter-y-20 { --bs-gutter-y: 20px; } .gutter-x-20 { --bs-gutter-x: 20px; } .gutter-y-30 { --bs-gutter-y: 30px; } .gutter-y-60 { --bs-gutter-y: 60px; } .gutter-y-40 { --bs-gutter-y: 40px; } .tabs-box .tabs-content .tab:not(.active-tab) { display: none; } .bootstrap-select .dropdown-menu { padding-top: 0; padding-bottom: 0; border-radius: 0; } .bootstrap-select .dropdown-item.active, .bootstrap-select .dropdown-item:active { background-color: var(--solinom-base, #CBA36B); } .tns-outer .tns-controls { display: flex; justify-content: center; align-items: center; margin-top: 40px; } .tns-outer .tns-controls button { width: 45px; height: 45px; border: 2px solid #f4f4f4; outline: none; display: flex; justify-content: center; align-items: center; color: var(--solinom-text, #101D22); border-radius: 50%; margin-right: 5px; margin-left: 5px; } /*******Blog Title Style*********/ .block-title { margin-top: -8px; margin-bottom: 50px; } .block-title__decor { width: 21px; height: 14px; background-image: url(../images/shapes/leaf-1-1.png); background-repeat: no-repeat; background-position: top center; display: inline-block; line-height: 1; margin-bottom: -5px; position: relative; top: -7px; } .block-title p { margin: 0; color: var(--solinom-text, #101D22); font-size: 16px; line-height: 1; margin-bottom: 7px; } @media (min-width: 768px) { .block-title p { font-size: 18px; } } @media (min-width: 992px) { .block-title p { font-size: 20px; } } .block-title h3 { margin: 0; font-size: 35px; color: var(--solinom-black, #000); font-family: var(--solinom-special-font, "DM Sans", sans-serif); } @media (min-width: 768px) { .block-title h3 { font-size: 42px; } } @media (min-width: 992px) { .block-title h3 { font-size: 50px; } } .ul-list-one { margin-bottom: 0; } .ul-list-one li { position: relative; padding-right: 45px; font-size: 16px; font-weight: 500; color: var(--solinom-black, #000); } @media (min-width: 481px) { .ul-list-one li { font-size: 20px; } } .ul-list-one li::before { content: "\e907"; color: var(--solinom-base, #CBA36B); font-size: 26px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-family: "azino-icon"; } .preloader { position: fixed; background-color: var(--solinom-black, #000); background-position: center center; background-repeat: no-repeat; top: 0; right: 0; left: 0; bottom: 0; z-index: 9991; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; text-align: center; } .preloader__image { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-repeat: no-repeat; background-position: center center; background-size: 60px auto; width: 100%; height: 100%; } /* scroll to top */ .scroll-to-top { display: flex; align-items: center; width: auto; height: 35px; background: transparent; position: fixed; bottom: 60px; left: -12px; z-index: 99; text-align: center; opacity: 0; visibility: hidden; transform: rotate(90deg); cursor: pointer; transition: all 0.2s ease; } .scroll-to-top__text { display: inline; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-left: 8px; } .scroll-to-top__wrapper { display: inline-block; width: 30px; height: 4px; background-color: var(--solinom-base, #CBA36B); position: relative; overflow: hidden; } .scroll-to-top__inner { position: absolute; right: 0; top: 0; width: 100%; height: 100%; background-color: var(--solinom-black, #000); } .scroll-to-top.show { opacity: 1; visibility: visible; bottom: 70px; } /* post paginations */ .post-pagination { margin: 0; padding: 0; list-style: none; margin-top: 50px; display: flex; align-items: center; flex-wrap: wrap; gap: 11px; } .post-pagination li.active a { background: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); border: 1px solid var(--solinom-base, #CBA36B); } .post-pagination li.active a i { color: var(--solinom-white, #fff); } .post-pagination a { width: 50px; height: 50px; background-color: transparent; color: var(--solinom-text, #101D22); text-transform: capitalize; text-align: center; border: 1px solid transparent; transition: all 400ms ease; font-style: normal; font-weight: 700; font-size: 20px; line-height: 100%; display: flex; justify-content: center; align-items: center; border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .post-pagination a.active, .post-pagination a:hover { background: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); border: 1px solid var(--solinom-base, #CBA36B); } .post-pagination a.active i, .post-pagination a:hover i { color: var(--solinom-white, #fff); } .post-pagination a i { line-height: 1; font-size: 14px; color: var(--solinom-base, #CBA36B); } /*******Basic Owl Style*********/ .solinom-owl__carousel--with-shadow .owl-stage-outer { overflow: visible; } .solinom-owl__carousel--with-shadow .owl-item { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; } .solinom-owl__carousel--with-shadow .owl-item.active { opacity: 1; visibility: visible; } .solinom-owl__carousel--basic-nav.owl-carousel .owl-nav { display: flex; justify-content: center; gap: 20px; margin-top: 60px; } .solinom-owl__carousel--basic-nav.owl-carousel .owl-nav button { border: none; outline: none; border-radius: 50%; margin: 0; padding: 0; } .solinom-owl__carousel--basic-nav.owl-carousel .owl-nav button span { border: none; outline: none; width: 50px; height: 50px; background-color: var(--solinom-text, #101D22); display: flex; justify-content: center; align-items: center; color: var(--solinom-base, #CBA36B); border-radius: 50%; font-size: 14px; transition: all 500ms ease; } .solinom-owl__carousel--basic-nav.owl-carousel .owl-nav button span:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .solinom-owl__carousel--basic-nav.owl-carousel .owl-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 60px; } .solinom-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot span { background-color: var(--solinom-text, #101D22); border: 2px solid var(--solinom-base, #CBA36B); box-shadow: 0 0 1px rgba(var(--solinom-black-rgb, 0, 0, 0), 1); margin: 0; } .solinom-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot:hover span, .solinom-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot.active span { background-color: var(--solinom-text, #101D22); border: 2px solid var(--solinom-base, #CBA36B); box-shadow: 0 0 1px rgba(var(--solinom-black-rgb, 0, 0, 0), 1); } .solinom-owl__carousel--basic-nav.owl-carousel .owl-nav.disabled + .owl-dots { margin-top: 60px; } /*******Section Title Style*********/ .sec-title { padding-bottom: 50px; } @media (max-width: 991px) { .sec-title { padding-bottom: 40px; } } @media (max-width: 767px) { .sec-title { padding-bottom: 35px; } } @media (max-width: 575px) { .sec-title { padding-bottom: 30px; } } .sec-title__img { display: inline-flex; margin-bottom: 15px; } .sec-title__tagline { margin: 0; color: var(--solinom-base, #CBA36B); font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; letter-spacing: 0.1em; text-transform: uppercase; } .sec-title__title { margin: 0; font-style: normal; font-weight: 600; font-size: 50px; line-height: 120%; color: var(--solinom-text, #101D22); } @media (max-width: 991px) { .sec-title__title { line-height: 120%; } } @media (max-width: 767px) { .sec-title__title { font-size: 40px; } } @media (max-width: 575px) { .sec-title__title { font-size: 30px; } } .sec-title--two .sec-title__title { color: var(--solinom-white, #fff); } /*******UI Datepicker Style*********/ .ui-datepicker .ui-datepicker-header { background-image: none; background-color: var(--solinom-gray, #1C2F36); color: var(--solinom-white, #fff); font-family: var(--solinom-font, "Plus Jakarta Sans", sans-serif); } .ui-datepicker-calendar th span { font-family: var(--solinom-font, "Plus Jakarta Sans", sans-serif); } .ui-datepicker-calendar td { background-color: var(--solinom-gray, #1C2F36); background-image: none; font-family: var(--solinom-font, "Plus Jakarta Sans", sans-serif); color: var(--solinom-text, #101D22); } .ui-datepicker-calendar td a { border-color: var(--solinom-border-color, #FAF6F0); background-color: var(--solinom-gray, #1C2F36); background-image: none; } .ui-datepicker-calendar .ui-state-default, .ui-datepicker-calendar .ui-widget-content .ui-state-default, .ui-datepicker-calendar .ui-widget-header .ui-state-default { border-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); background-color: var(--solinom-gray2, #283E46); background-image: none; color: var(--solinom-white, #fff); padding: 10px 5px; text-align: center; line-height: 1em; } .ui-datepicker-calendar .ui-state-default:hover, .ui-datepicker-calendar .ui-widget-content .ui-state-default:hover, .ui-datepicker-calendar .ui-widget-header .ui-state-default:hover { color: var(--solinom-white, #fff); background-color: var(--solinom-base, #CBA36B); } .ui-datepicker-calendar .ui-state-highlight, .ui-datepicker-calendar .ui-widget-content .ui-state-highlight, .ui-datepicker-calendar .ui-widget-header .ui-state-highlight { color: var(--solinom-white, #fff); background-color: var(--solinom-base, #CBA36B); } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { background-image: none; background-color: var(--solinom-white, #fff); color: var(--solinom-black, #000); } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); top: 2px; } .ui-datepicker .ui-datepicker-prev:hover { right: 2px; } .ui-datepicker .ui-datepicker-next:hover { left: 2px; } /*-------------------------------------------------------------- # Cards --------------------------------------------------------------*/ .video-one { position: relative; background-color: var(--solinom-black, #000); padding: 100px 0; } .video-one__bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: var(--solinom-black, #000); background-size: cover; background-position: center center; opacity: 0.5; } .video-one .container { position: relative; text-align: center; } .video-one__btn { width: 145px; height: 145px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; position: relative; } .video-one__btn .video-popup { font-size: 24px; color: var(--solinom-white, #fff); transition: all 500ms ease; position: relative; z-index: 10; } .video-one__btn .video-popup:hover { color: var(--solinom-base, #CBA36B); } .video-one__btn .curved-circle { position: absolute; top: 0; right: 0; width: 145px; height: 145px; transform-origin: center center; display: flex; justify-content: center; align-items: center; animation: textRotate 15s linear 0s forwards infinite alternate; } .video-one__btn .curved-circle--item { width: 145px; } .video-one__btn .curved-circle--item span { text-transform: uppercase; font-size: 14px; color: var(--solinom-white, #fff); letter-spacing: 0.4em; } .video-one__title { margin: 0; text-transform: uppercase; color: var(--solinom-white, #fff); font-size: 40px; line-height: 1.2em; margin-bottom: 40px; margin-top: 30px; } @media (min-width: 768px) { .video-one__title { font-size: 50px; } } @media (min-width: 992px) { .video-one__title { font-size: 60px; margin-top: 20px; margin-bottom: 35px; } } .video-one__link::before { background-color: var(--solinom-base, #CBA36B); } .video-two { position: relative; background-color: var(--solinom-black, #000); padding: 143px 0 320px; } @media (max-width: 767px) { .video-two { padding: 100px 0 270px; } .video-two .text-end { text-align: right !important; } } .video-two__bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: var(--solinom-black, #000); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.5; } .video-two__shape { position: absolute; right: 0; top: 0; width: 100%; height: 100%; background-position: right top; background-repeat: no-repeat; background-size: auto; } @media (max-width: 1199px) { .video-two__shape { display: none; } } .video-two .container { position: relative; } .video-two__btn { width: 145px; height: 145px; display: inline-flex; justify-content: center; align-items: center; border-radius: 50%; position: relative; margin-top: 42px; } .video-two__btn .video-popup { font-size: 24px; color: var(--solinom-white, #fff); transition: all 500ms ease; position: relative; z-index: 10; } .video-two__btn .video-popup:hover { color: var(--solinom-base, #CBA36B); } .video-two__btn .curved-circle { position: absolute; top: 0; right: 0; width: 145px; height: 145px; transform-origin: center center; display: flex; justify-content: center; align-items: center; animation: textRotate 15s linear 0s forwards infinite alternate; } .video-two__btn .curved-circle--item { width: 145px !important; height: 145px !important; } .video-two__btn .curved-circle--item span { text-transform: uppercase; font-size: 14px; color: var(--solinom-white, #fff); letter-spacing: 0.4em; } .video-two__title { margin: 0; text-transform: uppercase; color: var(--solinom-white, #fff); font-size: 40px; line-height: 1.2em; margin-bottom: 40px; } @media (min-width: 768px) { .video-two__title { font-size: 50px; } } @media (min-width: 992px) { .video-two__title { font-size: 60px; margin-bottom: 35px; } } .video-two__link::before { background-color: var(--solinom-base, #CBA36B); } /***Team Card One***/ .team-card { position: relative; z-index: 1; } .team-card__image { position: relative; overflow: hidden; } .team-card__image img { position: relative; max-width: 100%; transform: scale(1); transition: all 0.4s ease-in-out; } .team-card__hover { position: absolute; top: 0; right: 0px; } .team-card__social { background-color: var(--solinom-white, #fff); position: relative; cursor: pointer; transition: all 500ms ease; } .team-card__social:hover { background-color: var(--solinom-white, #fff); } .team-card__social:hover > i { color: var(--solinom-white, #fff); } .team-card__social > i { width: 45px; height: 45px; font-size: 16px; display: flex; justify-content: center; align-items: center; color: var(--solinom-white, #fff); transition: all 500ms ease; background-color: var(--solinom-base, #CBA36B); } .team-card__social__list { position: absolute; bottom: 50%; right: 0%; transform: translateY(-10%); background-color: var(--solinom-base, #CBA36B); display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0; min-width: 45px; padding-top: 20px; padding-bottom: 20px; opacity: 0; transition: 500ms ease; transform-origin: bottom top; } .team-card__social__list a { color: var(--solinom-white, #fff); font-size: 14px; transition: all 500ms ease; line-height: 1; } .team-card__social__list a + a { margin-top: 10px; border-top: 1px solid rgba(var(--solinom-white-rgb, 255, 255, 255), 0.15); padding-top: 8px; } .team-card__social__list a:hover { color: var(--solinom-gray, #1C2F36); } .team-card__social:hover .team-card__social__list { opacity: 1; transform: translateY(-25%); } .team-card__content { padding: 25px 76px 25px 50px; background-color: var(--solinom-white, #fff); position: absolute; bottom: 0; right: 0; left: 20px; } .team-card__title { margin: 0; font-size: 20px; line-height: 1.1818181818em; font-weight: 700; margin-bottom: 5px; text-transform: capitalize; } .team-card__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .team-card__title a:hover { background-size: 100% 1px; } .team-card__title a:hover { color: var(--solinom-base, #CBA36B); } .team-card__designation { margin: 0; color: var(--solinom-text-gray, #7D8B90); margin-bottom: 0px; font-weight: 500; font-size: 16px; line-height: 20px; text-transform: capitalize; } .team-card__link { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-gray2, #283E46); font-size: 18px; color: var(--solinom-base, #CBA36B); position: absolute; bottom: 0; left: 0; } .team-card__link:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .team-card__link:hover i { animation: iconTranslateX 0.4s forwards; } .team-card:hover .team-card__image img { transform: scale(1.1); } /***Team One***/ .team-one { padding-top: 120px; padding-bottom: 120px; } .team-one .sec-title { text-align: center; } @media (min-width: 992px) { .team-one__carousel .owl-nav { display: none; } } /***Team Details***/ .team-details { padding-top: 80px; padding-bottom: 80px; border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } @media (min-width: 992px) { .team-details { padding-top: 120px; padding-bottom: 120px; } } .team-details__image { display: inline-block; position: relative; margin-left: -30px; } .team-details__image img { max-width: 100%; object-fit: cover; } @media (max-width: 1199px) { .team-details__image { margin-left: 0px; } } @media (max-width: 768px) { .team-details__content { margin-top: 30px; } } @media (min-width: 1199px) { .team-details__content { padding-right: 50px; } } .team-details__content__subtitle { margin-top: -6px; color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 600; line-height: normal; } .team-details__content__title { margin-top: -5px; font-size: 30px; margin-bottom: 22px; color: var(--solinom-gray, #1C2F36); font-weight: 700; line-height: 125%; letter-spacing: -1.2px; } @media (min-width: 992px) { .team-details__content__title { font-size: 40px; } } .team-details__content__text { color: var(--solinom-text-gray, #7D8B90); margin-bottom: 20px; font-size: 16px; font-weight: 600; line-height: 200%; } @media (min-width: 992px) { .team-details__content__text { margin-bottom: 30px; } } .team-details__content__highlight { background-color: var(--solinom-border-color, #FAF6F0); position: relative; padding: 10px 20px; margin-bottom: 30px; transition: all 0.4s ease-in-out; } .team-details__content__highlight svg { position: absolute; bottom: 0; left: 0; width: 315px; z-index: -1; height: 38px; fill: var(--solinom-gray2, #283E46); opacity: 0.2; transition: all 0.4s ease-in-out; } .team-details__content__highlight__text { max-width: 508px; display: block; width: 100%; color: var(--solinom-text, #101D22); font-size: 16px; font-style: normal; font-weight: 700; line-height: 150%; transition: all 0.4s ease-in-out; } @media (min-width: 992px) { .team-details__content__highlight { padding: 22px 40px; margin-bottom: 38px; } .team-details__content__highlight__text { font-size: 18px; } } .team-details__content__highlight:hover { background: var(--solinom-base, #CBA36B); } .team-details__content__highlight:hover .team-details__content__highlight__text { color: var(--solinom-white, #fff); } .team-details__content__highlight:hover svg { fill: var(--solinom-base, #CBA36B); } .team-details__list { margin-bottom: 32px; } .team-details__list > li { margin-bottom: 13px; color: var(--solinom-text, #101D22); font-size: 16px; font-weight: 700; line-height: normal; } .team-details__list > li a { background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; color: var(--solinom-text-dark, #15262C); } .team-details__list > li a:hover { background-size: 100% 1px; } .team-details__list > li span { display: inline-block; color: var(--solinom-text-gray, #7D8B90); } .team-details__list > li:last-child { margin-bottom: 0; } .team-details__list > li i { color: var(--solinom-base, #CBA36B); margin-left: 10px; } .team-details .team-skills { margin-bottom: 40px; } .team-details .team-skills__progress + .team-skills__progress { margin-top: 20px; } @media (min-width: 992px) { .team-details .team-skills__progress + .team-skills__progress { margin-top: 34px; } } .team-details .team-skills__progress__title { margin-bottom: 12px; text-shadow: 0 0 0 0.1px currentColor; color: var(--solinom-text, #101D22); font-size: 18px; font-weight: 600; line-height: 144.444%; } .team-details .team-skills__progress__bar { width: 100%; height: 10px; position: relative; background-color: var(--solinom-border-color, #FAF6F0); } .team-details .team-skills__progress__inner { position: absolute; height: 10px; background-color: var(--solinom-base, #CBA36B); transition: all 700ms linear; width: 0px; } .team-details .team-skills__progress__number { position: absolute; bottom: calc(100% + 5px); left: 0; margin-bottom: 8px; color: var(--solinom-text-gray, #7D8B90); font-size: 18px; font-weight: 500; line-height: 144.444%; } .team-details__social { display: flex; flex-wrap: wrap; gap: 19px; } .team-details__social a { width: 30px; height: 30px; border-radius: 30px; display: flex; justify-content: center; align-items: center; background-color: var(--solinom-border-color, #FAF6F0); font-size: 12px; color: var(--solinom-text, #101D22); line-height: 1; transition: all 500ms ease; } .team-details__social a:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .team-skills-one { padding: 120px 0px 110px 0; } @media (max-width: 767px) { .team-skills-one { padding: 60px 0; } } .team-skills-one__title { margin-bottom: 10px; color: var(--solinom-text, #101D22); font-size: 25px; font-weight: 700; line-height: normal; } @media (min-width: 768px) { .team-skills-one__title { font-size: 30px; } } @media (min-width: 992px) { .team-skills-one__title { font-size: 40px; margin-bottom: 20px; } } .team-skills-one__text { max-width: 542px; width: 100%; color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 600; line-height: 200%; } .team-skills-one__certificates { display: flex; justify-content: start; flex-wrap: wrap; gap: 21px; } .team-skills-one__certificates__item { max-width: 176px; width: 100%; cursor: pointer; } .team-skills-one__certificates__item img { object-fit: cover; filter: grayscale(100%); transition: all 0.5s ease-in-out; } .team-skills-one__certificates__item:hover img { object-fit: cover; filter: grayscale(0%); } .team-skills-one__bottom { margin-top: 70px; } .team-skills-one__skill { padding-top: 45px; position: relative; } .team-skills-one__skill::before { position: absolute; top: 7px; right: 0; content: ""; clear: both; width: 110%; height: 1px; background-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } @media (max-width: 767px) { .team-skills-one__skill::before { display: none; } } .team-skills-one__skill::after { position: absolute; top: 0%; right: 0; content: ""; clear: both; width: 15px; height: 15px; border-radius: 500px; background-color: var(--solinom-gray2, #283E46); transition: all 0.4s ease-in-out; } @media (max-width: 767px) { .team-skills-one__skill::after { display: none; } } .team-skills-one__skill__start { display: block; margin-bottom: 10px; color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 500; line-height: normal; } .team-skills-one__skill__title { margin-bottom: 10px; color: var(--solinom-text, #101D22); font-size: 20px; font-weight: 700; line-height: normal; text-transform: capitalize; } .team-skills-one__skill__text { margin-bottom: 0; color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 500; line-height: normal; } .team-skills-one__skill:hover::after { background-color: var(--solinom-base, #CBA36B); } .team-skills-one__title { font-size: 30px; font-style: normal; font-weight: 700; line-height: normal; } .team-skills-one__text { letter-spacing: 0; max-width: 550px; width: 100%; } .team-form-one { position: relative; padding: 120px 0; z-index: 1; } @media (max-width: 991px) { .team-form-one { padding: 100px 0; } } @media (max-width: 767px) { .team-form-one { padding: 80px 0; } } .team-form-one__bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; z-index: -1; } .team-form-one .container { position: relative; max-width: 898px; } .team-form-one .sec-title { text-align: center; } .team-form-one .form-one .bootstrap-select > .dropdown-toggle, .team-form-one .form-one input[type=text], .team-form-one .form-one input[type=email], .team-form-one .form-one textarea { background-color: var(--solinom-white, #fff); } .team-form-one .form-one textarea { height: 176px; } .team-form-one .form-one .solinom-btn { padding: 11px 40.5px; } .team-form-one__shape { position: absolute; top: 0; right: 0; z-index: -1; animation: topBottom 4s ease-in-out infinite; } /***Blog Card One***/ .blog-card { position: relative; background-color: var(--solinom-white, #fff); } .blog-card__image { position: relative; } .blog-card__image__inner { position: relative; overflow: hidden; margin-right: 17px; } .blog-card__image__inner__link { display: flex; width: 100%; height: 100%; background-color: rgba(var(--solinom-gray-rgb, 28, 47, 54), 0.7); position: absolute; top: 0; right: 0; justify-content: center; align-items: center; opacity: 0; transform: translateY(-20%); transition: opacity 500ms ease, transform 500ms ease; } .blog-card__image__inner__link::before, .blog-card__image__inner__link::after { content: ""; width: 32px; height: 2px; background-color: var(--solinom-white, #fff); display: block; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); } .blog-card__image__inner__link::after { transform: translate(50%, -50%) rotate(-90deg); } .blog-card__image img { transition: 0.5s; background-size: cover; width: 100%; } .blog-card__image img:nth-child(1) { transform: translatex(-50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-card__image img:nth-child(2) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; } .blog-card:hover .blog-card__image__inner > a { opacity: 1; transform: translateY(0); } .blog-card:hover .blog-card__image img:nth-child(1) { transform: translatex(0) scalex(1); opacity: 1; filter: blur(0); } .blog-card:hover .blog-card__image img:nth-child(2) { transform: translatex(50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-card__content { background-color: var(--solinom-white, #fff); position: relative; transition: all 500ms ease; } .blog-card__date { position: absolute; left: 0; top: 0; width: 80px; height: 80px; background-color: var(--solinom-gray2, #283E46); display: flex; justify-content: center; text-align: center; align-items: center; flex-direction: column; color: var(--solinom-text-gray, #7D8B90); z-index: 10; font-weight: 600; font-size: 14px; line-height: 186%; transition: all 500ms ease; text-transform: capitalize; } .blog-card__date span { font-size: 30px; line-height: 87%; color: var(--solinom-white, #fff); } .blog-card__meta { display: flex; align-items: center; margin: 0; background-color: var(--solinom-gray2, #283E46); position: absolute; bottom: 0; right: 0; z-index: 10; height: 43px; padding: 10px 30px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1); border-radius: 1000px 0 0 1000px; transition: all 500ms ease; } .blog-card__meta li { color: var(--solinom-text-gray, #7D8B90); font-size: 14px; font-weight: 500; display: flex; align-items: center; text-transform: capitalize; } .blog-card__meta li i { color: var(--solinom-base, #CBA36B); margin-left: 3px; transition: all 500ms ease; } .blog-card__meta li a { display: flex; align-items: center; color: inherit; transition: all 500ms ease; } .blog-card__meta li a:hover { color: var(--solinom-base, #CBA36B); text-shadow: 0 0 1px currentColor; } .blog-card__meta li + li { margin-right: 20px; } .blog-card__meta::after { content: ""; width: 17px; height: 38px; -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: auto; mask-size: auto; background-color: var(--solinom-gray, #1C2F36); position: absolute; top: -38px; right: 0; transition: all 500ms ease; } .blog-card__content { background-color: var(--solinom-white, #fff); padding: 30px 30px 1px; margin-bottom: 27px; position: relative; z-index: 10; transition: all 500ms ease; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05); } @media (min-width: 992px) and (max-width: 1199px) { .blog-card__content { margin-right: 0; } } .blog-card:hover .blog-card__content { box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1); } .blog-card:hover .blog-card__date { color: var(--solinom-white, #fff); background-color: var(--solinom-base, #CBA36B); } .blog-card:hover .blog-card__date span { color: var(--solinom-white, #fff); } .blog-card:hover .blog-card__meta { background-color: var(--solinom-base, #CBA36B); } .blog-card:hover .blog-card__meta a, .blog-card:hover .blog-card__meta i { color: var(--solinom-white, #fff); } .blog-card:hover .blog-card__meta::after { background-color: var(--solinom-base, #CBA36B); } .blog-card__title { margin: 0; font-style: normal; font-weight: 600; font-size: 20px; line-height: 150%; text-transform: capitalize; margin-bottom: 5px; } .blog-card__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-card__title a:hover { background-size: 100% 1px; } .blog-card__text { margin-bottom: 30px; } .blog-card__link { width: 100%; margin-bottom: -25px; position: relative; overflow: visible; } .blog-card__link .solinom-btn { width: 100%; } .blog-card__link .solinom-btn:hover { color: var(--solinom-white, #fff); } .blog-card__link::before { content: ""; width: 30px; height: 23px; -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: auto; mask-size: auto; background-color: var(--solinom-gray, #1C2F36); position: absolute; bottom: 0px; left: -27px; transition: all 500ms ease; } .blog-card__link:hover::before { background-color: var(--solinom-base, #CBA36B); } /***Blog Card Two***/ .blog-card-two { position: relative; background-color: var(--solinom-white, #fff); } .blog-card-two__image { position: relative; overflow: hidden; } .blog-card-two__image img { transition: 0.5s; background-size: cover; width: 100%; } .blog-card-two__image img:nth-child(1) { transform: translatex(-50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-card-two__image img:nth-child(2) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; } .blog-card-two__image__link { display: flex; width: 100%; height: 100%; background-color: rgba(var(--solinom-black-rgb, 0, 0, 0), 0.5); position: absolute; top: 0; right: 0; justify-content: center; align-items: center; opacity: 0; transform: translateY(-20%); transition: opacity 500ms ease, transform 500ms ease; } .blog-card-two__image__link::before, .blog-card-two__image__link::after { content: ""; width: 25px; height: 2px; background-color: var(--solinom-white, #fff); display: block; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); } .blog-card-two__image__link::after { transform: translate(50%, -50%) rotate(-90deg); } .blog-card-two:hover .blog-card-two__image > a { opacity: 1; transform: translateY(0); } .blog-card-two:hover .blog-card-two__image img:nth-child(1) { transform: translatex(0) scalex(1); opacity: 1; filter: blur(0); } .blog-card-two:hover .blog-card-two__image img:nth-child(2) { transform: translatex(50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-card-two__date { position: absolute; left: 20px; top: 20px; width: 74px; height: 81px; background-color: var(--solinom-base, #CBA36B); display: flex; justify-content: center; text-align: center; align-items: center; position: absolute; flex-direction: column; color: var(--solinom-white, #fff); z-index: 10; font-weight: 600; font-size: 14px; line-height: 186%; transition: all 500ms ease; } .blog-card-two__date span { font-size: 30px; line-height: 87%; color: var(--solinom-white, #fff); } .blog-card-two__title { margin-bottom: 12px; color: var(--solinom-text, #101D22); font-size: 30px; font-weight: 700; line-height: normal; } .blog-card-two__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-card-two__title a:hover { background-size: 100% 1px; } .blog-card-two__title a:hover { color: var(--solinom-base, #CBA36B); } .blog-card-two__text { color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 500; line-height: 187.5%; margin-bottom: 20px; } .blog-card-two__link { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--solinom-base, #CBA36B); display: flex; justify-content: center; align-items: center; font-size: 18px; color: var(--solinom-gray, #1C2F36); } .blog-card-two__link:hover { background-color: var(--solinom-base, #CBA36B); } .blog-card-two__link:hover i { animation: iconTranslateX 0.4s forwards; } .blog-card-two__content { padding-top: 20px; } .blog-card-two__meta { display: flex; align-items: center; margin: 0; transition: all 0.4s ease-in-out; } .blog-card-two__meta li:not(:first-child)::before { content: "|"; margin-right: 15px; margin-left: 15px; font-weight: 500; color: #6D7076; opacity: 0.5; } .blog-card-two__meta li a { color: var(--solinom-text-gray, #7D8B90); font-size: 14px; font-weight: 600; line-height: 214.286%; text-transform: capitalize; } .blog-card-two__meta li a i { font-size: 15px; color: var(--solinom-base, #CBA36B); margin-left: 5px; } .blog-card-two__meta li a:hover { color: var(--solinom-base, #CBA36B); } /***Blog Card Three***/ .blog-card-three { background-color: var(--solinom-text-dark, #15262C); position: relative; z-index: 1; transition: all 0.4s ease-in-out; } .blog-card-three__image { position: relative; overflow: hidden; z-index: 1; } .blog-card-three__image img { transition: 0.5s; background-size: cover; width: 100%; } .blog-card-three__image img:nth-child(1) { transform: translatex(-50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-card-three__image img:nth-child(2) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; } .blog-card-three__image__link { display: flex; width: 100%; height: 100%; background-color: rgba(var(--solinom-text-dark-rgb, 21, 38, 44), 0.5); position: absolute; top: 0; right: 0; justify-content: center; align-items: center; opacity: 0; transform: translateY(-20%); transition: opacity 500ms ease, transform 500ms ease; } .blog-card-three__image__link::before, .blog-card-three__image__link::after { content: ""; width: 25px; height: 2px; background-color: var(--solinom-white, #fff); display: block; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); } .blog-card-three__image__link::after { transform: translate(50%, -50%) rotate(-90deg); } .blog-card-three:hover .blog-card-three__image > a { opacity: 1; transform: translateY(0); } .blog-card-three:hover.blog-card-three img:nth-child(1) { transform: translatex(0) scalex(1); opacity: 1; filter: blur(0); } .blog-card-three:hover.blog-card-three img:nth-child(2) { transform: translatex(50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-card-three__content { padding: 0px 20px 20px; border: 1px solid transparent; border-top: none; transition: all 0.4s ease-in-out; } .blog-card-three__content__inner { background-color: var(--solinom-gray2, #283E46); position: relative; z-index: 1; } .blog-card-three__content__content { padding: 20px 30px 30px; } .blog-card-three__title { margin-top: -8px; font-style: normal; font-weight: 600; font-size: 20px; line-height: 150%; margin-bottom: 22px; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); } .blog-card-three__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-card-three__title a:hover { background-size: 100% 1px; } .blog-card-three__title a:hover { color: var(--solinom-base, #CBA36B); } .blog-card-three__btn { display: inline-flex; align-items: center; max-height: 42px; overflow: hidden; } .blog-card-three__btn .solinom-btn { padding: 6px 20px; font-size: 14px; } .blog-card-three__btn .solinom-btn:hover { color: var(--solinom-white, #fff); } .blog-card-three__btn i { width: 40px; height: 41.5px; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-text, #101D22); } .blog-card-three__btn:hover i { animation: iconTranslateX 0.4s forwards; } .blog-card-three__meta { display: flex; align-items: center; margin: 0; transition: all 0.4s ease-in-out; justify-content: space-between; padding: 14px 30px 15px; border-bottom: 1px solid var(--solinom-text-dark, #15262C); } .blog-card-three__meta li a { color: var(--solinom-text-gray, #7D8B90); font-size: 14px; font-weight: 600; line-height: 186%; text-transform: capitalize; } .blog-card-three__meta li a i { font-size: 15px; color: var(--solinom-base, #CBA36B); margin-left: 5px; } .blog-card-three__meta li a:hover { color: var(--solinom-base, #CBA36B); } .blog-card-three:hover .blog-card-three__content { border-color: var(--solinom-base, #CBA36B); } .blog-card-three:hover { background-color: rgba(var(--solinom-text-dark-rgb, 21, 38, 44), 0.3); } /***Blog Card Fore***/ .blog-card-fore { position: relative; background-color: var(--solinom-white, #fff); } .blog-card-fore__image { position: relative; } .blog-card-fore__image__inner { position: relative; overflow: hidden; } .blog-card-fore__image__inner__link { display: flex; width: 100%; height: 100%; background-color: rgba(var(--solinom-gray-rgb, 28, 47, 54), 0.7); position: absolute; top: 0; right: 0; justify-content: center; align-items: center; opacity: 0; transform: translateY(-20%); transition: opacity 500ms ease, transform 500ms ease; } .blog-card-fore__image__inner__link::before, .blog-card-fore__image__inner__link::after { content: ""; width: 32px; height: 2px; background-color: var(--solinom-white, #fff); display: block; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); } .blog-card-fore__image__inner__link::after { transform: translate(50%, -50%) rotate(-90deg); } .blog-card-fore__image img { transition: 0.5s; background-size: cover; width: 100%; } .blog-card-fore__image img:nth-child(1) { transform: translatex(-50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-card-fore__image img:nth-child(2) { position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; } .blog-card-fore:hover .blog-card-fore__image__inner > a { opacity: 1; transform: translateY(0); } .blog-card-fore:hover .blog-card-fore__image img:nth-child(1) { transform: translatex(0) scalex(1); opacity: 1; filter: blur(0); } .blog-card-fore:hover .blog-card-fore__image img:nth-child(2) { transform: translatex(50%) scalex(2); opacity: 0; filter: blur(10px); } .blog-card-fore__date { position: relative; margin-right: auto; margin-left: 0; width: 80px; height: 80px; background-color: var(--solinom-base, #CBA36B); display: flex; justify-content: center; text-align: center; align-items: center; flex-direction: column; color: var(--solinom-white, #fff); font-weight: 600; font-size: 14px; line-height: 186%; transition: all 500ms ease; } .blog-card-fore__date span { font-size: 30px; line-height: 87%; color: var(--solinom-white, #fff); } .blog-card-fore__meta { display: flex; align-items: center; position: relative; height: 16px; transition: all 500ms ease; margin-bottom: 20px; } .blog-card-fore__meta li { color: var(--solinom-text-gray, #7D8B90); font-size: 14px; font-weight: 500; display: flex; align-items: center; text-transform: capitalize; } .blog-card-fore__meta li i { color: var(--solinom-base, #CBA36B); margin-left: 3px; transition: all 500ms ease; } .blog-card-fore__meta li a { display: flex; align-items: center; color: inherit; transition: all 500ms ease; } .blog-card-fore__meta li a:hover { color: var(--solinom-base, #CBA36B); text-shadow: 0 0 1px currentColor; } .blog-card-fore__meta li + li { margin-right: 20px; } .blog-card-fore__title { margin-top: -10px; font-style: normal; font-weight: 600; font-size: 20px; line-height: 150%; margin-bottom: 0; padding-bottom: 0; } .blog-card-fore__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-card-fore__title a:hover { background-size: 100% 1px; } .blog-card-fore__title a:hover { color: var(--solinom-base, #CBA36B); } .blog-card-fore__content { background-color: transparent; position: absolute; bottom: 0; right: 0; left: 40px; } .blog-card-fore__content__inner { background-color: var(--solinom-white, #fff); padding: 25px 30px 23px; filter: drop-shadow(0px 4px 30px rgba(0, 0, 0, 0.15)); } @media (max-width: 1199px) and (min-width: 992px) { .blog-card-fore__content__inner { padding: 20px 15px 20px; } } .blog-card-fore__link { position: absolute; left: -40px; bottom: 0; } .blog-card-fore__link a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-base, #CBA36B); padding: 0; } /***Blog One***/ .blog-one { padding: 120px 0; position: relative; } @media (max-width: 767px) { .blog-one { padding: 80px 0; } } .blog-one--home .sec-title { text-align: center; } @media (min-width: 992px) { .blog-one__carousel .owl-nav { display: none; } } /***Blog Two***/ .blog-two { position: relative; background-color: var(--solinom-text-dark, #15262C); padding: 120px 0; } @media (max-width: 991px) { .blog-two { padding: 100px 0; } } @media (max-width: 767px) { .blog-two { padding: 80px 0; } } .blog-two__right { padding: 20px; border: 1px solid var(--solinom-base, #CBA36B); } .blog-two .blog-two__card__item + .blog-two__card__item { margin-top: 20px; } /***Blog Three***/ .blog-three { position: relative; background-color: var(--solinom-gray, #1C2F36); padding: 120px 0px; z-index: 1; } @media (max-width: 991px) { .blog-three { padding: 100px 0; } } @media (max-width: 767px) { .blog-three { padding: 80px 0; } } .blog-three__bg { position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; background-position: right top; background-repeat: repeat; background-size: auto; z-index: -1; mix-blend-mode: overlay; } /***Home Two Blog Two Left Side***/ .blog-two-card { position: relative; z-index: 1; background-color: var(--solinom-gray, #1C2F36); } .blog-two-card__image { position: relative; overflow: hidden; } .blog-two-card__image img { transition: 0.5s; background-size: cover; width: 100%; } .blog-two-card__image__link { display: flex; width: 100%; height: 100%; background-color: rgba(var(--solinom-black-rgb, 0, 0, 0), 0.5); position: absolute; top: 0; right: 0; justify-content: center; align-items: center; opacity: 0; transform: translateY(-20%); transition: opacity 500ms ease, transform 500ms ease; } .blog-two-card__image__link::before, .blog-two-card__image__link::after { content: ""; width: 25px; height: 2px; background-color: var(--solinom-white, #fff); display: block; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); } .blog-two-card__image__link::after { transform: translate(50%, -50%) rotate(-90deg); } .blog-two-card:hover .blog-two-card__image > a { opacity: 1; transform: translateY(0); } .blog-two-card__date { position: absolute; left: 28px; top: -0.4px; width: 116px; height: 122px; background-color: var(--solinom-text, #101D22); color: var(--solinom-text-gray, #7D8B90); z-index: 10; clip-path: polygon(100% 0, 100% 100%, 50% 85%, 0 100%, 0 0); text-align: center; } .blog-two-card__date__inner { font-weight: 600; font-size: 14px; line-height: 186%; transition: all 500ms ease; text-align: center; } .blog-two-card__date__inner span { color: var(--solinom-white, #fff); display: block; text-align: center; font-style: normal; font-weight: 600; font-size: 40px; line-height: 65%; } .blog-two-card__date img { object-fit: cover; width: auto; margin-top: 7px; margin-bottom: 15px; } .blog-two-card__content { padding: 0px 20px 20px; } .blog-two-card__content__inner { background-color: var(--solinom-gray2, #283E46); padding: 32px; } .blog-two-card__meta { display: flex; align-items: center; margin-bottom: 4px; margin-top: -10px; gap: 20px; transition: all 0.4s ease-in-out; } .blog-two-card__meta li a { color: var(--solinom-text-gray, #7D8B90); font-size: 14px; font-weight: 600; line-height: normal; text-transform: capitalize; } .blog-two-card__meta li a i { font-size: 15px; color: var(--solinom-base, #CBA36B); margin-left: 5px; } .blog-two-card__meta li a:hover { color: var(--solinom-base, #CBA36B); } .blog-two-card__title { font-style: normal; font-weight: 600; font-size: 20px; line-height: 150%; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); margin-bottom: 25px; } .blog-two-card__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-two-card__title a:hover { background-size: 100% 1px; } .blog-two-card__title a:hover { color: var(--solinom-base, #CBA36B); } .blog-two-card__link { background-color: var(--solinom-text-dark, #15262C); display: flex; align-items: center; padding: 12px 16px; justify-content: space-between; } .blog-two-card__link .solinom-btn { padding: 7px 10px; line-height: 130%; font-size: 14px; } .blog-two-card__link .solinom-btn:hover { color: var(--solinom-white, #fff); } .blog-two-card__link a:last-child { width: 30px; height: 30px; border: 1px solid var(--solinom-base, #CBA36B); display: flex; align-items: center; justify-content: center; font-size: 10px; position: relative; z-index: 1; overflow: hidden; } .blog-two-card__link a:last-child::before { content: ""; width: 100%; height: 100%; background-color: var(--solinom-base, #CBA36B); position: absolute; top: 0; right: 0; transform: translate(70%, 70%) rotate(-50deg); z-index: -1; transition: all 0.4s ease-in-out; } .blog-two-card__link a:last-child:hover { color: var(--solinom-white, #fff); } .blog-two-card__link a:last-child:hover::before { transform: translate(0%, 0%) rotate(0deg); } /***Home Two Blog Two Right Side***/ .blog-two__card__item { position: relative; z-index: 1; background-color: var(--solinom-gray, #1C2F36); display: flex; align-items: center; gap: 20px; padding: 20px 20px 20px 30px; } @media (max-width: 1199px) and (min-width: 992px) { .blog-two__card__item { flex-direction: column; justify-content: start; align-items: start; } } @media (max-width: 767px) { .blog-two__card__item { flex-direction: column; justify-content: start; align-items: start; } } .blog-two__card__item__image { position: relative; overflow: hidden; max-width: 210px; width: 100%; } .blog-two__card__item__image img { transition: 0.5s; background-size: cover; width: 100%; } @media (max-width: 1199px) and (min-width: 992px) { .blog-two__card__item__image { max-width: 100%; width: 100%; } } @media (max-width: 767px) { .blog-two__card__item__image { max-width: 100%; width: 100%; } } .blog-two__card__item__image__link { display: flex; width: 100%; height: 100%; background-color: rgba(var(--solinom-black-rgb, 0, 0, 0), 0.5); position: absolute; top: 0; right: 0; justify-content: center; align-items: center; opacity: 0; transform: translateY(-20%); transition: opacity 500ms ease, transform 500ms ease; } .blog-two__card__item__image__link::before, .blog-two__card__item__image__link::after { content: ""; width: 25px; height: 2px; background-color: var(--solinom-white, #fff); display: block; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); } .blog-two__card__item__image__link::after { transform: translate(50%, -50%) rotate(-90deg); } .blog-two__card__item:hover .blog-two__card__item__image > a { opacity: 1; transform: translateY(0); } .blog-two__card__item__date { position: absolute; left: 18px; top: -0.4px; width: 72px; height: 76px; background-color: var(--solinom-text, #101D22); color: var(--solinom-text-gray, #7D8B90); z-index: 10; clip-path: polygon(100% 0, 100% 100%, 50% 85%, 0 100%, 0 0); text-align: center; } .blog-two__card__item__date__inner { font-weight: 600; font-size: 14px; line-height: 186%; transition: all 500ms ease; text-align: center; } .blog-two__card__item__date__inner span { color: var(--solinom-white, #fff); display: block; text-align: center; font-style: normal; font-weight: 600; font-size: 24.918px; line-height: 65%; } .blog-two__card__item__date img { display: block; object-fit: cover; text-align: center; width: auto; margin-top: 4px; margin-bottom: 5px; } .blog-two__card__item__meta { display: flex; align-items: center; margin-bottom: 4px; margin-top: -10px; gap: 20px; transition: all 0.4s ease-in-out; } .blog-two__card__item__meta li a { color: var(--solinom-text-gray, #7D8B90); font-size: 14px; font-weight: 600; line-height: normal; text-transform: capitalize; } .blog-two__card__item__meta li a i { font-size: 15px; color: var(--solinom-base, #CBA36B); margin-left: 5px; } .blog-two__card__item__meta li a:hover { color: var(--solinom-base, #CBA36B); } .blog-two__card__item__title { font-style: normal; font-weight: 600; font-size: 20px; line-height: 150%; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); margin-bottom: 25px; } .blog-two__card__item__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-two__card__item__title a:hover { background-size: 100% 1px; } .blog-two__card__item__title a:hover { color: var(--solinom-base, #CBA36B); } .blog-two__card__item__link { background-color: var(--solinom-text-dark, #15262C); display: flex; align-items: center; padding: 12px 16px; justify-content: space-between; } .blog-two__card__item__link .solinom-btn { padding: 7px 10px; line-height: 130%; font-size: 14px; } .blog-two__card__item__link .solinom-btn:hover { color: var(--solinom-white, #fff); } .blog-two__card__item__link a:last-child { width: 30px; height: 30px; border: 1px solid var(--solinom-base, #CBA36B); display: flex; align-items: center; justify-content: center; font-size: 10px; position: relative; z-index: 1; overflow: hidden; } .blog-two__card__item__link a:last-child::before { content: ""; width: 100%; height: 100%; background-color: var(--solinom-base, #CBA36B); position: absolute; top: 0; right: 0; transform: translate(70%, 70%) rotate(-50deg); z-index: -1; transition: all 0.4s ease-in-out; } .blog-two__card__item__link a:last-child:hover { color: var(--solinom-white, #fff); } .blog-two__card__item__link a:last-child:hover::before { transform: translate(0%, 0%) rotate(0deg); } /***Blog Fore***/ .blog-four { padding: 0px 0 120px; position: relative; } @media (max-width: 991px) { .blog-four { padding: 0px 0 100px; } } @media (max-width: 767px) { .blog-four { padding: 0px 0 80px; } } /*-------------------------------------------------------------- # Form --------------------------------------------------------------*/ .form-one__group { display: grid; grid-template-columns: 1fr; grid-gap: 20px; margin: 0; } @media (min-width: 576px) { .form-one__group { grid-template-columns: repeat(2, 1fr); } } .form-one__control { border: none; width: auto; height: auto; border-radius: 0; padding: 0; position: relative; } .form-one__control__icon { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); font-size: 14px; } .form-one__control--full { grid-column-start: 1; grid-column-end: -1; } .form-one .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 100%; height: 58px; display: flex; align-items: center; } .form-one .bootstrap-select > .dropdown-toggle { padding: 0; background-color: transparent; border-radius: 0; border: none; outline: none !important; color: var(--solinom-text-gray, #7D8B90); font-size: 16px; } .form-one .bootstrap-select > .dropdown-toggle, .form-one input[type=text], .form-one input[type=email], .form-one textarea { display: block; width: 100%; height: 58px; background-color: var(--solinom-border-color, #FAF6F0); color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 500; border: none; outline: none; padding-right: 30px; padding-left: 30px; } .form-one textarea { height: 195px; padding-top: 20px; } .form-one .bootstrap-select > .dropdown-toggle { display: flex; align-items: center; } .form-one .bootstrap-select > .dropdown-toggle .filter-option { display: flex; align-items: center; } /*-------------------------------------------------------------- # Custom Cursor --------------------------------------------------------------*/ .custom-cursor__cursor { width: 25px; height: 25px; border-radius: 100%; border: 1px solid var(--solinom-base, #CBA36B); -webkit-transition: all 200ms ease-out; transition: all 200ms ease-out; position: fixed; pointer-events: none; right: 0; top: 0; -webkit-transform: translate(calc(-1*(-50% + 5px)), -50%); transform: translate(calc(-1*(-50% + 5px)), -50%); z-index: 999991; } .custom-cursor__cursor-two { width: 10px; height: 10px; border-radius: 100%; background-color: var(--solinom-base, #CBA36B); opacity: 0.3; position: fixed; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); pointer-events: none; -webkit-transition: width 0.3s, height 0.3s, opacity 0.3s; transition: width 0.3s, height 0.3s, opacity 0.3s; z-index: 999991; } .custom-cursor__hover { background-color: var(--solinom-base, #CBA36B); opacity: 0.4; } .custom-cursor__innerhover { width: 25px; height: 25px; opacity: 0.4; } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .main-footer { position: relative; background-color: var(--solinom-gray, #1C2F36); } .main-footer__top { position: relative; z-index: 1; } @media (max-width: 991px) { .main-footer__top { padding-top: 100px; padding-bottom: 50px; } } @media (max-width: 767px) { .main-footer__top { padding-top: 80px; padding-bottom: 40px; } } .main-footer__top__shape { position: absolute; bottom: 0; right: 0; mix-blend-mode: overlay; z-index: -1; opacity: 0.2; animation: messageMove 3s ease-in-out infinite; } .main-footer .container { position: relative; } .main-footer__bottom { text-align: center; background: var(--solinom-text, #101D22); } .main-footer__bottom__inner { padding: 23px 0; } .main-footer__copyright { margin: 0; font-size: 16px; font-weight: 600; color: var(--solinom-text-gray, #7D8B90); } @media (max-width: 991px) { .footer-widget { margin-bottom: 40px; } } .footer-widget__newsletter { position: relative; width: 100%; max-width: 370px; margin-bottom: 24px; } .footer-widget__newsletter input[type=text] { width: 100%; display: block; border: none; outline: none; height: 56px; background-color: var(--solinom-text-dark, #15262C); color: var(--solinom-text-gray, #7D8B90); font-size: 14px; font-weight: 500; padding-right: 30px; padding-left: 20px; transition: all 500ms ease; } .footer-widget__newsletter input[type=text]:focus { color: var(--solinom-white, #fff); } .footer-widget__newsletter button[type=submit] { background-color: transparent; width: auto; height: auto; border: none; outline: none; color: var(--solinom-base, #CBA36B); font-size: 14px; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); transition: all 500ms ease; } .footer-widget__newsletter button[type=submit]:hover { color: var(--solinom-white, #fff); } .footer-widget__title { color: var(--solinom-white, #fff); text-transform: capitalize; margin: 0; margin-top: -5px; margin-bottom: 17px; font-style: normal; font-weight: 600; font-size: 18px; line-height: 163%; } .footer-widget__text { margin: 0; margin-top: -5px; margin-bottom: 15px; max-width: 270px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 214%; color: var(--solinom-text-gray, #7D8B90); } .footer-widget__social { display: flex; flex-wrap: wrap; gap: 19px; } .footer-widget__social a { width: 37px; height: 37px; display: flex; justify-content: center; align-items: center; background-color: var(--solinom-gray2, #283E46); font-size: 14px; color: var(--solinom-white, #fff); transition: all 500ms ease; border-radius: 50%; } .footer-widget__social a:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .footer-widget__links { font-style: normal; font-weight: 500; font-size: 16px; line-height: 184%; margin-top: -3px; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .footer-widget__links li { display: flex; align-items: center; margin-right: -6px; transition: all 0.4s ease-in-out; } .footer-widget__links li i { font-size: 6px; color: var(--solinom-base, #CBA36B); transform: scale(0); transition: all 0.4s ease-in-out; } .footer-widget__links li:hover { margin-right: 0; } .footer-widget__links li:hover i { transform: scale(1); } .footer-widget__links li:hover a { padding-right: 10px; color: var(--solinom-base, #CBA36B); } .footer-widget__links a { color: inherit; padding-right: 0px; } .footer-widget__links li + li { margin-top: 7px; } .footer-widget__info__item { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-gray2, #283E46); font-size: 14px; color: var(--solinom-base, #CBA36B); transition: all 0.4s ease-in-out; } .footer-widget__info li { display: flex; align-items: center; gap: 13px; } .footer-widget__info li:hover .footer-widget__info__item { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .footer-widget__info li + li { margin-top: 14px; } .footer-widget__info__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 162%; color: var(--solinom-text-gray, #7D8B90); padding-bottom: 0; } .footer-widget__info__text:hover { color: var(--solinom-base, #CBA36B); } .footer-widget__app { border-top: 1px solid rgba(255, 255, 255, 0.19); padding-top: 20px; margin-top: 20px; display: flex; align-items: center; gap: 15px; } .footer-widget__app img { object-fit: cover; width: 100%; } .footer-widget--about { position: relative; padding-top: 93px; padding-bottom: 66px; } @media (max-width: 991px) { .footer-widget--about { padding-top: 0px; padding-bottom: 0px; padding-right: 0; } } .footer-widget--about::after { content: ""; width: 1px; height: 104%; position: absolute; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.19); } @media (max-width: 1199px) { .footer-widget--about::after { left: -25px; } } @media (max-width: 991px) { .footer-widget--about::after { display: none; } } .footer-widget--links { padding-right: 66px; padding-top: 93px; padding-bottom: 66px; position: relative; } @media (max-width: 1199px) { .footer-widget--links { padding-right: 20px; } } @media (max-width: 991px) { .footer-widget--links { padding-top: 0px; padding-bottom: 0px; padding-right: 0; } } .footer-widget--links::after { content: ""; width: 1px; height: 116%; position: absolute; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.19); } @media (max-width: 991px) { .footer-widget--links::after { display: none; } } .footer-widget--contact { padding-right: 66px; padding-top: 93px; padding-bottom: 66px; position: relative; } @media (max-width: 1199px) { .footer-widget--contact { padding-right: 0px; } } @media (max-width: 991px) { .footer-widget--contact { padding-top: 0px; padding-bottom: 0px; } } .main-footer-one { padding-top: 143px; } /*-------------------------------------------------------------- # Contact --------------------------------------------------------------*/ .contact-one { padding: 120px 0px; } @media (max-width: 991px) { .contact-one { padding: 100px 0px; } } @media (max-width: 767px) { .contact-one { padding: 80px 0px; } } .contact-one__form__top .sec-title__title { font-style: normal; font-weight: 700; font-size: 40px; line-height: 125%; } .contact-one .form-one__group .solinom-btn { padding: 11px 44px; } .contact-one .form-one__group textarea { height: 320px; } .contact-one__right { position: relative; z-index: 1; } .contact-one__content { position: relative; z-index: 1; background-color: var(--solinom-base, #CBA36B); padding-top: 1px; margin-top: 40px; } .contact-one__content__top { position: relative; } .contact-one__content__title { font-style: normal; font-weight: 600; font-size: 20px; line-height: normal; text-transform: capitalize; color: var(--solinom-white, #fff); display: inline-block; padding: 22px 50px 38px; background-color: var(--solinom-gray2, #283E46); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%); margin-right: 40px; margin-top: -30px; margin-bottom: 0px; transform: translateY(-10px); } @media (max-width: 400px) { .contact-one__content__title { padding: 15px 30px 20px; margin-right: 15px; } } .contact-one__content ul > li { display: flex; align-items: center; justify-content: start; gap: 16px; padding: 20px 40px; } @media (max-width: 400px) { .contact-one__content ul > li { padding: 10px 20px; } } .contact-one__content li + li { border-top: 1px solid rgba(255, 251, 251, 0.2); } .contact-one__content__icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--solinom-base, #CBA36B); background-color: var(--solinom-gray, #1C2F36); } @media (max-width: 400px) { .contact-one__content__icon { width: 40px; height: 40px; } } .contact-one__content__subtitle { font-style: normal; font-weight: 500; font-size: 14px; line-height: normal; color: var(--solinom-white, #fff); display: block; } .contact-one__content__link { font-style: normal; font-weight: 600; font-size: 18px; line-height: normal; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-white, #fff); background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .contact-one__content__link:hover { background-size: 100% 1px; } @media (max-width: 400px) { .contact-one__content__link { font-size: 16px; } } .contact-one__content__thumb { margin: 0px 10px 10px; position: relative; background-color: var(--solinom-white, #fff); } .contact-one__content__thumb img { position: relative; margin-right: -55px; margin-top: -20px; } @media (max-width: 1199px) and (min-width: 992px) { .contact-one__content__thumb img { object-fit: cover; width: 100%; } } @media (max-width: 575px) { .contact-one__content__thumb img { object-fit: cover; width: 100%; } } .contact-one__content__social { display: flex; align-items: end; justify-content: end; gap: 8px; padding: 13px 30px; position: relative; } .contact-one__content__social a { display: flex; justify-content: center; align-items: center; font-size: 12px; max-width: 30px; width: 100%; height: 30px; border-radius: 50%; color: var(--solinom-base, #CBA36B); background-color: var(--solinom-gray, #1C2F36); } .contact-one__content__social a:hover { color: var(--solinom-white, #fff); } .contact-one__content__social::after { content: ""; position: absolute; right: 0; top: 0; bottom: -1px; left: 193px; background-color: var(--solinom-white, #fff); clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%); } /*-------------------------------------------------------------- # Topbar --------------------------------------------------------------*/ /***Top Bar Two***/ .topbar-two { background-color: var(--solinom-base, #CBA36B); position: relative; z-index: 1; } @media (max-width: 991px) { .topbar-two { display: none; } } .topbar-two .container-fluid { max-width: 1730px; width: 100%; } .topbar-two__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .topbar-two__inner__right { display: flex; align-items: center; padding-right: 33px; position: relative; } .topbar-two__info { margin-bottom: 0; margin-right: 0; display: flex; align-items: center; gap: 25px; } .topbar-two__info__item { display: flex; align-items: center; gap: 5px; } .topbar-two__info__icon { font-size: 8px; color: var(--solinom-white, #fff); display: flex; justify-content: center; align-items: center; line-height: 0; width: 20px; height: 20px; background-color: var(--solinom-gray, #1C2F36); border-radius: 50%; } .topbar-two__info__location { text-transform: capitalize; } .topbar-two__info__contact, .topbar-two__info__location { font-style: normal; font-weight: 600; font-size: 14px; line-height: 129%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-white, #fff); transition: all 0.4s ease-in-out; } .topbar-two__info__contact { background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .topbar-two__info__contact:hover { background-size: 100% 1px; } .topbar-two__info__contact:hover { color: var(--solinom-text, #101D22); } .topbar-two__item { margin-right: 0; margin-bottom: 0; display: flex; align-items: center; } @media (max-width: 1199px) { .topbar-two__item { display: none; } } .topbar-two__item__text { font-style: normal; font-weight: 600; font-size: 14px; line-height: 129%; color: var(--solinom-white, #fff); transition: all 0.4s ease-in-out; } .topbar-two__item__text:hover { color: var(--solinom-text, #101D22); } .topbar-two__item li + li { margin-right: 25px; } .topbar-two__social { padding: 14.5px 20px 14.5px 0px; margin-right: 20px; border-right: 1px solid rgba(255, 255, 255, 0.1); line-height: 1; } @media (max-width: 1199px) { .topbar-two__social { border-color: transparent; margin-right: 0; padding-right: 0; } } .topbar-two__social a { font-size: 14px; color: var(--solinom-white, #fff); line-height: 0; transition: all 0.4s ease-in-out; } .topbar-two__social a:hover { color: var(--solinom-text, #101D22); } .topbar-two__social a + a { margin-right: 20px; } /***Top Bar Three***/ .topbar-three { background-color: var(--solinom-gray, #1C2F36); position: relative; z-index: 1; } @media (max-width: 991px) { .topbar-three { display: none; } } .topbar-three .container-fluid { max-width: 1730px; width: 100%; } .topbar-three--one .topbar-three__inner__right { background-color: transparent; } .topbar-three--one .topbar-three__inner__right::before { display: none; } .topbar-three__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .topbar-three__inner__right { display: flex; align-items: center; background-color: var(--solinom-gray2, #283E46); padding-right: 33px; position: relative; } .topbar-three__inner__right::before { content: ""; background-color: var(--solinom-gray2, #283E46); width: 9999999px; height: 100%; position: absolute; top: 0; right: 99%; z-index: -1; } .topbar-three__info { margin-bottom: 0; margin-right: 0; display: flex; align-items: center; gap: 25px; } .topbar-three__info__item { display: flex; align-items: center; gap: 5px; } .topbar-three__info__icon { font-size: 14px; color: var(--solinom-base, #CBA36B); line-height: 0; } .topbar-three__info__location { text-transform: capitalize; } .topbar-three__info__contact, .topbar-three__info__location { font-style: normal; font-weight: 600; font-size: 14px; line-height: 129%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .topbar-three__info__contact { background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .topbar-three__info__contact:hover { background-size: 100% 1px; } .topbar-three__info__contact:hover { color: var(--solinom-base, #CBA36B); } .topbar-three__item { margin-right: 0; margin-bottom: 0; display: flex; align-items: center; } @media (max-width: 1199px) { .topbar-three__item { display: none; } } .topbar-three__item__text { font-style: normal; font-weight: 600; font-size: 14px; line-height: 129%; color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .topbar-three__item__text:hover { color: var(--solinom-base, #CBA36B); } .topbar-three__item li + li { margin-right: 25px; } .topbar-three__social { padding: 14.5px 20px 14.5px 0px; margin-right: 20px; border-right: 1px solid rgba(255, 255, 255, 0.1); line-height: 1; } @media (max-width: 1199px) { .topbar-three__social { border-color: transparent; margin-right: 0; padding-right: 0; } } .topbar-three__social a { font-size: 14px; color: var(--solinom-white, #fff); line-height: 0; transition: all 0.4s ease-in-out; } .topbar-three__social a:hover { color: var(--solinom-base, #CBA36B); } .topbar-three__social a + a { margin-right: 20px; } /***Top Bar Fore***/ .topbar-fore { background-color: var(--solinom-white, #fff); position: relative; z-index: 1; border-bottom: 1px solid rgba(var(--solinom-text-gray-rgb, 125, 139, 144), 0.2); } @media (max-width: 991px) { .topbar-fore { display: none; } } .topbar-fore .container-fluid { max-width: 1580px; width: 100%; } .topbar-fore__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .topbar-fore__inner__right { display: flex; align-items: center; background-color: transparent; padding-right: 33px; position: relative; } .topbar-fore__info { margin-bottom: 0; margin-right: 0; display: flex; align-items: center; gap: 25px; } .topbar-fore__info__item { display: flex; align-items: center; gap: 5px; } .topbar-fore__info__icon { font-size: 13px; color: var(--solinom-base, #CBA36B); line-height: 0; } .topbar-fore__info__location { text-transform: capitalize; } .topbar-fore__info__contact, .topbar-fore__info__location { font-style: normal; font-weight: 600; font-size: 14px; line-height: 129%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .topbar-fore__info__contact { background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .topbar-fore__info__contact:hover { background-size: 100% 1px; } .topbar-fore__info__contact:hover { color: var(--solinom-base, #CBA36B); } .topbar-fore__item { margin-right: 0; margin-bottom: 0; display: flex; align-items: center; } @media (max-width: 1199px) { .topbar-fore__item { display: none; } } .topbar-fore__item__text { font-style: normal; font-weight: 500; font-size: 13px; line-height: 120%; color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .topbar-fore__item__text:hover { color: var(--solinom-base, #CBA36B); } .topbar-fore__item li + li { margin-right: 25px; } .topbar-fore__social { padding: 14.5px 20px 14.5px 0px; margin-right: 20px; border-right: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.1); line-height: 1; } @media (max-width: 1199px) { .topbar-fore__social { border-color: transparent; margin-right: 0; padding-right: 0; } } .topbar-fore__social a { font-size: 14px; color: var(--solinom-base, #CBA36B); line-height: 0; transition: all 0.4s ease-in-out; } .topbar-fore__social a:hover { color: var(--solinom-text, #101D22); } .topbar-fore__social a + a { margin-right: 20px; } /*-------------------------------------------------------------- # Navigations --------------------------------------------------------------*/ .main-header .container-fluid { max-width: 1730px; width: 100%; } .main-header__inner { display: flex; align-items: center; position: relative; } .main-header__logo { display: flex; align-items: center; } @media (min-width: 768px) { .main-header__logo { width: auto; } } .main-header__right { display: flex; align-items: center; border-right: 1px solid var(--solinom-border-color, #FAF6F0); margin-right: 10px; padding: 29px 0; background-color: var(--solinom-base, #CBA36B); padding-right: 35px; z-index: 1; position: relative; } .main-header__right__call { display: flex; align-items: center; gap: 15px; margin-left: 25px; } @media (max-width: 1450px) { .main-header__right__call { margin-left: 0px; } } @media (max-width: 575px) { .main-header__right__call { display: none; } } .main-header__right__call__icon { width: 40px; height: 40px; display: flex; border-radius: 50%; align-items: center; justify-content: center; background-color: var(--solinom-text, #101D22); color: var(--solinom-base, #CBA36B); line-height: 0; font-size: 18px; transition: all 0.4s ease-in-out; } .main-header__right__call__subtitle { display: block; font-style: normal; font-weight: 500; font-size: 12px; line-height: 120%; color: var(--solinom-white, #fff); margin-bottom: 0px; opacity: 0.5; } .main-header__right__call__title { font-style: normal; font-weight: 700; font-size: 16px; line-height: 188%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-white, #fff); background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; transition: all 0.4s ease-in-out; } .main-header__right__call__title:hover { background-size: 100% 1px; } .main-header__right__call__title:hover { color: var(--solinom-text-dark, #15262C); } .main-header__right__call:hover .main-header__right__call__icon { background-color: var(--solinom-white, #fff); color: var(--solinom-base, #CBA36B); } .main-header__right::before { content: ""; background-color: var(--solinom-base, #CBA36B); width: 9999999px; height: 100%; position: absolute; top: 0; right: 99%; z-index: -1; } .main-header__btn { padding: 11px 32px; font-style: normal; font-weight: 600; font-size: 14px; line-height: 18px; text-transform: capitalize; color: var(--solinom-white, #fff); background-color: rgba(255, 255, 255, 0.2); } .main-header__btn:hover { color: var(--solinom-white, #fff); } .main-header__btn::after { background-color: var(--solinom-gray2, #283E46); } @media (max-width: 1450px) { .main-header__btn { display: none; } } .main-header__btn + .main-header__info { margin-right: 16px; padding-right: 25px; border-right: 1px solid rgba(255, 255, 255, 0.2); } @media (max-width: 575px) { .main-header__btn + .main-header__info { margin-right: 0px; padding-right: 0px; border-color: transparent; display: flex; } } .main-header__info { display: flex; align-items: center; gap: 10px; } .main-header__info__item { width: 44px; height: 44px; color: var(--solinom-white, #fff); transition: all 500ms ease; background: rgba(255, 255, 255, 0.2); border-radius: 100px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 0; } .main-header__info__item:hover { background-color: var(--solinom-gray2, #283E46); color: var(--solinom-base, #CBA36B); } .main-header__nav { margin-right: auto; margin-left: auto; } .main-header--one { background-color: var(--solinom-text-dark, #15262C); padding-top: 50px; transition: background-color 0.4s ease-out; } @media (max-width: 991px) { .main-header--one { padding-top: 20px; } } @media (max-width: 767px) { .main-header--one { padding-bottom: 20px; } } .main-header--one .main-header__logo { text-align: center; justify-content: center; padding-bottom: 8px; } .main-header--one .main-header__right { background-color: transparent; border-right: 0px solid transparent; padding-right: 0; } .main-header--one .main-header__btn { display: block; } @media (max-width: 575px) { .main-header--one .main-header__btn { display: none; } } .main-header--one .main-header__right::before { display: none; } .main-header--one .main-menu .main-menu__list > li > a { color: var(--solinom-text-gray, #7D8B90); } .main-header--one .main-menu .main-menu__list > li.current > a, .main-header--one .main-menu .main-menu__list > li:hover > a { color: var(--solinom-white, #fff); } .main-header--one .main-header__btn, .main-header--one .main-header__info__item { background-color: var(--solinom-gray2, #283E46); color: var(--solinom-base, #CBA36B); } .main-header--one .main-header__info a:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .main-header--one .main-header__right a:hover { color: var(--solinom-white, #fff); } .main-header--one .main-header__right a::after { background-color: var(--solinom-base, #CBA36B); } .main-header--one .main-menu__list ul { background-color: transparent !important; } .main-header--one .home-showcase__inner, .main-header--one .demo-one__card, .main-header--one .main-menu .main-menu__list li ul { background-color: var(--solinom-gray, #1C2F36); } .main-header--one .main-menu .main-menu__list li ul li > a { color: var(--solinom-text-gray, #7D8B90); } .main-header--one .main-menu .main-menu__list li ul li.current > a, .main-header--one .main-menu .main-menu__list li ul li:hover > a { background-color: var(--solinom-gray2, #283E46); } .main-header--one .demo-one__title { color: var(--solinom-text-gray, #7D8B90); } .main-header--one .mobile-nav__btn span { background-color: var(--solinom-white, #fff); } .main-header--one .main-header__nav .sub-menu { background-color: var(--solinom-gray, #1C2F36) !important; } .main-header--two { background-color: var(--solinom-gray, #1C2F36); } .main-header--two .main-header__logo { position: absolute; top: -1px; right: 44%; padding: 30px 30px 50px; clip-path: polygon(53% 0, 100% 0, 100% 100%, 50% 85%, 0 100%, 0 0); border: 1px solid var(--solinom-base, #CBA36B); background-color: var(--solinom-gray, #1C2F36); z-index: 22; transition: all 0.4s ease-in-out; } @media (max-width: 1450px) { .main-header--two .main-header__logo { right: 44%; } } @media (max-width: 1190px) { .main-header--two .main-header__logo { position: relative; padding: 0; right: 0; border: 0px solid transparent; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); } .main-header--two .main-header__logo::after, .main-header--two .main-header__logo::before { display: none; } } .main-header--two .main-header__logo::after, .main-header--two .main-header__logo::before { content: ""; width: 51%; height: 1px; background-color: var(--solinom-base, #CBA36B); position: absolute; bottom: 12px; } .main-header--two .main-header__logo::after { right: 0; transform: rotate(17deg); } .main-header--two .main-header__logo::before { left: 0; transform: rotate(-17deg); } .main-header--two .main-header__nav .sub-menu { background-color: var(--solinom-gray, #1C2F36) !important; } .main-header--two .main-header__inner { display: flex; align-items: center; justify-content: space-between; } .main-header--two .container { max-width: 1250px; margin-right: auto; margin-left: auto; } @media (max-width: 1450px) and (min-width: 1199px) { .main-header--two .main-header__btn + .main-header__info { margin-right: 0; padding-right: 0; border-color: transparent; } } .main-header--two .main-header__btn { display: block; } @media (max-width: 1450px) and (min-width: 1199px) { .main-header--two .main-header__btn { display: none; } } @media (max-width: 575px) { .main-header--two .main-header__btn { display: none; } } .main-header--two .main-header__middle { display: flex; align-items: center; gap: 275px; } @media (max-width: 767px) { .main-header--two .main-header__middle { gap: 0px; } } .main-header--two .main-menu__list ul { background-color: transparent !important; } .main-header--two .main-menu .main-menu__list > li > a { font-style: normal; font-weight: 500; font-size: 16px; line-height: 20px; color: var(--solinom-text-gray, #7D8B90); } .main-header--two .main-header__right { background-color: transparent; border-right: 0px solid transparent; margin-right: 0; } .main-header--two .main-header__right::before { background-color: transparent; } .main-header--two .main-header__btn, .main-header--two .main-header__info__item { background-color: var(--solinom-gray2, #283E46); color: var(--solinom-base, #CBA36B); } .main-header--two .main-header__info a:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .main-header--two .main-header__right a:hover { color: var(--solinom-white, #fff); } .main-header--two .main-header__right a::after { background-color: var(--solinom-base, #CBA36B); } .main-header--two .demo-one__title { color: var(--solinom-text-gray, #7D8B90); } .main-header--two .home-showcase__inner, .main-header--two .demo-one__card, .main-header--two .main-menu .main-menu__list li ul { background-color: var(--solinom-gray, #1C2F36); } .main-header--two .main-menu .main-menu__list li ul li > a { color: var(--solinom-text-gray, #7D8B90); } .main-header--two .main-menu .main-menu__list li ul li.current > a, .main-header--two .main-menu .main-menu__list li ul li:hover > a { background-color: var(--solinom-gray2, #283E46); } .main-header--two .mobile-nav__btn span { background-color: var(--solinom-white, #fff); } .main-header--three { background-color: var(--solinom-white, #fff); } .main-header--three .main-header__nav { margin-right: 205px; margin-left: auto; } @media (max-width: 1530px) { .main-header--three .main-header__nav { margin-right: 100px; } } @media (max-width: 1300px) { .main-header--three .main-header__nav { margin-right: 50px; } } @media (max-width: 767px) { .main-header--three .main-header__nav { margin-right: auto; } } .main-header--three .mobile-nav__btn span { background-color: var(--solinom-white, #fff); } .main-header--fore { position: relative; z-index: 2; } .main-header--fore::after { content: ""; width: 100%; position: absolute; bottom: 0; right: 0; height: 1px; background-color: rgba(125, 139, 144, 0.2); z-index: 1; } .main-header--fore .main-header__right__call__title { margin-top: -3px; font-size: 18px; } .main-header--fore .container-fluid { max-width: 1580px; } .main-header--fore .main-header__nav { margin-right: 113px; margin-left: auto; } .main-header--fore .main-header__btn { padding: 12.5px 32.5px; } .main-header--fore .main-header__btn::after { background-color: var(--solinom-base, #CBA36B); } .main-header--fore .main-header__info { margin-left: 30px; } .main-header--fore .main-header__right { background-color: var(--solinom-border-color, #FAF6F0); padding: 0 30px 0 0; } .main-header--fore .main-header__right::before { background-color: var(--solinom-gray, #1C2F36); } .main-header--fore .main-header__right__inner { background-color: var(--solinom-gray, #1C2F36); display: flex; align-items: center; padding: 32px 0 31px; padding-right: 35px; } .main-header--fore .main-header__right__call__icon { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .main-header--fore .main-header__right__call__subtitle, .main-header--fore .main-header__right__call__title { color: var(--solinom-text, #101D22); opacity: 1; } .main-header--fore .main-header__right__call:hover .main-header__right__call__icon { background-color: var(--solinom-text, #101D22); color: var(--solinom-white, #fff); } .main-header--fore .mobile-nav__btn span { background-color: var(--solinom-white, #fff); } .main-header--fore .mobile-nav__btn span:hover { background-color: var(--solinom-base, #CBA36B); } @media (max-width: 1450px) { .main-header--fore .main-header__btn + .main-header__info { margin-right: 0; padding-right: 0; border-right: 1px solid transparent; } .main-header--fore .main-header__right__inner { margin-right: 40px; } } .sticky-header--cloned { position: fixed; top: 0; right: 0; left: 0; z-index: 999; top: 0; background-color: var(--solinom-white, #fff); transform: translateY(-100%); box-shadow: 0px 3px 18px rgba(var(--solinom-black-rgb, 0, 0, 0), 0.07); transition: 0.6s cubic-bezier(0.24, 0.74, 0.58, 1); visibility: hidden; transition: transform 500ms ease, visibility 500ms ease; } .sticky-header--cloned.active { transform: translateY(0%); visibility: visible; } .main-header--one.sticky-header--cloned .main-header__logo { display: none; } .main-header--one.active { background-color: var(--solinom-text-dark, #15262C); box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding-top: 0; } .main-header--one.active .main-header__logo { display: none; } .main-header--two.sticky-header--cloned { background-color: var(--solinom-gray, #1C2F36); } .main-header--two.sticky-header--cloned .main-header__logo { position: relative; padding: 0; right: 0; border: 0px solid transparent; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 0); } .main-header--two.sticky-header--cloned .main-header__logo::after, .main-header--two.sticky-header--cloned .main-header__logo::before { display: none; } .main-header--two.sticky-header--cloned .main-header__middle { gap: 30px; } .mobile-nav__btn { width: 24px; display: flex; align-items: center; flex-direction: column; flex-wrap: wrap; cursor: pointer; z-index: 3; margin-right: 30px; margin-left: 10px; } @media (min-width: 1200px) { .mobile-nav__btn { display: none; } } .mobile-nav__btn span { width: 100%; height: 2px; background-color: var(--solinom-black, #000); } .mobile-nav__btn span:nth-child(2) { margin-top: 4px; margin-bottom: 4px; } .main-menu { /* after third level no menu */ } .main-menu .main-menu__list, .main-menu .main-menu__list ul { margin: 0; padding: 0; list-style-type: none; align-items: center; display: none; } @media (min-width: 1200px) { .main-menu .main-menu__list, .main-menu .main-menu__list ul { display: flex; } } .main-menu .main-menu__list > li { padding-top: 43px; padding-bottom: 43px; position: relative; } .main-menu .main-menu__list > li.dropdown > a { position: relative; } .main-menu .main-menu__list > li + li { margin-right: 23px; } .main-menu .main-menu__list > li > a { font-size: 16px; display: flex; align-items: center; text-transform: uppercase; position: relative; transition: all 500ms ease; font-style: normal; font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--solinom-text, #101D22); } .main-menu .main-menu__list > li.current > a, .main-menu .main-menu__list > li:hover > a { color: var(--solinom-base, #CBA36B); text-shadow: 0 0 0.5px currentColor; } .main-menu .main-menu__list li ul { position: absolute; top: 100%; right: -25px; min-width: 270px; flex-direction: column; justify-content: flex-start; align-items: flex-start; opacity: 0; visibility: hidden; transform-origin: top center; transform: scaleY(0) translateZ(100px); transition: opacity 500ms ease, visibility 500ms ease, transform 700ms ease; z-index: 99; background-color: var(--solinom-border-color, #FAF6F0); padding: 15px 20px 11px; box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07); } .main-menu .main-menu__list li:hover > ul { opacity: 1; visibility: visible; transform: scaleY(1) translateZ(0px); } .main-menu .main-menu__list > .megamenu { position: static; } .main-menu .main-menu__list > .megamenu > ul { top: 100% !important; right: 0 !important; left: 0 !important; background-color: transparent; box-shadow: none; padding: 0; } .main-menu .main-menu__list li ul li { flex: 1 1 100%; width: 100%; position: relative; } .main-menu .main-menu__list li ul li > a { font-size: 16px; line-height: 26px; color: var(--solinom-text, #101D22); font-weight: 500; display: flex; text-transform: uppercase; padding: 8px 20px; transition: 400ms; margin-bottom: 4px; } .main-menu .main-menu__list li ul li.current > a, .main-menu .main-menu__list li ul li:hover > a { background-color: var(--solinom-white, #fff); color: var(--solinom-base, #CBA36B); font-weight: 500; } .main-menu .main-menu__list li ul li > ul { top: 0; right: calc(100% + 20px); } .main-menu .main-menu__list li ul li > ul.right-align { top: 0; right: auto; left: 100%; } .main-menu .main-menu__list li ul li > ul ul { display: none; } .main-menu .sub-menu .dropdown::before { position: absolute; left: 20px; top: 14px; transform: translate(-10px 10px); font-size: 14px; font-weight: 600; color: var(--solinom-base, #CBA36B); visibility: hidden; opacity: 0; transition: all 500ms ease; transform: scaleX(0); font-family: "icomoon" !important; content: "\e935"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; } .main-menu .sub-menu .dropdown:hover::before { visibility: visible; opacity: 1; transform: scaleX(1); } @media (min-width: 1200px) and (max-width: 1400px) { .main-menu__list li:nth-last-child(1) ul li > ul, .main-menu__list li:nth-last-child(2) ul li > ul { right: auto; left: calc(100% + 20px); } } /*-------------------------------------------------------------- # Megamenu Popup --------------------------------------------------------------*/ .mobile-nav__container .main-menu__list > .megamenu.megamenu-clickable > ul, .main-menu .main-menu__list > .megamenu.megamenu-clickable > ul, .stricky-header .main-menu__list > .megamenu.megamenu-clickable > ul { position: fixed; top: 0 !important; right: 0 !important; width: 100vw; height: 100vh; visibility: visible; overflow-y: scroll; visibility: hidden; opacity: 0; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: bottom center; transform-origin: bottom center; transition: transform 0.7s ease, opacity 0.7s ease, visibility 0.7s ease; z-index: 999999; -ms-overflow-style: none; scrollbar-width: none; overflow-y: scroll; padding: 0; background-color: var(--solinom-white, #fff); display: block !important; margin: 0; } .main-menu__list > li.megamenu-clickable > ul::-webkit-scrollbar { display: none; } .mobile-nav__container .main-menu__list > .megamenu.megamenu-clickable > ul.megamenu-clickable--active, .main-menu .main-menu__list > .megamenu.megamenu-clickable > ul.megamenu-clickable--active, .stricky-header .main-menu__list > .megamenu.megamenu-clickable > ul.megamenu-clickable--active { -webkit-transform-origin: top center; transform-origin: top center; -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; visibility: visible; transition: transform 0.7s ease, opacity 0.7s ease, visibility 0.7s ease; } body.megamenu-popup-active { overflow: hidden; } body.megamenu-popup-active .stricky-header { bottom: 0; } body.megamenu-popup-active .mobile-nav__content { overflow: unset; } .mobile-nav__content .demo-one .container { padding-right: 15px; padding-left: 15px; } .megamenu-popup { position: relative; } .megamenu-popup .megamenu-clickable--close { position: absolute; top: 18px; left: 20px; display: block; color: var(--solinom-black, #000); } @media (min-width: 1300px) { .megamenu-popup .megamenu-clickable--close { top: 38px; left: 40px; } } .megamenu-popup .megamenu-clickable--close:hover { color: var(--solinom-base, #CBA36B); } .megamenu-popup .megamenu-clickable--close span { width: 24px; height: 24px; display: block; position: relative; color: currentColor; transition: all 500ms ease; } .megamenu-popup .megamenu-clickable--close span::before, .megamenu-popup .megamenu-clickable--close span::after { content: ""; width: 100%; height: 2px; background-color: currentColor; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%) rotate(45deg); } .megamenu-popup .megamenu-clickable--close span::after { transform: translate(50%, -50%) rotate(-45deg); } /*-------------------------------------------------------------- # Home Showcase --------------------------------------------------------------*/ .demo-one { padding-top: 120px; padding-bottom: 120px; } .demo-one .row { --bs-gutter-y: 30px; } .demo-one__card { background-color: var(--solinom-white, #fff); box-shadow: 0px 10px 60px 0px rgba(var(--solinom-text-rgb, 16, 29, 34), 0.1); text-align: center; transition: 500ms ease; transform: translateY(0px); } .demo-one__card:hover { transform: translateY(-10px); } .demo-one__title { margin: 0; text-transform: uppercase; font-size: 16px; color: var(--solinom-text, #101D22); font-weight: 600; font-family: var(--solinom-font, "Plus Jakarta Sans", sans-serif); } .demo-one__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .demo-one__title a:hover { background-size: 100% 1px; } .demo-one__image { position: relative; overflow: hidden; } .demo-one__image img { max-width: 100%; transition: filter 500ms ease; filter: blur(0px); } .demo-one__card:hover .demo-one__image img { filter: blur(2px); } .demo-one__btns { background-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.7); position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 20px; transform: scale(1, 0); transition: transform 500ms ease, opacity 600ms linear; transform-origin: bottom center; opacity: 0; } .demo-one__card:hover .demo-one__btns { transform: scale(1, 1); opacity: 1; transform-origin: top center; } .demo-one__btn { font-size: 14px; padding: 9px 29px; background-color: var(--solinom-base, #CBA36B); } .demo-one__btn::after { background-color: var(--solinom-gray2, #283E46); } .demo-one__btn:hover { color: var(--solinom-white, #fff); } @media (min-width: 768px) { .demo-one__btn { display: inline-flex; } } .demo-one__title { padding-top: 20.5px; padding-bottom: 20.5px; } .home-showcase { margin-top: -20px; margin-bottom: -20px; } .home-showcase .row { --bs-gutter-x: 42px; --bs-gutter-y: 20px; } .home-showcase__inner { padding: 40px 40px 21px; background-color: var(--solinom-white, #fff); box-shadow: 0px 10px 60px 0px rgba(var(--solinom-text-rgb, 16, 29, 34), 0.07); } .home-showcase .demo-one__card { box-shadow: none; } .home-showcase .demo-one__btns { flex-direction: column; } .home-showcase .demo-one__btn { min-width: 135px; text-align: center; justify-content: center; } .home-showcase .demo-one__title { padding: 0; font-size: 16px; margin-top: 15px; padding-bottom: 15px; } /*-------------------------------------------------------------- # Why choose --------------------------------------------------------------*/ /**** Why Choose One Style****/ .why-choose-one { position: relative; z-index: 1; padding: 120px 0px 145px; background-color: var(--solinom-text-dark, #15262C); } @media (max-width: 991px) { .why-choose-one { padding: 100px 0px; } } @media (max-width: 767px) { .why-choose-one { padding: 80px 0px; } } .why-choose-one__bg { position: absolute; right: 0; top: 0; width: 100%; height: 630px; background-position: right top; background-repeat: repeat; background-size: auto; z-index: -1; } .why-choose-one__bg::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background: var(--solinom-text, #101D22); opacity: 0.9; } .why-choose-one__inner { margin-top: 50px; margin-bottom: 50px; width: 100%; height: 100%; background-position: right top; background-repeat: no-repeat; background-size: auto; z-index: -1; display: flex; justify-content: center; } @media (max-width: 991px) { .why-choose-one__inner { flex-direction: column; margin-top: 0; } } .why-choose-one__item { flex: 33.333%; position: relative; } .why-choose-one__item { position: relative; z-index: 1; } .why-choose-one__item__title { font-style: normal; font-weight: 500; font-size: 30px; line-height: 133%; margin-bottom: 20px; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); } @media (max-width: 1199px) and (min-width: 992px) { .why-choose-one__item__title { font-size: 20px; } } .why-choose-one__item__btn { padding: 4px 20px; font-size: 14px; border: 1px solid transparent; } .why-choose-one__item__btn:hover { color: var(--solinom-white, #fff); border-color: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.4); } .why-choose-one__item__list { padding-right: 0; margin-bottom: 0; } .why-choose-one__item__list li { display: flex; align-items: center; gap: 20px; position: relative; z-index: 1; } @media (max-width: 500px) { .why-choose-one__item__list li { flex-direction: column; justify-content: start; align-items: start; } } .why-choose-one__item__list li + li { margin-top: 83px; } .why-choose-one__item__list li + li::after { content: ""; width: 100%; height: 33px; position: absolute; top: -55px; right: 0; background-repeat: no-repeat; background-position: right top; background-size: contain; background-image: url(../images/shapes/why-choose-1-4.png); } .why-choose-one__item__icon { max-width: 80px; width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 40px; color: var(--solinom-base, #CBA36B); background-color: var(--solinom-text, #101D22); transition: all 0.4s ease-in-out; } @media (max-width: 1199px) and (min-width: 992px) { .why-choose-one__item__icon { font-size: 20px; max-width: 50px; height: 50px; } } .why-choose-one__item__content__title { font-style: normal; font-weight: 600; font-size: 20px; line-height: 25px; margin-bottom: 10px; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); } .why-choose-one__item__content__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 150%; margin-bottom: -4px; padding-bottom: 0; } @media (max-width: 1199px) and (min-width: 992px) { .why-choose-one__item__content__text { font-size: 15px; } } .why-choose-one__item li:hover .why-choose-one__item__icon { background-color: var(--solinom-base, #CBA36B); } .why-choose-one__item li:hover .why-choose-one__item__icon i { animation: bounceIn 1s linear; color: var(--solinom-white, #fff); } .why-choose-one__left { position: absolute; width: 100%; bottom: 0; right: 0; background-color: var(--solinom-text, #101D22); padding: 50px 40px; } @media (max-width: 991px) { .why-choose-one__left { position: relative; } } .why-choose-one__middle { padding: 80px 45px 80px 40px; position: relative; z-index: 1; } @media (max-width: 1199px) and (min-width: 992px) { .why-choose-one__middle { padding: 80px 20px 80px 20px; } } @media (max-width: 575px) { .why-choose-one__middle { padding: 50px 20px 50px 20px; } } .why-choose-one__middle::after { width: 100%; height: 100%; background: linear-gradient(-180deg, #1D363F 18.55%, #101D22 111.81%); opacity: 0.95; content: ""; position: absolute; top: 0; right: 0; } .why-choose-one__middle__element-one { position: absolute; top: -48px; right: -69px; } @media (max-width: 1199px) { .why-choose-one__middle__element-one { right: 0; bottom: -40px; } .why-choose-one__middle__element-one img { object-fit: cover; width: 100%; } } @media (max-width: 991px) { .why-choose-one__middle__element-one { display: none; } } .why-choose-one__middle__element-two { position: absolute; bottom: -48px; right: -69px; } @media (max-width: 1199px) { .why-choose-one__middle__element-two { right: 0; bottom: -40px; } .why-choose-one__middle__element-two img { object-fit: cover; width: 100%; } } @media (max-width: 991px) { .why-choose-one__middle__element-two { display: none; } } .why-choose-one__middle__shape-one { position: absolute; top: 0; right: 50%; transform: translateX(50%); z-index: 1; } @media (max-width: 991px) { .why-choose-one__middle__shape-one { display: none; } } .why-choose-one__middle__shape-two { position: absolute; bottom: 0; right: 50%; transform: translateX(50%); z-index: 1; } @media (max-width: 991px) { .why-choose-one__middle__shape-two { display: none; } } .why-choose-one__middle::before { content: ""; width: 83px; height: 19px; clip-path: polygon(50% 100%, 0 0, 100% 0); position: absolute; background-color: var(--solinom-base, #CBA36B); position: absolute; bottom: -66px; right: 50%; transform: translateX(50%); } @media (max-width: 991px) { .why-choose-one__middle::before { display: none; } } .why-choose-one__item__funfact__icon { width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; font-size: 38px; color: var(--solinom-base, #CBA36B); justify-content: center; background-color: var(--solinom-gray, #1C2F36); margin-right: auto; margin-left: auto; margin-bottom: 20px; } .why-choose-one__item__funfact__count { display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 600; font-size: 40px; line-height: 75%; margin-bottom: 12px; padding-bottom: 0; color: var(--solinom-white, #fff); } .why-choose-one__item__funfact__text { font-style: normal; font-weight: 500; font-size: 20px; line-height: 150%; text-align: center; color: var(--solinom-white, #fff); padding-bottom: 0; margin-bottom: -4px; } .why-choose-one__right { position: absolute; top: 110px; right: 60px; left: 60px; bottom: 110px; z-index: 1; padding: 80px 42px; } @media (max-width: 1199px) and (min-width: 992px) { .why-choose-one__right { right: 10px; left: 10px; } } @media (max-width: 991px) { .why-choose-one__right { top: 0px; right: 0px; left: 0px; bottom: 0px; position: relative; } } .why-choose-one__right::after { background: linear-gradient(-180deg, #CBA36B 0%, #15262C 100%); opacity: 0.9; width: 100%; height: 100%; content: ""; position: absolute; top: 0; right: 0; z-index: -1; } /*-------------------------------------------------------------- # Funfact --------------------------------------------------------------*/ /**Funfact One**/ .funfact-one { padding-bottom: 120px; } @media (max-width: 991px) { .funfact-one { padding-bottom: 100px; } } @media (max-width: 767px) { .funfact-one { padding-bottom: 80px; } } .funfact-one__list { margin-bottom: 0; display: flex; align-items: center; background-color: var(--solinom-border-color, #FAF6F0); justify-content: space-between; } @media (max-width: 991px) { .funfact-one__list { flex-wrap: wrap; } } @media (max-width: 575px) { .funfact-one__list { padding-top: 60px; padding-bottom: 60px; } } .funfact-one__item { padding: 50px 30px; flex: 25%; position: relative; z-index: 1; } @media (max-width: 991px) { .funfact-one__item { flex: 50%; } } @media (max-width: 575px) { .funfact-one__item { flex: 100%; padding: 0px 30px; } } .funfact-one__item:hover .funfact-one__icon { background-color: var(--solinom-gray, #1C2F36); color: var(--solinom-white, #fff); } .funfact-one__item:hover .funfact-one__icon i { animation: bounceIn 1s linear; } .funfact-one__item + .funfact-one__item { position: relative; z-index: 1; } .funfact-one__item + .funfact-one__item::after { content: ""; width: 1px; height: 100%; position: relative; z-index: 1; position: absolute; top: 0; right: 0px; background-color: #EBE6DE; } @media (max-width: 575px) { .funfact-one__item + .funfact-one__item::after { background-color: transparent; } } @media (max-width: 575px) { .funfact-one__item + .funfact-one__item { margin-top: 30px; } } .funfact-one__icon { width: 100px; height: 100px; background-color: var(--solinom-base, #CBA36B); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 48px; color: var(--solinom-white, #fff); margin-right: auto; margin-left: auto; margin-bottom: 25px; transition: all 0.4s ease-in-out; } .funfact-one__content { text-align: center; } .funfact-one__count { display: flex; justify-content: center; align-items: center; font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; margin-bottom: 10px; padding-bottom: 0; } .funfact-one__count span { font-style: normal; font-weight: 700; font-size: 40px; line-height: 1; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text, #101D22); } .funfact-one__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: normal; margin-bottom: -3px; padding-bottom: 0; } /*-------------------------------------------------------------- # Room --------------------------------------------------------------*/ /**Room Card**/ .room-card { background-color: var(--solinom-white, #fff); position: relative; } .room-card__thumb { position: relative; overflow: hidden; z-index: 1; } .room-card__thumb img { object-fit: cover; width: 100%; transform: scale(1) rotate(0deg); transition: all 0.4s ease-in-out; } .room-card__thumb::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.7); z-index: 0; transform: translateY(-70%); opacity: 0; transition: all 0.4s ease-in-out; } .room-card__feature { background-color: var(--solinom-white, #fff); font-style: normal; font-weight: 700; font-size: 10px; line-height: 180%; text-transform: uppercase; color: var(--solinom-gray2, #283E46); padding: 4.5px 11px; position: absolute; top: 20px; right: 20px; margin-bottom: 0; transition: all 0.4s ease-in-out; z-index: 1; } .room-card__feature:hover { background: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .room-card__love { width: 32px; height: 32px; z-index: 1; background-color: var(--solinom-white, #fff); font-size: 15px; color: var(--solinom-text-gray, #7D8B90); display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; line-height: 0; top: 20px; left: 20px; cursor: pointer; transition: all 0.4s ease-in-out; } .room-card__love .active { color: var(--solinom-base, #CBA36B); } .room-card__love:hover { background-color: var(--solinom-text, #101D22); } .room-card__top { padding: 0px 30px; width: 100%; background-color: var(--solinom-gray, #1C2F36); } .room-card__top__inner { margin-top: -40px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; margin-bottom: -44px; } .room-card__top__popup { display: flex; align-items: center; gap: 4px; } .room-card__top__popup__item { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; background-color: var(--solinom-base, #CBA36B); font-size: 14px; color: var(--solinom-white, #fff); line-height: 0; transition: all 0.4s ease-in-out; } .room-card__top__popup__item:hover { background-color: var(--solinom-white, #fff); color: var(--solinom-base, #CBA36B); } .room-card__top__price { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: var(--solinom-base, #CBA36B); transition: all 0.4s ease-in-out; } .room-card__top__price__content { font-style: normal; font-weight: 600; font-size: 20px; line-height: normal; display: block; color: var(--solinom-white, #fff); } .room-card__top__price__text { margin-bottom: 0; padding-bottom: 0; font-style: normal; font-weight: 500; font-size: 14px; line-height: normal; color: var(--solinom-white, #fff); } .room-card__content { position: relative; background-color: var(--solinom-gray, #1C2F36); padding: 30px; padding-top: 40px; overflow: hidden; z-index: 1; transition: all 0.4s ease-in-out; } .room-card__content__inner__element { width: 98px; height: 98px; position: absolute; border-radius: 100px; top: -45px; left: 24px; background: rgba(var(--solinom-gray2-rgb, 40, 62, 70), 1); z-index: 1; transition: all 0.5s ease; } .room-card__content__title { font-style: normal; font-weight: 600; font-size: 24px; line-height: normal; margin-bottom: 7px; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); } .room-card__content__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .room-card__content__title a:hover { background-size: 100% 1px; } .room-card__content__title a:hover { color: var(--solinom-text, #101D22); } .room-card__content__text { font-style: normal; font-weight: 500; font-size: 14px; line-height: 171%; margin-bottom: 10px; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); max-width: 254px; width: 100%; transition: all 0.4s ease-in-out; } .room-card__content__star { display: flex; align-items: center; justify-content: space-between; padding: 5px 20px; border: 1px solid var(--solinom-gray2, #283E46); margin-bottom: 20px; transition: all 0.4s ease-in-out; } .room-card__content__star__item { font-size: 17px; color: var(--solinom-base, #CBA36B); letter-spacing: -1px; } .room-card__content__star__item i { transition: all 0.4s ease-in-out; } .room-card__content__star__parson { font-style: normal; font-weight: 500; font-size: 14px; line-height: 171%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .room-card__content__star__parson strong { color: var(--solinom-white, #fff); transition: all 0.4s ease-in-out; } .room-card__content__btn { font-style: normal; font-weight: 500; font-size: 14px; line-height: 171%; text-transform: uppercase; color: var(--solinom-white, #fff); background-color: var(--solinom-text-dark, #15262C); padding: 9.5px 22px; border: 1px solid transparent; } .room-card__content__btn:hover { color: var(--solinom-white, #fff); border-color: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.2); } .room-card__content__element { position: absolute; opacity: 0; visibility: hidden; bottom: 0; transform: translateY(200px); transition-delay: 1400ms; transition: all 800ms ease-in-out; z-index: -1; } .room-card:hover .room-card__top__popup a { background-color: var(--solinom-gray, #1C2F36); } .room-card:hover .room-card__top__price { background-color: var(--solinom-gray, #1C2F36); } .room-card:hover .room-card__content { background-color: var(--solinom-base, #CBA36B); } .room-card:hover .room-card__content__inner__element { background: rgba(var(--solinom-gray2-rgb, 40, 62, 70), 0.2); } .room-card:hover .room-card__content__text, .room-card:hover .room-card__content__star__item i, .room-card:hover .room-card__content__star__parson strong { color: var(--solinom-white, #fff); } .room-card:hover .room-card__content__star { border-color: transparent; background-color: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.16); } .room-card:hover .room-card__content__star__parson { color: var(--solinom-text-dark, #15262C); } .room-card:hover .room-card__content__element { opacity: 1; visibility: visible; transform: translateY(0px); } .room-card:hover .room-card__thumb img { transform: scale(1.1) rotate(-5deg); } .room-card:hover .room-card__thumb::after { opacity: 1; transform: translateY(0); } /**Room Card List**/ .room-list-card { position: relative; z-index: 1; background: var(--solinom-white, #fff); box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1); } .room-list-card__image { position: relative; z-index: 1; overflow: hidden; } .room-list-card__image img { object-fit: cover; width: 100%; transform: scale(1) rotate(0deg); transition: all 0.5s ease-in-out; } .room-list-card__like { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--solinom-text-gray, #7D8B90); background-color: var(--solinom-white, #fff); position: absolute; top: 20px; left: 20px; transition: all 0.4s ease-in-out; } .room-list-card__like:hover { color: var(--solinom-base, #CBA36B); background-color: var(--solinom-gray, #1C2F36); } .room-list-card__label { font-style: normal; font-weight: 700; font-size: 10px; line-height: 180%; text-transform: uppercase; color: var(--solinom-gray2, #283E46); padding: 5px 10px; display: inline-block; position: absolute; top: 20px; right: 20px; background-color: var(--solinom-white, #fff); } .room-list-card__title { font-style: normal; font-weight: 600; font-size: 24px; line-height: normal; text-transform: capitalize; text-shadow: 0 0 0.1px currentColor; margin-bottom: 10px; } .room-list-card__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .room-list-card__title a:hover { background-size: 100% 1px; } .room-list-card__title a:hover { color: var(--solinom-base, #CBA36B); } .room-list-card__price { font-style: normal; font-weight: 600; font-size: 24px; line-height: normal; color: var(--solinom-base, #CBA36B); text-transform: capitalize; margin-bottom: 8px; } .room-list-card__price__shift { font-style: normal; font-weight: 500; font-size: 16px; line-height: normal; color: var(--solinom-text-gray, #7D8B90); } .room-list-card__content { padding: 30px 20px 30px 50px; } .room-list-card__content__inner { display: flex; align-items: start; justify-content: space-between; } @media (max-width: 575px) { .room-list-card__content__inner { flex-direction: column; gap: 5px; margin-bottom: 10px; } } .room-list-card__content__right { display: flex; align-items: center; gap: 18px; } @media (max-width: 1199px) and (min-width: 992px) { .room-list-card__content { padding: 15px 0px 15px 30px; margin-right: -10px; } } @media (max-width: 991px) { .room-list-card__content { padding: 30px 40px; } } @media (max-width: 575px) { .room-list-card__content { padding: 30px; } } .room-list-card__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; color: var(--solinom-text-gray, #7D8B90); margin-bottom: 30px; padding-bottom: 0; } @media (max-width: 1199px) and (min-width: 992px) { .room-list-card__text { font-size: 15px; margin-bottom: 15px; } } @media (max-width: 575px) { .room-list-card__text { margin-bottom: 15px; } } .room-list-card__btns { display: flex; gap: 3px; } .room-list-card__btns a { display: inline-block; width: 24px; height: 24px; background-color: var(--solinom-gray, #1C2F36); color: var(--solinom-white, #fff); font-size: 12px; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.4s ease-in-out; } .room-list-card__btns a:hover { color: var(--solinom-base, #CBA36B); } .room-list-card__btns__count { position: absolute; left: -4px; top: -6px; width: 12px; height: 12px; line-height: 12px; background-color: var(--solinom-base, #CBA36B); border-radius: 50%; text-align: center; display: block; font-size: 7px; font-weight: 600; color: var(--solinom-white, #fff); } .room-list-card__ratings { color: var(--solinom-base, #CBA36B); font-size: 17px; } .room-list-card__meta { background-color: var(--solinom-border-color, #FAF6F0); display: flex; align-items: center; gap: 40px; padding: 20px 30px; margin-bottom: 0; } @media (max-width: 767px) { .room-list-card__meta { flex-wrap: wrap; } } .room-list-card__meta li { display: flex; align-items: center; gap: 14px; } .room-list-card__meta li:hover .room-list-card__meta__icon { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .room-list-card__meta__icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-white, #fff); color: var(--solinom-base, #CBA36B); font-size: 20px; transition: all 0.4s ease-in-out; } .room-list-card__meta__content .room-list-card__meta__title { margin-bottom: 0; padding-bottom: 0; font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; text-transform: capitalize; color: var(--solinom-text, #101D22); } .room-list-card__meta__content span { display: block; font-style: normal; font-weight: 500; font-size: 14px; line-height: normal; color: var(--solinom-text-gray, #7D8B90); } .room-list-card:hover .room-list-card__image img { transform: scale(1.1) rotate(-2deg); } /**Room Card List Two**/ .room-list-card--two .room-list-card__content { padding: 20px 0px 0px 30px; } @media (max-width: 1199px) and (min-width: 991px) { .room-list-card--two .room-list-card__content { padding: 20px 0px 0px 20px; margin-right: -10px; } } @media (max-width: 767px) { .room-list-card--two .room-list-card__content { padding: 30px; } } .room-list-card--two .room-list-card__meta { margin-bottom: 0; } @media (max-width: 575px) { .room-list-card--two .room-list-card__meta { flex-direction: column; justify-content: start; align-items: start; gap: 20px; } } .room-list-card--two .room-list-card__text { margin-bottom: 10px; font-size: 15px; } @media (max-width: 1199px) and (min-width: 991px) { .room-list-card--two .room-list-card__text { font-size: 13px; } } @media (max-width: 767px) { .room-list-card--two .room-list-card__text { margin-bottom: -4px; } } @media (max-width: 1199px) and (min-width: 991px) { .room-list-card--two .room-list-card__title { font-size: 20px; } } @media (max-width: 1199px) and (min-width: 991px) { .room-list-card--two .room-list-card__price { font-size: 18px; } } @media (max-width: 1199px) and (min-width: 991px) { .room-list-card--two .room-list-card__ratings { font-size: 15px; } } @media (max-width: 1199px) and (min-width: 991px) { .room-list-card--two .room-list-card__content__inner { flex-direction: column; } } @media (max-width: 575px) { .room-list-card--two .room-list-card__content__inner { flex-direction: column; } } /**Room Card Two**/ .room-card-two { position: relative; z-index: 1; } .room-card-two__thumb { position: relative; overflow: hidden; } .room-card-two__thumb img { object-fit: cover; width: 100%; transform: scale(1); transition: all 0.4s ease-in-out; } .room-card-two__feature { background-color: var(--solinom-white, #fff); font-style: normal; font-weight: 700; font-size: 10px; line-height: 180%; text-transform: uppercase; color: var(--solinom-gray2, #283E46); padding: 4.5px 11px; position: absolute; top: 20px; right: 20px; margin-bottom: 0; transition: all 0.4s ease-in-out; } .room-card-two__feature:hover { background: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .room-card-two__feature--two { background-color: var(--solinom-gray2, #283E46); color: var(--solinom-white, #fff); } .room-card-two__love { width: 32px; height: 32px; background-color: var(--solinom-white, #fff); font-size: 15px; color: var(--solinom-text-gray, #7D8B90); display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; line-height: 0; top: 20px; left: 20px; cursor: pointer; transition: all 0.4s ease-in-out; } .room-card-two__love .active { color: var(--solinom-base, #CBA36B); } .room-card-two__love:hover { background-color: var(--solinom-text, #101D22); } .room-card-two__content { position: absolute; bottom: 40px; width: calc(100% - 40px); padding: 20px; padding-bottom: 0; right: 20px; left: 20px; z-index: 2; background-color: transparent; transition: all 0.4s ease-in-out; } .room-card-two__content__top { display: flex; align-items: center; justify-content: space-between; margin-top: -33px; position: relative; margin-bottom: 10px; } .room-card-two__content__popup { display: flex; align-items: center; gap: 4px; } .room-card-two__content__popup__item { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; background-color: var(--solinom-base, #CBA36B); font-size: 14px; color: var(--solinom-white, #fff); line-height: 0; } .room-card-two__content__popup__item:hover { background-color: var(--solinom-white, #fff); color: var(--solinom-base, #CBA36B); } .room-card-two__content__star { font-size: 17px; color: var(--solinom-base, #CBA36B); letter-spacing: -1px; margin-bottom: -3px; } .room-card-two__content__title { font-style: normal; font-weight: 600; font-size: 24px; line-height: normal; margin-bottom: 7px; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); transition: all 0.2s ease; } .room-card-two__content__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .room-card-two__content__title a:hover { background-size: 100% 1px; } .room-card-two__content__title a:hover { color: var(--solinom-text, #101D22); } .room-card-two__content__text__box { position: relative; overflow: hidden; } .room-card-two__content__text { font-style: normal; font-weight: 500; font-size: 14px; line-height: 171%; margin-bottom: -52px; padding-bottom: 10px; color: var(--solinom-text-gray, #7D8B90); border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); transition: all 0.4s ease-in-out; } .room-card-two__content__number { padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; background-color: var(--solinom-white, #fff); transition: all 0.4s ease-in-out; } .room-card-two__content__number__price { font-style: normal; font-weight: 500; font-size: 20px; line-height: normal; color: var(--solinom-base, #CBA36B); } .room-card-two__content__number__price span { font-size: 16px; color: var(--solinom-text-gray, #7D8B90); } .room-card-two__content__number__parson { font-style: normal; font-weight: 500; font-size: 14px; line-height: 171%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .room-card-two__content__number__parson strong { color: var(--solinom-base, #CBA36B); } .room-card-two::after { position: absolute; bottom: 0; right: 0; content: ""; background: linear-gradient(-180deg, rgba(40, 62, 70, 0) 0%, #283E46 67%); width: 100%; height: 60%; transition: all 0.5s ease-in-out; opacity: 1; visibility: visible; } .room-card-two:hover .room-card-two__content { background-color: var(--solinom-white, #fff); } .room-card-two:hover .room-card-two__content__title { color: var(--solinom-text, #101D22); } .room-card-two:hover .room-card-two__content__text { margin-bottom: 0; } .room-card-two:hover .room-card-two__content__number { padding-right: 0; margin-left: 0; } .room-card-two:hover .room-card-two__thumb img { transform: scale(1.1); } .room-card-two:hover::after { opacity: 0; visibility: hidden; } /**Room Card Three**/ .room-card-three { border: 1px solid var(--solinom-gray2, #283E46); padding: 30px; position: relative; } .room-card-three__inner { position: relative; z-index: 1; } .room-card-three__inner::after { position: absolute; bottom: 0; right: 0; content: ""; background: linear-gradient(-2.28deg, #101D22 45.26%, rgba(16, 29, 34, 0) 97.15%); width: 100%; height: 60%; transition: all 0.5s ease-in-out; opacity: 1; visibility: visible; } .room-card-three__thumb { position: relative; overflow: hidden; } .room-card-three__thumb img { object-fit: cover; width: 100%; transform: scale(1); transition: all 0.4s ease-in-out; } .room-card-three__thumb__popup { position: absolute; top: 20px; left: 20px; display: flex; flex-direction: column; gap: 4px; } .room-card-three__thumb__popup__love, .room-card-three__thumb__popup a { width: 32px; height: 32px; background-color: var(--solinom-white, #fff); font-size: 15px; color: var(--solinom-text-gray, #7D8B90); display: flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 0; cursor: pointer; transition: all 0.4s ease-in-out; } .room-card-three__thumb__popup__love .active, .room-card-three__thumb__popup a .active { color: var(--solinom-base, #CBA36B); } .room-card-three__thumb__popup__love:hover, .room-card-three__thumb__popup a:hover { color: var(--solinom-base, #CBA36B); } .room-card-three__feature { background-color: var(--solinom-white, #fff); font-style: normal; font-weight: 700; font-size: 10px; line-height: 180%; text-transform: uppercase; color: var(--solinom-gray2, #283E46); padding: 4.5px 11px; position: absolute; top: 20px; right: 20px; margin-bottom: 0; transition: all 0.4s ease-in-out; } .room-card-three__feature:hover { background: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .room-card-three__feature--two { background-color: var(--solinom-gray2, #283E46); color: var(--solinom-white, #fff); } .room-card-three__content { position: absolute; bottom: 0; width: 100%; padding: 30px; right: 0px; left: 0px; z-index: 2; background-color: transparent; transition: all 0.4s ease-in-out; } .room-card-three__content__star { font-size: 17px; color: var(--solinom-base, #CBA36B); letter-spacing: -1px; margin-bottom: -3px; } .room-card-three__content__title { font-style: normal; font-weight: 600; font-size: 24px; line-height: normal; margin-bottom: 7px; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); transition: all 0.2s ease; } .room-card-three__content__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .room-card-three__content__title a:hover { background-size: 100% 1px; } .room-card-three__content__title a:hover { color: var(--solinom-base, #CBA36B); } .room-card-three__content__text { font-style: normal; font-weight: 500; font-size: 14px; line-height: 171%; margin-bottom: 0px; padding-bottom: 0px; color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .room-card-three__content__number { padding: 10px 0px 0px; display: flex; align-items: center; justify-content: space-between; background-color: transparent; transition: all 0.4s ease-in-out; } .room-card-three__content__number__price { font-style: normal; font-weight: 500; font-size: 20px; line-height: normal; color: var(--solinom-base, #CBA36B); } .room-card-three__content__number__price span { font-size: 16px; color: var(--solinom-text-gray, #7D8B90); } .room-card-three__content__number__parson { font-style: normal; font-weight: 500; font-size: 14px; line-height: 171%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .room-card-three__content__number__parson strong { color: var(--solinom-white, #fff); } .room-card-three:hover .room-card-three__thumb img { transform: scale(1.1); } /**Room Card Fore**/ .room-four { position: relative; padding: 120px 0; } @media (max-width: 991px) { .room-four { padding: 100px 0; } } @media (max-width: 767px) { .room-four { padding: 80px 0; } } @media (min-width: 1630px) { .room-four .container { max-width: 1600px; margin-right: auto; margin-left: auto; } } /**Room One**/ .room-page { position: relative; padding: 120px 0; } @media (max-width: 991px) { .room-page { padding: 100px 0; } } @media (max-width: 767px) { .room-page { padding: 80px 0; } } .room__info-top { position: relative; display: flex; justify-content: space-between; align-items: center; } @media (max-width: 767px) { .room__info-top { display: block; } } .room__showing-text { margin: 0; color: var(--solinom-text, #101D22); font-style: normal; font-weight: 700; font-size: 16px; line-height: 112%; } @media (max-width: 767px) { .room__showing-text { margin-bottom: 15px; } } .room__showing-sort { margin: 0; font-size: 16px; } .room__showing-sort .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { position: relative; display: block; width: 260px !important; } @media (max-width: 360px) { .room__showing-sort .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 260px !important; } } .room__showing-sort .bootstrap-select > .dropdown-toggle::after { display: none; } .room__showing-sort .bootstrap-select .dropdown-menu { border: none; } .room__showing-sort .bootstrap-select > .dropdown-toggle { position: relative; height: 60px; outline: none !important; border-radius: 0; border: 0; background-color: var(--solinom-border-color, #FAF6F0) !important; margin: 0; padding: 0; padding-right: 30px; padding-left: 30px; color: var(--solinom-text-gray, #7D8B90) !important; line-height: 60px; box-shadow: none !important; background-repeat: no-repeat; background-size: 14px 12px; background-position: left 25.75px center; font-size: 16px; font-weight: 600; } .room__showing-sort .bootstrap-select > .dropdown-toggle:before { position: absolute; top: 0; bottom: 0; left: 30px; font-family: "icomoon" !important; content: "\e933"; font-weight: 500; font-size: 14px; color: var(--solinom-base, #CBA36B); } .room__showing-sort .bootstrap-select .dropdown-menu > li + li > a { border-top: 1px solid rgba(var(--solinom-border-color-rgb, 250, 246, 240), 0.4); } .room__showing-sort .bootstrap-select .dropdown-menu > li > a { font-size: 16px; font-weight: 600; padding: 10px 30px; color: var(--solinom-white, #fff); background: var(--solinom-text-gray, #7D8B90); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .room__showing-sort .bootstrap-select .dropdown-menu > li:hover > a, .room__showing-sort .bootstrap-select .dropdown-menu > li.selected > a { background: var(--solinom-gray, #1C2F36); color: var(--solinom-white, #fff); border-color: var(--solinom-text-gray, #7D8B90); } /**Room Two Page**/ .room-two-page { position: relative; padding: 120px 0; } @media (max-width: 991px) { .room-two-page { padding: 100px 0; } } @media (max-width: 767px) { .room-two-page { padding: 80px 0; } } .room-two-page .room__info-top { margin-bottom: 30px; } /**Room Two **/ .room-two { position: relative; z-index: 1; background-color: var(--solinom-text-dark, #15262C); padding: 120px 0; } @media (max-width: 991px) { .room-two { padding: 100px 0; } } @media (max-width: 767px) { .room-two { padding: 80px 0; } } .room-two__carousel { position: relative; } .room-two__carousel .owl-nav button { border: none; outline: none; margin: 0; padding: 0; position: absolute; top: 50%; right: -55px; transform: translateY(-50%); } .room-two__carousel .owl-nav button span { border: none; outline: none; width: 48px; height: 48px; background-color: var(--solinom-text, #101D22); display: flex; justify-content: center; align-items: center; color: var(--solinom-base, #CBA36B); font-size: 16px; transition: all 500ms ease; } .room-two__carousel .owl-nav button span:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .room-two__carousel .owl-nav button:last-child { left: -55px; right: auto; } .room-two .owl-theme .owl-nav { margin: 0 !important; } /*-------------------------------------------------------------- # Room Sidebar --------------------------------------------------------------*/ /***Room Sidebar***/ .room-details__sidebar__title { font-style: normal; font-weight: 600; font-size: 24px; line-height: 108%; text-transform: capitalize; margin-top: -5px; padding-bottom: 25px; border-bottom: 1px solid var(--solinom-base, #CBA36B); margin-bottom: 25px; } .room-details__sidebar__item { padding: 30px; } .room-details__sidebar__item--two { padding: 40px; background-color: var(--solinom-white, #fff); box-shadow: 0px 0px 60px rgba(2, 2, 2, 0.08); } @media (max-width: 1199px) and (min-width: 992px) { .room-details__sidebar__item--two { padding: 25px; } } .room-details__sidebar__item--three { padding: 0; } .room-details__sidebar__item + .room-details__sidebar__item { margin-top: 30px; } .room-details__destination__item + .room-details__destination__item { margin-top: 30px; } .room-details__sidebar__top { margin-top: -30px; padding-bottom: 0; margin-bottom: 30px; } .room-details__sidebar__top__item { display: flex; align-items: center; justify-content: center; padding: 25px 0px 40px; background-color: var(--solinom-gray2, #283E46); position: relative; } .room-details__sidebar__top__item::after { content: ""; width: 100%; height: 15px; position: absolute; bottom: -1px; right: 0; background-color: var(--solinom-border-color, #FAF6F0); clip-path: polygon(50% 0, 0% 100%, 100% 100%); } .room-details__sidebar__top__title { margin-bottom: 0; padding-bottom: 0; color: var(--solinom-white, #fff); font-style: normal; font-weight: 600; font-size: 20px; line-height: normal; text-transform: capitalize; } .room-details__sidebar__posts { margin-bottom: 0; padding-bottom: 0; } .room-details__sidebar__posts__item { display: flex; gap: 19px; } .room-details__sidebar__posts__item:hover .room-details__sidebar__posts__image img { transform: scale(1); } .room-details__sidebar__posts__item + .room-details__sidebar__posts__item { margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .room-details__sidebar__posts__image { overflow: hidden; } .room-details__sidebar__posts__image img { transition: all 0.4s ease-in-out; object-fit: cover; width: 100%; height: auto; transform: scale(1.2); } .room-details__sidebar__posts__price { margin-top: -3px; font-style: normal; font-weight: 500; font-size: 16px; line-height: normal; color: var(--solinom-base, #CBA36B); display: block; margin-bottom: 2px; } .room-details__sidebar__posts__title { font-style: normal; font-weight: 700; font-size: 16px; line-height: 1.67; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text, #101D22); text-transform: capitalize; } @media (max-width: 1199px) and (min-width: 992px) { .room-details__sidebar__posts__title { font-size: 15px; } } .room-details__sidebar__posts__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .room-details__sidebar__posts__title a:hover { background-size: 100% 1px; } .room-details__sidebar__posts__title a:hover { color: var(--solinom-base, #CBA36B); } .room-details__sidebar__posts__star { font-size: 13px; color: var(--solinom-base, #CBA36B); letter-spacing: -0.5px; } .room-details__destination__item { z-index: 1; position: relative; width: 100%; height: auto; display: block; overflow: hidden; } .room-details__destination__item::after { position: absolute; bottom: 0; right: 0; content: ""; background: linear-gradient(-180deg, rgba(40, 62, 70, 0) 18.18%, #283E46 100%); width: 100%; height: 60%; transition: all 0.5s ease-in-out; } .room-details__destination__item img { object-fit: cover; width: 100%; transition: all 0.4s ease-in-out; } .room-details__destination__item__content { position: absolute; bottom: 23px; right: 40px; z-index: 1; } .room-details__destination__item__subtitle { display: block; font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; color: var(--solinom-base, #CBA36B); } .room-details__destination__item__title { font-style: normal; font-weight: 700; font-size: 24px; line-height: 30px; color: var(--solinom-white, #fff); background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .room-details__destination__item__title:hover { background-size: 100% 1px; } .room-details__destination__item:hover img { transform: scale(1.1); } .room-details__sidebar__form { margin-top: 30px; position: relative; padding: 1px 30px 30px; background-color: var(--solinom-border-color, #FAF6F0); } .room-details__sidebar__form .room-details__sidebar__control { position: relative; } .room-details__sidebar__form .room-details__sidebar__control label { display: block; cursor: pointer; line-height: 1; color: var(--solinom-text, #101D22); margin: 0 0 9px; font-style: normal; font-weight: 500; font-size: 16px; text-shadow: 0 0 0.1px currentColor; } .room-details__sidebar__form .room-details__sidebar__control input[type=text] { width: 100%; height: 50px; border: none; box-shadow: none; outline: none; padding-right: 30px; padding-left: 30px; } .room-details__sidebar__form .room-details__sidebar__control input[type=text]:focus { border: none; box-shadow: none; outline: none; } .room-details__sidebar__form .room-details__sidebar__control input[type=text]:focus-visible { border: none; box-shadow: none; outline: none; } .room-details__sidebar__form .room-details__sidebar__control i { position: absolute; left: 20px; transform: translateY(50%); line-height: 0; font-size: 16px; color: var(--solinom-base, #CBA36B); top: 65%; } .room-details__sidebar__form .room-details__sidebar__control .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 100%; height: 50px; display: flex; align-items: center; } .room-details__sidebar__form .room-details__sidebar__control .bootstrap-select > .dropdown-toggle { padding: 0 30px; background-color: var(--solinom-white, #fff); border-radius: 0; border: none; outline: none !important; color: var(--solinom-text, #101D22); font-size: 13px; font-weight: 500; height: 50px; text-transform: capitalize; font-family: var(--solinom-font, "Plus Jakarta Sans", sans-serif); } .room-details__sidebar__form .room-details__sidebar__control .bootstrap-select > .dropdown-toggle { display: flex; align-items: center; } .room-details__sidebar__form .room-details__sidebar__control .bootstrap-select > .dropdown-toggle .filter-option { display: flex; align-items: center; } .room-details__sidebar__form .room-details__sidebar__control .bootstrap-select > .dropdown-toggle::after { display: none; } .room-details__sidebar__form .room-details__sidebar__control .bootstrap-select .dropdown-menu { border: none; } .room-details__sidebar__form .room-details__sidebar__control .bootstrap-select > .dropdown-toggle:before { position: absolute; top: 0; bottom: 0; left: 20px; line-height: 50px; font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; font-size: 13px; color: var(--solinom-text, #101D22); } .room-details__sidebar__form .room-details__sidebar__control .bootstrap-select .dropdown-menu > li + li > a { border-top: 1px solid var(--solinom-border-color, #FAF6F0); } .room-details__sidebar__form .room-details__sidebar__control .bootstrap-select .dropdown-menu > li > a { font-size: 16px; font-weight: 500; padding: 6px 30px; color: var(--solinom-text, #101D22); background-color: var(--solinom-white, #fff); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .room-details__sidebar__form .room-details__sidebar__control .bootstrap-select .dropdown-menu > li:hover > a, .room-details__sidebar__form .room-details__sidebar__control .bootstrap-select .dropdown-menu > li.selected > a { background: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); border-color: var(--solinom-base, #CBA36B); } .room-details__sidebar__form .room-details__sidebar__control .room-details__sidebar__checkbox { margin-top: 20px; border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); padding-bottom: 26px; margin-bottom: 25px; } .room-details__sidebar__form .room-details__sidebar__control .room-details__sidebar__checkbox li { display: flex; align-items: center; } .room-details__sidebar__form .room-details__sidebar__control .room-details__sidebar__checkbox li label { position: relative; display: flex; padding-right: 23px; margin-left: 0px; margin-bottom: 0; color: var(--solinom-text-gray, #7D8B90); text-transform: none; cursor: pointer; width: 100%; font-style: normal; font-weight: 500; font-size: 14px; line-height: 100%; } .room-details__sidebar__form .room-details__sidebar__control .room-details__sidebar__checkbox li label span { margin-right: auto; color: var(--solinom-base, #CBA36B); font-style: normal; font-weight: 600; font-size: 14px; } .room-details__sidebar__form .room-details__sidebar__control .room-details__sidebar__checkbox li label:before { position: absolute; top: 1px; right: 3px; display: block; color: var(--solinom-base, #CBA36B); content: "\e93b"; font-family: "icomoon" !important; font-size: 6px; line-height: 14px; pointer-events: none; transition: all 0.15s ease-in-out; opacity: 0; z-index: 2; } .room-details__sidebar__form .room-details__sidebar__control .room-details__sidebar__checkbox li input[type=checkbox] { display: none; } .room-details__sidebar__form .room-details__sidebar__control .room-details__sidebar__checkbox li input[type=checkbox] + label::after { position: absolute; content: ""; top: 2px; right: 0; width: 14px; height: 14px; vertical-align: middle; background-color: var(--solinom-white, #fff); cursor: pointer; transition: all 300ms ease; border: 1px solid var(--solinom-text-gray, #7D8B90); } .room-details__sidebar__form .room-details__sidebar__control .room-details__sidebar__checkbox li input[type=checkbox]:checked + label::after { border-color: var(--solinom-base, #CBA36B); } .room-details__sidebar__form .room-details__sidebar__control .room-details__sidebar__checkbox li input[type=checkbox]:checked + label:before { opacity: 1; } .room-details__sidebar__form .room-details__sidebar__control .room-details__sidebar__checkbox li + li { margin-top: 20px; } .room-details__sidebar__form .room-details__sidebar__control .ui-datepicker-calendar .ui-state-default, .room-details__sidebar__form .room-details__sidebar__control .ui-datepicker-calendar .ui-widget-content .ui-state-default, .room-details__sidebar__form .room-details__sidebar__control .ui-datepicker-calendar .ui-widget-header .ui-state-default { background-color: var(--solinom-gray2, #283E46) !important; color: var(--solinom-white, #fff) !important; } .room-details__sidebar__form .room-details__sidebar__control + .room-details__sidebar__control { margin-top: 20px; } .room-details__sidebar__form .room-details__sidebar__total { display: flex; align-items: center; justify-content: space-between; font-style: normal; font-weight: 500; font-size: 16px; line-height: 150%; color: var(--solinom-text, #101D22); margin-bottom: 25px; } .room-details__sidebar__form button { width: 100%; } /***Sidebar Room Card***/ .sidebar__content { position: relative; z-index: 1; background: var(--solinom-white, #fff); box-shadow: 0px 0px 60px rgba(2, 2, 2, 0.08); padding: 30px; } .sidebar__content__control + .sidebar__content__control { margin-top: 13px; } .sidebar__content__control { display: flex; flex-direction: column; position: relative; } .sidebar__content__control input[type=text] { border: none; border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); outline: none; padding-top: 0; padding-bottom: 9px; } .sidebar__content__control input[type=text]::placeholder { font-style: normal; font-weight: 500; font-size: 14px; line-height: 164%; color: var(--solinom-text, #101D22); } .sidebar__content__control label { font-style: normal; font-weight: 500; font-size: 10px; line-height: 230%; text-transform: uppercase; color: var(--solinom-text-gray, #7D8B90); } .sidebar__content__control i { font-size: 16px; color: var(--solinom-text-gray, #7D8B90); position: absolute; left: 0px; top: 50%; transform: translateY(-50%); } .sidebar__content__control .quantity-box { position: relative; } .sidebar__content__control .quantity-box input[type=text] { width: 100%; } .sidebar__content__control .quantity-box button { left: 24px; top: 20%; transform: translate(50%); position: absolute; background-color: var(--solinom-gray, #1C2F36); border: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--solinom-white, #fff); } .sidebar__content__control .quantity-box button:last-child { left: 0; } .sidebar__content__control .solinom-btn { padding: 11px 50px; } /*-------------------------------------------------------------- # Room Details --------------------------------------------------------------*/ /**Room Details**/ .room-details { padding-bottom: 120px; } @media (max-width: 991px) { .room-details { padding-bottom: 100px; } } @media (max-width: 767px) { .room-details { padding-bottom: 80px; } } .room-details__item + .room-details__item { margin-top: 45px; } .room-details__title { margin-top: -3px; font-style: normal; font-weight: 500; font-size: 30px; line-height: normal; padding-bottom: 0; margin-bottom: 15px; color: var(--solinom-text, #101D22); text-shadow: 0 0 0.1px currentColor; } .room-details__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: -2px; color: var(--solinom-text-gray, #7D8B90); padding-bottom: 0; } .room-details .gutter-x-50 { --bs-gutter-x: 50px ; } .room-details__feature-one { padding-bottom: 45px; border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .room-details__feature-one .room-details__title { margin-top: -7px; } .room-details__calender { margin-top: -10px; } .room-details__room-info { background-color: var(--solinom-border-color, #FAF6F0); position: relative; padding: 40px; } .room-details__room-info__top { display: flex; align-items: start; justify-content: space-between; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } @media (max-width: 575px) { .room-details__room-info__top { flex-direction: column; gap: 20px; } } .room-details__room-info__title { font-style: normal; font-weight: 600; font-size: 30px; line-height: normal; margin-bottom: 7px; padding-bottom: 0; color: var(--solinom-text, #101D22); } .room-details__room-info__form { font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .room-details__room-info__form span { color: var(--solinom-base, #CBA36B); font-weight: 600; font-size: 30px; } .room-details__room-info__rating { font-style: normal; font-weight: 500; font-size: 16px; line-height: 162%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .room-details__room-info__rating i { color: var(--solinom-base, #CBA36B); } .room-details__room-info__bottom { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 575px) { .room-details__room-info__bottom { flex-direction: column; gap: 30px; } } .room-details__room-info__bottom__left { flex: 65%; width: 65%; display: grid; grid-template-columns: auto auto auto; gap: 30px; align-items: center; } @media (max-width: 1199px) and (min-width: 991px) { .room-details__room-info__bottom__left { flex: 80%; width: 80%; grid-template-columns: auto auto; } } @media (max-width: 767px) { .room-details__room-info__bottom__left { grid-template-columns: auto auto; flex: 100%; width: 100%; } } @media (max-width: 575px) { .room-details__room-info__bottom__left { grid-template-columns: auto; } } .room-details__room-info__bottom__item { display: flex; align-items: center; gap: 13px; } .room-details__room-info__bottom__item:hover .room-details__room-info__bottom__icon { background: var(--solinom-text, #101D22); color: var(--solinom-white, #fff); } .room-details__room-info__bottom__icon { max-width: 48px; height: 48px; width: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-white, #fff); color: var(--solinom-base, #CBA36B); font-size: 20px; transition: all 0.4s ease-in-out; } .room-details__room-info__bottom__title { font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text, #101D22); } .room-details__room-info__bottom__subtitle { font-style: normal; font-weight: 600; font-size: 14px; line-height: normal; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); display: block; } .room-details__room-info__bottom__right { display: flex; align-items: center; justify-content: end; flex: 35%; width: 35%; text-align: end; } @media (max-width: 991px) { .room-details__room-info__bottom__right { flex: 20%; width: 20%; } } @media (max-width: 767px) { .room-details__room-info__bottom__right { flex: 30%; width: 30%; } } @media (max-width: 575px) { .room-details__room-info__bottom__right { flex: 100%; width: 100%; justify-content: start; } } .room-details__room-info__bottom__right__item { display: flex; align-items: center; justify-content: center; max-width: 40px; width: 100%; height: 40px; border-radius: 50px; background-color: var(--solinom-white, #fff); color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .room-details__room-info__bottom__right__item:hover { color: var(--solinom-base, #CBA36B); background-color: var(--solinom-gray, #1C2F36); } .room-details__room-info__bottom__right a + a { margin-right: 20px; } .room-details__amenities__list { margin-bottom: -16px; display: grid; grid-template-columns: auto auto auto; } @media (max-width: 767px) { .room-details__amenities__list { grid-template-columns: auto auto; } } @media (max-width: 400px) { .room-details__amenities__list { grid-template-columns: auto; } } .room-details__amenities__item { font-style: normal; font-weight: 500; font-size: 16px; line-height: 187%; margin-bottom: 16px; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); text-transform: capitalize; max-width: 190px; width: 100%; } .room-details__amenities__item i { font-size: 13px; margin-left: 10px; color: var(--solinom-base, #CBA36B); } .room-details__amenities__item .icon-close { color: var(--solinom-text-gray, #7D8B90); } .room-details__calender__calender-box { position: relative; width: 100%; margin: 0 0 50px; } .room-details__calender__calender-box .ui-widget-content { background-color: transparent; border: none; border-radius: 0; margin: 0; padding: 0; width: 100%; font-family: var(--solinom-font, "Plus Jakarta Sans", sans-serif); } .room-details__calender__calender-box .ui-datepicker .ui-datepicker-header { padding: 7px 0 10px; background-color: var(--solinom-base, #CBA36B); width: 100%; font-size: 18px; font-weight: 600; color: var(--solinom-white, #fff); border-radius: 0; border: none; margin: 0; } .room-details__calender__calender-box .ui-datepicker .ui-datepicker-next { background-color: transparent; border: none; color: var(--solinom-white, #fff); font-size: 18px; cursor: pointer; top: 0; left: 20px; height: 100%; } .room-details__calender__calender-box .ui-datepicker .ui-datepicker-next::after { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 0; bottom: 0; height: 100%; display: flex; align-items: center; } .room-details__calender__calender-box .ui-datepicker .ui-datepicker-next:hover { color: var(--solinom-black, #000); } .room-details__calender__calender-box .ui-datepicker .ui-datepicker-next span { display: none; } .room-details__calender__calender-box .ui-datepicker .ui-datepicker-prev { background-color: transparent; border: none; color: var(--solinom-white, #fff); font-size: 18px; cursor: pointer; top: 0; right: 20px; height: 100%; } .room-details__calender__calender-box .ui-datepicker .ui-datepicker-prev::after { content: "\f0d9"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 0; top: 0; bottom: 0; height: 100%; display: flex; align-items: center; } .room-details__calender__calender-box .ui-datepicker .ui-datepicker-prev:hover { color: var(--solinom-black, #000); } .room-details__calender__calender-box .ui-datepicker .ui-datepicker-prev span { display: none; } .room-details__calender__calender-box .ui-datepicker table { width: 100%; margin: 0; padding: 0; background-color: transparent; border: none; } .room-details__calender__calender-box .ui-datepicker table thead tr th { border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.1); } .room-details__calender__calender-box .ui-datepicker th { background-color: var(--solinom-border-color, #FAF6F0); font-size: 14px; font-weight: 600; color: var(--solinom-black, #000); padding: 10px 21px; text-align: left; } @media (max-width: 767px) { .room-details__calender__calender-box .ui-datepicker th { padding: 10px 14px; } } .room-details__calender__calender-box .ui-datepicker-calendar td { text-align: left; padding: 11px 21px; background-color: transparent; color: var(--solinom-text, #101D22); font-size: 14px; font-weight: 500; border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.1); transition: all 400ms ease; } @media (max-width: 767px) { .room-details__calender__calender-box .ui-datepicker-calendar td { padding: 10px 14px; } } .room-details__calender__calender-box .ui-datepicker-calendar td:hover, .room-details__calender__calender-box .ui-datepicker-calendar td.ui-datepicker-current-day { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); border-color: var(--solinom-base, #CBA36B); } .room-details__calender__calender-box .ui-datepicker-calendar .ui-state-default, .room-details__calender__calender-box .ui-datepicker-calendar .ui-widget-content .ui-state-default, .room-details__calender__calender-box .ui-datepicker-calendar .ui-widget-header .ui-state-default { border: none; background-color: transparent; background-image: none; color: inherit; padding: 0; text-align: inherit; line-height: inherit; transition: none; } .room-details__highlights__title { font-style: normal; font-weight: 500; font-size: 20px; line-height: 150%; margin-bottom: 17px; padding-bottom: 0; text-shadow: 0 0 0.01px currentColor; } .room-details__highlights ul { margin-bottom: 0; } .room-details__highlights ul > li { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .room-details__highlights ul > li i { color: var(--solinom-base, #CBA36B); margin-left: 10px; transition: all 0.4s ease-in-out; } .room-details__highlights ul > li:hover i { color: var(--solinom-text-gray, #7D8B90); } .room-details__highlights ul li + li { margin-top: 6px; } .room-details__tours .room-details__title { margin-bottom: 34px; } .room-details__location__item { background-color: #FAF5EE; width: 100%; } .room-details__location__item .google-map iframe { height: 260px; background-color: #FAF5EE; mix-blend-mode: luminosity; } .room-details__review__inner { display: flex; width: 100%; border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } @media (max-width: 575px) { .room-details__review__inner { flex-direction: column; justify-content: start; align-items: start; } } .room-details__review__left { max-width: 230px; width: 100%; text-align: center; border-left: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); display: flex; flex-direction: column; justify-content: center; align-items: center; } @media (max-width: 575px) { .room-details__review__left { border-left: 1px solid transparent; border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); max-width: 100%; padding: 50px; } } .room-details__review__rating { font-style: normal; font-weight: 500; font-size: 50px; line-height: 60%; margin-bottom: 0; padding-bottom: 10px; color: var(--solinom-text, #101D22); } .room-details__review__rating__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 162%; color: var(--solinom-text-gray, #7D8B90); margin-bottom: 0; padding-bottom: 0; display: block; } .room-details__review__rating__text i { color: var(--solinom-base, #CBA36B); } .room-details__review__right { width: 100%; padding: 36px 50px; } .room-details__review__progress + .room-details__review__progress { margin-top: 13px; } .room-details__review__progress__title { text-transform: capitalize; margin: 0; margin-bottom: 5px; font-style: normal; font-weight: 600; font-size: 14px; line-height: 18px; } .room-details__review__progress__bar { width: 100%; height: 6px; border-radius: 12px; background-color: #EBE6DE; position: relative; } .room-details__review__progress__inner { position: absolute; height: 100%; right: 0; top: 0; border-radius: 12px; background-color: var(--solinom-base, #CBA36B); transition: all 700ms linear; width: 0px; } .room-details__review__progress__number { position: absolute; bottom: calc(100% + 5px); left: 0; font-style: normal; font-weight: 500; font-size: 14px; line-height: 18px; background-color: transparent; color: var(--solinom-text-gray, #7D8B90); } .room-details__posts { margin-bottom: 0; } .room-details__posts__card { display: flex; align-items: start; } @media (max-width: 575px) { .room-details__posts__card { flex-direction: column; align-items: start; justify-content: start; gap: 30px; } } .room-details__posts__card__image { margin-left: 30px; } @media (max-width: 575px) { .room-details__posts__card__image { margin-left: 0; } } .room-details__posts__card__image img { border-radius: 50%; } .room-details__posts__card__title { font-style: normal; font-weight: 600; font-size: 24px; line-height: 108%; margin-bottom: 11px; padding-bottom: 0; color: var(--solinom-text, #101D22); } .room-details__posts__card__time { margin-right: 12px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 214%; color: var(--solinom-base, #CBA36B); text-transform: capitalize; } .room-details__posts__card__star { margin-bottom: 20px; position: relative; } .room-details__posts__card__star__item { display: inline-block; font-style: normal; font-weight: 500; font-size: 14px; line-height: normal; color: var(--solinom-text-gray, #7D8B90); text-transform: capitalize; margin-bottom: -2px; } @media (max-width: 575px) { .room-details__posts__card__star__item { display: block; } } .room-details__posts__card__star__item i { color: var(--solinom-base, #CBA36B); } .room-details__posts__card__star__item:nth-child(4) { margin-right: 0px !important; } .room-details__posts__card__star__item + .room-details__posts__card__star__item { margin-right: 30px; } @media (max-width: 575px) { .room-details__posts__card__star__item + .room-details__posts__card__star__item { margin-right: 0; margin-top: 13px; } } .room-details__posts__card__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; color: var(--solinom-text-gray, #7D8B90); margin-bottom: 20px; padding-bottom: 0; } .room-details__posts__card__reply { background-color: var(--solinom-border-color, #FAF6F0); color: var(--solinom-text-gray, #7D8B90); padding: 5px 20px; } .room-details__posts__card__reply:hover { color: var(--solinom-white, #fff); } .room-details__posts__card + .room-details__posts__card { margin-top: 50px; border-top: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); padding-top: 45px; padding-bottom: 50px; } .room-details__review__item { display: flex; align-items: center; } .room-details__review__item span { max-width: 120px; width: 100%; display: block; font-family: var(--solinom-special-font, "DM Sans", sans-serif); font-style: normal; font-weight: 500; font-size: 16px; line-height: normal; color: var(--solinom-text-gray, #7D8B90); margin-bottom: 0; padding-bottom: 0; } .room-details__review__star { font-size: 16px; color: var(--solinom-base, #CBA36B); letter-spacing: -0.3px; } .room-details__review__star i { transition: all 500ms ease; color: var(--solinom-base, #CBA36B); } .room-details__review__star i.hover::before, .room-details__review__star i.active::before { font-weight: 900; } .room-details__review__star i::before { transition: all 500ms ease; } .room-details__review__form { margin-top: 30px; } .room-details__review__form input[type=text], .room-details__review__form input[name=email], .room-details__review__form textarea { color: var(--solinom-text-gray, #7D8B90); font-style: normal; font-weight: 500; font-size: 16px; line-height: normal; } .room-details__review__form input[type=text]::placeholder, .room-details__review__form input[name=email]::placeholder, .room-details__review__form textarea::placeholder { color: var(--solinom-text-gray, #7D8B90); font-style: normal; font-weight: 500; font-size: 16px; line-height: normal; } .room-details__review__form button { padding: 11px 40px; font-style: normal; font-weight: 700; font-size: 16px; text-transform: uppercase; } /**Room Details One**/ .room-details-one { background-color: var(--solinom-border-color, #FAF6F0); position: relative; padding: 55px 0px; border-bottom: 1px solid #EBE6DE; } .room-details-one__item { position: relative; } .room-details-one__item:hover .room-details-one__icon { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .room-details-one__content { padding-right: 61px; } .room-details-one__content__title { font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; margin-bottom: 0; padding-bottom: 0; } .room-details-one__content__subtitle { font-style: normal; font-weight: 600; font-size: 14px; line-height: normal; color: var(--solinom-text-gray, #7D8B90); display: block; } .room-details-one__icon { max-width: 48px; width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-white, #fff); color: var(--solinom-base, #CBA36B); border-radius: 50%; position: absolute; right: 0; top: 0; font-size: 20px; transition: all 0.4s ease-in-out; } .room-details-one__title { font-style: normal; font-weight: 600; font-size: 24px; line-height: normal; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text, #101D22); } .room-details-one__title a { color: inherit; } .room-details-one__text { font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .room-details-one__text span { font-size: 24px; color: var(--solinom-base, #CBA36B); } .room-details-one__right { display: flex; align-items: center; gap: 40px; justify-content: end; } /**Room Details Two**/ .room-details-two { position: relative; background-color: var(--solinom-white, #fff); padding: 30px 0px; border-bottom: 1px solid #EBE6DE; } .room-details-two__left { display: flex; align-items: center; gap: 55px; } .room-details-two__date { font-style: normal; font-weight: 500; font-size: 16px; line-height: 162%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .room-details-two__date i { margin-left: 10px; color: var(--solinom-base, #CBA36B); font-size: 18px; } .room-details-two__reviews { display: flex; align-items: center; } .room-details-two__reviews i { color: var(--solinom-base, #CBA36B); font-size: 17px; } .room-details-two__reviews__text { margin-right: 10px; font-style: normal; font-weight: 500; font-size: 16px; line-height: 162%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .room-details-two__btns { display: flex; align-items: center; justify-content: end; gap: 20px; position: relative; z-index: 1; } .room-details-two__btns__wrapper { position: relative; z-index: 1; } .room-details-two__btns__wrapper:hover .room-details-two__btns__social { opacity: 1; transform: translateY(-50%) scale(1, 1); } .room-details-two__btns__wishlist, .room-details-two__btns__share { display: flex; align-items: center; text-transform: capitalize; background-color: var(--solinom-border-color, #FAF6F0); color: var(--solinom-text-gray, #7D8B90); padding: 5px 20px; z-index: 0; } .room-details-two__btns__wishlist span, .room-details-two__btns__share span { margin-left: 7px; } .room-details-two__btns__wishlist:hover, .room-details-two__btns__share:hover { color: var(--solinom-white, #fff); } .room-details-two__btns__social { background-color: var(--solinom-text-gray, #7D8B90); padding: 5px 20px; max-height: 42px; z-index: 2; position: absolute; top: 50%; left: calc(100% + 10px); transform: translateY(-50%) scale(0, 1); margin: 0; min-height: 45px; padding-right: 10px; padding-left: 10px; opacity: 0; transition: 500ms ease; transform-origin: top left; display: flex; align-items: center; line-height: 0; } .room-details-two__btns__social a { font-size: 14px; color: var(--solinom-white, #fff); transition: all 0.4s ease; line-height: 1; } .room-details-two__btns__social a:hover { color: var(--solinom-base, #CBA36B); } .room-details-two__btns__social a + a { margin-right: 12px; } .room-details-gallery { padding-top: 80px; padding-bottom: 60px; } .room-details-gallery .room-gallery { display: flex; align-items: center; gap: 30px; } @media (max-width: 767px) { .room-details-gallery .room-gallery { gap: 20px; } } @media (max-width: 575px) { .room-details-gallery .room-gallery { flex-direction: column; gap: 10px; } } .room-details-gallery .room-gallery__item { width: 270px; height: 570px; background-position: center center; background-size: cover; background-repeat: no-repeat; cursor: pointer; transition: width 0.5s ease-in-out; } @media (max-width: 1199px) { .room-details-gallery .room-gallery__item { width: 230px; } } @media (max-width: 991px) { .room-details-gallery .room-gallery__item { width: 165px; height: 400px; } } @media (max-width: 767px) { .room-details-gallery .room-gallery__item { width: 130px; height: 350px; } } @media (max-width: 575px) { .room-details-gallery .room-gallery__item { width: 320px; height: 200px; } } .room-details-gallery .room-gallery .active .room-gallery__item { width: 570px; } @media (max-width: 1199px) { .room-details-gallery .room-gallery .active .room-gallery__item { width: 410px; } } @media (max-width: 991px) { .room-details-gallery .room-gallery .active .room-gallery__item { width: 300px; } } @media (max-width: 767px) { .room-details-gallery .room-gallery .active .room-gallery__item { width: 210px; } } @media (max-width: 575px) { .room-details-gallery .room-gallery .active .room-gallery__item { width: 320px; height: 400px; } } /**Room Details Three**/ .room-details-three { background-color: transparent; position: relative; padding: 0px 0px 55px; } .room-details-three__left { border-bottom: 1px solid #EBE6DE; padding-bottom: 25px; } .room-details-three__title { font-style: normal; font-weight: 600; font-size: 50px; line-height: 120%; margin-bottom: 12px; padding-bottom: 0; color: var(--solinom-text, #101D22); } .room-details-three__title a { color: inherit; } .room-details-three__item { position: relative; } .room-details-three__item:hover .room-details-three__icon { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .room-details-three__content { padding-right: 61px; } .room-details-three__content__title { font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; margin-bottom: 0; padding-bottom: 0; } .room-details-three__content__subtitle { font-style: normal; font-weight: 600; font-size: 14px; line-height: normal; color: var(--solinom-text-gray, #7D8B90); display: block; } .room-details-three__icon { max-width: 48px; width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-white, #fff); color: var(--solinom-base, #CBA36B); border-radius: 50%; position: absolute; right: 0; top: 0; font-size: 20px; transition: all 0.4s ease-in-out; } .room-details-three__text { font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .room-details-three__text span { font-size: 24px; color: var(--solinom-base, #CBA36B); } .room-details-three__left { display: flex; align-items: center; justify-content: space-between; } .room-details-three__inner { display: flex; align-items: center; gap: 40px; } .room-details-three__social { display: flex; align-items: center; justify-content: end; flex: 35%; width: 35%; text-align: end; } .room-details-three__social__item { display: flex; align-items: center; justify-content: center; max-width: 40px; width: 100%; height: 40px; border-radius: 50px; background-color: var(--solinom-border-color, #FAF6F0); color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .room-details-three__social__item:hover { color: var(--solinom-base, #CBA36B); background-color: var(--solinom-gray, #1C2F36); } .room-details-three__social a + a { margin-right: 20px; } .room-details-three__right { background-color: var(--solinom-gray, #1C2F36); margin-right: 46px; position: relative; } .room-details-three__right::after { content: ""; width: 46px; height: 40px; position: absolute; top: 0; right: -45.5px; background-color: var(--solinom-gray, #1C2F36); clip-path: polygon(100% 0, 100% 100%, 0 0); } .room-details-three__top { border-bottom: 1px solid rgba(var(--solinom-white-rgb, 255, 255, 255), 0.15); padding: 25px 0px; } .room-details-three__top .night { display: block; font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; display: block; text-transform: capitalize; color: var(--solinom-text-gray, #7D8B90); text-align: center; } .room-details-three__top__number { font-style: normal; font-weight: 600; font-size: 40px; line-height: normal; color: var(--solinom-white, #fff); margin-bottom: 0; padding-bottom: 0; text-align: center; } .room-details-three__bottom { padding: 30px 0px; } .room-details-three__bottom .reviews { display: block; font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; display: block; text-transform: capitalize; color: var(--solinom-text-gray, #7D8B90); text-align: center; } .room-details-three__bottom .star { text-align: center; font-size: 18px; color: var(--solinom-base, #CBA36B); letter-spacing: -1px; line-height: 1; } .room-details-thumb { padding: 0px 0px 100px; } .room-details-thumb__inner { position: relative; z-index: 1; min-height: 620px; height: 100%; } .room-details-thumb__inner:hover .room-details-thumb__item { right: 100px; left: 100px; top: 150px; z-index: -1; } .room-details-thumb__inner:hover .room-details-thumb__item:not(:first-of-type) { right: 0px; left: 0px; top: 0; z-index: 1; } .room-details-thumb__inner:hover .room-details-thumb__item:not(:first-of-type) img { filter: grayscale(0%); } .room-details-thumb__inner:hover .room-details-thumb__item img { filter: grayscale(50%); } .room-details-thumb__item { z-index: 1; position: absolute; top: 0px; right: 0px; left: 0px; transition: all 0.6s ease-in-out; cursor: pointer; } .room-details-thumb__item img { object-fit: cover; width: 100%; filter: grayscale(0%); } .room-details-thumb__item:not(:first-of-type) { right: 100px; left: 100px; top: 150px; z-index: -1; transition: all 0.6s ease-in-out; } .room-details-thumb__item:not(:first-of-type) img { filter: grayscale(50%); } /*-------------------------------------------------------------- # Testimonials --------------------------------------------------------------*/ /***Testimonial Two Style***/ .testimonials-one { position: relative; z-index: 1; padding: 120px 0px; background-color: var(--solinom-gray2, #283E46); } @media (max-width: 991px) { .testimonials-one { padding: 100px 0px; } } @media (max-width: 767px) { .testimonials-one { padding: 80px 0px; } } .testimonials-one__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } .testimonials-one__carousel .tns-slide-active + .tns-slide-active .testimonials-one__item { opacity: 0.4; margin-bottom: 40px !important; border-top: 0px solid transparent !important; border: 1px solid var(--solinom-base, #CBA36B); background: transparent; position: relative; } .testimonials-one__carousel .tns-slide-active + .tns-slide-active .testimonials-one__item::after { background-color: transparent; border: 1px solid var(--solinom-base, #CBA36B); border-top: 0px transparent; } .testimonials-one button[data-action=stop] { display: none; } .testimonials-one__item { padding: 50px 90px; background: transparent; border: 0px solid transparent; margin-bottom: 0px; position: relative; opacity: 1; background-color: var(--solinom-gray, #1C2F36); } @media (max-width: 767px) { .testimonials-one__item { padding: 30px 50px; } } @media (max-width: 575px) { .testimonials-one__item { padding: 30px 20px; } } .testimonials-one__item::after { content: ""; top: 0; right: 40px; left: 40px; bottom: -40px; position: absolute; background-color: transparent; border: 1px solid transparent; border-top: 0px transparent; } @media (max-width: 575px) { .testimonials-one__item::after { display: none; } } .testimonials-one__content { margin-right: 30px; } @media (max-width: 575px) { .testimonials-one__content { margin-right: 0; } } .testimonials-one__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; } .testimonials-one__name { font-style: normal; font-weight: 700; font-size: 20px; line-height: 130%; margin-bottom: 0; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); } .testimonials-one__dec { font-style: normal; font-weight: 500; font-size: 16px; line-height: 156%; margin-bottom: 0; padding-bottom: 0; text-transform: capitalize; } .testimonials-one__star { font-size: 18px; color: var(--solinom-base, #CBA36B); letter-spacing: -1px; } .testimonials-one__text { font-style: normal; font-weight: 500; font-size: 18px; line-height: 187%; margin-bottom: 0; padding-bottom: 0; } .testimonials-one__thumb { margin-left: 30px; display: flex; justify-content: end; } .testimonials-one__thumb__item { width: 135px; height: 135px; overflow: hidden; border-radius: 50%; position: relative; margin-right: -20px; z-index: 1; } .testimonials-one__thumb__item img { object-fit: cover; width: 100%; } .testimonials-one__thumb__quite { width: 135px; height: 135px; background-color: var(--solinom-text, #101D22); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 32px; color: var(--solinom-base, #CBA36B); } /***Testimonial Two Style***/ .testimonials-two { position: relative; z-index: 1; padding: 120px 0px; background-color: var(--solinom-text-dark, #15262C); } @media (max-width: 991px) { .testimonials-two { padding: 100px 0px; } } @media (max-width: 767px) { .testimonials-two { padding: 80px 0px; } } .testimonials-two__item { margin-top: 50px; margin-bottom: 60px; background-color: transparent; position: relative; z-index: 1; text-align: center; padding: 1px 50px 30px; } .testimonials-two__item__bg-item { width: 100%; height: 100%; background-color: var(--solinom-gray, #1C2F36); position: absolute; top: 0; right: 0; clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%); z-index: -1; } .testimonials-two__item__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; mix-blend-mode: overlay; } .testimonials-two__item__text { text-align: center; max-width: 415px; width: 100%; font-weight: 500; font-size: 18px; line-height: 188%; margin-bottom: 28px; padding-bottom: 0; margin-right: auto; margin-left: auto; } .testimonials-two__item__author__title { font-style: normal; font-weight: 700; font-size: 20px; line-height: 130%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-white, #fff); text-transform: capitalize; } .testimonials-two__item__author__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 156%; margin-bottom: 0; padding-bottom: 0; display: block; color: var(--solinom-text-gray, #7D8B90); } .testimonials-two__item__star { font-size: 22px; color: var(--solinom-base, #CBA36B); letter-spacing: -1px; margin-bottom: 4px; } .testimonials-two__item::after { content: ""; background-color: var(--solinom-base, #CBA36B); position: absolute; top: 31px; right: 0; left: 2px; bottom: 1px; z-index: -2; transition: all 0.4s ease-in-out; } .testimonials-two__item::before { content: ""; -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: auto; mask-size: auto; width: 82px; height: 60px; background-color: var(--solinom-gray, #1C2F36); position: absolute; bottom: -60px; right: 50%; transform: translateX(50%); } .testimonials-two__item:hover::after { background-color: var(--solinom-gray2, #283E46); } .testimonials-two__thumb { margin-top: -50px; position: relative; width: 119px; height: 119px; margin-right: auto; margin-left: auto; margin-bottom: 35px; } .testimonials-two__thumb img { border-radius: 50%; border: 10px solid var(--solinom-gray, #1C2F36); object-fit: cover; width: 100%; } .testimonials-two__thumb__quite { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--solinom-base, #CBA36B); background-color: var(--solinom-text, #101D22); position: absolute; right: 50%; transform: translateX(50%); bottom: -10px; } /***Testimonial Four Style***/ .testimonial-fore { position: relative; z-index: 1; padding: 120px 0px; } @media (max-width: 991px) { .testimonial-fore { padding: 100px 0px; } } @media (max-width: 767px) { .testimonial-fore { padding: 80px 0px; } } .testimonial-fore__bg { position: absolute; top: 0; right: 0; width: 100%; height: 557px; background-repeat: no-repeat; background-size: cover; z-index: -1; } .testimonial-fore__bg::after { content: ""; width: 100%; height: 557px; position: absolute; top: 0; right: 0; background-color: var(--solinom-gray, #1C2F36); opacity: 0.8; } .testimonial-fore__inner { position: relative; z-index: 1; } .testimonial-fore .sec-title .sec-title__title { color: var(--solinom-white, #fff); } .testimonial-fore__item { background-color: var(--solinom-border-color, #FAF6F0); position: relative; padding-top: 1px; margin-top: 40px; margin-bottom: 60px; } .testimonial-fore__item__top { margin-top: -40px; max-width: 260px; width: 100%; height: auto; background-color: var(--solinom-base, #CBA36B); margin-right: auto; margin-left: auto; text-align: center; padding: 25px 10px; } .testimonial-fore__item__top__title { font-style: normal; font-weight: 700; font-size: 20px; line-height: 130%; color: var(--solinom-white, #fff); text-transform: capitalize; margin-bottom: 0; padding-bottom: 0; } .testimonial-fore__item__top__text { font-style: normal; font-weight: 500; font-size: 14px; line-height: 179%; color: var(--solinom-white, #fff); display: block; } .testimonial-fore__item__star { margin-top: -9px; font-size: 20px; color: var(--solinom-white, #fff); } .testimonial-fore__item::after { content: ""; width: 114px; height: 61.5px; position: absolute; right: 50%; transform: translateX(50%); background-color: var(--solinom-border-color, #FAF6F0); clip-path: polygon(100% 0, 0% 100%, 0 0); bottom: -61px; } .testimonial-fore__text { border-top: 2px solid rgba(var(--solinom-text-dark-rgb, 21, 38, 44), 0.1); text-align: center; font-style: normal; font-weight: 500; font-size: 40px; line-height: 150%; margin-bottom: -4px; color: var(--solinom-text-dark, #15262C); padding-bottom: 0; padding: 65px 80px 65px; } @media (max-width: 991px) { .testimonial-fore__text { padding: 30px 50px 40px; font-size: 30px; } } @media (max-width: 575px) { .testimonial-fore__text { padding: 30px 20px 20px; font-size: 25px; } } .testimonial-fore__thumb__carousel .slick-current + .slick-active .testimonial-fore__meta-thumb { border: 4px solid var(--solinom-base, #CBA36B); } .testimonial-fore__meta-thumb { width: 78px; height: 78px; display: block; border-radius: 50%; border: 4px solid transparent; transition: all 0.4s ease-in-out; } .testimonial-fore__meta-thumb img { object-fit: cover; width: 100%; height: 100%; border-radius: 50%; writing-mode: vertical-rl; transform: rotate(-90deg); } .testimonial-fore__thumb { position: absolute; top: 40px; right: 100px; width: 310px; transform: rotate(90deg); writing-mode: vertical-rl; } @media (max-width: 1199px) { .testimonial-fore__thumb { right: 0px; } } @media (max-width: 991px) { .testimonial-fore__thumb { display: none; } } /*-------------------------------------------------------------- # Promotion --------------------------------------------------------------*/ /***Promotion***/ .promotion-one { position: relative; padding: 120px 0 0; } @media (max-width: 991px) { .promotion-one { padding: 100px 0 0; } } @media (max-width: 767px) { .promotion-one { padding: 80px 0 0; } } .promotion-one::after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 480px; background-color: var(--solinom-border-color, #FAF6F0); z-index: -2; } .promotion-one__sidebar { margin-right: 23px; margin-left: 75px; position: relative; padding-top: 87px; padding-bottom: 28px; } .promotion-one__sidebar__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } .promotion-one__sidebar__bg::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.9); } .promotion-one__sidebar::after { content: ""; position: absolute; top: 10px; right: 10px; left: 10px; bottom: 20%; background-image: url(../images/shapes/promotion-card-shape.png); background-repeat: no-repeat; background-size: cover; z-index: -1; } .promotion-one__sidebar__funfact { display: flex; flex-direction: column; margin-bottom: 30px; } .promotion-one__sidebar__count { display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 40px; line-height: 100%; color: var(--solinom-white, #fff); margin-bottom: 0; padding-bottom: 0; } .promotion-one__sidebar__text { font-style: normal; font-weight: 700; font-size: 40px; line-height: 100%; text-align: center; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-white, #fff); } .promotion-one__sidebar__room-quality { position: relative; z-index: 1; font-style: normal; font-weight: 500; font-size: 20px; line-height: 175%; text-align: center; text-transform: capitalize; color: var(--solinom-base, #CBA36B); padding: 40px 0px; } .promotion-one__sidebar__room-quality img { position: absolute; top: 0; right: 50%; transform: translateX(50%); } .promotion-one__sidebar__bottom { background-color: var(--solinom-base, #CBA36B); margin-right: -24px; margin-left: -24px; } .promotion-one__sidebar__item { padding: 30px 23px 20px; display: flex; gap: 20px; } .promotion-one__sidebar__item__icon { max-width: 40px; width: 100%; height: 40px; background-color: var(--solinom-text, #101D22); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--solinom-base, #CBA36B); } .promotion-one__sidebar__item__title { font-style: normal; font-weight: 600; font-size: 18px; line-height: 23px; margin-bottom: 5px; padding-bottom: 0; color: var(--solinom-white, #fff); margin-top: -5px; } .promotion-one__sidebar__item__text { font-style: normal; font-weight: 500; font-size: 14px; line-height: 171%; margin-bottom: -4px; padding-bottom: 0; color: var(--solinom-white, #fff); } .promotion-one__sidebar__item:hover .promotion-one__sidebar__item__icon { animation: bounceIn 1s linear; } .promotion-one__sidebar__item + .promotion-one__sidebar__item { border-top: 1px solid rgba(var(--solinom-white-rgb, 255, 255, 255), 0.2); } .promotion-one__content { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 66px; } .promotion-one__content__bg { position: absolute; top: 0; right: -65px; left: 148px; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } .promotion-one__content__item { display: flex; align-items: center; background-color: var(--solinom-white, #fff); max-width: 456px; margin-right: auto; margin-left: 0; } .promotion-one__content__item__content { padding: 0px 30px 30px; } .promotion-one__content__item__top { font-style: normal; font-weight: 600; font-size: 16px; line-height: 20px; display: inline-block; padding: 6.5px 15px; border-radius: 100px; background-color: var(--solinom-white, #fff); margin-top: -16px; margin-bottom: 0; color: var(--solinom-text, #101D22); position: absolute; } .promotion-one__content__item__title { margin-top: 30px; font-style: normal; font-weight: 600; font-size: 20px; line-height: 25px; margin-bottom: 3px; padding-bottom: 0; } .promotion-one__content__item__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 167%; margin-bottom: 10px; padding-bottom: 0; } .promotion-one__content__item .solinom-btn { padding: 1px 10px; font-size: 14px; } .promotion-one__content__item__thumb { flex: 45%; width: 45%; position: relative; z-index: 1; } .promotion-one__content__item__thumb__item { position: relative; } .promotion-one__content__item__thumb__item img { object-fit: cover; width: 100%; } .promotion-one__content__item__thumb__price { font-style: normal; font-weight: 600; font-size: 18px; line-height: normal; color: var(--solinom-base, #CBA36B); background-color: var(--solinom-text-dark, #15262C); padding: 10px 6px; border-radius: 100px 100px 0px 0px; transform: rotate(180deg); position: absolute; writing-mode: vertical-rl; top: 0; left: 15px; } .promotion-one__content__item + .promotion-one__content__item { margin-top: 54px; } /*-------------------------------------------------------------- # Tours --------------------------------------------------------------*/ /***Promotion Page***/ .tours-page { position: relative; padding: 120px 0; } @media (max-width: 991px) { .tours-page { padding: 100px 0; } } @media (max-width: 767px) { .tours-page { padding: 80px 0; } } /***Promotion One***/ .tours-one { position: relative; padding: 120px 0; } @media (max-width: 991px) { .tours-one { padding: 100px 0; } } @media (max-width: 767px) { .tours-one { padding: 80px 0; } } .tours-one .container-fluid { max-width: 1600px; width: 100%; margin-right: auto; margin-left: -20px; } .tours-one__top { padding-bottom: 55px; } @media (max-width: 991px) { .tours-one__top { padding-bottom: 45px; } } @media (max-width: 767px) { .tours-one__top { padding-bottom: 40px; } } @media (max-width: 575px) { .tours-one__top { padding-bottom: 35px; } } .tours-one__top .sec-title { padding-bottom: 0; } .tours-one__top__inner { display: flex; align-items: center; justify-content: space-between; padding-top: 35px; border-top: 1px solid var(--solinom-base, #CBA36B); } @media (max-width: 767px) { .tours-one__top__inner { flex-direction: column; justify-content: start; align-items: start; gap: 20px; } } .tours-one__top__inner__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 0; padding-bottom: 0; max-width: 390px; width: 100%; } .tours-one .tours-one__nav { display: flex; align-items: center; gap: 10px; } .tours-one .tours-one__nav button { border: none; outline: none; margin: 0; padding: 0; background-color: transparent; } .tours-one .tours-one__nav button span { border: none; outline: none; width: 48px; height: 48px; background-color: var(--solinom-text, #101D22); display: flex; justify-content: center; align-items: center; color: var(--solinom-base, #CBA36B); font-size: 16px; transition: all 500ms ease; } .tours-one .tours-one__nav button span:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .tours-one__carousel .room-card-three { position: relative; transition: all 0.4s ease-in-out; } .tours-one__carousel .room-card-three::after { background-color: var(--solinom-base, #CBA36B); content: ""; width: 100%; height: 0px; position: absolute; bottom: 0; right: 0; transition: all 0.4s ease-in-out; } .tours-one__carousel .room-card-three:hover { border-color: var(--solinom-base, #CBA36B); } .tours-one__carousel .room-card-three:hover::after { height: 231px; } .tours-one::after { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 350px; background-color: var(--solinom-border-color, #FAF6F0); z-index: -2; } /*-------------------------------------------------------------- # CTA --------------------------------------------------------------*/ /**** Cta One****/ .cta-one { position: relative; } .cta-one--one { margin-bottom: -143px; position: relative; z-index: 1; } .cta-one__inner { display: flex; } @media (max-width: 767px) { .cta-one__inner { flex-direction: column; justify-content: start; align-items: start; } } .cta-one__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } .cta-one__bg::after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: rgba(var(--solinom-base-rgb, 203, 163, 107), 0.7); } .cta-one__funfact { position: relative; z-index: 1; width: 100%; flex: 43%; display: flex; align-items: center; justify-content: center; } @media (max-width: 767px) { .cta-one__funfact { flex: 100%; padding-top: 50px; padding-bottom: 50px; } } .cta-one__funfact__content { width: 147px; height: 147px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background-color: var(--solinom-white, #fff); margin-right: auto; margin-left: auto; position: relative; vertical-align: middle; transition: all 0.4s ease-in-out; } .cta-one__funfact__content::after { content: ""; position: absolute; left: -10px; top: -10px; bottom: -10px; right: -10px; background-color: transparent; border: 1px solid var(--solinom-white, #fff); border-radius: 50%; } .cta-one__funfact__content:hover::after { animation: scaleError 3s ease-in-out infinite; } .cta-one__funfact__count { display: flex; align-items: center; font-style: normal; font-weight: 700; font-size: 40px; line-height: 50px; color: var(--solinom-text, #101D22); margin-bottom: 0; padding-bottom: 0; } .cta-one__funfact__text { margin-bottom: 0; padding-bottom: 0; font-style: normal; font-weight: 700; font-size: 24px; line-height: 30px; color: var(--solinom-text, #101D22); } .cta-one__content { flex: 57%; background-color: var(--solinom-gray2, #283E46); padding: 80px; position: relative; } @media (max-width: 575px) { .cta-one__content { padding: 30px; } } .cta-one__content__title { margin-top: -10px; font-style: normal; font-weight: 700; font-size: 40px; line-height: 150%; color: var(--solinom-white, #fff); text-transform: capitalize; text-align: center; max-width: 350px; margin-right: auto; margin-left: auto; margin-bottom: 27px; } @media (max-width: 1199px) { .cta-one__content__title { font-size: 31px; } } @media (max-width: 575px) { .cta-one__content__title { max-width: 100%; font-size: 25px; } } .cta-one__content__btn { text-align: center; } .cta-one__content__btn .solinom-btn { padding: 11px 40px; } .cta-one__content::after { content: ""; width: 100%; height: 100%; background-image: url(../images/shapes/cta-shape.png); position: absolute; top: 0; right: 0; background-size: contain; background-position: right left; background-repeat: no-repeat; } @media (max-width: 991px) and (min-width: 767px) { .cta-one__content::after { display: none; } } @media (max-width: 575px) { .cta-one__content::after { display: none; } } /**** Cta Two****/ .cta-two { position: relative; z-index: 1; padding: 79px 0px; overflow: hidden; } .cta-two__bg { position: absolute; right: 0; top: 0; width: 100%; height: 100%; background-position: right top; background-repeat: no-repeat; background-size: cover; z-index: -1; } .cta-two__bg::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background: linear-gradient(-270.1deg, #CBA36B 0.09%, #15262C 82.88%); opacity: 0.9; } .cta-two__content__title { font-style: normal; font-weight: 500; font-size: 40px; line-height: 150%; margin-bottom: 20px; padding-bottom: 0; color: var(--solinom-white, #fff); } .cta-two__content__btn a { padding: 11px 40px; } .cta-two__element { position: absolute; top: 0; right: 0; z-index: -1; } @media (max-width: 991px) { .cta-two__element { display: none; } } .cta-two__element-two { position: absolute; top: -0.5px; left: 0; z-index: -1; } @media (max-width: 991px) { .cta-two__element-two { display: none; } } .cta-two__funfact { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; } .cta-two__funfact__content { position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); width: 120px; height: 120px; border-radius: 50%; background-color: var(--solinom-text, #101D22); display: flex; align-items: center; justify-content: center; flex-direction: column; } .cta-two__funfact__count { display: flex; align-items: center; font-style: normal; font-weight: 700; font-size: 33.5064px; line-height: 109%; color: var(--solinom-white, #fff); margin-bottom: 0; padding-bottom: 0; } .cta-two__funfact__text { font-style: normal; font-weight: 400; font-size: 16.3265px; line-height: 109%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-base, #CBA36B); } .cta-two__funfact__element { position: absolute; animation: rotated 10s infinite linear; } .cta-two__thumb img { border-radius: 1000px; object-fit: cover; width: 100%; min-height: 200px; } /**** Cta Three****/ .cta-three { position: relative; padding: 80px 0px; overflow: hidden; } .cta-three__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } .cta-three__inner { background: rgba(203, 163, 107, 0.8); backdrop-filter: blur(5px); padding: 70px 115px 70px 107px; max-width: 907px; width: 100%; border-radius: 1000px 0 0 1000px; display: flex; align-items: center; gap: 60px; } @media (max-width: 991px) { .cta-three__inner { padding: 50px 50px 50px 80px; } } @media (max-width: 767px) { .cta-three__inner { flex-direction: column; gap: 60px; border-radius: 0px 0 0 0px; } } @media (max-width: 575px) { .cta-three__inner { padding: 0; background-color: transparent; backdrop-filter: blur(0px); } } .cta-three__left { flex: 65%; } .cta-three__right { flex: 35%; } .cta-three__title { font-style: normal; font-weight: 600; font-size: 50px; line-height: 120%; margin-bottom: 30px; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); } @media (max-width: 991px) { .cta-three__title { font-size: 35px; } } .cta-three .solinom-btn { background-color: var(--solinom-text, #101D22); border: 1px solid transparent; } .cta-three .solinom-btn:hover { border-color: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.3); color: var(--solinom-white, #fff); } .cta-three__shape { position: absolute; left: 0; top: 0; z-index: -1; } @media (max-width: 767px) { .cta-three__shape { display: none; } } .cta-three__funfact { width: 178px; height: 178px; border-radius: 50%; background-color: var(--solinom-text, #101D22); display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; } .cta-three__funfact__top { display: block; font-style: normal; font-weight: 500; font-size: 24.2977px; line-height: 109%; color: var(--solinom-base, #CBA36B); text-transform: capitalize; } .cta-three__funfact__text { display: flex; text-align: center; font-style: normal; font-weight: 700; font-size: 49.8653px; line-height: 114%; text-transform: uppercase; color: var(--solinom-white, #fff); } .cta-three__funfact__text span { color: inherit; } .cta-three__funfact__element { position: absolute; top: -37px; right: -37px; animation: rotated 10s infinite linear; } /*-------------------------------------------------------------- # Gallery --------------------------------------------------------------*/ .gallery-one { padding-top: 120px; padding-bottom: 120px; } @media (max-width: 991px) { .gallery-one { padding-top: 100px; padding-bottom: 100px; } } @media (max-width: 767px) { .gallery-one { padding-top: 80px; padding-bottom: 80px; } } .gallery-one .row { --bs-gutter-x: 30px; --bs-gutter-y: 30px; } @media (min-width: 992px) { .gallery-one__carousel .owl-nav { display: none; } } .gallery-one__filter__list { display: inline-flex; justify-content: center; align-items: center; margin-bottom: 40px; flex-wrap: wrap; gap: 10px; } .gallery-one__filter__list li { cursor: pointer; } .gallery-one__filter__list li span { display: block; font-size: 14px; background-color: var(--solinom-gray, #1C2F36); transition: all 500ms ease; text-transform: capitalize; font-weight: 600; padding: 12px 25px; line-height: 1.2em; } .gallery-one__filter__list li.active span, .gallery-one__filter__list li:hover span { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .gallery-one__card { position: relative; overflow: hidden; background-color: var(--solinom-gray, #1C2F36); } .gallery-one__card img { transform: scale(1); max-width: 100%; transition: transform 500ms ease, opacity 500ms ease; opacity: 1; } .gallery-one__card__hover { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(var(--solinom-gray2-rgb, 40, 62, 70), 0.7); display: flex; justify-content: center; align-items: center; transform: scale(1, 0); transition: transform 500ms ease; transform-origin: bottom center; } .gallery-one__card__hover .img-popup { position: relative; } .gallery-one__card:hover img { transform: scale(1.05); opacity: 0.9; mix-blend-mode: screen; } .gallery-one__card:hover .gallery-one__card__hover { transform-origin: top center; transform: scale(1, 1); } .gallery-one__card__icon { width: 70px; height: 70px; border-radius: 50%; background-color: transparent; border: 0.643451px solid var(--solinom-base, #CBA36B); display: flex; justify-content: center; align-items: center; transition: all 0.4s ease-in-out; } .gallery-one__card__icon__item { width: 25px; height: 25px; display: block; position: relative; } .gallery-one__card__icon__item::after, .gallery-one__card__icon__item::before { content: ""; width: 2px; height: 100%; background-color: var(--solinom-base, #CBA36B); position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); transition: all 0.4s ease-in-out; } .gallery-one__card__icon__item::after { transform: translate(50%, -50%) rotate(-90deg); } .gallery-one__card__icon:hover { background-color: var(--solinom-base, #CBA36B); } .gallery-one__card__icon:hover .gallery-one__card__icon__item::after, .gallery-one__card__icon:hover .gallery-one__card__icon__item::before { background-color: var(--solinom-white, #fff); } .gallery-two { position: relative; overflow: hidden; padding: 0 0 20px; } .gallery-two .container-fluid { width: 100%; padding-right: 0; padding-left: 0; } @media (max-width: 767px) { .gallery-two .container-fluid { padding-right: 15px; padding-left: 15px; } } .gallery-two .row { --bs-gutter-x: 20px; --bs-gutter-y: 20px; } .gallery-two__col-one { width: 65%; } @media (max-width: 1199px) { .gallery-two__col-one { width: 100%; } } .gallery-two__col-two { width: 35%; } @media (max-width: 1199px) { .gallery-two__col-two { width: 100%; } } .gallery-two__card { position: relative; overflow: hidden; background-color: var(--solinom-black, #000); } .gallery-two__card img { transform: scale(1); width: 100%; transition: transform 500ms ease, opacity 500ms ease; opacity: 1; } .gallery-two__card__hover { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(var(--solinom-black-rgb, 0, 0, 0), 0.5); display: flex; justify-content: center; align-items: center; transform: scale(1, 0); transition: transform 500ms ease; transform-origin: bottom center; } .gallery-two__card__hover .img-popup { position: relative; } .gallery-two__card:hover img { transform: scale(1.05); opacity: 0.9; mix-blend-mode: screen; } .gallery-two__card:hover .gallery-two__card__hover { transform-origin: top center; transform: scale(1, 1); } .gallery-two__card a { width: 75px; height: 75px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-color: var(--solinom-white, #fff); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .gallery-two__card a:hover .gallery-two__card__icon::after, .gallery-two__card a:hover .gallery-two__card__icon::before { background-color: var(--solinom-base, #CBA36B); } .gallery-two__card__icon { width: 24px; height: 24px; display: block; position: relative; } .gallery-two__card__icon::after, .gallery-two__card__icon::before { content: ""; width: 2px; height: 100%; background-color: var(--solinom-black, #000); position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); transition: all 400ms ease; } .gallery-two__card__icon::after { transform: translate(50%, -50%) rotate(-90deg); } .gallery-two__info { position: relative; background-color: var(--solinom-base, #CBA36B); background-position: right bottom; background-repeat: no-repeat; background-size: cover; padding: 0 100px 0 50px; height: 100%; } @media (min-width: 1200px) { .gallery-two__info { display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; } } @media (max-width: 1500px) { .gallery-two__info { padding-right: 40px; padding-left: 30px; } } @media (max-width: 1199px) { .gallery-two__info { padding: 80px 50px; } } @media (max-width: 767px) { .gallery-two__info { padding: 50px 30px; } } .gallery-two__info__icon { width: 60px; height: 60px; margin-bottom: 24px; } .gallery-two__info__icon img { width: 100%; height: 100%; object-fit: cover; } .gallery-two__info__title { color: var(--solinom-white, #fff); font-size: 44px; line-height: 50px; text-transform: uppercase; font-weight: 700; margin: 0; } @media (min-width: 1200px) and (max-width: 1300px) { .gallery-two__info__title { font-size: 35px; line-height: 42px; } } @media (max-width: 767px) { .gallery-two__info__title { font-size: 35px; line-height: 45px; } } .gallery-top { margin-left: -140px; position: relative; padding-bottom: 100px; } @media (max-width: 767px) { .gallery-top { padding-bottom: 80px; } } .gallery-three { padding-bottom: 120px; background-color: var(--solinom-border-color, #FAF6F0); } @media (max-width: 991px) { .gallery-three { padding-bottom: 100px; } } @media (max-width: 767px) { .gallery-three { padding-bottom: 80px; } } .gallery-three .gutter-y-20 { --bs-gutter-y: 20px; } .gallery-three .gutter-x-20 { --bs-gutter-x: 20px; } .gallery-three__item { position: relative; z-index: 1; overflow: hidden; } .gallery-three__item img { width: 100%; object-fit: cover; transform: scale(1); transition: all 0.4s ease-in-out; } .gallery-three__item__hover { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(var(--solinom-base-rgb, 203, 163, 107), 0.9); display: flex; justify-content: center; align-items: center; transform: scale(1, 0); transition: transform 500ms ease; transform-origin: bottom center; } .gallery-three__item:hover img { transform: scale(1.1); } .gallery-three__item:hover .gallery-three__item__hover { transform-origin: top center; transform: scale(1, 1); } .gallery-three__item__icon { font-size: 40px; color: var(--solinom-white, #fff); } .gallery-three__item__icon:hover { background-color: var(--solinom-base, #CBA36B); } .gallery-three .mt-2 { margin-top: 1px !important; } /*-------------------------------------------------------------- # Advantages --------------------------------------------------------------*/ /*** Advantages One***/ .advantages-one { position: relative; z-index: 1; padding: 120px 0px; overflow: hidden; background-color: var(--solinom-gray, #1C2F36); } @media (max-width: 991px) { .advantages-one { padding: 100px 0px; } } @media (max-width: 767px) { .advantages-one { padding: 80px 0px; } } .advantages-one .container { max-width: 1000px; margin-right: auto; margin-left: auto; } .advantages-one__bg { position: absolute; top: 0; right: 0; width: 47%; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } .advantages-one .sec-title .sec-title__title { color: var(--solinom-white, #fff); } .advantages-one__item { background-color: var(--solinom-white, #fff); padding: 40px; position: relative; z-index: 1; overflow: hidden; } @media (max-width: 575px) { .advantages-one__item { padding: 20px 30px; } } .advantages-one__item::after { position: absolute; content: ""; top: 0; left: 0; background-color: rgba(var(--solinom-gray2-rgb, 40, 62, 70), 1); width: 0%; height: 100%; z-index: -1; right: auto; transition: all 0.5s ease-in-out; } .advantages-one__item__top { display: flex; align-items: center; gap: 22px; margin-bottom: 10px; } .advantages-one__item__icon { display: flex; align-items: center; justify-content: center; background-color: var(--solinom-base, #CBA36B); width: 54px; height: 54px; font-size: 32px; color: var(--solinom-white, #fff); } .advantages-one__item__title { font-style: normal; font-weight: 600; font-size: 20px; line-height: 140%; margin-bottom: 0; padding-bottom: 0; transition: all 0.4s ease-in-out; } .advantages-one__item__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .advantages-one__item__title a:hover { background-size: 100% 1px; } .advantages-one__item__text { margin-bottom: -10px; padding-bottom: 0; font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .advantages-one__item__element { position: absolute; top: 0; left: 0; } .advantages-one__item:hover::after { left: auto; right: 0; width: 100%; } .advantages-one__item:hover .advantages-one__item__title, .advantages-one__item:hover .advantages-one__item__text { color: var(--solinom-white, #fff); } .advantages-one__item:hover .advantages-one__item__icon i { animation: bounceIn 1s linear; } .advantages-one .gutter-y-20 { --bs-gutter-y: 20px; } .advantages-one .gutter-x-20 { --bs-gutter-x: 20px; } .advantages-one__element { position: absolute; top: 0; left: 0; width: 55%; opacity: 0.3; } .advantages-one__man { position: absolute; bottom: 0; left: 0; animation: shake 4s ease-in-out infinite; } /*-------------------------------------------------------------- # Review --------------------------------------------------------------*/ /***Reviews Card***/ .review-card { margin-top: 40px; margin-bottom: 45px; position: relative; z-index: 1; background-color: var(--solinom-border-color, #FAF6F0); padding: 40px 40px 1px; transition: all 0.4s ease-in-out; } .review-card__star { color: var(--solinom-text, #101D22); font-size: 20px; line-height: 1; letter-spacing: -1.5px; margin-bottom: 15px; transition: all 500ms linear; } .review-card__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 30px; padding-bottom: 0; transition: all 500ms linear; } .review-card__author { display: flex; align-items: center; gap: 25px; border-radius: 100px; background-color: var(--solinom-white, #fff); position: relative; margin-bottom: -45px; margin-left: 30px; transition: all 500ms linear; } .review-card__author__thumb { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; } .review-card__author__thumb img { object-fit: cover; width: 100%; } .review-card__author__name { font-style: normal; font-weight: 700; font-size: 20px; line-height: 130%; margin-bottom: -5px; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-text, #101D22); transition: all 500ms linear; } .review-card__author__subtitle { display: inline-block; font-style: normal; font-weight: 500; font-size: 16px; line-height: 156%; color: var(--solinom-text-gray, #7D8B90); margin-bottom: -1px; transition: all 500ms linear; } .review-card__element, .review-card__hover-element { position: absolute; top: -40px; right: 0; transition: all 500ms linear; } .review-card__element img, .review-card__hover-element img { object-fit: cover; width: 100%; } .review-card__hover-element { visibility: hidden; opacity: 0; transition: all 500ms linear; } .review-card::after { -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: auto; mask-size: auto; background-color: var(--solinom-text, #101D22); width: 88px; height: 39px; content: ""; position: absolute; left: 0; bottom: -38px; z-index: 1; transition: all 500ms ease-in-out; } .review-card::before { background: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.3); bottom: 0; content: ""; right: 50%; position: absolute; left: 51%; top: 0; opacity: 1; pointer-events: none; transition: all 500ms linear; } .review-card:hover { background-color: rgba(var(--solinom-gray-rgb, 28, 47, 54), 0.9); } .review-card:hover::before { right: 0; left: 0; opacity: 0; transition: all 500ms linear; } .review-card:hover .review-card__element { opacity: 0; visibility: hidden; } .review-card:hover .review-card__hover-element { visibility: visible; opacity: 1; } .review-card:hover .review-card__star { color: var(--solinom-base, #CBA36B); } .review-card:hover .review-card__author, .review-card:hover::after { background-color: var(--solinom-base, #CBA36B); } .review-card:hover .review-card__text, .review-card:hover .review-card__author__name, .review-card:hover .review-card__author__subtitle { color: var(--solinom-white, #fff); } /***Reviews One***/ .reviews-one { position: relative; z-index: 1; padding: 120px 0px; } @media (max-width: 991px) { .reviews-one { padding: 100px 0px; } } @media (max-width: 767px) { .reviews-one { padding: 80px 0px; } } .reviews-one__line { position: absolute; width: 100%; height: 1px; right: 0; bottom: 0; background-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .instagram-two__line { position: absolute; width: 100%; height: 1px; right: 0; bottom: 0; background-color: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.2); } /*-------------------------------------------------------------- # Sidebar --------------------------------------------------------------*/ .sidebar__single { background-color: var(--solinom-white, #fff); padding: 30px 20px; box-shadow: 0px 0px 60px 0px rgba(2, 2, 2, 0.07); width: 100%; margin-right: auto; margin-left: auto; } .sidebar__single--search { width: 100%; margin-right: auto; margin-left: auto; margin-bottom: 30px; box-shadow: 0px 0px 0px 0px rgba(2, 2, 2, 0.07); } @media (min-width: 1200px) { .sidebar__single { padding: 40px; } } .sidebar__single + .sidebar__single { margin-top: 30px; } .sidebar__title { margin: 0; margin-top: -5px; margin-bottom: 29px; padding-bottom: 24px; color: var(--solinom-text, #101D22); text-transform: capitalize; font-size: 24px; font-weight: 700; line-height: 108.333%; border-bottom: 1px solid var(--solinom-base, #CBA36B); } .sidebar__search { position: relative; background-color: var(--solinom-border-color, #FAF6F0); padding: 30px; } .sidebar__search input[type=search], .sidebar__search input[type=text] { outline: none; width: 100%; height: 60px; background-color: var(--solinom-white, #fff); padding-right: 55px; padding-left: 20px; transition: all 500ms ease; border: none; color: var(--solinom-text, #101D22); font-size: 16px; font-weight: 500; line-height: 162.5%; } .sidebar__search input[type=search]:focus, .sidebar__search input[type=text]:focus { box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1); border: none; } .sidebar__search input[type=search]::placeholder, .sidebar__search input[type=text]::placeholder { color: var(--solinom-text, #101D22); font-size: 16px; font-weight: 500; line-height: 162.5%; text-shadow: 0 0 0.1px currentColor; } .sidebar__search button[type=submit] { border: none; outline: none; background-color: transparent; position: absolute; top: 50%; right: 50px; transform: translateY(-50%); width: auto; font-size: 22px; color: var(--solinom-text, #101D22); transition: all 0.4s ease-in-out; } .sidebar__search button[type=submit]:hover { color: var(--solinom-base, #CBA36B); } .sidebar__posts { margin-bottom: 0; } .sidebar__posts__item { display: flex; align-items: center; } .sidebar__posts__item:not(:last-of-type) { border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); margin-bottom: 16px; padding-bottom: 17px; } .sidebar__posts__item:hover .sidebar__posts__image::after { width: 100%; left: auto; right: 0; } .sidebar__posts__item:hover .sidebar__posts__image img { transform: scale(1.3) rotate(15deg); } .sidebar__posts__image { margin-left: 20px; overflow: hidden; max-width: 70px; width: 100%; height: 70px; position: relative; } .sidebar__posts__image img { width: 100%; height: 100%; object-fit: cover; transition: all 0.4s ease-in-out; } .sidebar__posts__image::after { content: ""; width: 0%; height: 100%; top: 0%; right: auto; left: 0; background-color: rgba(var(--solinom-gray-rgb, 28, 47, 54), 0.5); position: absolute; transition: all 0.4s ease-in-out; } .sidebar__posts__title { margin-bottom: 0; color: var(--solinom-text, #101D22); font-size: 16px; font-weight: 700; line-height: normal; } .sidebar__posts__title a { text-shadow: 0 0 0 0.2 currentColor; color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .sidebar__posts__title a:hover { background-size: 100% 1px; } .sidebar__posts__title a:hover { color: var(--solinom-base, #CBA36B); } .sidebar__posts__meta { margin: 0; line-height: 1em; display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .sidebar__posts__meta a { color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 500; line-height: normal; display: inline-flex; align-items: center; transition: all 500ms ease; font-size: 16px; font-weight: 500; line-height: normal; } .sidebar__posts__meta a:hover { color: var(--solinom-base, #CBA36B); } .sidebar__posts__meta a i { color: var(--solinom-base, #CBA36B); margin-left: 10px; } .sidebar__categories { margin-bottom: -4px; } .sidebar__categories li:not(:last-of-type) { border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .sidebar__categories li:first-child a { padding-top: 0; } .sidebar__categories li:last-child a { padding-bottom: 0 !important; } .sidebar__categories li a { display: flex; align-items: center; padding: 12px 0px 12px 0; transition: all 500ms ease; color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 500; line-height: normal; text-shadow: 0 0 0 0.1 currentColor; } .sidebar__categories li a i { margin-left: 8px; color: var(--solinom-base, #CBA36B); } .sidebar__categories li a:hover { padding-right: 20px; color: var(--solinom-base, #CBA36B); } .sidebar__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .sidebar__tags a { background: var(--solinom-border-color, #FAF6F0); transition: all 500ms ease; display: inline-flex; padding: 11px 15px; color: var(--solinom-text-gray, #7D8B90); line-height: normal; font-size: 14px; font-weight: 600; } .sidebar__tags a:hover { color: var(--solinom-white, #fff); background-color: var(--solinom-base, #CBA36B); } .sidebar__comments { margin-bottom: -4px; } .sidebar__comments__item { display: flex; align-items: center; } .sidebar__comments__item:not(:last-of-type) { margin-bottom: 21px; } .sidebar__comments__icon { flex-shrink: 0; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; background-color: var(--solinom-border-color, #FAF6F0); font-size: 22px; color: var(--solinom-gray, #1C2F36); margin-left: 14px; border-radius: 50%; transition: all 500ms ease; } .sidebar__comments__item:hover .sidebar__comments__icon { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .sidebar__comments__title { color: var(--solinom-text-gray, #7D8B90); line-height: 185.714%; margin-bottom: 0px; width: 100%; font-size: 14px; font-weight: 500; } .sidebar__comments__title a { color: inherit; transition: all 500ms ease; } .sidebar__comments__title a:hover { color: var(--solinom-base, #CBA36B); } .service-sidebar__single + .service-sidebar__single { margin-top: 30px; } .service-sidebar__title { margin: 0; text-transform: uppercase; font-weight: bold; color: var(--solinom-white, #fff); font-size: 25px; padding: 32px 50px; } @media (min-width: 768px) { .service-sidebar__title { font-size: 30px; } } .service-sidebar__nav { border: 1px solid var(--solinom-border-color, #FAF6F0); border-top: 0; margin-bottom: 0; padding-right: 50px; padding-left: 50px; padding-top: 7px; padding-bottom: 10px; } .service-sidebar__nav li:not(:last-of-type) { border-bottom: 1px solid var(--solinom-border-color, #FAF6F0); } .service-sidebar__nav li a { font-size: 16px; color: var(--solinom-text, #101D22); display: flex; justify-content: space-between; align-items: center; transition: all 500ms ease; padding: 10.5px 0; } @media (min-width: 992px) { .service-sidebar__nav li a { font-size: 18px; } } .service-sidebar__nav li a::after { content: "\f111"; font-family: "Font Awesome 5 Free"; font-weight: 900; transition: all 500ms ease; font-size: 6px; opacity: 0; } .service-sidebar__nav li.current a, .service-sidebar__nav li:hover a { padding: 10.5px 35px; background-color: var(--solinom-gray, #1C2F36); color: var(--solinom-black, #000); text-shadow: 0 0 1px currentColor; } .service-sidebar__nav li.current a::after, .service-sidebar__nav li:hover a::after { color: var(--solinom-base, #CBA36B); opacity: 1; } .service-sidebar__nav li.current:first-child { margin-top: 25px; } .service-sidebar__nav li.current:last-child { margin-bottom: 20px; } .service-sidebar__discount { padding: 50px; padding-bottom: 30px; text-align: center; background-size: cover; } .service-sidebar__discount__image { width: 175px; height: 175px; border-radius: 50%; margin-right: auto; margin-left: auto; position: relative; margin-bottom: 15px; background-color: var(--solinom-black, #000); transition: all 500ms ease; } .service-sidebar__discount__image img { width: 100%; border-radius: 50%; } .service-sidebar__discount__image::after { content: ""; position: absolute; top: 50%; right: 50%; display: block; width: 0; height: 0; background: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.2); border-radius: 50%; transition: all 500ms linear; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); opacity: 0; z-index: 2; } .service-sidebar__discount__content__shape { display: block; width: auto !important; margin-right: auto; margin-left: auto; } .service-sidebar__discount__tagline { margin: 0; font-size: 30px; font-family: var(--solinom-special-font, "DM Sans", sans-serif); color: var(--solinom-base, #CBA36B); margin-bottom: 4px; } @media (min-width: 992px) { .service-sidebar__discount__tagline { font-size: 36px; } } .service-sidebar__discount__title { margin: 0; text-transform: uppercase; font-weight: bold; color: var(--solinom-black, #000); font-size: 22px; line-height: 1.2em; margin-top: -5px; margin-bottom: 12px; } @media (min-width: 768px) { .service-sidebar__discount__title { font-size: 24px; } } .service-sidebar__discount__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .service-sidebar__discount__title a:hover { background-size: 100% 1px; } .service-sidebar__discount__title a:hover { color: var(--solinom-base, #CBA36B); } .service-sidebar__discount__text { margin: 0; font-size: 15px; line-height: 30px; margin-top: 10px; padding-bottom: 21px; max-width: 270px; margin-right: auto; margin-left: auto; } .service-sidebar__discount__link { font-size: 10px; padding: 10.75px 29.25px; } .service-sidebar__contact { padding-top: 60px; padding-bottom: 50px; background-size: cover; } .service-sidebar__contact__icon { border-radius: 50%; margin-right: auto; margin-left: auto; width: 85px; height: 85px; box-shadow: 0 0 0 11px rgba(var(--solinom-white-rgb, 255, 255, 255), 0.1); background-color: var(--solinom-black, #000); display: flex; justify-content: center; align-items: center; transition: all 500ms ease; margin-bottom: 22px; } .service-sidebar__contact__icon i { color: var(--solinom-white, #fff); font-size: 28px; transition: color 500ms ease, transform 500ms ease; transform: scale(1); } .service-sidebar__contact__icon:hover { background-color: var(--solinom-white, #fff); box-shadow: 0 0 0 11px rgba(var(--solinom-black-rgb, 0, 0, 0), 0.1); } .service-sidebar__contact__icon:hover i { transform: scale(0.9); color: var(--solinom-black, #000); } .service-sidebar__contact__title { margin: 0; text-transform: uppercase; color: var(--solinom-white, #fff); max-width: 205px; margin-right: auto; margin-left: auto; font-size: 25px; margin-bottom: 23px; line-height: 1.2em; } @media (min-width: 992px) { .service-sidebar__contact__title { font-size: 30px; } } .service-sidebar__contact__number { color: var(--solinom-white, #fff); font-size: 20px; line-height: 26px; font-weight: 500; margin-bottom: 0; } .service-sidebar__contact__number span { text-transform: uppercase; font-size: 12px; font-weight: 500; letter-spacing: var(--solinom-letter-space, 0.1em); } .service-sidebar__contact__number a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .service-sidebar__contact__number a:hover { background-size: 100% 1px; } /*-------------------------------------------------------------- # Blog details --------------------------------------------------------------*/ .blog-details__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-top: 30px; padding-bottom: 30px; border-top: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .blog-details__tags { display: flex; align-items: center; gap: 10px; } .blog-details__tags__title { margin: 0; margin-top: -4px; margin-bottom: -2px; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; color: var(--solinom-text-dark, #15262C); } @media (min-width: 768px) { .blog-details__tags__title { font-size: 20px; } } .blog-details__tags .sidebar__tags button { padding: 11px 16px; color: var(--solinom-text-dark, #15262C); font-size: 16px; font-weight: 600; line-height: normal; } .blog-details__tags .sidebar__tags button:hover { color: var(--solinom-white, #fff); } .blog-details__tags .sidebar__tags2 a { color: var(--solinom-text, #101D22); font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; } .blog-details__tags .sidebar__tags2 a:hover { color: var(--solinom-base, #CBA36B); } .blog-card__two { margin-bottom: 40px; position: relative; z-index: 1; } .blog-card__two__image img { object-fit: cover; width: 100%; } .blog-card__two__content { padding-top: 30px; } .blog-card__two__date { position: absolute; left: 20px; top: 20px; width: 74px; height: 81px; background-color: var(--solinom-base, #CBA36B); display: flex; justify-content: center; text-align: center; align-items: center; position: absolute; flex-direction: column; color: var(--solinom-white, #fff); z-index: 10; font-weight: 600; font-size: 14px; line-height: 186%; transition: all 500ms ease; } .blog-card__two__date span { font-size: 30px; line-height: 87%; color: var(--solinom-white, #fff); } .blog-card__two__meta { display: flex; align-items: center; margin: 0; transition: all 0.4s ease-in-out; } .blog-card__two__meta li:not(:first-child)::before { content: "|"; margin-right: 15px; margin-left: 15px; font-weight: 500; color: #6D7076; opacity: 0.5; } .blog-card__two__meta li a { color: var(--solinom-text-gray, #7D8B90); font-size: 14px; font-weight: 600; line-height: 214.286%; text-transform: capitalize; } .blog-card__two__meta li a i { font-size: 15px; color: var(--solinom-base, #CBA36B); margin-left: 5px; } .blog-card__two__meta li a:hover { color: var(--solinom-base, #CBA36B); } .blog-card__two__title { color: var(--solinom-text, #101D22); font-size: 30px; font-weight: 700; line-height: normal; margin-bottom: 15px; } .blog-card__two__text { color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 500; line-height: 187.5%; } .blog-card__two__text + .blog-card__two__text { margin-top: 20px; } /*-------------------------------------------------------------- # Comments --------------------------------------------------------------*/ .comments-one { margin-top: 40px; } @media (min-width: 1200px) { .comments-one { margin-top: 55px; } } .comments-one__title { margin: 0; font-size: 25px; font-weight: bold; margin-top: -4px; margin-bottom: -4px; } @media (min-width: 992px) { .comments-one__title { font-size: 30px; } } .comments-one__list { margin: 0; margin-top: 35px; } @media (min-width: 768px) { .comments-one__card { display: flex; align-items: flex-start; } } .comments-one__card:not(:first-of-type) { margin-top: 40px; padding-top: 40px; padding-bottom: 40px; border-top: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } @media (min-width: 1200px) { .comments-one__card:not(:first-of-type) { margin-top: 50px; padding-top: 50px; padding-bottom: 50px; } } @media (min-width: 768px) { .comments-one__card__image { margin-left: 30px; } } @media (min-width: 1200px) { .comments-one__card__image { margin-left: 45px; } } .comments-one__card__image img { border-radius: 50%; } .comments-one__card__title { margin: 0; font-size: 20px; font-weight: bold; margin-top: 20px; margin-bottom: 10px; } @media (min-width: 1200px) { .comments-one__card__title { margin-bottom: 21px; } } .comments-one__card__text { margin: 0; font-size: 15px; line-height: 2em; margin-bottom: 20px; max-width: 560px; } .comments-one__card__reply { padding: 5px 23px; font-size: 14px; font-weight: 600; background-color: var(--solinom-border-color, #FAF6F0); color: var(--solinom-text-gray, #7D8B90); } .comments-one__card__reply:hover { color: var(--solinom-white, #fff); } .comments-one__card__content { position: relative; } .comments-form { margin-top: 40px; } @media (min-width: 1200px) { .comments-form { margin-top: 55px; } } .comments-form__title { margin: 0; font-size: 25px; font-weight: bold; margin-top: -4px; margin-bottom: -4px; } @media (min-width: 992px) { .comments-form__title { font-size: 30px; } } .comments-form__form { margin-top: 45px; } .comments-form__form .solinom-btn { padding: 11px 50px; } /*-------------------------------------------------------------- # Shop --------------------------------------------------------------*/ .product { position: relative; } .product__sidebar { position: relative; } .product__sidebar--title { position: relative; margin-top: -5px; color: var(--solinom-text, #101D22); font-size: 20px; font-weight: 700; line-height: 130%; margin-bottom: 23px; } .product__sidebar__search { position: relative; margin-bottom: 30px; } .product__sidebar__search input[type=search], .product__sidebar__search input[type=text] { outline: none; width: 100%; height: 60px; background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); font-size: 16px; font-weight: 400; line-height: 162.5%; padding-right: 60px; padding-left: 30px; transition: all 500ms ease; border: none; } .product__sidebar__search input[type=search]:focus, .product__sidebar__search input[type=text]:focus { box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1); border: none; } .product__sidebar__search input[type=search]::placeholder, .product__sidebar__search input[type=text]::placeholder { color: var(--solinom-white, #fff); font-size: 16px; font-weight: 400; line-height: 162.5%; } .product__sidebar__search button[type=submit] { border: none; outline: none; background-color: rgba(0, 0, 0, 0); position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: auto; font-size: 22px; color: var(--solinom-white, #fff); } .product__price-ranger { background-color: var(--solinom-white, #fff); box-shadow: 0px 0px 60px 0px rgba(2, 2, 2, 0.07); padding: 30px; margin-bottom: 30px; } .product__price-ranger #slider-range { margin: 15px 0px 23px 0; background: var(--solinom-border-color, #FAF6F0); border: none; height: 8px; border-radius: 0px; position: relative; } .product__price-ranger #slider-range .ui-slider-range { height: 100%; background: var(--solinom-base, #CBA36B); } .product__price-ranger #slider-range .ui-slider-handle { position: absolute; top: -5px; background: var(--solinom-base, #CBA36B); border: 0; height: 16px; width: 14px !important; border-radius: 0; margin-right: -3px; outline: medium none; cursor: pointer; z-index: 2; } .product__price-ranger .ranger-min-max-block { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 18px 0px 0 0; } .product__price-ranger .ranger-min-max-block input[type=text] { position: relative; display: inline-block; color: var(--solinom-text, #101D22); width: 45px; border: none; outline: none; padding: 0; text-align: center; background-color: transparent; font-size: 16px; font-weight: 500; line-height: normal; } .product__price-ranger .ranger-min-max-block span { position: relative; display: inline-block; color: var(--solinom-text, #101D22); font-size: 16px; font-weight: 700; right: -2px; } .product__price-ranger .ranger-min-max-block button[type=submit] { position: relative; display: block; float: left; text-align: center; border: none; margin: 0; cursor: pointer; padding: 0px 16px; height: 40px; font-size: 14px; font-style: normal; font-weight: 600; line-height: 185.714%; text-transform: capitalize; z-index: 1; color: var(--solinom-text-gray, #7D8B90); background: var(--solinom-border-color, #FAF6F0); } .product__price-ranger .ranger-min-max-block button[type=submit]:hover { color: var(--solinom-white, #fff); } .product__categories { margin-bottom: -4px; background-color: var(--solinom-white, #fff); padding: 30px 30px 23px 30px; box-shadow: 0px 0px 60px 0px rgba(2, 2, 2, 0.07); } .product__categories__title { margin: 0; margin-top: -5px; padding-bottom: 15px; margin-bottom: 14px; border-bottom: 1px solid var(--solinom-base, #CBA36B); color: var(--solinom-text, #101D22); font-size: 20px; font-weight: 700; line-height: normal; } .product__categories ul { margin-bottom: 0; } .product__categories ul li:not(:last-of-type) { border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .product__categories ul li:first-child a { padding-top: 0; } .product__categories ul li:last-child a { padding-bottom: 0 !important; } .product__categories ul li a { display: flex; align-items: center; padding: 10px 0px 14.44px 0; transition: all 500ms ease; color: var(--solinom-text, #101D22); font-size: 16px; font-weight: 500; line-height: normal; text-transform: capitalize; } .product__categories ul li a i { font-size: 14px; margin-left: 8px; color: var(--solinom-base, #CBA36B); } .product__categories ul li a:hover { padding-right: 20px; background-color: var(--solinom-white, #fff); color: var(--solinom-base, #CBA36B); } .product__info-top { position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } @media (max-width: 991px) { .product__info-top { margin-top: 50px; } } @media (max-width: 767px) { .product__info-top { display: block; margin-top: 40px; } } .product__showing-text { margin: 0; font-size: 20px; font-weight: 700; line-height: 130%; color: var(--solinom-text, #101D22); } @media (max-width: 767px) { .product__showing-text { margin-bottom: 15px; } } .product__showing-sort { margin: 0; font-size: 16px; } .product__showing-sort .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { position: relative; display: block; width: 260px !important; } @media (max-width: 360px) { .product__showing-sort .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 260px !important; } } .product__showing-sort .bootstrap-select > .dropdown-toggle::after { display: none; } .product__showing-sort .bootstrap-select .dropdown-menu { border: none; } .product__showing-sort .bootstrap-select > .dropdown-toggle { position: relative; height: 60px; outline: none !important; border-radius: 0; border: 0; background-color: var(--solinom-border-color, #FAF6F0) !important; margin: 0; padding: 0; padding-right: 30px; padding-left: 30px; color: var(--solinom-text-gray, #7D8B90) !important; line-height: 60px; box-shadow: none !important; background-repeat: no-repeat; background-size: 14px 12px; background-position: left 25.75px center; font-size: 16px; font-weight: 700; } .product__showing-sort .bootstrap-select > .dropdown-toggle:before { position: absolute; top: 0; bottom: 0; left: 30px; font-family: "icomoon" !important; content: "\e933"; font-weight: 500; font-size: 14px; color: var(--solinom-base, #CBA36B); } .product__showing-sort .bootstrap-select .dropdown-menu > li + li > a { border-top: 1px solid rgba(var(--solinom-border-color-rgb, 250, 246, 240), 0.4); } .product__showing-sort .bootstrap-select .dropdown-menu > li > a { font-size: 16px; font-weight: 600; padding: 10px 30px; color: var(--solinom-white, #fff); background: var(--solinom-text-gray, #7D8B90); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .product__showing-sort .bootstrap-select .dropdown-menu > li:hover > a, .product__showing-sort .bootstrap-select .dropdown-menu > li.selected > a { background: var(--solinom-gray, #1C2F36); color: var(--solinom-white, #fff); border-color: var(--solinom-text-gray, #7D8B90); } .product__item { position: relative; background-color: var(--solinom-white, #fff); border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.2); transition: all 500ms ease; } .product__item:hover { box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.08); border: 1px solid var(--solinom-base, #CBA36B); } .product__item__img { background-color: var(--solinom-white, #fff); position: relative; overflow: hidden; } .product__item__img__item { max-width: 228px; width: 100%; margin-right: auto; margin-left: auto; } .product__item__img__item img { width: 100%; height: auto; mix-blend-mode: multiply; transition: all 500ms ease; transform: scale(1); } .product__item__btn { position: absolute; left: 20px; top: 20px; z-index: 2; } .product__item__btn a { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; background-color: var(--solinom-border-color, #FAF6F0); border-radius: 50%; color: var(--solinom-text-gray, #7D8B90); font-size: 14px; visibility: hidden; opacity: 0; } .product__item__btn a:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-gray, #1C2F36); } .product__item__btn a:nth-child(1) { -webkit-transition: transform 350ms cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity ease 300ms, visibility ease 300ms, background ease 300ms, color ease 300ms, border ease 300ms; -moz-transition: transform 350ms cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity ease 300ms, visibility ease 300ms, background ease 300ms, color ease 300ms, border ease 300ms; -ms-transition: transform 350ms cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity ease 300ms, visibility ease 300ms, background ease 300ms, color ease 300ms, border ease 300ms; -o-transition: transform 350ms cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity ease 300ms, visibility ease 300ms, background ease 300ms, color ease 300ms, border ease 300ms; transition: transform 350ms cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity ease 300ms, visibility ease 300ms, background ease 300ms, color ease 300ms, border ease 300ms; transform: translate3d(-30px, 0, 0); -moz-transform: translate3d(-30px, 0, 0); -webkit-transform: translate3d(-30px, 0, 0); -ms-transform: translate3d(-30px, 0, 0); -o-transform: translate3d(-30px, 0, 0); } .product__item__btn a:nth-child(2) { -webkit-transition: transform 550ms cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity ease 300ms, visibility ease 300ms, background ease 300ms, color ease 300ms, border ease 300ms; -moz-transition: transform 550ms cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity ease 300ms, visibility ease 300ms, background ease 300ms, color ease 300ms, border ease 300ms; -ms-transition: transform 550ms cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity ease 300ms, visibility ease 300ms, background ease 300ms, color ease 300ms, border ease 300ms; -o-transition: transform 550ms cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity ease 300ms, visibility ease 300ms, background ease 300ms, color ease 300ms, border ease 300ms; transition: transform 550ms cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity ease 300ms, visibility ease 300ms, background ease 300ms, color ease 300ms, border ease 300ms; transform: translate3d(-30px, 0, 0); -moz-transform: translate3d(-30px, 0, 0); -webkit-transform: translate3d(-30px, 0, 0); -ms-transform: translate3d(-30px, 0, 0); -o-transform: translate3d(-30px, 0, 0); } .product__item__btn a + a { margin-top: 12px; } .product__item:hover .product__item__img img { transform: scale(1.05); } .product__item:hover .product__item__btn a { opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); } .product__item__content { position: relative; text-align: center; padding: 20px 20px 40px 20px; } .product__item__ratings { display: flex; justify-content: center; align-items: center; font-size: 17px; color: var(--solinom-base, #CBA36B); letter-spacing: 2px; margin-bottom: 14px; } .product__item__title { margin: 0; margin-bottom: 10px; color: var(--solinom-text, #101D22); text-transform: capitalize; text-shadow: 0 0 0.1px currentColor; font-style: normal; font-weight: 600; font-size: 20px; line-height: 130%; } .product__item__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .product__item__title a:hover { background-size: 100% 1px; } .product__item__title a:hover { color: var(--solinom-base, #CBA36B); } .product__item__price { display: flex; justify-content: center; align-items: center; font-size: 14px; color: var(--solinom-text-gray, #7D8B90); line-height: 1em; font-weight: 500; margin-bottom: 20px; } .product__item__price del { margin-right: 7px; } .product__item__link { color: var(--solinom-text, #101D22); font-size: 14px; font-style: normal; font-weight: 600; line-height: 185.714%; padding: 8.5px 26px; text-transform: uppercase; background: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .product__item__link::after { background: var(--solinom-gray, #1C2F36); } .product__item__link:hover { color: var(--solinom-white, #fff); } .product-one { padding: 120px 0; } @media (max-width: 767px) { .product-one { padding: 80px 0; } } .product-one--page { padding-top: 120px; } @media (max-width: 991px) { .product-one--page { padding-top: 50px; } } @media (max-width: 767px) { .product-one--page { padding-top: 30px; } } .product-one--home { position: relative; padding: 0 0 90px; } @media (max-width: 767px) { .product-one--home { padding-bottom: 50px; } } .product-one--home .sec-title { text-align: center; } .product-one--home .product__item { margin-bottom: 30px; } @media (min-width: 992px) { .product-one__carousel .owl-nav { display: none; } } /*-------------------------------------------------------------- # Shop details --------------------------------------------------------------*/ .product-details { position: relative; padding: 120px 0; } @media (max-width: 991px) { .product-details { padding: 100px 0; } } @media (max-width: 767px) { .product-details { padding: 80px 0; } } .product-details__img { background-color: var(--solinom-white, #fff); position: relative; border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); max-width: 570px; height: auto; } .product-details__img img { object-fit: cover; width: 100%; height: auto; } .product-details__img-search { position: absolute; left: 30px; top: 30px; z-index: 2; line-height: 1; } .product-details__img-search a { display: inline-block; font-size: 21px; color: var(--solinom-text, #101D22); transition: all 500ms ease; } .product-details__img-search a:hover { color: var(--solinom-base, #CBA36B); } .product-details__content { position: relative; margin-top: -10px; } @media (max-width: 991px) { .product-details__content { margin-top: 50px; } } .product-details__top { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 15px; margin-bottom: 0; padding-bottom: 15px; } .product-details__title { margin-top: 5px; font-size: 25px; line-height: normal; color: var(--solinom-text, #101D22); font-weight: 700; text-transform: capitalize; } @media (min-width: 768px) { .product-details__title { font-size: 30px; } } .product-details__price { margin: 0 17px 0 0; color: var(--solinom-base, #CBA36B); font-size: 20px; font-weight: 600; line-height: 130%; } .product-details__review { position: relative; display: flex; align-items: center; letter-spacing: 2px; font-size: 17px; color: var(--solinom-base, #CBA36B); } .product-details__review a { display: inline-block; margin-right: 20px; transition: all 500ms ease; color: var(--solinom-text-gray, #7D8B90); font-size: 16px; letter-spacing: 0; font-weight: 500; line-height: normal; text-transform: capitalize; } .product-details__review a:hover { color: var(--solinom-base, #CBA36B); } .product-details__divider { width: 100%; height: 1px; background-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); margin: 32px 0 20px 0; } .product-details__excerpt { margin: 0; font-size: 15px; line-height: 30px; } .product-details__excerpt-text1 { margin: 0 0 17px; max-width: 514px; color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 600; line-height: 187.5%; } .product-details__excerpt-text2 { color: var(--solinom-text-gray, #7D8B90); margin-bottom: 37px; font-size: 16px; font-size: 16px; font-weight: 600; line-height: normal; } @media (max-width: 767px) { .product-details__excerpt-text2 br { display: block; } } .product-details__excerpt-text2 span { display: block; margin-top: 5px; font-weight: 600; color: var(--solinom-base, #CBA36B); text-transform: capitalize; } .product-details__quantity { position: relative; display: flex; align-items: center; } .product-details__quantity-title { margin: 0; margin-left: 35px; color: var(--solinom-text, #101D22); font-size: 18px; font-weight: 600; line-height: normal; } .product-details__quantity .quantity-box { position: relative; width: auto; height: 46px; display: flex; } .product-details__quantity .quantity-box input { width: 45px; height: 46px; border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); appearance: textfield; color: var(--solinom-text, #101D22); padding-right: 15px; outline: none; font-size: 18px; font-weight: 500; background-color: transparent; } .product-details__quantity .quantity-box button { width: 45px; height: auto; color: var(--solinom-text, #101D22); font-size: 13px; background-color: transparent; border: none; display: flex; align-items: center; justify-content: center; outline: none; transition: all 500ms ease; } .product-details__quantity .quantity-box button:hover, .product-details__quantity .quantity-box button:focus, .product-details__quantity .quantity-box button:active { background: var(--solinom-gray, #1C2F36); color: var(--solinom-white, #fff); } .product-details__quantity .quantity-box button.sub { bottom: 1px; top: auto; border-top: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); border-right: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .product-details__quantity .quantity-box button.add { border-top: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); border-left: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .product-details__quantity .quantity-box button:hover { color: var(--solinom-white, #fff); } .product-details__buttons { display: flex; flex-wrap: wrap; gap: 20px; margin: 40px 0px 0; } .product-details__buttons a { color: var(--solinom-white, #fff); padding-top: 11px; padding-bottom: 11px; } .product-details__buttons a:first-child { background-color: var(--solinom-gray, #1C2F36); } .product-details__buttons a:hover { color: var(--solinom-white, #fff); } .product-details__buttons a:last-child { color: var(--solinom-white, #fff); } .product-details__buttons a:last-child:hover { color: var(--solinom-white, #fff); } .product-details__socials { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 38px; margin-top: 40px; } .product-details__socials__title { display: flex; margin-bottom: 0; color: var(--solinom-text-dark, #15262C); font-size: 18px; font-weight: 700; line-height: normal; } @media (min-width: 768px) { .product-details__socials__title { flex: 0 0 auto; } } .product-details__socials__item { display: flex; gap: 20px; } .product-details__socials__item a { display: inline; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background-color: var(--solinom-border-color, #FAF6F0); font-size: 12px; color: var(--solinom-gray, #1C2F36); transition: all 500ms ease; border-radius: 50%; } .product-details__socials__item a:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .product-details__description { position: relative; margin: 40px 0 0; } @media (min-width: 768px) { .product-details__description { margin: 50px 0 0; } } .product-details__description__title { margin-bottom: 22px; color: var(--solinom-gray, #1C2F36); font-size: 30px; font-weight: 700; line-height: normal; } .product-details__description__text { color: var(--solinom-text-gray, #7D8B90); line-height: 187.5%; font-size: 16px; font-weight: 600; } .product-details__description__lists { margin-bottom: 25px; margin-top: 25px; padding: 0; } .product-details__description__lists li { display: block; position: relative; font-size: 16px; font-weight: 600; line-height: normal; color: var(--solinom-gray, #1C2F36); } .product-details__description__lists li i { color: var(--solinom-base, #CBA36B); margin-left: 5px; } .product-details__description__lists li + li { margin-top: 13px; } .product-details__comment { border-top: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); margin: 30px 0 0; padding: 30px 0 0; position: relative; } @media (min-width: 768px) { .product-details__comment { margin: 44px 0 0; padding: 43px 0 0; } } .product-details__review-title { margin-bottom: 35px; color: var(--solinom-text, #101D22); font-size: 30px; font-weight: 700; line-height: normal; } .product-details__comment-box { position: relative; padding: 11px 200px 52px 0; margin-bottom: 45px; min-height: 166px; border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } @media (max-width: 767px) { .product-details__comment-box { padding-right: 0; margin-bottom: 30px; padding-bottom: 30px; } } .product-details__comment-box__thumb { width: 168px; height: 168px; position: absolute; right: 0; top: 0; border-radius: 50%; margin: 0; border: none; } @media (max-width: 767px) { .product-details__comment-box__thumb { position: relative; margin: 0 0 20px; } } .product-details__comment-box__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .product-details__comment-box__meta { margin: 0 0 20px; color: var(--solinom-text, #101D22); font-size: 24px; font-weight: 700; line-height: 108.333%; } .product-details__comment-box__date { margin-right: 20px; display: inline-block; text-transform: inherit; letter-spacing: 0; color: var(--solinom-base, #CBA36B); font-size: 16px; font-weight: 600; line-height: 187.5%; } .product-details__comment-box__text { margin: 0; font-size: 16px; font-weight: 500; line-height: 187.5%; color: var(--solinom-text-gray, #7D8B90); } .product-details__comment-box__ratings { position: absolute; left: 0; top: 13px; display: flex; align-items: center; letter-spacing: 3px; font-size: 18px; color: var(--solinom-base, #CBA36B); } @media (max-width: 767px) { .product-details__comment-box__ratings { position: relative; top: 0; margin: 0 0 22px; } } .product-details__form { position: relative; } .product-details__form .row { --bs-gutter-x: 20px; } .product-details__form-title { margin-bottom: 18px; color: var(--solinom-text, #101D22); font-size: 30px; font-weight: 700; line-height: normal; } .product-details__form-ratings { display: flex; align-items: center; letter-spacing: 6px; font-size: 25px; color: var(--solinom-gray, #1C2F36); margin: 0 0 40px; } .product-details__form-ratings i { color: var(--solinom-base, #CBA36B); font-size: 500; } .product-details__form-ratings__label { display: inline-block; letter-spacing: 0; color: var(--solinom-text-gray, #7D8B90); margin: 0 0 0 17px; font-size: 20px; font-weight: 600; line-height: 130%; } .product-details__form__form { margin-top: 0; } .product-details__form__form .form-one__control input, .product-details__form__form .form-one__control textarea { background: var(--solinom-border-color, #FAF6F0); } .product-details__form__form .form-one__control input::placeholder, .product-details__form__form .form-one__control textarea::placeholder { color: var(--solinom-text-gray, #7D8B90); } .product-details__form__form .form-one__control button { padding-top: 11px; padding-bottom: 11px; } /*-------------------------------------------------------------- # Cart --------------------------------------------------------------*/ .cart-page { position: relative; padding: 120px 0; } @media (max-width: 767px) { .cart-page { padding: 80px 0; } } .cart-page .table-responsive { position: relative; display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 1199px) { .cart-page .table-responsive { margin-bottom: 30px; } } .cart-page__table { position: relative; width: 100%; border: none; margin: 0 0 60px; } @media (max-width: 1199px) { .cart-page__table { min-width: 1170px; } } .cart-page__table thead tr th { padding: 0 0 24px; border: none; background-color: transparent; border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15) !important; box-shadow: none; color: var(--solinom-text, #101D22); font-size: 20px; font-weight: 700; line-height: normal; } .cart-page__table thead tr th:last-child { text-align: left; } .cart-page__table tbody tr td { vertical-align: middle; border: none; box-shadow: none; background-color: transparent; border-top: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); padding: 30px 0; letter-spacing: 0; color: var(--solinom-text, #101D22); font-size: 20px; font-weight: 500; line-height: 235%; } .cart-page__table tbody tr td:last-child { text-align: left; } .cart-page__table__meta { display: flex; align-items: center; } .cart-page__table__meta-img { width: 109px; height: 107px; background-color: var(--solinom-white, #fff); border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); margin-left: 40px; } .cart-page__table__meta-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; } .cart-page__table__meta-title { margin: 0; color: var(--solinom-text, #101D22); font-size: 20px; font-weight: 700; line-height: 235%; } .cart-page__table__meta-title a { color: inherit; } .cart-page__table__meta-title a:hover { color: var(--solinom-base, #CBA36B); } .cart-page__table__remove { display: block; color: var(--solinom-text, #101D22); font-size: 16px; } .cart-page__table__remove:hover { color: var(--solinom-base, #CBA36B); } .cart-page__coupone-form { position: relative; display: flex; } @media (max-width: 767px) { .cart-page__coupone-form { display: block; } } .cart-page__coupone-form input[type=text] { height: 56px; width: 303px; border: none; background-color: var(--solinom-border-color, #FAF6F0); padding-right: 30px; padding-left: 30px; outline: none; font-size: 16px; color: var(--solinom-text-gray, #7D8B90); display: block; font-weight: 600; margin-left: 10px; } @media (max-width: 1199px) { .cart-page__coupone-form input[type=text] { width: 290px; } } @media (max-width: 767px) { .cart-page__coupone-form input[type=text] { width: 100%; margin: 0 0 10px; } } .cart-page__cart-total { position: relative; text-align: left; margin: -8px 0 24px; padding: 0; } @media (max-width: 991px) { .cart-page__cart-total { text-align: right; margin-top: 45px; } } .cart-page__cart-total li { display: block; font-size: 20px; color: var(--solinom-text, #101D22); font-weight: 700; margin: 0 0 0px; } @media (max-width: 991px) { .cart-page__cart-total li span { display: inline-block; min-width: 172px; } } .cart-page__cart-total li:last-child { margin-top: 10px; padding-top: 15px; position: relative; } .cart-page__cart-total li:last-child::after { content: ""; width: 80%; height: 1px; position: absolute; top: 0%; left: 0; background: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .cart-page__cart-total-amount { color: var(--solinom-text, #101D22); text-transform: inherit; display: inline-block; min-width: 220px; font-size: 20px; font-weight: 600; line-height: 235%; } .cart-page__buttons { display: flex; justify-content: flex-end; gap: 10px; } @media (max-width: 991px) { .cart-page__buttons { justify-content: flex-start; } } .cart-page__buttons .solinom-btn { padding: 11px 40px; } .cart-page__buttons .solinom-btn:hover { color: var(--solinom-white, #fff); } .cart-page__buttons .solinom-btn--base { color: var(--solinom-white, #fff); } .cart-page__buttons .solinom-btn--base:hover { color: var(--solinom-white, #fff); } /*-------------------------------------------------------------- # Checkout --------------------------------------------------------------*/ .checkout-page { position: relative; padding: 120px 0; } @media (max-width: 991px) { .checkout-page { padding: 100px 0; } } @media (max-width: 767px) { .checkout-page { padding: 80px 0; } } .checkout-page .bs-gutter-x-20 { --bs-gutter-x: 20px; } .checkout-page__notice { max-width: 570px; margin: 0 0 35px; padding: 35px 50px; background: var(--solinom-border-color, #FAF6F0); color: var(--solinom-text, #101D22); font-size: 18px; font-style: normal; font-weight: 500; line-height: normal; } .checkout-page__notice a { color: var(--solinom-base, #CBA36B); background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .checkout-page__notice a:hover { background-size: 100% 1px; } .checkout-page__billing-address { position: relative; } .checkout-page__billing-address__title { margin: 0 0 34px; color: var(--solinom-text, #101D22); font-size: 30px; font-weight: 700; line-height: normal; } @media (max-width: 767px) { .checkout-page__billing-address__title { font-size: 28px; } } .checkout-page__shipping-address { position: relative; } @media (max-width: 991px) { .checkout-page__shipping-address { margin: 50px 0 0; } } .checkout-page__shipping-address__title { margin: 0 0 34px; color: var(--solinom-text, #101D22); font-size: 30px; font-weight: 700; line-height: normal; } @media (max-width: 767px) { .checkout-page__shipping-address__title { font-size: 28px; } } .checkout-page__input-box { position: relative; line-height: 1; margin: 0 0 20px; } .checkout-page__input-box input[type=text], .checkout-page__input-box input[type=email], .checkout-page__input-box input[type=tel], .checkout-page__input-box textarea { height: 60px; width: 100%; border: none; background-color: var(--solinom-border-color, #FAF6F0); padding-right: 30px; padding-left: 30px; outline: none; display: block; color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 600; line-height: normal; } .checkout-page__input-box input[type=text]::placeholder, .checkout-page__input-box input[type=email]::placeholder, .checkout-page__input-box input[type=tel]::placeholder, .checkout-page__input-box textarea::placeholder { color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 600; line-height: normal; } .checkout-page__input-box .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { position: relative; display: block; width: 100% !important; font-family: var(--solinom-font, "Plus Jakarta Sans", sans-serif); } .checkout-page__input-box .bootstrap-select > .dropdown-toggle::after { display: none; } .checkout-page__input-box .bootstrap-select > .dropdown-toggle { position: relative; height: 58px; outline: none !important; border-radius: 0; border: 0; background-color: var(--solinom-border-color, #FAF6F0) !important; margin: 0; padding: 0; padding-right: 30px; padding-left: 30px; color: var(--solinom-text, #101D22) !important; font-size: 14px; line-height: 58px; font-weight: 500; box-shadow: none !important; background-repeat: no-repeat; background-size: 14px 12px; background-position: left 25.75px center; } .checkout-page__input-box .bootstrap-select > .dropdown-toggle:before { position: absolute; top: 0; bottom: 0; left: 30px; font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; font-size: 12px; color: var(--solinom-text, #101D22); } .checkout-page__input-box .bootstrap-select .dropdown-menu > li + li > a { border-top: 1px solid var(--solinom-border-color, #FAF6F0); } .checkout-page__input-box .bootstrap-select .dropdown-menu { border: none; } .checkout-page__input-box .bootstrap-select .dropdown-menu > li > a { font-size: 14px; font-weight: 500; padding: 15px 30px; color: var(--solinom-text, #101D22); background-color: var(--solinom-border-color, #FAF6F0); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .checkout-page__input-box .bootstrap-select .dropdown-menu > li:hover > a, .checkout-page__input-box .bootstrap-select .dropdown-menu > li.selected > a { background: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); border-color: var(--solinom-base, #CBA36B); } .checkout-page__input-box textarea { color: var(--solinom-text, #101D22); font-size: 16px; font-weight: 500; line-height: normal; height: 176px; width: 100%; background-color: var(--solinom-border-color, #FAF6F0); padding: 20px 30px 30px; border: none; outline: none; margin-bottom: 0px; } .checkout-page__check-box { position: relative; display: block; margin-top: -6px; } .checkout-page__check-box input[type=checkbox] { display: none; } .checkout-page__check-box label { position: relative; display: inline-block; padding-right: 30px; margin-left: 0px; margin-bottom: 0; color: var(--solinom-text-gray, #7D8B90); font-size: 15px; line-height: 24px; text-transform: none; cursor: pointer; } .checkout-page__check-box label span:before { position: absolute; top: 0; right: 5px; line-height: 20px; display: inline-block; color: var(--solinom-white, #fff); font-family: "Font Awesome 5 Free"; content: "\f00c"; font-size: 10px; font-weight: 900; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; opacity: 0; } .checkout-page__check-box input[type=checkbox] + label span { position: absolute; top: 4px; right: 0; width: 19px; height: 19px; background-color: var(--solinom-base, #CBA36B); border-radius: 50%; border: none; vertical-align: middle; cursor: pointer; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .checkout-page__check-box input[type=checkbox]:checked + label span:before { opacity: 1; } .checkout-page__details { margin-top: 25px; margin-bottom: 60px; } .checkout-page__details__title { color: var(--solinom-text-dark, #15262C); font-size: 30px; font-weight: 700; line-height: normal; margin-bottom: 30px; text-shadow: 0 0 0.1px currentColor; } .checkout-page__details__check-box input[type=checkbox] { display: none; } .checkout-page__details__check-box label { position: relative; padding-right: 30px; cursor: pointer; color: var(--solinom-text, #101D22); font-size: 20px; font-style: normal; font-weight: 600; line-height: 130%; } .checkout-page__details__check-box label span { position: absolute; top: 2px; right: 0; width: 22px; height: 22px; background-color: var(--solinom-base, #CBA36B); border-radius: 50%; border: none; vertical-align: middle; cursor: pointer; transition: all 300ms ease; } .checkout-page__details__check-box label span::before { content: "\f00c"; color: var(--solinom-border-color, #FAF6F0); position: absolute; top: 4px; right: 6px; line-height: 15px; display: inline-block; font-family: "Font Awesome 5 Free"; font-size: 10px; font-weight: 700; transition: all 0.15s ease-in-out; opacity: 0; } .checkout-page__details__check-box input[type=checkbox]:checked + label span:before { opacity: 1; } .checkout-page__your-order { position: relative; } .checkout-page__your-order__title { margin-bottom: 35px; font-size: 30px; font-weight: 700; line-height: normal; } @media (max-width: 767px) { .checkout-page__your-order__title { font-size: 28px; } } .checkout-page__order-table { position: relative; width: 100%; border: none; margin: 0 0 0; } .checkout-page__order-table thead tr th { color: var(--solinom-base, #CBA36B); font-size: 20px; font-style: normal; font-weight: 700; line-height: 235%; margin: 0; padding: 15.5px 0; border: none; border-top: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); border-bottom: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); font-weight: bold; color: var(--solinom-text-dark, #15262C); font-size: 20px; font-weight: 700; line-height: 235%; } .checkout-page__order-table thead tr th:last-child { text-align: left; } .checkout-page__order-table tbody tr td { color: var(--solinom-text-dark, #15262C); font-size: 20px; font-weight: 700; line-height: 100%; padding: 0 0 24px; border: none; } .checkout-page__order-table tbody tr td:last-child { text-align: left; } .checkout-page__order-table .pro__price { color: var(--solinom-text-gray, #7D8B90); font-size: 20px; font-weight: 600; } .checkout-page__order-table tbody tr:first-child td { padding-top: 25px; } .checkout-page__order-table tbody tr:last-child td { padding-bottom: 26px; padding-top: 26px; border-top: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .checkout-page__order-table tbody tr:last-child td.pro__price { color: var(--solinom-text-dark, #15262C); font-weight: 700; } .checkout-page__payment { background-color: var(--solinom-border-color, #FAF6F0); padding: 40px 45px 17px; min-height: 295px; margin-bottom: 30px; } @media (max-width: 991px) { .checkout-page__payment { margin-top: 50px; } } @media (max-width: 767px) { .checkout-page__payment { padding-right: 25px; padding-left: 25px; } } .checkout-page__payment__item { position: relative; } .checkout-page__payment__title { display: flex; font-size: 20px; margin: 0; align-items: center; margin-bottom: 28px; cursor: pointer; font-weight: 700; } .checkout-page__payment__title::before { content: ""; width: 22px; height: 22px; background-color: var(--solinom-white, #fff); border-radius: 50%; margin-left: 10px; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; display: flex; justify-content: center; align-items: center; margin-left: 14px; position: relative; top: 1px; transition: all 500ms ease; } .checkout-page__payment__title img { margin-right: 15px; } .checkout-page__payment__item--active .checkout-page__payment__title::before { background-color: var(--solinom-base, #CBA36B); border-color: var(--solinom-base, #CBA36B); content: "\f00c"; color: var(--solinom-border-color, #FAF6F0); } .checkout-page__payment__content { margin-right: 35px; margin-bottom: 35px; font-size: 16px; line-height: 30px; } /*-------------------------------------------------------------- # Login --------------------------------------------------------------*/ .login-page { position: relative; padding: 120px 0; } @media (max-width: 991px) { .login-page { padding: 100px 0px; } } @media (max-width: 767px) { .login-page { padding: 80px 0px; } } .login-page__inner { border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); background: var(--solinom-white, #fff); box-shadow: 0px 6px 40px 0px rgba(0, 0, 0, 0.06); padding: 40px 30px; } @media (min-width: 768px) { .login-page__inner { padding: 57px 40px 57px; } } .login-page__info { background-color: var(--solinom-gray, #1C2F36); padding: 35px 50px; margin-bottom: 50px; } @media (max-width: 991px) { .login-page__info { margin-bottom: 30px; padding: 15px 30px; } .login-page__info p { font-size: 16px; } } .login-page__info p { font-size: 18px; font-weight: 500; margin: 0; line-height: normal; color: var(--solinom-white, #fff); } .login-page__info p span { font-weight: 700; } .login-page__info p a { line-height: normal; font-weight: 700; display: inline-block; color: var(--solinom-base, #CBA36B); transition: all 500ms ease; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .login-page__info p a:hover { background-size: 100% 1px; } .login-page__wrap { position: relative; } .login-page__wrap__title { margin-top: -5px; margin-bottom: 30px; color: var(--solinom-text, #101D22); font-size: 30px; font-style: normal; font-weight: 700; line-height: normal; } .login-page__wrap .form__border { display: none; } @media (min-width: 992px) { .login-page__wrap .form__border { display: block; } } .login-page__wrap .form__border::after { display: none; position: absolute; top: 0; left: -47px; content: ""; width: 1px; height: 100%; background: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } @media (min-width: 992px) { .login-page__wrap .form__border::after { display: block; } } @media (max-width: 992px) { .login-page .register-page__wrap { margin-top: 50px; } } .login-page__form { position: relative; display: block; } .login-page__form-input-box { position: relative; display: block; margin-bottom: 20px; } .login-page__form-input-box input[type=email], .login-page__form-input-box input[type=password] { height: 60px; width: 100%; border: none; background-color: var(--solinom-border-color, #FAF6F0); padding-right: 30px; padding-left: 30px; outline: none; color: var(--solinom-text-gray, #7D8B90); font-size: 16px; font-weight: 500; line-height: normal; display: block; } .login-page__form-input-box input[type=email]::placeholder, .login-page__form-input-box input[type=password]::placeholder { color: var(--solinom-text-gray, #7D8B90); font-size: 14px; font-weight: 500; line-height: normal; } .login-page__checked-box { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 26px; margin-bottom: 35px; } @media (max-width: 768px) { .login-page__checked-box { display: block; } } .login-page__checked-box label { position: relative; display: inline-block; padding-right: 30px; margin-left: 0px; margin-bottom: 0; text-transform: none; cursor: pointer; font-size: 16px; font-weight: 600; } .login-page__checked-box label span:before { position: absolute; top: 2px; right: 5px; display: block; border-bottom: 2px solid var(--solinom-gray, #1C2F36); border-left: 2px solid var(--solinom-gray, #1C2F36); content: ""; width: 7px; height: 10px; pointer-events: none; transform-origin: 34% 66%; transform: rotate(-45deg); transition: all 0.15s ease-in-out; opacity: 0; } .login-page__checked-box input[type=checkbox] { display: none; } .login-page__checked-box input[type=checkbox] + label span { position: absolute; top: 4px; right: 0; border-radius: 4px; width: 20px; height: 20px; vertical-align: middle; background: transparent; cursor: pointer; transition: all 300ms ease; border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .login-page__checked-box input[type=checkbox]:checked + label span:before { opacity: 1; } .login-page__form-btn-box { position: relative; display: flex; align-items: center; flex-wrap: wrap; } .login-page__form-btn-box .nionx-btn { font-size: 16px; font-weight: 600; padding: 19px 40px; } .login-page__form-forgot-password { position: relative; display: block; margin-right: 0px; flex: 0 0 100%; margin-top: 10px; } @media (min-width: 768px) { .login-page__form-forgot-password { margin-right: 20px; flex: 0 0 auto; margin-top: 0; } } .login-page__form-forgot-password a { color: var(--solinom-text, #101D22); position: relative; display: inline-block; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; font-size: 16px; font-weight: 600; line-height: normal; } .login-page__form-forgot-password a:hover { background-size: 100% 1px; } .login-page__form-forgot-password a:hover { color: var(--solinom-text, #101D22); } .login-page .solinom-btn--base { padding: 11px 40px; } .gutter-x-94 { --bs-gutter-x: 94px; } /*-------------------------------------------------------------- # error 404 --------------------------------------------------------------*/ .error-404 { padding: 120px 0px; text-align: center; } .error-404__inner { position: relative; z-index: 1; max-width: 470px; width: 100%; margin-right: auto; margin-left: auto; margin-bottom: 45px; } .error-404__thumb { position: relative; z-index: 1; } .error-404__thumb img { object-fit: cover; width: 100%; } .error-404__brid { position: absolute; top: 0; left: 0; animation: scaleError 3s ease-in-out infinite; } .error-404__sub-title { font-style: normal; font-weight: 700; font-size: 40px; line-height: 65%; padding-bottom: 0; margin-bottom: 20px; color: var(--solinom-text, #101D22); text-transform: capitalize; } .error-404__text { font-style: normal; font-weight: 600; font-size: 16px; line-height: 150%; margin-bottom: 30px; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .error-404__search { display: inline-flex; align-items: center; position: relative; margin-bottom: 20px; width: 100%; max-width: 550px; } .error-404__search input[type=text] { border: none; outline: none; display: block; background-color: var(--solinom-border-color, #FAF6F0); color: var(--solinom-text-gray, #7D8B90); font-size: 16px; width: 100%; max-width: 550px; padding-right: 50px; height: 58px; } .error-404__search__btn { border: none; outline: none; background-color: transparent; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 20px; color: var(--solinom-text-gray, #7D8B90); } @media (min-width: 768px) { .error-404__search__btn { font-size: 22px; } } .error-404__btns { margin-top: 20px; } .error-404__btns a { padding: 11px 40px; } /*-------------------------------------------------------------- # Faq --------------------------------------------------------------*/ .faq-page__accordion .accrodion { background: var(--solinom-white, #fff); box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08); border-right: 2px solid var(--solinom-base, #CBA36B); } .faq-page__accordion .accrodion + .accrodion { margin-top: 20px; } .faq-page__accordion .accrodion-title { padding: 25px 30px 18px 30px; padding-left: 65px; cursor: pointer; } .faq-page__accordion .accrodion-title__text { position: relative; color: var(--solinom-text, #101D22); font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; } .faq-page__accordion .accrodion-title__icon { width: 30px; height: 30px; position: absolute; top: 50%; left: -35px; border-radius: 50%; border: 1px solid var(--solinom-base, #CBA36B); transform: translateY(-50%); } .faq-page__accordion .accrodion-title__icon::after, .faq-page__accordion .accrodion-title__icon::before { width: 2.555555px; height: 12px; position: absolute; background-color: var(--solinom-base, #CBA36B); top: 50%; right: 50%; content: ""; transform: translate(50%, -50%); transition: all 500ms ease; } .faq-page__accordion .accrodion-title__icon::after { width: 12px; height: 2px; } .faq-page__accordion .active .accrodion-title__icon { border-color: var(--solinom-gray2, #283E46); background-color: var(--solinom-gray2, #283E46); } .faq-page__accordion .active .accrodion-title__icon::after, .faq-page__accordion .active .accrodion-title__icon::before { opacity: 0; } .faq-page__accordion .active .accrodion-title__icon::after { opacity: 1; } .faq-page__accordion .accrodion-content .inner { padding: 3px 30px 22px 40px; margin-top: -3px; } .faq-page__accordion .accrodion-content p { color: var(--solinom-text-gray, #7D8B90); padding-bottom: 0; margin-bottom: -2px; font-size: 16px; font-weight: 500; line-height: 187.5%; max-width: 678px; width: 100%; } .faq-page { padding: 150px 0px 120px; } @media (max-width: 991px) { .faq-page { padding: 100px 0px; } } @media (max-width: 767px) { .faq-page { padding: 80px 0px; } } .faq-page__thumb { margin-right: 20px; position: relative; } .faq-page__thumb__item { position: relative; z-index: 1; } .faq-page__thumb__item img { border-radius: 0 0 0 300px; object-fit: cover; width: 100%; } .faq-page__thumb__item::after { content: ""; width: 100%; height: 100%; background-color: transparent; position: absolute; top: -30px; left: -40px; border: 1px solid var(--solinom-base, #CBA36B); border-radius: 0 0 0 300px; z-index: -1; } .faq-page__thumb__funfact { position: absolute; top: -20px; right: -50px; z-index: 2; } .faq-page__thumb__funfact__image { position: absolute; top: 0; right: 0; z-index: 1; } .faq-page__thumb__funfact__item { position: relative; z-index: 1; min-width: 276px; text-align: center; margin-top: 10px; } .faq-page__thumb__funfact__item__count { display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 40px; line-height: normal; color: var(--solinom-white, #fff); margin-bottom: 0; padding-bottom: 0; } .faq-page__thumb__funfact__item__count span { color: inherit; } .faq-page__thumb__funfact__item__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: normal; color: var(--solinom-white, #fff); text-transform: capitalize; } .faq-contact { position: relative; margin-bottom: -35px; z-index: 2; } .faq-contact__inner { display: flex; align-items: center; background: var(--solinom-base, #CBA36B); } @media (max-width: 991px) { .faq-contact__inner { flex-direction: column; align-items: start; justify-content: start; } } .faq-contact__inner__item { display: flex; align-items: center; gap: 20px; padding: 40px 50px; width: 100%; } @media (max-width: 575px) { .faq-contact__inner__item { padding: 20px; } } @media (max-width: 400px) { .faq-contact__inner__item { flex-direction: column; justify-content: start; align-items: start; } } .faq-contact__inner__item__icon { max-width: 80px; width: 100%; height: 80px; border-radius: 50%; background: var(--solinom-gray2, #283E46); display: flex; justify-content: center; align-items: center; font-size: 30px; color: var(--solinom-white, #fff); transition: all 0.4s ease-in-out; } .faq-contact__inner__item:not(:first-of-type) { border-right: 1px solid rgba(var(--solinom-white-rgb, 255, 255, 255), 0.15); } @media (max-width: 991px) { .faq-contact__inner__item:not(:first-of-type) { border-right: 0px solid rgba(var(--solinom-white-rgb, 255, 255, 255), 0.15); border-top: 1px solid rgba(var(--solinom-white-rgb, 255, 255, 255), 0.15); } } .faq-contact__inner__item__subtitle { color: var(--solinom-white, #fff); font-size: 20px; font-style: normal; font-weight: 700; line-height: 147.917%; text-transform: capitalize; display: flex; margin-bottom: 0; padding-bottom: 0; } @media (max-width: 575px) { .faq-contact__inner__item__subtitle { font-size: 20px; } } .faq-contact__inner__item__contact { color: var(--solinom-text-gray, #7D8B90); font-size: 18px; font-style: normal; font-weight: 500; line-height: 197.222%; } .faq-contact__inner__item__contact a { color: var(--solinom-white, #fff); font-weight: 600; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .faq-contact__inner__item__contact a:hover { background-size: 100% 1px; } .faq-contact__inner__item__contact a:hover { color: var(--solinom-text, #101D22); } .faq-contact__inner__item:hover .faq-contact__inner__item__icon { background: var(--solinom-white, #fff); color: var(--solinom-base, #CBA36B); } .faq-contact__inner__item:hover .faq-contact__inner__item__icon i { animation: bounceIn 1s linear; } /*-------------------------------------------------------------- # Package --------------------------------------------------------------*/ /***Package Card***/ .package-card { background-color: var(--solinom-border-color, #FAF6F0); position: relative; padding: 40px 30px; transition: all 0.4s ease-in-out; } .package-card__title { margin-top: -5px; font-style: normal; font-weight: 700; font-size: 24px; line-height: 75%; text-transform: capitalize; padding-bottom: 0; margin-bottom: 36px; transition: all 0.2s ease-in-out; background-color: transparent; } .package-card__title a { color: inherit; } .package-card__price { background-color: var(--solinom-gray, #1C2F36); padding: 15px 30px 20px; margin-right: -30px; position: relative; margin-bottom: 0; font-style: normal; font-weight: 600; font-size: 14px; line-height: normal; text-transform: capitalize; transition: all 0.4s ease-in-out; } .package-card__price small { color: var(--solinom-base, #CBA36B); font-size: 17px; transition: all 0.4s ease-in-out; } .package-card__price span { font-weight: 600; font-size: 30px; color: var(--solinom-white, #fff); transition: all 0.4s ease-in-out; } .package-card__content ul { margin-top: 30px; margin-bottom: 30px; } .package-card__content ul > li { display: flex; align-items: center; justify-content: space-between; padding: 15.5px 20px; background-color: var(--solinom-white, #fff); } .package-card__content ul > li span { font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; text-transform: capitalize; color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .package-card__content ul > li p { font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; text-transform: capitalize; color: var(--solinom-text, #101D22); margin-bottom: 0; padding-bottom: 0; transition: all 0.4s ease-in-out; } .package-card__content ul li + li { margin-top: 7px; } .package-card__content .solinom-btn { padding: 11px 40px; } .package-card__populer { position: absolute; top: -18px; font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; display: inline-block; padding: 8px 17px; color: var(--solinom-white, #fff); background-color: var(--solinom-base, #CBA36B); text-transform: capitalize; } .package-card:hover { transform: translateY(-7px); } .package-card--active, .package-card:hover { background-color: var(--solinom-gray, #1C2F36); } .package-card--active .package-card__title, .package-card--active ul > li span, .package-card--active ul > li p, .package-card--active .package-card__price, .package-card--active .package-card__price small, .package-card--active .package-card__price span, .package-card:hover .package-card__title, .package-card:hover ul > li span, .package-card:hover ul > li p, .package-card:hover .package-card__price, .package-card:hover .package-card__price small, .package-card:hover .package-card__price span { color: var(--solinom-white, #fff); } .package-card--active .package-card__price, .package-card:hover .package-card__price { background-color: var(--solinom-base, #CBA36B); } .package-card--active ul > li, .package-card:hover ul > li { background-color: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.1); } .package-card--active { transform: translateY(-45px); position: relative; z-index: 1; } .package-card--active:hover { transform: translateY(-45px); } .package-card--active .package-card__title { margin-top: 8px; } .package-card--active::after { position: absolute; top: 0; right: 0; content: ""; width: 100%; height: 145px; background-color: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.1); clip-path: polygon(50% 15%, 100% 0, 100% 60%, 100% 100%, 50% 85%, 0 100%, 0 0); z-index: -1; } .package-page { padding: 120px 0; padding-top: 100px; } @media (max-width: 991px) { .package-page { padding: 100px 0; padding-top: 80px; } } @media (max-width: 767px) { .package-page { padding: 80px 0; padding-top: 60px; } } .package-page .sec-title { padding-bottom: 30px; } .package-page__carousel { padding: 90px 0 0; } @media (max-width: 991px) { .package-page__carousel { padding: 70px 0 0; } } @media (max-width: 767px) { .package-page__carousel { padding: 40px 0 0; } } .price-page { margin-bottom: 110px; } .price-page .tab-box-buttons { display: table; margin-right: auto; margin-left: auto; } .price-page .tab-box-buttons .tab-buttons { margin: 0; padding: 0; list-style: none; position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; z-index: 1; } .price-page .tab-box-buttons .tab-btn { cursor: pointer; position: relative; color: var(--solinom-text-gray, #7D8B90); text-transform: capitalize; transition: all 500ms ease; font-style: normal; font-weight: 600; font-size: 16px; line-height: normal; } .price-page .tab-box-buttons .tab-btn__switch { display: flex; align-items: center; gap: 10px; } .price-page .tab-btn__switch__box { display: inline-block; width: 63px; height: 34px; flex-shrink: 0; background-color: var(--solinom-gray, #1C2F36); border-radius: 30px; position: relative; cursor: pointer; } .price-page .tab-btn__switch__box::after { content: ""; position: absolute; width: 26px; height: 26px; background-color: var(--solinom-white, #fff); border-radius: 50%; top: 4px; right: 4px; transition: all 400ms ease; } .price-page .active-btn .tab-btn__switch__box { background-color: var(--solinom-base, #CBA36B); } .price-page .active-btn .tab-btn__switch__box::after { transform: translate(-28px, 0); transition: all 400ms ease; } /*-------------------------------------------------------------- # Offer --------------------------------------------------------------*/ /****** Offer Room******/ .offer-room { position: relative; z-index: 1; padding-top: 10px; background-color: var(--solinom-text-dark, #15262C); } @media (max-width: 991px) { .offer-room { padding-top: 100px; } } @media (max-width: 767px) { .offer-room { padding-top: 80px; } } .offer-room__inner { position: relative; z-index: 1; margin-top: -300px; } @media (max-width: 991px) { .offer-room__inner { margin-top: 0px; } } @media (min-width: 1550px) { .offer-room .container { max-width: 1550px; margin-right: auto; margin-left: auto; } } .offer-room__card { position: relative; z-index: 1; padding: 68px 20px 70px; } @media (min-width: 1550px) { .offer-room__card { max-width: 270px; margin-right: auto; margin-right: 0; } } .offer-room__card__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } .offer-room__card__bg::after { position: absolute; width: 100%; height: 100%; content: ""; top: 0; background-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.85); right: 0; } .offer-room__card__funfact { display: flex; align-items: center; justify-content: center; flex-direction: column; } .offer-room__card__funfact__count { font-style: normal; font-weight: 700; font-size: 40px; line-height: 100%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-white, #fff); } .offer-room__card__funfact__text { font-style: normal; font-weight: 700; font-size: 40px; line-height: 100%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-white, #fff); } .offer-room__card__room-quality { padding-top: 65px; padding-bottom: 48px; font-style: normal; font-weight: 500; font-size: 20px; line-height: 175%; color: var(--solinom-base, #CBA36B); position: relative; text-align: center; } .offer-room__card__room-quality img { position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); } .offer-room__card__element { background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 20px; right: 15px; left: 15px; bottom: 20px; } .offer-room__card__list { text-align: center; margin-bottom: 30px; } .offer-room__card__list li { text-align: center; font-style: normal; font-weight: 600; font-size: 16px; line-height: 200%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-base, #CBA36B); text-transform: capitalize; position: relative; } .offer-room__card__list li i { font-size: 5px; position: relative; top: 50%; transform: translateY(-50%); margin-left: 6px; } .offer-room__card__btn { text-align: center; } .offer-room__card__btn .solinom-btn { text-align: center; font-size: 14px; padding: 6px 20px; } .offer-room__right { overflow: hidden; } @media (min-width: 1550px) { .offer-room__right { margin-right: -100px; } } .offer-room__carousel__inner { margin-left: -68%; } .offer-room__carousel__inner .offer-room__item img { min-height: 568px; width: 100%; height: 100%; } .offer-room__carousel { position: relative; } .offer-room__carousel .owl-nav { margin-top: 0; } .offer-room__carousel .owl-dots { display: flex; align-items: center; justify-content: center; gap: 10px; background-color: var(--solinom-text, #101D22); position: absolute; padding: 25px 35px; bottom: 69px; right: 0; } .offer-room__carousel .owl-dots .owl-dot span { width: 24px; height: 24px; background-color: transparent; border: 1px solid transparent; box-shadow: 0 0 1px rgba(var(--solinom-black-rgb, 0, 0, 0), 1); margin: 0; position: relative; } .offer-room__carousel .owl-dots .owl-dot span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); background-color: var(--solinom-gray2, #283E46); } .offer-room__carousel .owl-dots .owl-dot:hover span, .offer-room__carousel .owl-dots .owl-dot.active span { background-color: var(--solinom-text, #101D22); border: 2px solid var(--solinom-base, #CBA36B); box-shadow: 0 0 1px rgba(var(--solinom-black-rgb, 0, 0, 0), 1); } .offer-room__carousel .owl-dots .owl-dot:hover span::after, .offer-room__carousel .owl-dots .owl-dot.active span::after { background-color: var(--solinom-base, #CBA36B); } /*-------------------------------------------------------------- # Resturent --------------------------------------------------------------*/ /***Resturent Card***/ .resturent-card { position: relative; z-index: 1; } .resturent-card__image { position: relative; overflow: hidden; } .resturent-card__image img { object-fit: cover; width: 100%; transform: scale(1); transition: all 0.4s ease-in-out; } .resturent-card__image__hover { background-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.8); height: 100%; top: 0; position: absolute; transform: translateY(-100%); transition: all 0.5s ease 0s; width: 20%; } .resturent-card__image__hover--1 { right: 0; transition-delay: 0.105s; } .resturent-card__image__hover--2 { right: 20%; transition-delay: 0.15s; } .resturent-card__image__hover--3 { right: 40%; transition-delay: 0.2s; } .resturent-card__image__hover--4 { right: 60%; transition-delay: 0.25s; } .resturent-card__image__hover--5 { right: 80%; transition-delay: 0.3s; } .resturent-card__content { display: inline-flex; align-items: center; justify-content: start; position: absolute; bottom: 0; right: 0; background-color: var(--solinom-white, #fff); transition: all 0.4s ease-in-out; } .resturent-card__icon { width: 55px; height: 52px; display: flex; justify-content: center; align-items: center; background-color: var(--solinom-gray2, #283E46); font-size: 20px; color: var(--solinom-base, #CBA36B); } .resturent-card__title { font-style: normal; font-weight: 600; font-size: 16px; line-height: 294%; color: var(--solinom-text, #101D22); text-transform: capitalize; padding: 0px 20px; margin-bottom: 0; padding-bottom: 0; transition: all 0.2s ease-in-out; } .resturent-card__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .resturent-card__title a:hover { background-size: 100% 1px; } .resturent-card:hover .resturent-card__image__hover { transform: translateY(0%); } .resturent-card:hover .resturent-card__image img { transform: scale(1.1); } .resturent-card:hover .resturent-card__content { background-color: var(--solinom-base, #CBA36B); } .resturent-card:hover .resturent-card__title { color: var(--solinom-white, #fff); } .resturent-card:hover .resturent-card__icon i { animation: top-bottom 0.4s ease-in-out; } /***Resturent One***/ .resturant-one { padding: 120px 0px 80px; } @media (max-width: 991px) { .resturant-one { padding: 100px 0px 80px; } } @media (max-width: 767px) { .resturant-one { padding: 80px 0px 60px; } } /***Lunch Menu***/ .lunch-menu { padding-bottom: 120px; } @media (max-width: 991px) { .lunch-menu { padding-bottom: 100px; } } @media (max-width: 767px) { .lunch-menu { padding-bottom: 80px; } } .lunch-menu__left { margin-left: -30px; } .lunch-menu__left--two { margin-left: 0; margin-right: -30px; } @media (max-width: 1199px) { .lunch-menu__left--two { margin-right: 0px; } } @media (max-width: 1199px) { .lunch-menu__left { margin-left: 0px; } } .lunch-menu__title { font-style: normal; font-weight: 600; font-size: 50px; line-height: 94%; text-transform: capitalize; color: var(--solinom-text, #101D22); padding-bottom: 0; margin-bottom: 44px; } @media (max-width: 575px) { .lunch-menu__title { margin-bottom: 30px; } } .lunch-menu__item { display: flex; align-items: start; gap: 30px; position: relative; } @media (max-width: 575px) { .lunch-menu__item { flex-direction: column; } } .lunch-menu__item::after { content: ""; width: 85%; height: 1px; position: absolute; bottom: 0; right: 0; background-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); z-index: -2; } .lunch-menu__item + .lunch-menu__item { margin-top: 50px; } @media (max-width: 575px) { .lunch-menu__item + .lunch-menu__item { margin-top: 30px; } } .lunch-menu__price { max-width: 110px; width: 100%; } .lunch-menu__content__title { font-style: normal; font-weight: 600; font-size: 24px; line-height: 196%; text-transform: capitalize; color: var(--solinom-text, #101D22); padding-bottom: 0; margin-bottom: 10px; } @media (max-width: 1199px) and (min-width: 991px) { .lunch-menu__content__title { font-size: 20px; } } @media (max-width: 575px) { .lunch-menu__content__title { margin-bottom: 0; } } .lunch-menu__content__text { font-style: normal; font-weight: 600; font-size: 16px; line-height: 188%; color: var(--solinom-text-gray, #7D8B90); } @media (max-width: 575px) { .lunch-menu__content__text { margin-bottom: 0; padding-bottom: 0; } } .lunch-menu__price { margin-top: -7px; text-align: center; position: relative; } .lunch-menu__price__item { font-style: normal; font-weight: 600; font-size: 20px; line-height: 150%; color: var(--solinom-text, #101D22); padding-top: 10px; padding-bottom: 10px; display: block; } .lunch-menu__price::after { content: ""; background-color: var(--solinom-border-color, #FAF6F0); position: absolute; bottom: -1px; right: 10px; left: 10px; top: 30px; z-index: -1; } .lunch-menu__thumb { margin-right: 55px; } @media (max-width: 1199px) { .lunch-menu__thumb { margin-right: 0px; } } .lunch-menu__thumb--two { margin-right: 0; margin-left: 55px; } @media (max-width: 1199px) { .lunch-menu__thumb--two { margin-left: 0px; } } .lunch-menu__thumb img { object-fit: cover; width: 100%; } .lunch-menu .padding-top { padding-top: 120px; } @media (max-width: 991px) { .lunch-menu .padding-top { padding-top: 70px; } } @media (max-width: 767px) { .lunch-menu .padding-top { padding-top: 50px; } } /***Payment System***/ .payment-system { padding-bottom: 120px; position: relative; } @media (max-width: 991px) { .payment-system { padding-bottom: 100px; } } @media (max-width: 767px) { .payment-system { padding-bottom: 80px; } } .payment-system__bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat; background-size: cover; transition: all 0.4s ease-in-out; } .payment-system__bg::after { position: absolute; width: 100%; height: 100%; content: ""; top: 0; right: 0; background: rgba(var(--solinom-gray2-rgb, 40, 62, 70), 0.9); } .payment-system__item { position: relative; z-index: 1; padding-bottom: 1px; margin-bottom: 27px; } .payment-system__item__content { position: relative; z-index: 1; padding: 40px 50px 0px; margin-bottom: -27px; } @media (max-width: 575px) { .payment-system__item__content { padding: 30px 40px 0px; } } .payment-system__item__icon { width: 70px; height: 70px; border-radius: 50%; background-color: var(--solinom-gray, #1C2F36); display: flex; justify-content: center; align-items: center; font-size: 35px; color: var(--solinom-base, #CBA36B); margin-bottom: 18px; transition: all 0.4s ease-in-out; } .payment-system__item__subtitle { display: block; font-style: normal; font-weight: 600; font-size: 16px; line-height: 1rem; color: var(--solinom-base, #CBA36B); margin-bottom: 9px; padding-bottom: 0; } .payment-system__item__title { font-style: normal; font-weight: 600; font-size: 30px; line-height: 133%; color: var(--solinom-white, #fff); text-transform: capitalize; margin-bottom: 30px; } @media (max-width: 575px) { .payment-system__item__title { font-size: 25px; } } .payment-system__item .solinom-btn { padding: 11px 40px; } .payment-system__item:hover .payment-system__item__icon { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .payment-system__item:hover .payment-system__item__icon i { animation: top-bottom 0.4s ease-in-out; } /*-------------------------------------------------------------- # Benefit --------------------------------------------------------------*/ /***Benefit One Style***/ .benefit-one { position: relative; z-index: 1; padding: 120px 0px; } @media (max-width: 991px) { .benefit-one { padding: 100px 0px; } } @media (max-width: 767px) { .benefit-one { padding: 80px 0px; } } .benefit-one__bg { position: absolute; top: 0; right: 0; width: 70%; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; background-color: var(--solinom-border-color, #FAF6F0); } .benefit-one .sec-title { padding-bottom: 20px; } .benefit-one__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 30px; padding-bottom: 0; } .benefit-one__video { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 80px; } .benefit-one__video__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } .benefit-one__video__item { display: flex; align-items: center; justify-content: center; width: 60px; margin-right: auto; margin-left: auto; height: 60px; border-radius: 50%; background-color: var(--solinom-white, #fff); color: var(--solinom-base, #CBA36B); font-size: 18px; position: relative; transition: all 0.5s ease-in-out; } .benefit-one__video__item:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .benefit-one__video::after { content: ""; width: 100%; height: 50%; position: absolute; bottom: 0; right: 0; background-color: rgba(var(--solinom-gray-rgb, 28, 47, 54), 0.9); z-index: -1; transition: all 0.5s ease-in-out; } .benefit-one__video .ripple { position: absolute; top: 50%; right: 50%; width: 100%; height: 100%; transform: translate(50%, -50%); box-shadow: 0 0 0 0 rgba(var(--solinom-white-rgb, 255, 255, 255), 0.25); animation: ripple 3s infinite; border-radius: 50%; } .benefit-one__video .ripple::before, .benefit-one__video .ripple::after { position: absolute; top: 50%; right: 50%; width: 100%; height: 100%; transform: translate(50%, -50%); box-shadow: 0 0 0 0 rgba(var(--solinom-white-rgb, 255, 255, 255), 0.25); animation: ripple 3s infinite; border-radius: 50%; } .benefit-one__video .ripple::before { animation-delay: 0.9s; content: ""; position: absolute; } .benefit-one__video .ripple::after { animation-delay: 0.6s; content: ""; position: absolute; } .benefit-one__video:hover::after { height: 100%; } .benefit-one__feature__item { border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.1); position: relative; z-index: 1; display: flex; justify-content: space-between; margin-right: -10px; } .benefit-one__feature__item:hover .benefit-one__feature__icon i { animation: bounceIn 1s linear; } .benefit-one__feature__item + .benefit-one__feature__item { margin-top: 35px; } .benefit-one__feature__icon { max-width: 95px; display: flex; justify-content: center; align-items: center; background-color: var(--solinom-gray, #1C2F36); width: 100%; font-size: 40px; color: var(--solinom-base, #CBA36B); margin-right: 10px; margin-bottom: -15px; margin-top: -10px; padding-bottom: 15px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%); } .benefit-one__feature__funfact { display: flex; align-items: center; justify-content: center; flex-direction: column; } .benefit-one__feature__count { text-align: center; display: flex; justify-content: center; font-style: normal; font-weight: 600; font-size: 30px; line-height: 100%; color: var(--solinom-base, #CBA36B); margin-bottom: 0; padding-bottom: 0; } .benefit-one__feature__text { font-style: normal; font-weight: 500; font-size: 14px; line-height: normal; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); text-transform: capitalize; } .benefit-one__right { position: absolute; top: 50px; } @media (max-width: 1199px) { .benefit-one__right { position: relative; top: 0; } } .benefit-one__item { display: flex; align-items: center; } @media (max-width: 1199px) { .benefit-one__item { justify-content: center; } } @media (max-width: 767px) { .benefit-one__item { flex-direction: column; gap: 30px; } } .benefit-one__item__content { width: 362px; height: 362px; border-radius: 50%; background-color: var(--solinom-gray, #1C2F36); text-align: center; padding: 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.4s ease-in-out; } .benefit-one__item__content a { padding: 6px 20px; font-size: 14px; } .benefit-one__item__content--two { margin-left: -30px; position: relative; z-index: 2; } .benefit-one__item__content:hover { background-color: var(--solinom-base, #CBA36B); } .benefit-one__item__content:hover a { background-color: var(--solinom-gray, #1C2F36); color: var(--solinom-base, #CBA36B); } .benefit-one__item__content:hover .benefit-one__item__title, .benefit-one__item__content:hover .benefit-one__item__text { color: var(--solinom-white, #fff); } .benefit-one__item__thumb { border-radius: 1000px 0px 1000px 1000px; overflow: hidden; margin-left: -30px; position: relative; } .benefit-one__item__thumb img { object-fit: cover; width: 100%; } .benefit-one__item__thumb--two { margin-right: 0px; margin-left: 0px; border-radius: 1000px 1000px 1000px 0px; } .benefit-one__item__title { font-style: normal; font-weight: 600; font-size: 24px; line-height: 125%; text-transform: capitalize; color: var(--solinom-white, #fff); transition: all 0.4s ease-in-out; } .benefit-one__item__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 219%; margin-bottom: 20px; padding-bottom: 0; transition: all 0.4s ease-in-out; color: var(--solinom-text-gray, #7D8B90); } @media (max-width: 1330px) and (min-width: 1199px) { .benefit-one__item__text { font-size: 15px; line-height: 119%; } } .benefit-one__item + .benefit-one__item { margin-top: -30px; position: relative; z-index: 1; } @media (max-width: 767px) { .benefit-one__item + .benefit-one__item { margin-top: 30px; } } .benefit-one__icon { position: absolute; top: 45%; right: 45%; transform: translate(50% -50%); animation: scaleError2 4s ease-in-out infinite; } @media (max-width: 767px) { .benefit-one__icon { display: none; } } /***Benefit Two Style***/ .benefit-two { position: relative; z-index: 1; padding: 120px 0px; background-color: var(--solinom-text-dark, #15262C); } @media (max-width: 991px) { .benefit-two { padding: 100px 0px; } } @media (max-width: 767px) { .benefit-two { padding: 80px 0px; } } .benefit-two .client-carousel { padding: 0; margin-bottom: 120px; } @media (max-width: 991px) { .benefit-two .client-carousel { margin-bottom: 100px; } } @media (max-width: 767px) { .benefit-two .client-carousel { margin-bottom: 80px; } } .benefit-two__bg { position: absolute; top: 0; right: 0; width: 100%; height: 702px; background-repeat: no-repeat; background-size: cover; z-index: -1; mix-blend-mode: overlay; } .benefit-two::after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 702px; background-color: var(--solinom-gray2, #283E46); z-index: -2; } .benefit-two__inner { background-color: var(--solinom-gray2, #283E46); position: relative; overflow: hidden; } .benefit-two__item { position: relative; z-index: 1; padding-top: 120px; } .benefit-two__item__thumb { position: absolute; bottom: 0; right: 0; left: 0; top: 0; background-repeat: no-repeat; background-position: center center; } .benefit-two__item__top { margin-right: 80px; max-width: 255px; margin-bottom: -30px; position: relative; z-index: 2; } .benefit-two__item__icon { width: 124px; height: 124px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: var(--solinom-text, #101D22); font-size: 54px; color: rgba(var(--solinom-base-rgb, 203, 163, 107), 1); position: relative; z-index: 1; margin-right: auto; margin-left: auto; margin-bottom: -50px; position: relative; } .benefit-two__item__funfact { max-width: 254px; width: 100%; background-color: var(--solinom-text, #101D22); clip-path: polygon(50% 20%, 100% 0, 100% 100%, 0 100%, 0 0); padding: 76px 45px 35px; display: flex; align-items: center; flex-direction: column; } .benefit-two__item__funfact__text { font-style: normal; font-weight: 500; font-size: 18px; line-height: 144%; margin-bottom: -2px; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-text-gray, #7D8B90); text-align: center; margin-top: 10px; } .benefit-two__item__count { display: flex; justify-content: center; align-items: center; font-style: normal; font-weight: 700; font-size: 30px; line-height: 100%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-white, #fff); } .benefit-two__item__content { position: relative; padding: 55px 40px 40px; background-color: var(--solinom-gray2, #283E46); max-width: 530px; width: 100%; margin-right: 40px; } .benefit-two__item__content__text { font-style: normal; font-weight: 600; font-size: 16px; line-height: 188%; margin-bottom: 20px; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .benefit-two__item__content a:hover { color: var(--solinom-white, #fff); } .benefit-two__item__content__shape { position: absolute; bottom: 0; right: 0; } .benefit-two__item__content__shape img { object-fit: cover; width: 100%; } .benefit-two__right { margin-right: 60px; padding-bottom: 40px; } .benefit-two__right .sec-title { padding-bottom: 18px; } @media (max-width: 1199px) and (min-width: 992px) { .benefit-two__right { margin-right: 20px; } } @media (max-width: 575px) { .benefit-two__right { margin-right: 20px; } } .benefit-two__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 30px; } .benefit-two__list { padding: 0; margin: 0; position: relative; z-index: 1; } .benefit-two__list::after { content: ""; position: absolute; top: 0; right: 0; bottom: -40px; left: -40px; background-color: var(--solinom-gray2, #283E46); z-index: -1; } .benefit-two__list__item { display: flex; align-items: center; background-color: var(--solinom-gray, #1C2F36); gap: 30px; border-radius: 0 1000px 1000px 0; position: relative; overflow: hidden; z-index: 1; cursor: pointer; } .benefit-two__list__item::after { content: ""; width: 0%; height: 100%; position: relative; background-color: rgba(var(--solinom-base-rgb, 203, 163, 107), 1); position: absolute; top: 0; right: auto; left: 0; transition: all 0.4s ease-in; z-index: -1; } .benefit-two__list__item:hover .benefit-two__list__icon { background-color: var(--solinom-gray2, #283E46); } .benefit-two__list__item:hover .benefit-two__list__icon i { animation: bounceIn 1s linear; } .benefit-two__list__item:hover::after { right: 0; left: auto; width: 100%; } .benefit-two__list__item + .benefit-two__list__item { margin-top: 10px; } .benefit-two__list__icon { border-radius: 50%; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; font-size: 40px; color: var(--solinom-base, #CBA36B); background-color: var(--solinom-gray, #1C2F36); border: 1px solid var(--solinom-gray2, #283E46); margin-right: -0.5px; margin-top: -0.5px; margin-bottom: -0.5px; transition: all 0.4s ease-in-out; } .benefit-two__list__title { font-style: normal; font-weight: 500; font-size: 20px; line-height: 300%; margin-bottom: 0; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); } .benefit-two__list__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .benefit-two__list__title a:hover { background-size: 100% 1px; } .benefit-two .owl-theme .owl-nav [class*=owl-] { margin: 0 !important; } .benefit-two__item__carousel .owl-nav { position: absolute; bottom: 0; left: 50px; display: flex; justify-content: center; flex-direction: column; gap: 0px; } .benefit-two__item__carousel .owl-nav button { border: none; outline: none; border-radius: 0; margin: 0; padding: 0; } .benefit-two__item__carousel .owl-nav button span { border: none; outline: none; width: 50px; height: 50px; background-color: var(--solinom-text, #101D22); display: flex; justify-content: center; align-items: center; color: var(--solinom-base, #CBA36B); font-size: 18px; transition: all 500ms ease; transform: rotate(-90deg); } .benefit-two__item__carousel .owl-nav button span:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .benefit-two__item__carousel .owl-nav button:last-child span { transform: rotate(-90deg); } /***Benefit Three Style***/ .benefit-three { position: relative; padding: 120px 0px; background-color: var(--solinom-text-dark, #15262C); z-index: 1; } @media (max-width: 991px) { .benefit-three { padding: 100px 0px; } } @media (max-width: 768px) { .benefit-three { padding: 80px 0px; } } .benefit-three__bg { position: absolute; right: 0; top: 0; width: 100%; height: 602px; background-color: var(--solinom-gray2, #283E46); background-position: right top; background-repeat: no-repeat; background-size: cover; z-index: -1; } .benefit-three__item { padding: 0px 30px 30px; background-color: var(--solinom-gray, #1C2F36); position: relative; z-index: 1; padding-top: 1px; margin-top: 55px; transition: all 0.4s ease-in-out; } .benefit-three__item__top { max-height: 111px; margin-left: -32px; position: relative; margin-top: -55px; transition: all 0.4s ease-in-out; display: flex; align-items: center; justify-content: center; } .benefit-three__item__top__icon { width: 121px; height: 111px; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-gray, #1C2F36); font-size: 56px; color: var(--solinom-base, #CBA36B); transition: all 0.4s ease-in-out; } .benefit-three__item__title { font-style: normal; font-weight: 600; font-size: 20px; line-height: normal; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-white, #fff); padding: 20px 30px; margin-left: -30px; background-color: var(--solinom-gray2, #283E46); margin-bottom: 25px; transition: all 0.4s ease-in-out; } .benefit-three__item__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 0px; padding-bottom: 22px; border-bottom: 1px solid var(--solinom-text, #101D22); transition: all 0.4s ease-in-out; } .benefit-three__item__btn { margin-top: -1px; background-color: var(--solinom-text, #101D22); padding: 6px 20px; font-size: 14px; border: 1px solid transparent; } .benefit-three__item__btn:hover { color: var(--solinom-white, #fff); border-color: var(--solinom-text, #101D22); } .benefit-three__item:hover { background-color: var(--solinom-base, #CBA36B); } .benefit-three__item:hover .benefit-three__item__top__icon { background-color: var(--solinom-base, #CBA36B); } .benefit-three__item:hover .benefit-three__item__top__icon i { animation: bounceIn 1s linear; color: var(--solinom-gray, #1C2F36); } .benefit-three__item:hover .benefit-three__item__title { background-color: #B98F55; color: var(--solinom-white, #fff); } .benefit-three__item:hover .benefit-three__item__text { color: var(--solinom-white, #fff); } .benefit-three__thumb { position: absolute; top: 0; left: 0; bottom: 120px; width: 38%; display: flex; align-items: center; justify-content: center; } @media (max-width: 1199px) { .benefit-three__thumb { display: none; } } .benefit-three__thumb__bg { position: absolute; right: 0; top: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; z-index: -1; } .benefit-three__thumb__bg::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background: linear-gradient(-180deg, #CBA36B 0%, #15262C 100%); opacity: 0.9; } .benefit-three__thumb__element { position: absolute; top: 20px; right: 20px; left: 20px; animation: scaleError2 4s ease-in-out infinite; } .benefit-three__thumb__element img { object-fit: cover; width: 100%; } .benefit-three__thumb__element-one { position: absolute; bottom: 20px; right: 20px; left: 20px; } .benefit-three__thumb__element-one img { object-fit: cover; width: 100%; } .benefit-three__thumb::before, .benefit-three__thumb::after { content: ""; width: 295px; height: 80px; position: absolute; background-color: var(--solinom-text-dark, #15262C); } .benefit-three__thumb::before { clip-path: polygon(0 0, 0% 100%, 100% 100%); position: absolute; bottom: 0; right: 0; } .benefit-three__thumb::after { clip-path: polygon(100% 0, 0% 100%, 100% 100%); position: absolute; bottom: 0; left: 0; } /***Benefit Four Style***/ .benefit-four { position: relative; z-index: 1; padding: 120px 0px; } .benefit-four::after { content: ""; width: 100%; height: 540px; position: absolute; top: 0; right: 0; background-color: var(--solinom-border-color, #FAF6F0); z-index: -1; } .benefit-four__content { background-color: var(--solinom-white, #fff); padding: 80px; } @media (max-width: 991px) { .benefit-four__content { padding: 50px; } } @media (max-width: 767px) { .benefit-four__content { padding: 50px 30px; } } .benefit-four__content .sec-title { padding-bottom: 10px; } .benefit-four__content__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; color: var(--solinom-text-gray, #7D8B90); margin-bottom: 32px; } .benefit-four__list { margin-bottom: 0; padding-bottom: 0; } .benefit-four__list__item { display: flex; align-items: center; border-top: 1px solid rgba(var(--solinom-text-dark-rgb, 21, 38, 44), 0.1); transition: all 0.4s ease-in-out; z-index: 1; position: relative; } .benefit-four__list__item:last-child { border-bottom: 1px solid rgba(var(--solinom-text-dark-rgb, 21, 38, 44), 0.1); } @media (max-width: 575px) { .benefit-four__list__item { flex-direction: column; } } .benefit-four__list__item::after { position: absolute; content: ""; width: 4px; height: 100%; left: 0; top: 0; transition: all 0.4s ease-in-out; background-color: rgba(var(--solinom-text-dark-rgb, 21, 38, 44), 0.1); } .benefit-four__list__item::before { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; transition: all 0.5s ease-in-out; background: var(--solinom-border-color, #FAF6F0); transform: rotateY(-90deg); z-index: -1; } .benefit-four__list__item.active-btn::before, .benefit-four__list__item:hover::before { transform: rotateY(0deg); } .benefit-four__list__item.active-btn::after, .benefit-four__list__item:hover::after { background-color: rgba(var(--solinom-base-rgb, 203, 163, 107), 1); } .benefit-four__list__item.active-btn .benefit-four__title, .benefit-four__list__item:hover .benefit-four__title { color: var(--solinom-text, #101D22) !important; } .benefit-four__icon { max-width: 70px; height: 70px; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--solinom-base, #CBA36B); background: var(--solinom-border-color, #FAF6F0); } .benefit-four__title { margin-right: 30px; font-style: normal; font-weight: 500; font-size: 16px; line-height: 375%; color: var(--solinom-text-gray, #7D8B90); margin-bottom: 0; transition: all 0.4s ease-in-out; cursor: pointer; } .benefit-four__title:hover { color: var(--solinom-text, #101D22); } .benefit-four__item { position: absolute; left: 0; width: 47%; text-align: center; } @media (max-width: 1199px) { .benefit-four__item { width: 100%; position: relative; } } .benefit-four__item__image { text-align: end; } @media (max-width: 1199px) { .benefit-four__item__image img { object-fit: cover; width: 100%; } } .benefit-four__item__icon { width: 80px; height: 80px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: auto; margin-left: auto; text-align: center; background-color: var(--solinom-gray, #1C2F36); color: var(--solinom-base, #CBA36B); font-size: 40px; } .benefit-four__item__title { font-style: normal; font-weight: 600; font-size: 18px; line-height: 333%; margin-bottom: 0; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-text-dark, #15262C); text-align: center; } .benefit-four__item__text { margin-top: -7px; font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; max-width: 325px; margin-right: auto; margin-left: auto; text-align: center; } @media (max-width: 767px) { .benefit-four__item__text { max-width: 100%; } } .benefit-four__item .solinom-btn { padding: 9px 20px; margin-bottom: 0; } .benefit-four__item::after { position: absolute; bottom: -77px; right: 10px; content: ""; width: 104px; height: 77px; background-color: var(--solinom-base, #CBA36B); -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: auto; mask-size: auto; } @media (max-width: 575px) { .benefit-four__item::after { display: none; } } .benefit-four__item__box { max-width: 444px; width: 100%; height: 365px; border-radius: 1000px 1000px 0px 0px; background-color: var(--solinom-border-color, #FAF6F0); padding-top: 40px; padding-right: 30px; padding-left: 30px; position: absolute; bottom: -110px; right: 113px; } @media (max-width: 767px) { .benefit-four__item__box { max-width: 100%; } } @media (max-width: 575px) { .benefit-four__item__box { bottom: 0px; right: 0px; border-radius: 0px; position: relative; } } /***Benefit Five Style***/ .benefit-five { position: relative; z-index: 1; background-color: var(--solinom-text-dark, #15262C); padding-top: 148px; overflow: hidden; } @media (min-width: 1500px) { .benefit-five .container { max-width: 1300px; margin-right: auto; margin-left: auto; } } @media (max-width: 991px) { .benefit-five { padding-top: 100px; } } @media (max-width: 767px) { .benefit-five { padding-top: 80px; } } .benefit-five__bg { position: absolute; top: 148px; left: 100px; width: 1530px; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } @media (max-width: 991px) { .benefit-five__bg { top: 0; } } .benefit-five__bg::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: var(--solinom-gray2, #283E46); background: rgba(21, 38, 44, 0.87); } @media (max-width: 991px) { .benefit-five__bg { width: 100%; left: 0px; } } .benefit-five::after { content: ""; height: 593px; background-color: var(--solinom-gray, #1C2F36); position: absolute; top: 148px; right: 0; left: 100px; z-index: -2; } .benefit-five__content { padding-bottom: 80px; } @media (max-width: 991px) { .benefit-five__content { padding-bottom: 0px; } } .benefit-five__content__top { height: 114px; clip-path: polygon(0 0, 100% 0, 100% 10%, 50% 100%, 0 10%); background-color: var(--solinom-base, #CBA36B); position: relative; z-index: 1; margin-right: 40px; margin-left: 40px; } .benefit-five__content__inner { position: relative; margin-top: -75px; padding: 202px 0 145px 0px; background-color: transparent; position: relative; z-index: 1; } .benefit-five__content__inner .sec-title { padding-bottom: 10px; } @media (max-width: 767px) { .benefit-five__content__inner { padding: 130px 0 90px 0px; } } .benefit-five__content__inner__content { max-width: 550px; margin-right: auto; margin-left: auto; text-align: center; padding-right: 15px; padding-left: 15px; } .benefit-five__content__inner::after { content: ""; width: 100%; height: 100%; background: var(--solinom-text, #101D22); opacity: 0.85; backdrop-filter: blur(50px); position: absolute; top: 0; right: 0; z-index: -1; clip-path: polygon(50% 13%, 100% 0, 100% 80%, 50% 100%, 0 80%, 0 0); } @media (max-width: 767px) { .benefit-five__content__inner::after { clip-path: polygon(50% 13%, 100% 0, 100% 90%, 50% 100%, 0 90%, 0 0); } } .benefit-five__content__inner__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 20px; padding-bottom: 0; } .benefit-five__content__inner__title { display: block; font-style: normal; font-weight: 500; font-size: 24px; line-height: 125%; margin-bottom: 0; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-base, #CBA36B); margin-bottom: 40px; } .benefit-five__content__inner__bottom { margin-bottom: 0; padding-right: 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; } .benefit-five__content__inner__item { font-style: normal; font-weight: 600; font-size: 16px; line-height: 40%; text-transform: capitalize; color: var(--solinom-text-gray, #7D8B90); display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 100px; padding: 12px 20px; background: transparent; border: 1px solid var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .benefit-five__content__inner__item i { font-size: 30px; color: var(--solinom-base, #CBA36B); transition: all 0.4s ease-in-out; } .benefit-five__content__inner__item:hover { border-color: transparent; background-color: rgba(var(--solinom-base-rgb, 203, 163, 107), 1); color: var(--solinom-white, #fff); } .benefit-five__content__inner__item:hover i { color: var(--solinom-white, #fff); } .benefit-five__thumb { position: absolute; top: 0; left: 0; width: 820px; border-radius: 1000px 1000px 0 0; } @media (max-width: 1500px) { .benefit-five__thumb { width: 48%; } } @media (max-width: 991px) { .benefit-five__thumb { width: 100%; position: relative; } } .benefit-five__thumb img { object-fit: cover; width: 100%; border-radius: 1000px 1000px 0 0; } .benefit-five__thumb::after { content: ""; position: absolute; bottom: -80px; right: 0; -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: auto; mask-size: auto; background-color: var(--solinom-gray2, #283E46); width: 100%; height: 375px; z-index: 1; } @media (max-width: 575px) { .benefit-five__thumb::after { display: none; } } .benefit-five__thumb::before { content: ""; position: absolute; bottom: 0; right: 35px; left: 35px; top: 35px; border-radius: 1000px 1000px 0 0; border: 3px solid rgba(var(--solinom-base-rgb, 203, 163, 107), 1); background-color: transparent; } @media (max-width: 575px) { .benefit-five__thumb::before { display: none; } } .benefit-five__thumb__element { position: absolute; bottom: 120px; right: 15%; z-index: 2; animation: scaleError2 4s ease-in-out infinite; } .benefit-five__thumb__element img { object-fit: cover; width: 100%; border-radius: 0; } @media (max-width: 575px) { .benefit-five__thumb__element { display: none; } } .benefit-five__testi { display: flex; align-items: center; gap: 20px; position: absolute; bottom: 10px; z-index: 2; right: 50%; transform: translateX(50%); } @media (max-width: 575px) { .benefit-five__testi { display: none; } } .benefit-five__testi__image { display: flex; align-items: center; } .benefit-five__testi__image img { object-fit: cover; width: 100%; border: 2px solid var(--solinom-white, #fff); border-radius: 50%; margin-right: -20px; max-width: 50px; width: 100%; height: 50px; } .benefit-five__testi__image img:first-child { margin-right: 0; } .benefit-five__testi__image__item { margin-right: -20px; max-width: 50px; padding: 6px; width: 100%; height: 50px; border: 2px solid var(--solinom-white, #fff); border-radius: 50%; background-color: rgba(var(--solinom-base-rgb, 203, 163, 107), 1); display: flex; align-items: center; justify-content: center; } .benefit-five__testi__image__funfact { font-style: normal; font-weight: 700; font-size: 16px; line-height: normal; color: var(--solinom-white, #fff); margin-bottom: 0; padding-bottom: 0; display: flex; align-items: center; justify-content: center; } .benefit-five__testi__text { font-style: normal; font-weight: 500; font-size: 20px; line-height: 130%; text-transform: capitalize; color: var(--solinom-white, #fff); margin-bottom: 0; padding-bottom: 0; } @media (max-width: 1199px) and (min-width: 992px) { .benefit-five__testi__text { padding-right: 70px; } } @media (max-width: 767px) { .benefit-five__testi__text { padding-right: 70px; } } /*-------------------------------------------------------------- # Animations --------------------------------------------------------------*/ @keyframes bubbleMover { 0% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); } 30% { -webkit-transform: translateY(30px) translateX(-50px) rotate(-15deg); transform: translateY(30px) translateX(-50px) rotate(-15deg); -webkit-transform-origin: center center; transform-origin: center center; } 50% { -webkit-transform: translateY(50px) translateX(-100px) rotate(-45deg); transform: translateY(50px) translateX(-100px) rotate(-45deg); -webkit-transform-origin: left bottom; transform-origin: left bottom; } 80% { -webkit-transform: translateY(30px) translateX(-50px) rotate(-15deg); transform: translateY(30px) translateX(-50px) rotate(-15deg); -webkit-transform-origin: right top; transform-origin: right top; } 100% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); -webkit-transform-origin: center center; transform-origin: center center; } } @keyframes iconTranslateX { 49% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 51% { opacity: 1; } } @keyframes shapeMover { 0%, 100% { transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0); } 50% { transform: perspective(400px) rotate(45deg) translateZ(20px) translateY(20px) translateX(-20px); } } @keyframes banner3Shake { 0% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } 30% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 60% { -webkit-transform: rotate3d(-1, 0, 0, 0deg); transform: rotate3d(-1, 0, 0, 0deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } } @keyframes squareMover { 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20%, 60% { -webkit-transform: translate(-20px, 40px) rotate(-180deg); transform: translate(-20px, 40px) rotate(-180deg); } 30%, 80% { -webkit-transform: translate(-40px, 60px) rotate(0deg); transform: translate(-40px, 60px) rotate(0deg); } } @keyframes treeMove { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 25%, 75% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 50% { -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes leafMove { 0%, 100% { -webkit-transform: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); } 25%, 75% { transform: rotate(2deg) translateX(-5px); } 50% { transform: rotate(4deg) translateX(-10px); } } @keyframes messageMove { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-5px); } 50% { transform: translateX(-10px); } } @keyframes textRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes flowerRotate { 0%, 100% { transform: rotate(0deg); } 25%, 75% { transform: rotate(-5deg); } 50% { transform: rotate(-10deg); } } @keyframes top-bottom { 0% { transform: translateY(0px); } 50% { transform: translateY(6px); } 100% { transform: translateY(0px); } } @keyframes top-bottom-two { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } } @keyframes left-to-right-two { 0% { transform: translateX(0px); } 50% { transform: translateX(15px); } 100% { transform: translateX(0px); } } @keyframes scaleError { 0% { transform: scale(0.9); } 50% { transform: scale(1.3); } 100% { transform: scale(0.9); } } @keyframes scaleError2 { 0% { transform: scale(1); } 50% { transform: scale(0.6); } 100% { transform: scale(1); } } @keyframes shake { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(7px); transform: translateX(7px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes ripple { 70% { box-shadow: 0 0 0 40px rgba(10, 165, 205, 0); } 100% { box-shadow: 0 0 0 0 rgba(10, 165, 205, 0); } } @keyframes rotated { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } } @keyframes bgSlide { 0% { background-position: 100% 0; } 20% { background-position: -100px 0; } 40% { background-position: -200px 0; } 60% { background-position: -150px 0; } 80% { background-position: -100px 0; } 100% { background-position: 0px 0; } } @keyframes opesityIn { 0% { opacity: 0; width: 20px; } 80% { opacity: 1; width: 100%; } 100% { opacity: 0; width: 20px; } } @keyframes opesity { 0% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 0; } } /*-------------------------------------------------------------- # Mobile Nav --------------------------------------------------------------*/ .mobile-nav__wrapper { position: fixed; top: 0; right: 0; width: 100vw; height: 100vh; z-index: 999; transform: translateX(100%); transform-origin: right center; transition: transform 500ms ease 500ms, visibility 500ms ease 500ms; visibility: hidden; position: fixed; } .mobile-nav__wrapper .container { padding-right: 0; padding-left: 0; } .mobile-nav__wrapper .home-showcase .row [class*=col-] { flex: 0 0 100%; } .mobile-nav__wrapper .home-showcase { margin-bottom: -1px; margin-top: 0; border-bottom: 1px solid RGBA(var(--solinom-white-rgb, 255, 255, 255), 0.1); } .mobile-nav__wrapper .home-showcase__inner { padding: 15px 0px; background-color: transparent; box-shadow: none; } .mobile-nav__wrapper .home-showcase__title { color: var(--solinom-white, #fff); } .mobile-nav__wrapper.expanded { opacity: 1; transform: translateX(0%); visibility: visible; transition: transform 500ms ease 0ms, visibility 500ms ease 0ms; } .mobile-nav__wrapper.expanded .mobile-nav__content { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 500ms ease 500ms, visibility 500ms ease 500ms, transform 500ms ease 500ms; } .mobile-nav__overlay { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: var(--solinom-black, #000); opacity: 0.3; cursor: url(../images/close.png), auto; } .mobile-nav__content { width: 300px; background-color: var(--solinom-black2, #141215); z-index: 10; position: relative; height: 100%; overflow-y: auto; padding-top: 30px; padding-bottom: 30px; padding-right: 15px; padding-left: 15px; opacity: 0; visibility: hidden; transform: translateX(100%); transition: opacity 500ms ease 0ms, visibility 500ms ease 0ms, transform 500ms ease 0ms; } .mobile-nav__content .main-menu__nav { display: block; padding: 0; } .mobile-nav__content .logo-box { margin-bottom: 40px; display: flex; } .mobile-nav__close { position: absolute; top: 20px; left: 15px; font-size: 18px; color: var(--solinom-white, #fff); cursor: pointer; } .mobile-nav__close:hover { color: var(--solinom-base, #CBA36B); } .mobile-nav__content .main-menu__list, .mobile-nav__content .main-menu__list ul { margin: 0; padding: 0; list-style-type: none; } .mobile-nav__content .main-menu__list ul { display: none; border-top: 1px solid RGBA(var(--solinom-white-rgb, 255, 255, 255), 0.1); } .mobile-nav__content .main-menu__list ul li > a { padding-right: 1em; } .mobile-nav__content .main-menu__list li:not(:last-child) { border-bottom: 1px solid RGBA(var(--solinom-white-rgb, 255, 255, 255), 0.1); } .mobile-nav__content .main-menu__list li > a { display: flex; justify-content: space-between; line-height: 30px; color: var(--solinom-white, #fff); font-size: 12px; font-family: var(--solinom-font, "Plus Jakarta Sans", sans-serif); text-transform: uppercase; font-weight: 500; height: 46px; letter-spacing: var(--solinom-letter-space, 0.1em); align-items: center; transition: 500ms; } .mobile-nav__content .main-menu__list li a.expanded { color: var(--solinom-base, #CBA36B); } .mobile-nav__content .main-menu__list li a button { width: 30px; height: 30px; background-color: var(--solinom-base, #CBA36B); border: none; outline: none; color: var(--solinom-white, #fff); display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(90deg); transition: transform 500ms ease; } .mobile-nav__content .main-menu__list li a button.expanded { transform: rotate(0deg); background-color: var(--solinom-white, #fff); color: var(--solinom-black, #000); } .mobile-nav__social { display: flex; align-items: center; } .mobile-nav__social a { font-size: 16px; color: var(--solinom-white, #fff); transition: 500ms; } .mobile-nav__social a + a { margin-right: 20px; } .mobile-nav__social a:hover { color: var(--solinom-base, #CBA36B); } .mobile-nav__contact { margin-bottom: 0; margin-top: 20px; margin-bottom: 20px; } .mobile-nav__contact li { color: var(--solinom-white, #fff); font-size: 14px; font-weight: 500; position: relative; display: flex; align-items: center; } .mobile-nav__contact li + li { margin-top: 15px; } .mobile-nav__contact li a { color: inherit; transition: 500ms; } .mobile-nav__contact li a:hover { color: var(--solinom-base, #CBA36B); } .mobile-nav__contact li > i { width: 30px; height: 30px; border-radius: 50%; background-color: var(--solinom-base, #CBA36B); display: flex; justify-content: center; align-items: center; text-align: center; font-size: 12px; margin-left: 10px; color: var(--solinom-white, #fff); } .mobile-nav__container .main-menu__logo, .mobile-nav__container .main-menu__right { display: none; } /*-------------------------------------------------------------- # Search Popup --------------------------------------------------------------*/ .search-popup { position: fixed; width: 100%; height: 100%; top: 0; right: 0; z-index: -2; -webkit-transition: all 1s ease; -khtml-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .search-popup__overlay { position: fixed; width: 224vw; height: 224vw; top: calc(90px - 112vw); left: calc(50% - 112vw); z-index: 3; display: block; -webkit-border-radius: 50%; -khtml-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-transform: scale(0); -khtml-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: center; transform-origin: center; -webkit-transition: transform 0.8s ease-in-out; -khtml-transition: transform 0.8s ease-in-out; -moz-transition: transform 0.8s ease-in-out; -ms-transition: transform 0.8s ease-in-out; -o-transition: transform 0.8s ease-in-out; transition: transform 0.8s ease-in-out; transition-delay: 0s; transition-delay: 0.3s; -webkit-transition-delay: 0.3s; background-color: #000; opacity: 0.9; cursor: url(../images/close.png), auto; } @media (max-width: 767px) { .search-popup__overlay { position: absolute; top: 0; right: 0; left: 0; bottom: 0; transform: none; width: 100%; height: 100%; border-radius: 0; transform: translateY(-110%); } } .search-popup__content { position: fixed; width: 0; max-width: 560px; padding: 30px 15px; right: 50%; top: 50%; opacity: 0; z-index: 3; -webkit-transform: translate(50%, -50%); -khtml-transform: translate(50%, -50%); -moz-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); -o-transform: translate(50%, -50%); transform: translate(50%, -50%); -webkit-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; -khtml-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; -moz-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; -ms-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; -o-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s; transition-delay: 0s, 0.8s, 0s; transition-delay: 0s, 0.4s, 0s; transition-delay: 0.2s; -webkit-transition-delay: 0.2s; } .search-popup__form { position: relative; } .search-popup__form input[type=search], .search-popup__form input[type=text] { width: 100%; background-color: var(--solinom-white, #fff); font-size: 15px; color: var(--solinom-text, #101D22); border: none; outline: none; height: 66px; padding-right: 30px; } .search-popup__form .solinom-btn { padding: 0; width: 66px; height: 66px; display: flex; justify-content: center; align-items: center; text-align: center; position: absolute; top: 0; left: -1px; border-radius: 0; font-size: 23px; } .search-popup__form .solinom-btn i { margin: 0; } .search-popup__form .solinom-btn::after { background-color: var(--solinom-black, #000); } .search-popup.active { z-index: 9999; } .search-popup.active .search-popup__overlay { top: auto; bottom: calc(90px - 112vw); -webkit-transform: scale(1); -khtml-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); transition-delay: 0s; -webkit-transition-delay: 0s; opacity: 0.9; -webkit-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); -khtml-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); -moz-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); -ms-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); -o-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1); } @media (max-width: 767px) { .search-popup.active .search-popup__overlay { position: absolute; top: 0; right: 0; left: 0; bottom: 0; transform: none; width: 100%; height: 100%; border-radius: 0; transform: translateY(0%); } } .search-popup.active .search-popup__content { width: 100%; opacity: 1; transition-delay: 0.7s; -webkit-transition-delay: 0.7s; } /*-------------------------------------------------------------- # Page Header --------------------------------------------------------------*/ .page-header { background-color: var(--solinom-gray, #1C2F36); position: relative; padding-top: 160px; padding-bottom: 160px; } @media (max-width: 991px) { .page-header { padding-top: 140px; padding-bottom: 140px; } } @media (max-width: 767px) { .page-header { padding-top: 120px; padding-bottom: 120px; } } .page-header__bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat; background-size: cover; } .page-header__bg::after { position: absolute; width: 100%; height: 100%; content: ""; top: 0; right: 0; background: linear-gradient(-180deg, rgba(16, 29, 34, 0.86) 6.24%, #101D22 79.77%); opacity: 0.6; } .page-header .container { position: relative; z-index: 10; text-align: center; } .page-header__shape { margin-bottom: 8px; } .page-header__title { margin: 0; color: var(--solinom-white, #fff); text-transform: capitalize; font-style: normal; font-weight: 600; font-size: 40px; line-height: 118%; margin-bottom: 3px; padding-bottom: 0; } .solinom-breadcrumb { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0; } .solinom-breadcrumb li { font-size: 14px; color: #fff; text-transform: uppercase; display: flex; align-items: center; } .solinom-breadcrumb li:not(:last-of-type)::after { content: "/"; position: relative; top: 0px; margin-right: 10px; margin-left: 10px; } .solinom-breadcrumb li span, .solinom-breadcrumb li a { color: inherit; display: inline-flex; line-height: 1em; font-weight: 600; } .solinom-breadcrumb li a:hover { color: var(--solinom-base, #CBA36B); } /*-------------------------------------------------------------- # Google Map --------------------------------------------------------------*/ .google-map { position: relative; } .google-map iframe { position: relative; display: block; border: none; height: 301px; width: 100%; mix-blend-mode: luminosity; } .google-map__contact { overflow: hidden; background-color: #FAF5EE; } .contact-map { position: relative; } .contact-map .container-fluid { padding-right: 0; padding-left: 0; max-width: 1654px; } /*-------------------------------------------------------------- # Client Carousel --------------------------------------------------------------*/ .client-carousel { padding: 80px 0; } @media (min-width: 992px) { .client-carousel { padding: 102px 0; } } .client-carousel__one__item { display: flex; align-items: center; justify-content: center; transition: all 500ms ease; position: relative; background-color: transparent; height: 40px; } .client-carousel__one__item img { transition: all 500ms ease; max-width: 100%; width: auto !important; cursor: pointer; } .client-carousel__one__item:hover .client-carousel__one__hover-image { position: absolute; z-index: 1; top: 0; right: 0; left: 0; margin: auto; display: block; visibility: visible; opacity: 1; } .client-carousel__one__item:hover .client-carousel__one__image { visibility: hidden; opacity: 0; transform: translateY(100%); transition: all 0.5s ease-in-out; } .client-carousel__one__hover-image { transition: all 500ms ease; display: block; position: absolute; z-index: 1; top: 10%; right: 0; left: 0; margin: auto; visibility: hidden; opacity: 0; } .client-carousel__one__image { transition: 500ms; max-width: 122px; width: auto; transition: all 500ms ease; } .client-carousel .client-carousel__two .client-carousel__one__item { background-color: transparent; padding: 30px 10px; } .client-carousel .client-carousel__two .client-carousel__one__item .client-carousel__one__hover-image { top: 25%; } .client-carousel .client-carousel__two .client-carousel__one__item:hover { background-color: var(--solinom-gray, #1C2F36); } .client-carousel .client-carousel__two .client-carousel__one__item:hover .client-carousel__one__hover-image { visibility: visible; opacity: 1; } .client-carousel .client-carousel__two .client-carousel__one__item:hover .client-carousel__one__image { transform: translateY(0%); } .client-four { position: relative; z-index: 1; background-color: var(--solinom-border-color, #FAF6F0); } .client-four::after { content: ""; position: absolute; width: 100%; height: 1px; right: 0; bottom: 0; background-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.15); } .client-carousel--one { position: relative; background-color: var(--solinom-text-dark, #15262C); } /*-------------------------------------------------------------- # Hero Slider --------------------------------------------------------------*/ .banner-form { position: relative; padding: 0; position: relative; z-index: 2; } .banner-form__wrapper { position: relative; background-color: var(--solinom-white, #fff); box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1); } .banner-form .row { --bs-gutter-x: 0; } .banner-form .row > * { padding-right: 0; padding-left: 0; } .banner-form .col-lg-2 { width: 21.5%; } @media (max-width: 991px) { .banner-form .col-lg-2 { width: 50%; } } @media (max-width: 767px) { .banner-form .col-lg-2 { width: 100%; } } .banner-form .col-lg-3 { width: 21.5%; } @media (max-width: 991px) { .banner-form .col-lg-3 { width: 50%; } } @media (max-width: 767px) { .banner-form .col-lg-3 { width: 100%; } } .banner-form .col-lg-1 { width: 13.9%; } @media (max-width: 991px) { .banner-form .col-lg-1 { width: 100%; } } @media (max-width: 767px) { .banner-form .col-lg-1 { width: 100%; } } .banner-form__control { position: relative; padding: 30px 30px; border-left: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.1); } @media (max-width: 767px) { .banner-form__control { border-left: none; } } .banner-form__control .nice-select { display: none; } .banner-form__control label { display: block; cursor: pointer; text-transform: uppercase; margin: 0 0 0; font-style: normal; font-weight: 500; font-size: 10px; line-height: 230%; color: var(--solinom-text-gray, #7D8B90); } .banner-form__control .bootstrap-select > .dropdown-toggle, .banner-form__control input[type=text], .banner-form__control input[type=number], .banner-form__control input[type=email] { display: block; width: 100%; background-color: transparent; color: var(--solinom-text, #101D22); text-transform: capitalize; border: none; outline: none; padding: 0; font-style: normal; font-weight: 500; font-size: 14px; line-height: 1; } .banner-form__control .bootstrap-select > .dropdown-toggle::placeholder, .banner-form__control input[type=text]::placeholder, .banner-form__control input[type=number]::placeholder, .banner-form__control input[type=email]::placeholder { font-weight: 500; font-size: 14px; line-height: 1; color: var(--solinom-text, #101D22); } .banner-form__control i { position: absolute; left: 30px; top: 0; bottom: 0; display: flex; align-items: center; line-height: 1; font-size: 18px; color: var(--solinom-text-gray, #7D8B90); } @media (max-width: 1199px) { .banner-form__control i { left: 15px; } } .banner-form__control .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 100%; height: 20px; display: flex; align-items: center; } .banner-form__control .bootstrap-select > .dropdown-toggle { padding: 0; background-color: transparent; border-radius: 0; border: none; outline: none !important; color: var(--solinom-text, #101D22); font-size: 16px; font-weight: 500; text-transform: capitalize; font-family: var(--solinom-font, "Plus Jakarta Sans", sans-serif); } .banner-form__control .bootstrap-select > .dropdown-toggle { display: flex; align-items: center; } .banner-form__control .bootstrap-select > .dropdown-toggle .filter-option { display: block; } .banner-form__control .bootstrap-select > .dropdown-toggle:before, .banner-form__control .bootstrap-select > .dropdown-toggle::after { display: none; } .banner-form__control .bootstrap-select .dropdown-menu { border: none; right: -30px !important; } @media (max-width: 991px) { .banner-form__control .bootstrap-select .dropdown-menu { right: -25px !important; } } .banner-form__control .bootstrap-select .dropdown-menu .dropdown-menu { padding-top: 0; max-height: 200px; } .banner-form__control .bootstrap-select .dropdown-menu > li + li > a { border-top: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.1); } .banner-form__control .bootstrap-select .dropdown-menu > li > a { font-size: 14px; font-weight: 500; padding: 10px 30px; color: var(--solinom-text, #101D22); background-color: var(--solinom-border-color, #FAF6F0); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .banner-form__control .bootstrap-select .dropdown-menu > li:hover > a, .banner-form__control .bootstrap-select .dropdown-menu > li.selected > a { background: var(--solinom-gray, #1C2F36); color: var(--solinom-white, #fff); border-color: var(--solinom-gray, #1C2F36); } .banner-form__popup { display: flex; align-items: center; justify-content: center; } .banner-form__popup button { padding-top: 30px; padding-bottom: 30px; font-size: 20px; background-color: var(--solinom-white, #fff); color: var(--solinom-text-gray, #7D8B90); } .banner-form__popup button:hover { color: var(--solinom-white, #fff); } .banner-form__popup button:last-child { font-size: 25px; padding-top: 38.7px; padding-bottom: 37.7px; margin-left: -2px; line-height: 1; background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .banner-form__popup button:last-child:hover { color: var(--solinom-text-gray, #7D8B90); } .banner-form__popup button:last-child::after { background-color: var(--solinom-text-dark, #15262C); } @media (max-width: 991px) { .banner-form__popup { justify-content: end; } .banner-form__popup button:last-child { margin-left: 0px; } } .banner-form .sub { display: flex; align-items: center; position: absolute; left: 65px; top: 0; bottom: 0; margin: auto; background: transparent; border: none; outline: none; padding: 0; margin: 0; } @media (max-width: 1199px) { .banner-form .sub { left: 50px; } } .banner-form .sub i { position: relative; width: 20px; height: 20px; background-color: var(--solinom-text-gray, #7D8B90); left: 0; font-size: 12px; justify-content: center; cursor: pointer; transition: all 500ms ease; color: var(--solinom-white, #fff); } .banner-form .sub i:hover { color: var(--solinom-base, #CBA36B); background-color: var(--solinom-text, #101D22); } .banner-form .add { display: flex; align-items: center; position: absolute; left: 38px; top: 0; bottom: 0; margin: auto; background: transparent; border: none; outline: none; padding: 0; margin: 0; } @media (max-width: 1199px) { .banner-form .add { left: 23px; } } .banner-form .add i { position: relative; width: 20px; height: 20px; background-color: var(--solinom-text-gray, #7D8B90); left: 0; font-size: 12px; justify-content: center; cursor: pointer; transition: all 500ms ease; color: var(--solinom-white, #fff); } .banner-form .add i:hover { color: var(--solinom-base, #CBA36B); background-color: var(--solinom-text, #101D22); } .banner-form .explore__form-checkbox-list { padding: 20px 50px 50px; position: absolute; display: none; top: 102px; background-color: var(--solinom-white, #fff); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; z-index: 2; } @media (max-width: 991px) { .banner-form .explore__form-checkbox-list { top: 286px; } } @media (max-width: 767px) { .banner-form .explore__form-checkbox-list { top: 468px; } } @media (max-width: 575px) { .banner-form .explore__form-checkbox-list { padding: 20px 30px 30px; } } .banner-form .checkboxes { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); } @media (max-width: 767px) { .banner-form .checkboxes { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .banner-form .checkboxes { grid-template-columns: repeat(1, 1fr); } } .banner-form .checkboxes input[type=checkbox] { display: none; } .banner-form .checkboxes label { position: relative; line-height: normal; display: flex; cursor: pointer; position: relative; padding-right: 28px; margin-left: 20px; margin-bottom: 0; color: var(--solinom-text, #101D22); font-size: 16px; margin-top: 10px; } .banner-form .checkboxes label::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 10px; position: absolute; right: 0; top: 3px; background-color: var(--solinom-white, #fff); border: 1px solid var(--solinom-gray2, #283E46); border-radius: 2px; box-sizing: border-box; transition: border-color 0.3s; } .banner-form .checkboxes label::after { content: "\f00c"; color: var(--solinom-white, #fff); position: absolute; right: 0; bottom: 2px; border-radius: 2px; left: 0; line-height: 16px; display: inline-block; font-family: "Font Awesome 5 Free"; font-size: 10px; font-weight: 700; transition: all 0.15s ease-in-out; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-base, #CBA36B); opacity: 0; } .banner-form .checkboxes label:first-child { margin-top: 0; } .banner-form .checkboxes input[type=checkbox]:checked + label:after { opacity: 1; } .banner-form .bedroom-filter { margin-bottom: 40px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px 40px; } @media (max-width: 767px) { .banner-form .bedroom-filter { grid-template-columns: repeat(2, 1fr); gap: 20px 30px; } } @media (max-width: 575px) { .banner-form .bedroom-filter { grid-template-columns: repeat(1, 1fr); } } .banner-form .bedroom-filter .box-select { display: flex; align-items: start; justify-content: start; flex-direction: column; } .banner-form .bedroom-filter .box-select button { outline: none !important; border: 1px solid var(--solinom-text-gray, #7D8B90); background-color: transparent; padding: 12px 25px 12px 15px; } .banner-form .bedroom-filter .box-select button:focus { outline: none !important; border: none; } .banner-form .bedroom-filter .box-select button::after { display: inline-block; margin-right: auto; vertical-align: auto; font-size: 10px; content: "\e933"; font-family: "icomoon" !important; color: var(--solinom-text-gray, #7D8B90); font-weight: 600; border-top: 0; border-left: 0em solid transparent; border-bottom: 0em solid; border-right: 0em solid transparent; } .banner-form .bedroom-filter .box-select .bootstrap-select .dropdown-toggle:focus, .banner-form .bedroom-filter .box-select .bootstrap-select > select.mobile-device:focus + .dropdown-toggle { outline: none; border: 1px solid var(--solinom-text-gray, #7D8B90); } .banner-form .bedroom-filter .title-select { font-size: 16px; font-weight: 600; color: var(--solinom-text-gray, #7D8B90); text-transform: capitalize; } .banner-form .bedroom-filter .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { display: flex; width: 100%; height: 50px; } .banner-form .bedroom-filter .btn:hover { background-color: transparent; } .banner-form .bedroom-filter .dropdown-item:focus, .banner-form .bedroom-filter .dropdown-item:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .banner-form .price-ranger { margin-bottom: 30px; } .banner-form .price-ranger #slider-range { margin: 15px 0px 23px 0; background: var(--solinom-border-color, #FAF6F0); border: none; height: 8px; border-radius: 0px; position: relative; } .banner-form .price-ranger #slider-range .ui-slider-range { height: 100%; background: var(--solinom-base, #CBA36B); } .banner-form .price-ranger #slider-range .ui-slider-handle { position: absolute; top: -5px; background: var(--solinom-base, #CBA36B); border: 0; height: 16px; width: 14px !important; border-radius: 0; margin-right: -3px; outline: medium none; cursor: pointer; z-index: 2; } .banner-form .price-ranger .ranger-min-max-block { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 18px 0px 0 0; } .banner-form .price-ranger .ranger-min-max-block input[type=text] { position: relative; display: inline-block; color: var(--solinom-text, #101D22); width: 60px; border: none; outline: none; padding: 0; text-align: center; background-color: transparent; font-size: 16px; font-weight: 500; line-height: normal; } .banner-form .price-ranger .ranger-min-max-block span { position: relative; display: inline-block; color: var(--solinom-text, #101D22); font-size: 16px; font-weight: 500; right: -2px; } .banner-form__element { position: absolute; top: 15px; right: 15px; z-index: -1; } .banner-form__element img { object-fit: cover; width: 100%; } @media (max-width: 1199px) { .banner-form__element { display: none; } } .banner-form-top { position: relative; margin-top: -50px; } .main-slider-one { position: relative; background-color: var(--solinom-text-dark, #15262C); padding-top: 100px; padding-bottom: 100px; } @media (max-width: 1600px) { .main-slider-one { padding-top: 50px; padding-bottom: 50px; } } @media (max-width: 1199px) { .main-slider-one { padding-top: 0px; padding-bottom: 0px; } } .main-slider-one .container { max-width: 1530px; margin-right: auto; margin-left: auto; } .main-slider-one .banner-form { position: absolute; right: 0; left: 0; bottom: 255px; z-index: 2; margin: 0 auto; padding: 0 0 0; max-width: 1200px; } .main-slider-one .banner-form .container { max-width: 1200px; width: 100%; margin-right: auto; margin-left: auto; } @media (max-width: 1199px) { .main-slider-one .banner-form { bottom: 150px; } } @media (max-width: 991px) { .main-slider-one .banner-form { bottom: 0px; position: relative; } } .main-slider-one__element-one { position: absolute; top: 0; right: 4%; left: 4%; transform: translateX(6.9%); } @media (max-width: 1600px) { .main-slider-one__element-one { right: 0%; left: 0%; transform: translateX(0%); } } .main-slider-one__element-one img { object-fit: cover; width: 100%; } @media (max-width: 1199px) { .main-slider-one__element-one { display: none; } } .main-slider-one__element-two { position: absolute; bottom: 0; right: 4%; left: 4%; transform: translateX(6.9%); } @media (max-width: 1600px) { .main-slider-one__element-two { right: 0%; left: 0%; transform: translateX(0%); } } .main-slider-one__element-two img { object-fit: cover; width: 100%; } @media (max-width: 1199px) { .main-slider-one__element-two { display: none; } } .main-slider-one__item { position: relative; z-index: 3; height: 745px; width: 100%; padding-top: 200px; } @media (max-width: 991px) { .main-slider-one__item { padding-top: 150px; padding-bottom: 100px; height: auto; } } .main-slider-one__bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center; transition: transform 1000ms ease, opacity 1000ms ease; transform: translateX(-50%) scaleX(2); opacity: 0; } .main-slider-one__bg::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background: linear-gradient(-180deg, rgba(203, 163, 107, 0.8) -10.46%, rgba(21, 38, 44, 0.8) 44.66%); mix-blend-mode: normal; } .main-slider-one__content { position: relative; display: inline-block; z-index: 3; overflow: hidden; } .main-slider-one__sub-title { color: var(--solinom-white, #fff); margin: 0 0 -7px; font-style: normal; font-weight: 500; font-size: 16px; line-height: 100%; background-color: var(--solinom-base, #CBA36B); padding: 10px 15px; letter-spacing: 0.11em; text-transform: uppercase; display: inline-block; transition: transform 1000ms ease, opacity 1000ms ease; transform: translateY(-200px); opacity: 0; } .main-slider-one__title { color: var(--solinom-white, #fff); text-transform: uppercase; overflow: hidden; margin: 0 0 17px; font-style: normal; font-weight: 300; font-size: 70px; line-height: 139%; margin-bottom: 0; padding-bottom: 0; transition: transform 1200ms ease, opacity 1200ms ease; transform: translateX(-200px); opacity: 0; } @media (max-width: 991px) { .main-slider-one__title { font-size: 60px; } } @media (max-width: 575px) { .main-slider-one__title { font-size: 50px; } } .main-slider-one__title span { font-weight: 700; } .main-slider-one .active .main-slider-one__sub-title { opacity: 1; transform: translateY(0); transition-delay: 1100ms; } .main-slider-one .active .main-slider-one__title { opacity: 1; transform: translateX(0); transition-delay: 1300ms; } .main-slider-one .active .main-slider-one__bg { opacity: 1; transform: translateX(0) scaleX(1); filter: blur(0); transition-delay: 1000ms; } .main-slider-two { position: relative; } .main-slider-two .item { background-color: var(--solinom-text-dark, #15262C); position: relative; z-index: 3; padding-top: 102px; padding-bottom: 560px; height: 933px; } @media (max-width: 991px) { .main-slider-two .item { height: auto; padding-top: 102px; padding-bottom: 120px; } } @media (max-width: 767px) { .main-slider-two .item { height: auto; padding-top: 102px; padding-bottom: 90px; } } .main-slider-two__bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; transition: transform 1000ms ease, opacity 1000ms ease; transform: translateX(-50%) scaleX(2); } .main-slider-two__bg::before { position: absolute; right: 0; top: 0; width: 100%; height: 100%; content: ""; z-index: 1; background: linear-gradient(-180deg, rgba(16, 29, 34, 0.86) 6.24%, #101D22 79.77%); opacity: 0.8; } .main-slider-two__content { position: relative; z-index: 3; overflow: hidden; } .main-slider-two__title { position: relative; color: var(--solinom-white, #fff); text-transform: uppercase; display: block; overflow: hidden; margin: 0 0 24px; font-style: normal; font-weight: 700; font-size: 65px; line-height: 120%; z-index: 1; opacity: 0; transition: transform 1200ms ease, opacity 1200ms ease; transform: translateY(200px); } .main-slider-two__title span { font-weight: 400; color: var(--solinom-base, #CBA36B); } .main-slider-two__title img { position: absolute; top: 0; z-index: -1; right: 0; animation: opesityIn 6s ease-in-out infinite; } @media (max-width: 991px) { .main-slider-two__title { font-size: 60px; } } @media (max-width: 767px) { .main-slider-two__title { font-size: 45px; line-height: 100%; } } @media (max-width: 575px) { .main-slider-two__title { font-size: 40px; line-height: 80%; } } .main-slider-two .active .main-slider-two__bg { opacity: 1; transform: translateX(0) scaleX(1); } .main-slider-two .active .main-slider-two__title { opacity: 1; transform: translateY(0); transition-delay: 1300ms; } .main-slider-two .banner-form { position: absolute; right: 0; left: 0; bottom: 312px; z-index: 3; margin: 0 auto; padding: 47.5px 55px; background-color: var(--solinom-text, #101D22); max-width: 1292px; } @media (max-width: 991px) { .main-slider-two .banner-form { position: relative; padding: 0; background-color: var(--solinom-text-dark, #15262C); bottom: 0px; } } .main-slider-two .banner-form .container { max-width: 1200px; width: 100%; margin-right: auto; margin-left: auto; } .main-slider-two .banner-form .banner-form__wrapper { background-color: var(--solinom-gray2, #283E46); } .main-slider-two .banner-form input[type=text], .main-slider-two .banner-form input[type=number], .main-slider-two .banner-form input[type=email], .main-slider-two .banner-form .bootstrap-select > .dropdown-toggle { color: var(--solinom-white, #fff); } .main-slider-two .banner-form input[type=text]::placeholder, .main-slider-two .banner-form input[type=number]::placeholder, .main-slider-two .banner-form input[type=email]::placeholder, .main-slider-two .banner-form .bootstrap-select > .dropdown-toggle::placeholder { color: var(--solinom-white, #fff); } .main-slider-two .banner-form .banner-form__control { border-color: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.1); } .main-slider-two .banner-form .explore__form-checkbox-list { background-color: var(--solinom-gray2, #283E46); } .main-slider-two .banner-form .price-ranger .ranger-min-max-block span, .main-slider-two .banner-form .price-ranger .ranger-min-max-block input[type=text], .main-slider-two .banner-form .banner-form__popup__title, .main-slider-two .banner-form .checkboxes label { color: var(--solinom-white, #fff); } .main-slider-two .banner-form .checkboxes label::before { background-color: var(--solinom-gray2, #283E46); border-color: var(--solinom-white, #fff); } .main-slider-two .banner-form .banner-form__popup button { background-color: var(--solinom-gray2, #283E46); } .main-slider-two .banner-form .banner-form__popup button:last-child { background-color: var(--solinom-base, #CBA36B); } .main-slider-three { position: relative; background-color: var(--solinom-border-color, #FAF6F0); } .main-slider-three__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center center; mix-blend-mode: luminosity; overflow: hidden; transform: scale(1); transition: transform 10000ms ease, -webkit-transform 10000ms ease; opacity: 0.08; } .main-slider-three__item { position: relative; overflow: hidden; position: relative; height: 762px; } @media (max-width: 991px) { .main-slider-three__item { height: auto; } } .main-slider-three__content { position: relative; z-index: 3; padding-top: 140px; } @media (max-width: 991px) { .main-slider-three__content { padding-top: 120px; padding-bottom: 120px; } } .main-slider-three__sub-title { color: var(--solinom-white, #fff); margin: 0 0 14px; font-style: normal; font-weight: 500; font-size: 16px; line-height: 100%; background-color: var(--solinom-base, #CBA36B); padding: 10px 15px; letter-spacing: 0.11em; text-transform: uppercase; display: inline-block; transition: transform 1000ms ease, opacity 1000ms ease; transform: translateY(-200px); opacity: 0; } .main-slider-three__title { color: var(--solinom-gray, #1C2F36); text-transform: uppercase; overflow: hidden; margin: 0 0 17px; font-style: normal; margin-bottom: 0; padding-bottom: 0; font-style: normal; font-weight: 800; font-size: 60px; line-height: 76px; transition: transform 1200ms ease, opacity 1200ms ease; transform: translateY(200px); opacity: 0; } .main-slider-three__title span { font-weight: 400; } @media (max-width: 991px) { .main-slider-three__title { font-size: 55px; } } @media (max-width: 767px) { .main-slider-three__title { font-size: 50px; line-height: 120%; } } @media (max-width: 575px) { .main-slider-three__title { font-size: 45px; } } .main-slider-three__thumb { position: absolute; top: 0; left: 0; width: 40.8%; overflow: hidden; transition: transform 1000ms ease, opacity 1000ms ease; transform: translateX(-50%) scale(0.5, 0.5); opacity: 0; } @media (max-width: 991px) { .main-slider-three__thumb { display: none; } } .main-slider-three__thumb img { object-fit: cover; } @media (max-width: 1550px) { .main-slider-three__thumb { width: 38%; } } .main-slider-three__video { position: absolute; top: 20%; left: -30px; border-radius: 50%; transition: transform 1000ms ease, opacity 1000ms ease; transform: translateY(-200%) scale(0.5, 0.5); } @media (max-width: 991px) { .main-slider-three__video { display: none; } } .main-slider-three__video a { position: relative; z-index: 2; width: 75px; height: 75px; border-radius: 50%; background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); font-size: 20px; display: flex; align-items: center; justify-content: center; } .main-slider-three__video a .ripple { position: absolute; top: 50%; right: 50%; width: 100%; height: 100%; transform: translate(50%, -50%); box-shadow: 0 0 0 0 rgba(var(--solinom-white-rgb, 255, 255, 255), 0.55); animation: ripple 3s infinite; border-radius: 50%; } .main-slider-three__video a .ripple::before, .main-slider-three__video a .ripple::after { position: absolute; top: 50%; right: 50%; width: 100%; height: 100%; transform: translate(50%, -50%); box-shadow: 0 0 0 0 rgba(var(--solinom-white-rgb, 255, 255, 255), 0.45); animation: ripple 3s infinite; border-radius: 50%; } .main-slider-three__video a .ripple::before { animation-delay: 0.9s; content: ""; position: absolute; } .main-slider-three__video a .ripple::after { animation-delay: 0.6s; content: ""; position: absolute; } .main-slider-three .banner-form { position: absolute; right: 0; left: 0; bottom: 215px; z-index: 3; margin: 0 auto; padding: 0 0 0; max-width: 1200px; } .main-slider-three .banner-form .container { max-width: 1200px; width: 100%; margin-right: auto; margin-left: auto; } @media (max-width: 991px) { .main-slider-three .banner-form { position: relative; bottom: 0; } } .main-slider-three__thumb-carousel { position: relative; margin-top: -190px; z-index: 2; } @media (max-width: 991px) { .main-slider-three__thumb-carousel { display: none; margin-top: 0px; } } .main-slider-three__thumb__carousel { margin-left: 20px; } .main-slider-three__thumb__carousel .slick-slide { text-align: center; margin-left: 10px; margin-right: 10px; } .main-slider-three__thumb__item img { object-fit: cover; width: 100%; min-height: 190px; } .main-slider-three .slick-active .main-slider-three__sub-title { opacity: 1; transform: translateY(0); transition-delay: 1100ms; } .main-slider-three .slick-active .main-slider-three__title { opacity: 1; transform: translateY(0); transition-delay: 1300ms; } .main-slider-three .slick-active .main-slider-three__bg { transform: scale(1.15); } .main-slider-three .slick-active .main-slider-three__thumb { opacity: 1; transform: translateX(0) scale(1, 1); transition-delay: 1000ms; } .main-slider-three .slick-active .main-slider-three__video { transform: translateY(0%) scale(1, 1); transition-delay: 1300ms; } @media (max-width: 991px) { .main-slider-three .slick-active .main-slider-three__video { opacity: 1; transform: translateY(0%) scale(1, 1); } } .main-slider-four { position: relative; } .main-slider-four__inner { height: 930px; width: 100%; position: relative; z-index: 1; overflow: hidden; background-color: var(--solinom-border-color, #FAF6F0); } .main-slider-four__inner::after { background-color: var(--solinom-gray, #1C2F36); position: absolute; content: ""; width: 480px; left: 0; height: 100%; top: 0; z-index: -2; } @media (max-width: 991px) { .main-slider-four__inner { height: auto; } } .main-slider-four__element { position: absolute; bottom: 0; right: 0; z-index: -2; animation: left-to-right-two 5s ease-in-out infinite; } .main-slider-four__element-two { position: absolute; left: 0; top: 0; z-index: -1; animation: opesity 5s ease-in-out infinite; } .main-slider-four__content { margin-left: -20px; padding-top: 200px; position: absolute; z-index: 1; } @media (max-width: 991px) { .main-slider-four__content { position: relative; padding-top: 130px; padding-bottom: 100px; } } .main-slider-four__sub-title { color: var(--solinom-white, #fff); margin: 0 0 0px; font-style: normal; font-weight: 500; font-size: 16px; line-height: 100%; background-color: var(--solinom-text-gray, #7D8B90); padding: 10px 15px; letter-spacing: 0.11em; text-transform: uppercase; display: inline-block; margin-right: 60px; } .main-slider-four__box { padding: 45px 55px 35px; background-color: var(--solinom-white, #fff); } @media (max-width: 991px) { .main-slider-four__box { padding: 30px; } } .main-slider-four__title { color: var(--solinom-gray, #1C2F36); text-transform: uppercase; overflow: hidden; margin: 0 0 17px; font-style: normal; margin-bottom: 0; padding-bottom: 0; font-style: normal; font-weight: 800; font-size: 60px; line-height: 76px; } .main-slider-four__title span { font-weight: 400; display: block; color: var(--solinom-base, #CBA36B); } @media (max-width: 991px) { .main-slider-four__title { font-size: 50px; } } @media (max-width: 767px) { .main-slider-four__title { font-size: 45px; line-height: 120%; } } @media (max-width: 575px) { .main-slider-four__title { font-size: 40px; } } .main-slider-four .banner-form { position: absolute; right: 0; left: 0; top: 580px; z-index: 4; margin: 0 auto; padding: 0 0 0; max-width: 1200px; } .main-slider-four .banner-form .container { max-width: 1200px; width: 100%; margin-right: auto; margin-left: auto; } @media (max-width: 1199px) { .main-slider-four .banner-form { top: 580px; } } @media (max-width: 991px) { .main-slider-four .banner-form { top: auto; position: relative; } } .main-slider-four__carousel { position: relative; padding-top: 100px; padding-bottom: 100px; left: -330px; } @media (max-width: 991px) { .main-slider-four__carousel { display: none; } } .main-slider-four__carousel-inner { position: relative; top: 100px; bottom: 100px; width: 140%; height: 100%; left: 0%; } /*-------------------------------------------------------------- # Feature Section --------------------------------------------------------------*/ /***Feature One***/ .feature-one { padding-bottom: 120px; } @media (max-width: 991px) { .feature-one { padding-bottom: 100px; } } @media (max-width: 767px) { .feature-one { padding-bottom: 80px; } } /***Feature Card Two***/ .feature-two__item { padding: 30px; box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.06); border-radius: 1000px 1000px 0px 0px; position: relative; z-index: 1; overflow: hidden; background-color: var(--solinom-white, #fff); } .feature-two__item--two { border-radius: 0px 0px 1000px 1000px; } .feature-two__item--two .feature-two__item__icon { margin-bottom: 0; margin-top: 20px; } .feature-two__item--two .feature-two__item__content { margin-top: -6px; } .feature-two__item__bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat; background-size: cover; z-index: -1; transform: scale(1.1); opacity: 0; visibility: hidden; transition: all 0.4s ease-in-out; } .feature-two__item__bg::after { position: absolute; width: 100%; height: 100%; content: ""; top: 0; right: 0; background-color: var(--solinom-text-dark, #15262C); opacity: 0; transition: all 0.6s ease-in-out; } .feature-two__item__icon { width: 115px; height: 115px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: auto; font-size: 42px; margin-left: auto; border: 10px solid var(--solinom-text, #101D22); background-color: var(--solinom-gray, #1C2F36); color: var(--solinom-base, #CBA36B); margin-bottom: 14px; transition: all 0.4s ease-in-out; } .feature-two__item__content { text-align: center; } .feature-two__item__title { font-style: normal; font-weight: 700; font-size: 20px; line-height: 25px; text-align: center; text-transform: capitalize; margin-bottom: 10px; padding-bottom: 0; transition: all 0.6s ease-in-out; } .feature-two__item__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 20px; padding-bottom: 0; max-width: 300px; width: 100%; margin-right: auto; margin-left: auto; } .feature-two__item .solinom-btn { padding: 9px 20px; font-style: normal; font-weight: 500; font-size: 14px; line-height: 171%; } .feature-two__item .solinom-btn::after { background-color: var(--solinom-gray2, #283E46); } .feature-two__item__element { position: absolute; bottom: 0; right: 0; } .feature-two__item__element-two { position: absolute; bottom: 0; left: 0; } .feature-two__item__element-three { position: absolute; top: 0; right: 0; } .feature-two__item__element-fore { position: absolute; top: 0; left: 0; } .feature-two__item:hover .feature-two__item__bg { opacity: 1; visibility: visible; transform: scale(1); } .feature-two__item:hover .feature-two__item__bg::after { opacity: 0.9; } .feature-two__item:hover .feature-two__item__title { color: var(--solinom-white, #fff); } .feature-two__item:hover .feature-two__item__icon { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); border-color: var(--solinom-gray2, #283E46); } .feature-two__item:hover .feature-two__item__icon i { animation: bounceIn 1s linear; } /***Feature Two***/ .feature-two { position: relative; padding: 120px 0px 0px; } @media (max-width: 991px) { .feature-two { padding: 100px 0px 0px; } } @media (max-width: 768px) { .feature-two { padding: 80px 0px 0px; } } .feature-two--three { padding: 120px 0px; } @media (max-width: 991px) { .feature-two--three { padding: 100px 0px; } } @media (max-width: 768px) { .feature-two--three { padding: 80px 0px; } } .feature-two::after { content: ""; width: 100%; height: 480px; position: absolute; top: 0; right: 0; background-color: var(--solinom-border-color, #FAF6F0); z-index: -1; } /***Feature Three***/ .feature-three { background-color: var(--solinom-text-dark, #15262C); position: relative; padding: 120px 0px; } @media (max-width: 991px) { .feature-three { padding: 100px 0px; } } @media (max-width: 768px) { .feature-three { padding: 80px 0px; } } .feature-three__item { background-color: var(--solinom-gray, #1C2F36); padding: 50px 30px 40px; position: relative; z-index: 1; } .feature-three__item__icon { max-width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-gray, #1C2F36); color: var(--solinom-base, #CBA36B); position: relative; font-size: 42px; margin-bottom: 40px; margin-right: 11px; transition: all 0.4s ease-in-out; } .feature-three__item__icon__element { position: absolute; top: -14px; right: -11.5px; } .feature-three__item__title { font-style: normal; font-weight: 600; font-size: 20px; line-height: 25px; margin-bottom: 18px; padding-bottom: 0; color: var(--solinom-white, #fff); text-transform: capitalize; } .feature-three__item__title a { color: inherit; } .feature-three__item__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 20px; padding-bottom: 0; } .feature-three__item .solinom-btn { background-color: var(--solinom-text-dark, #15262C); padding: 7px 20px; font-size: 14px; } .feature-three__item .solinom-btn i { margin-right: 10px; font-size: 14px; } .feature-three__item .solinom-btn:hover { color: var(--solinom-white, #fff); } .feature-three__item__element-top { position: absolute; bottom: 0; left: 0; opacity: 1; visibility: visible; transition: all 0.4s ease-in-out; z-index: -1; } .feature-three__item__element-bottom { position: absolute; top: 0; left: 0; opacity: 1; visibility: visible; transition: all 0.4s ease-in-out; z-index: -1; } .feature-three__item__element-hover { position: absolute; top: -15px; right: -20px; opacity: 0; visibility: hidden; transition: all 0.4s ease-in-out; z-index: -1; } @media (max-width: 991px) { .feature-three__item__element-hover { display: none; } } .feature-three__item:hover .feature-three__item__element-top, .feature-three__item:hover .feature-three__item__element-bottom { opacity: 0; visibility: hidden; } .feature-three__item:hover .feature-three__item__element-hover { opacity: 1; visibility: visible; } .feature-three__item:hover .feature-three__item__icon { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .feature-three__item:hover .feature-three__item__icon i { animation: bounceIn 1s linear; } .feature-three__item:hover .feature-three__item__icon__element { animation: rotated 10s infinite linear; } /***Feature Fore***/ .feature-four { position: relative; padding: 120px 0px; } @media (max-width: 991px) { .feature-four { padding: 100px 0px; } } @media (max-width: 768px) { .feature-four { padding: 80px 0px; } } .feature-four .sec-title__title { color: var(--solinom-white, #fff); } .feature-four__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } .feature-four__bg::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background-color: var(--solinom-gray, #1C2F36); opacity: 0.8; } .feature-four__item { margin: 13px 0px; background-color: rgba(var(--solinom-gray-rgb, 28, 47, 54), 0.6); backdrop-filter: blur(4.25px); position: relative; padding: 30px 20px; text-align: center; z-index: 1; transition: all 0.4s ease-in-out; } .feature-four__item::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background-color: rgba(var(--solinom-base-rgb, 203, 163, 107), 0.6); z-index: -1; transform: rotateX(90deg); transition: transform 0.4s ease-in-out; } .feature-four__item__icon { max-width: 95px; height: 95px; width: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 45px; color: var(--solinom-base, #CBA36B); background-color: var(--solinom-gray2, #283E46); margin-right: auto; margin-left: auto; margin-bottom: 15px; transition: all 0.4s ease-in-out; } .feature-four__item__title { font-style: normal; font-weight: 700; font-size: 20px; line-height: 25px; text-transform: capitalize; color: var(--solinom-base, #CBA36B); transition: all 0.4s ease-in-out; } .feature-four__item__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .feature-four__item__title a:hover { background-size: 100% 1px; } .feature-four__item__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 0; padding-bottom: 20px; transition: all 0.4s ease-in-out; } .feature-four__item__btn { padding: 11px 20px; font-size: 14px; line-height: 140%; background-color: var(--solinom-gray, #1C2F36); } .feature-four__item__btn:hover { color: var(--solinom-white, #fff); } .feature-four__item__element-one { position: absolute; top: -12px; right: 0; line-height: 0; } @media (max-width: 1199px) { .feature-four__item__element-one img { object-fit: cover; width: 100%; } } @media (max-width: 575px) { .feature-four__item__element-one { display: none; } } .feature-four__item__element-two { position: absolute; bottom: -12px; right: 0; line-height: 0; } @media (max-width: 1199px) { .feature-four__item__element-two img { object-fit: cover; width: 100%; } } @media (max-width: 575px) { .feature-four__item__element-two { display: none; } } .feature-four__item:hover { background-color: transparent; } .feature-four__item:hover .feature-four__item__icon { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .feature-four__item:hover .feature-four__item__icon i { animation: bounceIn 1s linear; } .feature-four__item:hover .feature-four__item__title, .feature-four__item:hover .feature-four__item__text { color: var(--solinom-white, #fff); } .feature-four__item:hover::after { transform: rotateX(0deg); } /***Feature Fore Two***/ .feature-four-two { position: relative; } @media (max-width: 991px) { .feature-four-two { padding: 100px 0px; } } @media (max-width: 767px) { .feature-four-two { padding: 80px 0px; } } .feature-four-two__bg { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; z-index: -1; } .feature-four-two__bg::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background-color: var(--solinom-gray, #1C2F36); opacity: 0.9; } .feature-four-two__list { display: flex; margin-bottom: 0; } .feature-four-two__list__item { background-color: var(--solinom-gray2, #283E46); padding: 1px 30px 27px; position: relative; z-index: 1; } .feature-four-two__list__item::after { content: ""; width: 0%; height: 100%; background-color: var(--solinom-base, #CBA36B); position: absolute; top: 0; right: auto; left: 0; z-index: -1; transition: all 0.5s ease-in-out; } .feature-four-two__list__item:hover::after { width: 100%; right: 0; left: auto; } .feature-four-two__list__item:hover .feature-four-two__btn::after { border: 1px solid rgba(var(--solinom-text-rgb, 16, 29, 34), 0.12); } .feature-four-two__list__item:hover .feature-four-two__text { color: var(--solinom-white, #fff); } .feature-four-two__list__item:hover .feature-four-two__btn a { background-color: var(--solinom-gray2, #283E46); } .feature-four-two__list__item:hover .feature-four-two__icon { animation: shake 0.3s linear 2; } @media (max-width: 991px) { .feature-four-two__list__item { z-index: 0; } } .feature-four-two__list__item + .feature-four-two__list__item { border-right: 1px solid rgba(var(--solinom-white-rgb, 255, 255, 255), 0.1); } @media (max-width: 991px) { .feature-four-two__list { flex-direction: column; } } .feature-four-two__icon { margin-top: -26px; position: relative; width: 75px; height: 75px; display: flex; border-radius: 50%; align-items: center; justify-content: center; background-color: var(--solinom-white, #fff); font-size: 34px; color: var(--solinom-base, #CBA36B); margin-bottom: 15px; } @media (max-width: 991px) { .feature-four-two__icon { margin-top: 0; } } .feature-four-two__title { font-style: normal; font-weight: 700; font-size: 20px; line-height: normal; margin-bottom: 7px; padding-bottom: 0; color: var(--solinom-white, #fff); text-transform: capitalize; } .feature-four-two__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .feature-four-two__title a:hover { background-size: 100% 1px; } .feature-four-two__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 10px; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .feature-four-two__btn { position: relative; z-index: 1; } .feature-four-two__btn a { margin-right: auto; margin-left: 0; position: relative; z-index: 1; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-base, #CBA36B); font-size: 10px; color: var(--solinom-white, #fff); overflow: hidden; } .feature-four-two__btn a::before { content: ""; width: 100%; height: 100%; background-color: var(--solinom-white, #fff); position: absolute; top: 0; right: 0; transform: translate(70%, 70%) rotate(-50deg); z-index: -1; transition: all 0.4s ease-in-out; } .feature-four-two__btn a:hover { color: var(--solinom-base, #CBA36B); } .feature-four-two__btn a:hover::before { transform: translate(0%, 0%) rotate(0deg); } .feature-four-two__btn::after { content: ""; width: 100%; height: 12px; background-color: transparent; border: 1px solid rgba(var(--solinom-base-rgb, 203, 163, 107), 0.12); position: absolute; top: 50%; transform: translateY(-50%); right: 0; z-index: -1; transition: all 0.4s ease-in-out; } /***Feature Five***/ .feature-five { position: relative; padding: 120px 0px; background-color: var(--solinom-text-dark, #15262C); border-top: 1px solid rgba(var(--solinom-gray2-rgb, 40, 62, 70), 0.5); z-index: 1; } @media (max-width: 991px) { .feature-five { padding: 100px 0px; } } @media (max-width: 768px) { .feature-five { padding: 80px 0px; } } .feature-five__carousel { position: relative; } @media (max-width: 575px) { .feature-five__carousel .owl-nav { display: none !important; } } .feature-five__carousel .owl-nav button { border: none; outline: none; margin: 0; padding: 0; position: absolute; top: 50%; right: -55px; transform: translateY(-50%); } .feature-five__carousel .owl-nav button span { border: none; outline: none; width: 48px; height: 48px; background-color: var(--solinom-text, #101D22); display: flex; justify-content: center; align-items: center; color: var(--solinom-base, #CBA36B); font-size: 16px; transition: all 500ms ease; } .feature-five__carousel .owl-nav button span:hover { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .feature-five__carousel .owl-nav button:last-child { left: -55px; right: auto; } .feature-five__carousel .center { transition: all 0.4s ease-in-out; transform: translateY(-20px); } @media (max-width: 1199px) { .feature-five__carousel .center { transform: translateY(0px); } } .feature-five__carousel .center .feature-five-card { border-color: var(--solinom-base, #CBA36B); } .feature-five .owl-theme .owl-nav { margin: 0 !important; } .feature-five__shape { position: absolute; right: 0; bottom: 0; width: 100%; height: 60%; background-position: right top; background-repeat: repeat; background-size: auto; z-index: -1; animation: bgSlide 20s linear infinite; mix-blend-mode: overlay; } /***Feature Five Card***/ .feature-five-card { position: relative; background-color: var(--solinom-gray2, #283E46); padding: 30px; border: 1px solid transparent; transition: all 0.4s ease-in-out; } .feature-five-card__inner { background-color: var(--solinom-text-dark, #15262C); position: relative; z-index: 1; } .feature-five-card__thumb { overflow: hidden; position: relative; } .feature-five-card__thumb img { object-fit: cover; width: 100%; transform: scale(1) rotate(0deg); transition: all 0.5s ease-in-out; } .feature-five-card__thumb__popup { position: absolute; top: 10px; left: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; z-index: 1; } .feature-five-card__thumb__popup__love, .feature-five-card__thumb__popup a { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; background-color: var(--solinom-white, #fff); color: var(--solinom-gray2, #283E46); font-size: 12px; cursor: pointer; transition: all 0.4s ease-in-out; } .feature-five-card__thumb__popup__love:hover, .feature-five-card__thumb__popup a:hover { background-color: var(--solinom-text-dark, #15262C); color: var(--solinom-base, #CBA36B); } .feature-five-card__thumb::after { width: 100%; height: 100%; position: absolute; content: ""; top: 0; right: 0; background-color: rgba(var(--solinom-text-rgb, 16, 29, 34), 0.72); visibility: hidden; opacity: 0; transform: translateY(-30%); transition: all 0.5s ease-in-out; } .feature-five-card__feature { background-color: var(--solinom-white, #fff); text-transform: capitalize; color: var(--solinom-gray2, #283E46); padding: 4.5px 11px; position: absolute; top: 20px; right: 20px; margin-bottom: 0; transition: all 0.4s ease-in-out; font-style: normal; font-weight: 700; font-size: 12px; line-height: 150%; z-index: 1; } .feature-five-card__feature:hover { background: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .feature-five-card__feature--two { background-color: var(--solinom-gray2, #283E46); color: var(--solinom-white, #fff); } .feature-five-card__content { padding: 30px 30px 23px; } .feature-five-card__content__star { line-height: 1; font-size: 17px; color: var(--solinom-base, #CBA36B); letter-spacing: -1px; margin-bottom: 14px; } .feature-five-card__content__title { font-style: normal; font-weight: 600; font-size: 24px; line-height: normal; text-transform: capitalize; color: var(--solinom-white, #fff); padding-bottom: 0; margin-bottom: 7px; } .feature-five-card__content__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .feature-five-card__content__title a:hover { background-size: 100% 1px; } .feature-five-card__content__text { font-style: normal; font-weight: 500; font-size: 14px; line-height: 171%; margin-bottom: 0; padding-bottom: 0; } .feature-five-card__content__number { padding: 25px 30px; display: flex; align-items: center; justify-content: space-between; background-color: var(--solinom-text, #101D22); transition: all 0.4s ease-in-out; } .feature-five-card__content__number__price { font-style: normal; font-weight: 500; font-size: 20px; line-height: normal; color: var(--solinom-base, #CBA36B); } .feature-five-card__content__number__price span { font-size: 16px; color: var(--solinom-text-gray, #7D8B90); } .feature-five-card__content__number__parson { font-style: normal; font-weight: 500; font-size: 14px; line-height: 171%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .feature-five-card__content__number__parson strong { color: var(--solinom-white, #fff); } .feature-five-card:hover { border-color: var(--solinom-base, #CBA36B); } .feature-five-card:hover .feature-five-card__thumb img { transform: scale(1.1) rotate(-3deg); } .feature-five-card:hover .feature-five-card__thumb::after { visibility: visible; opacity: 1; transform: translateY(0%); } /***Feature Page***/ .feature-page { position: relative; padding: 120px 0px; } @media (max-width: 991px) { .feature-page { padding: 100px 0px; } } @media (max-width: 768px) { .feature-page { padding: 80px 0px; } } /*-------------------------------------------------------------- # About --------------------------------------------------------------*/ /**About One**/ .about-one { padding: 120px 0px; position: relative; } @media (max-width: 991px) { .about-one { padding: 100px 0px; } } @media (max-width: 767px) { .about-one { padding: 80px 0px; } } .about-one__thumb { position: relative; z-index: 1; } .about-one__thumb__item { margin-right: 70px; margin-left: 50px; position: relative; overflow: hidden; } @media (max-width: 1199px) { .about-one__thumb__item { margin-right: 40px; margin-left: 0px; } } .about-one__thumb__item img { object-fit: cover; width: 100%; } .about-one__thumb__item__element { position: absolute; top: 0; left: 0; } .about-one__thumb__item__element img { object-fit: cover; width: 100%; } .about-one__thumb__line { display: flex; gap: 10px; position: absolute; top: 0; right: 10px; animation: top-bottom 3s ease-in-out infinite; } .about-one__thumb__line span { height: 216px; width: 2px; background-color: var(--solinom-base, #CBA36B); } .about-one__thumb__line span:nth-child(2) { margin-top: 10px; } .about-one__thumb__line span:nth-child(3) { margin-top: 20px; } .about-one__thumb__element { position: relative; z-index: 1; animation: top-bottom-two 4s ease-in-out infinite; margin-right: -20px; } @media (max-width: 1199px) and (min-width: 992px) { .about-one__thumb__element { margin-right: 0; } } @media (max-width: 575px) { .about-one__thumb__element { margin-right: 0; } } .about-one__thumb__shape { position: relative; -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: auto; mask-size: auto; width: 167px; height: 367px; background-color: transparent; margin-top: -330px; } .about-one__thumb__shape-two { position: absolute; bottom: -10px; right: -15px; } .about-one__content .sec-title { padding-bottom: 20px; } .about-one__content .sec-title__title { font-style: normal; font-weight: 600; font-size: 50px; line-height: 120%; } .about-one__content__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 30px; } .about-one__feature { margin-bottom: 50px; } .about-one__feature__item { display: flex; align-items: center; gap: 15px; } @media (max-width: 1199px) and (min-width: 992px) { .about-one__feature__item { flex-direction: column; justify-content: start; align-items: start; } } @media (max-width: 575px) { .about-one__feature__item { flex-direction: column; justify-content: start; align-items: start; } } .about-one__feature__item + .about-one__feature__item { margin-top: 30px; } .about-one__feature__left { position: relative; z-index: 1; flex: 70%; } @media (max-width: 1199px) and (min-width: 992px) { .about-one__feature__left { flex: 60%; width: 60%; } } @media (max-width: 575px) { .about-one__feature__left { flex: 60%; width: 60%; } } @media (max-width: 575px) { .about-one__feature__left { display: flex; align-items: center; gap: 20px; width: 100%; flex: 100%; } } .about-one__feature__left:hover .about-one__feature__icon { background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .about-one__feature__left:hover .about-one__feature__icon i { animation: shake 0.5s linear 1; } .about-one__feature__icon { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--solinom-gray, #1C2F36); font-size: 34px; color: var(--solinom-base, #CBA36B); position: absolute; right: 0; top: 0; transition: all 0.4s ease-in-out; } @media (max-width: 575px) { .about-one__feature__icon { position: relative; } } .about-one__feature__title { margin-top: 10px; font-style: normal; font-weight: 700; font-size: 20px; line-height: 150%; margin-bottom: 0; padding-bottom: 0; color: var(--solinom-text, #101D22); text-transform: capitalize; padding-right: 96px; } @media (max-width: 575px) { .about-one__feature__title { padding-right: 0; } } .about-one__feature__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .about-one__feature__title a:hover { background-size: 100% 1px; } .about-one__feature__text { margin-bottom: 0; border-right: 3px solid var(--solinom-base, #CBA36B); padding: 7px 30px; background-color: rgba(var(--solinom-text-dark-rgb, 21, 38, 44), 0.04); color: var(--solinom-text-gray, #7D8B90); font-weight: 500; font-size: 14px; line-height: 171%; } @media (max-width: 1199px) and (min-width: 992px) { .about-one__feature__text { flex: 80%; width: 80%; } } @media (max-width: 575px) { .about-one__feature__text { flex: 80%; width: 80%; } } .about-one__btn { padding: 11px 40px; } /**About Two**/ .about-two { padding: 120px 0px; position: relative; background-color: var(--solinom-gray, #1C2F36); z-index: 1; } @media (max-width: 991px) { .about-two { padding: 100px 0px; } } @media (max-width: 767px) { .about-two { padding: 80px 0px; } } .about-two__bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat; background-size: cover; background-position: center center; mix-blend-mode: overlay; z-index: -1; } .about-two__thumb { position: relative; z-index: 1; } .about-two__thumb__item { position: relative; z-index: 1; margin-left: 100px; margin-right: 30px; } @media (max-width: 1199px) { .about-two__thumb__item { margin-left: 30px; margin-right: 30px; } } .about-two__thumb__item img { object-fit: cover; width: 100%; } .about-two__thumb__item::after { content: ""; position: absolute; top: 30px; right: 30px; left: 30px; bottom: 30px; background: transparent; border: 1px solid var(--solinom-base, #CBA36B); } .about-two__thumb__item::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background-color: var(--solinom-base, #CBA36B); transform: rotate(8.21deg); z-index: -1; transition: all 0.5s ease-in-out; } .about-two__thumb__item:hover::before { transform: rotate(0deg); } .about-two__thumb__small { position: absolute; bottom: 0; right: -100px; z-index: 1; animation: top-bottom-two 4s ease-in-out infinite; } .about-two__thumb__small img { width: 243px; height: 243px; border-radius: 50%; border: 16px solid var(--solinom-gray2, #283E46); } .about-two .sec-title { padding-bottom: 15px; } .about-two .sec-title .sec-title__title { font-weight: 500; line-height: 120%; } .about-two__top__text { font-weight: 500; font-size: 16px; line-height: 188%; max-width: 490px; width: 100%; margin-bottom: 30px; } .about-two__feature { margin-bottom: 40px; } .about-two__feature__item { position: relative; padding: 40px 30px; z-index: 1; overflow: hidden; } .about-two__feature__item::after { content: ""; width: 100%; height: 166px; position: absolute; bottom: 0; right: 0; background-color: rgba(var(--solinom-text-dark-rgb, 21, 38, 44), 0.96); z-index: -1; } .about-two__feature__item:hover .about-two__feature__icon { animation: shake 0.3s linear 2; background-color: var(--solinom-base, #CBA36B); color: var(--solinom-white, #fff); } .about-two__feature__item:hover .about-two__feature__bg { transform: scale(1.1); } .about-two__feature__bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-repeat: no-repeat; background-size: cover; background-position: center center; z-index: -2; transform: scale(1); transition: all 0.4s ease-in-out; } .about-two__feature__icon { margin-top: 25px; width: 60px; border-radius: 50%; background-color: var(--solinom-text, #101D22); height: 60px; display: flex; justify-content: center; align-items: center; color: var(--solinom-base, #CBA36B); font-size: 30px; transition: all 0.4s ease-in-out; } .about-two__feature__title { font-style: normal; font-weight: 600; font-size: 20px; line-height: 350%; color: var(--solinom-white, #fff); text-transform: capitalize; margin-top: -6px; margin-bottom: -15px; padding-bottom: 0; } .about-two__feature__title a { color: inherit; background: linear-gradient(to left, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .about-two__feature__title a:hover { background-size: 100% 1px; } .about-two__feature__text { font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: -10px; padding-bottom: 0; } .about-two .solinom-btn { padding: 11px 40px; border: 1px solid transparent; } .about-two .solinom-btn:hover { border-color: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.4); } /**About Three**/ .about-three { padding: 120px 0px 170px; position: relative; background-color: var(--solinom-text-dark, #15262C); z-index: 1; } @media (max-width: 991px) { .about-three { padding: 100px 0px; } } @media (max-width: 767px) { .about-three { padding: 80px 0px; } } .about-three__thumb { margin-left: 45px; position: relative; z-index: 1; } @media (max-width: 1199px) { .about-three__thumb { margin-left: 0px; } } .about-three__thumb__item img { object-fit: cover; width: 100%; } .about-three__thumb__small-image { position: absolute; width: 300px; height: 238px; -webkit-mask: url('data:image/svg+xml;utf8, '); mask: url('data:image/svg+xml;utf8, '); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: auto; mask-size: auto; bottom: 0; right: -120px; } .about-three__thumb__element { position: absolute; bottom: -92px; right: -43px; } @media (max-width: 991px) { .about-three__thumb__element { display: none; } } .about-three__thumb__element-two { position: absolute; bottom: -40px; right: -165px; } .about-three__thumb__logo { position: absolute; bottom: 220px; right: -50px; width: 108px; height: 108px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: var(--solinom-gray, #1C2F36); animation: scaleError2 4s ease-in-out infinite; } .about-three__thumb__inner { animation: top-bottom-two 3s ease-in-out infinite; } .about-three__content .sec-title { padding-bottom: 18px; } .about-three__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 30px; } .about-three__list { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 50px; } .about-three__list__item { flex: 48%; width: 48%; display: flex; align-items: center; gap: 20px; background-color: var(--solinom-text, #101D22); border-radius: 0 1000px 1000px 0; position: relative; overflow: hidden; z-index: 1; transition: all 0.4s ease-in-out; } .about-three__list__item::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background-color: var(--solinom-base, #CBA36B); z-index: -1; transform: translateX(100%); transition: all 0.4s ease-in-out; } .about-three__list__item:hover { background-color: var(--solinom-gray2, #283E46); } .about-three__list__item:hover .about-three__list__icon { background-color: var(--solinom-base, #CBA36B); } .about-three__list__item:hover .about-three__list__icon i { animation: bounceIn 1s linear; color: var(--solinom-gray, #1C2F36); } .about-three__list__icon { border-radius: 50%; width: 59px; height: 59px; display: flex; justify-content: center; align-items: center; font-size: 26px; color: var(--solinom-base, #CBA36B); background-color: var(--solinom-gray2, #283E46); transition: all 0.4s ease-in-out; } .about-three__list__title { display: inline-block; font-style: normal; font-weight: 700; font-size: 16px; line-height: 238%; margin-bottom: 0; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-text-gray, #7D8B90); } .about-three__list__title a { color: inherit; } .about-three__btn { padding: 11px 40px; border: 1px solid transparent; } .about-three__btn:hover { border-color: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.4); } /**About Fore**/ .about-four { padding: 120px 0px; position: relative; } @media (max-width: 991px) { .about-four { padding: 100px 0px; } } @media (max-width: 767px) { .about-four { padding: 80px 0px; } } .about-four__content .sec-title { padding-bottom: 7px; } .about-four__text { font-style: normal; font-weight: 500; font-size: 16px; line-height: 188%; margin-bottom: 20px; padding-bottom: 0; color: var(--solinom-text-gray, #7D8B90); } .about-four__blockquote { font-style: normal; font-weight: 700; font-size: 20px; line-height: 150%; padding: 22px 35px; background-color: var(--solinom-border-color, #FAF6F0); color: var(--solinom-text-dark, #15262C); margin-bottom: 35px; } .about-four__list { margin-bottom: 40px; } .about-four__list__item { font-style: normal; font-weight: 700; font-size: 18px; line-height: normal; color: var(--solinom-text-gray, #7D8B90); transition: all 0.4s ease-in-out; } .about-four__list__item i { color: var(--solinom-base, #CBA36B); margin-left: 10px; transition: all 0.4s ease-in-out; } .about-four__list__item:hover { color: var(--solinom-gray, #1C2F36); } .about-four__list__item:hover i { color: var(--solinom-text, #101D22); } .about-four__list__item + .about-four__list__item { margin-top: 15px; } .about-four__btn { padding: 11px 40px; } .about-four__right { position: relative; z-index: 1; } .about-four__thumb { position: relative; z-index: 1; } .about-four__thumb img { object-fit: cover; width: 100%; border-radius: 1000px 1000px 0 0; } .about-four__thumb__box { width: 350px; height: 350px; background-color: var(--solinom-base, #CBA36B); padding: 18px 21px 0px; border-radius: 1000px 1000px 0 0; margin-right: auto; margin-left: auto; position: absolute; bottom: 0; right: 50%; transform: translateX(50%); } .about-four__thumb__box img { width: auto; } .about-four__thumb::after { content: ""; width: 100%; height: 100%; position: absolute; top: -23px; left: -20px; z-index: -1; background-color: transparent; border: 1px solid var(--solinom-base, #CBA36B); border-radius: 1000px 1000px 0 0; animation: treeMove 4s ease-in-out infinite; } .about-four__bottom { position: relative; z-index: 1; padding: 40px 28px; } .about-four__bottom::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; background-image: url(../images/shapes/about-4-1.png); background-repeat: no-repeat; background-position: 0% 100%; background-size: cover; z-index: -1; } .about-four__bottom__man__box { display: flex; align-items: center; border-radius: 50%; } .about-four__bottom__man__box img { border: 2px solid var(--solinom-white, #fff); object-fit: cover; max-width: 37px; width: 100%; border-radius: 50%; height: 37px; margin-right: -12px; } .about-four__bottom__man__box img:first-child { margin-right: 0; } .about-four__bottom__man__funfact { max-width: 37px; margin-right: -12px; width: 100%; border-radius: 50%; height: 37px; background-color: var(--solinom-white, #fff); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 11.6505px; line-height: 162%; color: var(--solinom-base, #CBA36B); margin-bottom: 0; padding-bottom: 0; } .about-four__bottom__man__funfact span { color: inherit; } .about-four__bottom__man__text { font-style: normal; font-weight: 500; font-size: 14px; line-height: 186%; margin-bottom: 0; padding-bottom: 0; text-transform: capitalize; color: var(--solinom-white, #fff); opacity: 0.7; } .about-four__top { position: absolute; top: 8%; z-index: 1; left: -23px; width: 98px; border-radius: 50%; height: 98px; display: flex; justify-content: center; align-items: center; background-color: var(--solinom-base, #CBA36B); } .about-four__top__funfact { display: flex; flex-direction: column; } .about-four__top__item { display: flex; justify-content: center; font-style: normal; font-weight: 700; font-size: 25.3243px; line-height: 31px; color: var(--solinom-white, #fff); margin-bottom: 0; padding-bottom: 0; } .about-four__top__text { font-style: normal; font-weight: 700; font-size: 15.1946px; line-height: 19px; text-transform: capitalize; color: var(--solinom-white, #fff); margin-bottom: 0; padding-bottom: 0; text-align: center; } .about-four__element { position: absolute; top: -18px; right: -18px; z-index: 1; animation: rotated 10s infinite linear; } /*-------------------------------------------------------------- # Instagram --------------------------------------------------------------*/ /**Instagram Two**/ .instagram-two { position: relative; z-index: 1; background-color: var(--solinom-text-dark, #15262C); padding: 120px 0; } @media (max-width: 991px) { .instagram-two { padding: 100px 0; } } @media (max-width: 767px) { .instagram-two { padding: 80px 0; } } .instagram-two--home { padding: 0px 0 120px; } @media (max-width: 991px) { .instagram-two--home { padding: 0 0 100px; } } @media (max-width: 767px) { .instagram-two--home { padding: 0 0 80px; } } .instagram-two .container-fluid { max-width: 1780px; margin-right: auto; margin-left: auto; } .instagram-two__list { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; margin-bottom: 0; } .instagram-two__list__item { max-width: 335px; min-width: 335px; width: 100%; } @media (max-width: 575px) { .instagram-two__list__item { max-width: 400px; min-width: 400px; width: 100%; } } @media (max-width: 420px) { .instagram-two__list__item { max-width: 320px; min-width: 320px; width: 100%; } } .instagram-two__list__item__image { position: relative; z-index: 1; } .instagram-two__list__item__image img { object-fit: cover; } @media (max-width: 575px) { .instagram-two__list__item__image img { object-fit: cover; width: 100%; } } .instagram-two__list__item__image__hover { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(var(--solinom-base-rgb, 203, 163, 107), 0.9); display: flex; justify-content: center; align-items: center; transform: scale(1, 0); transition: transform 500ms ease; transform-origin: bottom center; } .instagram-two__list__item__image__hover a { position: relative; font-size: 54px; color: var(--solinom-white, #fff); } .instagram-two__list__item__image:hover .instagram-two__list__item__image__hover { transform-origin: top center; transform: scale(1, 1); } /*-------------------------------------------------------------- # Boxed Home --------------------------------------------------------------*/ body.boxed-wrapper { position: relative; background-color: var(--solinom-gray2, #283E46); } body.boxed-wrapper .page-wrapper { max-width: 1530px; margin-right: auto; margin-left: auto; background-color: var(--solinom-white, #fff); box-shadow: 0px 0px 100px 0px rgba(var(--solinom-black-rgb, 0, 0, 0), 0.08); } .boxed-wrapper .main-slider-one__element-one, .boxed-wrapper .main-slider-one__element-two { display: none; } .boxed-wrapper .main-slider-one { padding: 0px 0px; } .boxed-wrapper .main-slider-one .banner-form { bottom: 150px; } @media (max-width: 991px) { .boxed-wrapper .main-slider-one .banner-form { bottom: 0; } } .boxed-wrapper .benefit-three__thumb { width: 37%; } /*-------------------------------------------------------------- # Work Process --------------------------------------------------------------*/ .work-process-one { position: relative; counter-reset: count; padding: 120px 0 90px; } @media (max-width: 767px) { .work-process-one { padding: 80px 0 50px; } } .work-process-one .sec-title { text-align: center; } .work-process-one__border { width: 100%; height: 2px; background-color: var(--solinom-base, #CBA36B); top: 103px; position: relative; } @media (max-width: 767px) { .work-process-one__border { display: none; } } .work-process-one__border::after { position: absolute; right: 0; top: -5px; width: 11px; height: 11px; background-color: var(--solinom-black, #000); border-radius: 50%; content: ""; } .work-process-one__border::before { position: absolute; left: 0; top: -5px; width: 11px; height: 11px; background-color: var(--solinom-black, #000); border-radius: 50%; content: ""; } .work-process-one__gradiant-left { height: 100%; position: absolute; display: block; right: 0; top: 0; width: 5%; border-width: 1px; border-style: solid; border-image: linear-gradient(-45deg, rgba(var(--solinom-base-rgb, 203, 163, 107), 1) 0%, rgba(var(--solinom-black-rgb, 0, 0, 0), 1) 100%) 1; } .work-process-one__gradiant-right { height: 100%; position: absolute; display: block; left: 0; top: 0; width: 5%; border-width: 1px; border-style: solid; border-image: linear-gradient(-45deg, rgba(var(--solinom-black-rgb, 0, 0, 0), 1) 0%, rgba(var(--solinom-base-rgb, 203, 163, 107), 1) 100%) 1; } .work-process-one__item { position: relative; counter-increment: count; margin-bottom: 30px; } .work-process-one__item__thumb { display: inline-block; width: 202px; height: 202px; border: 2px solid var(--solinom-base, #CBA36B); background-color: var(--solinom-white, #fff); border-radius: 50%; padding: 5px; position: relative; margin-bottom: 30px; } .work-process-one__item__thumb-wrap { background-color: var(--solinom-black, #000); position: relative; border-radius: 50%; overflow: hidden; } .work-process-one__item__thumb-wrap::after { content: ""; position: absolute; top: 50%; right: 50%; display: block; width: 0; height: 0; background: rgba(var(--solinom-white-rgb, 255, 255, 255), 0.2); border-radius: 50%; transition: all 500ms linear; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); opacity: 0; z-index: 2; } .work-process-one__item__thumb-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; opacity: 0.3; } .work-process-one__item__thumb__number { width: 67px; height: 67px; background-color: var(--solinom-base, #CBA36B); display: flex; justify-content: center; align-items: center; border-radius: 50%; color: var(--solinom-white, #fff); font-family: var(--solinom-heading-font, "Plus Jakarta Sans", sans-serif); font-size: 30px; font-weight: 700; line-height: 1; position: absolute; left: -9px; top: 5px; transition: all 500ms linear; transition-delay: 0s; transition-delay: 0s; transition-delay: 0.1s; transform: scale(1); } .work-process-one__item__thumb__number::before { content: counters(count, ".", decimal-leading-zero); position: absolute; top: -6px; left: 0; bottom: 0; right: 0; margin: auto; display: flex; align-items: center; justify-content: center; } .work-process-one__item__thumb__icon { width: 60px; height: 60px; font-size: 60px; color: var(--solinom-base, #CBA36B); display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; left: 0; bottom: 0; margin: auto; } .work-process-one__item:hover .work-process-one__item__thumb-wrap::after { -webkit-animation: zoom-hover 0.95s; animation: zoom-hover 0.95s; } .work-process-one__item:hover .work-process-one__item__thumb__number { transform: scale(0.95); } .work-process-one__item__content { position: relative; box-shadow: 0px 0px 60px 0px rgba(var(--solinom-black3-rgb, 0, 0, 0), 0.07); background-color: var(--solinom-white, #fff); border-radius: 100px; padding: 24px 20px 26px; } .work-process-one__item__content::after { position: absolute; right: 0; left: 0; top: -10px; content: ""; margin: auto; width: 0; height: 0; border-style: solid; border-width: 0 25px 10px 25px; border-color: transparent transparent var(--solinom-white, #fff) transparent; } .work-process-one__item__title { font-size: 24px; font-weight: 700; text-transform: uppercase; margin: 0 0 5px; } .work-process-one__item__text { font-size: 15px; line-height: 26px; margin: 0; }