/*---------------------------------------------------- 1. Global Area 2. Header Section 3. Banner Section 22. Responsive Section =====================================================================*/ /*========= Font load ===========*/ @font-face { font-family: "RecoletaAlt"; font-style: normal; font-weight: 900; font-display: auto; src: url("../fonts/RecoletaAlt-Black.ttf") format("truetype"); } @font-face { font-family: "RecoletaAlt"; font-style: normal; font-weight: 800; font-display: auto; src: url("../fonts/RecoletaAlt-Black.ttf") format("truetype"); } @font-face { font-family: "RecoletaAlt"; font-style: normal; font-weight: 700; font-display: auto; src: url("../fonts/RecoletaAlt-Bold.ttf") format("truetype"); } @font-face { font-family: "RecoletaAlt"; font-style: normal; font-weight: 600; font-display: auto; src: url("../fonts/RecoletaAlt-SemiBold.ttf") format("truetype"); } @font-face { font-family: "RecoletaAlt"; font-style: normal; font-weight: 400; font-display: auto; src: url("../fonts/RecoletaAlt-Regular.ttf") format("truetype"); } @font-face { font-family: "RecoletaAlt"; font-style: normal; font-weight: 300; font-display: auto; src: url("../fonts/RecoletaAlt-Light.ttf") format("truetype"); } @font-face { font-family: "RecoletaAlt"; font-style: normal; font-weight: 200; font-display: auto; src: url("../fonts/RecoletaAlt-Thin.ttf") format("truetype"); } .bi-portfolio-item .portfolio-img, .bi-portfolio-btn-img, .bi-fun-fact-img, .bi-fun-fact-img-2, .bi-about-img-area2 .bi-about-img2, .bi-about-img-area1 .bi-about-img1, .bi-slider-content { overflow: hidden; position: relative; border-radius: 10px; } .bi-portfolio-item .portfolio-img img, .bi-portfolio-btn-img img, .bi-fun-fact-img img, .bi-fun-fact-img-2 img, .bi-about-img-area2 .bi-about-img2 img, .bi-about-img-area1 .bi-about-img1 img, .bi-slider-content img { border-radius: 10px; } .bi-portfolio-item .portfolio-img:before, .bi-portfolio-btn-img:before, .bi-fun-fact-img:before, .bi-fun-fact-img-2:before, .bi-about-img-area2 .bi-about-img2:before, .bi-about-img-area1 .bi-about-img1:before, .bi-slider-content:before, .bi-portfolio-item .portfolio-img:after, .bi-portfolio-btn-img:after, .bi-fun-fact-img:after, .bi-fun-fact-img-2:after, .bi-about-img-area2 .bi-about-img2:after, .bi-about-img-area1 .bi-about-img1:after, .bi-slider-content:after { content: ""; width: 100px; z-index: 2; height: 50px; position: absolute; background-color: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .bi-portfolio-item .portfolio-img:before, .bi-portfolio-btn-img:before, .bi-fun-fact-img:before, .bi-fun-fact-img-2:before, .bi-about-img-area2 .bi-about-img2:before, .bi-about-img-area1 .bi-about-img1:before, .bi-slider-content:before { top: -15px; left: -50px; } .bi-portfolio-item .portfolio-img:after, .bi-portfolio-btn-img:after, .bi-fun-fact-img:after, .bi-fun-fact-img-2:after, .bi-about-img-area2 .bi-about-img2:after, .bi-about-img-area1 .bi-about-img1:after, .bi-slider-content:after { bottom: -15px; right: -50px; } @-webkit-keyframes Bins_animation_1 { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 25% { -webkit-transform: translateX(-40px); transform: translateX(-40px); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } 75% { -webkit-transform: translateX(40px); transform: translateX(40px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes Bins_animation_1 { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 25% { -webkit-transform: translateX(-40px); transform: translateX(-40px); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } 75% { -webkit-transform: translateX(40px); transform: translateX(40px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes Bins_animation_2 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 25% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 75% { -webkit-transform: translateY(40px); transform: translateY(40px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes Bins_animation_2 { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 25% { -webkit-transform: translateY(-40px); transform: translateY(-40px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 75% { -webkit-transform: translateY(40px); transform: translateY(40px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes Bins_animation_3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes Bins_animation_3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes Bins_animation_4 { 0% { -webkit-transform: translate(-300px, 151px) rotate(0); transform: translate(-300px, 151px) rotate(0); } 100% { -webkit-transform: translate(251px, -200px) rotate(180deg); transform: translate(251px, -200px) rotate(180deg); } } @keyframes Bins_animation_4 { 0% { -webkit-transform: translate(-300px, 151px) rotate(0); transform: translate(-300px, 151px) rotate(0); } 100% { -webkit-transform: translate(251px, -200px) rotate(180deg); transform: translate(251px, -200px) rotate(180deg); } } @-webkit-keyframes Bins_animation_5 { 0% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg); transform: translate(73px, -1px) rotate(36deg); } 40% { -webkit-transform: translate(111px, 72px) rotate(72deg); transform: translate(111px, 72px) rotate(72deg); } 60% { -webkit-transform: translate(93px, 122px) rotate(108deg); transform: translate(93px, 122px) rotate(108deg); } 80% { -webkit-transform: translate(-70px, 72px) rotate(124deg); transform: translate(-70px, 72px) rotate(124deg); } 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } @keyframes Bins_animation_5 { 0% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } 20% { -webkit-transform: translate(73px, -1px) rotate(36deg); transform: translate(73px, -1px) rotate(36deg); } 40% { -webkit-transform: translate(111px, 72px) rotate(72deg); transform: translate(111px, 72px) rotate(72deg); } 60% { -webkit-transform: translate(93px, 122px) rotate(108deg); transform: translate(93px, 122px) rotate(108deg); } 80% { -webkit-transform: translate(-70px, 72px) rotate(124deg); transform: translate(-70px, 72px) rotate(124deg); } 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } /*global area*/ /*----------------------------------------------------*/ @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: inherit; } } body { margin: 0; padding: 0; z-index: 1; font-size: 18px; line-height: 1.579; overflow-x: hidden; color: #0d0d0d; font-family: var(--heading-3); -moz-osx-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; } body .container { max-width: 1260px; } .site_wrapper{ overflow: hidden; } body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } body::-webkit-scrollbar-thumb { outline: none; border-radius: 30px; background: var(--hap-gradient-color); } #ScrollSmoother-wrapper { z-index: -1; } .ul-li ul { margin: 0; padding: 0; } .ul-li ul li { list-style: none; display: inline-block; } .ul-li-block ul { margin: 0; padding: 0; } .ul-li-block ul li { display: block; list-style: none; } .headline h1, .headline h2, .headline h3, .headline h4, .headline h5, .headline h6 { margin-bottom: 0; font-weight: 700; line-height: 1.143; font-family: var(--heading-3); } #hapticPreloader { position: fixed; left: 0; top: 0; z-index: 99999; width: 100%; height: 100%; -webkit-transition:all 300ms linear 0ms; -khtml-transition:all 300ms linear 0ms; -moz-transition:all 300ms linear 0ms; -ms-transition:all 300ms linear 0ms; -o-transition:all 300ms linear 0ms; transition:all 300ms linear 0ms; background: #f1f2f3; } #hapticPreloader .loader { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .custom-loader { width: 69px; height: 12px; display: grid; } .custom-loader:before, .custom-loader:after { content: ""; grid-area: 1/1; background: radial-gradient(farthest-side,#766DF4 90%,#0000) left, radial-gradient(farthest-side,#766DF4 90%,#0000) right; background-size: 12px 12px; background-repeat: no-repeat; animation: d2 1s infinite; } .custom-loader:after { margin:0 19px; animation-direction: reverse; } @keyframes d2 { 80%,100% {transform:rotate(.5turn)} } .back-top-btn { position: fixed; background: var(--hap-gradient-color); width: 50px; height: 50px; right: 30px; bottom: 30px; text-align: center; color: #fff; line-height: 50px; border-radius: 50px; cursor: pointer; z-index: 11; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; visibility: hidden; -webkit-transition: all 0.7s ease-out 0s; transition: all 0.7s ease-out 0s; } .back-top-btn.active { top: 90%; -webkit-transform: translateY(-98%); transform: translateY(-98%); opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; visibility: visible; } .back-top-btn:hover { background: var(--hap-base-color); } [data-background] { background-size: cover; background-repeat: no-repeat; background-position: center center; } a { color: inherit; text-decoration: none; -webkit-transition: 500ms all ease; transition: 500ms all ease; } a:hover, a:focus { text-decoration: none; } img { max-width: 100%; height: auto; } button { cursor: pointer; } .form-control:focus, button:visited, button.active, button:hover, button:focus, input:visited, input.active, input:hover, input:focus, textarea:hover, textarea:focus, a:hover, a:focus, a.active, select, select:hover, select:focus, select:visited { outline: none; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; color: inherit; } .form-control { -webkit-box-shadow: none; box-shadow: none; } .relative-position { position: relative; } .background_overlay { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } .pera-content p { margin-bottom: 0; } .scrollup { width: 55px; right: 20px; z-index: 5; height: 55px; bottom: 20px; display: none; position: fixed; border-radius: 100%; line-height: 55px; background: var(--hap-gradient-color); } .scrollup i { color: #fff; } .cursor { border-radius: 50%; display: block; position: fixed; margin-top: -10px; margin-left: -10px; width: 30px; height: 30px; pointer-events: none; mix-blend-mode: multiply; -webkit-transform: scale(1); transform: scale(1); background-color: rgba(122, 122, 122, 0.3); -webkit-transition: -webkit-transform 0.35s ease-out; transition: -webkit-transform 0.35s ease-out; transition: transform 0.35s ease-out; transition: transform 0.35s ease-out, -webkit-transform 0.35s ease-out; z-index: 1011; } .bi-section-title-1 .bi-subtitle, .bi-section-title-2 .bi-subtitle { font-size: 14px; font-weight: 700; padding-left: 18px; margin-bottom: 10px; position: relative; display: inline-block; color: var(--base-color); font-family: var(--heading); } .bi-section-title-1 .bi-subtitle:before, .bi-section-title-1 .bi-subtitle:after, .bi-section-title-2 .bi-subtitle:before, .bi-section-title-2 .bi-subtitle:after { left: 0; top: 5px; width: 12px; content: ""; height: 12px; position: absolute; border-radius: 100%; background-color: #0e0e0e; } .bi-section-title-1 .bi-subtitle:after, .bi-section-title-2 .bi-subtitle:after { top: 8px; left: 6px; width: 9px; height: 9px; border-radius: 100%; border: 2px solid #fff; background-color: var(--base-color); } .bi-section-title-1 h2, .bi-section-title-2 h2 { color: #0e0e0e; font-size: 70px; font-weight: 700; } .bi-section-title-1.text-center, .bi-section-title-2.text-center { margin: 0 auto; max-width: 850px; } .bi-section-title-2 .bi-subtitle { font-size: 14px; font-weight: 300; padding-left: 20px; font-family: var(--heading-2); } .bi-header-section.header-style-four .bi-header-main-navigation .main-navigation li a:before { top: 0; left: -5px; z-index: -1; width: 22px; content: ""; height: 22px; position: absolute; border-radius: 100%; background-color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: scale(0); transform: scale(0); } .bi-section-title-2 .bi-subtitle:before { background-color: #fff; } .bi-section-title-2 .bi-subtitle:after { top: 10px; border: 2px solid #000; } .bi-section-title-2 h2 { color: #fff; font-size: 45px; font-weight: 200; line-height: 1.333; } .bi-section-title-2 h2 span { font-weight: 500; } .bi-section-title-2 p { padding-top: 12px; } .bi-section-title-3 .bi-subtitle { font-size: 14px; font-weight: 700; padding: 8px 15px; border-radius: 10px; margin-bottom: 15px; display: inline-block; color: var(--base-color); font-family: var(--heading); border: 1px solid var(--base-color); } .bi-section-title-3 h2 { color: #fff; font-size: 70px; line-height: 80px; font-weight: 700; } .bi-section-title-3 p { padding-top: 30px; } .dark-bg-title .bi-section-title-1 .bi-subtitle { margin-bottom: 15px; } .dark-bg-title .bi-section-title-1 .bi-subtitle:before { background-color: #fff; } .dark-bg-title .bi-section-title-1 .bi-subtitle:after { border: 2px solid #0e0e0e; } .dark-bg-title .bi-section-title-1 h2 { color: #fff; padding-bottom: 5px; } .dark-bg-title .bi-section-title-1 p { color: #cecece; } .bi-btn-1 a { color: #fff; font-size: 15px; font-weight: 700; overflow: hidden; position: relative; border-radius: 10px; white-space: nowrap; display: inline-table; padding: 20px 40px 17px; font-family: var(--heading-3); background-color: var(--base-color); } .bi-btn-1 a:before, .bi-btn-1 a:after { content: ""; width: 100%; height: 100%; position: absolute; background-color: #000000; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 700ms ease; transition: all 700ms ease; } .bi-btn-1 a:before { top: -15px; left: -135px; } .bi-btn-1 a:after { right: -135px; bottom: -15px; } .bi-btn-2 a { color: #fff; font-size: 12px; overflow: hidden; font-weight: 700; position: relative; padding: 21px 30px; border-radius: 30px; display: inline-block; background-color: var(--base-color); } .bi-btn-3 a { color: #fff; font-weight: 700; padding: 9px 25px; border-radius: 5px; display: inline-block; font-family: var(--heading); background-color: var(--base-color); border: 1.5px solid transparent; } .bi-btn-3 a i { margin-left: 10px; } .bi-btn-3 a img, .bi-btn-3 a i, .bi-btn-3 a svg{ margin-left: 10px; } .bi-btn-3 a:hover { color: var(--base-color); background-color: transparent; border: 1.5px solid var(--base-color); } .bi-btn-main span { position: absolute; content: ""; width: 0px; height: 0px; left: 0; top: 0; background-color: #000; z-index: -1; border-radius: 100%; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .bi-btn-main:hover span { width: 350px; height: 350px; } .h8-btn-1 { display: inline-block; font-size: 18px; line-height: 1.44; text-transform: uppercase; font-weight: 600; font-family: var(--kanit); text-decoration: none; color: #fff; background: var(--primary-color-8); cursor: pointer; position: relative; padding: 13px 27px; border-radius: 5px; -webkit-transition: all 400ms ease 0s; -moz-transition: all 400ms ease 0s; -ms-transition: all 400ms ease 0s; -o-transition: all 400ms ease 0s; transition: all 400ms ease 0s; } .h8-btn-1 i { margin-left: 4px; rotate: -45deg; -webkit-transition: all 400ms ease 0s; -moz-transition: all 400ms ease 0s; -ms-transition: all 400ms ease 0s; -o-transition: all 400ms ease 0s; transition: all 400ms ease 0s; } .h8-btn-1::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 5px; background: #fff; left: 0; top: 0; transform: translate(0px, 0px); opacity: 0.2; z-index: -1; transition: 500ms ease; } .h8-btn-1:hover { background-color: var(--white-color); color: var(--primary-color-8); } .h8-btn-1:hover i { rotate: 0deg; } .h8-btn-1:hover::after { transform: translate(-4px, -4px); background-color: var(--primary-color-8); opacity: 1; } .h8-btn-2 { display: inline-block; font-size: 18px; line-height: 1.44; text-transform: uppercase; font-weight: 600; font-family: var(--kanit); text-decoration: none; color: #fff; background: var(--primary-color-8); cursor: pointer; position: relative; padding: 13px 27px; border-radius: 5px; -webkit-transition: all 400ms ease 0s; -moz-transition: all 400ms ease 0s; -ms-transition: all 400ms ease 0s; -o-transition: all 400ms ease 0s; transition: all 400ms ease 0s; } .h8-btn-2 i { margin-left: 4px; rotate: -45deg; -webkit-transition: all 400ms ease 0s; -moz-transition: all 400ms ease 0s; -ms-transition: all 400ms ease 0s; -o-transition: all 400ms ease 0s; transition: all 400ms ease 0s; } .h8-btn-2 span { display: inline-block; position: relative; z-index: 1; } .h8-btn-2::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 5px; background: #fff; left: 0; top: 0; transform: translate(4px, 4px); opacity: 0.2; z-index: -1; transition: 500ms ease; } .h8-btn-2:is(.black-affter)::after { background: #000; } .h8-btn-2:hover { background-color: var(--white-color); color: var(--primary-color-8); } .h8-btn-2:hover i { rotate: 0deg; } .h8-btn-2:hover::after { transform: translate(-4px, -4px); background-color: var(--primary-color-8); opacity: 1; } .play-btn-4 { position: relative; font-size: 18px; display: inline-block; width: 58px; height: 58px; border-radius: 50%; text-align: center; line-height: 58px; color: #fff; background: linear-gradient(90deg, #E02626 0%, #F0831F 100%); outline: 6px solid rgba(255, 255, 255, 0.1); animation: play-btn-4 5s ease infinite; -webkit-transition: all 400ms ease 0s; -moz-transition: all 400ms ease 0s; -ms-transition: all 400ms ease 0s; -o-transition: all 400ms ease 0s; transition: all 400ms ease 0s; } .play-btn-4 i { position: relative; z-index: 1; } .play-btn-4::after { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; background: #Fff; transform: scale(0); -webkit-transition: all 400ms ease 0s; -moz-transition: all 400ms ease 0s; -ms-transition: all 400ms ease 0s; -o-transition: all 400ms ease 0s; transition: all 400ms ease 0s; } .play-btn-4:hover { color: #B60B0B; border-color: transparent; } .play-btn-4:hover::after { transform: scale(1); } .redius-btn-8 { font-size: 50px; width: 148px; height: 148px; line-height: 148px; color: var(--primary-color-8); background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); display: inline-block; text-align: center; border-radius: 50%; position: relative; border: 2px solid var(--primary-color-8); transition: all 0.4s ease; outline: 0; cursor: pointer; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; } .redius-btn-8 .icon { position: relative; z-index: 1; } .redius-btn-8 .icon i { rotate: -45deg; } .redius-btn-8::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: var(--white-color); -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; opacity: 0; } .redius-btn-8:hover { border-color: transparent; color: var(--primary-color-8); } .redius-btn-8:hover::before { opacity: 1; } @keyframes play-btn-4 { 0% { outline: 0px solid rgba(255, 255, 255, 0.1); } 100% { outline: 15px solid rgba(255, 255, 255, 0); } } .play-btn-9 { position: relative; font-size: 18px; display: inline-block; width: 52px; height: 52px; border-radius: 50%; text-align: center; line-height: 45px; border: 4px solid var(--home-9-primary); color: var(--home-9-primary); outline: 13px solid rgba(17, 17, 17, 0.2392156863); animation: play-btn-9 2s linear infinite; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .play-btn-9 i { position: relative; z-index: 1; transform: rotate(360deg); } .play-btn-9::after { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; background: var(--home-9-gd-color); transform: scale(0); -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .play-btn-9:hover { color: var(--white-color); border-color: transparent; } .play-btn-9:hover::after { transform: scale(1); } @keyframes play-btn-9 { 0% { outline: 0px solid rgba(17, 17, 17, 0.6156862745); } 100% { outline: 13px solid rgba(17, 17, 17, 0); } } .h9-btn-1 { font-family: var(--recoleta); position: relative; display: inline-block; cursor: pointer; font-size: 18px; font-weight: 600; line-height: 1; text-transform: uppercase; color: #FFF; border-radius: 100px; background: var(--home-9-gd-color); padding: 21px 41px; overflow: hidden; } .h9-btn-1 i { border-left: 1px solid #fff; padding-left: 8px; margin-left: 5px; } .h9-btn-1::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 100px; border: 1px solid var(--white-color); background-color: transparent; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: 500ms ease; opacity: 0; } .h9-btn-1:hover { color: var(--white-color); } .h9-btn-1:hover::after { opacity: 1; width: 95%; height: 85%; } @-webkit-keyframes marquee-animation { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes marquee-animation { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .bi-img-animation { -webkit-transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .bi-img-animation.active { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .inner-page-padding { padding: 120px 0px; } .bi-pagination{ margin-top: 20px; } .bi-pagination li a:hover { color: #fff; background-color: var(--base-color); border: 1px solid var(--base-color); } .error-text-btn { margin-top: 80px; } .error-text-btn h3 { color: #0E0E0E; font-size: 60px; font-weight: 600; padding-bottom: 50px; } .hap-section-title .sub-title { font-size: 16px; font-weight: 600; position: relative; padding-left: 23px; margin-bottom: 5px; display: inline-block; } .hap-section-title .sub-title:before { top: 0; left: 0; content: "\f666"; font-weight: 900; position: absolute; font-family: "Font Awesome 5 Pro"; } .hap-section-title .headline-title, .hap-section-title h2 { font-size: 72px; font-weight: 700; color: var(--hap-title-color); } .hap-section-title p { padding-top: 5px; } .hap-section-title.dark-bg-title .headline-title, .hap-section-title.dark-bg-title h2 { color: #fff; } .hap-section-title.dark-bg-title p { color: #e1e1e1; } .hap-btn a { color: #fff; font-size: 17px; font-weight: 500; padding: 18px 30px; border-radius: 40px; display: inline-block; -webkit-transition: all 200ms linear 0ms; transition: all 200ms linear 0ms; background: -webkit-gradient(linear, left top, right top, from(#6256ed), color-stop(50%, #f350bc), to(#6256ed)); background: linear-gradient(90deg, #6256ed 0%, #f350bc 50%, #6256ed); background-size: 200%, 1px; } .hap-btn a i { margin-left: 10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 200ms linear 0ms; transition: all 200ms linear 0ms; } .hap-btn a:hover { background-position: 120%; } .hap-btn a:hover i { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .hap-img-animation img { -webkit-transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); transition: 1.3s cubic-bezier(0.5, 0.5, 0, 1); -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } .hap-img-animation.active img { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .hap-footer-widget .logo-cta li i, .hap-topic-item .inner-text a, .hap-counter-item:before, .hap-faq-accordion-area .accordion-button:not(.collapsed):after, .hap-faq-accordion-area .accordion-button:not(.collapsed) span, .hap-pricing-tab-img-price .plan-price-title .price-plan-title span, .hap-pricing-tab-btn .nav-tabs .nav-link.active .hap-price-btn-text, .hap-service-item:hover .service-arrow a, .hap-section-title .sub-title:before, .hap-section-title .sub-title { background: var(--hap-gradient-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hap-topic-section { overflow: hidden; padding: 120px 0px; } .hap-topic-section .hap-section-title { max-width: 850px; } .hap-topic-content { padding-top: 45px; } .hap-topic-item { width: 188px; height: 235px; margin: 0px 15px; padding: 45px 15px; border-radius: 100px; border: 2px solid #efefef; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hap-topic-item .inner-img { margin-bottom: 20px; } .hap-topic-item .inner-text a { font-size: 20px; font-weight: 700; display: inline-block; } .hap-topic-item:hover { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .hpt-btn-border { display: inline-block; font-family: "Recoleta Alt"; font-size: 18px; line-height: 1.44; text-transform: uppercase; font-weight: 600; background: #00071A; cursor: pointer; position: relative; z-index: 0; padding: 17px 38px; border: 1px solid #E02626; } .hpt-btn-border .text { display: inline-block; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hpt-btn-border i { margin-left: 4px; rotate: -45deg; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .hpt-btn-border:hover { box-shadow: inset 0 0 0 2em #E02626; color: #fff; } .hpt-btn-border:hover .text { color: #fff; background-clip: unset; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background: unset; } .hpt-btn-border:hover i { color: #fff; rotate: 0deg; background: unset; background-clip: unset; -webkit-background-clip: unset; -webkit-text-fill-color: unset; } .hpt-btn-1 { display: inline-block; font-family: "Recoleta Alt"; font-size: 18px; line-height: 1.44; text-transform: uppercase; font-weight: 600; background: #fff; cursor: pointer; position: relative; z-index: 0; padding: 17px 38px; border: 1px solid transparent; outline: 1px solid transparent; outline-color: rgba(255, 255, 255, 0.8); outline-offset: 0px; transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1); } .hpt-btn-1 .text { display: inline-block; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hpt-btn-1 i { margin-left: 4px; rotate: -45deg; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-btn-1:hover { color: unset; outline-color: rgba(255, 255, 255, 0); outline-offset: 15px; } .hpt-btn-1:hover .text { display: inline-block; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hpt-btn-1:hover i { rotate: 0deg; } .hpt-btn-2 { display: inline-block; font-family: "Recoleta Alt"; font-size: 18px; line-height: 1.44; text-transform: uppercase; font-weight: 600; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); backdrop-filter: blur(10px); cursor: pointer; position: relative; z-index: 0; padding: 17px 38px; color: #fff; } .hpt-btn-2 .text { display: inline-block; } .hpt-btn-2 i { margin-left: 4px; rotate: -45deg; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-btn-2:hover { color: #fff; box-shadow: 0 0.5em 0.5em -0.4em #000000; transform: translateY(-0.25em); } .hpt-btn-2:hover .text { color: #fff; } .hpt-btn-2:hover i { rotate: 0deg; } .hpt-btn-3 { position: relative; display: inline-block; font-family: "Kanit", sans-serif; cursor: pointer; font-size: 18px; font-weight: 500; line-height: 1; text-transform: uppercase; color: #FFF; border-radius: 100px; background: var(--home-9-gd-color); padding: 21px 34px; overflow: hidden; } .hpt-btn-3 .icon { font-size: 15px; display: inline-block; border-left: 1px solid #fff; padding-left: 10px; margin-left: 8px; } .hpt-btn-3 ::after { position: absolute; content: ""; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%, rgba(0, 0, 0, 0) 100%); top: 0px; left: -100%; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; opacity: 0.5; } .hpt-btn-3:hover { color: #fff; } .hpt-btn-3:hover .icon { color: #FFF; } .hpt-btn-3:hover .icon::after { animation: btn-3-animation 1s linear infinite; } .play-btn-1 { position: relative; font-size: 18px; display: inline-block; width: 52px; height: 52px; border-radius: 50%; text-align: center; line-height: 45px; border: 4px solid #fff; color: #fff; outline: 13px solid rgba(17, 17, 17, 0.2392156863); animation: play-btn-3 2s linear infinite; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .play-btn-1 i { position: relative; z-index: 1; transform: rotate(360deg); } .play-btn-1::after { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); transform: scale(0); -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .play-btn-1:hover { border-color: transparent; } .play-btn-1:hover::after { transform: scale(1); } .play-btn-2 { text-transform: capitalize; font-family: "Recoleta Alt"; font-size: 24px; width: 160px; height: 160px; line-height: 160px; color: #fff; background-color: transparent; display: inline-block; text-align: center; border-radius: 50%; position: relative; transition: all 0.4s ease; outline: 0; z-index: 2; border: 1px solid #fff; cursor: pointer; } .play-btn-2 .play-btn-2-text { position: relative; z-index: 3; } .play-btn-2::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(7.5px); border-radius: 50%; animation: none; opacity: 1; z-index: 2; transition: transform 0.3s ease-in-out; } .play-btn-2::after { content: ""; position: absolute; top: 0px; left: 0px; width: 160px; height: 160px; border-radius: 50%; background-color: #fff; box-shadow: 0 30px 60px rgba(43, 0, 29, 0.1411764706); animation: videoBtn 1.75s cubic-bezier(0.4, 0, 0.2, 1) infinite; z-index: 2; } .play-btn-2:hover { color: #fff; } .play-btn-2:hover::after { background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); backdrop-filter: blur(10px); } .play-btn-3 { position: relative; font-size: 18px; display: inline-block; width: 52px; height: 52px; border-radius: 50%; text-align: center; line-height: 45px; border: 4px solid var(--home-9-secondary); color: var(--home-9-secondary); outline: 13px solid rgba(0, 0, 0, 0.1019607843); animation: play-btn-3 2s linear infinite; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .play-btn-3 i { position: relative; z-index: 1; } .play-btn-3::after { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; background: var(--home-9-gd-color); transform: scale(0); -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .play-btn-3:hover { color: #fff; border-color: transparent; } .play-btn-3:hover::after { transform: scale(1); } .play-btn-4 { position: relative; font-size: 18px; display: inline-block; width: 58px; height: 58px; border-radius: 50%; text-align: center; line-height: 58px; color: #fff; background: var(--home-9-gd-color); animation: play-btn-3 2s linear infinite; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .play-btn-4 i { position: relative; z-index: 1; } .play-btn-4::after { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; background: #Fff; transform: scale(0); -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .play-btn-4:hover { color: #B60B0B; border-color: transparent; } .play-btn-4:hover::after { transform: scale(1); } @-webkit-keyframes swipe-animation { 0%, 100% { bottom: -10px; } 50% { bottom: 30px; } } @keyframes swipe-animation { 0%, 100% { bottom: -10px; } 50% { bottom: 30px; } } @-webkit-keyframes marquee-animation { 0% { translateX: 0; } 100% { translateX: -100%; } } @keyframes marquee-animation { 0% { translate: 0; } 100% { translate: -100%; } } @keyframes hero-1-img-zoomout { 0% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes hero-1-after-slider { 0% { height: 100%; } 100% { height: 0%; } } @keyframes play-btn-3 { 0% { outline: 0px solid rgba(17, 17, 17, 0.6156862745); } 100% { outline: 13px solid rgba(17, 17, 17, 0); } } @keyframes hero-2-back-top-btn { 0% { box-shadow: 0px 0px 40px 0px #ffffff; } 50% { box-shadow: 0px 0px 40px 20px #ffffff; } 100% { box-shadow: 0px 0px 40px 0px #ffffff; } } @keyframes call-btn-1 { 0% { outline: 7px solid rgba(255, 56, 56, 0.2); } 50% { outline: 7px solid rgba(255, 56, 56, 0.9); } 100% { outline: 7px solid rgba(255, 56, 56, 0.2); } } @-webkit-keyframes videoBtn { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -ms-filter: "alpha(opacity=0)"; -webkit-transform: scale(1.5); transform: scale(1.5); } } @keyframes videoBtn { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { opacity: 0; -ms-filter: "alpha(opacity=0)"; -webkit-transform: scale(1.5); transform: scale(1.5); } } @keyframes btn-3-animation { 0% { left: -100%; } 100% { left: 100%; } } @keyframes loop-img-1 { 0% { visibility: hidden; } 25% { visibility: visible; } 50% { opacity: 0; } 75% { visibility: visible; } 100% { visibility: hidden; } } @-webkit-keyframes marquee-animation { 0% { translateX: 0; } 100% { translateX: -100%; } } @keyframes marquee-animation { 0% { translate: 0; } 100% { translate: -100%; } } @-webkit-keyframes marquee-animation-2 { 0% { transform: translateX(100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @keyframes marquee-animation-2 { 0% { transform: translateX(100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } @-webkit-keyframes marquee-right-animation-2 { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } } @keyframes marquee-right-animation-2 { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } } @-webkit-keyframes marquee-zindex-2 { 0% { position: relative; } 50% { position: relative; } 100% { position: relative; z-index: 1; } } @keyframes marquee-zindex-2 { 0% { position: relative; } 50% { position: relative; } 100% { position: relative; z-index: 1; } } @keyframes choose-2-f-item { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .section-subtitle-8 { font-size: 16px; font-weight: 400; line-height: 150%; text-transform: uppercase; color: var(--primary-color-8); margin-bottom: 10px; } .section-subtitle-8 i { background: linear-gradient(90deg, #E02626 0%, #F0831F 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-right: 5px; } .section-title-8 { line-height: 1.15; font-size: 65px; color: #00071A; position: relative; margin-bottom: 0; } .section-pera-8 { font-size: 20px; font-weight: 400; line-height: 30px; color: var(--white-color); font-family: var(--inter); opacity: 0.8; margin-top: 30px; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .section-title-8 { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section-title-8 { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section-title-8 { font-size: 50px; } } @media (max-width: 767px) { .section-title-8 { font-size: 36px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section-title-8 { font-size: 45px; } } .section-title-8::after { content: ""; position: absolute; width: 86px; height: 86px; border-radius: 50%; background-color: var(--primary-color-8); left: -20px; top: 0; z-index: -1; } .section-p-8 { font-size: 20px; line-height: 30px; font-weight: 400; font-family: var(--inter); color: var(--body-8-color); } .section-subtitle-9 { position: relative; display: inline-block; font-family: var(--recoleta); background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; font-size: 16px; line-height: 1; text-transform: uppercase; margin-bottom: 17px; } .section-subtitle-9::after { content: ""; position: absolute; width: 100%; height: 6px; opacity: 0.2; background: linear-gradient(180deg, #2AF598 0%, #009EFD 100%); left: 0; bottom: 0px; } .section-title-9 { font-size: 70px; font-weight: 700; line-height: 1.14; color: var(--white-color); margin-bottom: 0; } /*---------------------------------------------------- */ /*Header area*/ /*----------------------------------------------------*/ @-webkit-keyframes rotate-2 { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @keyframes rotate-2 { 0% { transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } .bi-header-section.header-style-four { padding: 22px 0px; background: #161729; border-radius: 0px 0px 50px 50px; -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 56, 56, 0.5); box-shadow: 0px 1px 0px 0px rgba(255, 56, 56, 0.5); } .bi-header-section.header-style-four .bi-header-content { margin: 0 auto; max-width: 1290px; } .bi-header-section.header-style-four .bi-header-social a { color: #fff; font-size: 15px; margin-left: 15px; } .bi-header-section.header-style-four .bi-header-social a:first-child { margin-left: 0; } .bi-header-section.header-style-four .bi-header-social a:hover { color: var(--base-color); } .bi-header-section.header-style-four.sticky-on { right: 0; top: auto; padding: 0; bottom: 40px; max-width: 1200px; margin: 0 auto; padding: 0px 30px; border-radius: 100px; -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .bi-header-section.header-style-four.sticky-on .bi-header-social { display: none; } .bi-header-section.header-style-four.sticky-on .dropdown-menu { bottom: 100%; top: auto; } .bi-header-section.header-style-four.sticky-on .dropdown-menu .dropdown-menu { top: 30px; bottom: auto; } .bi-header-section.header-style-four .bi-header-main-navigation .main-navigation li a { z-index: 1; position: relative; } .bi-header-section.header-style-four .bi-header-main-navigation .main-navigation li a:after { top: 0; left: -5px; z-index: -1; width: 22px; content: ""; height: 22px; position: absolute; border-radius: 100%; background-color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: scale(0); transform: scale(0); } /* Megamenu Start*/ .haptic__common-h .hap-megamenu, .haptic__common-h .hap-megamenu{ position: static !important; } .haptic__common-h .hap-megamenu .dropdown-menu, .haptic__common-h .hap-megamenu .dropdown-menu, .haptic__common-h .hap-megamenu .submenu { left: 0; right: 0; top: 100%; width: 100%; padding: 20px; margin: 0 auto !important; max-width: 1230px; height: 650px; overflow: hidden; overflow-y: auto; } .haptic__common-h .hap-megamenu .hap-megamenu-item h3, .haptic__common-h .hap-megamenu .hap-megamenu-item h3 { color: #fff; font-size: 17px; font-weight: 700; text-align: center; padding-top: 15px; } .haptic__common-h.hpt-header-2-area .hap-megamenu .hap-megamenu-item h3{ color: #000; } .haptic__common-h .hap-megamenu .hap-menu-btn-grp a:hover{ color: var(--base-color2); background-color: #fff; } .haptic__common-h .hap-megamenu .hap-menu-btn-grp, .haptic__common-h .hap-megamenu .hap-menu-btn-grp { left: 0; top: 60%; right: 0; opacity: 0; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: .5s; transition: .5s; } .haptic__common-h .hap-megamenu .hap-megamenu-item:hover .hap-menu-btn-grp, .hap-header-section .hap-megamenu .hap-megamenu-item:hover .hap-menu-btn-grp { top: 50%; opacity: 1; } /* Megamenu end */ .hap-megamenu-item .hap-megamenu-item-btn img{ border-radius: 10px; } .hap-menu-btn-grp, .hap-menu-btn-grp{ left:0; top:60%; right:0; opacity:0; position:absolute; -webkit-transform:translateY(-50%); transform:translateY(-50%); -webkit-transition:.5s; transition:.5s } .hap-megamenu-item .hap-menu-btn-grp a:hover, .hap-megamenu-item .hap-menu-btn-grp a:hover { padding-left: 10px !important; } .hap-megamenu-item .hap-menu-btn-grp a, .hap-megamenu-item .hap-menu-btn-grp a{ width:125px !important; margin:0 auto 8px; white-space:nowrap; font-size:14px!important; font-weight:500!important; padding:8px 10px!important; background-color:var(--base-color2); display: block; } .hap-menu-btn-grp a:hover{ color:var(--base-color); background-color:#fff } .bi-header-section.header-style-four .bi-header-main-navigation .main-navigation li:hover a { color: #fff; } .bi-header-section.header-style-four .bi-header-main-navigation .main-navigation li:hover a:before { -webkit-transform: scale(1); transform: scale(1); } .hap-header-section { left: 0; top: 28px; z-index: 10; width: 100%; position: absolute; } .hap-header-section .dropdown { position: relative; } .hap-header-section .dropdown:after { top: 5px; color: #fff; right: -15px; content: "\f107"; font-size: 14px; font-weight: 700; font-weight: 900; position: absolute; font-family: "Font Awesome 5 Pro"; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .hap-header-section .dropdown:hover > .dropdown-menu { visibility: visible; opacity: 1; clip: inherit; -webkit-transform: scaleY(1); -khtml-transform: scaleY(1); transform: scaleY(1); } .hap-header-section .dropdown-menu { left: 0; top: 65px; z-index: 100; margin: 0px; padding: 20px 0; height: auto; min-width: 230px; display: block; border: none; border-radius: 0; position: absolute; opacity: 0; background: #000; border-radius: 2px; -webkit-transform: scaleY(0); transform: scaleY(0); transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; text-align: left; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hap-header-section .dropdown-menu .dropdown-menu { top: 30px; left: auto; right: 100%; transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; -webkit-transform: scaleY(0) !important; transform: scaleY(0) !important; } .hap-header-section .dropdown-menu .dropdown-menu a { font-size: 14px; font-weight: 400; color: #fff; } .hap-header-section .dropdown-menu .dropdown-menu a:before { display: none; } .hap-header-section .dropdown-menu li { display: block; margin: 0 !important; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .hap-header-section .dropdown-menu li:last-child { border-bottom: none; } .hap-header-section .dropdown-menu li:after { top: 8px; right: 15px; font-size: 16px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .hap-header-section .dropdown-menu li.dropdown:hover .dropdown-menu { top: 0; -webkit-transform: scaleY(1) !important; transform: scaleY(1) !important; } .hap-header-section .main-navigation .navbar-nav .dropdown-menu a { width: 100%; display: block; position: relative; padding: 10px 30px !important; color: #fff; font-weight: 600; font-size: 17px; } .hap-header-section .dropdown-menu a:before { display: none; } .hap-header-section .dropdown-menu a:hover { padding-left: 40px !important; color: var(--hap-base-color) !important; } .hap-header-section.sticky-on { top: 0; width: 100%; z-index: 10; padding: 0; position: fixed; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; background-color: #fff; -webkit-animation-name: slideInDown; animation-name: slideInDown; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; -webkit-box-shadow: 0px 4px 4px 0px rgba(100, 109, 152, 0.0588235294); box-shadow: 0px 4px 4px 0px rgba(100, 109, 152, 0.0588235294); } .hap-header-section.sticky-on .hap-header-top-area { display: none; } .hap-header-section.sticky-on .hap-header-menu-navigation { padding: 30px 15px; } .hap-header-top-area { color: #fff; margin: 0 auto; padding: 8px 70px; max-width: 1145px; border-top-left-radius: 100px; border-top-right-radius: 100px; background: var(--hap-gradient-color); } .hap-header-top-area .top-info-cta li { font-size: 15px; font-weight: 700; margin-right: 40px; } .hap-header-top-area .top-info-cta li i { margin-right: 5px; } .hap-header-top-area .top-info-cta li:last-child { margin-right: 0; } .hap-header-top-area .top-social-area a { font-size: 15px; margin-left: 30px; } .hap-header-menu-navigation { padding: 30px 60px; border-radius: 100px; background-color: #fff; } .hap-header-menu-navigation .main-navigation .nav { display: inherit; } .hap-header-menu-navigation .main-navigation li { margin: 0px 30px; } .hap-header-menu-navigation .main-navigation li a { color: #000000; font-size: 18px; font-weight: 500; padding-bottom: 40px; } .hap-header-menu-navigation .main-navigation li:hover a { color: var(--hap-base-color); } .hap-header-menu-navigation .hap-header-cta-btn-grp button, .hap-header-menu-navigation .hap-header-cta-btn-grp .cart-btn { padding: 0; color: #000; border: none; font-size: 18px; margin-left: 23px; background-color: transparent; } .hap-header-menu-navigation .hap-header-cta-btn-grp .cart-btn span { top: 3px; right: -10px; width: 15px; height: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; color: #fff; font-size: 9px; font-weight: 800; position: absolute; border-radius: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--hap-base-color); } .bi-header-section { top: 0; left: 0; z-index: 10; width: 100%; position: absolute; } .bi-header-section .nav { display: inherit; } .bi-header-section .dropdown { position: relative; } .bi-header-section .dropdown:hover .dropdown-menu { visibility: visible; opacity: 1; clip: inherit; -webkit-transform: scaleY(1); -khtml-transform: scaleY(1); transform: scaleY(1); } .bi-header-section .dropdown-menu { left: 0; top: 65px; z-index: 100; margin: 0px; padding: 20px 0; height: auto; min-width: 230px; display: block; border: none; border-radius: 0; position: absolute; opacity: 0; background: #000; border-radius: 2px; -webkit-transform: scaleY(0); transform: scaleY(0); transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; text-align: left; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .bi-header-section .dropdown-menu .dropdown-menu { top: 30px; left: 100%; transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; -webkit-transform: scaleY(0) !important; transform: scaleY(0) !important; } .bi-header-section .dropdown-menu .dropdown-menu a { font-size: 14px; font-weight: 400; color: #fff; } .bi-header-section .dropdown-menu .dropdown-menu a:before { display: none; } .bi-header-section .dropdown-menu li { display: block; margin: 0 !important; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .bi-header-section .dropdown-menu li:last-child { border-bottom: none; } .bi-header-section .dropdown-menu li:after { top: 8px; right: 15px; font-size: 16px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .bi-header-section .dropdown-menu li.dropdown:hover > .dropdown-menu { top: 0; -webkit-transform: scaleY(1) !important; transform: scaleY(1) !important; } .bi-header-section .dropdown-menu a { display: block; position: relative; padding: 10px 30px !important; color: #fff !important; font-weight: 600 !important; font-size: 14px !important; } .bi-header-section .dropdown-menu a:before { display: none; } .bi-header-section .dropdown-menu a:hover { padding-left: 40px !important; color: var(--base-color) !important; } .bi-header-section .bi-header-cta-btn-grp { margin-left: 25px; } .bi-header-section .bi-header-cta-btn-grp button { padding: 0; color: #fff; border: none; font-size: 18px; margin-left: 23px; background-color: transparent; } .bi-header-section .bi-header-cta-btn-grp .cart-btn span { top: 3px; right: -10px; width: 15px; color: #fff; height: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 9px; font-weight: 800; position: absolute; border-radius: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--base-color2); } .bi-header-section .bi-header-cta-btn-grp .offcanves-btn { margin-left: 40px; } .bi-header-section .bi-header-cta-btn-grp .offcanves-btn button { width: 58px; height: 58px; border-radius: 100%; background-color: #272727; } .bi-header-section.sticky-on { top: 0; width: 100%; z-index: 10; padding: 0; position: fixed; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: slideInDown; animation-name: slideInDown; background-color: #000; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .bi-header-section.sticky-on .bi-header-content { padding: 12px 0px; } .bi-header-section.sticky-on .dropdown-menu { top: 55px; } .bi-header-section.header-style-one .bi-header-content { margin: 0 auto; padding: 20px 0px; max-width: 1550px; } .bi-header-section.header-style-one .bi-header-social { margin-left: 50px; } .bi-header-section.header-style-one .bi-header-social a { color: #fff; font-size: 15px; margin-left: 15px; } .bi-header-section.header-style-one .bi-header-social a:hover { color: var(--base-color); } .bi-header-section.header-style-two.sticky-on { background-color: rgb(14, 15, 25); } .bi-header-section.header-style-two.sticky-on .bi-header-content { padding: 10px 15px; } .bi-header-section.header-style-two .bi-header-content { margin: 0 auto; max-width: 1700px; padding: 35px 15px; } .bi-header-section.header-style-two .bi-header-main-navigation .main-navigation { font-family: var(--heading-2); } .bi-header-section.header-style-two .bi-header-main-navigation .main-navigation li { margin: 0px 32px; } .bi-header-section.header-style-two .bi-header-main-navigation .main-navigation li a { font-size: 15px; font-weight: 500; padding-bottom: 40px; } .bi-header-section.header-style-two .bi-header-cta-btn-grp .bi-header-search button { padding: 0; color: #fff; border: none; font-size: 20px; background-color: transparent; } .no-results .search-widget input[type="text"] { width: 80%; padding: 10px; } .no-results .search-widget button { background: #000; color: #fff; border: none; padding: 11px 15px; } .bi-header-section.header-style-two .bi-header-cta-btn-grp .cta-btn-info { margin-left: 40px; } .bi-header-section.header-style-two .bi-header-cta-btn-grp .cta-btn-info .inner-icon { width: 50px; height: 50px; margin-right: 18px; border-radius: 100%; background-color: #fff; color: var(--base-color); } .bi-header-section.header-style-two .bi-header-cta-btn-grp .cta-btn-info .inner-text span, .bi-header-section.header-style-two .bi-header-cta-btn-grp .cta-btn-info .inner-text a { display: block; } .bi-header-section.header-style-two .bi-header-cta-btn-grp .cta-btn-info .inner-text span { color: #f8762b; font-size: 12px; } .bi-header-section.header-style-two .bi-header-cta-btn-grp .cta-btn-info .inner-text a { color: #fff; font-size: 15px; font-weight: 700; } .bi-header-section.header-style-two .bi-header-cta-btn-grp .cta-btn-area { margin-left: 30px; } .bi-header-section.header-style-three .bi-header-content { padding: 17px 60px; } .bi-header-section.header-style-three .bi-header-content .brand-logo { max-width: 135px; } .bi-header-section.header-style-three .bi-header-cta-btn-grp .cart-btn span { background-color: #fff; color: var(--base-color); } .bi-header-section.header-style-three .bi-header-cta-btn-grp .cart-btn button { margin-left: 0; } .bi-header-main-navigation .main-navigation { font-family: var(--heading); } .bi-header-main-navigation .main-navigation li { margin: 0px 28px; } .bi-header-main-navigation .main-navigation li a { color: #fff; font-size: 16px; font-weight: 600; padding-bottom: 40px; } .bi-header-main-navigation .main-navigation li:hover a { color: var(--base-color); } .header-1-transparent { position: absolute; z-index: 4; left: 0; right: 0; top: 0; } .hpt-header-1-area { padding-top: 22px; padding-bottom: 22px; } .hpt-header-1-content { display: flex; justify-content: space-between; align-items: center; } .hpt-header-1-action { text-align: right; display: flex; align-items: center; justify-content: end; gap: 0 48px; } @media (max-width: 767px) { .hpt-header-1-action .hpt-cart-btn-1 { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-header-1-action .hpt-cart-btn-1 { display: inline-block; } } @media (max-width: 767px) { .hpt-header-1-action .hpt-search-btn-1 { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-header-1-action .hpt-search-btn-1 { display: inline-block; } } .sticky_header_1 { top: 0; -webkit-transition: all 0.6s linear 0s; -moz-transition: all 0.6s linear 0s; -ms-transition: all 0.6s linear 0s; -o-transition: all 0.6s linear 0s; transition: all 0.6s linear 0s; } .sticky_header_1:is(.sticky1) { -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; position: fixed; top: 0; left: 0; right: 0; width: 100%; animation: slideInDown 0.5s; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); padding-top: 10px; padding-bottom: 10px; } .header-2-transparent { position: absolute; z-index: 4; left: 0; right: 0; top: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-header-2-area { padding-top: 20px; padding-bottom: 20px; } } .hpt-header-2-content { display: flex; justify-content: space-between; align-items: center; border-radius: 0px 0px 500px 500px; background-color: #fff; box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.1); border-bottom: 1px solid #B60B0B; padding: 0 70px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-header-2-content { padding: 0 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-header-2-content { padding: 0 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-header-2-content { padding: 20px 70px; } } @media (max-width: 767px) { .hpt-header-2-content { padding: 15px 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-header-2-content { padding: 20px 70px; } } .hpt-header-2-action { text-align: right; display: flex; align-items: center; justify-content: end; gap: 0 20px; } @media (max-width: 767px) { .hpt-header-2-action .cart-btn-2 { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-header-2-action .cart-btn-2 { display: inline-block; } } .hpt-header-2-menu ul { padding: 0; margin: 0; } .hpt-header-2-menu ul .has-dropdown { position: relative; z-index: 5; text-align: start; } .hpt-header-2-menu ul li { display: inline-block; margin: 0 24px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-header-2-menu ul li { margin: 0 12px; } } .hpt-header-2-menu ul li a { font-size: 18px; font-family: "Kanit", sans-serif; color: #00071A; font-weight: 400; padding: 35px 0; display: inline-block; text-transform: capitalize; line-height: 1; position: relative; } .hpt-header-2-menu ul li a::after { position: absolute; content: ""; left: auto; right: 0; bottom: 30px; background: var(--home-9-gd-color); width: 100%; height: 2px; border-radius: 10px; opacity: 0; visibility: hidden; width: 0%; -webkit-transition: all 0.5s linear 0s; -moz-transition: all 0.5s linear 0s; -ms-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .hpt-header-2-menu ul li .submenu { position: absolute; left: 0; top: 100%; background: #fff; width: 240px; opacity: 0; visibility: hidden; transform: scaleY(0); transform-origin: 0 0 0; -webkit-transition: all 0.5s linear 0s; -moz-transition: all 0.5s linear 0s; -ms-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; box-shadow: 0 9px 19px rgba(0, 0, 0, 0.1); } .hpt-header-2-menu ul li .submenu li { display: block; margin: 0; position: relative; z-index: 5; } .hpt-menu-btn-1 { position: relative; width: 62px; height: 62px; line-height: 62px; border-radius: 50%; background: transparent; border: 1px solid #fff; outline: none; font-size: 25px; color: #333333; } .hpt-menu-btn-1 i { position: relative; z-index: 1; } .hpt-menu-btn-1::after { position: absolute; content: ""; width: 85%; height: 85%; border-radius: 50%; background-color: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .hpt-menu-btn-1::before { position: absolute; content: ""; width: 100%; height: 100%; border-radius: 50%; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); left: 0%; top: 0%; transform: scale(0); -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; transition-delay: ease-in 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-menu-btn-1 { width: 50px; height: 50px; font-size: 20px; line-height: 50px; } } button.hpt-cart-btn-1.header-cart-btn { background: transparent; border: none; } .hpt-menu-btn-1:hover { border-color: transparent; } .hpt-menu-btn-1:hover::after { opacity: 0; } .hpt-menu-btn-1:hover::before { transform: scale(1); } .hpt-header-2-menu ul li .submenu li a { display: block; padding: 15px 25px; color: #00071A; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .hpt-header-2-menu ul li .submenu li a::after { bottom: 0; } .hpt-header-2-menu ul li .submenu li .submenu { left: 100%; top: 0; } .hpt-header-2-menu ul li .submenu li:hover > a { background-color: var(--clr-hover-primary); background-color: transparent; } .hpt-header-2-menu ul li .submenu li:not(:last-child) { border-bottom: 1px solid rgba(28, 42, 78, 0.231372549); } .hpt-header-2-menu ul li:hover > .submenu { opacity: 1; visibility: visible; transform: scaleY(1); } .hpt-header-2-menu ul li:hover > a { background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hpt-header-2-menu ul li:hover > a::after { opacity: 1; visibility: visible; right: auto; left: 0; width: 100%; } .hpt-header-2-area .mobile_menu_button { color: #00071A; top: -18px; right: -18px; } .hpt-header-2-area .mobile_menu_content .mobile-main-navigation { width: 100%; text-align: left; } .sticky_header_2 { top: 0; -webkit-transition: all 0.6s linear 0s; -moz-transition: all 0.6s linear 0s; -ms-transition: all 0.6s linear 0s; -o-transition: all 0.6s linear 0s; transition: all 0.6s linear 0s; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .sticky_header_2 { padding-top: 0; padding-bottom: 0; } } .sticky_header_2:is(.sticky2) { -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; position: fixed; top: 0; left: 0; right: 0; width: 100%; animation: slideInDown 0.5s; } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-400px); -ms-transform: translateY(-400px); transform: translateY(-400px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .hpt-header-9-area { position: relative; background: #A10B0A; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); z-index: 9; } @media (max-width: 767px) { .hpt-header-9-area { background-color: var(--home-9-sd-color); } } .hpt-header-9-content { position: relative; background-color: var(--home-9-sd-color); padding: 5px 0; } .hpt-header-9-content .bg-shape-1 { position: absolute; top: 0; left: -23%; height: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-header-9-content .bg-shape-1 { left: -31%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-header-9-content .bg-shape-1 { left: -39%; } } @media (max-width: 767px) { .hpt-header-9-content .bg-shape-1 { left: -67%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-header-9-content .bg-shape-1 { left: -36%; } } .hpt-header-9-content .bg-shape-1 img { width: 100%; height: 100%; } .hpt-header-9-content .bg-shape-2 { position: absolute; top: 0; right: -27%; height: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-header-9-content .bg-shape-2 { right: -35%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-header-9-content .bg-shape-2 { right: -44%; } } @media (max-width: 767px) { .hpt-header-9-content .bg-shape-2 { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-header-9-content .bg-shape-2 { display: block; right: -45%; } } .hpt-header-9-content .bg-shape-2 img { width: 100%; height: 100%; } .hpt-header-9-content .brand-logo { position: relative; z-index: 1; } .hpt-header-9-action { position: relative; gap: 60px; } .hpt-header-9-action .mobile_menu_button.open_mobile_menu { width: 58px; height: 58px; background: #0B0C0E; position: relative; z-index: 1; border-radius: 50%; text-align: center; line-height: 58px; flex: 0 0 auto; overflow: hidden; transition: 500ms ease; } .hpt-header-9-action .mobile_menu_button.open_mobile_menu::after { content: ""; position: absolute; width: 100%; height: 100%; background-color: var(--white-color); clip-path: polygon(0 0, 100% 0, 100% 35%, 100% 70%, 100% 100%, 22% 100%, 0 79%, 25% 60%, 0 41%, 24% 21%); left: 61px; right: 0; z-index: -1; transition: 500ms ease-out; } .hpt-header-9-action .mobile_menu_button.open_mobile_menu:hover { color: var(--home-9-sd-color); } .hpt-header-9-action .mobile_menu_button.open_mobile_menu:hover::after { left: 0; clip-path: polygon(0 0, 100% 0, 100% 35%, 100% 70%, 100% 100%, 0 100%, 0 79%, 0 58%, 0 41%, 0 23%); } .hpt-header-9-action .search-btn { outline: none; border: none; background: transparent; font-size: 28px; color: var(--white-color); transition: 500ms ease-in-out; } .hpt-header-9-action .search-btn:hover { color: var(--home-9-sd-color); } .hpt-header-9-area .hpt-header-8-main-navigation * { font-family: var(--recoleta) !important; font-weight: 600 !important; z-index: 1; } #hpt-header-9 .mobile_menu_button.open_mobile_menu { display: none; } .header_9_sticky:is(.sticky9) { -webkit-transition: all 400ms ease 0s; -moz-transition: all 400ms ease 0s; -ms-transition: all 400ms ease 0s; -o-transition: all 400ms ease 0s; transition: all 400ms ease 0s; position: fixed; top: 0; left: 0; right: 0; width: 100%; animation: slideInDown 0.5s; z-index: 99; } .hpt-header-9-action .mobile_menu_button.open_mobile_menu { width: 58px; height: 58px; background: #0B0C0E; position: relative; z-index: 1; border-radius: 50%; text-align: center; line-height: 58px; flex: 0 0 auto; overflow: hidden; transition: 500ms ease; display: block !important; top: 0; } .hpt-header-9-action .mobile_menu_button.open_mobile_menu::after { content: ""; position: absolute; width: 100%; height: 100%; background-color: var(--white-color); clip-path: polygon(0 0, 100% 0, 100% 35%, 100% 70%, 100% 100%, 22% 100%, 0 79%, 25% 60%, 0 41%, 24% 21%); left: 61px; right: 0; z-index: -1; transition: 500ms ease-out; } .hpt-header-9-action .mobile_menu_button.open_mobile_menu:hover { color: var(--home-9-sd-color); } .hpt-header-9-action .mobile_menu_button.open_mobile_menu:hover::after { left: 0; clip-path: polygon(0 0, 100% 0, 100% 35%, 100% 70%, 100% 100%, 0 100%, 0 79%, 0 58%, 0 41%, 0 23%); } .sidemenu-area { /* Track */ /* Handle */ /* Handle on hover */ } .sidemenu-area::-webkit-scrollbar { width: 0px; background-color: transparent; opacity: 0; } .sidemenu-area::-webkit-scrollbar-track { box-shadow: none; border-radius: 5px; opacity: 0; } .sidemenu-area::-webkit-scrollbar-thumb { background: transparent; border-radius: 5px; opacity: 0; } .sidemenu-area::-webkit-scrollbar-thumb:hover { background: var(--clr-theme-secondary); } .sidemenu-area { position: relative; overflow-Y: scroll; overflow-x: hidden; width: 100%; max-width: 450px; box-shadow: 0 13px 29px rgba(4, 0, 23, 0.1); height: 100vh; position: fixed; z-index: 333; top: 0; padding: 50px 50px; background-color: #fff; left: -500px; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .sidemenu-area:is(.active) { left: 0; visibility: visible; opacity: 1; } .sidemenu-close-btn { width: 50px; height: 40px; border: 1px solid var(--clr-theme-primary); text-align: center; line-height: 40px; font-size: 18px; background-color: var(--clr-bg-white-light-6); color: var(--clr-theme-primary); -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; position: absolute; right: 1px; top: 70px; cursor: pointer; } .sidemenu-close-btn:hover { background-color: var(--clr-theme-primary); color: var(--clr-common-white); } .sidemenu-profile { border-bottom: 1px solid #c9c9c9; padding-bottom: 25px; position: relative; left: -20%; -webkit-transition: all 0.6s linear 0s; -moz-transition: all 0.6s linear 0s; -ms-transition: all 0.6s linear 0s; -o-transition: all 0.6s linear 0s; transition: all 0.6s linear 0s; } .sidemenu-profile:is(.is_show) { left: 0; } .sidemenu-profile .img { width: 90px; height: 90px; border-radius: 50%; border: 1px solid var(--clr-theme-primary); overflow: hidden; margin-bottom: 19px; } .sidemenu-profile .img img { width: 100%; height: 100%; object-fit: cover; } .sidemenu-profile .name { font-size: 28px; font-weight: 700; text-transform: uppercase; margin-bottom: 1px; } .sidemenu-profile span { display: block; font-size: 18px; font-weight: 400; text-transform: capitalize; color: var(--clr-body-text-4); letter-spacing: 1px; } .sidemenu-social-link { border-bottom: 1px solid #c9c9c9; padding-bottom: 30px; position: relative; left: -60%; -webkit-transition: all 0.6s linear 0s; -moz-transition: all 0.6s linear 0s; -ms-transition: all 0.6s linear 0s; -o-transition: all 0.6s linear 0s; transition: all 0.6s linear 0s; transition-delay: 0.5s; } .sidemenu-social-link:is(.is_show) { left: 0; } .sidemenu-social-link .title { font-size: 16px; font-weight: 700; line-height: 26px; color: var(--clr-body-heading); margin-bottom: 17px; } .sidemenu-social-link ul { list-style: none; } .sidemenu-social-link ul { list-style: none; padding: 0; margin: 0; } .sidemenu-social-link ul li { display: inline-block; } .sidemenu-social-link ul li:not(:first-child) { margin-left: 12px; } .sidemenu-social-link ul li a { display: inline-block; background-color: var(--clr-common-white); width: 40px; height: 40px; line-height: 40px; font-size: 19px; color: var(--clr-body-heading); text-align: center; border-radius: 50%; } .sidemenu-social-link ul li a:hover { background-color: var(--clr-theme-primary); color: var(--clr-common-white); } .sidemenu-contact-info { position: relative; left: -80%; -webkit-transition: all 0.6s linear 0s; -moz-transition: all 0.6s linear 0s; -ms-transition: all 0.6s linear 0s; -o-transition: all 0.6s linear 0s; transition: all 0.6s linear 0s; transition-delay: 0.6s; } .sidemenu-contact-info:is(.is_show) { left: 0; } .sidemenu-contact-info > .title { color: var(--clr-body-heading); font-weight: 700; line-height: 26px; font-size: 16px; margin-bottom: 26px; } .sidemenu-contact-info .info-box { margin-bottom: 16px; } .sidemenu-contact-info .info-box .title { font-size: 16px; font-weight: 500; line-height: 26px; color: var(--clr-body-heading); margin-bottom: 4px; } .sidemenu-contact-info .info-box .title i { margin-right: 10px; } .sidemenu-contact-info .info-box p { color: var(--clr-body-text-4); margin-bottom: 0; } .sidebar-mobile-menu-wrap { position: relative; left: -40%; -webkit-transition: all 0.6s linear 0s; -moz-transition: all 0.6s linear 0s; -ms-transition: all 0.6s linear 0s; -o-transition: all 0.6s linear 0s; transition: all 0.6s linear 0s; transition-delay: 0.4s; } .sidebar-mobile-menu-wrap:is(.is_show) { left: 0; } .sidebar-mobile-menu-wrap .mobile_menu { overflow: hidden; } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar { border-bottom: 1px solid #c9c9c9; padding-bottom: 25px; margin-bottom: 30px; } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar .mean-nav { background: transparent; margin-top: 0; } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar .mean-nav ul li { padding: 0; } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar .mean-nav ul li a { padding: 15px 0; width: 100%; font-size: 16px; text-transform: capitalize; border-top: none; color: var(--clr-body-text-4); } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar .mean-nav ul li a:hover { color: var(--clr-theme-primary); background-color: #ececec; } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar .mean-nav ul li:not(:last-child) a { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar .mean-nav ul li:is(.has-dropdown-menu) a::after { display: none; } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar .mean-nav ul li .mean-expand { border: none !important; background: transparent; border-style: none; width: 40px; height: 53px; line-height: 53px; padding: 0; margin: 0; } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar .mean-nav ul li .mean-expand:hover { background-color: rgba(255, 255, 255, 0.2); color: var(--clr-theme-primary); } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar .mean-nav ul li .mean-expand:is(.mean-clicked) { background-color: rgba(255, 255, 255, 0.2); color: var(--clr-theme-primary); } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar .mean-nav ul li .sub-menu { border-top: none; background-color: transparent; position: unset; width: 100%; top: 100%; visibility: visible; opacity: 1; transform-origin: top; transform: scaleY(1); } .sidebar-mobile-menu-wrap .mobile_menu .mean-bar .mean-nav ul li .sub-menu li a { border: none; padding-left: 35px; font-size: 16px; color: var(--clr-body-text-4); } .offcanvas-overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; content: ""; background-color: rgba(4, 0, 23, 0.8); z-index: 5; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; transform: scaleX(0); transform-origin: left; } .offcanvas-overlay:is(.overlay_open) { opacity: 1; visibility: visible; transform: scaleX(1); } .offcanvas-overlay:is(.visible) { opacity: 1; visibility: visible; transform: scaleX(1); } .offcanvas-overlay:is(.active) { opacity: 1; visibility: visible; transform: scaleX(1); } .h1-sidebar-menu { padding-left: 15px; border-left: 1px solid rgba(0, 7, 26, 0.1); } .h1-sidebar-menu .sidebar-menu { margin-bottom: 20px; } .h1-sidebar-menu .sidebar-menu li a { font-size: 18px; color: #152028; display: flex; font-weight: 500; align-items: center; text-transform: uppercase; padding: 20px 0; line-height: 1; gap: 20px; } .h1-sidebar-menu .sidebar-menu li a:hover { color: #E02626; } .h1-sidebar-menu .sidebar-menu li a .icon { margin-left: auto; } .h1-sidebar-menu .sidebar-menu li a .icon:is(.iconrotete) i::before { content: "\f078"; } .h1-sidebar-menu .sidebar-menu li .submenu { padding-left: 40px; display: none; } .h1-sidebar-menu .sidebar-menu li .submenu li a { border-left: none; font-size: 18px; opacity: 0.8; text-transform: capitalize; padding: 10px 0; } .h2-sidemenu-wrap .mean-bar .mean-nav { background: transparent; margin-top: 40px; margin-bottom: 40px; } .h2-sidemenu-wrap .mean-bar .mean-nav li a { font-family: "Kanit", sans-serif; border: none; font-size: 16px; color: #00071A; text-transform: capitalize; } .h2-sidemenu-wrap .mean-bar .mean-nav li .mean-expand { border: none; background: transparent; margin-top: 4px; } .h2-sidemenu-wrap .mean-bar .mean-nav li .mean-expand:hover { background: transparent; } .h2-sidemenu-wrap .mean-bar .mean-nav li .mean-expand .mean-clicked { background: transparent; } .hpt-header-2-action button.hpt-search-btn-1.search_1_popup_toggle { color: #00071A; line-height: normal; font-size: 25px; } .hpt-search-btn-1 { border: none; outline: none; font-size: 30px; background: transparent; color: #fff; } .hpt-search-btn-1:hover { color: #E02626; } .popup-search-box { background-color: #fff; position: fixed; display: flex; left: 0; top: -100px; width: 100%; z-index: 9999; height: 100vh; align-items: center; transform: scaleY(0); transition: all 0.3s; transform-origin: top; opacity: 0; visibility: hidden; } .popup-search-box .title { color: #00071A; font-weight: 600; margin-bottom: 25px; } @media (max-width: 767px) { .popup-search-box .title { font-size: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .popup-search-box .title { font-size: 36px; } } .popup-search-box-form { display: flex; } @media (max-width: 767px) { .popup-search-box-form { flex-wrap: wrap; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .popup-search-box-form { flex-wrap: nowrap; } } .popup-search-box-form .popup-search-box-close-action-btn { height: 60px; width: 60px; font-size: 30px; border: none; outline: none; border-radius: 5px; margin-left: 25px; background: transparent; border: 1px solid rgba(0, 0, 0, 0.2); color: #111; flex: 0 0 auto; } @media (max-width: 767px) { .popup-search-box-form .popup-search-box-close-action-btn { margin: auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .popup-search-box-form .popup-search-box-close-action-btn { margin-left: 25px; margin-right: 0; margin-top: 0; margin-bottom: 0; } } .popup-search-box-form .popup-search-box-close-action-btn:hover { background-color: rgba(0, 0, 0, 0.2); border-color: transparent; } @media (max-width: 767px) { .popup-search-box { height: 100%; overflow-y: auto; } } .popup-search-box.active { top: 0; opacity: 1; visibility: visible; transform: scaleY(1); } .popup-search-box form { position: relative; width: 100%; } @media (max-width: 767px) { .popup-search-box form { margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .popup-search-box form { margin-bottom: 0px; } } .popup-search-box-input input { width: 100%; height: 60px; background: transparent; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; font-size: 14px; color: #111; padding: 0 30px; padding-right: 115px; } .popup-search-box-input input::placeholder { color: #111; font-size: 14px; } @media (max-width: 767px) { .popup-search-box-input input { width: 100%; background-color: transparent; opacity: 0.7; } } .popup-search-box button[type=submit] { position: absolute; right: 0; top: 0px; bottom: 0; padding: 0 30px; background: transparent; color: #111; font-size: 24px; border-radius: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: 1px solid rgba(0, 0, 0, 0.2); border-right: none; border-top: none; border-bottom: none; } .popup-search-box button[type=submit]:hover { color: var(--clr-common-white); background-color: rgba(0, 0, 0, 0.2); } .header-8-transparent { background: transparent; position: absolute; z-index: 4; left: 0; right: 0; top: 0; } .header_8_sticky:is(.sticky8) { background: #00071A; -webkit-transition: all 400ms ease 0s; -moz-transition: all 400ms ease 0s; -ms-transition: all 400ms ease 0s; -o-transition: all 400ms ease 0s; transition: all 400ms ease 0s; position: fixed; top: 0; left: 0; right: 0; width: 100%; animation: slideInDown 0.5s; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .header_8_sticky:is(.sticky8) { padding-top: 10px; padding-bottom: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-header-8-area { padding-top: 15px; padding-bottom: 15px; } } .hpt-header-8-content .brand-logo { flex: 0 0 auto; gap: 30px; } .hpt-header-8-action { gap: 30px; } @media (max-width: 767px) { .hpt-header-8-action .h8-btn-1 { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-header-8-action .h8-btn-1 { display: none; } } .hpt-header-8-action .mobile_menu_button { font-size: 25px; color: var(--white-color); } .hpt-header-8-main-navigation .main-navigation .navbar-nav { display: inherit; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li { display: inline-block; margin: 0 24px; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-header-8-main-navigation .main-navigation .navbar-nav li { margin: 0 12px; } } @media only screen and (min-width: 991px){ .hpt-header-8-action{ padding-right: 30px; } } .hpt-header-8-main-navigation .main-navigation .navbar-nav li a { font-family: var(--kanit); font-size: 16px; color: #fff; font-weight: 400; text-decoration: none; padding: 35px 0; display: inline-block; text-transform: capitalize; line-height: 1; position: relative; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li a::after { position: absolute; content: ""; left: 0; right: auto; bottom: 30px; background: #FF3838; width: 22px; height: 22px; border-radius: 10px; opacity: 0; visibility: hidden; width: 100%; z-index: -1; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:is(.dropdown) .dropdown-menu { left: 0; top: 100%; z-index: 100; margin: 0px; padding: 20px 0; min-width: 250px; display: block; border: none; border-radius: 0; position: absolute; background: #000; border-radius: 2px; text-align: left; opacity: 0; visibility: hidden; -webkit-transform: scaleY(0); transform: scaleY(0); transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:is(.dropdown) .dropdown-menu li { display: block; margin: 0; position: relative; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:is(.dropdown) .dropdown-menu li:is(.dropdown)::after { transform: translateY(-50%); top: 50%; color: #fff; right: 15px; content: "\f105"; font-size: 14px; position: absolute; font-family: "Font Awesome 5 Pro"; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:is(.dropdown) .dropdown-menu li a { width: 100%; display: block; position: relative; padding: 15px 30px !important; color: #fff !important; font-weight: 600 !important; font-size: 16px !important; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:is(.dropdown) .dropdown-menu li a::after { display: none; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:is(.dropdown) .dropdown-menu li a::before { position: absolute; content: ""; left: 50px; top: 50%; transform: translateY(-50%); background: #FF3838; width: 22px; height: 22px; border-radius: 10px; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; z-index: -1; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:is(.dropdown) .dropdown-menu li .dropdown-menu { opacity: 0; visibility: hidden; top: 0%; transform: translateY(-50%); left: -100%; min-width: 250px; transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; -webkit-transform: scaleY(0) !important; transform: scaleY(0) !important; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:is(.dropdown) .dropdown-menu li .dropdown-menu li::before { display: none; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:is(.dropdown) .dropdown-menu li .dropdown-menu li::after { display: none; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:is(.dropdown) .dropdown-menu li:hover > a::before { left: 22px; visibility: visible; opacity: 1; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:is(.dropdown) .dropdown-menu li:hover > .dropdown-menu { opacity: 1; visibility: visible; -webkit-transform: scaleY(1) !important; transform: scaleY(1) !important; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:hover > a { color: #fff; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:hover > a::after { opacity: 1; visibility: visible; right: auto; left: -10px; width: 22px; } .hpt-header-8-main-navigation .main-navigation .navbar-nav li:hover .dropdown-menu { opacity: 1; visibility: visible; -webkit-transform: scaleY(1); transform: scaleY(1); transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; -o-transform-origin: 0 0 0; } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-400px); -ms-transform: translateY(-400px); transform: translateY(-400px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /*// off canvas style*/ /*----------------------------------------------------*/ .sidebar-info-contents { position: relative; } .sidebar-info-contents .content-inner { position: relative; } .sidebar-info-contents .content-inner .logo { padding-bottom: 20px; max-width: 180px; } .sidebar-info-contents .content-inner .logo img { display: inline-block; max-width: 100%; } .close-side-widget, .close-side-widget:hover { color: #fff !important; font-size: 24px; } .xs-sidebar-group .xs-overlay { top: 0; left: 0; width: 100%; height: 100%; font-size: 0; position: fixed; pointer-events: none; } .xs-sidebar-group .xs-overlay .loader-area { height: 100vh; } .xs-sidebar-group.info-group .xs-overlay { z-index: 35; } .xs-sidebar-group .preloader-wrap { padding: 0px; } .xs-sidebar-group .loader-area { height: 100vh; } .xs-sidebar-group.info-group.isActive .preloader-wrap .loader-bg { left: 0; width: 100%; height: 100%; background-color: #000; -webkit-transition: 800ms all cubic-bezier(0.77, 0, 0.175, 1); transition: 800ms all cubic-bezier(0.77, 0, 0.175, 1); } .xs-sidebar-group.info-group .preloader-wrap .loader-bg { left: 0; width: 0; opacity: 0; opacity: 0.95; height: 100%; -webkit-transition: 800ms all cubic-bezier(0.1, 0.1, 0.1, 1); transition: 800ms all cubic-bezier(0.1, 0.1, 0.1, 1); } .xs-sidebar-group .widget-heading { top: 5px; right: 0; z-index: 2; padding: 20px; position: absolute; } .xs-sidebar-group .widget-heading a { font-size: 16px; font-weight: 500; } .xs-sidebar-widget { position: fixed; right: -100%; top: 0; bottom: 0; width: 100%; max-width: 50%; z-index: 999999; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: #272727; -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; visibility: hidden; opacity: 0; } .xs-sidebar-group.isActive .xs-sidebar-widget { opacity: 1; visibility: visible; right: 0; -webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; } .close-side-widget { color: #1768dd; font-size: rem(15px); display: block; } .sidebar-widget-container { position: relative; top: 150px; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in 0.3s; transition: all 0.3s ease-in 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .xs-sidebar-group.isActive .sidebar-widget-container { top: 0px; opacity: 1; visibility: visible; -webkit-transition: all 1s ease-out 1.2s; transition: all 1s ease-out 1.2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .sidebar-info-contents { font-family: var(--heading); } .sidebar-info-contents .sidebar-logo { padding: 20px 30px; margin-bottom: 30px; border-left: 1px solid; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .sidebar-info-contents .sidebar-menu { margin-bottom: 20px; border-top: 1px solid rgba(255, 255, 255, 0.15); } .sidebar-info-contents .sidebar-menu li a { color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; font-weight: 500; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-left: 1px solid; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .sidebar-info-contents .sidebar-menu li a i { width: 90px; font-size: 40px; font-size: 25px; text-align: center; line-height: 0.75; padding: 15px 20px; margin-right: 25px; border-right: 1px solid rgba(255, 255, 255, 0.15); } .sidebar-info-contents .sidebar-menu li a:hover { color: var(--base-color); } .sidebar-info-contents .sidebar-more-menu { font-size: 14px; font-weight: 500; padding: 10px 20px; margin-bottom: 15px; } .sidebar-info-contents .sidebar-more-menu span { color: #fff; font-weight: 600; margin-right: 15px; text-transform: capitalize; } .sidebar-info-contents .sidebar-more-menu li { margin-right: 10px; } .sidebar-info-contents .sidebar-more-menu li a { color: #fff; font-size: 13px; } .sidebar-info-contents .sidebar-more-menu li a:hover { color: var(--base-color); } .sidebar-info-contents .sidebar-social { font-weight: 500; padding-left: 20px; text-transform: uppercase; } .sidebar-info-contents .sidebar-social span { color: #fff; display: block; font-size: 16px; font-weight: 600; margin-bottom: 10px; display: inline-block; } .sidebar-info-contents .sidebar-social li { margin-bottom: 10px; } .sidebar-info-contents .sidebar-social li a { color: #fff; font-size: 14px; } .sidebar-info-contents .sidebar-social li a i { margin-right: 5px; } .sidebar-info-contents .sidebar-social li a:hover { color: var(--base-color); } .sidebar-info-contents .sidebar-copyright { color: #fff; font-size: 14px; margin-top: 30px; font-weight: 500; } /* cart sidebar */ .cart_sidebar { padding: 30px; padding-bottom: 50px; } .cart_sidebar_top { background-color: #0e0f11; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px 30px; margin-top: -30px; margin-left: -30px; margin-right: -30px; margin-bottom: 40px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cart_sidebar .heading_title { line-height: 1; font-size: 17px; color: #fff; font-weight: 600; } .cart_sidebar .cart_item { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 25px; } .cart_sidebar .cart_item:not(:last-child) { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #0e0f11; } .cart_sidebar .cart_item .item_image { display: block; min-width: 70px; overflow: hidden; position: relative; margin-right: 10px; width: 60px; padding: 5px; } .cart_sidebar .cart_item .item_title { font-size: 14px; font-weight: 500; margin-bottom: 10px; color: #fff; } .cart_sidebar .cart_item .item_price { line-height: 1; display: block; font-size: 14px; font-weight: 400; color: #fff; opacity: 0.6; } .cart_sidebar .cart_item .remove_btn { top: 5px; right: 0px; padding: 0; border: none; color: var(--base-color); font-size: 14px; line-height: 19px; text-align: center; position: absolute; border-radius: 100%; background: transparent; } .cart_sidebar { top: 0; width: 300px; right: -320px; height: 100vh; z-index: 9999; position: fixed; overflow-y: scroll; scrollbar-width: none; background-color: #000; -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.29); box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.29); -webkit-transition-duration: 500ms; transition-duration: 500ms; } .cart_sidebar.active { right: 0px; } .cart_sidebar .tx-close { right: -11px; } .cart_sidebar .tx-close:before, .cart_sidebar .tx-close:after { background-color: #fff; } .cart_sidebar_bottom { padding: 30px 30px 55px; } .cart_sidebar_button a { width: 100%; text-align: center; display: inline-block; padding: 14px 25px 16px; } .cart_sidebar_button a:not(:last-child) { margin-bottom: 10px; } .cart_sidebar_button a:nth-child(2) { color: #fff; background: #0e0f11; } .cart_sidebar .total_price { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 16px; font-weight: 500; margin-top: 30px; padding: 10px 0px; margin-bottom: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; border-top: 1px solid #0e0f11; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mobile_logo { top: 10px; left: 15px; display: none; position: absolute; } .mobile_menu_content { top: 0px; bottom: 0; left: -350px; height: 100vh; z-index: 101; position: fixed; width: 310px; overflow-y: scroll; background-color: #0f0d0d; padding: 20px 35px 35px 35px; -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.19); box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.19); -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .mobile_menu_content .mobile-main-navigation { width: 100%; } .mobile_menu_content .mobile-main-navigation .navbar-nav { width: 100%; } .mobile_menu_content .dropdown:after { display: none; } .mobile_menu_content .navbar-nav .dropdown-menu { position: static !important; -webkit-transform: none !important; transform: none !important; } .mobile_menu_content .mobile-main-navigation .navbar-nav li { width: 100%; display: block; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } .mobile_menu_content .mobile-main-navigation .navbar-nav li a { padding: 0; width: 100%; color: #fff; display: block; font-weight: 600; font-size: 14px; font-family: var(--heading); text-transform: uppercase; padding: 10px 30px 10px 0; } .mobile_menu_content .m-brand-logo { width: 120px; margin: 50px auto; } .mobile_menu_wrap.mobile_menu_on .mobile_menu_content { left: 0px; -webkit-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } .mobile_menu_overlay { top: 0; width: 100%; height: 100%; position: fixed; z-index: 100; right: 0%; height: 120vh; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.9); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .mobile_menu_overlay_on { overflow: hidden; } .mobile_menu_wrap.mobile_menu_on .mobile_menu_overlay { opacity: 1; visibility: visible; } .hpt-header-8-area .mobile_menu_button{ top:-38px } .mobile_menu_button { right: 0px; top: -30px; z-index: 5; color: #fff; display: none; font-size: 24px; cursor: pointer; line-height: 38px; position: absolute; text-align: center; } .mobile_menu .mobile-main-navigation .navbar-nav li a:after { display: none; } .mobile_menu .mobile-main-navigation .dropdown > .dropdown-menu { opacity: 1; visibility: visible; } .mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu { border: none; display: none; -webkit-transition: none; transition: none; -webkit-box-shadow: none; box-shadow: none; padding: 5px 0px; width: 100%; background-color: transparent; } .mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li { border: none; padding: 0 10px; line-height: 1; } .mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li:hover { background-color: transparent; } .mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li a { color: #fff; } .mobile_menu .mobile_menu_content .mobile-main-navigation .navbar-nav .dropdown-menu li a:hover { color: var(--base-color); background-color: transparent; } .mobile_menu .dropdown { position: relative; } .mobile_menu .dropdown .dropdown-btn { color: #9397a7; position: absolute; top: 3px; right: 0; height: 30px; padding: 5px 10px; } .mobile_menu .dropdown .dropdown-btn.toggle-open { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .mobile_menu .mobile_menu_close { top: 25px; right: 25px; cursor: pointer; color: #d60606; font-size: 20px; position: absolute; } .mobile_menu .mobile-search-bar { margin-bottom: 40px; } .mobile_menu .mobile-search-bar input { width: 100%; height: 50px; border: none; border-bottom: 1px solid #616161; background-color: transparent; } .mobile_menu .mobile-search-bar input::-webkit-input-placeholder { color: #616161; } .mobile_menu .mobile-search-bar input::-moz-placeholder { color: #616161; } .mobile_menu .mobile-search-bar input:-ms-input-placeholder { color: #616161; } .mobile_menu .mobile-search-bar input::-ms-input-placeholder { color: #616161; } .mobile_menu .mobile-search-bar input::placeholder { color: #616161; } .mobile_menu .mobile-search-bar button { top: 0; right: 0; color: #fff; padding: 0; height: 50px; border: none; position: absolute; background-color: transparent; } .mobile_menu .bi-mobile-header-social { margin-top: 40px; } .mobile_menu .bi-mobile-header-social a { color: #fff; margin: 0px 8px; font-size: 15px; } .mobile_menu .bi-mobile-header-social a:hover { color: var(--base-color); } .header-style-four .mobile_menu_button { top: -19px; } .header-style-one .mobile_menu_button { top: -36px; } .bi-slider-section-4 [data-background] { background-position: 50% 40%; } /*// Search style*/ /*----------------------------------------------------*/ .search-body { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-transition: -webkit-transform 0.7s ease; transition: -webkit-transform 0.7s ease; transition: transform 0.7s ease; transition: transform 0.7s ease, -webkit-transform 0.7s ease; background-color: rgba(0, 0, 0, 0.85); } .search-body.search-open { -webkit-transform-origin: top center; transform-origin: top center; -webkit-transform: scale(1, 1); transform: scale(1, 1); } .search-body .search-form { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .search-body .search-form .search-form-area { width: 100%; z-index: 9991; max-width: 600px; overflow: hidden; position: relative; border-radius: 5px; } .search-body .search-form input { width: 100%; color: #000; height: 60px; border: none; padding: 0px 30px; background-color: #fff; } .search-body .search-form input::-webkit-input-placeholder { color: #000; font-weight: 500; } .search-body .search-form input::-moz-placeholder { color: #000; font-weight: 500; } .search-body .search-form input:-ms-input-placeholder { color: #000; font-weight: 500; } .search-body .search-form input::-ms-input-placeholder { color: #000; font-weight: 500; } .search-body .search-form input::placeholder { color: #000; font-weight: 500; } .search-body .search-form button { top: 0; right: 0; color: #fff; border: none; width: 120px; height: 60px; position: absolute; background: var(--base-color); } .search-body .outer-close { top: 40px; right: 55px; width: 50px; height: 50px; cursor: pointer; line-height: 50px; border-radius: 3px; position: absolute; background-color: var(--base-color); } .search-body .outer-close i { color: #fff; } .search-open { opacity: 1; visibility: visible; } /*---------------------------------------------------- */ /********************* HOME PAGE 1 **************************/ /*Slider area*/ /*----------------------------------------------------*/ @-webkit-keyframes border_animation { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } 20% { -webkit-transform: scale(1.05); transform: scale(1.24); opacity: 1; } 100% { -webkit-transform: scale(1.7); transform: scale(1.7); opacity: 0; } } @keyframes border_animation { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } 20% { -webkit-transform: scale(1.05); transform: scale(1.24); opacity: 1; } 100% { -webkit-transform: scale(1.7); transform: scale(1.7); opacity: 0; } } .bi-slider-section-4 { overflow: hidden; } .bi-main-slider-item-4 { z-index: 1; padding: 230px 0px 140px; } .bi-main-slider-item-4 .slider_men { right: 0; z-index: 1; left: 80px; bottom: 20px; margin: 0 auto; text-align: center; opacity: 0; visibility: hidden; -webkit-transform: translateX(180px); transform: translateX(180px); } .bi-main-slider-item-4 .shape_1 { z-index: -1; top: 190px; left: 200px; opacity: 0; visibility: hidden; -webkit-transform: translateX(-80px); transform: translateX(-80px); } .bi-main-slider-item-4 .bi-main-slider-text { margin: 0 auto; max-width: 1300px; } .bi-main-slider-item-4 .bi-main-slider-text .slide-text__title { font-weight: 700; font-size: 153px; text-transform: uppercase; color: var(--base-color2); -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--base-color2); opacity: 0; visibility: hidden; -webkit-transform: translateX(-80px); transform: translateX(-80px); } .bi-main-slider-item-4 .bi-main-slider-text .slide-text__title span { color: #fff; display: block; font-size: 131px; -webkit-text-fill-color: #fff; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; } .bi-main-slider-item-4 .bi-main-slider-text .slide-text__title strong { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 310px; font-weight: 900; background: -webkit-gradient(linear, left top, left bottom, from(#FF3838), to(rgba(255, 56, 56, 0))); background: linear-gradient(180deg, #FF3838 0%, rgba(255, 56, 56, 0) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: inherit; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: transparent; } .bi-main-slider-item-4 .bi-main-slider-text .bi-slider-text { right: 0; top: 50px; z-index: 2; max-width: 350px; text-align: right; position: absolute; opacity: 0; visibility: hidden; -webkit-transform: translateY(80px); transform: translateY(80px); } .bi-main-slider-item-4 .bi-main-slider-text .bi-slider-text p { color: #fff; padding-bottom: 44px; } .bi-main-slider-item-4 .bi-slider-watch-video { right: 0; left: 23%; z-index: 6; bottom: 60px; margin: 0 auto; position: absolute; -webkit-transform: translateX(100px); transform: translateX(100px); opacity: 0; visibility: hidden; -webkit-transform: translateX(-80px); transform: translateX(-80px); } .bi-main-slider-item-4 .bi-slider-watch-video .inner-icon { color: #fff; width: 95px; height: 95px; border-radius: 100%; margin-right: 30px; background-color: var(--base-color2); } .bi-main-slider-item-4 .bi-slider-watch-video .inner-icon .video_btn_border { top: 0; left: 0; opacity: 0; width: 100%; height: 100%; border-radius: 100%; position: absolute; -webkit-animation-play-state: running; animation-play-state: running; border: 20px solid rgba(27, 28, 53, 0.7); -webkit-animation: border_animation 3.9s linear 0s infinite; animation: border_animation 3.9s linear 0s infinite; } .bi-main-slider-item-4 .bi-slider-watch-video .inner-icon .video_btn_border.border_wrap-2 { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .bi-main-slider-item-4 .bi-slider-watch-video .inner-icon .video_btn_border.border_wrap-3 { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; } .bi-main-slider-item-4 .bi-slider-watch-video .inner-text h4 { color: #fff; font-size: 24px; font-weight: 600; } .bi-main-slider-item-4 .bi-slider-watch-video .inner-text span { font-weight: 300; color: var(--base-color2); font-family: var(--heading); } .bi-main-slider-next-prev .bi-main-slider-arrow-4 { z-index: 5; color: #fff; width: 300px; bottom: 80px; height: 300px; font-size: 50px; position: absolute; border-radius: 100%; } .bi-main-slider-next-prev .bi-main-slider-arrow-4.bi-main-button-prev-4 { left: -150px; padding-right: 70px; } .bi-main-slider-next-prev .bi-main-slider-arrow-4.bi-main-button-next-4 { right: -150px; padding-left: 70px; } .bi-main-slider-4 .swiper-slide-active .bi-main-slider-item-4 .slider_men { opacity: 1; visibility: visible; -webkit-transition: all 1500ms ease; transition: all 1500ms ease; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 1400ms; transition-delay: 1400ms; } .bi-main-slider-4 .swiper-slide-active .bi-main-slider-item-4 .bi-main-slider-text .slide-text__title { opacity: 1; visibility: visible; -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 500ms; transition-delay: 500ms; font-family: var(--heading); } .bi-main-slider-4 .swiper-slide-active .bi-main-slider-item-4 .bi-main-slider-text .bi-slider-text { opacity: 1; visibility: visible; -webkit-transition: all 1600ms ease; transition: all 1600ms ease; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .bi-main-slider-4 .swiper-slide-active .bi-main-slider-item-4 .bi-slider-watch-video { opacity: 1; visibility: visible; -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition-delay: 1500ms; transition-delay: 1500ms; } .bi-slider-section { overflow: hidden; padding-top: 100px; } .bi-slider-content { margin: 0 auto; overflow: hidden; max-width: 1550px; border-radius: 10px; } #rev_slider_3_1_wrapper .custom.tparrows { top: 50%; color: #191825; cursor: pointer; background: #fff; width: 60px; height: 60px; border-radius: 5px; position: absolute; display: block; z-index: 1000; } #rev_slider_3_1_wrapper .custom.tparrows:after { top: 0; z-index: -1; left: 0; width: 100%; content: ""; opacity: 0; height: 100%; border-radius: 5px; visibility: hidden; position: absolute; background-color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } #rev_slider_3_1_wrapper .custom.tparrows:hover:after { top: -5px; left: -5px; opacity: 1; visibility: visible; } #rev_slider_3_1_wrapper .custom.tparrows:hover:before { color: #fff; padding-right: 5px; line-height: 50px; } #rev_slider_3_1_wrapper .custom.tparrows.rs-touchhover { background: #fff; } #rev_slider_3_1_wrapper .custom.tparrows:before { z-index: 1; color: #191825; font-size: 15px; display: block; font-weight: 900; line-height: 60px; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; font-family: "Font Awesome 5 Pro"; } #rev_slider_3_1_wrapper .custom.tparrows.tp-leftarrow { left: 0; } #rev_slider_3_1_wrapper .custom.tparrows.tp-rightarrow { right: 0; } #rev_slider_3_1_wrapper .custom.tparrows.tp-leftarrow:before { content: "\f177"; } #rev_slider_3_1_wrapper .custom.tparrows.tp-rightarrow:before { content: "\f178"; } .b-strock-font { color: var(--base-color); -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--base-color); } .bi-main-slider-area { margin: 0 auto; max-width: 1550px; border-radius: 10px; } @-webkit-keyframes moveAnimation { 0% { left: 0; } 50% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 100% { left: 0; } } @keyframes moveAnimation { 0% { left: 0; } 50% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 100% { left: 0; } } @-webkit-keyframes moveAnimation2 { 0% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 100% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } } @keyframes moveAnimation2 { 0% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 100% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } } .bi-main-slide-item { padding: 45px 0px 100px; } .bi-main-slide-item .side-shape { top: 50%; opacity: 0; right: 50px; visibility: hidden; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .bi-main-slide-item .side-shape img { -webkit-animation: moveAnimation2 4s infinite; animation: moveAnimation2 4s infinite; } .bi-main-slide-item .bi-slide-img-area { max-width: 695px; } .bi-main-slide-item .bi-slide-img-area .bi-slide-img { opacity: 0; visibility: hidden; -webkit-transform: translateY(80px); transform: translateY(80px); } .bi-main-slide-item .bi-slide-img-area .bi-slide-text-img { left: 0; right: 0; bottom: -20px; text-align: center; opacity: 0; visibility: hidden; -webkit-transform: translateY(-80px); transform: translateY(-80px); } .bi-main-slide-item .bi-slide-img-area .bi-slide-img-arrow { top: 50%; opacity: 0; right: -20px; visibility: hidden; -webkit-transform: translateX(-80px); transform: translateX(-80px); } .bi-main-slide-item .bi-slide-img-area .bi-slide-img-arrow img { -webkit-animation: moveAnimation 2s infinite; animation: moveAnimation 2s infinite; } .bi-main-slide-item .bi-slide-text-area { max-width: 610px; padding-left: 70px; } .bi-main-slide-item .bi-slide-text-area h1 { color: #fff; line-height: 1; font-size: 99px; font-weight: 900; overflow: hidden; opacity: 0; visibility: hidden; -webkit-transform: translateX(-80px); transform: translateX(-80px); } .bi-main-slide-item .bi-slide-text-area h2 { font-size: 85px; font-weight: 900; overflow: hidden; opacity: 0; visibility: hidden; -webkit-transform: translateX(80px); transform: translateX(80px); } .bi-main-slide-item .bi-slide-text-area ul { margin-top: 15px; } .bi-main-slide-item .bi-slide-text-area li { color: #fff; font-size: 23px; font-weight: 700; padding-left: 30px; position: relative; margin-bottom: 8px; font-family: var(--heading); opacity: 0; visibility: hidden; -webkit-transform: translateX(30px); transform: translateX(30px); } .bi-main-slide-item .bi-slide-text-area li:before { top: 0; left: 0; color: #ff7425; content: "\f061"; font-weight: 900; position: absolute; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); font-family: "Font Awesome 5 Pro"; } .bi-main-slide-item .bi-slide-text-area .bi-btn-1 { margin-top: 30px; opacity: 0; visibility: hidden; -webkit-transform: translateY(30px); transform: translateY(30px); } .bi-main-slide-item .bi-slide-text-area .bi-btn-1 a:before, .bi-main-slide-item .bi-slide-text-area .bi-btn-1 a:after { background-color: #fff; } .bi-main-slide-item .bi-slide-text-area .bi-btn-1 .bi-btn-main span { background-color: #fff; } .bi-main-slide-item .bi-slide-text-area .bi-btn-1:hover a { color: #000; } .bi-main-slider .swiper-slide-active .bi-main-slide-item .side-shape { opacity: 1; right: 20px; visibility: visible; -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transition-delay: 1350ms; transition-delay: 1350ms; } .bi-main-slider .swiper-slide-active .bi-main-slide-item .bi-slide-img-area .bi-slide-img { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .bi-main-slider .swiper-slide-active .bi-main-slide-item .bi-slide-img-area .bi-slide-text-img { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transition-delay: 400ms; transition-delay: 400ms; } .bi-main-slider .swiper-slide-active .bi-main-slide-item .bi-slide-img-area .bi-slide-img-arrow { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transition-delay: 500ms; transition-delay: 500ms; } .bi-main-slider .swiper-slide-active .bi-main-slide-item .bi-slide-text-area h1 { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transition-delay: 900ms; transition-delay: 900ms; } .bi-main-slider .swiper-slide-active .bi-main-slide-item .bi-slide-text-area h2 { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .bi-main-slider .swiper-slide-active .bi-main-slide-item .bi-slide-text-area li { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transition-delay: 1000ms; transition-delay: 1000ms; } .bi-main-slider .swiper-slide-active .bi-main-slide-item .bi-slide-text-area li:nth-child(2) { -webkit-transition-delay: 1050ms; transition-delay: 1050ms; } .bi-main-slider .swiper-slide-active .bi-main-slide-item .bi-slide-text-area li:nth-child(3) { -webkit-transition-delay: 1100ms; transition-delay: 1100ms; } .bi-main-slider .swiper-slide-active .bi-main-slide-item .bi-slide-text-area .bi-btn-1 { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1000ms ease; transition: all 1000ms ease; -webkit-transition-delay: 1250ms; transition-delay: 1250ms; } .bi-main-slider-section .bi-carousel-arrow-next-prev { top: 50%; left: 0; right: 0; } .bi-main-slider-section .bi-carousel-arrow-next-prev .bi-main-button-prev { left: -25px; position: absolute; } .bi-main-slider-section .bi-carousel-arrow-next-prev .bi-main-button-next { right: -25px; position: absolute; } .hpt-hero-1-slider { overflow: hidden; position: relative; } .hpt-hero-1-slider .hero-1-bg-img { overflow: hidden; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } .hpt-hero-1-slider .hero-1-bg-img img { width: 100%; height: 100%; object-fit: cover; animation: hero-1-img-zoomout 15s linear; } .hpt-hero-1-slider .hero-1-bg-shape-1 { position: absolute; top: 0; left: 0; height: 100%; } .hpt-hero-1-slider .hero-1-bg-shape-2 { position: absolute; right: 0; top: 0; } .hpt-hero-1-slider-content { padding-top: 215px; padding-bottom: 215px; position: relative; z-index: 1; } @media (max-width: 767px) { .hpt-hero-1-slider-content { padding-top: 150px; padding-bottom: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-hero-1-slider-content { padding-top: 215px; padding-bottom: 215px; } } .hpt-hero-1-slider-content .hero-1-subtitle { font-size: 14px; display: inline-block; font-weight: 700; color: #fff; background-color: rgba(255, 255, 255, 0.2); border-radius: 3px; padding: 10px 15px; margin-bottom: 12px; } .hpt-hero-1-slider-content .hero-1-title { width: 100%; max-width: 540px; font-size: 80px; font-weight: 900; color: #fff; line-height: 1.25; margin-bottom: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-hero-1-slider-content .hero-1-title { font-size: 70px; } } @media (max-width: 767px) { .hpt-hero-1-slider-content .hero-1-title { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-hero-1-slider-content .hero-1-title { font-size: 60px; } } .hpt-hero-1-slider-content .hero-1-pera { font-size: 20px; line-height: 1.5; color: #fff; width: 100%; max-width: 528px; margin-bottom: 0; margin-bottom: 54px; } .hero-1-play-btn-wrap { margin-left: 32px; display: inline-block; } @media (max-width: 767px) { .hero-1-play-btn-wrap { margin-left: 0; padding-top: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-1-play-btn-wrap { margin-left: 32px; padding-top: 0px; } } .hero-1-play-btn-wrap .play-btn-text { display: inline-block; font-size: 20px; line-height: 1.5; color: #fff; font-weight: 500; margin-left: 13px; font-family: "Recoleta Alt"; } .hpt-hero-2-area { position: relative; } .hero-2-subtitle { background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "Kanit", sans-serif; margin-bottom: 0; line-height: 1; font-weight: 400; font-size: 16px; text-transform: uppercase; padding: 8px 27px; } .hero-2-subtitle-wrap { position: relative; display: inline-block; border-radius: 38px; background: rgba(229, 62, 41, 0.15); margin-bottom: 10px; margin-left: 20px; } .hero-2-subtitle-wrap .icon-2 { position: absolute; left: -20px; top: 50%; transform: translateY(-50%); } .hero-2-subtitle-wrap .icon-1 { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); } .hpt-hero-2-slider-item { position: relative; overflow: hidden; } .hpt-hero-2-slider-item .hero-2-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hpt-hero-2-slider-item .hero-2-bg-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-hero-2-slider-item .hero-2-img-1 { position: absolute; right: 0; bottom: 0; height: 100%; width: 100%; max-width: 860px; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) { .hpt-hero-2-slider-item .hero-2-img-1 { max-width: 620px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-hero-2-slider-item .hero-2-img-1 { max-width: 580px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-hero-2-slider-item .hero-2-img-1 { max-width: 50%; } } .hpt-hero-2-slider-item .hero-2-img-1 img { width: 100%; height: 100%; object-fit: cover; } .hpt-hero-2-slider-item .hero-2-shape-1 { opacity: 0.7; background: var(--home-9-secondary); height: 100%; display: block; width: 100%; max-width: 860px; position: absolute; right: 0; bottom: 0; mix-blend-mode: multiply; -webkit-transition: all 0.8s linear 0s; -moz-transition: all 0.8s linear 0s; -ms-transition: all 0.8s linear 0s; -o-transition: all 0.8s linear 0s; transition: all 0.8s linear 0s; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) { .hpt-hero-2-slider-item .hero-2-shape-1 { max-width: 620px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-hero-2-slider-item .hero-2-shape-1 { max-width: 580px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-hero-2-slider-item .hero-2-shape-1 { max-width: 50%; height: 100%; opacity: 0.5; background: #fff; mix-blend-mode: unset; } } @media (max-width: 767px) { .hpt-hero-2-slider-item .hero-2-shape-1 { max-width: 100%; height: 100%; opacity: 0.9; background: #fff; mix-blend-mode: unset; } } .hpt-hero-2-slider-item .hero-2-curcle-position { position: absolute; bottom: -195px; left: 62%; transform: translateX(-50%); } .hpt-hero-2-slider-item .hero-2-curcle-position .hero-2-curcle { transform: rotate(239deg); opacity: 0; -webkit-transition: all 1s linear 0s; -moz-transition: all 1s linear 0s; -ms-transition: all 1s linear 0s; -o-transition: all 1s linear 0s; transition: all 1s linear 0s; transition-delay: 0.8s; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) { .hpt-hero-2-slider-item .hero-2-curcle-position { width: 100%; max-width: 645px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-2-slider-item .hero-2-curcle-position { display: none; } } .hpt-hero-2-slider-content { padding-top: 205px; padding-bottom: 165px; position: relative; z-index: 2; } .hpt-hero-2-slider-content .hero-2-title { font-size: 85px; line-height: 1.11; font-weight: 600; margin-bottom: 26px; font-family: "Kanit", sans-serif; width: 100%; max-width: 552px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-hero-2-slider-content .hero-2-title { font-size: 70px; } } @media (max-width: 767px) { .hpt-hero-2-slider-content .hero-2-title { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-hero-2-slider-content .hero-2-title { font-size: 60px; } } .hpt-hero-2-slider-content .hero-2-pera { font-size: 20px; font-weight: 400; line-height: 1.55; color: #4D515F; margin-bottom: 47px; width: 100%; max-width: 465px; } .hpt-hero-2-slider-content .hero-2-btn-wrap { display: flex; align-items: center; gap: 40px; } @media (max-width: 767px) { .hpt-hero-2-slider-content .hero-2-btn-wrap { flex-wrap: wrap; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-hero-2-slider-content .hero-2-btn-wrap { flex-wrap: nowrap; } } .hpt-hero-2-slider-content .hero-2-play-btn-wrap .play-btn-3 { margin-right: 12px; } .hpt-hero-2-slider-content .hero-2-play-btn-wrap .play-btn-text { font-size: 20px; font-weight: 400; line-height: 1.55; color: #00071A; font-family: "Kanit", sans-serif; } .hpt-hero-2-slider-wrapper .swiper-container { overflow: hidden; } .hpt-hero-2-slider-wrapper .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-hero-2-slider-item .hero-2-shape-1 { height: 330px; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px) { .hpt-hero-2-slider-wrapper .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-hero-2-slider-item .hero-2-shape-1 { height: 319px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-2-slider-wrapper .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-hero-2-slider-item .hero-2-shape-1 { height: 100%; } } .hpt-hero-2-slider-wrapper .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-hero-2-slider-item .hero-2-curcle-position .hero-2-curcle { opacity: 1; transform: rotate(359deg); } .horo-2-pagination { width: 32px !important; left: unset !important; height: 120px; position: absolute; top: 50%; right: 3vw; transform: translateY(-50%); z-index: 1; } @media (max-width: 767px) { .horo-2-pagination { top: 72%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .horo-2-pagination { top: 50%; } } .horo-2-pagination .swiper-pagination-bullet { opacity: 0.5; background: var(--home-9-gd-color); width: 28px; height: 28px; border: 5px solid transparent; outline: 2px solid transparent; margin-bottom: 5px !important; } .horo-2-pagination .swiper-pagination-bullet:is(.swiper-pagination-bullet-active) { opacity: 1; outline: 2px solid #FF3838; border: 5px solid #ababab; } .hero-2-back-to-top-btn-postion { position: absolute; left: 54.8%; bottom: -10px; transform: translateX(-50%); z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-2-back-to-top-btn-postion { left: 51.8%; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hero-2-back-to-top-btn-postion { left: 51%; } } .hero-2-back-to-top-btn-postion .hero-2-back-top-btn { display: block; position: relative; width: 100%; border-radius: 50%; } .hero-2-back-to-top-btn-postion .hero-2-back-top-btn::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; box-shadow: 0px 0px 40px 20px #ffffff; border-radius: 50%; animation: hero-2-back-top-btn 5s linear infinite; } .hero-2-back-to-top-btn-postion .hero-2-back-top-btn img { -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hero-2-back-to-top-btn-postion .hero-2-back-top-btn:hover img { transform: rotateX(360deg); } .hpt-hero-2-social-postion { position: absolute; top: 50%; left: 2.5vw; z-index: 1; transform: translateY(-50%); } .hpt-hero-2-social-postion ul{ list-style: none; padding: 0; margin: 0; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-2-social-postion { display: none; } } .hpt-hero-2-social .text { display: inline-block; font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: 3.29px; writing-mode: vertical-lr; margin-left: 17px; padding-bottom: 76px; margin-bottom: 30px; position: relative; color: #00071A; } .hpt-hero-2-social .text::after { position: absolute; width: 1px; height: 45px; background-color: #00071A; content: ""; left: 7px; bottom: 0; } .hpt-hero-2-social li:not(:last-child) { margin-bottom: 25px; } .hpt-hero-2-social li a { display: inline-block; background: rgba(255, 56, 56, 0.15); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); width: 48px; height: 40px; text-align: center; line-height: 40px; color: #B60B0B; } .hpt-hero-2-social li a i { -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .hpt-hero-2-social li a:hover i { transform: scale(1.2); } .hpt-hero-8-area { position: relative; } .hpt-hero-8-wrap { position: relative; position: relative; padding-bottom: 120px; padding-top: 170px; } .hpt-hero-8-wrap .hero-8-bg-img-2 { width: 210px; height: 310px; border-radius: 5px; overflow: hidden; position: absolute; right: 0; bottom: 120px; z-index: 1; } .hpt-hero-8-wrap .hero-8-bg-img-2 img { width: 100%; height: 100%; object-fit: cover; } .hpt-hero-8-content { position: relative; z-index: 1; } .hpt-hero-8-left .hero-8-title { position: relative; font-size: 85px; line-height: 1.14; width: 100%; max-width: 535px; margin-bottom: 24px; color: #fff; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-hero-8-left .hero-8-title { font-size: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-hero-8-left .hero-8-title { font-size: 76px; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-hero-8-left .hero-8-title { font-size: 70px; max-width: 100%; } } @media (max-width: 767px) { .hpt-hero-8-left .hero-8-title { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-hero-8-left .hero-8-title { font-size: 60px; } } .hpt-hero-8-left .hero-8-title::after { content: ""; position: absolute; width: 103px; height: 103px; border-radius: 50%; background-color: var(--primary-color-8); left: -28px; top: 0px; z-index: -1; } .hpt-hero-8-left .hero-8-pera { font-size: var(--inter); color: var(--white-color); opacity: 0.9; width: 100%; max-width: 530px; margin-bottom: 42px; } .hpt-hero-8-left .hero-8-btn-wrap { display: flex; align-items: center; gap: 75px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-hero-8-left .hero-8-btn-wrap { gap: 50px; } } @media (max-width: 767px) { .hpt-hero-8-left .hero-8-btn-wrap { gap: 30px; flex-wrap: wrap; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-hero-8-left .hero-8-btn-wrap { gap: 30px; flex-wrap: nowrap; } } .hpt-hero-8-left .hero-8-btn-wrap .h8-btn-1 { flex: 0 0 auto; border-radius: 5px; border-right: 4px solid rgba(255, 255, 255, 0.2); border-bottom: 4px solid rgba(255, 255, 255, 0.2); } .hpt-hero-8-left .hero-8-btn-wrap .hero-8-play-btn-wrap { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; } .hpt-hero-8-left .hero-8-btn-wrap .hero-8-play-btn-wrap .play-btn-content h6 { font-size: 24px; color: var(--white-color); font-weight: 500; line-height: 1; margin-bottom: 2px; } .hpt-hero-8-left .hero-8-btn-wrap .hero-8-play-btn-wrap .play-btn-content span { display: inline-block; color: var(--primary-color-8); font-size: 18px; line-height: 1; font-weight: 300; } .hpt-hero-8-img-wrap { position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-8-img-wrap { padding-top: 50px; } } .hpt-hero-8-img-wrap::after { content: ""; position: absolute; width: 0%; height: 100%; border: 2px solid var(--primary-color-8); border-left: none; right: 0; top: -45px; border-radius: 0px 10px 10px 0px; opacity: 0; transition: 3s ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-8-img-wrap::after { display: none; } } .hpt-hero-8-img-wrap .hero-8-img { position: relative; z-index: 1; width: 100%; max-width: 580px; height: 690px; overflow: hidden; border-radius: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-hero-8-img-wrap .hero-8-img { max-width: 800px; } } @media (max-width: 767px) { .hpt-hero-8-img-wrap .hero-8-img { height: 450px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-hero-8-img-wrap .hero-8-img { height: 450px; } } .hpt-hero-8-img-wrap .hero-8-img img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(100% 0, 100% 0%, 40% 100%, 0% 100%, 0% 100%, 60% 0%); transition: transform 1000ms ease-out, clip-path 1000ms ease-out; opacity: 0; visibility: hidden; } .hpt-hero-8-img-wrap .hero-8-bg-shape-1 { position: absolute; top: -60px; left: -77px; animation: a-shape-1 25s ease infinite; } @keyframes a-shape-1 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-8-img-wrap .hero-8-bg-shape-1 { display: none; } } .hpt-hero-8-bg-wrap { display: grid; grid-template-columns: 2fr 1fr; position: absolute; top: 0; left: 0; height: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-8-bg-wrap { grid-template-columns: 1fr; } } .hpt-hero-8-bg-wrap .left-img { position: relative; overflow: hidden; } .hpt-hero-8-bg-wrap .left-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); opacity: 0; transition: transform 10s ease, opacity 1s ease; } .hpt-hero-8-bg-wrap .left-img::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #00071A; opacity: 0.9; } .hpt-hero-8-bg-wrap .right-shape { width: 100%; height: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-8-bg-wrap .right-shape { display: none; } } .hpt-hero-8-bg-wrap .right-shape img { width: 100%; height: 100%; object-fit: cover; } .hpt-hero-8-social-link { position: absolute; top: 50%; transform: translateY(-50%); left: 10vh; z-index: 1; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-8-social-link { display: none; } } .hpt-hero-8-social-link li:not(:last-child) { margin-bottom: 40px; } .hpt-hero-8-social-link li a { font-size: 20px; color: var(--primary-color-8); } .hpt-hero-8-social-link li.text { font-size: 16px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 400; writing-mode: vertical-lr; margin-left: -5px; color: var(--white-color); } .hpt-hero-8-slider .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-hero-8-img-wrap .hero-8-img img { clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%); opacity: 1; visibility: visible; } .hpt-hero-8-slider .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-hero-8-bg-wrap .left-img img { transform: scale(1); opacity: 1; } .hpt-hero-8-slider .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-hero-8-img-wrap::after { opacity: 1; width: 52%; } .hpt-hero-8-slide-btn-wrapper { position: absolute; top: 22vh; right: 10vh; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-hero-8-slide-btn-wrapper { top: 50vh; } } @media (max-width: 767px) { .hpt-hero-8-slide-btn-wrapper { top: 80vh; } } .hpt-hero-8-slide-btn-wrapper .horo-8-pagination { margin-top: 25px; margin-bottom: 25px; margin-left: 9px; } .hpt-hero-8-slide-btn-wrapper .horo-8-pagination .swiper-pagination-bullet { width: 12px; height: 12px; border: 1px solid #000; background: transparent; opacity: 1; display: block; margin-bottom: 7px; } .hpt-hero-8-slide-btn-wrapper .horo-8-pagination .swiper-pagination-bullet:is(.swiper-pagination-bullet-active) { background: var(--primary-color-8); border-color: var(--primary-color-8); } .hpt-hero-8-slide-btn-wrapper .hero_8_slide_next, .hpt-hero-8-slide-btn-wrapper .hero_8_slide_prev { font-size: 42px; color: var(--heading-8-color); position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-8-slide-btn-wrapper .hero_8_slide_next, .hpt-hero-8-slide-btn-wrapper .hero_8_slide_prev { color: var(--white-color); } } .hpt-hero-8-slide-btn-wrapper .hero_8_slide_next i, .hpt-hero-8-slide-btn-wrapper .hero_8_slide_prev i { position: relative; z-index: 1; } .hpt-hero-8-slide-btn-wrapper .hero_8_slide_next::after, .hpt-hero-8-slide-btn-wrapper .hero_8_slide_prev::after { position: absolute; content: ""; width: 52px; height: 52px; border-radius: 50%; background-color: #00071A; opacity: 0.15; transition: 500ms ease; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-8-slide-btn-wrapper .hero_8_slide_next::after, .hpt-hero-8-slide-btn-wrapper .hero_8_slide_prev::after { background-color: var(--primary-color-8); } } .hpt-hero-8-slide-btn-wrapper .hero_8_slide_next::after { top: -10px; left: -13px; } .hpt-hero-8-slide-btn-wrapper .hero_8_slide_next:hover::after { background: var(--primary-color-8); opacity: 1 !important; } .hpt-hero-8-slide-btn-wrapper .hero_8_slide_prev::after { bottom: -10px; left: -13px; } .hpt-hero-8-slide-btn-wrapper .hero_8_slide_prev:hover::after { background: var(--primary-color-8); opacity: 1 !important; } .hpt-hero-9-area { position: relative; background-color: #0D1325; } .hpt-hero-9-slide-item { position: relative; } .hpt-hero-9-slide-item .bg-shape-1 { position: absolute; top: 0; left: 0; height: 100%; } .hpt-hero-9-slide-item .bg-shape-2 { position: absolute; top: 0; right: 0; height: 100%; } .hpt-hero-9-slide-item .hero-9-slide-title-position { position: absolute; top: 81px; left: 0; width: 100%; opacity: 0.5; } .hpt-hero-9-slide-item .hero-9-slide-title-position .title-wrap { display: flex; justify-content: flex-start; white-space: nowrap; gap: 80px; align-items: center; animation: h9-hero-text-slide 15s linear infinite; animation-delay: 1s; } .hpt-hero-9-slide-item .hero-9-slide-title-position .title-wrap .title { font-size: 225px; font-weight: 700; text-transform: uppercase; line-height: 1; color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--home-9-primary); margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-hero-9-slide-item .hero-9-slide-title-position .title-wrap .title { font-size: 180px; } } @media (max-width: 767px) { .hpt-hero-9-slide-item .hero-9-slide-title-position .title-wrap .title { font-size: 140px; } } .hpt-hero-9-slide-item-content { position: relative; padding-top: 215px; padding-bottom: 254px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-hero-9-slide-item-content { padding-bottom: 0px; } } @media (max-width: 767px) { .hpt-hero-9-slide-item-content { padding-top: 130px; padding-bottom: 0px; } } .hpt-hero-9-slide-item-content .section-subtitle-9 { margin-bottom: 15px; } .hpt-hero-9-slide-item-content .hero-9-title { font-size: 95px; font-weight: 700; line-height: 1.11; color: var(--white-color); margin-bottom: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-hero-9-slide-item-content .hero-9-title { font-size: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-hero-9-slide-item-content .hero-9-title { font-size: 76px; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-hero-9-slide-item-content .hero-9-title { font-size: 70px; max-width: 100%; } } @media (max-width: 767px) { .hpt-hero-9-slide-item-content .hero-9-title { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-hero-9-slide-item-content .hero-9-title { font-size: 60px; } } .hpt-hero-9-slide-item-content .hero-9-title span { background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hpt-hero-9-slide-item-content .hero-9-pera { font-size: 20px; font-weight: 400; color: var(--white-color); line-height: 30px; font-family: var(--inter); margin-bottom: 50px; width: 100%; max-width: 625px; } .hpt-hero-9-slide-item-content .btn-wrap { display: flex; align-items: center; gap: 42px; } @media (max-width: 767px) { .hpt-hero-9-slide-item-content .btn-wrap { flex-wrap: wrap; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-hero-9-slide-item-content .btn-wrap { flex-wrap: nowrap; } } .hpt-hero-9-slide-item-content .hero-9-play-btn-wrap .play-btn-text { font-family: var(--kanit); font-weight: 400; line-height: 30px; font-size: 20px; color: var(--white-color); margin-left: 12px; } .hpt-hero-9-slide-item-content .right-img { position: absolute; bottom: 0; right: -190px; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .hpt-hero-9-slide-item-content .right-img { right: -180px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .hpt-hero-9-slide-item-content .right-img { right: -170px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-9-slide-item-content .right-img { position: unset; padding-top: 50px; } } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .hpt-hero-9-slide-item-content .right-img .hero-9-img img { width: 95%; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .hpt-hero-9-slide-item-content .right-img .hero-9-img img { width: 85%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-hero-9-slide-item-content .right-img .hero-9-img img { width: 82%; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-9-slide-item-content .right-img .hero-9-img img { transform: rotateY(180deg); } } .hpt-hero-9-social-link { position: absolute; top: 50%; transform: translateY(-50%); left: 10vh; z-index: 1; list-style: none; padding: 0; margin: 0; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-hero-9-social-link { display: none; } } .hpt-hero-9-social-link li:not(:last-child) { margin-bottom: 25px; } .hpt-hero-9-social-link li a { font-size: 20px; color: var(--white-color); display: inline-block; width: 52px; height: 46px; background: transparent; text-align: center; line-height: 46px; position: relative; } .hpt-hero-9-social-link li a i { position: relative; z-index: 1; } .hpt-hero-9-social-link li a::after { content: ""; position: absolute; height: 100%; width: 100%; background: var(--home-9-gd-color); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); left: 0; top: 0; transition: 500ms ease; } .hpt-hero-9-social-link li a:hover::after { transform: rotate(60deg); } .hpt-hero-9-social-link li.text { font-size: 16px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 400; writing-mode: vertical-lr; margin-left: 12px; color: var(--white-color); margin-bottom: 110px; position: relative; } .hpt-hero-9-social-link li.text::after { content: ""; position: absolute; width: 1px; height: 45px; bottom: -76px; left: 12px; background: var(--white-color); } .hpt-hero-9-scroll-btn-wrap { cursor: pointer; position: absolute; bottom: -35px; right: 3vw; z-index: 1; } .hpt-hero-9-scroll-btn-wrap .text { font-family: var(--recoleta); font-size: 20px; font-weight: 300; display: inline-block; writing-mode: vertical-lr; text-transform: uppercase; letter-spacing: 3.2px; color: var(--white-color); margin-left: 12px; margin-bottom: 20px; } .hpt-hero-9-scroll-btn-wrap .icon { position: relative; display: block; width: 58px; height: 58px; text-align: center; line-height: 55px; font-size: 20px; background: var(--home-9-primary); border-radius: 50%; border: 5px solid #00071A; color: var(--white-color); transition: 500ms ease; } .hpt-hero-9-scroll-btn-wrap .icon:hover { color: var(--home-9-primary); background: var(--white-color); } .hpt-hero-9-scroll-btn-wrap .icon::after { content: ""; position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--home-9-primary); background-color: transparent; left: -35%; top: -30%; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); animation: h9-scroll-btn 5s ease infinite; } @keyframes h9-hero-text-slide { 0% { translate: 0; } 100% { translate: -100%; } } @keyframes h9-scroll-btn { 0% { rotate: 0deg; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); } 50% { rotate: 180deg; clip-path: polygon(30% 0%, 100% 0, 100% 70%, 100% 100%, 0 100%, 0 0); } 100% { rotate: 360deg; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); } } .hpt-hero-9-slide-btn-wrapper { background: 0; position: absolute; left: 57%; bottom: 70px; z-index: 1; transform: translateX(-50%); } .hpt-hero-9-slide-btn-wrapper .horo_9_pagination .swiper-pagination-bullet { position: relative; width: 25px; height: 25px; background: var(--home-9-primary); opacity: 0.5; display: inline-block; margin: 0 8px; } .hpt-hero-9-slide-btn-wrapper .horo_9_pagination .swiper-pagination-bullet::after { transition: 500ms ease; } .hpt-hero-9-slide-btn-wrapper .horo_9_pagination .swiper-pagination-bullet:is(.swiper-pagination-bullet-active) { background: var(--home-9-primary); opacity: 1; } .hpt-hero-9-slide-btn-wrapper .horo_9_pagination .swiper-pagination-bullet:is(.swiper-pagination-bullet-active)::after { content: ""; position: absolute; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--home-9-primary); left: 50%; top: 50%; transform: translate(-50%, -50%); } /*---------------------------------------------------- */ /*Skill Logo area*/ /*----------------------------------------------------*/ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .bi-skill-logo-content { padding: 70px 0px; border-bottom: 1px solid #4b4b4b; } .bi-skill-logo-play { max-width: 115px; margin-right: 25px; -webkit-animation: spin 10s linear infinite; animation: spin 10s linear infinite; } .bi-skill-logo-text { max-width: 260px; } .bi-skill-logo-text h2 { color: #fff; font-size: 40px; font-weight: 700; } .bi-skill-logo-wrapper { padding-left: 40px; } .bi-skill-logo-item { height: 46px; width: 130px; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 15px; margin: 10px 13px; border-radius: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #fff; } .hap-skill-faq-section:before, .hap-skill-faq-section:after { left: 0; top: -70px; z-index: -1; content: ""; width: 105%; height: 110px; z-index: 1; position: absolute; background-color: #fff; -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } .hap-skill-faq-section:after { top: auto; bottom: -70px; } .hap-skill-content { padding: 50px 0px 100px; } .hap-skill-progress-area { padding-top: 45px; } .hap-skill-progress-item { margin-bottom: 35px; padding-bottom: 40px; border-bottom: 1px solid #373737; } .hap-skill-progress-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .hap-skill-progress-item .skill-icon { width: 110px; height: 110px; margin-right: 35px; border-radius: 100%; background-color: #000000; } .hap-skill-progress-item .skill-text { max-width: 365px; } .hap-skill-progress-item .skill-text h3 { color: #fff; font-size: 20px; font-weight: 700; padding-bottom: 15px; } .hap-skill-progress-item .skill-text p { color: #fff; } .hap-skill-progress-item .skill-set-percent { margin-top: 20px; } .hap-skill-progress-item .skill-set-percent .progress { height: 10px; border-radius: 0; position: relative; overflow: visible; border-radius: 30px; background-color: #383535; } .hap-skill-progress-item .skill-set-percent .progress span { top: -3px; right: 25px; color: #fff; font-size: 12px; font-weight: 600; position: relative; } .hap-skill-progress-item .skill-set-percent .progress-bar { width: 0; left: 0px; top: 0px; float: left; height: 100%; position: relative; border-radius: 30px; -webkit-transition: 1s all ease-in-out; transition: 1s all ease-in-out; background: var(--hap-gradient-color); } .hap-skill-img { overflow: hidden; margin-left: 60px; border-radius: 30px; display: inline-block; } .hap-faq-img-wrapper { margin-right: 40px; padding-bottom: 70px; } .hap-faq-img-wrapper .hap-faq-img1 { overflow: hidden; border-radius: 25px; } .hap-faq-img-wrapper .hap-faq-img2 { left: 0; bottom: 0; overflow: hidden; border-radius: 25px; } .hap-faq-accordion-area .hap-accordion { margin-top: 20px; } .hap-faq-accordion-area .hap-section-title h2 { font-size: 65px; } .hap-faq-accordion-area .accordion-item { border: none; overflow: hidden; border-radius: 0; position: relative; margin-bottom: 10px; padding: 10px 0px 25px; background-color: transparent; -webkit-transition: all 500ms ease; transition: all 500ms ease; border-bottom: 1px solid #373737; } .hap-faq-accordion-area .accordion-button { color: #fff; font-size: 21px; font-weight: 700; position: relative; padding: 5px 0px 0px; font-family: var(--hap-heading); background-color: transparent; } .hap-faq-accordion-area .accordion-button span { color: #fff; max-width: 95%; } .hap-faq-accordion-area .accordion-button:focus { border: none; -webkit-box-shadow: none; box-shadow: none; } .hap-faq-accordion-area .accordion-body { padding: 0; color: #BAC1D4; font-size: 19px; line-height: 30px; padding-top: 15px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hap-faq-accordion-area .accordion-button::after { right: 5px; content: "\f067"; font-weight: 300; position: absolute; border-radius: 100%; background-image: none; color: #373737; font-family: "Font Awesome 5 Pro"; } .hap-faq-accordion-area .accordion-button:not(.collapsed):after { content: "\f068"; color: var(--base-color); } /*---------------------------------------------------- */ /*Quality area*/ /*----------------------------------------------------*/ .bi-quality-section { padding: 85px 0px 140px; } .bi-complete-work-counter { margin-top: 40px; } .bi-complete-work-counter h4 { color: #fff; font-size: 18px; font-weight: 500; padding-bottom: 3px; } .bi-complete-work-counter h3 { font-size: 80px; font-weight: 700; color: var(--base-color); } .bi-quality-feature-area { padding-left: 70px; } .bi-quality-feature-item { padding: 35px 0px; border-bottom: 1px solid #515151; } .bi-quality-feature-item:last-child { margin-bottom: 0; border-bottom: none; } .bi-quality-feature-item:before { top: 50%; right: 0; color: #ff7425; font-size: 55px; content: "\f061"; font-weight: 900; position: absolute; -webkit-transition: all 500ms ease; transition: all 500ms ease; font-family: "Font Awesome 5 Pro"; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } .bi-quality-feature-item .feature-icon { margin-right: 25px; } .bi-quality-feature-item .feature-text h3 { color: #fff; font-size: 30px; font-weight: 500; } .bi-quality-feature-item:hover:before { -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } /*---------------------------------------------------- */ /*About area*/ /*----------------------------------------------------*/ .hpt-about-8-img .about-8-img img { height: 100%; object-fit: cover; clip-path: circle(10% at 50% 50%); transition: 3s ease; } .hpt-about-8-img .about-8-img:is(.active) img { clip-path: circle(100% at 50% 50%); } .ab-anim{ animation: a-shape-1 25s ease infinite; } .bi-about-section { padding: 140px 0px 160px; } .bi-about-img-area1 { max-width: 301px; padding-top: 50px; margin-right: 30px; } .bi-about-img-area1 .bi-about-img1 { margin-bottom: 15px; display: inline-block; } .bi-about-img-area1 .bi-about-img-text { margin-bottom: 35px; } .bi-about-img-area2 .bi-about-img2 { display: inline-block; } .bi-about-text-area { top: 40px; right: 85px; max-width: 550px; position: absolute; } .bi-about-text-area .bi-section-title-1 .bi-subtitle:before { background-color: #fff; } .bi-about-text-area .bi-section-title-1 .bi-subtitle:after { border: 2px solid #000; } .bi-about-text-area .bi-section-title-1 h2 b { color: #fff; } .bi-about-text-area .bi-section-title-1 h2 span { color: var(#000); -webkit-text-fill-color: #fff; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(#000); } .bi-about-circle-progress { padding-top: 350px; } .bi-about-circle-progress-item { margin-bottom: 30px; } .bi-about-circle-progress-item .graph-outer { margin-right: 15px; } .bi-about-circle-progress-item .graph-outer .count-box { top: 15px; left: 15px; width: 50px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; color: #0e0e0e; font-size: 14px; font-weight: 900; position: absolute; border-radius: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: var(--heading); background-color: #e7e8ee; } .bi-about-circle-progress-item .graph-outer .count-box .count-text { -webkit-transform: translate(0) !important; transform: translate(0) !important; } .bi-about-circle-progress-item .bi-about-prog-text h3 { color: var(--title-color); font-size: 23px; font-weight: 700; padding-bottom: 5px; } .bi-about-circle-progress-item .bi-about-prog-text p { color: #494949; font-size: 15px; font-family: var(--heading); } .bi-about-section-4 { padding: 110px 0px 100px; } .bi-about-img-wrapper4 { padding-bottom: 175px; } .bi-about-img-wrapper4 .about-circle-shape { left: -40px; z-index: -1; bottom: 90px; } .bi-about-img-wrapper4 .about-img2 { right: 0; bottom: 0; } .bi-about-text-4 .bi-section-title-4 { right: 0; top: 35px; width: 720px; position: absolute; } .bi-about-text-area-4 { padding-left: 15px; padding-top: 265px; } .bi-about-text-area-4 p { color: rgba(255, 255, 255, 0.6999); } .bi-abut-feature-list-4 { border-radius: 10px; margin: 30px 0px 40px; padding: 28px 0px 0px; background: linear-gradient(97.31deg, rgba(235, 92, 24, 0.11199) 0%, rgba(249, 80, 85, 0.11199) 45.72%, rgba(202, 45, 184, 0.11199) 100%); } .bi-abut-feature-list-4 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bi-abut-feature-list-4 li { width: 50%; color: #fff; font-size: 18px; font-weight: 500; padding: 0px 25px; margin-bottom: 20px; font-family: var(--heading); } .bi-abut-feature-list-4 li i { width: 30px; font-size: 30px; margin-right: 15px; color: var(--base-color2); } .bi-about-btn-cta .bi-btn-4 { margin-right: 30px; } .bi-about-cta-4 .inner-icon { color: #fff; width: 40px; height: 40px; margin-right: 20px; border-radius: 100%; background-color: var(--base-color2); } .bi-about-cta-4 .inner-text span { display: block; font-size: 16px; margin-bottom: 5px; color: rgba(255, 255, 255, 0.7); } .bi-about-cta-4 .inner-text h4 { color: #fff; font-size: 24px; font-weight: 600; } .hpt-about-2-area { position: relative; } .hpt-about-2-area .about-2-bg-img-1 { position: absolute; left: 0; z-index: -1; top: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-about-2-area .about-2-bg-img-1 { width: 30%; } } .hpt-about-2-area .about-2-bg-shape-1 { position: absolute; right: 0; z-index: -1; top: 0; } .hpt-about-2-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 100px 98px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-about-2-wrap { grid-template-columns: 1fr 1.5fr; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-about-2-wrap { grid-template-columns: 1fr; } } @media (max-width: 767px) { .hpt-about-2-wrap { grid-template-columns: 1fr; gap: 50px; } } .hpt-about-2-wrap .right { padding-top: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-about-2-wrap .right { padding-top: 0; } } .hpt-about-2-img-wrap { position: relative; display: inline-block; } .hpt-about-2-img-wrap::after { position: absolute; content: ""; width: 100%; height: 100%; top: 40px; left: 40px; background-color: transparent; border: 2px solid #FF3838; z-index: -1; animation: ab-2-after 5s linear infinite; } @media (max-width: 767px) { .hpt-about-2-img-wrap::after { left: 10px; top: 10px; } } .hpt-about-2-img-wrap .about-2-img { width: 100%; height: 740px; overflow: hidden; } .hpt-about-2-img-wrap .about-2-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-about-2-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; } @media (max-width: 767px) { .hpt-about-2-feature { grid-template-columns: 1fr; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-about-2-feature { grid-template-columns: 1fr 1fr; } } .hpt-about-2-feature-item { border: 1px solid rgba(14, 5, 2, 0.1); background: #FFF; position: relative; padding: 30px 20px; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .hpt-about-2-feature-item .icon-2 { position: absolute; right: 10px; top: 10px; } .hpt-about-2-feature-item .icon-wrap { position: relative; padding-bottom: 20px; margin-bottom: 23px; } .hpt-about-2-feature-item .icon-wrap::after { position: absolute; content: ""; opacity: 0.1; background: var(--home-9-gd-color); width: 40px; height: 1px; left: 0; bottom: 0; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .hpt-about-2-feature-item .title { font-family: "Kanit", sans-serif; font-size: 22px; line-height: 120%; font-weight: 500; color: #00071A; margin-bottom: 13px; } .hpt-about-2-feature-item .text { font-size: 14px; font-weight: 400; line-height: 160%; color: #4D515F; margin-bottom: 0; } .hpt-about-2-feature-item:Hover { border: 1px solid rgba(255, 56, 56, 0.1); } .hpt-about-2-feature-item:Hover .icon-wrap::after { opacity: 0.3; width: 100%; } .hpt-about-2-btn-wrap { display: flex; gap: 50px; } @media (max-width: 767px) { .hpt-about-2-btn-wrap { flex-wrap: wrap; } } .hpt-about-2-btn-wrap .play-btn-wrap { display: grid; grid-template-columns: 90px auto; align-items: center; } .hpt-about-2-btn-wrap .play-btn-wrap .play-content .text { font-family: "Kanit", sans-serif; font-size: 24px; font-weight: 500; color: #00071a; margin-bottom: 5px; line-height: 1; } .hpt-about-2-btn-wrap .play-btn-wrap .play-content .number { display: inline-block; background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 300; font-size: 18px; line-height: 1; } /*---------------------------------------------------- */ /*Storyboard area*/ /*----------------------------------------------------*/ .bi-storyboard-section { z-index: 1; padding: 130px 0px 80px; } .bi-storyboard-section .background_overlay { z-index: -1; background-color: rgba(0, 0, 0, 0.5); } .bi-storyboard-content .bi-storyboard-title { color: #fff; font-size: 70px; font-weight: 700; } .bi-storyboard-list-area { padding-top: 80px; } .bi-storyboard-item { margin: 0 auto; cursor: pointer; max-width: 670px; text-align: center; position: relative; margin-bottom: 30px; padding-bottom: 40px; } .bi-storyboard-item:before { top: 40px; opacity: 0; right: 50px; color: #ff7425; font-size: 55px; content: "\f061"; font-weight: 900; visibility: hidden; position: absolute; -webkit-transition: all 500ms ease; transition: all 500ms ease; font-family: "Font Awesome 5 Pro"; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } .bi-storyboard-item h3 { color: #fff; font-size: 60px; font-weight: 700; padding-bottom: 5px; -webkit-transition: all 500ms ease; transition: all 500ms ease; color: #fff; -webkit-text-fill-color: #fff; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; } .bi-storyboard-item .bi-storyboard-hover { left: 0; right: 0; opacity: 0; width: 100%; bottom: -45px; visibility: hidden; position: absolute; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-storyboard-item .bi-storyboard-hover i { width: 100%; height: 1.1px; max-width: 0px; position: relative; display: inline-block; -webkit-transition: all 500ms ease; transition: all 500ms ease; background-color: var(--base-color); } .bi-storyboard-item .bi-storyboard-hover span { color: #fff; font-size: 15px; font-weight: 500; padding: 3px 23px; margin: 0px 15px; white-space: nowrap; border-radius: 20px; font-family: var(--heading); background-color: var(--base-color); } .bi-storyboard-item:hover h3, .bi-storyboard-item.active h3 { color: var(--base-color); -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--base-color); } .bi-storyboard-item:hover .bi-storyboard-hover, .bi-storyboard-item.active .bi-storyboard-hover { bottom: 0; opacity: 1; visibility: visible; } .bi-storyboard-item:hover .bi-storyboard-hover i, .bi-storyboard-item.active .bi-storyboard-hover i { max-width: 115px; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .bi-storyboard-item:hover:before, .bi-storyboard-item.active:before { right: 0; opacity: 1; visibility: visible; } /*---------------------------------------------------- */ /*Fun Fact area*/ /*----------------------------------------------------*/ .bi-fun-fact-section { padding: 110px 0px; background-color: #ebf7f7; } .bi-fun-fact-img-area { padding-top: 35px; } .bi-fun-fact-img, .bi-fun-fact-img-2 { height: 377px; width: 100%; max-width: 479px; overflow: hidden; display: inline-block; } .bi-fun-fact-img .image_item_1, .bi-fun-fact-img-2 .image_item_1 { position: absolute; top: 0; left: 0; width: auto; height: 100%; -webkit-transition: 0.5s; transition: 0.5s; background-size: cover; } .bi-fun-fact-img .image_item_1:nth-child(1), .bi-fun-fact-img-2 .image_item_1:nth-child(1) { -webkit-transform: translateY(-50%) scaleY(2); transform: translateY(-50%) scaleY(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .bi-fun-fact-img:hover .image_item_1:nth-child(1), .bi-fun-fact-img-2:hover .image_item_1:nth-child(1) { -webkit-transform: translateY(0) scaleY(1); transform: translateY(0) scaleY(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .bi-fun-fact-img:hover .image_item_1:nth-child(2), .bi-fun-fact-img-2:hover .image_item_1:nth-child(2) { -webkit-transform: translateY(50%) scaleY(2); transform: translateY(50%) scaleY(2); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .bi-fun-fact-img-2 { max-width: 712px; } .bi-fun-fact-counter { padding-top: 50px; } .bi-counter-item { max-width: 330px; margin: 0 auto; } .bi-counter-item:after { top: 20%; left: 48%; content: ""; width: 1px; height: 50px; position: absolute; -webkit-transform: translate(-50%) rotate(45deg); transform: translate(-50%) rotate(45deg); background: var(--base-color); } .bi-counter-item:before { top: 43%; left: 48%; width: 1px; content: ""; opacity: 0.5; height: 16px; position: absolute; -webkit-transform: translate(-50%) rotate(-45deg); transform: translate(-50%) rotate(-45deg); background: var(--base-color); } .bi-counter-item h3 { color: var(--title-color); font-size: 62px; font-weight: 900; } .bi-counter-item p { color: var(--title-color); font-size: 18px; font-weight: 900; max-width: 130px; line-height: 1.2; font-family: var(--heading); } .bi-fun-fact-text-area { margin: 0 auto; max-width: 830px; margin-top: 25px; } .bi-fun-fact-text-area .bi-fun-fact-text { margin-bottom: 40px; } .bi-fun-fact-section-2 { padding: 105px 0px 65px; } .bi-fun-fact-text-area-2 h2 span { display: block; } .bi-fun-fact-text-area-2 .bi-btn-1 { margin-top: 85px; } .bi-counter-item-2 { margin-bottom: 75px; } .bi-counter-item-2 h3 { line-height: 1; font-size: 30px; font-weight: 600; max-width: 200px; margin-bottom: 5px; padding-bottom: 25px; color: var(--title-color); border-bottom: 1px solid #e7e8ee; } .bi-counter-item-2 h3 span { font-size: 120px; font-weight: 500; } .bi-counter-item-2 p { color: #717171; font-size: 17px; font-family: var(--heading); } .bi-fun-fact-counter-2 .bi-fun-fact-star { left: 0; top: 35%; right: 90px; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-animation: spin 10s linear infinite; animation: spin 10s linear infinite; } .bi-play-btn { padding: 310px 0px; } .bi-play-btn a { display: inline-block; -webkit-animation: spin 10s linear infinite; animation: spin 10s linear infinite; } /*---------------------------------------------------- */ /*Team area*/ /*----------------------------------------------------*/ .bi-team-section { padding: 110px 0px; } .bi-team-section .bi-team-bg { top: 0; left: 0; width: 100%; height: 695px; } .bi-team-content { padding-top: 40px; } .bi-team-item-area { width: 565px; height: 530px; overflow: hidden; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; } .bi-team-item-area .bi-team-img { overflow: hidden; position: absolute; } .bi-team-item-area .bi-team-img img { border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } .bi-team-item-area .bi-team-text { top: 55%; right: 35px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .bi-team-item-area .bi-team-text h3 { font-size: 45px; font-weight: 900; color: var(--title-color); } .bi-team-item-area .bi-team-text span { font-size: 20px; color: var(--base-color); font-family: var(--heading); } .bi-team-item-area .bi-team-text .bi-team-social { margin-top: 5px; } .bi-team-item-area .bi-team-text .bi-team-social a { color: #000000; font-size: 20px; margin: 0px 6px; } .bi-team-item-area .bi-team-item { bottom: 0; right: 0; } .bi-team-item-area .bi-team-item .bi-team-shape { top: 48px; z-index: -1; right: 105px; -webkit-transform: rotate(9deg); transform: rotate(9deg); } .bi-team-item-area .bi-team-item .bi-team-link { right: -46px; bottom: -32px; width: 170px; height: 170px; position: absolute; border-radius: 100%; background-color: var(--base-color); } .bi-team-item-area .bi-team-item .bi-team-link a { top: 25px; left: 30px; color: #fff; position: absolute; } .bi-team-item-4 { z-index: 1; margin: 0 auto; height: 510px; max-width: 410px; overflow: hidden; margin-bottom: 40px; border-radius: 20px; padding: 42px 45px; background: #202139; -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.2) inset; } .bi-team-item-4:before { top: 0; left: 0; width: 100%; content: ""; z-index: -1; opacity: 0; height: 100%; position: absolute; -webkit-transition: all 500ms ease; transition: all 500ms ease; background: var(--linear, linear-gradient(135deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%)); -webkit-box-shadow: 0px 0px 30px 0px rgba(27, 28, 53, 0.65) inset; box-shadow: 0px 0px 30px 0px rgba(27, 28, 53, 0.65) inset; } .bi-team-item-4 .team-img { width: 298px; height: 298px; margin: 0 auto; margin-bottom: 45px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-team-item-4 .team-text h3 { color: #fff; font-size: 32px; font-weight: 600; padding-bottom: 15px; } .bi-team-item-4 .team-text span { font-weight: 500; color: var(--base-color); font-family: var(--heading); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-team-item-4 .team-social { opacity: 0; margin-top: 25px; visibility: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-team-item-4 .team-social a { width: 52px; height: 52px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0px 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 100%; border: 1px solid #fff; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bi-team-item-4 .team-social a:hover { color: #fd6f23; background-color: #fff; } .bi-team-item-4:hover:before { opacity: 1; } .bi-team-item-4:hover .team-img { width: 222px; height: 222px; padding: 15px; border-radius: 100%; background-color: rgba(27, 28, 53, 0.3); } .bi-team-item-4:hover .team-text span { color: #00071A; } .bi-team-item-4:hover .team-social { opacity: 1; visibility: visible; } .ori-agency-team-btn a { color: #000000; font-weight: 600; padding: 20px 40px; display: inline-block; border-radius: 40px; background-color: var(--base-color); } .ori-agency-team-btn a:hover { color: #fff; background-color: #000000; } .ori-agency-team-content { padding-top: 45px; } .ori-agency-team-filter-btn { margin-bottom: 50px; } .ori-agency-team-filter-btn li { color: #000; font-weight: 700; cursor: pointer; padding: 10px 30px; border-radius: 5px; margin-right: 15px; background-color: #fff; } .ori-agency-team-filter-btn li.filtr-active { background-color: var(--base-color); color: #fff; } .ori-agency-team-item { overflow: hidden; margin-bottom: 30px; border-radius: 30px; background-color: #fff; } .ori-agency-team-item .inner-img { overflow: hidden; border-radius: 30px; } .ori-agency-team-item .inner-img img { -webkit-transition: 500ms all ease; transition: 500ms all ease; } .ori-agency-team-item .inner-text { padding: 30px; } .ori-agency-team-item .inner-text h3 { color: #000000; font-size: 18px; font-weight: 700; padding-bottom: 3px; } .ori-agency-team-item .inner-text span { color: #737272; font-size: 14px; } .ori-agency-team-item .inner-text .team-social { margin-top: 18px; } .ori-agency-team-item .inner-text .team-social a { margin-right: 12px; } .ori-agency-team-item .inner-text .team-social .fb-icon { color: #25319d; } .ori-agency-team-item .inner-text .team-social .tw-icon { color: #0c91f7; } .ori-agency-team-item .inner-text .team-social .ins-icon { color: #f83232; } .ori-agency-team-item .inner-text .team-social .be-icon { color: #287acd; } .ori-agency-team-item:hover .inner-img img { -webkit-transform: scale(1.1); transform: scale(1.1); } .hpt-team-9-membar { position: relative; transition: 500ms ease; } .hpt-team-9-membar .img-wrap { position: relative; width: 100%; height: 550px; border-radius: 400px; overflow: hidden; background-color: #202430; text-align: center; transition: 500ms ease; } .hpt-team-9-membar .img-wrap::after { content: ""; position: absolute; width: 100%; height: 0%; background: var(--home-9-gd-color); left: 0; bottom: 0; transition: 500ms ease; } .hpt-team-9-membar .img-wrap .membar-img { position: relative; z-index: 1; margin: auto; width: 100%; height: 100%; background-repeat: no-repeat; background-position: top; transition: 500ms all ease; } .hpt-team-9-membar .content-wrap { text-align: center; background-color: #202430; border-radius: 200px; border: 4px solid #00071A; overflow: hidden; padding-top: 10px; position: absolute; bottom: -20px; margin: auto; right: 0; left: 0; width: 85%; transition: 500ms; z-index: 1; } .hpt-team-9-membar .content-wrap .name { font-family: var(--recoleta); display: inline-block; font-size: 24px; font-weight: 600; text-transform: uppercase; color: var(--white-color); transition: 500ms ease; } .hpt-team-9-membar .content-wrap .name:hover { color: var(--heading-8-color); } .hpt-team-9-membar .content-wrap .bio { display: block; text-transform: uppercase; color: var(--home-9-primary); line-height: 1; font-size: 18px; font-weight: 500; font-family: var(--inter); margin-bottom: 20px; transition: 500ms ease; } .hpt-team-9-membar .content-wrap .social-links { opacity: 0; visibility: hidden; height: 0px; transition: 500ms ease; } .hpt-team-9-membar .content-wrap .social-links a { display: inline-block; font-size: 24px; color: var(--white-color); margin: 0 14px; } .hpt-team-9-slider { position: relative; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-team-9-slider { margin-bottom: -100px; } } .hpt-team-9-slider .swiper-container .swiper-wrapper { padding-bottom: 25px; } .hpt-team-9-slider .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-team-9-membar .img-wrap { padding-top: 45px; } .hpt-team-9-slider .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-team-9-membar .img-wrap .membar-img { width: 100%; max-width: 320px; height: 320px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); } .hpt-team-9-slider .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-team-9-membar .img-wrap::after { height: 100%; } .hpt-team-9-slider .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-team-9-membar .content-wrap { bottom: 45px; background: transparent; border-color: transparent; } .hpt-team-9-slider .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-team-9-membar .content-wrap .name { color: var(--white-color); } .hpt-team-9-slider .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-team-9-membar .content-wrap .bio { color: var(--white-color); } .hpt-team-9-slider .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-team-9-membar .content-wrap .social-links { opacity: 1; visibility: visible; height: 30px; } .hpt-team-9-slide-btn-wrapper { display: flex; justify-content: space-between; align-items: center; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-team-9-slide-btn-wrapper { padding-top: 130px; position: unset; justify-content: center; gap: 50px; } } .hpt-team-9-slide-btn-wrapper .team_9_prev, .hpt-team-9-slide-btn-wrapper .team_9_next { font-size: 42px; color: var(--white-color); position: relative; } .hpt-team-9-slide-btn-wrapper .team_9_prev i, .hpt-team-9-slide-btn-wrapper .team_9_next i { position: relative; z-index: 1; } .hpt-team-9-slide-btn-wrapper .team_9_prev::after, .hpt-team-9-slide-btn-wrapper .team_9_next::after { position: absolute; content: ""; width: 50px; height: 50px; border-radius: 50%; background-color: transparent; border: 3px solid #fff; opacity: 0.8; transition: 500ms ease; } .hpt-team-9-slide-btn-wrapper .team_9_prev { margin-left: -65px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-team-9-slide-btn-wrapper .team_9_prev { margin-left: 0px; } } .hpt-team-9-slide-btn-wrapper .team_9_prev::after { top: 8px; left: -18px; } .hpt-team-9-slide-btn-wrapper .team_9_prev:hover::after { background: var(--home-9-primary); border-color: var(--home-9-primary); opacity: 1 !important; } .hpt-team-9-slide-btn-wrapper .team_9_next { margin-right: -65px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-team-9-slide-btn-wrapper .team_9_next { margin-right: 0px; } } .hpt-team-9-slide-btn-wrapper .team_9_next::after { bottom: 8px; left: 9px; } .hpt-team-9-slide-btn-wrapper .team_9_next:hover::after { background: var(--home-9-primary); border-color: var(--home-9-primary); opacity: 1 !important; } /*---------------------------------------------------- */ /*Portfolio area*/ /*----------------------------------------------------*/ .hap-portfolio-content { padding-top: 40px; } .hap-portfolio-item { margin: 0 auto; margin-bottom: 20px; } .hap-portfolio-item .project-img { overflow: hidden; border-radius: 10px; } .hap-portfolio-item .project-img img { width: 100%; overflow: hidden; border-radius: 10px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hap-portfolio-item .project-text { margin-top: -6px; } .hap-portfolio-item .project-text h3 a { z-index: 1; color: #000000; display: block; font-size: 21px; font-weight: 700; position: relative; padding: 23px 0px 20px; } .hap-portfolio-item .project-text h3 a i { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 100ms ease; transition: all 100ms ease; } .hap-portfolio-item .project-text h3 a:before { top: 0; left: 0; z-index: -1; content: ""; height: 0%; width: 100%; position: absolute; -webkit-transition: all 500ms ease; transition: all 500ms ease; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: var(--hap-gradient-color); } .hap-portfolio-item:hover .project-text h3 a { color: #fff; padding: 23px 30px 20px; } .hap-portfolio-item:hover .project-text h3 a:before { height: 100%; } .hap-portfolio-item:hover .project-text h3 a i { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .hap-portfolio-item:hover .project-img img { -webkit-transform: scale(1.05); transform: scale(1.05); } .bi-portfolio-tab-btn-text { max-width: 480px; } .bi-portfolio-tab-btn { margin-top: 20px; } .bi-portfolio-tab-btn .nav-tabs { border: none; } .bi-portfolio-tab-btn .nav { display: block; } .bi-portfolio-tab-btn .nav-tabs .nav-item.show .nav-link, .bi-portfolio-tab-btn .nav-tabs .nav-link.active, .bi-portfolio-tab-btn .nav-tabs .nav-link { border: none; padding-top: 0; padding-right: 0; padding-bottom: 0; background-color: transparent; } .bi-portfolio-tab-btn .nav-tabs .nav-link { width: 100%; color: #555555; font-size: 20px; font-weight: 700; padding-left: 26px; position: relative; margin-bottom: 10px; font-family: var(--heading); } .bi-portfolio-tab-btn .nav-tabs .nav-link:before { left: 0; top: 10px; width: 12px; content: ""; height: 12px; border-radius: 3px; position: absolute; background-color: #ff8e5e; } .bi-portfolio-tab-btn .nav-tabs .nav-link.active { color: var(--base-color); } .bi-portfolio-tab-btn li:nth-child(2) .nav-link:before { background-color: #ff4141; } .bi-portfolio-tab-btn li:nth-child(3) .nav-link:before { background-color: #1d1e22; } .bi-portfolio-tab-btn li:nth-child(4) .nav-link:before { background-color: #84d6d7; } .bi-portfolio-btn-img-area { margin-top: 30px; } .bi-portfolio-btn-img { display: inline-block; } .bi-portfolio-community { margin-top: 15px; } .bi-portfolio-community li { width: 46px; height: 46px; overflow: hidden; margin-left: -18px; border-radius: 100%; border: 2px solid #fff; } .bi-portfolio-community li:first-child { margin-left: 0; } .bi-portfolio-community .community-img-text h3 { color: #5f6465; font-size: 15px; max-width: 170px; font-weight: 700; margin-left: 15px; line-height: 1.333; } .bi-portfolio-community .community-img-text h3 span, .bi-portfolio-community .community-img-text h3 b { color: var(--base-color); } .bi-portfolio-tab-content { padding-top: 50px; } .bi-portfolio-item { display: inline-block; margin-bottom: 50px; } .bi-portfolio-item .portfolio-img img { -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-portfolio-item .portfolio-img:before { top: -30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-portfolio-item .portfolio-img:after { bottom: -30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-portfolio-item .portfolio-text { left: 40px; z-index: 2; opacity: 0; bottom: 0px; visibility: hidden; position: absolute; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .bi-portfolio-item .portfolio-text h3 { color: #fff; font-size: 20px; font-weight: 700; overflow: hidden; position: relative; border-radius: 8px; padding: 16px 22px 16px 82px; background-color: var(--base-color); } .bi-portfolio-item .portfolio-text h3 i { top: 0; left: 0; width: 62px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: #0e0e0e; } .bi-portfolio-item:hover .portfolio-img img { -webkit-transform: scale(1.1); transform: scale(1.1); } .bi-portfolio-item:hover .portfolio-img:before, .bi-portfolio-item:hover .portfolio-img:after { background-color: var(--base-color); } .bi-portfolio-item:hover .portfolio-text { opacity: 1; bottom: 30px; visibility: visible; } .bi-portfolio-item-content .col-md-6 .bi-portfolio-item .portfolio-text { width: 75%; left: 20px; } .bi-portfolio-item-content .col-md-6 .bi-portfolio-item .portfolio-text h3 { font-size: 16px; } .ai-project-item-2 { overflow: hidden; } .ai-project-item-2 .ai-project-img { overflow: hidden; } .ai-project-item-2 .ai-project-img img { -webkit-transition: 500ms ease; transition: 500ms ease; -webkit-transform: scale(1); transform: scale(1); } .ai-project-item-2 .ai-project-img.active { -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } .ai-project-item-2 .ai-project-text { left: 70px; bottom: 60px; position: absolute; } .ai-project-item-2 .ai-project-text h3 { opacity: 0; color: #0b1b2b; font-size: 23px; font-weight: 800; margin-bottom: 5px; visibility: hidden; padding: 15px 20px; background-color: #fff; -webkit-transform: translateX(-70px); transform: translateX(-70px); -webkit-transition: all 800ms ease; transition: all 800ms ease; } .ai-project-item-2 .ai-project-text span { opacity: 0; visibility: hidden; padding: 10px 20px; display: inline-block; background-color: #0b1b2b; -webkit-transform: translateX(-70px); transform: translateX(-70px); -webkit-transition: all 800ms ease; transition: all 800ms ease; } .ai-project-item-2 .ai-project-text span a { color: #fff; font-size: 14px; margin-right: 15px; position: relative; text-transform: uppercase; } .ai-project-item-2 .ai-project-text span a:before { top: 0; right: -8px; content: "/"; position: absolute; } .ai-project-item-2 .ai-project-text span a:last-child { margin-right: 0; } .ai-project-item-2 .ai-project-text span a:last-child:before { display: none; } .ai-project-item-2:hover .ai-project-text h3 { opacity: 1; visibility: visible; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -webkit-transform: translateX(0px); transform: translateX(0px); } .ai-project-item-2:hover .ai-project-text span { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .ai-project-item-2:hover .ai-project-img img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-filter: grayscale(1); filter: grayscale(1); } .hpt-project-1-area { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-project-1-area { padding-bottom: 120px; } } .hpt-project-1-area .project-1-bg-shape-1 { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .hpt-project-1-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-project-1-wrap { gap: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-project-1-wrap { grid-template-columns: 1fr; } } .hpt-project-1-wrap .project-1-right { padding-top: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-project-1-wrap .project-1-right { padding-top: 0px; } } .hpt-project-1-item { margin-bottom: 60px; } .hpt-project-1-item-img-big { width: 100%; height: 740px; overflow: hidden; position: relative; margin-bottom: 31px; } @media (max-width: 767px) { .hpt-project-1-item-img-big { height: 500px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-project-1-item-img-big { height: 740px; } } .hpt-project-1-item-img-big img { width: 100%; height: 100%; object-fit: cover; } .hpt-project-1-item-img-big .multi-img-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-project-1-item-img-big .multi-img-wrap .multi-img { position: relative; width: 100%; height: 100%; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-project-1-item-img-big .multi-img-wrap .multi-img img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 3s linear 0s; -moz-transition: all 3s linear 0s; -ms-transition: all 3s linear 0s; -o-transition: all 3s linear 0s; transition: all 3s linear 0s; } .hpt-project-1-item-img-big .multi-img-wrap .multi-img .img-1 { position: absolute; left: 0; right: 0; z-index: 1; animation: loop-img-1 2s linear infinite; } .hpt-project-1-item-img-big .multi-img-wrap .multi-img .img-2 { position: absolute; left: 0; right: 0; z-index: 2; animation: loop-img-1 2s linear infinite; animation-delay: 0.3s; } .hpt-project-1-item-img-big .multi-img-wrap .multi-img .img-3 { position: absolute; left: 0; right: 0; z-index: 3; animation: loop-img-1 2s linear infinite; animation-delay: 0.6s; } .hpt-project-1-item-img-big:hover .multi-img-wrap { opacity: 1; } .hpt-project-1-item-img-big:hover .multi-img-wrap img { transform: scale(1.1); } .hpt-project-1-item-img-medle { width: 100%; height: 600px; overflow: hidden; position: relative; margin-bottom: 31px; } @media (max-width: 767px) { .hpt-project-1-item-img-medle { height: 500px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-project-1-item-img-medle { height: 600px; } } .hpt-project-1-item-img-medle img { width: 100%; height: 100%; object-fit: cover; } .hpt-project-1-item-img-medle .multi-img-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-project-1-item-img-medle .multi-img-wrap .multi-img { position: relative; width: 100%; height: 100%; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-project-1-item-img-medle .multi-img-wrap .multi-img img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 3s linear 0s; -moz-transition: all 3s linear 0s; -ms-transition: all 3s linear 0s; -o-transition: all 3s linear 0s; transition: all 3s linear 0s; } .hpt-project-1-item-img-medle .multi-img-wrap .multi-img .img-1 { position: absolute; left: 0; right: 0; z-index: 1; animation: loop-img-1 2s linear infinite; } .hpt-project-1-item-img-medle .multi-img-wrap .multi-img .img-2 { position: absolute; left: 0; right: 0; z-index: 2; animation: loop-img-1 2s linear infinite; animation-delay: 0.3s; } .hpt-project-1-item-img-medle .multi-img-wrap .multi-img .img-3 { position: absolute; left: 0; right: 0; z-index: 3; animation: loop-img-1 2s linear infinite; animation-delay: 0.6s; } .hpt-project-1-item-img-medle:hover .multi-img-wrap { opacity: 1; } .hpt-project-1-item-img-medle:hover .multi-img-wrap img { transform: scale(1.1); } .hpt-project-1-item-img-small { width: 100%; height: 505px; overflow: hidden; position: relative; margin-bottom: 31px; } .hpt-project-1-item-img-small img { width: 100%; height: 100%; object-fit: cover; } .hpt-project-1-item-img-small .multi-img-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-project-1-item-img-small .multi-img-wrap .multi-img { position: relative; width: 100%; height: 100%; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-project-1-item-img-small .multi-img-wrap .multi-img img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 3s linear 0s; -moz-transition: all 3s linear 0s; -ms-transition: all 3s linear 0s; -o-transition: all 3s linear 0s; transition: all 3s linear 0s; } .hpt-project-1-item-img-small .multi-img-wrap .multi-img .img-1 { position: absolute; left: 0; right: 0; z-index: 1; animation: loop-img-1 2.5s linear infinite; } .hpt-project-1-item-img-small .multi-img-wrap .multi-img .img-2 { position: absolute; left: 0; right: 0; z-index: 2; animation: loop-img-1 3s linear infinite; } .hpt-project-1-item-img-small .multi-img-wrap .multi-img .img-3 { position: absolute; left: 0; right: 0; z-index: 3; animation: loop-img-1 3.5s linear infinite; } .hpt-project-1-item-img-small:hover .multi-img-wrap { opacity: 1; } .hpt-project-1-item-img-small:hover .multi-img-wrap img { transform: scale(1.1); } .hpt-project-1-img-content .project-1-title { font-size: 32px; line-height: 1.25; color: #00071A; margin-bottom: 0; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; text-shadow: 0px 1px 0px rgba(255, 56, 56, 0); } .hpt-project-1-img-content .project-1-title:hover { text-shadow: 1px 1px 1px rgba(255, 56, 56, 0.8); } .hpt-project-1-img-content .project-1-pera { font-size: 18px; font-weight: 300; font-style: italic; margin-bottom: 0; opacity: 0.8; } .hpt-project-1-img-content .project-1-pera span { color: #FF3838; } .hpt-project-2-item { position: relative; overflow: hidden; } .hpt-project-2-item-wrap-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: self-start; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-project-2-item-wrap-1 { grid-template-columns: 1fr; } } .hpt-project-2-item-wrap-2 { width: 100%; max-width: 870px; margin: auto; padding-top: 70px; padding-bottom: 70px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-project-2-item:is(.pt-170) { padding-top: 0; } } .hpt-project-2-item .img-wrap { position: relative; width: 100%; max-width: 870px; height: 834px; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-project-2-item .img-wrap { height: 600px; } } @media (max-width: 767px) { .hpt-project-2-item .img-wrap { height: 450px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-project-2-item .img-wrap { height: 700px; } } .hpt-project-2-item .img-wrap::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 7, 26, 0) 0%, rgba(0, 7, 26, 0.5) 100%); } .hpt-project-2-item .img-wrap img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 2s linear 0s; -moz-transition: all 2s linear 0s; -ms-transition: all 2s linear 0s; -o-transition: all 2s linear 0s; transition: all 2s linear 0s; } .hpt-project-2-item .title-position { position: absolute; bottom: 45px; right: auto; left: 0; width: 0%; overflow: hidden; -webkit-transition: all 1s linear 0s; -moz-transition: all 1s linear 0s; -ms-transition: all 1s linear 0s; -o-transition: all 1s linear 0s; transition: all 1s linear 0s; } .hpt-project-2-item .title-position .title-wrap { display: flex; justify-content: flex-start; white-space: nowrap; gap: 10px; align-items: center; } .hpt-project-2-item .title-position .title-wrap .title { font-family: "Kanit", sans-serif; font-size: 64px; font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; margin-bottom: 0; } .hpt-project-2-item-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; -webkit-transition: all 0.5s linear 0s; -moz-transition: all 0.5s linear 0s; -ms-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .hpt-project-2-item:hover .img-wrap img { transform: scale(1.1); rotate: 5deg; } .hpt-project-2-item:hover .hpt-project-2-item-btn { opacity: 1; visibility: visible; } .hpt-project-2-item:hover .title-position { right: 0; left: auto; width: 100%; } .hpt-project-2-item:hover .title-position .title-wrap { animation: marquee-animation 5s linear infinite; animation-delay: 1s; } .hpt-project-2-area { position: relative; } .hpt-project-2-area::after { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 0; background-color: #00071A; z-index: -1; } .hpt-project-2-area .project-2-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hpt-project-2-section-title .scetion-title-2 { color: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-project-2-section-title .scetion-title-2 br { display: none; } } .hpt-project-2-section-btn { display: grid; grid-template-columns: 680px 1fr; justify-content: space-between; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-project-2-section-btn { grid-template-columns: 1fr; gap: 30px; } } .hpt-project-2-section-btn .project-2-pera { font-size: 20px; font-weight: 400; line-height: 1.5; margin-bottom: 0; color: #fff; } .hpt-project-2-section-btn .hpt-btn-3 { justify-self: end; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-project-2-section-btn .hpt-btn-3 { justify-self: start; } } .hpt-portfolio-8-item-content { width: 100%; max-width: 362px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-portfolio-8-item-content { max-width: 100%; } } .hpt-portfolio-8-item-content .subtitle { font-family: var(--kanit); font-size: 18px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.8px; line-height: 150%; color: var(--primary-color-8); margin-bottom: 10px; } .hpt-portfolio-8-item-content .title { font-size: 30px; font-weight: 600; line-height: 1.33; color: var(--heading-8-color); margin-bottom: 10px; } .hpt-portfolio-8-item-content .text { font-size: 16px; line-height: 26px; font-weight: 400; margin-bottom: 25px; } .hpt-portfolio-8-item-content .btn-wrap { position: relative; } .hpt-portfolio-8-item-content .btn-wrap .h8-btn-1 { opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; } .hpt-portfolio-8-item-content .btn-wrap .portfolio-btn-position { position: absolute; top: 0; left: 0; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; } .hpt-portfolio-8-item-content .btn-wrap .portfolio-btn { position: relative; font-size: 30px; color: var(--heading-8-color); display: inline-block; } .hpt-portfolio-8-item-content .btn-wrap .portfolio-btn::after { content: ""; position: absolute; width: 29px; height: 29px; border-radius: 50%; right: -10px; top: 50%; transform: translateY(-50%); background-color: var(--heading-8-color); opacity: 0.15; } .hpt-portfolio-8-item-img { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-portfolio-8-item-img { margin-bottom: 30px; } } .hpt-portfolio-8-item-img .img-wrap { width: 100%; height: 520px; overflow: hidden; } .hpt-portfolio-8-item-img .img-wrap::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; } .hpt-portfolio-8-item-img .img-wrap img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 2s ease 0s; -moz-transition: all 2s ease 0s; -ms-transition: all 2s ease 0s; -o-transition: all 2s ease 0s; transition: all 2s ease 0s; } .hpt-portfolio-8-item-img .title-position-1 { position: absolute; top: 30px; right: auto; left: 0; width: 0%; overflow: hidden; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; } .hpt-portfolio-8-item-img .title-position-1 .title-wrap { display: flex; justify-content: flex-start; white-space: nowrap; gap: 10px; align-items: center; } .hpt-portfolio-8-item-img .title-position-1 .title-wrap .title { font-size: 64px; font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; margin-bottom: 0; } .hpt-portfolio-8-item-img .title-position-2 { position: absolute; bottom: 30px; right: auto; left: 0; width: 0%; overflow: hidden; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -ms-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s; } .hpt-portfolio-8-item-img .title-position-2 .title-wrap { display: flex; justify-content: flex-start; white-space: nowrap; gap: 10px; align-items: center; } .hpt-portfolio-8-item-img .title-position-2 .title-wrap .title { font-size: 64px; font-weight: 600; line-height: 1; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; margin-bottom: 0; } .hpt-portfolio-8-item-img .btn-wrap { position: absolute; left: 50%; top: 20%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; } .hpt-portfolio-8-item:hover .btn-wrap .h8-btn-1 { opacity: 1; visibility: visible; } .hpt-portfolio-8-item:hover .btn-wrap .portfolio-btn-position { left: 50px; opacity: 0; visibility: hidden; } .hpt-portfolio-8-item:hover .hpt-portfolio-8-item-img .img-wrap img { transform: scale(1.1); rotate: 3deg; } .hpt-portfolio-8-item:hover .hpt-portfolio-8-item-img .img-wrap::after { opacity: 0.2; } .hpt-portfolio-8-item:hover .hpt-portfolio-8-item-img .btn-wrap { top: 50%; opacity: 1; visibility: visible; } .hpt-portfolio-8-item:hover .hpt-portfolio-8-item-img .title-position-1 { right: 0; left: auto; width: 100%; } .hpt-portfolio-8-item:hover .hpt-portfolio-8-item-img .title-position-1 .title-wrap { animation: marquee-animation 5s linear infinite; animation-delay: 1s; } .hpt-portfolio-8-item:hover .hpt-portfolio-8-item-img .title-position-2 { right: 0; left: auto; width: 100%; } .hpt-portfolio-8-item:hover .hpt-portfolio-8-item-img .title-position-2 .title-wrap { animation: marquee-animation 5s linear infinite; animation-delay: 1s; } .hpt-project-9-item { display: inline-block; } .hpt-project-9-item-img { position: relative; width: 100%; max-width: 780px; height: 570px; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-project-9-item-img { max-width: 690px; height: 470px; } } @media (max-width: 767px) { .hpt-project-9-item-img { max-width: 400px; height: 300px; } } .hpt-project-9-item-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-project-9-item-img::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; } .hpt-project-9-item-img .btn-wrap { position: absolute; left: 50%; top: 20%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; z-index: 1; } .hpt-project-9-item-content { margin-top: -30px; position: relative; z-index: 1; } .hpt-project-9-item-content .title { font-family: var(--recoleta); font-weight: 700; font-size: 50px; text-transform: uppercase; line-height: 1.2; color: var(--white-color); margin-bottom: 15px; transition: 400ms ease; } .hpt-project-9-item-content .title:hover { color: var(--home-9-primary); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-project-9-item-content .title { font-size: 40px; } } @media (max-width: 767px) { .hpt-project-9-item-content .title { font-size: 25px; } } .hpt-project-9-item-content .text { font-family: var(--recoleta); font-weight: 400; font-size: 22px; line-height: 30px; color: var(--white-color); margin-bottom: 0; } .hpt-project-9-item:hover .hpt-project-9-item-img::after { opacity: 0.5; } .hpt-project-9-item:hover .hpt-project-9-item-img .btn-wrap { top: 50%; opacity: 1; visibility: visible; } .hpt-project-9-slider .swiper-container .swiper-wrapper { display: flex; align-items: flex-end; } .hpt-project-9-slider .swiper-container .swiper-wrapper .swiper-slide { display: flex; align-items: flex-end; width: auto; margin-right: 30px; } /*---------------------------------------------------- */ /*Faq Testimonial area*/ /*----------------------------------------------------*/ .bi-faq-testimonial-section { z-index: 1; padding: 135px 0px 60px; } .bi-faq-testimonial-section:before { top: 0; left: 0; z-index: -1; width: 100%; content: ""; height: 800px; position: absolute; background-repeat: no-repeat; background-position: center center; background-image: url(../img/bg/faq-bg.jpg); } .bi-faq-content-area { max-width: 655px; border-radius: 10px; background-color: #f8f8f8; } .bi-faq-content-area .accordion-item, .bi-faq-content-area .accordion-button:not(.collapsed), .bi-faq-content-area .accordion-button { background-color: transparent; } .bi-faq-content-area .accordion-item { border: none; position: relative; margin-bottom: 25px; padding-bottom: 30px; border-radius: 0; border-bottom: 1px solid rgb(0, 0, 0); } .bi-faq-content-area .accordion-button { padding: 0; border: none; font-size: 23px; font-weight: 700; position: relative; color: var(--title-color); font-family: var(--heading); } .bi-faq-content-area .accordion-button span { max-width: 80%; } .bi-faq-content-area .accordion-button:focus { border: none; -webkit-box-shadow: none; box-shadow: none; } .bi-faq-content-area .accordion-body { font-size: 18px; line-height: 30px; line-height: 1.667; padding: 14px 0px 0px; } .bi-faq-content-area .accordion-button::after { top: 5px; right: 0; content: "\f067"; font-weight: 300; position: absolute; border-radius: 100%; background-image: none; color: var(--base-color); font-family: "Font Awesome 5 Pro"; } .bi-faq-content-area .accordion-button:not(.collapsed) { -webkit-box-shadow: none; box-shadow: none; } .bi-faq-content-area .accordion-button:not(.collapsed):after { content: "\f068"; } .bi-faq-content { margin-top: 30px; } .bi-testimonial-area { width: 100%; max-width: 580px; padding-top: 130px; } .bi-testimonial-slider { -webkit-transform: translateX(-55px); transform: translateX(-55px); } .bi-testimonial-item .testimonial-img { opacity: 0; width: 140px; height: 190px; overflow: hidden; visibility: hidden; margin-right: 40px; border-radius: 10px; -webkit-transform: scale(0.7); transform: scale(0.7); } .bi-testimonial-item .testimonial-text { max-width: 400px; } .bi-testimonial-item .testimonial-text h3 { opacity: 0; color: #fff; font-size: 35px; font-weight: 700; visibility: hidden; padding-bottom: 25px; -webkit-transform: translateX(30px); transform: translateX(30px); } .bi-testimonial-item .testimonial-text p { opacity: 0; color: #cccccc; font-size: 16px; visibility: hidden; padding-bottom: 50px; -webkit-transform: translateX(30px); transform: translateX(30px); } .bi-testimonial-item .testimonial-text h4 { opacity: 0; font-size: 17px; font-weight: 700; visibility: hidden; color: var(--base-color); -webkit-transform: translateX(30px); transform: translateX(30px); } .bi-testimonial-item .testimonial-desc-author { padding-left: 30px; } .bi-carousel-arrow-next-prev .bi-slider-arrow { z-index: 1; width: 48px; height: 48px; color: #191825; position: relative; border-radius: 8px; background-color: #fff; } .bi-carousel-arrow-next-prev .bi-slider-arrow i { display: inline-block; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-carousel-arrow-next-prev .bi-slider-arrow:after { top: 0; z-index: -1; left: 0; width: 100%; content: ""; opacity: 0; height: 100%; border-radius: 5px; visibility: hidden; position: absolute; background-color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-carousel-arrow-next-prev .bi-slider-arrow:hover i { margin-top: -5px; margin-right: 5px; color: #fff; } .bi-carousel-arrow-next-prev .bi-slider-arrow:hover:after { top: -5px; left: -5px; opacity: 1; visibility: visible; } .bi-carousel-testimonial { margin-top: 45px; margin-left: 160px; } .bi-carousel-testimonial .bi-slider-arrow { margin-right: 15px; } .bi-testimonial-slider .swiper-slide-active .bi-testimonial-item .testimonial-img { opacity: 1; visibility: visible; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-testimonial-slider .swiper-slide-active .bi-testimonial-item .testimonial-text h3, .bi-testimonial-slider .swiper-slide-active .bi-testimonial-item .testimonial-text p, .bi-testimonial-slider .swiper-slide-active .bi-testimonial-item .testimonial-text h4 { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-testimonial-slider .swiper-slide-active .bi-testimonial-item .testimonial-text h3 { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .bi-testimonial-slider .swiper-slide-active .bi-testimonial-item .testimonial-text p { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .bi-testimonial-slider .swiper-slide-active .bi-testimonial-item .testimonial-text h4 { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .bi-testimonial-section-4 { overflow: hidden; padding-top: 120px; } .bi-testimonial-section-4 .bi-title-waterprint { margin-bottom: -50px; } .bi-testimonial-section-4 .bi-section-title-4 { margin: 0 auto; max-width: 650px; } .bi-testimonial-slider-4 { padding-top: 50px; } .bi-testimonial-slider-nav-4 .testimonial_nav { width: 200px; z-index: 1; height: 200px; margin: 0 auto; overflow: hidden; border-radius: 100%; border: 10px solid #313249; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-testimonial-slider-nav-4 .testimonial_nav img { width: 180px; height: 180px; margin: 0 auto; border-radius: 100%; } .bi-testimonial-slider-nav-4 .testimonial_nav:before { top: 0; left: 0; z-index: -1; width: 100%; height: 100%; content: ""; position: absolute; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 500ms ease; transition: all 500ms ease; background: linear-gradient(135deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); } .bi-testimonial-slider-nav-4 .swiper-slide-prev .testimonial_nav, .bi-testimonial-slider-nav-4 .swiper-slide-next .testimonial_nav { -webkit-transform: scale(0.7); transform: scale(0.7); } .bi-testimonial-slider-nav-4 .swiper-slide-active .testimonial_nav { -webkit-transform: scale(1); transform: scale(1); border: 10px solid #f14a65; } .bi-testimonial-slider-nav-4 .swiper-slide-active .testimonial_nav:before { -webkit-transform: scale(1); transform: scale(1); } .bi-testimonial-slider-nav-4 .testimonial-prev_4, .bi-testimonial-slider-nav-4 .testimonial-next_4 { left: 0; top: 50%; z-index: 2; font-size: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .bi-testimonial-slider-nav-4 .testimonial-prev_4:hover, .bi-testimonial-slider-nav-4 .testimonial-next_4:hover { background: -webkit-gradient(linear, left top, right top, from(#EB5C18), color-stop(45.72%, #F95055), to(#CA2DB8)); background: linear-gradient(90deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bi-testimonial-slider-nav-4 .testimonial-next_4 { right: 0; left: auto; } .bi-testimonial-slider-for-4 { margin-top: 60px; } .bi-testimonial-item-4 { margin: 0 auto; max-width: 745px; } .bi-testimonial-item-4 .testimonial-author { opacity: 0; visibility: hidden; margin-bottom: 25px; -webkit-transform: translateY(40px); transform: translateY(40px); } .bi-testimonial-item-4 .testimonial-author h3 { color: #fff; font-size: 30px; font-weight: 700; } .bi-testimonial-item-4 .testimonial-author span { color: var(--base-color); font-family: var(--heading); } .bi-testimonial-item-4 .testimonial-desc-rate { opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); transform: translateY(40px); } .bi-testimonial-item-4 .testimonial-desc-rate p { z-index: 1; color: #fff; font-weight: 500; font-style: italic; line-height: 1.8; position: relative; padding-bottom: 30px; } .bi-testimonial-item-4 .testimonial-desc-rate p:before, .bi-testimonial-item-4 .testimonial-desc-rate p:after { top: -80px; left: -40px; width: 210px; content: ""; opacity: 0.1; height: 210px; position: absolute; background-repeat: no-repeat; background-image: url(../img/testimonial/qt1.png); } .bi-testimonial-item-4 .testimonial-desc-rate p:after { top: auto; left: auto; right: -40px; z-index: -1; bottom: -20px; background-image: url(../img/testimonial/qt2.png); } .bi-testimonial-item-4 .testimonial-desc-rate .testimonial-rate li { font-size: 24px; background: -webkit-gradient(linear, right top, left top, from(#FF5412), color-stop(45.72%, #FFB85D), to(#FF5412)); background: linear-gradient(-90deg, #FF5412 0%, #FFB85D 45.72%, #FF5412 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bi-testimonial-slider-for-4 .swiper-slide-active .bi-testimonial-item-4 .testimonial-author { opacity: 1; visibility: visible; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 800ms ease; transition: all 800ms ease; } .bi-testimonial-slider-for-4 .swiper-slide-active .bi-testimonial-item-4 .testimonial-desc-rate { opacity: 1; visibility: visible; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: all 800ms ease; transition: all 800ms ease; } .bi-testimonial-slider-for-4 .swiper-slide-active .bi-testimonial-item-4 .testimonial-desc-rate p:before { left: 0px; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; -webkit-transition: all 800ms ease; transition: all 800ms ease; } .bi-testimonial-slider-for-4 .swiper-slide-active .bi-testimonial-item-4 .testimonial-desc-rate p:after { right: 0px; -webkit-transition-delay: 0.7s; transition-delay: 0.7s; -webkit-transition: all 800ms ease; transition: all 800ms ease; } .bi-scroll-img-section { height: 825px; overflow: hidden; } .bi-scroll-img-section .bi-scroll-img-area { top: 0px; left: -260px; right: 0px; margin: 0px auto; width: 125%; } .hpt-testimonial-8-item-wrap { width: 56%; display: inline-flex; flex-direction: column; margin-left: 80px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-testimonial-8-item-wrap { margin-left: 30px; width: 53%; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-testimonial-8-item-wrap { margin-left: 0px; width: 100%; } } .hpt-testimonial-8-content { position: relative; gap: 80px; } .hpt-testimonial-8-item { display: flex; gap: 40px; padding-bottom: 40px; border-bottom: 2px solid rgba(255, 255, 255, 0.2); } @media (max-width: 767px) { .hpt-testimonial-8-item { flex-wrap: wrap; } } .hpt-testimonial-8-item .img-wrap { position: relative; flex: 0 0 auto; padding-right: 35px; } .hpt-testimonial-8-item .img-wrap::after { content: ""; position: absolute; width: 2px; height: 150px; background-color: #fff; top: 0; right: 0; opacity: 0.2; } @media (max-width: 767px) { .hpt-testimonial-8-item .img-wrap::after { display: none; } } .hpt-testimonial-8-item .img-wrap .img { width: 150px; height: 150px; overflow: hidden; border-radius: 50%; } .hpt-testimonial-8-item .img-wrap .img img { width: 100%; height: 100%; object-fit: cover; } .hpt-testimonial-8-item .content-wrap .text { font-size: 22px; color: var(--white-color); line-height: 1.45; font-weight: 400; margin-bottom: 30px; font-family: var(--inter); } .hpt-testimonial-8-item .content-wrap .text span { color: var(--primary-color-8); } .hpt-testimonial-8-item .content-wrap .parson-name { display: inline-block; color: var(--primary-color-8); font-size: 18px; text-transform: uppercase; font-weight: 400; line-height: 26px; font-family: var(--kanit); } .hpt-testimonial-8-item .content-wrap .parson-name span { padding-left: 5px; color: var(--white-color); opacity: 0.4; } /*---------------------------------------------------- */ /*Sponsor area*/ /*----------------------------------------------------*/ .hap-sponsor-content { overflow: hidden; z-index: 3; padding-left: 75px; margin-top: -150px; border-radius: 300px; background-color: rgb(255, 255, 255); -webkit-box-shadow: 0px 3px 60px 0px rgba(32, 42, 181, 0.11); box-shadow: 0px 3px 60px 0px rgba(32, 42, 181, 0.11); } .hap-sponsor-content .hap-section-title { max-width: 250px; padding-top: 45px; } .hap-sponsor-content .hap-section-title h2 { font-size: 35px; } .hap-sponsor-logo-area .sponsor-logo { width: 20%; height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0px 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-bottom: 1px solid #f1f1f1; border-right: 1px solid #f1f1f1; } .hap-sponsor-logo-area .sponsor-logo img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hap-sponsor-logo-area .sponsor-logo:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .bi-sponsor-item { height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bi-sponsor-content { padding: 20px 0px 60px; border-bottom: 1px solid #eeeeee; } .htp-client-logo-1-wrap { display: grid; grid-template-columns: 471px auto; align-items: center; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .htp-client-logo-1-wrap { grid-template-columns: 371px auto; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .htp-client-logo-1-wrap { grid-template-columns: 320px auto; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .htp-client-logo-1-wrap { grid-template-columns: 290px auto; } } @media (max-width: 767px) { .htp-client-logo-1-wrap { grid-template-columns: auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .htp-client-logo-1-wrap { grid-template-columns: 200px auto; } } .htp-client-logo-1-wrap .title-wrap { position: relative; height: 222px; display: grid; align-items: center; justify-content: center; } @media (max-width: 767px) { .htp-client-logo-1-wrap .title-wrap { height: 110px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .htp-client-logo-1-wrap .title-wrap { height: 222px; } } .htp-client-logo-1-wrap .title-wrap::after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.08; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); } .htp-client-logo-1-wrap .title-wrap .title { font-size: 55px; font-weight: 500; text-transform: capitalize; line-height: 1; margin-bottom: 0; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: 100%; text-align: center; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .htp-client-logo-1-wrap .title-wrap .title { font-size: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .htp-client-logo-1-wrap .title-wrap .title { font-size: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .htp-client-logo-1-wrap .title-wrap .title { font-size: 40px; } } @media (max-width: 767px) { .htp-client-logo-1-wrap .title-wrap .title { font-size: 30px; } } .hpt-client-logo-1-slider { display: flex; justify-content: flex-start; align-items: center; gap: 0 30px; animation: marquee-animation 15s linear infinite; } .hpt-client-logo-1-slider-wrap { overflow: hidden; } .hpt-client-logo-1-slider-single { flex: 0 0 auto; } .hpt-marquee-2-wrap { overflow: hidden; padding-top: 35px; padding-bottom: 35px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-marquee-2-wrap { padding-top: 0px; padding-bottom: 0px; } } .hpt-marquee-2-content-1-bg { background: var(--home-9-gd-color); rotate: 2deg; width: 100%; padding: 32px 0; animation: marquee-zindex-2 20s linear infinite; } .hpt-marquee-2-content-1-item { display: flex; justify-content: flex-start; gap: 30px; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; animation: marquee-animation-2 20s linear infinite; } .hpt-marquee-2-content-1-item .text { flex: 0 0 auto; white-space: nowrap; font-family: "Kanit", sans-serif; font-size: 36px; font-weight: 500; text-transform: uppercase; line-height: 1; margin-bottom: 0; color: #fff; } .hpt-marquee-2-content-1-item .text .icon { margin-right: 5px; margin-top: -15px; } .hpt-marquee-2-content-2-bg { background-color: #fff; padding: 28px 0; rotate: -2deg; margin-top: -92px; overflow: hidden; } .hpt-marquee-2-content-2-item { display: flex; justify-content: flex-start; gap: 30px; animation: marquee-right-animation-2 20s linear infinite; } .hpt-marquee-2-content-2-item .text { flex: 0 0 auto; white-space: nowrap; font-family: "Kanit", sans-serif; font-size: 36px; font-weight: 500; text-transform: uppercase; line-height: 1; margin-bottom: 0; background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hpt-marquee-2-content-2-item .text .icon { margin-right: 5px; margin-top: -15px; } /*---------------------------------------------------- */ /*Blog area*/ /*----------------------------------------------------*/ .bi-blog-section { padding: 120px 0px; } .bi-blog-content { padding-top: 40px; } .bi-blog-item { margin-bottom: 40px; } .bi-blog-item .bi-blog-img { overflow: hidden; border-radius: 10px; } .bi-blog-item .bi-blog-text-area { padding-top: 30px; } .bi-blog-item .bi-blog-text-area .bi-blog-text { padding-left: 30px; } .bi-blog-item .flex-row-reverse .bi-blog-text-area .bi-blog-meta:before{ left: 0; } .bi-blog-content .flex-row-reverse .bi-blog-text { text-align: right; } .bi-blog-item .bi-blog-text-area .bi-blog-meta { margin-bottom: 32px; -webkit-transform: translateX(-100px); transform: translateX(-100px); } .bi-blog-item .bi-blog-text-area .bi-blog-meta:before { right: 0; top: 16px; width: 70%; content: ""; height: 1px; position: absolute; background-color: var(--base-color); } .bi-blog-item .bi-blog-text-area .bi-blog-meta:after { top: -18px; right: -50px; width: 70px; content: ""; height: 70px; position: absolute; background-repeat: no-repeat; background-image: url(../img/icon/star2.png); } .bi-blog-item .bi-blog-text-area .bi-blog-meta a { color: #fff; font-size: 13px; font-weight: 700; padding: 7px 15px; border: 2px solid #fff; font-family: var(--heading); border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: var(--base-color); } .bi-blog-item .flex-row-reverse .bi-blog-meta:after { top: -19px; left: -50px; right: auto; } .bi-blog-item .bi-blog-text-area .bi-blog-meta a i { margin-right: 6px; } .bi-blog-item .bi-blog-text-area h3 { font-size: 45px; font-weight: 600; color: var(--title-color); padding-bottom: 18px; } .bi-blog-item .bi-blog-text-area p { line-height: 1.556; padding-bottom: 42px; } .bi-blog-item .bi-blog-text-area .bi-btn-1 a:before { top: -5px; } .bi-blog-item .bi-blog-text-area .bi-btn-1 a:after { bottom: -5px; } .bi-blog-item .flex-row-reverse .bi-blog-meta { text-align: right; -webkit-transform: translateX(100px); transform: translateX(100px); } .bi-blog-item .flex-row-reverse .bi-blog-meta a { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .bi-blog-item .flex-row-reverse .bi-blog-meta:before { left: 0; } .bi-blog-item .flex-row-reverse .bi-blog-meta:after { top: -19px; left: -50px; right: auto; } .bi-blog-item .flex-row-reverse .bi-blog-text { padding-left: 0; text-align: right; padding-right: 30px; } .widget_calendar table { width: 100%; } .widget_calendar table thead th { background: var(--base-color); color: #fff; font-weight: 600; padding: 8px; text-align: center; } .widget_calendar table tbody td { background: #f7f7f7; border: 1px solid #fff; text-align: center; padding: 8px 0; transition: 0.3s; color: #000; } .widget_archive select, .widget_categories select, .widget_text select { border: 1px solid #16232b0d; width: 100%; padding: 15px; } .hap-blog-item { margin: 0 auto; max-width: 402px; margin-bottom: 30px; } .hap-blog-item .blog-img-meta { margin-bottom: 25px; } .hap-blog-item .blog-img-meta .blog-img { max-width: 380px; overflow: hidden; border-radius: 10px; } .hap-blog-item .blog-img-meta .blog-img img { -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hap-blog-item .blog-img-meta .blog-meta { right: 0; top: 35px; color: #fff; font-size: 14px; font-weight: 700; padding: 25px 15px; border-radius: 30px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; background: var(--hap-gradient-color); } .hap-blog-item .blog-text { max-width: 325px; } .hap-blog-item .blog-text h3 { color: #070707; font-size: 24px; font-weight: 700; } .hap-blog-item .blog-text h3:hover { color: var(--hap-base-color); } .hap-blog-item:hover .blog-img img { -webkit-transform: scale(1.05); transform: scale(1.05); } .hpt-blog-8-item-style-1 .blog-img { position: relative; width: 100%; height: 435px; overflow: hidden; clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%); transition: transform 500ms ease-out, clip-path 500ms ease-out; } .hpt-blog-8-item-style-1 .blog-img::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-color-8); mix-blend-mode: multiply; opacity: 0; transform: translateZ(0); transition: 500ms ease-out; } .hpt-blog-8-item-style-1 .blog-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-blog-8-item-style-1 .blog-content .meta { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding-bottom: 20px; padding-top: 20px; margin-bottom: 20px; } .hpt-blog-8-item-style-1 .blog-content .meta .date, .hpt-blog-8-item-style-1 .blog-content .meta .author { font-size: 20px; line-height: 1.5; font-weight: 400; font-family: var(--kanit); text-transform: uppercase; color: var(--heading-8-color); } @media (max-width: 767px) { .hpt-blog-8-item-style-1 .blog-content .meta .date, .hpt-blog-8-item-style-1 .blog-content .meta .author { font-size: 16px; } } .hpt-blog-8-item-style-1 .blog-content .meta .author .color { color: var(--primary-color-8); } .hpt-blog-8-item-style-1 .blog-content .blog-title { color: var(--heading-8-color); font-size: 42px; font-weight: 600; line-height: 1.23; margin-bottom: 15px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-blog-8-item-style-1 .blog-content .blog-title { font-size: 38px; } } @media (max-width: 767px) { .hpt-blog-8-item-style-1 .blog-content .blog-title { font-size: 32px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-blog-8-item-style-1 .blog-content .blog-title { font-size: 26px; } } .hpt-blog-8-item-style-1 .blog-content .blog-pera { font-family: var(--inter); font-size: 18px; font-weight: 400; line-height: 30px; color: var(--body-8-color); margin-bottom: 0; } .hpt-blog-8-item-style-1:hover .blog-content .blog-title { color: var(--primary-color-8); } .hpt-blog-8-item-style-1:hover .blog-img { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); transition: transform 500ms ease-out, clip-path 500ms ease-out; } .hpt-blog-8-item-style-1:hover .blog-img::after { opacity: 1; } .hpt-blog-8-item-style-2 { display: grid; grid-template-columns: 240px 1fr; gap: 25px; align-items: center; margin-bottom: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-blog-8-item-style-2 { grid-template-columns: 1fr; gap: 0; } } .hpt-blog-8-item-style-2 .blog-img { position: relative; width: 100%; height: 340px; overflow: hidden; clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%); transition: transform 500ms ease-out, clip-path 500ms ease-out; } .hpt-blog-8-item-style-2 .blog-img::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-color-8); mix-blend-mode: multiply; opacity: 0; transform: translateZ(0); transition: 500ms ease-out; } .hpt-blog-8-item-style-2 .blog-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-blog-8-item-style-2 .blog-content .meta { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding-bottom: 20px; padding-top: 20px; margin-bottom: 20px; } .hpt-blog-8-item-style-2 .blog-content .meta .date, .hpt-blog-8-item-style-2 .blog-content .meta .author { font-size: 18px; line-height: 1.5; font-weight: 400; font-family: var(--kanit); text-transform: uppercase; color: var(--heading-8-color); } .hpt-blog-8-item-style-2 .blog-content .meta .author .color { color: var(--primary-color-8); } .hpt-blog-8-item-style-2 .blog-content .blog-title { font-family: var(--kanit); color: var(--heading-8-color); font-size: 32px; font-weight: 600; line-height: 1.25; margin-bottom: 12px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-blog-8-item-style-2 .blog-content .blog-title { font-size: 28px; } } @media (max-width: 767px) { .hpt-blog-8-item-style-2 .blog-content .blog-title { font-size: 32px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-blog-8-item-style-2 .blog-content .blog-title { font-size: 26px; } } .hpt-blog-8-item-style-2 .blog-content .blog-pera { font-family: var(--inter); font-size: 16px; font-weight: 400; line-height: 30px; color: var(--body-8-color); margin-bottom: 0; } .hpt-blog-8-item-style-2:hover .blog-content .blog-title { color: var(--primary-color-8); } .hpt-blog-8-item-style-2:hover .blog-img { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); transition: transform 500ms ease-out, clip-path 500ms ease-out; } .hpt-blog-8-item-style-2:hover .blog-img::after { opacity: 1; } /*---------------------------------------------------- */ /********************* HOME PAGE 2 **************************/ /*Global area*/ /*----------------------------------------------------*/ .home-2 { color: #e2e2e2; font-size: 16px; font-weight: 300; font-family: var(--heading-2); background-color: var(--body-bg-color); } .home-2 .headline h1, .home-2 .headline h2, .home-2 .headline h3, .home-2 .headline h4, .home-2 .headline h5, .home-2 .headline h6 { font-family: var(--heading-2); } .bi-btn-4 a { color: #fff; z-index: 1; overflow: hidden; font-weight: 600; position: relative; border-radius: 100px; display: inline-block; padding: 15px 64px 15px 30px; font-family: var(--heading); background: var(--linear, linear-gradient(135deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%)); } .bi-btn-4 a:before { top: 0; left: 0; z-index: -1; width: 0%; height: 100%; content: ""; position: absolute; background: rgba(11, 12, 14, 0.23); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-btn-4 a span { top: 0; right: 0; width: 39px; height: 60px; position: absolute; border-radius: 50px 0px 0px 50px; background: rgba(11, 12, 14, 0.23); } .bi-btn-4 a:hover:before { width: 100%; } .header-style-four.sticky-on .mobile_menu_content { display: none; } .bi-section-title-4 .sub-title { font-size: 14px; font-weight: 700; position: relative; display: inline-block; color: var(--base-color2); font-family: var(--heading2); padding-bottom: 12px; } .bi-section-title-4 .sub-title:before { top: 10px; right: -80px; width: 72px; height: 1px; content: ""; position: absolute; background-color: var(--base-color2); } .bi-section-title-4 h2 { color: #fff; font-size: 62px; font-weight: 700; } .bi-section-title-4 p { padding-top: 30px; } .bi-section-title-4.text-center .sub-title:after { top: 10px; left: -80px; width: 72px; height: 1px; content: ""; position: absolute; background-color: var(--base-color); } .bi-title-waterprint h2 { opacity: 0.5; font-size: 153px; font-weight: 700; text-align: center; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.28)), to(rgba(27, 28, 53, 0.44))); background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(27, 28, 53, 0.44) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bi-footer-cta.blue-footer:before { background-color: #1b1c35; } .hpt-subtitle-1 { background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0; line-height: 1; font-weight: 600; font-size: 14px; text-transform: uppercase; padding: 13px 15px; } .hpt-subtitle-1-wrap { display: inline-block; border-radius: 3px; background: linear-gradient(90deg, rgba(224, 38, 38, 0.1) 0%, rgba(240, 131, 31, 0.1) 100%); margin-bottom: 15px; } .hpt-title-1 { color: #00071A; font-size: 62px; font-weight: 700; line-height: 1.16; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-title-1 { font-size: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-title-1 { font-size: 50px; } } @media (max-width: 767px) { .hpt-title-1 { font-size: 36px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-title-1 { font-size: 45px; } } .hpt-section-pera { font-size: 18px; font-weight: 400; line-height: 1.66; color: #4D515F; margin-bottom: 0; } .section-subtitle-2 { background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "Kanit", sans-serif; margin-bottom: 0; line-height: 1; font-weight: 400; font-size: 16px; text-transform: uppercase; padding: 8px 27px; } .section-subtitle-2-wrap { position: relative; display: inline-block; border-radius: 38px; background: rgba(229, 62, 41, 0.15); margin-bottom: 15px; margin-left: 20px; } .section-subtitle-2-wrap .icon-2 { position: absolute; left: -20px; top: 50%; transform: translateY(-50%); } .section-subtitle-2-wrap .icon-1 { position: absolute; right: -20px; top: 50%; transform: translateY(-50%); } .scetion-title-2 { color: #00071A; font-family: "Kanit", sans-serif; font-size: 65px; font-weight: 600; line-height: 1.15; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .scetion-title-2 { font-size: 56px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .scetion-title-2 { font-size: 52px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .scetion-title-2 { font-size: 48px; } } @media (max-width: 767px) { .scetion-title-2 { font-size: 34px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .scetion-title-2 { font-size: 42px; } } .section-pera-2 { font-size: 20px; color: #4D515F; font-weight: 400; line-height: 30px; margin-bottom: 0; margin-top: 25px; } /*---------------------------------------------------- */ /*Banner area*/ /*----------------------------------------------------*/ .hap-banner-section { overflow: hidden; } .hap-banner-section:before { left: 0; bottom: -50px; content: ""; width: 105%; height: 110px; z-index: 1; position: absolute; background-color: #fff; -webkit-transform: rotate(-3deg); transform: rotate(-3deg); } .hap-banner-content { padding: 350px 0px 335px; } .hap-banner-content .hap-banner-text { max-width: 540px; } .hap-banner-content .hap-banner-text .hap-btn { margin-top: 30px; } .hap-banner-content .hap-banner-text .hap-section-title p { max-width: 510px; } .hap-banner-content .hap-banner-image { right: 0; top: 240px; } .hap-banner-content .hap-banner-image .hap-banner-img2, .hap-banner-content .hap-banner-image .hap-banner-img1 { margin-left: 10px; } .hap-banner-content .hap-banner-image .hap-banner-img2 img, .hap-banner-content .hap-banner-image .hap-banner-img1 img { border-radius: 200px; } .hap-banner-content .hap-banner-image .hap-banner-shape4 { left: 0; top: 38%; right: 0; z-index: 2; text-align: center; } .hap-banner-content .hap-banner-image .hap-banner-img1 { margin-top: 20px; } .hap-banner-content .hap-banner-image .hap-banner-shape1 { left: -75px; bottom: 60px; } .hap-banner-content .hap-banner-image .hap-banner-shape2 { left: -50px; bottom: -10px; } .hap-banner-content .hap-banner-image .hap-banner-shape3 { right: -30px; bottom: -20px; } .bi-banner-section { overflow: hidden; } .bi-banner-content .banner_img_1 { top: 25%; left: 25px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .bi-banner-content .banner_img_3 { left: 110px; bottom: 240px; } .bi-banner-content .banner_img_2 { left: 18%; bottom: 150px; } .bi-banner-content .banner_img_4 { top: 30%; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .bi-banner-content .banner_img_5 { right: 18%; bottom: 20%; } .bi-banner-text { margin: 0 auto; max-width: 775px; padding: 295px 0px 245px; } .bi-banner-text .banner-subtitle { font-size: 14px; font-weight: 600; position: relative; padding-left: 18px; margin-bottom: 10px; display: inline-block; color: var(--base-color); font-family: var(--body-font); } .bi-banner-text .banner-subtitle:before, .bi-banner-text .banner-subtitle:after { left: 0; top: 5px; width: 12px; content: ""; height: 12px; position: absolute; border-radius: 100%; background-color: #fff; } .bi-banner-text .banner-subtitle:after { top: 10px; left: 6px; width: 9px; height: 9px; border-radius: 100%; border: 2px solid #000; background-color: var(--base-color); } .bi-banner-text h1 { color: #fff; font-size: 75px; font-weight: 700; padding-bottom: 20px; } .bi-banner-text p { color: #cecece; margin: 0 auto; max-width: 670px; padding-bottom: 62px; } /*---------------------------------------------------- */ /*Key Feature area*/ /*----------------------------------------------------*/ .bi-key-feature-section { z-index: 1; padding-bottom: 65px; } .bi-key-feature-section .bi-side-shape { z-index: -1; } .bi-key-feature-section .bi-side-shape.shape_1 { left: 0; top: -120%; } .bi-key-feature-title-text { padding-top: 50px; } .bi-key-feature-title-text .bi-section-title-2 { margin-bottom: 52px; } .bi-key-feature-item { padding: 35px 40px; margin-bottom: 30px; background-color: #141522; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-key-feature-item .bi-key-feature-icon-number { margin-bottom: 35px; } .bi-key-feature-item .feature-icon { z-index: 1; padding-left: 15px; } .bi-key-feature-item .feature-icon:before { left: 5px; z-index: -1; width: 50px; content: ""; bottom: -10px; height: 50px; position: absolute; border-radius: 100%; background-color: #313045; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-key-feature-item .feature-icon i { color: #fff; width: 78px; height: 78px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 35px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--base-color); } .bi-key-feature-item .feature-number { color: #313045; line-height: 1; font-size: 90px; font-weight: 700; } .bi-key-feature-item .bi-key-feature-text { margin-bottom: 30px; padding-bottom: 35px; border-bottom: 1px solid #313045; } .bi-key-feature-item .bi-key-feature-text h3 { color: #fff; font-size: 24px; font-weight: 700; padding-bottom: 15px; } .bi-key-feature-item .bi-key-feature-text h3:hover { color: var(--base-color); } .bi-key-feature-item .bi-key-feature-list li { padding-left: 30px; position: relative; margin-bottom: 10px; } .bi-key-feature-item .bi-key-feature-list li:before { top: 0; left: 0; color: #763fce; content: "\f055"; font-weight: 900; position: absolute; font-family: "Font Awesome 5 Pro"; } .bi-key-feature-item:hover { -webkit-transform: translateY(-15px); transform: translateY(-15px); } .bi-key-feature-item:hover .feature-icon:before { background-color: rgb(74, 72, 112); } /*---------------------------------------------------- */ /*About area*/ /*----------------------------------------------------*/ .bi-about-section-2 { z-index: 0; padding-bottom: 100px; } .bi-about-section-2 .bi-side-shape { z-index: -1; } .bi-about-section-2 .bi-side-shape.shape_1 { right: 0; top: -120%; } .bi-about-img2_1 { width: 600px; height: 600px; overflow: hidden; border-radius: 100%; } .bi-about-img2_2 { right: 50px; width: 295px; bottom: -80px; height: 295px; overflow: hidden; border-radius: 100%; border: 12px solid #171926; -webkit-box-shadow: 0px 0px 76px 0px rgba(255, 56, 56, 0.15); box-shadow: 0px 0px 76px 0px rgba(255, 56, 56, 0.15); } .bi-about-text-area-2 { padding-top: 70px; } .bi-about-list-2 { margin: 30px 0px 45px; } .bi-about-list-2 li { padding-left: 32px; position: relative; margin-bottom: 8px; } .bi-about-list-2 li:before { top: 0; left: 0; content: "\f058"; font-weight: 900; position: absolute; color: var(--base-color); font-family: "Font Awesome 5 Pro"; } .bi-text-scroll-section-1 { overflow: hidden; } .bi-text-scroll-item-1 h3 { font-size: 150px; font-weight: 700; margin: 0px 20px; display: inline-block; color: var(--base-color); -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--base-color2); font-family: var(--heading); } .bi-text-scroll-item-2 { display: flow-root; padding-top: 25px; background: linear-gradient(135deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); } .bi-text-scroll-item-2 h3 { font-size: 92px; font-weight: 700; margin: 0px 20px; padding-top: 20px; display: inline-block; } .bi-text-scroll-item-2 span { top: -25px; position: relative; display: inline-block; } .bi-text-scroll-item-2 .scroll-text-1 { color: #1B1C35; } .bi-text-scroll-item-2 .scroll-text-2 { color: #fff; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; } .bi-text-scroll-item-2 .scroll-text-3 { color: rgba(27, 28, 53, 0.3); } .bi-text-scroll-item-2 .scroll-text-4 { color: #fff; } .hpt-text-slide-8-area { overflow: hidden; padding-top: 30px; padding-bottom: 30px; position: relative; } .hpt-text-slide-8-area .bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .hpt-text-slide-8-wrap { display: flex; align-items: center; justify-content: flex-start; gap: 10px; } .hpt-text-slide-8-item { font-size: 70px; font-weight: 500; margin-bottom: 0; line-height: 1; text-transform: uppercase; white-space: nowrap; flex: 0 0 auto; color:#fff; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-text-slide-8-item { font-size: 65px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-text-slide-8-item { font-size: 60px; } } @media (max-width: 767px) { .hpt-text-slide-8-item { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-text-slide-8-item { font-size: 50px; } } .hpt-text-slide-8-item:is(.style-1) { color: var(--white-color); } .hpt-text-slide-8-item:is(.style-2) { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--white-color); color: transparent; } /*---------------------------------------------------- */ /*Service area*/ /*----------------------------------------------------*/ .hap-service-section:before, .hap-service-section:after { left: 0; top: -50px; z-index: -2; content: ""; width: 105%; height: 110px; z-index: 1; position: absolute; background-color: #fff; -webkit-transform: rotate(2deg); transform: rotate(2deg); } .hap-service-section:after { top: auto; bottom: -60px; height: 330px; } .hap-service-content { padding-top: 90px; } .hap-service-item { margin-bottom: 50px; padding-bottom: 35px; } .hap-service-item:before, .hap-service-item:after { left: 0; bottom: 0; height: 2px; width: 100%; content: ""; position: absolute; background: #373737; } .hap-service-item:after { width: 0%; -webkit-transition: all 1500ms ease; transition: all 1500ms ease; background: var(--hap-gradient-color); } .hap-service-item .service-hover { width: 200px; height: 270px; position: absolute; top: 50%; left: 30%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); background-size: 100% 100%; background-repeat: no-repeat; background-position-x: 75%; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.3s, -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); overflow: hidden; pointer-events: none; z-index: 1; } .hap-service-item .service-icon { margin-right: 25px; } .hap-service-item .service-icon i { color: #fff; font-size: 50px; background: var(--hap-gradient-color); background-size: 100% 100%; background-clip: text; -webkit-background-clip: text; color: rgb(255, 255, 255); -webkit-transition: color 0.1s ease-in-out; transition: color 0.1s ease-in-out; } .hap-service-item .service-title h3 { z-index: 1; color: #fff; color: #fff; font-size: 55px; font-weight: 700; background: var(--hap-gradient-color); background-size: 100% 100%; background-clip: text; -webkit-background-clip: text; color: rgb(255, 255, 255); } .hap-service-item .service-title span { color: #fff; font-size: 18px; font-weight: 300; background: var(--hap-gradient-color); background-size: 100% 100%; background-clip: text; -webkit-background-clip: text; color: rgb(255, 255, 255); -webkit-transition: color 0.1s ease-in-out; transition: color 0.1s ease-in-out; } .hap-service-item .service-category a { z-index: 1; color: #fff; font-size: 17px; margin: 0px 8px; font-weight: 300; padding: 10px 20px; position: relative; border-radius: 30px; display: inline-block; border: 1px solid #fff; } .hap-service-item .service-category a:before { top: 0; left: 0; bottom: 0; width: 0%; z-index: -1; content: ""; height: 100%; position: absolute; border-radius: 30px; background: var(--hap-gradient-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hap-service-item .service-category a:hover { border: 1px solid var(--hap-base-color); } .hap-service-item .service-category a:hover:before { width: 100%; } .hap-service-item .service-arrow { margin-left: 90px; } .hap-service-item .service-arrow a { color: #fff; font-size: 50px; display: inline-block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .hap-service-item:hover:after { opacity: 1; width: 100%; visibility: visible; } .hap-service-item:hover .service-icon i { color: rgba(0, 0, 0, 0); } .hap-service-item:hover .service-title h3 { color: rgba(0, 0, 0, 0); } .hap-service-item:hover .service-title span { color: rgba(0, 0, 0, 0); } .hap-service-item:hover .service-arrow a { -webkit-transform: rotate(0); transform: rotate(0); } .hap-service-item:hover .service-hover { opacity: 1; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: translateY(-50%) rotate(-5deg); transform: translateY(-50%) rotate(-5deg); } .hap-service-item.active:after { width: 100%; } .hap-service-item.active:nth-child(odd):after { left: auto; right: 0; } .hap-service-item.active:nth-child(even):after { left: 0; right: auto; } .hap-service-scroll-text-area { z-index: 2; padding: 70px; margin-top: 125px; position: relative; border-radius: 20px; background-color: #000000; } .hap-service-scroll-text-area .hap-section-title { margin-bottom: 20px; } .hap-service-scroll-text-area h2 { color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 80px; font-weight: 700; white-space: nowrap; } .hap-service-scroll-text-area h2 .strock_txt { color: #fff; margin: 0px 15px; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; } .hap-service-scroll-text-area h2 .scroller_item_1 { width: 340px; height: 60px; margin: 0px 15px; overflow: hidden; border-radius: 60px; background: var(--hap-gradient-color); } .hap-service-scroll-text-area h2 .scroller_item_1.text_scroller_2 { width: 315px; } .hap-service-scroll-text-area h2 .scroller_item_1.text_scroller_3 { width: 630px; } .hap-service-scroll-text-area h2 .scroller_item_1 li { top: -33px; color: #fff; font-size: 20px; font-weight: 700; padding-left: 25px; position: relative; } .hap-service-scroll-text-area h2 .scroller_item_1 li:before { top: 0; left: 0; content: "\f666"; font-weight: 900; position: absolute; font-family: "Font Awesome 5 Pro"; } .bi-service-section-2 { padding: 70px 0px 140px; } .hover-reveal { position: fixed; width: 200px; height: 150px; top: 0; left: 0; pointer-events: none; opacity: 0; } .hover-reveal__inner, .hover-reveal__img { width: 100%; height: 100%; position: relative; } .hover-reveal__deco { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #181314; } .hover-reveal__img { background-size: cover; background-position: 50% 50%; } .bi-service-item-wrapper-2 { position: relative; z-index: 11; } .bi-service-list-item { padding: 0px 100px; } .bi-service-list-item a { z-index: 1; color: #fff; line-height: 1; font-size: 64px; font-weight: 700; margin: 40px 35px; padding-left: 45px; position: relative; display: inline-block; text-transform: uppercase; } .bi-service-list-item a img { left: 0; top: -18px; width: 94px; z-index: -1; height: 94px; position: absolute; border-radius: 100%; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-service-list-item a:hover { color: var(--base-color); } .bi-service-list-item a:hover img { left: 15px; -webkit-transform: scale(0); transform: scale(0); } .bi-service-section-4 .bi-service-scroll-area { display: inline-block; } .bi-service-top-content-4 { margin-bottom: 50px; } .bi-service-top-content-4 .bi-section-title-4 { max-width: 660px; } .bi-service-scroll-item { max-width: 522px; overflow: hidden; margin: 0px 15px; border-radius: 20px; display: inline-block; } .bi-service-scroll-item .service-text { width: 100%; bottom: 30px; padding: 0px 40px; } .bi-service-scroll-item .service-text h3 { color: #fff; font-size: 34px; font-weight: 600; } .bi-service-scroll-item .service-text h3:hover { letter-spacing: 2px; } .bi-service-scroll-item .service-text .service_more { width: 62px; height: 62px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 30px; border-radius: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--linear, linear-gradient(135deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%)); } .bi-service-scroll-item .service-text .service_more:hover { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .bi-service-section-4_2 { overflow: hidden; cursor: -webkit-grab; cursor: grab; padding: 100px 0px 60px; border-radius: 0px 0px 100px 100px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.02))); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 100%); -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 56, 56, 0.5); box-shadow: 0px 1px 0px 0px rgba(255, 56, 56, 0.5); } .bi-service-title-text { margin: 0 auto; max-width: 750px; } .bi-service-title-text .service-emoji-logo { margin-bottom: 20px; } .bi-service-title-text h2 { color: #fff; font-size: 62px; font-weight: 600; } .cro-matter { width: 100%; min-height: 325px; cursor: -webkit-grab; cursor: grab; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .hpt-about-2-feature-item { border: 1px solid rgba(14, 5, 2, 0.1); background: #FFF; position: relative; padding: 30px 20px; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .hpt-about-2-feature-item .icon-2 { position: absolute; right: 10px; top: 10px; } .hpt-about-2-feature-item .icon-wrap { position: relative; padding-bottom: 20px; margin-bottom: 23px; } .hpt-about-2-feature-item .icon-wrap::after { position: absolute; content: ""; opacity: 0.1; background: var(--home-9-gd-color); width: 40px; height: 1px; left: 0; bottom: 0; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .hpt-about-2-feature-item .title { font-family: "Kanit", sans-serif; font-size: 22px; line-height: 120%; font-weight: 500; color: #00071A; margin-bottom: 13px; } .hpt-about-2-feature-item .text { font-size: 14px; font-weight: 400; line-height: 160%; color: #4D515F; margin-bottom: 0; } .hpt-about-2-feature-item:Hover { border: 1px solid rgba(255, 56, 56, 0.1); } .hpt-about-2-feature-item:Hover .icon-wrap::after { opacity: 0.3; width: 100%; } .hpt-services-8-item { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 48px; padding: 25px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .hpt-services-8-item:hover { border-bottom-color: var(--primary-color-8); } .hpt-services-8-item { transition: 500ms ease; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-services-8-item { grid-template-columns: 1fr 1fr; gap: 30px; } } @media (max-width: 767px) { .hpt-services-8-item { grid-template-columns: 1fr; gap: 30px; } } .hpt-services-8-item:nth-child(1) { border-top: 1px solid rgba(255, 255, 255, 0.15); } .hpt-services-8-item .logo-title { display: flex; gap: 30px; } @media (max-width: 767px) { .hpt-services-8-item .logo-title { align-items: center; } } .hpt-services-8-item .logo-title i { flex: 0 0 auto; font-size: 50px; color: var(--primary-color-8); } .hpt-services-8-item .logo-title svg { flex: 0 0 auto; max-width: 50px; } .hpt-services-8-item .logo-title .title { font-size: 30px; line-height: 1.33; color: var(--white-color); margin-bottom: 0; font-weight: 500; opacity: 0.6; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-services-8-item .logo-title .title { font-size: 22px; } } @media (max-width: 767px) { .hpt-services-8-item .logo-title .title { font-size: 22px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-services-8-item .logo-title .title { font-size: 26px; } } .hpt-services-8-item .img-wrap { position: relative; } .hpt-services-8-item .img-wrap::after { content: ""; position: absolute; width: 100%; height: 100%; background-color: transparent; border-radius: 86px; border: 2px dashed var(--primary-color-8); left: 0; top: 0; opacity: 0; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; } .hpt-services-8-item .img-wrap .img { position: relative; z-index: 1; width: 100%; height: 132px; overflow: hidden; border-radius: 86px; } .hpt-services-8-item .img-wrap .img img { filter: grayscale(100%); width: 100%; height: 100%; object-fit: cover; } .hpt-services-8-item .img-wrap .service-btn { font-size: 50px; display: inline-block; color: var(--primary-color-8); position: absolute; top: 35%; left: 30%; transform: translate(-50%, -50%); z-index: 1; line-height: 1; rotate: -45deg; opacity: 0; visibility: hidden; } .hpt-services-8-item .contnet p { font-family: var(--inter); font-size: 16px; font-weight: 400; color: #4D515F; line-height: 1.62; margin-bottom: 0; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; } .hpt-services-8-item:hover .title { opacity: 1; } .hpt-services-8-item:hover .img-wrap::after { opacity: 1; rotate: 7deg; } .hpt-services-8-item:hover .img-wrap .img img { filter: grayscale(0%); } .hpt-services-8-item:hover .img-wrap .service-btn { left: 50%; opacity: 1; visibility: visible; } .hpt-services-8-item:hover .contnet p { color: var(--white-color); } /*---------------------------------------------------- */ /*Sold Employe area*/ /*----------------------------------------------------*/ .bi-sold-employe-section { z-index: 0; } .bi-sold-employe-section .bi-side-shape { z-index: -1; } .bi-sold-employe-section .bi-side-shape.shape_1 { left: 0; top: -220%; } .bi-sold-employe-content { padding: 50px 40px; border-radius: 220px; background-color: #2c3145; } .bi-sold-employe-text-area { padding-left: 50px; } .bi-sold-employe-counter-item { margin-bottom: 25px; padding-bottom: 30px; border-bottom: 1px solid #cbcdd7; } .bi-sold-employe-counter-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .bi-sold-employe-counter-item .counter-img { width: 110px; margin-right: 5px; } .bi-sold-employe-counter-item .counter-text { color: #fff; } .bi-sold-employe-counter-item .counter-text h3 { font-size: 30px; font-weight: 700; padding-bottom: 5px; } .bi-sold-employe-counter-item .counter-text p { font-size: 24px; font-weight: 300; } .bi-sold-employe-text { padding-left: 30px; } .bi-sold-employe-text .bi-section-title-2 { margin-bottom: 20px; } .bi-sold-employe-text .bi-section-title-2 h2 { font-size: 40px; } .bi-sold-employe-video { width: 307px; height: 307px; margin: 0 auto; overflow: hidden; border-radius: 100%; } .bi-sold-employe-video .video-circle-text { top: 50%; left: 50%; width: 207px; height: 207px; opacity: 0.871; border-radius: 100%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); background-color: rgb(207, 225, 253); } /*---------------------------------------------------- */ /*Portfolio area*/ /*----------------------------------------------------*/ .bi-portfolio-section-2 .bi-side-shape { z-index: -1; } .bi-portfolio-section-2 .bi-side-shape.shape_1 { right: 0; top: -50%; } .bi-portfolio-section-2 .bi-side-shape.shape_2 { left: 0; bottom: -120%; } .bi-portfolio-content-2 { padding: 40px 0px 15px; } .bi-portfolio-item-2 { z-index: 1; margin-bottom: 45px; } .bi-portfolio-item-2.item-type-one { max-width: 451px; } .bi-portfolio-item-2.item-type-two { max-width: 746px; } .bi-portfolio-item-2:before { top: 0; left: 0; z-index: -1; width: 100%; height: 100%; content: ""; position: absolute; border-radius: 330px; background-color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-portfolio-item-2 .bi-portfolio-img { overflow: hidden; border-radius: 330px; } .bi-portfolio-item-2 .bi-portfolio-img img { -webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-portfolio-item-2 .bi-portfolio-text { top: 50%; left: 40%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } .bi-portfolio-item-2 .bi-portfolio-text h3 { opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateX(-30px); transform: translateX(-30px); } .bi-portfolio-item-2 .bi-portfolio-text h3 a { color: #181926; font-size: 15px; font-weight: 700; padding: 15px 23px; display: inline-block; background-color: #fff; } .bi-portfolio-item-2 .bi-portfolio-text span { opacity: 0; margin-top: 5px; visibility: hidden; display: inline-block; -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateX(-30px); transform: translateX(-30px); } .bi-portfolio-item-2 .bi-portfolio-text span a { color: #fff; font-size: 13px; padding: 10px 26px; display: inline-block; background-color: var(--base-color); } .bi-portfolio-item-2:hover .bi-portfolio-text h3 { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); transform: translateX(0px); } .bi-portfolio-item-2:hover .bi-portfolio-text span { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .bi-portfolio-item-2:hover:before { -webkit-transform: rotate(-2.5deg); transform: rotate(-2.5deg); } .bi-portfolio-item-2:hover.item-type-one:before { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } .bi-portfolio-item-2:hover .bi-portfolio-img img { -webkit-transform: scale(1); transform: scale(1); } /*---------------------------------------------------- */ /*Consult CTA area*/ /*----------------------------------------------------*/ .bi-consult-cta-section { z-index: 2; padding: 90px 0px 120px; } .bi-consult-cta-text-area .bi-section-title-2 h2 { font-size: 50px; } .bi-consult-cta-form-btn { margin-top: 40px; margin-bottom: 20px; } .bi-consult-cta-form-btn .nav-tabs { border: none; } .bi-consult-cta-form-btn .nav { display: block; } .bi-consult-cta-form-btn .nav-tabs .nav-item.show .nav-link, .bi-consult-cta-form-btn .nav-tabs .nav-link.active, .bi-consult-cta-form-btn .nav-tabs .nav-link { padding: 0; border: none; border-radius: 0; background-color: transparent; } .bi-consult-cta-form-btn li:last-child .bi-consult-btn-area { margin-right: 0; } .bi-consult-cta-form-btn .nav-tabs .nav-link.active .bi-consult-btn-area { border: 1px solid var(--base-color); } .bi-consult-cta-form-btn .nav-tabs .nav-link.active .bi-consult-btn-area .bi-consult-btn { background-color: var(--base-color); } .bi-consult-btn-area { width: 170px; height: 170px; padding: 15px; margin-right: 30px; border-radius: 25px; border: 1px solid #7d808a; } .bi-consult-btn-area .bi-consult-btn { width: 100%; height: 100%; padding-top: 22px; border-radius: 25px; background-color: transparent; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-consult-btn-area .bi-consult-btn i { color: #fff; font-size: 60px; margin-bottom: 18px; } .bi-consult-btn-area .bi-consult-btn span { color: #fff; display: block; font-size: 15px; font-weight: 700; } .bi-consult-form-wrap { overflow: hidden; max-height: 585px; } .bi-consult-form-wrap .bi-consult-form-tilte { color: #fff; width: 52px; height: 90%; line-height: 52px; font-size: 14px; font-weight: 700; text-align: center; background-color: #111010; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .bi-consult-form-wrap .bi-consult-form-area { width: 100%; max-width: 430px; overflow: hidden; border-radius: 10px; border-top-left-radius: 0; border-left: 1px solid var(--base-color); } .bi-consult-form-wrap .bi-consult-form-area .bi-consult-form-input { padding: 60px 60px 0px; } .bi-consult-form-wrap .bi-consult-form-area label { color: #e7d0d0; display: block; font-size: 14px; margin-bottom: 10px; } .bi-consult-form-wrap .bi-consult-form-area label i { margin-right: 6px; } .bi-consult-form-wrap .bi-consult-form-area input, .bi-consult-form-wrap .bi-consult-form-area textarea { width: 100%; height: 55px; color: #000; padding-left: 15px; font-size: 12px; border-radius: 6px; margin-bottom: 25px; background-color: #fff; } .bi-consult-form-wrap .bi-consult-form-area input::-webkit-input-placeholder, .bi-consult-form-wrap .bi-consult-form-area textarea::-webkit-input-placeholder { color: #000; font-size: 12px; } .bi-consult-form-wrap .bi-consult-form-area input::-moz-placeholder, .bi-consult-form-wrap .bi-consult-form-area textarea::-moz-placeholder { color: #000; font-size: 12px; } .bi-consult-form-wrap .bi-consult-form-area input:-ms-input-placeholder, .bi-consult-form-wrap .bi-consult-form-area textarea:-ms-input-placeholder { color: #000; font-size: 12px; } .bi-consult-form-wrap .bi-consult-form-area input::-ms-input-placeholder, .bi-consult-form-wrap .bi-consult-form-area textarea::-ms-input-placeholder { color: #000; font-size: 12px; } .bi-consult-form-wrap .bi-consult-form-area input::placeholder, .bi-consult-form-wrap .bi-consult-form-area textarea::placeholder { color: #000; font-size: 12px; } .bi-consult-form-wrap .bi-consult-form-area button { width: 100%; color: #fff; height: 60px; border: none; font-size: 14px; text-transform: uppercase; background-color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-consult-form-wrap .bi-consult-form-area button:hover { background-color: #010101; } /*---------------------------------------------------- */ /*Pricing area*/ /*----------------------------------------------------*/ .hap-pricing-tab-btn { margin-top: 22px; } .hap-pricing-tab-btn .nav-tabs { border: none; } .hap-pricing-tab-btn .nav { display: inherit; } .hap-pricing-tab-btn .nav-tabs .nav-item.show .nav-link, .hap-pricing-tab-btn .nav-tabs .nav-link.active, .hap-pricing-tab-btn .nav-tabs .nav-link { border: none; padding-top: 0; padding-right: 0; border-radius: 0; margin-bottom: 0; background-color: transparent; } .hap-pricing-tab-btn .nav-tabs .nav-link { padding: 0; color: #151f35; font-size: 17px; font-weight: 600; margin: 0px 30px; position: relative; padding-bottom: 8px; } .hap-pricing-tab-btn .nav-tabs .nav-link:before { left: 0; right: 0; bottom: 0; width: 0%; height: 4px; content: ""; margin: 0 auto; position: absolute; border-radius: 4px; -webkit-transition: all 500ms ease; transition: all 500ms ease; background: var(--hap-gradient-color); } .hap-pricing-tab-btn .nav-tabs .nav-link.active:before { width: 100%; } .hap-pricing-tab-content { margin-top: 40px; } .hap-pricing-tab-img-price .price-img { z-index: 1; overflow: hidden; border-radius: 30px; } .hap-pricing-tab-img-price .price-img:before { width: 100%; content: ""; z-index: -1; height: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.95); } .hap-pricing-tab-img-price .plan-price-title { left: 45px; z-index: 2; bottom: 30px; } .hap-pricing-tab-img-price .plan-price-title .plan-price { color: #fff; width: 122px; height: 122px; min-width: 122px; min-height: 122px; border-radius: 100%; background: var(--hap-gradient-color); } .hap-pricing-tab-img-price .plan-price-title { gap: 45px; left: 0; width: 100%; padding: 30px 35px; bottom: 0; } .hap-pricing-tab-img-price .plan-price-title .price-plan-title { width: calc(100% - 67px); } .hap-pricing-tab-img-price .plan-price-title .plan-price h4 { width: 100%; line-height: 1; font-size: 26px; font-weight: 700; margin: 0; } .hap-pricing-tab-img-price .plan-price-title .plan-price span { color: #fff; width: 100%; font-size: 14px; font-weight: 600; } .hap-pricing-tab-img-price .plan-price-title .price-plan-title h3 { color: #fff; font-size: 32px; font-weight: 700; } .hap-pricing-tab-img-price .plan-price-title .price-plan-title span { font-size: 16px; } .hap-pricing-list-area { margin-left: 25px; border-radius: 20px; padding: 70px 65px 60px; background-color: rgb(255, 255, 255); -webkit-box-shadow: 0px 1px 120px 0px rgba(35, 31, 32, 0.17); box-shadow: 0px 1px 120px 0px rgba(35, 31, 32, 0.17); } .hap-pricing-list-area ul { position: relative; } .hap-pricing-list-area ul:before { top: -5px; left: 6px; width: 1px; content: ""; height: 106%; position: absolute; background-color: #c5d7e3; } .hap-pricing-list-area li { color: #151f35; font-size: 20px; font-weight: 700; padding-left: 35px; margin-bottom: 30px; position: relative; } .hap-pricing-list-area li:before { left: 0; top: 8px; width: 13px; height: 13px; content: ""; position: absolute; border-radius: 100%; background: var(--hap-gradient-color); } .hap-pricing-list-area .hap-btn { margin-top: 50px; } .bi-pricing-section-2 { z-index: 1; overflow: hidden; padding: 130px 0px 100px; } .bi-pricing-section-2 .bi-side-shape { z-index: -1; } .bi-pricing-section-2 .bi-side-shape.shape_1 { right: 0; top: -100%; } .bi-pricing-content-2 { padding-top: 45px; } .bi-pricing-item-2 { overflow: hidden; border-radius: 25px; padding: 75px 60px 55px; } .bi-pricing-item-2 .bi-pricing-title-2 { margin-bottom: 35px; padding-bottom: 50px; border-bottom: 2px solid rgba(255, 255, 255, 0.2); } .bi-pricing-item-2 .bi-pricing-title-2 span { font-size: 14px; font-weight: 400; color: var(--base-color); } .bi-pricing-item-2 .bi-pricing-title-2 h3 { color: #fff; font-weight: 600; font-weight: 33px; padding: 14px 0px 25px; } .bi-pricing-item-2 .bi-pricing-title-2 h4 { font-size: 32px; font-weight: 700; color: var(--base-color); } .bi-pricing-item-2 .bi-pricing-title-2 h4 sub { bottom: 0; color: #e2dee7; font-size: 14px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; } .bi-pricing-item-2 .bi-price-list-area li { font-size: 15px; font-weight: 500; padding-left: 28px; margin-bottom: 15px; position: relative; } .bi-pricing-item-2 .bi-price-list-area li:before { top: 0; left: 0; content: "\f00c"; font-weight: 400; position: absolute; color: var(--base-color); font-family: "Font Awesome 5 Pro"; } .bi-pricing-item-2 .bi-btn-2 { margin-top: 40px; } .bi-pricing-section-4 .bi-section-title-4 { margin-bottom: 55px; } .bi-pricing-text-area-4 { top: 50px; position: sticky; } .bi-pricing-item-4 { max-width: 405px; background: #202139; border-radius: 20px; padding-bottom: 50px; -webkit-box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25) inset; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25) inset; } .bi-pricing-item-4 .plan-title { color: #fff; max-width: 78%; margin: 0 auto; font-size: 20px; overflow: hidden; font-weight: 600; padding: 18px 0px; margin-bottom: 40px; position: relative; font-family: var(--heading); border-radius: 0px 0px 20px 20px; background: rgba(255, 255, 255, 0.02); -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 56, 56, 0.5); box-shadow: 0px 1px 0px 0px rgba(255, 56, 56, 0.5); } .bi-pricing-item-4 .plan-price { margin-bottom: 35px; } .bi-pricing-item-4 .plan-price h3 { font-size: 68px; font-weight: 700; display: inline-block; background: -webkit-gradient(linear, left top, right top, from(#EB5C18), color-stop(45.72%, #F95055), to(#CA2DB8)); background: linear-gradient(90deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bi-pricing-item-4 .plan-price h3 sub { bottom: 0; font-size: 54px; font-weight: 300; background: -webkit-gradient(linear, left top, right top, from(#EB5C18), color-stop(45.72%, #F95055), to(#CA2DB8)); background: linear-gradient(90deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bi-pricing-item-4 .plan-price span { display: block; font-size: 30px; font-family: var(--heading); color: rgba(255, 255, 255, 0.4); } .bi-pricing-item-4 .plan-list { padding: 32px 70px; background: rgba(255, 255, 255, 0.05); } .bi-pricing-item-4 .plan-list li { color: #fff; font-size: 16px; position: relative; margin-bottom: 15px; padding-bottom: 15px; } .bi-pricing-item-4 .plan-list li::before { left: 0; bottom: 0; content: ""; width: 100%; height: 1.112px; position: absolute; opacity: 0.5; background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(22, 35, 43, 0) 100%); } .bi-pricing-item-4 .plan-list li:last-child { margin-bottom: 0; padding-bottom: 0; } .bi-pricing-item-4 .plan-list li:last-child:before { display: none; } .bi-pricing-item-4 .price-btn { margin-top: 50px; } .bi-pricing-item-4 .price-btn a { color: #fff; font-weight: 700; padding: 20px 70px; border-radius: 50px; display: inline-block; font-family: var(--heading); background: linear-gradient(135deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); } .bi-pricing-plan-content-4 { z-index: 1; margin-left: 40px; } .bi-pricing-plan-content-4 .bi-pricing-item-4 { -webkit-transition: all 300ms linear 0ms; transition: all 300ms linear 0ms; } .bi-pricing-plan-content-4 .bi-pricing-item-4:nth-child(2) { display: block; position: absolute; top: 50%; right: 0; -webkit-transform: translate(0, -50%) scale(0.88); -khtml-transform: translate(0, -50%) scale(0.88); transform: translate(0, -50%) scale(0.88); z-index: -1; } .bi-pricing-plan-content-4 .bi-pricing-item-4:nth-child(2):hover { -webkit-transform: translate(0, -50%) scale(1); -khtml-transform: translate(0, -50%) scale(1); transform: translate(0, -50%) scale(1); z-index: 9; } .bi-pricing-plan-content-4.is-last-active .bi-pricing-item-4:nth-child(1) { -webkit-transform: scale(0.88); transform: scale(0.88); } .bi-pricing-plan-content-4.is-last-active .bi-pricing-item-4:nth-child(2) { -webkit-transform: translate(0, -50%) scale(1); -khtml-transform: translate(0, -50%) scale(1); transform: translate(0, -50%) scale(1); z-index: 9; } .bi-pricing-item-4 { max-width: 405px; background: #202139; border-radius: 20px; padding-bottom: 50px; -webkit-box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25) inset; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.25) inset; } .bi-pricing-item-4 .plan-title { color: #fff; max-width: 78%; margin: 0 auto; font-size: 20px; overflow: hidden; font-weight: 600; padding: 18px 0px; margin-bottom: 40px; position: relative; font-family: var(--heading); border-radius: 0px 0px 20px 20px; background: rgba(255, 255, 255, 0.02); -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 56, 56, 0.5); box-shadow: 0px 1px 0px 0px rgba(255, 56, 56, 0.5); } .bi-pricing-item-4 .plan-price { margin-bottom: 35px; } .bi-pricing-item-4 .plan-price h3 { font-size: 68px; font-weight: 700; display: inline-block; background: -webkit-gradient(linear, left top, right top, from(#EB5C18), color-stop(45.72%, #F95055), to(#CA2DB8)); background: linear-gradient(90deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bi-pricing-item-4 .plan-price h3 sub { bottom: 0; font-size: 54px; font-weight: 300; background: -webkit-gradient(linear, left top, right top, from(#EB5C18), color-stop(45.72%, #F95055), to(#CA2DB8)); background: linear-gradient(90deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bi-pricing-item-4 .plan-price span { display: block; font-size: 30px; font-family: var(--heading); color: rgba(255, 255, 255, 0.4); } .bi-pricing-item-4 .plan-list { padding: 32px 70px; background: rgba(255, 255, 255, 0.05); } .bi-pricing-item-4 .plan-list li { color: #fff; font-size: 16px; position: relative; margin-bottom: 15px; padding-bottom: 15px; } .bi-pricing-item-4 .plan-list li::before { left: 0; bottom: 0; content: ""; width: 100%; height: 1.112px; position: absolute; opacity: 0.5; background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(22, 35, 43, 0) 100%); } .bi-pricing-item-4 .plan-list li:last-child { margin-bottom: 0; padding-bottom: 0; } .bi-pricing-item-4 .plan-list li:last-child:before { display: none; } .bi-pricing-item-4 .price-btn { margin-top: 50px; } .bi-pricing-item-4 .price-btn a { color: #fff; font-weight: 700; padding: 20px 70px; border-radius: 50px; display: inline-block; font-family: var(--heading); background: linear-gradient(135deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); } .hpt-pricing-9-table .bi-pricing-item-4 { width: 100%; max-width: 100%; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-title { color: var(--white-color); font-family: var(--recoleta); box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); transition: 500ms ease; position: relative; overflow: unset; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-title .text { position: relative; z-index: 1; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-title .pt-shape-2 { display: inline-block; width: 8px; height: 11px; clip-path: polygon(0 100%, 100% 100%, 0 0); background: #303442; position: absolute; right: -8px; top: -11px; transition: 500ms ease; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-title .pt-shape-1 { display: inline-block; width: 8px; height: 11px; clip-path: polygon(0 100%, 100% 0, 100% 100%); background: #303442; position: absolute; left: -8px; top: -11px; transition: 500ms ease; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-title::after { position: absolute; content: ""; width: 100%; height: 117%; background-color: #282E3D; left: 0; top: -11px; border-radius: 0px 0px 19px 19px; transition: 500ms ease; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-price h3 { font-size: 60px; font-family: var(--recoleta); color: var(--home-9-primary); background: unset; background-clip: unset; background-clip: text; -webkit-text-fill-color: unset; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-price h3 sub { background: unset; background-clip: unset; -webkit-background-clip: unset; -webkit-text-fill-color: unset; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-price span { color: rgba(255, 255, 255, 0.4); font-family: var(--recoleta); } .hpt-pricing-9-table .bi-pricing-item-4 .plan-list { transition: 500ms ease; position: relative; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-list::after { content: ""; position: absolute; width: 105%; height: 100%; background-color: #282E3D; left: -10.5px; top: 0; transition: 400ms; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-pricing-9-table .bi-pricing-item-4 .plan-list::after { width: 106%; } } @media (max-width: 767px) { .hpt-pricing-9-table .bi-pricing-item-4 .plan-list::after { width: 107%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-pricing-9-table .bi-pricing-item-4 .plan-list::after { width: 104%; } } .hpt-pricing-9-table .bi-pricing-item-4 .plan-list .t-shape-1 { display: inline-block; width: 11px; height: 10px; background: #282E3D; clip-path: polygon(100% 0, 0% 100%, 100% 100%); position: absolute; top: -8px; left: -11px; transition: 400ms; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-list .t-shape-2 { display: inline-block; width: 11px; height: 10px; background: #282E3D; clip-path: polygon(100% 100%, 0 0, 0 100%); position: absolute; top: -8px; right: -11px; transition: 400ms; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-list .t-shape-3 { display: inline-block; width: 11px; height: 10px; background: #282E3D; clip-path: polygon(100% 100%, 0 0, 100% 0); position: absolute; bottom: -8px; left: -11px; transition: 400ms; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-list .t-shape-4 { display: inline-block; width: 11px; height: 10px; background: #282E3D; clip-path: polygon(100% 0, 0 100%, 0 0); position: absolute; bottom: -8px; right: -11px; transition: 400ms; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-pricing-9-table .bi-pricing-item-4 .plan-list { padding: 32px 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-pricing-9-table .bi-pricing-item-4 .plan-list { padding: 32px 15px; } } @media (max-width: 767px) { .hpt-pricing-9-table .bi-pricing-item-4 .plan-list { padding: 32px 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-pricing-9-table .bi-pricing-item-4 .plan-list { padding: 32px 70px; } } .hpt-pricing-9-table .bi-pricing-item-4 .plan-list ul { position: relative; z-index: 1; } .hpt-pricing-9-table .bi-pricing-item-4 .plan-list li { color: #fff; font-size: 16px; position: relative; margin-bottom: 15px; padding-bottom: 15px; font-family: var(--inter); font-weight: 400; } .hpt-pricing-9-table .bi-pricing-item-4 .price-btn a { background: transparent; } .hpt-pricing-9-table .bi-pricing-item-4 .price-btn .price-btn-9 { position: relative; overflow: hidden; font-size: 18px; font-weight: 600; text-transform: uppercase; font-family: var(--recoleta); color: var(--home-9-primary); border: 1px solid var(--home-9-primary); border-radius: 100px; padding: 18px 90px; transition: 500ms ease; } @media (max-width: 767px) { .hpt-pricing-9-table .bi-pricing-item-4 .price-btn .price-btn-9 { padding: 18px 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-pricing-9-table .bi-pricing-item-4 .price-btn .price-btn-9 { padding: 18px 90px; } } .hpt-pricing-9-table .bi-pricing-item-4 .price-btn .price-btn-9 span { position: relative; z-index: 1; } .hpt-pricing-9-table .bi-pricing-item-4 .price-btn .price-btn-9::after { content: ""; position: absolute; width: 100%; height: 100%; background: var(--home-9-gd-color); clip-path: polygon(70% 31%, 100% 2%, 100% 100%, 75% 73%, 50% 50%, 27% 73%, 0 100%, 0 0, 27% 27%, 50% 50%); left: 0; bottom: 0px; opacity: 0; transition: 700ms ease; } .hpt-pricing-9-table .bi-pricing-item-4:hover .plan-title { color: var(--white-color); } .hpt-pricing-9-table .bi-pricing-item-4:hover .plan-title::after { background-color: var(--home-9-primary); } .hpt-pricing-9-table .bi-pricing-item-4:hover .plan-title .pt-shape-1, .hpt-pricing-9-table .bi-pricing-item-4:hover .plan-title .pt-shape-2 { background: #8D0B0B; } .hpt-pricing-9-table .bi-pricing-item-4:hover .plan-list::after { background: var(--home-9-primary); } .hpt-pricing-9-table .bi-pricing-item-4:hover .plan-list .t-shape-3, .hpt-pricing-9-table .bi-pricing-item-4:hover .plan-list .t-shape-1, .hpt-pricing-9-table .bi-pricing-item-4:hover .plan-list .t-shape-4, .hpt-pricing-9-table .bi-pricing-item-4:hover .plan-list .t-shape-2 { background: #8D0B0B; } .hpt-pricing-9-table .bi-pricing-item-4:hover .price-btn .price-btn-9 { color: var(--white-color); border-color: transparent; } .hpt-pricing-9-table .bi-pricing-item-4:hover .price-btn .price-btn-9::after { opacity: 1; clip-path: polygon(71% 0, 100% 0, 100% 100%, 65% 100%, 50% 100%, 22% 100%, 0 100%, 0 0, 25% 0, 54% 0); } /*---------------------------------------------------- */ /*Video Play area*/ /*----------------------------------------------------*/ .bi-video-play-content-2 { padding: 285px 0px 205px; } .bi-video-play-content-2 .video-play-text { margin-top: 30px; } .bi-video-play-content-2 .video-play-text h3 { font-size: 50px; font-weight: 700; } .bi-video-play-content-2 .video-play-text h3 span { font-weight: 200; display: block; } .bi-video-play-content-2 { text-align: center; } .bi-video-play-content-2 .video-play-logo { display: inline-block; -webkit-animation: spin 10s linear infinite; animation: spin 10s linear infinite; } .hpt-video-1-item { position: relative; } .hpt-video-1-item .video-1-img { position: relative; width: 100%; height: 668px; overflow: hidden; } @media (max-width: 767px) { .hpt-video-1-item .video-1-img { height: 450px; } } .hpt-video-1-item .video-1-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-video-1-item .video-1-img::after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background-color: #00071A; opacity: 0.5; z-index: 1; } .hpt-video-1-item .video-1-img .multi-img-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-video-1-item .video-1-img .multi-img-wrap .multi-img { position: relative; width: 100%; height: 100%; } .hpt-video-1-item .video-1-img .multi-img-wrap .multi-img img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 3s linear 0s; -moz-transition: all 3s linear 0s; -ms-transition: all 3s linear 0s; -o-transition: all 3s linear 0s; transition: all 3s linear 0s; } .hpt-video-1-item .video-1-img .multi-img-wrap .multi-img .img-1 { position: absolute; left: 0; right: 0; z-index: 1; animation: loop-img-1 4s linear infinite; } .hpt-video-1-item:hover .video-1-img .multi-img-wrap { opacity: 1; } .hpt-video-1-item:hover .video-1-img .multi-img-wrap img { transform: scale(1.1); } .hpt-video-1-item .hpt-video-1-item-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } /*---------------------------------------------------- */ /*Team area*/ /*----------------------------------------------------*/ .bi-team-section-2 { z-index: 1; overflow: hidden; padding: 120px 0px 55px; } .bi-team-section-2 .bi-side-shape { z-index: -1; } .bi-team-section-2 .bi-side-shape.shape_1 { left: 0; top: -150%; } .bi-team-content-2 { padding-top: 40px; } .bi-team-item-2 { margin: 0 auto; max-width: 373px; margin-bottom: 40px; } .bi-team-item-2 .team-shape.shape_1, .bi-team-item-2 .team-shape.shape_2 { right: 0; top: -18px; left: 30px; opacity: 0; z-index: 1; visibility: hidden; text-align: center; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-team-item-2 .team-shape.shape_2 { top: auto; bottom: -11px; } .bi-team-item-2 .team-shape.shape_1 { -webkit-transform: translateX(30px); transform: translateX(30px); } .bi-team-item-2 .team-shape.shape_2 { -webkit-transform: translateX(-30px); transform: translateX(-30px); } .bi-team-item-2 .bi-team-img { overflow: hidden; border-radius: 8px; margin-bottom: 25px; } .bi-team-item-2 .bi-team-img img { -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-team-item-2 .bi-team-text h3 { color: #fff; font-size: 25px; font-weight: 800; } .bi-team-item-2 .bi-team-text span { font-size: 16px; font-weight: 300; color: var(--base-color); } .bi-team-item-2 .bi-team-social { margin-top: 13px; } .bi-team-item-2 .bi-team-social li { opacity: 0; color: #fff; margin: 0px 12px; visibility: hidden; display: inline-block; -webkit-transition: all 300ms ease; transition: all 300ms ease; } .bi-team-item-2 .bi-team-social li a { -webkit-transition: 0; transition: 0; } .bi-team-item-2 .bi-team-social li:hover { color: var(--base-color); } .bi-team-item-2 .bi-team-social li:nth-child(1) { -webkit-transform: translateY(10px); transform: translateY(10px); } .bi-team-item-2 .bi-team-social li:nth-child(2) { -webkit-transform: translateY(10px); transform: translateY(10px); } .bi-team-item-2 .bi-team-social li:nth-child(3) { -webkit-transform: translateY(10px); transform: translateY(10px); } .bi-team-item-2 .bi-team-social li:nth-child(4) { -webkit-transform: translateY(10px); transform: translateY(10px); } .bi-team-item-2:hover .team-shape.shape_1, .bi-team-item-2:hover .team-shape.shape_2 { opacity: 1; visibility: visible; } .bi-team-item-2:hover .team-shape.shape_1 { -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .bi-team-item-2:hover .team-shape.shape_2 { -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .bi-team-item-2:hover .bi-team-img img { -webkit-transform: scale(1.05); transform: scale(1.05); } .bi-team-item-2:hover .bi-team-social li { opacity: 1; visibility: visible; } .bi-team-item-2:hover .bi-team-social li:nth-child(1) { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .bi-team-item-2:hover .bi-team-social li:nth-child(2) { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .bi-team-item-2:hover .bi-team-social li:nth-child(3) { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .bi-team-item-2:hover .bi-team-social li:nth-child(4) { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } /*---------------------------------------------------- */ /*Counter area*/ /*----------------------------------------------------*/ .hap-counter-section { z-index: 2; overflow: hidden; padding-bottom: 80px; } .hap-counter-item:before { top: 50%; right: 20px; content: "\f666"; font-weight: 900; position: absolute; font-family: "Font Awesome 5 Pro"; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .hap-counter-item h3 { line-height: 1; color: #000000; font-size: 120px; font-weight: 700; padding-bottom: 5px; } .hap-counter-item p { color: #323131; font-size: 18px; } .hap-counter-content .col-lg-3:last-child .hap-counter-item:before { display: none; } .bi-counter-section-3 { padding-bottom: 135px; } .bi-counter-item-3 { max-width: 370px; } .bi-counter-item-3:after { top: 20%; left: 50%; content: ""; width: 1px; height: 50px; position: absolute; -webkit-transform: translate(-50%) rotate(-45deg); transform: translate(-50%) rotate(-45deg); background: var(--base-color); } .bi-counter-item-3:before { top: 40%; left: 50%; width: 1px; content: ""; opacity: 0.5; height: 16px; position: absolute; -webkit-transform: translate(-50%) rotate(45deg); transform: translate(-50%) rotate(45deg); background: var(--base-color); } .bi-counter-item-3 h3 { color: #fff; font-size: 60px; font-weight: 700; } .bi-counter-item-3 p { color: #fff; font-size: 18px; font-weight: 700; max-width: 135px; line-height: 1.2; } .bi-counter-section-4 { z-index: 1; overflow: hidden; position: relative; padding: 295px 0px 155px; } .bi-counter-section-4 .counter-landing { -webkit-transition: all 800ms ease; transition: all 800ms ease; } .bi-counter-section-4 .counter-landing.bi-counter-landing1 { left: -33%; z-index: -1; bottom: -85%; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .bi-counter-section-4 .counter-landing.bi-counter-landing2 { left: -36%; z-index: -2; bottom: -110%; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .bi-counter-section-4 .counter-landing.bi-counter-landing3 { left: -27%; bottom: -50%; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .bi-counter-section-4:hover .counter-landing { -webkit-transform: translateY(-70px); transform: translateY(-70px); } .bi-counter-item-2 { overflow: hidden; margin-bottom: 75px; } .bi-counter-item-2 h3 { line-height: 1; font-size: 30px; font-weight: 600; max-width: 200px; margin-bottom: 5px; padding-bottom: 25px; color: var(--title-color); border-bottom: 1px solid #e7e8ee; } .bi-counter-item-2 h3 span { font-size: 120px; font-weight: 500; } .bi-counter-item-2 p { color: #717171; font-size: 17px; font-family: var(--heading); } .bi-counter-content-4 .bi-fun-fact-star { left: 0; top: 42%; right: 90px; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-animation: spin 10s linear infinite; animation: spin 10s linear infinite; } .bi-counter-content-4 .bi-fun-fact-counter-2 { max-width: 480px; } .bi-counter-content-4 .bi-counter-item-2 h3 { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .bi-counter-content-4 .bi-counter-item-2 p { color: #fff; font-size: 18px; } .hpt-project-count-1-wrap { position: relative; display: flex; background: var(--linear, linear-gradient(90deg, #EEEAFF 0%, #E6F1FF 48.58%, #DEF8FF 100%)); justify-content: space-around; align-items: center; gap: 50px; padding-left: 150px; padding-top: 35px; padding-bottom: 35px; padding-right: 150px; clip-path: polygon(12% 0%, 88% 0%, 100% 100%, 0% 100%); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-project-count-1-wrap { padding-right: 120px; padding-left: 120px; gap: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-project-count-1-wrap { flex-wrap: wrap; padding-right: 120px; padding-left: 120px; gap: 15px; } } @media (max-width: 767px) { .hpt-project-count-1-wrap { flex-wrap: wrap; padding-right: 120px; padding-left: 120px; gap: 15px; } } @media (max-width: 767px) { .hpt-project-count-1-wrap { flex-wrap: wrap; padding-right: 45px; padding-left: 55px; gap: 15px; } } .hpt-project-count-1-wrap .project-count-3-shape-1 { position: absolute; left: -73px; top: -48px; z-index: -1; } .hpt-project-count-1-wrap .project-count-3-shape-2 { position: absolute; right: -55px; bottom: -65px; z-index: -1; } .hpt-project-count-1-item .title { font-size: 80px; line-height: 1; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #E02626; color: transparent; margin-bottom: -4px; } .hpt-project-count-1-item .title span { display: inline-block; line-height: 1; margin-top: -2px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-project-count-1-item .title { font-size: 60px; margin-bottom: -10px; } } @media (max-width: 767px) { .hpt-project-count-1-item .title { font-size: 60px; margin-bottom: 0; } } .hpt-project-count-1-item .text { display: block; font-size: 18px; font-weight: 400; color: #131928; line-height: 1; text-transform: capitalize; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-project-count-1-item .text { font-size: 20px; } } .htp-project-count-2-wrap .hpt-project-count-1-wrap { background: var(--home-9-gd-color); } .htp-project-count-2-wrap .hpt-project-count-1-item .title { -webkit-text-stroke-color: #fff; } .htp-project-count-2-wrap .hpt-project-count-1-item .text { color: #fff; } /*---------------------------------------------------- */ /*Testumonial area*/ /*----------------------------------------------------*/ .hap-testimonial-section:before, .hap-testimonial-section:after { left: 0; top: -70px; z-index: -1; content: ""; width: 105%; height: 110px; z-index: 1; position: absolute; background-color: #fff; -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } .hap-testimonial-section:after { top: auto; bottom: -70px; } .hap-testimonial-item { overflow: hidden; } .hap-testimonial-item .testimoial-img { z-index: 2; width: 168px; height: 168px; margin-right: 15px; } .hap-testimonial-item .testimoial-img:before { top: 50%; width: 0px; content: ""; height: 2px; right: -42px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: var(--hap-gradient-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hap-testimonial-item .testimoial-img:after { left: 3px; top: 0px; width: 97%; z-index: -1; opacity: 0; content: ""; height: 109%; position: absolute; visibility: visible; border-radius: 400px; background: var(--hap-gradient-color); -webkit-transition: all 800ms ease; transition: all 800ms ease; } .hap-testimonial-item .testimoial-img img { border-radius: 100%; } .hap-testimonial-item .testimoial-text-author { z-index: 1; max-width: 810px; padding: 80px 125px; border-radius: 400px; } .hap-testimonial-item .testimoial-text-author:before, .hap-testimonial-item .testimoial-text-author:after { top: 0; left: 0; z-index: -1; width: 100%; content: ""; height: 100%; position: absolute; border-radius: 400px; background: var(--hap-gradient-color); } .hap-testimonial-item .testimoial-text-author:after { background-color: #fff; -webkit-box-shadow: 0px 9px 68px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 9px 68px 0px rgba(0, 0, 0, 0.06); -webkit-transition: all 700ms ease; transition: all 700ms ease; } .hap-testimonial-item .testimoial-text-author .testimonial-desc { color: #0d0d0d; font-size: 24px; margin-bottom: 28px; } .hap-testimonial-item .testimoial-text-author .testimonial-author h3 { font-size: 20px; font-weight: 700; padding-bottom: 5px; color: var(--hap-base-color); } .hap-testimonial-slider { margin: 0 auto; max-width: 995px; } .hap-testimonial-slider .swiper-slide-active .hap-testimonial-item .testimoial-img:before { width: 65px; -webkit-transition-delay: 1s; transition-delay: 1s; } .hap-testimonial-slider .swiper-slide-active .hap-testimonial-item .testimoial-img:after { top: -7px; opacity: 1; visibility: visible; -webkit-transition-delay: 0.7s; transition-delay: 0.7s; } .hap-testimonial-slider .swiper-slide-active .hap-testimonial-item .testimoial-text-author:after { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transform: rotate(-4.5deg); transform: rotate(-4.5deg); } .hap-testimonial-content .hap-testimonial-button-prev { left: 15px; } .hap-testimonial-content .hap-testimonial-button-next { right: 15px; } .hap-testimonial-content .hap-testimonial-button-prev:before, .hap-testimonial-content .hap-testimonial-button-prev:after { left: 10px; } .hap-testimonial-content .hap-testimonial-button-next:before, .hap-testimonial-content .hap-testimonial-button-next:after { right: 10px; } .bi-testimonial-section-2 .background_parallax { padding: 120px 0px; } .bi-testimonial-thumb { top: 90px; z-index: 2; left: -130px; width: 190px; text-align: right; } .bi-testimonial-nav { height: 305px; } .bi-testimonial-nav .bi-testimonial-nav-item { position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-testimonial-nav .bi-testimonial-nav-item img { width: 90px; height: 90px; cursor: pointer; border-radius: 100%; border: 5px solid #fff; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-testimonial-nav .bi-testimonial-nav-item:before { top: 45px; height: 1px; content: ""; width: 0px; right: -70px; position: absolute; -webkit-transition: all 700ms ease; transition: all 700ms ease; background-color: var(--base-color); } .bi-testimonial-nav .swiper-slide-active .bi-testimonial-nav-item { -webkit-transform: translateX(-90px); transform: translateX(-90px); } .bi-testimonial-nav .swiper-slide-active .bi-testimonial-nav-item:before { width: 57px; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .bi-testimonial-nav .swiper-slide-active .bi-testimonial-nav-item img { border: 5px solid var(--base-color); } .bi-testimonial-item-2 .bi-testimonial-img { opacity: 0; width: 493px; height: 493px; overflow: hidden; margin-right: 50px; visibility: hidden; border-radius: 100%; -webkit-transition: all 800ms ease; transition: all 800ms ease; -webkit-transform: scale(0.5); transform: scale(0.5); } .bi-testimonial-item-2 .bi-testimonial-text { max-width: 540px; } .bi-testimonial-item-2 .bi-testimonial-text .testimonial-quote { opacity: 0; visibility: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateX(30px); transform: translateX(30px); } .bi-testimonial-item-2 .bi-testimonial-text .testimonial-desc { opacity: 0; font-size: 21px; font-weight: 400; visibility: hidden; margin: 25px 0px 33px; -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateX(30px); transform: translateX(30px); } .bi-testimonial-item-2 .bi-testimonial-text .testimonial-author h3 { opacity: 0; color: #fff; font-size: 25px; font-weight: 700; visibility: hidden; padding-bottom: 5px; -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateX(30px); transform: translateX(30px); } .bi-testimonial-item-2 .bi-testimonial-text .testimonial-author span { opacity: 0; display: block; font-size: 15px; font-weight: 400; visibility: hidden; color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateX(30px); transform: translateX(30px); } .bi-testimonial-slider-for .swiper-slide-active .bi-testimonial-img { opacity: 1; visibility: visible; -webkit-transform: scale(1); transform: scale(1); } .bi-testimonial-slider-for .swiper-slide-active .bi-testimonial-text .testimonial-quote { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .bi-testimonial-slider-for .swiper-slide-active .bi-testimonial-text .testimonial-desc { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .bi-testimonial-slider-for .swiper-slide-active .bi-testimonial-text .testimonial-author h3 { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .bi-testimonial-slider-for .swiper-slide-active .bi-testimonial-text .testimonial-author span { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); transform: translateX(0px); -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .hap-carousel-arrow-next-prev .hap-slider-arrow { z-index: 1; top: 50%; color: #000000; font-size: 30px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .hap-carousel-arrow-next-prev .hap-slider-arrow:before, .hap-carousel-arrow-next-prev .hap-slider-arrow:after { width: 45px; content: ""; height: 45px; z-index: -1; border-radius: 100%; position: absolute; background-color: #fff; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hap-carousel-arrow-next-prev .hap-slider-arrow:after { -webkit-transform: scale(0); transform: scale(0); background: var(--hap-gradient-color); } .hap-carousel-arrow-next-prev .hap-slider-arrow:hover:after { -webkit-transform: scale(1); transform: scale(1); } .hap-carousel-arrow-next-prev .hap-slider-arrow.hap-team-button-prev:before, .hap-carousel-arrow-next-prev .hap-slider-arrow.hap-team-button-prev:after { left: 10px; } .hap-carousel-arrow-next-prev .hap-slider-arrow.hap-team-button-next:before, .hap-carousel-arrow-next-prev .hap-slider-arrow.hap-team-button-next:after { right: 10px; } .hap-team-slider-content .hap-carousel-arrow-next-prev .hap-team-button-prev { left: -70px; } .hap-team-slider-content .hap-carousel-arrow-next-prev .hap-team-button-next { right: -70px; } .hpt-testimonial-1-slider-wrap { display: flex; } .hpt-testimonial-1-slider-1 { position: relative; width: 100%; } .hpt-testimonial-1-slider-1-content { display: flex; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-testimonial-1-slider-1-content { flex-wrap: wrap; gap: 30px; } } .hpt-testimonial-1-slider-1-content .left { flex: 0 0 auto; width: 50%; padding-right: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-testimonial-1-slider-1-content .left { width: 51%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-testimonial-1-slider-1-content .left { width: 100%; } } @media (max-width: 767px) { .hpt-testimonial-1-slider-1-content .left { width: 100%; padding-right: 0px; } } .hpt-testimonial-1-slider-1-content .left .text { font-size: 30px; line-height: 1.44; font-weight: 400; color: #00071A; letter-spacing: 0.3px; margin-bottom: 60px; } .hpt-testimonial-1-slider-1-content .left .text .qoute-icon { display: inline-block; font-size: 60px; line-height: 1; color: #F0831F; opacity: 0.4; } .hpt-testimonial-1-slider-1-content .left .parson-wrap { display: flex; align-items: center; gap: 20px; } .hpt-testimonial-1-slider-1-content .left .parson-wrap .parson-img { width: 80px; height: 80px; border-radius: 50%; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); padding: 1px; overflow: hidden; flex: 0 0 auto; } .hpt-testimonial-1-slider-1-content .left .parson-wrap .parson-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-testimonial-1-slider-1-content .left .parson-wrap .parson-content .name { font-size: 24px; font-weight: 600; color: #00071A; text-transform: capitalize; font-family: "Recoleta Alt"; line-height: 1.5; } .hpt-testimonial-1-slider-1-content .left .parson-wrap .parson-content .name:hover { color: #E02626; } .hpt-testimonial-1-slider-1-content .left .parson-wrap .parson-content .bio { display: block; font-size: 18px; font-weight: 400; color: #4D515F; line-height: 30px; text-transform: capitalize; } .hpt-testimonial-1-slider-1-content .right { flex: 0 0 auto; width: 50%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-testimonial-1-slider-1-content .right { width: 49%; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-testimonial-1-slider-1-content .right { width: 100%; } } .hpt-testimonial-1-slider-1-content .right .slide-img { width: 0%; height: 441px; overflow: hidden; -webkit-transition: all 1s linear 0s; -moz-transition: all 1s linear 0s; -ms-transition: all 1s linear 0s; -o-transition: all 1s linear 0s; transition: all 1s linear 0s; } .hpt-testimonial-1-slider-1-content .right .slide-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-testimonial-1-slider-2 .line { display: block; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); width: 100%; height: 1px; margin-bottom: 30px; margin-top: 30px; } .hpt-testimonial-1-slider-2 .parson-wrap { display: flex; align-items: center; gap: 20px; } .hpt-testimonial-1-slider-2 .parson-wrap .parson-img { width: 68px; height: 68px; border-radius: 50%; background: transparent; padding: 2px; overflow: hidden; flex: 0 0 auto; } .hpt-testimonial-1-slider-2 .parson-wrap .parson-img .parson-img-bg { padding: 2px; background: #fff; border-radius: 50%; } .hpt-testimonial-1-slider-2 .parson-wrap .parson-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-testimonial-1-slider-2 .parson-wrap .parson-content .name { font-size: 20px; font-weight: 600; color: #00071A; text-transform: capitalize; font-family: "Recoleta Alt"; line-height: 1.5; margin-bottom: -5px; } .hpt-testimonial-1-slider-2 .parson-wrap .parson-content .bio { display: block; font-size: 16px; font-weight: 400; color: #4D515F; line-height: 30px; text-transform: capitalize; } .hpt-testimonial-1-sider-btn-wrap { display: inline-flex; flex-direction: column; position: absolute; left: 47.5%; bottom: 0; z-index: 1; transform: translateX(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-testimonial-1-sider-btn-wrap { left: 0; transform: translateX(0%); background-color: #fff; } } .hpt-testimonial-1-sider-btn-wrap .right-btn, .hpt-testimonial-1-sider-btn-wrap .left-btn { border: 1px solid rgba(0, 7, 26, 0.04); background: rgba(0, 7, 26, 0.04); display: inline-block; width: 62px; height: 62px; line-height: 56px; text-align: center; position: relative; } .hpt-testimonial-1-sider-btn-wrap .right-btn::after, .hpt-testimonial-1-sider-btn-wrap .left-btn::after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); transform: scale(0); -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; z-index: -1; } .hpt-testimonial-1-sider-btn-wrap .right-btn:hover svg *, .hpt-testimonial-1-sider-btn-wrap .left-btn:hover svg * { fill: #fff; } .hpt-testimonial-1-sider-btn-wrap .right-btn:hover::after, .hpt-testimonial-1-sider-btn-wrap .left-btn:hover::after { transform: scale(1); } .hpt-testimonial-1-slider-2 .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-thumb-active) .parson-wrap .parson-img { background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); } .hpt-testimonial-1-slider-1 .swiper-container .swiper-wrapper .swiper-slide:is(.swiper-slide-active) .hpt-testimonial-1-slider-1-content .right .slide-img { width: 100%; } .hpt-testimonial-section-4 { background-color: #00071A; padding-top: 535px; margin-top: -430px; } .hpt-testimonial-section-4 .hpt-section-title-4 { margin: 0 auto; max-width: 650px; } .hpt-testimonial-slider-4 { overflow: hidden; } .hpt-testimonial-slider-4 .testimonial-desc-rate { position: relative; } .hpt-testimonial-slider-4 .testimonial-desc-rate .quote-icon-1 { position: absolute; left: 0; top: -45px; opacity: 0.2; } .hpt-testimonial-slider-4 .testimonial-desc-rate .quote-icon-2 { position: absolute; right: 0; bottom: 10px; opacity: 0.2; } .hpt-testimonial-slider-nav-4 .testimonial_nav { width: 200px; z-index: 1; height: 200px; margin: 0 auto; overflow: hidden; border-radius: 100%; border: 10px solid #313249; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hpt-testimonial-slider-nav-4 .testimonial_nav img { width: 180px; height: 180px; margin: 0 auto; border-radius: 100%; object-fit: cover; filter: grayscale(100%); } .hpt-testimonial-slider-nav-4 .testimonial_nav:before { top: 0; left: 0; z-index: -1; width: 100%; height: 100%; content: ""; position: absolute; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: all 500ms ease; transition: all 500ms ease; background: linear-gradient(135deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); } .hpt-testimonial-slider-nav-4 .swiper-slide-prev .testimonial_nav, .hpt-testimonial-slider-nav-4 .swiper-slide-next .testimonial_nav { -webkit-transform: scale(0.7); transform: scale(0.7); } .hpt-testimonial-slider-nav-4 .swiper-slide-active .testimonial_nav { -webkit-transform: scale(1); transform: scale(1); border: 10px solid #f14a65; } .hpt-testimonial-slider-nav-4 .swiper-slide-active .testimonial_nav img { filter: grayscale(0%); } .hpt-testimonial-slider-nav-4 .swiper-slide-active .testimonial_nav:before { -webkit-transform: scale(1); transform: scale(1); } .hpt-testimonial-slider-nav-4 .testimonial-prev_4, .hpt-testimonial-slider-nav-4 .testimonial-next_4 { left: 0; top: 50%; z-index: 2; font-size: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-testimonial-slider-nav-4 .testimonial-prev_4, .hpt-testimonial-slider-nav-4 .testimonial-next_4 { top: 110%; } } @media (max-width: 767px) { .hpt-testimonial-slider-nav-4 .testimonial-prev_4, .hpt-testimonial-slider-nav-4 .testimonial-next_4 { top: 110%; } } .hpt-testimonial-slider-nav-4 .testimonial-prev_4:hover, .hpt-testimonial-slider-nav-4 .testimonial-next_4:hover { background: -webkit-gradient(linear, left top, right top, from(#EB5C18), color-stop(45.72%, #F95055), to(#CA2DB8)); background: linear-gradient(90deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hpt-testimonial-slider-nav-4 .testimonial-next_4 { right: 0; left: auto; } .hpt-testimonial-slider-for-4 { margin-top: 60px; } .hpt-testimonial-item-4 { margin: 0 auto; max-width: 745px; } .hpt-testimonial-item-4 .testimonial-author { margin-bottom: 30px; } .hpt-testimonial-item-4 .testimonial-author h3 { color: #fff; font-size: 32px; font-weight: 600; font-family: "Kanit", sans-serif; margin-bottom: 8px; } .hpt-testimonial-item-4 .testimonial-author span { color: #FF3838; font-weight: 400; line-height: 30px; } .hpt-testimonial-item-4 .testimonial-desc-rate p { z-index: 1; color: #fff; font-weight: 500; font-style: italic; line-height: 1.6; position: relative; } .hpt-testimonial-item-4 .testimonial-desc-rate .testimonial-rate li i { background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /*---------------------------------------------------- */ /*Blog area*/ /*----------------------------------------------------*/ .bi-blog-section-2 { z-index: 1; overflow: hidden; padding: 120px 0px 50px; } .bi-blog-section-2 .bi-side-shape { z-index: -1; } .bi-blog-section-2 .bi-side-shape.shape_1 { right: 0; top: -80%; } .bi-blog-content-2 { padding-top: 50px; } .bi-blog-item-2 { margin: 0 auto; max-width: 370px; margin-bottom: 30px; } .bi-blog-item-2 .blog-img-area { z-index: 1; width: 370px; height: 120px; margin-bottom: 14px; } .bi-blog-item-2 .blog-img-area .blog-img { overflow: hidden; border-radius: 140px; } .bi-blog-item-2 .blog-img-area .blog-img img { -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-blog-item-2 .blog-img-area:before { top: 0; left: 0; z-index: -1; width: 100%; height: 100%; content: ""; position: absolute; border-radius: 140px; background-color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-blog-item-2 .bi-blog-text { padding-left: 35px; } .bi-blog-item-2 .bi-blog-text .blog-meta { margin-bottom: 6px; } .bi-blog-item-2 .bi-blog-text .blog-meta a { font-size: 12px; font-weight: 400; position: relative; margin-right: 20px; color: var(--base-color); } .bi-blog-item-2 .bi-blog-text .blog-meta a:before { top: -2px; right: -18px; content: "x"; font-size: 12px; position: absolute; color: var(--base-color); } .bi-blog-item-2 .bi-blog-text .blog-meta a:last-child { margin-right: 0; } .bi-blog-item-2 .bi-blog-text .blog-meta a:last-child:before { display: none; } .bi-blog-item-2 .bi-blog-text h3 { color: #fff; font-size: 21px; font-weight: 400; line-height: 1.524; } .bi-blog-item-2 .bi-blog-text .read_more { opacity: 0; font-size: 12px; font-weight: 400; visibility: hidden; display: inline-block; color: var(--base-color); -webkit-transform: translateY(10px); transform: translateY(10px); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-blog-item-2 .bi-blog-text .read_more i { margin-left: 5px; } .bi-blog-item-2:hover .blog-img-area:before { -webkit-transform: rotate(3deg); transform: rotate(3deg); } .bi-blog-item-2:hover .blog-img-area .blog-img img { -webkit-transform: scale(1.05); transform: scale(1.05); } .bi-blog-item-2:hover .bi-blog-text .read_more { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } /*---------------------------------------------------- */ /********************* HOME PAGE 3 **************************/ /*Global area*/ /*----------------------------------------------------*/ .home-3 { background-color: #070506; color: rgba(255, 255, 255, 0.7); } .home-3 .container { max-width: 1315px; } /*---------------------------------------------------- */ /*Slider area*/ /*----------------------------------------------------*/ .bi-slider-content-3 { z-index: 1; } .bi-slider-content-3 .slider_shape { z-index: 2; } .bi-slider-content-3 .slider_shape.shape_1 { left: 0; bottom: 0; } .bi-slider-content-3 .slider_shape.shape_2 { left: 30%; bottom: 40px; -webkit-animation: Bins_animation_1 8s infinite linear alternate; animation: Bins_animation_1 8s infinite linear alternate; } .bi-slider-content-3 .slider_shape.shape_3 { left: 16%; bottom: 15%; -webkit-animation: Bins_animation_3 8s infinite linear alternate; animation: Bins_animation_3 8s infinite linear alternate; } .bi-slider-content-3 .slider_shape.shape_4 { left: 50%; top: 195px; -webkit-animation: Bins_animation_2 12s infinite linear alternate; animation: Bins_animation_2 12s infinite linear alternate; } .bi-slider-content-3 .slider_shape.shape_5 { left: 53%; bottom: 20%; } .bi-slider-content-3 .bi-slider-social { top: 50%; right: 50px; z-index: 2; color: #fff; font-family: var(--heading); -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .bi-slider-content-3 .bi-slider-social span { font-size: 14px; font-weight: 600; position: relative; letter-spacing: 5px; padding-bottom: 80px; display: inline-block; text-transform: uppercase; } .bi-slider-content-3 .bi-slider-social span:before { left: 10px; width: 1px; content: ""; bottom: 25px; height: 35px; position: absolute; background-color: #fff; } .bi-slider-content-3 .bi-slider-social a { width: 52px; height: 45px; line-height: 51px; text-align: center; margin-bottom: 10px; display: inline-block; background-size: cover; background-repeat: no-repeat; } .bi-slider-content-3 .bi-slider-social a:last-child { margin-bottom: 0; } .bi-slider-item-3 { z-index: 1; overflow: hidden; padding: 245px 0px 205px; } .bi-slider-item-3 .bi-slider-img3_1 { top: 0; right: 0; z-index: -3; opacity: 0; visibility: hidden; -webkit-transform: translateX(150px); transform: translateX(150px); } .bi-slider-item-3 .bi-slider-img3_2 { right: 0; bottom: 0; z-index: -2; opacity: 0; visibility: hidden; -webkit-transform: translateY(250px); transform: translateY(250px); } .bi-slider-item-3 .bi-slider-text-3 { max-width: 675px; } .bi-slider-item-3 .bi-slider-text-3 .slider-sub-title { color: #fff; font-size: 14px; font-weight: 700; padding: 10px 15px; border-radius: 10px; margin-bottom: 18px; display: inline-block; font-family: var(--heading); border: 1px solid var(--base-color); opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); transform: translateY(40px); } .bi-slider-item-3 .bi-slider-text-3 h1 { color: #fff; font-size: 70px; font-weight: 900; line-height: 100px; text-transform: uppercase; opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); transform: translateY(40px); } .bi-slider-item-3 .bi-slider-text-3 h1 span { display: block; font-size: 117px; background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, rgb(255, 56, 56)), to(rgba(255, 255, 255, 0.2))); background: linear-gradient(180deg, rgb(255, 56, 56) 30%, rgba(255, 255, 255, 0.2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bi-slider-item-3 .bi-slider-text-3 .slider-img-desc { margin-top: 30px; margin-bottom: 60px; opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); transform: translateY(40px); } .bi-slider-item-3 .bi-slider-text-3 .slider-img-desc .inner-img { width: 137px; height: 120px; overflow: hidden; margin-right: 25px; border-radius: 17px; } .bi-slider-item-3 .bi-slider-text-3 .slider-img-desc .inner-text { color: #fff; font-size: 19px; font-weight: 400; max-width: 495px; line-height: 30px; } .bi-slider-item-3 .bi-slider-text-3 .slider-btn-grp { opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); transform: translateY(40px); } .bi-slider-item-3 .bi-slider-text-3 .slider-btn-grp .bi-btn-3 { margin-right: 50px; } .bi-slider-item-3 .bi-slider-text-3 .slider-btn-grp .bi-slider-video-play a { color: #fff; font-weight: 500; font-family: var(--heading); } .bi-slider-item-3 .bi-slider-text-3 .slider-btn-grp .bi-slider-video-play a i { font-size: 50px; margin-right: 15px; color: var(--base-color); } .bi-slider-wrapper-3 .swiper-slide-active .bi-slider-item-3 .bi-slider-text-3 .slider-sub-title { opacity: 1; visibility: visible; -webkit-transition: all 1200ms ease; transition: all 1200ms ease; -webkit-transition-delay: 100ms; transition-delay: 100ms; -webkit-transform: translateY(0); transform: translateY(0); } .bi-slider-wrapper-3 .swiper-slide-active .bi-slider-item-3 .bi-slider-text-3 h1 { opacity: 1; visibility: visible; -webkit-transition: all 1200ms ease; transition: all 1200ms ease; -webkit-transition-delay: 500ms; transition-delay: 500ms; -webkit-transform: translateY(0); transform: translateY(0); } .bi-slider-wrapper-3 .swiper-slide-active .bi-slider-item-3 .bi-slider-text-3 .slider-img-desc { opacity: 1; visibility: visible; -webkit-transition: all 800ms ease; transition: all 800ms ease; -webkit-transition-delay: 900ms; transition-delay: 900ms; -webkit-transform: translateX(0); transform: translateX(0); } .bi-slider-wrapper-3 .swiper-slide-active .bi-slider-item-3 .bi-slider-text-3 .slider-btn-grp { opacity: 1; visibility: visible; -webkit-transition: all 800ms ease; transition: all 800ms ease; -webkit-transition-delay: 1200ms; transition-delay: 1200ms; -webkit-transform: translateY(0); transform: translateY(0); } .bi-slider-wrapper-3 .swiper-slide-active .bi-slider-item-3 .bi-slider-img3_1 { opacity: 1; visibility: visible; -webkit-transition: all 1500ms ease; transition: all 1500ms ease; -webkit-transition-delay: 400ms; transition-delay: 400ms; -webkit-transform: translateX(0); transform: translateX(0); } .bi-slider-wrapper-3 .swiper-slide-active .bi-slider-item-3 .bi-slider-img3_2 { opacity: 1; visibility: visible; -webkit-transition: all 1200ms ease; transition: all 1200ms ease; -webkit-transition-delay: 900ms; transition-delay: 900ms; -webkit-transform: translateX(0); transform: translateX(0); } @-webkit-keyframes zoom-in-zoom-out { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes zoom-in-zoom-out { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } .bi-main-arrow-next-prev { top: 50%; left: 25px; z-index: 2; overflow: hidden; padding: 85px 50px; border-radius: 80px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; -webkit-transform: translateY(-50%); transform: translateY(-50%); border: 2px solid var(--base-color); } .bi-main-arrow-next-prev .arrow-bg-zooming { z-index: -1; overflow: hidden; -webkit-animation: zoom-in-zoom-out 15s ease infinite; animation: zoom-in-zoom-out 15s ease infinite; } .bi-main-arrow-next-prev .arrow-bg-zooming:before { top: 0; left: 0; width: 100%; height: 100%; content: ""; position: absolute; background-color: rgba(0, 0, 0, 0.7); } .bi-main-arrow-next-prev .bi-slider-arrow { z-index: 1; position: relative; } .bi-main-arrow-next-prev .bi-slider-arrow i { color: #fff; font-size: 40px; } .bi-main-arrow-next-prev .bi-slider-arrow:before { top: 15px; left: -6px; z-index: -1; content: ""; width: 52px; height: 52px; position: absolute; border-radius: 100%; -webkit-transition: all 500ms ease; transition: all 500ms ease; background-color: rgba(255, 255, 255, 0.2); } .bi-main-arrow-next-prev .bi-slider-arrow.bi-main-button-prev_3:before { top: -25px; } .bi-main-arrow-next-prev .bi-slider-arrow:hover:before { background-color: var(--base-color); } .bi-main-arrow-next-prev .swiper-paginations { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 20px 0px; } .bi-main-arrow-next-prev .swiper-paginations .swiper-pagination-bullet { width: 12px; height: 12px; opacity: 1; margin: 3px 0px; border-radius: 100%; border: 1px solid #fff; -webkit-transition: all 500ms ease; transition: all 500ms ease; background-color: transparent; } .bi-main-arrow-next-prev .swiper-paginations .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--base-color); border: 1px solid var(--base-color); } /*---------------------------------------------------- */ /*What We Offer area*/ /*----------------------------------------------------*/ .bi-why-choose-feature ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-family: var(--heading); } .bi-why-choose-feature ul li { width: 50%; color: #fff; font-size: 26px; font-weight: 600; position: relative; margin-bottom: 22px; padding-left: 50px; position: relative; } .bi-why-choose-feature ul li:before { left: 0; top: 5px; width: 34px; content: ""; height: 34px; position: absolute; background-repeat: no-repeat; } .bi-what-we-offer-section { z-index: 1; overflow: hidden; padding: 165px 0px 130px; } .bi-what-we-offer-section .bi-shape-anim { z-index: -1; } .active-anim-1 .bi-shape-anim.anim_1 { -webkit-animation: Bins_animation_1 8s infinite linear alternate; animation: Bins_animation_1 8s infinite linear alternate; } .active-anim-1 .bi-shape-anim.anim_2 { -webkit-animation: Bins_animation_3 8s infinite linear alternate; animation: Bins_animation_3 8s infinite linear alternate; } .bi-what-we-offer-section .bi-shape-anim.anim_3 { left: -100px; bottom: 100px; } .bi-what-we-offer-section .bi-shape-anim.anim_4 { top: 50%; right: 50px; } .bi-what-we-offer-top-content { padding-bottom: 55px; border-bottom: 1px solid #312f30; } .bi-what-we-offer-top-content .bi-section-title-3 { max-width: 745px; } .bi-what-we-offer-top-content .bi-btn-3 { margin: 20px 0px; } .bi-what-we-offer-item { padding: 30px 0px; border-bottom: 1px solid #312f30; } .bi-what-we-offer-item .bi-what-we-offer-img-title { max-width: 500px; } .bi-what-we-offer-item .bi-what-we-offer-img-title .offer-img { width: 162px; height: 162px; overflow: hidden; margin-right: 40px; border-radius: 100%; -webkit-transition: all 500ms ease; transition: all 500ms ease; border: 3px solid transparent; } .bi-what-we-offer-item .bi-what-we-offer-img-title .offer-img img { -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-what-we-offer-item .bi-what-we-offer-img-title .offer-title { max-width: 295px; } .bi-what-we-offer-item .bi-what-we-offer-img-title .offer-title h3 { color: #fff; font-size: 32px; font-weight: 700; line-height: 46px; } .bi-what-we-offer-item .bi-what-we-offer-img-title .offer-title h3 a { width: 100%; display: inline !important; background-position-y: -1px; background-repeat: no-repeat; background-size: 0 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px); -webkit-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } .bi-what-we-offer-item .bi-what-we-offer-desc { max-width: 470px; -webkit-transition: all 500ms ease; transition: all 500ms ease; color: rgba(255, 255, 255, 0.7); } .bi-what-we-offer-item .offer-btn a { color: #fff; font-weight: 700; padding: 14px 30px; border-radius: 5px; display: inline-block; font-family: var(--heading); border: 1px solid var(--base-color); } .bi-what-we-offer-item .offer-btn a:hover { color: #fff; background-color: var(--base-color); } .bi-what-we-offer-item:hover .bi-what-we-offer-img-title .offer-img { border: 3px solid var(--base-color); } .bi-what-we-offer-item:hover .bi-what-we-offer-img-title .offer-img img { -webkit-transform: scale(1.04); transform: scale(1.04); } .bi-what-we-offer-item:hover .bi-what-we-offer-img-title .offer-title h3 a { color: var(--base-color); background-size: 100% 100%; } .bi-what-we-offer-item:hover .bi-what-we-offer-desc { color: rgb(255, 255, 255); } .hpt-offer-1-item-wrap { display: grid; grid-template-columns: auto auto auto auto auto; grid-gap: 20px 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-offer-1-item-wrap { display: flex; flex-wrap: wrap; gap: 20px; } } .hpt-offer-1-item-single { position: relative; overflow: hidden; } .hpt-offer-1-item-single-normal { height: 571px; width: 162px; background-color: rgba(0, 7, 26, 0.05); padding-top: 30px; padding-bottom: 20px; transition: all linear 0.5s; } @media (max-width: 767px) { .hpt-offer-1-item-single-normal { width: 135px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-offer-1-item-single-normal { width: 154px; } } .hpt-offer-1-item-single-normal .offer-1-icon { width: 105px; height: 90px; position: relative; margin: auto; margin-bottom: 21px; } .hpt-offer-1-item-single-normal .offer-1-icon .icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .hpt-offer-1-item-single-normal .offer-1-title { font-size: 32px; font-weight: 600; writing-mode: vertical-lr; margin: auto; } .hpt-offer-1-item-single-hover-position { position: absolute; top: 0; left: 0; height: 100%; width: 100%; max-width: 561px; opacity: 0; -webkit-transition: all 0.5s linear 0s; -moz-transition: all 0.5s linear 0s; -ms-transition: all 0.5s linear 0s; -o-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; } .hpt-offer-1-item-single-hover { position: relative; padding: 40px; height: 100%; } @media (max-width: 767px) { .hpt-offer-1-item-single-hover { padding: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-offer-1-item-single-hover { padding: 40px; } } .hpt-offer-1-item-single-hover::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 7, 26, 0.8); } .hpt-offer-1-item-single-hover .offer-1-icon { width: 105px; height: 90px; position: relative; margin-bottom: 30px; z-index: 1; } .hpt-offer-1-item-single-hover .offer-1-icon .icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .hpt-offer-1-item-single-hover .offer-1-title { font-size: 32px; font-weight: 600; color: #fff; position: relative; z-index: 1; line-height: 1.44; text-transform: capitalize; margin-bottom: 25px; opacity: 0; } @media (max-width: 767px) { .hpt-offer-1-item-single-hover .offer-1-title { font-size: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-offer-1-item-single-hover .offer-1-title { font-size: 30px; } } .hpt-offer-1-item-single-hover .offer-1-feature { position: relative; z-index: 1; margin-bottom: 20px; opacity: 0; } .hpt-offer-1-item-single-hover .offer-1-feature li { font-size: 16px; line-height: 1.5; color: #fff; font-weight: 400; } .hpt-offer-1-item-single-hover .offer-1-feature li img { margin-top: -1px; margin-right: 5px; } .hpt-offer-1-item-single-hover .offer-1-feature li:not(:last-child) { margin-bottom: 14px; } .hpt-offer-1-item-single-hover .btn-wrap { position: relative; z-index: 1; text-align: right; opacity: 0; } @media (max-width: 767px) { .hpt-offer-1-item-single-hover .btn-wrap { text-align: left; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-offer-1-item-single-hover .btn-wrap { text-align: right; } } .hpt-offer-1-item-single:is(.active) .hpt-offer-1-item-single-normal { width: 561px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-offer-1-item-single:is(.active) .hpt-offer-1-item-single-normal { width: 505px; } } .hpt-offer-1-item-single:is(.active) .hpt-offer-1-item-single-normal .offer-1-icon { opacity: 0; } .hpt-offer-1-item-single:is(.active) .hpt-offer-1-item-single-normal .offer-1-title { opacity: 0; } .hpt-offer-1-item-single:is(.active) .hpt-offer-1-item-single-hover-position { left: 0; opacity: 1; } .hpt-offer-1-item-single:is(.active) .hpt-offer-1-item-single-hover .offer-1-title { opacity: 1; transition: 0.4s; transition-delay: 0.5s; } .hpt-offer-1-item-single:is(.active) .hpt-offer-1-item-single-hover .offer-1-feature { opacity: 1; transition: 0.4s; transition-delay: 0.5s; } .hpt-offer-1-item-single:is(.active) .hpt-offer-1-item-single-hover .btn-wrap { opacity: 1; transition: 0.4s; transition-delay: 0.5s; } .hpt-choose-2-img-wrap { position: relative; } .hpt-choose-2-img-wrap .img { width: 100%; height: 854px; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-choose-2-img-wrap .img { height: 890px; } } @media (max-width: 767px) { .hpt-choose-2-img-wrap .img { height: 450px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-choose-2-img-wrap .img { height: 600px; } } .hpt-choose-2-img-wrap .img img { width: 100%; height: 100%; object-fit: cover; } .hpt-choose-2-img-wrap .img-content-wrap { position: absolute; top: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 100%; width: 100%; } .hpt-choose-2-img-wrap .img-content-wrap .img-content { display: flex; justify-content: center; align-items: center; padding: 30px; position: relative; background: var(--home-9-gd-color); } .hpt-choose-2-img-wrap .img-content-wrap .img-content h4 { font-size: 44px; line-height: 1.22; color: #fff; margin-bottom: 0; font-family: "Kanit", sans-serif; font-weight: 500; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-choose-2-img-wrap .img-content-wrap .img-content h4 { font-size: 32px; } } @media (max-width: 767px) { .hpt-choose-2-img-wrap .img-content-wrap .img-content h4 { font-size: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-choose-2-img-wrap .img-content-wrap .img-content h4 { font-size: 28px; } } .hpt-choose-2-img-wrap .img-content-wrap .img-content .icon { position: absolute; top: 0; left: 0; } .hpt-choose-2-img-wrap .img-content-wrap .img-content.rb-border { border-right: 1px solid #fff; border-bottom: 1px solid #fff; } .hpt-choose-2-img-wrap .img-content-wrap .animate-div.lt-border { border-top: 1px solid #fff; border-left: 1px solid #fff; } .hpt-choose-2-content { padding-top: 35px; } .hpt-choose-2-feature { border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding-bottom: 50px; } .hpt-choose-2-feature-item { display: flex; align-items: center; gap: 20px; } @media (max-width: 767px) { .hpt-choose-2-feature-item { flex-wrap: wrap; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-choose-2-feature-item { flex-wrap: nowrap; } } .hpt-choose-2-feature-item .icon { flex: 0 0 auto; width: 96px; height: 96px; text-align: center; line-height: 96px; background-color: rgba(182, 11, 11, 0.2); border-radius: 50%; position: relative; } .hpt-choose-2-feature-item .icon::after { position: absolute; content: ""; width: 100%; height: 100%; border-radius: 50%; border: 1px solid #B60B0B; border-style: dashed; left: 0; top: 0; animation: choose-2-f-item 5s infinite; } .hpt-choose-2-feature-item .content { width: 100%; max-width: 515px; } .hpt-choose-2-feature-item .content .title { font-family: "Kanit", sans-serif; font-size: 24px; font-weight: 500; line-height: 1.33; border-bottom: 1px solid #00071A; border-style: dashed; border-top: none; border-left: none; border-right: 0; padding-bottom: 10px; margin-bottom: 10px; } @media (max-width: 767px) { .hpt-choose-2-feature-item .content .title { font-size: 22px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-choose-2-feature-item .content .title { font-size: 24px; } } .hpt-choose-2-feature-item .content .text { font-size: 16px; font-weight: 400; color: #4D515F; line-height: 26px; margin-bottom: 0; max-width: 465px; } .hpt-choose-2-btn-wrap { display: flex; align-items: center; gap: 65px; } @media (max-width: 767px) { .hpt-choose-2-btn-wrap { gap: 40px; flex-wrap: wrap; } } .hpt-choose-2-btn-wrap .hpt-btn-3 { flex: 0 0 auto; } .hpt-choose-2-btn-wrap .call-btn-wrap { display: grid; grid-template-columns: 92px auto; align-items: center; } .hpt-choose-2-btn-wrap .call-btn-wrap .call-us { display: inline-block; color: #00071A; font-size: 16px; line-height: 1; font-weight: 400; } .hpt-choose-2-btn-wrap .call-btn-wrap .number { font-family: "Kanit", sans-serif; font-size: 26px; line-height: 1.15; font-weight: 500; margin-bottom: 0; color: #00071A; } /*---------------------------------------------------- */ /*Why Choose us area*/ /*----------------------------------------------------*/ .bi-why-choose-us-section-4 { padding: 100px 0px; } .bi-why-choose-us-section-4 .container { max-width: 1640px; } .bi-why-choose-us-content { padding-top: 50px; } .bi-why-choose-img1-area { margin: 0 auto; max-width: 720px; } .bi-why-choose-img1-area .why-choose-img2 { top: 0; left: 0; z-index: -1; } .bi-why-choose-img1-area .why-choose-img3 { top: -55px; left: -40px; z-index: -2; } .bi-why-choose-img1-area .why-choose-img4 { top: 0; right: 60px; } .bi-why-choose-img1-area .why-choose-img5 { top: -15px; left: -15px; } .bi-why-choose-textarea { max-width: 650px; } .bi-why-choose-us-area-1 { margin-bottom: 130px; } .bi-why-choose-us-area-2 { margin-bottom: 130px; } .bi-why-choose-us-area-2 .bi-why-choose-textarea { margin: 0 auto; margin-left: 150px; } .bi-why-choose-img2-area { z-index: 1; } .bi-why-choose-img2-area .why-choose-img2_1 { right: 25px; z-index: -1; bottom: -20px; } .bi-why-choose-img2-area .why-choose-img2_2 { top: 0; right: 0; z-index: -2; } .bi-why-choose-img2-area .why-choose-img2_3 { top: -25px; left: 37%; } .bi-why-choose-img3-area { z-index: 1; max-width: 690px; margin: 0 auto; } .bi-why-choose-img3-area .why-choose-img3_2 { left: 0; bottom: 0; z-index: -1; } .bi-why-choose-img3-area .why-choose-img3_3 { top: 0; left: 0; } .bi-why-choose-img3-area .why-choose-img3_4 { top: 0; right: 40px; } .bi-why-choose-img3-area .why-choose-img3_5 { bottom: 0; right: 50px; } .bi-why-choose-img3-area .why-choose-img3_6 { left: 0; bottom: 0; } .bi-why-choose-feature { margin: 30px 0px; } .bi-why-choose-feature ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; font-family: var(--heading); } .bi-why-choose-feature ul li { width: 50%; color: #fff; font-size: 26px; font-weight: 600; position: relative; margin-bottom: 22px; padding-left: 50px; position: relative; } .bi-why-choose-feature ul li:before { left: 0; top: 5px; width: 34px; content: ""; height: 34px; position: absolute; background-repeat: no-repeat; background-image: url(../img/icon/check.png); } .bi-why-choose-skill-area { width: 100%; max-width: 570px; margin: 40px 0px 50px; } .bi-why-choose-skill-area .skill-set-percent { margin-bottom: 32px; } .bi-why-choose-skill-area .skill-set-percent h4 { color: #fff; font-size: 18px; font-weight: 500; padding-bottom: 15px; } .bi-why-choose-skill-area .skill-set-percent .progress { height: 14px; border-radius: 0; position: relative; overflow: visible; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.2); background-color: transparent; } .bi-why-choose-skill-area .skill-set-percent .progress span { right: 0; top: -35px; font-size: 18px; font-weight: 600; position: absolute; font-family: var(--heading); color: var(--base-color); } .bi-why-choose-skill-area .skill-set-percent .progress-bar { width: 0; left: 3px; top: 3px; float: left; height: 6px; position: relative; border-radius: 30px; -webkit-transition: 1s all ease-in-out; transition: 1s all ease-in-out; } .bi-why-choose-skill-area .skill-set-percent:nth-child(1) .progress span { color: var(--base-color); } .bi-why-choose-skill-area .skill-set-percent:nth-child(1) .progress-bar { background-color: var(--base-color); } .bi-why-choose-skill-area .skill-set-percent:nth-child(2) .progress span { color: #30F272; } .bi-why-choose-skill-area .skill-set-percent:nth-child(2) .progress-bar { background-color: #30F272; } .bi-why-choose-skill-area .skill-set-percent:nth-child(3) .progress span { color: #F2C230; } .bi-why-choose-skill-area .skill-set-percent:nth-child(3) .progress-bar { background-color: #F2C230; } .bi-why-choose-textarea .accordion-item { border: none; overflow: hidden; border-radius: 0; position: relative; margin-bottom: 10px; padding: 10px 20px 25px; background-color: transparent; -webkit-transition: all 500ms ease; transition: all 500ms ease; border-bottom: 1px solid #919191; } .bi-why-choose-textarea .accordion-item.faq_bg { background: linear-gradient(97.31deg, rgba(235, 92, 24, 0.11199) 0%, rgba(249, 80, 85, 0.11199) 45.72%, rgba(202, 45, 184, 0.11199) 100%); } .bi-why-choose-textarea .accordion-button { color: #fff; font-size: 23px; font-weight: 700; position: relative; font-family: var(--heading); background-color: transparent; padding: 20px 25px 0px 0px; } .bi-why-choose-textarea .accordion-button span { color: #fff; max-width: 95%; } .bi-why-choose-textarea .accordion-button:focus { border: none; -webkit-box-shadow: none; box-shadow: none; } .bi-why-choose-textarea .accordion-body { padding: 0; color: #BAC1D4; font-size: 15px; line-height: 30px; padding-top: 20px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-why-choose-textarea .accordion-button::after { right: 5px; content: "\f055"; font-weight: 900; position: absolute; border-radius: 100%; background-image: none; color: var(--base-color); font-family: "Font Awesome 5 Pro"; } .bi-why-choose-textarea .accordion-button:not(.collapsed):after { color: var(--base-color); content: "\f056"; } /*---------------------------------------------------- */ /*About area*/ /*----------------------------------------------------*/ .hap-about-section { overflow: hidden; padding: 260px 0px 120px; } .hap-about-img-area { z-index: 1; bottom: 0; left: -125px; } .hap-about-img-area .about-shape1 { top: 50%; left: -30%; z-index: -1; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .hap-about-img-area .about-shape2 { top: 100px; right: 0px; } .hap-about-img-area .about-exp { right: -10px; bottom: -20px; width: 165px; height: 140px; padding: 20px 20px; border-radius: 20px; background: var(--hap-gradient-color); } .hap-about-img-area .about-exp h3 { color: #fff; line-height: 1; font-size: 55px; font-weight: 700; } .hap-about-img-area .about-exp span { color: #fff; font-size: 20px; font-weight: 700; max-width: 103px; line-height: 1.2; display: inline-block; } .hap-about-text-area { max-width: 760px; } .hap-about-text-area .hap-section-title p { max-width: 600px; } .hap-about-feature-area { margin-top: 40px; max-width: 700px; } .hap-about-feature-area:before { top: 36%; content: ""; width: 100%; height: 1px; position: absolute; background-color: #eeeeee; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .hap-about-feature-area:after { top: 0; left: 44%; content: ""; width: 1px; height: 165px; position: absolute; background-color: #eeeeee; } .hap-about-feature-item { width: 50%; margin-bottom: 50px; } .hap-about-feature-item .feature-icon { margin-right: 15px; } .hap-about-feature-item .feature-icon i { color: #000000; font-size: 45px; } .hap-about-feature-item .feature-text h3 { font-size: 20px; font-weight: 700; max-width: 200px; color: var(--title-color); } .bi-about-section-3 { padding: 130px 0px; background-color: #111318; } .bi-about-section-3 .bi-shape-anim.anim_1 { top: 70px; right: 45px; -webkit-animation: Bins_animation_3 8s infinite linear alternate; animation: Bins_animation_3 8s infinite linear alternate; } .bi-about-section-3 .bi-shape-anim.anim_2 { left: 120px; bottom: 180px; } .bi-about-section-3 .bi-shape-anim.anim_3 { right: 200px; bottom: 200px; } .bi-abut-feature-list { margin-top: 30px; border-radius: 10px; padding: 28px 0px 0px; background-color: #1d1f24; font-family: var(--heading); } .bi-abut-feature-list ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bi-abut-feature-list li { width: 50%; color: #fff; font-size: 20px; font-weight: 500; padding: 0px 25px; margin-bottom: 20px; } .bi-abut-feature-list li i { width: 30px; font-size: 30px; margin-right: 15px; color: var(--base-color); } .bi-about-img-3 { z-index: 1; margin-top: 30px; padding-left: 45px; } .bi-about-img-3:before { top: 50%; height: 80%; right: -12px; width: 150px; z-index: -1; content: ""; position: absolute; border-radius: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--base-color); } .bi-about-img-3 .about-img { overflow: hidden; border-radius: 10px; } @-webkit-keyframes border_animation { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } 20% { -webkit-transform: scale(1.05); transform: scale(1.24); opacity: 1; } 100% { -webkit-transform: scale(1.7); transform: scale(1.7); opacity: 0; } } @keyframes border_animation { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } 20% { -webkit-transform: scale(1.05); transform: scale(1.24); opacity: 1; } 100% { -webkit-transform: scale(1.7); transform: scale(1.7); opacity: 0; } } .bi-about-video-play-area { margin-top: 40px; } .bi-about-video-play-area .bi-about-exp-area { left: 49%; z-index: 1; top: -125px; width: 210px; height: 208px; padding-top: 25px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .bi-about-video-play-area .bi-about-exp-area h3 { color: #fff; font-size: 70px; font-weight: 900; line-height: 120%; } .bi-about-video-play-area .bi-about-exp-area span { color: #fff; font-size: 20px; font-weight: 600; line-height: 30px; font-family: var(--heading); } .bi-about-video-play-area .video-play-btn { left: 0; top: 50%; right: 0; width: 90px; height: 90px; margin: 0 auto; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .bi-about-video-play-area .video-play-btn .video_btn_border { top: 0; left: 0; opacity: 0; width: 100%; height: 100%; border-radius: 100%; position: absolute; -webkit-animation-play-state: running; animation-play-state: running; border: 20px solid rgba(255, 255, 255, 0.7); -webkit-animation: border_animation 3.9s linear 0s infinite; animation: border_animation 3.9s linear 0s infinite; } .bi-about-video-play-area .video-play-btn .video_btn_border.border_wrap-2 { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .bi-about-video-play-area .video-play-btn .video_btn_border.border_wrap-3 { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; } .bi-about-video-play-area .video-play-btn a { z-index: 2; color: #fff; width: 90px; height: 90px; font-size: 30px; position: relative; border-radius: 100%; background-color: var(--base-color); } .bi-about-video-play { overflow: hidden; border-radius: 10px; } .bi-about-video-play:before { top: 0; left: 0; width: 100%; height: 100%; content: ""; position: absolute; background: linear-gradient(206deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 56, 56, 0.34) 100%); } .bi-about-text-quote-area { padding-top: 150px; padding-left: 25px; } .bi-about-text-quote-area p { color: #fff; font-size: 25px; font-weight: 600; line-height: 40px; font-family: var(--heading); padding-bottom: 40px; } .bi-about-text-quote-area .quote-author { margin-bottom: 50px; } .bi-about-text-quote-area .quote-author h3 { font-size: 28px; font-weight: 600; color: var(--base-color); padding-bottom: 15px; } .bi-about-text-quote-area .quote-author span { font-weight: 600px; } /*---------------------------------------------------- */ /*Team area*/ /*----------------------------------------------------*/ .hap-team-section:before, .hap-team-section:after { left: 0; top: -70px; z-index: -1; content: ""; width: 105%; height: 110px; z-index: 1; position: absolute; background-color: #fff; -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } .hap-team-section:after { top: auto; height: 30%; bottom: -70px; } .hap-team-slider-content { margin-top: 30px; z-index: 11; } .hap-team-item { margin: 0 auto; max-width: 400px; } .hap-team-item .team-img { z-index: 1; overflow: hidden; border-bottom-left-radius: 180px; border-bottom-right-radius: 180px; } .hap-team-item .team-img:before { bottom: 0; left: 0; z-index: -1; content: ""; width: 100%; height: 495px; position: absolute; background-color: #fff; border-top-left-radius: 180px; border-top-right-radius: 180px; border: 2px solid transparent; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hap-team-item .team-text { left: 0; right: 0; bottom: 55px; margin: 0 auto; } .hap-team-item .team-text h3 a { opacity: 0; z-index: 2; color: #fff; font-size: 20px; font-weight: 700; position: relative; padding: 18px 23px; visibility: hidden; display: inline-block; border-radius: 30px; background: var(--hap-gradient-color); -webkit-transform: translateY(-10px); transform: translateY(-10px); } .hap-team-item .team-text span { opacity: 0; z-index: 1; color: #000000; font-size: 14px; margin-top: -5px; padding: 14px 18px; position: relative; visibility: hidden; display: inline-block; background-color: #fff; border-radius: 30px; -webkit-transform: translateY(10px); transform: translateY(10px); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hap-team-item:hover .team-img:before { border: 2px solid var(--hap-base-color); } .hap-team-item:hover .team-text h3 a { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } .hap-team-item:hover .team-text span { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); } .hap-carousel-arrow-next-prev .hap-slider-arrow { z-index: 1; top: 50%; color: #000000; font-size: 30px; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .hap-carousel-arrow-next-prev .hap-slider-arrow:before, .hap-carousel-arrow-next-prev .hap-slider-arrow:after { width: 45px; content: ""; height: 45px; z-index: -1; border-radius: 100%; position: absolute; background-color: #fff; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .hap-carousel-arrow-next-prev .hap-slider-arrow:after { -webkit-transform: scale(0); transform: scale(0); background: var(--hap-gradient-color); } .hap-carousel-arrow-next-prev .hap-slider-arrow:hover:after { -webkit-transform: scale(1); transform: scale(1); } .hap-carousel-arrow-next-prev .hap-slider-arrow.hap-team-button-prev:before, .hap-carousel-arrow-next-prev .hap-slider-arrow.hap-team-button-prev:after { left: 10px; } .hap-carousel-arrow-next-prev .hap-slider-arrow.hap-team-button-next:before, .hap-carousel-arrow-next-prev .hap-slider-arrow.hap-team-button-next:after { right: 10px; } .hap-team-slider-content .hap-carousel-arrow-next-prev .hap-team-button-prev { left: -70px; } .hap-team-slider-content .hap-carousel-arrow-next-prev .hap-team-button-next { right: -70px; } .bi-team-section-3 { overflow: hidden; padding: 130px 0px; } .bi-team-section-3 .bi-shape-anim.anim_1 { top: 0; right: -50px; -webkit-animation: Bins_animation_2 8s infinite linear alternate; animation: Bins_animation_2 8s infinite linear alternate; } .bi-team-section-3 .bi-shape-anim.anim_2 { left: 0; bottom: -100px; -webkit-animation: Bins_animation_1 8s infinite linear alternate; animation: Bins_animation_1 8s infinite linear alternate; } .bi-team-item-3 { max-width: 410px; border-radius: 5px; padding: 50px 40px 40px; -webkit-transition: all 500ms ease; transition: all 500ms ease; border: 1px solid transparent; background: rgba(17, 19, 24, 0.5); } .bi-team-item-3 .bi-team-img-social { margin-bottom: 45px; } .bi-team-item-3 .bi-team-img-social img { width: 308px; height: 308px; overflow: hidden; border-radius: 100%; -webkit-transition: all 500ms ease; transition: all 500ms ease; border: 1px solid transparent; -webkit-filter: grayscale(1); filter: grayscale(1); } .bi-team-item-3 .bi-team-img-social .team-social { top: 50%; opacity: 0; right: 30px; visibility: hidden; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-team-item-3 .bi-team-img-social .team-social a { color: #fff; width: 62px; height: 62px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 20px; margin-bottom: 15px; border-radius: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: var(--base-color); } .bi-team-item-3 .bi-team-img-social .team-social a:last-child { margin-bottom: 0; } .bi-team-item-3 .bi-team-img-social .team-social a:nth-child(1) { -webkit-transform: translateX(-10px) translateY(-15px); transform: translateX(-10px) translateY(-15px); } .bi-team-item-3 .bi-team-img-social .team-social a:nth-child(2) { -webkit-transform: translateX(20px) translateY(-10px); transform: translateX(20px) translateY(-10px); } .bi-team-item-3 .bi-team-img-social .team-social a:nth-child(3) { -webkit-transform: translateX(-5px) translateY(0px); transform: translateX(-5px) translateY(0px); } .bi-team-item-3 .bi-team-text h3 { color: #fff; font-size: 30px; font-weight: 600; padding-bottom: 12px; } .bi-team-item-3 .bi-team-text span { font-weight: 500; color: var(--base-color); font-family: var(--heading); } .bi-team-item-3:hover { border: 1px solid var(--base-color); } .bi-team-item-3:hover .bi-team-img-social img { border: 1px solid var(--base-color); -webkit-filter: grayscale(0); filter: grayscale(0); } .bi-team-item-3:hover .bi-team-img-social .team-social { right: 0; opacity: 1; visibility: visible; } .bi-team-slider-content-3 { margin: 0 auto; padding-top: 55px; max-width: 1920px; } .bi-team-slider-content-3 .bi-team-slider-3 { margin: 0 -135px 0 0; max-width: 1735px; } .bi-team-pagination-carousel { margin-top: 50px; } .bi-team-pagination-carousel .bi-team-carousel { margin-left: 20px; } .bi-team-pagination-carousel .bi-slider-arrow { width: 52px; color: var(--base-color); height: 52px; font-size: 25px; margin-left: 15px; border-radius: 100%; border: 2px solid var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-team-pagination-carousel .bi-slider-arrow:hover { color: #fff; background-color: var(--base-color); } .bi-team-pagination-carousel .swiper-team-paginations { width: 100%; height: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 1px solid #1d1c1c; } .bi-team-pagination-carousel .swiper-team-paginations .swiper-pagination-bullet { width: 50%; height: 4px; border-radius: 0; margin-top: -3px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-team-pagination-carousel .swiper-team-paginations .swiper-pagination-bullet-active { background-color: var(--base-color); } /*---------------------------------------------------- */ /*Pricing area*/ /*----------------------------------------------------*/ .bi-pricing-section-3 { overflow: hidden; padding: 120px 0px 90px; } .bi-pricing-section-3 .bi-shape-anim.anim_1 { top: 100px; right: 100px; -webkit-animation: Bins_animation_2 8s infinite linear alternate; animation: Bins_animation_2 8s infinite linear alternate; } .bi-pricing-section-3 .bi-shape-anim.anim_2 { top: 50%; left: 50px; } .bi-pricing-section-3 .bi-shape-anim.anim_3 { bottom: 100px; right: -150px; } .bi-price-top-content .bi-section-title-3 { max-width: 420px; } .bi-price-top-content .bi-section-top-text { max-width: 550px; margin: 30px 0px 20px; } .bi-pricing-content-3 { padding-top: 50px; } .bi-pricing-item-area-3 { z-index: 1; padding-bottom: 15px; } .bi-pricing-item-area-3:before { bottom: 0; right: 0; width: 80%; z-index: -1; height: 50%; content: ""; position: absolute; border-radius: 25px; background-color: var(--base-color); } .bi-pricing-item-area-3 .bi-pricing-item-3 { margin: 0 auto; max-width: 388px; padding: 30px 30px 40px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; } .bi-pricing-item-area-3 .bi-pricing-item-3:before { top: 0; left: 0; content: ""; width: 0; height: 0; position: absolute; border-top: 39px solid var(--base-color); border-right: 39px solid transparent; } .bi-pricing-item-area-3 .bi-pricing-item-3 .plan-title { color: #fff; font-size: 24px; font-weight: 700; font-family: var(--heading); margin-bottom: 30px; } .bi-pricing-item-area-3 .bi-pricing-item-3 .plan-price { padding: 36px 40px; border-radius: 100px; margin-bottom: 45px; background-color: #e63333; border: 10px solid var(--base-color); } .bi-pricing-item-area-3 .bi-pricing-item-3 .plan-price h3 { color: #fff; font-size: 26px; font-weight: 700; } .bi-pricing-item-area-3 .bi-pricing-item-3 .plan-price h3 sub { bottom: 0; font-size: 20px; } .bi-pricing-item-area-3 .bi-pricing-item-3 .plan-price h3 span { font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, 0.8); } .bi-pricing-item-area-3 .bi-pricing-item-3 .plan-list li { color: #fff; font-size: 16px; line-height: 26px; position: relative; padding: 16px 0px 18px; } .bi-pricing-item-area-3 .bi-pricing-item-3 .plan-list li:before { left: 0; bottom: 0; content: ""; width: 100%; height: 1.112px; position: absolute; opacity: 0.5; background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(22, 35, 43, 0) 100%); } .bi-pricing-item-area-3 .bi-pricing-item-3 .price-btn { margin-top: 38px; } .bi-pricing-item-area-3 .bi-pricing-item-3 .price-btn a { color: #fff; border-radius: 5px; padding: 14px 40px; font-weight: 600; display: inline-block; font-family: var(--heading); border: 1px solid var(--base-color); } .bi-pricing-item-area-3 .bi-pricing-item-3 .price-btn a:hover { background-color: var(--base-color); } .pricing-page-content .bi-pricing-item-area-3:before { right: -10px; } .pricing-page-content .bi-section-title-1 { max-width: 500px; } /*---------------------------------------------------- */ /*Testimonial area*/ /*----------------------------------------------------*/ .bi-testimonial-section-3 { overflow: hidden; padding: 130px 0px; } .bi-testimonial-section-3 .bi-section-title-3 { margin: 0 auto; max-width: 710px; } .bi-testimonial-section-3 .bi-shape-anim.anim_1 { top: 150px; left: -50px; -webkit-animation: Bins_animation_1 8s infinite linear alternate; animation: Bins_animation_1 8s infinite linear alternate; } .bi-testimonial-item-3 { width: 100%; overflow: hidden; max-width: 625px; padding: 45px 40px; border-radius: 10px; background-color: rgb(17, 19, 24); } .bi-testimonial-item-3 .quote-icon { top: 35px; right: 35px; } .bi-testimonial-item-3 .testimonial-img { bottom: -75px; right: -45px; width: 250px; height: 250px; overflow: hidden; border-radius: 100%; border: 2px solid var(--base-color); } .bi-testimonial-item-3 .testimonial-text { color: #fff; font-size: 24px; font-weight: 600; max-width: 415px; line-height: 40px; padding-bottom: 40px; font-family: var(--heading); } .bi-testimonial-item-3 .testimonial-author h3 { font-size: 24px; font-weight: 600; padding-bottom: 10px; color: var(--base-color); } .bi-testimonial-item-3 .testimonial-author span { font-weight: 600; } .bi-testimonial-content-3 { margin: 0 auto; padding-top: 55px; max-width: 1920px; } .bi-testimonial-content-3 .testimonial-circle { top: -55px; right: -80px; width: 665px; height: 665px; border-radius: 100%; border: 65px solid var(--base-color); } .bi-testimonial-content-3 .bi-testimonial-slider-3 { margin: 0 -330px 0 0; max-width: 1920px; } .bins-dot-carousel { margin-top: 70px; } .bins-dot-carousel .swiper-pagination-bullet { width: 20px; opacity: 1; height: 20px; margin: 0px 14px; position: relative; border-radius: 100%; background-color: #390f10; } .bins-dot-carousel .swiper-pagination-bullet:before { top: -8px; left: -9px; width: 37px; content: ""; height: 37px; position: absolute; -webkit-transform: scale(0); transform: scale(0); border-radius: 100%; -webkit-transition: all 500ms ease; transition: all 500ms ease; border: 2px solid var(--base-color); } .bins-dot-carousel .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--base-color); } .bins-dot-carousel .swiper-pagination-bullet.swiper-pagination-bullet-active:before { -webkit-transform: scale(1); transform: scale(1); } /*---------------------------------------------------- */ /*Portfolio area*/ /*----------------------------------------------------*/ .bi-portfolio-section-3 { z-index: 2; margin: 0 auto; max-width: 1920px; } .bi-portfolio-filter-btn li { color: #fff; cursor: pointer; font-weight: 600; margin-left: 5px; padding: 15px 25px; border-radius: 5px; background: #111318; text-transform: uppercase; font-family: var(--heading); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-portfolio-filter-btn li.filtr-active, .bi-portfolio-filter-btn li:hover { background-color: var(--base-color); } .bi-portfolio-item-3 { width: 33.33%; } .bi-portfolio-feed-item-wrapper { margin: 50px 0px; } .bi-portfolio-img-text-3 { z-index: 1; overflow: hidden; } .bi-portfolio-img-text-3:before { left: 0; top: 150px; z-index: 1; width: 100%; content: ""; opacity: 0; height: 100%; visibility: hidden; position: absolute; -webkit-transition: all 500ms ease; transition: all 500ms ease; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 56, 56, 0.8))); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 56, 56, 0.8) 100%); } .bi-portfolio-img-text-3 .portfolio-img img { -webkit-filter: grayscale(1); filter: grayscale(1); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-portfolio-img-text-3 .porfolio-icon { left: 0; top: 35%; right: 0; z-index: 2; opacity: 0; width: 100px; color: #fff; height: 100px; margin: 0 auto; font-size: 30px; visibility: hidden; border-radius: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; background-color: var(--base-color); } .bi-portfolio-img-text-3 .portfolio-text { left: 0; z-index: 2; opacity: 0; width: 100%; bottom: -100px; padding: 30px; visibility: hidden; background: #070506; -webkit-transition: all 500ms ease; transition: all 500ms ease; border-bottom: 2px solid var(--base-color); } .bi-portfolio-img-text-3 .portfolio-text span { opacity: 0; visibility: hidden; font-weight: 500; margin-bottom: 12px; display: inline-block; color: var(--base-color); -webkit-transition: all 700ms ease; transition: all 700ms ease; -webkit-transform: translateX(30px); transform: translateX(30px); } .bi-portfolio-img-text-3 .portfolio-text h3 { opacity: 0; visibility: hidden; color: #fff; font-size: 30px; font-weight: 700; -webkit-transition: all 700ms ease; transition: all 700ms ease; -webkit-transform: translateX(30px); transform: translateX(30px); } .bi-portfolio-img-text-3 .portfolio-text .more_btn { top: 50%; opacity: 0; width: 62px; height: 62px; right: -60px; font-size: 26px; visibility: hidden; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 700ms ease; transition: all 700ms ease; background-color: var(--base-color); } .bi-portfolio-img-text-3 .portfolio-text .more_btn i { color: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .bi-portfolio-img-text-3:hover:before { top: 0; opacity: 1; visibility: visible; } .bi-portfolio-img-text-3:hover .portfolio-img img { -webkit-filter: grayscale(0); filter: grayscale(0); } .bi-portfolio-img-text-3:hover .porfolio-icon { top: 40%; opacity: 1; visibility: visible; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .bi-portfolio-img-text-3:hover .portfolio-text { bottom: 0; opacity: 1; visibility: visible; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .bi-portfolio-img-text-3:hover .portfolio-text span { opacity: 1; visibility: visible; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transform: translateX(0px); transform: translateX(0px); } .bi-portfolio-img-text-3:hover .portfolio-text h3 { opacity: 1; visibility: visible; -webkit-transition-delay: 0.7s; transition-delay: 0.7s; -webkit-transform: translateX(0px); transform: translateX(0px); } .bi-portfolio-img-text-3:hover .portfolio-text .more_btn { right: 0; opacity: 1; visibility: visible; -webkit-transition-delay: 0.8s; transition-delay: 0.8s; } .bi-portfolio-section-4 { overflow: hidden; } .bi-portfolio-section-4 .bi-title-waterprint { margin-bottom: -50px; } .bi-portfolio-section-4 .bi-section-title-4 { margin: 0 auto; max-width: 770px; } .bi-portfolio-section-4 .container { max-width: 1330px; } .bi-portfolio-content-4 { padding-top: 70px; } .bi-portfolio-item-4 { max-width: 610px; margin-bottom: 70px; } .bi-portfolio-item-4 .portfolio-img-4 { overflow: hidden; border-radius: 20px; margin-bottom: 30px; -webkit-box-shadow: 0px 4px 27px 0px rgba(0, 0, 0, 0.65) inset; box-shadow: 0px 4px 27px 0px rgba(0, 0, 0, 0.65) inset; } .bi-portfolio-item-4 .portfolio-text h3 { color: #fff; font-size: 38px; font-weight: 700; padding-bottom: 20px; } .bi-portfolio-item-4 .portfolio-text h3:hover { color: var(--base-color); } .bi-portfolio-item-4 .portfolio-text .portfolio-category a { font-size: 16px; border-radius: 50px; display: inline-block; padding: 8px 25px; background: rgba(255, 255, 255, 0.08); -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.26) inset; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.26) inset; } .bi-portfolio-item-4 .portfolio-text .portfolio-category a:hover { color: #fff; background-color: var(--base-color); } .bi-portfolio-item-wrapper-2 { margin-top: 50px; padding-left: 30px; } /*---------------------------------------------------- */ /*Sponsor area*/ /*----------------------------------------------------*/ .bi-sponsor-section-3 { z-index: 1; padding-top: 120px; } .bi-sponsor-section-3 .sponsor-bg { z-index: -1; top: -150px; } .bi-sponsor-slider-3 { padding: 70px 0px; border-top: 1.5px dashed var(--base-color); border-bottom: 1.5px dashed var(--base-color); } .bi-sponsor-slider-3 .slider-img { height: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*---------------------------------------------------- */ /*Blog area*/ /*----------------------------------------------------*/ .bi-blog-item-4 { z-index: 1; margin: 0 auto; max-width: 410px; margin-bottom: 40px; border-radius: 10px; background: #202139; overflow: hidden; border: 1px solid rgba(31, 36, 44, 0.15); -webkit-box-shadow: 0px 0px 19px 0px rgba(255, 255, 255, 0.1) inset; box-shadow: 0px 0px 19px 0px rgba(255, 255, 255, 0.1) inset; } .bi-blog-item-4:before { left: 0; bottom: 0; z-index: -1; width: 100%; content: ""; height: 0%; position: absolute; border-radius: 10px; -webkit-transition: all 800ms ease; transition: all 800ms ease; background: linear-gradient(135deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.65) inset; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.65) inset; } .bi-blog-item-4 .blog-meta { left: 0; top: 20px; font-weight: 500; font-size: 14px; background: #1B1C35; padding: 10px 25px; border-radius: 0px 8px 8px 0px; -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 56, 56, 0.5); box-shadow: 0px 0px 0px 1px rgba(255, 56, 56, 0.5); } .bi-blog-item-4 .blog-meta a { background: -webkit-gradient(linear, left top, right top, from(#EB5C18), color-stop(45.72%, #F95055), to(#CA2DB8)); background: linear-gradient(90deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bi-blog-item-4 .blog-img { overflow: hidden; border-radius: 10px; } .clipac-faq-1-img { clip-path: polygon(18% 0, 100% 0, 100% 84%, 82% 100%, 0 100%, 0 16%); width: 100%; height: 740px; overflow: hidden; } .bi-blog-item-4 .blog-img img { -webkit-transition: all 600ms ease; transition: all 600ms ease; -webkit-filter: grayscale(1); filter: grayscale(1); width: 100%; } .bi-blog-item-4 .blog-text { padding: 30px 30px; border-bottom: 1px solid rgba(0, 7, 26, 0.6); } .bi-blog-item-4 .blog-text h3 { color: #fff; font-size: 26px; font-weight: 700; padding-bottom: 15px; } .bi-blog-item-4 .blog-text h3 a { width: 100%; display: inline !important; background-position-y: -1px; background-repeat: no-repeat; background-size: 0 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px); -webkit-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } .bi-blog-item-4 .blog-text h3 a:hover { color: #fff; background-size: 100% 100%; } .bi-blog-item-4 .blog-text p { font-size: 16px; color: rgba(255, 255, 255, 0.7); } .bi-blog-item-4 .blog-author-more { padding: 15px 30px; } .bi-blog-item-4 .blog-author-more .blog-author .inner-img { width: 40px; height: 40px; overflow: hidden; margin-right: 10px; border-radius: 100%; } .bi-blog-item-4 .blog-author-more .blog-author .inner-text { color: #fff; font-size: 16px; font-weight: 700; font-weight: 600; font-family: var(--heading); } .bi-blog-item-4 .blog-more a { font-size: 16px; font-weight: 500; display: inline-block; background: -webkit-gradient(linear, left top, right top, from(#EB5C18), color-stop(45.72%, #F95055), to(#CA2DB8)); background: linear-gradient(90deg, #EB5C18 0%, #F95055 45.72%, #CA2DB8 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bi-blog-item-4 .blog-more a i { margin-left: 5px; } .bi-blog-item-4:hover:before { height: 100%; } .bi-blog-item-4:hover .blog-img img { -webkit-filter: grayscale(0); filter: grayscale(0); } .bi-blog-item-4:hover .blog-more a { background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(45.72%, #fff), to(#fff)); background: linear-gradient(90deg, #fff 0%, #fff 45.72%, #fff 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .bi-blog-section-3 .bi-shape-anim.anim_1 { left: 100px; bottom: 20%; -webkit-animation: Bins_animation_3 8s infinite linear alternate; animation: Bins_animation_3 8s infinite linear alternate; } .bi-blog-section-3 .bi-shape-anim.anim_2 { top: 80px; right: 30px; -webkit-animation: Bins_animation_3 8s infinite linear alternate; animation: Bins_animation_3 8s infinite linear alternate; } .bi-blog-item-3 { z-index: 1; max-width: 410px; overflow: hidden; border-radius: 5px; padding: 50px 30px 110px; } .bi-blog-item-3:before { top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: -1; position: absolute; -webkit-transition: all 500ms ease; transition: all 500ms ease; background: -webkit-gradient(linear, left bottom, left top, from(rgba(17, 19, 24, 0.96)), to(rgba(17, 19, 24, 0.96))); background: linear-gradient(0deg, rgba(17, 19, 24, 0.96) 0%, rgba(17, 19, 24, 0.96) 100%); } .bi-blog-item-3 .bi-blog-author { margin-bottom: 50px; } .bi-blog-item-3 .bi-blog-author .inner-img { width: 80px; height: 80px; overflow: hidden; margin-right: 20px; border-radius: 100%; -webkit-transition: all 500ms ease; transition: all 500ms ease; border: 1px solid transparent; } .bi-blog-item-3 .bi-blog-author .inner-text span { font-size: 14px; font-weight: 400; padding-bottom: 5px; display: inline-block; color: rgba(255, 255, 255, 0.7); } .bi-blog-item-3 .bi-blog-author .inner-text h3 { color: #fff; font-size: 18px; font-weight: 700; text-transform: uppercase; } .bi-blog-item-3 .bi-blog-text { -webkit-transform: translateY(120px); transform: translateY(120px); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-blog-item-3 .bi-blog-text .blog-meta { font-size: 14px; font-weight: 600; margin-bottom: 20px; color: var(--base-color); font-family: var(--heading); } .bi-blog-item-3 .bi-blog-text .blog-meta i { margin-right: 8px; } .bi-blog-item-3 .bi-blog-text h3 { color: #fff; font-size: 28px; font-weight: 700; line-height: 38px; padding-bottom: 15px; } .bi-blog-item-3 .bi-blog-text h3 a { display: inline !important; background-position-y: -1px; background-repeat: no-repeat; background-size: 0 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px); -webkit-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } .bi-blog-item-3 .bi-blog-text p { opacity: 0; color: #fff; font-size: 16px; font-weight: 400; visibility: hidden; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-blog-item-3 .more_btn { left: 0; bottom: 0; color: #fff; width: 100%; font-size: 14px; font-weight: 600; padding: 20px 30px; font-family: var(--heading); background-color: rgba(255, 56, 56, 0.1); } .bi-blog-item-3 .more_btn i { font-size: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-blog-item-3:hover:before { opacity: 0.7; } .bi-blog-item-3:hover .bi-blog-author .inner-img { border: 1px solid var(--base-color); } .bi-blog-item-3:hover .bi-blog-text { -webkit-transform: translateY(0px); transform: translateY(0px); } .bi-blog-item-3:hover .bi-blog-text h3 a { color: inherit; background-size: 100% 100%; } .bi-blog-item-3:hover .bi-blog-text p { opacity: 1; visibility: visible; } .bi-blog-item-3:hover .more_btn { background-color: var(--base-color); } .bi-blog-item-3:hover .more_btn i { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .bi-blog-slider-3 { margin: 50px 0px; } /* Comments --------------------------------------------- */ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /* Widgets --------------------------------------------- */ .widget { margin: 0 0 1.5em; } .widget select { max-width: 100%; } /* Media --------------------------------------------- */ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure logo link wraps around logo image. */ .custom-logo-link { display: inline-block; } /* Captions --------------------------------------------- */ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /* Galleries --------------------------------------------- */ .gallery { margin-bottom: 1.5em; display: grid; grid-gap: 1.5em; } .gallery-item { display: inline-block; text-align: center; width: 100%; } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); } .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); } .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); } .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); } .gallery-caption { display: block; } /*-------------------------------------------------------------- # Plugins --------------------------------------------------------------*/ /* Jetpack infinite scroll --------------------------------------------- */ /* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { display: none; } /* Re-display the Theme Footer when Infinite Scroll has reached its end. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Utilities --------------------------------------------------------------*/ /* Accessibility --------------------------------------------- */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #primary[tabindex="-1"]:focus { outline: 0; } /* Alignments --------------------------------------------- */ .alignleft { /*rtl:ignore*/ float: left; /*rtl:ignore*/ margin-right: 1.5em; margin-bottom: 1.5em; } .alignright { /*rtl:ignore*/ float: right; /*rtl:ignore*/ margin-left: 1.5em; margin-bottom: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } /*---------------------------------------------------- */ /********************* Inner Pages **************************/ /*Breadcrumb area*/ /*----------------------------------------------------*/ .bi-bredcrumbs-section { z-index: 1; } .bi-bredcrumbs-section .background_overlay { z-index: -1; background: #110A1E; opacity: .7; } .bi-breadcrumbs-content { padding: 300px 0px 150px; } .bi-breadcrumbs-content .page-heading { color: #fff; font-size: 98px; font-weight: 700; padding-bottom: 40px; font-family: var(--heading-3); } .bi-breadcrumbs-content ul { padding: 5px 20px; border-radius: 10px; display: inline-block; font-family: var(--heading); border: 1px solid #fff; } .bi-breadcrumbs-content ul li { font-weight: 700; margin-right: 40px; position: relative; color: #fff; font-family: var(--heading-3) } .bi-breadcrumbs-content ul li a { color: #fff; } .bi-breadcrumbs-content ul li:last-child { margin-right: 0; } .bi-breadcrumbs-content ul li:last-child:before { display: none; } .bi-breadcrumbs-content ul li:before { top: 1px; width: 24px; content: ""; height: 24px; right: -35px; position: absolute; content: "\f101"; font-family: "Font Awesome 5 Pro"; } .breadcrumb-item+.breadcrumb-item::before { content: ""; } /*---------------------------------------------------- */ /*About Page area*/ /*----------------------------------------------------*/ /*---------------------------------------------------- */ /*Service Page area*/ /*----------------------------------------------------*/ .bi-service-feed-content { padding-top: 45px; } .bi-service-feed-item { z-index: 1; overflow: hidden; border-radius: 10px; margin-bottom: 30px; padding: 70px 30px 45px; background: rgba(14, 14, 14, 0.01999); } .bi-service-feed-item:before { width: 0; height: 0; bottom: 0; z-index: -1; left: -50px; content: ""; opacity: 0; visibility: hidden; position: absolute; -webkit-transition: all 500ms ease; transition: all 500ms ease; border-bottom: 300px solid rgba(255, 56, 56, 0.3); border-right: 390px solid transparent; } .bi-service-feed-item .hover_img { top: 0; left: 0; opacity: 0; z-index: -2; width: 100%; height: 100%; visibility: hidden; -webkit-filter: grayscale(1); filter: grayscale(1); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-service-feed-item .hover_img:before { top: 0; left: 0; width: 100%; content: ""; height: 100%; position: absolute; background: -webkit-gradient(linear, left bottom, left top, from(rgba(22, 35, 43, 0.6)), to(rgba(22, 35, 43, 0.6))); background: linear-gradient(0deg, rgba(22, 35, 43, 0.6) 0%, rgba(22, 35, 43, 0.6) 100%); } .bi-service-feed-item .serial-number { top: 10px; right: 20px; color: #16232B; font-size: 70px; font-weight: 700; font-family: var(--heading); opacity: 0.1000000015; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #16232B; } .bi-service-feed-item .service-icon { z-index: 1; margin-bottom: 15px; } .bi-service-feed-item .service-icon:before { z-index: -1; top: -10px; left: -10px; width: 68px; content: ""; height: 68px; position: absolute; border-radius: 100%; opacity: 0.0500000007; background-color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-service-feed-item .service-icon i { font-size: 70px; line-height: 0.75; color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-service-feed-item .service-text h3 { color: #0E0E0E; font-size: 30px; font-weight: 700; padding-bottom: 10px; } .bi-service-feed-item .service-text p { color: #555; font-size: 16px; padding-bottom: 25px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-service-feed-item .service-text .read_more { width: 60px; height: 60px; border-radius: 100%; color: var(--base-color); background-color: rgba(255, 56, 56, 0.05); } .bi-service-feed-item:hover:before { left: 0; opacity: 1; visibility: visible; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .bi-service-feed-item:hover .serial-number { opacity: 0.5; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; } .bi-service-feed-item:hover .service-icon:before { opacity: 1; } .bi-service-feed-item:hover .service-icon i { color: #fff; } .bi-service-feed-item:hover .hover_img { opacity: 1; visibility: visible; } .bi-service-feed-item:hover .service-text h3 { color: #fff; } .bi-service-feed-item:hover .service-text p { color: #fff; } .bi-service-feed-item:hover .read_more { color: #fff; background-color: var(--base-color); } .service-portfolio { background-color: rgba(22, 35, 43, 0.05); } .hpt-service-2-content-wrap { display: grid; grid-template-columns: 326px 1fr 1fr; gap: 53px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-service-2-content-wrap { grid-template-columns: 250px 1fr 1fr; gap: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-service-2-content-wrap { grid-template-columns: 1fr 1.5fr; } } @media (max-width: 767px) { .hpt-service-2-content-wrap { grid-template-columns: 1fr; } } .hpt-service-2-content { padding-top: 35px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-service-2-content { padding-top: 0; grid-column: 1/-1; } } .hpt-service-2-content > .icon { position: relative; width: 78px; height: 78px; display: inline-block; background-color: rgba(182, 11, 11, 0.1); text-align: center; line-height: 78px; border-radius: 50%; } .hpt-service-2-content > .icon::after { position: absolute; content: ""; width: 100%; height: 100%; border-radius: 50%; border: 1px solid #B60B0B; border-style: dashed; left: 0; top: 0; animation: choose-2-f-item 5s infinite; } .hpt-service-2-content .text { font-size: 18px; color: #00071A; opacity: 1; line-height: 1.66; font-weight: 500; } .hpt-service-2-content .service-feature li { font-size: 18px; font-weight: 400; color: #00071A; line-height: 1.33; } .hpt-service-2-content .service-feature li:not(:last-child) { margin-bottom: 10px; } .hpt-service-2-content .service-feature li .icon { display: inline-block; margin-top: -4px; } .hpt-service-2-content .btn-wrap { position: absolute; bottom: 50px; left: -170px; display: inline-block; height: auto; border-radius: 100px; border: 6px solid #fff; height: 72px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-service-2-content .btn-wrap { bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-service-2-content .btn-wrap { position: unset; } } .hpt-service-2-tabs { padding-top: 50px; } @media (max-width: 767px) { .hpt-service-2-tabs { padding-top: 0; } } .hpt-service-2-tabs-menu { display: block; } .hpt-service-2-tabs-menu .nav-link { position: relative; display: block; padding: 0; margin: 0; font-family: "Kanit", sans-serif; font-size: 28px; font-weight: 500; color: #00071A; line-height: 1.33; text-transform: capitalize; padding-bottom: 23px; text-align: left; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-service-2-tabs-menu .nav-link { font-size: 24px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-service-2-tabs-menu .nav-link { font-size: 28px; } } @media (max-width: 767px) { .hpt-service-2-tabs-menu .nav-link { font-size: 22px; width: 100%; } } .hpt-service-2-tabs-menu .nav-link:not(:last-child) { margin-bottom: 15px; } .hpt-service-2-tabs-menu .nav-link .icon { position: absolute; right: 0; top: 40%; transform: translateY(-50%); opacity: 0; } .hpt-service-2-tabs-menu .nav-link::after { position: absolute; content: ""; width: 100%; height: 2px; background-color: #00071A; left: 0; bottom: 0; opacity: 0.1; } .hpt-service-2-tabs-menu .nav-link::before { position: absolute; content: ""; width: 0%; height: 2px; background: var(--home-9-gd-color); left: auto; right: 0; bottom: 0; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-service-2-tabs-menu .nav-link:is(.active) { background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hpt-service-2-tabs-menu .nav-link:is(.active) .icon { opacity: 1; right: -135px; } @media (max-width: 767px) { .hpt-service-2-tabs-menu .nav-link:is(.active) .icon { display: none; } } .hpt-service-2-tabs-menu .nav-link:is(.active)::before { left: 0; right: auto; width: 100%; } .hpt-service-2-tabs-content .tab-pane { height: 585px; width: 100%; overflow: hidden; } .hpt-service-2-tabs-content .tab-pane img { width: 100%; height: 100%; object-fit: cover; } /*---------------------------------------------------- */ /*Service Details Page area*/ /*----------------------------------------------------*/ .bi-service-details-text-area .bi-service-details-img { overflow: hidden; border-radius: 10px; margin-bottom: 40px; } .bi-service-details-text-area .bi-service-details-text h3, .bi-service-details-text-area .bi-service-details-text h4 { color: #0E0E0E; font-size: 50px; font-weight: 700; padding-bottom: 30px; } .bi-service-details-text-area .bi-service-details-text p { padding-bottom: 25px; } .bi-service-details-text-area .bi-service-details-text h4 { font-size: 30px; padding-bottom: 20px; } .bi-service-details-text-area .bi-service-details-feature .service-star { left: 0; right: 0; top: 46%; z-index: -1; margin: 0 auto; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .bi-service-details-text-area .bi-sd-feature { padding: 30px; border-radius: 10px; background: #F3F4F4; } .bi-service-details-text-area .bi-sd-feature .bi-sd-icon-title .inner-icon { margin-right: 15px; } .bi-service-details-text-area .bi-sd-feature .bi-sd-icon-title .inner-icon i { font-size: 42px; line-height: 0.75; color: var(--base-color); } .bi-service-details-text-area .bi-sd-feature .bi-sd-icon-title .inner-title h4 { color: #0E0E0E; font-size: 20px; font-weight: 700; } .bi-service-details-text-area .bi-sd-feature .bi-sd-feature-text { font-size: 16px; } .bi-service-details-text-area .bi-faq-content-area { padding: 0; max-width: 100%; padding-top: 30px; background-color: transparent; } .bi-single-sidebar { top: 110px; position: sticky; padding-left: 15px; } .bi-sidebar-widget { margin-bottom: 30px; } .bi-sidebar-widget .widget-title { font-size: 24px; font-weight: 600; padding-left: 40px; position: relative; margin-bottom: 15px; color: rgb(0, 0, 0); } .bi-sidebar-widget .widget-title:before { left: 0; top: 10px; height: 4px; width: 30px; content: ""; border-radius: 30px; position: absolute; background-color: var(--base-color); } .bi-sidebar-widget .widget-area, .bi-sidebar-widget.widget_categories { padding: 20px; border-radius: 10px; border: 1px solid rgba(22, 35, 43, 0.1); } .bi-sidebar-widget .search-widget input { color: #000; width: 100%; border: none; height: 60px; padding-left: 15px; border-radius: 5px; background: rgba(22, 35, 43, 0.05); } .bi-sidebar-widget .search-widget input::-webkit-input-placeholder { color: #555555; font-family: var(--heading); } .bi-sidebar-widget .search-widget input::-moz-placeholder { color: #555555; font-family: var(--heading); } .bi-sidebar-widget .search-widget input:-ms-input-placeholder { color: #555555; font-family: var(--heading); } .bi-sidebar-widget .search-widget input::-ms-input-placeholder { color: #555555; font-family: var(--heading); } .bi-sidebar-widget .search-widget input::placeholder { color: #555555; font-family: var(--heading); } .bi-sidebar-widget .search-widget button { top: 0; right: 0; color: #fff; width: 60px; border: none; height: 60px; border: none; border-radius: 5px; position: absolute; background-color: var(--base-color); } .bi-sidebar-widget .service-widget li, .bi-sidebar-widget.widget_archive li, .bi-sidebar-widget.widget_pages li, .bi-sidebar-widget.widget_meta li, .bi-sidebar-widget.widget_nav_menu li, .bi-sidebar-widget.widget_categories li{ margin-bottom: 10px; } .bi-sidebar-widget .service-widget li:last-child, .bi-sidebar-widget.widget_archive li:last-child, .bi-sidebar-widget.widget_pages li:last-child, .bi-sidebar-widget.widget_nav_menu li:last-child, .bi-sidebar-widget.widget_meta li:last-child, .bi-sidebar-widget.widget_categories li:last-child { margin-bottom: 0; } .bi-sidebar-widget .service-widget li a, .bi-sidebar-widget.widget_archive li a, .bi-sidebar-widget.widget_pages li a, .bi-sidebar-widget.widget_nav_menu li a, .bi-sidebar-widget.widget_meta li a, .bi-sidebar-widget.widget_categories li a { width: 100%; color: #0E0E0E; font-weight: 500; padding: 15px 30px; border-radius: 5px; position: relative; display: inline-block; font-family: var(--heading-3); background-color: rgba(22, 35, 43, 0.05); } .bi-sidebar-widget .service-widget li a:after, .bi-sidebar-widget.widget_archive li a:after, .bi-sidebar-widget.widget_pages li a:after, .bi-sidebar-widget.widget_nav_menu li a:after, .bi-sidebar-widget.widget_meta li a:after, .bi-sidebar-widget.widget_categories li a:after { top: 0; left: 0; width: 10px; content: ""; height: 100%; position: absolute; border-radius: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; background-color: rgba(255, 56, 56, 0.105); } .bi-sidebar-widget .service-widget li a:before, .bi-sidebar-widget.widget_archive li a:before, .bi-sidebar-widget.widget_pages li a:before, .bi-sidebar-widget.widget_nav_menu li a:before, .bi-sidebar-widget.widget_meta li a:before, .bi-sidebar-widget.widget_categories li a:before { top: 12px; right: 15px; color: #fff; width: 35px; height: 35px; content: "\f176"; font-weight: 300; position: absolute; text-align: center; border-radius: 5px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 500ms ease; transition: all 500ms ease; font-family: "Font Awesome 5 Pro"; background-color: var(--base-color); } .bi-sidebar-widget .service-widget li a:hover, .bi-sidebar-widget.widget_archive li a:hover, .bi-sidebar-widget.widget_pages li a:hover, .bi-sidebar-widget.widget_nav_menu li a:hover, .bi-sidebar-widget.widget_meta li a:hover, .bi-sidebar-widget.widget_categories li a:hover { color: #fff; background-color: var(--base-color); } .bi-sidebar-widget .service-widget li a:hover:after, .bi-sidebar-widget.widget_archive li a:hover:after, .bi-sidebar-widget.widget_pages li a:hover:after, .bi-sidebar-widget.widget_nav_menu li a:hover:after, .bi-sidebar-widget.widget_meta li a:hover:after, .bi-sidebar-widget.widget_categories li a:hover:after { background-color: #fff; } .bi-sidebar-widget .service-widget li a:hover:before, .bi-sidebar-widget.widget_archive li a:hover:before, .bi-sidebar-widget.widget_pages li a:hover:before, .bi-sidebar-widget.widget_nav_menu li a:hover:before, .bi-sidebar-widget.widget_meta li a:hover:before, .bi-sidebar-widget.widget_categories li a:hover:before { color: var(--base-color); background-color: #fff; } .widget_categories li .children, .widget_archive li .children, .widget_pages li .children, .widget_nav_menu li .sub-menu { padding-top: 10px; } .widget_categories li .children, .widget_archive li .children li, .widget_pages li .children li, .widget_nav_menu li .sub-menu li { padding-left: 15px; } .bi-sidebar-widget .add-widget { overflow: hidden; padding: 60px 40px; border-radius: 10px; background-color: transparent; } .bi-sidebar-widget .add-widget .add-widget-area .add-icon { width: 62px; height: 62px; margin: 0 auto; margin-bottom: 30px; border-radius: 100%; border: 5px solid var(--base-color); } .bi-sidebar-widget .add-widget .add-widget-area .add-icon i { color: var(--base-color); } .bi-sidebar-widget .add-widget .add-widget-area .add-text h3 { color: #fff; font-size: 38px; font-weight: 800; padding-bottom: 15px; } .bi-sidebar-widget .add-widget .add-widget-area .add-text p { color: #fff; font-size: 22px; font-weight: 400; font-family: var(--heading); } .bi-sidebar-widget .recent-post-widget .bi-recent-blog-item { padding: 8px; border-radius: 5px; margin-bottom: 10px; background: #F3F4F4; } .bi-sidebar-widget .recent-post-widget .bi-recent-blog-item .bi-recent-blog-img { width: 83px; height: 83px; overflow: hidden; margin-right: 15px; border-radius: 5px; } .bi-sidebar-widget .recent-post-widget .bi-recent-blog-item .bi-recent-blog-img img { height: 83px; object-fit: cover; } .bi-sidebar-widget .recent-post-widget .bi-recent-blog-item .bi-recent-blog-text { max-width: 215px; } .bi-sidebar-widget .recent-post-widget .bi-recent-blog-item .bi-recent-blog-text span { font-size: 12px; font-weight: 700; color: var(--base-color); } .bi-sidebar-widget .recent-post-widget .bi-recent-blog-item .bi-recent-blog-text h3 { color: #1F1F1F; font-size: 18px; font-weight: 700; } .bi-sidebar-widget .recent-post-widget .bi-recent-blog-item .bi-recent-blog-text h3:hover { color: var(--base-color); } .bi-sidebar-widget .tagcloud a { color: #505050; font-size: 15px !important; font-weight: 500; padding: 5px 20px; border-radius: 5px; margin-right: 5px; border-radius: 5px; background: #F3F4F4; margin-bottom: 10px; display: inline-block; font-family: var(--heading); } .bi-sidebar-widget .tagcloud a:hover { color: #fff; background-color: var(--base-color); } /*---------------------------------------------------- */ /*Team Details Page area*/ /*----------------------------------------------------*/ .bi-team-details-img-social { top: 110px; margin-bottom: 40px; position: sticky; } .bi-team-details-img-social .bi-team-details-img { overflow: hidden; border-radius: 15px; margin-bottom: 30px; } .bi-team-details-img-social .bi-team-details-name-social { font-family: var(--heading); } .bi-team-details-img-social .bi-team-details-name-social h3 { color: #0E0E0E; font-size: 40px; font-weight: 700; padding-bottom: 10px; } .bi-team-details-img-social .bi-team-details-name-social span { font-size: 22px; color: var(--base-color); } .bi-team-details-img-social .bi-team-details-name-social .bi-team-details-social { margin-top: 20px; } .bi-team-details-img-social .bi-team-details-name-social .bi-team-details-social a { z-index: 1; width: 50px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; margin: 0px 10px; position: relative; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--base-color); border: 1px solid rgba(22, 35, 43, 0.1); } .bi-team-details-img-social .bi-team-details-name-social .bi-team-details-social a:before { top: 0; left: 0; z-index: -1; width: 100%; content: ""; height: 100%; position: absolute; -webkit-transform: scale(0); transform: scale(0); border-radius: 100%; -webkit-transition: all 500ms ease; transition: all 500ms ease; background: var(--gradient-color); } .bi-team-details-img-social .bi-team-details-name-social .bi-team-details-social a:hover { color: #fff; background-color: var(--base-color); border: 1px solid var(--base-color); } .bi-team-details-img-social .bi-team-details-name-social .bi-team-details-social a:hover:before { -webkit-transform: scale(1); transform: scale(1); } .bi-team-details-text-content { padding-left: 20px; } .bi-team-details-text-content h3 { color: #0E0E0E; font-size: 34px; font-weight: 700; padding-bottom: 20px; } .bi-team-details-text-content p { padding-bottom: 20px; } .bi-team-details-text-content .bi-team-details-info { margin-bottom: 25px; } .bi-team-details-text-content .bi-team-details-info li { color: #0E0E0E; margin-bottom: 10px; font-family: var(--heading); } .bi-team-details-text-content .bi-team-details-info .info-title { width: 125px; font-weight: 600; display: inline-block; } .bi-team-details-text-content .bi-team-details-info .info-value { color: #555555; font-weight: 500; } .bi-team-details-contact-info { margin-top: 50px; border-radius: 20px; background-color: rgba(247, 247, 247, 0.05); } .bi-team-details-contact-info .bi-team-details-contact-title h3 { color: #0E0E0E; font-size: 34px; font-weight: 700; padding-bottom: 15px; } .bi-team-details-contact-info .bi-team-details-contact-title p { font-weight: 500; } .bi-team-details-contact-form { padding: 40px; margin-top: 30px; border-radius: 20px; border: 1px solid rgba(22, 35, 43, 0.1); } .upload-cv.headline input { height: auto; padding: 13px 20px; } .bi-team-details-contact-form input, .bi-team-details-contact-form textarea, .comment-form input, .comment-form textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { width: 100%; height: 62px; border: none; color: #555; padding-left: 20px; margin-bottom: 25px; border-radius: 5px; font-family: var(--heading-3); background: rgba(22, 35, 43, 0.05); } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { margin-bottom: 0; } .bi-team-details-contact-form input::-webkit-input-placeholder, .bi-team-details-contact-form textarea::-webkit-input-placeholder { font-size: 14px; color: #555; font-family: var(--heading-3); } .bi-team-details-contact-form input::-moz-placeholder, .bi-team-details-contact-form textarea::-moz-placeholder { font-size: 14px; color: #555; font-family: var(--heading-3); } .bi-team-details-contact-form input:-ms-input-placeholder, .bi-team-details-contact-form textarea:-ms-input-placeholder { font-size: 14px; color: #555; font-family: var(--heading-3); } .bi-team-details-contact-form input::-ms-input-placeholder, .bi-team-details-contact-form textarea::-ms-input-placeholder { font-size: 14px; color: #555; font-family: var(--heading-3); } .latest__comments .comment-respond { margin-top: 30px; } .comment-respond h3#reply-title small { font-size: 18px; margin-left: 15px; } .latest__comments .comment-respond h3#reply-title { padding-bottom: 15px; } .latest__comments .comment-respond form .comment-notes {margin-bottom: 15px;} .bi-team-details-contact-form input::placeholder, .bi-team-details-contact-form textarea::placeholder { font-size: 14px; color: #555; font-family: var(--heading-3); } .bi-team-details-contact-form textarea, .comment-form textarea { padding-top: 20px; height: 178px; } .bi-team-details-contact-form button { color: #fff; border: none; font-size: 15px; font-weight: 700; padding: 18px 30px; border-radius: 5px; text-transform: uppercase; font-family: var(--heading-3); -webkit-transition: all 200ms linear 0ms; transition: all 200ms linear 0ms; background-color: var(--base-color); } .bi-team-details-contact-form button:hover{ background-color: #070707; } /*---------------------------------------------------- */ /*Testimonial Page area*/ /*----------------------------------------------------*/ .bi-testimonial-feed-content { padding-top: 50px; } .bi-testimonial-feed-item { background: #fff; padding: 30px 25px; border-radius: 10px; margin-bottom: 30px; -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.05); box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.05); } .bi-testimonial-feed-item .testimonial-ratting { margin-bottom: 25px; } .bi-testimonial-feed-item .testimonial-ratting li { color: #FF7425; font-size: 20px; } .bi-testimonial-feed-item .testimonial-desc { color: #16232B; font-size: 20px; font-weight: 600; margin-bottom: 30px; font-family: var(--heading); } .bi-testimonial-feed-item .testimonial-author h3 { font-size: 24px; font-weight: 600; padding-bottom: 5px; color: var(--base-color); } .bi-testimonial-feed-item .testimonial-author span { font-weight: 600; } .bi-testimonial-feed-item:hover { -webkit-transform: translateY(-15px); transform: translateY(-15px); } .bi-scroll-img-section { height: 825px; overflow: hidden; } .bi-scroll-img-section .bi-scroll-img-area { top: 0px; left: -260px; right: 0px; margin: 0px auto; width: 125%; } /*---------------------------------------------------- */ /*faq Page area*/ /*----------------------------------------------------*/ .bi-faq-feed-content { padding-top: 50px; } .hpt-faq-1-area { position: relative; background-color: rgba(0, 7, 26, 0.03); } .hpt-faq-1-area .faq-1-bg-shape-1 { position: absolute; right: 0; top: 0; } .hpt-faq-1-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-faq-1-wrap { grid-template-columns: 1fr; } } .hpt-faq-1-section-title .hpt-title-1 { margin-bottom: 25px; } .hpt-faq-1-img { width: 100%; height: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-faq-1-img { width: 70%; } } .hpt-faq-1-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-faq-1-left { height: 100%; width: 100%; } .hpt-faq-1-right { width: 100%; max-width: 626px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .hpt-faq-1-right { padding-top: 120px; padding-bottom: 120px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hpt-faq-1-right { max-width: 100%; padding-left: 35px; padding-right: 35px; padding-top: 0px; padding-bottom: 120px; } } @media (max-width: 767px) { .hpt-faq-1-right { max-width: 100%; padding-left: 15px; padding-right: 15px; padding-top: 0px; padding-bottom: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-faq-1-right { max-width: 100%; padding-left: 35px; padding-right: 35px; padding-top: 0px; padding-bottom: 120px; } } .hpt-faq-1-item-wrap .accordion-item { position: relative; background: transparent; border: none; } .hpt-faq-1-item-wrap .accordion-item::after { position: absolute; content: ""; width: 100%; height: 0%; top: 0; left: 0; opacity: 0.3; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .hpt-faq-1-item-wrap .accordion-item:is(.faq_bg)::after { height: 100%; } .hpt-faq-1-item-wrap .accordion-item:is(.faq_bg) .accordion-header .accordion-button { padding-left: 15px; padding-right: 15px; } .hpt-faq-1-item-wrap .accordion-item:is(.faq_bg) .line { background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); } .hpt-faq-1-item-wrap .accordion-item .line { display: block; width: 100%; height: 1px; background: var(--919191, #919191); } .hpt-faq-1-item-wrap .accordion-item .accordion-header { outline: none; box-shadow: none; position: relative; z-index: 1; } .hpt-faq-1-item-wrap .accordion-item .accordion-header .accordion-button { padding-right: 0; padding-left: 0; justify-content: space-between; align-items: center; background: transparent; outline: none; box-shadow: none; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } .hpt-faq-1-item-wrap .accordion-item .accordion-header .accordion-button .text { font-size: 23px; font-family: "Recoleta Alt"; font-weight: 700; color: #00071A; line-height: 1.55; } .hpt-faq-1-item-wrap .accordion-item .accordion-header .accordion-button .icon { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); text-align: center; font-size: 11px; line-height: 19px; color: #fff; } .hpt-faq-1-item-wrap .accordion-item .accordion-header .accordion-button::after { display: none; } .hpt-faq-1-item-wrap .accordion-item .accordion-body { position: relative; z-index: 1; padding-top: 0; } .hpt-faq-1-item-wrap .accordion-item .accordion-body .faq-text { font-size: 16px; font-weight: 400; line-height: 26px; color: #00071A; margin-bottom: 0; opacity: 0.8; } .hpt-faq-2 { background: transparent; } .hpt-faq-2 .faq-1-bg-shape-1 { position: absolute; left: -120px; bottom: -100px; top: unset; animation: rotated 10s linear infinite; } .hpt-faq-2 .hpt-faq-1-right { width: 100%; max-width: 100%; padding-left: 50px; position: relative; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-faq-2 .hpt-faq-1-right { padding-top: 0px; padding-bottom: 0px; padding-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-faq-2 .hpt-faq-1-right { padding-top: 50px; padding-bottom: 0px; padding-right: 0; padding-left: 0; } } .hpt-faq-2 .hpt-faq-1-right .faq-2-img-bg { position: absolute; top: 20px; right: -20px; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-faq-2 .hpt-faq-1-right .faq-2-img-bg { display: none; } } .hpt-faq-2 .hpt-faq-1-img { clip-path: polygon(18% 0, 100% 0, 100% 84%, 82% 100%, 0 100%, 0 16%); width: 100%; height: 740px; overflow: hidden; } @media (max-width: 767px) { .hpt-faq-2 .hpt-faq-1-img { height: 450px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-faq-2 .hpt-faq-1-img { height: 600px; } } .hpt-faq-2 .hpt-faq-1-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-faq-2 .hpt-faq-1-item-wrap .accordion-item .accordion-header .accordion-button .text { font-size: 22px; font-family: "Kanit", sans-serif; font-weight: 500; } .hpt-faq-2 .hpt-faq-1-item-wrap .accordion-item .accordion-header .accordion-button .icon { position: relative; background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hpt-faq-2 .hpt-faq-1-item-wrap .accordion-item .accordion-header .accordion-button .icon::after { position: absolute; content: ""; width: 100%; height: 100%; border-radius: 50%; background: var(--home-9-gd-color); left: 0; top: 0; z-index: -1; opacity: 0.2; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-faq-2 .hpt-faq-1-item-wrap .accordion-item:is(.faq_bg) .accordion-header .accordion-button .text { background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .accordion.hpt-faq-1-item-wrap { margin-top: 25px; } .hpt-faq-2 .hpt-faq-1-item-wrap .accordion-item:is(.faq_bg) .accordion-header .accordion-button .icon { position: relative; background: unset; background-clip: unset; -webkit-background-clip: unset; -webkit-text-fill-color: unset; color: #fff; } .hpt-faq-2 .hpt-faq-1-item-wrap .accordion-item:is(.faq_bg) .accordion-header .accordion-button .icon::after { opacity: 1; } .hpt-faq-2 .hpt-faq-1-item-wrap .accordion-item:is(.faq_bg) .accordion-header .accordion-button .icon i::before { content: "\f068"; } /*---------------------------------------------------- */ /*Portfolio Page area*/ /*----------------------------------------------------*/ .bi-portfolio-feed-top-content .bi-section-title-3 h2 { color: #0E0E0E; } .bi-portfolio-feed-top-content .bi-portfolio-filter-btn li { font-size: 14px; } .bi-portfolio-feed-section .bi-portfolio-feed-item-wrapper { margin: 50px -15px; } .bi-portfolio-feed-section .bi-portfolio-item-3 { padding: 15px; } .bi-portfolio-feed-section .bi-portfolio-img-text-3 .portfolio-img img { -webkit-filter: grayscale(0); filter: grayscale(0); } .bi-portfolio-feed-section .bi-portfolio-img-text-3 .porfolio-icon { width: 70px; height: 70px; font-size: 24px; } .bi-portfolio-feed-section .bi-portfolio-img-text-3:hover .porfolio-icon { top: 40%; } .bi-portfolio-feed-section .bi-portfolio-img-text-3 .portfolio-text { padding: 20px 30px; } .bi-portfolio-sidebar { top: 110px; position: sticky; } /*---------------------------------------------------- */ /*Portfolio Details Page area*/ /*----------------------------------------------------*/ .bi-portfolio-details-img { overflow: hidden; border-radius: 10px; } .bi-portfolio-details-img { margin-bottom: 40px; } .bi-portfolio-details-content h3, .bi-portfolio-details-content h4 { color: #0E0E0E; font-size: 42px; font-weight: 700; padding-bottom: 25px; } .bi-portfolio-details-content h4 { font-size: 30px; } .bi-portfolio-details-content p { padding-bottom: 25px; } .bi-portfolio-details-content .bi-port-detail-img { overflow: hidden; border-radius: 10px; } .bi-portfolio-details-list { margin-bottom: 50px; } .bi-portfolio-details-list li, .entry-content li { font-size: 18px; font-weight: 400; padding-left: 30px; margin-bottom: 10px; position: relative; } .bi-portfolio-details-list li:last-child, .entry-content li:last-child { margin-bottom: 0; } .bi-portfolio-details-list li:before, .entry-content li:before{ top: 0; left: 0; content: "\f058"; font-weight: 400; position: absolute; color: var(--base-color); font-family: "Font Awesome 5 Pro"; } .bi-blog-details-text-area .entry-content ul { list-style: none; padding: 0; margin: 0; } .bi-portfolio-sidebar { border-radius: 10px; padding: 30px 30px 25px; background-color: #16232B; } .bi-portfolio-sidebar h3 { color: #fff; font-size: 26px; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .bi-portfolio-sidebar li { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .bi-portfolio-sidebar li span { display: block; } .bi-portfolio-sidebar li .title { color: #fff; font-weight: 600; font-family: var(--heading); } .bi-portfolio-sidebar li .info { font-size: 16px; font-family: var(--heading); color: rgba(255, 255, 255, 0.8); } .bi-portfolio-sidebar .portfolio-social a { width: 42px; height: 42px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0px 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--base-color); border: 1px solid var(--base-color); } .bi-portfolio-sidebar .portfolio-social a:hover { color: #fff; background-color: var(--base-color); } /*---------------------------------------------------- */ /*Blog Page area*/ /*----------------------------------------------------*/ .bz-blog-item .blog-img { overflow: hidden; border-radius: 10px 10px 0px 0px; } .bz-blog-item .blog-img img { -webkit-transition: 500ms all ease; transition: 500ms all ease; } .bz-blog-item .bz-blog-author { left: 0; bottom: 0; background-color: #fff; padding: 10px 20px 0px 12px; border-radius: 0px 14px 0px 0px; } .bz-blog-item .bz-blog-author img { width: 30px; height: 30px; overflow: hidden; margin-right: 10px; border-radius: 100%; border: 0.8px solid var(--base-color); } .bz-blog-item .bz-blog-author span { color: #000000; font-weight: 600; font-size: 12px; } .bz-blog-item .bz-blog-author span a { color: var(--base-color); } .bz-blog-item .blog-meta { margin-bottom: 18px; } .bz-blog-item .blog-meta a { color: #000000; margin-right: 20px; } .bz-blog-item .blog-meta a i { color: var(--base-color); margin-right: 5px; } .bz-blog-item .blog-meta-text h3 { color: #191B1E; font-size: 22px; font-weight: 600; line-height: 35px; } .bz-blog-item .blog-meta-text h3:hover { color: var(--base-color); } .bz-blog-item .blog-meta-text .read_more { color: #000000; font-weight: 500; margin-top: 15px; position: relative; display: inline-block; } .bz-blog-item .blog-meta-text .read_more i { font-size: 18px; margin-left: 20px; display: inline-block; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: 500ms all ease; transition: 500ms all ease; } .bz-blog-item .blog-meta-text .read_more:before { bottom: 0; width: 0%; height: 1px; content: ""; position: absolute; background-color: #000000; -webkit-transition: 500ms all ease; transition: 500ms all ease; } .bz-blog-item .blog-meta-text .read_more:hover:before { width: 100%; } .bz-blog-item .blog-meta-text .read_more:hover i { -webkit-transform: rotate(0); transform: rotate(0); } .bz-blog-item:hover .blog-img img { -webkit-transform: scale(1.1); transform: scale(1.1); } .bz-blog-section-2 { padding: 180px 0px; } .bz-blog-top-content .bz-section-title h2 span { -webkit-text-fill-color: #2029BD; } .bz-blog-top-content .bz-blog-title-text { font-size: 18px; max-width: 540px; line-height: 30px; } .bz-blog-top-content-2 { padding-top: 55px; } .bz-blog-item-2 { padding: 20px 15px; border-radius: 8px; border: 1px solid rgba(190, 190, 190, 0.8); } .bz-blog-item-2 .bz-blog-img { overflow: hidden; max-width: 220px; margin-right: 30px; border-radius: 8px; } .bz-blog-item-2 .bz-blog-img img { -webkit-transition: 500ms all ease; transition: 500ms all ease; } .bz-blog-item-2 .bz-blog-text { max-width: 340px; } .bz-blog-item-2 .bz-blog-text h3 { color: #000000; font-size: 26px; font-weight: 600; padding-bottom: 25px; } .bz-blog-item-2 .bz-blog-text p { color: #888992; line-height: 30px; padding-bottom: 25px; } .bz-blog-item-2 .bz-blog-text .read_more { color: #000000; font-weight: 600; } .bz-blog-item-2 .bz-blog-text .read_more:hover { color: var(--base-color); } .bz-blog-item-2:hover .bz-blog-img img { -webkit-transform: scale(1.1); transform: scale(1.1); } .bz-blog-feed-section { padding: 120px 0px; } .bz-blog-feed-area .bz-blog-item { max-width: 100%; margin-bottom: 30px; } .bz-blog-feed-area .bz-blog-item .blog-img { overflow: hidden; border-radius: 8px; } .bz-blog-feed-area .bz-blog-item .blog-meta-text h3 { font-size: 36px; line-height: 1.2; } .bz-blog-feed-area .bz-blog-item .blog-meta-text p { font-size: 18px; padding-top: 15px; } .bz-blog-feed-area .bz-blog-item .blog-meta-text { padding: 30px 0px; } .bi-blog-feed-content-2 { padding-top: 50px; } .bi-blog-feed-item-2 { margin: 0 auto; max-width: 390px; margin-bottom: 40px; } .bi-blog-feed-item-2 .blog-img { overflow: hidden; margin-bottom: 25px; } .bi-blog-feed-item-2 .blog-img img { -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-blog-feed-item-2 .blog-meta { left: 0; bottom: 0; z-index: 1; color: #fff; font-size: 14px; font-weight: 600; padding: 5px 20px; border: 2px solid #fff; border-left: none; font-family: var(--heading); background-color: var(--base-color); border-top-right-radius: 30px; border-bottom-right-radius: 30px; } .bi-blog-feed-item-2 .blog-meta i { margin-right: 5px; } .bi-blog-feed-item-2 .blog-text h3 { color: #0E0E0E; font-size: 20px; font-weight: 700; padding-bottom: 10px; } .bi-blog-feed-item-2 .blog-text p { font-size: 16px; } .bi-blog-feed-item-2:hover .blog-img img { -webkit-transform: scale(1.05); transform: scale(1.05); } .bi-blog-feed-item-3 { padding: 30px; border-radius: 10px; margin-bottom: 30px; border: 1px solid rgba(22, 35, 43, 0.1); } .bi-blog-feed-item-3 .blog-img { overflow: hidden; border-radius: 10px; margin-bottom: 15px; } .bi-blog-feed-item-3 .blog-img img { -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-blog-feed-item-3 .blog-meta { color: #fff; font-size: 14px; font-weight: 600; padding: 5px 20px; display: inline-block; border: 2px solid #fff; border-left: none; font-family: var(--heading); background-color: var(--base-color); border-top-right-radius: 30px; border-bottom-right-radius: 30px; } .bi-blog-feed-item-3 .blog-meta i { margin-right: 5px; } .bi-blog-feed-item-3 .blog-text { margin-top: 20px; } .bi-blog-feed-item-3 .blog-text h3 { color: #0E0E0E; font-size: 30px; font-weight: 700; padding-bottom: 10px; } .bi-blog-feed-item-3 .blog-author-more { margin-top: 20px; padding: 17px 20px; border-radius: 10px; background-color: rgba(22, 35, 43, 0.05); } .bi-blog-feed-item-3 .blog-author-more .blog-author { max-width: 215px; } .bi-blog-feed-item-3 .blog-author-more .blog-author .inner-img { width: 52px; height: 52px; overflow: hidden; margin-right: 20px; border-radius: 100%; } .bi-blog-feed-item-3 .blog-author-more .blog-author .inner-text { color: #0E0E0E; font-size: 20px; font-weight: 700; font-family: var(--heading); } .bi-blog-feed-item-3 .blog-author-more .blog-more a { font-weight: 600; color: var(--base-color); font-family: var(--heading); } .bi-blog-feed-item-3 .blog-author-more .blog-more a i { margin-left: 5px; } .bi-blog-feed-item-3:hover .blog-img img { -webkit-transform: scale(1.05); transform: scale(1.05); } .bi-pagination a, .bi-pagination span { width: 45px; height: 45px; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 18px; font-weight: 500; margin-right: 10px; border-radius: 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #dcdcdc; } .bz-blog-item .blog-meta-text { padding: 25px; } .bi-pagination a:hover, .bi-pagination .current { color: var(--base-color); border: 1px solid var(--base-color); } .bi-pagination a:hover:before, .bi-pagination .current:before { -webkit-transform: scale(1); transform: scale(1); } #bi-blog-details .bz-blog-item .blog-meta { margin-bottom: 0; } #bi-blog-details .bz-blog-item .blog-meta { margin-bottom: 0; } .blog-details-text-img-area .bz-blog-item h2 { color: #191B1E; font-size: 36px; line-height: 1.2; margin-bottom: 20px; font-weight: 600; } .entry-content ul { list-style: none; padding: 0; margin: 0; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6{ color: #191B1E; margin-bottom: 20px; font-weight: 600; } .entry-content p { margin-bottom: 25px; } .hpt-blog-1-wrap { display: grid; grid-template-columns: 540px 1fr; gap: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-blog-1-wrap { grid-template-columns: 1fr; } } .hpt-blog-1-item-single { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-blog-1-item-single { grid-template-columns: 320px 1fr; } } @media (max-width: 767px) { .hpt-blog-1-item-single { grid-template-columns: 1fr; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-blog-1-item-single { grid-template-columns: 200px 1fr; } } .hpt-blog-1-item-single:not(:last-child) { padding-bottom: 25px; border-bottom: 1px solid rgba(21, 32, 40, 0.15); margin-bottom: 25px; } .hpt-blog-1-item-single .blog-1-img { width: 100%; height: 200px; overflow: hidden; } .hpt-blog-1-item-single .blog-1-img img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-blog-1-item-single .blog-1-content .meta { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(21, 32, 40, 0.15); padding-bottom: 12px; margin-bottom: 13px; } .hpt-blog-1-item-single .blog-1-content .meta .date, .hpt-blog-1-item-single .blog-1-content .meta .author { font-size: 16px; line-height: 1.86; text-transform: uppercase; color: #152028; } .hpt-blog-1-item-single .blog-1-content .meta .author .color { background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hpt-blog-1-item-single .blog-1-content .blog-1 { color: #152028; font-size: 26px; font-weight: 600; line-height: 1.3; margin-bottom: 11px; } .hpt-blog-1-item-single .blog-1-content .blog-1:hover { color: #F0831F; } .hpt-blog-1-item-single .blog-1-content .blog-1-pera { font-size: 16px; font-weight: 400; line-height: 26px; color: #152028; margin-bottom: 0; } .hpt-blog-1-item-single-2 { position: relative; } .hpt-blog-1-item-single-2 .blog-1-img { width: 100%; height: 700px; clip-path: polygon(0 0, 100% 0, 100% 89%, 93% 100%, 7% 100%, 0 89%); background: #ECECEC; padding-bottom: 75px; } .hpt-blog-1-item-single-2 .blog-1-img img { width: 100%; height: 100%; object-fit: cover; } .hpt-blog-1-item-single-2 .blog-1-content-position { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 50px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-blog-1-item-single-2 .blog-1-content-position { padding: 0 38px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-blog-1-item-single-2 .blog-1-content-position { padding: 0 68px; } } @media (max-width: 767px) { .hpt-blog-1-item-single-2 .blog-1-content-position { padding: 0 21px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-blog-1-item-single-2 .blog-1-content-position { padding: 0 36px; } } .hpt-blog-1-item-single-2 .blog-1-content { background: rgba(0, 7, 26, 0.32); backdrop-filter: blur(15px); width: 100%; padding: 30px 50px; padding-top: 40px; } @media (max-width: 767px) { .hpt-blog-1-item-single-2 .blog-1-content { padding: 30px 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-blog-1-item-single-2 .blog-1-content { padding: 30px 50px; } } .hpt-blog-1-item-single-2 .blog-1-content .meta { display: flex; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 14px; margin-bottom: 15px; } .hpt-blog-1-item-single-2 .blog-1-content .meta .date, .hpt-blog-1-item-single-2 .blog-1-content .meta .author { font-size: 16px; line-height: 1.86; text-transform: uppercase; color: #fff; } .hpt-blog-1-item-single-2 .blog-1-content .meta .author .color { background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hpt-blog-1-item-single-2 .blog-1-content .blog-1 { color: #fff; font-size: 32px; font-weight: 600; line-height: 1.25; margin-bottom: 11px; } @media (max-width: 767px) { .hpt-blog-1-item-single-2 .blog-1-content .blog-1 { font-size: 26px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-blog-1-item-single-2 .blog-1-content .blog-1 { font-size: 28px; } } .hpt-blog-1-item-single-2 .blog-1-content .blog-1:hover { color: #F0831F; } .hpt-blog-1-item-single-2 .blog-1-content .blog-1-pera { font-size: 18px; font-weight: 400; line-height: 30px; color: #fff; margin-bottom: 20px; } .hpt-blog-1-item-single-2 .blog-1-content .blog-1-btn { text-align: right; } .hpt-blog-2-area { position: relative; } .hpt-blog-2-area .blog-2-bg-shape-1 { position: absolute; right: 12vw; bottom: 6vh; animation: rotated 10s linear infinite; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-blog-2-area .blog-2-bg-shape-1 { right: 0; } } .hpt-blog-2-top { display: grid; grid-template-columns: 685px 1fr; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-blog-2-top { grid-template-columns: 1fr; gap: 40px; } } .hpt-blog-2-top .btn-wrap { align-self: end; justify-self: end; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-blog-2-top .btn-wrap { align-self: start; justify-self: start; } } .hpt-blog-2-item { border-radius: 10px; border: 1px solid rgba(31, 36, 44, 0.15); background: #fff; box-shadow: 0px 0px 19px 0px rgba(255, 255, 255, 0.1) inset; position: relative; } .hpt-blog-2-item::after { position: absolute; content: ""; border-radius: 10px; background: var(--home-9-gd-color); width: 100%; height: 0%; top: 0; bottom: auto; left: 0; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-blog-2-item .blog-2-img { position: relative; z-index: 1; width: 100%; height: 306px; overflow: hidden; border-radius: 10px; margin-bottom: 30px; } .hpt-blog-2-item .blog-2-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); -webkit-transition: all 1s linear 0s; -moz-transition: all 1s linear 0s; -ms-transition: all 1s linear 0s; -o-transition: all 1s linear 0s; transition: all 1s linear 0s; } .hpt-blog-2-item .blog-2-img .date-position { position: absolute; left: 0; top: 20px; } .hpt-blog-2-item .blog-2-img .date-wrap { overflow: hidden; position: relative; border-radius: 0px 8px 8px 0px; border-right: 1px solid #B60B0B; background: #FFF; padding: 6px 26px; } .hpt-blog-2-item .blog-2-img .date-wrap::after { position: absolute; content: ""; width: 0%; height: 100%; border-radius: 0px 8px 8px 0px; background: var(--home-9-gd-color); top: 0; right: auto; left: 0; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-blog-2-item .blog-2-img .date-wrap .date { position: relative; z-index: 1; line-height: 1; display: inline-block; font-size: 14px; background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 500; text-transform: capitalize; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-blog-2-item .blog-2-content { position: relative; z-index: 1; padding: 0 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-blog-2-item .blog-2-content { padding: 0 15px; } } @media (max-width: 767px) { .hpt-blog-2-item .blog-2-content { padding: 0 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-blog-2-item .blog-2-content { padding: 0 30px; } } .hpt-blog-2-item .blog-2-content .blog-2-title { font-size: 26px; color: #00071A; line-height: 1.23; margin-bottom: 22px; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-blog-2-item .blog-2-content .blog-2-title { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-blog-2-item .blog-2-content .blog-2-title { font-size: 22px; } } @media (max-width: 767px) { .hpt-blog-2-item .blog-2-content .blog-2-title { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-blog-2-item .blog-2-content .blog-2-title { font-size: 24px; } } .hpt-blog-2-item .blog-2-content .blog-2-title a { background-position-y: -1px; background-repeat: no-repeat; background-size: 0% 100%; backface-visibility: visible; -webkit-backface-visibility: visible; background-image: linear-gradient(transparent calc(100% - 2px), currentColor 1px); -webkit-transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1); } .hpt-blog-2-item .blog-2-content .blog-2-pera { color: #4D515F; font-size: 16px; font-weight: 400; line-height: 26px; margin-bottom: 33px; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-blog-2-item .blog-2-auhor-wrap { position: relative; z-index: 1; border-top: 1px solid #DDDEDF; display: flex; align-items: center; justify-content: space-between; padding: 15px 30px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .hpt-blog-2-item .blog-2-auhor-wrap { padding: 15px 15px; } } @media (max-width: 767px) { .hpt-blog-2-item .blog-2-auhor-wrap { padding: 15px 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-blog-2-item .blog-2-auhor-wrap { padding: 15px 30px; } } .hpt-blog-2-item .blog-2-auhor-wrap .blog-2-author { display: flex; align-items: center; flex: 0 0 auto; } .hpt-blog-2-item .blog-2-auhor-wrap .blog-2-author .img { display: inline-block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 10px; } .hpt-blog-2-item .blog-2-auhor-wrap .blog-2-author .img img { width: 100%; height: 100%; object-fit: cover; } .hpt-blog-2-item .blog-2-auhor-wrap .blog-2-author .name { text-transform: uppercase; font-weight: 600; display: inline-block; color: #00071A; font-size: 16px; line-height: 1px; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } @media (max-width: 767px) { .hpt-blog-2-item .blog-2-auhor-wrap .blog-2-author .name { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-blog-2-item .blog-2-auhor-wrap .blog-2-author .name { display: inline-block; } } .hpt-blog-2-item .blog-2-auhor-wrap .blog-2-btn { display: inline-block; background: var(--home-9-gd-color); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 500; font-size: 16px; line-height: 1; text-transform: uppercase; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-blog-2-item:hover::after { height: 100%; top: auto; bottom: 0; left: 0; } .hpt-blog-2-item:hover .blog-2-img img { filter: grayscale(0%); transform: scale(1.1); } .hpt-blog-2-item:hover .blog-2-img .date-wrap::after { width: 100%; right: 0; left: auto; } .hpt-blog-2-item:hover .blog-2-img .date-wrap .date { line-height: 1; background: unset; background-clip: unset; -webkit-background-clip: unset; -webkit-text-fill-color: unset; color: #fff; } .hpt-blog-2-item:hover .blog-2-content .blog-2-title { color: #fff; -webkit-transition: all 0.4s linear 0s; -moz-transition: all 0.4s linear 0s; -ms-transition: all 0.4s linear 0s; -o-transition: all 0.4s linear 0s; transition: all 0.4s linear 0s; } .hpt-blog-2-item:hover .blog-2-content .blog-2-title a { background-size: 100% 100%; } .hpt-blog-2-item:hover .blog-2-content .blog-2-pera { color: #fff; opacity: 0.7; } .hpt-blog-2-item:hover .blog-2-auhor-wrap { border-top: 1px solid #fff; } .hpt-blog-2-item:hover .blog-2-auhor-wrap .blog-2-author .name { color: #fff; } .hpt-blog-2-item:hover .blog-2-auhor-wrap .blog-2-btn { display: inline-block; background: unset; background-clip: unset; -webkit-background-clip: unset; -webkit-text-fill-color: unset; color: #fff; } /*---------------------------------------------------- */ /*Blog Details Page area*/ /*----------------------------------------------------*/ .blog-details-text-img-area .bz-blog-item .blog-meta-text { padding-left: 0; } .blog-details-text-img-area .bz-blog-item .blog-meta-text h2 { color: #000000; font-size: 36px; font-weight: 700; } .bi-blog-details-content { padding: 30px; border-radius: 10px; border: 1px solid rgba(22, 35, 43, 0.1); } .bi-blog-details-img { overflow: hidden; border-radius: 10px; margin-bottom: 30px; } .bi-blog-details-meta { margin-bottom: 35px; } .bi-blog-details-meta ul { padding: 8px 20px; border-radius: 30px; display: inline-block; border: 2px solid var(--base-color); } .bi-blog-details-meta li { color: #0E0E0E; font-size: 15px; font-weight: 500; margin: 0px 15px; font-family: var(--heading); } .bi-blog-details-meta li i { color: var(--base-color); margin-right: 8px; } .bi-blog-details-text-area h3, .bi-blog-details-text-area h4 { color: #0E0E0E; font-size: 42px; font-weight: 700; padding-bottom: 25px; } .bi-blog-details-text-area h4 { font-size: 30px; } .bi-blog-details-text-area p { font-weight: 400; padding-bottom: 20px; } .bi-blog-details-text-area blockquote { margin-bottom: 30px; padding: 20px 53px 20px 20px; border-radius: 0px 150px 150px 0px; background: rgba(255, 56, 56, 0.1); } .bi-blog-details-text-area blockquote .inner-img { width: 130px; height: 130px; overflow: hidden; margin-right: 25px; border-radius: 100%; } .bi-blog-details-text-area blockquote .inner-text { font-size: 20px; max-width: 525px; color: var(--base-color); font-family: var(--heading); } .bi-blog-details-text-area .bi-portfolio-details-list-img { margin-top: 20px; } .bi-blog-share-tag { margin: 30px 0px 40px; } .bi-blog-share-tag span { color: #0E0E0E; font-size: 22px; font-weight: 700; margin-right: 20px; font-family: var(--heading); } .bi-blog-share-tag .bi-blog-tag a { color: #0E0E0E; font-size: 15px; padding: 5px 15px; margin-right: 10px; border-radius: 5px; display: inline-block; background: #F3F4F4; } .bi-blog-share-tag .bi-blog-tag a:hover { color: #fff; background-color: var(--base-color); } .bi-blog-share-tag .bi-blog-share a { color: #555555; font-size: 18px; line-height: 34px; margin-left: 10px; text-align: center; border-radius: 100%; } .bi-blog-share-tag .bi-blog-share a:hover { color: var(--base-color); } .bi-blog-details-author { padding: 30px; border-radius: 20px; background: #F3F4F4; } .bi-blog-details-author h4 { margin-bottom: 15px; } .bi-blog-details-author .inner-img { width: 140px; height: 140px; overflow: hidden; margin-right: 30px; border-radius: 100%; } .bi-blog-details-author .inner-text { max-width: 560px; } .bi-blog-details-author .inner-text h4 { color: #0E0E0E; font-size: 24px; font-weight: 700; } .bi-blog-details-author .inner-social a { margin-right: 15px; } .bi-blog-details-author .inner-social { margin-top: 16px; } .bi-blog-details-author .inner-social a:hover { color: var(--base-color); } .bi-project-next-prev-btn { margin: 30px 0px; } .bi-project-next-prev-btn a { color: #0E0E0E; font-size: 20px; font-weight: 700; font-family: var(--heading); } .bi-project-next-prev-btn a:hover { color: var(--base-color); } p.comment-form-cookies-consent { display: none; } .bi-comment-list-wrap h3 { color: #0E0E0E; font-size: 34px; font-weight: 700; padding-bottom: 35px; } .bi-comment-list-wrap .bi-comment-item { border-bottom: 1px solid rgba(2, 6, 38, 0.1); } .bi-comment-list-wrap .bi-comment-item .bi-comment-img { width: 78px; height: 78px; overflow: hidden; margin-right: 30px; border-radius: 100%; } .bi-comment-list-wrap .bi-comment-item .bi-comment-text { max-width: 595px; } .bi-comment-list-wrap .bi-comment-item .bi-comment-text .author-name-date span { display: block; font-family: var(--heading-3); } .latest__comments ul.children { padding-left: 90px; padding-top: 40px; margin-bottom: 40px; } .bi-team-details-contact-info .bi-team-details-contact-title input[type="submit"], .form-submit input[type="submit"] { width: auto; color: #fff; border: none; font-size: 15px; font-weight: 700; padding: 18px 30px; border-radius: 5px; text-transform: uppercase; font-family: var(--heading-3); -webkit-transition: all 200ms linear 0ms; transition: all 200ms linear 0ms; background-color: var(--base-color); margin-bottom: 0; } .bi-comment-list-wrap .bi-comment-item .bi-comment-text .author-name-date .cm-name { color: #0E0E0E; font-size: 22px; font-weight: 700; text-transform: capitalize; } p.logged-in-as { margin-bottom: 20px; } .bi-comment-list-wrap { padding-top: 30px; } .bi-comment-list-wrap .bi-comment-item .bi-comment-text .author-name-date .cm-date { font-size: 15px; color: var(--base-color); } .bi-comment-list-wrap .bi-comment-item .bi-comment-text p { color: #0E0E0E; line-height: 30px; max-width: 850px; padding: 15px 0px 20px; } .bi-comment-list-wrap .bi-comment-item .bi-like-reply { top: 0; right: 0; font-weight: 500; } .bi-comment-list-wrap .bi-comment-item .bi-like-reply a { font-size: 17px; color: var(--base-color); font-family: var(--heading); } .bi-comment-list-wrap .children-comment { padding-left: 90px; padding-top: 40px; margin-bottom: 40px; } .bi-blog-details-section .bi-team-details-contact-info { padding: 40px; border-radius: 10px; background-color: rgb(243, 244, 244); } .bi-blog-details-section .bi-team-details-contact-form { padding: 0; border: none; } .bi-blog-details-section .bi-team-details-contact-form input, .bi-blog-details-section .bi-team-details-contact-form textarea { background-color: #fff; } /*---------------------------------------------------- */ /*Career Details Page area*/ /*----------------------------------------------------*/ .bi-career-details-text-area { padding: 30px; border-radius: 10px; border: 1px solid rgba(22, 35, 43, 0.1); } .bi-career-details-text-area .bi-career-details-img { border-radius: 10px; margin-bottom: 40px; } .bi-career-details-text-area ul { margin-bottom: 30px; } .bi-career-details-text-area li { padding-left: 25px; position: relative; margin-bottom: 10px; } .bi-career-details-text-area li:before { left: 0; top: 10px; width: 16px; content: ""; height: 16px; position: absolute; background-repeat: no-repeat; background-image: url(../img/logo/check.png); } .bi-career-details-text-area .salary-limit { color: #000; font-size: 20px; font-weight: 700; margin-bottom: 30px; } .bi-career-details-text-area .bi-btn-3 a { padding: 13px 18px; } /*---------------------------------------------------- */ /*Job Apply Page area*/ /*----------------------------------------------------*/ .bi-job-apply-section .bi-team-details-contact-info { margin: 0 auto; margin-top: 50px; max-width: 1010px; } .bi-job-apply-section .bi-team-details-contact-form .upload-cv h3 { font-size: 22px; font-weight: 700; padding-bottom: 15px; } .bi-job-apply-section .bi-team-details-contact-form .upload-cv input { width: inherit; padding-left: 0; border-radius: 0; margin-bottom: 0; background-color: transparent; } /*---------------------------------------------------- */ /*Contact Page area*/ /*----------------------------------------------------*/ .bi-contact-info-content { border-radius: 10px; overflow: hidden; border: 1px solid rgba(22, 35, 43, 0.1); } .bi-contact-info-item { z-index: 1; overflow: hidden; padding: 40px 50px; } .bi-contact-info-item .info-bg { top: 0; left: 0; opacity: 0; z-index: -1; width: 100%; height: 100%; visibility: hidden; -webkit-transition: all 1000ms ease; transition: all 1000ms ease; } .bi-contact-info-item .info-bg:before { top: 0; left: 0; width: 100%; content: ""; height: 100%; position: absolute; background: -webkit-gradient(linear, left bottom, left top, from(rgba(22, 35, 43, 0.95)), to(rgba(22, 35, 43, 0.95))); background: linear-gradient(0deg, rgba(22, 35, 43, 0.95) 0%, rgba(22, 35, 43, 0.95) 100%); } .bi-contact-info-item .inner-icon { width: 72px; height: 72px; margin-bottom: 20px; border-radius: 100%; background-color: var(--base-color); } .bi-contact-info-item .inner-text h3 { color: #0E0E0E; font-size: 24px; font-weight: 600; padding-bottom: 13px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-contact-info-item .inner-text a { color: #555555; display: block; font-weight: 400; padding-bottom: 5px; } .bi-contact-info-item:hover .info-bg { opacity: 1; visibility: visible; -webkit-transform: scale(1.5); transform: scale(1.5); } .bi-contact-info-item:hover .inner-text h3, .bi-contact-info-item:hover .inner-text a { color: #fff; } .bi-contact-form-section { padding-bottom: 100px; } .bi-contact-map-content .bi-team-details-contact-info { margin-top: 0; max-width: 685px; margin-left: 45px; } .bi-contact-map-content .bi-team-details-contact-form { padding: 0; border: none; } .bi-contact-map-content .bi-section-title-1 h2 { font-size: 40px; padding-bottom: 15px; } .hap-contact-form { max-width: 550px; } .hap-contact-form .hap-contact-select { position: relative; -webkit-appearance: none; } .hap-contact-form .hap-contact-select:before { top: 12px; right: 15px; width: 34px; height: 34px; color: #000000; font-weight: 900; content: "\f0d7"; line-height: 34px; text-align: center; position: absolute; border-radius: 100%; font-family: "Font Awesome 5 Pro"; background-color: #d1eeff; z-index:1; } .hap-contact-form input, .hap-contact-form select, .hap-contact-form textarea { width: 100%; height: 62px; color: #000000; padding-left: 20px; margin-bottom: 18px; border-radius: 40px; background-color: #fff; -webkit-appearance: none; border: none; } .hap-contact-form input::-webkit-input-placeholder, .hap-contact-form select::-webkit-input-placeholder, .hap-contact-form textarea::-webkit-input-placeholder { font-size: 17px; color: #9fa4af; } .hap-contact-form input::-moz-placeholder, .hap-contact-form select::-moz-placeholder, .hap-contact-form textarea::-moz-placeholder { font-size: 17px; color: #9fa4af; } .hap-contact-form input:-ms-input-placeholder, .hap-contact-form select:-ms-input-placeholder, .hap-contact-form textarea:-ms-input-placeholder { font-size: 17px; color: #9fa4af; } .hap-contact-form input::-ms-input-placeholder, .hap-contact-form select::-ms-input-placeholder, .hap-contact-form textarea::-ms-input-placeholder { font-size: 17px; color: #9fa4af; } .hap-contact-form input::placeholder, .hap-contact-form select::placeholder, .hap-contact-form textarea::placeholder { font-size: 17px; color: #9fa4af; } .hap-contact-form textarea { height: 140px; padding-top: 15px; } .hap-contact-form button { color: #fff; width: 100%; height: 62px; border: none; font-weight: 700; font-size: 17px; border-radius: 40px; text-transform: uppercase; -webkit-transition: all 200ms linear 0ms; transition: all 200ms linear 0ms; background: -webkit-gradient(linear, left top, right top, from(#6256ed), color-stop(50%, #f350bc), to(#6256ed)); background: linear-gradient(90deg, #6256ed 0%, #f350bc 50%, #6256ed); background-size: 200%, 1px; } .hap-contact-form button i { margin-left: 10px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 200ms linear 0ms; transition: all 200ms linear 0ms; } .hap-contact-form button:hover { background-position: 120%; } .hap-contact-form button:hover i { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .hpt-contact-1-wrap { display: grid; grid-template-columns: 1.5fr 1fr; position: relative; align-items: end; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-contact-1-wrap { grid-template-columns: 1fr 1fr; gap: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-contact-1-wrap { grid-template-columns: 1fr; } } .hpt-contact-1-wrap .contact-1-bg-shape { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hpt-contact-1-wrap .contact-1-bg-shape { height: 434px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hpt-contact-1-wrap .contact-1-bg-shape { height: 433px; } } .hpt-contact-1-wrap .left, .hpt-contact-1-wrap .right { position: relative; z-index: 1; } .hpt-contact-1-form { position: relative; padding: 40px 30px; background: var(--linear, linear-gradient(90deg, #E02626 0%, #F0831F 100%)); width: 100%; max-width: 414px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-contact-1-form { max-width: 100%; } } .hpt-contact-1-form .shape-1 { position: absolute; left: -30px; top: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-contact-1-form .shape-1 { display: none; } } .hpt-contact-1-form .shape-2 { position: absolute; right: -30px; top: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .hpt-contact-1-form .shape-2 { display: none; } } .hpt-contact-1-form .form-title { font-size: 32px; line-height: 1.25; color: #fff; letter-spacing: 0.96px; text-align: center; margin-bottom: 26px; } .hpt-contact-1-form .input-item { position: relative; } .hpt-contact-1-form .input-item:not(:last-child) { margin-bottom: 10px; } .hpt-contact-1-form .input-item .icon { position: absolute; top: 50%; left: 17px; transform: translateY(-50%); } @media (max-width: 767px) { .hpt-contact-1-form .input-item .icon { left: 6px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-contact-1-form .input-item .icon { left: 17px; } } .hpt-contact-1-form .input-item .icon-textarea { position: absolute; top: 18px; left: 17px; } @media (max-width: 767px) { .hpt-contact-1-form .input-item .icon-textarea { left: 6px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-contact-1-form .input-item .icon-textarea { left: 17px; } } .hpt-contact-1-form .input-item input, .hpt-contact-1-form .input-item textarea { border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; width: 100%; height: 54px; color: #fff; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0.14px; padding: 0 20px; } @media (max-width: 767px) { .hpt-contact-1-form .input-item input, .hpt-contact-1-form .input-item textarea { padding: 0 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hpt-contact-1-form .input-item input, .hpt-contact-1-form .input-item textarea { padding: 0 55px; } } .hpt-contact-1-form .input-item input::placeholder, .hpt-contact-1-form .input-item textarea::placeholder { text-transform: capitalize; color: #fff; font-size: 14px; letter-spacing: 0.14px; } .hpt-contact-1-form .input-item textarea { padding-top: 17px; height: 115px; } .hpt-contact-1-form .form-btn-wrap .contact-1-btn { width: 100%; height: 54px; background-color: #00071A; border: none; outline: none; color: #fff; text-transform: uppercase; font-size: 16px; font-weight: 600; line-height: 26px; } .hpt-contact-1-form .form-btn-wrap .contact-1-btn:hover { background-color: #fff; color: #E02626; } /*---------------------------------------------------- */ /*Coming soon area*/ /*----------------------------------------------------*/ .bi-coming-soon-section { padding-bottom: 100px; } .bi-coming-soon-section .brand-logo { max-width: 135px; padding: 30px 0px; } .coming-soon__countdown .single { width: 230px; height: 195px; margin: 0px 11px; padding-top: 40px; text-align: center; margin-bottom: 20px; border-radius: 20px; background: rgba(255, 255, 255, 0.1); } .coming-soon__countdown .single h1 { font-size: 55px; font-weight: 800; color: var(--base-color); } .coming-soon__countdown .single p { color: #fff; font-size: 26px; font-weight: 600; font-family: var(--heading); } .bi-coming-soon-subscription { margin: 0 auto; max-width: 555px; margin-top: 40px; } .bi-coming-soon-subscription input { color: #fff; width: 100%; height: 72px; border: none; padding-left: 15px; border-radius: 5px; font-family: var(--heading); background: rgba(255, 255, 255, 0.1); } .bi-coming-soon-subscription button { top: 0; right: 0; color: #fff; border: none; height: 72px; font-weight: 600; padding: 0px 30px; position: absolute; border-radius: 10px; font-family: var(--heading); text-transform: uppercase; background: var(--base-color); } .coming-soon-socail { margin-top: 50px; } .coming-soon-socail li a { color: #fff; width: 50px; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0px 10px; border-radius: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #fff; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .coming-soon-socail li a:hover { border: 1px solid var(--base-color); background-color: var(--base-color); } /*---------------------------------------------------- */ /*Privacy Policy area*/ /*----------------------------------------------------*/ .bi-privacy-policy-section h2, .bi-terms-condition-section h2 { color: #0E0E0E; font-size: 70px; font-weight: 700; text-align: center; } .bi-privacy-policy-content, .bi-terms-condition-content { margin-top: 50px; padding: 40px 30px; border-radius: 20px; border: 1px solid rgba(22, 35, 43, 0.1); } .bi-privacy-policy-content h3, .bi-terms-condition-content h3 { color: #0E0E0E; font-size: 28px; font-weight: 600; padding-bottom: 20px; } .bi-privacy-policy-content p, .bi-terms-condition-content p { padding-bottom: 20px; } .bi-privacy-policy-content ul, .bi-terms-condition-content ul { margin-bottom: 20px; } .bi-privacy-policy-content li, .bi-terms-condition-content li { padding-left: 25px; position: relative; margin-bottom: 15px; } .bi-privacy-policy-content li:before, .bi-terms-condition-content li:before { left: 0; top: 10px; width: 8px; height: 8px; content: ""; border-radius: 100%; position: absolute; background-color: #0E0E0E; } .bi-terms-condition-content ul { padding: 30px; border-radius: 20px; background-color: rgba(22, 35, 43, 0.05); } .bi-terms-condition-content li:before { background-color: var(--base-color); } /*---------------------------------------------------- */ /*Career area*/ /*----------------------------------------------------*/ .bi-career-section { background-color: rgba(22, 35, 43, 0.05); } .bi-career-content { padding-top: 50px; } .bi-career-item { padding: 25px 0px 40px; } .bi-career-item .inner-icon { z-index: 1; width: 130px; height: 130px; margin: 0 auto; margin-bottom: 30px; border-radius: 100%; background-color: #fff; background-color: rgb(33, 207, 209); } .bi-career-item .inner-icon:before { top: 50%; left: 0; right: 0; width: 90px; z-index: -1; content: ""; height: 90px; margin: 0 auto; position: absolute; border-radius: 100%; background-color: #fff; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .bi-career-item .inner-text { margin: 0 auto; max-width: 220px; } .bi-career-item .inner-text h3 { color: #0E0E0E; font-size: 22px; font-weight: 700; padding-bottom: 15px; } .bi-career-item .inner-text p { font-size: 16px; } .bi-career-feed-section { padding: 100px 0px; } .bi-career-feed-content { padding-top: 50px; } .bi-career-feed-item { border-radius: 10px; margin-bottom: 20px; padding: 15px 20px 15px 15px; background-color: rgba(22, 35, 43, 0.05); } .bi-career-feed-item .inner-img { width: 152px; height: 152px; overflow: hidden; margin-right: 30px; border-radius: 10px; } .bi-career-feed-item .inner-text { max-width: 770px; } .bi-career-feed-item .inner-text h3 { color: #0E0E0E; font-size: 22px; font-weight: 700; padding-bottom: 10px; } .bi-career-feed-item .inner-text p { padding-top: 10px; } .bi-career-feed-item .inner-text li { font-size: 15px; margin-right: 20px; } .bi-career-feed-item .inner-text li:last-child { margin-right: 20px; } .bi-career-feed-item .inner-text li i { color: var(--base-color); } /*---------------------------------------------------- */ /*Footer area*/ /*----------------------------------------------------*/ .hap-gallery-section { overflow: hidden; } .hap-gallery-item { overflow: hidden; position: relative; } .hap-gallery-item:after { top: 0; left: 0; opacity: 0; width: 100%; height: 100%; content: ""; position: absolute; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 500ms ease; transition: all 500ms ease; background-color: rgba(0, 0, 0, 0.5); } .hap-gallery-item .overlay-box { left: 0; right: 0; top: 40%; z-index: 2; color: #fff; opacity: 0; width: 40px; height: 40px; font-size: 16px; margin: 0 auto; position: absolute; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 500ms ease; transition: all 500ms ease; background-color: var(--hap-base-color); } .hap-gallery-item:hover:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .hap-gallery-item:hover .overlay-box { top: 50%; opacity: 1; } .bi-footer-cta { z-index: 1; } .bi-footer-cta:before { top: 0; left: 0; width: 100%; content: ""; z-index: -1; height: 50%; position: absolute; background-color: #fff; } .bi-footer-cta.black-footer:before { background-color: #070506; } .bi-footer-cta-content { overflow: hidden; padding: 65px 105px; border-radius: 10px; } .bi-footer-cta-content .bi-footer-cta-text { max-width: 345px; } .bi-footer-cta-content .bi-footer-cta-text h3 { color: #fff; font-size: 45px; font-weight: 600; line-height: 1.222; } .bi-footer-widget-content { padding: 90px 0px 50px; } .bi-footer-widget { margin-bottom: 40px; } .bi-footer-widget .widget-title { color: #fff; font-size: 26px; font-weight: 600; position: relative; padding-bottom: 5px; margin-bottom: 23px; display: inline-block; } .bi-footer-widget .widget-title:before { left: 0; bottom: 0; height: 1px; content: ""; width: 100%; position: absolute; background-color: #fff; } .bi-footer-widget .about-widget { max-width: 440px; } .bi-footer-widget .about-widget h3 { color: #fff; font-size: 40px; font-weight: 700; padding-bottom: 12px; } .bi-footer-widget .about-widget p { color: #d4d4d4; } .bi-footer-widget .menu-widget li { margin-bottom: 8px; } .bi-footer-widget .menu-widget li a { color: #e3e3e3; font-size: 15px; position: relative; } .bi-footer-widget .menu-widget li a:before { left: 0; bottom: 0; right: 0; width: 0%; content: ""; height: 1px; margin: 0 auto; position: absolute; background-color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-footer-widget .menu-widget li a:hover { color: var(--base-color); } .bi-footer-widget .menu-widget li a:hover:before { width: 100%; } .bi-footer-social-content { padding-bottom: 15px; border-bottom: 1px solid #313131; } .bi-footer-social-content ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bi-footer-social-content ul li { color: #fff; font-size: 21px; font-weight: 600; font-family: var(--heading); } .bi-footer-social-content ul li i { font-size: 17px; margin-right: 8px; } .bi-footer-social-content ul li a:hover { color: var(--base-color); } .bi-footer-logo { padding: 30px 0px; border-bottom: 1px solid #313131; } .bi-footer-logo .logo-mail { color: #fff; font-size: 30px; padding-top: 10px; } .bi-footer-copyright { padding: 15px 0; font-size: 14px; color: var(--base-color); font-family: var(--heading); } .bi-footer-section-2 { background-color: #0e0f19; } .bi-footer-cta-content-2 .bi-footer-cta-social-area { padding-right: 65px; } .bi-footer-cta-content-2 .bi-footer-cta-text .inner-icon { width: 50px; height: 50px; margin-right: 20px; border-radius: 100%; background-color: #fff; } .bi-footer-cta-content-2 .bi-footer-cta-text .inner-icon i { color: var(--base-color); } .bi-footer-cta-content-2 .bi-footer-cta-text .inner-text span, .bi-footer-cta-content-2 .bi-footer-cta-text .inner-text a { display: block; } .bi-footer-cta-content-2 .bi-footer-cta-text .inner-text span { font-size: 12px; font-weight: 400; color: var(--base-color); } .bi-footer-cta-content-2 .bi-footer-cta-text .inner-text a { color: #f5f9fa; font-size: 15px; font-weight: 700; } .bi-footer-cta-content-2 .bi-footer-cta-social li { margin-left: 30px; } .bi-footer-cta-content-2 .bi-footer-cta-social li a { color: #fff; font-size: 15px; } .bi-footer-cta-content-2 .bi-footer-cta-social li a:hover { color: var(--base-color); } .bi-footer-cta-content-2 .bi-footer-newslatter-form { padding-left: 70px; } .bi-footer-cta-content-2 .bi-footer-newslatter-form span { color: #f5f9fa; font-size: 15px; font-weight: 700; max-width: 110px; } .bi-footer-cta-content-2 .bi-footer-newslatter-form .bi-footer-newslatter { width: 100%; max-width: 410px; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input { width: 100%; height: 57px; border: none; font-size: 11px; padding-left: 20px; border-radius: 30px; background-color: #1f2031; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input::-webkit-input-placeholder { color: #54357d; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input::-moz-placeholder { color: #54357d; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input:-ms-input-placeholder { color: #54357d; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input::-ms-input-placeholder { color: #54357d; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input::placeholder { color: #54357d; } .bi-footer-cta-content-2 .bi-footer-newslatter-form button { top: 0; right: 0; color: #fff; height: 57px; border: none; position: absolute; padding: 0px 30px; border-radius: 30px; background-color: #301256; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-footer-cta-content-2 .bi-footer-newslatter-form button:hover { background-color: var(--base-color); } .hap-footer-widget .bi-footer-newslatter p { color: #7f7f7f; font-size: 15px; padding-bottom: 18px; } .hap-footer-widget .bi-footer-newslatter { position: relative; } .hap-footer-widget .bi-footer-newslatter input { width: 100%; height: 64px; border: none; padding-left: 20px; border-radius: 30px; background-color: #262626; } .hap-footer-widget .bi-footer-newslatter input::-webkit-input-placeholder { font-size: 14px; color: #7f7f7f; } .hap-footer-widget .bi-footer-newslatter input::-moz-placeholder { font-size: 14px; color: #7f7f7f; } .hap-footer-widget .bi-footer-newslatter input:-ms-input-placeholder { font-size: 14px; color: #7f7f7f; } .hap-footer-widget .bi-footer-newslatter-form.d-flex.justify-content-between { display: block !important; } .hap-footer-widget .bi-footer-newslatter-form span { display: none; } .hap-footer-widget .bi-footer-newslatter input::-ms-input-placeholder { font-size: 14px; color: #7f7f7f; } .hap-footer-widget .bi-footer-newslatter input::placeholder { font-size: 14px; color: #7f7f7f; } .hap-footer-widget .bi-footer-newslatter button { top: 7px; right: 7px; color: #fff; height: 53px; border: none; position: absolute; border-radius: 30px; background: var(--hap-gradient-color); } .bi-footer-widget-content-2 { padding: 70px 0px; } .bi-footer-widget-2 .widget-title { color: #fff; font-size: 22px; font-weight: 600; padding-bottom: 32px; } .bi-footer-widget-2 .logo-widget .brand-logo { padding-bottom: 25px; } .bi-footer-widget-2 .logo-widget .logo-info { margin-bottom: 30px; } .bi-footer-widget-2 .menu-widget { padding-left: 100px; } .bi-footer-widget-2 .menu-widget li { margin-bottom: 18px; } .bi-footer-widget-2 .menu-widget li a { position: relative; } .bi-footer-widget-2 .menu-widget li a:before { left: 0; top: 10px; width: 0px; height: 1px; content: ""; position: absolute; -webkit-transition: all 500ms ease; transition: all 500ms ease; background-color: var(--base-color); } .bi-footer-widget-2 .menu-widget li a:hover { padding-left: 22px; } .bi-footer-widget-2 .menu-widget li a:hover:hover { color: var(--base-color); } .bi-footer-widget-2 .menu-widget li a:hover:hover:before { width: 15px; } .bi-footer-copyright-content-2 { color: #fff; font-size: 15px; padding: 30px 0px; border-top: 1px solid #1f2031; } .hap-footer-widget .tranding-service ul { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; border-radius: 30px; justify-content: space-between; } .hap-footer-widget .tranding-service li a { width: 100px; height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hap-footer-widget .tranding-service li:nth-child(1) a { background-color: #ab003a; } .hap-footer-widget .tranding-service li:nth-child(2) a { background-color: #d44823; } .hap-footer-widget .tranding-service li:nth-child(3) a { background-color: #ffc107; } .hap-footer-widget .tranding-service li:nth-child(4) a { background-color: #5adafd; } /*---------------------------------------------------- */ /*Responsive area*/ /*----------------------------------------------------*/ @media screen and (max-width: 1800px) { .bi-service-list-item a { margin: 40px 20px; } .bi-banner-content .banner_img_1 { left: 10px; } .bi-banner-content .banner_img_4 { right: 10px; } .bi-banner-content .banner_img_3 { left: 50px; } .bi-banner-content .banner_img_2 { left: 15%; } } @media screen and (max-width: 1600px) { .bi-main-slider-section .bi-carousel-arrow-next-prev .bi-main-button-prev { left: 15px; } .bi-main-slider-section .bi-carousel-arrow-next-prev .bi-main-button-next { right: 15px; } .bi-banner-content .banner_img_3 { left: 15px; } .bi-main-arrow-next-prev { padding: 85px 20px; } .bi-slider-item-3 .bi-slider-text-3 { margin-left: 50px; } } @media screen and (max-width: 1500px) { .bi-header-section.header-style-one .bi-header-content { padding: 20px 15px; } .bi-header-section.header-style-two .bi-header-main-navigation .main-navigation li { margin: 0px 20px; } .bi-header-section.header-style-two .bi-header-cta-btn-grp .cta-btn-info { margin-left: 20px; } .bi-header-section.header-style-two .bi-header-cta-btn-grp .cta-btn-area { margin-left: 15px; } .bi-header-section.header-style-two .bi-header-cta-btn-grp .cta-btn-info .inner-icon { margin-right: 10px; } .bi-testimonial-content { padding-left: 130px; } .bi-testimonial-thumb { left: 0; } .bi-banner-content .banner_img_2 { bottom: 50px; } .bi-slider-item-3 .bi-slider-text-3 { margin-left: 120px; } } @media screen and (max-width: 1400px) { .bi-team-item-3 { margin: 0 auto; } .bi-testimonial-item-3 { margin: 0 auto; } .bi-team-slider-content-3 .bi-team-slider-3, .bi-testimonial-content-3 .bi-testimonial-slider-3 { margin: 0; max-width: 100%; } } @media screen and (max-width: 1300px) { .bi-main-slide-item .bi-slide-text-area h1 { font-size: 90px; } .bi-main-slide-item .bi-slide-text-area h2 { font-size: 70px; } .bi-service-list-item a { font-size: 60px; } .bi-header-section.header-style-two .bi-header-cta-btn-grp .cta-btn-info { display: none !important; } .bi-footer-cta-content-2 .bi-footer-newslatter-form span { margin-right: 20px; } .bi-sponsor-section-3 .sponsor-bg { top: -105px; } .bi-career-feed-item .inner-img-text { padding-bottom: 15px; } } @media screen and (max-width: 1200px) { body { font-size: 16px; } .bi-main-slide-item .side-shape { display: none; } .bi-main-slide-item .bi-slide-img-area { max-width: 580px; } .bi-skill-logo-play { max-width: 95px; } .bi-section-title-1 h2 { font-size: 60px; } .bi-banner-content .bi-banner-img { display: none; } .bi-banner-text { padding: 270px 0px 170px; } .bi-key-feature-item { padding: 35px 25px; } .bi-section-title-2 h2 { font-size: 40px; } .bi-portfolio-content-2 { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .bi-consult-btn-area { width: 150px; height: 150px; margin-right: 15px; } .bi-consult-btn-area .bi-consult-btn i { font-size: 45px; margin-bottom: 10px; } .bi-testimonial-item-2 .bi-testimonial-text { max-width: 490px; } .bi-blog-item-2 .blog-img-area { width: auto; height: auto; } .bi-slider-item-3 .bi-slider-img3_2 { right: -250px; } .bi-section-title-3 h2 { font-size: 65px; } .bi-abut-feature-list li { padding: 0px 20px; } .bi-about-text-quote-area { padding-top: 90px; } .bi-about-text-quote-area p { padding-bottom: 25px; } .bi-about-text-quote-area .quote-author { margin-bottom: 30px; } .bi-blog-item-3 { margin: 0 auto; } .bi-pricing-item-area-3 .bi-pricing-item-3 { background-color: #1B1F28; } .bi-pricing-item-area-3 .bi-pricing-item-3 .plan-price { padding: 35px 25px; } } @media screen and (max-width: 1100px) { .bi-header-main-navigation .main-navigation li { margin: 0px 15px; } .bi-header-section.header-style-one .bi-header-cta-btn-grp button { margin-left: 10px; } .bi-header-section.header-style-one .bi-header-cta-btn-grp .offcanves-btn { margin-left: 20px; } .bi-skill-logo-text h2 { font-size: 30px; } .bi-header-section.header-style-one .bi-header-social a { margin-left: 8px; } .bi-header-section.header-style-one .bi-header-social { margin-left: 20px; } .bi-header-logo-main-menu .brand-logo { max-width: 115px; } .bi-header-section .dropdown:after { top: 2px; } .bi-header-section.header-style-one .bi-header-cta-btn-grp { margin-left: 15px; } .bi-header-section.header-style-one .bi-header-content { padding: 15px; } .bi-slider-section { padding-top: 90px; } .bi-skill-logo-play { max-width: 80px; } .bi-section-title-1 h2 { font-size: 55px; } .bi-quality-feature-area { padding-left: 0; } .bi-about-text-area { right: 0; } .bi-fun-fact-img, .bi-fun-fact-img-2 { height: 320px; } .bi-testimonial-area { max-width: 460px; } .bi-testimonial-item .testimonial-text { max-width: 280px; } .bi-faq-content-area { padding: 85px 90px 60px 30px; } .bi-faq-content-area .bi-section-title-1 h2 { font-size: 45px; } .bi-service-list-item a { font-size: 40px; } .bi-service-list-item a img { width: 75px; height: 75px; } .bi-sold-employe-text .bi-section-title-2 h2 { font-size: 30px; } .bi-portfolio-section-2 .bi-side-shape.shape_1 { display: none; } .bi-testimonial-item-2 .bi-testimonial-text { max-width: 400px; } .bi-testimonial-item-2 .bi-testimonial-img { margin-right: 30px; } .bi-testimonial-item-2 .bi-testimonial-text .testimonial-desc { font-size: 18px; } .bi-about-img2_1 { width: 100%; height: 100%; } .bi-header-section.header-style-three .bi-header-content { padding: 17px 20px; } .bi-header-section.header-style-three .bi-header-cta-btn-grp .offcanves-btn { margin-left: 0; } .bi-header-section.header-style-three .bi-header-content { background-image: none !important; background-color: var(--base-color); } .bi-header-section.header-style-three .bi-header-main-navigation .main-navigation li:hover a { color: #000; } .bi-what-we-offer-item .bi-what-we-offer-desc { max-width: 330px; } .bi-section-title-3 h2 { font-size: 55px; } .bi-abut-feature-list li { width: 100%; } .bi-about-img-3 { padding-top: 150px; } .bi-about-img-3:before { display: none; } .bi-portfolio-item-3 { width: 50%; } } @media screen and (max-width: 1024px) { .bi-header-cta-btn-grp .bi-btn-2 a { padding: 15px 20px; } .bi-header-section.header-style-two .bi-header-main-navigation .main-navigation li { margin: 0px 15px; } .bi-key-feature-item .bi-key-feature-text h3 { font-size: 20px; } .bi-sold-employe-counter-item .counter-text h3 { font-size: 20px; } .bi-sold-employe-counter-item .counter-text p { font-size: 18px; } .bi-consult-cta-text-area .bi-section-title-2 h2 { font-size: 40px; } .bi-section-title-2 h2 { font-size: 36px; } .bi-consult-btn-area { margin-bottom: 15px; } .bi-counter-item-3:before, .bi-counter-item-3:after { display: none; } .bi-testimonial-thumb { width: 320px; margin: 0 auto; margin-bottom: 40px; position: static !important; } .bi-testimonial-content { padding-left: 0; } .bi-testimonial-nav { height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bi-testimonial-nav .bi-testimonial-nav-item { width: 95px; } .bi-testimonial-nav .swiper-slide-active .bi-testimonial-nav-item { -webkit-transform: translateX(0); transform: translateX(0); } .bi-testimonial-nav .bi-testimonial-nav-item:before { display: none; } .bi-footer-cta-content-2 .bi-footer-cta-social li { margin-left: 20px; } .bi-footer-widget-2 .widget-title { font-size: 18px; } .bi-slider-wrapper-3 .swiper-slide-active .bi-slider-item-3 .bi-slider-img3_2 { right: -50%; } .bi-what-we-offer-item .bi-what-we-offer-img-title .offer-img { width: 100px; height: 100px; margin-right: 20px; } .bi-what-we-offer-item .bi-what-we-offer-img-title .offer-title h3 { font-size: 26px; line-height: 1.5; } .bi-section-title-3 h2 { font-size: 45px; line-height: 1.5; } .bi-pricing-item-area-3 .bi-pricing-item-3 .plan-price { padding: 15px 20px; } .bi-pricing-item-area-3 .bi-pricing-item-3 .plan-price h3 { font-size: 22px; } .bi-breadcrumbs-content { padding: 200px 0px 180px; } } @media screen and (max-width: 991px) { .haptic__common-h .hap-megamenu, .haptic__common-h .hap-megamenu { position: relative !important; } .header-style-four.sticky-on .mobile_menu_content { display: block; } .mobile_menu_button { display: block; } .bi-header-main-navigation { display: none; } .bi-header-section.header-style-one .bi-header-social { display: none; } .bi-header-section.header-style-one .bi-header-cta-btn-grp .offcanves-btn { display: none; } .bi-header-section.header-style-one .bi-header-cta-btn-grp { margin-left: 0; margin-right: 45px; } .bi-main-slide-text-img-content { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bi-main-slide-item .bi-slide-img-area { margin-bottom: 50px; } .bi-header-section.header-style-one .bi-header-content { padding: 20px 15px; } .bi-slider-section { padding-top: 70px; } .bi-skill-logo-text-area { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 40px; } .bi-skill-logo-wrapper { padding-left: 0; text-align: center; } .bi-skill-logo-wrapper .bi-skill-logo-area { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bi-quality-section { padding-bottom: 80px; } .bi-about-text-area { position: static; margin: 0 auto; margin-top: 40px; } .bi-about-img-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bi-about-text-area .bi-section-title-1 h2 b { color: #0e0e0e; } .bi-about-circle-progress { padding-top: 40px; } .bi-about-circle-progress { margin: 0 auto; max-width: 550px; } .bi-about-section { padding: 100px 0px 60px; } .bi-fun-fact-img { margin: 0 auto; max-width: 405px; display: block; margin-bottom: 30px; } .bi-fun-fact-img-2 { margin: 0 auto; display: block; max-width: 600px; } .bi-counter-item { margin-bottom: 20px; } .bi-portfolio-tab-btn-text { margin: 0 auto; max-width: 550px; } .bi-portfolio-tab-content { margin: 0 auto; max-width: 710px; } .bi-testimonial-item .testimonial-desc-author { padding-left: 0; } .bi-carousel-testimonial { padding-left: 125px; } .bi-fun-fact-text-area-2 { margin: 0 auto; max-width: 600px; margin-bottom: 40px; } .bi-fun-fact-text-area-2 .bi-btn-1 { margin-top: 30px; } .bi-fun-fact-counter-2 { margin: 0 auto; max-width: 500px; } .bi-blog-item { margin: 0 auto; max-width: 605px; margin-bottom: 40px; } .bi-blog-item .bi-blog-text-area .bi-blog-meta { -webkit-transform: translateX(0); transform: translateX(0); } .bi-blog-item .bi-blog-text-area .bi-blog-meta:before { left: 0; right: 0; width: 95%; z-index: -1; } .bi-blog-item .bi-blog-text-area .bi-blog-meta:after { right: 15px; } .bi-blog-item .bi-blog-text-area .bi-blog-text { padding-left: 0; } .bi-blog-item.right_align_content .bi-blog-meta:after { left: 0px; } .bi-blog-item.right_align_content .row { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .bi-faq-testimonial-content { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bi-faq-content-area { width: 100%; max-width: 100%; } .bi-faq-testimonial-section:before { height: 100%; background-size: cover; } .bi-testimonial-slider { -webkit-transform: translateX(0); transform: translateX(0); } .bi-testimonial-area { max-width: 100%; } .bi-testimonial-item { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bi-carousel-testimonial { margin-left: 0; padding-left: 0; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bi-header-section.header-style-two .bi-header-cta-btn-grp .bi-header-search { display: none; } .bi-header-cta-btn-grp .bi-btn-2 { margin-right: 40px; } .bi-header-section.header-style-two .mobile_menu_button { top: -50px; } .bi-key-feature-title-text { max-width: 500px; margin: 0 auto; margin-bottom: 40px; } .bi-key-feature-title-text .bi-section-title-2 { margin-bottom: 25px; } .bi-about-img-wrapper2 { margin: 0 auto; max-width: 600px; margin-bottom: 50px; } .bi-side-shape { display: none !important; } .bi-about-text-area-2 { margin: 0 auto; max-width: 600px; } .bi-sold-employe-content { border-radius: 0; } .bi-sold-employe-text-area { padding-left: 0; margin-bottom: 40px; } .bi-consult-cta-text-area { margin: 0 auto; max-width: 500px; } .bi-consult-form-wrap { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bi-pricing-item-2 { margin-bottom: 40px; } .bi-footer-widget-2 .menu-widget { padding-left: 0; } .bi-footer-widget-2 { margin-bottom: 30px; } .bi-footer-cta-content-2 { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bi-footer-cta-content-2 .bi-footer-cta-social-area { width: 100%; padding-bottom: 30px; } .bi-footer-cta-content-2 .bi-footer-newslatter-form { width: 100%; padding-left: 0; } .bi-about-video-play { margin: 0 auto; max-width: 635px; } .bi-about-img-3 { margin: 0 auto; max-width: 768px; padding-top: 50px; padding-left: 0; } .bi-shape-anim { display: none !important; } .bi-pricing-item-area-3 { margin-bottom: 40px; } .bi-pricing-item-area-3:before { display: none; } .bi-testimonial-content-3 .testimonial-circle { display: none; } .bi-slider-wrapper-3 .swiper-slide-active .bi-slider-item-3 .bi-slider-img3_2 { display: none; } .bi-slider-content-3 .bi-slider-social { display: none; } .bi-main-arrow-next-prev { height: 60px; padding: 0px 30px; margin-left: 15px; -webkit-transform: translateY(0); transform: translateY(0); position: static !important; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; display: inline-block !important; } .bi-slider-item-3 .bi-slider-text-3 { margin-left: 0; } .bi-main-arrow-next-prev .bi-slider-arrow { display: none !important; } .bi-slider-content-3 .slider_shape { display: none; } .bi-main-arrow-next-prev .swiper-paginations .swiper-pagination-bullet { margin: 0px 5px; } .bi-slider-item-3 { padding: 190px 0px 80px; } .bi-slider-content-3 { padding-bottom: 60px; } .bi-what-we-offer-item { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bi-header-section.header-style-three .bi-header-cta-btn-grp .offcanves-btn { display: none; } .bi-header-section.header-style-three { background-color: var(--base-color); } .bi-header-section.header-style-three .bi-header-cta-btn-grp .cart-btn { margin-right: 40px; } .bi-header-section.header-style-three .mobile_menu_button { top: -55px; right: 10px; } .bi-what-we-offer-item { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .bi-what-we-offer-item .bi-what-we-offer-desc { margin: 0px 25px; } .bi-what-we-offer-item .offer-btn { margin-top: 20PX; } .bi-what-we-offer-item .bi-what-we-offer-img-title { margin-bottom: 25PX; } .bi-sponsor-section-3 .sponsor-bg { display: none; } .bi-sponsor-slider-3 { padding: 50px 15px; } .bi-footer-cta-content .bi-footer-cta-text { margin-bottom: 20px; } .bi-blog-details-text-area blockquote { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bi-blog-details-text-area blockquote .inner-img { margin-bottom: 15px; } .bi-career-feed-item .inner-img { margin-bottom: 10px; } .bi-contact-map-content { overflow: hidden; } .bi-contact-map-content .bi-team-details-contact-info { margin-left: 0; padding: 0px 15px; } .ori-agency-team-top-content { -ms-flex-wrap: wrap; flex-wrap: wrap; } .ori-agency-team-btn a { margin-top: 30px; } .ori-agency-team-filter-btn li { margin-bottom: 10px; } .ori-agency-team-item { margin: 0 auto; max-width: 270px; margin-bottom: 30px; } } @media screen and (max-width: 767px) { .bi-portfolio-item-content { text-align: center; } .bi-fun-fact-counter-2 .bi-fun-fact-star { display: none; } .bi-counter-item-2 { text-align: center; } .bi-counter-item-2 h3 { margin: 0 auto; margin-bottom: 5px; } .bi-footer-cta-content { padding: 65px 50px; } .bi-footer-social-content ul li { font-size: 18px; } .bi-sold-employe-text { padding-left: 0; padding-top: 35px; } .bi-counter-item-3 { margin: 0 auto; margin-bottom: 15px; } .bi-testimonial-item-2 .bi-testimonial-img { width: 200px; height: 200px; } .bi-portfolio-item-3 { width: 100%; } .bi-blog-details-text-area .bi-portfolio-details-list-img { margin-bottom: 30px; } .bi-blog-details-author .inner-img { margin-bottom: 15px; } .bi-portfolio-details-video-img { margin-bottom: 30px; } } @media screen and (max-width: 680px) { .bi-footer-cta-content .bi-footer-cta-text { padding-bottom: 15px; } .bi-footer-social-content ul { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bi-footer-social-content ul li { margin: 0px 8px; } .bi-main-slide-item .bi-slide-img-area { max-width: 500px; } .bi-banner-text h1 { font-size: 55px; } .bi-header-section.header-style-two .bi-header-content { padding: 20px 15px; } .bi-banner-text { padding: 220px 15px 120px; } .bi-banner-text p { padding-bottom: 30px; } .bi-key-feature-title-text { padding-top: 0; } .bi-service-list-item a { font-size: 30px; } .bi-testimonial-item-2 { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bi-testimonial-item-2 .bi-testimonial-text { margin-top: 30px; } .bi-slider-item-3 .bi-slider-text-3 h1 { font-size: 60px; line-height: 1.3; } .bi-slider-item-3 .bi-slider-text-3 h1 span { font-size: 80px; } .bi-slider-item-3 .bi-slider-text-3 .slider-img-desc .inner-text { max-width: 335px; } .bi-portfolio-feed-section .bi-portfolio-img-text-3 .portfolio-text .more_btn { display: none !important; } .bi-service-details-text-area .bi-service-details-text h3, .bi-service-details-text-area .bi-service-details-text h4 { font-size: 30px; } .bi-service-feed-item .service-text h3 { font-size: 26px; } .bi-faq-content-area .bi-section-title-1 h2 { font-size: 35px; } } @media screen and (max-width: 480px) { .bi-main-slide-item .bi-slide-img-area { max-width: 290px; } .bi-main-slide-item .bi-slide-img-area .bi-slide-img-arrow { width: 40px; } .bi-main-slide-item .bi-slide-text-area h1 { font-size: 60px; } .bi-main-slide-item .bi-slide-text-area h2 { font-size: 50px; } .bi-main-slider-section .bi-carousel-arrow-next-prev { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: static !important; } .bi-main-slider-section .bi-carousel-arrow-next-prev .bi-main-button-next, .bi-main-slider-section .bi-carousel-arrow-next-prev .bi-main-button-prev { position: static; margin: 0px 8px; } .bi-main-slider-section .bi-carousel-arrow-next-prev .bi-main-button-next:hover, .bi-main-slider-section .bi-carousel-arrow-next-prev .bi-main-button-prev:hover { background-color: var(--base-color); } .bi-main-slider-section .bi-carousel-arrow-next-prev .bi-main-button-next:after, .bi-main-slider-section .bi-carousel-arrow-next-prev .bi-main-button-prev:after { display: none; } .bi-carousel-arrow-next-prev .bi-slider-arrow:hover i { margin-top: 0; } .bi-main-slide-item .bi-slide-text-area { padding-left: 0; } .bi-main-slide-item { padding: 50px; } .bi-main-slide-item .bi-slide-img-area .bi-slide-text-img { width: 140px; margin: 0 auto; } .bi-main-slider-area { padding-bottom: 60px; } .bi-btn-1 a { padding: 15px 30px 13px; } .bi-btn-1 a:before { top: 5px; } .bi-btn-1 a:after { bottom: 5px; } .bi-main-slide-item .bi-slide-text-area li { font-size: 20px; } .bi-section-title-1 h2 { font-size: 40px; } .bi-complete-work-counter h3 { font-size: 50px; } .bi-quality-feature-item .feature-icon { width: 60px; } .bi-quality-feature-item .feature-text h3 { max-width: 70%; } .bi-skill-logo-wrapper .bi-skill-logo-area { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bi-quality-section { padding-bottom: 50px; } .bi-about-section { padding: 60px 0px 30px; } .bi-about-img-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bi-about-img-area2 { margin-top: 40px; } .bi-about-img-area1 .bi-about-img-text { margin-bottom: 20px; } .bi-storyboard-section { padding: 70px 0px 20px; } .bi-storyboard-item h3 { font-size: 45px; } .bi-storyboard-item:before { display: none; } .bi-storyboard-item { margin-bottom: 20px; } .bi-storyboard-list-area { padding-top: 50px; } .bi-fun-fact-section { padding: 60px 0px; } .bi-counter-item h3 { font-size: 45px; margin-right: 20px; } .bi-counter-item:before, .bi-counter-item:after { display: none; } .bi-counter-item { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .bi-portfolio-section { padding: 60px 0px 30px; } .bi-faq-testimonial-section { padding: 60px 0px 80px; } .bi-faq-content-area { padding: 60px 15px 40px; } .bi-testimonial-item .testimonial-text h3 { font-size: 25px; } .bi-testimonial-item .testimonial-text { max-width: 250px; } .bi-testimonial-item .testimonial-img { height: 120px; width: 120px; margin-right: 20px; } .bi-sponsor-content { padding-bottom: 20px; } .bi-fun-fact-section-2 { padding: 60px 0px; } .bi-counter-item-2 h3 span { font-size: 60px; } .bi-play-btn { padding: 120px 0px; } .bi-blog-section { padding: 60px 0px; } .bi-blog-item .bi-blog-text-area h3 { font-size: 30px; } .bi-blog-item .bi-blog-text-area p { padding-bottom: 25px; } .bi-blog-item .bi-blog-text-area .bi-btn-1 a:before { top: 5px; left: -125px; } .bi-blog-item .bi-blog-text-area .bi-btn-1 a:after { bottom: 5px; right: -125px; } .bi-footer-cta-content .bi-footer-cta-text h3 { font-size: 35px; } .bi-footer-widget .about-widget h3 { font-size: 30px; } .scrollup { height: 45px; width: 45px; line-height: 45px; } .bi-storyboard-content .bi-storyboard-title { font-size: 50px; } .bi-footer-widget .widget-title { font-size: 20px; } .bi-banner-text h1 { font-size: 45px; } .bi-btn-2 a { padding: 15px 20px; } .bi-header-cta-btn-grp .bi-btn-2 a { font-size: 10px; } .bi-header-section.header-style-two .mobile_menu_button { top: -45px; } .bi-section-title-2 h2 { font-size: 30px; } .bi-about-img2_2 { width: 200px; height: 200px; } .bi-service-list-item { padding: 0px 20px; } .bi-about-section-2 { padding-bottom: 40px; } .bi-service-section-2 { padding: 40px 0px 60px; } .bi-portfolio-section-2 { padding: 60px 0px; } .bi-consult-cta-text-area .bi-section-title-2 h2 { font-size: 30px; } .bi-consult-form-wrap .bi-consult-form-area .bi-consult-form-input { padding: 40px 30px 0px; } .bi-consult-cta-section { padding: 60px 0px; } .bi-pricing-section-2 { padding: 60px 0px; } .bi-pricing-item-2 { padding: 30px 30px 25px; } .bi-video-play-content-2 { padding: 100px 0px 80px; } .bi-video-play-content-2 .video-play-text h3 { font-size: 30px; } .bi-team-section-2 { padding: 60px 0px 30px; } .bi-counter-item-3 h3 { font-size: 40px; margin-right: 20px; } .bi-counter-item-3 { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .bi-counter-section-3 { padding-bottom: 30px; } .bi-testimonial-section-2 .background_parallax { padding: 60px 0px; } .bi-blog-section-2 { padding: 60px 0px 30px; } .bi-blog-content-2 { padding-top: 25px; } .bi-footer-cta-content-2 .bi-footer-cta-social-area { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .bi-footer-cta-content-2 .bi-footer-newslatter-form { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .bi-footer-cta-text { margin-bottom: 15px; } .bi-footer-cta-content-2 .bi-footer-newslatter-form span { width: 100%; text-align: center; padding-bottom: 15px; } .bi-footer-widget-2 .widget-title { padding-bottom: 20px; } .bi-footer-widget-2 .menu-widget li { margin-bottom: 12px; } .bi-slider-item-3 .bi-slider-text-3 h1 span { font-size: 52px; } .bi-slider-item-3 .bi-slider-text-3 h1 { font-size: 45px; } .bi-slider-item-3 .bi-slider-text-3 .slider-img-desc { margin: 20px 0px; } .bi-slider-item-3 .bi-slider-text-3 .slider-img-desc .inner-img { display: none; } .bi-slider-item-3 .bi-slider-text-3 .slider-img-desc .inner-text { max-width: 100%; } .bi-slider-wrapper-3 .bi-slider-item-3 .bi-slider-text-3 .slider-btn-grp { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bi-slider-item-3 .bi-slider-text-3 .slider-btn-grp .bi-slider-video-play { margin-top: 20px; } .bi-what-we-offer-section { padding: 70px 0px 30px; } .bi-what-we-offer-item .bi-what-we-offer-img-title .offer-title { max-width: 220px; } .bi-what-we-offer-item .bi-what-we-offer-img-title .offer-title h3 { font-size: 22px; } .bi-about-section-3 { padding: 70px 0px; } .bi-about-text-quote-area { padding-left: 0; padding-top: 40px; } .bi-team-section-3 { padding: 70px 0px; } .bi-section-title-3 h2 { font-size: 35px; } .bi-team-item-3 .bi-team-text h3 { font-size: 28px; } .bi-pricing-section-3 { padding: 60px 0px 40px; } .bi-testimonial-section-3 { padding: 70px 0px; } .bi-testimonial-content-3 { padding-top: 30px; } .bi-testimonial-item-3 .quote-icon { display: none; } .bi-testimonial-item-3 .testimonial-img { display: none; } .bi-testimonial-item-3 .testimonial-text { font-size: 18px; line-height: 1.6667; padding-bottom: 25px; } .bi-portfolio-filter-btn { margin-top: 30px; } .bi-portfolio-filter-btn li { margin: 5px; padding: 10px 20px; } .bi-btn-3 a { padding: 8px 20px; } .bi-blog-section-3 { padding: 60px 0px; } .bi-slider-item-3 { padding-bottom: 40px; } .bi-about-text-quote-area p { font-size: 20px; } .bi-breadcrumbs-content { padding: 150px 0px 100px; } .bi-breadcrumbs-content h2 { font-size: 30px; padding-bottom: 20px; } .bi-breadcrumbs-content ul { padding: 12px 25px; } .error-text-btn h3 { font-size: 40px; padding-bottom: 30px; } .error-text-btn { margin-top: 30px; } .bi-footer-cta-content { padding: 50px 30px; } .inner-page-padding { padding: 60px 0px; } .bi-pagination li a { width: 45px; height: 45px; } .bi-blog-feed-item-3 { padding: 15px; } .bi-blog-feed-item-3 .blog-text h3 { font-size: 24px; } .bi-blog-feed-item-3 .blog-author-more .blog-more { margin-top: 15px; margin-left: 15px; } .bi-blog-details-text-area h3 { font-size: 30px; } .bi-blog-details-content { padding: 15px; } .bi-blog-details-text-area h4 { font-size: 24px; } .bi-team-details-contact-info .bi-team-details-contact-title h3 { font-size: 26px; } .bi-blog-details-section .bi-team-details-contact-info { padding: 30px 20px; } .bi-portfolio-details-content h3, .bi-portfolio-details-content h4 { font-size: 30px; } .bi-career-item { background-image: none !important; } .bi-coming-soon-subscription button { padding: 0px 15px; } .bi-team-details-contact-form { padding: 30px 15px; } } @media screen and (max-width: 380px) { .bi-slider-item-3 .bi-slider-text-3 h1 { font-size: 40px; } .bi-slider-item-3 .bi-slider-text-3 .slider-img-desc .inner-text { font-size: 17px; } } @media screen and (max-width: 360px) { .bi-header-cta-btn-grp .bi-btn-2 { display: none; } .bi-header-section.header-style-two .mobile_menu_button { top: -33px; } } /*---------------------------------------------------- */ /*---------------------------------------------------- */ /*Responsive*/ /*----------------------------------------------------*/ @media screen and (max-width: 1500px) { .hap-about-img-area { left: 0; } .hap-about-text-area { max-width: 650px; } .hap-team-slider-content .hap-carousel-arrow-next-prev, .hap-testimonial-content .hap-carousel-arrow-next-prev { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 50px; } .hap-team-slider-content .hap-carousel-arrow-next-prev .hap-team-button-prev, .hap-team-slider-content .hap-carousel-arrow-next-prev .hap-team-button-next, .hap-testimonial-content .hap-testimonial-button-prev, .hap-testimonial-content .hap-testimonial-button-next { width: 50px; color: #fff; height: 50px; position: static; margin: 0px 10px; -webkit-transform: translateY(0); transform: translateY(0); background-color: var(--hap-base-color); } .hap-carousel-arrow-next-prev .hap-slider-arrow:before, .hap-carousel-arrow-next-prev .hap-slider-arrow:after { display: none; } } @media screen and (max-width: 1300px) { .hap-banner-content .hap-banner-image { right: -50px; } } @media screen and (max-width: 1250px) { .hap-banner-content .hap-banner-image { right: -70px; } .hap-section-title .headline-title, .hap-section-title h2 { font-size: 60px; } .hap-about-text-area { max-width: 550px; } .hap-service-scroll-text-area h2 { font-size: 65px; } .hap-service-scroll-text-area h2 .scroller_item_1 li { top: -20px; } .hap-service-scroll-text-area h2 .scroller_item_1.text_scroller_3 { max-width: 600px; } } @media screen and (max-width: 1150px) { .hap-pricing-list-area { padding: 50px 40px 45px; } .hap-faq-accordion-area .hap-section-title h2 { font-size: 60px; } .hap-topic-item .inner-text a { font-size: 18px; } .hap-topic-item { margin: 0px 10px; } .hap-banner-content .hap-banner-image { right: -210px; } .hap-sponsor-content .hap-section-title h2 { font-size: 25px; } .hap-about-img-area { margin: 0 auto; max-width: 500px; margin-bottom: 50px; position: relative !important; } .hap-about-text-wrapper { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .hap-about-section { padding-top: 120px; } .hap-counter-item h3 { font-size: 80px; } } @media screen and (max-width: 1024px) { .hap-header-top-area { display: none; } .hap-header-menu-navigation .main-navigation li { margin: 0px 15px; } .hap-header-menu-navigation { padding: 20px 30px; } .hap-banner-content .hap-banner-image { display: none !important; } .hap-banner-content .hap-banner-text { max-width: 100%; padding: 0px 15px; text-align: center; } .hap-banner-content .hap-banner-text .hap-section-title p { margin: 0 auto; } .hap-banner-content { padding: 250px 0px 150px; } .hap-sponsor-content { margin-top: 0; border-radius: 0; padding-left: 15px; } .hap-banner-section:before, .hap-service-section:before, .hap-service-section:after, .hap-skill-faq-section:before, .hap-skill-faq-section:after, .hap-team-section:before, .hap-team-section:after, .hap-testimonial-section:before, .hap-testimonial-section:after { display: none; } .hap-service-scroll-text-area { padding: 50px 30px; } .hap-pricing-list-area li { font-size: 18px; } .hap-pricing-list-area { margin-left: 0; } .hap-header-section.sticky-on .hap-header-menu-navigation { padding: 20px 15px; } .hap-about-section, .hap-service-section, .hap-pricing-section, .hap-skill-faq-section, .hap-portfolio-section, .hap-team-section, .hap-counter-section, .hap-testimonial-section, .hap-contact-section, .hap-topic-section { padding: 80px 0px; } .hap-testimonial-item .testimoial-text-author { padding: 65px 90px; } .hap-testimonial-item .testimoial-text-author { max-width: 780px; } .hap-blog-section { padding: 80px 0px 50px; } } @media screen and (max-width: 991px) { .hap-header-menu-navigation .main-navigation { display: none; } .hap-header-menu-navigation .hap-header-cta-btn-grp .search-btn { display: none; } .hap-header-menu-navigation .hap-header-cta-btn-grp .cart-btn { margin-right: 45px; } .hap-header-section .mobile_menu_button { top: -56px; display: block; color: var(--hap-base-color); } .hap-header-section { top: 0; background-color: #fff; } .hap-header-menu-navigation { padding: 20px 0px; } .hap-sponsor-content .hap-section-title { margin: 0 auto; text-align: center; margin-bottom: 30px; } .hap-sponsor-content .hap-section-title h2 { font-size: 30px; } .hap-section-title .headline-title, .hap-section-title h2 { font-size: 50px; } .hap-service-item .service-title h3 { font-size: 45px; } .hap-skill-img { margin: 0 auto; display: block; margin-top: 40px; text-align: center; } .hap-faq-img-wrapper { margin: 0 auto; max-width: 540px; margin-bottom: 40px; } .hap-counter-item { text-align: center; margin-bottom: 20px; } .hap-counter-item:before { display: none; } .hap-testimonial-item { -ms-flex-wrap: wrap; flex-wrap: wrap; } .hap-testimonial-item .testimoial-img { margin-bottom: 30px; } .hap-testimonial-item .testimoial-img:before, .hap-testimonial-item .testimoial-img:after { display: none; } .hap-topic-content { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hap-topic-item { margin-bottom: 30px; } .hap-footer-widget .menu-widget { padding-left: 0; } .hap-footer-widget { margin-bottom: 30px; } .hap-footer-widget .widget-title { margin-bottom: 20px; } .hap-footer-widget .newslatter-widget { padding-left: 0; } .hap-footer-content { padding: 80px 0px; } .hap-service-item .service-arrow { display: none; } .hap-service-content { padding-top: 40px; } } @media screen and (max-width: 680px) { .hap-sponsor-logo-area .sponsor-logo { width: 25%; } .hap-service-item { -ms-flex-wrap: wrap; flex-wrap: wrap; } .hap-service-item .hap-service-title-icon { margin-bottom: 20px; } .hap-service-scroll-text-area h2 { font-size: 30px; } .hap-service-scroll-text-area h2 .scroller_item_1 li { top: 10px; font-size: 14px; } .hap-testimonial-item .testimoial-text-author:before, .hap-testimonial-item .testimoial-text-author:after { display: none; } .hap-testimonial-item .testimoial-text-author { border-radius: 0; padding: 40px 20px; background-color: #fff; } .hap-about-feature-item { width: 100%; } .hap-skill-progress-item .skill-arrow { display: none; } .hap-skill-progress-item .skill-icon-text { -ms-flex-wrap: wrap; flex-wrap: wrap; } .hap-skill-progress-item .skill-icon { margin-bottom: 20px; } .hap-skill-progress-area { padding-top: 0; } } @media screen and (max-width: 480px) { .hap-section-title .headline-title, .hap-section-title h2 { font-size: 40px; } .hap-btn a { padding: 15px 25px; } .hap-sponsor-logo-area .sponsor-logo { width: 50%; } .hap-about-feature-area:before, .hap-about-feature-area:after { display: none; } .hap-service-item .service-title h3 { font-size: 30px; } .hap-service-item .service-category a { padding: 8px 20px; } .hap-service-scroll-text-area h2 .scroller_item_1 { margin: 0px 5px; } .hap-pricing-tab-img-price .plan-price-title .plan-price h4 { font-size: 18px; } .hap-pricing-tab-img-price .plan-price-title .price-plan-title h3 { font-size: 22px; } .hap-pricing-tab-img-price .plan-price-title .plan-price { width: 80px; height: 80px; padding: 10px; } .hap-faq-accordion-area .hap-section-title h2 { font-size: 40px; } .hap-faq-img-wrapper .hap-faq-img2 { width: 50%; } .hap-service-item .service-title span { font-size: 16px; } .hap-service-scroll-text-area h2 { font-size: 20px; } .hap-service-scroll-text-area h2 .scroller_item_1 li { top: 18px; } .hap-service-scroll-text-area h2 img { display: none; } .hap-team-item .team-img:before { height: 80%; } .hap-footer-widget .tranding-service li a { width: 85px; } } @media screen and (max-width: 380px) { .hap-banner-content { padding: 200px 0px 150px; } } /*---------------------------------------------------- */ /*---------------------------------------------------- */ /*Responsive area*/ /*----------------------------------------------------*/ @media screen and (max-width: 1800px) { .bi-counter-section-4 .counter-landing.bi-counter-landing1 { left: -50%; } .bi-counter-section-4 .counter-landing.bi-counter-landing3 { left: -40%; } .bi-counter-section-4 .counter-landing.bi-counter-landing2 { left: -57%; } .bi-scroll-img-section { height: 550px; } } @media screen and (max-width: 1500px) { .bi-why-choose-us-area-2 .bi-why-choose-textarea { margin-left: 50px; } .bi-counter-section-4 .counter-landing.bi-counter-landing1 { left: -55%; } .bi-counter-section-4 .counter-landing.bi-counter-landing3 { left: -50%; } .bi-counter-section-4 .counter-landing.bi-counter-landing2 { left: -65%; } .bi-slider-section-4 { background-image: none !important; background-color: #192140; } .bi-main-slider-item-4 .slider_men { bottom: 0; } } @media screen and (max-width: 1400px) { .bi-main-slider-next-prev .bi-main-slider-arrow-4.bi-main-button-prev-4 { left: -75px; padding-right: 30px; } .bi-main-slider-next-prev .bi-main-slider-arrow-4.bi-main-button-next-4 { right: -75px; padding-left: 30px; } .bi-main-slider-next-prev .bi-main-slider-arrow-4 { width: 150px; height: 150px; font-size: 30px; } .bi-counter-section-4 .counter-landing.bi-counter-landing1 { left: -60%; } .bi-counter-section-4 .counter-landing.bi-counter-landing3 { left: -55%; } .bi-counter-section-4 .counter-landing.bi-counter-landing2 { left: -70%; } } @media screen and (max-width: 1300px) { .bi-counter-section-4 .counter-landing.bi-counter-landing1 { left: -70%; } .bi-counter-section-4 .counter-landing.bi-counter-landing3 { left: -65%; } .bi-counter-section-4 .counter-landing.bi-counter-landing2 { left: -80%; } } @media screen and (max-width: 1250px) { .bi-about-img-wrapper4 .about-circle-shape { display: none; } .bi-about-text-4 .bi-section-title-4 { max-width: 650px; } .bi-section-title-4 h2 { font-size: 50px; } .bi-about-btn-cta { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bi-portfolio-section-4 .bi-title-waterprint, .bi-testimonial-section-4 .bi-title-waterprint { display: none; } .bi-counter-section-4 .counter-landing.bi-counter-landing1 { left: -80%; } .bi-counter-section-4 .counter-landing.bi-counter-landing3 { left: -75%; } .bi-counter-section-4 .counter-landing.bi-counter-landing2 { left: -90%; } .bi-header-section.header-style-four.sticky-on { max-width: 80%; } .bi-header-main-navigation .main-navigation li { margin: 0px 18px; } .bi-header-section .bi-header-cta-btn-grp .offcanves-btn { margin-left: 20px; } .bi-header-section .bi-header-cta-btn-grp button { margin-left: 10px; } .bi-header-section .bi-header-cta-btn-grp { margin-left: 15px; } .bi-main-slider-next-prev .bi-main-slider-arrow-4 { bottom: 20px; } .bi-main-slider-item-4 .bi-main-slider-text .bi-slider-text { right: 15px; } .bi-team-item-4 .team-text h3 { font-size: 28px; } .bi-title-waterprint { display: none; } } @media screen and (max-width: 1100px) { .bi-counter-section-4 .counter-landing.bi-counter-landing1, .bi-counter-section-4 .counter-landing.bi-counter-landing2, .bi-counter-section-4 .counter-landing.bi-counter-landing3 { display: none; } .bi-counter-section-4 { padding: 120px 0px; } .bi-counter-content-4 { -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .bi-scroll-img-section { height: 400px; } } @media screen and (max-width: 1024px) { .bi-main-slider-item-4 .bi-main-slider-text .slide-text__title strong { font-size: 220px; } .bi-why-choose-feature ul li { font-size: 22px; } .bi-service-title-text h2 { font-size: 50px; } .bi-why-choose-us-area-2 .bi-why-choose-textarea { margin-left: 0; } .bi-main-slider-item-4 .slider_men { display: none; } .bi-about-text-4 .bi-section-title-4 { max-width: 100%; position: static; } .bi-section-title-4 h2 { font-size: 40px; } .bi-about-text-area-4 { padding-top: 30px; } .bi-why-choose-textarea .accordion-button { font-size: 16px; padding-top: 10px; } .bi-team-item-4 .team-img { width: auto; height: auto; } .bi-team-item-4 .team-text h3 { font-size: 22px; } .bi-team-item-4 { padding: 30px 20px; } .bi-header-section .bi-header-cta-btn-grp .offcanves-btn { display: none; } .bi-portfolio-item-4 .portfolio-text h3 { font-size: 30px; } .bi-blog-item-4 .blog-author-more { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bi-blog-item-4 .blog-text h3 { font-size: 22px; } .bi-header-section.header-style-four { border-radius: 0; padding: 20px 15px; } .bi-header-section.header-style-four.sticky-on { top: 0; bottom: auto; max-width: 100%; border-radius: 0; padding: 10px 15px; -webkit-animation-name: slideInDown; animation-name: slideInDown; } } @media screen and (max-width: 991px) { .bi-about-img-wrapper4 { margin: 0 auto; max-width: 600px; margin-bottom: 40px; } .bi-about-text-4 { margin: 0 auto; max-width: 550px; } .bi-text-scroll-item-1 h3 { font-size: 100px; } .bi-why-choose-img1-area { max-width: 550px; } .bi-why-choose-textarea { margin: 0 auto; margin-top: 40px; } .bi-why-choose-us-area-2 .bi-why-choose-textarea { margin: 0 auto; } .bi-why-choose-img2-area { margin: 0 auto; margin-top: 50px; max-width: 550px; } .bi-portfolio-item-4 { margin: 0 auto; margin-bottom: 40px; } .bi-pricing-text-area-4 { margin: 0 auto; max-width: 550px; margin-bottom: 40px; } .bi-pricing-plan-content-4 .bi-pricing-item-4:nth-child(2) { position: static; -webkit-transform: translate(0%) scale(1); transform: translate(0%) scale(1); } .bi-pricing-plan-content-4 .bi-pricing-item-4 { width: 50%; margin: 20px; } .bi-pricing-plan-content-4 { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bi-header-section.header-style-four .bi-header-main-navigation { display: none; } .bi-header-section.header-style-four .bi-header-social { display: none; } .bi-header-section .bi-header-cta-btn-grp { margin-right: 50px; } .mobile_menu_button { display: block; } .bi-main-slider-item-4 .bi-main-slider-text .bi-slider-text { max-width: 100%; position: static; margin-top: 40px; text-align: center; padding-bottom: 30px; } .bi-main-slider-item-4 .bi-main-slider-text .bi-slider-text p { padding-bottom: 20px; } .bi-main-slider-item-4 .bi-main-slider-text .slide-text__title, .bi-main-slider-item-4 .bi-main-slider-text .slide-text__title span, .bi-main-slider-item-4 .bi-main-slider-text .slide-text__title strong { font-size: 90px; display: block; text-align: center; } .bi-main-slider-item-4 .bi-slider-watch-video { display: none; } .bi-main-slider-item-4 { padding: 180px 15px 80px; } .bi-portfolio-item-wrapper-2 { padding-left: 0; margin-top: 0; } } @media screen and (max-width: 850px) { .bi-service-top-content-4 { -ms-flex-wrap: wrap; flex-wrap: wrap; } .bi-service-top-content-4 .bi-section-title-4 { margin-bottom: 20px; } .bi-service-section-4_2 { display: none; } .bi-scroll-img-section { display: none; } .bi-blog-section-4 { padding-top: 100px; } } @media screen and (max-width: 680px) { .bi-pricing-plan-content-4 { display: block; } .bi-pricing-plan-content-4 .bi-pricing-item-4 { width: 100%; margin: 0 auto; margin-bottom: 40px; } } @media screen and (max-width: 480px) { .bi-main-slider-item-4 .bi-main-slider-text .slide-text__title, .bi-main-slider-item-4 .bi-main-slider-text .slide-text__title span, .bi-main-slider-item-4 .bi-main-slider-text .slide-text__title strong { font-size: 60px; } .bi-about-img-wrapper4 .about-img2 { position: static !important; margin-top: 30px; } .bi-about-img-wrapper4 { padding-bottom: 40px; } .bi-section-title-4 h2 { font-size: 36px; } .bi-about-text-area-4 { padding-left: 0; } .bi-abut-feature-list-4 li { width: 100%; } .bi-about-section-4 { padding: 60px 0px; } .bi-service-section-4 { padding-top: 60px; } .bi-why-choose-img1-area .why-choose-img3, .bi-why-choose-img1-area .why-choose-img5 { display: none; } .bi-why-choose-us-section-4 { padding: 60px 0px; } .bi-why-choose-us-content { padding-top: 0; } .bi-why-choose-feature ul li { width: 100%; } .bi-why-choose-us-area-1 { margin-bottom: 60px; } .bi-portfolio-item-4 .portfolio-text .portfolio-category a { padding: 5px 15px; margin-bottom: 5px; } .bi-pricing-section-4 { padding: 60px 0px; } } /*---------------------------------------------------- */ /*Footer area*/ /*----------------------------------------------------*/ .bi-footer-cta { z-index: 1; } .bi-footer-cta:before { top: 0; left: 0; width: 100%; content: ""; z-index: -1; height: 50%; position: absolute; background-color: #fff; } .bi-footer-cta.black-footer:before { background-color: #070506; } .bi-footer-cta-content { overflow: hidden; padding: 65px 105px; border-radius: 10px; } .bi-footer-cta-content .bi-footer-cta-text { max-width: 345px; } .bi-footer-cta-content .bi-footer-cta-text h3 { color: #fff; font-size: 45px; font-weight: 600; line-height: 1.222; } .bi-footer-widget-content { padding: 90px 0px 50px; } .bi-footer-widget { margin-bottom: 40px; } .bi-footer-widget .widget-title { color: #fff; font-size: 26px; font-weight: 600; position: relative; padding-bottom: 5px; margin-bottom: 23px; display: inline-block; } .bi-footer-widget .widget-title:before { left: 0; bottom: 0; height: 1px; content: ""; width: 100%; position: absolute; background-color: #fff; } .bi-footer-widget .about-widget { max-width: 440px; } .bi-footer-widget .about-widget h3 { color: #fff; font-size: 40px; font-weight: 700; padding-bottom: 12px; } .bi-footer-widget .about-widget p { color: #d4d4d4; } .bi-footer-widget .menu-widget li { margin-bottom: 8px; } .bi-footer-widget .menu-widget li a { color: #e3e3e3; font-size: 15px; position: relative; } .bi-footer-widget .menu-widget li a:before { left: 0; bottom: 0; right: 0; width: 0%; content: ""; height: 1px; margin: 0 auto; position: absolute; background-color: var(--base-color); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-footer-widget .menu-widget li a:hover { color: var(--base-color); } .bi-footer-widget .menu-widget li a:hover:before { width: 100%; } .bi-footer-social-content { padding-bottom: 15px; border-bottom: 1px solid #313131; } .bi-footer-social-content ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bi-footer-social-content ul li { color: #fff; font-size: 21px; font-weight: 600; font-family: var(--heading); } .bi-footer-social-content ul li i { font-size: 17px; margin-right: 8px; } .bi-footer-social-content ul li a:hover { color: var(--base-color); } .bi-footer-logo { padding: 30px 0px; border-bottom: 1px solid #313131; } .bi-footer-logo .logo-mail { color: #fff; font-size: 30px; padding-top: 10px; } .bi-footer-copyright { padding: 15px 0; font-size: 14px; color: var(--base-color); font-family: var(--heading); } .bi-footer-section-2 { background-color: #0e0f19; } .bi-footer-cta-content-2 { padding: 50px 0px; border-bottom: 1px solid #1f2031; } .bi-footer-cta-content-2 .bi-footer-cta-social-area { width: 50%; padding-right: 65px; } .bi-footer-cta-content-2 .bi-footer-cta-text .inner-icon { width: 50px; height: 50px; margin-right: 20px; border-radius: 100%; background-color: #fff; } .bi-footer-cta-content-2 .bi-footer-cta-text .inner-icon i { color: var(--base-color); } .bi-footer-cta-content-2 .bi-footer-cta-text .inner-text span, .bi-footer-cta-content-2 .bi-footer-cta-text .inner-text a { display: block; } .bi-footer-cta-content-2 .bi-footer-cta-text .inner-text span { font-size: 12px; font-weight: 400; color: var(--base-color); } .bi-footer-cta-content-2 .bi-footer-cta-text .inner-text a { color: #f5f9fa; font-size: 15px; font-weight: 700; } .bi-footer-cta-content-2 .bi-footer-cta-social li { margin-left: 30px; } .bi-footer-cta-content-2 .bi-footer-cta-social li a { color: #fff; font-size: 15px; } .bi-footer-cta-content-2 .bi-footer-cta-social li a:hover { color: var(--base-color); } .bi-footer-cta-content-2 .bi-footer-newslatter-form span { color: #f5f9fa; font-size: 15px; font-weight: 700; max-width: 110px; } .bi-footer-cta-content-2 .bi-footer-newslatter-form .bi-footer-newslatter { width: 100%; max-width: 410px; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input { width: 100%; height: 57px; border: none; font-size: 11px; padding-left: 20px; border-radius: 30px; background-color: #1f2031; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input::-webkit-input-placeholder { color: #54357d; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input::-moz-placeholder { color: #54357d; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input:-ms-input-placeholder { color: #54357d; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input::-ms-input-placeholder { color: #54357d; } .bi-footer-cta-content-2 .bi-footer-newslatter-form input::placeholder { color: #54357d; } .bi-footer-cta-content-2 .bi-footer-newslatter-form button { top: 0; right: 0; color: #fff; height: 57px; border: none; position: absolute; padding: 0px 30px; border-radius: 30px; background-color: #301256; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .bi-footer-cta-content-2 .bi-footer-newslatter-form button:hover { background-color: var(--base-color); } .bi-footer-widget-content-2 { padding: 70px 0px; } .bi-footer-widget-2 .widget-title { color: #fff; font-size: 22px; font-weight: 600; padding-bottom: 32px; } .bi-footer-widget-2 .logo-widget .brand-logo { padding-bottom: 25px; } .bi-footer-widget-2 .logo-widget .logo-info { margin-bottom: 30px; } .bi-footer-widget-2 .menu-widget { padding-left: 100px; } .bi-footer-widget-2 .menu-widget li { margin-bottom: 18px; } .bi-footer-widget-2 .menu-widget li a { position: relative; } .bi-footer-widget-2 .menu-widget li a:before { left: 0; top: 10px; width: 0px; height: 1px; content: ""; position: absolute; -webkit-transition: all 500ms ease; transition: all 500ms ease; background-color: var(--base-color); } .bi-footer-widget-2 .menu-widget li a:hover { padding-left: 22px; } .bi-footer-widget-2 .menu-widget li a:hover:hover { color: var(--base-color); } .bi-footer-widget-2 .menu-widget li a:hover:hover:before { width: 15px; } .bi-footer-copyright-content-2 { color: #fff; font-size: 15px; padding: 30px 0px; border-top: 1px solid #1f2031; } .tx-shadowNone { box-shadow: none !important; } #hpt-header-9 .main-navigation ul > li.dropdown::after, #hpt-header-8 .main-navigation ul > li.dropdown::after, #mobile_menu ul > li.has-dropdown::after, #main-nav > li.dropdown::after { top: 5px; color: #fff; right: -15px; content: "\f107"; font-size: 14px; font-weight: 700; font-weight: 900; position: absolute; font-family: "font awesome 5 pro"; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } .header-2-transparent #mobile_menu ul > li.has-dropdown::after, .white-bg-header #main-nav > li.dropdown::after { color: #000; } #hpt-header-9 .main-navigation ul > li.dropdown::after, #hpt-header-8 .main-navigation ul > li.dropdown::after, #mobile_menu ul > li.has-dropdown::after { top: 40% !important; } #hpt-header-9 .main-navigation ul ul > li.dropdown::after, #hpt-header-8 .main-navigation ul ul > li.dropdown::after, #hpt-header-8 .dropdown-menu li.dropdown::after { top: 49% !important; right: 20px; } #hpt-header-8 .submenu li.dropdown::after, #mobile_menu .submenu li.has-dropdown::after { right: 20px; top: 35% !important; } .elementor-editor-active .header-2-transparent, .elementor-editor-active header { position: static !important; } @media(max-width: 575px) { .hap-pricing-tab-img-price .plan-price-title { position: static !important; background: #0e1419; border-radius: 20px; margin-top: 20px; flex-direction: column; align-items: flex-start !important; gap: 20px; } .hap-pricing-tab-img-price .plan-price-title .price-plan-title { width: 100%; } } .noSticky.sticky-on { display: none; } .bi-service-feed-item .service-text .read_more.has-btn { width: max-content; padding: 10px 30px; } .bi-service-feed-item .service-text .read_more.has-btn span { margin-left: 8px; } /*---------------------------------------------------- */ .show991 { display: none; } @media(max-width: 991px) { .show991 { display: inline-block; } .hide991 { display: none; } .scroller_item_1 div { animation-duration: 25s !important; } } .has-sticky-logo .sticky-logo { display: none; } .sticky8 .has-sticky-logo .default-logo { display: none; } .sticky8 .has-sticky-logo .sticky-logo { display: inline-block; } ul#filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } ul#filters li { margin: 0; }