@charset "UTF-8"; /*====================================================================================== >> TABLE OF CONTENTS << ======================================================================================== 01. Mixins & Variables 02. Base 03. Components 04. Layouts 05. Sections ======================================================================================*/ /*--------------------------------------- 01. Mixins & Variables ---------------------------------------*/ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap"); :root { --yellow: #ffc20e; --body: #fff; --black: #000; --white: #fff; --theme: #0FB9B1; --header: #0A2540; --text: #465A6E; --border: #02060A; --bg: #F5F7FA; --bg2: #0F172A; --box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.13); } /*--------------------------------------- 02. Base ---------------------------------------*/ /* -------------------------------------------- Template Default Fonts & Fonts Styles ---------------------------------------------- */ body { font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 28px; color: var(--text); background-color: var(--white); padding: 0; margin: 0; overflow-x: hidden; } @media (max-width: 575px) { body { font-size: 14px; } } ul { padding: 0; margin: 0; list-style: none; } button { border: none; background-color: transparent; padding: 0; } input:focus { color: var(--white); outline: none; } input { color: var(--white); } h1, h2, h3, h4, h5, h6 { font-family: "Plus Jakarta Sans", sans-serif; margin: 0px; padding: 0; color: var(--header); transition: all 0.4s ease-in-out; } h1 { font-size: 110px; font-weight: 700; line-height: 100%; text-transform: capitalize; } @media (max-width: 1899px) { h1 { font-size: 100px; } } @media (max-width: 1600px) { h1 { font-size: 90px; } } @media (max-width: 1399px) { h1 { font-size: 70px; } } @media (max-width: 1199px) { h1 { font-size: 60px; } } @media (max-width: 991px) { h1 { font-size: 50px; line-height: 130% !important; } } @media (max-width: 767px) { h1 { font-size: 40px; } } @media (max-width: 575px) { h1 { font-size: 30px; } } @media (max-width: 470px) { h1 { font-size: 30px; } } h2 { font-size: 64px; font-weight: 600; line-height: 125%; text-transform: capitalize; } @media (max-width: 1399px) { h2 { font-size: 44px; } } @media (max-width: 1199px) { h2 { font-size: 40px; } } @media (max-width: 991px) { h2 { font-size: 36px; } } @media (max-width: 767px) { h2 { font-size: 30px; } } @media (max-width: 575px) { h2 { font-size: 25px; } } @media (max-width: 470px) { h2 { font-size: 25px; } } h3 { font-size: 24px; font-weight: 700; line-height: 133%; text-transform: capitalize; } @media (max-width: 575px) { h3 { font-size: 20px; } } h4 { font-size: 22px; font-weight: 700; line-height: 145%; text-transform: capitalize; } h5 { font-size: 18px; font-weight: 600; text-transform: capitalize; } h6 { font-size: 16px; font-weight: 600; text-transform: capitalize; } a { text-decoration: none; outline: none !important; cursor: pointer; color: var(--header); transition: all 0.4s ease-in-out; } p { margin: 0px; transition: all 0.4s ease-in-out; text-transform: capitalize; } span { margin: 0px; text-transform: capitalize; } .theme-btn { position: relative; display: inline-flex; align-items: center; overflow: hidden; padding: 10px 30px; background-color: transparent; color: var(--white); font-size: 16px; line-height: 40px; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; border-radius: 100px; text-transform: capitalize; transition: all 0.3s linear; z-index: 2; } .theme-btn .txt { position: relative; display: inline-flex; align-items: center; z-index: 1; } .theme-btn::after { content: ""; position: absolute; inset: 0; transform: scaleX(1); background-color: var(--theme); transition-duration: 800ms; z-index: -1; border-radius: 100px; } .theme-btn::before { content: ""; position: absolute; top: 0; left: -10px; bottom: 0; right: 100%; background: var(--header); transform: translateX(-100%); transition-duration: 800ms; z-index: 1; border-radius: 100px; } .theme-btn:hover, .theme-btn:focus { color: #ffffff; } .theme-btn:hover::after, .theme-btn:focus::after { transform: scaleX(0); transition-duration: 1500ms; } .theme-btn:hover::before, .theme-btn:focus::before { left: 0; right: 0; transform: translateX(0); } .theme-btn.style-2::after { background-color: var(--header); } .theme-btn.style-2::before { background: var(--theme); } .theme-btn.style-border { color: rgb(15, 185, 177); } .theme-btn.style-border::after { background-color: transparent; border: 1px solid rgb(15, 185, 177); } .theme-btn.style-border::before { background: var(--theme); } .theme-btn.style-border:hover { color: var(--white); } .link-btn { color: var(--theme); font-size: 16px; font-weight: 600; display: inline-block; font-family: "Plus Jakarta Sans", sans-serif; } .link-btn i { margin-left: 5px; color: var(--theme); } /*--------------------------------------- 03. Components ---------------------------------------*/ .mean-container a.meanmenu-reveal { display: none; } .mean-container .mean-nav { background: none; margin-top: 0; } .mean-container .mean-bar { padding: 0; min-height: auto; background: none; background: none; } .mean-container .mean-nav > ul { padding: 0; margin: 0; width: 100%; list-style-type: none; display: block !important; } .mean-container a.meanmenu-reveal { display: none !important; } .mean-container .mean-nav ul li a { display: block; width: 100%; padding: 10px 0; color: var(--black); font-size: 16px; font-weight: 500; line-height: 2; text-transform: capitalize; border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important; border: none; } .mean-container .mean-nav ul li a:hover { color: var(--theme); } .mean-container .mean-nav ul li .submenu li a { border-bottom: none !important; font-size: 14px; padding: 6px 0; color: var(--header); } .mean-container .mean-nav ul li a:last-child { border-bottom: 0; } .mean-container .mean-nav ul li a:hover { color: var(--theme); } .mean-container .mean-nav ul li a.mean-expand { margin-top: 5px; padding: 0 !important; } .mean-container .mean-nav ul li > a > i { display: none; } .mean-container .mean-nav ul li > a.mean-expand i { display: inline-block; font-size: 18px; } .mean-container .mean-nav > ul > li:first-child > a { border-top: 0; } .mean-container .mean-nav ul li a.mean-expand.mean-clicked i { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transition: all 0.4s ease-in-out; } .mean-container .mean-nav ul li .mega-menu li a { height: 200px; width: 100%; padding: 0; border-top: 0; margin-bottom: 20px; } .preloader--three { position: fixed; width: 100%; height: 100%; background-color: #000; overflow: hidden; z-index: 9999999; display: flex; justify-content: center; align-items: center; } .preloader--three .loading--text { font-size: 150px; font-weight: 400; line-height: 1.1; color: var(--white); } @media (max-width: 575px) { .preloader--three .loading--text { font-size: 90px; } } .preloader--three .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; opacity: 0; visibility: hidden; } .back-to-top { background-color: var(--theme); width: 50px; height: 50px; line-height: 40px; border-radius: 100px; color: var(--white); font-size: 16px; position: fixed; display: inline-block; z-index: 9999; right: 30px; bottom: 30px; transition: all 0.4s ease-in-out; opacity: 0; visibility: hidden; transform: translateY(20px); } @media (max-width: 575px) { .back-to-top { display: none; } } .back-to-top:hover { background-color: var(--white); color: var(--theme); } .back-to-top.show { opacity: 1; visibility: visible; transform: translate(0); } @-webkit-keyframes rippleOne { 70% { -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0); box-shadow: 0 0 0 40px rgba(244, 68, 56, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0); box-shadow: 0 0 0 0 rgba(244, 68, 56, 0); } } @keyframes rippleOne { 70% { -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0); box-shadow: 0 0 0 40px rgba(244, 68, 56, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0); box-shadow: 0 0 0 0 rgba(244, 68, 56, 0); } } @keyframes gelatine { from, to { transform: scale(1, 1); } 25% { transform: scale(0.7, 1.1); } 50% { transform: scale(1.1, 0.7); } 75% { transform: scale(0.95, 1.05); } } @keyframes cir36 { 100% { transform: rotate(360deg); } } @keyframes rounded { 50% { transform: rotate(15deg); } } @keyframes up-down { 0% { transform: translateY(10px); } 100% { transform: translateY(-10px); } } @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-webkit-keyframes letters-loading { 0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); } 25%, 50% { opacity: 1; transform: rotateY(0deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; transform: rotateY(-90deg); } 25%, 50% { opacity: 1; transform: rotateY(0deg); } } @keyframes loaderspin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes tpswing { 0% { -webkit-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(20deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes width { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes width { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes loaderspin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes loaderpulse { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } @keyframes rounded { 50% { transform: rotate(20deg); } } @keyframes cir36 { 100% { transform: rotate(360deg); } } .float-bob-y { -webkit-animation-name: float-bob-y; animation-name: float-bob-y; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes float-bob-y { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes float-bob-y { 0% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } .float-bob-x { -webkit-animation-name: float-bob-x; animation-name: float-bob-x; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes float-bob-x { 0% { -webkit-transform: translateX(0px); transform: translateX(30px); } 50% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @keyframes float-bob-x { 0% { -webkit-transform: translateX(30px); transform: translateX(30px); } 50% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @keyframes bounce-x { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(30px); transform: translateX(30px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .bounce-x { -webkit-animation: bounce-x 7s infinite linear; animation: bounce-x 7s infinite linear; } @keyframes criss-cross-left { 0% { left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } @keyframes rotated2 { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } } @keyframes wave { 0% { transform: translateX(0); } 50% { transform: translateX(-25%); } 100% { transform: translateX(-50%); } } @keyframes zoom { 0% { transform: scale(0.5); } 50% { transform: scale(1); } 100% { transform: scale(0.5); } } @keyframes translateY2 { 0% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @keyframes translateX2 { 0% { -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 100% { -webkit-transform: translatXY(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @keyframes moving { 0% { transform: translatey(0px); } 20% { transform: translateX(-50px); } 50% { transform: translatey(-40px); } 100% { transform: translatey(0px); } } /*img-animation**********************/ .img-custom-anim-right { animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s; opacity: 0; } @keyframes img-anim-right { 0% { transform: translateX(5%); clip-path: inset(0 0 0 100%); opacity: 0; } 100% { transform: translateX(0); clip-path: inset(0 0 0 0); opacity: 1; } } .img-custom-anim-left { animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s; opacity: 0; } @keyframes img-anim-left { 0% { transform: translateX(-5%); clip-path: inset(0 100% 0 0); opacity: 0; } 100% { transform: translateX(0); clip-path: inset(0 0 0 0); opacity: 1; } } .img-custom-anim-top { animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1); opacity: 0; } @keyframes img-anim-top { 0% { transform: translateY(-5%); clip-path: inset(0 0 100% 0); opacity: 0; } 100% { transform: translateY(0); clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes animate-positive { 0% { width: 0; } } @keyframes scale { 0% { top: -1000px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .animation-infinite { animation: ShapeAnim 50s linear infinite; height: 30px; width: 100%; background-repeat: repeat; overflow: hidden; } @keyframes ShapeAnim { 0% { background-position: top left; } 100% { background-position: top left 3000px; } } .splt-txt .whitespace { width: 8px; } .splt-txt.animated .char { -webkit-animation: fadeIn 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; animation: fadeIn 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(30ms * var(--char-index)); animation-delay: calc(30ms * var(--char-index)); } .splt-txt-bounce .whitespace { width: 20px; } @media (max-width: 991px) { .splt-txt-bounce .whitespace { width: 10px; } } .splt-txt-bounce.animated .char { -webkit-animation: bounceIn 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; animation: bounceIn 0.4s cubic-bezier(0.3, 0, 0.7, 1) both; -webkit-animation-delay: calc(30ms * var(--char-index)); animation-delay: calc(30ms * var(--char-index)); } @keyframes jello { 11.1% { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } 100% { -webkit-transform: none; transform: none; } } /* CSS */ .text-anims { opacity: 0; transform: scale(0.8); transition: opacity 1s ease-out, transform 1s ease-out; } .text-anims.show { opacity: 1; transform: scale(1); } /* swiming animation*/ @keyframes swimMove { 0% { transform: translateX(0); } 50% { transform: translateX(30px); } 100% { transform: translateX(0); } } @keyframes swimBody { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(-3deg); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes rotateCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes grassMove { from { background-position: 0 0; } to { background-position: 200px 0; } } @keyframes floatShip { 0% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-8px) rotate(-1deg); } 50% { transform: translateY(0px) rotate(0deg); } 75% { transform: translateY(8px) rotate(1deg); } 100% { transform: translateY(0px) rotate(0deg); } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% - var(--gap))); } } @keyframes scrolls { 0% { transform: translateX(calc(-100% - var(--gap))); /* start from left off-screen */ } 100% { transform: translateX(0); /* move to original position */ } } /*--------------------------------------- 04. Layouts ---------------------------------------*/ .header-top-section { background-color: var(--theme); position: relative; } .header-top-section .container-fluid { padding: 0 110px; } @media (max-width: 1600px) { .header-top-section .container-fluid { padding: 0 30px; } } @media (max-width: 575px) { .header-top-section .container-fluid { padding: 0 15px; } } .header-top-wrapper { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; position: relative; z-index: 999; } .header-top-wrapper .header-left .list { display: flex; align-items: center; gap: 40px; } .header-top-wrapper .header-left .list li { color: var(--white); font-weight: 600; } .header-top-wrapper .header-left .list li img { filter: brightness(0) invert(1); margin-right: 5px; } .header-top-wrapper .header-left .list li i { margin-right: 5px; } .header-top-wrapper .header-left .list li a { color: var(--white); } .header-top-wrapper span { color: var(--white); font-weight: 600; text-transform: capitalize; } .header-top-wrapper .social-icon { display: flex; align-items: center; gap: 10px; } .header-top-wrapper .social-icon a { color: var(--white); width: 30px; height: 30px; line-height: 30px; text-align: center; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.2); display: inline-block; transition: all 0.4s ease-in-out; font-size: 16px; border-radius: 100px; } .header-top-wrapper .social-icon a:hover { background-color: var(--white); color: var(--theme); } @media (max-width: 1199px) { .menu-thumb { display: none !important; } } .header-main { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; } @media (max-width: 575px) { .header-main .logo .header-logo img { width: 30px; } } .header-main .main-menu ul { margin-bottom: 0; } .header-main .main-menu ul li { position: relative; list-style: none; display: inline-block; margin-inline-end: 20px; } @media (max-width: 1199px) { .header-main .main-menu ul li { margin-inline-end: 30px; } } .header-main .main-menu ul li:last-child { margin-inline-end: 0; } .header-main .main-menu ul li a { display: inline-block; font-size: 16px; font-weight: 500; color: rgb(255, 255, 255); padding: 20px 0; text-align: left; position: relative; text-transform: capitalize; transition: all 0.4s ease-in-out; } .header-main .main-menu ul li a i { margin-left: 4px; font-size: 14px; } .header-main .main-menu ul li a:hover { color: var(--theme); } .header-main .main-menu ul li .submenu { position: absolute; top: 115%; inset-inline-start: 0; min-width: max-content; padding: 20px 0; z-index: 99999; visibility: hidden; opacity: 0; transform-origin: top center; color: var(--header); transform: translateY(-10px); transition: all 0.4s ease-in-out; border-top: 6px solid var(--theme); background-color: var(--white); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); border-radius: 8px; } .header-main .main-menu ul li .submenu li { display: block; width: 100%; margin: 0; } .header-main .main-menu ul li .submenu li a { position: relative; z-index: 11; font-size: 16px; font-weight: 500; letter-spacing: -0.34px; color: var(--header); line-height: 38px; padding: 0px 0px 0px 32px; padding-right: 22px; width: 100%; display: flex; align-items: center; justify-content: space-between; } .header-main .main-menu ul li .submenu li a::before { content: ""; position: absolute; width: 0px; height: 2px; background: var(--theme); left: 14px; bottom: 18px; transition: all 0.4s ease-in-out; } .header-main .main-menu ul li .submenu li a:hover { color: var(--theme); } .header-main .main-menu ul li .submenu li:last-child a { border: none; } .header-main .main-menu ul li .submenu li .submenu { inset-inline-start: 100%; top: 0; visibility: hidden; opacity: 0; } .header-main .main-menu ul li .submenu li:hover > a { color: var(--theme) !important; margin-left: 10px; } .header-main .main-menu ul li .submenu li:hover > a::before { width: 10px; } .header-main .main-menu ul li .submenu li:hover > a::after { color: var(--theme); } .header-main .main-menu ul li .submenu li:hover > .submenu { -webkit-transform: translateY(1); -moz-transform: translateY(1); -ms-transform: translateY(1); -o-transform: translateY(1); transform: translateY(1); visibility: visible; opacity: 1; } .header-main .main-menu ul li .submenu li.has-dropdown > a::after { position: absolute; top: 50%; inset-inline-end: 25px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: var(--theme); } .header-main .main-menu ul li:hover > a { color: var(--theme); } .header-main .main-menu ul li:hover > a::after { color: var(--theme); } .header-main .main-menu ul li:hover > .submenu { visibility: visible; opacity: 1; transform: translateY(0px); } .header-main .header-right { position: relative; z-index: 999; display: flex; align-items: center; gap: 100px; } .header-main .header-right .header-btn { display: flex; align-items: center; gap: 50px; } @media (max-width: 1600px) { .header-main .header-right .header-btn { gap: 18px; } } .header-main .header-right .header-btn h4 { color: var(--white); font-size: 16px; font-weight: 700; } @media (max-width: 1600px) { .header-main .header-right .header-btn h4 { font-size: 15px; } } .header-main .header-right .header-btn h4 img { margin-right: 10px; } .header-main .header-right .header-btn h4 a { color: var(--white); } .header-main .header-right .header-btn .sidebar__toggle { cursor: pointer; font-size: 20px; color: var(--white); } .header-1 { position: absolute; width: 100%; left: 0; right: 0; z-index: 999; top: 0; } .header-1 .container-fluid { padding: 0 60px; } @media (max-width: 1600px) { .header-1 .container-fluid { padding: 0 30px; } } @media (max-width: 575px) { .header-1 .container-fluid { padding: 0 15px; } } .header-1 .header-main .header-left .logo img { width: 110px; } .header-1 .header-main .header-left { display: flex; align-items: center; gap: 110px; position: relative; padding: 5px 25px; z-index: 9; } .header-1.sticky .header-main .header-left {padding:0px 25px;} .header-1.sticky .header-main {padding:0px;} @media (max-width: 1199px) { .header-1 .header-main .header-left { gap: 0; padding: 0; } } @media (max-width: 575px) { .header-1 .header-main .header-left .logo .header-logo img { width: 150px; } } .header-1 .header-main .header-left .shape { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .header-1 .header-main .header-left .shape img { width: 100%; height: 100%; } .header-1 .header-main .header-left .header-logo-2 { display: none; } .header-1 .header-main .header-right { position: relative; z-index: 9; padding: 10px 25px; } @media (max-width: 1600px) { .header-1 .header-main .header-right { padding: 10px 20px; } } .header-1 .header-main .header-right .shape-2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .header-1 .header-main .header-right .shape-2 img { width: 100%; height: 100%; } .header-1 .heder-bg-shape { position: absolute; top: 0; left: 0; right: 0; } .header-1 .heder-bg-shape::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; background-color: rgba(10, 37, 64, 0.6); } @media (max-width: 1199px) { .header-1 .heder-bg-shape { height: 60px; } } .header-1 .heder-bg-shape img { width: 100%; height: 100%; } .header-1.header-inner .header-main { margin-top: 20px; } @media (max-width: 1600px) { .header-1.header-inner .header-main { margin-top: 0; } } .sticky { position: fixed !important; top: 0 !important; left: 0; width: 100%; z-index: 99999; transition: all 0.9s; background-color: var(--white); -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .sticky.header-1 { margin-top: 0; } .sticky.header-1 .header-main .header-left .shape { display: none; } .sticky.header-1 .header-main .header-left .header-logo { display: none; } .sticky.header-1 .header-main .header-left .header-logo-2 { display: block; } .sticky.header-1 .header-main .main-menu ul li a { color: var(--header); } .sticky.header-1 .header-main .header-right .shape-2 { display: none; } .sticky.header-1 .header-main .header-right .header-btn h4 { color: var(--header); } .sticky.header-1 .header-main .header-right .header-btn h4 img { filter: brightness(0); } .sticky.header-1 .header-main .header-right .header-btn h4 a { color: var(--header); } .sticky.header-1 .header-main .header-right .header-btn .sidebar__toggle img { filter: brightness(0); } .sticky.header-1 .header-main .header-right .header-btn .sidebar__toggle i { color: var(--header); } .sticky.header-1 .heder-bg-shape { display: none; } .sticky.header-1.header-inner .header-main { margin-top: 0; } .sticky.header-3 .header-main .header-right .menu_search .search_btn { color: var(--header); border: 1px solid rgba(10, 37, 64, 0.2); } .style-offcanvas-2 .offcanvas__info-2 { left: 0; transform: translateX(calc(-100% - 80px)); right: initial; width: 800px; position: fixed; z-index: 99999; background-color: var(--white); background: var(--white) none repeat scroll 0 0; border-left: 2px solid var(--theme); transition: transform 0.5s ease; overflow-y: auto; height: 100%; } @media (max-width: 1399px) { .style-offcanvas-2 .offcanvas__info-2 { width: 350px; } } .style-offcanvas-2 .offcanvas__info-2 .mean-nav ul li a { font-size: 50px !important; font-weight: 700 !important; text-transform: capitalize; } @media (max-width: 1399px) { .style-offcanvas-2 .offcanvas__info-2 .mean-nav ul li a { font-size: 20px !important; } } .style-offcanvas-2 .offcanvas__info-2 .mean-container .mean-nav ul li li a { padding: 10px 0 !important; font-size: 20px !important; font-weight: 700 !important; color: #1C1D20 !important; } @media (max-width: 1399px) { .style-offcanvas-2 .offcanvas__info-2 .mean-container .mean-nav ul li li a { font-size: 17px !important; } } .style-offcanvas-2 .offcanvas__info-2 .mean-container .mean-nav ul li li a:hover { color: var(--theme) !important; } .style-offcanvas-2 .offcanvas__info-2.info-open { transform: translateX(0); opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .style-offcanvas-2 .offcanvas__info-2 .offcanvas__wrapper { padding: 30px; } .offcanvas__info { background: var(--white) none repeat scroll 0 0; border-left: 2px solid var(--theme); position: fixed; right: 0; top: 0; width: 450px; height: 100%; -webkit-transform: translateX(calc(100% + 80px)); -moz-transform: translateX(calc(100% + 80px)); -ms-transform: translateX(calc(100% + 80px)); -o-transform: translateX(calc(100% + 80px)); transform: translateX(calc(100% + 80px)); -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; z-index: 9999999; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } .offcanvas__info::-webkit-scrollbar { display: none; } .offcanvas__info.style-2 { left: 0; transform: translateX(calc(-100% - 80px)); right: initial; width: 450px; } @media (max-width: 1399px) { .offcanvas__info.style-2 { right: 0; left: auto; transform: translateX(calc(100% + 80px)); width: 350px; } .offcanvas__info.style-2.info-open { transform: translateX(0); } } .offcanvas__info.info-open { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .offcanvas__wrapper { position: relative; height: 100%; padding: 30px 30px; } .offcanvas__wrapper .offcanvas__content .text { color: var(--black); } .offcanvas__wrapper .offcanvas__content .sideber-image { margin-top: 50px; margin-bottom: 30px; } @media (max-width: 1399px) { .offcanvas__wrapper .offcanvas__content .sideber-image { margin-top: 30px; } } .offcanvas__wrapper .offcanvas__content .sideber-image img { width: 100%; height: 100%; border-radius: 16px; } .offcanvas__wrapper .offcanvas__content .offcanvas__close { width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 50%; background-color: var(--theme); position: relative; z-index: 9; cursor: pointer; } .offcanvas__wrapper .offcanvas__content .offcanvas__close i { color: var(--white); } .offcanvas__wrapper .offcanvas__content .offcanvas__contact { margin-top: 20px; } @media (max-width: 575px) { .offcanvas__wrapper .offcanvas__content .offcanvas__contact { display: block; } } @media (max-width: 575px) { .offcanvas__wrapper .offcanvas__content .offcanvas__contact.style-cont { display: block !important; } } .offcanvas__wrapper .offcanvas__content .offcanvas__contact h4 { margin-bottom: 20px; } .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul { margin-top: 0; } @media (max-width: 575px) { .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul { display: none; } } .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li { font-size: 20px; font-weight: 600; text-transform: capitalize; } @media (max-width: 575px) { .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li { font-size: 14px; } } .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li:not(:last-child) { margin-bottom: 30px; } @media (max-width: 575px) { .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li:not(:last-child) { margin-bottom: 20px; } } .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li a { color: var(--black); } .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon { margin-right: 20px; } .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon i { color: var(--theme); } .offcanvas__wrapper .offcanvas__content .offcanvas__contact span { text-transform: initial; } .offcanvas__wrapper .offcanvas__content .offcanvas__contact .header-button .theme-btn { width: 100%; padding: 20px 40px; text-transform: capitalize !important; } .offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon { margin-top: 30px; gap: 10px; } .offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a { width: 45px; height: 45px; line-height: 45px; border-radius: 100%; text-align: center; font-size: 16px; display: block; background: transparent; color: var(--header); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; text-align: center; border: 1px solid rgba(10, 37, 64, 0.2); } .offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a:hover { background-color: var(--theme); color: var(--white); border: 1px solid var(--theme); } .offcanvas__overlay { position: fixed; height: 100%; width: 100%; background: #151515; z-index: 900; top: 0; opacity: 0; visibility: hidden; right: 0; } .offcanvas__overlay.overlay-open { opacity: 0.8; visibility: visible; } @media (max-width: 450px) { .offcanvas__info { width: 300px; } } @media (max-width: 575px) { .offcanvas__wrapper { padding: 20px; } } .error-wrapper { border-top: 1px solid rgba(10, 37, 64, 0.2); padding-top: 60px; } @media (max-width: 1399px) { .error-wrapper { padding-top: 30px; } } .error-wrapper .error-items { text-align: center; position: relative; } .error-wrapper .error-items .error-image { margin-bottom: 30px; } .error-wrapper .error-items .error-image img { width: 100%; height: 100%; } .error-wrapper .error-items h2 { font-size: 72px; font-weight: 500; letter-spacing: -2px; margin-bottom: 15px; } @media (max-width: 575px) { .error-wrapper .error-items h2 { font-size: 30px; } } .error-wrapper .error-items p { max-width: 722px; margin: 0 auto 40px; } @media (max-width: 767px) { .error-wrapper .error-items p { margin-bottom: 30px; } } .footer-section { position: relative; z-index: 9; } .footer-section::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(180deg, #0A2540 0%, rgba(10, 37, 64, 0.7) 100%); z-index: -1; } .footer-section .top-shape { position: absolute; top: 0; left: 0; right: 0; } @media (max-width: 1399px) { .footer-section .top-shape { top: -10px; } } .footer-section .top-shape img { width: 100%; height: 100%; } .footer-widget-wrapper { padding: 60px 0 0px; } @media (max-width: 1399px) { .footer-widget-wrapper { } } @media (max-width: 991px) { .footer-widget-wrapper { padding: 90px 0 40px; } } .footer-widget-wrapper .footer-text-item span a:hover { color: var(--theme) !important; -webkit-text-stroke-color: var(--theme); } @media (max-width: 1399px) { .footer-widget-wrapper .footer-text-item span { font-size: 75px; } } @media (max-width: 991px) { .footer-widget-wrapper .footer-text-item span { font-size: 90px; } } @media (max-width: 767px) { .footer-widget-wrapper .footer-text-item span { font-size: 60px; } } @media (max-width: 575px) { .footer-widget-wrapper .footer-text-item span { font-size: 50px; } } .footer-widget-wrapper .footer-box-item { border-radius: 20px; display: flex; align-items: start; justify-content: space-between; position: relative; z-index: 9; gap: 40px; } .footer-widget-wrapper .footer-box-item .single-footer-widget:nth-child(2){ width: max-content; flex: none; } .footer-widget-wrapper .footer-box-item .single-footer-widget{flex:1} .footer-widget-wrapper .footer-box-item .single-footer-widget .fle_two {grid-template-columns: 1fr 1fr;display: grid;gap: 0 15px;} .footer-widget-wrapper .footer-box-item .single-footer-widget .fle_two li{width: 50%;text-wrap-mode: nowrap;} @media (max-width: 1399px) { .footer-widget-wrapper .footer-box-item { } } @media (max-width: 575px) { .footer-widget-wrapper .footer-box-item { padding: 0; } } .footer-widget-wrapper .footer-box-item .single-footer-widget .widget-title { margin-bottom: 15px; } .footer-widget-wrapper .footer-box-item .single-footer-widget .con_ftr {} .footer-widget-wrapper .footer-box-item .single-footer-widget .con_ftr ul {} .footer-widget-wrapper .footer-box-item .single-footer-widget .con_ftr ul li { padding-left: 30px; position: relative; color: #fff; font-size: 14px; } .footer-widget-wrapper .footer-box-item .single-footer-widget .con_ftr ul li a { color: #fff; } .footer-widget-wrapper .footer-box-item .single-footer-widget .con_ftr ul li svg { color: var(--yellow); position: absolute; left: 0; top: 5px; width: 25px; height: 20px; } .footer-widget-wrapper .footer-box-item .single-footer-widget .widget-title h3 { color: var(--white); font-size: 20px; position: relative; margin-bottom: 15px; } .footer-widget-wrapper .footer-box-item .single-footer-widget .widget-title h3:after {content:'';position: absolute;width: 35px;height: 2px;background: var(--yellow);left: 0;bottom: -3px;z-index: 3;} .footer-widget-wrapper .footer-box-item .single-footer-widget .list-area li { font-weight: 500; } .footer-widget-wrapper .footer-box-item .single-footer-widget .list-area li a { color: rgb(255, 255, 255); font-size: 14px; } .footer-widget-wrapper .footer-box-item .single-footer-widget .list-area li a:hover { color: var(--theme); margin-left: 4px; } .footer-widget-wrapper .footer-box-item .single-footer-widget .list-area li:not(:last-child) { margin-bottom: 6px; } .footer-widget-wrapper .footer-box-item .single-footer-widget span { font-weight: 500; color: var(--white); display: inline-block; margin-bottom: 10px; } .footer-widget-wrapper .footer-box-item .single-footer-widget span a { color: var(--white); } .footer-widget-wrapper .footer-bottom { text-align: center; } .footer-widget-wrapper .footer-bottom p a, .footer-widget-wrapper .footer-bottom p { color: var(--white); font-weight: 500; } .footer-section-2 { position: relative; z-index: 9; } .footer-section-2::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; z-index: -1; background: linear-gradient(180deg, rgba(10, 37, 64, 0.5) 0%, #0A2540 100%); } .footer-section-2 .footer-shape { position: absolute; top: 210px; right: 530px; z-index: -1; max-width: 634px; z-index: 9; } @media (max-width: 1399px) { .footer-section-2 .footer-shape { display: none; } } .footer-section-2 .footer-shape img { width: 100%; height: 100%; } .footer-widget-wrapper-2 { padding-bottom: 40px; } .footer-widget-wrapper-2 .footer-text { margin-bottom: 30px; margin-top: 130px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 160px; } @media (max-width: 1399px) { .footer-widget-wrapper-2 .footer-text { margin-bottom: 30px; padding-bottom: 100px; } } @media (max-width: 991px) { .footer-widget-wrapper-2 .footer-text { margin-bottom: 30px; padding-bottom: 90px; margin-top: 80px; } } @media (max-width: 767px) { .footer-widget-wrapper-2 .footer-text { margin-bottom: 15px; margin-top: 60px; padding-bottom: 50px; } } .footer-widget-wrapper-2 .footer-text h2 { color: var(--white); font-size: 310px; font-weight: 800; text-transform: uppercase; text-align: center; line-height: 32%; letter-spacing: 0.19em; position: relative; } .footer-widget-wrapper-2 .footer-text h2 span { display: inline-block; transform: translateY(120px); opacity: 0; transition: all 0.8s ease; } .footer-widget-wrapper-2 .footer-text h2 span.show { transform: translateY(0); opacity: 1; } @media (max-width: 1399px) { .footer-widget-wrapper-2 .footer-text h2 { font-size: 205px; } } @media (max-width: 991px) { .footer-widget-wrapper-2 .footer-text h2 { font-size: 150px; } } @media (max-width: 767px) { .footer-widget-wrapper-2 .footer-text h2 { font-size: 100px; } } @media (max-width: 575px) { .footer-widget-wrapper-2 .footer-text h2 { font-size: 70px; } } .footer-widget-wrapper-2 .single-footer-widget { margin-top: 30px; } .footer-widget-wrapper-2 .single-footer-widget .widget-title { margin-bottom: 30px; } .footer-widget-wrapper-2 .single-footer-widget .widget-title h3 { color: var(--white); font-size: 20px; font-weight: 700; } .footer-widget-wrapper-2 .single-footer-widget .footer-content p { max-width: 295px; color: rgba(255, 255, 255, 0.6); } .footer-widget-wrapper-2 .single-footer-widget .footer-content .social-icon { display: flex; align-items: center; gap: 16px; margin-top: 30px; } .footer-widget-wrapper-2 .single-footer-widget .footer-content .social-icon a { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); color: var(--white); font-size: 16px; } .footer-widget-wrapper-2 .single-footer-widget .footer-content .social-icon a:hover { background-color: var(--theme); color: var(--white); border: 1px solid var(--theme); } .footer-widget-wrapper-2 .single-footer-widget .footer-content .talk-btn { color: var(--white); font-size: 16px; font-weight: 700; text-decoration: underline; display: inline-block; margin-top: 15px; text-transform: capitalize; transition: all 0.4s ease-in-out; } .footer-widget-wrapper-2 .single-footer-widget .footer-content .talk-btn:hover { color: var(--theme); } .footer-widget-wrapper-2 .single-footer-widget .list-area li { font-weight: 500; text-transform: capitalize; } .footer-widget-wrapper-2 .single-footer-widget .list-area li a { color: rgba(255, 255, 255, 0.6); } .footer-widget-wrapper-2 .single-footer-widget .list-area li a:hover { color: var(--theme); margin-left: 4px; } .footer-widget-wrapper-2 .single-footer-widget .list-area li:not(:last-child) { margin-bottom: 15px; } .footer-widget-wrapper-2 .single-footer-widget .contact-content span { color: rgba(255, 255, 255, 0.6); display: inline-block; margin-bottom: 30px; } @media (max-width: 1399px) { .footer-widget-wrapper-2 .single-footer-widget .contact-content span { margin-bottom: 10px; } } .footer-widget-wrapper-2 .single-footer-widget .contact-content span a { color: rgba(255, 255, 255, 0.6); } .footer-widget-wrapper-2 .single-footer-widget .contact-content h4 { font-size: 16px; font-weight: 400; color: rgb(255, 255, 255); margin-top: 50px; } @media (max-width: 1399px) { .footer-widget-wrapper-2 .single-footer-widget .contact-content h4 { margin-top: 15px; } } .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 { margin-bottom: 30px; margin-top: 130px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 60px; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 1399px) { .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 { margin-bottom: 30px; padding-bottom: 60px; flex-wrap: wrap; gap: 30px; } } @media (max-width: 991px) { .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 { gap: 50px; padding-bottom: 30px; } } @media (max-width: 575px) { .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 { gap: 30px; } } .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 h2 { color: var(--white); font-size: 140px; font-weight: 800; text-transform: uppercase; text-align: center; line-height: 32%; letter-spacing: 0.19em; position: relative; } .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 h2 span { display: inline-block; transform: translateY(120px); opacity: 0; transition: all 0.8s ease; } .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 h2 span.show { transform: translateY(0); opacity: 1; } @media (max-width: 1399px) { .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 h2 { font-size: 90px; } } @media (max-width: 991px) { .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 h2 { font-size: 100px; } } @media (max-width: 767px) { .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 h2 { font-size: 60px; } } @media (max-width: 575px) { .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 h2 { font-size: 55px; } } .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 .social-icon { display: flex; align-items: center; gap: 16px; border-left: 1px solid rgba(255, 255, 255, 0.2); padding-left: 100px; height: 104px; } @media (max-width: 1399px) { .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 .social-icon { height: initial; padding-left: 0; border-left: none; } } .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 .social-icon a { width: 72px; height: 72px; line-height: 72px; text-align: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); color: var(--white); font-size: 28px; } @media (max-width: 1399px) { .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 .social-icon a { width: 52px; height: 52px; line-height: 52px; } } .footer-widget-wrapper-2.style-wrapper-3 .footer-text-2 .social-icon a:hover { background-color: var(--theme); color: var(--white); border: 1px solid var(--theme); transform: translateY(-5px); } .footer-widget-wrapper-2.style-wrapper-3 .footer-image { margin-bottom: 0px; margin-top: 130px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 30px; } .footer-widget-wrapper-2.style-wrapper-3 .footer-image img { width: 100%; height: 100%; } .footer-bottom-2 { text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 30px 0; } .footer-bottom-2 p { color: rgba(255, 255, 255, 0.6); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; } .footer-bottom-2.style-2 { margin-bottom: 80px; } .footer-bottom-2.style-3 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 60px; } @media (max-width: 1399px) { .footer-bottom-2.style-3 { flex-wrap: wrap; gap: 20px; margin-bottom: 0; justify-content: center; } } .footer-bottom { text-align: center; background: var(--theme); padding: 8px 0; margin-top: 60px; } .footer-bottom p { color: rgb(255 255 255); font-weight: 500; /* letter-spacing: 0.2em; */ /* text-transform: uppercase; */ } .footer-bottom.style-2 { margin-bottom: 80px; } .footer-section-3 { position: relative; z-index: 9; } .footer-section-3::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; z-index: -1; background: linear-gradient(180deg, rgba(10, 37, 64, 0.5) 0%, #0A2540 100%); } .footer-section-3 .footer-shape { position: absolute; top: 0; left: 0; right: 0; } @media (max-width: 1399px) { .footer-section-3 .footer-shape { top: -10px; } } .footer-section-3 .footer-shape img { width: 100%; height: 100%; } .footer-section-3.style-footer::before { display: none; } .footer-section-3.style-footer { background-color: rgb(10, 37, 64); } .section-title { position: relative; z-index: 99; margin-bottom: 30px; } @media (max-width: 767px) { .section-title { margin-bottom: 0; } .section-title br { display: none; } } .section-title .sub-title { font-size: 16px; font-weight: 600; color: var(--theme); display: inline-block; line-height: 1; margin-bottom: 10px; font-family: "Plus Jakarta Sans", sans-serif; text-transform: capitalize; border: 1px solid; padding: 8px 13px; border-radius: 35px; } .section-title h2 { text-transform: capitalize; } .section-title h2 .line { color: rgb(184, 184, 184); display: block; } .section-title h2 .exp-br { display: block; } @media (max-width: 1399px) { .section-title h2 .exp-br { display: none; } } @media (max-width: 1399px) { .section-title h2 br { display: none; } } .section-title.style-text { margin-bottom: 100px; } @media (max-width: 1399px) { .section-title.style-text { margin-bottom: 30px; } } .section-title.style-text h2 { font-size: 110px; } @media (max-width: 1399px) { .section-title.style-text h2 { font-size: 80px; } } @media (max-width: 1199px) { .section-title.style-text h2 { font-size: 70px; } } @media (max-width: 991px) { .section-title.style-text h2 { font-size: 60px; } } @media (max-width: 767px) { .section-title.style-text h2 { font-size: 50px; } } @media (max-width: 575px) { .section-title.style-text h2 { font-size: 28px; } .section-title.style-text h2 br { display: none !important; } } @media (max-width: 470px) { .section-title.style-text h2 { font-size: 28px; } .section-title.style-text h2 br { display: none !important; } } .section-title.style-text h2 span { margin-left: 280px; display: inline-block; } @media (max-width: 1399px) { .section-title.style-text h2 span { margin-left: 0; } } .section-title-area { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 9; margin-bottom: 30px; } @media (max-width: 767px) { .section-title-area { margin-bottom: 0; } .section-title-area br { display: none; } } .section-title-area p { max-width: 477px; color: rgb(70, 90, 110); } @media (max-width: 1399px) { .section-title-area p br { display: none; } } .section-title-area .section-title { margin-bottom: 0; } @media (max-width: 991px) { .section-title-area { flex-wrap: wrap; gap: 30px; } } .center { text-align: center; margin: 0 auto; } .section-bg { background-color: var(--bg); } .header-bg-2 { background-color: rgb(10, 37, 64); } .section-padding { padding: 60px 0; } @media (max-width: 1199px) { .section-padding { padding: 100px 0; } } /*--------------------------------------- 05. Sections ---------------------------------------*/ @media (max-width: 1399px) { .about-wrapper-1 { padding-bottom: 0; } } .about-wrapper-1 .about-left-item .about-image { position: relative; margin-bottom: 65px; max-width: 660px; } @media (max-width: 1399px) { .about-wrapper-1 .about-left-item .about-image { } } .about-wrapper-1 .about-left-item .about-image .sea-man { bottom: 0; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0%; -webkit-animation: spin 15s linear infinite; -moz-animation: spin 15s linear infinite; animation: spin 15s linear infinite; z-index: -1; } @media (max-width: 1399px) { .about-wrapper-1 .about-left-item .about-image .sea-man { } } @media (max-width: 991px) { .about-wrapper-1 .about-left-item .about-image .sea-man { /* left: 150px; */ /* max-width: 329px; */ } } @media (max-width: 575px) { .about-wrapper-1 .about-left-item .about-image .sea-man { /* left: 90px; */ /* max-width: 180px; */ } } .about-wrapper-1 .about-left-item .about-image .sea-man img { width: 100%; height: 100%; } @media (max-width: 1399px) { .about-wrapper-1 .about-left-item .about-image .sea-man img { width: 100%; height: 100%; } } .about-wrapper-1 .about-left-item .about-image .line-shape { position: absolute; z-index: -1; left: -30px; top: -30px; } @media (max-width: 1600px) { .about-wrapper-1 .about-left-item .about-image .line-shape { left: -18px; } } @media (max-width: 1399px) { .about-wrapper-1 .about-left-item .about-image .line-shape { display: none; } } .about-wrapper-1 .about-left-item .about-image img { width: 100%; height: 100%; border-radius: 30px; } .about-wrapper-1 .about-left-item h2 { font-size: 16px; font-weight: 600; color: var(--theme); } .about-wrapper-1 .about-left-item p { font-size: 16px; color: rgb(70, 90, 110); max-width: 626px; margin-top: 40px; } @media (max-width: 1399px) { .about-wrapper-1 .about-left-item p { margin-top: 30px; } } .about-wrapper-1 .about-left-item .info-item { display: flex; align-items: center; gap: 10px; margin-top: 40px; } @media (max-width: 1399px) { .about-wrapper-1 .about-left-item .info-item { margin-top: 30px; } } .about-wrapper-1 .about-left-item .info-item .group-image-item { display: flex; align-items: center; } .about-wrapper-1 .about-left-item .info-item .group-image-item .group-image img { margin-left: 0; width: initial; height: initial; border: 2px solid var(--white); border-radius: 100px; } .about-wrapper-1 .about-left-item .info-item .group-image-item .group-image.style-2 { margin-left: -20px; } .about-wrapper-1 .about-left-item .info-item .group-image-item .icon { width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 100px; color: var(--white); border: 2px solid var(--white); margin-left: -20px; background-color: var(--theme); position: relative; } .about-wrapper-1 .about-left-item .info-item .group-image-item .icon h3 { color: var(--white); font-size: 16px; font-weight: 800; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .about-wrapper-1 .about-left-item .info-item p { color: rgb(10, 37, 64); font-weight: 600; margin-top: 0; } .about-wrapper-1 .about-content .text { margin-top: 15px; max-width: 690px; color: rgb(70, 90, 110); margin-bottom: 40px; } @media (max-width: 1399px) { .about-wrapper-1 .about-content .text { margin-bottom: 30px; } } .about-wrapper-1 .about-content .about-image-2 { margin-top: 60px; } @media (max-width: 1399px) { .about-wrapper-1 .about-content .about-image-2 { margin-top: 30px; } } .about-wrapper-1 .about-content .about-image-2 { max-width: 690px; -webkit-mask: url("data:image/svg+xml;utf8,            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 690 570'>            <path d='M2.53082 35.8633C1.21575 17.1235 17.2515 1.79925 35.9123 3.96282L169.045 19.3985C171.341 19.6647 173.659 19.6646 175.955 19.3985L341.545 0.199664C343.841 -0.0665061 346.159 -0.0665051 348.455 0.199665L514.045 19.3985C516.341 19.6647 518.659 19.6646 520.955 19.3985L654.088 3.96282C672.749 1.79924 688.784 17.1235 687.469 35.8633L680 142.299L690 284.799L680 427.299L687.612 535.775C688.879 553.819 674.008 568.872 655.95 567.825L517.5 559.799L345 569.799L172.5 559.799L34.0503 567.825C15.9922 568.872 1.12138 553.819 2.38763 535.775L10 427.299L0 284.799L10 142.299L2.53082 35.8633Z' fill='white'/>            </svg>") no-repeat center/cover; mask: url("data:image/svg+xml;utf8,            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 690 570'>            <path d='M2.53082 35.8633C1.21575 17.1235 17.2515 1.79925 35.9123 3.96282L169.045 19.3985C171.341 19.6647 173.659 19.6646 175.955 19.3985L341.545 0.199664C343.841 -0.0665061 346.159 -0.0665051 348.455 0.199665L514.045 19.3985C516.341 19.6647 518.659 19.6646 520.955 19.3985L654.088 3.96282C672.749 1.79924 688.784 17.1235 687.469 35.8633L680 142.299L690 284.799L680 427.299L687.612 535.775C688.879 553.819 674.008 568.872 655.95 567.825L517.5 559.799L345 569.799L172.5 559.799L34.0503 567.825C15.9922 568.872 1.12138 553.819 2.38763 535.775L10 427.299L0 284.799L10 142.299L2.53082 35.8633Z' fill='white'/>            </svg>") no-repeat center/cover; } .about-wrapper-1 .about-content .about-image-2 img { width: 100%; height: 100%; transition: all 0.6s ease; transform-origin: center center; transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1); } .about-wrapper-1 .about-content .about-image-2:hover img { transform: perspective(400px) rotateX(0.09deg) rotateY(0) scaleX(1.1) scaleY(1.1); } .about-section-1 { position: relative; } .about-wrapper-2 .about-image-item .about-image { border-radius: 20px; overflow: hidden; } .about-wrapper-2 .about-image-item .about-image img { width: 100%; height: 100%; border-radius: 20px; } .about-wrapper-2 .about-image-item .counts-item { display: flex; align-items: center; gap: 30px; margin-top: 60px; } @media (max-width: 1399px) { .about-wrapper-2 .about-image-item .counts-item { margin-top: 30px; gap: 0px; } } @media (max-width: 575px) { .about-wrapper-2 .about-image-item .counts-item { gap: 30px; } } .about-wrapper-2 .about-image-item .counts-item .content { min-width: 185px; } @media (max-width: 575px) { .about-wrapper-2 .about-image-item .counts-item .content { min-width: initial; } } .about-wrapper-2 .about-image-item .counts-item .content h2 { font-weight: 700; color: rgb(15, 185, 177); line-height: 90%; } .about-wrapper-2 .about-image-item .counts-item .content h2 span { font-size: 64px; font-weight: 700; color: rgb(15, 185, 177); } @media (max-width: 1399px) { .about-wrapper-2 .about-image-item .counts-item .content h2 span { font-size: 50px; } } .about-wrapper-2 .about-image-item .counts-item .content span { font-size: 20px; font-weight: 600; color: rgb(10, 37, 64); display: inline-block; margin-top: 5px; } .about-wrapper-2 .about-image-item .counts-item .content.style-2 { border-left: 1px solid rgba(0, 0, 0, 0.2); padding-left: 30px; } .about-wrapper-2 .about-content { margin-left: 30px; } @media (max-width: 1399px) { .about-wrapper-2 .about-content { margin-left: 0; } } .about-wrapper-2 .about-content .section-title h2 { line-height: 110%; } .about-wrapper-2 .about-content .text { margin-top: 35px; max-width: 660px; color: rgb(70, 90, 110); margin-bottom: 30px; border-top: 1px solid rgba(10, 37, 64, 0.2); padding-top: 30px; } @media (max-width: 1399px) { .about-wrapper-2 .about-content .text { margin-bottom: 30px; } } .about-wrapper-2 .about-content .about-image-2 { position: relative; max-width: 330px; margin-left: auto; text-align: right; margin-top: 25px; border-radius: 20px; overflow: hidden; } @media (max-width: 1399px) { .about-wrapper-2 .about-content .about-image-2 { margin-left: initial; text-align: left; } } @media (max-width: 575px) { .about-wrapper-2 .about-content .about-image-2 { max-width: 100%; } } .about-wrapper-2 .about-content .about-image-2 .content { position: absolute; top: 40px; left: 40px; } @media (max-width: 1399px) { .about-wrapper-2 .about-content .about-image-2 .content { left: 20px; top: 20px; } } .about-wrapper-2 .about-content .about-image-2 .content h2 { color: var(--white); font-weight: 700; text-align-last: left; } @media (max-width: 575px) { .about-wrapper-2 .about-content .about-image-2 .content h2 { font-size: 50px; } } .about-wrapper-2 .about-content .about-image-2 .content p { color: var(--white); font-size: 16px; font-weight: 600; } .about-wrapper-2 .about-content .about-image-2 img { width: 100%; height: 100%; border-radius: 20px; } .about-wrapper-3 .about-left-content span { font-size: 20px; font-weight: 700; color: rgb(10, 37, 64); } .about-wrapper-3 .about-left-content .about-list-item { display: flex; align-items: center; gap: 30px; margin-top: 30px; border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 30px; margin-bottom: 15px; max-width: 570px; width: 100%; } @media (max-width: 1399px) { .about-wrapper-3 .about-left-content .about-list-item { flex-wrap: wrap; gap: 20px; margin-top: 15px; } } .about-wrapper-3 .about-left-content .about-list-item .list li { color: rgb(10, 37, 64); font-weight: 600; } .about-wrapper-3 .about-left-content .about-list-item .list li:not(:last-child) { margin-bottom: 12px; } .about-wrapper-3 .about-left-content .about-list-item .list li i { color: rgb(15, 185, 177); margin-right: 5px; } .about-wrapper-3 .about-left-content h2 { font-weight: 200; color: rgb(70, 90, 110); } .about-wrapper-3 .about-left-content h2 span { font-size: 64px; color: rgb(70, 90, 110); } .about-wrapper-3 .about-left-content p { color: rgb(70, 90, 110); letter-spacing: 136%; font-weight: 600; text-transform: uppercase; } @media (max-width: 1399px) { .about-wrapper-3 .about-left-content p { letter-spacing: initial; } } .about-wrapper-3 .about-content { margin-bottom: 60px; } @media (max-width: 1399px) { .about-wrapper-3 .about-content { margin-bottom: 30px; } } .about-wrapper-3 .about-content .text { color: rgb(70, 90, 110); font-weight: 400; margin-top: 20px; } .about-wrapper-3 .about-image { margin: 0 auto; text-align: center; transition: all 0.4s ease-in-out; position: relative; border-radius: 20px; overflow: hidden; } .about-wrapper-3 .about-image img { width: 100%; height: 100%; border-radius: 20px; display: block; } .about-wrapper-3 .about-image .video-btn { width: 90px; height: 90px; line-height: 90px; border: 1px solid rgb(255, 255, 255); color: var(--white); display: inline-block; border-radius: 100px; text-align: center; font-size: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 991px) { .about-wrapper-3 .about-image .video-btn { width: 60px; height: 60px; line-height: 60px; font-size: 20px; } } .about-wrapper-4 .about-left-items-4 .about-image { margin-bottom: 50px; } @media (max-width: 1399px) { .about-wrapper-4 .about-left-items-4 .about-image { margin-bottom: 30px; } } .about-wrapper-4 .about-left-items-4 .about-image img { width: 100%; height: 100%; border-radius: 20px; } .about-wrapper-4 .about-left-items-4 span { font-size: 20px; font-weight: 700; color: rgb(10, 37, 64); } .about-wrapper-4 .about-left-items-4 .about-list-item { display: flex; align-items: center; gap: 30px; margin-top: 25px; border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 30px; margin-bottom: 30px; max-width: 570px; width: 100%; } @media (max-width: 1399px) { .about-wrapper-4 .about-left-items-4 .about-list-item { flex-wrap: wrap; gap: 20px; margin-top: 15px; } } .about-wrapper-4 .about-left-items-4 .about-list-item .list li { color: rgb(10, 37, 64); font-weight: 600; } .about-wrapper-4 .about-left-items-4 .about-list-item .list li:not(:last-child) { margin-bottom: 12px; } .about-wrapper-4 .about-left-items-4 .about-list-item .list li i { color: rgb(15, 185, 177); margin-right: 5px; } .about-wrapper-4 .about-left-items-4 .theme-btn .txt { font-size: 16px !important; font-weight: 700 !important; } .about-wrapper-4 .about-right-item-4 .about-image { margin-bottom: 50px; } @media (max-width: 1399px) { .about-wrapper-4 .about-right-item-4 .about-image { margin-bottom: 30px; } } .about-wrapper-4 .about-right-item-4 .about-image img { width: 100%; height: 100%; border-radius: 20px; } .about-wrapper-4 .about-right-item-4 span { color: var(--theme); } .about-wrapper-4 .about-right-item-4 p { } .about-wrapper-4 .about-right-item-4 .image-item { display: flex; align-items: center; gap: 10px; } .about-wrapper-4 .about-right-item-4 .image-item span { font-weight: 600; color: rgb(10, 37, 64); } .contact-from-box { border-radius: 20px; padding: 60px; background-color: var(--white); position: relative; overflow: hidden; } @media (max-width: 1399px) { .contact-from-box { padding: 30px; } } .contact-from-box .shape { position: absolute; right: 0; bottom: 0; } @media (max-width: 1399px) { .contact-from-box .shape { display: none; } } .contact-from-box .text { max-width: 570px; color: rgb(70, 90, 110); margin-top: 20px; margin-bottom: 40px; } .contact-from-box .form-clt input, .contact-from-box .form-clt textarea { width: 100%; outline: none; background-color: transparent; border: 1px solid rgba(70, 90, 110, 0.2); padding: 16px 20px; font-weight: 400; font-size: 14px; border-radius: 10px; color: rgb(70, 90, 110); text-transform: capitalize; } .contact-from-box .form-clt input::placeholder, .contact-from-box .form-clt textarea::placeholder { color: rgb(70, 90, 110); } .contact-from-box .form-clt textarea { padding-bottom: 80px; resize: none; } .contact-bg-section { margin: 0 60px; border-radius: 20px; } @media (max-width: 1600px) { .contact-bg-section { margin: 0 30px; } } @media (max-width: 575px) { .contact-bg-section { margin: 0 15px; } } .contact-info-box { background-color: var(--bg); padding: 40px 30px; border-radius: 8px; display: flex; align-items: center; gap: 15px; position: relative; z-index: 9; } .contact-info-box .icon { max-width: 80px; width: 100%; height: 80px; line-height: 80px; border-radius: 50%; text-align: center; background-color: var(--theme); color: var(--white); font-size: 25px; transition: all 0.4s ease-in-out; } .contact-info-box .content h4 { font-size: 20px; color: var(--header); font-weight: 500; text-transform: capitalize; margin-bottom: 5px; } .contact-info-box .content p { line-height: 162.5%; } .contact-info-box .content p a { color: var(--text); } .contact-info-box::before { position: absolute; content: ""; left: 0px; top: 0px; right: 0px; bottom: 0px; opacity: 0; -webkit-transform: scale(1, 0.3); transform: scale(1, 0.3); background-color: var(--theme); -webkit-transition: all 500ms ease; transition: all 500ms ease; z-index: -1; border-radius: 8px; } .contact-info-box:hover::before { opacity: 1; transform: scale(1, 1); } .contact-info-box:hover .icon { background-color: var(--header); } .contact-info-box:hover .icon i { -webkit-animation: gelatine 0.6s; animation: gelatine 0.6s; } .contact-info-box:hover .content h4, .contact-info-box:hover .content p { color: var(--white); } .contact-info-box:hover .content p a { color: var(--white); } .contact-information-box { background-color: rgb(245, 247, 250); border-radius: 20px; padding: 60px; } @media (max-width: 1399px) { .contact-information-box { padding: 30px; } } .contact-information-box .information-box { background-color: rgb(15, 185, 177); padding: 40px 40px; border-radius: 10px; position: relative; } @media (max-width: 1399px) { .contact-information-box .information-box { padding: 30px; } } .contact-information-box .information-box h2 { font-size: 30px; font-weight: 700; } @media (max-width: 1399px) { .contact-information-box .information-box h2 { font-size: 26px; } } @media (max-width: 575px) { .contact-information-box .information-box h2 { font-size: 23px; } } .contact-information-box .information-box .shape { position: absolute; right: 0; bottom: 0; } @media (max-width: 1399px) { .contact-information-box .information-box .shape { display: none; } } .contact-information-box .information-box .shape img { width: 100%; height: 100%; } .contact-information-box .information-box h2 { color: var(--white); } .contact-information-box .information-box p { color: rgb(255, 255, 255); max-width: 451px; margin-bottom: 30px; margin-top: 10px; } .contact-information-box .information-box .icon-item { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; } .contact-information-box .information-box .icon-item .cont {flex:1} @media (max-width: 1399px) { .contact-information-box .information-box .icon-item { flex-wrap: wrap; gap: 10px; } } .contact-information-box .information-box .icon-item .icon { width: 54px; height: 54px; line-height: 54px; text-align: center; border-radius: 100px; background-color: var(--white); } .contact-information-box .information-box .icon-item span { font-size: 18px; font-weight: 700; color: rgb(255, 255, 255); text-transform: none; } .contact-information-box .information-box .icon-item span a { color: rgb(255, 255, 255); } .contact-information-box .contact-form-box { border-radius: 10px; background-color: rgb(255, 255, 255); padding: 40px; } @media (max-width: 1399px) { .contact-information-box .contact-form-box { padding: 30px; } } .contact-information-box .contact-form-box .form-clt span { font-weight: 600; color: rgb(10, 37, 64); display: inline-block; margin-bottom: 8px; } .contact-information-box .contact-form-box .form-clt input, .contact-information-box .contact-form-box .form-clt textarea { outline: none; width: 100%; color: rgb(70, 90, 110); padding: 10px 16px; background: #F6F6F6; border: 1px solid #E2E2E2; border-radius: 5px; text-transform: capitalize; } .contact-information-box .contact-form-box .form-clt input::placeholder, .contact-information-box .contact-form-box .form-clt textarea::placeholder { color: rgb(207 207 207); font-size:15px } .contact-information-box .contact-form-box .form-clt textarea { padding-bottom: 80px; } .contact-map iframe { width: 100%; height: 746px; border-radius: 12px; } .cta-wrapper-2 { position: relative; z-index: 9; text-align: center; padding: 80px 0; position: relative; } .cta-wrapper-2 .cta-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .cta-wrapper-2 .cta-image img { width: 100%; height: 100%; border-radius: 60px; } .cta-wrapper-2 .cta-content { position: relative; } .cta-wrapper-2 .cta-content h2 { text-transform: uppercase; color: var(--white); letter-spacing: 0.2em; font-weight: 400; } @media (max-width: 1399px) { .cta-wrapper-2 .cta-content h2 { font-size: 44px; letter-spacing: initial; } } @media (max-width: 1199px) { .cta-wrapper-2 .cta-content h2 { font-size: 40px; } } @media (max-width: 991px) { .cta-wrapper-2 .cta-content h2 { font-size: 36px; } } @media (max-width: 767px) { .cta-wrapper-2 .cta-content h2 { font-size: 30px; } } @media (max-width: 575px) { .cta-wrapper-2 .cta-content h2 { font-size: 26px; } } .cta-wrapper-2 .cta-content .search-widget { margin-top: 60px; } @media (max-width: 1399px) { .cta-wrapper-2 .cta-content .search-widget { margin-top: 30px; } } .cta-wrapper-2 .cta-content .search-widget form { width: 100%; position: relative; max-width: 728px; margin: 0 auto; } @media (max-width: 991px) { .cta-wrapper-2 .cta-content .search-widget form { max-width: 500px; } } @media (max-width: 575px) { .cta-wrapper-2 .cta-content .search-widget form { max-width: 280px; } } .cta-wrapper-2 .cta-content .search-widget form input { font-size: 16px; font-weight: 600; padding: 23px; width: 100%; border: none; color: rgba(255, 255, 255, 0.6); background: rgba(10, 37, 64, 0.6); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 15px; max-width: 728px; padding-right: 40px; text-transform: capitalize; } @media (max-width: 1399px) { .cta-wrapper-2 .cta-content .search-widget form input { padding: 16px; } } @media (max-width: 991px) { .cta-wrapper-2 .cta-content .search-widget form input { max-width: 500px; padding: 16px; } } @media (max-width: 575px) { .cta-wrapper-2 .cta-content .search-widget form input { max-width: 280px; } } .cta-wrapper-2 .cta-content .search-widget form input::placeholder { color: rgba(255, 255, 255, 0.6); } .cta-wrapper-2 .cta-content .search-widget form button { position: absolute; right: 23px; top: 23px; color: rgb(110, 231, 231); } @media (max-width: 1399px) { .cta-wrapper-2 .cta-content .search-widget form button { top: 16px; } } .cta-bg-wrapper { position: relative; z-index: 9; border-radius: 20px; } .cta-bg-wrapper::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; background: rgba(10, 37, 64, 0.4); z-index: -1; border-radius: 20px; } .cta-bg-wrapper .cta-top-content { padding: 88px 0; text-align: center; } @media (max-width: 1399px) { .cta-bg-wrapper .cta-top-content { padding: 80px 0; } } .cta-bg-wrapper .cta-top-content .theme-btn { margin-top: 50px; } @media (max-width: 1399px) { .cta-bg-wrapper .cta-top-content .theme-btn { margin-top: 30px; } } .instagram-banner { overflow: hidden; } .instagram-banner .instagram-banner-slider { overflow: visible; } .instagram-banner .instagram-banner-slider .swiper-slide { width: auto !important; display: flex; align-items: center; justify-content: center; } .instagram-banner .instagram-banner-items .banner-image { position: relative; overflow: hidden; transition: all 0.4s ease-in-out; width: 260px; height: 160px; border-radius: 100px; } .instagram-banner .instagram-banner-items .banner-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 100px; } .instagram-banner .instagram-banner-items .banner-image.style-2 { width: 180px; height: 180px; border-radius: 50% !important; } .instagram-banner .instagram-banner-items .banner-image.style-2 img { border-radius: 50% !important; } .instagram-banner .instagram-banner-items .banner-image::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; background: rgba(0, 0, 0, 0.4); opacity: 0; z-index: 1; transition: 0.4s; border-radius: inherit; } .instagram-banner .instagram-banner-items .banner-image .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5); z-index: 9; color: #fff; font-size: 34px; opacity: 0; transition: 0.4s; } .instagram-banner .instagram-banner-items:hover .banner-image::before { opacity: 1; } .instagram-banner .instagram-banner-items:hover .banner-image .icon { opacity: 1; transform: translate(-50%, -50%) scale(1); } .adventure-section { position: relative; z-index: 9; } .adventure-section::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(180deg, rgba(10, 37, 64, 0) 0%, #0A2540 100%); } .adventure-section .top-shape { position: absolute; top: 0; left: 0; right: 0; } @media (max-width: 1399px) { .adventure-section .top-shape { top: -10px; } } .adventure-section .top-shape img { width: 100%; height: 100%; } .adventure-section .bottom-shape { position: absolute; bottom: -2px; left: 0; right: 0; } @media (max-width: 1399px) { .adventure-section .bottom-shape { bottom: -10px; } } .adventure-section .bottom-shape img { width: 100%; height: 100%; } .adventure-content { padding: 560px 0 205px; text-align: center; position: relative; } @media (max-width: 1399px) { .adventure-content { padding: 100px 0; } } @media (max-width: 991px) { .adventure-content { padding: 80px 0; } } .adventure-content span { font-size: 64px; font-weight: 700; color: rgb(255, 255, 255); } @media (max-width: 1399px) { .adventure-content span { font-size: 50px; } } @media (max-width: 991px) { .adventure-content span { font-size: 35px; } } @media (max-width: 767px) { .adventure-content span { font-size: 30px; } } @media (max-width: 575px) { .adventure-content span { font-size: 25px; } } .adventure-content h2 { font-size: 150px; font-weight: 700; color: rgb(255, 255, 255); } @media (max-width: 1399px) { .adventure-content h2 { font-size: 80px; } } @media (max-width: 991px) { .adventure-content h2 { font-size: 50px; } } @media (max-width: 767px) { .adventure-content h2 { font-size: 40px; } } @media (max-width: 575px) { .adventure-content h2 { font-size: 30px; } } .adventure-show-item p { /* max-width: 530px; */ color: rgb(70, 90, 110); margin-bottom: 80px; /* margin-top: -130px; */ } @media (max-width: 1399px) { .adventure-show-item p { margin-top: 0; margin-bottom: 30px; margin-left: 0; } } .adcv_grid { display: grid; gap: 15px; grid-template-columns: repeat(4, 1fr); } .adventure-show-item { height: 100%; width: 100%; } .adventure-show-item .adventure-show-image { width: 100%; height: 100%; overflow: hidden; border-radius: 30px; } @media (max-width: 1399px) { .adventure-show-item .adventure-show-image { max-width: initial; margin-left: 0; } } .adventure-show-item .adventure-show-image img { width: 100%; height: 100%; border-radius: 30px; object-fit: cover; } .adventure-show-item .adventure-show-image.style-2 { max-width: 100%; } @media (max-width: 1399px) { .adventure-show-item .adventure-show-image.style-2 { max-width: initial; } } .adventure-show-item .adventure-show-image.style-3 { margin-left: 0; } @media (max-width: 1600px) { .adventure-show-item .adventure-show-image.style-3 { /* margin-right: 170px; */ } } @media (max-width: 1399px) { .adventure-show-item .adventure-show-image.style-3 { margin-left: 0; margin-right: 0; } } .adventure-show-item .adventure-show-image.style-4 { /* margin-right: 170px; */ margin-left: 0; } @media (max-width: 1399px) { .adventure-show-item .adventure-show-image.style-4 { margin-right: 0; } } .adventure-show-item.style-top { /* margin-top: 70px; */ } @media (max-width: 1399px) { .adventure-show-item.style-top { margin-top: 0; } } .adventure-show-section .container-fluid { padding: 0 80px; } @media (max-width: 1600px) { .adventure-show-section .container-fluid { padding: 0 50px; } } @media (max-width: 1399px) { .adventure-show-section .container-fluid { padding: 0 30px; } } @media (max-width: 575px) { .adventure-show-section .container-fluid { padding: 0 15px; } } .why-choose-us-wrapper-2 { position: relative; } .why-choose-us-wrapper-2 .drive-shape { position: absolute; top: 100px; left: 35%; } @media (max-width: 1399px) { .why-choose-us-wrapper-2 .drive-shape { display: none; } } .why-choose-us-wrapper-2 .drive-shape img { animation: rotateCircle 10s linear infinite; } .why-choose-us-wrapper-2 .tuyer-shape { position: absolute; left: 0; bottom: 0; z-index: 999; } @media (max-width: 1399px) { .why-choose-us-wrapper-2 .tuyer-shape { display: none; } } .why-choose-us-wrapper-2 .why-choose-us-image { max-width: 680px; z-index: 9; } @media (max-width: 1399px) { .why-choose-us-wrapper-2 .why-choose-us-image { max-width: initial; } } .why-choose-us-wrapper-2 .why-choose-us-image img { width: 100%; height: 100%; display: block; animation: floatShip 4s ease-in-out infinite; transform-origin: center bottom; } .why-choose-us-wrapper-2 .why-choose-us-image .circle-shape { position: absolute; top: -60px; left: -70px; z-index: -1; } @media (max-width: 1399px) { .why-choose-us-wrapper-2 .why-choose-us-image .circle-shape { display: none; } } .why-choose-us-wrapper-2 .why-choose-us-image .circle-shape img { width: initial; height: initial; transform-origin: initial; animation: initial; } .why-choose-us-wrapper-2 .why-choose-us-content { margin-left: 15px; } @media (max-width: 1399px) { .why-choose-us-wrapper-2 .why-choose-us-content { margin-left: 0; } } .why-choose-us-wrapper-2 .why-choose-us-content .text { color: rgb(70, 90, 110); margin-top: 20px; border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 30px; margin-bottom: 30px; } .why-choose-us-wrapper-2 .why-choose-us-content .why-choose-us-item { display: flex; align-items: center; gap: 60px; margin-bottom: 30px; } .why-choose-us-wrapper-2 .why-choose-us-content .why-choose-us-item .icon-item { display: flex; align-items: center; gap: 20px; } @media (max-width: 1399px) { .why-choose-us-wrapper-2 .why-choose-us-content .why-choose-us-item .icon-item { flex-wrap: wrap; } } .why-choose-us-wrapper-2 .why-choose-us-content .why-choose-us-item .icon-item .icon { width: 58px; height: 58px; line-height: 58px; border-radius: 100px; text-align: center; background-color: rgba(110, 231, 231, 0.1); } .why-choose-us-wrapper-2 .why-choose-us-content .why-choose-us-item .icon-item .icon img { width: initial; height: initial; } .why-choose-us-wrapper-2 .why-choose-us-content .why-choose-us-item .icon-item span { color: rgb(10, 37, 64); font-weight: 600; } .why-choose-us-wrapper-2 .why-choose-us-content .why-choose-us-item .icon-item:hover .icon img { animation: jello 1s; } .destination-image { position: relative; border-top: 1px solid rgba(10, 37, 64, 0.2); padding-top: 40px; margin-top: 40px; } .destination-image img { width: 100%; height: 100%; } .destination-image .map-point { position: absolute; } @media (max-width: 575px) { .destination-image .map-point.style-2 { display: block; left: 16% !important; top: 80% !important; } } @media (max-width: 1600px) { .destination-image .map-point.style-3 { right: 25% !important; } } @media (max-width: 1399px) { .destination-image .map-point.style-3 { display: none; } } .destination-image .map-point .map-dot { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(110, 231, 231, 0.2); cursor: pointer; transition: transform 0.3s; position: relative; } .destination-image .map-point .map-dot::before { width: 18px; height: 18px; background-color: rgb(110, 231, 231); position: absolute; content: ""; top: 50%; border-radius: 100px; left: 50%; transform: translate(-50%, -50%); z-index: 999; } .destination-image .map-point .map-dot:hover { transform: scale(1.5); } .destination-image .map-point .map-card { opacity: 0; visibility: hidden; position: absolute; top: -50px; left: 60px; background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); z-index: 10; gap: 10px; width: 320px; display: flex; flex-direction: row; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 9999; } @media (max-width: 575px) { .destination-image .map-point .map-card { left: -50px; width: 305px; } } .destination-image .map-point .map-card img { border-radius: 5px; width: 100px; height: 100px; } @media (max-width: 575px) { .destination-image .map-point .map-card img { width: 90px; } } .destination-image .map-point .map-card .content { margin-left: 10px; } .destination-image .map-point .map-card .content .price { color: rgb(255, 107, 107); border: 1px solid rgba(255, 107, 107, 0.2); border-radius: 100px; font-size: 14px; font-weight: 500; padding: 4px 10px; margin-bottom: 8px; display: inline-block; } .destination-image .map-point .map-card .content .title { margin-bottom: 5px; font-weight: 700; font-size: 16px; } .destination-image .map-point .map-card .content .location { font-size: 14px; font-weight: 500; color: rgb(70, 90, 110); } .destination-image .map-point .map-card .content .location i { color: rgb(15, 185, 177); } .destination-image .map-point.active .map-card { opacity: 1; visibility: visible; transform: translateY(-5px); } .destination-image .map-point:hover .map-card { opacity: 1; visibility: visible; transform: translateY(-5px); } .we-offer-wrapper { padding-bottom: 190px; border-bottom: 1px solid rgba(10, 37, 64, 0.2); } @media (max-width: 1399px) { .we-offer-wrapper { padding-bottom: 100px; } } @media (max-width: 991px) { .we-offer-wrapper { padding-bottom: 80px; } } .we-offer-wrapper .we-offer-image { max-width: 370px; position: relative; } @media (max-width: 1399px) { .we-offer-wrapper .we-offer-image { max-width: initial; } } .we-offer-wrapper .we-offer-image img { width: 100%; height: 100%; border-radius: 20px; } .we-offer-wrapper .we-offer-image .we-offer-image-2 { position: absolute; top: 135px; right: -300px; z-index: 999; } @media (max-width: 1399px) { .we-offer-wrapper .we-offer-image .we-offer-image-2 { max-width: 200px; left: 0; bottom: 0; top: initial; } } .we-offer-wrapper .we-offer-content { margin-left: 26px; } @media (max-width: 1399px) { .we-offer-wrapper .we-offer-content { margin-left: 0; } } .we-offer-wrapper .we-offer-content .text { max-width: 690px; margin-top: 20px; margin-bottom: 20px; color: rgb(70, 90, 110); } .we-offer-wrapper .we-offer-content .offer-list { border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 40px; margin-bottom: 40px; } .we-offer-wrapper .we-offer-content .offer-list li { color: rgb(10, 37, 64); font-weight: 600; position: relative; padding-left: 15px; } .we-offer-wrapper .we-offer-content .offer-list li:not(:last-child) { margin-bottom: 10px; } .we-offer-wrapper .we-offer-content .offer-list li::before { position: absolute; content: ""; width: 6px; height: 6px; border-radius: 100px; background-color: rgb(10, 37, 64); top: 10px; left: 0; } .we-offer-wrapper .we-offer-content .offer-button-item { display: flex; align-items: center; gap: 35px; } @media (max-width: 1399px) { .we-offer-wrapper .we-offer-content .offer-button-item { gap: 20px; } } .we-offer-wrapper .we-offer-content .offer-button-item .icon-item { display: flex; align-items: center; gap: 20px; } @media (max-width: 1399px) { .we-offer-wrapper .we-offer-content .offer-button-item .icon-item { gap: 10px; } } .we-offer-wrapper .we-offer-content .offer-button-item .icon-item .icon { width: 48px; height: 48px; line-height: 48px; border-radius: 100px; text-align: center; background-color: rgba(110, 231, 231, 0.2); } .we-offer-wrapper .we-offer-content .offer-button-item .icon-item .content span { color: rgb(70, 90, 110); font-size: 15px; font-weight: 500; } .we-offer-wrapper .we-offer-content .offer-button-item .icon-item .content h3 { font-size: 20px; font-weight: 800; } @media (max-width: 1399px) { .we-offer-wrapper .we-offer-content .offer-button-item .icon-item .content h3 { font-size: 17px; } } .we-offer-wrapper .we-offer-content .offer-button-item .icon-item .content h3 a { color: rgb(10, 37, 64); } .feature-benefit-item { text-align: center; border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 120px; } @media (max-width: 1399px) { .feature-benefit-item { padding-bottom: 100px; } } @media (max-width: 991px) { .feature-benefit-item { padding-bottom: 80px; } } .feature-benefit-item.style-bottom { border-bottom: none; position: relative; border-radius: 20px; overflow: hidden; } .feature-benefit-item.style-bottom:before{content:'';width: 100%;height: 100%;display: block;position: absolute;background: #00000063;z-index: 1;} .feature-benefit-item h2 { margin-bottom: 60px; } @media (max-width: 1399px) { .feature-benefit-item h2 { margin-bottom: 30px; } } .feature-benefit-item .feature-image { margin-top: 60px; margin: 0 auto; text-align: center; transition: all 0.4s ease-in-out; } .feature-benefit-item .feature-image img { width: 100%; height: 100%; border-radius: 20px; display: block; } .feature-benefit-item h2 {position:absolute;top: 50%;transform: translate(0px, -50%);z-index: 1;margin: 0 auto;padding: 0 10%;font-size: 35px;color: #fff;} .adventure-showcase-section { background-color: rgb(245, 247, 250); } .adventure-showcase-section .section-title-area { border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 60px; margin-bottom: 60px !important; } @media (max-width: 1399px) { .adventure-showcase-section .section-title-area { padding-bottom: 30px; margin-bottom: 30px !important; } } .adventure-showcase-item.style-2 { margin-top: 100px; } @media (max-width: 1399px) { .adventure-showcase-item.style-2 { margin-top: 0; } } .adventure-showcase-item .adventure-showcase-image { max-width: 410px; overflow: hidden; border-radius: 20px; } @media (max-width: 1399px) { .adventure-showcase-item .adventure-showcase-image { max-width: initial; } } .adventure-showcase-item .adventure-showcase-image img { width: 100%; height: 100%; border-radius: 20px; } .featured-listing-section { position: relative; z-index: 9; } .featured-listing-section::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; background: rgba(10, 37, 64, 0.7); z-index: -1; } .featured-listing-section .top-shape { position: absolute; top: -27px; left: 0; right: 0; } @media (max-width: 1600px) { .featured-listing-section .top-shape { top: -20px; } } @media (max-width: 1399px) { .featured-listing-section .top-shape { top: -10px; } } .featured-listing-section .top-shape img { width: 100%; height: 100%; } .featured-listing-section .bottom-shape { position: absolute; bottom: -27px; left: 0; right: 0; } @media (max-width: 1600px) { .featured-listing-section .bottom-shape { bottom: -20px; } } @media (max-width: 1399px) { .featured-listing-section .bottom-shape { bottom: -10px; } } .featured-listing-section .bottom-shape img { width: 100%; height: 100%; } .featured-listing-section .nav { display: flex; justify-content: space-between; margin-bottom: 30px; margin-top: 30px; gap: 20px; justify-content: center; position: relative; } @media (max-width: 1399px) { .featured-listing-section .nav { margin-bottom: 30px; } } @media (max-width: 991px) { .featured-listing-section .nav { flex-wrap: wrap; gap: 20px; } } .featured-listing-section .nav li .nav-link { transition: all 0.4s ease-in-out; padding: 6px 10px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); line-height: 1; color: var(--white); font-weight: 500; font-size: 16px; text-transform: capitalize; position: relative; border-radius: 100px; } .featured-listing-section .nav li .nav-link:hover { color: var(--white) !important; } .featured-listing-section .nav li .nav-link.active { color: var(--white); background: var(--theme); border: 1px solid var(--theme); } .featured-listing-card-item { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; padding: 30px; margin-top: 30px; transition: all 0.4s ease-in-out; } .featured-listing-card-item.style-2 { border: 1px solid var(--white); } .featured-listing-card-item.style-2 .theme-btn { color: var(--white); } .featured-listing-card-item.style-2 .theme-btn::after { background-color: var(--theme); } .featured-listing-card-item.style-2 .theme-btn::before { background-color: var(--header); } .featured-listing-card-item .feature-bg-box { background-color: rgba(255, 255, 255, 0.2); padding: 20px; border-radius: 10px; margin-bottom: 30px; transition: all 0.4s ease-in-out; position: relative; } .featured-listing-card-item .feature-bg-box span { font-weight: 500; font-size: 14px; color: rgb(255, 107, 107); border: 1px solid rgba(255, 107, 107, 0.2); border-radius: 100px; background-color: var(--white); padding: 3px 10px; } .featured-listing-card-item .feature-bg-box .sheep-image img { width: 100%; height: 100%; } .featured-listing-card-item h3 { color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 30px; } .featured-listing-card-item .listing-rate { margin-bottom: 40px; } @media (max-width: 1399px) { .featured-listing-card-item .listing-rate { margin-bottom: 30px; } } .featured-listing-card-item .listing-rate li { color: var(--white); font-weight: 500; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; } .featured-listing-card-item .listing-rate li:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .featured-listing-card-item .listing-rate li span { color: var(--white); } .featured-listing-card-item .theme-btn { color: rgb(15, 185, 177); margin-top: 0px; width: 100%; justify-content: center; } @media (max-width: 1399px) { .featured-listing-card-item .theme-btn { margin-top: 30px; } } .featured-listing-card-item .theme-btn::after { border: 1px solid rgb(15, 185, 177); background: transparent; } .featured-listing-card-item .theme-btn::before { background: var(--theme); } .featured-listing-card-item .theme-btn:hover { color: var(--white); } .featured-listing-card-item:hover { border: 1px solid rgb(255, 255, 255); transform: translateY(-10px); } .featured-listing-card-item:hover .feature-bg-box { background-color: var(--white); } @media (max-width: 1399px) { .feature-section-1 { padding-top: 0; } } .counter-circle-item { width: 330px; height: 330px; text-align: center; border: 1px solid rgba(10, 37, 64, 0.2); border-radius: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } @media (max-width: 1399px) { .counter-circle-item { margin: 0 auto; width: 230px; height: 230px; } } @media (max-width: 991px) { .counter-circle-item { margin: 0 auto; width: 300px; height: 300px; } } .counter-circle-item h2 { font-size: 100px; font-weight: 600; margin: 0; line-height: 1; transition: all 0.4s ease-in-out; } @media (max-width: 1399px) { .counter-circle-item h2 { font-size: 75px; } } @media (max-width: 991px) { .counter-circle-item h2 { font-size: 85px; } } .counter-circle-item p { font-size: 16px; font-weight: 600; color: rgb(10, 37, 64); margin: 0; margin-top: 8px; } .counter-circle-item:hover h2 { color: var(--theme); } .featured-listing-section-2 { border-radius: 20px; margin: 0 60px; } @media (max-width: 1600px) { .featured-listing-section-2 { margin: 0 30px; } } @media (max-width: 1399px) { .featured-listing-section-2 { margin: 0 15px; } } .yacht-details-wrapper .yacht-details-post { position: relative; } .yacht-details-wrapper .yacht-details-post .swiper-dot { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 999; } .yacht-details-wrapper .yacht-details-post .swiper-dot .dots { display: flex; flex-direction: column; align-items: center; gap: 12px; } .yacht-details-wrapper .yacht-details-post .swiper-dot .swiper-pagination-bullet { border: 1px solid var(--white); } .yacht-details-wrapper .yacht-details-post .swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { border: 1px solid var(--theme); } .yacht-details-wrapper .yacht-details-post .yacht-details-image img { width: 100%; height: 100%; border-radius: 20px; } .yacht-details-wrapper .yacht-details-post .yacht-slider .swiper-slide { opacity: 0; } .yacht-details-wrapper .yacht-details-post .yacht-slider .swiper-slide-active { opacity: 1; } .yacht-details-wrapper .yachit-list-item { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 30px; margin-top: 30px; margin-bottom: 60px; } @media (max-width: 1399px) { .yacht-details-wrapper .yachit-list-item { margin-bottom: 30px; flex-wrap: wrap; gap: 25px; } } .yacht-details-wrapper .yachit-list-item .yacht-list { display: flex; align-items: center; gap: 50px; } @media (max-width: 1399px) { .yacht-details-wrapper .yachit-list-item .yacht-list { gap: 20px; } } .yacht-details-wrapper .yachit-list-item .yacht-list li { font-weight: 500; color: rgb(10, 37, 64); } .yacht-details-wrapper h2 { font-size: 30px; font-weight: 700; } @media (max-width: 1399px) { .yacht-details-wrapper h2 { font-size: 26px; } } .yacht-details-wrapper .details-list-item { display: flex; align-items: center; gap: 60px; margin-top: 60px; margin-bottom: 60px; } @media (max-width: 1399px) { .yacht-details-wrapper .details-list-item { flex-wrap: wrap; gap: 10px; margin-top: 30px; margin-bottom: 30px; } } .yacht-details-wrapper .details-list-item .list-2 li { color: rgb(10, 37, 64); position: relative; padding-left: 16px; } .yacht-details-wrapper .details-list-item .list-2 li::before { position: absolute; content: ""; width: 6px; height: 6px; border-radius: 30px; background-color: var(--header); top: 12px; left: 0; } .yacht-details-wrapper .details-list-item .list-2 li:not(:last-child) { margin-bottom: 10px; } .yacht-details-wrapper .details-thumb img { width: 100%; height: 100%; border-radius: 20px; } .yacht-details-wrapper .details-box-item { padding: 45px; border-radius: 20px; background-color: rgb(245, 247, 250); } @media (max-width: 1399px) { .yacht-details-wrapper .details-box-item { padding: 30px; } } .yacht-details-wrapper .details-box-item .yacht-single-list { display: flex; align-items: center; justify-content: space-between; margin-top: 30px; margin-bottom: 50px; } @media (max-width: 1399px) { .yacht-details-wrapper .details-box-item .yacht-single-list { margin-top: 25px; margin-bottom: 30px; flex-wrap: wrap; gap: 20px; } } .yacht-details-wrapper .details-box-item .yacht-single-list .list-3 li { font-weight: 500; color: rgb(10, 37, 64); } .yacht-details-wrapper .details-box-item .yacht-single-list .list-3 li:not(:last-child) { margin-bottom: 10px; } .yacht-details-wrapper .details-box-item .details-image-items { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 1399px) { .yacht-details-wrapper .details-box-item .details-image-items { gap: 10px; } } .yacht-details-wrapper .details-box-item .details-image-items .thumb img { width: 100%; height: 100%; border-radius: 20px; } .yacht-details-wrapper .yacht-faq-item { margin-top: 100px; margin-bottom: 100px; } @media (max-width: 1399px) { .yacht-details-wrapper .yacht-faq-item { margin-top: 30px; margin-bottom: 30px; } } .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-item { border: none; margin-bottom: 15px; background-color: transparent; border: 1px solid rgba(10, 37, 64, 0.2); padding: 0; border-radius: 15px !important; } .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-item h2 button { font-size: 20px; line-height: 1; font-weight: 700; box-shadow: none; padding: 28px 20px; font-family: "Plus Jakarta Sans", sans-serif; color: rgb(10, 37, 64); text-transform: capitalize; } @media (max-width: 1399px) { .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-item h2 button { font-size: 18px; } } @media (max-width: 575px) { .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-item h2 button { font-size: 16px; } } .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-item .accordion-body { background-color: var(--white); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding-left: 20px; padding-top: 0px; padding-bottom: 28px; } .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-item .accordion-body p { color: rgb(70, 90, 110); line-height: 26px; font-weight: 400; font-size: 16px; text-align: left; max-width: 556px; } @media (max-width: 575px) { .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-item .accordion-body p { width: 100%; font-size: 14px; line-height: 28px; } } .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-button { background-color: var(--white); color: var(--theme) !important; border-top-left-radius: 15px; border-top-right-radius: 15px; } .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-button::after { display: none; } .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-button::before { position: absolute; content: "\f077"; font-family: "Font Awesome 6 Pro"; font-weight: 700; top: 30px; right: 22px; font-size: 18px; text-align: center; transition: all 0.4s ease-in-out; color: var(--theme); } .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-button.collapsed { background-color: transparent; color: rgb(10, 37, 64) !important; } .yacht-details-wrapper .yacht-faq-item .faq-items .accordion .accordion-button.collapsed::before { content: "\f078"; font-family: "Font Awesome 6 Pro"; color: rgb(70, 90, 110); } .yacht-details-wrapper .contact-information-box { background-color: rgb(245, 247, 250); border-radius: 20px; padding: 60px; margin-top: 60px; } @media (max-width: 1399px) { .yacht-details-wrapper .contact-information-box { padding: 30px; margin-top: 30px; } } .yacht-details-wrapper .contact-information-box .information-box { background-color: rgb(15, 185, 177); padding: 40px 40px 250px; border-radius: 10px; position: relative; } @media (max-width: 1399px) { .yacht-details-wrapper .contact-information-box .information-box { padding: 30px 30px 250px; } } @media (max-width: 1199px) { .yacht-details-wrapper .contact-information-box .information-box { padding: 30px 30px 180px; } } @media (max-width: 991px) { .yacht-details-wrapper .contact-information-box .information-box { padding: 30px; } } .yacht-details-wrapper .contact-information-box .information-box .shape { position: absolute; right: 0; bottom: 0; } @media (max-width: 1399px) { .yacht-details-wrapper .contact-information-box .information-box .shape { display: none; } } .yacht-details-wrapper .contact-information-box .information-box .shape img { width: 100%; height: 100%; } .yacht-details-wrapper .contact-information-box .information-box h2 { color: var(--white); } .yacht-details-wrapper .contact-information-box .information-box p { color: rgb(255, 255, 255); max-width: 451px; margin-bottom: 30px; margin-top: 10px; } .yacht-details-wrapper .contact-information-box .information-box .icon-item { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; } @media (max-width: 1399px) { .yacht-details-wrapper .contact-information-box .information-box .icon-item { flex-wrap: wrap; gap: 10px; } } .yacht-details-wrapper .contact-information-box .information-box .icon-item .icon { width: 54px; height: 54px; line-height: 54px; text-align: center; border-radius: 100px; background-color: var(--white); } .yacht-details-wrapper .contact-information-box .information-box .icon-item span { font-size: 18px; font-weight: 700; color: rgb(255, 255, 255); } @media (max-width: 1399px) { .yacht-details-wrapper .contact-information-box .information-box .icon-item span { font-size: 16px; } } .yacht-details-wrapper .contact-information-box .information-box .icon-item span a { color: rgb(255, 255, 255); } .yacht-details-wrapper .contact-information-box .contact-form-box { border-radius: 10px; background-color: rgb(255, 255, 255); padding: 40px; } @media (max-width: 1399px) { .yacht-details-wrapper .contact-information-box .contact-form-box { padding: 30px; } } .yacht-details-wrapper .contact-information-box .contact-form-box .form-clt span { font-weight: 600; color: rgb(10, 37, 64); display: inline-block; margin-bottom: 8px; } .yacht-details-wrapper .contact-information-box .contact-form-box .form-clt input, .yacht-details-wrapper .contact-information-box .contact-form-box .form-clt textarea { outline: none; width: 100%; color: rgb(70, 90, 110); padding: 20px; background: #F6F6F6; border: 1px solid #E2E2E2; border-radius: 5px; text-transform: capitalize; } .yacht-details-wrapper .contact-information-box .contact-form-box .form-clt input::placeholder, .yacht-details-wrapper .contact-information-box .contact-form-box .form-clt textarea::placeholder { color: rgb(70, 90, 110); } .yacht-details-wrapper .contact-information-box .contact-form-box .form-clt textarea { padding-bottom: 80px; } .courses-details-wrapper { border-top: 1px solid rgba(10, 37, 64, 0.2); padding-top: 60px; } @media (max-width: 1399px) { .courses-details-wrapper { padding-top: 30px; } } .courses-details-wrapper .courses-content .star i { color: rgb(255, 164, 27); } .courses-details-wrapper .courses-content .star i.color { color: rgba(107, 115, 133, 0.5); } .courses-details-wrapper .courses-content h2 { font-size: 48px; } @media (max-width: 1399px) { .courses-details-wrapper .courses-content h2 { font-size: 35px; } } @media (max-width: 991px) { .courses-details-wrapper .courses-content h2 { font-size: 35px; } } @media (max-width: 767px) { .courses-details-wrapper .courses-content h2 { font-size: 30px; } } @media (max-width: 575px) { .courses-details-wrapper .courses-content h2 { font-size: 25px; } } .courses-details-wrapper .courses-content .details-image { margin-bottom: 30px; margin-top: 30px; } .courses-details-wrapper .courses-content .details-image img { width: 100%; height: 100%; border-radius: 18px; } .courses-details-wrapper .courses-content .courses-details-content { margin-top: 32px; } .courses-details-wrapper .courses-content .courses-details-content .nav { display: flex; align-items: center; background-color: var(--white); box-shadow: 10px 4px 30px rgba(168, 168, 168, 0.2); border: 1px solid var(--border); border-radius: 10px; justify-content: center; padding: 14px 30px; gap: 80px; margin-bottom: 50px; } @media (max-width: 1199px) { .courses-details-wrapper .courses-content .courses-details-content .nav { gap: 30px; flex-wrap: wrap; } } .courses-details-wrapper .courses-content .courses-details-content .nav .nav-item { padding: 0; position: relative; } .courses-details-wrapper .courses-content .courses-details-content .nav .nav-item .nav-link { font-size: 18px; font-weight: 500; color: var(--text); position: relative; } .courses-details-wrapper .courses-content .courses-details-content .nav .nav-item .nav-link::before { position: absolute; right: -40px; top: 20px; content: ""; width: 5px; height: 5px; border-radius: 5px; background-color: rgba(0, 91, 255, 0.2); } @media (max-width: 1199px) { .courses-details-wrapper .courses-content .courses-details-content .nav .nav-item .nav-link::before { display: none; } } .courses-details-wrapper .courses-content .courses-details-content .nav .nav-item .nav-link.bb-none::before { display: none; } .courses-details-wrapper .courses-content .courses-details-content .nav .nav-item .nav-link.active { color: var(--theme); } .courses-details-wrapper .courses-content .courses-details-content .nav .nav-item .nav-link.active::before { background-color: var(--theme); } .courses-details-wrapper .courses-content .courses-details-content .nav .nav-item .nav-link.active::after { position: absolute; bottom: -15px; left: 0; height: 2px; width: 100%; content: ""; background: var(--theme); transition: 0.3s; } .courses-details-wrapper .courses-content .courses-details-content .description-content h3 { font-size: 27px; margin-bottom: 20px; } @media (max-width: 1399px) { .courses-details-wrapper .courses-content .courses-details-content .description-content h3 { font-size: 25px; } } .courses-details-wrapper .courses-content .courses-details-content .description-content .list-item li { font-size: 16px; font-weight: 500; color: var(--header); } @media (max-width: 1399px) { .courses-details-wrapper .courses-content .courses-details-content .description-content .list-item li { font-size: 14px; } } .courses-details-wrapper .courses-content .courses-details-content .description-content .list-item li i { color: var(--theme); margin-right: 5px; } .courses-details-wrapper .courses-content .courses-details-content .description-content .list-item li:not(:last-child) { margin-bottom: 10px; } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items { margin-top: 20px; } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items h3 { font-size: 36px; margin-bottom: 20px; } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-item { border: none; border-radius: 0px; margin-bottom: 15px; border: 1px solid rgba(107, 115, 133, 0.3); border-radius: 8px; } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-item h2 button { font-size: 22px; line-height: 1; font-weight: 700; box-shadow: none; padding: 20px 30px; color: var(--header); background-color: var(--bg); border-radius: 8px; } @media (max-width: 575px) { .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-item h2 button { font-size: 17px; } } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-item .accordion-body { padding: 0; } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-item .accordion-body ul { background-color: var(--bg); } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-item .accordion-body ul li { display: flex; align-items: center; justify-content: space-between; padding: 0px 30px 20px; } @media (max-width: 1199px) { .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-item .accordion-body ul li { flex-wrap: wrap; gap: 20px; } } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-item .accordion-body ul li span { font-size: 18px; color: var(--text); font-weight: 400; } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-item .accordion-body ul li span.text i { margin-left: 20px; } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-button { background-color: var(--bg); color: var(--header); } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-button::after { display: none; } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-button::before { position: absolute; content: "\f078"; font-family: "Font Awesome 5 Pro"; font-weight: 700; top: 18px; right: 30px; font-size: 16px; text-align: center; transition: all 0.4s ease-in-out; color: var(--header); } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-button.collapsed { background-color: var(--bg); color: var(--header); } .courses-details-wrapper .courses-content .courses-details-content .course-curriculum-items .courses-faq-items .accordion .accordion-button.collapsed::before { content: "\f054"; color: var(--header); background-color: transparent; } .courses-details-wrapper .courses-content .courses-details-content .instructors-items h3 { margin-bottom: 10px; } .courses-details-wrapper .courses-content .courses-details-content .instructors-items .instructors-box-items { padding: 40px 50px; border: 1px solid var(--border); border-radius: 10px; background-color: #F4F9FF; display: flex; align-items: center; gap: 40px; margin-top: 20px; } @media (max-width: 767px) { .courses-details-wrapper .courses-content .courses-details-content .instructors-items .instructors-box-items { flex-wrap: wrap; gap: 20px; padding: 30px; } } .courses-details-wrapper .courses-content .courses-details-content .instructors-items .instructors-box-items .thumb img { width: 100%; height: 100%; border-radius: 100%; } .courses-details-wrapper .courses-content .courses-details-content .instructors-items .instructors-box-items .content { max-width: 521px; } .courses-details-wrapper .courses-content .courses-details-content .instructors-items .instructors-box-items .content h4 { font-size: 22px; margin-bottom: 5px; } .courses-details-wrapper .courses-content .courses-details-content .instructors-items .instructors-box-items .content p { margin-top: 25px; } .courses-details-wrapper .courses-content .courses-details-content .instructors-items .instructors-box-items .content .social-icon { display: flex; align-items: center; gap: 10px; margin-top: 15px; } .courses-details-wrapper .courses-content .courses-details-content .instructors-items .instructors-box-items .content .social-icon a { width: 35px; height: 35px; line-height: 35px; text-align: center; font-size: 16px; display: block; background: transparent; color: var(--text); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; text-align: center; border: 1px solid var(--border); border-radius: 50%; } .courses-details-wrapper .courses-content .courses-details-content .instructors-items .instructors-box-items .content .social-icon a:hover { background-color: var(--theme); color: var(--white); border: 1px solid var(--theme); } .courses-details-wrapper .courses-content .courses-details-content .instructors-items .instructors-box-items.style-2 { background-color: var(--white); } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items h3 { font-size: 27px; margin-bottom: 30px; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items { border: 1px solid var(--border); border-radius: 10px; padding: 10px; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .courses-reviews-box { display: flex; align-items: center; gap: 70px; border-bottom: 1px solid var(--border); padding-bottom: 10px; } @media (max-width: 767px) { .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .courses-reviews-box { flex-wrap: wrap; gap: 20px; } } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .courses-reviews-box .reviews-box { padding: 50px 34px; text-align: center; min-width: 248px; box-shadow: 10px 4px 60px rgba(182, 182, 182, 0.2); background-color: var(--white); } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .courses-reviews-box .reviews-box h2 { font-size: 90px; line-height: 1; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .courses-reviews-box .reviews-box .star { color: #FFAE5D; margin-bottom: 10px; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right { max-width: 452px; width: 100%; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item { display: flex; align-items: center; gap: 30px; } @media (max-width: 767px) { .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item { flex-wrap: wrap; gap: 20px; } } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item:not(:last-child) { margin-bottom: 15px; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item .star { color: #FFAE5D; display: flex; align-items: center; gap: 7px; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item .star i.color-2 { color: var(--text); } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item span { font-weight: 500; color: var(--header); } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item .progress { background-color: rgba(15, 185, 177, 0.5); justify-content: flex-start; border-radius: 0; align-items: center; position: relative; display: flex; height: 5px; width: 100%; max-width: 244px; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item .progress-value { animation: load 3s normal forwards; border-radius: 0; background: var(--theme); height: 5px; width: 0; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item .style-two { animation: load2 3s normal forwards; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item .style-three { animation: load3 3s normal forwards; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item .style-four { animation: load4 3s normal forwards; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .courses-reviews-box-items .reviews-ratting-right .reviews-ratting-item .style-five { animation: load5 3s normal forwards; } @keyframes load { 0% { width: 0; } 100% { width: 100%; } } @keyframes load2 { 0% { width: 0; } 100% { width: 90%; } } @keyframes load3 { 0% { width: 0; } 100% { width: 80%; } } @keyframes load4 { 0% { width: 0; } 100% { width: 70%; } } @keyframes load5 { 0% { width: 0; } 100% { width: 60%; } } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .instructors-box-items { padding: 40px 30px; display: flex; align-items: center; gap: 40px; } @media (max-width: 767px) { .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .instructors-box-items { flex-wrap: wrap; gap: 20px; padding: 30px; } } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .instructors-box-items .thumb img { width: 100%; height: 100%; border-radius: 100%; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .instructors-box-items .content { max-width: 540px; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .instructors-box-items .content h2 { font-size: 22px; margin-bottom: 5px; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .instructors-box-items .content p { margin-top: 15px; } .courses-details-wrapper .courses-content .courses-details-content .courses-reviews-items .instructors-box-items .content .star { color: #FFAE5D; margin-top: 15px; } .courses-details-wrapper .courses-details-information { background-color: var(--bg); padding: 40px 35px; border-radius: 18px; } @media (max-width: 1399px) { .courses-details-wrapper .courses-details-information { padding: 30px; } } .courses-details-wrapper .courses-details-information h2 { font-size: 22px; font-weight: 700; line-height: 145%; } .courses-details-wrapper .courses-details-information .information-list { margin-top: 20px; margin-bottom: 30px; } .courses-details-wrapper .courses-details-information .information-list li { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid rgba(107, 115, 133, 0.3); } .courses-details-wrapper .courses-details-information .information-list li span { font-size: 18px; color: var(--text); font-weight: 600; } @media (max-width: 1399px) { .courses-details-wrapper .courses-details-information .information-list li span { font-size: 15px; font-weight: 400; } } .courses-details-wrapper .courses-details-information .information-list li span i { margin-right: 10px; } .courses-details-wrapper .courses-details-information .information-list li .text { font-weight: 400; font-size: 18px; color: var(--header); text-align: right; display: inline-block; } @media (max-width: 1399px) { .courses-details-wrapper .courses-details-information .information-list li .text { font-size: 15px; } } .courses-details-wrapper .courses-details-information .information-list li .text.color-2 { color: var(--theme); } .courses-details-wrapper .courses-details-information .theme-btn { width: 100%; justify-content: center; } .courses-details-wrapper .courses-details-information .coming-soon-timer { display: flex; align-items: center; gap: 22px; max-width: 650px; margin: 30px auto; } @media (max-width: 1199px) { .courses-details-wrapper .courses-details-information .coming-soon-timer { flex-wrap: wrap; } } @media (max-width: 575px) { .courses-details-wrapper .courses-details-information .coming-soon-timer { gap: 5px; flex-wrap: initial; } } .courses-details-wrapper .courses-details-information .coming-soon-timer .timer-content h2 { width: 70px; height: 70px; line-height: 70px; border-radius: 50%; display: inline-block; background-color: transparent; border: 1px solid rgba(10, 37, 64, 0.2); text-align: center; color: var(--header); } @media (max-width: 575px) { .courses-details-wrapper .courses-details-information .coming-soon-timer .timer-content h2 { width: 65px; height: 65px; line-height: 65px; } } .courses-details-wrapper .courses-details-information .coming-soon-timer .timer-content p { font-weight: 600; font-size: 18px; margin-top: 10px; color: var(--header); text-align: center; } .courses-details-wrapper .courses-details-information .share-btn { font-size: 18px; font-weight: 600; color: var(--theme); display: inline-block; } .courses-details-wrapper .courses-details-information .share-btn i { margin-right: 5px; } .bg-thumb-image { position: relative; overflow: hidden; border-radius: 20px; } .bg-thumb-image img { width: 100%; height: 100%; border-radius: 20px; } .portfolio-4 .slider { min-height: 50vh; } .portfolio-4 .slider .swiper-slide { overflow: hidden; position: relative; } .portfolio-4 .slider .swiper-slide .slide-inner { position: absolute; width: 100%; height: 100vh; left: 0; top: 0; } .portfolio-4 .slider .swiper-slide .slide-inner::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(90deg, #0A2540 0%, rgba(10, 37, 64, 0) 52.4%, #0A2540 100%); z-index: 999; } .portfolio-4 .slider .swiper-slide .slide-inner img { position: absolute; width: 100vw; height: 100vh; object-fit: cover; left: 0; top: 0; bottom: 0; margin: auto; } .portfolio-4 .swiper-container { width: 100%; height: 100vh; position: relative; } .portfolio-4__content { z-index: 9; left: -140px; position: absolute; top: 350px; } @media (max-width: 1899px) { .portfolio-4__content { top: 282px; } } @media (max-width: 1399px) { .portfolio-4__content { top: 0; left: 50%; transform: translateX(-50%); margin-top: 120px; } } @media (max-width: 991px) { .portfolio-4__content { margin-top: 120px; } } @media (max-width: 575px) { .portfolio-4__content { margin-top: 140px; } } .portfolio-4__content-title { font-size: 260px; font-weight: 800; color: var(--white); text-transform: uppercase; transform: rotate(-90deg); } @media (max-width: 1899px) { .portfolio-4__content-title { font-size: 215px; } } @media (max-width: 1399px) { .portfolio-4__content-title { font-size: 185px; transform: initial; } } @media (max-width: 991px) { .portfolio-4__content-title { font-size: 150px; } } @media (max-width: 575px) { .portfolio-4__content-title { font-size: 100px; } } .portfolio-4__content .video-btn { width: 55px; height: 55px; line-height: 55px; display: inline-block; text-align: center; border-radius: 100px; background-color: var(--white); color: var(--theme); position: absolute; top: 90px; left: 415px; } @media (max-width: 1899px) { .portfolio-4__content .video-btn { top: 70px; left: 340px; } } @media (max-width: 1399px) { .portfolio-4__content .video-btn { left: 290px; } } @media (max-width: 991px) { .portfolio-4__content .video-btn { top: 75px; left: 230px; } } @media (max-width: 575px) { .portfolio-4__content .video-btn { top: 50px; left: 153px; width: 38px; height: 38px; line-height: 38px; } } .portfolio-4__content .video-btn::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; background-color: rgba(255, 255, 255, 0.1); width: 88px; height: 88px; border-radius: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 1899px) { .portfolio-4__content .video-btn::before { width: 80px; height: 80px; } } @media (max-width: 1399px) { .portfolio-4__content .video-btn::before { display: none; } } .portfolio-4 .hero-box { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 40px; padding: 50px; position: absolute; top: 150px; right: 180px; z-index: 999; } @media (max-width: 1899px) { .portfolio-4 .hero-box { top: 70px; } } @media (max-width: 1399px) { .portfolio-4 .hero-box { top: 320px; right: 90px; left: 90px; padding: 30px; } } @media (max-width: 991px) { .portfolio-4 .hero-box { top: 300px; right: 20px; left: 20px; } } @media (max-width: 575px) { .portfolio-4 .hero-box { top: 280px; } } .portfolio-4 .hero-box .icon-item { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 30px; margin-bottom: 30px; } @media (max-width: 575px) { .portfolio-4 .hero-box .icon-item { margin-bottom: 20px; padding-bottom: 20px; } } @media (max-width: 1399px) { .portfolio-4 .hero-box .icon-item.style-1 { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } } .portfolio-4 .hero-box .icon-item.style-2 { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } @media (max-width: 1399px) { .portfolio-4 .hero-box .icon-item.style-2 { display: none; } } .portfolio-4 .hero-box .icon-item span { color: var(--white); font-size: 24px; font-weight: 700; display: inline-block; margin-top: 10px; } .portfolio-4 .hero-box .icon-item p { max-width: 296px; font-weight: 500; color: var(--white); margin-top: 10px; } .portfolio-4 .swiper-slide-active .portfolio-4__item { animation-name: qodef-animate-slide-out; animation-duration: 1.3s; animation-fill-mode: forwards; } .portfolio-4__slider { width: 100vw; height: 100vh; } .portfolio-4 .portfolio-4-pagination-custom { position: absolute; left: 95%; bottom: 40px; z-index: 99999; cursor: pointer; color: #fff; margin: 0 5px; display: flex; gap: 5px; } @media (max-width: 1399px) { .portfolio-4 .portfolio-4-pagination-custom { left: 92%; bottom: 10px; } } @media (max-width: 991px) { .portfolio-4 .portfolio-4-pagination-custom { left: 90%; bottom: 20px; } } @media (max-width: 575px) { .portfolio-4 .portfolio-4-pagination-custom { left: 80%; } } .portfolio-4 .portfolio-4-pagination-custom .current { font-size: 14px; opacity: 0.6; margin-bottom: 5px; } .portfolio-4 .portfolio-4-pagination-custom .separator { font-size: 14px; opacity: 0.8; } .portfolio-4 .portfolio-4-pagination-custom .total { font-size: 20px; font-weight: 500; line-height: 1; } .portfolio-4 .portfolio-4-pagination-custom:hover .total { color: var(--theme); } .portfolio-4 { color: var(--white); } .portfolio-4 .portfolio-4-pagination { position: absolute; top: 40px; right: 40px; z-index: 9; display: flex; gap: 12px; transform: inherit; } .portfolio-4 .swiper-pagination-bullet { width: 10px; height: 10px; transition: 0.6s; background-color: transparent; border: 1.5px solid var(--theme); border-radius: 10px; } .portfolio-4 .swiper-pagination-bullet:not(:last-child) { margin-right: 5px; } .portfolio-4 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--theme); border: 1px solid var(--theme); transition: 0.6s; position: relative; } .hero-3 { position: relative; z-index: 9; border-radius: 20px; margin: 0 20px; padding: 280px 0 200px; margin-top: 65px; } @media (max-width: 1399px) { .hero-3 { margin: 10px; padding: 130px 0 110px; } } @media (max-width: 991px) { .hero-3 { padding: 130px 0 490px; } } .hero-3::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(180deg, #0A2540 0%, rgba(10, 37, 64, 0.3) 100%); border-radius: 20px; z-index: -1; } .hero-3 .hero-content h1 { color: var(--white); font-weight: 800; font-size: 92px; } @media (max-width: 1600px) { .hero-3 .hero-content h1 { font-size: 90px; } } @media (max-width: 1399px) { .hero-3 .hero-content h1 { font-size: 70px; } .hero-3 .hero-content h1 br { display: none; } } @media (max-width: 1199px) { .hero-3 .hero-content h1 { font-size: 60px; } } @media (max-width: 991px) { .hero-3 .hero-content h1 { font-size: 50px; line-height: 130% !important; } } @media (max-width: 767px) { .hero-3 .hero-content h1 { font-size: 40px; } } @media (max-width: 575px) { .hero-3 .hero-content h1 { font-size: 30px; } } @media (max-width: 470px) { .hero-3 .hero-content h1 { font-size: 30px; } } .hero-3 .hero-content p { color: var(--white); font-size: 18px; font-weight: 600; max-width: 498px; margin-top: 30px; margin-bottom: 40px; } .hero-3 .hero-content .theme-btn { color: var(--white); } .hero-3 .hero-content .theme-btn::after { border: 1px solid var(--white); background: transparent; } .hero-3 .hero-content .theme-btn::before { background-color: var(--theme); } .hero-3 .hero-main-card { position: absolute; right: 60px; bottom: 60px; max-width: 330px; } @media (max-width: 1399px) { .hero-3 .hero-main-card { bottom: 80px; right: 23px; } } @media (max-width: 991px) { .hero-3 .hero-main-card { left: 50%; transform: translateX(-50%); right: initial; } } .hero-3 .hero-main-card::before { position: absolute; content: ""; background-color: rgba(255, 255, 255, 0.2); width: 111px; height: 346px; top: 23px; left: -10px; z-index: -1; border-radius: 10px; } .hero-3 .hero-main-card::after { position: absolute; content: ""; background-color: rgba(255, 255, 255, 0.2); width: 111px; height: 346px; top: 23px; right: -10px; z-index: -1; border-radius: 10px; } .hero-3 .hero-main-card .hero-card { border-radius: 10px; background-color: rgb(255, 255, 255); padding: 20px; } .hero-3 .hero-main-card .hero-card .hero-item .hero-iamge img { width: 100%; height: 100%; border-radius: 10px; } .hero-3 .hero-main-card .hero-card .hero-item .content { margin-top: 20px; } .hero-3 .hero-main-card .hero-card .hero-item .content h2 { font-size: 20px; font-weight: 700; } .hero-3 .hero-main-card .hero-card .hero-item .content p { font-weight: 500; color: rgb(70, 90, 110); margin-top: 5px; } .hero-3 .hero-main-card .hero-card .hero-item .content span { background-color: var(--theme); color: var(--white); font-size: 14px; font-weight: 600; padding: 2px 10px; border-radius: 100px; display: inline-block; margin-top: 15px; } .hero-3 .hero-main-card .hero-card .swiper-dot { margin-top: 20px; z-index: 999; text-align: left; } .news-card-items { border-radius: 30px; padding: 20px; background-color: rgb(255, 255, 255); } .news-card-items.style-bg { background-color: var(--bg); } .news-card-items .news-image { position: relative; overflow: hidden; border-radius: 15px; } .news-card-items .news-image img { width: 100%; height: 100%; border-radius: 15px; display: inline-block; transition: all 500ms ease; } .news-card-items .news-image img:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; transform: translateX(50%) scaleX(2); opacity: 0; filter: blur(10px); } .news-card-items .news-content { margin-top: 25px; } .news-card-items .news-content .tag-items { display: flex; align-items: center; gap: 20px; margin-bottom: 15px; } .news-card-items .news-content .tag-items span { color: rgb(70, 90, 110); } .news-card-items .news-content .tag-items span i { margin-right: 5px; color: rgb(110, 231, 231); } .news-card-items .news-content h3 { font-size: 22px; } @media (max-width: 1399px) { .news-card-items .news-content h3 { font-size: 20px; } } .news-card-items .news-content h3 a { display: inline !important; background-image: linear-gradient(transparent calc(100% - 2px), var(--theme) 5px); background-repeat: no-repeat; background-size: 0% 100%; background-position: left top; transition: background-size 0.5s ease; } .news-card-items .news-content h3 a:hover { background-size: 100% 100%; } .news-card-items .news-content .info-item { margin-top: 30px; display: flex; align-items: center; gap: 10px; } .news-card-items .news-content .info-item .info-content h4 { font-size: 14px; font-weight: 500; color: rgb(70, 90, 110); } .news-card-items .news-content .info-item .info-content p { font-weight: 500; font-size: 14px; color: rgb(10, 37, 64); } .news-card-items:hover .news-image img:first-child { transform: translateX(0) scaleX(1); opacity: 1; filter: blur(0); } .news-card-items:hover .news-image img:nth-child(2) { transform: translateX(-50%) scaleX(2); opacity: 0; filter: blur(10px); } .news-section .section-title-area { border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 40px; margin-bottom: 40px; } @media (max-width: 1399px) { .news-section .section-title-area { margin-bottom: 30px; padding-bottom: 30px; } } .news-wrapper { margin-top: 48px; } @media (max-width: 575px) { .news-wrapper .news-thumb { height: 350px; } } .news-wrapper .news-thumb img { width: 100%; height: 100%; border-radius: 20px; } @media (max-width: 1399px) { .news-wrapper .news-thumb img { object-fit: cover; } } .news-wrapper .news-right-box { border: 1px solid rgba(10, 37, 64, 0.2); border-radius: 20px; padding: 30px; } .news-wrapper .news-right-box .news-card-items-2 { display: flex; align-items: center; gap: 30px; border-bottom: 1px solid rgba(2, 21, 36, 0.2); padding-bottom: 30px; margin-bottom: 30px; } @media (max-width: 575px) { .news-wrapper .news-right-box .news-card-items-2 { flex-wrap: wrap; } } .news-wrapper .news-right-box .news-card-items-2.style-2 { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .news-wrapper .news-right-box .news-card-items-2 .news-image { position: relative; max-width: 380px; } @media (max-width: 1399px) { .news-wrapper .news-right-box .news-card-items-2 .news-image { max-width: initial; height: 270px; } .news-wrapper .news-right-box .news-card-items-2 .news-image img { object-fit: cover; } } @media (max-width: 575px) { .news-wrapper .news-right-box .news-card-items-2 .news-image { height: initial; } .news-wrapper .news-right-box .news-card-items-2 .news-image img { object-fit: initial; } } .news-wrapper .news-right-box .news-card-items-2 .news-image img { width: 100%; height: 100%; border-radius: 6px; } .news-wrapper .news-right-box .news-card-items-2 .news-content .tag-item { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; } .news-wrapper .news-right-box .news-card-items-2 .news-content .tag-item span { color: var(--white); background-color: var(--theme); border-radius: 4px; text-transform: uppercase; padding: 3px 10px; } .news-wrapper .news-right-box .news-card-items-2 .news-content h3 { font-weight: 500; } @media (max-width: 1399px) { .news-wrapper .news-right-box .news-card-items-2 .news-content h3 { font-size: 20px; } .news-wrapper .news-right-box .news-card-items-2 .news-content h3 br { display: none; } } .news-wrapper .news-right-box .news-card-items-2 .news-content h3 a { display: inline !important; background-image: linear-gradient(transparent calc(100% - 2px), var(--theme) 5px); background-repeat: no-repeat; background-size: 0% 100%; background-position: left top; transition: background-size 0.5s ease; } .news-wrapper .news-right-box .news-card-items-2 .news-content h3 a:hover { background-size: 100% 100%; } .news-wrapper .news-right-box .news-card-items-2 .news-content .info-item { margin-top: 30px; display: flex; align-items: center; gap: 10px; } .news-wrapper .news-right-box .news-card-items-2 .news-content .info-item .info-content h4 { font-size: 16px; font-weight: 500; } .news-wrapper .news-right-box .news-card-items-2 .news-content .info-item .info-content p { font-weight: 400; font-size: 12px; color: rgb(70, 90, 110); } .news-standard-item { margin-bottom: 30px; border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 30px; } .news-standard-item .news-image { overflow: hidden; border-radius: 12px; } .news-standard-item .news-image img { width: 100%; height: 100%; transform: scale(1.02); transition: all 1.5s ease-out; border-radius: 12px; } .news-standard-item .news-content .date-list { display: flex; align-items: center; gap: 20px; margin-top: 24px; margin-bottom: 15px; } @media (max-width: 1199px) { .news-standard-item .news-content .date-list { flex-wrap: wrap; gap: 10px; } } .news-standard-item .news-content .date-list li i { margin-right: 10px; } .news-standard-item .news-content h2 { margin-bottom: 20px; font-size: 32px; font-weight: 600; } @media (max-width: 1199px) { .news-standard-item .news-content h2 { font-size: 30px; } } @media (max-width: 575px) { .news-standard-item .news-content h2 { font-size: 25px; } } .news-standard-item .news-content h2 a { display: inline !important; background-image: linear-gradient(transparent calc(100% - 2px), var(--theme) 5px); background-repeat: no-repeat; background-size: 0% 100%; background-position: left top; transition: background-size 0.5s ease; } .news-standard-item .news-content h2 a:hover { background-size: 100% 100%; } .news-standard-item .news-content .theme-btn { margin-top: 24px; } .news-standard-item:hover .news-image img { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } .main-sideber { width: 100%; padding: 0; position: sticky; top: 120px; } .main-sideber .single-sideber-widget { margin-bottom: 30px; background-color: var(--bg); padding: 30px; border-radius: 8px; } @media (max-width: 1399px) { .main-sideber .single-sideber-widget { padding: 25px; } } .main-sideber .single-sideber-widget .widget-title { margin-bottom: 20px; } .main-sideber .single-sideber-widget .widget-title h3 { font-weight: 600; font-size: 22px; } .main-sideber .single-sideber-widget .recent-post-area .recent-items { display: flex; align-items: center; gap: 20px; } .main-sideber .single-sideber-widget .recent-post-area .recent-items .recent-thumb img { border-radius: 8px; width: 110px; } .main-sideber .single-sideber-widget .recent-post-area .recent-items:not(:last-child) { margin-bottom: 20px; } .main-sideber .single-sideber-widget .recent-post-area .recent-items .recent-content h4 { margin-bottom: 5px; font-weight: 600; font-size: 18px; line-height: 150%; font-family: "Plus Jakarta Sans", sans-serif; } @media (max-width: 1399px) { .main-sideber .single-sideber-widget .recent-post-area .recent-items .recent-content h4 { font-size: 16px; } } .main-sideber .single-sideber-widget .recent-post-area .recent-items .recent-content h4 a:hover { color: var(--theme); } .main-sideber .single-sideber-widget .recent-post-area .recent-items .recent-content ul li { color: var(--text); font-weight: 500; } .blog-post-details .single-blog-post .post-featured-thumb { border-radius: 10px; } .blog-post-details .single-blog-post .post-featured-thumb img { width: 100%; height: 100%; border-radius: 10px; } .blog-post-details .single-blog-post .post-content { margin-top: 30px; } .blog-post-details .single-blog-post .post-content p { font-size: 15px; margin-bottom: 15px; } .blog-post-details .single-blog-post .post-content .post-list { gap: 30px; margin-bottom: 20px; } .blog-post-details .single-blog-post .post-content .post-list li { font-size: 14px; font-weight: 500; } .blog-post-details .single-blog-post .post-content .post-list li i { color: var(--theme); margin-right: 5px; } .blog-post-details .single-blog-post .post-content h2 { margin-bottom: 30px; font-size: 42px; } @media (max-width: 1399px) { .blog-post-details .single-blog-post .post-content h2 { font-size: 35px; } } @media (max-width: 991px) { .blog-post-details .single-blog-post .post-content h2 { font-size: 30px; } } @media (max-width: 575px) { .blog-post-details .single-blog-post .post-content h2 { font-size: 21px; } } .blog-post-details .single-blog-post .post-content h2 a:hover { color: var(--theme); } .blog-post-details .single-blog-post .post-content .hilight-text { border-left: 4px solid var(--theme); padding: 40px; background-color: var(--bg); border-radius: 8px; } @media (max-width: 1399px) { .blog-post-details .single-blog-post .post-content .hilight-text { padding: 30px; } } .blog-post-details .single-blog-post .post-content .hilight-text p { max-width: 700px; font-weight: 500; text-transform: capitalize; font-style: italic; line-height: 26px; } .blog-post-details .single-blog-post .post-content .hilight-text .icon { float: right; margin-top: -30px; color: var(--theme); font-size: 40px; } .blog-post-details .single-blog-post .post-content .details-image img { width: 100%; height: 100%; border-radius: 8px; } .project-wrapper-4 { border-top: 1px solid rgba(10, 37, 64, 0.2); padding-top: 120px; } @media (max-width: 1399px) { .project-wrapper-4 { padding-top: 100px; } } @media (max-width: 991px) { .project-wrapper-4 { padding-top: 80px; } } .project-wrapper-4 .project-thumb { position: relative; overflow: hidden; z-index: 9; margin-bottom: 60px; max-width: 665px; } @media (max-width: 1399px) { .project-wrapper-4 .project-thumb { margin-bottom: 30px !important; max-width: initial; } } .project-wrapper-4 .project-thumb::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; background-color: rgba(10, 37, 64, 0.3); border-radius: 20px; } .project-wrapper-4 .project-thumb img { width: 100%; height: 100%; border-radius: 20px; } .project-wrapper-4 .project-thumb .text { font-size: 30px; font-weight: 800; position: absolute; left: 60px; bottom: 60px; } @media (max-width: 1399px) { .project-wrapper-4 .project-thumb .text { font-size: 25px; left: 30px; bottom: 30px; } } .project-wrapper-4 .project-thumb .text a { display: inline !important; background-image: linear-gradient(transparent calc(100% - 2px), var(--white) 5px); background-repeat: no-repeat; background-size: 0% 100%; background-position: left top; transition: background-size 0.5s ease; color: var(--white); } .project-wrapper-4 .project-thumb .text a:hover { background-size: 100% 100%; } .project-details-wrapper .details-top-img { /* border-radius: 12px; */ } @media (max-width: 991px) { .project-details-wrapper .details-top-img { height: 600px; } .project-details-wrapper .details-top-img img { object-fit: cover; } } .project-details-wrapper .details-top-img img { /* width: 100%; */ /* height: 100%; */ /* border-radius: 12px; */ } .project-details-wrapper .project-details-content { margin-top: 30px; } .project-details-wrapper .project-details-content .details_cs { box-shadow: 0px 0px 10px #ececec; border-radius: 15px; padding: 20px; margin-bottom: 25px; } .project-details-wrapper .project-details-content .details_cs:last-child{margin-bottom:0} .project-details-wrapper .project-details-content h2 { font-size: 58px; } @media (max-width: 1399px) { .project-details-wrapper .project-details-content h2 { font-size: 44px; } } @media (max-width: 1199px) { .project-details-wrapper .project-details-content h2 { font-size: 40px; } } @media (max-width: 991px) { .project-details-wrapper .project-details-content h2 { font-size: 36px; } } @media (max-width: 767px) { .project-details-wrapper .project-details-content h2 { font-size: 40px; } } @media (max-width: 575px) { .project-details-wrapper .project-details-content h2 { font-size: 30px; } } .project-details-wrapper .project-details-content h3 { font-size: 20px; font-weight: 600; color: var(--theme); margin-bottom: 20px; position: relative; } .project-details-wrapper .project-details-content h3:after{content:'';width: 35px;height: 2px;background: var(--theme);position: absolute;left: 0;bottom: -4px;} .project-details-wrapper .project-details-content p { font-size: 15px; margin-bottom: 15px; } @media (max-width: 1199px) { .project-details-wrapper .project-details-content h3 { font-size: 28px; } } @media (max-width: 575px) { .project-details-wrapper .project-details-content h3 { font-size: 25px; } } .project-details-wrapper .project-details-content .project-list-items { display: flex; gap: 60px; margin-top: 30px; } @media (max-width: 1199px) { .project-details-wrapper .project-details-content .project-list-items { flex-wrap: wrap; gap: 15px; } } .project-details-wrapper .project-details-content .project-list-items ul li { font-weight: 500; } .project-details-wrapper .project-details-content .project-list-items ul li i { color: var(--theme); margin-right: 10px; } .project-details-wrapper .project-details-content .project-list-items ul li:not(:last-child) { margin-bottom: 15px; } .project-details-wrapper .project-details-sidebar { margin-top: 30px; } .project-details-wrapper .project-details-sidebar .sidebar-widget-image { position: relative; } .project-details-wrapper .project-details-sidebar .sidebar-widget-image img { width: 100%; height: 100%; border-radius: 8px; } .project-details-wrapper .project-details-sidebar .sidebar-widget-image .content { position: absolute; padding: 25px; bottom: 25px; left: 25px; } @media (max-width: 1399px) { .project-details-wrapper .project-details-sidebar .sidebar-widget-image .content { left: 20px; bottom: 20px; padding: 20px; } } .project-details-wrapper .project-details-sidebar .sidebar-widget-image .content .icon { font-size: 70px; color: var(--white); margin-bottom: 35px; } .project-details-wrapper .project-details-sidebar .sidebar-widget-image .content h3 { margin-top: 15px; color: var(--white); font-size: 32px; font-weight: 600; } @media (max-width: 1399px) { .project-details-wrapper .project-details-sidebar .sidebar-widget-image .content h3 { font-size: 25px; } } @media (max-width: 991px) { .project-details-wrapper .project-details-sidebar .sidebar-widget-image .content h3 { font-size: 30px; } } .project-details-wrapper .project-details-sidebar .sidebar-widget-image .content .theme-btn { margin-top: 30px; } .project-details-wrapper .project-details-sidebar .sidebar-widget-image .white-logo { position: absolute; top: 50px; left: 50px; } .service-section { position: relative; z-index: 9; } .service-section::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; background-color: rgba(10, 37, 64, 0.6); z-index: -1; } .service-section .top-shape { position: absolute; top: 0; left: 0; right: 0; } @media (max-width: 1399px) { .service-section .top-shape { top: -10px; } } .service-section .top-shape img { width: 100%; height: 100%; } .service-section .bottom-shape { position: absolute; bottom: 0; left: 0; right: 0; } @media (max-width: 1399px) { .service-section .bottom-shape { bottom: -10px; } } .service-section .bottom-shape img { width: 100%; height: 100%; } .service-section-2 { background-color: rgb(245, 247, 250); position: relative; } .service-section-2 .top-shape { position: absolute; top: 0; left: 0; right: 0; } .service-section-2 .top-shape img { width: 100%; height: 100%; } @media (max-width: 1399px) { .service-section-2 .top-shape { top: -10px; } } .service-section-2 .section-title-area { border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 40px; margin-bottom: 150px; } .service-section-2 .service-slider-2 { margin-left: -200px; margin-right: -200px; overflow: visible; } @media (max-width: 1399px) { .service-section-2 .service-slider-2 { margin-left: 10px; margin-right: 10px; } } .service-section-2 .swiper-slide.swiper-slide-active .service-box-items { border: 1px solid var(--theme); transform: translateY(-120px); } .service-section-2 .swiper-slide-prev .service-box-items { transform: translateY(-60px); } .service-section-2 .swiper-slide-next .service-box-items { transform: translateY(-60px); } .service-section-2 .swiper-dot { margin-top: -60px; } .service-section-2 .shape-image { position: absolute; left: 660px; top: -80px; } @media (max-width: 1399px) { .service-section-2 .shape-image { display: none; } } .service-section-2 .shape-image img { display: block; animation: floatShip 4s ease-in-out infinite; transform-origin: center bottom; } @media (max-width: 1399px) { .service-section-2 { overflow: hidden; } } .service-box-items { margin-top: 30px; padding: 30px; background-color: var(--white); border-radius: 20px; transition: all 0.4s ease-in-out; } @media (max-width: 1600px) { .service-box-items { padding: 20px; } } @media (max-width: 1399px) { .service-box-items { padding: 25px; } } .service-box-items .service-image { position: relative; overflow: hidden; border-radius: 10px; } .service-box-items .service-image img { width: 100%; height: 100%; border-radius: 10px; display: inline-block; transition: all 500ms ease; } .service-box-items .service-image img:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; transform: translateX(50%) scaleX(2); opacity: 0; filter: blur(10px); } .service-box-items .service-content { margin-top: 30px; } .service-box-items .service-content .tags-item { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; } @media (max-width: 1600px) { .service-box-items .service-content .tags-item { gap: 10px; } } @media (max-width: 575px) { .service-box-items .service-content .tags-item { flex-wrap: wrap; } } .service-box-items .service-content .tags-item span { border: 1px solid rgba(255, 107, 107, 0.2); padding: 6px 10px; border-radius: 100px; font-size: 14px; font-weight: 500; color: rgb(255, 107, 107); } @media (max-width: 1600px) { .service-box-items .service-content .tags-item span { font-size: 12px; } } @media (max-width: 1399px) { .service-box-items .service-content .tags-item span { font-size: 14px; } } @media (max-width: 991px) { .service-box-items .service-content .tags-item span { padding: 4px 7px; font-size: 13px; } } @media (max-width: 575px) { .service-box-items .service-content .tags-item span { padding: 6px 10px; font-size: 14px; } } .service-box-items .service-content .tags-item span img { margin-right: 6px; margin-top: -2px; } .service-box-items .service-content .arrow { width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 100px; border: 1px solid rgba(15, 185, 177, 0.2); color: rgb(15, 185, 177); display: inline-block; transition: all 0.4s ease-in-out; margin-top: 30px; } .service-box-items .service-content .arrow:hover { background-color: var(--theme); color: var(--white); } .service-box-items:hover .service-image img:first-child { transform: translateX(0) scaleX(1); opacity: 1; filter: blur(0); } .service-box-items:hover .service-image img:nth-child(2) { transform: translateX(-50%) scaleX(2); opacity: 0; filter: blur(10px); } .service-inner-wrapper { border-top: 1px solid rgba(10, 37, 64, 0.2); padding-top: 120px; } @media (max-width: 1399px) { .service-inner-wrapper { padding-top: 100px; } } @media (max-width: 991px) { .service-inner-wrapper { padding-top: 80px; } } .service-inner-wrapper .service-inner-box-item { background-color: var(--bg); padding: 30px; border-radius: 10px; position: relative; margin-bottom: 60px; } @media (max-width: 1399px) { .service-inner-wrapper .service-inner-box-item { margin-bottom: 30px !important; } } .service-inner-wrapper .service-inner-box-item .hover-image { position: absolute; top: 0; left: 0; transform: scale(0); width: 100%; height: 100%; transform-origin: left right; transition: all 0.5s 0s ease-out; bottom: 0; } .service-inner-wrapper .service-inner-box-item .hover-image::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; border-radius: 10px; background-color: rgba(10, 37, 64, 0.7); } .service-inner-wrapper .service-inner-box-item .hover-image img { width: 100%; height: 100%; display: block; border-radius: 10px; } .service-inner-wrapper .service-inner-box-item .icon { width: 86px; height: 86px; line-height: 86px; text-align: center; border-radius: 100px; background-color: var(--white); margin-bottom: 130px; } @media (max-width: 1399px) { .service-inner-wrapper .service-inner-box-item .icon { margin-bottom: 60px; } } .service-inner-wrapper .service-inner-box-item .service-content h2 { font-size: 30px; font-weight: 800; } @media (max-width: 1399px) { .service-inner-wrapper .service-inner-box-item .service-content h2 { font-size: 20px; } } .service-inner-wrapper .service-inner-box-item .service-content h2 a { display: inline !important; background-image: linear-gradient(transparent calc(100% - 2px), var(--theme) 5px); background-repeat: no-repeat; background-size: 0% 100%; background-position: left top; transition: background-size 0.5s ease; color: rgb(10, 37, 64); } .service-inner-wrapper .service-inner-box-item .service-content h2 a:hover { background-size: 100% 100%; } .service-inner-wrapper .service-inner-box-item .service-content p { color: rgb(70, 90, 110); margin-bottom: 45px; margin-top: 15px; } .service-inner-wrapper .service-inner-box-item.active .icon, .service-inner-wrapper .service-inner-box-item:hover .icon { position: relative; z-index: 9; } .service-inner-wrapper .service-inner-box-item.active h2, .service-inner-wrapper .service-inner-box-item:hover h2 { position: relative; z-index: 999; } .service-inner-wrapper .service-inner-box-item.active h2 a, .service-inner-wrapper .service-inner-box-item:hover h2 a { color: var(--white); } .service-inner-wrapper .service-inner-box-item.active p, .service-inner-wrapper .service-inner-box-item:hover p { color: var(--white); position: relative; z-index: 999; } .service-inner-wrapper .service-inner-box-item.active .theme-btn.style-border, .service-inner-wrapper .service-inner-box-item:hover .theme-btn.style-border { color: var(--white); } .service-inner-wrapper .service-inner-box-item.active .theme-btn.style-border::after, .service-inner-wrapper .service-inner-box-item:hover .theme-btn.style-border::after { background-color: var(--theme); border: 1px solid rgb(15, 185, 177); } .service-inner-wrapper .service-inner-box-item.active .theme-btn.style-border::before, .service-inner-wrapper .service-inner-box-item:hover .theme-btn.style-border::before { background: var(--header); } .service-inner-wrapper .service-inner-box-item.active .hover-image, .service-inner-wrapper .service-inner-box-item:hover .hover-image { transform: scale(1); } .service-inner-wrapper .service-single-image { margin-bottom: 60px; position: relative; overflow: hidden; } @media (max-width: 1399px) { .service-inner-wrapper .service-single-image { margin-bottom: 30px; height: 435px; } } @media (max-width: 991px) { .service-inner-wrapper .service-single-image { height: initial; } } .service-inner-wrapper .service-single-image img { width: 100%; height: 100%; border-radius: 10px; } .service-details-wrapper .service-top-img { border-radius: 12px; } .service-details-wrapper .service-top-img img { width: 100%; height: 100%; border-radius: 12px; } .service-details-wrapper .service-details-content { margin-top: 30px; } .service-details-wrapper .service-details-content h2 { font-size: 55px; } @media (max-width: 1399px) { .service-details-wrapper .service-details-content h2 { font-size: 44px; } } @media (max-width: 1199px) { .service-details-wrapper .service-details-content h2 { font-size: 40px; } } @media (max-width: 991px) { .service-details-wrapper .service-details-content h2 { font-size: 36px; } } @media (max-width: 767px) { .service-details-wrapper .service-details-content h2 { font-size: 40px; } } @media (max-width: 575px) { .service-details-wrapper .service-details-content h2 { font-size: 30px; } } .service-details-wrapper .service-details-content h3 { font-size: 32px; font-weight: 600; margin-top: 30px; } .service-details-wrapper .service-details-content .service-list-items { display: flex; gap: 60px; margin-top: 30px; } @media (max-width: 1199px) { .service-details-wrapper .service-details-content .service-list-items { flex-wrap: wrap; gap: 15px; } } .service-details-wrapper .service-details-content .service-list-items ul li { font-weight: 500; } .service-details-wrapper .service-details-content .service-list-items ul li i { color: var(--theme); margin-right: 10px; } .service-details-wrapper .service-details-content .service-list-items ul li:not(:last-child) { margin-bottom: 15px; } .service-details-wrapper .service-details-content .service-box-area { margin-top: 40px; } .service-details-wrapper .service-details-content .service-box-area .service-box-items { background-color: var(--bg); border-radius: 10px; padding: 30px 20px; } .service-details-wrapper .service-details-content .service-box-area .service-box-items .number { width: 38px; height: 38px; line-height: 38px; border-radius: 50%; background-color: var(--theme); color: var(--white); font-size: 16px; display: block; text-align: center; font-weight: 700; } .service-details-wrapper .service-details-content .service-box-area .service-box-items h3 { font-size: 18px; font-weight: 500; margin-top: 20px; } .service-details-wrapper .service-details-content .service-box-area .service-box-items p { margin-top: 10px; } .service-details-wrapper .service-details-content .faq-items .accordion .accordion-item { border: none; margin-bottom: 15px; background-color: transparent; border: 1px solid rgba(10, 37, 64, 0.2); padding: 0; border-radius: 15px !important; } .service-details-wrapper .service-details-content .faq-items .accordion .accordion-item h2 button { font-size: 20px; line-height: 1; font-weight: 700; box-shadow: none; padding: 28px 20px; font-family: "Plus Jakarta Sans", sans-serif; color: rgb(10, 37, 64); text-transform: capitalize; } @media (max-width: 1399px) { .service-details-wrapper .service-details-content .faq-items .accordion .accordion-item h2 button { font-size: 18px; } } @media (max-width: 575px) { .service-details-wrapper .service-details-content .faq-items .accordion .accordion-item h2 button { font-size: 16px; } } .service-details-wrapper .service-details-content .faq-items .accordion .accordion-item .accordion-body { background-color: var(--white); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding-left: 20px; padding-top: 0px; padding-bottom: 28px; } .service-details-wrapper .service-details-content .faq-items .accordion .accordion-item .accordion-body p { color: rgb(70, 90, 110); line-height: 26px; font-weight: 400; font-size: 16px; text-align: left; max-width: 556px; } @media (max-width: 575px) { .service-details-wrapper .service-details-content .faq-items .accordion .accordion-item .accordion-body p { width: 100%; font-size: 14px; line-height: 28px; } } .service-details-wrapper .service-details-content .faq-items .accordion .accordion-button { background-color: var(--white); color: var(--theme) !important; border-top-left-radius: 15px; border-top-right-radius: 15px; } .service-details-wrapper .service-details-content .faq-items .accordion .accordion-button::after { display: none; } .service-details-wrapper .service-details-content .faq-items .accordion .accordion-button::before { position: absolute; content: "\f077"; font-family: "Font Awesome 6 Pro"; font-weight: 700; top: 30px; right: 22px; font-size: 18px; text-align: center; transition: all 0.4s ease-in-out; color: var(--theme); } .service-details-wrapper .service-details-content .faq-items .accordion .accordion-button.collapsed { background-color: transparent; color: rgb(10, 37, 64) !important; } .service-details-wrapper .service-details-content .faq-items .accordion .accordion-button.collapsed::before { content: "\f078"; font-family: "Font Awesome 6 Pro"; color: rgb(70, 90, 110); } .service-details-wrapper .service-details-sidebar { margin-top: 30px; } .service-details-wrapper .service-details-sidebar .sidebar-widget { padding: 40px 35px; border-radius: 10px; background-color: var(--bg); margin-bottom: 30px; } @media (max-width: 1399px) { .service-details-wrapper .service-details-sidebar .sidebar-widget { padding: 30px; } } .service-details-wrapper .service-details-sidebar .sidebar-widget .sideber-title { margin-bottom: 25px; } .service-details-wrapper .service-details-sidebar .sidebar-widget .sideber-title h3 { font-size: 24px; font-weight: 500; display: inline-block; } .service-details-wrapper .service-details-sidebar .sidebar-widget .sideber-title h3 i { color: var(--theme); font-size: 16px; margin-right: 7px; } .service-details-wrapper .service-details-sidebar .sidebar-widget .project-infrom li { display: flex; justify-content: space-between; align-items: center; background-color: var(--white); padding: 14px 20px; border-radius: 8px; color: var(--header); font-size: 16px; font-weight: 500; } .service-details-wrapper .service-details-sidebar .sidebar-widget .project-infrom li span { color: var(--header); font-size: 16px; font-weight: 500; } .service-details-wrapper .service-details-sidebar .sidebar-widget .project-infrom li:not(:last-child) { margin-bottom: 30px; } .service-details-wrapper .service-details-sidebar .sidebar-widget-image { position: relative; } .service-details-wrapper .service-details-sidebar .sidebar-widget-image img { width: 100%; height: 100%; border-radius: 8px; } .service-details-wrapper .service-details-sidebar .sidebar-widget-image .content { position: absolute; padding: 25px; bottom: 25px; left: 25px; right: 25px; } @media (max-width: 1399px) { .service-details-wrapper .service-details-sidebar .sidebar-widget-image .content { bottom: 20px; left: 20px; right: 20px; padding: 20px; } } .service-details-wrapper .service-details-sidebar .sidebar-widget-image .content .icon { font-size: 70px; color: var(--white); margin-bottom: 35px; } .service-details-wrapper .service-details-sidebar .sidebar-widget-image .content h3 { margin-top: 15px; color: var(--white); font-size: 32px; font-weight: 600; } @media (max-width: 1399px) { .service-details-wrapper .service-details-sidebar .sidebar-widget-image .content h3 { font-size: 24px; } } .service-details-wrapper .service-details-sidebar .sidebar-widget-image .content .theme-btn { margin-top: 30px; } .service-details-wrapper .service-details-sidebar .sidebar-widget-image .white-logo { position: absolute; top: 50px; left: 50px; } .service-details-wrapper .service-details-sidebar .service-list-item li { font-size: 16px; font-weight: 600; font-family: "Plus Jakarta Sans", sans-serif; } .service-details-wrapper .service-details-sidebar .service-list-item li:not(:last-child) { margin-bottom: 10px; } .service-details-wrapper .service-details-sidebar .service-list-item li a { color: var(--header); display: flex; align-items: center; justify-content: space-between; background-color: var(--white); padding: 20px 24px; line-height: 1; border-radius: 8px; } .service-details-wrapper .service-details-sidebar .service-list-item li a:hover { background-color: var(--theme); color: var(--white); } .testimonial-card-item { display: flex; align-items: center; gap: 30px; } @media (max-width: 575px) { .testimonial-card-item { flex-wrap: wrap; } } @media (max-width: 575px) { .testimonial-card-item .testimonial-image { /* flex-basis: 100%; */ } } .testimonial-card-item .testimonial-auth { display: flex; gap: 15px; } .testimonial-card-item .testimonial-auth .testimonial-image{ width: 55px; height: 55px; border-radius: 51px; overflow: hidden; } .testimonial-card-item .testimonial-image img { width: 100%; height: 100%; object-fit: cover; } .testimonial-card-item .testimonial-content { background-color: var(--white); border-radius: 30px; padding: 30px; } @media (max-width: 575px) { .testimonial-card-item .testimonial-content { flex-basis: 100%; } } .testimonial-card-item .testimonial-content span { font-size: 14px; font-weight: 500; color: rgb(15, 185, 177); text-transform: capitalize; } .testimonial-card-item .testimonial-content p { font-size: 18px; font-weight: 500; font-style: italic; color: rgb(70, 90, 110); margin-top: 45px; margin-bottom: 45px; } @media (max-width: 1399px) { .testimonial-card-item .testimonial-content p { margin-top: 25px; margin-bottom: 25px; } } @media (max-width: 991px) { .testimonial-card-item .testimonial-content p { margin-top: 45px; margin-bottom: 45px; } } .testimonial-section { position: relative; } .testimonial-section .testimonial-slider { margin-right: -750px; } @media (max-width: 1399px) { .testimonial-section .testimonial-slider { margin-right: 0; } } .testimonial-section .section-title-area { border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 40px; margin-bottom: 50px !important; } .testimonial-section .section-title-area .swiper-dot { width: 79px; height: 33px; background-color: var(--white); border-radius: 100px; margin-top: 0; } .testimonial-section .line-shape { height: 90px; width: 100%; animation: grassMove 3s linear infinite; position: absolute; left: 0; right: 0; bottom: 0; } .testimonial-section.style-1 { background-color: rgb(10, 37, 64); } .testimonial-section.style-1 .section-title-area .swiper-dot { background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.2); } .testimonial-section.style-1 .section-title-area .swiper-dot .swiper-pagination-bullet { width: 10px; height: 10px; transition: 0.6s; background: #D9D9D9; opacity: 1; border: none; border-radius: 10px; } .testimonial-section.style-1 .section-title-area .swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--theme); border: 1px solid var(--theme); transition: 0.6s; position: relative; } .testimonial-box-items-2 { position: relative; transition: all 0.4s ease-in-out; padding: 30px; } .testimonial-box-items-2::before { position: absolute; content: ""; inset: 0; opacity: 0; transform: scale(1, 0.3); background-color: rgb(245, 247, 250); transition: all 500ms ease; border-radius: 20px; } .testimonial-box-items-2 h2 { font-size: 20px; font-weight: 700; line-height: 145%; margin-top: 10px; } .testimonial-box-items-2 p { font-weight: 500; color: rgb(70, 90, 110); max-width: 390px; margin-bottom: 15px; margin-top: 80px; } .testimonial-box-items-2 .star { color: rgb(255, 193, 7); } .testimonial-box-items-2:hover::before { opacity: 1; transform: scale(1, 1); } .testimonial-box-items-2:hover .client-image { position: relative; } .testimonial-box-items-2:hover h2 { position: relative; } .testimonial-box-items-2:hover span { position: relative; } .testimonial-box-items-2:hover p { position: relative; } .testimonial-box-items-2:hover .star { position: relative; } .testimonial-section-2 { position: relative; } .testimonial-section-2 .swiper-slide.swiper-slide-active .testimonial-box-items-2::before { opacity: 1; transform: scale(1, 1); } .testimonial-section-2 .swiper-slide.swiper-slide-active .testimonial-box-items-2 .client-image { position: relative; } .testimonial-section-2 .swiper-slide.swiper-slide-active .testimonial-box-items-2 h2 { position: relative; } .testimonial-section-2 .swiper-slide.swiper-slide-active .testimonial-box-items-2 span { position: relative; } .testimonial-section-2 .swiper-slide.swiper-slide-active .testimonial-box-items-2 p { position: relative; } .testimonial-section-2 .swiper-slide.swiper-slide-active .testimonial-box-items-2 .star { position: relative; } .testimonial-section-2::before { position: absolute; content: ""; background-color: rgba(10, 37, 64, 0.2); height: 394px; width: 1px; top: 120px; left: 710px; } @media (max-width: 1600px) { .testimonial-section-2::before { left: 480px; } } @media (max-width: 1399px) { .testimonial-section-2::before { display: none; } } .testimonial-section-2::after { position: absolute; content: ""; background-color: rgba(10, 37, 64, 0.2); height: 394px; width: 1px; top: 120px; right: 710px; } @media (max-width: 1600px) { .testimonial-section-2::after { right: 480px; } } @media (max-width: 1399px) { .testimonial-section-2::after { display: none; } } .testimonial-section-2 .array-button { display: flex; align-items: center; justify-content: space-between; position: absolute; left: 180px; right: 180px; top: 300px; } .testimonial-section-2 .array-button .array-prev, .testimonial-section-2 .array-button .array-next { width: 46px; height: 46px; line-height: 46px; text-align: center; border-radius: 100px; color: rgb(15, 185, 177); border: 1px solid rgba(15, 185, 177, 0.2); transition: all 0.4s ease-in-out; background-color: transparent; } .testimonial-section-2 .array-button .array-prev:hover, .testimonial-section-2 .array-button .array-next:hover { background-color: var(--theme); color: var(--white); } .testimonial-wrapper-3 { border-bottom: 1px solid rgba(10, 37, 64, 0.2); padding-bottom: 40px; } @media (max-width: 1399px) { .testimonial-wrapper-3 { padding-bottom: 30px; } } .testimonial-wrapper-3 .testimonial-content-3 h2 { font-size: 20px; font-weight: 700; margin-top: 10px; } .testimonial-wrapper-3 .testimonial-content-3 span { font-size: 14px; font-weight: 500; color: rgb(15, 185, 177); } .testimonial-wrapper-3 .testimonial-content-3 p { font-size: 24px; font-weight: 600; color: rgb(70, 90, 110); margin-top: 20px; margin-bottom: 20px; max-width: 810px; line-height: 40px; } @media (max-width: 1399px) { .testimonial-wrapper-3 .testimonial-content-3 p { font-size: 16px; line-height: 28px; } } .testimonial-wrapper-3 .testimonial-content-3 .star { color: rgb(255, 193, 7); } .testimonial-wrapper-3 .array-button { display: flex; align-items: center; gap: 20px; margin-top: 50px; margin-left: 200px; } @media (max-width: 1399px) { .testimonial-wrapper-3 .array-button { margin-left: 0; margin-top: 0; } } .testimonial-wrapper-3 .array-button .array-prev, .testimonial-wrapper-3 .array-button .array-next { background-color: rgb(245, 247, 250); width: 79px; height: 45px; border-radius: 100px; color: rgb(10, 37, 64); transition: all 0.4s ease-in-out; line-height: 45px; border: none; } .testimonial-wrapper-3 .array-button .array-prev:hover, .testimonial-wrapper-3 .array-button .array-next:hover { background-color: var(--header); color: var(--white); } .array-button { display: flex; align-items: center; gap: 15px; z-index: 999; } .array-button .array-prev { border-radius: 100px; border: 1px solid #E6E8EB; width: 54px; height: 54px; line-height: 54px; text-align: center; border-radius: 50%; color: var(--header); transition: all 0.4s ease-in-out; cursor: pointer; } .array-button .array-prev:hover { background-color: var(--theme); color: var(--white); } .array-button .array-next { border-radius: 100px; background-color: var(--theme); width: 54px; height: 54px; line-height: 54px; text-align: center; border-radius: 50%; color: var(--white); transition: all 0.4s ease-in-out; cursor: pointer; } .array-button .array-next:hover { background-color: var(--header); } .swiper-dot { position: relative; text-align: center; margin-top: 45px; } @media (max-width: 1399px) { .swiper-dot { margin-top: 30px; } } .swiper-dot .swiper-pagination-bullet { width: 10px; height: 10px; transition: 0.6s; background-color: transparent; border: 1.5px solid var(--theme); border-radius: 10px; } .swiper-dot .swiper-pagination-bullet:not(:last-child) { margin-right: 5px; } .swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--theme); border: 1px solid var(--theme); transition: 0.6s; position: relative; } ::-webkit-scrollbar { width: 6px; height: 6px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px var(--bg); border-radius: 5px; } /* Handle */ ::-webkit-scrollbar-thumb { background: var(--theme); border-radius: 10px; } .bg-cover { background-repeat: no-repeat; background-size: cover; position: relative; background-position: center; } .fix { overflow: hidden; } .ralt { position: relative; } .sticky-style { position: sticky !important; top: 100px; } .slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .brand-slide-element { width: auto; display: inline-block; } .p-relative { position: relative; } .ripple { position: relative; } .ripple::before, .ripple::after { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); border-radius: 50%; box-shadow: 0 0 0 0 rgb(255, 255, 255); -webkit-animation: rippleOne 3s infinite; animation: rippleOne 3s infinite; } .ripple::before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; content: ""; position: absolute; right: 0; bottom: 0; } .ripple::after { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; content: ""; position: absolute; right: 0; bottom: 0; } .page-nav-wrap { margin-top: 60px; } .page-nav-wrap ul li { display: inline-block; } .page-nav-wrap ul li.active .page-numbers { background-color: var(--theme); color: var(--white); } .page-nav-wrap ul li .page-numbers.current { background-color: var(--theme); color: var(--white); } .page-nav-wrap ul li .page-numbers { display: inline-block; width: 48px; height: 48px; text-align: center; line-height: 48px; border-radius: 0; background: var(--header); color: var(--white); font-weight: 500; transition: all 0.3s ease-in-out; margin: 0 2px; border-radius: 50%; font-family: "Plus Jakarta Sans", sans-serif; } @media (max-width: 767px) { .page-nav-wrap ul li .page-numbers { margin-top: 10px; width: 40px; height: 40px; line-height: 40px; font-size: 14px; } } .page-nav-wrap ul li .page-numbers i { margin-top: 2px; color: var(--white); transition: all 0.4s ease-in-out; } .page-nav-wrap ul li .page-numbers:hover { background-color: var(--theme); color: var(--white); } .page-nav-wrap ul li .page-numbers:hover i { color: var(--white); } .actually-area .bg-area { position: absolute; top: 40%; left: 51%; transform: translate(-50%, -50%) scale(0); background-color: var(--header); width: 250px; height: 250px; border-radius: 50%; } .tilt_scale { transition: transform 0.2s ease; display: inline-block; } .no-break { white-space: nowrap; /* Keeps "My Background and Expertise" together */ } /* Optional: styling for words split animation */ .split-word { display: inline-block; /* Required for animation */ opacity: 0; } .reveal-img { opacity: 0; /* start invisible */ transform: translateX(-600px); /* start left */ } .arrow-path { width: 220px; height: 130px; color: black; stroke-dasharray: 1000; animation: draw 10s linear infinite; } @keyframes draw { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } } .image-wrapper { position: relative; transition: all 0.8s cubic-bezier(0.55, 0.085, 0, 0.99); } .animated-image { display: block; transform: translateY(100%); opacity: 0; } /* preloader শেষ হলে active class যোগ হবে */ .image-wrapper.active .animated-image { transform: translateY(0); opacity: 1; } /* Ensure the link inherits styles from its parent */ .wt-about-title2 a { display: inline-block; /* Needed for transform animations */ color: inherit; text-decoration: inherit; } .project-section-3 .line-ani { margin-top: -25px; } @media (max-width: 1399px) { .project-section-3 .line-ani { display: none; } } .brand-container { max-width: 1660px; margin: 0 auto; } .gt-text-scale-anim { white-space: pre-wrap; transform-origin: top left; } .gt-letter-span { display: inline-block; } .gt-word-span { display: inline-block; } .p-relative { position: relative; z-index: 99; } .mt-30 { margin-top: 30px; } .mb-30 { margin-bottom: 30px; } .custom-container { max-width: 1323px; margin: 0 auto; } .custom-container-2 { max-width: 1434px; margin: 0 auto; } .custom-container-3 { max-width: 1755px; margin: 0 auto; } .p-relative { position: relative; } .tp-clip-anim { position: relative; overflow: hidden; } .tp-clip-anim .mask { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.1); opacity: 0; animation: reveal 1s forwards; } .tp-clip-anim .mask-1 { clip-path: inset(0 88.8% 0 0%); animation-delay: 0.1s; } .tp-clip-anim .mask-2 { clip-path: inset(0 77.7% 0 11.1%); animation-delay: 0.2s; } .tp-clip-anim .mask-3 { clip-path: inset(0 66.6% 0 22.2%); animation-delay: 0.3s; } .tp-clip-anim .mask-4 { clip-path: inset(0 55.5% 0 33.3%); animation-delay: 0.4s; } .tp-clip-anim .mask-5 { clip-path: inset(0 44.4% 0 44.4%); animation-delay: 0.5s; } .tp-clip-anim .mask-6 { clip-path: inset(0 33.3% 0 55.5%); animation-delay: 0.6s; } .tp-clip-anim .mask-7 { clip-path: inset(0 22.2% 0 66.6%); animation-delay: 0.7s; } .tp-clip-anim .mask-8 { clip-path: inset(0 11.1% 0 77.7%); animation-delay: 0.8s; } .tp-clip-anim .mask-9 { clip-path: inset(0 0% 0 88.8%); animation-delay: 0.9s; } @keyframes reveal { from { opacity: 0; transform: scale(1.2); } to { opacity: 1; transform: scale(1); } } .flip_left { opacity: 0; transform: perspective(400px) rotateY(-90deg); transition: all 2s; } .flip_right { opacity: 0; transform: perspective(400px) rotateY(90deg); transition: all 2s; } .flip_up { opacity: 0; transform: perspective(400px) rotateX(-90deg); transition: all 2s; } .flip_down { opacity: 0; transform: perspective(400px) rotateX(90deg); transition: all 2s; } .show { opacity: 1; transform: translateY(0) scale(1); } .beach-card-wrapper { position: relative; padding-top: 0 !important; margin-top: 0 !important; } @media (max-width: 575px) { .beach-card-wrapper { margin-top: 30px !important; } } .go_full { width: 100%; height: 100vh; overflow: hidden; position: relative; } @media (max-width: 575px) { .go_full { height: initial; } } .go_full img { height: 100%; object-fit: cover; } .main_video {height:100vh;width:100%;position:relative} .main_video video{height:100%;width:100%;object-fit: cover;object-position: bottom;} .main_video:before {    position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(180deg, #0A2540 0%, rgba(10, 37, 64, 0) 100%);} .main_video .line-shape{    position: absolute; left: 0; right: 0; bottom: -2px; z-index: 999;} .main_video .line-shape img{    width: 100%;    height: 100%;} .main_video .ac_content{width: 100%;position: absolute;top: 50%;transform: translate(0px, -50%);} .main_video .ac_content .container-fluid{         padding: 0 30px;} .main_video .ac_content .content{    width: 100%;    height: 100%;} .main_video .ac_content .content h1{color: #fff;font-size: 95px;margin-bottom: 15px;} @media(max-width:1399px){ .main_video .ac_content .content h1 {        font-size: 65px;} } .main_video img {width:100%;height:100%;object-fit: cover;} .main_video .ac_content .content p{color: #fff;font-size: 25px;margin-bottom: 24px;max-width: 800px;line-height: 48px;} @media(max-width:1399px){ .main_video .ac_content .content p {font-size: 18px;max-width: 500px;line-height: 30px;} } .main_video .ac_content .content a{width: fit-content;color: #fff;background: var(--header);padding: 10px 20px;display: block;border-radius: 7px;} @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } .title_nx{text-align:center;margin-bottom: 50px;} .title_nx .smal_nx{ color: var(--theme); font-weight: 600; width: fit-content; margin: 0 auto; position: relative; } .title_nx .smal_nx:before, .title_nx .smal_nx:after{content:'';width: 15px;display: block;height: 2px;background: var(--theme);position: absolute;top: 13px;} .title_nx .smal_nx:before{ left: -25px; } .title_nx .smal_nx:after{ right: -25px; } .title_nx .name_c_nx{line-height:55px; font-size: 45px; font-weight: 700; color: var(--header); } .Packages { background: #f5f5f5; padding: 60px 0; } .Packages .grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .Packages .grid .box{ box-shadow: 0px 0px 10px #cacaca; padding: 0; border-radius: 10px; overflow: hidden; } .Packages .grid .box .box_img{ height: 180px; } .Packages .grid .box .box_img img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } .Packages .grid .box .con{ padding: 15px; } .Packages .grid .box .con h3{ font-size: 16px; margin-bottom: 5px; } .Packages .grid .box .con ul{ margin-bottom: 5px; } .Packages .grid .box .con ul li{ font-size: 14px; line-height: 23px; } .Packages .grid .box .con ul li i{} .Packages .grid .box .con p{ font-size: 14px; line-height: 23px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 15px; } .Packages .grid .box .con button{ background: var(--theme); width: 100%; border-radius: 4px; padding: 8px 15px; text-align: left; color: #fff; font-size: 16px; font-weight: 600; position: relative; } .Packages .grid .box .con button i { position: absolute; right: 11px; top: 15px; } .Packages .grid .box .con button sub{} .why_choose_us:before {content:'';background: linear-gradient(90deg, rgba(0, 44, 75, .94) 44%, rgb(1 53 86 / 27%) 72%, rgb(1 43 68 / 0%));position: absolute;width: 100%;height: 100%;top: 0;z-index: 0;} .why_choose_us { background: url(../../img/bg/safety.webp); color: white; padding: 100px 0; position: relative; background-repeat: no-repeat; background-size: cover; position: relative; background-position: center; } .why_choose_us .sha_gwgy {position:relative;z-index: 2;} .why_choose_us .sha_gwgy small { color: #ffc20e; font-weight: 900; } .why_choose_us .sha_gwgy  h2 { font-size: 30px; margin: 5px 0 15px; color: #fff; } .why_choose_us .sha_gwgy  p { /* max-width: 430px; */ font-size: 15px; margin-bottom: 20px; } .why_choose_us .sha_gwgy .checks { list-style: none; padding: 0; margin: 0 0 24px; font-size: 13px; font-weight: 500; line-height: 1.9; } .why_choose_us .sha_gwgy .checks li:before { content: '✓'; background: #ffc20e; color: #fff; border-radius: 50%; padding: 2px 5px; margin-right: 8px; } .why_choose_us .sha_gwgy .cta { display: inline-flex; align-items: center; gap: 10px; background: #ffc20e; color: var(--header); padding: 10px 15px; border-radius: 7px; font-size: 13px; font-weight: 900; margin-top: 10px; position: relative; z-index: 3; } .why_choose_us .stats { background: white; color: #073b62; width: 170px; border-radius: 11px; text-align: center; padding: 24px 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); margin-right: 520px; z-index: 1; position: relative; } .why_choose_us .stats .bvi_box svg { width: 35px; height: 35px; } .why_choose_us .stats .bvi_box { border-bottom: 1px solid #ededed; margin-bottom: 10px; padding-bottom: 10px; } .why_choose_us .stats .bvi_box:last-child{ margin: 0; padding: 0; border: 0; } .why_choose_us .stats strong { display: block; font-size: 20px; } .why_choose_us .safety small { color: var(--yellow); font-weight: 900; } .why_choose_us .img_ab_mob {display:none} .why_choose_us .img_ab_mob img{width:100%} .why_choose_us  .top-shape, .why_choose_us  .bottom-shape { position: absolute;width:100% } .why_choose_us  .top-shape {top: -2px;} .why_choose_us  .bottom-shape {bottom: -2px;} .why_choose_us .bottom-shape img, .why_choose_us .top-shape img{width:100%} .popular_destination { background: #f9f9f9; padding: 60px 0; } .popular_destination .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } .popular_destination .box{ position: relative; overflow: hidden; border-radius: 15px; } .popular_destination .box:before{content:'';width: 100%;height: 100%;position: absolute;background-image: linear-gradient(6deg, rgb(0 0 0) 8.41%, rgb(255 255 255 / 0%) 57.17%);} .popular_destination .box .box_img{ width: 100%; height: 200px; } .popular_destination .box .box_img img{width:100%;height: 100%;object-fit: cover;} .popular_destination .box .con{ position: absolute; bottom: 10px; width: 100%; display: flex; padding: 0 20px; gap: 7px; align-items: center; } .popular_destination .box .con svg{ color: var(--yellow); font-weight: 600; width: 36px; height: 36px; } .popular_destination .box .con h3{ color: #fff; font-size: 16px; } .popular_destination .box .con p{ color: #fff; line-height: normal; font-size: 13px; } .custom-mobile-menu { width: 100%; background: #fff; } .custom-menu { list-style: none; padding: 0; margin: 0; } .custom-menu-item { border-bottom: 1px solid #ddd; } .custom-menu-item a { text-decoration: none; color: #000; display: block; padding: 14px 15px; } .custom-menu-link { display: flex; align-items: center; justify-content: space-between; } .custom-toggle-btn { width: 45px; height: 45px; border: none; background: transparent; font-size: 24px; cursor: pointer; position: relative; } .custom-toggle-btn .minus-icon { display: none; } .custom-has-submenu.active .plus-icon { display: none; } .custom-has-submenu.active .minus-icon { display: inline; } .custom-submenu { display: none; list-style: none; padding: 0; margin: 0; background: #f7f7f7; } .custom-submenu li a { padding-left: 30px; font-size: 14px; } .custom-mobile-menu {display:none} /*------------*/ .rts-breadcrumb-area.one { height: 290px; overflow: hidden; position: relative; } .rts-breadcrumb-area.one .breadcrumb-area-wrapper { height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding-top: 80px; z-index: 1; position: relative; } .rts-breadcrumb-area.one .breadcrumb-area-wrapper .nav-bread-crumb { display: flex; align-items: center; gap: 14px; } .rts-breadcrumb-area.one .breadcrumb-area-wrapper .nav-bread-crumb a, .rts-breadcrumb-area.one .breadcrumb-area-wrapper .nav-bread-crumb span { color: #fff; font-weight: 500; } .rts-breadcrumb-area.one .breadcrumb-area-wrapper .title { margin-bottom: 0; color: #fff; font-size: 48px; font-weight: 600; } .rts-breadcrumb-area::after { content: ""; position: absolute; z-index: 0; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.4); } /*------------*/ .rts-section-gap { padding: 60px 0; }.rts-story-area .rts-story-mid-content { max-width: 520px; } .rts-story-mid-content .gt_title_anim{margin-bottom:20px} .rts-story-mid-content .about-content p{margin-bottom:20px;font-size: 14px;} .right-image-area { border-radius: 100px 10px 100px 10px; overflow: hidden; box-shadow: 0px 0 10px #939393; } .right-image-area .floating-image{} .right-image-area .floating-image img{width:100%} /*------------*/ .rts-why-choose-us-area { background: #f9f9f9; } .why-choose-left-image-area { position: relative; z-index: 1; padding-bottom: 77px; margin-right: 55px; } .why-choose-left-image-area .radius-10 {border-radius:10px} .why-choose-left-image-area .main-image { max-width: max-content; position: relative; z-index: 1; overflow: hidden; } .why-choose-left-image-area .main-image .content { position: absolute; z-index: 1; width: max-content; z-index: 2; top: 40px; left: 50%; transform: translateX(-50%); text-align: center; } .why-choose-left-image-area .main-image .content h2 { color: #fff; font-size: 30px; line-height: 1; margin: 0 0 7px; text-transform: uppercase; } .why-choose-left-image-area .main-image .content p { color: #fff; font-weight: 500; } .why-choose-left-image-area .main-image::after { content: ""; position: absolute; z-index: 1; top: 0; left: 0; background: linear-gradient(180deg, #0fb9b1 0%, rgba(0, 0, 0, 0) 48.24%); height: 100%; width: 100%; } .why-choose-left-image-area .floating-image { position: absolute; z-index: 1; bottom: 0; right: 0; } .why-choose-wrapper-list { padding: 0; margin: 0; margin-top: 30px; max-width: 520px; display: flex; flex-direction: column; gap: 20px; margin-bottom: 45px; } .why-choose-wrapper-list li { display: flex; align-items: center; gap: 30px; border: 1px solid var(--theme); padding: 15px 26px; margin: 0; border-radius: 10px; } .why-choose-wrapper-list li .content .title { margin-bottom: 5px; color: var(--theme); } .why-choose-wrapper-list li .content p { font-weight: 500; font-size: 15px; } /*------------*/ .footer-widget-wrapper .footer-box-item .single-footer-widget .desc p {color:#fff;font-size: 14px;margin-bottom: 15px;} .rating { display: flex; gap: 10px; } .rating .rating_box{ background: #fff; border-radius: 5px; padding: 8px; } .rating .rating_box img{width:100%;height: 100%;object-fit: contain;} .sociL_ftr { display: flex; align-items: center; gap: 15px; border-top: 1px solid #ffffff42; margin-top: 10px; padding-top: 10px; } .sociL_ftr p{ color: #fff; } .sociL_ftr ul{ display: flex; gap: 8px; } .sociL_ftr ul li{} .sociL_ftr ul li a{ display: flex; justify-content: center; align-items: center; } .sociL_ftr ul li img{ filter: invert(1); width: 23px; } .gallery-section { padding: 48px 60px; } .gallery-section  .section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; } .gallery-section .section-tag { background: var(--teal-light); color: var(--teal); font-size: 0.72rem; font-weight: 800; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.08em; } .gallery-section .section-title h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--text-dark); } .gallery-section .section-title .line { flex: 1; height: 2px; background: linear-gradient(to right, var(--teal-light), transparent); border-radius: 2px; } .gallery-section .photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; } .gallery-section .photo-card:nth-child(1), .gallery-section .photo-card:nth-child(9), .gallery-section .photo-card:nth-child(8) { grid-column: span 2; grid-row: span 2; } .gallery-section .ph-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: rgba(255, 255, 255, 0.5); font-size: 2.2rem; height: 100%; } .gallery-section .ph-icon a { width: 100%; height: 100%; } .gallery-section .photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .gallery-section .photo-card { position: relative; overflow: hidden; border-radius: 15px; cursor: pointer; background: #c8dede; transition: transform 0.3s, box-shadow 0.3s; } .gallery-section .photo-card:hover img { transform: scale(1.07); } .project-details-wrapper .gallery-section {padding: 0;} .rafting_booking_section{ width:100%; padding: 0; margin-top: 30px; position: sticky; top: 120px; } .rafting_booking_wrapper{ width:100%; overflow: hidden; border-radius: 15px; background:#fff; box-shadow:0 10px 40px rgba(0,0,0,0.12); } /* LEFT FORM */ .booking_form_box{ padding: 0; background:#ffffff; } .booking_form_box h5{ border: 1px solid #ffffff; color: #ffffff; font-size: 15px; margin-bottom:5px; text-transform:uppercase; letter-spacing:1px; border-radius: 44px; width: max-content; padding: 5px 15px; } .booking_form_box h2{ font-size: 30px; line-height:1.1; color: #ffffff; margin-bottom: 7px; } .booking_form_box h2 span{ color:#1565c0; } .booking_form_box .form_line{ width:80px; height:4px; background: #ffffff; margin: 0px; border-radius:50px; } .booking_form_box .form_group{ margin-bottom:18px; } .booking_form_box .form_group label{ display:block; font-size:15px; font-weight:600; margin-bottom:8px; color:#222; } .booking_form_box .form_bor{ width:100%; height: 50px; border:1px solid #d7dce3; border-radius:10px; padding:0 18px; font-size:15px; outline:none; transition:0.3s; padding-left: 43px; position: relative; } .booking_form_box .form_bor svg { position: absolute; left: 6px; top: 12px; width: 25px; height: 25px; color: #000000; } .booking_form_box .form_control{ width:100%; height: 100%; font-size:15px; outline:none; border: none; color: #000; } .booking_form_box .form_control:focus{ border-color:#1565c0; } .booking_form_box textarea.form_control{ height:110px; padding-top:15px; resize:none; } .booking_form_box .book_btn{ width:100%; height:58px; border:none; color:#fff; font-size:18px; font-weight:600; border-radius:10px; cursor:pointer; transition:0.3s; margin-top:10px; justify-content: center; } .booking_form_box .book_btn.theme-btn::before, .booking_form_box .book_btn.theme-btn::after{content:'';border-radius: 0;} .booking_form_box .book_btn:hover{ /* background:#0d47a1; */ } .booking_form_box .safe_text{ margin-top: 15px; text-align:center; font-size: 15px; color: #000000; font-weight: 600; } .booking_flex { background: var(--theme); padding: 15px; display: flex; align-items: flex-start; justify-content: space-between; } .booking_flex .booking_heading{} .booking_flex .price{ background: #fff; border-radius: 6px; padding: 10px; text-align: center; } .booking_flex .price p{ font-size: 25px; font-weight: 600; color: var(--theme); } .booking_flex .price p sub{ display: block; font-size: 13px; bottom: 0; height: 15px; line-height: 16px; } .for_pd_ten {padding: 15px 35px;} .form_flex { display: grid; gap: 15px; } @media(max-width:991px){ .rafting_booking_wrapper{ grid-template-columns:1fr; } .booking_banner{ min-height:500px; } } @media(max-width:600px){ .rafting_booking_section{ padding:15px; } .booking_form_box h2{ font-size:32px; } } .ps_book_now { padding: 60px 0; } .ps_book_now .box_img { border-radius: 15px; overflow: hidden; } .ps_book_now .box_img img{width:100%} .ps_book_now .form_start { box-shadow: 0px 0px 10px #eee; border-radius: 15px; overflow: hidden; } .ps_book_now .form_header { background: linear-gradient(135deg, #0b7b68, #0b2641); padding: 12px 20px; } .ps_book_now .form_header p{color:#fff;position: relative;padding: 0 20px;font-size: 15px;width: max-content;} .ps_book_now .form_header p:before, .ps_book_now .form_header p:after {content:'';position: absolute;width: 15px;height: 2px;background: #fff;top: 14px;} .ps_book_now .form_header p:before{ left: 0; } .ps_book_now .form_header p:after { right: 0; } .ps_book_now .form_header h3 { color: #fff; font-size: 25px; } .ps_book_now .form_body {padding: 20px;} .ps_book_now .form_body label { font-size: 14px; font-weight: 600; color: #000; } .ps_book_now .form_body .form_bor { box-shadow: 0px 0px 10px #ebebeb; width: 100%; height: 50px; border: 1px solid #d7dce3; border-radius: 10px; padding: 0 18px; font-size: 15px; outline: none; transition: 0.3s; padding-left: 43px; position: relative; } .ps_book_now .form_body .form_bor svg { position: absolute; left: 13px; top: 12px; width: 20px; height: 25px; color: var(--theme); } .ps_book_now .form_body input, .ps_book_now .form_body select { width: 100%; height: 100%; font-size: 15px; outline: none; border: none; color: #000; } .form_ht .section-label { font-size: 17px; padding-left: 12px; border-left: 4px solid var(--theme); } .comon_icon { position: fixed; width: 45px; z-index: 999; left: 6px; } .comon_icon img {width:100%} .phone_ion { bottom: 2px; } .whatsapp { bottom: 50px; }input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; box-shadow: 0 0 0px 1000px transparent inset !important; -webkit-text-fill-color: #000 !important; /* text color */ transition: background-color 5000s ease-in-out 0s; } .form_fte { display: flex; justify-content: space-between; align-items: center; } .form_fte .secure_pay{ display: flex; align-items: center; gap: 6px; } .form_fte .secure_pay svg{ color: var(--theme); width: 24px; height: 24px; } .form_fte .secure_pay .secure_desc{} .form_fte .secure_pay .secure_desc p b { font-size: 16px; } .form_fte .secure_pay .secure_desc p{ line-height: normal; font-size: 12px; } .form_fte .secure_pay_btn{} .form_fte .secure_pay_btn .book_btn.theme-btn{border-radius: 5px;padding: 5px 20px;} .form_fte .secure_pay_btn .book_btn.theme-btn:before, .form_fte .secure_pay_btn .book_btn.theme-btn:after{border-radius: 5px;} .select_package {display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px;} .select_package label{width:100%;box-shadow: 0px 0px 10px #eee;border-radius: 10px;position: relative;padding: 6px;border: 1px solid #eeeeee;cursor: pointer;} .select_package label input{position: absolute;} .select_package .box{display: flex;gap: 10px;} .select_package .box .boxImg{width: 85px;height: 70px;border-radius: 7px;overflow: hidden;} .select_package .box .boxImg img{width: 100%;height: 100%;object-fit: cover;} .select_package .box .desc{flex: 1;display: flex;justify-content: space-between;align-items: center;} .select_package .box .desc h3{font-size: 15px;} .select_package .box .desc p{ font-size: 12px; color: #909090; } .select_package .box .desc .price{width: fit-content;font-size: 14px;line-height: normal;background: #bdbdbd;color: #ffffff;border-radius: 5px;padding: 8px 5px;width: 60px;text-align: center;line-height: 12px;} .select_package label input[type="radio"]{ display: none; } /* Active label border */ .select_package label:has(input[type="radio"]:checked){ border-color: var(--theme); } .select_package label:has(input[type="radio"]:checked) .desc .price { background: #0b7766; } .order_detaiks { box-shadow: 0px 0px 10px #eee; border-radius: 15px; overflow: hidden; } .order_detaiks .dc_title{ background: linear-gradient(135deg, #0b7b68, #0b2641); padding: 12px 15px; } .order_detaiks .dc_title h3{ font-size: 18px; color: #fff; } .order_detaiks .si_body{ padding: 15px; border-bottom: 1px solid #eee; } .order_detaiks .si_body .box{display: flex;gap: 10px;} .order_detaiks .si_body .box .boxImg{width: 85px;height: 70px;border-radius: 7px;overflow: hidden;} .order_detaiks .si_body .box .boxImg img{width: 100%;height: 100%;object-fit: cover;} .order_detaiks .si_body .box .desc{flex: 1;display: flex;justify-content: space-between;align-items: center;} .order_detaiks .si_body .box .desc h3{font-size: 15px;} .order_detaiks .si_body .box .desc p{ font-size: 14px; color: #909090; } .order_detaiks .sc_cc {padding:15px} .order_detaiks .ad-table { background: #fafbfd; border: 1px solid #edeff5; border-radius: 8px; padding: 15px; } .order_detaiks .ad-table ul{ background: #f8f8f800; } .order_detaiks .ad-table ul li{font-size: 14px;display: flex;align-items: center;justify-content: space-between;color: #000;margin-bottom: 5px;} .order_detaiks .ad-table ul li span{color: #000;/* font-weight: 600; */} .order_detaiks .ad-table .total_pr{border-top: 1px dashed var(--theme);margin-top: 15px;padding-top: 15px;font-size: 19px;color: #000;display: flex;justify-content: space-between;} .order_detaiks .ad-table .total_pr span{font-weight: 600;color: var(--theme);font-size: 25px;} .order_detaiks .al-proc{padding: 7px 15px;border: 1px solid #bff7d0;background: #ebf5ee;margin-top: 15px;border-radius: 5px;font-size: 15px;color: #1f743b;font-weight: 500;display: flex;align-items: center;gap: 8px;} .order_detaiks .al-proc svg{width: 20px;height: 20px;} .ab_home_bn { display: flex; gap: 30px; align-items: center; } .ab_home_bn ul{ display: grid; align-items: center; gap: 16px; grid-template-columns: 1fr 1fr 1fr 1fr; } .ab_home_bn ul li{ display: flex; gap: 7px; align-items: center; position: relative; } .ab_home_bn ul li img{} .ab_home_bn ul li p{ font-size: 15px; line-height: normal; font-weight: 600; color: #0fb9b1; } .ab_home_bn ul li:before{content:'';position: absolute;right: 0;height: 100%;width: 2px;background: #dddddd;} .ab_home_bn ul li:last-child:before{display:none}
.desktop_banner {display:block}.mobile_banner{display:none}