@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap); .content h2, .ver_mas i { font-size: 2rem; } #coming, .pop { z-index: 9999; } .screen .lay3, .screen .lay4, .screen .layout1, .screen .out2 { top: 0; z-index: 0; height: auto; } *, .screen .lay3, .screen .lay4, .screen .layout1, .screen .out2 { margin: 0; padding: 0; } .content h2, .pCard h5, .sliderCont i, .themeCard h4, .themeCard p { text-align: center; } #submit input, .bpoSec3 .row .col a { font-weight: 700; background-image: linear-gradient(270deg, #e84c9a 0, #ffa838 100%); } #seoDes p, #seoDes ul, .pCard h5 { margin-top: 1rem; } #backImg, .heroPoster, .pop, .screen { overflow: hidden; } .nextBtn, a, a:hover, button, button:hover { text-decoration: none; } *, .cursor-outer, ::after, ::before { box-sizing: border-box; } #preloader, body { background-color: var(--theme-bg); } .progress-wrap span::after, .progress-wrap span::before { font-family: "Font Awesome 6 Pro"; line-height: 34px; font-size: 16px; } .Slicarousel.dragging img, .mouseCursor { pointer-events: none; } .offer .offer__cta h2 a i, .offer-two .offer__cta h2 a i { -webkit-text-stroke: 1px #404040; -webkit-text-fill-color: rgba(0, 0, 0, 0); } .next-page .next__text-slider-single:nth-of-type(2n) h2 a:hover, .portfolio .portfolio__text-slider-single:nth-of-type(2n) h2 a:hover, .testimonial .testimonial__text-slider-single h2 a:hover { -webkit-text-stroke-color: var(--primary-color); } .banner .interval i, .service-t .service-t-single-wrapper:hover .cta a i { -webkit-text-stroke: 1px var(--primary-color); } :root { --inter: "Inter", sans-serif; --theme-font: var(--inter); --theme-bg: #000000; --theme-color: #ffffff; --white: #ffffff; --black: #000000; --primary-color: #ff7425; --secondary-color: #757575; --tertiary-color: #0e0e0e; --quaternary-color: #040404; --quinary-color: #c1c1c1; --senary-color: #191919; --septenary-color: #101010; --octonary-color: #1a1a1a; --nonary-color: #d9d9d9; --transition: all 0.3s ease-in-out; --shadow: 0 0 12px rgba(0, 0, 0, 0.1); --shadow-secondary: 0 0 31px rgba(0, 0, 0, 0.1); } ::-moz-selection { color: #fff; background-color: #1770c8; } ::selection { color: #fff; background-color: #1770c8; } html { scroll-behavior: smooth; } body { font-family: var(--theme-font); font-size: 16px; line-height: 0; font-weight: 400; color: var(--theme-color); overflow-x: clip; max-width: 100vw; font-family: Oxygen, sans-serif; color: #050505; } body::-webkit-scrollbar { width: 5px; } body::-webkit-scrollbar-track { background-color: #cae6f7; border-radius: 5px; } body::-webkit-scrollbar-button, body::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 5px; } .whatChat::-webkit-scrollbar { background-color: #fff; width: 0.5rem; border-radius: 6px; } .whatChat::-webkit-scrollbar-thumb { background: linear-gradient(#f4944c, #f4854c, #e65093, #f45c61, #ec4c75); width: 0.5rem; border-radius: 6px; } .pop { position: fixed; left: 50%; width: 400px; height: 520px; background: linear-gradient(to right, #ef4971, #f79649); transform: translateX(-50%); border-radius: 6px; top: 30px; box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px; display: none; } #coming, #showWork, .blogSearch, .buy, .content, .sliderCont { position: relative; } .content, .content ul { display: flex; gap: 1rem; } .content { top: -20px; width: 100%; height: 270px; border-radius: 100% 0/22% 66% 34% 78%; background-color: #000; z-index: 121221; align-items: center; flex-direction: column; padding: 2rem 1rem; } .content h2 { color: #fff; font-weight: 700; text-transform: uppercase; } .content ul { color: #fff; font-size: 0.8rem; } .buy { display: inline-block; width: 7rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #ef4971, #f79649); color: #fff; border-radius: 6px; font-weight: 700; animation: 1s infinite bounce; } @keyframes bounce { 0% { transform: translateY(-20px); } 25% { transform: translateY(-10px); } 50% { transform: translateY(0); } 100%, 75% { transform: translateY(-5px); } } .pop i { position: absolute; top: 12px; right: 12px; color: #fff; z-index: 21; } @media (max-width: 480px) { .pop { width: 300px; height: 420px; } .content ul li, .content ul li span { font-size: 0.8rem; } } @media (min-width: 1400px) { .pop { top: 100px; } .buy { padding: 1rem; } } #showMore { opacity: 0; visibility: hidden; height: 0; transition: 1s; } #showMore.visibleNow { opacity: 1; height: 100%; visibility: visible; } .seeClicked { font-size: 1.3rem; cursor: pointer; transition: 1s; animation: 1s infinite jump; } @keyframes jump { from { transform: translateY(10px); } to { transform: translateY(0); } } .seeMore h2 { margin-block: 2rem; } .seeClicked:hover, .showCase h4, .text-primary, .ux-process .container h3, .webService .text-center h4 { color: var(--primary-color); } #custom ul li a:hover::before, .appPromise, .bpoSec3 .row, .thumb a video { width: 100%; } .sliderCont { display: flex; max-width: 100%; } .sliderCont i { top: 50%; height: 44px; width: 44px; color: #343f4f; cursor: pointer; font-size: 1.15rem; position: absolute; line-height: 44px; background: #fff; border-radius: 50%; transform: translateY(-50%); transition: transform 0.1s linear; } .comDes h4 span, .comDes p, .themeCard p { font-size: 0.9rem; } .sliderCont i:active { transform: translateY(-50%) scale(0.9); } .sliderCont i:hover { background: #f2f2f2; } .sliderCont i:first-child { left: -22px; display: none; } .sliderCont i:last-child { right: -22px; } .sliderCont .Slicarousel { font-size: 0px; cursor: pointer; overflow: hidden; white-space: nowrap; scroll-behavior: smooth; } .Slicarousel.dragging { cursor: grab; scroll-behavior: auto; } .Slicarousel img { height: 340px; object-fit: cover; user-select: none; margin-left: 14px; width: calc(100% / 3); } .Slicarousel img:first-child { margin-left: 0; } @media screen and (max-width: 900px) { .SliSlicarousel img { width: calc(100% / 2); } } @media screen and (max-width: 550px) { .Slicarousel img { width: 100%; } } .blogSearch { border: 1px solid #eee; } .blogSearch ul, .frame, .screen .lay3, .screen .lay4, .screen .layout1, .screen .out2 { position: absolute; } .blogSearch ul { color: #000; width: 100%; display: flex; } .blogSearch ul li a img, .comment img { width: 3.5rem; object-fit: cover; } .blogSearch ul li a { display: flex; padding: 0.7rem 0.6rem; background-color: #fff; transition: 0.6s; } .blogSearch ul li a:hover { background-color: #e6e2e2; } .blogSearch ul li a .searchRes { display: flex; flex-direction: column; gap: 0.4rem; } .blogSearch ul li a .searchRes h5 { font-size: 0.8rem; line-height: 1.2rem; color: #000; } .comMain, .commentSec, .connectPoints .points .pointCard .pointCHead { gap: 1rem; } .comment { height: 100%; display: flex; gap: 1rem; align-items: center; justify-content: unset; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); padding: 1rem; } .comment img { height: 3.5rem; border-radius: 50%; } .comDes, .comDes h4 { width: 100%; display: flex; } .comDes { flex-direction: column; gap: 0.1rem; } .comDes h4 { justify-content: space-between; } .comDes h4 span { margin-right: 1rem; } @media (max-width: 900px) { .comment { padding: 0.4rem; flex-direction: column; } .comDes h4 { flex-direction: column; align-items: center; } .comDes p { text-align: center; } } .showMore { visibility: visible; opacity: 0; height: 0; transition: 2s; } #coming { top: 0; left: 0; width: 200px; opacity: 0; height: 200px; transition: 0.4s linear; } #showWork { display: flex; flex-wrap: wrap; } .frame { height: 647px; left: 50%; } #submit input, .pCard, .screen, .themeCard, span:nth-child(2) { position: relative; } .portShow { width: 100%; justify-content: space-between; } .appCard p, .portShow .content { padding: 0; } .screen { display: block; width: 250px !important; height: 500px; border: 2px solid #b3b3b3; border-radius: 10px; margin: 0 auto; } .inp, .themeCard h4, .webService .text-center h2 { margin-block: 1rem; } .screen:hover { box-shadow: -1px 7px 12px #ffa43b; } .screen .layout1 { width: 100%; -webkit-transition: top 4s; -moz-transition: top 4s; -ms-transition: top 4s; -o-transition: top 4s; transition: top 4s; } .screen .out2 { width: 100%; -webkit-transition: top 1s; -moz-transition: top 4s; -ms-transition: top 4s; -o-transition: top 4s; transition: bottom 4s; } .screen .out2:hover { top: -320px; } .screen .lay3 { width: 100%; -webkit-transition: top 4s; -moz-transition: top 11s; -ms-transition: top 11s; -o-transition: top 11s; transition: bottom 11s; } .screen .lay3:hover { top: -510px; } .screen .lay4 { width: 100%; -webkit-transition: top 11s; -moz-transition: top 11s; -ms-transition: top 11s; -o-transition: top 11s; transition: bottom 11s; } .pCard::before, .themeCard::before { top: 0; height: 0; display: flex; opacity: 0; left: 0; } .screen .lay4:hover { top: -145px; } .screen:hover img { top: -606px; -webkit-transition: 4s; -moz-transition: 4s; -ms-transition: 4s; -o-transition: 4s; transition: 4s; } #bpoContact { width: 100%; border: 1px solid #eee; } .bpoSec3 .row .col { width: 100%; display: flex; justify-content: space-evenly; } .bpoSec3 .row .col a { width: 8rem; height: 3rem; border-radius: 30px; display: flex; align-items: center; justify-content: center; background-color: transparent; transition: 1s; } .footer .social a::before, .footer-two .social a i { background-image: linear-gradient(180deg, #f90 0, #ee332b 100%); } .bpoSec3 .row .col a:hover { color: #fff; } @media (max-width: 400px) { .bpoSec3 .row .col { flex-direction: column; align-items: center; gap: 1rem; } } .bpoCusCards { gap: 2rem; flex-wrap: wrap; } .themeCard { width: 20rem; height: 24rem; border-radius: 8px; background-color: transparent; background-image: linear-gradient(180deg, #ffa838 0, #e84c9a 100%); padding: 2rem; } .bpoConnect, .themeCard::before { width: 100%; background-color: #fff; } .themeCard::before { content: "Virtual Assistant Services"; position: absolute; align-items: center; justify-content: center; transition: 1s; border-radius: 8px; } .pCard::before, .ux-process .container .proHead::before { position: absolute; background-color: var(--primary-color); } .app, .bpoConnect { justify-content: space-around; } .themeCard:hover::before { height: 100%; opacity: 1; } #cusSupport::before, #cussSupport::before { content: "24/7 Customer Support"; } #Skilledagents::before { content: "Skilled Agents"; } #inbound::before { content: "Inbound Calls"; } .themeCard img { width: 4rem; } .bpoConnect { padding: 3rem; } .connectDes { width: 40%; } .connectDes h2 { color: #000; font-size: 2.5rem; } #custom ul li a, .mobileDes p { font-size: 1.1rem; } .bpoCards .morphCard h4, .bpoCards .morphCard p, .connectDes p, .connectPoints .points .pointCard .pointCHead h6 { color: #000; } .connectPoints .points { gap: 8rem; flex-wrap: wrap; margin-bottom: 2rem; } .connectPoints .points .pointCard p { color: #000; padding-left: 2.5rem; margin-top: 0.3rem; font-size: 0.9rem; } .banner .banner__content-inner .single p, .banner-two .banner-two__meta .single p { margin-top: 6px; text-transform: capitalize; color: var(--secondary-color); } .connectPoints .points .pointCard .pointCHead img { width: 3rem; box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; padding: 0.2rem; } .mobileDes { padding-top: 2rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); } .appCard, .pCard, .pCard::before { border-radius: 6px; } .app { width: 100%; height: 100%; } .appFirst { width: 24rem; } .appCard { width: 100%; height: 28rem; justify-content: space-around; margin-top: 2rem; --color: #fff; --border: 10px; --offset: 20px; --gap: 20px; --_c: var(--color) var(--border), #0000 0 calc(100% - var(--border)), var(--color) 0; --_o: calc(3 * var(--offset)); padding: calc(var(--gap) + var(--border)) calc(var(--gap) + var(--border) + var(--offset)) calc(var(--gap) + var(--border) + var(--offset)) calc(var(--gap) + var(--border)); background: linear-gradient(var(--_c)) var(--_o) var(--_o), linear-gradient(90deg, var(--_c)) var(--_o) var(--_o); background-size: calc(100% - var(--_o)) calc(100% - var(--_o)); background-repeat: no-repeat; filter: grayscale(0.4); transition: 0.5s; cursor: pointer; } .appCard:hover { background-position: 0 0; background-size: calc(100% - var(--offset)) calc(100% - var(--offset)); filter: grayscale(0); } .appCard img { width: 7rem; } .appPromise p { padding-inline: 10rem; } .promise { width: 100%; height: 100%; flex-wrap: wrap; gap: 2rem; justify-content: center; } .pCard { width: 10rem; height: 12rem; background-color: #fff; padding: 1rem; cursor: pointer; } .pCard::before { content: "Offline Functionality"; align-items: center; justify-content: center; width: 100%; transition: 0.8s; color: #fff; padding: 0.4rem; } #motion::before { content: "Motion Sensors"; } #AI::before { content: "AI Solutions"; } #realTime::before { content: "Real-time Tracking"; } #machine::before { content: "Machine Learning"; } #currency::before { content: "Multi-Currency"; } #Multilinguality::before { content: "Multilinguality"; } #Live::before { content: "Live Streaming"; } #face::before { content: "Face Detection"; } #google::before { content: "Google Indoor-Maps"; } #Dark::before { content: "Dark Mode"; } #Emoji::before { content: "Emoji"; } #Payment::before { content: "Payment Gateway"; } #code::before { content: "Barcode Scanner"; } #voice::before { content: "Voice Search"; } #Chatbot::before { content: "Chatbot"; } .pCard:hover::before { opacity: 1; width: 100%; height: 100%; } .pCard img { width: 5rem; } .pc1 img { padding-left: 1rem; } .pCard h5 { color: #000; } .contactForm { width: 100%; height: 100%; padding-top: 2rem !important; background-color: #e7e2e2; } .contactForm form { width: 100%; height: 48rem; } .contactForm form h4 { color: var(--primary-color); font-size: 20px; font-weight: 700; } .inputs { width: 100%; display: flex; flex-direction: column; } .userInp { display: flex; width: 100%; align-items: center; justify-content: center; } .inpFields { margin-left: 1rem; width: 100%; } .inp { display: flex; flex-direction: column; width: 100%; justify-content: center; justify-content: flex-start; } .alignFe { align-items: flex-end; } .col-lg-6 input { width: 80%; padding: 0.5rem 1rem; border-radius: 2px; color: #000; } .col-12 label { width: 80%; display: inline-block; } .col-12 select, .col-lg-6 #service { width: 80%; padding: 0.8rem 1rem; border-radius: 2px; color: #000; } .col-lg-6 input::placeholder { color: #767676; } .col-lg-6 input:focus { outline: #d6d2d2 solid 2px; } .col-10 textarea { width: 97%; height: 2rem; color: #000; border-radius: 2px; padding: 1rem; } .error { color: red; font-style: normal; padding-left: 0.3rem; margin-top: 0.2rem; text-align: left; width: 60%; display: none; } #submit { align-items: center; } #submit input { border-radius: 20px; color: #fff; width: 78%; transition: transform 0.6s; } #submit input:hover, .morphCard:hover { transform: translateY(-10px); } @media only screen and (max-width: 1200px) { .contactForm { height: 60rem; } .userInp { flex-direction: column; margin: 0; } .alignFe { align-items: flex-start; } .inp { align-items: center; } #submit input, .inp input, .inp p, .inp select, .inp textarea { width: 90%; } } .iconsRow .morphCard img { width: 50%; } .nextBtn { display: flex; padding: 10px 45px; font-family: Poppins, sans-serif; font-size: 40px; color: #fff; background: #f90; transition: 1s; box-shadow: 6px 6px 0 #000; transform: skewX(-15deg); } .nextBtn:focus { outline: 0; } .nextBtn:hover { transition: 0.5s; box-shadow: 10px 10px 0 #fff; } .nextBtn span:nth-child(2) { transition: 0.5s; margin-right: 0; } .nextBtn:hover span:nth-child(2) { transition: 0.5s; margin-right: 45px; } span { transform: skewX(15deg); } span:nth-child(2) { width: 20px; margin-left: 30px; top: 12%; } .heroPoster h1, .webService .text-center .row .Web-card h3 { top: 0; height: 100%; display: flex; width: 100%; text-align: center; } path.one { transition: 0.4s; transform: translateX(-60%); } path.two { transition: 0.5s; transform: translateX(-30%); } .nextBtn:hover path.three { animation: 1s 0.2s infinite color_anim; } .nextBtn:hover path.one { transform: translateX(0); animation: 1s 0.6s infinite color_anim; } .nextBtn:hover path.two { transform: translateX(0); animation: 1s 0.4s infinite color_anim; } .banner .video-frame:hover img, .banner-three .banner-three__video .video-frame:hover::before { animation-play-state: paused; } @keyframes color_anim { 0%, 100% { fill: white; } 50% { fill: #fbc638; } } #seoDes p { font-size: 18px; } #seoDes ul { gap: 0.5rem; } #seoDes ul li { font-size: 17px; } #seoCard .morphCard { height: 42rem; } .ux-process .container .proHead { position: relative; font-size: 35px; margin-bottom: 2rem; } .ux-process .container .proHead::before { content: ""; bottom: -10%; left: 35%; width: 10%; height: 2px; } .ux-process .container p { text-align: center; font-size: 18px; margin-bottom: 1rem; } .workingProcess .row .col { gap: 1.5rem; margin-top: 3rem; flex-direction: row; flex-wrap: wrap; } .workingProcess .row .col .steps { width: 20rem; height: 20rem; justify-content: space-around; } .workingProcess .row .col .steps h2 { position: relative; color: var(--primary-color); } .achievements .achievements__slider-single, .morphCard p, .sponsor .sponsor__slider-item, .workingProcess .row .col .steps h4, .workingProcess .row .col .steps p { text-align: center; } .workingProcess .row .col .steps h2::before { content: ""; position: absolute; top: -40%; left: 0; width: 20%; height: 2px; background-color: #fff; } .webService .text-center .row .Web-card h3, .webService .text-center .row .Web-card:hover h3 { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)); } .workingProcess .row .col .steps p { font-size: 15px; } .workingProcess .row .col i { font-size: 3rem; color: var(--primary-color); } .heroPoster { position: relative; } .heroPoster:hover img { transform: scale(1.1); } .section__content .sub-title i, .section__header .sub-title i { transform: rotate(-45deg); } .heroPoster img { transition: 0.6s; } .heroPoster h1 { position: absolute; align-items: center; justify-content: center; font-size: 45px; } .cards h2 { font-size: 40px; } .cards .row { gap: 3rem; padding-bottom: 2rem; margin-top: 1rem; flex-wrap: wrap; justify-content: center; } #ghostMorphCard { height: 35rem; } @keyframes bg { 0% { background-size: 0 3px, 3px 0, 0 3px, 3px 0; } 25% { background-size: 100% 3px, 3px 0, 0 3px, 3px 0; } 50% { background-size: 100% 3px, 3px 100%, 0 3px, 3px 0; } 75% { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 0; } 100% { background-size: 100% 3px, 3px 100%, 100% 3px, 3px 100%; } } .morphCard { width: 20rem; height: 30rem; border-radius: 10px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); border: 1px solid rgba(255, 255, 255, 0.18); padding: 1rem; transition: transform 0.6s; } .banner-two, .bg-img { background-position: center center; } .bpoCards .morphCard { background-color: #fff; } .cursor-inner.cursor-hover, button { background-color: rgba(0, 0, 0, 0); } .bpoCards .morphCard img { width: 3rem; } .morphCard img { object-fit: cover; border-radius: 6px; width: 100%; object-fit: cover; } .bpoCards .morphCard i { font-size: 3rem; color: #fff; } .morphCard h4 { margin-block: 2rem; text-align: center; } .circleDisk { list-style-type: circle; } @media (max-width: 768px) { .footerFormRows { align-items: center !important; margin-bottom: 1rem; } .appCard { width: 18rem; height: 100%; } .app img { margin-top: 2rem; } .appCard p { padding: 0; } .bpoCards .morphCard { height: 100%; } } .webService .container { width: 100%; border: 1px solid #eee; margin: 0; } .webService .text-center .row { gap: 1rem; margin-top: 1rem; } .webService .text-center .row .Web-card { position: relative; padding: 0; width: 18rem; height: 16rem; transition: transform 0.6s; cursor: pointer; border-radius: 6px; margin-bottom: 1rem; } .webService .text-center .row .Web-card:hover { transform: translateX(10px); } .webService .text-center .row .Web-card:hover img { box-shadow: -12px 23px 0 4px #fff; } .webService .text-center .row .Web-card img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; transition: 0.6s; } .webService .text-center .row .Web-card h3 { position: absolute; padding: 0.4rem; left: 0; transition: 0.6s; align-items: center; justify-content: center; color: #fff; font-size: 20px; } .offcanvas-nav .offcanvas-menu .navbar__item a::after, .offcanvas-nav .offcanvas-menu .navbar__item button::after, a i, button i { transition: none; } #backImg { display: flex; flex-direction: column; border-radius: 6px; height: 50px; } #backImg img { object-fit: cover; } .goMen { gap: 1rem; justify-content: flex-end; color: #474747; } .goMen h4 { color: #474747; font-size: 30px; } .goMen i { animation: 2s infinite forBack; } @keyframes forBack { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(5px); } 50% { transform: translateX(10px); } } .open-offcanvas-nav { animation: 3s infinite blink; } @keyframes blink1 { 0%, 100%, 50% { background: #414141; } 25%, 75% { background: #fff; } } @keyframes blink { 0%, 100%, 50% { border: 1px solid #414141; } 25%, 75% { border: 1px solid #f90; } } .testimonial { padding-block: 2rem; } #custom ul { gap: 1.5rem; } #custom ul li a::before { content: ""; position: absolute; top: 105%; left: 0; width: 0; height: 2px; background-color: #fff; transition: 0.6s; } .body-active { height: 100vh; overflow: clip; } .my-app { position: relative; min-width: 100vw; min-height: 100vh; max-width: 100vw; max-height: 100vh; overflow-x: clip; } .btn, .lines, .progress-wrap, .progress-wrap span { overflow: hidden; } a i, button i { font-size: inherit; line-height: inherit; color: inherit; } a:hover, button:hover { border: 0; outline: 0; color: var(--primary-color); } .banner__content h1, .banner__content h6, .cursor-inner span, a, button, h1, h2, h3, h4, h5, h6, p { color: var(--theme-color); } .btn:focus, a:focus, button:focus { box-shadow: none; outline: 0; } ol, ul { list-style-type: none; list-style-position: inside; margin: 0; padding: 0; } blockquote, hr, textarea { margin: 0; } input, textarea { border: 0; outline: 0; } input:focus, textarea:focus { box-shadow: none; } input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } input[type="checkbox"] { width: initial; height: initial; } textarea { min-height: 150px; resize: none; } table { border-collapse: collapse; border-spacing: 0px; } iframe { border: 0; width: 100%; } h1, h2, h3, h4, h5, h6, p { font-family: var(--inter); padding: 0; margin: 0; } .container, .container-fluid, .row > * { padding-left: 15px !important; padding-right: 15px !important; } .row { margin-left: -15px !important; margin-right: -15px !important; } blockquote, input, label, li, p, select, span, td, textarea, th { font-size: 16px; line-height: 30px; font-weight: 400; color: var(--theme-color); } .primary-text, h5 { font-size: 20px; line-height: 30px; } .secondary-text { font-size: 28px; line-height: 38px; } .tertiary-text { font-size: 14px; line-height: 24px; } a, button { display: inline-flex; align-items: center; gap: 8px; outline: 0; border: 0; transition: var(--transition); font-size: 16px; line-height: 18px; font-weight: 500; cursor: pointer; } .h1, h1 { font-size: 100px; line-height: 130px; } .light-title { font-size: 75px; line-height: 85px; } .light-title-lg { font-size: 30px; line-height: 40px; } h2 { font-size: 55px; line-height: 70px; } .slide-btn, h3 { font-size: 40px; } h3 { line-height: 50px; } h4 { font-size: 24px; line-height: 34px; } h6 { font-size: 16px; line-height: 24px; } h1 a, h1 span, h2 a, h2 span, h3 a, h3 span, h4 a, h4 span, h5 a, h5 span, h6 a, h6 span, p a, p span { font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; } img { max-width: 100%; height: auto; border: 0; outline: 0; -o-object-fit: cover; object-fit: cover; } .social li, i { display: inline-flex; align-items: center; justify-content: center; } .cursor-outer { margin-left: -12px; margin-top: -12px; width: 30px; height: 30px; border: 1px solid var(--primary-color); z-index: 10000000; opacity: 0.5; transition: 0.14s ease-out; mix-blend-mode: difference; } .cursor-outer.cursor-hover { opacity: 0; transition: none; } .btn--primary::before, .btn--secondary::before, .btn--tertiary::before { top: 0; right: 0; transition: 0.6s; content: ""; z-index: -1; bottom: 0; } .cursor-outer.cursor-big { opacity: 0; } .mouseCursor { position: fixed; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; transform: translateZ(0); visibility: hidden; text-align: center; } .lines, .vid-m h5 { position: absolute; } .mouseCursor.cursor-big { width: 20px; height: 20px; margin-left: -12px; margin-top: -12px; } .cursor-inner { margin-left: -3px; margin-top: -3px; width: 10px; height: 10px; z-index: 10000001; background-color: var(--primary-color); opacity: 0.8; transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out; mix-blend-mode: difference; } .cursor-inner span { line-height: 60px; opacity: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; } .cursor-inner.cursor-big span { opacity: 1; } .cursor-inner.cursor-hover { margin-left: -10px; margin-top: -10px; width: 30px; height: 30px; border: 1px solid #686363; opacity: 0; } .unset { max-width: unset; } .dir-rtl { direction: rtl; } .bg-img { background-color: var(--theme-color); background-repeat: no-repeat; background-size: cover; } .slick-slide { margin: 0 15px; } .slick-slide img { display: inline-block; } .slick-list { margin: 0 -15px; } .section__header, .section__header--secondary { margin-bottom: 60px; } .fw-9 { font-weight: 900 !important; } .fw-7 { font-weight: 700; } .fw-6 { font-weight: 600; } .fw-5 { font-weight: 500; } .fw-4 { font-weight: 400; } .text-secondary { color: var(--secondary-color); } .text-tertiary { color: var(--tertiary-color); } .text-quaternary { color: var(--quaternary-color); } .text-quinary { color: var(--quinary-color); } .bg-primary { background-color: var(--primary-color); } .bg-secondary { background-color: var(--secondary-color); } .bg-tertiary, .blog, .sponsor-three, .testimonial-three, .work-alt { background-color: var(--tertiary-color); } .bg-quaternary { background-color: var(--quaternary-color); } .bg-quinary { background-color: var(--quinary-color); } .text-stroke { -webkit-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke: 2px var(--primary-color); font-family: sans-serif; } .gaper { row-gap: 30px; } .section { margin: 130px 0; } .section__cta { margin-top: 65px; text-align: center; } .section__content-cta { margin-top: 60px; } .banner__content { margin-top: -8px; text-align: center; } .banner__content h6 { letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 22px; } .banner__content h1 { font-weight: 700; margin-bottom: 16px; text-transform: capitalize; } .cta-group, .feedback-s .author { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .section__content .sub-title, .section__header .sub-title { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; line-height: 1; border: 1px solid #414141; color: var(--primary-color); border-radius: 30px; margin-bottom: 32px; text-transform: uppercase; } .section__content .title, .section__header .title { text-transform: capitalize; font-weight: 700; } .section__content .title { margin-bottom: 30px; } .social { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .social a { color: var(--tertiary-color); background-color: #f0efff; width: 40px; min-width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; } .footer-four .cta-t a:hover, .social a:hover { color: var(--black); background-color: var(--primary-color); } @keyframes navLinkFade { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } @keyframes navLinkFadeReverse { from { opacity: 0; transform: translateY(0); } to { opacity: 0; transform: translateY(100%); } } @keyframes rotateInfinite { from { transform: rotate(0); } to { transform: rotate(360deg); } } .footer-four .copy-t ul, .slide-group { display: flex; align-items: center; gap: 24px; } .slide-btn, .vid-m button { display: flex; align-items: center; } .slide-btn { width: 74px; min-width: 74px; height: 74px; border-radius: 50%; justify-content: center; border: 1px solid #414141; transition: var(--transition); background-color: rgba(0, 0, 0, 0); color: #414141; z-index: 2; } .progress-wrap, .progress-wrap span::after, .progress-wrap span::before { transition: 0.2s linear; display: block; } .slide-btn:hover, .team-slider-s .slick-center-active .team-wrap .social a:hover { color: var(--white); background-color: var(--primary-color); border: 1px solid var(--primary-color); } .lines { display: flex; justify-content: space-around; width: 100%; height: 100%; inset: 0px; z-index: -3; } .lines .line { width: 1px; height: 100%; min-height: 100vh; top: 0; background-color: #343434; z-index: -1; } .btn--primary::before, .btn--secondary::before, .btn--tertiary::before, .vid-m button, .vid-m h5 { background-color: var(--primary-color); } .vid-m { position: fixed; right: 20px; bottom: 40px; z-index: 99; width: 160px; height: 285px; max-height: 285px; } .blog-details .blog-details__pagination .single--alt, .vid-m .vid-c { text-align: end; } .vid-m video { width: 100%; height: 100%; max-height: 285px; border-radius: 20px; } .vid-m button { width: 34px; min-width: 34px; height: 34px; border-radius: 50%; justify-content: center; color: #000; font-size: 14px; margin-left: auto; transform: translateY(50%); position: relative; z-index: 9; } .vid-m h5 { top: 30%; right: 100%; padding: 20px; color: #000; border-radius: 20px 20px 0; line-height: 0; transform: translateX(30%); } .progress-wrap span, .progress-wrap span::after, .progress-wrap span::before { top: 50%; height: 34px; width: 34px; left: 50%; position: absolute; } .btn { padding: 16px 32px; font-weight: 700; border: 1px solid var(--primary-color); border-radius: 50px; text-transform: uppercase; color: var(--primary-color); position: relative; } .btn--tertiary:hover, .btn:hover { border: 1px solid var(--primary-color); } .btn:hover { color: var(--white); } .btn--primary:hover, .btn--secondary:hover { color: var(--black); } .btn--primary { z-index: 1; } .btn--primary::before { position: absolute; width: 0; height: 100%; } .btn--primary:hover::before { width: 100%; left: 0; } .btn--secondary { z-index: 1; color: var(--white); border: 1px solid #414141; } .btn--tertiary, .offcanvas-nav .offcanvas-menu .navbar__item a:hover, .offcanvas-nav .offcanvas-menu .navbar__item button:hover, .primary-navbar .navbar__item--has-children:hover > .navbar__dropdown-label, .primary-navbar .navbar__sub-menu a:hover, .primary-navbar .navbar__sub-menu button:hover, .progress-wrap span::after { color: var(--primary-color); } .btn--secondary::before { position: absolute; width: 0; height: 100%; } .btn--secondary:hover::before { width: 100%; left: 0; } .btn--tertiary { z-index: 1; border: 1px solid #000 !important; background-color: #181818; gap: 20px; display: inline-flex; align-items: center; text-transform: capitalize; } .btn--tertiary::before { position: absolute; width: 0; height: 100%; } .btn--tertiary:hover { color: var(--black); } .btn--tertiary:hover::before { width: 100%; left: 0; } .progress-wrap { position: fixed; right: 30px; bottom: 120px; height: 50px; width: 50px; cursor: pointer; border-radius: 50px; background-color: #1f1f1f; box-shadow: inset 0 0 0 8px #1f1f1f; opacity: 0; visibility: hidden; transform: translateY(15px); z-index: 999; } .progress-wrap span { transform: translate(-50%, -50%); background-color: var(--white); border-radius: 50%; } .secondary--navbar .open-offcanvas-nav:hover::before, .video-modal-btn a { background-color: var(--primary-color); } .progress-wrap span::after { content: ""; font-weight: 900; text-align: center; border-radius: 50%; transform: translate(-50%, 200%); cursor: pointer; z-index: 1; } .progress-wrap span::before { content: ""; font-weight: 900; text-align: center; border-radius: 50%; color: var(--primary-color); transform: translate(-50%, -50%); cursor: pointer; z-index: 2; } .progress-wrap:hover span::before { transform: translate(-50%, -200%); } .progress-wrap:hover span::after { transform: translate(-50%, -50%); } .progress-wrap path { fill: none; } .progress-wrap .progress-circle path { stroke: var(--primary-color); stroke-width: 4; box-sizing: content-box; transition: 0.2s linear; } .active-progress { opacity: 1; visibility: visible; transform: translateY(0); } .video-modal-btn a { width: 84px; min-width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--white); } @keyframes wave { 0% { transform: translate(-50%, -50%) scale(0.6); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; } } .input-email { position: relative; display: flex; align-items: center; gap: 16px; border: 1px solid #c1c1c1; } #preloader, .primary-navbar { position: fixed; top: 0; left: 0; width: 100%; } .banner-four, .navbar-active { border-bottom: 1px solid #414141; } .input-email input { flex-grow: 1; background-color: rgba(0, 0, 0, 0); padding: 16px 30px; width: calc(100% - 80px); } .input-email button { width: 60px; min-width: 60px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; } #preloader { height: 100%; z-index: 999999; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--primary-color); animation: 2s linear infinite spin; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--primary-color); animation: 3s linear infinite spin; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fff; animation: 1.5s linear infinite spin; } @keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } .primary-navbar { right: 0; z-index: 999; } .banner, .banner-two { z-index: 1; position: relative; } .primary-navbar .navbar { display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap; } .primary-navbar .navbar__sub-menu .navbar__dropdown-label-sub::before, .primary-navbar .navbar__sub-menu-n, .service-f .p-single, .ux-process .p-single { display: none; } .banner-two .banner-two__content .arrow-wrapper, .primary-navbar .navbar__menu { flex-grow: 1; } .primary-navbar .navbar__menu > ul { display: flex; align-items: center; justify-content: flex-end; } .primary-navbar .navbar__item a, .primary-navbar .navbar__item button { padding: 41px 20px; text-transform: uppercase; font-weight: 500; width: 100%; } .primary-navbar .navbar__item--has-children { position: relative; } .primary-navbar .navbar__item--has-children:hover > .navbar__dropdown-label-sub::after, .primary-navbar .navbar__item--has-children:hover > .navbar__dropdown-label::after { transform: rotate(180deg); } .primary-navbar .navbar__item--has-children:hover > .navbar__sub-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; } .primary-navbar .navbar__dropdown-label { position: relative; justify-content: space-between; } .primary-navbar .navbar__dropdown-label::after { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: ""; border: none; transition: transform 0.3s ease-in-out; font-size: inherit; transform: rotate(0); } .offcanvas-nav .offcanvas-menu, .primary-navbar .navbar__sub-menu, .primary-navbar .navbar__sub-menu::before, .secondary--navbar .open-offcanvas-nav::before { transition: var(--transition); transition: var(--transition); } .primary-navbar .navbar__sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; max-width: 260px; background-color: var(--white); opacity: 0; visibility: hidden; transform: translateY(30px); pointer-events: none; box-shadow: var(--shadow); padding: 5px 0; border-radius: 5px; z-index: 9; } .primary-navbar .navbar__sub-menu::before { content: ""; position: absolute; top: -5px; left: 25px; height: 15px; width: 15px; transform: rotate(45deg); background-color: inherit; z-index: -1; } .primary-navbar .navbar__sub-menu li:last-of-type a { border-bottom: 0; } .primary-navbar .navbar__sub-menu a, .primary-navbar .navbar__sub-menu button { width: 100%; display: flex; padding: 16px 35px; color: var(--black); position: relative; font-size: 14px; border-bottom: 1px solid rgba(206, 206, 206, 0.4784313725); } .primary-navbar .navbar__sub-menu a::before, .primary-navbar .navbar__sub-menu button::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 20px; height: 1px; width: 0; transition: var(--transition); background-color: var(--primary-color); } .primary-navbar .navbar__sub-menu a:hover::before, .primary-navbar .navbar__sub-menu button:hover::before { width: 10px; } .primary-navbar .navbar__sub-menu--lg { min-width: 300px; max-width: 300px; } .primary-navbar .navbar__sub-menu__nested { top: 0; left: 100%; min-width: 200px; } .primary-navbar .navbar__sub-menu__nested::before { left: -5px; top: 17px; box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.1); } .primary-navbar .navbar__options { display: flex; align-items: center; gap: 30px; } .primary-navbar .open-mobile-menu { font-size: 30px; color: var(--white); } @keyframes stickyNavbar { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } .navbar-active { background-color: var(--black); animation: 0.9s ease-in-out stickyNavbar; box-shadow: var(--shadow); } .quaternary--navbar, .secondary--navbar { padding: 30px 0; } .secondary--navbar .open-offcanvas-nav { width: 80px; min-width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #414141; position: relative; } .secondary--navbar .open-offcanvas-nav::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background-color: #414141; border-radius: 50%; animation: 3s infinite blink1; } .secondary--navbar .open-offcanvas-nav:hover { border: 1px solid var(--primary-color); } .offcanvas-nav .offcanvas-menu { position: fixed; inset: 0px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-100%); transition: 0.9s ease-in-out; background-color: var(--black); z-index: 99999999999; } .offcanvas-nav .offcanvas-menu::before { content: "Explore Pages"; position: absolute; top: 30%; right: 10%; font-size: 6vw; line-height: 1.2; font-weight: 900; text-transform: uppercase; max-width: 30vw; z-index: -1; color: #fff; opacity: 0.1; text-align: end; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__header { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 0 20px; justify-content: space-between; } .offcanvas-nav .offcanvas-menu .close-offcanvas-menu { font-size: 36px; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__wrapper { position: fixed; inset: 0px; background-color: rgba(0, 0, 0, 0); z-index: 9999; padding: 60px 100px 60px 60px; height: 100vh; overflow-y: auto; overflow-x: clip; display: flex; flex-direction: column; transition: 0.3s ease-in-out 0.3s; gap: 60px; transform: translateY(100%); opacity: 1; visibility: visible; } .offcanvas-menu__wrapper .c { position: fixed; top: 2%; right: 14%; width: 20vmax; height: 680px; z-index: 1011; display: none; } @media (max-width: 2100px) { .offcanvas-menu__wrapper .c { top: 13.5%; right: 20%; width: 630px; height: 630px; } } @media (max-width: 2000px) { .offcanvas-menu__wrapper .c { top: 12%; right: 19%; width: 620px; height: 620px; } } @media (max-width: 1900px) { .offcanvas-menu__wrapper .c { top: 12%; right: 19%; width: 580px; height: 580px; } } @media (max-width: 1800px) { .offcanvas-menu__wrapper .c { top: 12%; right: 22%; width: 560px; height: 560px; } } @media (max-width: 1700px) { .offcanvas-menu__wrapper .c { top: 13%; right: 18%; width: 530px; height: 530px; } } @media (max-width: 1600px) { .offcanvas-menu__wrapper .c { top: 10%; right: 18%; width: 510px; height: 510px; } } @media (max-width: 1500px) { .offcanvas-menu__wrapper .c { top: 12.5%; right: 18%; width: 480px; height: 480px; } } @media (max-width: 1400px) { .offcanvas-menu__wrapper .c { top: 10%; right: 18%; width: 460px; height: 460px; } } @media (max-width: 1300px) { .app { flex-direction: column; gap: 2rem; } .app img { margin-inline: 2rem; align-items: flex-start; } .mobileDes p { padding-inline: 2rem; } .appPromise { padding: 2rem; } .appPromise p { padding-inline: 0rem; } .offcanvas-menu__wrapper .c { top: 9%; right: 17%; width: 430px; height: 430px; } } @media (max-width: 1200px) { #showWork { flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } #showWork .content { width: 100%; padding: 0 !important; } .bpoConnect { flex-direction: column; padding: 1rem; } .connectDes { width: 100%; margin-bottom: 2rem; } .connectDes h2, .connectDes p { text-align: center; } .points { justify-content: center; } .offcanvas-menu__wrapper .c { display: none; } } .offcanvas-nav .offcanvas-menu .offcanvas-menu__wrapper::-webkit-scrollbar { width: 0; } .offcanvas-nav .offcanvas-menu .navbar__menu > ul { flex-direction: column; } .offcanvas-nav .offcanvas-menu .navbar__item { width: 100%; transition: var(--transition); } .offcanvas-nav .offcanvas-menu .navbar__item a, .offcanvas-nav .offcanvas-menu .navbar__item button { color: var(--white); padding: 20px 80px 20px 20px; line-height: 1; width: 100%; text-transform: uppercase; font-size: 24px; } .offcanvas-nav .offcanvas-menu .nav-fade { transform: translateY(30px); opacity: 0; transition: 0.7s ease-in-out !important; } .footer-four, .offcanvas-nav .offcanvas-menu .navbar__item--has-children .navbar__dropdown-label { position: relative; } .offcanvas-nav .offcanvas-menu .navbar__item--has-children:hover .navbar__dropdown-label::after { transform: rotate(0); } .offcanvas-nav .offcanvas-menu .navbar__item-active { color: var(--primary-color) !important; } .offcanvas-nav .offcanvas-menu .navbar__item-active::after { content: "" !important; font-family: "Font Awesome 6 Pro" !important; } .offcanvas-nav .offcanvas-menu .navbar__sub-menu { position: static; opacity: 1; visibility: visible; transform: translateY(0); width: 100%; max-width: 100%; padding: 0 0 0 30px; display: none; transition: none; background-color: rgba(0, 0, 0, 0); border-radius: 0; } .offcanvas-nav .offcanvas-menu .navbar__sub-menu a::before, .offcanvas-nav .offcanvas-menu .navbar__sub-menu button::before, .offcanvas-nav .offcanvas-menu .navbar__sub-menu::before { content: none; } .offcanvas-nav .offcanvas-menu .navbar__sub-menu a, .offcanvas-nav .offcanvas-menu .navbar__sub-menu button { color: var(--white); padding: 16px 20px; font-size: 16px; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__options { padding: 0 20px; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__options a, .offcanvas-nav .offcanvas-menu .offcanvas-menu__options button { width: 100%; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__social { transition: var(--transition); padding: 0 20px; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__social a { font-size: 20px; width: 50px; min-width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .tertiary--navbar .tertiary-cta .btn, .tertiary--navbar .tertiary-cta .btn:hover { border: 1px solid var(--white); } .banner-two .banner-two__content .paragraph, .offcanvas-nav .offcanvas-menu__list, .offcanvas-nav .offcanvas-menu__options, .offcanvas-nav .offcanvas-menu__social { max-width: 500px; } .offcanvas-nav .show-offcanvas-menu { transform: translateX(0); opacity: 1; visibility: visible; } .offcanvas-nav .show-offcanvas-menu .offcanvas-menu__wrapper { transform: translateY(0); opacity: 1; visibility: visible; } .offcanvas-nav .show-offcanvas-menu .nav-fade { animation: 0.5s forwards navLinkFade; transition: 0.7s ease-in-out !important; } .offcanvas-nav .nav-fade-active { animation: 1s reverse navLinkFade !important; } .tertiary--navbar { background-color: #1f1f1f; overflow-x: clip; } .banner, .banner-four, .banner-three, .cmn-banner { background-color: var(--black); } .banner-three .banner-three__slider-single, .banner-two { overflow: hidden; background-size: cover; background-repeat: no-repeat; } .tertiary--navbar .navbar__item a { text-transform: lowercase !important; } .tertiary--navbar .navbar__options { gap: 0; } .tertiary--navbar .open-offcanvas-nav { padding: 25px 40px; flex-direction: column; background-color: #2c2c2c; text-transform: uppercase; font-size: 14px; } .tertiary--navbar .open-offcanvas-nav i { font-size: 24px; } .tertiary--navbar .open-offcanvas-nav:hover { background-color: var(--primary-color); color: var(--black); } .banner .banner-social-text a:hover, .banner .banner__content-inner h5, .quaternary--navbar .btn i, .quaternary--navbar .open-offcanvas-nav:hover, .quinary--navbar .open-offcanvas-nav:hover { color: var(--primary-color); } .tertiary--navbar .tertiary-cta { padding: 21px 0 21px 120px; background-color: var(--primary-color); position: relative; } .tertiary--navbar .tertiary-cta::before { content: ""; position: absolute; top: 0; bottom: 0; left: 90%; min-width: 50vw; background-color: var(--primary-color); } .tertiary--navbar .tertiary-cta .btn::before { background-color: var(--white); } .quaternary--navbar .open-offcanvas-nav { font-size: 30px; color: #d9d9d9; } .quaternary--navbar .btn { border: 0; display: flex; align-items: center; gap: 8px; padding: 0; } .agency-two .agency__thumb::after, .agency-two .agency__thumb::before, .breadcrumb .breadcrumb-item:first-of-type::before, .quaternary--navbar .btn::before { content: none; } .quaternary--navbar .btn:hover { border: 0; color: var(--primary-color); } .logo img, .navbar__logo img { width: 200px; } .quinary--navbar .navbar__logo { display: flex; align-items: center; gap: 120px; } .quinary--navbar .open-offcanvas-nav { font-size: 30px; } .banner { padding: 300px 0 130px; } .banner .banner__content { margin-top: -20px; } .banner .interval { display: flex; align-items: center; gap: 60px; margin-left: 60px; } .banner .interval i { -webkit-text-fill-color: rgba(0, 0, 0, 0); } .banner .banner__content-inner { max-width: 400px; margin-top: 100px; text-align: start; } .banner .banner__content-inner .cta { margin-top: 60px; display: flex; align-items: center; gap: 60px; row-gap: 24px; flex-wrap: wrap; } .banner .banner-one-thumb { position: absolute; top: 220px; left: 50%; transform: translateX(-50%); z-index: -1; width: 100%; max-width: 494px; height: auto; border-radius: 50%; } .banner .star { position: absolute; top: 220px; left: 100px; z-index: -1; } .banner .banner-social-text { display: flex; align-items: center; gap: 24px; writing-mode: vertical-rl; transform: rotate(-180deg); } .banner .banner-social-text a { text-transform: uppercase; color: var(--secondary-color); font-weight: 500; font-size: 14px; } .banner .banner-left-text { position: absolute; bottom: 200px; left: 90px; } .banner .banner-right-text { position: absolute; bottom: 200px; right: 90px; } .banner .video-frame { position: absolute; bottom: 120px; right: 10%; width: 190px; min-width: 190px; height: 190px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; } .banner .video-frame img { width: 100%; height: 100%; position: absolute; inset: 0px; animation: 24s linear infinite rotateInfinite; } .banner-two { padding: 260px 0 130px; } .banner-two::before { content: ""; position: absolute; inset: 0px; background-image: linear-gradient( 180deg, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 100% ); z-index: -1; } .banner-two .banner-two__meta { display: flex; align-items: center; gap: 60px; flex-wrap: wrap; } .banner-two .banner-two__meta .cta { display: flex; align-items: center; gap: 60px; row-gap: 24px; flex-wrap: wrap; } .banner-two .banner-two__meta h5 { color: var(--white); } .banner-three .banner-three__content .btn--secondary i, .banner-three .single-item-active span, .banner-two .banner-two__content h1 span, .breadcrumb .breadcrumb-item a:hover, .breadcrumb .breadcrumb-item:first-of-type a:hover { color: var(--primary-color); } .banner-two .thumb video { max-width: 32vw; max-height: 200px; height: 100%; border-radius: 100px; } .banner-three .banner-three__content .btn--secondary:hover, .banner-three .social a:hover { border: 1px solid var(--primary-color); } .banner-two .banner-two__content h1 { font-weight: 900; text-transform: uppercase; margin-top: 30px; } .banner-two .banner-two__content .banner-two__content-cta { display: flex; align-items: center; justify-content: space-between; gap: 90px; } .banner-two .banner-two__content .arrow { position: relative; display: block; } .banner-two .banner-two__content .arrow::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; width: calc(100% - 6px); background-color: var(--white); } .banner-two .banner-two__content .arrow::after { content: ""; font-family: "Font Awesome 6 Pro"; position: absolute; right: 4px; top: 50%; transform: translateY(-48%); font-size: 24px; } .banner-two .dawn { position: absolute; top: 25%; right: 12%; z-index: -1; max-width: 10vw; } .banner-three { position: relative; overflow-x: clip; } .banner-three .banner-three__slider-single { padding: 290px 0 360px; background-position: right center; position: relative; z-index: 1; } .banner-three .banner-three__slider-single::before { content: ""; position: absolute; inset: 0px; background-image: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.8) 100% ); z-index: -1; } .banner-three .banner-three__content h1 { font-weight: 900; } .banner-three .banner-three__content .cta { display: flex; align-items: center; gap: 40px; } .banner-three .banner-three__content .arrow { position: relative; display: block; width: 220px; } .banner-four .arrow::before, .banner-three .banner-three__content .arrow::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; width: calc(100% - 6px); background-color: var(--white); } .banner-four .arrow::after, .banner-three .banner-three__content .arrow::after { content: ""; font-family: "Font Awesome 6 Pro"; position: absolute; right: 4px; top: 50%; transform: translateY(-48%); font-size: 24px; } .banner-three .banner-three__content .btn--secondary { display: inline-flex; gap: 12px; text-transform: capitalize; border: 1px solid var(--white); } .banner-three .banner-three__content .btn--secondary:hover i { color: inherit; } .banner-three .social { position: absolute; top: 50%; transform: translateY(-50%); left: 50px; flex-direction: column; z-index: 1; } .banner-three .social a { background-color: rgba(0, 0, 0, 0); border: 1px solid #888; color: #888; } .banner-three .social a:hover { color: var(--white); background-color: var(--primary-color); } .banner-three .arrow-img { position: absolute; z-index: 1; left: 10%; bottom: 15%; max-width: 20vw; } .banner-three .dot-img { position: absolute; z-index: 1; right: 5%; bottom: 30%; max-width: 10vw; } .banner-three .banner-three__slider-progress-wrapper { position: absolute; bottom: 60px; left: 0; right: 0; z-index: 1; } .banner-three .banner-three__slider-progress { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; max-width: 870px; } .banner-three .banner-three__slider-progress .single-item { min-width: 260px; opacity: 0.5; cursor: pointer; } .banner-three .banner-three__slider-progress .single-item p { margin: 12px 0; } .banner-three .banner-three__slider-progress .single-item .slider-progress { width: 100%; height: 4px; background: #a5a5a5; position: relative; } .banner-three .banner-three__slider-progress .single-item .inProgress { position: absolute; inset: 0px; background-color: var(--primary-color); height: 100%; z-index: 2; } .banner-three .single-item-active { opacity: 1 !important; } .banner-three .banner-three__meta { display: inline-flex; align-items: center; background-color: #1f1f1f; position: absolute; bottom: 0; right: 0; z-index: 2; } .banner-four, .banner-three .banner-three__video { position: relative; z-index: 1; overflow: hidden; } .banner-three .banner-three__meta::before { content: ""; position: absolute; top: -10px; left: -10px; height: 50px; width: 80px; border-top: 10px solid var(--primary-color); border-left: 10px solid var(--primary-color); } .banner-three .banner-three__meta .cta { display: flex; align-items: center; gap: 60px; row-gap: 24px; flex-wrap: wrap; padding: 24px; } .banner-three .banner-three__meta h5 { color: var(--white); } .agency-two .single p, .banner-three .banner-three__meta .single p { color: var(--secondary-color); margin-top: 6px; text-transform: capitalize; } .banner-three .banner-three__video::before { content: ""; position: absolute; inset: 0px; opacity: 0.69; background: #000; } .agency .agency__thumb::after, .agency .agency__thumb::before { background-image: url("../images/agency/dot.png"); width: 40px; height: 40px; } .banner-three .banner-three__video .video-frame { width: 80px; min-width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; color: var(--primary-color); } .banner-three .banner-three__video .video-frame::before { content: ""; position: absolute; inset: 0px; border: 2px dashed var(--primary-color); border-radius: 50%; animation: 24s linear infinite rotateInfinite; } .agency-two h5, .banner-three .banner-three__video .video-frame:hover, .footer-four .copy-t a { color: var(--white); } .banner-four { padding: 260px 0 130px; } .banner-four::before { content: ""; position: absolute; inset: 0px; width: 100%; height: 100%; background-size: cover; background-position: left top 100px; background-image: url("../images/banner/line.png"); } .cta-s .cta__wrapper, .cta-two .cta-two-wrapper { background-position: center center; background-size: cover; } .banner-four .intro { padding-left: 180px; } .banner-four .intro p { max-width: 400px; margin-bottom: 30px; } .banner-four .arrow { position: relative; display: block; width: 100%; max-width: 740px; } .banner-four .banner-four__content, .testimonial .slide-group button { position: relative; z-index: 9; } .banner-four .banner-four__title { max-width: 1100px; margin-top: 70px; } .banner-four .banner-four__title h1 { text-transform: uppercase; font-weight: 900; text-align: center; } .banner-four .banner-four__title .frame { width: 160px; min-width: 160px; height: 160px; border-radius: 50%; display: flex; align-items: center; justify-content: center; display: inline-flex; font-size: 46px; position: relative; color: #fff; } .banner-four .banner-four__title .frame img, .video-modal .video-frame img, .work-steps .video-frame img { width: 100%; height: 100%; position: absolute; inset: 0px; animation: 24s linear infinite rotateInfinite; } .banner-four .banner-four__title .frame i { width: 110px; min-width: 110px; height: 110px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--primary-color); } .banner-four .banner-four__title .frame:hover img, .video-modal .video-frame:hover img, .work-steps .video-frame:hover img { animation-play-state: paused; } .banner-four .small { position: absolute; top: 260px; left: 9%; z-index: 2; max-width: 15vw; } .banner-four .large { position: absolute; top: 100px; right: 6%; z-index: -1; max-width: 30vw; } .banner-five .banner-five__wrapper { gap: 30px; padding: 220px 0 130px; display: flex; align-items: center; gap: 60px; } .banner-five .banner-five__wrapper .slick-track { padding: 20px 0 !important; } .banner-five .banner-five__single { min-width: 450px; width: 450px; } .banner-five .projects-s__single, .projects-s .projects-s__single { padding: 30px; border: 1px solid #414141; } .banner-five .projects-s__single .thumb a, .banner-five .projects-s__single .thumb a img { width: 100%; } .banner-five .projects-s__single .content, .footer .footer__single-form { margin-top: 30px; } .banner-five .projects-s__single .content h4, .footer ul li a { text-transform: capitalize; } .banner-five .projects-s__single .content p { margin-top: 20px; color: #d9d9d9; } .cmn-banner { padding: 210px 0 130px; } .cmn-banner .title { text-transform: uppercase; font-weight: 700; margin-top: -12px; } .breadcrumb { margin: 20px 0 0; padding: 10px 20px; border: 1px dashed #414141; display: inline-flex; border-radius: 100px; } .breadcrumb .breadcrumb-item { margin-top: 0; color: var(--white); padding: 0 16px 0 24px; position: relative; text-transform: uppercase; font-size: 14px; } .breadcrumb .active, .footer .footer__copyright-text p a:hover, .footer .footer__single-meta a:hover { color: var(--primary-color); } .breadcrumb .breadcrumb-item a { color: var(--theme-color); font-weight: 600; font-size: 14px; } .breadcrumb .breadcrumb-item::before { font-family: "Font Awesome 6 Pro"; font-weight: 900; content: ""; position: absolute; left: 0; font-size: 14px; color: var(--theme-color); padding: 0; } .breadcrumb .breadcrumb-item:first-of-type { padding-left: 0; } .breadcrumb .active { padding-right: 0; font-weight: 600; } .footer { background-color: var(--tertiary-color); background-repeat: no-repeat; background-size: cover; background-position: left top; } .footer .gaper, .footer-three .gaper { row-gap: 60px; } .footer .footer__single-meta { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin: 30px 0 40px; } .footer .footer__single-meta a { max-width: 220px; color: var(--white); line-height: 28px; font-weight: 500; align-items: flex-start; } .footer .footer__single-meta a i { line-height: inherit; } .agency .skill-bar-single, .blog-details .bd-meta, .blog-main .widget .widget__head, .comment-form .form-group-wrapper, .filter-item-space, .footer .footer__single-intro, .footer-two .logo, .paragraph p, .project-d .project-d-group p, .project-d .quote-pj .quote, .team-det .content h5 { margin-bottom: 30px; } .footer .footer__single-intro h5, .team-det .intro-left h4 { text-transform: capitalize; font-weight: 600; } .footer ul li { margin-bottom: 12px; } .agency .skill-bar-single:last-of-type, .footer ul li:last-of-type { margin-bottom: 0; } .footer ul li a:hover { padding-left: 6px; } .footer .footer__copyright { padding: 65px 0; } .footer .footer__copyright .gaper { row-gap: 30px; } .footer-four .footer-three__copyright .gaper, .footer-three .footer-three__copyright .gaper { row-gap: 30px !important; } .footer .footer__copyright-text p { color: var(--secondary-color); } .footer .footer__copyright-text p a { font-weight: 600; } .footer .social { gap: 8px; } .footer .social a { background-color: rgba(0, 0, 0, 0); border: 1px solid #888; color: #888; position: relative; z-index: 1; overflow: hidden; } .footer .social a::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; transition: var(--transition); z-index: -1; } .portfolio .portfolio__single .portfolio__single-content a, .portfolio-three .portfolio__single .portfolio__single-content a, .team-slider-s .team-s__slider-single .thumb .thumb__content .social-alt a { width: auto; } .footer .social a:hover { color: var(--white); border: 1px solid var(--primary-color); } .footer-three .footer-three__group .cta a, .footer-three .footer-three__group .cta a i, .footer-three .footer-three__group a:hover, .footer-three .footer-three__group a:hover i, .footer-two .footer__copyright ul a:hover, .footer-two .footer__single-meta a:hover { color: var(--primary-color); } .footer .social a:hover::before { width: 100%; height: 100%; } .blog-two, .footer-two { background-color: var(--black); } .footer-two .footer__single-meta { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .footer-two .footer__single-meta a { max-width: 220px; color: var(--white); line-height: 28px; font-weight: 500; align-items: flex-start; } .footer-two .footer__single-meta a i { line-height: inherit; } @keyframes fadeIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .footer-two .social a { width: 160px; min-width: 160px; height: 70px; border: 1px solid #454545; border-radius: 100px; gap: 12px; background-color: rgba(0, 0, 0, 0); overflow: hidden; } .footer-two .social a span { transition: 0.3s ease-in-out; transform: translateX(-25px); } .footer-two .social a i { width: 40px; min-width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; opacity: 0; visibility: hidden; transform: translateX(-20px); transition: 0.3s ease-in-out; } .footer-two .social a:hover { border: 1px solid #f90; } .footer-two .social a:hover i { opacity: 1; visibility: visible; transform: translateX(0); display: flex; animation: 0.3s fadeIn; } .footer-three .footer-three__copyright, .footer-two .footer__copyright { padding: 40px 0; border-top: 1px solid #454545; margin-top: 65px; } .footer-two .footer__copyright ul { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; } .footer-two .footer__copyright ul a { text-transform: capitalize; color: var(--white); } .footer-three { background-color: var(--tertiary-color); position: relative; z-index: 1; } .footer-three .footer-thumb { position: relative; margin-bottom: 30px; } .blog-main .widget-big a img, .footer-three .footer-thumb img { width: 100%; min-height: 200px; } .footer-three .footer-thumb .footer-thumb__content { position: absolute; top: 40px; left: 0; padding: 10px 20px 10px 40px; background-color: #414141; border-radius: 0 20px 20px 0; } .footer-three .footer-thumb .footer-thumb__content h5 { text-transform: capitalize; } .footer-three .footer-three__group { padding-left: 30px; } .details-group p, .footer-three .footer-three__group .intro, .service-f .single-item h4 { margin-bottom: 24px; } .footer-three .footer-three__group h5 { font-weight: 600; text-transform: capitalize; margin-top: -8px; } .footer-three .footer-three__group ul { display: flex; align-items: center; gap: 30px; row-gap: 24px; flex-wrap: wrap; } .footer-three .footer-three__group a { display: flex; align-items: center; gap: 8px; color: var(--white); font-weight: 400; line-height: 1.4; } .footer-three .footer-three__group a i { color: var(--secondary-color); transition: var(--transition); } .footer-three .footer-three__group .cta { margin-top: 30px; } .footer-three .footer-three__copyright .footer__copyright-text p { color: var(--secondary-color); } .footer-three .footer-three__copyright .footer__copyright-text p a { font-weight: 600; } .footer-four .copy-t a:hover, .footer-three .footer-three__copyright .footer__copyright-text p a:hover { color: var(--primary-color); } .footer-four::before { content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; max-width: 1410px; height: 1px; background-color: #414141; margin-left: auto; margin-right: auto; } .footer-four .cta-t a { width: 100%; padding: 80px 20px; justify-content: center; display: flex; gap: 40px; text-transform: uppercase; background-color: var(--white); color: var(--black); border-radius: 200px; } .footer-four .cta-t p, .footer-four .footer-three__copyright .footer__copyright-text p { color: var(--secondary-color); } .footer-four .cta-t p { margin-top: 30px; text-align: center; } .footer-four .copy-t { padding-bottom: 30px; } .footer-four .footer-three__copyright { padding: 40px 0; border-top: 1px solid #454545; } .footer-four .footer-three__copyright .footer__copyright-text p a:hover, .portfolio .portfolio__single .portfolio__single-content h4 a:hover, .portfolio .portfolio__single-alt .arr, .portfolio .portfolio__text-slider-single h2 i, .portfolio-two .portfolio-two__filter-btn .active, .portfolio-two .portfolio-two__filter-btn button:hover, .portfolio-two .portfolio__text-slider-single h2 i { color: var(--primary-color); } .footer-four .footer-three__copyright .footer__copyright-text p a { font-weight: 600; } .footer-cmn { background-color: #101010; } .agency { background-color: var(--tertiary-color); z-index: 1; position: relative; } .agency .agency__thumb { position: relative; overflow: hidden; text-align: end; z-index: 1; } .agency .agency__thumb::before { content: ""; position: absolute; top: 0; right: 10%; background-size: cover; z-index: -1; } .agency .agency__thumb::after { content: ""; position: absolute; bottom: 0; left: 0; background-size: cover; z-index: -1; } .portfolio .portfolio__single::after, .portfolio .portfolio__single::before { content: ""; bottom: 20px; width: 0; transition: var(--transition); background-color: var(--primary-color); } .agency .agency__thumb img { max-width: 100%; height: auto; } .agency .agency__thumb .thumb-one { position: absolute; top: 0; left: 0; max-width: 80%; } .agency .agency__thumb .thumb-two { margin-top: 100px; z-index: 2; position: relative; max-width: 80%; } .checks .col { gap: 1rem; margin-top: 2rem; } .checks .col p { width: 100%; font-size: 0.9rem; } .checks .col i { font-size: 1.2rem; } .agency .agency__content { padding-left: 70px; } .agency .star { position: absolute; top: 50%; left: 40px; z-index: -1; } .projectCounter .container { transition: 0.7s linear; } .agency .skill-wrap, .blog .blog__single-content { margin-top: 40px; } .agency .skill-bar-wrapper { margin-top: 15px; } .agency .skill-bar { height: 8px; border-radius: 100px; background-color: #363636; position: relative; } .agency .skill-bar-percent { position: absolute; top: 0; left: 0; bottom: 0; background-color: #cecece; border-radius: inherit; } .agency-two .clutch, .agency-two .clutch img { border-radius: 100px; } .agency .percent-value { position: absolute; bottom: calc(100% + 15px); right: 0; } .agency .dot-large { position: absolute; bottom: 40px; right: 4%; max-width: 25vw; z-index: -1; } .agency-two .clutch { width: 220px; } .agency-two .cta { margin-top: 40px; display: flex; align-items: center; gap: 60px; row-gap: 24px; flex-wrap: wrap; } .portfolio, .team-slider-s { overflow-x: clip; } .portfolio .portfolio__text-slider, .portfolio-two .portfolio__text-slider, .testimonial .testimonial__text-slider { margin-bottom: 80px; } .portfolio .portfolio__text-slider-single h2 { margin-top: -20px; font-weight: 900; text-transform: uppercase; display: flex; align-items: center; gap: 30px; margin-bottom: 0; } .portfolio .portfolio__text-slider-single:nth-of-type(2n) h2 { font-family: sans-serif; -webkit-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke: 2px var(--white); } .portfolio .portfolio__text-slider-single:nth-of-type(2n) h2 i { -webkit-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke: 2px var(--primary-color); } .blog-two .blog-two__slider-single, .offer, .portfolio .portfolio__single, .service-f, .ux-process, .work-steps { position: relative; z-index: 1; overflow: hidden; } .portfolio .portfolio__single::before { position: absolute; left: 20px; height: 0; } .portfolio .portfolio__single::after { position: absolute; right: 20px; height: 0; } .portfolio .portfolio__single .portfolio__single-content, .portfolio-three .portfolio__single .portfolio__single-content { padding: 40px; background-color: var(--white); gap: 60px; max-width: 90%; transition: var(--transition); display: flex; text-align: end; } .blog .blog__single-thumb a, .blog-three .blog-single-img a, .blog-three .blog-single-img img, .portfolio .portfolio__single a { width: 100%; } .portfolio .portfolio__single img { width: 100%; min-height: 300px; } .portfolio .portfolio__single .portfolio__single-content { position: absolute; top: 0; right: 0; flex-direction: column; align-items: flex-end; justify-content: flex-end; transform: translateY(-160%) scale(1.4); } .portfolio .portfolio__single .portfolio__single-content a i { font-size: 56px; color: var(--primary-color); } .portfolio .portfolio__single .portfolio__single-content h4 a { color: var(--black); font-weight: 600; } .portfolio .portfolio__single-active::before, .portfolio .portfolio__single:hover::before { width: 1px; height: calc(100% - 40px); } .portfolio .portfolio__single-active::after, .portfolio .portfolio__single:hover::after { height: 1px; width: calc(100% - 40px); } .portfolio .portfolio__single-active .portfolio__single-content, .portfolio .portfolio__single:hover .portfolio__single-content, .portfolio-three .slick-center .portfolio__single-content, .portfolio-three .slick-center:hover .portfolio__single-content { transform: translateY(0) scale(1); } .portfolio .portfolio__single-alt-wrapper { background-color: #000; padding: 20px; border: 1px solid var(--primary-color); height: 100%; } .portfolio .portfolio__single-alt { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; background-color: #000; z-index: 1; min-height: 300px; } .portfolio .portfolio__single-alt h4 { text-transform: uppercase; } .portfolio .portfolio__single-alt .arr { position: absolute; bottom: 60px; left: 60px; font-size: 120px; font-weight: 900; } .portfolio .portfolio__single-alt img { max-width: 25%; } .portfolio .portfolio__single-alt .dot-one { position: absolute; top: 40px; left: 40px; z-index: -1; } .portfolio .portfolio__single-alt .dot-two { position: absolute; bottom: 40px; right: 40px; z-index: -1; } .portfolio-two .portfolio__text-slider-single h2 { margin-top: -20px; font-weight: 900; text-transform: uppercase; display: flex; align-items: center; gap: 30px; margin-bottom: 0; } .portfolio-two .portfolio__text-slider-single:nth-of-type(2n) h2 { font-family: sans-serif; -webkit-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke: 2px var(--white); } .portfolio-two .portfolio__text-slider-single:nth-of-type(2n) h2 i { -webkit-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke: 2px var(--primary-color); } .portfolio-two .portfolio-two__filter-btn { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; row-gap: 24px; justify-content: space-between; } .portfolio-two .portfolio-two__filter-btn button { flex-direction: column; align-items: flex-start; justify-content: flex-start; text-transform: uppercase; } .portfolio-two .portfolio-two__filter-btn button span { color: #474747; transition: var(--transition); } .portfolio-two .portfolio-two__filter-btn .active span, .portfolio-two .portfolio-two__filter-btn button:hover span { color: var(--white); } .masonry-grid { margin-bottom: -30px; } .portfolio-three { position: relative; z-index: 1; } .portfolio-three .slick-track, .team-slider-s .team-r:hover .slide-group { display: flex; } .portfolio-three .portfolio__single { position: relative; z-index: 1; overflow: hidden; height: 100%; flex: 1; } .portfolio-three .portfolio__single::after, .portfolio-three .portfolio__single::before { content: none; } .portfolio-three .portfolio__single a, .project-sl .thumb a img { width: 100%; height: 100%; } .portfolio-three .portfolio__single img { width: 100%; height: 100%; min-height: 360px; } .portfolio-three .portfolio__single .portfolio__single-content { position: absolute; bottom: 0; top: unset; right: unset; left: 0; flex-direction: column; align-items: flex-end; justify-content: flex-end; transform: translateY(160%) scale(1.4); } .offer .offer__cta .offer-thumb-hover, .offer-two .offer__cta .offer-thumb-hover { transform: translateY(-50%) rotate(45deg); inset-inline-start: 0; opacity: 0; background-size: 100% 100%; background-repeat: no-repeat; background-position-x: 75%; pointer-events: none; } .portfolio-three .portfolio__single .portfolio__single-content a i, .testimonial .testimonial-s__slider .testimonial-s__content .quote i { font-size: 56px; color: var(--primary-color); } .portfolio-three .portfolio__single .portfolio__single-content h4 a { color: var(--black); font-weight: 600; } .portfolio-three .portfolio__single .portfolio__single-content h4 a:hover { color: var(--primary-color); } .portfolio-three .portfolio__single:hover .portfolio__single-content { transform: translateY(160%) scale(1.4); } .portfolio-three .slide-group { position: absolute; padding: 0 20px; top: 70%; left: 0; right: 0; transform: translateY(-70%); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; z-index: 2; width: 100%; max-width: 1700px; margin-left: auto; margin-right: auto; } .offer .star { position: absolute; bottom: 20%; z-index: -1; left: 40%; transform: translate(-40%, -20%); } .offer .offer__cta .sub-title { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; line-height: 1; border: 1px solid #414141; color: #404040; border-radius: 30px; text-transform: uppercase; margin-bottom: 20px; transition: var(--transition); } .blog .blog__single-meta a, .offer-two .offer__cta .sub-title { padding: 12px 20px; border: 1px solid #414141; text-transform: uppercase; } .offer .offer__cta .sub-title i { transform: rotate(-45deg); color: var(--primary-color); opacity: 0.5; transition: var(--transition); } .offer .offer__cta h2 a { justify-content: space-between; text-transform: capitalize; width: 100%; font-weight: 500; color: #404040; gap: 16px; } .offer .offer__cta h2 a i { font-weight: 900; transition: var(--transition); } .offer .offer__cta .offer__cta-single { position: relative; margin-bottom: 65px; } .offer .offer__cta .offer__cta-single:last-of-type, .projects-s .gaper:last-of-type, .service-f .single-item li:last-of-type, .team-slider-s .slick-center-active .team-wrap .skill-bar-single:last-of-type { margin-bottom: 0; } .offer .offer__cta .offer-thumb-hover { width: 200px; height: 270px; position: absolute; top: 50%; transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); margin: -200px 0 0 -150px; overflow: hidden; z-index: -1; } .award .single, .blog-main, .liner, .offer-two .offer__cta .offer__cta-single, .service-f .service-f-single .toggle-service-f, .testimonial .testimonial-s__slider .thumb, .testimonial-two, .ux-process .service-f-single .toggle-service-f, .video-modal { position: relative; } .award, .testimonial-two { z-index: 1; overflow: hidden; } .offer .offer__cta .offer__cta-single:hover .sub-title, .offer .offer__cta .offer__cta-single:hover h2 a { color: var(--primary-color); } .offer .offer__cta .offer__cta-single:hover .offer-thumb-hover, .offer .offer__cta .offer__cta-single:hover .sub-title i { opacity: 1; } .offer .offer__cta .offer__cta-single:hover h2 a i { -webkit-text-fill-color: unset; -webkit-text-stroke: 0px; color: var(--primary-color); } .offer-two .offer-two__slider, .offer-two .offer-two__slider-rtl { margin: -60px 0; } .offer-two .offer-two__slider .offer__cta, .offer-two .offer-two__slider-rtl .offer__cta { direction: ltr; } .offer-two .offer__cta { padding: 60px 0; } .offer-two .offer__cta .sub-title { display: inline-flex; align-items: center; gap: 12px; line-height: 1; color: #404040; border-radius: 30px; margin-bottom: 20px; transition: var(--transition); } .offer-two .offer__cta .sub-title i { transform: rotate(-45deg); color: var(--primary-color); opacity: 0.5; transition: var(--transition); } .offer-two .offer__cta h2 a { justify-content: space-between; text-transform: capitalize; width: 100%; font-weight: 500; color: #404040; gap: 16px; } .offer-two .offer__cta h2 a i { font-weight: 900; transition: var(--transition); } .offer-two .offer__cta .offer-thumb-hover { width: 140px; height: 140px; position: absolute; top: 50%; transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); margin: -120px 0 0 -120px; overflow: hidden; z-index: 1; } .offer-two .offer__cta .offer__cta-single:hover .sub-title, .offer-two .offer__cta .offer__cta-single:hover h2 a { color: var(--primary-color); } .offer-two .offer__cta .offer__cta-single:hover .offer-thumb-hover, .offer-two .offer__cta .offer__cta-single:hover .sub-title i, .service-f .service-f-single-active .single-item .sub-title, .sponsor .slick-center img { opacity: 1; } .offer-two .offer__cta .offer__cta-single:hover h2 a i { -webkit-text-fill-color: unset; -webkit-text-stroke: 0px; color: var(--primary-color); } .testimonial .testimonial__text-slider-single h2 { margin-top: -20px; font-weight: 900; text-transform: uppercase; display: flex; align-items: center; gap: 30px; margin-bottom: 0; font-family: sans-serif; -webkit-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke: 2px var(--white); } .testimonial .testimonial__text-slider-single h2 i { -webkit-text-fill-color: var(--primary-color); -webkit-text-stroke: 0px var(--primary-color); color: var(--primary-color); } .testimonial .testimonial-s__slider .thumb svg { position: absolute; top: 50%; transform: translateY(-50%); right: -80px; } .testimonial .testimonial-s__slider .testimonial-s__content .content, .testimonial-two .quote { margin: 30px 0; } .testimonial .testimonial-s__slider .testimonial-s__content h4 { font-weight: 400; text-transform: capitalize; } .team-slider-s .slick-center-active .team-wrap .intro p, .testimonial .testimonial-s__slider .testimonial-s__content .content-cta p { color: var(--primary-color); margin-top: 6px; } .testimonial .slide-group { position: absolute; top: 50%; transform: translateY(-50%); right: 0; flex-direction: column; } .testimonial .slide-group button:first-of-type, .testimonial .slide-group button:nth-of-type(2) { transform: rotate(90deg); } .blog .blog__single-meta a i, .blog-three .blog__single-meta a i { transform: rotate(-45deg); } .testimonial .other-section { position: absolute; left: 0; bottom: 130px; width: 330px; opacity: 0.25; transform: translateX(-40%); } .testimonial-two { background: url("../images/testimonial/line.png"), var(--tertiary-color); background-repeat: no-repeat; background-size: contain; background-position: left bottom; } .testimonial-two .testimonial-two__thumb img { border-radius: 500px; } .testimonial-two .quote i { font-size: 60px; color: var(--primary-color); } .testimonial-two blockquote { color: #c1c1c1; } .testimonial-two .author-meta { display: flex; align-items: center; gap: 24px; margin-top: 30px; } .testimonial-two .author-meta img { width: 80px; height: 80px; border-radius: 50%; } .contact-m p, .testimonial-two .author-meta h5 { margin-bottom: 6px; } .testimonial-two .star { position: absolute; top: 80px; right: 120px; z-index: -1; } .blog .blog__single-thumb a img { width: 95%; height: 360px; } .blog .blog__single-meta, .blog-three .blog__single-meta { display: flex; align-items: center; gap: 30px; row-gap: 16px; flex-wrap: wrap; margin-top: 30px; } .blog .blog__single-meta a, .blog-three .blog__single-meta a { align-items: center; display: inline-flex; gap: 12px; line-height: 1; } .blog .blog__single-meta a { color: var(--primary-color); border-radius: 30px; } .blog .blog__single-meta p { color: var(--secondary-color); } .blog-two .blog-two__slider-single::before { content: ""; position: absolute; inset: 0px; width: 100%; height: 100%; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 100%); transform: translateY(100%); transition: var(--transition); } .blog-two .blog-two__slider-single .blog__single-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px; width: 100%; transform: translateY(200%); transition: var(--transition); margin: 0; } .blog-two .blog-two__slider-single:hover .blog__single-content, .blog-two .blog-two__slider-single:hover::before, .blog-two .slick-center .blog__single-content, .blog-two .slick-center::before { transform: translateY(0); } .blog-three .blog-three__wrapper { padding-top: 65px; border-top: 1px solid #414141; } .blog-three .blog-three__single { padding: 30px 0; border-bottom: 1px solid #414141; } .blog-three .blog-three__single:first-of-type { padding-top: 0; } .blog-three .blog-three__single:last-of-type { padding-bottom: 0; border-bottom: 0; } .blog-three .blog-three__single:hover h4 a { color: var(--primary-color); text-decoration: underline; } .blog-three .blog__single-content h4 { max-width: 650px; } .blog-three .blog__single-content h4 a, .cta-two h2, .cta-two h5 { text-transform: capitalize; } .blog-three .blog__single-meta a { padding: 12px 20px; border: 1px solid #414141; color: var(--primary-color); border-radius: 30px; text-transform: uppercase; } .blog-three .blog__single-meta p, .project-d .quote-pj h4 { color: var(--secondary-color); } .sponsor .sponsor__slider-item img { max-width: 100%; height: auto; margin-left: auto; margin-right: auto; opacity: 0.25; transition: var(--transition); } .next-page .next__text-slider-single h2 { margin-top: -14px; margin-bottom: -14px; } .next-page .next__text-slider-single h2 a { font-weight: 900; text-transform: uppercase; display: flex; align-items: center; gap: 30px; } .mission-s .mission-s__single--alt h3, .mission-s .mission-s__single--alt p, .projects-s .projects-s__single .content h4, .work-steps .work-steps__single h5 { text-transform: capitalize; } .award .award__content .title span, .next-page .next__text-slider-single h2 a i { color: var(--primary-color); } .next-page .next__text-slider-single:nth-of-type(2n) h2 a { font-family: sans-serif; -webkit-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke: 2px var(--white); color: transparent; } .next-page .next__text-slider-single:nth-of-type(2n) h2 a i, .portfolio-m .portfolio-m__single .content i { -webkit-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke: 2px var(--primary-color); } .liner::before { content: ""; position: absolute; top: 0; right: 0; width: 60%; border-top: 1px solid #414141; } .award { background-color: var(--tertiary-color); position: relative; } .award .award-thumb img { border-radius: 0 1000px 1000px 0; } .award .award__content-meta { display: flex; gap: 16px; justify-content: space-between; margin-top: 40px; position: relative; } .award .award__content-meta::before { content: ""; position: absolute; top: 50px; left: 0; right: 0; height: 1px; width: 100%; background-color: var(--primary-color); } .award .single::before { content: ""; position: absolute; top: 50px; left: 0; border: 15px solid transparent; border-top-color: var(--primary-color); } .award .single h4 { color: #fff; font-weight: 700; } .award .single h4:first-of-type { color: var(--primary-color); font-weight: 500; margin-bottom: 50px; } .award .single p { margin-top: 10px; color: var(--secondary-color); } .award .dot, .award .dot-two, .award .star, .award .star-two { position: absolute; z-index: -1; } .award .star { top: 100px; left: 50%; transform: translateX(-50%); max-width: 10vw; } .award .star-two { bottom: 60px; left: 20%; max-width: 2vw; } .award .dot { top: 40%; left: 6%; max-width: 10vw; } .award .dot-two { bottom: 60px; left: 50%; transform: translateX(-45%); max-width: 10vw; } .video-modal .modal-bg { width: 100%; min-height: 360px; } .video-modal .video-frame, .work-steps .video-frame { width: 190px; min-width: 190px; height: 190px; font-size: 30px; } .video-modal .video-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .video-modal .video-frame i { width: 120px; min-width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--primary-color); color: var(--white); } .cta-s .cta__wrapper { max-width: 1320px; margin-left: auto; margin-right: auto; padding: 100px 20px; background-color: #101010; border-radius: 20px; position: relative; z-index: 1; overflow: hidden; background-repeat: no-repeat; } .cta-s .footer__single-form { max-width: 650px; margin-left: auto; margin-right: auto; } .cta-s .footer__single-form .input-email { border-radius: 100px; border: 1px solid #c1c1c1; } .project__text-slider, .service-f .service-f-single:last-of-type, .ux-process .service-f-single:last-of-type { border-bottom: 1px solid #414141; } .cta-s .footer__single-form .input-email input { padding: 24px 30px; width: calc(100% - 100px); } .cta-s .footer__single-form .input-email button { width: 100px; min-width: 100px; } .cta-s .star, .cta-s .star-two { position: absolute; z-index: -1; opacity: 0.25; } .cta-s .star { left: 40px; top: 20%; max-width: 10vw; } .cta-s .star-two { right: 60px; bottom: 10%; max-width: 10vw; } .cta-two .cta-two-wrapper { max-width: 1350px; padding: 80px 65px; background-color: rgba(0, 0, 0, 0); border-radius: 20px; } .cta-two span { padding: 10px; background-color: var(--primary-color); color: var(--white); border-radius: 0 20px 20px; display: inline-block; } .cta-two h2 { font-weight: 700; margin-bottom: 30px; margin-top: 30px; } .cta-two .btn { background-color: rgba(0, 0, 0, 0); border: 1px solid var(--primary-color) !important; } .service-f .service-f-single { padding: 40px 90px 40px 0; display: flex; align-items: center; gap: 16px; justify-content: space-between; border-top: 1px solid #414141; position: relative; } .service-f .service-f-single .toggle-service-f::before { content: "+"; font-family: "Font Awesome 6 Pro"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--white); font-size: 18px; } .service-f .service-f-single-active .toggle-service-f::before, .ux-process .service-f-single-active .toggle-service-f::before { content: ""; font-family: "Font Awesome 6 Pro"; color: var(--primary-color); font-size: 18px; } .service-f .single-item .sub-title { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; line-height: 1; border: 1px solid #414141; color: var(--white); border-radius: 30px; text-transform: uppercase; margin-bottom: 20px; transition: var(--transition); opacity: 0.5; } .service-f .single-item .sub-title i { transform: rotate(-45deg); color: var(--primary-color); transition: var(--transition); } .service-f .single-item p { max-width: 450px; } .service-f .single-item ul { min-width: 220px; } .service-f .single-item li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .service-f .single-item li i { font-size: 14px; color: var(--primary-color); } .service-f button { width: 50px; min-width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #1d1d1d; position: absolute !important; top: 50%; transform: translateY(-50%); right: 0; } .service-f .dot-img { position: absolute; top: 50%; left: 6%; max-width: 15vw; z-index: -1; } .work-steps .work-steps__single { padding-top: 230px; position: relative; } .work-steps .work-steps__single h5 { position: relative; z-index: 2; padding: 16px 30px; border: 1px dashed #414141; background-color: var(--black); border-radius: 100px; overflow: hidden; transition: var(--transition); } .work-steps .work-steps__single h5::before { content: ""; position: absolute; inset: 0px; width: 0%; border-radius: 100px; background: linear-gradient(90deg, #ff7425 0, rgba(255, 116, 37, 0) 60.08%); z-index: -1; transition: var(--transition); } .project-d .poster__slider-wrapper .slide-group button, .service-t .slide-group button { z-index: 2; } .work-steps .work-steps__single span { position: absolute; top: 0; right: 0; width: 60px; min-width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #1f1f1f; text-align: center; color: #8d8d8d; line-height: 1.4; transition: var(--transition); } .team-slider-s .team-s__slider-single .thumb .thumb__content .info p, .team-slider-s .team-s__slider-single .thumb .thumb__content .social-alt a:hover { color: var(--white); } .work-steps .work-steps__single span::after { content: ""; position: absolute; top: calc(100% + 30px); left: 50%; transform: translateX(-50%); height: 0; width: 1px; background-color: #414141; transition: var(--transition); } .work-steps .work-steps__single-active span::after, .work-steps .work-steps__single:hover span::after { height: 108px; } .work-steps .work-steps__single-active h5::before, .work-steps .work-steps__single:hover h5::before { width: 100%; } .work-steps .work-steps__single .work-thumb-hover { width: 600px; height: 220px; position: absolute; top: 100%; inset-inline-start: 0; background-size: 100% 100%; background-repeat: no-repeat; background-position-x: 75%; opacity: 0; transition: opacity 0.3s, transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); margin: 60px 0 0 -150px; overflow: hidden; pointer-events: none; z-index: -1; } .team-slider-s .team-r .slide-group button:hover, .work-steps .work-steps__single-active span, .work-steps .work-steps__single:hover span { background-color: var(--primary-color); color: var(--white); } .work-steps .work-steps__single-active h5, .work-steps .work-steps__single:hover h5 { border: 1px solid transparent; } .work-steps .work-steps__single-active .work-thumb-hover, .work-steps .work-steps__single:hover .work-thumb-hover { opacity: 1; } .work-steps .work-two { margin-top: 100px; } .work-steps .work-three { margin-top: 200px; } .work-steps .work-four { margin-top: 300px; } .work-steps .video-frame { position: absolute; top: 33%; right: 12%; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary-color); } .four-info .primary-text { margin-bottom: 24px; font-weight: 600; } .projects-s .projects-s__single .thumb a, .projects-s .projects-s__single .thumb a img { width: 100%; } .projects-s .projects-s__single .content { margin-top: 30px; } .projects-s .projects-s__single .content p { margin-top: 20px; color: #d9d9d9; } .blog-main .blog-main__single, .projects-s .gaper { margin-bottom: 65px; } .project__text-slider { margin-bottom: 80px; padding: 40px 0; border-top: 1px solid #414141; } .project__text-slider-single h2 { font-weight: 700; text-transform: uppercase; display: flex; align-items: center; gap: 30px; margin-bottom: 0; } .project__text-slider-single h2 i { color: var(--primary-color); font-size: 30px; } @keyframes fde { 0% { transform: translateY(40px); display: none; opacity: 0; visibility: hidden; } 100% { transform: translateY(0); display: block; opacity: 1; visibility: visible; } } @keyframes fdee { 0% { transform: translateX(-100px); } 100% { transform: translateY(0); } } .team-slider-s .team-s__slider-single { overflow: hidden; } .team-slider-s .team-s__slider-single .content { transform: translateY(100%); transition: var(--transition); display: none; opacity: 0; visibility: hidden; } .team-m .team-m__single .thumb, .team-slider-s .team-s__slider-single .thumb { position: relative; overflow: hidden; } .team-slider-s .team-s__slider-single .thumb a { width: 100%; } .team-slider-s .team-s__slider-single .thumb .thumb__content { position: absolute; bottom: 0; left: 0; padding: 30px; background-color: #1a1a1a; background-size: cover; background-position: left bottom; height: 130px; width: 240px; overflow-y: clip; transition: 0.4s ease-in-out; display: none; } .team-slider-s .team-s__slider-single .thumb .thumb__content p { color: var(--primary-color); margin-top: 8px; } .team-slider-s .team-s__slider-single .thumb .thumb__content .info { transform: translateY(-200%); display: none; transition: var(--transition); margin-bottom: 20px; } .team-slider-s .team-s__slider-single .thumb .thumb__content .social-alt { position: absolute; display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center; top: 0; left: 100%; bottom: 0; width: 60px; height: 100%; background: linear-gradient(90deg, #f90 0, #cc2500 100%); transition: 0.4s ease-in-out; transform: translateY(100%); } .team-slider-s .team-s__slider-single .thumb:hover .thumb__content { height: 220px; } .team-slider-s .team-s__slider-single .thumb:hover .thumb__content .info { transform: translateY(0); display: block; animation: 0.4s ease-in-out rer; } .team-slider-s .team-s__slider-single .thumb:hover .thumb__content .social-alt { transform: translateY(0); } .team-slider-s .slick-track { display: flex !important; align-items: center !important; justify-content: start !important; } .team-slider-s .slick-center-active .content { transform: translateY(0); display: block; opacity: 1; visibility: visible; animation: 0.6s ease-in-out fde; max-width: 340px; } .team-slider-s .slick-center-active .team-wrap { display: flex; align-items: center; height: 100%; gap: 24px; padding: 25px 20px; background-color: #131313; } .team-slider-s .slick-center-active .team-wrap .thumb { max-width: 290px; min-width: 290px; } .team-slider-s .slick-center-active .team-wrap .thumb img { width: 100%; min-height: 500px; } .team-slider-s .slick-center-active .team-wrap hr { background-color: #414141; height: 1px; margin: 24px 0; opacity: 1; } .team-slider-s .slick-center-active .team-wrap .inner p, .team-slider-s .slick-center-active .team-wrap .inner span { font-size: 14px; } .team-slider-s .slick-center-active .team-wrap .skill-wrap { margin: 24px 0; } .team-slider-s .slick-center-active .team-wrap .skill-bar-single { margin-bottom: 10px; } .team-det .skill-bar-wrapper, .team-slider-s .slick-center-active .team-wrap .skill-bar-wrapper { margin-top: 10px; } .home-five-light .quinary--navbar .open-offcanvas-nav, .home-four-light .projects-s .btn, .home-four-light .quaternary--navbar .open-offcanvas-nav, .team-det .skill-bar-wrapper span, .team-slider-s .slick-center-active .team-wrap .skill-bar-wrapper span { color: #757575; } .team-det .skill-bar, .team-slider-s .slick-center-active .team-wrap .skill-bar { height: 5px; border-radius: 100px; background-color: #fff; position: relative; } .team-det .skill-bar-percent, .team-slider-s .slick-center-active .team-wrap .skill-bar-percent { position: absolute; top: 0; left: 0; bottom: 0; background-color: var(--primary-color); border-radius: inherit; } .team-det .percent-value, .team-slider-s .slick-center-active .team-wrap .percent-value { position: absolute; bottom: calc(100% + 10px); right: 0; } .team-slider-s .slick-center-active .team-wrap .social { margin-top: 30px; justify-content: flex-start; gap: 14px; } .team-slider-s .slick-center-active .team-wrap .social a { border: 1px solid #888; color: #888; background-color: rgba(0, 0, 0, 0); } .team-slider-s .team-r .slide-group { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); align-items: center; justify-content: space-between; z-index: 9; max-width: 86%; padding: 0 15px; margin-left: auto; margin-right: auto; display: none; } .team-slider-s .team-r .slide-group button { background-color: var(--white); color: var(--primary-color); } .mission-s .mission-s__single { height: 100%; background-color: #131313; } .mission-s .mission-s__single--alt { padding: 80px 60px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; transition: var(--transition); border: 10px solid transparent; } .mission-s .mission-s__single--alt:hover { border: 10px solid var(--primary-color); } .service-t { position: relative; overflow-x: clip; z-index: 1; } .service-t .service-t-single-wrapper { position: relative; z-index: 1; padding: 3px 3px 0; } .service-t .service-t-single-wrapper::before { content: ""; position: absolute; inset: 0px; width: 100%; height: 0%; background-image: linear-gradient(to bottom, #ff7425, transparent); z-index: -1; transition: var(--transition); } .contact-m .contact__map, .service-t .service-t-single-wrapper:hover::before { height: 100%; } .service-t .service-t-single-wrapper:hover .cta a span { transform: translateY(0); color: var(--primary-color); } .service-t .service-t__slider-single { padding: 30px; background-color: var(--tertiary-color); position: relative; } .service-t .service-t__slider-single .sub-title { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; line-height: 1; border: 1px solid #414141; border-radius: 30px; margin-bottom: 32px; text-transform: uppercase; color: var(--white); } .service-t .service-t__slider-single .sub-title i { transform: rotate(-45deg); color: var(--primary-color); } .service-t .service-t__slider-single h4 a { font-size: 28px; font-weight: 700; } .service-t .service-t__slider-single ul { margin: 30px 0 40px; width: 100%; } .blog-main .blog-main__single:last-of-type, .blog-main .widget:last-of-type, .details-group p:last-of-type, .project-d .project-d-group p:last-of-type, .project-d .project-d-group ul li:last-of-type, .service-t .service-t__slider-single ul li:last-of-type { margin-bottom: 0; } .service-t .service-t__slider-single ul li { list-style-type: disc; margin-bottom: 16px; font-weight: 500; font-size: 14px; text-transform: capitalize; } .service-t .service-t__slider-single .cta a { display: flex; align-items: center; gap: 20px; text-transform: uppercase; overflow: hidden; } .service-t .service-t__slider-single .cta a i { font-size: 36px; -webkit-text-fill-color: rgba(0, 0, 0, 0); -webkit-text-stroke: 1px var(--white); transition: var(--transition); } .service-t .service-t__slider-single .cta a span { color: var(--white); font-size: inherit; line-height: inherit; transition: inherit; transform: translateY(200%); } .service-t .slide-group { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; max-width: 96%; margin-left: auto; margin-right: auto; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; z-index: -1; } .project-sl, .ux-process .service-f-single { display: flex; align-items: center; position: relative; } .ux-process .intro-btn h4 { position: relative; padding-left: 40px; margin-bottom: 0; } .ux-process .intro-btn h4::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 15px; height: 15px; background-color: #ff8e5e; } .ux-process .service-f-single { padding: 24px 160px 24px 0; gap: 16px; justify-content: space-between; border-top: 1px solid #414141; } .ux-process .service-f-single:nth-of-type(2) .intro-btn h4::before { background-color: #d7f890; } .ux-process .service-f-single:nth-of-type(3) .intro-btn h4::before { background-color: #757575; } .ux-process .service-f-single:nth-of-type(4) .intro-btn h4::before { background-color: #84d6d7; } .ux-process .service-f-single:nth-of-type(5) .intro-btn h4::before { background-color: #348cff; } .ux-process .service-f-single:nth-of-type(6) .intro-btn h4::before { background-color: #fed56a; } .ux-process .service-f-single .toggle-service-f::before { content: "+"; font-family: "Font Awesome 6 Pro"; position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: var(--white); font-size: 18px; } .comment-form .cta__group .btn::before, .feedback-s .btn--secondary::before, .home-two-light .banner-two::before { content: none; } .portfolio-m .portfolio-m__single:hover .content, .team-m .team-m__single .thumb:hover .thumb__content .social-alt { transform: translateY(0); } .ux-process .body-cn { max-width: 640px; } .ux-process .body-cn p { max-width: 100% !important; } .ux-process button { background-color: rgba(0, 0, 0, 0); position: absolute !important; top: 50%; transform: translateY(-50%); right: 0; } .poster img, .poster-small img { width: 100%; min-height: 260px; } .details-group h3 { margin-bottom: 30px; font-weight: 500; text-transform: capitalize; } .project-sl { overflow-x: clip; margin: 0 -15px; } .project-sl .project-sl__single { padding: 0 15px; max-width: 360px; min-width: 360px; width: 100%; border-right: 1px solid #414141; } .project-sl .project-sl__single:hover a { color: var(--primary-color); } .project-sl .thumb { margin-bottom: 100px; } .project-sl .thumb a { width: 100%; height: 430px; display: block; } .project-sl .content { display: flex; align-items: center; justify-content: center; } .project-sl .content h2 { height: 400px; } .project-sl .content h2 a { writing-mode: vertical-rl; transform: rotate(-180deg); text-transform: capitalize; } .blog-main .widget, .project-d .project-d-group h3 { margin-bottom: 40px; } .project-d .project-d-group ul { margin-top: 20px; } .project-d .project-d-group ul li { margin-bottom: 12px; list-style-type: disc; } .project-d .poster__slider-wrapper { position: relative; overflow: hidden; margin: 60px 0; } .project-d .poster__slider-wrapper img { width: 100%; min-height: 300px; } .project-d .poster__slider-wrapper .slide-group { padding: 0 30px; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; } .project-d .project-d-o__single { padding: 30px; border: 1px solid #414141; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .project-d .project-d-o__single h5 { position: relative; padding-left: 20px; } .project-d .project-d-o__single h5::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background-color: var(--primary-color); } .project-d .project-d-o__single p { color: #757575; margin-top: 12px; } .project-d .project-d-o__single .thumb { width: 100px; min-width: 100px; height: 100px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background-color: var(--primary-color); } .blog-details .blog-details__pagination .latest-single .latest-thumb, .blog-main .widget__latest .latest-thumb { width: 80px; min-width: 80px; height: 80px; } .project-d .quote-pj { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: space-between; padding: 40px 160px 40px 0; border: 1px solid #414141; border-left: 0; border-right: 0px; margin-top: 40px; } .project-d .quote-pj .quote i { color: var(--primary-color); font-size: 56px; } .project-d .quote-pj .cont { max-width: 800px; } .project-d .project-d__slider img { width: 100%; min-height: 280px; } .blog-main .blog-main__content, .blog-main .blog-main__sidebar { position: sticky; top: 140px; } .blog-main .blog-main__single .thumb { padding: 30px; border: 1px solid #414141; border-radius: 10px; } .blog-main .blog-main__single .thumb .thumb-link { position: relative; } .blog-main .blog-main__single .thumb .thumb-link a { width: 100%; } .blog-details .bd-thumb img, .blog-main .blog-main__single .thumb .thumb-link a img { width: 100%; min-height: 240px; } .blog-main .blog-main__single .thumb .thumb-link .video-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .blog-main .blog-main__single .thumb .thumb-link .video-wrap a { width: 104px; min-width: 104px; height: 104px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--white); color: #000; font-size: 30px; } .blog-main .blog-main__single .video-wrap a { position: relative; z-index: 1; } .blog-main .blog-main__single .video-wrap a::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 20px); height: calc(100% + 20px); border-radius: 50%; background-color: inherit; opacity: 0.8; z-index: -1; animation: 3s linear infinite wave; } .blog-main .blog-main__single .video-wrap a::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 40px); height: calc(100% + 40px); border-radius: 50%; background-color: inherit; opacity: 0.4; z-index: -2; animation: 6s linear 1s infinite wave; } .blog-main .blog-main__single .meta { display: flex; align-items: center; gap: 24px; row-gap: 16px; justify-content: space-between; flex-wrap: wrap; margin-top: 30px; } .blog-details .bd-meta .meta__left, .blog-main .blog-main__single .meta__left { display: flex; align-items: center; gap: 24px; } .blog-main .blog-main__single .meta__left span { width: 8px; height: 8px; border-radius: 50%; background-color: #d9d9d9; } .blog-main .blog-main__single .meta__left strong { color: var(--theme-color); } .blog-main .blog-main__single .meta__left p { font-size: 14px; color: #646464; } .blog-main .blog-main__single .meta__right { flex-grow: 1; display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .blog-main .blog-main__single .meta__right a { width: auto; line-height: 20px; padding: 6px 10px; border-radius: 30px; font-weight: 400; color: #646464; background-color: #eee; } .blog-main .blog-main__single .meta__right a:hover { background-color: #dff0fa; } .blog-main .blog-main__single .content { padding: 30px 30px 0; } .blog-main .blog-main__single .content .h4, .form-group-single { margin-bottom: 20px; } .blog-main .blog-main__single .content a { letter-spacing: 0; } .blog-main .blog-main__single .content a:hover, .blog-main .widget .form-group-input button:hover { color: var(--primary-color); } .audio-player, .blog-details .bd-content__alt, .blog-details .bd-content__alt ul, .blog-main .blog-main__single .content .cta, .contact-m .map-wrapper { margin-top: 30px; } .blog-main .blog-main__single .content .cta a { width: 42px; min-width: 42px; height: 42px; border-radius: 0; display: flex; align-items: center; justify-content: center; background-color: #f5f5f5; font-size: 18px; color: var(--black); } .blog-details .bd-tags .tags-left .tags-content a:hover, .blog-main .blog-main__single .content .cta a:hover { background-color: var(--primary-color); color: var(--white); } .blog-main .blog-main__sidebar { background-color: #101010; padding: 30px; } .blog-main .widget .widget__head .h5 { font-weight: 500; } .blog-main .widget .form-group-input { display: flex; align-items: center; justify-content: space-between; border: 1px solid #414141; background-color: var(--black); padding-right: 20px; } .blog-main .widget .form-group-input input { width: 100%; padding: 12px 20px; background-color: var(--black); color: #fff; } .blog-main .widget .form-group-input button { font-size: 20px; color: #646464; } .blog-main .widget__list li { list-style-type: disc; margin-bottom: 14px; } .blog-main .widget__list li:last-of-type { margin-bottom: 0; } .blog-main .widget__list a { font-size: 16px; color: #fff; font-weight: 500; } .blog-main .widget__list a:hover { color: var(--primary-color); } .blog-main .widget__latest .latest-single { display: flex; align-items: center; gap: 20px; padding-bottom: 30px; border-bottom: 1px solid #414141; margin-bottom: 30px; } .blog-main .widget__latest .latest-single:last-of-type { margin-bottom: 0; padding-bottom: 0; border: 0 solid transparent; } .blog-main .widget-big a, .blog-main .widget__latest .latest-thumb a, .blog-main .widget__latest .latest-thumb img { width: 100%; } .blog-main .widget__latest .latest-content p { color: #646464; line-height: 26px !important; margin-bottom: 6px; } .blog-main .widget__latest .latest-content a { color: var(--theme-color); font-size: 16px; font-weight: 400; text-transform: capitalize; letter-spacing: 0; } .blog-main .pagination button:hover, .blog-main .widget__latest .latest-content a:hover, .blog-main .widget__tags ul a:hover { color: var(--primary-color); } .blog-main .widget__tags ul { display: flex; align-items: center; gap: 24px; justify-content: space-between; flex-wrap: wrap; } .blog-main .widget__tags ul a { font-size: 14px; color: #646464; text-transform: capitalize; } .blog-main .pagination-wrapper { padding-top: 50px; margin-top: 65px; border-top: 1px solid #414141; } .blog-main .pagination { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; } .blog-main .pagination a { width: 50px; min-width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #d9d9d9; background-color: #000; color: #fff; transition: var(--transition); } .blog-main .pagination .active, .blog-main .pagination a:hover { background-color: var(--primary-color); color: var(--white); border: 1px solid var(--primary-color); } .blog-main .pagination button { font-size: 20px; color: var(--theme-color); } .blog-details .bd-content { padding: 30px; } .blog-details .bd-meta .meta__left span { width: 8px; height: 8px; border-radius: 50%; background-color: #d9d9d9; } .blog-details .bd-meta .meta__left strong { color: var(--theme-color); } .blog-details .bd-meta .meta__left p { font-size: 14px; color: #646464; } .blog-details .bd-content-info .paragraph { margin-top: 20px; margin-bottom: 50px; } .blog-details .bd-group { display: flex; gap: 16px; } .blog-details .bd-group img { width: calc(50% - 8px); height: 100%; } .blog-details .bd-content__alt li { list-style-type: disc; margin-bottom: 10px; } .blog-details .bd-content__alt li:last-of-type, .paragraph p:last-of-type { margin-bottom: 0; } .blog-details .bd-quote { padding: 48px 80px; background-color: #1e1e1e; } .blog-details .bd-tags { padding: 30px 0; border: 1px solid #414141; border-left: 0; border-right: 0px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 40px; } .blog-details .bd-tags .tags-left, .blog-details .bd-tags .tags-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .blog-details .bd-tags .tags-left .tags-content { display: flex; align-items: center; gap: 10px; } .blog-details .bd-tags .tags-left .tags-content a { font-size: 14px; color: #646464; padding: 6px 10px; border-radius: 30px; background-color: #1b1b1b; } .blog-details .bd-tags .tags-right { justify-content: flex-end; } .blog-details .bd-tags .tags-right .social { gap: 12px; } .blog-details .bd-tags .tags-right a { width: 30px; min-width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid #414141; color: #d9d9d9; font-size: 12px; background-color: rgba(0, 0, 0, 0); } .blog-details .blog-details__pagination .latest-single .latest-content a:hover, .blog-details .blog-details__pagination a:hover { color: var(--primary-color); } .blog-details .bd-tags .tags-right a:hover { color: var(--primary-color); border: 1px solid var(--primary-color); background-color: var(--white); } .blog-details .blog-details__pagination a { font-size: 16px; font-weight: 600; color: var(--theme-color); transition: var(--transition); } .blog-details .blog-details__pagination a i { font-size: 24px; transition: none; } .blog-details .blog-details__pagination .latest-single { padding: 25px 30px; background-color: #1e1e1e; display: flex; align-items: center; gap: 20px; margin-top: 30px; } .audio-player audio, .blog-details .blog-details__pagination .latest-single .latest-thumb img { width: 100%; } .blog-details .blog-details__pagination .latest-single .latest-content { text-align: start; } .blog-details .blog-details__pagination .latest-single .latest-content p { color: #646464; font-size: 14px; line-height: 26px !important; margin-bottom: 6px; } .blog-details .blog-details__pagination .latest-single .latest-content a { color: var(--theme-color); text-transform: capitalize; font-size: 16px; font-weight: 500; letter-spacing: 0; } .comment-form input, .comment-form textarea { background-color: var(--white); border-radius: 0; } .comment-form textarea { min-height: 200px; } .comment-form .cta__group { justify-content: flex-start; margin-top: 40px; } .comment-form .cta__group i { transform: rotate(-45deg); } .comment-form .cta__group .btn { background-color: var(--primary-color); color: var(--white); text-transform: capitalize; border: 1px solid #414141 !important; display: flex; align-items: center; border-radius: 6px; gap: 12px; } .team-det .team-det__thumb .social-alt, .team-m .team-m__single .thumb .thumb__content .social-alt { gap: 16px; bottom: 0; width: 60px; background: linear-gradient(90deg, #f90 0, #cc2500 100%); position: absolute; } .comment-form .cta__group .btn:hover { color: var(--white); border: 1px solid var(--tertiary-color) !important; } .comment-form .cta__group .btn i { transition: none; } .form-group-single label, .form-group-single p { margin-bottom: 10px; text-transform: capitalize; } .form-group-single input, .form-group-single textarea { padding: 12px 20px; background-color: #101010; border: 1px solid #414141; border-radius: 5px; width: 100%; text-transform: capitalize; } .form-group-single input::-moz-placeholder, .form-group-single textarea::-moz-placeholder { color: #969696; } .form-group-single input::placeholder, .form-group-single textarea::placeholder { color: #969696; } .form-group-single textarea { min-height: 200px; max-height: 200px; } .form-group-wrapper { display: flex; align-items: center; gap: 30px; row-gap: 20px; margin-bottom: 20px; } .form-group-wrapper .form-group-single { width: calc(50% - 15px); margin-bottom: 0; } .thumb-radio { padding: 75px 40px; background: #131313; } .team-m .team-m__single .thumb a { width: 100%; } .team-det .team-det__thumb .social-alt a, .team-m .team-m__single .thumb .thumb__content .social-alt a { width: auto; } @keyframes rer { 0% { transform: translateY(-200%); display: none; opacity: 0; } 100% { display: block; opacity: 1; transform: translateY(0); } } .team-m .team-m__single .thumb .thumb__content { position: absolute; bottom: 0; left: 0; padding: 30px; background-color: #1a1a1a; background-size: cover; background-position: left bottom; height: 130px; width: 280px; overflow-y: clip; transition: 0.4s ease-in-out; } .team-det .intro-left p, .team-m .team-m__single .thumb .thumb__content p { color: var(--primary-color); margin-top: 8px; } .team-det .team-det__thumb .social-alt a:hover, .team-m .team-m__single .thumb .thumb__content .info p, .team-m .team-m__single .thumb .thumb__content .social-alt a:hover { color: var(--white); } .team-m .team-m__single .thumb .thumb__content .info { transform: translateY(-200%); display: none; transition: var(--transition); margin-bottom: 20px; } .team-m .team-m__single .thumb .thumb__content .social-alt { display: flex; flex-direction: column; align-items: center; justify-content: center; top: 0; left: 100%; height: 100%; transition: 0.4s ease-in-out; transform: translateY(100%); } .team-m .team-m__single .thumb:hover .thumb__content { height: 220px; } .team-m .team-m__single .thumb:hover .thumb__content .info { transform: translateY(0); display: block; animation: 0.4s ease-in-out rer; } .portfolio-m .portfolio-m__single, .team-det .team-det__thumb { height: 100%; position: relative; overflow: hidden; } .team-det .team-det__thumb img { width: 100%; height: 100%; } .team-det .team-det__thumb .social-alt { display: flex; flex-direction: column; align-items: center; justify-content: center; right: 70px; height: 180px; } .team-det .team-det__content { background-color: #1a1a1a; padding: 30px; height: 100%; } .team-det .intro { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px solid #414141; padding-bottom: 40px; } .team-det .intro-right a { display: flex; gap: 12px; } .team-det .content { margin: 40px 0; } .team-det .skill-wrap { margin: 24px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 30px; } .team-det .skill-bar-single { margin-bottom: 10px; width: 100%; max-width: 340px; } .team-det .team-det__info { margin-top: 30px; padding: 30px; background-color: #1a1a1a; } .team-det .team-det__info h4 { padding-bottom: 30px; margin-bottom: 40px; border-bottom: 1px solid #414141; } .contact-m .thumb, .team-det .team-det__info .group { margin-bottom: 30px; } .feedback-s .content .quote, .team-det .team-det__info .group h5 { margin-bottom: 20px; } .contact-m p a:hover, .team-det .team-det__info .group h5 span { color: var(--primary-color); } .contact-m p:last-of-type, .faq .accordion .accordion-item:last-of-type, .team-det .team-det__info .group:last-of-type { margin-bottom: 0; } .portfolio-m .portfolio-m__single .thumb a, .portfolio-m .webEffect .thumb img { width: 100%; height: 100%; } .portfolio-m .portfolio-m__single .thumb a img { width: 100%; height: 100%; min-height: 360px; } .portfolio-m .webEffect .thumb a { width: 100%; height: 700px; } .portfolio-m .portfolio-m__single .content { position: absolute; inset: 0px; background-color: rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; justify-content: space-between; padding: 40px; transform: translateY(100%); transition: 0.4s ease-in-out; } .portfolio-m .portfolio-m__single .content i { font-size: 120px; } .portfolio-m .portfolio-m__single .content a { text-transform: capitalize; } .portfolio-m .portfolio-m__single .tr { text-align: end; } .feedback-s .feedback-s__single { padding: 40px; background-color: #191919; transition: var(--transition); border: 1px solid transparent; } .feedback-s .feedback-s__single:hover { border: 1px solid var(--primary-color); } .feedback-s .feedback-s__single:hover .quote i, .home-light .offer h2 a:hover, .home-light .offer p a:hover { color: var(--primary-color) !important; } .feedback-s .content .quote i { font-size: 56px; color: var(--secondary-color); transition: var(--transition); } .feedback-s .content p { color: #888; text-transform: capitalize; } .feedback-s .author p, .feedback-s .btn--secondary { color: var(--primary-color); text-transform: capitalize; } .feedback-s hr { margin: 40px 0; background-color: #414141; height: 1px; } .feedback-s .author .thumb { width: 70px; height: 70px; min-width: 70px; border-radius: 50%; } .feedback-s .author p { margin-top: 4px; } .feedback-s .btn--secondary { border: 0 solid transparent !important; font-weight: 400; text-decoration: underline; padding: 0; } .faq .faq__thumb { padding-right: 30px; } .faq .faq__thumb img { width: 100%; min-height: 260px; } .faq .accordion .accordion-item { margin-bottom: 30px; background-color: #1a1a1a; border-radius: 0; border: 0; } .faq .accordion .accordion-item .accordion-button, .faq .accordion .accordion-item .accordion-button:not(.collapsed) { border-radius: 0; background-color: rgba(0, 0, 0, 0); color: #fff; } .faq .accordion .accordion-item .accordion-button:not(.collapsed)::after { color: var(--primary-color); content: ""; font-family: "Font Awesome 6 Pro"; transform: rotate(0); } .faq .accordion .accordion-item .accordion-button { position: relative; box-shadow: 0 0 0; text-transform: capitalize; } .error span, .home-light .portfolio .portfolio__single-alt-wrapper h4 a { color: var(--white); } .faq .accordion .accordion-item .accordion-button::after { content: "+"; font-family: "Font Awesome 6 Pro"; font-weight: 900; background-image: none; font-size: 16px; color: var(--primary-color); z-index: 1; display: inline-flex; align-items: center; justify-content: center; transform: rotate(0); } .faq .accordion .faq-one-active { border-top: 3px solid var(--primary-color); } .faq .accordion h5 { display: flex; align-items: center; gap: 16px; text-transform: uppercase; } .faq .accordion h5 button { padding: 30px; font-size: inherit; line-height: 26px; font-weight: 500; border: none; outline: 0; box-shadow: 0 0 0; text-transform: uppercase; } .faq .accordion .accordion-body { padding: 0 30px 30px; border-top: 0 solid transparent; } .faq .accordion .accordion-body p { color: #fff; text-transform: capitalize; max-width: 1200px; } .contact-m .contact-m__single { padding: 40px 65px; background-color: #1a1a1a; text-align: center; height: 100%; border-radius: 4px; transition: 1s; } .contact-m .contact-m__single:hover { background-color: #0e0d0d; } .contact-m h4 { margin-bottom: 30px; text-transform: capitalize; } .error h2, .error span { text-transform: uppercase; } .contact-m p a { color: #dadada; } .contact-m .map-wrapper iframe { width: 100%; height: 100%; min-height: 300px; } .contact-m .contact-main__form { padding: 60px 40px; background-color: #1a1a1a; } .contact-m .contact-main__form h3 { font-weight: 900; } .contact-m .contact-main__form .group-wrapper { display: flex; align-items: center; gap: 40px; margin-bottom: 40px; } .contact-m .contact-main__form .group-wrapper .group-input { width: calc(50% - 15px); margin-bottom: 0; } .contact-m .contact-main__form .group-input { width: 100%; margin-bottom: 40px; } .contact-m .contact-main__form input, .contact-m .contact-main__form textarea { background-color: rgba(0, 0, 0, 0); padding: 0 16px 16px 0; border-bottom: 2px solid #414141; width: 100%; } .contact-m .contact-main__form input:focus, .contact-m .contact-main__form textarea:focus { border-bottom: 2px solid var(--primary-color); } .contact-m .contact-main__form .form-cta { margin-top: 40px; } .contact-m .contact-main__form .form-cta .btn { border: 1px solid #414141; color: var(--white); } .contact-m .contact-main__form .form-cta .btn:hover { border: 1px solid var(--primary-color); color: var(--black); } .contact-m .contact-main__form .subject { width: 100%; float: unset; border: 0; height: auto; line-height: 28px; background-color: rgba(0, 0, 0, 0); padding: 0 20px 20px 0; border-bottom: 2px solid #414141; } .contact-m .contact-main__form .subject::after { position: absolute; top: 30%; right: 20px; width: 10px; height: 10px; margin-top: -8px; border-color: #fff; } .contact-m .contact-main__form .subject .list { width: 100%; } .contact-m .contact-main__form .subject .list .option { color: var(--black) !important; padding: 10px 30px; } .error span { font-weight: 500; } .error .thumb { margin: 60px 0; } .error h2 { letter-spacing: 18px; font-weight: 400; margin-bottom: 20px; line-height: 1.6; } .section__content .title div, .section__header .title div { text-transform: lowercase !important; font-weight: 600; } .section__content .title div:first-child, .section__header .title div:first-child { text-transform: capitalize !important; } .g-ind { position: relative; z-index: 99; } .home-five-light, .home-four-light, .home-light, .home-light .portfolio .portfolio__single-alt-wrapper, .home-three-light, .home-three-light .work-steps-light .work-steps__single h5, .home-two-light, .home-two-light .blog-two-light, .home-two-light .portfolio .portfolio__single-alt-wrapper { background-color: #fff; } .home-five-light .light .sub-title, .home-four-light .light .sub-title, .home-light .light .sub-title, .home-three-light .light .sub-title, .home-two-light .light .sub-title { border-color: #d9d9d9; color: var(--primary-color); } .home-five-light .slide-group .slide-btn, .home-four-light .slide-group .slide-btn, .home-light .slide-group .slide-btn, .home-three-light .slide-group .slide-btn, .home-two-light .slide-group .slide-btn { border-color: #d9d9d9; color: #d9d9d9; } .home-light .banner__content h1, .home-light .slide-group .slide-btn:hover { color: #000; } .home-light .banner { --theme-color: black; background-color: #fff; } .home-light .banner .video-frame i, .home-three-light .work-steps-light .video-frame i { width: 60%; min-width: 60%; height: 60%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #000; color: #fff; } .home-five-light .footer-four, .home-five-light .testimonial, .home-four-light .footer-four, .home-four-light .four-info, .home-four-light .projects-s, .home-light .portfolio, .home-three-light .blog-three-light, .home-three-light .portfolio-three, .home-three-light .work-steps-light, .home-two-light .blog-two-light .section__header--secondary, .home-two-light .offer-two-light, .home-two-light .portfolio { --theme-color: black; } .home-light .portfolio .portfolio__single-alt-wrapper h4 a:hover { color: var(--primary-color); } .home-five-light .testimonial .testimonial__text-slider, .home-light .portfolio .portfolio__text-slider-single, .home-three-light .portfolio-three .portfolio__text-slider { --white: black; } .home-light .offer h2, .home-light .offer h2 a, .home-light .offer p, .home-light .offer p a { color: #000 !important; } .home-five-light .footer-four .cta-t a:hover, .home-light .offer .offer__cta .sub-title, .home-three-light .blog-three-light .blog-three__single .sub-title, .home-three-light .service-f-light .service-f-single .sub-title, .home-two-light .next-p-two-light .sub-title, .home-two-light .spo-light .sub-title { background-color: #000; color: var(--primary-color); } .home-light .offer .btn--secondary { border-color: var(--primary-color); color: var(--primary-color); } .home-light .offer .btn--secondary:hover, .home-two-light .primary-navbar .btn--secondary:hover, .home-two-light .primary-navbar .open-mobile-menu, .home-two-light .slide-group .slide-btn:hover { color: #000; } .home-light .next-page, .home-light .testimonial, .home-three-light .next-page, .home-two-light .next-page { --theme-color: black; --white: black; } .home-five-light .footer-four::before, .home-four-light .footer-four::before, .home-light .lines .line, .home-two-light .liner::before, .home-two-light .lines .line { background-color: #d9d9d9; } .home-five-light .navbar-active, .home-four-light .navbar-active, .home-light .navbar-active, .home-two-light .navbar-active { background-color: #fff; border-color: #d9d9d9; } .home-two-light .primary-navbar .btn--secondary { border-color: var(--primary-color); color: var(--primary-color); display: flex; align-items: center; justify-content: center; gap: 10px; } @media only screen and (min-width: 1200px) { .home-two-light .primary-navbar .navbar__item a, .home-two-light .primary-navbar .navbar__item button { color: #000; } .home-two-light .primary-navbar .navbar__item a:hover, .home-two-light .primary-navbar .navbar__item button:hover { color: var(--primary-color); } } .home-two-light .banner-two { background-color: #fff; --white: black; --theme-color: black; } .home-two-light .banner-two .btn--secondary { border-color: var(--primary-color); color: var(--primary-color); display: flex; align-items: center; gap: 10px; } .home-four-light .quaternary--navbar .btn, .home-four-light .slide-group .slide-btn:hover, .home-three-light .slide-group .slide-btn:hover, .home-two-light .banner-two .btn--secondary:hover { color: #000; } .home-two-light .offer-two-light .offer__cta h2 a, .home-two-light .portfolio-two .portfolio-two__filter-btn button { color: #888; } .home-five-light .quinary--navbar .navbar__item a:hover, .home-five-light .quinary--navbar .navbar__item button:hover, .home-four-light .footer-four .copy-t a:hover, .home-four-light .projects-s a:hover, .home-four-light .quaternary--navbar .btn i, .home-four-light .quaternary--navbar .btn:hover, .home-three-light .service-f-light .service-f-single-active button, .home-three-light .service-f-light .service-f-single-active h4, .home-two-light .offer-two-light .offer__cta h2 a:hover, .home-two-light .portfolio-two .portfolio-two__filter-btn .active, .home-two-light .portfolio-two .portfolio-two__filter-btn .active span, .home-two-light .portfolio-two .portfolio-two__filter-btn button:hover, .home-two-light .portfolio-two .portfolio-two__filter-btn button:hover span { color: var(--primary-color); } .home-two-light .portfolio-two .portfolio-two__filter-btn button span { color: #888; transition: var(--transition); } .home-three-light .service-f-light { background-color: #fff; --theme-color: black; --white: black; } .home-three-light .service-f-light button { background-color: #e4e4e4; color: #757575; } .home-five-light .banner-five .projects-s__single, .home-five-light .footer-four .footer-three__copyright, .home-four-light .footer-four .footer-three__copyright, .home-four-light .projects-s .projects-s__single, .home-three-light .blog-three-light .blog-three__single, .home-three-light .blog-three-light .blog-three__wrapper, .home-three-light .service-f-light .service-f-single { border-color: #d9d9d9; } .home-four-light .banner-four { background-color: #fff; --theme-color: black; border-color: #d9d9d9; } .home-four-light .banner-four::before { background-image: url("../images/banner/line-l.png"); } .home-four-light .banner-four .intro p { color: #474747; } .home-four-light .project__text-slider { border-color: #d9d9d9; --theme-color: black; } .home-five-light .quinary--navbar .btn, .home-five-light .quinary--navbar .navbar__item a, .home-five-light .quinary--navbar .navbar__item button, .home-five-light .slide-group .slide-btn:hover, .home-four-light .projects-s .projects-s__single p { color: #000; } .home-four-light .footer-four .copy-t a, .home-four-light .projects-s .btn:hover { color: var(--black); } .home-five-light .footer-four .cta-t a, .home-four-light .footer-four .cta-t a { background-color: var(--primary-color); color: #fff; } .home-five-light .banner-five .projects-s__single a:hover, .home-five-light .footer-four .copy-t a:hover, .home-five-light .quinary--navbar .btn i { color: var(--primary-color); } .home-four-light .footer-four .cta-t a:hover { background-color: var(--black); color: var(--primary-color); } .home-five-light .footer-four .copy-t a, .home-five-light .quinary--navbar .btn:hover { color: var(--black); } .home-five-light .banner-five .projects-s__single a { color: #000; } @media only screen and (max-width: 1699.98px) { .primary-navbar .navbar__sub-menu__nested { left: calc(100% - 24px); } .banner .banner-left-text { left: 20px; } .banner .banner-right-text { right: 20px; } .banner .banner__content { padding-left: 24px; } .banner-three .banner-three__slider-single { padding: 290px 0 460px; } .banner-three .banner-three__slider-progress-wrapper { bottom: 260px; } .portfolio .portfolio__single-alt .arr { font-size: 56px; left: 40px; bottom: 40px; } .portfolio-three .slide-group { position: static; margin-top: 60px; justify-content: center; transform: translate(0); } .testimonial .slide-group { right: 40px; } .service-t .slide-group { position: static; justify-content: center; transform: translate(0); margin-top: 40px; } } @media only screen and (max-width: 1439.98px) { .contact-m .contact-m__single { padding: 40px 20px; } } @media only screen and (max-width: 1399.98px) { .projectCounter .container .row .col .col p { font-size: 0.7rem; } .h1, .light-title, h1 { font-size: 55px; line-height: 80px; } h2 { font-size: 40px; line-height: 50px; } h3 { font-size: 30px; line-height: 40px; } .light-title-lg { font-size: 24px; line-height: 34px; } .primary-navbar .navbar__item a, .primary-navbar .navbar__item button { font-size: 14px; } .banner .banner-one-thumb { max-width: 300px; } .banner-four .banner-four__title { max-width: 700px; padding-left: 180px; } .banner-four .banner-four__title h1 { text-align: start; } .banner-four .banner-four__title .frame { margin: 0 20px; width: 100px; min-width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; display: inline-flex; } .banner-four .banner-four__title .frame i { width: 60px; min-width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .portfolio .portfolio__single .portfolio__single-content h4 { font-size: 18px; } .blog-two .blog-two__slider-single .blog__single-content { padding: 40px 20px; } .work-steps .work-steps__single h5 { padding: 16px 20px; font-size: 16px; } .work-steps .work-steps__single .work-thumb-hover { width: 300px; height: 120px; } .work-steps .video-frame { width: 120px; min-width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; } .testimonial .slide-group { position: relative; inset: 0px; z-index: 9; flex-direction: row; margin-top: 40px; transform: translate(0); } .testimonial .slide-group button { transform: rotate(0) !important; } .ux-process .service-f-single { padding-right: 100px; } } @media only screen and (max-width: 1199.98px) { .mobile-menu, .mobile-menu .mobile-menu__wrapper { max-width: 400px; background-color: var(--black); z-index: 9999; transform: translateY(100%); } .mobile-menu .mobile-menu__list > ul > li button, .mobile-menu .mobile-menu__list > ul > li > a, .mobile-menu .navbar__sub-menu li:last-of-type a, .mobile-menu .navbar__sub-menu li:last-of-type button { border-bottom: 1px solid #414141; } .mobile-menu, .mobile-menu__backdrop { position: fixed; inset: 0px; visibility: hidden; } .primary-navbar { padding: 21px 0; } .primary-navbar .navbar__menu { display: none; } .tertiary--navbar { padding: 0; } .mobile-menu { overflow: hidden; transition: var(--transition); opacity: 0; transition: var(--transition); transition: 0.6s ease-in-out; } .mobile-menu .mobile-menu__header { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 0 40px; justify-content: space-between; } .mobile-menu .close-mobile-menu { font-size: 36px; } .mobile-menu .mobile-menu__wrapper { position: fixed; inset: 0px; padding: 60px 0; height: 100vh; overflow-y: auto; overflow-x: clip; display: flex; flex-direction: column; transition: 0.6s ease-in-out 0.6s; gap: 60px; opacity: 1; visibility: visible; } .mobile-menu .mobile-menu__wrapper::-webkit-scrollbar { width: 0; } .mobile-menu .mobile-menu__list > ul { flex-direction: column; } .mobile-menu .mobile-menu__list > ul > li:first-of-type { border-top: 1px solid #414141; } .mobile-menu .navbar__item { width: 100%; transition: var(--transition); } .mobile-menu .navbar__item a, .mobile-menu .navbar__item button { color: var(--white); padding: 20px 80px 20px 40px; line-height: 1; font-size: 16px; } .mobile-menu .navbar__item a:hover, .mobile-menu .navbar__item button:hover { color: var(--primary-color); } .mobile-menu .navbar__item a::after, .mobile-menu .navbar__item button::after { transition: none; } .mobile-menu .nav-fade { transform: translateY(30px); opacity: 0; transition: 0.7s ease-in-out !important; } .mobile-menu .navbar__item--has-children .navbar__dropdown-label::after { content: "+"; font-family: "Font Awesome 6 Pro"; position: absolute; top: 0; right: 0; bottom: 0; height: 100%; width: 60px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(0); border-left: 1px solid #414141; } .mobile-menu .navbar__item--has-children:hover .navbar__dropdown-label::after { transform: rotate(0); } .mobile-menu .navbar__item-active { color: var(--primary-color) !important; } .mobile-menu .navbar__item-active::after { content: "" !important; font-family: "Font Awesome 6 Pro" !important; } .mobile-menu .navbar__sub-menu { position: static; opacity: 1; visibility: visible; transform: translateY(0); width: 100%; max-width: 100%; padding: 0; display: none; transition: none; background-color: rgba(0, 0, 0, 0); border-radius: 0; } .mobile-menu .navbar__sub-menu a::before, .mobile-menu .navbar__sub-menu button::before, .mobile-menu .navbar__sub-menu::before { content: none; } .mobile-menu .navbar__sub-menu a, .mobile-menu .navbar__sub-menu button { color: var(--white); padding: 20px 40px; font-size: 14px; border-bottom: 1px solid #414141; } .mobile-menu .mobile-menu__options { padding: 0 40px; } .mobile-menu .mobile-menu__options a, .mobile-menu .mobile-menu__options button { width: 100%; } .mobile-menu .mobile-menu__social { transition: var(--transition); padding: 0 40px; } .mobile-menu .mobile-menu__social a { font-size: 20px; width: 50px; min-width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .mobile-menu__backdrop { background-color: #302d2b; width: 100%; height: 100%; z-index: 999; transform: translateY(-100%); opacity: 0; transition: 0.6s ease-in-out; cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAMFBMVEVMaXH////////////////////////////////////////////////////////////6w4mEAAAAD3RSTlMAlAX+BKLcA5+b6hJ7foD4ZP1OAAAAkUlEQVR4XkWPoQ3CUBQAL4SktoKAbCUjgAKLJZ2ABYosngTJCHSD6joUI6BZgqSoB/+Shqde7sS9x3OGk81fdO+texMtRVTia+TsQtHEUJLdohJfgNNPJHyEJPZTsWLoxShqsWITazEwqePAn69Sw2TUxk1+euPis3EwaXy8RMHSZBIlRcKKnC5hRctjMf57/wJbBlAIs9k1BAAAAABJRU5ErkJggg==), progress; } .mobile-menu__backdrop-active, .show-menu .mobile-menu__wrapper { transform: translateY(0); opacity: 1; visibility: visible; } .show-menu { transform: translateX(0); opacity: 1; visibility: visible; } .show-menu .nav-fade { animation: 0.5s forwards navLinkFade; transition: 0.7s ease-in-out !important; } .nav-fade-active { animation: 1s reverse navLinkFade !important; } .agency .agency__content, .footer-three .footer-three__group { padding-left: 0; } .banner-two .banner-two__content .banner-two__content-cta { gap: 30px; } .cta-s .footer__single-form .input-email { gap: 0; } .cta-s .footer__single-form .input-email input { padding: 16px 30px; } .cta-s .footer__single-form .input-email button { width: 60px; min-width: 60px; font-size: 16px; } .footer-two .footer__copyright ul { gap: 16px; row-gap: 10px; } .work-steps .work-three { margin-top: 60px; } .work-steps .work-four { margin-top: 120px; } .work-steps .video-frame { top: 28%; right: 20%; } .ux-process .body-cn { max-width: 480px; } .project-sl .thumb { margin-bottom: 60px; } .project-sl .content h2 { height: 260px; } .project-d .quote-pj { padding-right: 0; } .project-d .quote-pj .secondary-text { font-size: 20px; } .project-d .quote-pj .cont { max-width: 600px; } .faq .accordion .accordion-body { padding: 0 20px 30px; } .faq .accordion h5 button { padding: 30px 20px; } } @media only screen and (max-width: 991.98px) { .portfolio .portfolio__text-slider-single h2, .portfolio-two .portfolio__text-slider-single h2, .testimonial .testimonial__text-slider-single h2 { margin-top: -14px; } .primary-text { font-size: 16px; } .h1, .light-title, h1 { font-size: 40px; line-height: 60px; } h2 { font-size: 30px; line-height: 40px; } .light-title-lg, h3 { font-size: 24px; line-height: 34px; } .cursor-inner, .cursor-outer { display: none; } .section { padding: 100px 0; } .section__content-cta, .section__cta { margin-top: 40px; } .banner .banner-one-thumb { top: 160px; left: 70%; } .banner-three .banner-three__slider-single { padding: 180px 0 560px; } .banner-three .banner-three__content, .banner-three .banner-three__slider-progress { padding-left: 80px; } .banner-four { padding: 200px 0 100px; } .banner-five .banner-five__wrapper { padding: 160px 0 100px; gap: 30px; } .banner-five .banner-five__single { min-width: 280px; width: 280px; } .banner-five .projects-s__single h4 { font-size: 20px; } .cmn-banner { padding: 160px 0 100px; } .cmn-banner .title { margin-top: -8px; } .agency .agency__content { padding-left: 0; } .portfolio .portfolio__text-slider, .portfolio-two .portfolio__text-slider, .testimonial .testimonial__text-slider { margin-bottom: 40px; } .next-page .next__text-slider-single h2 { margin-top: -10px; margin-bottom: -10px; } .banner-two { padding: 180px 0 100px; } .banner-two .banner-two__meta { gap: 30px; row-gap: 40px; } .banner-two .banner-two__meta .cta { gap: 30px; row-gap: 30px; } .banner-two .thumb img { max-width: calc(100vw - 30px); } .banner-two .banner-two__content .banner-two__content-cta { flex-direction: column; align-items: flex-start; justify-content: flex-start; } .award .award__thumb img, .ux-process .body-cn { max-width: 100%; } .service-f .service-f-single { flex-direction: column; align-items: flex-start; row-gap: 60px; } .service-f .service-f-single .p-sm { display: none !important; } .team-slider-s .team-r .slide-group { position: static; transform: translate(0); margin-top: 40px; justify-content: center; display: flex; } .ux-process .service-f-single { flex-direction: column; align-items: flex-start; padding-right: 60px; } .project-sl .project-sl__single { padding: 0 15px; max-width: 280px; min-width: 280px; width: 100%; } .team-m .team-m__single .thumb img { width: 100%; } .team-m .team-m__single .thumb .thumb__content { display: block; height: 110px; padding: 20px; width: calc(100% - 60px); } .team-m .team-m__single .thumb .thumb__content .info p { font-size: 14px; } .team-m .team-m__single .thumb:hover .thumb__content { height: 200px; } .faq .faq__thumb { padding-right: 0; } } @media only screen and (max-width: 767.98px) { .navbar__logo a { width: 10rem; } .footer-two .social a span, .goMen { display: none; } .tertiary--navbar .navbar { gap: 24px; } .tertiary--navbar .tertiary-cta { padding-left: 24px; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__wrapper { padding: 60px 0; } .offcanvas-nav .offcanvas-menu .navbar__item a, .offcanvas-nav .offcanvas-menu .navbar__item button { font-size: 16px; } .offcanvas-nav .offcanvas-menu .navbar__sub-menu a, .offcanvas-nav .offcanvas-menu .navbar__sub-menu button, .team-slider-s .team-s__slider-single .thumb .thumb__content .info p { font-size: 14px; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__social { gap: 16px; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__social a { width: 46px; min-width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; } .offcanvas-nav .offcanvas-menu .offcanvas-menu__list, .offcanvas-nav .offcanvas-menu .offcanvas-menu__options, .offcanvas-nav .offcanvas-menu .offcanvas-menu__social { max-width: 320px; } .progress-wrap { bottom: 120px; right: 35px; width: 40px; height: 40px; } .progress-wrap span { width: 30px; height: 30px; } .banner .video-frame, .video-modal .video-frame { width: 140px; min-width: 140px; height: 140px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; } .banner .banner__content { margin-top: -16px; padding-left: 0; } .banner .banner-one-thumb { top: 240px; left: 60%; max-width: 200px; } .banner .banner__content-inner .cta { -moz-column-gap: 24px; column-gap: 24px; } .banner-three .banner-three__slider-single { padding: 180px 0 660px; } .banner-four .intro { padding-left: 0; } .banner-four .banner-four__title { max-width: 700px; padding-left: 0; } .video-modal .video-frame i { width: 80px; min-width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .work-steps .work-steps__single { padding-top: 140px; } .work-steps .work-steps__single:hover span::after { height: 40px; } .work-steps .work-two { margin-top: 0; } .work-steps .work-four, .work-steps .work-three { margin-top: 40px; } .team-slider-s .team-s__slider-single { width: auto; max-width: 100%; } .team-slider-s .team-s__slider-single .thumb img { width: 100%; } .team-slider-s .team-s__slider-single .thumb .thumb__content { display: block; height: 110px; padding: 20px; width: calc(100% - 60px); } .team-slider-s .team-s__slider-single .thumb:hover .thumb__content { height: 200px; } .team-slider-s .slick-center-active { width: auto; } .team-slider-s .slick-center-active .team-wrap { padding: 0; } .team-slider-s .slick-center-active .content { display: none !important; } .team-slider-s .slick-center-active .thumb { min-width: 100% !important; max-width: 100% !important; } .team-slider-s .slick-center-active .thumb img { height: auto !important; min-height: auto !important; } .mission-s .mission-s__single--alt { padding: 60px 20px; } .project-d .poster__slider-wrapper .slide-group { justify-content: center; transform: translate(0); position: static; margin-top: 40px; } .portfolio-m .portfolio-m__single .content { padding: 40px 30px; } .footer-two .social a { width: 70px; min-width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .footer-two .social a i { display: flex; transform: translateX(0) !important; opacity: 1; visibility: visible; } .footer-two .social a:hover i { animation: none; } } @media only screen and (max-width: 575.98px) { .award .award__content-meta .single::before, .award .award__content-meta::before, .offcanvas-nav .offcanvas-menu::before { content: none; } .h1, .light-title, h1 { font-size: 24px; line-height: 40px; } h2 { font-size: 24px; line-height: 34px; } .light-title-lg, h3 { font-size: 20px; line-height: 30px; } h4, h5 { font-size: 18px; line-height: 28px; } .mobile-menu, .mobile-menu .mobile-menu__wrapper { max-width: 320px; } .mobile-menu .mobile-menu__header, .mobile-menu .mobile-menu__options, .mobile-menu .mobile-menu__social { padding: 0 24px; } .blog-two .blog__single-meta, .mobile-menu .mobile-menu__social { gap: 16px; } .mobile-menu .mobile-menu__social a { width: 46px; min-width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; } .mobile-menu .navbar__item a, .mobile-menu .navbar__item button { font-size: 14px; padding: 20px 70px 20px 24px; } .banner-three .banner-three__video .video-frame, .secondary--navbar .open-offcanvas-nav { width: 60px; min-width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .tertiary--navbar .open-offcanvas-nav { padding: 25px; } .banner { padding: 180px 0 100px; } .banner h1 { letter-spacing: 1px; } .banner h1 .text-stroke { -webkit-text-stroke: 0.5px var(--primary-color); } .banner .interval { gap: 20px; margin-left: 10px; } .banner .banner__content { margin-top: -10px; } .banner .banner__content-inner { margin-top: 24px; } .banner .banner__content-inner .cta { flex-direction: column; align-items: flex-start; margin-top: 40px; } .banner .video-frame { position: relative; inset: unset; left: 15px; margin-top: 40px; width: 140px; min-width: 140px; height: 140px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .contact-m .contact-main__form .group-wrapper .group-input, .form-group-wrapper .form-group-single { width: 100%; } .banner .star { left: 40px; top: 120px; } .banner-three .social { display: none; } .banner-three .banner-three__content, .banner-three .banner-three__slider-progress { padding-left: 0; } .banner-three .banner-three__video img { min-height: 140px; } .banner-four .banner-four__title { max-width: 300px; } .banner-four .banner-four__title .frame { width: 80px; min-width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; display: inline-flex; font-size: 20px; } .banner-four .banner-four__title .frame i { width: 50px; min-width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .banner-five .projects-s__single, .projects-s .projects-s__single { padding: 20px; } .portfolio .portfolio__text-slider-single h2, .portfolio-two .portfolio__text-slider-single h2 { margin-top: -8px; } .next-page .next__text-slider-single:nth-of-type(2n) h2 a, .portfolio .portfolio__text-slider-single:nth-of-type(2n) h2, .portfolio-two .portfolio__text-slider-single:nth-of-type(2n) h2 { -webkit-text-stroke: 0.5px var(--white); } .testimonial .testimonial__text-slider-single h2 { margin-top: -8px; -webkit-text-stroke: 0.5px var(--white); } .testimonial-two blockquote { font-size: 20px; } .next-page .next__text-slider-single h2 { margin-top: -6px; margin-bottom: -6px; } .award .award__content-meta { flex-wrap: wrap; row-gap: 40px; } .award .award__content-meta .single h4:first-of-type { margin-bottom: 16px; } .blog-two .blog__single-meta a, .blog-two .blog__single-meta p { font-size: 14px; } .work-steps .work-two { margin-top: 40px; } .cta-two .cta-two-wrapper { padding: 80px 20px; } .service-t .service-t__slider-single { padding: 40px 24px; } .blog-details .bd-content, .blog-main .blog-main__sidebar, .blog-main .blog-main__single .content, .blog-main .blog-main__single .thumb { padding: 30px 20px; } .blog-main .blog-main__sidebar .widget__latest a, .blog-main .blog-main__sidebar .widget__list a, .blog-main .blog-main__sidebar .widget__tag a { font-size: 14px !important; } .blog-main .blog-main__single { margin-bottom: 40px; } .blog-details .bd-quote { padding: 40px 20px; } .custom-quote .custom-quote__right { animation-direction: normal; } .custom-quote .quote-wrapper { height: 1200px; } .form-group-wrapper { flex-direction: column; row-gap: 30px; } .feedback-s .feedback-s__single { padding: 40px 30px; } .contact-m .contact-main__form { padding: 60px 30px; } .contact-m .contact-main__form .group-wrapper { flex-direction: column; } .footer-four .cta-t a { padding: 30px 20px; gap: 20px; } } @media only screen and (max-width: 424.98px) { .banner-five .banner-five__single { padding: 0 15px; } .blog-details .blog-details__pagination .latest-single { flex-direction: column; align-items: flex-start; } .thumb-radio { padding: 80px 20px; } .thumb-radio .radio { margin: 0; } } @media only screen and (min-width: 1440px) { .container { max-width: 1440px; } .banner-four .banner-four__title h1 { font-size: 150px; font-weight: 700; line-height: 170px; } .projects-s .row > * { padding-left: 30px !important; padding-right: 30px !important; } .projects-s .row { margin-left: -30px !important; margin-right: -30px !important; } } @media only screen and (max-width: 1549px) { .workingProcess { display: flex; align-items: center; justify-content: center; } .workingProcess .row .col { flex-direction: column; } .workingProcess .row { width: 100%; padding: 0; } .workingProcess .row .col i { display: none; } .workingProcess .row .col .steps { align-items: center; } .workingProcess .row .col .steps p { text-align: center; } } @media only screen and (max-width: 480px) { .cards h2, .workingProcess .row .col .steps h4 { text-align: center; } .workingProcess .row .col .steps { width: 280px; } .cards h2 { line-height: 3rem; } .morphCard { width: 90%; } .inp textarea, .inpFields { margin: 0; } } @media (max-width: 1549px) { .workingProcess .row .col { flex-direction: row; } .appPromise { padding: 0; } } @media (max-width: 500px) { .blog-details .bd-thumb img, .blog-main .blog-main__single .thumb .thumb-link a img { height: 200px; } .portRes .col-12 .portfolio-m__single .thumb, .portRes .col-12 .portfolio-m__single .thumb a { height: 100%; } .portfolio-m .portfolio-m__single .thumb a img { object-fit: contain; } } @media (min-width: 501px) and (max-width: 800px) { .blog-details .bd-thumb img, .blog-main .blog-main__single .thumb .thumb-link a img { height: 300px; } .portRes .col-12 .portfolio-m__single .thumb, .portRes .col-12 .portfolio-m__single .thumb a { height: 100%; } } @media (min-width: 801px) and (max-width: 1000px) { .blog-details .bd-thumb img, .blog-main .blog-main__single .thumb .thumb-link a img { height: 400px; } } @media (min-width: 1001px) and (max-width: 1400px) { .blog-details .bd-thumb img, .blog-main .blog-main__single .thumb .thumb-link a img { height: 500px; } } @media (min-width: 1401px) and (max-width: 1800px) { .blog-details .bd-thumb img, .blog-main .blog-main__single .thumb .thumb-link a img { height: 600px; } } @media (min-width: 1801px) { .blog-main .blog-main__single .thumb .thumb-link a img { height: 500px; object-fit: cover; } .blog-details .bd-thumb img { height: 500px; } } .packagesCard .card-body{ height: 400px; overflow: hidden; } .packagesCard .card-body ul{ height: 80%; overflow-y: scroll; } .packagesCard .card-body > div{ height: 5%; display: flex; align-items: center; justify-content: center; margin-bottom: 5px; } .packagesCard .card-body ul::-webkit-scrollbar-thumb { background-color: #e7509c !important; }