/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- >>> TABLE OF CONTENTS: # Utility # Common # Custom Cursor # Animations # Cards # Topbar # Navigation # Home Showcase # Mobile Nav # Search Popup # Page Header # Google Map # Forms # Contact # Newsletter # Comments # Sidebar # Footer # Client Carousel # Main Slider # About # Testimonials # Gallery # Package # Services # Service Details # Projects # Project Details # Shop # Shop Details # Cart # Checkout # Blog Details # Why Choose # Funfact # Faq # Features # Skill # Slide Text # Solution # Working Process # Profit Graph # Contact Info # Error 404 # Boxed Home --------------------------------------------------------------*/ :root { --eolexi-font: "DM Sans", serif; --eolexi-font2: "Sora", serif; --eolexi-heading-font: "Roboto Slab", serif; --eolexi-text: #636363; --eolexi-text-rgb: 99, 99, 99; --eolexi-text-gray: #C5C5C5; --eolexi-text-gray-rgb: 197, 197, 197; --eolexi-text-gray2: #566963; --eolexi-text-gray2-rgb: 86, 105, 99; --eolexi-base: #005b85; --eolexi-base-rgb: 47, 92, 233; --eolexi-gray: #92918F; --eolexi-gray-rgb: 146, 145, 143; --eolexi-gray2: #7A8385; --eolexi-gray2-rgb: 122, 131, 133; --eolexi-gray3: #788284; --eolexi-gray3-rgb: 120, 130, 132; --eolexi-gray4: #8A91A8; --eolexi-gray4-rgb: 138, 145, 168; --eolexi-white: #FFFFFF; --eolexi-white-rgb: 255, 255, 255; --eolexi-white2: #F0F2F8; --eolexi-white2-rgb: 240, 242, 248; --eolexi-white3: #F5F2EF; --eolexi-white3-rgb: 245, 242, 239; --eolexi-white4: #D9D9D9; --eolexi-white4-rgb: 217, 217, 217; --eolexi-black: #222222; --eolexi-black-rgb: 34, 34, 34; --eolexi-black2: #162452; --eolexi-black2-rgb: 22, 36, 82; --eolexi-black3: #000000; --eolexi-black3-rgb: 0, 0, 0; --eolexi-black4: #333333; --eolexi-black4-rgb: 51, 51, 51; --eolexi-black5: #151316; --eolexi-black5-rgb: 21, 19, 22; --eolexi-black6: #121212; --eolexi-black6-rgb: 18, 18, 18; --eolexi-black7: #060606; --eolexi-black7-rgb: 6, 6, 6; --eolexi-border-color: #dddddd; --eolexi-border-color-rgb: 221, 221, 221; --section-space: 120px; } /*-------------------------------------------------------------- # 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-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-30 { padding-left: 30px; } .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-30 { padding-right: 30px; } /*-------------------------------------------------------------- # Common --------------------------------------------------------------*/ body { font-family: var(--eolexi-font, "DM Sans", serif); color: var(--eolexi-text, #636363); font-size: 16px; line-height: 1.625; font-weight: 400; } body.locked { overflow: hidden; } a { color: var(--eolexi-base, #005b85); 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(--eolexi-heading-font, "Roboto Slab", serif); color: var(--eolexi-black3, #000000); } @media (max-width: 575px) { h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { display: none; } } @media (max-width: 575px) { p br { display: none; } } ::placeholder { color: inherit; opacity: 1; } .background-base { background-color: var(--eolexi-base, #005b85); } .background-gray { background-color: var(--eolexi-gray, #92918F); } .background-black { background-color: var(--eolexi-black, #222222); } .background-black-2 { background-color: var(--eolexi-black2, #162452); } .eolexi-text-gray { color: var(--eolexi-text-gray, #C5C5C5); } .page-wrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; } .section-space { padding-top: var(--section-space, 120px); padding-bottom: var(--section-space, 120px); } @media (max-width: 767px) { .section-space { padding-top: 100px; padding-bottom: 100px; } } @media (max-width: 575px) { .section-space { padding-top: 80px; padding-bottom: 80px; } } .section-space-top { padding-top: var(--section-space, 120px); } @media (max-width: 767px) { .section-space-top { padding-top: 100px; } } @media (max-width: 575px) { .section-space-top { padding-top: 80px; } } .section-space-bottom { padding-bottom: var(--section-space, 120px); } @media (max-width: 767px) { .section-space-bottom { padding-bottom: 100px; } } @media (max-width: 575px) { .section-space-bottom { padding-bottom: 80px; } } .container-fluid, .container { padding-left: 15px; padding-right: 15px; } @media (min-width: 1200px) { .container { max-width: 1200px; } } .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-y-30 { --bs-gutter-y: 30px; } .gutter-y-40 { --bs-gutter-y: 40px; } .gutter-y-50 { --bs-gutter-y: 50px; } .gutter-y-60 { --bs-gutter-y: 60px; } .gutter-y-70 { --bs-gutter-y: 70px; } .gutter-y-80 { --bs-gutter-y: 80px; } .logo-retina img { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); } /* button */ .eolexi-btn { position: relative; display: inline-flex; align-items: center; gap: 28px; vertical-align: middle; -webkit-appearance: none; border: none; outline: none !important; padding: 10px 10px 10px 29px; background-color: var(--eolexi-base, #005b85); z-index: 1; overflow: hidden; transition: 500ms; } @media (max-width: 430px) { .eolexi-btn { padding-left: 25px; gap: 24px; } } .eolexi-btn::after { content: ""; width: 0%; height: 100%; position: absolute; top: 0px; right: 0px; background-color: var(--eolexi-black2, #162452); z-index: -1; transition: all 500ms ease; } .eolexi-btn:hover::after { width: 100%; left: 0px; } .eolexi-btn__text { display: inline-block; position: relative; font-size: 16px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.25; text-transform: uppercase; overflow: hidden; transition: all 500ms ease; } @media (max-width: 430px) { .eolexi-btn__text { font-size: 14px; } } .eolexi-btn__text span { display: inline-block; } .eolexi-btn:hover .eolexi-btn__text span { animation: slideRight 500ms; } .eolexi-btn__icon { width: 32px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: var(--eolexi-white, #FFFFFF); font-size: 14px; color: var(--eolexi-base, #005b85); overflow: hidden; transition: all 500ms ease; } @media (max-width: 430px) { .eolexi-btn__icon { width: 30px; height: 30px; font-size: 12px; } } .eolexi-btn__icon svg { width: 1em; height: 1em; fill: currentColor; } .eolexi-btn:hover .eolexi-btn__icon { color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); } .eolexi-btn:hover .eolexi-btn__icon > * { animation: slideRight 500ms; } .eolexi-btn--black { background-color: var(--eolexi-black2, #162452); } .eolexi-btn--black::after { background-color: var(--eolexi-base, #005b85); } .eolexi-btn--black:hover .eolexi-btn__icon { color: var(--eolexi-base, #005b85); background-color: var(--eolexi-white, #FFFFFF); } .eolexi-btn--white { background-color: var(--eolexi-white, #FFFFFF); } .eolexi-btn--white::after { background-color: var(--eolexi-base, #005b85); } .eolexi-btn--white .eolexi-btn__text { color: var(--eolexi-black2, #162452); } .eolexi-btn--white:hover .eolexi-btn__text { color: var(--eolexi-white, #FFFFFF); } .eolexi-btn--white .eolexi-btn__icon { color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); } .eolexi-btn--white:hover .eolexi-btn__icon { color: var(--eolexi-base, #005b85); background-color: var(--eolexi-white, #FFFFFF); } .eolexi-btn--border { border: 1px solid var(--eolexi-base, #005b85); background-color: transparent; } .eolexi-btn--border::after { background-color: var(--eolexi-base, #005b85); } .eolexi-btn--border .eolexi-btn__text { color: var(--eolexi-black4, #333333); } .eolexi-btn--border:hover .eolexi-btn__text { color: var(--eolexi-white, #FFFFFF); } .eolexi-btn--border .eolexi-btn__icon { color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); } .eolexi-btn--border:hover .eolexi-btn__icon { color: var(--eolexi-base, #005b85); background-color: var(--eolexi-white, #FFFFFF); } .eolexi-btn-two { --tilt: 40px; cursor: pointer; display: inline-block; vertical-align: middle; -webkit-appearance: none; border: none; outline: none !important; position: relative; z-index: 1; overflow: hidden; background-color: var(--eolexi-base, #005b85); padding: 14px 35px; font-size: 16px; color: var(--eolexi-white, #FFFFFF); font-weight: 500; text-align: center; text-transform: uppercase; transition: all 500ms ease; } @media (max-width: 430px) { .eolexi-btn-two { font-size: 14px; padding-left: 30px; padding-right: 30px; } } .eolexi-btn-two:hover { color: var(--eolexi-white, #FFFFFF); } .eolexi-btn-two span { position: relative; z-index: 1; } .eolexi-btn-two::before, .eolexi-btn-two::after { content: ""; width: calc(100% + var(--tilt)); height: 100%; position: absolute; top: 0; left: calc(-100% - var(--tilt)); background-color: var(--eolexi-black2, #162452); z-index: -1; clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 50%, calc(100% - var(--tilt)) 100%, 0 100%); transition: transform 0.6s; } .eolexi-btn-two::before { left: calc(-100% - var(--tilt)); } .eolexi-btn-two::after { left: 100%; transform: rotate(180deg); } .eolexi-btn-two:hover::before { transform: translateX(100%); } .eolexi-btn-two:hover::after { transform: rotate(180deg) translateX(100%); } .eolexi-btn-two--icon { display: inline-flex; align-items: center; gap: 10px; } .eolexi-btn-two--icon .eolexi-btn-two__icon { display: inline-flex; align-items: center; font-size: 11px; color: var(--eolexi-white, #FFFFFF); } .eolexi-btn-two--icon .eolexi-btn-two__icon svg { width: 1em; height: 1em; fill: currentColor; } @media (max-width: 430px) { .eolexi-btn-two--icon .eolexi-btn-two__icon { font-size: 10px; } } .video-btn { width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: transparent; position: relative; border-radius: 50%; border: 4px solid var(--eolexi-white, #FFFFFF); font-size: 35px; color: var(--eolexi-white, #FFFFFF); transition: all 500ms ease; } .video-btn:hover { background-color: var(--eolexi-base, #005b85); border-color: var(--eolexi-base, #005b85); } .video-btn > span { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; border: 1px solid var(--eolexi-white, #FFFFFF); border-radius: 50%; z-index: -1; transition: all 500ms ease; -webkit-animation: pulse-animate 4s linear infinite; animation: pulse-animate 4s linear infinite; } .video-btn:hover > span { border-color: var(--eolexi-base, #005b85); } .video-btn span:nth-child(2) { -webkit-animation-delay: 1s; animation-delay: 1s; } .video-btn span:nth-child(3) { -webkit-animation-delay: 2s; animation-delay: 2s; } .video-btn span:nth-child(4) { -webkit-animation-delay: 3s; animation-delay: 3s; } @-webkit-keyframes pulse-animate { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(3); transform: scale(3); opacity: 0; } } @keyframes pulse-animate { 0% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(3); transform: scale(3); opacity: 0; } } /* section title */ .sec-title { margin-bottom: 31px; } .sec-title--center { margin-bottom: 51px; text-align: center; } .sec-title--center .sec-title__top { justify-content: center; } .sec-title__top { margin-bottom: 14px; display: inline-flex; align-items: center; gap: 19px; } @media (max-width: 575px) { .sec-title__top { gap: 15px; } } .sec-title__shape { max-width: 100%; height: auto; } .sec-title__tagline { margin: 0; font-family: var(--eolexi-font, "DM Sans", serif); font-size: 22px; color: var(--eolexi-base, #005b85); font-weight: 700; text-transform: uppercase; line-height: 1.318; } @media (max-width: 991px) { .sec-title__tagline { font-size: 20px; } } @media (max-width: 575px) { .sec-title__tagline { font-size: 16px; } } .sec-title__title { margin: 0; font-size: 35px; font-weight: 700; line-height: 1.314; } @media (max-width: 575px) { .sec-title__title { font-size: 30px; } } /* ratings */ .eolexi-ratings { display: flex; align-items: center; gap: 9px; } .eolexi-ratings__icon { display: inline-flex; align-items: baseline; font-size: 16px; color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .eolexi-ratings__icon svg { width: 1em; height: 1em; fill: currentColor; } /* social links */ .social-links { display: flex; align-items: center; gap: 10px; } .social-links a { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background-color: var(--eolexi-base, #005b85); overflow: hidden; transition: all 500ms ease; } .social-links__icon { display: inline-flex; font-size: 14px; color: var(--eolexi-white, #FFFFFF); transition: all 500ms ease; } .social-links__icon svg { width: 1em; height: 1em; fill: currentColor; } .social-links a:hover { background-color: var(--eolexi-white, #FFFFFF); } .social-links a:hover .social-links__icon { color: var(--eolexi-base, #005b85); animation: slideTop 400ms; } .social-links-two { display: flex; align-items: center; flex-wrap: wrap; gap: 10.99px; } .social-links-two a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--eolexi-gray, #92918F); border-radius: 50%; overflow: hidden; transition: all 500ms ease; } .social-links-two__icon { display: inline-flex; font-size: 15px; color: var(--eolexi-gray, #92918F); transition: all 500ms ease; } .social-links-two__icon svg { width: 1em; height: 1em; fill: currentColor; } .social-links-two a:hover { background-color: var(--eolexi-base, #005b85); border-color: var(--eolexi-base, #005b85); } .social-links-two a:hover .social-links-two__icon { color: var(--eolexi-white, #FFFFFF); animation: slideTop 400ms; } /* progress bar */ .progress-box + .progress-box { margin-top: 23px; } .progress-box__title { margin-bottom: 10px; font-size: 16px; font-weight: 600; color: var(--eolexi-text, #636363); line-height: 1.625; } .progress-box__bar { position: relative; width: 100%; height: 14px; border: 1px solid var(--eolexi-base, #005b85); border-radius: 20px; } .progress-box__bar__inner { position: relative; position: absolute; height: calc(100% - 4px); width: 0%; top: 50%; left: 3px; transform: translateY(-50%); background-color: var(--eolexi-base, #005b85); border-radius: inherit; transition: all 800ms linear; } .progress-box__bar__inner::before { content: ""; width: 22px; height: 22px; background-color: var(--eolexi-base, #005b85); border-radius: 50%; position: absolute; top: 50%; right: -2px; transform: translateY(-50%); } .progress-box__bar__inner::after { content: ""; width: 14px; height: 14px; background-color: var(--eolexi-white, #FFFFFF); border-radius: 50%; position: absolute; top: 50%; right: 2px; transform: translateY(-50%); } .progress-box__number { position: absolute; bottom: calc(100% + 10px); right: 0; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 16px; color: var(--eolexi-text, #636363); font-weight: 600; line-height: 1.625; } /* post pagination */ .post-pagination { list-style: none; padding: 0; margin-top: 30px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; } @media (max-width: 991px) { .post-pagination { margin-top: 20px; } } .post-pagination__btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 50px; height: 50px; font-size: 16px; color: var(--eolexi-base, #005b85); text-align: center; font-weight: 500; text-transform: capitalize; line-height: 1; background-color: var(--eolexi-white2, #F0F2F8); border-radius: 5px; overflow: hidden; transition: all 400ms ease; } .post-pagination__btn svg { width: 1em; height: 1em; fill: currentColor; } .post-pagination__btn:hover { color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); } .post-pagination__btn.active { color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); } .post-pagination__icon { display: inline-flex; align-items: center; font-size: 24px; color: var(--eolexi-base, #005b85); transition: all 400ms ease; } .post-pagination__icon svg { width: 1em; height: 1em; fill: currentColor; } .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(--eolexi-base, #005b85); } .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(--eolexi-text, #636363); border-radius: 50%; margin-left: 5px; margin-right: 5px; } .ul-list-one { margin-bottom: 0; } .ul-list-one li { position: relative; padding-left: 45px; font-size: 16px; font-weight: 500; color: var(--eolexi-black, #222222); } @media (min-width: 481px) { .ul-list-one li { font-size: 35px; } } .ul-list-one li::before { content: "\e907"; color: var(--eolexi-base, #005b85); font-size: 26px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-family: "azino-icon"; } .eolexi-owl__carousel--with-shadow .owl-stage-outer { overflow: visible; } .eolexi-owl__carousel--with-shadow .owl-item { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms ease; } .eolexi-owl__carousel--with-shadow .owl-item.active { opacity: 1; visibility: visible; } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-nav { margin-top: 60px; display: flex; align-items: center; justify-content: center; gap: 15px; } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-nav button { border: none; outline: none; margin: 0; padding: 0; width: 56px; height: 56px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: var(--eolexi-black2, #162452); background-color: var(--eolexi-white2, #F0F2F8); border-radius: 50%; transition: all 400ms ease; } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-nav button svg { width: 1em; height: 1em; fill: currentColor; } @media (max-width: 575px) { .eolexi-owl__carousel--basic-nav.owl-carousel .owl-nav button { width: 50px; height: 50px; font-size: 16px; } } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-nav button:hover { color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-nav button span { border: none; outline: none; color: inherit; } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-dots { display: flex; align-items: center; justify-content: center; gap: 12px; } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot { outline: 0; border: 0; position: relative; width: 14px; height: 14px; border-radius: 50%; background-color: var(--eolexi-black2, #162452); transition: all 400ms ease; } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot::after { content: ""; width: calc(100% + 5px); height: calc(100% + 5px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85); opacity: 0; border-radius: inherit; border: 1px solid var(--eolexi-base, #005b85); transition: all 400ms ease; } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot span { background-color: transparent; } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot:hover, .eolexi-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot.active { background-color: var(--eolexi-base, #005b85); } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot:hover::after, .eolexi-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot.active::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot:hover span, .eolexi-owl__carousel--basic-nav.owl-carousel .owl-dots .owl-dot.active span { background-color: transparent; } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-nav.disabled + .owl-dots { margin-top: 60px; } .eolexi-owl__carousel--basic-nav.owl-carousel .owl-dots.disabled, .eolexi-owl__carousel--basic-nav.owl-carousel .owl-nav.disabled { display: none; } .eolexi-slick__carousel.slick-slider .slick-dots { list-style: none; margin: 60px 0px 0px; padding: 0px; display: flex; align-items: center; justify-content: center; gap: 12px; } .eolexi-slick__carousel.slick-slider .slick-dots li { position: relative; width: 14px; height: 14px; cursor: pointer; border-radius: 50%; background-color: var(--eolexi-black2, #162452); transition: all 400ms ease; } .eolexi-slick__carousel.slick-slider .slick-dots li::after { content: ""; width: calc(100% + 5px); height: calc(100% + 5px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85); opacity: 0; border-radius: inherit; border: 1px solid var(--eolexi-base, #005b85); transition: all 400ms ease; } .eolexi-slick__carousel.slick-slider .slick-dots li:hover, .eolexi-slick__carousel.slick-slider .slick-dots li.slick-active { background-color: var(--eolexi-base, #005b85); } .eolexi-slick__carousel.slick-slider .slick-dots li:hover::after, .eolexi-slick__carousel.slick-slider .slick-dots li.slick-active::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } .eolexi-slick__carousel.slick-slider .slick-dots li button { display: none; } .ui-datepicker .ui-datepicker-header { background-image: none; background-color: var(--eolexi-black, #222222); color: var(--eolexi-white, #FFFFFF); font-family: var(--eolexi-font, "DM Sans", serif); } .ui-datepicker-calendar th span { font-family: var(--eolexi-font, "DM Sans", serif); } .ui-datepicker-calendar td { background-color: var(--eolexi-gray, #92918F); background-image: none; font-family: var(--eolexi-font, "DM Sans", serif); color: var(--eolexi-text, #636363); } .ui-datepicker-calendar td a { border-color: var(--eolexi-border-color, #dddddd); background-color: var(--eolexi-gray, #92918F); 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: var(--eolexi-border-color, #dddddd); background-color: var(--eolexi-gray, #92918F); background-image: none; color: var(--eolexi-text, #636363); 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(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); } .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(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { background-image: none; background-color: var(--eolexi-white, #FFFFFF); color: var(--eolexi-black, #222222); } .ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-next:hover { background-color: var(--eolexi-base, #005b85); color: var(--eolexi-white, #FFFFFF); top: 2px; } .ui-datepicker .ui-datepicker-prev:hover { left: 2px; } .ui-datepicker .ui-datepicker-next:hover { right: 2px; } /* scroll to top */ .scroll-to-top { display: flex; align-items: center; width: auto; height: 35px; background: transparent; position: fixed; bottom: 60px; right: -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-right: 8px; } .scroll-to-top__wrapper { display: inline-block; width: 30px; height: 4px; background-color: var(--eolexi-base, #005b85); position: relative; overflow: hidden; } .scroll-to-top__inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--eolexi-black, #222222); } .scroll-to-top.show { opacity: 1; visibility: visible; bottom: 70px; } /* preloader */ .preloader { position: fixed; background-color: var(--eolexi-black2, #162452); background-position: center center; background-repeat: no-repeat; top: 0; left: 0; right: 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%; } /*-------------------------------------------------------------- # Custom Cursor --------------------------------------------------------------*/ .custom-cursor__cursor { width: 25px; height: 25px; border-radius: 100%; border: 1px solid var(--eolexi-base, #005b85); -webkit-transition: all 200ms ease-out; transition: all 200ms ease-out; position: fixed; pointer-events: none; left: 0; top: 0; -webkit-transform: translate(calc(-50% + 5px), -50%); transform: translate(calc(-50% + 5px), -50%); z-index: 999991; } .custom-cursor__cursor-two { width: 10px; height: 10px; border-radius: 100%; background-color: var(--eolexi-base, #005b85); 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(--eolexi-base, #005b85); opacity: 0.4; } .custom-cursor__innerhover { width: 25px; height: 25px; opacity: 0.4; } /*-------------------------------------------------------------- # 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: right bottom; transform-origin: right bottom; } 80% { -webkit-transform: translateY(30px) translateX(50px) rotate(15deg); transform: translateY(30px) translateX(50px) rotate(15deg); -webkit-transform-origin: left top; transform-origin: left top; } 100% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); -webkit-transform-origin: center center; transform-origin: center center; } } @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: rotate(0deg) translateX(0); transform: rotate(0deg) translateX(0); } 25%, 75% { -webkit-transform: rotate(5deg) translateX(15px); transform: rotate(5deg) translateX(15px); } 50% { -webkit-transform: rotate(10deg) translateX(30px); transform: rotate(10deg) translateX(30px); } } @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 shapeRotate { 0% { transform: rotate(0); } 50% { transform: rotate(90deg); } 100% { transform: rotate(0); } } @keyframes flowerRotate { 0%, 100% { transform: rotate(0deg); } 25%, 75% { transform: rotate(5deg); } 50% { transform: rotate(10deg); } } @keyframes zump { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes zumpBottom { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes zoomIn { 0% { transform: scale(1.15); } 50% { transform: scale(1); } 100% { transform: scale(1.15); } } @keyframes zoomOut { 0% { transform: scale(0.8); } 50% { transform: scale(1); } 100% { transform: scale(0.8); } } @keyframes moveHorizontal { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(15px, 0, 0); transform: translate3d(15px, 0, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes moveHorizontal2 { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 50% { -webkit-transform: translate3d(-15px, 0, 0); transform: translate3d(-15px, 0, 0); } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @keyframes wobble-horizontal-hover { 16.65% { transform: translateX(5px); } 33.3% { transform: translateX(-3px); } 49.95% { transform: translateX(4px); } 66.6% { transform: translateX(-2px); } 83.25% { transform: translateX(1px); } 100% { transform: translateX(0); } } @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } @keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @keyframes flip { from { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); } 40% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 50px) rotate3d(0, 1, 0, -190deg); } 50% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 50px) rotate3d(0, 1, 0, -170deg); } 80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); } to { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); } } @keyframes smartMove { 0% { width: 0; } 15% { width: 100%; } 85% { opacity: 1; } 90% { width: 100%; opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes smartMove2 { 0% { width: 0; } 15% { width: 126px; } 85% { opacity: 1; } 90% { width: 126px; opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes smartMove3 { 0% { width: 0; } 15% { width: 173px; } 85% { opacity: 1; } 90% { width: 173px; opacity: 0; } 100% { width: 0; opacity: 0; } } @keyframes float-bob-y { 0% { -webkit-transform: translateY(0px) translateX(0px) rotate(0deg); transform: translateY(0px) translateX(0px) rotate(0deg); } 50% { -webkit-transform: translateY(10px) translateX(10px) rotate(5deg); transform: translateY(10px) translateX(10px) rotate(5deg); } 100% { -webkit-transform: translateY(0px) translateX(0px) rotate(0deg); transform: translateY(0px) translateX(0px) rotate(0deg); } } @keyframes rectMove { 0%, 50%, 100% { -webkit-transform: scale(1); transform: scale(1); } 25%, 75% { -webkit-transform: scale(0.8); transform: scale(0.8); } } @keyframes moveBackground { 0% { background-position: -1920px 100%; } 100% { background-position: 0 100%; } } @keyframes moveBackgroundY { 0% { background-position: 100% 1920px; } 100% { background-position: 100% 0; } } @keyframes slideTop { 49% { -webkit-transform: translateY(100%); transform: translateY(100%); } 50% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 51% { opacity: 1; } } @keyframes slideRight { 49% { -webkit-transform: translateX(100%); transform: translateX(100%); } 50% { opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } 51% { opacity: 1; } } @keyframes slideLeft { 49% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 50% { opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } 51% { opacity: 1; } } @keyframes animatedCircle { 0% { transform: translate(0px, 0px) rotate(0deg) scale(1); } 20% { transform: translate(73px, -1px) rotate(36deg) scale(0.9); } 40% { transform: translate(141px, 72px) rotate(72deg) scale(1); } 60% { transform: translate(83px, 122px) rotate(108deg) scale(1.2); } 80% { transform: translate(-40px, 72px) rotate(144deg) scale(1.1); } 100% { transform: translate(0px, 0px) rotate(0deg) scale(1); } } /*-------------------------------------------------------------- # Cards --------------------------------------------------------------*/ .video-one { position: relative; padding-bottom: 190px; } @media (max-width: 767px) { .video-one { padding-bottom: 170px; } } @media (max-width: 575px) { .video-one { padding-bottom: 150px; } } .video-one__bg { position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: top center; background-size: cover; } .video-one__bg::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: RGBA(var(--eolexi-black2-rgb, 22, 36, 82), 0.9); } .video-one .container { position: relative; z-index: 1; } .video-one__content { text-align: center; } .video-one .video-btn { margin: 0px auto 36px; } .video-one__title { margin-bottom: 15px; font-size: 35px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.314; } @media (max-width: 575px) { .video-one__title { font-size: 30px; } } .video-one__text { margin-bottom: 32px; color: var(--eolexi-white, #FFFFFF); } .video-one__button { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 30px; } .video-one .eolexi-btn--border { padding-top: 9px; padding-bottom: 9px; border-color: var(--eolexi-white, #FFFFFF); } .video-one .eolexi-btn--border:hover { border-color: var(--eolexi-base, #005b85); } .video-one .eolexi-btn--border .eolexi-btn__text { color: var(--eolexi-white, #FFFFFF); } .video-one .eolexi-btn--border .eolexi-btn__icon { color: var(--eolexi-base, #005b85); background-color: var(--eolexi-white, #FFFFFF); } .team-card { position: relative; padding-bottom: 39px; overflow: hidden; transition: all 500ms ease; } .team-card__shape { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; opacity: 0; background-color: var(--eolexi-base, #005b85); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%); transition: all 500ms ease; } .team-card:hover .team-card__shape { opacity: 1; } .team-card__image { position: relative; background-color: #E4E6E5; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); z-index: 1; } .team-card__image::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; opacity: 0; transform: translateY(-30%); background-color: RGBA(var(--eolexi-black7-rgb, 6, 6, 6), 0.65); clip-path: inherit; z-index: 1; transition: all 500ms ease; } .team-card__image img { width: 100%; display: block; } .team-card:hover .team-card__image::after { opacity: 1; transform: translateY(0%); } .team-card__social { padding-bottom: 15px; position: relative; position: absolute; top: -14px; left: -11px; z-index: 2; } .team-card__social__icon { width: 58px; height: 58px; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; background-color: var(--eolexi-black2, #162452); border: 2px solid var(--eolexi-white, #FFFFFF); transition: all 500ms ease; } .team-card__social__icon:hover { background-color: var(--eolexi-base, #005b85); } .team-card__social__icon::before, .team-card__social__icon::after { content: ""; width: 14px; height: 2px; background-color: var(--eolexi-white, #FFFFFF); display: block; position: absolute; top: calc(50% + 4px); left: calc(50% + 4px); transform: translate(-50%, -50%); transition: all 500ms ease; } .team-card__social__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .team-card__social:hover .team-card__social__icon::after { opacity: 0; } .team-card__social__links { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; position: absolute; top: 72px; left: 31px; visibility: hidden; opacity: 0; transform: translateY(50%); transition: all 500ms ease; } .team-card__social__links a { background-color: var(--eolexi-white, #FFFFFF); } .team-card__social__links a:hover { background-color: var(--eolexi-base, #005b85); } .team-card__social__links a .social-links__icon { color: var(--eolexi-base, #005b85); } .team-card__social__links a:hover .social-links__icon { color: var(--eolexi-white, #FFFFFF); } .team-card__social:hover .team-card__social__links { visibility: visible; opacity: 1; transform: translateY(0%); } .team-card__info { width: calc(100% - 46px); padding: 14px 20px 15px; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); text-align: center; background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-border-color, #dddddd); z-index: 2; } .team-card__name { margin-bottom: 6px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; text-transform: capitalize; line-height: 1.318; } .team-card__name a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .team-card__name a:hover { color: var(--eolexi-base, #005b85); } .team-card__name a:hover { background-size: 100% 1px; } .team-card__designation { margin: 0; font-size: 18px; text-transform: capitalize; line-height: 1.277; } .team-card-two { padding: 14px 14px 0px; position: relative; } .team-card-two__shape { width: 100%; height: calc(100% - 45px); background-color: var(--eolexi-white2, #F0F2F8); position: relative; position: absolute; top: 0px; left: 0px; -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: cover; mask-size: cover; } @media (max-width: 575px) { .team-card-two__shape { width: 451px; left: 50%; transform: translateX(-50%); } } @media (max-width: 480px) { .team-card-two__shape { width: 383px; } } @media (max-width: 412px) { .team-card-two__shape { width: 331px; } } @media (max-width: 360px) { .team-card-two__shape { width: 290px; } } .team-card-two__shape::before { content: ""; width: 100%; height: 100%; border-radius: 0px 0px 500px 500px; background-color: var(--eolexi-black2, #162452); position: absolute; top: -124px; left: -73px; transition: all 500ms ease; } .team-card-two:hover .team-card-two__shape::before { background-color: var(--eolexi-base, #005b85); } .team-card-two__inner { position: relative; z-index: 1; } .team-card-two__image { margin: 0px auto 30px; display: block; width: 342px !important; height: 342px; object-fit: cover; border-radius: 50%; } @media (min-width: 992px) and (max-width: 1199px) { .team-card-two__image { width: 262px !important; height: 262px; } } @media (min-width: 768px) and (max-width: 991px) { .team-card-two__image { width: 302px !important; height: 302px; } } @media (max-width: 767px) { .team-card-two__image { width: 482px !important; height: 482px; } } @media (max-width: 575px) { .team-card-two__image { width: 423px !important; height: 423px; } } @media (max-width: 480px) { .team-card-two__image { width: 355px !important; height: 355px; } } @media (max-width: 412px) { .team-card-two__image { width: 303px !important; height: 303px; } } @media (max-width: 360px) { .team-card-two__image { width: 262px !important; height: 262px; } } .team-card-two__info { position: relative; z-index: 1; margin: 0px auto; width: calc(100% - 32px); padding: 14px 30px 15px; display: flex; align-items: center; justify-content: space-between; gap: 30px; background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-border-color, #dddddd); transition: all 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .team-card-two__info { padding-left: 20px; padding-right: 20px; width: 100%; gap: 20px; } } @media (min-width: 768px) and (max-width: 991px) { .team-card-two__info { padding-left: 20px; padding-right: 20px; } } @media (max-width: 425px) { .team-card-two__info { padding-left: 20px; padding-right: 20px; } } @media (max-width: 412px) { .team-card-two__info { width: calc(100% - 12px); gap: 20px; } } .team-card-two__info::after { content: ""; width: 0%; height: 100%; position: absolute; top: 0px; right: 0px; z-index: -1; background-color: var(--eolexi-black2, #162452); transition: all 500ms ease; } .team-card-two:hover .team-card-two__info { border-color: var(--eolexi-black2, #162452); } .team-card-two:hover .team-card-two__info::after { width: 100%; left: 0px; } .team-card-two__name { margin-bottom: 6px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; text-transform: capitalize; line-height: 1.318; } @media (min-width: 768px) and (max-width: 1199px) { .team-card-two__name { font-size: 18px; } } @media (max-width: 412px) { .team-card-two__name { font-size: 20px; } } @media (max-width: 375px) { .team-card-two__name { font-size: 18px; } } .team-card-two__name a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .team-card-two__name a:hover { background-size: 100% 1px; } .team-card-two__designation { margin: 0; font-size: 18px; text-transform: capitalize; line-height: 1.277; transition: all 500ms ease; } @media (min-width: 768px) and (max-width: 1199px) { .team-card-two__designation { font-size: 16px; } } @media (max-width: 412px) { .team-card-two__designation { font-size: 16px; } } .team-card-two:hover .team-card-two__name, .team-card-two:hover .team-card-two__designation { color: var(--eolexi-white, #FFFFFF); } .team-card-two__social { position: relative; } .team-card-two__social::before { content: ""; width: 40px; height: 50px; position: absolute; top: -48px; left: 0px; } .team-card-two__social__icon { width: 40px; height: 40px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; background-color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .team-card-two__social__icon::before, .team-card-two__social__icon::after { content: ""; width: 14px; height: 2px; background-color: var(--eolexi-white, #FFFFFF); display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 500ms ease; } .team-card-two__social__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .team-card-two__social:hover .team-card-two__social__icon::after { opacity: 0; } .team-card-two__social__links { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; position: absolute; left: 50%; bottom: 82px; visibility: hidden; opacity: 0; transform: translateX(-50%) translateY(-40%); z-index: 1; transition: all 500ms ease; } .team-card-two__social__links a { background-color: var(--eolexi-black2, #162452); } .team-card-two__social__links a:hover { background-color: var(--eolexi-base, #005b85); } .team-card-two__social__links a .social-links__icon { color: var(--eolexi-white, #FFFFFF); } .team-card-two__social__links a:hover .social-links__icon { color: var(--eolexi-white, #FFFFFF); } .team-card-two__social:hover .team-card-two__social__links { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0%); } .team-card-two:hover .team-card-two__social__icon { background-color: var(--eolexi-white, #FFFFFF); } .team-card-two:hover .team-card-two__social__icon::before, .team-card-two:hover .team-card-two__social__icon::after { background-color: var(--eolexi-base, #005b85); } .team-one, .team-two { background-color: var(--eolexi-white, #FFFFFF); } /* team details */ .team-details { background-color: var(--eolexi-white, #FFFFFF); } .team-details__image img { max-width: 100%; height: auto; } .team-details__info li + li { margin-top: 30px; } .team-details__info li { display: flex; align-items: flex-start; gap: 15px 35px; } @media (max-width: 575px) { .team-details__info li { flex-direction: column; } } .team-details__info__title { margin: 0px; font-size: 22px; line-height: 1.272; font-weight: 700; text-transform: capitalize; } .team-details__info__content { flex-grow: 1; } @media (max-width: 575px) { .team-details__info__content { width: 100%; padding-left: 15px; } } .team-details__info__about { margin-bottom: -13px; } .team-details__info__about .team-details__info__title { margin-bottom: 5px; } .team-details__info__designation { margin-bottom: 10px; } .team-details__info__text { margin: 0px; } .team-details__info__skill { padding-left: 14px; } .team-details__personal { padding-bottom: 116px; border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 767px) { .team-details__personal { padding-bottom: 96px; } } @media (max-width: 575px) { .team-details__personal { padding-bottom: 76px; } } .team-details__personal__title { margin-bottom: 12px; font-size: 22px; font-weight: 700; line-height: 1.272; } .team-details__personal__text { margin: 0px; } .team-details__personal__text + .team-details__personal__text { margin-top: 15px; } .blog-card { position: relative; overflow: hidden; background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-border-color, #dddddd); transition: all 500ms ease; } .blog-card__image { padding: 10px 10px 0px; } .blog-card__image__inner { position: relative; overflow: hidden; } .blog-card__image img { width: 100%; display: block; transition: all 500ms ease; } .blog-card__image__link { width: 100%; height: 100%; background-color: rgba(var(--eolexi-black2-rgb, 22, 36, 82), 0.5); position: relative; position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(-10%); transition: opacity 500ms ease, transform 500ms ease; } .blog-card__image__link::before, .blog-card__image__link::after { content: ""; width: 32px; height: 2px; background-color: var(--eolexi-white, #FFFFFF); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .blog-card__image__link::after { transform: translate(-50%, -50%) rotate(90deg); } .blog-card:hover .blog-card__image__link { opacity: 1; transform: translateY(0); } .blog-card__meta { display: flex; } @media (min-width: 768px) and (max-width: 1199px) { .blog-card__meta { display: block; } } @media (max-width: 412px) { .blog-card__meta { display: block; } } .blog-card__meta__list { margin: 0px; padding-left: 15px; flex-grow: 1; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } @media (min-width: 768px) and (max-width: 1199px) { .blog-card__meta__list { padding: 12px 23.5px; } } @media (max-width: 412px) { .blog-card__meta__list { padding: 12px 23.5px; } } .blog-card__meta__list li { display: flex; align-items: center; gap: 6px; font-family: var(--eolexi-font2, "Sora", serif); font-size: 14px; color: var(--eolexi-text, #636363); } .blog-card__meta__list li a { color: inherit; } .blog-card__meta__list li a:hover { color: var(--eolexi-base, #005b85); } .blog-card__meta__icon { position: relative; top: -1px; display: inline-flex; font-size: 16px; color: var(--eolexi-text, #636363); } .blog-card__meta__icon svg { width: 1em; height: 1em; fill: currentColor; } .blog-card__category { padding: 8.15px 20px; display: inline-block; flex-shrink: 0; background-color: var(--eolexi-black2, #162452); font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 14px; color: var(--eolexi-white, #FFFFFF); font-weight: 500; text-transform: uppercase; transition: all 500ms ease; } @media (min-width: 576px) and (max-width: 767px) { .blog-card__category { padding-left: 23.5px; padding-right: 23.5px; } } @media (min-width: 768px) and (max-width: 1199px) { .blog-card__category { padding-left: 23.5px; padding-right: 23.5px; } } @media (max-width: 430px) { .blog-card__category { padding-left: 23.5px; padding-right: 23.5px; } } .blog-card__category:hover { background-color: var(--eolexi-base, #005b85); } .blog-card__content { position: relative; padding: 25px 23.5px 29px; z-index: 1; } .blog-card__title { margin-bottom: 19px; font-size: 22px; font-weight: 700; color: var(--eolexi-black, #222222); line-height: 1.318; } @media (min-width: 992px) and (max-width: 1199px) { .blog-card__title { font-size: 20px; } } @media (max-width: 360px) { .blog-card__title { font-size: 20px; } } .blog-card__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-card__title a:hover { color: var(--eolexi-base, #005b85); } .blog-card__title a:hover { background-size: 100% 1px; } .blog-card__border { width: 127px; height: 1px; position: relative; margin-bottom: 15px; background-color: var(--eolexi-border-color, #dddddd); } .blog-card__border::before { content: ""; width: 0%; height: 100%; background-color: var(--eolexi-base, #005b85); position: absolute; top: 0px; right: 0px; transition: all 500ms ease; } .blog-card__border::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: var(--eolexi-base, #005b85); position: absolute; top: 50%; right: -6px; transform: translateY(-50%); } .blog-card:hover .blog-card__border::before { width: 100%; left: 0px; } .blog-card__text { margin-bottom: 22px; font-size: 18px; line-height: 1.444; } @media (min-width: 992px) and (max-width: 1199px) { .blog-card .eolexi-btn { padding-left: 25px; } } @media (min-width: 992px) and (max-width: 1199px) { .blog-card .eolexi-btn__text { font-size: 14px; } } @media (min-width: 992px) and (max-width: 1199px) { .blog-card .eolexi-btn__icon { width: 30px; height: 30px; font-size: 12px; } } .blog-card__shape { width: 123px; height: 123px; display: flex; align-items: center; justify-content: center; background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.3); border-radius: 50%; position: relative; position: absolute; right: -46px; bottom: -50px; opacity: 0; transform: translateX(100%); transition: all 500ms ease; } .blog-card__shape::after { content: ""; width: calc(100% - 40px); height: calc(100% - 40px); border-radius: 50%; background-color: var(--eolexi-base, #005b85); } .blog-card:hover .blog-card__shape { opacity: 1; transform: translateX(0%); } .blog-card-two { position: relative; overflow: hidden; background-color: var(--eolexi-white2, #F0F2F8); z-index: 1; } .blog-card-two::after { content: ""; width: 100%; height: 0%; position: absolute; left: 0px; bottom: 0px; background-color: var(--eolexi-black2, #162452); z-index: -1; transition: all 500ms ease; } .blog-card-two:hover::after { height: 100%; top: 0px; } .blog-card-two__top { display: grid; grid-template-columns: 39px auto; } .blog-card-two__top__left { display: flex; writing-mode: sideways-lr; } .blog-card-two__category { width: 100%; padding: 22px 8.15px; display: inline-block; flex-shrink: 0; background-color: var(--eolexi-black2, #162452); font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 14px; color: var(--eolexi-white, #FFFFFF); font-weight: 500; text-transform: uppercase; transition: all 500ms ease; } .blog-card-two:hover .blog-card-two__category { background-color: var(--eolexi-base, #005b85); } .blog-card-two__date { width: 100%; position: relative; padding: 15px 8.15px; display: flex; align-items: center; justify-content: center; flex-grow: 1; gap: 8px; font-size: 14px; color: var(--eolexi-black3, #000000); font-weight: 700; text-transform: capitalize; background-color: var(--eolexi-white, #FFFFFF); } .blog-card-two__date::before { content: ""; width: 100%; height: 1px; background-color: var(--eolexi-border-color, #dddddd); position: absolute; top: 0px; left: 0px; } .blog-card-two__date::after { content: ""; width: 1px; height: 100%; background-color: var(--eolexi-border-color, #dddddd); position: absolute; top: 0px; left: 0px; } .blog-card-two__date__icon { display: inline-flex; font-size: 14px; color: var(--eolexi-black3, #000000); } .blog-card-two__date__icon svg { width: 1em; height: 1em; fill: currentColor; } .blog-card-two__image { position: relative; overflow: hidden; } .blog-card-two__image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: all 600ms cubic-bezier(0, 0, 0.44, 1.18); } .blog-card-two__image__link { width: 100%; height: 100%; background-color: rgba(var(--eolexi-black2-rgb, 22, 36, 82), 0.6); position: relative; position: absolute; right: -100%; bottom: -100%; opacity: 0; transition: all 600ms ease; } .blog-card-two__image__link::before, .blog-card-two__image__link::after { content: ""; width: 32px; height: 2px; background-color: var(--eolexi-white, #FFFFFF); position: absolute; top: 50%; left: 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 img { transform: scale(1.1); } .blog-card-two:hover .blog-card-two__image__link { right: 0%; bottom: 0%; opacity: 1; } .blog-card-two__content { padding: 0px 30px 0px; text-align: center; } @media (min-width: 992px) and (max-width: 1199px) { .blog-card-two__content { padding: 0px 20px 0px; } } @media (max-width: 390px) { .blog-card-two__content { padding: 0px 20px 0px; } } .blog-card-two__meta { margin-bottom: 15px; padding: 12px 25px; display: flex; align-items: center; justify-content: center; gap: 12px 15px; border-radius: 0px 0px 100px 100px; background-color: var(--eolexi-white, #FFFFFF); transition: all 500ms ease; } @media (min-width: 768px) and (max-width: 1199px) { .blog-card-two__meta { flex-direction: column; border-radius: 0px 0px 10px 10px; } } @media (max-width: 412px) { .blog-card-two__meta { flex-direction: column; border-radius: 0px 0px 10px 10px; } } .blog-card-two__meta li { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--eolexi-text, #636363); } .blog-card-two__meta li a { color: inherit; } .blog-card-two__meta__icon { position: relative; top: -1px; display: inline-flex; font-size: 16px; color: var(--eolexi-text, #636363); transition: all 500ms ease; } .blog-card-two__meta__icon svg { width: 1em; height: 1em; fill: currentColor; } .blog-card-two:hover .blog-card-two__meta { background-color: var(--eolexi-base, #005b85); } .blog-card-two:hover .blog-card-two__meta li, .blog-card-two:hover .blog-card-two__meta__icon { color: var(--eolexi-white, #FFFFFF); } .blog-card-two__title { margin-bottom: 14px; font-size: 22px; font-weight: 700; color: var(--eolexi-black, #222222); line-height: 1.318; } @media (min-width: 768px) and (max-width: 1199px) { .blog-card-two__title { font-size: 20px; } } @media (max-width: 390px) { .blog-card-two__title { font-size: 20px; } } .blog-card-two__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-card-two__title a:hover { color: var(--eolexi-base, #005b85); } .blog-card-two__title a:hover { background-size: 100% 1px; } .blog-card-two__text { margin: 0px; padding-bottom: 23px; font-size: 18px; line-height: 1.444; transition: all 500ms ease; } @media (max-width: 1199px) { .blog-card-two__text { font-size: 16px; } } .blog-card-two:hover .blog-card-two__title, .blog-card-two:hover .blog-card-two__text { color: var(--eolexi-white, #FFFFFF); } .blog-card-two__button { padding-bottom: 30px; } .blog-card-three { position: relative; overflow: hidden; z-index: 1; background-color: var(--eolexi-white2, #F0F2F8); } .blog-card-three__image { position: relative; width: 0; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; background-repeat: no-repeat; background-position: top center; background-size: cover; transition: 600ms; } .blog-card-three__image::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: RGBA(var(--eolexi-black2-rgb, 22, 36, 82), 0.8); } .blog-card-three:hover .blog-card-three__image { width: 100%; visibility: visible; } .blog-card-three__content { position: relative; padding: 50px 33px; z-index: 1; } @media (min-width: 992px) and (max-width: 1199px) { .blog-card-three__content { padding: 40px 25px; } } @media (max-width: 412px) { .blog-card-three__content { padding: 40px 25px; } } .blog-card-three__top { margin-bottom: 28px; display: flex; align-items: center; gap: 15px 0px; } @media (min-width: 992px) and (max-width: 1199px) { .blog-card-three__top { flex-direction: column; align-items: flex-start; } } @media (max-width: 390px) { .blog-card-three__top { flex-direction: column; align-items: flex-start; } } .blog-card-three__date { position: relative; padding: 8.15px 15px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: var(--eolexi-black3, #000000); font-weight: 700; text-transform: capitalize; border: 1px solid var(--eolexi-border-color, #dddddd); transition: all 500ms ease; } .blog-card-three__date__icon { position: relative; top: -1px; display: inline-flex; font-size: 14px; color: var(--eolexi-black3, #000000); transition: all 500ms ease; } .blog-card-three__date__icon svg { width: 1em; height: 1em; fill: currentColor; } .blog-card-three__category { padding: 9.15px 25px; display: inline-block; background-color: var(--eolexi-black2, #162452); font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 14px; color: var(--eolexi-white, #FFFFFF); font-weight: 500; text-transform: uppercase; transition: all 500ms ease; } .blog-card-three:hover .blog-card-three__category { background-color: var(--eolexi-base, #005b85); } .blog-card-three__meta { margin-bottom: 22px; display: flex; align-items: center; gap: 12px 15px; transition: all 500ms ease; } .blog-card-three__meta li { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--eolexi-text, #636363); } .blog-card-three__meta li a { color: inherit; } .blog-card-three__meta li a:hover { color: var(--eolexi-base, #005b85); } .blog-card-three__meta__icon { position: relative; top: -1px; display: inline-flex; font-size: 16px; color: var(--eolexi-text, #636363); transition: all 500ms ease; } .blog-card-three__meta__icon svg { width: 1em; height: 1em; fill: currentColor; } .blog-card-three__border { margin-bottom: 18px; position: relative; width: 127px; height: 1px; background-color: var(--eolexi-border-color, #dddddd); transition: all 500ms ease; } .blog-card-three__border::after { content: ""; width: 7px; height: 7px; position: absolute; top: -3.5px; left: 0px; border-radius: 50%; background-color: var(--eolexi-base, #005b85); animation: blog03Border 6s linear infinite; } @keyframes blog03Border { 0% { left: 0px; } 50% { left: calc(100% - 7px); } 100% { left: 0px; } } .blog-card-three:hover .blog-card-three__border { background-color: var(--eolexi-base, #005b85); } .blog-card-three__title { margin-bottom: 14px; font-size: 22px; font-weight: 700; color: var(--eolexi-black, #222222); line-height: 1.318; } @media (min-width: 768px) and (max-width: 1199px) { .blog-card-three__title { font-size: 20px; } } @media (max-width: 390px) { .blog-card-three__title { font-size: 20px; } } .blog-card-three__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-card-three__title a:hover { color: var(--eolexi-base, #005b85); } .blog-card-three__title a:hover { background-size: 100% 1px; } .blog-card-three__text { margin: 0px; padding-bottom: 23px; font-size: 18px; line-height: 1.444; transition: all 500ms ease; } @media (max-width: 1199px) { .blog-card-three__text { font-size: 16px; } } .blog-card-three:hover .blog-card-three__date, .blog-card-three:hover .blog-card-three__date__icon, .blog-card-three:hover .blog-card-three__meta li, .blog-card-three:hover .blog-card-three__meta__icon, .blog-card-three:hover .blog-card-three__title, .blog-card-three:hover .blog-card-three__text { color: var(--eolexi-white, #FFFFFF); } .blog-card-three .eolexi-btn { border: 1px solid var(--eolexi-base, #005b85); } @media (max-width: 1199px) { .blog-card-three .eolexi-btn { padding: 8px 8px 8px 25px; } .blog-card-three .eolexi-btn .eolexi-btn__text { font-size: 14px; } .blog-card-three .eolexi-btn .eolexi-btn__icon { width: 30px; height: 30px; font-size: 12px; } } .blog-card-three .eolexi-btn:hover { border-color: var(--eolexi-base, #005b85) !important; } .blog-card-three:hover .eolexi-btn { border-color: var(--eolexi-white, #FFFFFF); } .blog-card-four__image { margin-bottom: 30px; } .blog-card-four__image img { width: 100%; display: block; } .blog-card-four__meta { margin-bottom: 21px; display: flex; align-items: center; flex-wrap: wrap; gap: 15px 25px; } .blog-card-four__category { padding: 7px 25px; font-size: 17px; line-height: 1.25; } .blog-card-four__info { display: flex; align-items: center; } .blog-card-four__info__text { margin: 0; position: relative; font-family: var(--eolexi-font, "DM Sans", serif); font-size: 16px; color: var(--eolexi-text, #636363); font-weight: 400; text-transform: capitalize; } .blog-card-four__info__text:not(:last-child)::after { content: "/"; margin-left: 6px; margin-right: 6px; font-size: 16px; color: var(--eolexi-text, #636363); font-weight: 400; } .blog-card-four__info__text a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-card-four__info__text a:hover { color: var(--eolexi-base, #005b85); } .blog-card-four__info__text a:hover { background-size: 100% 1px; } .blog-card-four__comment { display: flex; align-items: center; gap: 10px; } .blog-card-four__comment__icon { display: inline-flex; flex-shrink: 0; font-size: 16px; color: var(--eolexi-text, #636363); } .blog-card-four__comment__icon svg { width: 1em; height: 1em; fill: currentColor; } .blog-card-four__comment__text { color: var(--eolexi-text, #636363); text-transform: capitalize; transition: all 500ms ease; } .blog-card-four__comment__text:hover { color: var(--eolexi-base, #005b85); } .blog-card-four__title { margin-bottom: 14px; font-size: 22px; font-weight: 700; line-height: 1.318; } .blog-card-four__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-card-four__title a:hover { color: var(--eolexi-base, #005b85); } .blog-card-four__title a:hover { background-size: 100% 1px; } .blog-card-four__text { margin-bottom: 28px; } .blog-one, .blog-two, .blog-three { background-color: var(--eolexi-white, #FFFFFF); } .blog-page .post-pagination { justify-content: center; } .blog-page--sidebar .post-pagination { justify-content: flex-start; } @media (max-width: 991px) { .blog-page--sidebar .post-pagination { justify-content: center; } } /*-------------------------------------------------------------- # Topbar --------------------------------------------------------------*/ .topbar { background-color: var(--eolexi-black2, #162452); } @media (max-width: 360px) { .topbar { display: none; } } @media (min-width: 1200px) { .topbar .container { max-width: 1600px; } } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; } @media (max-width: 991px) { .topbar__inner { padding: 12px 0px; } } .topbar__info { margin: 0; display: flex; align-items: center; gap: 28px; } @media (max-width: 991px) { .topbar__info { display: none; } } .topbar__info li { display: flex; align-items: center; gap: 19px; font-size: 14px; color: var(--eolexi-white, #FFFFFF); line-height: 1.285; } .topbar__info li a { color: inherit; } .topbar__info li a:hover { color: var(--eolexi-base, #005b85); } .topbar__info__icon { width: 41px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); } .topbar__info__icon svg { width: 1em; height: 1em; fill: currentColor; } .topbar__right { display: flex; align-items: center; gap: 10px; } @media (max-width: 991px) { .topbar__right { width: 100%; justify-content: space-between; } } .topbar__links { position: relative; margin: 0; display: flex; align-items: center; } .topbar__links li { position: relative; font-size: 14px; color: var(--eolexi-text-gray, #C5C5C5); line-height: 1.285; } .topbar__links li:not(:first-child)::before { content: "|"; display: none; margin-left: 9px; margin-right: 9px; font-size: 20px; color: currentColor; } @media (max-width: 991px) { .topbar__links li:not(:first-child)::before { display: inline-block; } } .topbar__links li::after { content: "|"; margin-left: 9px; margin-right: 9px; font-size: 20px; color: currentColor; } @media (max-width: 991px) { .topbar__links li::after { display: none; } } .topbar__links li a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .topbar__links li a:hover { background-size: 100% 1px; } .topbar__links li a:hover { color: var(--eolexi-white, #FFFFFF); } .topbar__language { display: flex; align-items: center; } .topbar__language img { width: 26px; height: 26px; border-radius: 50%; margin-right: 12px; } .topbar__language .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: auto; min-width: 70px; } .topbar__language .bootstrap-select > .dropdown-toggle { padding: 0; background-color: transparent; border-radius: 0; border: none; outline: none !important; font-size: 14px; color: var(--eolexi-text-gray, #C5C5C5); line-height: 1.285; } .topbar__language .bootstrap-select > .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border: solid var(--eolexi-base, #005b85); border-width: 0 2px 2px 0; padding: 3px; margin-top: -6px; transform: rotate(45deg); -webkit-transform: rotate(45deg); } .topbar__language .bootstrap-select .dropdown-menu li a { font-size: 14px; } .topbar--two { background-color: transparent; } @media (max-width: 767px) { .topbar--two { display: none; } } @media (min-width: 1200px) { .topbar--two .container { max-width: 1200px; } } .topbar--two .topbar__inner { padding: 14px 0px; } .topbar--two .topbar__text { margin: 0px; font-size: 14px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; } @media (max-width: 991px) { .topbar--two .topbar__text { display: none; } } .topbar--two .topbar__info { display: flex; gap: 21px; } @media (max-width: 991px) { .topbar--two .topbar__info { width: 100%; justify-content: center; } } .topbar--two .topbar__info li { gap: 10px; font-weight: 700; } .topbar--two .topbar__info li a:hover { color: var(--eolexi-white, #FFFFFF); } .topbar--two .topbar__info__icon { width: auto; height: auto; background-color: transparent; } /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ .main-header { position: relative; z-index: 999; } @media (min-width: 1200px) { .main-header__container { max-width: 1600px; } } .main-header__inner { padding: 0px 30px; position: relative; display: flex; align-items: center; justify-content: space-between; background-color: var(--eolexi-white, #FFFFFF); } @media (max-width: 1399px) { .main-header__inner { padding: 0px 20px; } } @media (max-width: 1199px) { .main-header__inner { padding: 20px; } } @media (max-width: 360px) { .main-header__inner { padding: 20px 0px; } } @media (max-width: 375px) { .main-header__logo { margin-right: 20px; } } .main-header__logo img { max-width: 100%; height: auto; } .main-header__right { display: flex; align-items: center; justify-content: flex-end; } .main-header__nav { margin-right: 30px; } @media (max-width: 1199px) { .main-header__nav { display: none; } } .main-header__search { display: inline-flex; position: relative; font-size: 26px; color: var(--eolexi-black5, #151316); transition: all 500ms ease; } @media (max-width: 1199px) { .main-header__search { margin-left: 50px; } } @media (max-width: 430px) { .main-header__search { margin-left: 40px; } } .main-header__search:hover { color: var(--eolexi-base, #005b85); } .main-header__search::before { content: ""; display: none; width: 1px; height: 100%; position: absolute; top: 50%; left: -25px; transform: translateY(-50%); background-color: RGBA(var(--eolexi-black-rgb, 34, 34, 34), 0.2); } @media (max-width: 1199px) { .main-header__search::before { display: inline-block; } } @media (max-width: 430px) { .main-header__search::before { left: -20px; } } .main-header__search svg { width: 1em; height: 1em; fill: currentColor; } .main-header__btn { margin-left: 39px; } @media (min-width: 1200px) and (max-width: 1299px) { .main-header__btn { margin-left: 30px; } } @media (max-width: 991px) { .main-header__btn { margin-left: 30px; } } @media (max-width: 767px) { .main-header__btn { display: none; } } .main-header--two { width: 100%; position: absolute; top: 40px; left: 0px; } @media (max-width: 1599px) { .main-header--two { top: 30px; } } @media (max-width: 575px) { .main-header--two { top: 15px; } } @media (min-width: 1200px) { .main-header--two .main-header__container { max-width: 1620px; } } .main-header--two .main-header__inner { padding-left: 60px; padding-right: 60px; background-color: var(--eolexi-black2, #162452); border-radius: 200px; } @media (max-width: 1599px) { .main-header--two .main-header__inner { padding-left: 50px; padding-right: 50px; } } @media (max-width: 1399px) { .main-header--two .main-header__inner { padding-left: 30px; padding-right: 30px; } } @media (max-width: 1199px) { .main-header--two .main-header__inner { padding: 15px 30px; } } @media (max-width: 430px) { .main-header--two .main-header__inner { padding-left: 25px; padding-right: 25px; } } @media (max-width: 425px) { .main-header--two .main-header__logo { margin-right: 20px; } } .main-header--two .mobile-nav__btn span { background-color: var(--eolexi-white, #FFFFFF); } .main-header--two .main-menu .main-menu__list > li > a, .main-header--two .main-menu .main-menu__list > li.megamenu > a::after, .main-header--two .main-menu .main-menu__list > li.dropdown > a::after, .main-header--two .main-header__search { color: var(--eolexi-white, #FFFFFF); } .main-header--two .main-menu .main-menu__list > li.current > a::after { color: var(--eolexi-base, #005b85); } .main-header--two .main-header__search::before { background-color: RGBA(var(--eolexi-white-rgb, 255, 255, 255), 0.4); } @media (min-width: 1200px) and (max-width: 1299px) { .main-header--two .eolexi-btn { display: none; } } .main-header--two .eolexi-btn::after { background-color: var(--eolexi-white, #FFFFFF); } .main-header--two .eolexi-btn:hover .eolexi-btn__text { color: var(--eolexi-black2, #162452); } .main-header--three { background-color: var(--eolexi-white, #FFFFFF); } @media (min-width: 1200px) { .main-header--three .main-header__container { max-width: 1528px; } } .main-header--three .main-header__inner { padding: 0px 15px; background-color: transparent; } @media (max-width: 1199px) { .main-header--three .main-header__inner { padding: 20px 0px; } } .main-header--three .main-menu .main-menu__list > li { padding-top: 45px; padding-bottom: 45px; } .header-three { width: 100%; max-width: 1609px; padding: 0px 10px 0px; margin: 0px auto; position: absolute; top: 0px; left: 0px; right: 0px; background-color: var(--eolexi-base, #005b85); z-index: 999; } @media (max-width: 767px) { .header-three { padding: 0px; background-color: var(--eolexi-white, #FFFFFF); } } .sticky-header--cloned { position: fixed; top: 0; left: 0; right: 0; z-index: 999; top: 0; background-color: var(--eolexi-white, #FFFFFF); transform: translateY(-100%); box-shadow: 0px 3px 18px rgba(var(--eolexi-black-rgb, 34, 34, 34), 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; } .sticky-header--cloned.main-header--two { background-color: var(--eolexi-black2, #162452); } .mobile-nav__btn { width: 26px; display: flex; align-items: center; flex-direction: column; flex-wrap: wrap; cursor: pointer; z-index: 3; } @media (min-width: 1200px) { .mobile-nav__btn { display: none; } } .mobile-nav__btn span { width: 100%; height: 2px; background-color: var(--eolexi-black5, #151316); transition: all 500ms ease; } .mobile-nav__btn span:nth-child(2) { margin-top: 5px; margin-bottom: 5px; } .mobile-nav__btn:hover span { background-color: var(--eolexi-base, #005b85); } .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 { position: relative; padding-top: 48px; padding-bottom: 48px; } .main-menu .main-menu__list > li.dropdown > a { position: relative; } .main-menu .main-menu__list > li + li { margin-left: 41px; } @media (min-width: 1200px) and (max-width: 1299px) { .main-menu .main-menu__list > li + li { margin-left: 30px; } } @media (min-width: 1300px) and (max-width: 1399px) { .main-menu .main-menu__list > li + li { margin-left: 35px; } } .main-menu .main-menu__list > li > a { position: relative; font-size: 16px; display: flex; align-items: center; color: var(--eolexi-black4, #333333); line-height: 1.25; font-weight: 500; text-transform: capitalize; transition: all 500ms ease; } .main-menu .main-menu__list > li.current > a, .main-menu .main-menu__list > li:hover > a { color: var(--eolexi-base, #005b85); } .main-menu .main-menu__list > li.megamenu > a, .main-menu .main-menu__list > li.dropdown > a { padding-right: 15px; } .main-menu .main-menu__list > li.megamenu > a::after, .main-menu .main-menu__list > li.dropdown > a::after { content: "\f078"; position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-family: "Font Awesome 5 Free"; font-size: 10px; font-weight: 700; color: var(--eolexi-black4, #333333); transition: all 500ms ease; } .main-menu .main-menu__list > li.current > a::after, .main-menu .main-menu__list > li.megamenu:hover > a::after, .main-menu .main-menu__list > li.dropdown:hover > a::after { color: var(--eolexi-base, #005b85); } .main-menu .main-menu__list li ul { position: absolute; top: 100%; left: -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(--eolexi-white, #FFFFFF); box-shadow: 0px 10px 60px 0px RGBA(var(--eolexi-white-rgb, 255, 255, 255), 0.07); 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; left: 0 !important; right: 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-family: var(--eolexi-font, "DM Sans", serif); font-size: 15px; line-height: 26px; color: var(--eolexi-black, #222222); font-weight: 500; display: flex; text-transform: capitalize; padding: 8px 15px; transition: 400ms; margin-bottom: 4px; } .main-menu .main-menu__list li ul li > a::after { position: absolute; right: 15px; top: 8px; border-radius: 0; font-size: 6px; font-weight: 700; font-family: "Font Awesome 5 Free"; content: "\f45c"; color: var(--eolexi-white, #FFFFFF); visibility: hidden; opacity: 0; transition: all 500ms ease; transform: scale(0); } .main-menu .main-menu__list li ul li.current > a, .main-menu .main-menu__list li ul li:hover > a { background-color: var(--eolexi-base, #005b85); color: var(--eolexi-white, #FFFFFF); } .main-menu .main-menu__list li ul li.current > a::after, .main-menu .main-menu__list li ul li:hover > a::after { visibility: visible; opacity: 1; transform: scale(1); } .main-menu .main-menu__list li ul li > ul { top: 0; left: calc(100% + 20px); } .main-menu .main-menu__list li ul li > ul.right-align { top: 0; left: auto; right: 100%; } .main-menu .main-menu__list li ul li > ul ul { display: none; } @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 { left: auto; right: 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; left: 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(--eolexi-white, #FFFFFF); 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-left: 15px; padding-right: 15px; } .megamenu-popup { position: relative; } .megamenu-popup .megamenu-clickable--close { position: absolute; top: 18px; right: 20px; display: block; color: var(--eolexi-black, #222222); } @media (min-width: 1300px) { .megamenu-popup .megamenu-clickable--close { top: 38px; right: 40px; } } .megamenu-popup .megamenu-clickable--close:hover { color: var(--eolexi-base, #005b85); } .megamenu-popup .megamenu-clickable--close .icon-close { width: 24px; height: 24px; display: block; position: relative; color: currentColor; transition: all 500ms ease; } .megamenu-popup .megamenu-clickable--close .icon-close::before, .megamenu-popup .megamenu-clickable--close .icon-close::after { content: ""; width: 100%; height: 2px; background-color: currentColor; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); } .megamenu-popup .megamenu-clickable--close .icon-close::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(--eolexi-white, #FFFFFF); box-shadow: 0px 10px 60px 0px rgba(var(--eolexi-black3-rgb, 0, 0, 0), 0.1); text-align: center; transition: 500ms ease; transform: translateY(0px); } .demo-one__card:hover { transform: translateY(-10px); } .demo-one__title { margin: 0; font-family: var(--eolexi-font, "DM Sans", serif); text-transform: capitalize; font-size: 15px; color: var(--eolexi-black4, #333333); font-weight: 700; } .demo-one__title:hover { color: var(--eolexi-base, #005b85); } .demo-one__title a { color: inherit; background: linear-gradient(to right, 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(--eolexi-black2-rgb, 22, 36, 82), 0.7); position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 20px; transform: scale(1, 0); transform-origin: bottom center; opacity: 0; transition: transform 500ms ease, opacity 600ms linear; } @media (min-width: 768px) and (max-width: 1199px) { .demo-one__btns { flex-direction: column; } } @media (max-width: 412px) { .demo-one__btns { flex-direction: column; } } .demo-one__card:hover .demo-one__btns { transform: scale(1, 1); opacity: 1; transform-origin: top center; } .demo-one .eolexi-btn { padding-left: 20px; gap: 24px; } @media (min-width: 768px) and (max-width: 1199px) { .demo-one .eolexi-btn { min-width: 169px; padding-left: 25px; justify-content: space-between; } } @media (max-width: 412px) { .demo-one .eolexi-btn { min-width: 169px; padding-left: 25px; justify-content: space-between; } } .demo-one .eolexi-btn::after { background-color: var(--eolexi-white, #FFFFFF); } .demo-one .eolexi-btn__text { font-size: 14px; } .demo-one .eolexi-btn:hover .eolexi-btn__text { color: var(--eolexi-black2, #162452); } .demo-one .eolexi-btn__icon { width: 30px; height: 30px; font-size: 12px; } .demo-one__title { padding-top: 19.5px; padding-bottom: 21.5px; } .home-showcase .row { --bs-gutter-x: 30px; --bs-gutter-y: 20px; } .home-showcase__inner { padding: 40px 40px 21px; background-color: var(--eolexi-white, #FFFFFF); box-shadow: 0px 10px 60px 0px rgba(var(--eolexi-black3-rgb, 0, 0, 0), 0.07); } .home-showcase .demo-one__card { box-shadow: none; background-color: var(--eolexi-white, #FFFFFF); } .home-showcase .demo-one__btns { flex-direction: column; } .home-showcase .eolexi-btn { min-width: 169px; padding-left: 25px; justify-content: space-between; gap: 24px; } .home-showcase .eolexi-btn::after { background-color: var(--eolexi-white, #FFFFFF); } .home-showcase .eolexi-btn__text { font-size: 14px; } .home-showcase .eolexi-btn:hover .eolexi-btn__text { color: var(--eolexi-black2, #162452); } .home-showcase .eolexi-btn__icon { width: 30px; height: 30px; font-size: 12px; } .home-showcase .demo-one__title { padding: 0; font-family: var(--eolexi-font, "DM Sans", serif); font-weight: 700; font-size: 15px; margin-top: 15px; padding-bottom: 15px; } /*-------------------------------------------------------------- # Mobile Nav --------------------------------------------------------------*/ .mobile-nav__wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; transform: translateX(-100%); transform-origin: left center; transition: transform 500ms ease 500ms, visibility 500ms ease 500ms; visibility: hidden; position: fixed; } .mobile-nav__wrapper .container { padding-left: 0; padding-right: 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(--eolexi-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(--eolexi-white, #FFFFFF); } .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; left: 0; right: 0; bottom: 0; background-color: #000000; opacity: 0.7; cursor: url(../images/close.png), auto; } .mobile-nav__content { width: 300px; background-color: var(--eolexi-black2, #162452); z-index: 10; position: relative; height: 100%; overflow-y: auto; padding: 60px 15px 30px; 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 { display: inline-flex; position: absolute; top: 20px; right: 20px; font-size: 20px; color: var(--eolexi-white, #FFFFFF); cursor: pointer; transition: all 500ms ease; } .mobile-nav__close svg { width: 1em; height: 1em; fill: currentColor; } .mobile-nav__close:hover { color: var(--eolexi-base, #005b85); } .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(--eolexi-white-rgb, 255, 255, 255), 0.1); } .mobile-nav__content .main-menu__list ul li > a { padding-left: 1em; } .mobile-nav__content .main-menu__list li:not(:last-child) { border-bottom: 1px solid RGBA(var(--eolexi-white-rgb, 255, 255, 255), 0.1); } .mobile-nav__content .main-menu__list li > a { display: flex; justify-content: space-between; font-family: var(--eolexi-font, "DM Sans", serif); line-height: 30px; color: var(--eolexi-white, #FFFFFF); font-size: 16px; text-transform: capitalize; font-weight: 500; height: 46px; align-items: center; transition: 500ms; } .mobile-nav__content .main-menu__list > li > ul > li > a { font-size: 15px; } .mobile-nav__content .main-menu__list li a.expanded { color: var(--eolexi-base, #005b85); } .mobile-nav__content .main-menu__list li a button { width: 30px; height: 30px; background-color: var(--eolexi-base, #005b85); border: none; outline: none; color: var(--eolexi-white, #FFFFFF); 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 svg { width: 1em; height: 1em; fill: currentColor; } .mobile-nav__content .main-menu__list li a button.expanded { transform: rotate(0deg); background-color: var(--eolexi-white, #FFFFFF); color: var(--eolexi-black, #222222); } .mobile-nav__contact { margin-bottom: 0; margin-top: 30px; margin-bottom: 30px; } .mobile-nav__contact li { color: var(--eolexi-white, #FFFFFF); font-size: 16px; 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(--eolexi-base, #005b85); } .mobile-nav__contact__icon { width: 32px; height: 32px; border-radius: 50%; background-color: var(--eolexi-base, #005b85); display: flex; justify-content: center; align-items: center; text-align: center; font-size: 12px; margin-right: 10px; color: var(--eolexi-white, #FFFFFF); } .mobile-nav__contact__icon svg { width: 1em; height: 1em; fill: currentColor; } .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; left: 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); right: 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: #000000; opacity: 0.7; cursor: url(../images/close.png), auto; } @media (max-width: 767px) { .search-popup__overlay { position: absolute; top: 0; left: 0; right: 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; left: 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%; height: 66px; border: none; outline: none; padding-left: 20px; background-color: var(--eolexi-white, #FFFFFF); font-size: 16px; font-weight: 400; color: var(--eolexi-text, #636363); transition: all 500ms ease; } .search-popup__form input[type=search]:focus, .search-popup__form input[type=text]:focus { color: var(--eolexi-black, #222222); } .search-popup__form .eolexi-btn { padding: 0; width: 66px; height: 66px; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: -1px; border-radius: 0; font-size: 20px; color: var(--eolexi-white, #FFFFFF); } .search-popup__form .eolexi-btn svg { width: 1em; height: 1em; fill: currentColor; } .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.7; -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; left: 0; right: 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 { position: relative; padding-top: 150px; padding-bottom: 172px; background-color: var(--eolexi-black2, #162452); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } @media (max-width: 1199px) { .page-header { padding-top: 272px; padding-bottom: 120px; } } @media (max-width: 767px) { .page-header { padding-top: 193px; padding-bottom: 120px; } } .page-header__bg { position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; } .page-header__bg::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: RGBA(var(--eolexi-black2-rgb, 22, 36, 82), 0.85); } .page-header .container { position: relative; z-index: 1; } .page-header__content { text-align: center; } .page-header__title { margin-bottom: 9px; font-size: 60px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; text-transform: capitalize; line-height: 1.166; } @media (max-width: 1399px) { .page-header__title { font-size: 50px; } } @media (max-width: 991px) { .page-header__title { font-size: 40px; } } @media (max-width: 575px) { .page-header__title { font-size: 35px; } } @media (max-width: 430px) { .page-header__title { font-size: 30px; } } .eolexi-breadcrumb { margin: 0; display: inline-flex; justify-content: center; align-items: center; gap: 8px 0; flex-wrap: wrap; } .eolexi-breadcrumb li { display: flex; align-items: center; font-size: 16px; color: var(--eolexi-white, #FFFFFF); font-weight: 400; text-transform: capitalize; line-height: 1.25; } .eolexi-breadcrumb li:not(:last-child)::after { content: "/"; position: relative; top: -1px; margin-left: 6px; margin-right: 6px; font-size: 17px; } .eolexi-breadcrumb li span, .eolexi-breadcrumb li a { display: inline-flex; } .eolexi-breadcrumb li:not(:first-child) span { color: var(--eolexi-base, #005b85); } .eolexi-breadcrumb li a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .eolexi-breadcrumb li a:hover { background-size: 100% 1px; } .eolexi-breadcrumb li a:hover { color: var(--eolexi-base, #005b85); } /*-------------------------------------------------------------- # Google Map --------------------------------------------------------------*/ .google-map { position: relative; } .google-map iframe { position: relative; display: block; border: none; height: 430px; width: 100%; } @media (max-width: 430px) { .google-map iframe { height: 400px; } } .google-map__contact { overflow: hidden; background-color: var(--eolexi-white, #FFFFFF); mix-blend-mode: luminosity; } .contact-map { position: relative; background-color: var(--eolexi-white, #FFFFFF); } .contact-map .container-fluid { padding-left: 0; padding-right: 0; } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ .form-one__group { margin: 0px; display: grid; grid-template-columns: 1fr; grid-gap: 30px; } @media (min-width: 768px) { .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--full { grid-column-start: 1; grid-column-end: -1; } .form-one .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { position: relative; display: block; width: 100% !important; font-family: var(--eolexi-font, "DM Sans", serif); } .form-one .bootstrap-select > .dropdown-toggle::after { display: none; } .form-one .bootstrap-select > .dropdown-toggle { position: relative; height: 50px; outline: none !important; border: 0; border-radius: 0; background-color: var(--eolexi-white2, #F0F2F8) !important; margin: 0; padding: 0; padding-left: 20px; padding-right: 20px; font-family: var(--eolexi-font, "DM Sans", serif); color: var(--eolexi-text, #636363) !important; text-transform: capitalize; font-size: 16px; font-weight: 400; line-height: 50px; box-shadow: none !important; background-repeat: no-repeat; background-size: 14px 12px; background-position: right 25.75px center; } .form-one .bootstrap-select > .dropdown-toggle::before { position: absolute; top: 0; bottom: 0; right: 20px; font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; font-size: 18px; color: var(--eolexi-text, #636363); } .form-one .bootstrap-select .dropdown-menu > li + li > a { border-top: 1px solid var(--eolexi-border-color, #dddddd); } .form-one .bootstrap-select .dropdown-menu { border: none; } .form-one .bootstrap-select .dropdown-menu > li > a { font-family: var(--eolexi-font, "DM Sans", serif); font-size: 15px; font-weight: 400; padding: 10px 20px; color: var(--eolexi-black2, #162452); background-color: var(--eolexi-white2, #F0F2F8); text-transform: capitalize; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .form-one .bootstrap-select .dropdown-menu > li:hover > a, .form-one .bootstrap-select .dropdown-menu > li.selected > a { background-color: var(--eolexi-base, #005b85); color: var(--eolexi-white, #FFFFFF); border-color: var(--eolexi-base, #005b85); } .form-one .bootstrap-select > .dropdown-toggle { display: flex; align-items: center; } .form-one .bootstrap-select > .dropdown-toggle .filter-option { display: flex; align-items: center; } .form-one .bootstrap-select > .dropdown-toggle, .form-one input[type=text], .form-one input[type=email], .form-one input[type=password], .form-one input[type=tel], .form-one textarea { display: block; border: none; outline: none; padding: 0 20px; width: 100%; height: 50px; font-family: var(--eolexi-font, "DM Sans", serif); font-size: 16px; color: var(--eolexi-text, #636363); font-weight: 400; background-color: var(--eolexi-white2, #F0F2F8); transition: all 400ms ease; } .form-one .bootstrap-select > .dropdown-toggle:focus, .form-one input[type=text]:focus, .form-one input[type=email]:focus, .form-one input[type=password]:focus, .form-one input[type=tel]:focus, .form-one textarea:focus { color: var(--eolexi-black, #222222); } .form-one textarea { height: 122px; padding: 14px 20px 0; } /*-------------------------------------------------------------- # Contact --------------------------------------------------------------*/ .contact-one { position: relative; padding-bottom: 40px; background-color: var(--eolexi-white, #FFFFFF); } .contact-one__shape { width: 690px; height: 100%; background-color: var(--eolexi-base, #005b85); position: absolute; top: 0px; left: 0px; z-index: 1; clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 0 100%, 0% 50%, 0 0); } @media (max-width: 1599px) { .contact-one__shape { clip-path: polygon(100% 0%, 60% 50%, 100% 100%, 0 100%, 0% 50%, 0 0); } } @media (max-width: 1399px) { .contact-one__shape { width: 550px; } } @media (max-width: 1199px) { .contact-one__shape { width: 500px; } } @media (max-width: 991px) { .contact-one__shape { display: none; } } .contact-one__bg { width: calc(100% - 435px); height: 100%; position: absolute; top: 0px; right: 0px; background-repeat: no-repeat; background-position: top center; background-size: cover; } @media (max-width: 1599px) { .contact-one__bg { width: 100%; } } .contact-one .container { position: relative; z-index: 2; } .contact-one__image { display: table; text-align: right; margin-left: -159px; } @media (max-width: 1599px) { .contact-one__image { margin-left: 0px; } } .contact-one__image__inner { padding: 11px; background-color: var(--eolexi-white, #FFFFFF); } @media (max-width: 991px) { .contact-one__image__inner { padding: 0px; background-color: transparent; } } @media (max-width: 1599px) { .contact-one__image img { max-width: 100%; height: auto; } } .contact-one__call { padding: 21px 39px 19px 52px; display: inline-flex; align-items: center; text-align: left; gap: 26px; background-color: var(--eolexi-black2, #162452); border-left: 7px solid var(--eolexi-white, #FFFFFF); } @media (max-width: 991px) { .contact-one__call { border: 0px; padding-left: 30px; padding-right: 30px; gap: 20px; } } .contact-one__call__icon { display: inline-flex; font-size: 39px; color: var(--eolexi-white, #FFFFFF); } .contact-one__call__icon svg { width: 1em; height: 1em; fill: currentColor; } .contact-one__call__title { margin-bottom: 5px; font-weight: 700; font-size: 18px; color: var(--eolexi-white, #FFFFFF); line-height: 1.333; } .contact-one__call__number { font-weight: 500; font-size: 16px; color: var(--eolexi-white, #FFFFFF); line-height: 1.3125; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .contact-one__call__number:hover { color: var(--eolexi-base, #005b85); } .contact-one__call__number:hover { background-size: 100% 1px; } .contact-one__form { position: relative; z-index: 1; padding: 69px 30px 74px; background-color: var(--eolexi-white, #FFFFFF); border-radius: 10px; } @media (max-width: 1599px) { .contact-one__form { padding: 50px 30px; } } @media (max-width: 390px) { .contact-one__form { padding: 35px 25px; } } .contact-one__form::after { content: ""; width: 100%; height: 100%; position: absolute; top: 5px; left: 0px; z-index: -1; border-radius: inherit; border-bottom: 5px solid var(--eolexi-base, #005b85); } .contact-one .sec-title { margin-bottom: 25px; } .contact-one .form-one__group { grid-gap: 20px; } @media (min-width: 992px) and (max-width: 1199px) { .contact-one .form-one__group { grid-template-columns: repeat(1, 1fr); } } .contact-one .form-one__group .bootstrap-select > .dropdown-toggle { line-height: 48px; background-color: transparent !important; } .contact-one .form-one__group .bootstrap-select > .dropdown-toggle::before { right: 30px; } @media (max-width: 390px) { .contact-one .form-one__group .bootstrap-select > .dropdown-toggle::before { right: 25px; } } .contact-one .form-one__group .bootstrap-select > .dropdown-toggle, .contact-one .form-one__group input[type=text], .contact-one .form-one__group input[type=email], .contact-one .form-one__group input[type=password], .contact-one .form-one__group input[type=tel], .contact-one .form-one__group textarea { height: 48px; padding-left: 30px; padding-right: 30px; border-radius: 50px; border: 1px solid var(--eolexi-border-color, #dddddd); background-color: transparent; } @media (max-width: 390px) { .contact-one .form-one__group .bootstrap-select > .dropdown-toggle, .contact-one .form-one__group input[type=text], .contact-one .form-one__group input[type=email], .contact-one .form-one__group input[type=password], .contact-one .form-one__group input[type=tel], .contact-one .form-one__group textarea { padding-left: 25px; padding-right: 25px; } } .contact-one .form-one__group .bootstrap-select > .dropdown-toggle:focus, .contact-one .form-one__group input[type=text]:focus, .contact-one .form-one__group input[type=email]:focus, .contact-one .form-one__group input[type=password]:focus, .contact-one .form-one__group input[type=tel]:focus, .contact-one .form-one__group textarea:focus { border-color: var(--eolexi-base, #005b85); } .contact-one .form-one__group textarea { height: 138px; border-radius: 20px; } .contact-one__form__button { margin-top: 10px; text-align: center; } .contact-one--home3 .contact-one__bg { position: relative; position: absolute; width: 100%; } .contact-one--home3 .contact-one__bg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: RGBA(var(--eolexi-black2-rgb, 22, 36, 82), 0.8); } .contact-one--home3 .contact-one__bg::after { content: ""; width: 530px; height: 100%; position: absolute; top: 0px; right: 294px; background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.7); clip-path: polygon(42% 0, 100% 0%, 58% 100%, 0% 100%); } @media (max-width: 1799px) { .contact-one--home3 .contact-one__bg::after { right: 200px; } } @media (max-width: 1599px) { .contact-one--home3 .contact-one__bg::after { right: 80px; } } @media (max-width: 1399px) { .contact-one--home3 .contact-one__bg::after { right: 0px; } } @media (max-width: 1199px) { .contact-one--home3 .contact-one__bg::after { display: none; } } .contact-one--home3 .contact-one__form { margin-bottom: -272px; border: 1px solid var(--eolexi-border-color, #dddddd); } .contact-one--home3 .contact-one__call-box { position: relative; } @media (max-width: 1199px) { .contact-one--home3 .contact-one__call-box { padding-left: 60px; } } @media (max-width: 991px) { .contact-one--home3 .contact-one__call-box { padding-left: 0px; display: flex; align-items: center; justify-content: center; } } .contact-one--home3 .contact-one__call { padding: 15px 39px 13px 39px; position: relative; position: absolute; top: 99px; right: -166px; border: 4px solid var(--eolexi-white, #FFFFFF); } @media (max-width: 1799px) { .contact-one--home3 .contact-one__call { right: -150px; } } @media (max-width: 1599px) { .contact-one--home3 .contact-one__call { right: -80px; } } @media (max-width: 1399px) { .contact-one--home3 .contact-one__call { right: 0px; } } @media (max-width: 1199px) { .contact-one--home3 .contact-one__call { position: relative; top: auto; right: auto; } } @media (max-width: 575px) { .contact-one--home3 .contact-one__call { padding-left: 30px; padding-right: 30px; } } .contact-one--home3 .contact-one__call::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 49px 37px 42px 0; border-color: transparent var(--eolexi-white, #FFFFFF) transparent transparent; position: absolute; top: -4px; left: -41px; } @media (max-width: 430px) { .contact-one--home3 .contact-one__call::before { display: none; } } /*-------------------------------------------------------------- # Newsletter --------------------------------------------------------------*/ .newsletter-one { margin-bottom: -189px; } .newsletter-one__inner { max-width: 1386px; position: relative; margin: 0px auto; border-radius: 1000px; z-index: 1; } @media (max-width: 767px) { .newsletter-one__inner { border-radius: 100px; } } .newsletter-one__shape { width: 100%; height: calc(100% - 75px); position: relative; position: absolute; left: 0px; bottom: 0px; overflow: hidden; background-color: var(--eolexi-base, #005b85); border-radius: inherit; } .newsletter-one__shape__image { width: 100%; height: 100%; position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); } .newsletter-one .container { position: relative; z-index: 1; } .newsletter-one__content { padding: 0px 50px 84px; text-align: center; } @media (max-width: 991px) { .newsletter-one__content { padding-left: 30px; padding-right: 30px; } } @media (max-width: 575px) { .newsletter-one__content { padding-left: 20px; padding-right: 20px; } } .newsletter-one__icon { position: relative; margin: 0px auto 30px; width: 149px; height: 149px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--eolexi-black2, #162452); font-size: 67px; color: var(--eolexi-white, #FFFFFF); border: 7px solid var(--eolexi-white, #FFFFFF); } .newsletter-one__icon svg { width: 1em; height: 1em; fill: currentColor; } .newsletter-one__title { margin-bottom: 12px; font-size: 35px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.314; } @media (max-width: 575px) { .newsletter-one__title { font-size: 30px; } } .newsletter-one__text { margin-bottom: 28px; font-size: 18px; color: var(--eolexi-white, #FFFFFF); line-height: 1.444; } .newsletter-one__form { margin: 0px auto; padding: 5px; display: flex; align-items: center; gap: 30px 0px; max-width: 470px; border-radius: 100px; background-color: var(--eolexi-white, #FFFFFF); } @media (max-width: 575px) { .newsletter-one__form { padding: 0px; flex-direction: column; background-color: transparent; } } .newsletter-one__form input[type=email] { outline: 0; border: 0; padding-left: 20px; flex-grow: 1; font-size: 14px; color: var(--eolexi-text, #636363); text-align: left; font-weight: 400; background-color: transparent; transition: all 500ms ease; } @media (max-width: 575px) { .newsletter-one__form input[type=email] { width: 100%; height: 50px; padding-left: 25px; padding-right: 25px; border-radius: 100px; background-color: var(--eolexi-white, #FFFFFF); } } .newsletter-one__form input[type=email]:focus { color: var(--eolexi-black2, #162452); } .newsletter-one__form .eolexi-btn-two { flex-shrink: 0; padding: 9px 35px; font-size: 14px; border-radius: 50px; } @media (max-width: 575px) { .newsletter-one__form .eolexi-btn-two { padding: 14px 35px; color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-black2, #162452); } .newsletter-one__form .eolexi-btn-two::before, .newsletter-one__form .eolexi-btn-two::after { background-color: var(--eolexi-white, #FFFFFF); } .newsletter-one__form .eolexi-btn-two:hover { color: var(--eolexi-black2, #162452); } } /*-------------------------------------------------------------- # Comments --------------------------------------------------------------*/ .comments-one { margin-top: 53px; } .comments-one__title { margin-bottom: 54px; font-size: 22px; font-weight: 700; line-height: 1.318; } .comments-one__list { margin: 0; } .comments-one__card { display: grid; grid-template-columns: 150px auto; grid-gap: 30px; } @media (min-width: 992px) and (max-width: 1199px) { .comments-one__card { grid-template-columns: 140px auto; } } @media (max-width: 767px) { .comments-one__card { grid-template-columns: auto; } } .comments-one__card:not(:last-child) { margin-bottom: 80px; } @media (max-width: 991px) { .comments-one__card:not(:last-child) { margin-bottom: 50px; } } .comments-one__image { width: 150px; } @media (min-width: 992px) and (max-width: 1199px) { .comments-one__image { width: 140px; } } @media (max-width: 575px) { .comments-one__image { width: 140px; } } .comments-one__image img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; } @media (min-width: 992px) and (max-width: 1199px) { .comments-one__image img { width: 140px; height: 140px; } } @media (max-width: 575px) { .comments-one__image img { width: 140px; height: 140px; } } .comments-one__content { margin-top: 2px; } @media (max-width: 767px) { .comments-one__content { margin-top: 0px; } } .comments-one__top { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 20px 30px; } @media (max-width: 991px) { .comments-one__top { margin-bottom: 25px; flex-direction: column; align-items: flex-start; justify-content: flex-start; } } @media (max-width: 575px) { .comments-one__top { gap: 20px; } } .comments-one__left { display: flex; align-items: center; gap: 15px; } @media (max-width: 575px) { .comments-one__left { flex-direction: column; align-items: flex-start; justify-content: flex-start; } } .comments-one__name { margin-bottom: 15px; font-size: 22px; font-weight: 700; text-transform: capitalize; line-height: 1.318; } .comments-one__date { margin: 0; position: relative; font-weight: 600; color: var(--eolexi-base, #005b85); } .comments-one__date::before { content: ""; display: inline-block; position: relative; top: -4px; width: 19px; height: 1px; margin-right: 9px; background-color: var(--eolexi-base, #005b85); } @media (max-width: 575px) { .comments-one__date::before { display: none; } } .comments-one__bottom { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 18px 30px; } @media (max-width: 412px) { .comments-one__bottom { flex-direction: column; align-items: flex-start; justify-content: flex-start; } } .comments-one__reply { margin-top: 21px; padding: 0; margin: 0; border: none; outline: none; background-color: transparent; font-size: 16px; font-weight: 600; color: var(--eolexi-base, #005b85); line-height: 1.25; text-transform: capitalize; } .comments-one__text { margin: 0; font-weight: 500; } .comments-form { margin-top: 53px; } .comments-form__title { margin-bottom: 54px; font-size: 22px; font-weight: 700; line-height: 1.318; } /*-------------------------------------------------------------- # Sidebar --------------------------------------------------------------*/ .sidebar__single { padding: 34px 32px; background-color: var(--eolexi-white2, #F0F2F8); } @media (min-width: 992px) and (max-width: 1199px) { .sidebar__single { padding: 26px 25px; } } @media (max-width: 375px) { .sidebar__single { padding: 26px 25px; } } .sidebar__single + .sidebar__single { margin-top: 30px; } .sidebar__title { position: relative; margin-bottom: 34px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; text-transform: capitalize; line-height: 1.363; } .sidebar__title::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 39px; height: 3px; background-color: var(--eolexi-base, #005b85); } .sidebar__search { position: relative; } .sidebar__search input[type=search], .sidebar__search input[type=text] { padding-left: 20px; padding-right: 44px; outline: none; border: 0; width: 100%; height: 55px; font-size: 16px; color: var(--eolexi-text, #636363); font-weight: 400; background-color: var(--eolexi-white, #FFFFFF); transition: all 400ms ease; } .sidebar__search input[type=search]:focus, .sidebar__search input[type=text]:focus { color: var(--eolexi-black, #222222); } .sidebar__search button[type=submit] { padding: 0; border: none; outline: none; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background-color: var(--eolexi-base, #005b85); position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 15px; color: var(--eolexi-white, #FFFFFF); transition: all 400ms ease; } .sidebar__search button[type=submit] svg { width: 1em; height: 1em; fill: currentColor; } .sidebar__search button[type=submit]:hover { color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-black2, #162452); } .sidebar__categories-wrapper { padding-bottom: 34px; } @media (min-width: 992px) and (max-width: 1199px) { .sidebar__categories-wrapper { padding-bottom: 27px; } } @media (max-width: 375px) { .sidebar__categories-wrapper { padding-bottom: 27px; } } .sidebar__categories { margin: 0; } .sidebar__categories-title { margin-bottom: 28px; } .sidebar__categories-title::after { width: 67px; } .sidebar__categories li:not(:last-child) { margin-bottom: 10.5px; } .sidebar__categories li a { position: relative; font-size: 17px; color: var(--eolexi-text, #636363); text-transform: capitalize; font-weight: 400; line-height: 1.5; display: flex; justify-content: space-between; align-items: center; transition: all 500ms ease; } @media (min-width: 768px) and (max-width: 1199px) { .sidebar__categories li a { font-size: 16px; } } @media (max-width: 360px) { .sidebar__categories li a { font-size: 16px; } } .sidebar__categories li a:hover { color: var(--eolexi-base, #005b85); } .sidebar__categories li a span { color: inherit; } .sidebar__categories__text { display: flex; align-items: center; gap: 11px; } .sidebar__categories__icon { display: inline-flex; font-size: 16px; overflow: hidden; } .sidebar__categories__icon svg { width: 1em; height: 1em; fill: currentColor; } .sidebar__categories a:hover .sidebar__categories__icon > * { animation: slideRight 500ms; } .sidebar__tags-wrapper { padding-bottom: 41px; } @media (min-width: 992px) and (max-width: 1199px) { .sidebar__tags-wrapper { padding-bottom: 33px; } } @media (max-width: 375px) { .sidebar__tags-wrapper { padding-bottom: 33px; } } .sidebar__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; } .sidebar__tags .eolexi-btn { padding: 4px 20px; background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-border-color, #dddddd); } .sidebar__tags .eolexi-btn::after { background-color: var(--eolexi-base, #005b85); border-color: var(--eolexi-base, #005b85); } .sidebar__tags .eolexi-btn__text { color: var(--eolexi-text, #636363); font-weight: 400; text-transform: capitalize; line-height: 1.25; } .sidebar__tags .eolexi-btn:hover .eolexi-btn__text { color: var(--eolexi-white, #FFFFFF); } .sidebar__posts-wrapper { padding-bottom: 41px; } @media (min-width: 992px) and (max-width: 1199px) { .sidebar__posts-wrapper { padding-bottom: 29px; } } @media (max-width: 375px) { .sidebar__posts-wrapper { padding-bottom: 29px; } } .sidebar__posts { margin: 0; } .sidebar__posts-title::after { width: 77px; } .sidebar__posts__item { display: flex; gap: 14px; } .sidebar__posts__item:not(:last-of-type) { margin-bottom: 30px; } .sidebar__posts__image { width: 94px; flex-shrink: 0; } .sidebar__posts__image img { width: 100%; display: block; } .sidebar__posts__content { margin-top: 7px; width: calc(100% - 94px); } .sidebar__posts__meta { display: flex; gap: 10px; margin-bottom: 7px; color: var(--eolexi-text, #636363); font-size: 14px; line-height: 1; } .sidebar__posts__meta__icon { position: relative; top: 1px; display: inline-flex; font-size: 12px; } .sidebar__posts__meta__icon svg { width: 1em; height: 1em; fill: currentColor; } .sidebar__posts__title { margin: 0; font-size: 17px; color: var(--eolexi-black4, #333333); font-weight: 700; text-transform: capitalize; line-height: 1.352; } @media (min-width: 768px) and (max-width: 1199px) { .sidebar__posts__title { font-size: 15px; } } @media (max-width: 360px) { .sidebar__posts__title { font-size: 15px; } } .sidebar__posts__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .sidebar__posts__title a:hover { color: var(--eolexi-base, #005b85); } .sidebar__posts__title a:hover { background-size: 100% 1px; } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .main-footer { position: relative; overflow: hidden; counter-reset: blogNumber; background-color: var(--eolexi-black2, #162452); } .main-footer__top { padding-top: 86px; padding-bottom: 84px; } @media (max-width: 575px) { .main-footer__top { padding-top: 80px; padding-bottom: 80px; } } .main-footer__bg { width: 1149px; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.04; background-size: cover; background-position: top center; background-repeat: no-repeat; } .main-footer .container { position: relative; z-index: 1; } .main-footer__bottom { padding: 12px 0; position: relative; background-color: var(--eolexi-black6, #121212); z-index: 1; } @media (max-width: 575px) { .main-footer__bottom { padding: 20px 0px; } } .main-footer__bottom__inner { text-align: center; } .main-footer__copyright { margin: 0; color: var(--eolexi-white, #FFFFFF); } .main-footer__shape { max-width: 100%; height: auto; position: absolute; right: 0px; bottom: 0px; } .main-footer--two { padding-top: 185px; } .footer-widget--links { padding-left: 50px; margin-top: 19px; } @media (max-width: 1199px) { .footer-widget--links { padding-left: 0px; } } @media (max-width: 991px) { .footer-widget--links { margin-top: 0px; } } .footer-widget--post { margin-top: 19px; } @media (max-width: 991px) { .footer-widget--post { margin-top: 0px; } } .footer-widget--newsletter { padding-left: 10px; margin-top: 19px; } @media (max-width: 1199px) { .footer-widget--newsletter { padding-left: 0px; margin-top: 0px; } } .footer-widget__title { margin: 0 0 33px; font-size: 22px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; text-transform: capitalize; line-height: 1.318; } @media (max-width: 767px) { .footer-widget__title { margin-bottom: 28px; } } .footer-widget__logo { display: inline-flex; margin-bottom: 30px; } .footer-widget__logo img { max-width: 100%; height: auto; } .footer-widget__text { margin: 0px; color: var(--eolexi-white, #FFFFFF); } .footer-widget .social-links-two { margin-top: 30px; } .footer-widget__links { margin: 0px; } .footer-widget__links li + li { margin-top: 14px; } .footer-widget__links li { padding-left: 15px; position: relative; font-size: 16px; color: var(--eolexi-white, #FFFFFF); line-height: 1.625; } .footer-widget__links li::after { content: "\f111"; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-family: "Font Awesome 5 Free"; font-size: 5px; color: var(--eolexi-white, #FFFFFF); font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; } .footer-widget__links li a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .footer-widget__links li a:hover { background-size: 100% 1px; } .footer-widget__links li a:hover { color: var(--eolexi-base, #005b85); } .footer-widget__post { position: relative; margin: 0px; } .footer-widget__post li + li { margin-top: 23px; } .footer-widget__post li { display: flex; align-items: flex-start; gap: 23px; } .footer-widget__post__img { position: relative; width: 85px; height: 85px; flex-shrink: 0; border-radius: 50%; } .footer-widget__post__img::after { content: "0" counter(blogNumber); counter-increment: blogNumber; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; top: 7px; right: -8px; background-color: var(--eolexi-base, #005b85); font-size: 11px; color: var(--eolexi-white, #FFFFFF); font-weight: 500; line-height: 1; transition: all 500ms ease; } .footer-widget__post__img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .footer-widget__post__content { margin-top: 5px; } .footer-widget__post__date { margin-bottom: 13px; display: block; font-size: 14px; color: var(--eolexi-white, #FFFFFF); line-height: 1.285; } .footer-widget__post__title { margin: 0px; font-size: 17px; font-weight: 700; color: var(--eolexi-white, #FFFFFF); line-height: 1.294; } .footer-widget__post__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .footer-widget__post__title a:hover { background-size: 100% 1px; } .footer-widget__post__title a:hover { color: var(--eolexi-base, #005b85); } .footer-widget__newsletter { width: 100%; margin: 17px 0 0; } .footer-widget__newsletter input[type=email] { display: block; width: 100%; height: 45px; border: none; outline: none; padding: 0px 20px; background-color: var(--eolexi-white, #FFFFFF); font-size: 14px; font-weight: 400; text-align: center; color: var(--eolexi-text, #636363); border-radius: 50px; transition: all 500ms ease; } .footer-widget__newsletter input[type=email]:focus { color: var(--eolexi-black, #222222); } .footer-widget__newsletter button[type=submit] { margin-top: 15px; padding: 11.5px 35px; display: block; width: 100%; font-size: 14px; border-radius: 50px; } .footer-widget__newsletter button[type=submit]:hover { color: var(--eolexi-black, #222222); } .footer-widget__newsletter button[type=submit]::before, .footer-widget__newsletter button[type=submit]::after { background-color: var(--eolexi-white, #FFFFFF); } /*-------------------------------------------------------------- # Client Carousel --------------------------------------------------------------*/ .client-carousel { position: relative; background-color: var(--eolexi-white, #FFFFFF); } .client-carousel::before, .client-carousel::after { content: ""; width: calc(50% - 106px); height: 2px; background-color: var(--eolexi-border-color, #dddddd); position: absolute; top: 12px; left: 0px; } .client-carousel::after { left: auto; right: 0px; } .client-carousel__content { text-align: center; } .client-carousel__title { margin: 0px; font-size: 16px; font-weight: 500; color: var(--eolexi-base, #005b85); text-transform: uppercase; line-height: 1.625; } .client-carousel__carousel { padding-top: 93px; padding-bottom: 100px; position: relative; } @media (max-width: 991px) { .client-carousel__carousel { padding-top: 73px; padding-bottom: 80px; } } @media (max-width: 575px) { .client-carousel__carousel { padding-top: 53px; padding-bottom: 60px; } } .client-carousel__carousel .owl-stage { display: flex; align-items: center; } .client-carousel__item { position: relative; padding: 17.5px 42px; text-align: center; } @media (max-width: 575px) { .client-carousel__item { margin-left: auto; margin-right: auto; display: table; } } .client-carousel__item img { max-width: 100%; width: auto !important; } .client-carousel__image { margin: auto; } .client-carousel__hover { padding: 17.5px 42px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; position: absolute; top: 0; left: 0; border: 1px solid var(--eolexi-base, #005b85); border-radius: 50px; transition: opacity 300ms ease; } .client-carousel__item:hover .client-carousel__hover { opacity: 1; } /*-------------------------------------------------------------- # Main Slider --------------------------------------------------------------*/ .main-slider { margin-top: -58px; position: relative; overflow: hidden; z-index: 1; } @media (max-width: 360px) { .main-slider { margin-top: 0px; } } .main-slider__carousel { position: relative; background-color: var(--eolexi-black2, #162452); } .main-slider__carousel.owl-carousel .owl-nav { margin: 0; position: absolute; } @media (max-width: 1399px) { .main-slider__carousel.owl-carousel .owl-nav { left: 50%; bottom: 40px; transform: translateX(-50%); } } @media (max-width: 1199px) { .main-slider__carousel.owl-carousel .owl-nav { bottom: 50px; } } @media (min-width: 1400px) { .main-slider__carousel.owl-carousel .owl-nav { top: calc(50% + 30px); left: 30px; transform: translateY(-50%); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 30px; } } @media (min-width: 1500px) { .main-slider__carousel.owl-carousel .owl-nav { left: 51px; } } .main-slider__carousel.owl-carousel .owl-nav button { width: 73px; height: 73px; } @media (min-width: 1200px) { .main-slider__carousel.owl-carousel .owl-nav button { color: var(--eolexi-white, #FFFFFF); background-color: transparent; border: 1px solid var(--eolexi-white, #FFFFFF); } } @media (max-width: 1499px) { .main-slider__carousel.owl-carousel .owl-nav button { width: 60px; height: 60px; font-size: 16px; } } .main-slider__carousel.owl-carousel .owl-nav button:hover { border-color: var(--eolexi-base, #005b85); } .main-slider__item { position: relative; padding-top: 95px; padding-bottom: 165px; overflow: hidden; } @media (max-width: 1399px) { .main-slider__item { padding-bottom: 200px; } } @media (max-width: 1199px) { .main-slider__item { padding-top: 180px; padding-bottom: 165px; } } @media (max-width: 360px) { .main-slider__item { padding-top: 100px; } } .main-slider__bg { position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: top center; background-size: cover; transform: scale(1); transition: transform 10s ease; } .main-slider__bg::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(22, 36, 82, 0.94) 0%, rgba(21, 22, 24, 0.94) 100%); } .main-slider .container { position: relative; z-index: 2; } .main-slider__content { position: relative; z-index: 1; } .main-slider__top { margin-bottom: 27px; overflow: hidden; } .main-slider__top__inner { display: flex; align-items: flex-end; gap: 5px; opacity: 0; transform: translateX(-100%); } @media (max-width: 575px) { .main-slider__top__inner { gap: 10px; } } .main-slider__top__image { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; clip-path: polygon(0 0, 100% 41%, 54% 100%, 0% 100%); } .main-slider__top__text { position: relative; padding: 25px 97px 25px 39px; } @media (max-width: 575px) { .main-slider__top__text { padding: 0px; } } .main-slider__top__text::after { content: ""; width: calc(100% + 46px); height: 100%; position: absolute; top: 0px; left: -46px; background-image: url(../images/shapes/main-slider-shape-1-3.png); background-repeat: no-repeat; background-position: top center; background-size: 100% 100%; } @media (max-width: 575px) { .main-slider__top__text::after { display: none; } } .main-slider__top__text::before { content: ""; width: 52px; height: calc(100% - 20px); position: absolute; top: 50%; left: -29px; transform: translateY(-50%); background-color: var(--eolexi-base, #005b85); clip-path: polygon(70% 0, 100% 0, 30% 100%, 0% 100%); } @media (max-width: 575px) { .main-slider__top__text::before { display: none; } } .main-slider__top__title { margin: 0px; display: inline-block; font-family: var(--eolexi-font2, "Sora", serif); font-size: 16px; color: var(--eolexi-white, #FFFFFF); font-weight: 600; text-transform: uppercase; line-height: 1.625; } .main-slider__title { position: relative; margin-bottom: 12px; font-weight: 700; font-size: 60px; color: var(--eolexi-white, #FFFFFF); line-height: 1.166; } @media (max-width: 991px) { .main-slider__title { font-size: 50px; } } @media (max-width: 767px) { .main-slider__title { font-size: 45px; } } @media (max-width: 575px) { .main-slider__title { font-size: 40px; } } .main-slider__title span { display: inline-block; opacity: 0; transform: translate(-150px, 0) scale(0.3); } @keyframes leftRightText { 40% { transform: translate(50px, 0) scale(0.7); opacity: 1; color: var(--eolexi-white, #FFFFFF); } 60% { color: var(--eolexi-base, #005b85); } 80% { transform: translate(0) scale(2); opacity: 0; } 100% { transform: translate(0) scale(1); opacity: 1; } } .main-slider__description { margin-bottom: 38px; overflow: hidden; } .main-slider__text { margin: 0px; color: var(--eolexi-white, #FFFFFF); opacity: 0; transform: translateY(150%); } .main-slider__button { overflow: hidden; } .main-slider__button__inner { opacity: 0; transform: translateY(150%); } .main-slider__image { position: relative; } .main-slider__image__inner { margin-right: -98px; margin-bottom: -165px; text-align: right; opacity: 0; transform: translateX(100%); } @media (max-width: 1399px) { .main-slider__image__inner { margin-bottom: -200px; margin-right: 0px; } } @media (max-width: 1199px) { .main-slider__image__inner { margin-bottom: -165px; text-align: center; } } .main-slider__image__inner img { display: inline-block !important; width: auto !important; } @media (max-width: 1199px) { .main-slider__image__inner img { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; } } .main-slider__image__shape { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; position: absolute; top: 77px; left: -7px; opacity: 0; animation: shapeRotate 3s linear infinite; } @media (max-width: 575px) { .main-slider__image__shape { display: none !important; } } .main-slider__shape { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; position: absolute; top: calc(50% + 30px); right: 0px; opacity: 0; z-index: 1; transform: translateY(-50%) translateX(100%); } @media (max-width: 1799px) { .main-slider__shape { right: -140px; } } @media (max-width: 1599px) { .main-slider__shape { display: none !important; } } .main-slider .active .main-slider__bg { transform: scale(1.3); } .main-slider .active .main-slider__top__inner, .main-slider .active .main-slider__text, .main-slider .active .main-slider__button__inner { opacity: 1; transform: translateY(0); transition: transform 1600ms ease, opacity 1600ms ease; } .main-slider .active .main-slider__top__inner { transform: translateX(0); } .main-slider .active .main-slider__title span { animation: leftRightText 0.5s forwards; } .main-slider .active .main-slider__text { transition-delay: 400ms; } .main-slider .active .main-slider__button__inner { transition-delay: 700ms; } .main-slider .active .main-slider__image__inner { opacity: 1; transform: translateX(0); transition: transform 1200ms ease, opacity 1200ms ease; } .main-slider .active .main-slider__image__shape { opacity: 1; transition: all 500ms ease 500ms; } .main-slider .active .main-slider__shape { right: 0px; opacity: 1; transform: translateY(-50%) translateX(0%); transition: transform 1200ms ease, opacity 1200ms ease; transition-delay: 300ms; } .main-slider-two { position: relative; background-color: var(--eolexi-white, #FFFFFF); overflow: hidden; z-index: 1; } .main-slider-two__carousel.owl-carousel .owl-dots { margin: 0 !important; position: absolute; } @media (max-width: 1399px) { .main-slider-two__carousel.owl-carousel .owl-dots { left: 50%; bottom: 60px; transform: translateX(-50%); } } @media (min-width: 1400px) { .main-slider-two__carousel.owl-carousel .owl-dots { top: 50%; left: 55px; transform: translateY(-50%); flex-direction: column; } } .main-slider-two__item { position: relative; padding-top: 354px; padding-bottom: 197px; overflow: hidden; } @media (max-width: 1199px) { .main-slider-two__item { padding-top: 250px; padding-bottom: 210px; } } @media (max-width: 575px) { .main-slider-two__item { padding-top: 230px; } } @media (max-width: 390px) { .main-slider-two__item { padding-top: 200px; padding-bottom: 190px; } } .main-slider-two__item::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 76px 50.5px 0 50.5px; border-color: var(--eolexi-base, #005b85) transparent transparent transparent; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); z-index: 1; } @media (max-width: 375px) { .main-slider-two__item::before { border-width: 60px 40.5px 0 40.5px; } } .main-slider-two__bg { position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: top center; background-size: cover; transform: scale(1); transition: transform 10s ease; } .main-slider-two__bg::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @media (max-width: 1199px) { .main-slider-two__bg::after { background-color: rgba(var(--eolexi-white-rgb, 255, 255, 255), 0.9); } } .main-slider-two .container { position: relative; z-index: 2; } .main-slider-two__content { position: relative; z-index: 2; } @media (max-width: 1199px) { .main-slider-two__content { overflow: hidden; } } .main-slider-two__content__shape { width: 40px; height: 40px; position: relative; position: absolute; top: -69px; right: 133px; opacity: 0; animation: textRotate 3s linear infinite; } .main-slider-two__content__shape::after, .main-slider-two__content__shape::before { content: ""; width: 10px; height: 40px; background-color: var(--eolexi-black2, #162452); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 500ms ease; } .main-slider-two__content__shape::after { width: 40px; height: 10px; } .main-slider-two__content__logo { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; position: absolute; top: -87px; right: -268px; opacity: 0; transform: rotate(-40.095deg) translateX(100%); } @media (max-width: 1199px) { .main-slider-two__content__logo { margin-bottom: 25px; position: static; transform: rotate(0deg) translateY(-150%); } } .main-slider-two__top { margin-bottom: 15px; overflow: hidden; } .main-slider-two__tagline { margin: 0; display: inline-block; padding: 9px 30px; font-family: var(--eolexi-font2, "Sora", serif); font-size: 16px; color: var(--eolexi-white, #FFFFFF); font-weight: 600; text-transform: uppercase; line-height: 1.625; border-radius: 80px; background-color: var(--eolexi-base, #005b85); opacity: 0; transform: translateY(-150%); } @media (max-width: 390px) { .main-slider-two__tagline { font-size: 14px; } } .main-slider-two__title { overflow: hidden; position: relative; margin-bottom: 14px; } .main-slider-two__title__text { position: relative; display: table; font-size: 60px; color: var(--eolexi-black3, #000000); font-weight: 700; line-height: 1.166; overflow: hidden; } @media (max-width: 991px) { .main-slider-two__title__text { font-size: 50px; } } @media (max-width: 767px) { .main-slider-two__title__text { font-size: 45px; } } @media (max-width: 575px) { .main-slider-two__title__text { font-size: 40px; } } .main-slider-two__title__inner { position: relative; display: block; transform: translateY(150%); } .main-slider-two__title__main { display: block; } @keyframes mainFadeIn { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } .main-slider-two__title__block { display: block; width: 100%; height: 100%; background-color: var(--eolexi-base, #005b85); position: absolute; top: 0px; } @keyframes titleOverlay { 0% { width: 100%; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; left: 100%; } } .main-slider-two__title__highlight { text-decoration: underline; color: var(--eolexi-base, #005b85); } .main-slider-two__description { margin-bottom: 38px; overflow: hidden; } .main-slider-two__text { margin: 0px; opacity: 0; transform: translateY(150%); } .main-slider-two__button { overflow: hidden; } .main-slider-two__button__inner { opacity: 0; transform: translateY(150%); } .main-slider-two__shape { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; position: absolute; left: 87px; bottom: 0px; opacity: 0; transform: translateX(-100%); } @media (max-width: 1799px) { .main-slider-two__shape { left: 20px; } } @media (max-width: 1599px) { .main-slider-two__shape { display: none !important; } } .main-slider-two .active .main-slider-two__bg { transform: scale(1.3); } .main-slider-two .active .main-slider-two__content__shape { opacity: 1; transition: all 800ms ease 500ms; } .main-slider-two .active .main-slider-two__content__logo { opacity: 1; transform: rotate(-40.095deg) translateX(0%); transition: transform 1200ms ease, opacity 1200ms ease; } @media (max-width: 1199px) { .main-slider-two .active .main-slider-two__content__logo { transform: rotate(0deg) translateY(0%); } } .main-slider-two .active .main-slider-two__tagline, .main-slider-two .active .main-slider-two__text, .main-slider-two .active .main-slider-two__button__inner { opacity: 1; transform: translateY(0); transition: transform 1600ms ease, opacity 1600ms ease; } .main-slider-two .active .main-slider-two__tagline { transition-delay: 200ms; } .main-slider-two .active .main-slider-two__title__inner { transform: translateY(0); transition: transform 1600ms ease; } .main-slider-two .active .main-slider-two__title__main { animation: mainFadeIn 3.5s forwards; } .main-slider-two .active .main-slider-two__title__block { animation: titleOverlay 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards; } .main-slider-two .active .main-slider-two__text { transition-delay: 400ms; } .main-slider-two .active .main-slider-two__button__inner { transition-delay: 700ms; } .main-slider-two .active .main-slider-two__shape { opacity: 1; transform: translateX(0); transition: transform 1200ms ease, opacity 1200ms ease; } .main-slider-three { position: relative; background-color: var(--eolexi-black2, #162452); overflow: hidden; z-index: 1; } .main-slider-three__carousel.owl-carousel .owl-dots { margin: 0 !important; position: absolute; } @media (max-width: 1399px) { .main-slider-three__carousel.owl-carousel .owl-dots { left: 50%; bottom: 60px; transform: translateX(-50%); } } @media (min-width: 1400px) { .main-slider-three__carousel.owl-carousel .owl-dots { top: calc(50% + 80.5px); left: 55px; transform: translateY(-50%); flex-direction: column; } } @media (min-width: 1600px) { .main-slider-three__carousel.owl-carousel .owl-dots { top: 50%; } } .main-slider-three__carousel.owl-carousel .owl-dots .owl-dot { background-color: var(--eolexi-white, #FFFFFF); } .main-slider-three__item { position: relative; padding-top: 370px; padding-bottom: 159px; overflow: hidden; background-color: var(--eolexi-black2, #162452); } @media (max-width: 1199px) { .main-slider-three__item { padding-top: 340px; padding-bottom: 180px; } } @media (max-width: 767px) { .main-slider-three__item { padding-top: 220px; } } @media (max-width: 480px) { .main-slider-three__item { padding-top: 200px; } } .main-slider-three__shape { width: 310px; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; transform: translateX(-100%); background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.1); clip-path: polygon(0 0, 87% 0, 100% 21%, 25% 56%, 100% 100%, 1% 100%); } .main-slider-three__image-left { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; position: absolute; left: 18px; bottom: 0px; opacity: 0.3; transform: translateX(-100%); } .main-slider-three .container { position: relative; z-index: 2; } .main-slider-three__content { position: relative; z-index: 2; } .main-slider-three__content__shape { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; position: absolute; top: -185px; right: -18px; opacity: 0; animation: shapeRotate 3s linear infinite; } @media (max-width: 1599px) { .main-slider-three__content__shape { right: 12px; } } @media (max-width: 1399px) { .main-slider-three__content__shape { right: 17px; } } @media (max-width: 1199px) { .main-slider-three__content__shape { display: none !important; } } .main-slider-three__inner-text { margin: 0px; font-size: 120px; color: RGBA(var(--eolexi-white-rgb, 255, 255, 255), 0); -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: RGBA(var(--eolexi-white-rgb, 255, 255, 255), 0.1); font-weight: 700; line-height: 1; position: absolute; top: -63px; left: 73px; overflow: hidden; } @media (max-width: 1599px) { .main-slider-three__inner-text { left: 40px; } } @media (max-width: 1399px) { .main-slider-three__inner-text { left: 30px; } } @media (max-width: 767px) { .main-slider-three__inner-text { margin-bottom: 20px; position: static; font-size: clamp(3rem, 10vw, 5rem); } } .main-slider-three__inner-text span { display: inline-block; opacity: 0; transform: translateY(-150px); } .main-slider-three__tagline { position: relative; z-index: 1; margin-bottom: 17px; display: flex; align-items: flex-start; gap: 10px; } .main-slider-three__tagline__shape { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; flex-shrink: 0; opacity: 0; } .main-slider-three__tagline__text { margin: 0; font-family: var(--eolexi-font2, "Sora", serif); font-size: 16px; color: var(--eolexi-white, #FFFFFF); font-weight: 600; text-transform: uppercase; line-height: 1.625; } @media (max-width: 390px) { .main-slider-three__tagline__text { font-size: 14px; } } .main-slider-three__tagline__text span { display: inline-block; opacity: 0; transform: translate(200px, -100px) scale(2); } .main-slider-three__title { position: relative; margin-bottom: 14px; font-size: 60px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.166; z-index: 1; } @media (max-width: 1399px) { .main-slider-three__title { font-size: 55px; } } @media (max-width: 991px) { .main-slider-three__title { font-size: 50px; } } @media (max-width: 767px) { .main-slider-three__title { font-size: 45px; } } @media (max-width: 575px) { .main-slider-three__title { font-size: 40px; } } .main-slider-three__title span { display: inline-block; opacity: 0; transform: translate(200px, -100px) scale(2); } .main-slider-three__description { position: relative; z-index: 1; overflow: hidden; } .main-slider-three__text { margin: 0px; color: var(--eolexi-white, #FFFFFF); opacity: 0; transform: translateY(150%); } .main-slider-three__button { position: relative; z-index: 1; padding-top: 38px; padding-bottom: 38px; display: flex; align-items: center; gap: 50px; overflow: hidden; } @media (max-width: 575px) { .main-slider-three__button { flex-direction: column; align-items: flex-start; } } .main-slider-three__button__inner { opacity: 0; transform: translateY(150%); } .main-slider-three__button .eolexi-btn::after { background-color: var(--eolexi-white, #FFFFFF); } .main-slider-three__button .eolexi-btn:hover .eolexi-btn__text { color: var(--eolexi-black2, #162452); } .main-slider-three__video { display: flex; align-items: center; flex-wrap: wrap; gap: 21px; } @media (max-width: 575px) { .main-slider-three__video { margin-left: 37px; } } .main-slider-three__video .video-btn { width: 52px; height: 52px; font-size: 20px; } .main-slider-three__video__title { margin: 0px; font-size: 16px; font-weight: 500; color: var(--eolexi-white, #FFFFFF); text-transform: capitalize; line-height: 1.318; } .main-slider-three__image { width: 51.77%; height: 100%; position: relative; position: absolute; top: 0px; right: 0px; background-color: var(--eolexi-white, #FFFFFF); clip-path: polygon(100% 100%, 15.77% 100%, 0% 80.23%, 21.45% 54.71%, 9.69% 0%, 100% 0%); } @media (max-width: 1199px) { .main-slider-three__image { display: none; } } .main-slider-three__image__box { width: calc(100% - 11px); height: 100%; position: absolute; top: 0px; right: 0px; clip-path: inherit; } .main-slider-three__image__inner { width: 100%; height: 100%; background-repeat: no-repeat; background-position: top center; background-size: cover; transition: all 10s ease; } .main-slider-three .active .main-slider-three__tagline__shape { opacity: 1; transition: opacity 600ms ease; } .main-slider-three .active .main-slider-three__inner-text span, .main-slider-three .active .main-slider-three__text, .main-slider-three .active .main-slider-three__button__inner { opacity: 1; transform: translateY(0); transition: transform 1500ms ease, opacity 1500ms ease; } .main-slider-three .active .main-slider-three__tagline__text span, .main-slider-three .active .main-slider-three__title span { animation: textBallDrop 0.2s forwards; } .main-slider-three .active .main-slider-three__inner-text span { transition-delay: 300ms; } .main-slider-three .active .main-slider-three__text { transition-delay: 400ms; } .main-slider-three .active .main-slider-three__button__inner:nth-child(1) { transition-delay: 800ms; } .main-slider-three .active .main-slider-three__button__inner:nth-child(2) { transition-delay: 1000ms; } .main-slider-three .active .main-slider-three__content__shape { opacity: 1; transition: all 500ms ease 500ms; } .main-slider-three .active .main-slider-three__shape, .main-slider-three .active .main-slider-three__image-left { transform: translateX(0); transition: all 1200ms ease; } .main-slider-three .active .main-slider-three__shape { transition-delay: 300ms; } .main-slider-three .active .main-slider-three__image__inner { transform: scale(1.3); } @keyframes textBallDrop { 60% { transform: translate(0, 20px) rotate(-180deg) scale(0.5); } 100% { transform: translate(0) rotate(0deg) scale(1); opacity: 1; } } /*-------------------------------------------------------------- # About --------------------------------------------------------------*/ .about-one { background-color: var(--eolexi-white, #FFFFFF); } .about-one__image { position: relative; } .about-one__image img { max-width: 100%; height: auto; } .about-one__image__one { position: relative; z-index: 1; } .about-one__image__shape { position: absolute; top: -28px; left: -28px; animation: zump 2s linear infinite; } @media (max-width: 767px) { .about-one__image__shape { left: -20px; } } @media (max-width: 575px) { .about-one__image__shape { left: -10px; } } .about-one__experience { padding: 51px 12px; background-color: var(--eolexi-base, #005b85); border: 6px solid var(--eolexi-white, #FFFFFF); writing-mode: sideways-lr; position: absolute; top: 50%; left: -41px; transform: translateY(-50%); border-radius: 80px; z-index: 2; } @media (max-width: 991px) { .about-one__experience { left: -25px; } } @media (max-width: 767px) { .about-one__experience { left: -20px; } } @media (max-width: 575px) { .about-one__experience { display: table; border: 0px; margin-top: 30px; padding: 12px 30px; position: static; transform: translateY(0%); writing-mode: unset; } } .about-one__experience__title { margin: 0px; display: flex; align-items: center; font-weight: 700; font-size: 36px; color: var(--eolexi-white, #FFFFFF); text-transform: capitalize; line-height: 1.25; white-space: nowrap; } @media (max-width: 575px) { .about-one__experience__title { white-space: wrap; } } @media (max-width: 412px) { .about-one__experience__title { font-size: 30px; } } .about-one__experience__title span { font-size: 22px; font-weight: 500; } @media (max-width: 412px) { .about-one__experience__title span { font-size: 18px; } } .about-one .sec-title { margin-bottom: 11px; } .about-one__text { margin-bottom: 25px; } .about-one__inner { display: grid; grid-template-columns: auto 108px; grid-gap: 37px 0px; } @media (max-width: 412px) { .about-one__inner { grid-template-columns: auto; } } .about-one__info { padding: 30px 0px; border-top: 1px solid var(--eolexi-border-color, #dddddd); border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } .about-one__info__item + .about-one__info__item { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--eolexi-border-color, #dddddd); } .about-one__info__item { display: flex; align-items: flex-start; gap: 19px; } @media (max-width: 480px) { .about-one__info__item { flex-direction: column; } } .about-one__info__icon { width: 80px; height: 80px; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background-color: var(--eolexi-base, #005b85); font-size: 34px; color: var(--eolexi-white, #FFFFFF); transition: all 500ms ease; } .about-one__info__icon__inner { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; top: 0px; right: 0px; background-color: var(--eolexi-black2, #162452); font-size: 14px; color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-white, #FFFFFF); transition: all 500ms ease; } .about-one__info__item:hover .about-one__info__icon { background-color: var(--eolexi-black2, #162452); } .about-one__info__item:hover .about-one__info__icon__inner { background-color: var(--eolexi-base, #005b85); } .about-one__info__content { padding-right: 20px; } .about-one__info__title { margin-bottom: 9px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; line-height: 1.318; text-transform: capitalize; } .about-one__info__text { margin: 0px; font-size: 15px; color: var(--eolexi-text-gray2, #566963); line-height: 1.466; } .about-one__profile { padding: 6px 5px 0px; display: flex; flex-direction: column; align-items: center; background-color: var(--eolexi-black2, #162452); } @media (max-width: 412px) { .about-one__profile { padding: 28px 28px 20px; } } .about-one__profile__image { max-width: 100%; height: auto; border: 2px solid var(--eolexi-white, #FFFFFF); } .about-one__profile__info { padding: 20px 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; writing-mode: sideways-lr; } @media (max-width: 412px) { .about-one__profile__info { padding: 0px; margin-top: 15px; writing-mode: unset; } } .about-one__profile__name { margin: 0px 5px 0px 0px; font-weight: 500; color: var(--eolexi-white, #FFFFFF); font-size: 22px; text-transform: capitalize; line-height: 1.318; } @media (max-width: 412px) { .about-one__profile__name { margin-bottom: 8px; } } .about-one__profile__designation { margin: 0px; font-weight: 400; font-size: 15px; color: var(--eolexi-white, #FFFFFF); text-transform: capitalize; line-height: 1.466; } .about-one__button { margin-top: 37px; } .about-two { background-color: var(--eolexi-white, #FFFFFF); } .about-two__image { position: relative; padding-right: 17px; } @media (max-width: 1199px) { .about-two__image { padding-right: 0px; } } .about-two__image__one { position: absolute; top: 0px; right: 17px; } @media (max-width: 1199px) { .about-two__image__one { right: 0px; } } .about-two__image__one img { max-width: 100%; height: auto; } .about-two__image__two { margin-left: -93px; display: inline-block; position: relative; z-index: 1; border-radius: 80px 300px 0px 100px; } @media (max-width: 1399px) { .about-two__image__two { margin-left: 0px; } } .about-two__image__two::after { content: ""; width: 100%; height: 100%; position: absolute; top: -10px; left: 10px; background-color: var(--eolexi-white, #FFFFFF); border-radius: inherit; } .about-two__image__two img { position: relative; z-index: 1; max-width: 100%; height: auto; border-radius: inherit; } .about-two__image__shape { max-width: 100%; height: auto; position: absolute; top: 84px; left: -83px; animation: zump 2s linear infinite; } @media (max-width: 1299px) { .about-two__image__shape { display: none; } } .about-two__experience { position: relative; z-index: 1; margin-bottom: 10px; display: inline-block; padding: 22.5px 22.5px 36.5px; text-align: center; background-color: var(--eolexi-base, #005b85); } @media (min-width: 992px) and (max-width: 1199px) { .about-two__experience { margin-bottom: 100px; } } @media (max-width: 575px) { .about-two__experience { margin-bottom: 70px; } } @media (max-width: 430px) { .about-two__experience { padding-top: 23px; } } .about-two__experience__year { margin-bottom: 6px; font-size: 60px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.25; } @media (max-width: 430px) { .about-two__experience__year { font-size: 50px; } } .about-two__experience__text { margin: 0px; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-weight: 500; color: var(--eolexi-white, #FFFFFF); font-size: 22px; line-height: 1.136; } @media (max-width: 430px) { .about-two__experience__text { font-size: 20px; } } @media (max-width: 575px) { .about-two__experience__text br { display: inline; } } .about-two .sec-title { margin-bottom: 17px; } .about-two__text { margin-bottom: 20px; } .about-two .tabs-box { position: relative; } .about-two .tabs-box .tab-buttons { margin-bottom: 24px; display: flex; flex-wrap: wrap; } @media (max-width: 575px) { .about-two .tabs-box .tab-buttons { gap: 15px; } } .about-two .tabs-box .tab-buttons .tab-btn { padding: 10.5px 41px; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 18px; font-weight: 700; color: var(--eolexi-black4, #333333); text-transform: capitalize; background-color: var(--eolexi-white2, #F0F2F8); } @media (min-width: 992px) and (max-width: 1199px) { .about-two .tabs-box .tab-buttons .tab-btn { padding-left: 30px; padding-right: 30px; font-size: 16px; } } @media (max-width: 767px) { .about-two .tabs-box .tab-buttons .tab-btn { padding-left: 30px; padding-right: 30px; font-size: 16px; } } .about-two .tabs-box .tab-buttons .tab-btn::before, .about-two .tabs-box .tab-buttons .tab-btn::after { background-color: var(--eolexi-base, #005b85); } .about-two .tabs-box .tab-buttons .tab-btn:hover { color: var(--eolexi-white, #FFFFFF); } .about-two .tabs-box .tab-buttons .tab-btn.active-btn { color: var(--eolexi-white, #FFFFFF); } .about-two .tabs-box .tab-buttons .tab-btn.active-btn::before, .about-two .tabs-box .tab-buttons .tab-btn.active-btn::after { background-color: var(--eolexi-base, #005b85); } .about-two .tabs-box .tab-buttons .tab-btn.active-btn::before { transform: translateX(100%); } .about-two .tabs-box .tab-buttons .tab-btn.active-btn::after { transform: rotate(180deg) translateX(100%); } .about-two .tabs-box .tabs-content { margin-bottom: 34px; position: relative; width: 100%; display: block; } .about-two .tabs-box .tabs-content .tab { position: relative; display: none; -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; z-index: 10; } .about-two .tabs-box .tabs-content .tab.active-tab { display: block; } .about-two__tab { margin-bottom: 37px; } .about-two__tab__text { margin-bottom: 21px; } .about-two__tab__content { display: flex; align-items: center; gap: 20px 16px; } @media (max-width: 575px) { .about-two__tab__content { flex-direction: column; align-items: flex-start; } } .about-two__tab__image { display: inline-block; flex-shrink: 0; } .about-two__tab__image img { max-width: 100%; height: auto; border-radius: 10px; } .about-two__tab__list { margin: 0px; } .about-two__tab__list li + li { margin-top: 10px; } .about-two__tab__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--eolexi-black2, #162452); font-weight: 500; line-height: 1.625; transition: all 500ms ease; } .about-two__tab__list li:hover { color: var(--eolexi-base, #005b85); } .about-two__tab__list__icon { position: relative; top: 1px; width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-black2, #162452); border-radius: 50%; transition: all 500ms ease; } .about-two__tab__list__icon svg { width: 1em; height: 1em; fill: currentColor; } li:hover .about-two__tab__list__icon { background-color: var(--eolexi-base, #005b85); } .about-three { position: relative; overflow: hidden; background-color: var(--eolexi-white2, #F0F2F8); } .about-three .container { position: relative; z-index: 1; } .about-three__image { position: relative; } .about-three__image__img { position: relative; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); } @media (max-width: 1199px) { .about-three__image__img { right: 0px; } } @media (max-width: 991px) { .about-three__image__img { position: static; transform: translate(0); } .about-three__image__img img { max-width: 100%; height: auto; } } .about-three__experience { position: absolute; right: 28px; bottom: 110px; display: flex; align-items: center; } @media (max-width: 991px) { .about-three__experience { right: 30px; bottom: 30px; } } @media (max-width: 390px) { .about-three__experience { position: static; margin-bottom: 30px; } } .about-three__experience__year { margin: 0px; padding: 21px 23px 22.5px; border-radius: 10px; background-color: var(--eolexi-base, #005b85); border: 3px solid var(--eolexi-white, #FFFFFF); font-size: 50px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.32; } @media (max-width: 480px) { .about-three__experience__year { padding: 19px 20px 20.5px; font-size: 40px; } } @media (max-width: 390px) { .about-three__experience__year { font-size: 35px; } } .about-three__experience__text { margin: 0px; padding: 21px 30px; border-radius: 0px 10px 10px 0px; background-color: var(--eolexi-black2, #162452); border: 3px solid var(--eolexi-white, #FFFFFF); border-left: 0px; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 17px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.294; } @media (max-width: 480px) { .about-three__experience__text { padding: 18px 25px; font-size: 16px; } } .about-three .sec-title { margin-bottom: 15px; } .about-three__text { margin-bottom: 22px; } .about-three__border { margin-bottom: 24px; position: relative; width: 100%; height: 1px; overflow: hidden; background-color: var(--eolexi-border-color, #dddddd); } .about-three__border::after { content: ""; width: 20px; height: 100%; position: absolute; top: 0px; left: 0px; background-color: var(--eolexi-base, #005b85); animation: about03Border 10s linear infinite; } @keyframes about03Border { 0% { left: 0px; } 50% { left: calc(100% - 20px); } 100% { left: 0px; } } .about-three__list { margin-bottom: 23px; } .about-three__list li + li { margin-top: 10px; } .about-three__list li { position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--eolexi-text-gray2, #566963); line-height: 1.666; } .about-three__list__icon { position: relative; top: 7px; width: 10px; height: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--eolexi-base, #005b85); } .about-three__list__icon::after { content: ""; width: 4px; height: 4px; border-radius: inherit; background-color: var(--eolexi-base, #005b85); } .about-three__info { margin-bottom: 40px; display: flex; align-items: center; gap: 19px; } .about-three__info__icon-box { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 10px; background-color: var(--eolexi-black2, #162452); transition: all 500ms ease; } .about-three__info:hover .about-three__info__icon-box { background-color: var(--eolexi-base, #005b85); } .about-three__info__icon { display: inline-flex; font-size: 37px; color: var(--eolexi-white, #FFFFFF); } .about-three__info__icon svg { width: 1em; height: 1em; fill: currentColor; } .about-three__info:hover .about-three__info__icon { -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .about-three__info__title { margin: 0px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; line-height: 1.318; } @media (max-width: 375px) { .about-three__info__title { font-size: 20px; } } .about-three__shape { max-width: 100%; height: auto; position: absolute; right: 19px; bottom: 35px; animation: moveHorizontal 2s linear infinite; } /*-------------------------------------------------------------- # Testimonials --------------------------------------------------------------*/ .testimonials-one { background-color: var(--eolexi-white, #FFFFFF); } .testimonials-one__inner { position: relative; margin-bottom: -208px; padding: 69px 57px; border-radius: 10px; background-color: var(--eolexi-white, #FFFFFF); z-index: 1; overflow: hidden; border: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 767px) { .testimonials-one__inner { padding: 40px; } } @media (max-width: 575px) { .testimonials-one__inner { padding: 30px; } } @media (max-width: 412px) { .testimonials-one__inner { padding: 30px 25px; } } .testimonials-one__quote-icon { margin-bottom: 40px; display: inline-flex; font-size: 66px; color: var(--eolexi-base, #005b85); } .testimonials-one__quote-icon svg { width: 1em; height: 1em; fill: currentColor; } .testimonials-one__clients { position: relative; margin-bottom: 40px; padding: 10px 30px 10px 35px; border-radius: 5px; overflow: hidden; background-color: var(--eolexi-black2, #162452); } .testimonials-one__clients::before { content: ""; width: 27px; height: 29px; position: absolute; top: 0px; left: 0px; background-color: var(--eolexi-base, #005b85); clip-path: polygon(100% 0, 81% 14%, 70% 100%, 0 50%, 0 0); } .testimonials-one__clients::after { content: ""; width: 24px; height: 20px; position: absolute; left: 0px; bottom: 0px; background-color: var(--eolexi-base, #005b85); clip-path: polygon(0 0, 0% 100%, 100% 100%); } .testimonials-one__clients__info { position: relative; z-index: 1; margin: 0px; font-weight: 600; font-size: 18px; color: var(--eolexi-white, #FFFFFF); line-height: 1.5; } @media (max-width: 767px) { .testimonials-one__clients__info { font-size: 16px; } } .testimonials-one__thumb { position: relative; margin-bottom: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; z-index: 1; } .testimonials-one__thumb__item { cursor: pointer; position: relative; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 1; transition: all 500ms ease; } @media (max-width: 425px) { .testimonials-one__thumb__item { width: 55px; height: 55px; } } .testimonials-one__thumb__item.active { width: 86px; height: 86px; } @media (max-width: 425px) { .testimonials-one__thumb__item.active { width: 70px; height: 70px; } } .testimonials-one__thumb__item img { cursor: pointer; display: inline-block !important; width: 100% !important; height: 100%; object-fit: cover; border-radius: inherit; } .testimonials-one__carousel.owl-carousel .owl-dots { margin-top: 22px; justify-content: flex-start; } @media (max-width: 575px) { .testimonials-one__carousel.owl-carousel .owl-dots { margin-top: 35px; } } .testimonials-one__item { position: relative; } .testimonials-one__quote { margin-bottom: 19px; font-style: italic; color: var(--eolexi-base, #005b85); font-weight: 500; } .testimonials-one__review { margin-bottom: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 15px; } .testimonials-one__review__text { text-transform: capitalize; color: var(--eolexi-text, #636363); } .testimonials-one__review__text span { color: var(--eolexi-base, #005b85); } .testimonials-one__info { display: flex; align-items: center; gap: 25px 66px; } @media (max-width: 575px) { .testimonials-one__info { flex-direction: column; align-items: flex-start; } } .testimonials-one__identity { position: relative; } .testimonials-one__identity::after { content: ""; width: 3px; height: calc(100% - 14px); position: absolute; top: calc(50% - 1px); right: -33px; border-radius: 10px; transform: translateY(-50%); background-color: var(--eolexi-base, #005b85); } @media (max-width: 575px) { .testimonials-one__identity::after { display: none; } } .testimonials-one__name { margin-bottom: 5px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; text-transform: capitalize; line-height: 1.318; } .testimonials-one__designation { margin: 0px; font-size: 18px; text-transform: capitalize; } .testimonials-one__sign { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; } .testimonials-one__image { position: relative; margin-left: -25px; } @media (max-width: 1199px) { .testimonials-one__image { margin-left: 0px; } .testimonials-one__image img { max-width: 100%; height: auto; } } .testimonials-one__nav { width: 277px; height: 277px; position: absolute; left: 50%; bottom: -243px; transform: translateX(-50%); border-radius: 50%; display: flex; align-items: flex-start; justify-content: center; background-color: var(--eolexi-white2, #F0F2F8); border: 1px dashed var(--eolexi-base, #005b85); } @media (max-width: 1199px) { .testimonials-one__nav { bottom: -250px; } } .testimonials-one__custome-navs { margin-top: 35px; position: relative; display: inline-flex; align-items: center; gap: 10px; } @media (max-width: 1199px) { .testimonials-one__custome-navs { margin-top: 30px; } } .testimonials-one__custome-navs button { position: relative; outline: none; margin: 0; padding: 0; width: 47px; height: 47px; display: flex; justify-content: center; align-items: center; font-size: 14px; color: var(--eolexi-black2, #162452); background-color: var(--eolexi-white2, #F0F2F8); border: 1px solid var(--eolexi-black2, #162452); border-radius: 50%; z-index: 1; transition: all 400ms ease; } .testimonials-one__custome-navs button svg { width: 1em; height: 1em; fill: currentColor; } .testimonials-one__custome-navs button:hover { color: var(--eolexi-white, #FFFFFF); border-color: var(--eolexi-base, #005b85); background-color: var(--eolexi-base, #005b85); } .testimonials-one__custome-navs button span { border: none; outline: none; color: inherit; } .testimonials-one__shape { width: 184px; height: 202px; position: relative; position: absolute; top: 0px; right: 0px; } @media (max-width: 991px) { .testimonials-one__shape { display: none; } } .testimonials-one__shape__quote-left { position: absolute; top: 32px; left: 7px; display: inline-flex; font-size: 84px; color: var(--eolexi-base, #005b85); z-index: 1; } .testimonials-one__shape__quote-left svg { width: 1em; height: 1em; fill: currentColor; } .testimonials-one__shape__quote-right { position: absolute; right: 27px; bottom: 43px; display: inline-flex; font-size: 84px; color: var(--eolexi-white, #FFFFFF); z-index: 1; } .testimonials-one__shape__quote-right svg { width: 1em; height: 1em; fill: currentColor; } .testimonials-one__shape svg { position: absolute; top: 0px; right: 0px; } .testimonials-two { position: relative; background-color: var(--eolexi-white2, #F0F2F8); } .testimonials-two__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: top; background-size: cover; } .testimonials-two .container { position: relative; z-index: 1; } .testimonials-two__inner { position: relative; margin: 0px auto; padding: 0px 40px; max-width: 870px; border-radius: 500px; } @media (max-width: 767px) { .testimonials-two__inner { border-radius: 100px; } } @media (max-width: 575px) { .testimonials-two__inner { padding-top: 30px; padding-bottom: 40px; border-radius: 50px; } } @media (max-width: 430px) { .testimonials-two__inner { padding-left: 30px; padding-right: 30px; } } .testimonials-two__inner::after { content: ""; width: 100%; height: calc(100% - 102px); position: absolute; top: 36px; left: 0px; border-radius: inherit; background-color: var(--eolexi-white, #FFFFFF); } @media (max-width: 575px) { .testimonials-two__inner::after { height: 100%; top: 0px; } } .testimonials-two__thumb { --slick-gutter: 20px; position: relative; margin: 0px auto 23px; width: 410px; z-index: 1; } @media (max-width: 575px) { .testimonials-two__thumb { display: none; } } .testimonials-two__thumb .slick-list { overflow: visible; } .testimonials-two__thumb .slick-track { display: flex; align-items: center; justify-content: center; } .testimonials-two__thumb .slick-slide { opacity: 0; visibility: hidden; width: 58px !important; display: flex; align-items: center; justify-content: center; margin-left: calc(var(--slick-gutter) / 2); margin-right: calc(var(--slick-gutter) / 2); } .testimonials-two__thumb__item { position: relative; cursor: pointer; width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; transition: all 500ms ease; } .testimonials-two__thumb__item::after { content: ""; width: calc(100% + 3px); height: calc(100% + 3px); background-color: var(--eolexi-base, #005b85); position: absolute; top: -3px; left: 50%; transform: translateX(-50%); opacity: 0; border-radius: 50%; transition: all 500ms ease; } .testimonials-two__thumb__item img { position: relative; cursor: pointer; width: 100%; height: 100%; border-radius: inherit; z-index: 1; } .testimonials-two__thumb .slick-slide.slick-active { opacity: 1; visibility: visible; } .testimonials-two__thumb .slick-slide.slick-current { width: 84px !important; opacity: 1; visibility: visible; } .testimonials-two__thumb .slick-slide.slick-current .testimonials-two__thumb__item { width: 84px; height: 84px; } .testimonials-two__thumb .slick-slide.slick-current .testimonials-two__thumb__item::after { opacity: 1; } .testimonials-two__carousel { --slick-gutter: 10px; position: relative; z-index: 1; } .testimonials-two__carousel.slick-slider .slick-dots { margin-top: 95px; } @media (max-width: 575px) { .testimonials-two__carousel.slick-slider .slick-dots { margin-top: 50px; } } .testimonials-two__carousel .slick-slide { margin-top: calc(var(--slick-gutter) / 2); margin-bottom: calc(var(--slick-gutter) / 2); } .testimonials-two__item { position: relative; padding: 0px 100px; text-align: center; } @media (max-width: 991px) { .testimonials-two__item { padding-left: 80px; padding-right: 80px; } } @media (max-width: 767px) { .testimonials-two__item { padding: 0px; } } .testimonials-two__info { margin-bottom: 15px; } @media (max-width: 767px) { .testimonials-two__info { margin-bottom: 30px; } } .testimonials-two__name { margin-bottom: 5px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; text-transform: capitalize; line-height: 1.318; } .testimonials-two__designation { margin: 0px; font-size: 18px; text-transform: capitalize; } .testimonials-two__quote { position: relative; margin-bottom: 19px; font-style: italic; font-weight: 500; color: var(--eolexi-base, #005b85); } @media (max-width: 767px) { .testimonials-two__quote { padding-top: 75px; } } .testimonials-two__quote__icon { position: absolute; top: -25px; left: -100px; display: inline-flex; font-size: 66px; color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.15); transition: all 500ms ease; } .testimonials-two__quote__icon svg { width: 1em; height: 1em; fill: currentColor; } @media (max-width: 991px) { .testimonials-two__quote__icon { top: -15px; left: -80px; font-size: 50px; } } @media (max-width: 767px) { .testimonials-two__quote__icon { top: 0px; left: 50%; transform: translateX(-50%); } } .testimonials-two__quote__icon--right { left: auto; right: -100px; } @media (max-width: 991px) { .testimonials-two__quote__icon--right { right: -80px; } } @media (max-width: 767px) { .testimonials-two__quote__icon--right { display: none; } } .testimonials-two__item:hover .testimonials-two__quote__icon { color: var(--eolexi-base, #005b85); } .testimonials-two__review { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; } .testimonials-two__review__text { text-transform: capitalize; color: var(--eolexi-text, #636363); } .testimonials-two__review__text span { color: var(--eolexi-base, #005b85); } .testimonials-three { position: relative; overflow: hidden; background-color: var(--eolexi-white, #FFFFFF); } .testimonials-three::before { content: ""; width: 375px; height: 789px; position: absolute; top: 0px; left: 0px; z-index: 1; background-color: var(--eolexi-base, #005b85); -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: cover; mask-size: cover; } @media (max-width: 1799px) { .testimonials-three::before { width: 96px; -webkit-mask: unset; mask: unset; clip-path: polygon(0 0, 100% 0, 100% 92%, 0% 100%); } } @media (max-width: 1599px) { .testimonials-three::before { width: 60px; } } @media (max-width: 1399px) { .testimonials-three::before { display: none; } } .testimonials-three__bg { width: 100%; height: 701px; position: relative; position: absolute; top: 0px; left: 0px; background-color: var(--eolexi-white2, #F0F2F8); -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: cover; mask-size: cover; } .testimonials-three__bg__shape { max-width: 100%; height: auto; position: absolute; top: 0px; right: 0px; animation: moveHorizontal 2s linear infinite; } .testimonials-three .container { position: relative; z-index: 2; } .testimonials-three__inner { position: relative; padding: 72px 79px; border-radius: 20px; overflow: hidden; background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 1199px) { .testimonials-three__inner { padding: 40px; } } @media (max-width: 767px) { .testimonials-three__inner { padding: 30px; } } @media (max-width: 430px) { .testimonials-three__inner { padding: 25px; } } .testimonials-three__inner__shape { width: 374px; height: 374px; border-radius: 50%; background-color: var(--eolexi-base, #005b85); position: relative; position: absolute; right: -124px; bottom: -133px; } @media (max-width: 1199px) { .testimonials-three__inner__shape { right: -150px; bottom: -150px; } } @media (max-width: 991px) { .testimonials-three__inner__shape { display: none; } } .testimonials-three__inner__shape img { max-width: 100%; height: auto; position: absolute; top: 76px; left: 81px; } @media (max-width: 1199px) { .testimonials-three__inner__shape img { left: 70px; } } .testimonials-three__carousel { position: relative; z-index: 1; } @media (min-width: 1200px) { .testimonials-three__carousel.owl-carousel .owl-dots { margin-top: 0px !important; position: absolute; left: calc((100% - 264px) / 2); bottom: 30px; } } .testimonials-three__item { display: grid; grid-template-columns: 322px auto; grid-gap: 50px; } @media (max-width: 1199px) { .testimonials-three__item { grid-gap: 35px; } } @media (max-width: 991px) { .testimonials-three__item { grid-template-columns: auto; } } .testimonials-three__content { position: relative; z-index: 1; } .testimonials-three__image { border-radius: 50px; } @media (max-width: 575px) { .testimonials-three__image { border-radius: 30px; } } .testimonials-three__image img { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; border-radius: inherit; } .testimonials-three__content { margin-top: 30px; } @media (max-width: 1199px) { .testimonials-three__content { margin-top: 10px; } } @media (max-width: 991px) { .testimonials-three__content { margin-top: 0px; } } .testimonials-three__quote-icon { margin-bottom: 21px; display: inline-flex; font-size: 66px; color: var(--eolexi-base, #005b85); } .testimonials-three__quote-icon svg { width: 1em; height: 1em; fill: currentColor; } .testimonials-three__quote { margin-bottom: 31px; font-size: 22px; font-weight: 500; font-style: italic; color: var(--eolexi-black4, #333333); line-height: 1.545; } @media (max-width: 767px) { .testimonials-three__quote { font-size: 18px; } } .testimonials-three__name { margin-bottom: 8px; font-size: 22px; font-weight: 700; color: var(--eolexi-black4, #333333); text-transform: capitalize; line-height: 1.318; } @media (max-width: 375px) { .testimonials-three__name { font-size: 20px; } } .testimonials-three__designation { margin-bottom: 22px; font-size: 18px; text-transform: capitalize; } @media (max-width: 375px) { .testimonials-three__designation { font-size: 16px; } } .testimonials-three__thumb { width: 155px; height: 100%; display: flex; flex-direction: column; gap: 10px; position: absolute; top: 106px; left: 0px; z-index: 2; } @media (max-width: 1799px) { .testimonials-three__thumb { gap: 15px; } } @media (max-width: 1599px) { .testimonials-three__thumb { width: 100px; } } @media (max-width: 1399px) { .testimonials-three__thumb { display: none; } } .testimonials-three__thumb__item { cursor: pointer; position: relative; margin-left: auto; width: 117px; height: 117px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--eolexi-white, #FFFFFF); z-index: 1; transition: all 500ms ease; } @media (max-width: 1599px) { .testimonials-three__thumb__item { width: 80px; height: 80px; } } .testimonials-three__thumb__item--2 { right: -81px; } @media (max-width: 1799px) { .testimonials-three__thumb__item--2 { right: 0px; } } .testimonials-three__thumb__item--3 { right: -156px; } @media (max-width: 1799px) { .testimonials-three__thumb__item--3 { right: 0px; } } .testimonials-three__thumb__item__hover { width: calc(100% - 10px); height: calc(100% - 10px); position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-radius: inherit; visibility: hidden; opacity: 0; transform: scale(0.7); z-index: 1; background-color: RGBA(var(--eolexi-black2-rgb, 22, 36, 82), 0.5); transition: all 500ms ease; } .testimonials-three__thumb__item__hover::after, .testimonials-three__thumb__item__hover::before { content: ""; width: 3px; height: 22px; background-color: var(--eolexi-white, #FFFFFF); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 1599px) { .testimonials-three__thumb__item__hover::after, .testimonials-three__thumb__item__hover::before { height: 18px; } } .testimonials-three__thumb__item__hover::after { width: 22px; height: 3px; } @media (max-width: 1599px) { .testimonials-three__thumb__item__hover::after { width: 18px; } } .testimonials-three__thumb__item:hover .testimonials-three__thumb__item__hover, .testimonials-three__thumb__item.owl-dot.active .testimonials-three__thumb__item__hover { visibility: visible; opacity: 1; transform: scale(1); } .testimonials-three__thumb__item img { cursor: pointer; width: calc(100% - 10px) !important; height: calc(100% - 10px); border-radius: inherit; } /*-------------------------------------------------------------- # Gallery --------------------------------------------------------------*/ .gallery-page { background-color: var(--eolexi-white, #FFFFFF); } .gallery-page__filter__list { margin-bottom: 50px; display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; } .gallery-page__filter__list li { padding: 10px 35px; } .gallery-page__filter__list li.active::before { transform: translateX(100%); } .gallery-page__filter__list li.active::after { transform: rotate(180deg) translateX(100%); } .gallery-page__card { position: relative; overflow: hidden; } .gallery-page__card img { display: block; width: 100%; } .gallery-page__card__hover { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; position: absolute; top: 0; left: 0; } .gallery-page__card__hover::after { content: ""; width: 100%; height: 100%; position: absolute; visibility: hidden; right: -100%; bottom: -100%; background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.9); transition: all 500ms ease; } .gallery-page__card__hover .img-popup { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; z-index: 2; } .gallery-page__card:hover .gallery-page__card__hover { visibility: visible; } .gallery-page__card:hover .gallery-page__card__hover::after { right: 0px; bottom: 0px; visibility: visible; } .gallery-page__card__icon { position: relative; width: 32px; height: 32px; display: block; opacity: 0; visibility: hidden; transform: scale(0.5); transition: all 500ms ease; } .gallery-page__card__icon::after, .gallery-page__card__icon::before { content: ""; width: 5px; height: 100%; background-color: var(--eolexi-white, #FFFFFF); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .gallery-page__card__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .gallery-page__card:hover .gallery-page__card__icon { opacity: 1; visibility: visible; transform: scale(1); } /*-------------------------------------------------------------- # Package --------------------------------------------------------------*/ .package-card { position: relative; overflow: auto; border: 1px solid var(--eolexi-border-color, #dddddd); transition: all 500ms ease; } .package-card:hover { border-color: var(--eolexi-base, #005b85); } .package-card::after { content: ""; width: 100%; height: 0%; background-color: var(--eolexi-base, #005b85); position: absolute; bottom: 0px; left: 0px; transition: all 500ms ease; } .package-card:hover::after { height: 100%; top: 0px; } .package-card__shape { max-width: 100%; height: auto; position: absolute; top: 0px; right: 0px; opacity: 0; z-index: 1; transition: all 500ms ease; } .package-card:hover .package-card__shape { opacity: 1; } .package-card__top { padding: 43px 41px 22px; position: relative; border-bottom: 1px solid var(--eolexi-border-color, #dddddd); z-index: 1; transition: all 500ms ease; } @media (min-width: 768px) and (max-width: 1199px) { .package-card__top { padding: 27px 25px 22px; } } @media (max-width: 430px) { .package-card__top { padding: 27px 25px 22px; } } .package-card:hover .package-card__top { border-color: transparent; } .package-card__title { margin-bottom: 12px; font-weight: 500; font-size: 22px; color: var(--eolexi-black, #222222); line-height: 1.314; text-transform: capitalize; transition: all 500ms ease; } .package-card__price { margin-bottom: 15px; font-weight: 500; font-size: 50px; line-height: 1; text-transform: capitalize; transition: all 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .package-card__price { font-size: 40px; } } @media (max-width: 375px) { .package-card__price { font-size: 40px; } } .package-card__price span { font-size: 16px; font-weight: 500; color: var(--eolexi-text, #636363); line-height: 1.25; transition: all 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .package-card__price span { font-size: 14px; } } @media (max-width: 375px) { .package-card__price span { font-size: 14px; } } .package-card__text { margin: 0px; transition: all 500ms ease; } .package-card__content { position: relative; padding: 20px 41px 50px; z-index: 1; transition: all 500ms ease; } @media (min-width: 768px) and (max-width: 1199px) { .package-card__content { padding: 20px 25px 30px; } } @media (max-width: 430px) { .package-card__content { padding: 20px 25px 30px; } } .package-card:hover .package-card__content { background-color: var(--eolexi-black2, #162452); } .package-card__list { margin-bottom: 27px; } .package-card__list li + li { margin-top: 9px; } .package-card__list li { display: flex; align-items: flex-start; gap: 10px; transition: all 500ms ease; } .package-card__list__icon { position: relative; top: 4px; display: inline-flex; font-size: 16px; color: var(--eolexi-text, #636363); transition: all 500ms ease; } .package-card__list__icon svg { width: 1em; height: 1em; fill: currentColor; } .package-card:hover .package-card__title, .package-card:hover .package-card__price, .package-card:hover .package-card__price span, .package-card:hover .package-card__text, .package-card:hover .package-card__list li, .package-card:hover .package-card__list__icon { color: var(--eolexi-white, #FFFFFF); } .package-card .eolexi-btn { background-color: var(--eolexi-black2, #162452); } .package-card .eolexi-btn::after { background-color: var(--eolexi-base, #005b85); } .package-card:hover .eolexi-btn::after { width: 100%; left: 0px; } .package-card:hover .eolexi-btn__icon { color: var(--eolexi-base, #005b85); background-color: var(--eolexi-white, #FFFFFF); } /*-------------------------------------------------------------- # Services --------------------------------------------------------------*/ .service-card { position: relative; } .service-card__icon-box { margin: 0px auto; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; background-color: var(--eolexi-white, #FFFFFF); transition: all 500ms ease; } .service-card:hover .service-card__icon-box { border-radius: 10px 10px 0px 0px; background-color: var(--eolexi-base, #005b85); } .service-card__icon { display: inline-flex; font-size: 54px; color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .service-card__icon svg { width: 1em; height: 1em; fill: currentColor; } .service-card:hover .service-card__icon { color: var(--eolexi-white, #FFFFFF); -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .service-card__image { position: relative; overflow: hidden; border-top: 5px solid var(--eolexi-base, #005b85); } .service-card__image img { width: 100%; display: block; transition: all 1s cubic-bezier(0, 0, 0.44, 1.18); } .service-card:hover .service-card__image img { transform: scale(1.2); } .service-card__content { width: calc(100% - 60px); margin: -59px auto 0px; padding: 25px 25px 0px; position: relative; overflow: hidden; z-index: 1; border-radius: 10px; } @media (min-width: 768px) and (max-width: 1199px) { .service-card__content { width: calc(100% - 30px); margin: -50px auto 0px; } } @media (max-width: 412px) { .service-card__content { width: calc(100% - 30px); margin: -50px auto 0px; } } .service-card__content::before { content: ""; width: 100%; height: calc(100% - 23px); background-color: var(--eolexi-white, #FFFFFF); position: absolute; top: 0px; left: 0px; border-radius: inherit; } .service-card__content::after { content: ""; width: 100%; height: 0%; background-color: var(--eolexi-black2, #162452); position: absolute; top: 0px; left: 0px; visibility: hidden; border-radius: inherit; border: 1px solid transparent; transition: all 500ms ease; } .service-card__content__inner { position: relative; text-align: center; z-index: 1; } .service-card:hover .service-card__content::after { height: calc(100% - 23px); bottom: 0px; visibility: visible; border-color: var(--eolexi-white, #FFFFFF); } .service-card__title { margin-bottom: 10px; font-size: 22px; font-weight: 700; line-height: 1.318; } @media (min-width: 992px) and (max-width: 1199px) { .service-card__title { font-size: 20px; } } @media (max-width: 412px) { .service-card__title { font-size: 20px; } } .service-card__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .service-card__title a:hover { background-size: 100% 1px; } .service-card__text { margin-bottom: 15px; font-size: 18px; transition: all 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .service-card__text { font-size: 16px; } } @media (max-width: 412px) { .service-card__text { font-size: 16px; } } .service-card:hover .service-card__title, .service-card:hover .service-card__text { color: var(--eolexi-white, #FFFFFF); } .service-card__link { margin: 0px auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-black2, #162452); border-radius: 50%; transform: rotate(-45deg); transition: all 500ms ease; } .service-card:hover .service-card__link { transform: rotate(0deg); background-color: var(--eolexi-base, #005b85); } .service-card-two { position: relative; } .service-card-two__image { padding: 5px 5px 0px 5px; position: relative; background-color: var(--eolexi-white, #FFFFFF); z-index: 1; } .service-card-two__image__inner { overflow: hidden; } .service-card-two__image img { width: 100%; display: block; transition: all 1s cubic-bezier(0, 0, 0.44, 1.18); } .service-card-two:hover .service-card-two__image img { transform: scale(1.2); } .service-card-two__icon-box { width: 64px; height: 64px; position: absolute; left: 50%; bottom: -32px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-white, #FFFFFF); transition: all 500ms ease; } .service-card-two:hover .service-card-two__icon-box { background-color: var(--eolexi-base, #005b85); } .service-card-two__icon { display: inline-flex; font-size: 34px; color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .service-card-two__icon svg { width: 1em; height: 1em; fill: currentColor; } .service-card-two:hover .service-card-two__icon { color: var(--eolexi-white, #FFFFFF); -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .service-card-two__content { position: relative; padding: 45px 21px 0px; } .service-card-two__content::before { content: ""; width: 100%; height: calc(100% - 23px); background-color: var(--eolexi-white2, #F0F2F8); position: absolute; top: 0px; left: 0px; } .service-card-two__content::after { content: ""; width: 100%; height: 0%; background-color: var(--eolexi-black2, #162452); position: absolute; top: 0px; left: 0px; transition: all 500ms ease; } .service-card-two__content__inner { position: relative; text-align: center; z-index: 1; } .service-card-two:hover .service-card-two__content::after { height: calc(100% - 23px); bottom: 0px; } .service-card-two__title { margin-bottom: 10px; font-size: 22px; font-weight: 700; line-height: 1.318; } @media (max-width: 375px) { .service-card-two__title { font-size: 20px; } } .service-card-two__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .service-card-two__title a:hover { color: var(--eolexi-base, #005b85); } .service-card-two__title a:hover { background-size: 100% 1px; } .service-card-two__text { margin-bottom: 15px; font-size: 18px; transition: all 500ms ease; } @media (max-width: 375px) { .service-card-two__text { font-size: 16px; } } .service-card-two:hover .service-card-two__title, .service-card-two:hover .service-card-two__text { color: var(--eolexi-white, #FFFFFF); } .service-card-two__link { margin: 0px auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-black2, #162452); border-radius: 50%; transform: rotate(-45deg); transition: all 500ms ease; } .service-card-two:hover .service-card-two__link { transform: rotate(0deg); background-color: var(--eolexi-base, #005b85); } .service-card-three { position: relative; } .service-card-three::after { content: ""; width: 27px; height: 50px; position: absolute; right: 0px; bottom: 0px; background-color: var(--eolexi-base, #005b85); clip-path: polygon(0 43%, 100% 0%, 100% 100%, 0% 100%); transition: all 500ms ease; } .service-card-three:hover::after { background-color: var(--eolexi-black2, #162452); } .service-card-three__image { position: relative; overflow: hidden; } .service-card-three__image img { width: 100%; display: block; transition: all 1s cubic-bezier(0, 0, 0.44, 1.18); } .service-card-three:hover .service-card-three__image img { transform: scale(1.2); } .service-card-three__icon-box { width: 63.473px; height: 101px; padding-top: 19px; position: absolute; left: -12px; bottom: -35px; display: flex; justify-content: center; border-radius: 800px; border: 1px solid var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); transform: rotate(41.19deg); transition: all 600ms cubic-bezier(0, 0, 0.44, 1.18); } .service-card-three:hover .service-card-three__icon-box { left: 50%; transform: translateX(-50%) rotate(0deg); background-color: var(--eolexi-black2, #162452); } .service-card-three__icon { position: relative; top: -9px; left: 14px; display: inline-flex; font-size: 34px; color: var(--eolexi-white, #FFFFFF); transform: rotate(-41.19deg); transition: all 500ms ease; } .service-card-three__icon svg { width: 1em; height: 1em; fill: currentColor; } .service-card-three:hover .service-card-three__icon { top: 0px; left: 0px; transform: rotate(0deg); } .service-card-three__content { padding-left: 48px; } @media (min-width: 768px) and (max-width: 991px) { .service-card-three__content { padding-left: 20px; } } @media (min-width: 992px) and (max-width: 1199px) { .service-card-three__content { padding-left: 0px; } } @media (max-width: 412px) { .service-card-three__content { padding-left: 0px; } } .service-card-three__inner { position: relative; padding: 24px 30px 28px; background-color: var(--eolexi-white2, #F0F2F8); } @media (min-width: 768px) and (max-width: 1199px) { .service-card-three__inner { padding: 24px 25px 23px; } } @media (max-width: 375px) { .service-card-three__inner { padding: 24px 25px 23px; } } .service-card-three__title { position: relative; margin-bottom: 12px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; line-height: 1.318; z-index: 1; } @media (min-width: 768px) and (max-width: 1199px) { .service-card-three__title { font-size: 20px; } } @media (max-width: 375px) { .service-card-three__title { font-size: 20px; } } .service-card-three__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .service-card-three__title a:hover { color: var(--eolexi-base, #005b85); } .service-card-three__title a:hover { background-size: 100% 1px; } .service-card-three__text { position: relative; margin-bottom: 15px; font-size: 18px; line-height: 1.666; z-index: 1; } @media (min-width: 768px) and (max-width: 1199px) { .service-card-three__text { font-size: 16px; } } @media (max-width: 375px) { .service-card-three__text { font-size: 16px; } } .service-card-three__link { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--eolexi-black4, #333333); font-weight: 500; text-transform: uppercase; line-height: 1.25; z-index: 1; transition: all 500ms ease; } @media (min-width: 768px) and (max-width: 1199px) { .service-card-three__link { font-size: 14px; } } @media (max-width: 375px) { .service-card-three__link { font-size: 14px; } } .service-card-three__link:hover { color: var(--eolexi-base, #005b85); } .service-card-three__link__icon { display: inline-flex; flex-shrink: 0; transform: rotate(-45deg); font-size: 13px; color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .service-card-three__link__icon svg { width: 1em; height: 1em; fill: currentColor; } .service-card-three__link:hover .service-card-three__link__icon { transform: rotate(0deg); } .service-card-three__shape { width: 5px; height: 93px; background-color: var(--eolexi-black2, #162452); position: relative; position: absolute; left: -5px; bottom: 0px; overflow: hidden; } .service-card-three__shape::before { content: ""; width: 100%; height: 0%; background-color: var(--eolexi-base, #005b85); position: absolute; left: 0px; bottom: 0px; transition: all 700ms cubic-bezier(0, 0, 0.44, 1.18); } .service-card-three:hover .service-card-three__shape::before { height: 100%; top: 0px; } .service-card-three__number { width: 33px; height: 33px; display: flex; align-items: center; justify-content: center; position: relative; position: absolute; right: 10px; bottom: 10px; border-radius: 50%; background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-black, #222222); z-index: 1; transition: all 500ms ease; } .service-card-three__number::after { content: "0" counter(serviceNumber); counter-increment: serviceNumber; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 16px; color: var(--eolexi-black, #222222); font-weight: 700; line-height: 1; transition: all 500ms ease; } .service-card-three:hover .service-card-three__number { border-color: var(--eolexi-base, #005b85); background-color: var(--eolexi-base, #005b85); } .service-card-three:hover .service-card-three__number::after { color: var(--eolexi-white, #FFFFFF); } .services-one { position: relative; background-color: var(--eolexi-white2, #F0F2F8); } .services-one__carousel.owl-carousel .owl-nav button { background-color: var(--eolexi-white, #FFFFFF); } .services-two { position: relative; background-color: var(--eolexi-black2, #162452); } .services-two::after { content: ""; width: 100%; height: 422px; position: absolute; left: 0px; bottom: 0px; background-color: var(--eolexi-white, #FFFFFF); } .services-two .container { position: relative; z-index: 1; } .services-two .sec-title__title { color: var(--eolexi-white, #FFFFFF); } .services-two__shape-1 { width: 205px; height: 163px; clip-path: polygon(0 0, 0 100%, 100% 0); background-color: var(--eolexi-base, #005b85); position: absolute; top: 0px; left: 0px; z-index: 1; } @media (max-width: 991px) { .services-two__shape-1 { left: -50px; } } @media (max-width: 767px) { .services-two__shape-1 { display: none; } } .services-two__shape-2 { width: 162px; height: 170px; clip-path: polygon(0 100%, 100% 21%, 0 0); background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.5); position: absolute; top: 60px; left: 0px; } @media (max-width: 991px) { .services-two__shape-2 { left: -50px; } } @media (max-width: 767px) { .services-two__shape-2 { display: none; } } .services-two__shape-3 { width: 205px; height: 163px; clip-path: polygon(100% 100%, 100% 0, 0 0); background-color: var(--eolexi-base, #005b85); position: absolute; top: 0px; right: 0px; z-index: 1; } @media (max-width: 991px) { .services-two__shape-3 { right: -50px; } } @media (max-width: 767px) { .services-two__shape-3 { display: none; } } .services-two__shape-4 { width: 162px; height: 170px; clip-path: polygon(100% 100%, 100% 0, 0 21%); background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.5); position: absolute; top: 60px; right: 0px; } @media (max-width: 991px) { .services-two__shape-4 { right: -50px; } } @media (max-width: 767px) { .services-two__shape-4 { display: none; } } .services-two--page { background-color: var(--eolexi-white2, #F0F2F8); } .services-two--page::after { display: none; } .services-two--page .sec-title__title { color: var(--eolexi-black3, #000000); } .services-two--page .services-two__carousel.owl-carousel .owl-nav button { background-color: var(--eolexi-white, #FFFFFF); } .services-two--page .services-two__carousel.owl-carousel .owl-nav button:hover { background-color: var(--eolexi-base, #005b85); } .services-two--page .service-card-two__content::before { background-color: var(--eolexi-white, #FFFFFF); } .services-three { counter-reset: serviceNumber; background-color: var(--eolexi-white, #FFFFFF); } /*-------------------------------------------------------------- # Service Details --------------------------------------------------------------*/ .service-details { background-color: var(--eolexi-white, #FFFFFF); } .service-details__image { height: 100%; } .service-details__image img { width: 100%; height: 100%; display: block; object-fit: cover; } .service-details__pages { padding: 27px 30px 34px; background-color: var(--eolexi-white2, #F0F2F8); } @media (max-width: 412px) { .service-details__pages { padding: 22px 25px 29px; } } @media (max-width: 390px) { .service-details__pages { padding: 17px 20px 24px; } } .service-details__pages__title { margin-bottom: 12px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; line-height: 1.318; text-transform: capitalize; } @media (max-width: 991px) { .service-details__pages__title { margin-bottom: 20px; } } .service-details__nav { margin: 0px; } .service-details__nav li + li { margin-top: 20px; } .service-details__nav li a { padding: 10.5px 20px; display: flex; align-items: center; gap: 20px; background-color: var(--eolexi-white, #FFFFFF); font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-weight: 600; font-size: 18px; color: var(--eolexi-black, #222222); text-align: left; text-transform: capitalize; line-height: 1.333; } @media (max-width: 412px) { .service-details__nav li a { padding-left: 15px; padding-right: 15px; gap: 15px; } } @media (max-width: 390px) { .service-details__nav li a { font-size: 16px; } } .service-details__nav li a::before, .service-details__nav li a::after { background-color: var(--eolexi-base, #005b85); } .service-details__nav li .service-details__nav__icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); border-radius: 50%; transition: all 500ms ease; } @media (max-width: 390px) { .service-details__nav li .service-details__nav__icon { width: 28px; height: 28px; font-size: 10px; } } .service-details__nav li a:hover .service-details__nav__icon, .service-details__nav li.current a .service-details__nav__icon { color: var(--eolexi-base, #005b85); background-color: var(--eolexi-white, #FFFFFF); } .service-details__nav li.current a { color: var(--eolexi-white, #FFFFFF); } .service-details__nav li.current a::before { transform: translateX(100%); } .service-details__nav li.current a::after { transform: rotate(180deg) translateX(100%); } .service-details__content { margin-top: 45px; } .service-details__title { margin-bottom: 12px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 500; line-height: 1.318; } .service-details__box--1 { margin-bottom: 43px; } .service-details__box--2 .service-details__text + .service-details__text { margin-top: 10px; } .service-details__text { margin: 0px; } .service-details__inner { margin-bottom: 45px; } .service-details__inner__content { max-width: 470px; } @media (max-width: 1199px) { .service-details__inner__content { max-width: 100%; } } .service-details__inner__image img { width: 100%; display: block; } .service-details__list { margin-bottom: 23px; } .service-details__list li + li { margin-top: 10px; } .service-details__list li { position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--eolexi-text-gray2, #566963); line-height: 1.666; } .service-details__list__icon { position: relative; top: 6px; width: 10px; height: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--eolexi-base, #005b85); } .service-details__list__icon::after { content: ""; width: 4px; height: 4px; border-radius: inherit; background-color: var(--eolexi-base, #005b85); } .service-details__business { padding-top: 31px; display: flex; align-items: flex-start; gap: 19px; border-top: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 390px) { .service-details__business { flex-direction: column; } } .service-details__business__icon { width: 80px; height: 80px; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background-color: var(--eolexi-base, #005b85); font-size: 34px; color: var(--eolexi-white, #FFFFFF); } .service-details__business__icon__inner { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; top: 0px; right: 0px; background-color: var(--eolexi-black2, #162452); font-size: 14px; color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-white, #FFFFFF); } .service-details__business__title { margin-bottom: 9px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; line-height: 1.318; text-transform: capitalize; } .service-details__business__text { margin: 0px; font-size: 15px; color: var(--eolexi-text-gray2, #566963); } /*-------------------------------------------------------------- # Projects --------------------------------------------------------------*/ .project-card { position: relative; padding: 10px; background-color: var(--eolexi-white, #FFFFFF); } .project-card__image { overflow: hidden; } .project-card__image img { width: 100%; display: block; transition: all 600ms cubic-bezier(0, 0, 0.44, 1.18); } .project-card:hover .project-card__image img { transform: scale(1.1); } .project-card__content { width: calc(100% - 20px); padding: 0px 30px 45px; text-align: center; position: relative; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); opacity: 0; transition: all 500ms ease; } @media (max-width: 390px) { .project-card__content { padding-left: 25px; padding-right: 25px; } } .project-card:hover .project-card__content { opacity: 1; } .project-card__shape { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.9); -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: center center; mask-position: center center; -webkit-mask-size: cover; mask-size: cover; } .project-card__inner { position: relative; opacity: 0; transform: translateY(-30%); z-index: 1; transition: all 600ms cubic-bezier(0, 0, 0.44, 1.18); } .project-card:hover .project-card__inner { opacity: 1; transform: translateY(0%); } .project-card__icon { margin: 0px auto 18px; width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background-color: var(--eolexi-white, #FFFFFF); font-size: 36px; color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .project-card__icon svg { width: 1em; height: 1em; fill: currentColor; } .project-card__title { margin-bottom: 12px; font-size: 22px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.318; } @media (max-width: 390px) { .project-card__title { font-size: 20px; } } .project-card__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .project-card__title a:hover { background-size: 100% 1px; } .project-card__text { margin: 0px; font-size: 18px; color: var(--eolexi-white, #FFFFFF); } @media (max-width: 390px) { .project-card__text { font-size: 16px; } } .project-card__btn { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: absolute; left: 50%; bottom: -78px; transform: translateX(-50%); background-color: var(--eolexi-black2, #162452); border-radius: 50%; } .project-card__btn__icon { display: inline-flex; font-size: 16px; color: var(--eolexi-white, #FFFFFF); transform: rotate(-45deg); transition: all 500ms ease; } .project-card__btn__icon svg { width: 1em; height: 1em; fill: currentColor; } .project-card__btn:hover .project-card__btn__icon { transform: rotate(0deg); } .project-card-two { position: relative; overflow: hidden; } .project-card-two__image { overflow: hidden; } .project-card-two__image img { width: 100%; display: block; transition: all 600ms cubic-bezier(0, 0, 0.44, 1.18); } .project-card-two:hover .project-card-two__image img { transform: scale(1.05) rotate(2deg); } .project-card-two__content { width: 100%; padding: 30px; position: absolute; left: 0px; bottom: 0px; opacity: 0; transform: translateX(100px) scale(0.1); transition: all 500ms cubic-bezier(0, 0, 0.44, 1.18); } @media (min-width: 768px) and (max-width: 991px) { .project-card-two__content { padding: 25px; } } @media (max-width: 430px) { .project-card-two__content { padding: 25px; } } @media (max-width: 375px) { .project-card-two__content { padding: 20px; } } .project-card-two:hover .project-card-two__content { opacity: 1; transform: translateX(0px) scale(1); } .project-card-two__inner { padding: 23px 30px 25px; background-color: var(--eolexi-base, #005b85); display: inline-flex; align-items: center; gap: 40px; } @media (min-width: 768px) and (max-width: 991px) { .project-card-two__inner { padding: 18px 25px 20px; gap: 30px; } } @media (max-width: 430px) { .project-card-two__inner { padding: 18px 25px 20px; gap: 30px; } } @media (max-width: 375px) { .project-card-two__inner { padding: 13px 20px 15px; gap: 30px; } } .project-card-two__title { margin-bottom: 6px; font-size: 22px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.318; } @media (min-width: 768px) and (max-width: 991px) { .project-card-two__title { font-size: 20px; } } @media (max-width: 430px) { .project-card-two__title { font-size: 20px; } } @media (max-width: 375px) { .project-card-two__title { font-size: 19px; } } .project-card-two__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .project-card-two__title a:hover { background-size: 100% 1px; } .project-card-two__category { margin: 0px; font-size: 18px; color: var(--eolexi-white, #FFFFFF); line-height: 1.277; } @media (min-width: 768px) and (max-width: 991px) { .project-card-two__category { font-size: 16px; } } @media (max-width: 430px) { .project-card-two__category { font-size: 16px; } } @media (max-width: 375px) { .project-card-two__category { font-size: 14px; } } .project-card-two__btn { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: var(--eolexi-black2, #162452); border-radius: 50%; } .project-card-two__btn:hover { background-color: var(--eolexi-white, #FFFFFF); } .project-card-two__btn__icon { display: inline-flex; font-size: 13px; color: var(--eolexi-white, #FFFFFF); transform: rotate(-45deg); transition: all 500ms ease; } .project-card-two__btn__icon svg { width: 1em; height: 1em; fill: currentColor; } .project-card-two__btn:hover .project-card-two__btn__icon { color: var(--eolexi-base, #005b85); transform: rotate(0deg); } .projects-one { background-color: var(--eolexi-white, #FFFFFF); } .projects-one__top { margin-bottom: 51px; } .projects-one .sec-title { margin: 0px; } .projects-one__nav { display: flex; align-items: center; justify-content: flex-end; } .projects-one__custome-navs { position: relative; display: inline-flex; align-items: center; gap: 91px; } @media (max-width: 991px) { .projects-one__custome-navs { gap: 80px; } } .projects-one__custome-navs::after { content: ""; width: calc(100% - 107px); height: calc(100% - 15px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--eolexi-white2, #F0F2F8); } @media (max-width: 991px) { .projects-one__custome-navs::after { width: calc(100% - 60px); } } .projects-one__custome-navs button { position: relative; outline: none; margin: 0; padding: 0; width: 73px; height: 73px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: var(--eolexi-black2, #162452); background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-black2, #162452); border-radius: 50%; z-index: 1; transition: all 400ms ease; } .projects-one__custome-navs button svg { width: 1em; height: 1em; fill: currentColor; } @media (max-width: 991px) { .projects-one__custome-navs button { width: 55px; height: 55px; font-size: 16px; } } .projects-one__custome-navs button:hover { color: var(--eolexi-white, #FFFFFF); border-color: var(--eolexi-base, #005b85); background-color: var(--eolexi-base, #005b85); } .projects-one__custome-navs button span { border: none; outline: none; color: inherit; } .projects-one__carousel { position: relative; } .projects-one .eolexi-owl__carousel__counter { position: absolute; top: -98px; right: 96.5px; display: flex; align-items: center; gap: 20px; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 22px; color: var(--eolexi-black3, #000000); font-weight: 700; line-height: 1; } @media (max-width: 991px) { .projects-one .eolexi-owl__carousel__counter { top: -88px; right: 75px; font-size: 18px; } } .projects-one .eolexi-owl__carousel__counter__current { color: var(--eolexi-base, #005b85); } .projects-one .eolexi-owl__carousel__counter__total { position: relative; } .projects-one .eolexi-owl__carousel__counter__total::before { content: "/"; position: absolute; top: -1px; left: -14px; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 22px; color: var(--eolexi-black3, #000000); font-weight: 700; line-height: 1; } @media (max-width: 991px) { .projects-one .eolexi-owl__carousel__counter__total::before { font-size: 18px; } } .projects-one__item { position: relative; } .projects-one__image img { width: auto !important; display: inline-block !important; max-width: 100%; height: auto; } .projects-one__card { width: 100%; max-width: 510px; padding: 68px; position: relative; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); background-color: var(--eolexi-black2, #162452); border: 10px solid var(--eolexi-white, #FFFFFF); overflow: hidden; background-repeat: no-repeat; background-position: top center; background-size: cover; } @media (max-width: 1199px) { .projects-one__card { padding: 40px; max-width: 480px; } } @media (max-width: 991px) { .projects-one__card { position: static; margin-top: -200px; margin-left: 30px; transform: translateY(0px); } } @media (max-width: 767px) { .projects-one__card { margin-top: -150px; margin-left: 0px; padding: 40px; max-width: 480px; } } @media (max-width: 575px) { .projects-one__card { margin-top: 30px; max-width: 100%; border: 0px; } } @media (max-width: 430px) { .projects-one__card { padding: 30px; } } .projects-one__card__inner { position: relative; z-index: 1; } .projects-one__card__icon { margin-bottom: 27px; display: inline-flex; font-size: 65px; color: var(--eolexi-white, #FFFFFF); } .projects-one__card__icon svg { width: 1em; height: 1em; fill: currentColor; } .projects-one__card__title { margin-bottom: 15px; font-size: 22px; font-weight: 700; color: var(--eolexi-white, #FFFFFF); line-height: 1.318; } .projects-one__card__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .projects-one__card__title a:hover { color: var(--eolexi-base, #005b85); } .projects-one__card__title a:hover { background-size: 100% 1px; } .projects-one__card__text { margin-bottom: 35px; color: var(--eolexi-white, #FFFFFF); } .projects-one__card__shape { width: 204px; height: 204px; display: flex; align-items: center; justify-content: center; background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.5); border-radius: 50%; position: absolute; top: -94px; right: -86px; } @media (max-width: 575px) { .projects-one__card__shape { top: -110px; } } .projects-one__card__shape::after { content: ""; width: calc(100% - 36px); height: calc(100% - 36px); border-radius: 50%; background-color: var(--eolexi-base, #005b85); } .projects-two { position: relative; background-color: var(--eolexi-white, #FFFFFF); } .projects-two__bg { width: 100%; height: 513px; position: relative; position: absolute; top: 0px; left: 0px; background-repeat: no-repeat; background-position: top center; background-size: cover; } @media (max-width: 1199px) { .projects-two__bg { height: 700px; } } @media (max-width: 430px) { .projects-two__bg { height: 800px; } } .projects-two__bg::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: RGBA(var(--eolexi-black2-rgb, 22, 36, 82), 0.92); } .projects-two .container { position: relative; } @media (min-width: 576px) { .projects-two__container { padding-right: 0; margin-left: calc((100% - 540px) / 2); width: auto; min-width: auto; max-width: inherit; } } @media (min-width: 768px) { .projects-two__container { margin-left: calc((100% - 720px) / 2); } } @media (min-width: 992px) { .projects-two__container { margin-left: calc((100% - 960px) / 2); } } @media (min-width: 1200px) { .projects-two__container { margin-left: calc((100% - 1200px) / 2); } } .projects-two__top { margin-bottom: 51px; } .projects-two .sec-title { margin: 0px; } @media (max-width: 1199px) { .projects-two .sec-title { text-align: center; } } @media (max-width: 1199px) { .projects-two .sec-title__top { justify-content: center; } } .projects-two .sec-title__title { color: var(--eolexi-white, #FFFFFF); } .projects-two__text { margin-bottom: 25px; color: var(--eolexi-white, #FFFFFF); } @media (max-width: 1199px) { .projects-two__text { text-align: center; } } .projects-two__filter__list { margin-bottom: 0px; display: flex; align-items: center; flex-wrap: wrap; } @media (max-width: 1199px) { .projects-two__filter__list { justify-content: center; } } @media (max-width: 767px) { .projects-two__filter__list { gap: 15px; } } .projects-two__filter__list li:first-child { border-left: 1px solid var(--eolexi-border-color, #dddddd); } .projects-two__filter__list li { padding: 9.5px 30px; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 18px; font-weight: 700; text-align: center; color: var(--eolexi-white, #FFFFFF); text-transform: capitalize; background-color: transparent; border-top: 1px solid var(--eolexi-border-color, #dddddd); border-bottom: 1px solid var(--eolexi-border-color, #dddddd); border-right: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 767px) { .projects-two__filter__list li { padding: 9px 25px; font-size: 16px; border: 1px solid var(--eolexi-border-color, #dddddd); } .projects-two__filter__list li:hover { border-color: var(--eolexi-base, #005b85); } } .projects-two__filter__list li::before, .projects-two__filter__list li::after { background-color: var(--eolexi-base, #005b85); } .projects-two__filter__list li.active { color: var(--eolexi-white, #FFFFFF); } @media (max-width: 767px) { .projects-two__filter__list li.active { border-color: var(--eolexi-base, #005b85); } } .projects-two__filter__list li.active::before { transform: translateX(100%); } .projects-two__filter__list li.active::after { transform: rotate(180deg) translateX(100%); } .projects-two__bottom { margin-top: 80px; } @media (max-width: 991px) { .projects-two__bottom { margin-top: 50px; } } .projects-two__info { position: relative; padding-left: 60px; } @media (max-width: 430px) { .projects-two__info { padding-left: 40px; } } .projects-two__info::before { content: ""; width: 8px; height: calc(100% + 19px); background-color: var(--eolexi-base, #005b85); position: absolute; top: calc(50% + 2px); left: 0px; transform: translateY(-50%); } @media (max-width: 430px) { .projects-two__info::before { width: 6px; } } .projects-two__info::after { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 18.5px 0 18.5px 32px; border-color: transparent transparent transparent var(--eolexi-base, #005b85); position: absolute; top: calc(50% + 2px); left: 8px; transform: translateY(-50%); } @media (max-width: 430px) { .projects-two__info::after { left: 6px; border-width: 9px 0 9px 16px; } } .projects-two__info__title { margin-bottom: 20px; font-size: 22px; font-weight: 700; line-height: 1.318; } @media (max-width: 430px) { .projects-two__info__title { font-size: 20px; } } .projects-two__info__list { margin: 0px; } .projects-two__info__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--eolexi-black4, #333333); font-weight: 500; } .projects-two__info__list__icon { width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; top: 2px; font-size: 11px; color: var(--eolexi-white, #FFFFFF); border-radius: 50%; background-color: var(--eolexi-black2, #162452); } .projects-two__info__list__icon svg { width: 1em; height: 1em; fill: currentColor; } @media (min-width: 992px) { .projects-two__button { display: flex; align-items: center; justify-content: flex-end; } } .projects-two--page { background-color: var(--eolexi-white2, #F0F2F8); } .projects-two--page .sec-title { margin-bottom: 51px; } .projects-two--page .sec-title__title { color: var(--eolexi-black3, #000000); } .projects-two--page .projects-two__text { color: var(--eolexi-text, #636363); } .projects-two--page .projects-two__filter__list li { color: var(--eolexi-black, #222222); } .projects-two--page .projects-two__filter__list li:hover, .projects-two--page .projects-two__filter__list li.active { color: var(--eolexi-white, #FFFFFF); } .projects-two--page .projects-two__carousel.owl-carousel .owl-nav button { background-color: var(--eolexi-white, #FFFFFF); } .projects-two--page .projects-two__carousel.owl-carousel .owl-nav button:hover { background-color: var(--eolexi-base, #005b85); } .projects-three { position: relative; background-color: var(--eolexi-white, #FFFFFF); } .projects-three__container { max-width: 1432px; } .projects-three__top { margin-bottom: 51px; } .projects-three .sec-title { margin: 0px; } @media (max-width: 1199px) { .projects-three .sec-title { text-align: center; } } @media (max-width: 1199px) { .projects-three .sec-title .sec-title__top { justify-content: center; } } .projects-three__text { margin-bottom: 25px; } @media (max-width: 1199px) { .projects-three__text { text-align: center; } } .projects-three__filter__list { margin-bottom: 0px; display: flex; align-items: center; flex-wrap: wrap; } @media (max-width: 1199px) { .projects-three__filter__list { justify-content: center; } } @media (max-width: 767px) { .projects-three__filter__list { gap: 15px; } } .projects-three__filter__list li:first-child { border-left: 1px solid var(--eolexi-border-color, #dddddd); } .projects-three__filter__list li { padding: 9.5px 30px; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 18px; font-weight: 700; text-align: center; color: var(--eolexi-black, #222222); text-transform: capitalize; background-color: transparent; border-top: 1px solid var(--eolexi-border-color, #dddddd); border-bottom: 1px solid var(--eolexi-border-color, #dddddd); border-right: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 767px) { .projects-three__filter__list li { padding: 9px 25px; font-size: 16px; border: 1px solid var(--eolexi-border-color, #dddddd); } .projects-three__filter__list li:hover { border-color: var(--eolexi-base, #005b85); } } .projects-three__filter__list li::before, .projects-three__filter__list li::after { background-color: var(--eolexi-base, #005b85); } .projects-three__filter__list li.active { color: var(--eolexi-white, #FFFFFF); } @media (max-width: 767px) { .projects-three__filter__list li.active { border-color: var(--eolexi-base, #005b85); } } .projects-three__filter__list li.active::before { transform: translateX(100%); } .projects-three__filter__list li.active::after { transform: rotate(180deg) translateX(100%); } .projects-three .column-sm { flex: 0 0 auto; width: 29.051%; } @media (max-width: 1199px) { .projects-three .column-sm { width: 50%; } } @media (max-width: 767px) { .projects-three .column-sm { width: 100%; } } .projects-three .column-lg { flex: 0 0 auto; width: 41.898%; } @media (max-width: 1199px) { .projects-three .column-lg { width: 50%; } } @media (max-width: 767px) { .projects-three .column-lg { width: 100%; } } .projects-three--home3 .projects-three__container { position: relative; padding: 0px; max-width: 100%; z-index: 1; } .projects-three--home3 .eolexi-owl__carousel__counter { position: absolute; right: calc((100% - 978px) / 2); bottom: -113px; display: flex; align-items: center; justify-content: flex-end; gap: 20px; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 22px; color: var(--eolexi-black3, #000000); font-weight: 700; line-height: 1; } @media (max-width: 1199px) { .projects-three--home3 .eolexi-owl__carousel__counter { right: calc((100% - 738px) / 2); } } @media (max-width: 991px) { .projects-three--home3 .eolexi-owl__carousel__counter { display: none; } } .projects-three--home3 .eolexi-owl__carousel__counter__current { color: var(--eolexi-base, #005b85); } .projects-three--home3 .eolexi-owl__carousel__counter__total { position: relative; } .projects-three--home3 .eolexi-owl__carousel__counter__total::before { content: "/"; position: absolute; top: -1px; left: -14px; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 22px; color: var(--eolexi-black3, #000000); font-weight: 700; line-height: 1; } @media (max-width: 991px) { .projects-three--home3 .eolexi-owl__carousel__counter__total::before { font-size: 18px; } } .projects-three--home3 .projects-three__bottom { margin-top: 50px; } .projects-three--home3 .projects-three__info__title { margin-bottom: 20px; font-size: 22px; font-weight: 700; line-height: 1.318; } @media (max-width: 430px) { .projects-three--home3 .projects-three__info__title { font-size: 20px; } } .projects-three--home3 .projects-three__info__list { margin: 0px; } .projects-three--home3 .projects-three__info__list li { display: flex; align-items: flex-start; gap: 10px; color: var(--eolexi-black4, #333333); font-weight: 500; } .projects-three--home3 .projects-three__info__list__icon { width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; top: 2px; font-size: 11px; color: var(--eolexi-white, #FFFFFF); border-radius: 50%; background-color: var(--eolexi-black2, #162452); } .projects-three--home3 .projects-three__info__list__icon svg { width: 1em; height: 1em; fill: currentColor; } .projects-three--home3 .projects-three__nav { display: flex; align-items: center; justify-content: flex-end; } @media (max-width: 991px) { .projects-three--home3 .projects-three__nav { justify-content: flex-start; } } .projects-three--home3 .projects-three__custome-navs { position: relative; display: inline-flex; align-items: center; gap: 91px; } @media (max-width: 991px) { .projects-three--home3 .projects-three__custome-navs { gap: 15px; } } .projects-three--home3 .projects-three__custome-navs::after { content: ""; width: calc(100% - 107px); height: calc(100% - 15px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--eolexi-white2, #F0F2F8); } @media (max-width: 991px) { .projects-three--home3 .projects-three__custome-navs::after { display: none; } } .projects-three--home3 .projects-three__custome-navs button { position: relative; outline: none; margin: 0; padding: 0; width: 73px; height: 73px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: var(--eolexi-black2, #162452); background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-black2, #162452); border-radius: 50%; z-index: 1; transition: all 400ms ease; } .projects-three--home3 .projects-three__custome-navs button svg { width: 1em; height: 1em; fill: currentColor; } @media (max-width: 991px) { .projects-three--home3 .projects-three__custome-navs button { width: 55px; height: 55px; font-size: 16px; } } .projects-three--home3 .projects-three__custome-navs button:hover { color: var(--eolexi-white, #FFFFFF); border-color: var(--eolexi-base, #005b85); background-color: var(--eolexi-base, #005b85); } .projects-three--home3 .projects-three__custome-navs button span { border: none; outline: none; color: inherit; } .projects-three--page .sec-title { margin-bottom: 51px; } /*-------------------------------------------------------------- # Project Details --------------------------------------------------------------*/ .project-details { background-color: var(--eolexi-white, #FFFFFF); } .project-details__image { margin-bottom: 38px; position: relative; } .project-details__image img { width: 100%; display: block; } .project-details__info { min-width: 410px; margin: 0px; padding: 43px; position: absolute; right: 0px; bottom: 0px; background-color: var(--eolexi-base, #005b85); } @media (max-width: 1199px) { .project-details__info { padding: 30px; } } @media (max-width: 991px) { .project-details__info { min-width: 100%; margin-top: 30px; position: static; } } @media (max-width: 480px) { .project-details__info { padding: 25px; } } .project-details__info li + li { margin-top: 15px; } .project-details__info li { display: flex; align-items: center; gap: 22px; font-size: 22px; color: var(--eolexi-white, #FFFFFF); text-transform: capitalize; line-height: 1.318; } @media (max-width: 575px) { .project-details__info li { font-size: 18px; } } .project-details__info__title { position: relative; top: -1px; display: flex; align-items: center; gap: 18px; flex: 0 0 140px; } @media (max-width: 991px) { .project-details__info__title { flex: 0 0 160px; } } @media (max-width: 575px) { .project-details__info__title { flex: 0 0 125px; gap: 12px; } } @media (max-width: 412px) { .project-details__info__title { flex: 0 0 90px; } } @media (max-width: 375px) { .project-details__info__title { flex: 0 0 auto; } } .project-details__info__icon { display: inline-flex; font-size: 20px; color: var(--eolexi-white, #FFFFFF); } .project-details__info__icon svg { width: 1em; height: 1em; fill: currentColor; } @media (max-width: 575px) { .project-details__info__icon { font-size: 16px; } } @media (max-width: 412px) { .project-details__info__icon { display: none; } } .project-details__title { margin-bottom: 20px; font-weight: 700; font-size: 35px; line-height: 1.314; } @media (max-width: 767px) { .project-details__title { font-size: 32px; } } @media (max-width: 575px) { .project-details__title { font-size: 30px; } } .project-details__text { margin: 0px; } .project-details__list { max-width: 970px; margin-top: 11px; margin-bottom: 22px; --bs-gutter-x: 20px; --bs-gutter-y: 14px; } .project-details__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.625; } .project-details__list__icon { position: relative; top: 3px; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 8px; color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-black, #222222); border-radius: 50%; transition: all 500ms ease; } .project-details__list__icon svg { width: 1em; height: 1em; fill: currentColor; } li:hover .project-details__list__icon { background-color: var(--eolexi-base, #005b85); } /*-------------------------------------------------------------- # Shop --------------------------------------------------------------*/ .product { position: relative; } .product__sidebar { position: relative; } .product__sidebar__item + .product__sidebar__item { margin-top: 30px; } .product__sidebar__item { padding: 24px 30px 30px; background-color: var(--eolexi-white2, #F0F2F8); } .product__sidebar__title { margin-bottom: 27px; position: relative; font-size: 22px; color: var(--eolexi-black3, #000000); font-weight: 700; line-height: 1.318; text-transform: capitalize; } .product__search-box { padding-top: 30px; } .product__search { position: relative; } .product__search input[type=search], .product__search input[type=text] { padding-left: 20px; padding-right: 44px; outline: none; border: 0; width: 100%; height: 55px; font-size: 16px; color: var(--eolexi-text, #636363); font-weight: 400; background-color: var(--eolexi-white, #FFFFFF); transition: all 400ms ease; } .product__search input[type=search]:focus, .product__search input[type=text]:focus { color: var(--eolexi-black, #222222); } .product__search button[type=submit] { padding: 0; border: none; outline: none; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background-color: var(--eolexi-base, #005b85); position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 15px; color: var(--eolexi-white, #FFFFFF); transition: all 400ms ease; } .product__search button[type=submit] svg { width: 1em; height: 1em; fill: currentColor; } .product__search button[type=submit]:hover { color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-black2, #162452); } .product__price-ranger #slider-range { position: relative; margin: 0px; background: var(--eolexi-base, #005b85); border: none; height: 4px; border-radius: 20px; } .product__price-ranger #slider-range .ui-slider-range { height: 100%; background: var(--eolexi-base, #005b85); } .product__price-ranger #slider-range .ui-slider-handle { position: absolute; top: 50%; transform: translateY(-50%); background: var(--eolexi-base, #005b85); border: 0; height: 15px; width: 15px !important; border-radius: 50%; margin-left: -3px; outline: medium none; cursor: pointer; z-index: 2; } .product__price-ranger .ranger-min-max-block { position: relative; display: block; margin: 24px 0 0 0px; } @media (min-width: 992px) and (max-width: 1199px) { .product__price-ranger .ranger-min-max-block { margin-left: -10px; } } .product__price-ranger .ranger-min-max-block input[type=text] { padding: 0; position: relative; display: inline-block; color: var(--eolexi-black3, #000000); font-size: 16px; font-weight: 400; width: 50px; min-width: 50px; line-height: 1; border: none; outline: none; text-align: center; background-color: transparent; } .product__price-ranger .ranger-min-max-block span { position: relative; display: inline-block; color: var(--eolexi-black3, #000000); font-size: 16px; font-weight: 400; line-height: 1; left: -2px; } .product__price-ranger .ranger-min-max-block input[type=submit] { position: relative; display: block; margin: 0; cursor: pointer; padding: 0 16px; height: 35px; background-color: var(--eolexi-white, #FFFFFF); float: right; text-align: center; border: none; color: var(--eolexi-black3, #000000); font-size: 14px; font-weight: 500; line-height: 35px; transition: all 500ms ease; } .product__price-ranger .ranger-min-max-block input[type=submit]:hover { color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); } .product__categories ul { margin: 0; padding: 0; list-style: none; } .product__categories ul li + li { margin-top: 20px; } .product__categories ul li { position: relative; } .product__categories ul li a { position: relative; padding: 13.5px 20px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; line-height: 1.25; text-transform: capitalize; color: var(--eolexi-gray2, #7A8385); font-weight: 500; background-color: var(--eolexi-white, #FFFFFF); z-index: 1; transition: all 500ms ease; } .product__categories ul li a::after { position: absolute; content: ""; width: 0; height: 100%; top: 0; right: 0; z-index: -1; background-color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .product__categories ul li a .product__categories__text { display: flex; align-items: center; gap: 9px; } .product__categories ul li a .product__categories__icon { display: inline-flex; font-size: 16px; color: var(--eolexi-text, #636363); transition: all 500ms ease; } .product__categories ul li a .product__categories__icon svg { width: 1em; height: 1em; fill: currentColor; } .product__categories ul li a:hover { color: var(--eolexi-white, #FFFFFF); } .product__categories ul li a:hover::after { left: 0; width: 100%; } .product__categories ul li a:hover .product__categories__icon { color: var(--eolexi-white, #FFFFFF); } .product__info-top { margin-bottom: 50px; position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; } @media (max-width: 767px) { .product__info-top { display: block; margin-bottom: 40px; } } .product__showing-text { margin: 0; font-size: 22px; text-transform: capitalize; line-height: 1.318; } @media (max-width: 767px) { .product__showing-text { margin-bottom: 25px; font-size: 20px; } } @media (max-width: 430px) { .product__showing-text { font-size: 18px; } } .product__showing-sort { margin: 0; } .product__showing-sort .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { font-family: var(--eolexi-font, "DM Sans", serif); position: relative; display: block; width: 100%; min-width: 210px !important; background-color: var(--eolexi-white3, #F5F2EF); } @media (max-width: 767px) { .product__showing-sort .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { min-width: 141px !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: 50px; outline: none !important; border-radius: 0; border: 0; background-color: transparent !important; margin: 0; padding: 0; padding-left: 20px; padding-right: 45px; font-family: var(--eolexi-font, "DM Sans", serif); color: var(--eolexi-text, #636363) !important; text-transform: capitalize; font-size: 16px; line-height: 50px; font-weight: 500; box-shadow: none !important; background-repeat: no-repeat; background-size: 14px 12px; background-position: right 25.75px center; } .product__showing-sort .bootstrap-select > .dropdown-toggle > .filter-option { text-align: left; } @media (max-width: 767px) { .product__showing-sort .bootstrap-select > .dropdown-toggle > .filter-option { text-align: left; } } .product__showing-sort .bootstrap-select > .dropdown-toggle:before { position: absolute; top: 0; bottom: 0; right: 20px; font-family: "Font Awesome 5 Free"; content: "\f107"; font-weight: 900; font-size: 17px; color: var(--eolexi-text, #636363); } .product__showing-sort .bootstrap-select .dropdown-menu > li + li > a { border-top: 1px solid var(--eolexi-border-color, #dddddd); } .product__showing-sort .bootstrap-select .dropdown-menu > li > a { font-size: 15px; font-weight: 500; padding: 10px 20px 11px; font-family: var(--eolexi-font, "DM Sans", serif); color: var(--eolexi-black2, #162452); background-color: var(--eolexi-white3, #F5F2EF); text-transform: capitalize; -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-color: var(--eolexi-base, #005b85); color: var(--eolexi-white, #FFFFFF); border-color: var(--eolexi-base, #005b85); } .product__item { position: relative; background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-border-color, #dddddd); transition: all 500ms ease; } .product__item:hover { border-color: var(--eolexi-base, #005b85); } .product__item__image { padding: 20px 20px 0; position: relative; text-align: center; overflow: hidden; } .product__item__image img { max-width: 100%; height: auto; -webkit-transition: -webkit-transform 800ms cubic-bezier(0, 0, 0.44, 1.18); transition: transform 800ms cubic-bezier(0, 0, 0.44, 1.18), -webkit-transform 800ms cubic-bezier(0, 0, 0.44, 1.18); } .product__item__btn-group { position: absolute; right: 20px; top: 20px; z-index: 1; } .product__item__btn-group a + a { margin-top: 10px; } .product__item__btn-group a { display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; background-color: var(--eolexi-white3, #F5F2EF); color: var(--eolexi-base, #005b85); font-size: 14px; border-radius: 50%; visibility: hidden; opacity: 0; } .product__item__btn-group a svg { width: 1em; height: 1em; fill: currentColor; } .product__item__btn-group a:hover { background-color: var(--eolexi-base, #005b85); color: var(--eolexi-white, #FFFFFF); } .product__item__btn-group 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-group 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-group a:nth-child(3) { -webkit-transition: transform 750ms 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 750ms 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 750ms 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 750ms 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 750ms 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:hover .product__item__image img { transform: scale(1.05); } .product__item:hover .product__item__btn-group 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 { padding: 30px; position: relative; text-align: center; } @media (max-width: 767px) { .product__item__content { padding-left: 25px; padding-right: 25px; } } .product__item__title { margin-bottom: 12px; font-size: 22px; font-weight: 700; color: var(--eolexi-black, #222222); line-height: 1.318; } @media (min-width: 576px) and (max-width: 767px) { .product__item__title { font-size: 18px; } } @media (max-width: 360px) { .product__item__title { font-size: 20px; } } .product__item__title:hover { color: var(--eolexi-base, #005b85); } .product__item__title a { color: inherit; background: linear-gradient(to right, 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__price { margin-bottom: 15px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--eolexi-text, #636363); line-height: 1.222; font-weight: 500; } .product__item__price span:not(:last-child)::after { content: "-"; margin-left: 5px; margin-right: 5px; font-size: 18px; color: var(--eolexi-text, #636363); } .product__item .eolexi-ratings { margin-bottom: 24px; justify-content: center; } .product__item .eolexi-btn-two { padding: 9px 30px; font-size: 15px; color: var(--eolexi-black4, #333333); text-transform: capitalize; background-color: var(--eolexi-white2, #F0F2F8); } .product__item .eolexi-btn-two:hover { color: var(--eolexi-white, #FFFFFF); } .product__item .eolexi-btn-two::before, .product__item .eolexi-btn-two::after { background-color: var(--eolexi-base, #005b85); } .product-page { background-color: var(--eolexi-white, #FFFFFF); } .product-page .post-pagination { justify-content: center; } .product-page .product__item__image img { width: auto !important; display: inline-block !important; } .product-page--sidebar .post-pagination { justify-content: flex-start; } @media (max-width: 991px) { .product-page--sidebar .post-pagination { justify-content: center; } } /*-------------------------------------------------------------- # Shop Details --------------------------------------------------------------*/ .product-details { position: relative; } .product-details__product { display: flex; align-items: center; gap: 30px 22px; } @media (max-width: 991px) { .product-details__product { flex-direction: column; align-items: flex-start; } } .product-details__thumb-box { width: 120px; } @media (max-width: 991px) { .product-details__thumb-box { width: 100%; } } .product-details__thumb { --slick-gutter: 13px; width: 126px; position: relative; z-index: 1; } @media (max-width: 991px) { .product-details__thumb { width: 100%; } } .product-details__thumb .slick-list { clip-path: inset(0 calc(var(--slick-gutter) / 2) 0 calc(var(--slick-gutter) / 2)); margin: 0; padding: 0; } .product-details__thumb .slick-slide { display: flex; align-items: center; justify-content: center; } @media (max-width: 991px) { .product-details__thumb .slick-slide { margin-left: calc(var(--slick-gutter) / 2); margin-right: calc(var(--slick-gutter) / 2); } } @media (min-width: 992px) { .product-details__thumb .slick-slide { margin-top: calc(var(--slick-gutter) / 2); margin-bottom: calc(var(--slick-gutter) / 2); } } .product-details__thumb__item { position: relative; cursor: pointer; width: 113px; height: 113px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border: 1px solid var(--eolexi-border-color, #dddddd); z-index: 2; transition: all 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .product-details__thumb__item { width: 114px; height: 114px; } } @media (max-width: 991px) { .product-details__thumb__item { width: 140px; height: 140px; } } @media (max-width: 767px) { .product-details__thumb__item { width: 110px; height: 110px; } } @media (max-width: 575px) { .product-details__thumb__item { width: 95px; height: 95px; } } @media (max-width: 480px) { .product-details__thumb__item { width: 83px; height: 83px; } } @media (max-width: 430px) { .product-details__thumb__item { width: 105px; height: 105px; } } @media (max-width: 390px) { .product-details__thumb__item { width: 95px; height: 95px; } } @media (max-width: 360px) { .product-details__thumb__item { width: 83px; height: 83px; } } .product-details__thumb__item img { position: relative; cursor: pointer; max-width: 100%; height: auto; z-index: 1; } .product-details__thumb__hover { position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-70%); background-color: RGBA(var(--eolexi-black5-rgb, 21, 19, 22), 0.6); transition: all 500ms ease; z-index: 1; } .product-details__thumb__hover .img-popup { display: inline-block; font-size: 27px; color: var(--eolexi-white, #FFFFFF); } .product-details__thumb__hover .img-popup:hover { color: var(--eolexi-base, #005b85); } .product-details__thumb__hover .img-popup svg { width: 1em; height: 1em; fill: currentColor; } .product-details__thumb .slick-slide.slick-current .product-details__thumb__hover { opacity: 1; transform: translateY(0%); } .product-details__carousel { --slick-gutter: 10px; flex-grow: 1; border: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 991px) { .product-details__carousel { width: 100%; } } .product-details__carousel .slick-list { clip-path: inset(0 calc(var(--slick-gutter) / 2) 0 calc(var(--slick-gutter) / 2)); margin: 0; padding: 0; } .product-details__carousel .slick-slide { margin-top: calc(var(--slick-gutter) / 2); margin-bottom: calc(var(--slick-gutter) / 2); } .product-details__image { padding: 25.5px 20px 37.5px; } .product-details__image__title { display: inline-block; padding: 7px 16px; font-size: 16px; color: var(--eolexi-white, #FFFFFF); font-weight: 500; text-transform: uppercase; line-height: 1.25; background-color: var(--eolexi-base, #005b85); } .product-details__image img { max-width: 100%; height: auto; } .product-details__name { margin-bottom: 13px; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; line-height: 1.363; } .product-details__product-info { max-width: 471px; margin-bottom: 15px; padding-bottom: 11px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } @media (min-width: 992px) and (max-width: 1199px) { .product-details__product-info { gap: 30px; } } @media (max-width: 767px) { .product-details__product-info { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 20px; } } .product-details__price { margin: 0; font-size: 25px; color: var(--eolexi-base, #005b85); font-weight: 700; } .product-details__review { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 15px; } .product-details__review__text { font-size: 16px; color: var(--eolexi-base, #005b85); font-weight: 500; text-transform: capitalize; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .product-details__review__text:hover { background-size: 100% 1px; } .product-details .eolexi-ratings__icon { font-size: 18px; } .product-details__excerpt { margin-bottom: 19px; } .product-details__excerpt__text { margin: 0px; font-weight: 500; } .product-details__color { margin-bottom: 30px; } .product-details__color__title { margin-bottom: 9px; font-family: var(--eolexi-font, "DM Sans", serif); font-size: 16px; color: var(--eolexi-gray3, #788284); font-weight: 600; } .product-details__color__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .product-details__color__box { width: 24px; height: 24px; padding: 0; margin: 0; border: none; outline: none; background-color: var(--bg-color); border: 2px solid var(--border-color); } .product-details__quantity { margin-bottom: 30px; } .product-details__quantity .quantity-box { border: 1px solid var(--eolexi-border-color, #dddddd); width: 191px; height: 45px; display: flex; align-items: center; justify-content: center; } .product-details__quantity .quantity-box__input { border: none; outline: none; background-color: transparent; width: 71px; height: 100%; border-left: 1px solid var(--eolexi-border-color, #dddddd); border-right: 1px solid var(--eolexi-border-color, #dddddd); font-family: var(--eolexi-font, "DM Sans", serif); padding: 0; outline: none; font-size: 18px; font-weight: 500; color: var(--eolexi-black, #222222); line-height: 1; background-color: transparent; text-align: center; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; transition: all 500ms ease; } .product-details__quantity .quantity-box__btn { border: none; outline: none; background-color: transparent; padding: 0; width: 59px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--eolexi-black, #222222); transition: all 500ms ease; } .product-details__quantity .quantity-box__btn:hover { color: var(--eolexi-base, #005b85); } .product-details__button { margin-bottom: 29px; } .product-details__socials { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .product-details__socials__title { margin: 0px; font-family: var(--eolexi-font, "DM Sans", serif); font-size: 18px; color: var(--eolexi-text, #636363); font-weight: 600; text-transform: capitalize; line-height: 1.25; } .product-details .social-links a { width: 36px; height: 36px; border-radius: 0px; background-color: var(--eolexi-border-color, #dddddd); } .product-details .social-links a:hover { background-color: var(--eolexi-base, #005b85); } .product-details .social-links__icon { font-size: 18px; color: var(--eolexi-black, #222222); } .product-details .social-links a:hover .social-links__icon { color: var(--eolexi-white, #FFFFFF); } .product-details__description-wrapper { margin-top: 42px; } .product-details__description { position: relative; padding: 46px 0px 37px; border-top: 1px solid var(--eolexi-border-color, #dddddd); border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } .product-details__description__title { margin-bottom: 17px; font-size: 22px; font-weight: 700; color: var(--eolexi-black, #222222); text-transform: capitalize; line-height: 1.363; } .product-details__description__text { margin: 0px; font-weight: 500; } .product-details__list { max-width: 770px; margin-top: 11px; margin-bottom: 21px; --bs-gutter-x: 20px; --bs-gutter-y: 12px; } .product-details__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.625; } .product-details__list__icon { position: relative; top: 3px; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 8px; color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-black, #222222); border-radius: 50%; transition: all 500ms ease; } .product-details__list__icon svg { width: 1em; height: 1em; fill: currentColor; } li:hover .product-details__list__icon { background-color: var(--eolexi-base, #005b85); } .product-details .comments-one__name { margin: 0; } .product-details__form__top { margin-bottom: 31px; } .product-details__form__title { margin-bottom: 20px !important; } .product-details__form__ratings { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 33px; } @media (max-width: 1599px) { .product-details__form__ratings { gap: 20px; } } .product-details__form__ratings__text { margin-bottom: 0; font-family: var(--eolexi-font, "DM Sans", serif); font-size: 16px; color: var(--eolexi-text, #636363); font-weight: 700; text-transform: capitalize; line-height: 1.625; } .product-details__ratings { position: relative; top: -1px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; } .product-details__ratings__icon { display: inline-flex; font-size: 17px; color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .product-details__ratings__icon svg { width: 1em; height: 1em; fill: currentColor; } /*-------------------------------------------------------------- # Cart --------------------------------------------------------------*/ .cart-page { position: relative; background-color: var(--eolexi-white, #FFFFFF); } .cart-page .table-responsive { position: relative; display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 10px; } @media (max-width: 1199px) { .cart-page .table-responsive { margin-bottom: 30px; } } .cart-page__table { position: relative; width: 100%; border: none; margin: 0 0 24px; } @media (max-width: 1199px) { .cart-page__table { min-width: 1170px; } } .cart-page__table thead tr { border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } .cart-page__table thead tr th { padding: 0 30px 26px; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 22px; color: var(--eolexi-black, #222222); line-height: 1; font-weight: 700; text-transform: capitalize; border: none; background-color: transparent; border: 0 !important; box-shadow: none; } @media (max-width: 767px) { .cart-page__table thead tr th { font-size: 20px; } } .cart-page__table thead tr th:first-child { padding-left: 0; } .cart-page__table thead tr th:last-child { padding-right: 0; text-align: right; } .cart-page__table tbody tr td { font-size: 19px; font-weight: 500; color: var(--eolexi-black4, #333333); text-transform: capitalize; line-height: normal; vertical-align: middle; border-top: none; box-shadow: none; background-color: transparent; border-top: 0 !important; border-right: 1px solid var(--eolexi-border-color, #dddddd); border-bottom: 1px solid var(--eolexi-border-color, #dddddd); padding: 28.5px 30px; letter-spacing: 0; } .cart-page__table tbody tr td.cart-page__table__total { text-align: center; } .cart-page__table tbody tr td .cart-page__table__remove { margin-left: 16px; display: flex; align-items: center; justify-content: center; color: var(--eolexi-black4, #333333); font-size: 19px; line-height: 1; } .cart-page__table tbody tr td .cart-page__table__remove svg { width: 1em; height: 1em; fill: currentColor; } .cart-page__table tbody tr td .cart-page__table__remove:hover { color: var(--eolexi-base, #005b85); } .cart-page__table tbody tr td:first-child { padding-left: 0px; } .cart-page__table tbody tr td:last-child { padding-right: 0px; border-right: 0px; } .cart-page__table__meta { display: flex; align-items: center; gap: 30px; } .cart-page__table__meta__img { width: 113px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--eolexi-border-color, #dddddd); } .cart-page__table__meta__img img { max-width: 100%; height: auto; } .cart-page__table__meta__title { margin: 0; font-size: 22px; color: var(--eolexi-black4, #333333); font-weight: 700; line-height: 1.318; } @media (max-width: 767px) { .cart-page__table__meta__title { font-size: 20px; } } .cart-page__table__meta__title a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .cart-page__table__meta__title a:hover { color: var(--eolexi-base, #005b85); } .cart-page__table__meta__title a:hover { background-size: 100% 1px; } .cart-page__table__quantity { position: relative; display: flex; align-items: center; gap: 20px; } .cart-page__table__quantity__title { margin-bottom: 0; font-size: 18px; font-weight: 700; text-transform: capitalize; line-height: 1.25; } .cart-page__table__quantity .quantity-box { position: relative; width: 172px; height: 50px; border: 1px solid var(--eolexi-border-color, #dddddd); } .cart-page__table__quantity .quantity-box__input { border: none; outline: none; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); background-color: transparent; width: 50px; height: 100%; font-family: var(--eolexi-font, "DM Sans", serif); padding: 0; outline: none; font-size: 16px; font-weight: 500; color: var(--eolexi-black3, #000000); line-height: 1; background-color: transparent; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; transition: all 500ms ease; } .cart-page__table__quantity .quantity-box__btn { border: none; outline: none; background-color: var(--eolexi-white3, #F5F2EF); padding: 0; display: inline-flex; font-size: 8px; color: var(--eolexi-black4, #333333); transition: all 500ms ease; } .cart-page__table__quantity .quantity-box__btn.add { padding: 6px 6px 2px; position: absolute; top: 8px; right: 21px; z-index: 1; } .cart-page__table__quantity .quantity-box__btn.sub { padding: 2px 6px 6px; position: absolute; right: 21px; bottom: 8px; z-index: 1; } .cart-page__table__quantity .quantity-box__btn:hover { color: var(--eolexi-base, #005b85); } .cart-page__bottom { margin-top: 8px; } .cart-page__coupone__form { display: flex; align-items: center; gap: 30px; } @media (max-width: 767px) { .cart-page__coupone__form { flex-direction: column; align-items: flex-start; gap: 25px; } } .cart-page__coupone__form input[type=text] { display: block; width: 270px; height: 54px; border: none; font-size: 16px; color: var(--eolexi-text, #636363); font-weight: 500; background-color: var(--eolexi-white2, #F0F2F8); padding-left: 19px; padding-right: 19px; outline: none; transition: all 500ms ease; } .cart-page__coupone__form input[type=text]:focus { color: var(--eolexi-black, #222222); } @media (max-width: 1199px) { .cart-page__coupone__form input[type=text] { flex-grow: 1; } } @media (max-width: 767px) { .cart-page__coupone__form input[type=text] { width: 100%; } } .cart-page__cart-checkout__title { margin-bottom: 0px; display: inline-block; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-weight: 700; font-size: 22px; color: var(--eolexi-black3, #000000); line-height: 1.318; text-transform: capitalize; } .cart-page__cart-total { max-width: 260px; position: relative; margin: 0px 0px 30px auto; } @media (max-width: 1199px) { .cart-page__cart-total { margin: 0px 0px 30px; } } .cart-page__cart-total li + li { margin-top: 23px; } .cart-page__cart-total li { display: flex; align-items: center; justify-content: space-between; gap: 15px; font-size: 16px; color: var(--eolexi-text, #636363); text-transform: uppercase; font-weight: 600; line-height: 1.25; } .cart-page__button { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 58px; } @media (max-width: 1199px) { .cart-page__button { gap: 25px; } } @media (max-width: 1199px) { .cart-page__button { justify-content: flex-start; } } /*-------------------------------------------------------------- # Checkout --------------------------------------------------------------*/ .checkout-page { position: relative; background-color: var(--eolexi-white, #FFFFFF); } .checkout-page__notice { margin-bottom: 26px; } .checkout-page .notice-box { padding: 12.5px 20px; margin-bottom: 0px; background-color: var(--eolexi-white3, #F5F2EF); font-size: 18px; color: var(--eolexi-black4, #333333); font-weight: 600; line-height: 1.444; } @media (max-width: 767px) { .checkout-page .notice-box { font-size: 16px; } } .checkout-page .notice-box a { color: var(--eolexi-base, #005b85); background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .checkout-page .notice-box a:hover { background-size: 100% 1px; } .checkout-page__billing-address { position: relative; } .checkout-page__title { margin-bottom: 16px; font-size: 22px; font-weight: 700; text-transform: capitalize; line-height: 1.318; } @media (min-width: 992px) and (max-width: 1199px) { .checkout-page__form .form-one__group { grid-template-columns: repeat(1, 1fr); } } .checkout-page__form .form-one .bootstrap-select > .dropdown-toggle, .checkout-page__form .form-one .bootstrap-select .dropdown-menu > li > a { background-color: var(--eolexi-white3, #F5F2EF) !important; } .checkout-page__form .form-one .bootstrap-select .dropdown-menu > li:hover > a, .checkout-page__form .form-one .bootstrap-select .dropdown-menu > li.selected > a { background-color: var(--eolexi-base, #005b85) !important; } .checkout-page__form .form-one input[type=text], .checkout-page__form .form-one input[type=email], .checkout-page__form .form-one input[type=password], .checkout-page__form .form-one input[type=tel], .checkout-page__form .form-one textarea { background-color: var(--eolexi-white3, #F5F2EF); } .checkout-page__shipping-details { margin-top: 15px; } @media (max-width: 430px) { .checkout-page__shipping-details { margin-top: 0px; } } .checkout-page__shipping-details .checkout-page__title { margin-bottom: 19px; } .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-left: 28px; font-size: 16px; color: var(--eolexi-text, #636363); font-weight: 600; line-height: 1.625; text-transform: uppercase; cursor: pointer; } .checkout-page__check-box label span::before { content: "\f00c"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-block; font-family: "Font Awesome 5 Free"; color: var(--eolexi-base, #005b85); font-size: 9px; font-weight: 900; opacity: 0; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .checkout-page__check-box input[type=checkbox] + label span { position: absolute; top: 3px; left: 0; width: 18px; height: 18px; border: 1px solid var(--eolexi-base, #005b85); border-radius: 50%; 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__your-order { position: relative; margin: 41px 0 0; } @media (max-width: 430px) { .checkout-page__your-order { margin: 30px 0 0; } } .checkout-page__your-order .checkout-page__title { margin-bottom: 33px; } @media (max-width: 430px) { .checkout-page__your-order .checkout-page__title { margin-bottom: 20px; } } .checkout-page__order-table { position: relative; width: 100%; border: none; margin: 0 0 0; } .checkout-page__order-table thead tr th { margin: 0; padding: 16px 0; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 16px; color: var(--eolexi-black3, #000000); text-transform: uppercase; font-weight: 700; line-height: 1.25; border: none; border-top: 1px solid var(--eolexi-border-color, #dddddd); border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } .checkout-page__order-table thead tr th:last-child { text-align: right; } .checkout-page__order-table tbody tr td { font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 16px; color: var(--eolexi-black3, #000000); text-transform: uppercase; font-weight: 700; line-height: 1.25; margin: 0; padding: 0 0 12px; border: none; } .checkout-page__order-table tbody tr td:last-child { text-align: right; } .checkout-page__order-table tbody tr td.pro__price { font-family: var(--eolexi-font, "DM Sans", serif); font-weight: 500; color: var(--eolexi-text, #636363); } .checkout-page__order-table tbody tr:first-child td { padding-top: 16px; } .checkout-page__order-table tbody tr:nth-child(3) td { padding-bottom: 16px; } .checkout-page__order-table tbody tr:last-child td { padding-top: 15px; border-top: 1px solid var(--eolexi-border-color, #dddddd); } .checkout-page__payment { padding: 29px 31px; margin-bottom: 30px; background-color: var(--eolexi-white3, #F5F2EF); } @media (max-width: 390px) { .checkout-page__payment { padding: 25px; } } .checkout-page__payment__item + .checkout-page__payment__item { margin-top: 11px; } .checkout-page__payment__item { position: relative; } .checkout-page__payment__title { margin-bottom: 0; cursor: pointer; display: flex; align-items: center; font-family: var(--eolexi-font, "DM Sans", serif); font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--eolexi-text, #636363); line-height: 1.625; } .checkout-page__payment__title::before { content: ""; width: 21px; height: 21px; border: 1px solid var(--eolexi-base, #005b85); border-radius: 50%; margin-right: 10px; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; margin-right: 9px; color: var(--eolexi-white, #FFFFFF); position: relative; top: -1px; transition: all 500ms ease; } .checkout-page__payment .checkout-page__payment__item--active .checkout-page__payment__title { text-shadow: 0px 0px 0.25px currentColor; } .checkout-page__payment .checkout-page__payment__item--active .checkout-page__payment__title::before { content: "\f111"; color: var(--eolexi-base, #005b85); } .checkout-page__payment__content { margin-top: 12px; } .checkout-page__payment__content p { margin: 0; font-weight: 500; line-height: 1.5; } .checkout-page__payment__btn-box .eolexi-btn-two { border-radius: 0px; } /*-------------------------------------------------------------- # Blog Details --------------------------------------------------------------*/ .blog-details-page { position: relative; z-index: 2; background-color: var(--eolexi-white, #FFFFFF); } .blog-details__card { margin-bottom: 53px; } .blog-details__card__image { margin-bottom: 40px; } .blog-details__card__image img { width: 100%; display: block; } .blog-details__card__meta { margin-bottom: 23px; display: flex; align-items: center; flex-wrap: wrap; gap: 15px 30px; } .blog-details__card__category { padding: 7px 25px; font-size: 16px; line-height: 1.25; } .blog-details__card__admin { display: flex; align-items: center; gap: 11px; } .blog-details__card__admin__image { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--eolexi-base, #005b85); } .blog-details__card__admin__name { margin: 0; font-family: var(--eolexi-font, "DM Sans", serif); font-size: 16px; color: var(--eolexi-text, #636363); font-weight: 400; text-transform: capitalize; line-height: 1.25; } .blog-details__card__admin__name a { color: inherit; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .blog-details__card__admin__name a:hover { color: var(--eolexi-base, #005b85); } .blog-details__card__admin__name a:hover { background-size: 100% 1px; } .blog-details__card__comment { display: flex; align-items: center; gap: 10px; } .blog-details__card__comment__icon { display: inline-flex; flex-shrink: 0; font-size: 16px; color: var(--eolexi-base, #005b85); } .blog-details__card__comment__icon svg { width: 1em; height: 1em; fill: currentColor; } .blog-details__card__comment__text { color: var(--eolexi-text, #636363); text-transform: capitalize; transition: all 500ms ease; } .blog-details__card__comment__text:hover { color: var(--eolexi-base, #005b85); } .blog-details__card__date { display: flex; align-items: center; gap: 10px; } .blog-details__card__date__icon { position: relative; top: -1px; display: inline-flex; flex-shrink: 0; font-size: 16px; color: var(--eolexi-base, #005b85); } .blog-details__card__date__icon svg { width: 1em; height: 1em; fill: currentColor; } .blog-details__card__date__text { margin: 0; text-transform: capitalize; } .blog-details__card__title { margin-bottom: 18px; font-size: 22px; font-weight: 700; line-height: 1.318; } .blog-details__card__text { margin: 0px; } .blog-details__card__text + .blog-details__card__text { margin-top: 11px; } .blog-details__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 35px; padding-top: 29px; padding-bottom: 29px; border-top: 1px solid var(--eolexi-border-color, #dddddd); border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } .blog-details__meta__title { margin-bottom: 0; font-size: 16px; line-height: 1.625; font-weight: 700; color: var(--eolexi-black4, #333333); text-transform: capitalize; } .blog-details__tags, .blog-details__categories { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .blog-details__tags__btn, .blog-details__categories__btn { padding: 7px 20px; color: var(--eolexi-text, #636363); line-height: 1.25; background-color: var(--eolexi-white3, #F5F2EF); } .blog-details__tags__btn:hover, .blog-details__categories__btn:hover { color: var(--eolexi-white, #FFFFFF); } .blog-details__tags__btn::before, .blog-details__tags__btn::after, .blog-details__categories__btn::before, .blog-details__categories__btn::after { background-color: var(--eolexi-base, #005b85); } .blog-details__tags__box, .blog-details__categories__box { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .blog-details .comments-one__card { padding-bottom: 32px; grid-template-columns: 89px auto; grid-gap: 20px; border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 767px) { .blog-details .comments-one__card { grid-template-columns: auto; } } @media (max-width: 412px) { .blog-details .comments-one__card { padding-bottom: 35px; } } .blog-details .comments-one__card:not(:last-child) { margin-bottom: 40px; } .blog-details .comments-one__image { width: 89px; } .blog-details .comments-one__image img { width: 89px; height: 89px; } .blog-details .comments-one__content { margin-top: 0px; } .blog-details .comments-one__name { margin-bottom: 10px; } .blog-details .comments-one__date { font-weight: 500; color: var(--eolexi-text, #636363); } .blog-details .comments-one__date::before { display: none; } @media (min-width: 992px) and (max-width: 1199px) { .blog-details__form .form-one__group { grid-template-columns: repeat(1, 1fr); } } /*-------------------------------------------------------------- # Why Choose --------------------------------------------------------------*/ .why-choose { background-color: var(--eolexi-white, #FFFFFF); } .why-choose__content { padding-right: 60px; } @media (max-width: 1199px) { .why-choose__content { padding-right: 0px; } } .why-choose .sec-title { margin-bottom: 11px; } .why-choose__text { margin-bottom: 25px; } .why-choose__item + .why-choose__item { margin-top: 30px; } .why-choose__item { padding-bottom: 30px; display: flex; align-items: flex-start; gap: 20px; border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 430px) { .why-choose__item { flex-direction: column; } } .why-choose__item__icon-box { width: 65px; height: 65px; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 6px; background-color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .why-choose__item:hover .why-choose__item__icon-box { background-color: var(--eolexi-black2, #162452); } .why-choose__item__icon { display: inline-flex; font-size: 36px; color: var(--eolexi-white, #FFFFFF); transition: all 500ms ease; } .why-choose__item:hover .why-choose__item__icon { -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .why-choose__item__content { padding-right: 20px; } .why-choose__item__title { margin-bottom: 9px; font-size: 22px; font-weight: 700; line-height: 1.318; } .why-choose__item__text { margin: 0px; } .why-choose__list { margin: 25px 0px 0px; } .why-choose__list li + li { margin-top: 15px; } .why-choose__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.625; } .why-choose__list__icon { position: relative; top: 3px; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 8px; color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-black, #222222); border-radius: 50%; transition: all 500ms ease; } .why-choose__list__icon svg { width: 1em; height: 1em; fill: currentColor; } .why-choose__image { position: relative; } @media (max-width: 1199px) { .why-choose__image { padding-left: 30px; } } @media (max-width: 991px) { .why-choose__image { padding-left: 0px; } } .why-choose__image__one { text-align: right; } .why-choose__image__one img { max-width: 100%; height: auto; } .why-choose__image__two { padding: 6px; position: absolute; top: 50%; left: -50px; transform: translateY(-50%); border-radius: 500px; background-color: var(--eolexi-white, #FFFFFF); } @media (max-width: 1199px) { .why-choose__image__two { top: calc(50% + 200px); left: 0px; } } @media (max-width: 991px) { .why-choose__image__two { top: 50%; } } @media (max-width: 575px) { .why-choose__image__two { display: none; } } .why-choose__image__two img { max-width: 100%; height: auto; border-radius: inherit; } /*-------------------------------------------------------------- # Funfact --------------------------------------------------------------*/ .funfact-one { background-color: var(--eolexi-white, #FFFFFF); border-top: 1px solid var(--eolexi-border-color, #dddddd); } .funfact-one__card { position: relative; padding: 20px; display: flex; align-items: center; gap: 20px 15px; border-radius: 10px; border: 1px solid var(--eolexi-border-color, #dddddd); overflow: hidden; z-index: 1; transition: all 500ms ease; } @media (min-width: 576px) and (max-width: 767px) { .funfact-one__card { flex-direction: column; } } @media (min-width: 992px) and (max-width: 1199px) { .funfact-one__card { flex-direction: column; } } .funfact-one__card:hover { border-color: var(--eolexi-base, #005b85); } .funfact-one__card::before, .funfact-one__card::after { content: ""; width: calc(100% + 1px); height: calc(100% + 1px); background-color: var(--eolexi-base, #005b85); z-index: -1; transition: all 500ms ease; } .funfact-one__card::before { position: absolute; top: -100%; left: -100%; clip-path: polygon(0 0, 0 100%, 100% 0); } .funfact-one__card::after { position: absolute; right: -100%; bottom: -100%; clip-path: polygon(100% 0, 0% 100%, 100% 100%); } .funfact-one__card:hover::before { top: 0%; left: 0%; } .funfact-one__card:hover::after { right: 0%; bottom: 0%; } .funfact-one__card__icon-box { width: 74px; height: 74px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: var(--eolexi-white2, #F0F2F8); border-radius: 10px; transition: all 500ms ease; } .funfact-one__card:hover .funfact-one__card__icon-box { background-color: var(--eolexi-black2, #162452); } .funfact-one__card__icon { display: inline-flex; font-size: 42px; color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .funfact-one__card__icon svg { width: 1em; height: 1em; fill: currentColor; } .funfact-one__card:hover .funfact-one__card__icon { -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @media (min-width: 576px) and (max-width: 767px) { .funfact-one__card__contnt { text-align: center; } } @media (min-width: 992px) and (max-width: 1199px) { .funfact-one__card__contnt { text-align: center; } } .funfact-one__card__count { margin-bottom: 8px; display: flex; font-size: 22px; color: var(--eolexi-black, #222222); font-weight: 700; line-height: 1.318; transition: all 500ms ease; } @media (min-width: 576px) and (max-width: 767px) { .funfact-one__card__count { justify-content: center; } } @media (min-width: 992px) and (max-width: 1199px) { .funfact-one__card__count { justify-content: center; } } .funfact-one__card__text { margin: 0px; text-transform: capitalize; transition: all 500ms ease; } .funfact-one__card:hover .funfact-one__card__icon, .funfact-one__card:hover .funfact-one__card__count, .funfact-one__card:hover .funfact-one__card__text { color: var(--eolexi-white, #FFFFFF); } .funfact-one--home1 { border: 0; border-bottom: 1px solid RGBA(var(--eolexi-gray4-rgb, 138, 145, 168), 0.3); background-color: var(--eolexi-black2, #162452); } .funfact-one--home1 .funfact-one__card { border-color: RGBA(var(--eolexi-white-rgb, 255, 255, 255), 0.5); } .funfact-one--home1 .funfact-one__card:hover { border-color: var(--eolexi-base, #005b85); } .funfact-one--home1 .funfact-one__card__count, .funfact-one--home1 .funfact-one__card__text { color: var(--eolexi-white, #FFFFFF); } .funfact-two__inner { padding-top: 365px; position: relative; overflow: hidden; } @media (max-width: 1199px) { .funfact-two__inner { padding-top: 250px; } } @media (max-width: 767px) { .funfact-two__inner { padding-top: 100px; } } @media (max-width: 575px) { .funfact-two__inner { padding-top: 80px; } } .funfact-two__bg { position: relative; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: top center; background-size: cover; } @media (max-width: 1199px) { .funfact-two__bg::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: RGBA(var(--eolexi-black2-rgb, 22, 36, 82), 0.4); } } .funfact-two__wrapper { position: relative; z-index: 1; } .funfact-two__video { margin-bottom: 41px; padding-left: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 21px; } @media (max-width: 1199px) { .funfact-two__video { margin-bottom: 60px; padding: 0px 30px; justify-content: center; } } @media (max-width: 767px) { .funfact-two__video { margin-bottom: 30px; } } .funfact-two__video .video-btn { width: 58px; height: 58px; font-size: 20px; } .funfact-two__video__title { margin: 0px; font-size: 22px; font-weight: 700; color: var(--eolexi-white, #FFFFFF); text-transform: capitalize; line-height: 1.318; } .funfact-two__grid { width: calc(100% - 70px); margin-left: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 40px; background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.9); } @media (max-width: 1199px) { .funfact-two__grid { width: 100%; } } @media (max-width: 767px) { .funfact-two__grid { padding-bottom: 30px; grid-template-columns: 1fr; grid-gap: 30px; } } .funfact-two__card { position: relative; padding: 0px 30px 24px; text-align: center; } @media (max-width: 767px) { .funfact-two__card { padding-bottom: 0px; } } .funfact-two__card:not(:last-child)::after { content: ""; width: 2px; height: 100px; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); background-color: var(--eolexi-white, #FFFFFF); } @media (max-width: 767px) { .funfact-two__card:not(:last-child)::after { display: none; } } .funfact-two__card__icon-box { margin: 0px auto 15px; width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; background-color: var(--eolexi-white, #FFFFFF); border-radius: 0px 0px 50px 50px; transition: all 500ms ease; } .funfact-two__card:hover .funfact-two__card__icon-box { background-color: var(--eolexi-black2, #162452); } .funfact-two__card__icon { display: inline-flex; font-size: 42px; color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .funfact-two__card__icon svg { width: 1em; height: 1em; fill: currentColor; } .funfact-two__card:hover .funfact-two__card__icon { color: var(--eolexi-white, #FFFFFF); -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .funfact-two__card__count { margin-bottom: 8px; display: flex; justify-content: center; font-size: 22px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.318; transition: all 500ms ease; } .funfact-two__card__text { margin: 0px; color: var(--eolexi-white, #FFFFFF); text-transform: capitalize; } /*-------------------------------------------------------------- # Faq --------------------------------------------------------------*/ .faq-accordion { position: relative; counter-reset: FAQ; z-index: 1; } .faq-accordion__content { padding: 30px; border: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 430px) { .faq-accordion__content { padding: 20px; } } .faq-accordion .accordion { background-color: var(--eolexi-white, #FFFFFF); } .faq-accordion .accordion + .accordion { margin-top: 19px; } .faq-accordion .accordion:not(:last-child) { border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } .faq-accordion .accordion:not(:last-child) .accordion-title { padding-bottom: 19px; } .faq-accordion .accordion-title { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 30px; background-color: var(--eolexi-white, #FFFFFF); } .faq-accordion .accordion-title__number { width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background-color: var(--eolexi-black, #222222); transition: all 500ms ease; } @media (max-width: 375px) { .faq-accordion .accordion-title__number { display: none; } } .faq-accordion .accordion-title__number::after { content: "0" counter(FAQ); counter-increment: FAQ; font-size: 16px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1; transition: all 500ms ease; } .faq-accordion .accordion-title h4 { margin: 0; display: flex; align-items: center; gap: 20px; position: relative; font-size: 18px; color: var(--eolexi-black4, #333333); font-weight: 800; text-transform: capitalize; line-height: 1.333; transition: all 500ms ease; } @media (max-width: 430px) { .faq-accordion .accordion-title h4 { font-size: 16px; } } .faq-accordion .accordion-title__icon { width: 36px; height: 36px; flex-shrink: 0; position: relative; border: 1px solid var(--eolexi-base, #005b85); background-color: var(--eolexi-white3, #F5F2EF); border-radius: 50%; transition: all 500ms ease; } .faq-accordion .accordion-title__icon::after, .faq-accordion .accordion-title__icon::before { content: ""; width: 2px; height: 11px; background-color: var(--eolexi-base, #005b85); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 500ms ease; } .faq-accordion .accordion-title__icon::after { width: 11px; height: 2px; } .faq-accordion .active .accordion-title__number { background-color: var(--eolexi-base, #005b85); } .faq-accordion .active .accordion-title h4 { color: var(--eolexi-base, #005b85); } .faq-accordion .active .accordion-title__icon { background-color: var(--eolexi-base, #005b85); } .faq-accordion .active .accordion-title__icon::after, .faq-accordion .active .accordion-title__icon::before { background-color: var(--eolexi-white, #FFFFFF); opacity: 0; } .faq-accordion .active .accordion-title__icon::after { opacity: 1; } .faq-accordion .accordion:not(:last-child) .accordion-content .inner { padding-bottom: 19px; } .faq-accordion .accordion-content p { margin: 0; } .faq-one, .faq-page { background-color: var(--eolexi-white, #FFFFFF); } .faq-one .sec-title { margin-bottom: 20px; } .faq-one__text { margin-bottom: 27px; } .faq-one__image { display: table; position: relative; } .faq-one__image img { max-width: 100%; height: auto; } .faq-one__image__text { font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-size: 100px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1; position: absolute; top: 50%; right: 41px; transform: translateY(-50%); } @media (max-width: 480px) { .faq-one__image__text { font-size: 70px; } } .faq-two { position: relative; background-color: var(--eolexi-black2, #162452); } .faq-two .container { position: relative; z-index: 1; } .faq-two__content { padding-right: 30px; } @media (max-width: 1199px) { .faq-two__content { padding-right: 200px; } } @media (max-width: 991px) { .faq-two__content { padding-right: 0px; } } .faq-two .sec-title { margin-bottom: 20px; } .faq-two .sec-title__title, .faq-two__text { color: var(--eolexi-white, #FFFFFF); } .faq-two__text { margin-bottom: 30px; } .faq-two__border { margin-bottom: 40px; position: relative; width: 189px; height: 1px; overflow: hidden; background-color: var(--eolexi-white4, #D9D9D9); } .faq-two__border::after { content: ""; width: 50px; height: 100%; position: absolute; top: 0px; left: 0px; background-color: var(--eolexi-base, #005b85); animation: faq02Border 5s linear infinite; } @keyframes faq02Border { 0% { left: 0px; } 50% { left: calc(100% - 50px); } 100% { left: 0px; } } .faq-two .faq-accordion__content { padding: 0px; border: 0; } .faq-two .faq-accordion .accordion { border-bottom: 1px solid RGBA(var(--eolexi-white4-rgb, 217, 217, 217), 0.55); } .faq-two .faq-accordion .accordion .accordion-title { padding-bottom: 22px; } .faq-two .faq-accordion .accordion, .faq-two .faq-accordion .accordion-title { background-color: transparent; } .faq-two .faq-accordion .accordion-title__number { background-color: var(--eolexi-white, #FFFFFF); } .faq-two .faq-accordion .accordion-title__number::after { color: var(--eolexi-black, #222222); } .faq-two .faq-accordion .active .accordion-title__number { background-color: var(--eolexi-base, #005b85); } .faq-two .faq-accordion .active .accordion-title__number::after, .faq-two .faq-accordion .accordion-title h4, .faq-two .faq-accordion .accordion-content p { color: var(--eolexi-white, #FFFFFF); } .faq-two .faq-accordion .active .accordion-title h4 { color: var(--eolexi-base, #005b85); } .faq-two .faq-accordion .accordion .accordion-content .inner { padding-bottom: 22px; } .faq-two__image { padding-left: 23px; } @media (max-width: 1799px) { .faq-two__image { padding-left: 0px; } } .faq-two__image__img { position: relative; } @media (max-width: 1799px) { .faq-two__image__img img { max-width: 100%; height: auto; } } .faq-two__image__shape { max-width: 100%; height: auto; position: absolute; left: 265px; bottom: 184px; } @media (min-width: 1200px) and (max-width: 1799px) { .faq-two__image__shape { left: 158px; bottom: 100px; } } @media (max-width: 991px) { .faq-two__image__shape { left: 212px; bottom: 126px; } } @media (max-width: 767px) { .faq-two__image__shape { display: none; } } .faq-two__shape { width: 487px; height: 543px; background-color: var(--eolexi-base, #005b85); position: absolute; top: 0px; right: 0px; clip-path: polygon(100% 0, 100% 38%, 100% 90%, 0 100%, 16% 0); } @media (max-width: 1799px) { .faq-two__shape { width: 420px; } } @media (max-width: 1399px) { .faq-two__shape { width: 350px; } } @media (max-width: 1199px) { .faq-two__shape { display: none; } } /*-------------------------------------------------------------- # Features --------------------------------------------------------------*/ .features-one { position: relative; overflow: hidden; background-color: var(--eolexi-white, #FFFFFF); } .features-one__bg { width: calc(100% - 220px); height: calc(100% - 135px); position: relative; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); background-color: var(--eolexi-base, #005b85); clip-path: polygon(0 0, 100% 0%, 91% 100%, 9% 100%); } @media (max-width: 1199px) { .features-one__bg { display: none; } } .features-one__bg__inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: top center; background-size: cover; } .features-one .container { position: relative; z-index: 1; } .features-one__card { position: relative; } .features-one__card::after { content: ""; width: 100%; height: calc(100% - 46px); position: absolute; top: 0px; left: 0px; border-radius: 10px; background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-border-color, #dddddd); transition: all 500ms ease; } .features-one__card:hover::after { background-color: var(--eolexi-black2, #162452); } .features-one__card__inner { padding: 26px 43px 0px; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; z-index: 1; } @media (min-width: 768px) and (max-width: 991px) { .features-one__card__inner { padding-left: 30px; padding-right: 30px; } } @media (max-width: 430px) { .features-one__card__inner { padding-left: 30px; padding-right: 30px; } } .features-one__card__title { margin-bottom: 12px; font-weight: 700; font-size: 22px; color: var(--eolexi-black, #222222); line-height: 1.318; transition: all 500ms ease; } @media (min-width: 768px) and (max-width: 991px) { .features-one__card__title { font-size: 20px; } } @media (max-width: 430px) { .features-one__card__title { font-size: 20px; } } .features-one__card__text { margin-bottom: 25px; font-size: 18px; transition: all 500ms ease; } @media (min-width: 768px) and (max-width: 991px) { .features-one__card__text { font-size: 16px; } } @media (max-width: 430px) { .features-one__card__text { font-size: 16px; } } .features-one__card:hover .features-one__card__title, .features-one__card:hover .features-one__card__text { color: var(--eolexi-white, #FFFFFF); } .features-one__card__icon-box { margin: 0px auto; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-border-color, #dddddd); } .features-one__card__icon { display: inline-flex; font-size: 54px; color: var(--eolexi-base, #005b85); } .features-one__card__icon svg { width: 1em; height: 1em; fill: currentColor; } .features-one__card:hover .features-one__card__icon { -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @media (min-width: 768px) { .features-one__card--icon-top::after { top: auto; bottom: 0px; } .features-one__card--icon-top .features-one__card__inner { padding-top: 0px; padding-bottom: 27px; } .features-one__card--icon-top .features-one__card__content { order: 1; } .features-one__card--icon-top .features-one__card__icon-box { order: 0; margin-bottom: 24px; } .features-one__card--icon-top .features-one__card__title { margin-bottom: 10px; } .features-one__card--icon-top .features-one__card__text { margin: 0px; } } .features-two { margin-top: -70px; position: relative; background-color: transparent; z-index: 1; } @media (max-width: 991px) { .features-two .row > *:not(:last-child) { margin-bottom: 30px; } } .features-two__card { position: relative; padding: 30px; position: relative; display: flex; align-items: flex-start; gap: 20px; border-radius: 10px; overflow: hidden; background-color: var(--eolexi-white2, #F0F2F8); z-index: 1; } @media (min-width: 768px) and (max-width: 1199px) { .features-two__card { flex-direction: column; align-items: center; } } @media (max-width: 412px) { .features-two__card { flex-direction: column; align-items: center; } } .features-two__card::after { content: ""; width: 0%; height: 100%; position: absolute; top: 0px; right: 0px; border-radius: inherit; background-color: var(--eolexi-base, #005b85); z-index: -1; transition: all 500ms ease; } .features-two__card:hover::after { width: 100%; left: 0px; } .features-two__card__icon-box { position: relative; top: 5px; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background-color: var(--eolexi-white, #FFFFFF); } @media (min-width: 768px) and (max-width: 1199px) { .features-two__card__icon-box { top: 0px; } } @media (max-width: 412px) { .features-two__card__icon-box { top: 0px; } } .features-two__card__icon { display: inline-flex; font-size: 36px; color: var(--eolexi-base, #005b85); } .features-two__card__icon svg { width: 1em; height: 1em; fill: currentColor; } .features-two__card:hover .features-two__card__icon { -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } @media (min-width: 768px) and (max-width: 1199px) { .features-two__card__content { text-align: center; } } @media (max-width: 412px) { .features-two__card__content { text-align: center; } } .features-two__card__title { margin-bottom: 10px; font-weight: 700; font-size: 22px; line-height: 1.318; transition: all 500ms ease; } .features-two__card__text { margin: 0px; transition: all 500ms ease; } .features-two__card:hover .features-two__card__title, .features-two__card:hover .features-two__card__text { color: var(--eolexi-white, #FFFFFF); } .features-three { position: relative; background-color: var(--eolexi-white, #FFFFFF); } @media (max-width: 1199px) { .features-three { padding-top: var(--section-space, 120px); } } @media (max-width: 767px) { .features-three { padding-top: 100px; } } @media (max-width: 575px) { .features-three { padding-top: 80px; } } .features-three__card { position: relative; padding: 40px 30px 30px; text-align: center; overflow: hidden; background-color: var(--eolexi-white2, #F0F2F8); border-bottom: 5px solid var(--eolexi-base, #005b85); z-index: 1; } .features-three__card::after { content: ""; width: 100%; height: 0%; position: absolute; left: 0px; bottom: 0px; background-color: var(--eolexi-base, #005b85); z-index: -1; transition: all 500ms ease; } .features-three__card:hover::after { height: 100%; top: 0px; } .features-three__card__icon-box { margin: 0px auto 18px; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 10px; background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-border-color, #dddddd); transition: all 500ms ease; } .features-three__card:hover .features-three__card__icon-box { background-color: var(--eolexi-black2, #162452); } .features-three__card__icon { display: inline-flex; font-size: 40px; color: var(--eolexi-base, #005b85); transition: all 500ms ease; } .features-three__card__icon svg { width: 1em; height: 1em; fill: currentColor; } .features-three__card:hover .features-three__card__icon { color: var(--eolexi-white, #FFFFFF); -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .features-three__card__title { margin-bottom: 10px; font-weight: 700; font-size: 22px; color: var(--eolexi-black, #222222); line-height: 1.318; transition: all 500ms ease; } .features-three__card__text { margin: 0px; font-size: 18px; transition: all 500ms ease; } .features-three__card:hover .features-three__card__title, .features-three__card:hover .features-three__card__text { color: var(--eolexi-white, #FFFFFF); } .features-three__bottom { margin-top: 47px; text-align: center; } .features-three__text { margin: 0px; font-family: var(--eolexi-heading-font, "Roboto Slab", serif); font-weight: 500; color: var(--eolexi-black, #222222); } .features-three__text__icon { margin-right: 10px; position: relative; top: 4px; display: inline-flex; font-size: 24px; color: var(--eolexi-base, #005b85); } .features-three__text__icon svg { width: 1em; height: 1em; fill: currentColor; } .features-three__text a { color: var(--eolexi-base, #005b85); text-decoration: underline; } /*-------------------------------------------------------------- # Skill --------------------------------------------------------------*/ .skill-one { overflow: hidden; background-color: var(--eolexi-white, #FFFFFF); } .skill-one .sec-title { margin-bottom: 12px; } .skill-one__text { margin-bottom: 19px; } .skill-one__skill { margin-bottom: 40px; } .skill-one__image { position: relative; } .skill-one__image__img { position: absolute; top: 50%; left: 129px; transform: translateY(-50%); } @media (max-width: 1599px) { .skill-one__image__img { left: 120px; } } @media (max-width: 1399px) { .skill-one__image__img { left: 110px; } } @media (max-width: 1199px) { .skill-one__image__img { left: 20px; } } @media (max-width: 991px) { .skill-one__image__img { position: static; transform: translate(0); max-width: 100%; height: auto; } } .skill-one__logo { width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 11px solid var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-base, #005b85); position: absolute; top: 50%; left: 25px; transform: translateY(-50%); z-index: 1; } @media (max-width: 1599px) { .skill-one__logo { left: 10px; } } @media (max-width: 1199px) { .skill-one__logo { left: 100px; } } @media (max-width: 991px) { .skill-one__logo { left: 50%; transform: translate(-50%, -50%); } } @media (max-width: 575px) { .skill-one__logo { width: 180px; height: 180px; border-width: 5px; } } .skill-one__logo img { max-width: 100%; height: auto; } /*-------------------------------------------------------------- # Slide Text --------------------------------------------------------------*/ .slide-text { position: relative; padding-top: 301px; padding-bottom: 93px; background-color: var(--eolexi-black2, #162452); } @media (max-width: 991px) { .slide-text { padding-top: 278px; padding-bottom: 70px; } } .slide-text__bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-repeat: no-repeat; background-position: top center; background-size: cover; opacity: 0.3; } .slide-text__wrapper { position: relative; z-index: 1; } .slide-text__scroll { width: -webkit-calc((420px * 16) + (30px * 16)); width: -moz-calc((420px * 16) + (30px * 16)); min-width: 100%; height: 100%; white-space: nowrap; display: flex; align-items: center; gap: 56px; margin: 0px; font-size: 50px; font-weight: 700; color: var(--eolexi-white, #FFFFFF); text-transform: uppercase; line-height: 1.32; -webkit-animation: scrollRightToLeft 20s linear infinite; -moz-animation: scrollRightToLeft 20s linear infinite; animation: scrollRightToLeft 20s linear infinite; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @media (max-width: 991px) { .slide-text__scroll { font-size: 45px; } } @media (max-width: 575px) { .slide-text__scroll { gap: 45px; font-size: 40px; } } .slide-text__scroll:hover { animation-play-state: paused; } .slide-text__scroll__stroke { -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--eolexi-white, #FFFFFF); } @keyframes scrollRightToLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-webkit-calc(-250px* 7)); -moz-transform: translateX(-moz-calc(-250px* 7)); transform: translateX(-1750px); } } /*-------------------------------------------------------------- # Solution --------------------------------------------------------------*/ .solution-one { position: relative; background-color: var(--eolexi-black2, #162452); } .solution-one::after { content: ""; width: 100%; height: 272px; position: absolute; left: 0px; bottom: 0px; background-color: var(--eolexi-white, #FFFFFF); z-index: 1; } .solution-one .container { position: relative; z-index: 2; } .solution-one .sec-title__title { color: var(--eolexi-white, #FFFFFF); } .solution-one__inner { position: relative; padding: 10px; background-color: var(--eolexi-white, #FFFFFF); border: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 991px) { .solution-one__inner { padding: 30px; } } @media (max-width: 430px) { .solution-one__inner { padding: 20px; } } .solution-one__inner::after { content: ""; width: 256px; height: 272px; position: absolute; left: -1px; bottom: -1px; background-color: var(--eolexi-base, #005b85); } @media (max-width: 991px) { .solution-one__inner::after { display: none; } } .solution-one__image { position: relative; z-index: 1; } .solution-one__image img { max-width: 100%; height: auto; } .solution-one__content { position: relative; padding: 20px 50px 20px 0px; z-index: 1; } @media (max-width: 1199px) { .solution-one__content { padding-right: 20px; } } @media (max-width: 991px) { .solution-one__content { padding: 0px; } } .solution-one__top { margin-bottom: 25px; padding-bottom: 29px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--eolexi-border-color, #dddddd); } @media (max-width: 480px) { .solution-one__top { flex-direction: column; align-items: flex-start; } } .solution-one__icon-box { width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: var(--eolexi-base, #005b85); border-radius: 6px; } .solution-one__icon { display: inline-flex; font-size: 36px; color: var(--eolexi-white, #FFFFFF); } .solution-one__icon svg { width: 1em; height: 1em; fill: currentColor; } .solution-one__title { margin: 0ex; font-size: 20px; font-weight: 700; line-height: 1.4; } .solution-one__text { margin-bottom: 20px; } .solution-one__list { margin-bottom: 27px; } .solution-one__list li + li { margin-top: 16px; } .solution-one__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.625; } .solution-one__list__icon { position: relative; top: 3px; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 7px; color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-black2, #162452); border-radius: 50%; transition: all 500ms ease; } .solution-one__list__icon svg { width: 1em; height: 1em; fill: currentColor; } .solution-one__pdf { display: flex; align-items: center; gap: 21px; } @media (max-width: 480px) { .solution-one__pdf { flex-direction: column; align-items: flex-start; } } .solution-one__pdf__img { max-width: 100%; height: auto; flex-shrink: 0; } .solution-one__pdf__title { margin-bottom: 5px; font-size: 20px; font-weight: 700; line-height: 1.4; } .solution-one__pdf__text { margin: 0px; color: var(--eolexi-black3, #000000); } .solution-one__shape-1, .solution-one__shape-2 { max-width: 100%; height: auto; position: absolute; } @media (max-width: 991px) { .solution-one__shape-1, .solution-one__shape-2 { display: none; } } .solution-one__shape-1 { top: 17px; left: 0px; } .solution-one__shape-2 { top: 44px; right: 0px; } /*-------------------------------------------------------------- # Working Process --------------------------------------------------------------*/ .working-process { background-color: var(--eolexi-white, #FFFFFF); counter-reset: workingProcess; } .working-process__card { position: relative; padding: 12px 40px 40px; text-align: center; border-radius: 10px; overflow: hidden; border: 1px solid var(--eolexi-border-color, #dddddd); transition: all 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .working-process__card { padding: 12px 25px 30px; } } @media (min-width: 768px) and (max-width: 991px) { .working-process__card { padding: 12px 25px 30px; } } @media (max-width: 425px) { .working-process__card { padding: 12px 30px 30px; } } @media (max-width: 390px) { .working-process__card { padding-left: 25px; padding-right: 25px; } } .working-process__card::after { content: ""; width: 100%; height: 0%; position: absolute; top: 0px; left: 0px; border-radius: inherit; background-color: var(--eolexi-black2, #162452); transition: all 500ms ease; } .working-process__card:hover::after { height: 100%; } .working-process__card__inner { position: relative; z-index: 2; } .working-process__card__number { position: relative; margin-bottom: 41px; } .working-process__card__number::after { content: "0" counter(workingProcess); counter-increment: workingProcess; font-size: 50px; color: RGBA(var(--eolexi-text-rgb, 99, 99, 99), 0.1); font-weight: 700; line-height: 1; transition: all 500ms ease; } .working-process__card:hover .working-process__card__number::after { color: RGBA(var(--eolexi-white-rgb, 255, 255, 255), 0.1); } .working-process__card__icon-box { position: relative; margin: 0px auto 58px; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--eolexi-base, #005b85); transition: all 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .working-process__card__icon-box { width: 80px; height: 80px; } } @media (max-width: 390px) { .working-process__card__icon-box { width: 80px; height: 80px; } } .working-process__card__icon-box::before, .working-process__card__icon-box::after { content: ""; width: calc(100% + 28px); height: calc(100% + 28px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; transition: all 500ms ease; } .working-process__card__icon-box::before { width: calc(100% + 56px); height: calc(100% + 56px); border: 1px dashed var(--eolexi-base, #005b85); } .working-process__card__icon-box::after { background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.2); } .working-process__card:hover .working-process__card__icon-box { background-color: var(--eolexi-white, #FFFFFF); } .working-process__card:hover .working-process__card__icon-box::before { border-color: var(--eolexi-white, #FFFFFF); } .working-process__card:hover .working-process__card__icon-box::after { background-color: RGBA(var(--eolexi-white-rgb, 255, 255, 255), 0.2); } .working-process__card__icon { display: inline-flex; font-size: 43px; color: var(--eolexi-white, #FFFFFF); } .working-process__card__icon svg { width: 1em; height: 1em; fill: currentColor; } @media (min-width: 992px) and (max-width: 1199px) { .working-process__card__icon { font-size: 35px; } } @media (max-width: 390px) { .working-process__card__icon { font-size: 35px; } } .working-process__card:hover .working-process__card__icon { color: var(--eolexi-base, #005b85); -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .working-process__card__title { margin-bottom: 12px; font-weight: 700; font-size: 22px; color: var(--eolexi-black, #222222); text-transform: capitalize; line-height: 1.318; transition: all 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .working-process__card__title { font-size: 20px; } } @media (max-width: 390px) { .working-process__card__title { font-size: 20px; } } .working-process__card__text { margin-bottom: 19px; font-size: 18px; transition: all 500ms ease; } @media (min-width: 992px) and (max-width: 1199px) { .working-process__card__text { font-size: 16px; } } @media (max-width: 390px) { .working-process__card__text { font-size: 16px; } } .working-process__card:hover .working-process__card__title, .working-process__card:hover .working-process__card__text { color: var(--eolexi-white, #FFFFFF); } .working-process__card__btn { margin: 0px auto; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--eolexi-white, #FFFFFF); background-color: var(--eolexi-black2, #162452); border-radius: 50%; transform: rotate(-45deg); transition: all 500ms ease; } .working-process__card:hover .working-process__card__btn { transform: rotate(0deg); color: var(--eolexi-black2, #162452); background-color: var(--eolexi-white, #FFFFFF); } .working-process__card__shape { max-width: 100%; height: auto; position: absolute; left: 50%; bottom: -135px; opacity: 0; transform: translateX(-50%); z-index: 1; transition: all 500ms ease; } .working-process__card:hover .working-process__card__shape { opacity: 1; } /*-------------------------------------------------------------- # Profit Graph --------------------------------------------------------------*/ .profit-graph { background-color: var(--eolexi-black2, #162452); } @media (min-width: 1200px) { .profit-graph .container { padding-right: 0; margin-left: calc((100% - 1200px) / 2); width: auto; min-width: auto; max-width: inherit; } } .profit-graph__inner { padding-right: 115px; } @media (max-width: 1599px) { .profit-graph__inner { padding-right: 30px; } } @media (max-width: 1199px) { .profit-graph__inner { padding-right: 0px; } } .profit-graph .sec-title { margin-bottom: 20px; } .profit-graph .sec-title__title, .profit-graph__text { color: var(--eolexi-white, #FFFFFF); } .profit-graph__text { margin-bottom: 35px; } .profit-graph__info { position: relative; margin-bottom: 31px; padding: 26px 40px 26px 60px; display: flex; align-items: flex-start; gap: 20px; border: 1px solid RGBA(var(--eolexi-border-color-rgb, 221, 221, 221), 0.5); } @media (max-width: 1399px) { .profit-graph__info { padding-right: 30px; padding-left: 40px; } } @media (max-width: 480px) { .profit-graph__info { padding: 26px 25px 26px 35px; flex-direction: column; } } .profit-graph__info::before { content: ""; width: 9px; height: calc(100% - 60px); position: absolute; top: 50%; left: -1px; transform: translateY(-50%); background-color: var(--eolexi-base, #005b85); } .profit-graph__info__icon { display: inline-flex; flex-shrink: 0; font-size: 69px; color: var(--eolexi-white, #FFFFFF); } .profit-graph__info__icon svg { width: 1em; height: 1em; fill: currentColor; } .profit-graph__info__title { margin-bottom: 9px; font-weight: 700; font-size: 22px; color: var(--eolexi-white, #FFFFFF); line-height: 1.319; } @media (max-width: 390px) { .profit-graph__info__title { font-size: 20px; } } .profit-graph__info__text { margin: 0px; font-size: 15px; color: var(--eolexi-white, #FFFFFF); } .profit-graph__list { margin-bottom: 37px; } .profit-graph__list li + li { margin-top: 16px; } .profit-graph__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; color: var(--eolexi-white, #FFFFFF); font-weight: 500; line-height: 1.625; } .profit-graph__list__icon { position: relative; top: 3px; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 7px; color: var(--eolexi-black2, #162452); background-color: var(--eolexi-white, #FFFFFF); border-radius: 50%; transition: all 500ms ease; } .profit-graph__list__icon svg { width: 1em; height: 1em; fill: currentColor; } .profit-graph__bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 30px 50px; } .profit-graph .eolexi-btn { flex-shrink: 0; } .profit-graph__call { display: flex; align-items: center; gap: 20px; } .profit-graph__call__icon { display: inline-flex; flex-shrink: 0; font-size: 30px; color: var(--eolexi-white, #FFFFFF); } .profit-graph__call__icon svg { width: 1em; height: 1em; fill: currentColor; } .profit-graph__call__title { margin-bottom: 5px; font-weight: 700; font-size: 18px; color: var(--eolexi-white, #FFFFFF); line-height: 1.333; } .profit-graph__call__number { color: var(--eolexi-white, #FFFFFF); line-height: 1.25; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .profit-graph__call__number:hover { background-size: 100% 1px; } .profit-graph__call__number:hover { color: var(--eolexi-base, #005b85); } .profit-graph__chart { padding: 53px 40px 54px; background-color: var(--eolexi-white2, #F0F2F8); border-radius: 10px; } @media (min-width: 1200px) and (max-width: 1299px) { .profit-graph__chart { padding: 30px; } } @media (max-width: 767px) { .profit-graph__chart { padding: 25px; } } @media (max-width: 430px) { .profit-graph__chart { padding: 20px; } } .profit-graph__chart__content { text-align: center; } .profit-graph__chart__title { margin-bottom: 10px; font-size: 22px; color: var(--eolexi-base, #005b85); font-weight: 700; line-height: 1.318; } @media (max-width: 430px) { .profit-graph__chart__title { font-size: 20px; } } .profit-graph__chart__text { margin-bottom: 25px; font-weight: 500; } .profit-graph .insuba-chart { background-color: inherit; border-radius: inherit; } /*-------------------------------------------------------------- # Contact Info --------------------------------------------------------------*/ .contact-info { position: relative; background-color: var(--eolexi-black2, #162452); } .contact-info__wrapper { overflow: hidden; } .contact-info .container { position: relative; z-index: 1; } .contact-info__inner { position: relative; padding: 49px 0px; z-index: 2; } @media (max-width: 991px) { .contact-info__inner { padding: 80px 0px; } } .contact-info__icon-box { width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; position: relative; background-color: var(--eolexi-white, #FFFFFF); border-radius: 15px; } @media (max-width: 991px) { .contact-info__icon-box { margin: 0px auto; } } .contact-info__icon-box::after { content: ""; width: calc(100% - 22px); height: calc(100% - 22px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid var(--eolexi-base, #005b85); border-radius: inherit; } .contact-info__icon { display: inline-flex; font-size: 84px; color: var(--eolexi-base, #005b85); } .contact-info__icon svg { width: 1em; height: 1em; fill: currentColor; } @media (max-width: 991px) { .contact-info__content { text-align: center; } } .contact-info__title { margin-bottom: 15px; font-family: var(--eolexi-font, "DM Sans", serif); font-size: 22px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.318; } .contact-info__text { margin: 0px; color: var(--eolexi-white, #FFFFFF); } .contact-info__button { display: flex; align-items: center; justify-content: flex-end; } @media (max-width: 991px) { .contact-info__button { justify-content: center; } } .contact-info__button .eolexi-btn:hover .eolexi-btn__text { color: var(--eolexi-black2, #162452); } .contact-info__button .eolexi-btn::after { background-color: var(--eolexi-white, #FFFFFF); } .contact-info__shape { width: 98px; height: 100%; position: relative; position: absolute; top: 0px; left: 45px; display: flex; align-items: center; gap: 21px; } @media (max-width: 991px) { .contact-info__shape { display: none; } } .contact-info__shape::before, .contact-info__shape::after { content: ""; width: 38px; height: calc(100% + 120px); background-color: var(--eolexi-base, #005b85); transform: rotate(-17.86deg); } .contact-info__shape-2 { width: 319px; height: 100%; position: relative; position: absolute; top: 0px; right: 0px; } @media (max-width: 1599px) { .contact-info__shape-2 { right: -50px; } } @media (max-width: 1399px) { .contact-info__shape-2 { right: -90px; } } @media (max-width: 1199px) { .contact-info__shape-2 { right: -115px; } } @media (max-width: 991px) { .contact-info__shape-2 { display: none; } } .contact-info__shape-2::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.3); clip-path: polygon(58% 0, 100% 0, 100% 100%, 0 100%, 58% 47%); } .contact-info__shape-2::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; background-color: var(--eolexi-base, #005b85); clip-path: polygon(65% 0, 100% 0, 100% 100%, 0 110%, 65% 51%); } .contact-info--home2 .contact-info__inner { padding: 80px 0px; } .contact-info--home2 .contact-info__image { width: 375px; height: 100%; position: absolute; top: 0px; left: 0px; border-right: 6px solid var(--eolexi-white, #FFFFFF); } @media (max-width: 1799px) { .contact-info--home2 .contact-info__image { display: none; } } .contact-info--home2 .contact-info__image img { width: 100%; height: 100%; object-fit: cover; } .contact-info--home2 .contact-info__content { padding-left: 75px; } @media (max-width: 1799px) { .contact-info--home2 .contact-info__content { padding-left: 0px; } } .contact-info-two__inner { margin-top: 86px; padding: 64px 66px; border-radius: 10px; background-color: var(--eolexi-black2, #162452); } @media (max-width: 1199px) { .contact-info-two__inner { padding: 50px 40px; } } @media (max-width: 991px) { .contact-info-two__inner { padding-top: 42px; } } @media (max-width: 767px) { .contact-info-two__inner { margin-top: 80px; } } @media (max-width: 430px) { .contact-info-two__inner { padding: 32px 30px 40px; } } .contact-info-two__title { margin-bottom: 14px; font-size: 22px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.454; } @media (max-width: 991px) { .contact-info-two__title { margin-bottom: 30px; text-align: center; } } .contact-info-two__info { width: 100%; } @media (max-width: 991px) { .contact-info-two__info { display: flex; align-items: center; justify-content: center; } } .contact-info-two__list { margin: 0px; display: flex; align-items: center; gap: 30px 62px; } @media (max-width: 575px) { .contact-info-two__list { flex-direction: column; align-items: flex-start; } } @media (max-width: 991px) { .contact-info-two__list { align-items: center; text-align: center; } } .contact-info-two__list li { position: relative; display: flex; align-items: center; gap: 21px; } @media (max-width: 991px) { .contact-info-two__list li { flex-direction: column; } } .contact-info-two__list li:not(:last-child)::after { content: "|"; width: 2px; height: calc(100% - 12px); background-color: var(--eolexi-white, #FFFFFF); position: absolute; top: 50%; right: -31px; transform: translateY(-50%); } @media (max-width: 575px) { .contact-info-two__list li:not(:last-child)::after { display: none; } } .contact-info-two__list__icon { display: inline-flex; flex-shrink: 0; font-size: 30px; color: var(--eolexi-white, #FFFFFF); } .contact-info-two__list__icon svg { width: 1em; height: 1em; fill: currentColor; } .contact-info-two__list__title { margin-bottom: 3px; font-size: 18px; color: var(--eolexi-white, #FFFFFF); font-weight: 700; line-height: 1.333; } .contact-info-two__list__text { margin: 0px; font-size: 16px; font-weight: 500; color: var(--eolexi-white, #FFFFFF); line-height: 1.3125; background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95%/0px 1px no-repeat; transition: all 500ms ease; } .contact-info-two__list__text:hover { color: var(--eolexi-base, #005b85); } .contact-info-two__list__text:hover { background-size: 100% 1px; } .contact-info-two__button { text-align: right; } @media (max-width: 991px) { .contact-info-two__button { text-align: center; } } .contact-info-two__button .eolexi-btn::after { background-color: var(--eolexi-white, #FFFFFF); } .contact-info-two__button .eolexi-btn:hover .eolexi-btn__text { color: var(--eolexi-black2, #162452); } .contact-info-two--home3 { position: relative; padding: 64px 0px; overflow: hidden; background-color: var(--eolexi-black2, #162452); } @media (max-width: 991px) { .contact-info-two--home3 { padding: 72px 0px 80px; } } .contact-info-two--home3 .container { position: relative; z-index: 1; } .contact-info-two--home3 .contact-info-two__inner { margin: 0px; padding: 0px; border-radius: 0px; background-color: transparent; } .contact-info-two--home3 .contact-info-two__image { width: 390px; height: 100%; position: absolute; top: 0px; left: 0px; border-right: 6px solid var(--eolexi-white, #FFFFFF); } @media (max-width: 1799px) { .contact-info-two--home3 .contact-info-two__image { display: none; } } .contact-info-two--home3 .contact-info-two__image img { width: 100%; height: 100%; object-fit: cover; } .contact-info-two--home3 .contact-info-two__content { padding-left: 75px; } @media (max-width: 1799px) { .contact-info-two--home3 .contact-info-two__content { padding-left: 0px; } } .contact-info-two--home3 .contact-info-two__shape { width: 319px; height: 100%; position: relative; position: absolute; top: 0px; right: 0px; } @media (max-width: 1599px) { .contact-info-two--home3 .contact-info-two__shape { right: -50px; } } @media (max-width: 1399px) { .contact-info-two--home3 .contact-info-two__shape { right: -90px; } } @media (max-width: 1199px) { .contact-info-two--home3 .contact-info-two__shape { right: -115px; } } @media (max-width: 991px) { .contact-info-two--home3 .contact-info-two__shape { display: none; } } .contact-info-two--home3 .contact-info-two__shape::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; background-color: RGBA(var(--eolexi-base-rgb, 47, 92, 233), 0.3); clip-path: polygon(58% 0, 100% 0, 100% 100%, 0 100%, 58% 47%); } .contact-info-two--home3 .contact-info-two__shape::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0px; right: 0px; background-color: var(--eolexi-base, #005b85); clip-path: polygon(65% 0, 100% 0, 100% 100%, 0 110%, 65% 51%); } /*-------------------------------------------------------------- # Error 404 --------------------------------------------------------------*/ .error-404 { background-color: var(--eolexi-white, #FFFFFF); } .error-404__content { text-align: center; } .error-404__image { margin-bottom: 29px; max-width: 100%; height: auto; animation: moveHorizontal2 2s linear infinite; } .error-404__title { margin-bottom: 11px; font-size: 35px; font-weight: 700; line-height: 1.314; } @media (max-width: 430px) { .error-404__title { font-size: 30px; } } .error-404__text { margin-bottom: 26px; font-weight: 500; } /*-------------------------------------------------------------- # Boxed Home --------------------------------------------------------------*/ body.boxed-wrapper { position: relative; } body.boxed-wrapper .page-wrapper { max-width: 1530px; margin-left: auto; margin-right: auto; background-color: var(--eolexi-white, #FFFFFF); box-shadow: 0px 0px 100px 0px rgba(var(--eolexi-black3-rgb, 0, 0, 0), 0.08); } @media (min-width: 1600px) { body.boxed-wrapper .main-slider__shape { right: -180px !important; } } @media (min-width: 1400px) { body.boxed-wrapper .skill-one__image__img { left: 120px; } body.boxed-wrapper .skill-one__image__logo { left: 10px; } body.boxed-wrapper .contact-info__shape-2 { right: -50px; } } /*# sourceMappingURL=eolexi.css.map */ @media only screen and (min-width: 1025px) { .mobile-only { display:none !important; } } @media only screen and (max-width: 1026px) { .desktop-only { display:none !important; } }