/*
Theme Name: Christian M Builds
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: A custom WordPress theme using Tailwind CSS and ACF.
Version: 0.1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    /* Font */
    --priFont:'Cal Sans', sans-serif;
    --secFont: 'Inter Tight', sans-serif;

    /* Color */
    --priColor: #FF5B46;
    --secColor: linear-gradient(120deg,#1416A9 1%, #3336f4 47%, #2AACAD 100%);
    --thirdColor: linear-gradient(12.15deg, var(--6thColor) 1.34%, var( --fifthColor ) 77.26%);
    --fourthColor: linear-gradient(90deg,rgba(232, 88, 89, 1) 1%, rgba(123, 70, 186, 1) 47%, rgba(93, 65, 212, 1) 100%);
    --fifthColor: #3A3CF2;
    --6thColor:  #2AACAD;
    --borderColor: #c1bfbf;;
    --hoverColor: linear-gradient(135.15deg, var(--6thColor) 1.34%, #3A3CF2 77.26%);
    --whiteColor: #fff;
    --darkColor: #000;
    --textColor: #555555;
    --btnbg: #FFFFFFCC;
    --border2: #9d9d9d45;


    /* Others */
    --radious: 0.625rem;
    --radious-2: 1rem;
    --lHeight: calc(64 / 56);

}
/* CSS RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
.subtitle { font-size: clamp(1.2rem, 1.1368rem + 0.2807vw, 1.4rem); margin: 0 0 3rem;}
.subtitle span { font-size: clamp(2.3rem, 2.1421rem + 0.7018vw, 2.8rem);color: var(--priColor);}
strong { font-weight: 600; }

body{width: 100%; max-width: 1920px;  margin: 0 auto; padding: 0; position: relative; overflow-x: hidden; font-family: var(--priFont); color: var(--whiteColor);}
.wrapper {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0; }
ol, ul { list-style: none; }
.bullet { margin: 0 0 1.2rem; }
a {text-decoration: none; cursor: pointer;}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
span { display: block; font-family: var(--priFont);}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
.button { background: var(--priColor); padding: 1.2rem 4rem 1.2rem 1.5rem; border-radius: var(--radious); color: var(--whiteColor); text-transform: uppercase; display: flex; width: fit-content; margin: 2rem auto 0; position: relative; height: fit-content; font-size: clamp(0.9rem, 0.8684rem + 0.1404vw, 1rem);align-items: center;justify-items: center;} .button::after { content: '➜ '; font-size: 1.4rem; right: 1rem; position: absolute; top: 50%; transform: translateY(-50%); background: var(--whiteColor);color: var(--priColor);padding: .3rem .5rem;border-radius: var(--radious);}
.button-2::after {content: '➜ '; font-size: 1.4rem; right: 1rem; position: absolute; top: 50%; transform: translateY(-50%); color: var(--priColor);border-radius: var(--radious);}
.button-2 { padding: 0 4rem 0 0; border-radius: var(--radious); color: #000; text-transform: uppercase; display: flex; width: fit-content; margin: 2rem 0 0; position: relative; background: unset; font-size: .93rem;}
.sub-heading-bullet {position: relative;color: var(--priColor);padding: 0 0 0 1.5rem;margin: 0 0 1rem;width: fit-content;}
.sub-heading-bullet::after{ content: ''; position: absolute; top: 50%; left: 0; width: 9%; height: 1em; -webkit-mask-image: url('images/home/fill-icon.svg'); mask-image: url('images/home/fill-icon.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background: var(--priColor); transform: translateY(-50%);}


h1, h2, h3, h4, h5, h6 {font-family: var(--priFont); text-wrap: balance; color: var(--whiteColor);  line-height: var(--lHeight); color: var(--darkColor);}

h1 {font-size: 4.25rem;}
h2 {font-size: clamp(2.3rem, 1.9211rem + 1.6842vw, 3.5rem); margin: 0 0 2rem;}
h3 { font-size: clamp(1.5rem, 1.4211rem + 0.3509vw, 1.75rem); margin: 0 0 2rem;}
h4 {font-size: 1.4rem;}
h5 {font-size: 1.1rem;}
p {font-size: 1.1rem; line-height: 1.625; font-family: var(--secFont); color: var(--textColor);}

/* Header */
header {position: absolute;width: 1700px;max-width: 100%;left: 50%;transform: translateX(-50%);z-index: 990;}

.home header { top: 2.7rem; }
body:not(.home) header { top: 2.7rem; }
.head-wrapper { width: 100%; max-width: 1700px; margin: 0 auto; }
.header-con {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
.header-con .logo{width: 14%;}
.header-con .logo figure{}
.header-con .logo figure img{}
.header-con .right-action{width: fit-content;}
.get-started-btn .button-3 { border: 1px solid var(--borderColor); padding: .8rem 2rem; text-transform: uppercase; color: var(--btnbg); border-radius: var(--radious); }


/* Navigation Menu */

/* Navigation  */
nav {line-height: 4.5rem;}
#navigation-menu {width: fit-content;}
.nav-con { display: flex; justify-content: space-between; align-items: center;width: 100%;margin: 0 0 0 auto; flex-direction: column;}
#hamburger{ width: 50px; height: 46px; position: relative; margin: 0 auto; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; caret-color: transparent; position: relative; top: 1em;  z-index: 1001;display: none;}
#hamburger span { display: block; position: absolute; height: 4px; width: 67%; background: var(--whiteColor); border-radius: 9px; opacity: 1; right: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; font-size: 0; line-height: 0; }
#hamburger span:nth-child(1) { top: 0px; }
#hamburger span:nth-child(2),#hamburger span:nth-child(3) { top: 11px; width: 40%; right: 0; text-align: right; margin: 0 0 0 auto;}
#hamburger span:nth-child(4) { top: 23px; }
#hamburger.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; }
#hamburger.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 67%; }
#hamburger.open span:nth-child(3) { -wefsearch-containerbkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); width: 67%; }
#hamburger.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; }
#nav-menu { display: flex; justify-content: center; gap: 2rem; margin: 0 auto;background: #00000066;backdrop-filter: blur(60px);border-radius: var(--radious);padding: 0 2.5rem;border: 1px solid var(--border2); }
#nav-menu li{ position: relative;}
#nav-menu li a{ font-weight: 600; font-family: var(--secFont);font-size: 1.1rem;color: var(--whiteColor);}
#nav-menu .active a { color: var(--priColor); }
/* ----------- Desktop dropdown ----------- */
#nav-menu { position: relative; }
.sub-menu li { line-height: 3; padding: 0 1rem; }
#nav-menu li { position: relative; }
#nav-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--whiteColor, #fff); padding: 0.5rem 0; z-index: 999; box-shadow: 0 4px 6px rgba(0,0,0,0.1); list-style: none; }
.search-container { position: relative; display: flex; align-items: center; background: white; border-radius: 50px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); overflow: hidden; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.search-container.collapsed { height: 60px; width: 6%; background: transparent; box-shadow: none; position: absolute; right: 12%; top: 50%; transform: translateY(-50%);}
.search-container.expanded { width: 50%; height: 45px; position: absolute; right: 12%; top: 50%; transform: translateY(-50%); }
.search-btn { /*! width: 60px; */ /*! height: 60px; */ border: none; /*! background: transparent; */ border-radius: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; transition: all 0.3s ease; flex-shrink: 0; background: transparent;}
.search-btn:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
.search-btn:active { transform: scale(0.95); }
.search-icon { width: 35px; height: 35px; fill: var(--whiteColor);; transition: transform 0.3s ease; }
.expanded .search-icon { fill: var(--thirdColor); }
.search-container.expanded .search-icon { transform: rotate(90deg); }
.search-input { width: 100%; height: 46px; border: none; outline: none; font-size: 16px; padding: 0 20px; background: transparent; color: #333; opacity: 0; transform: translateX(-20px); transition: all 0.3s ease 0.1s; }
.search-container.expanded .search-input { opacity: 1; transform: translateX(0); }
.search-input::placeholder { color: #999; }
.search-form { display: flex; align-items: center; width: 100%; height: 100%; padding: 0;height: auto;}
.close-btn { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 24px; color: #999; cursor: pointer; opacity: 0; transition: all 0.3s ease; z-index: 3; }
.search-container.expanded .close-btn { opacity: 1; }
.close-btn:hover { color: #333; transform: translateY(-50%) scale(1.2); }
/* End of Menu */
/* Banner */
#banner {background: url('images/home/bg.webp');height: 60rem; position: relative;background-repeat: no-repeat;border-bottom-left-radius: 4rem;overflow: hidden;border-bottom-right-radius: 4rem;}
#banner { /* Controls for the ::before transform via CSS variables */ --banner-before-tx: 0px; --banner-before-ty: 0px; --banner-before-rot: 0deg; }
#banner::before { content: url('images/home/rendering.webp'); position: absolute; bottom: 16%; left: 10%; width: fit-content; height: auto; background-size: cover; background-position: center; z-index: 1; pointer-events: none; transform: translate(var(--banner-before-tx), var(--banner-before-ty)) rotate(var(--banner-before-rot)); transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
#banner::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.31);z-index: 0;}
.banner-con{ position: relative;z-index: 100;padding: 15rem 0 0 0;}
.banner-info {}
.banner-info .sub-heading {}
.banner-info .sub-heading span{text-align: center;font-size: 1.1rem; position: relative; width: fit-content; margin: 0 auto;}
.banner-info .sub-heading span::after { content: '★'; position: absolute; top: 40%; left: -30%; transform: translateY(-50%); color: var(--priColor); font-size: 2rem; }
.banner-info h1{font-size: clamp(2.5rem, 1.3158rem + 5.2632vw, 6.25rem);text-align: center;text-transform: capitalize;margin: 1rem 0 1.5rem;color: var(--whiteColor);}
.banner-info p{font-size: clamp(1.1rem, 1.0526rem + 0.2105vw, 1.25rem);;color: var(--whiteColor);font-weight: 300;text-align: center;width: 55%;margin: 0 auto;}
.banner-info a{}
/* End of Baner */

/* Middle */
#middle { position: relative; }
.middle-con { position: absolute; top: -14rem; left: 50%; /* variable-driven transform for interactive movement */ --middle-tx: 0px; --middle-ty: 0px; --middle-rot: 0deg; transform: translateX(-50%) translate(var(--middle-tx), var(--middle-ty)) rotate(var(--middle-rot)); transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; width: 100%; max-width: 1280px; z-index: 99; }

.floating-section {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 0rem 0 0;position: relative;}
.floating-section::after { content: url('images/home/3d-abstract-purple-metal-object-render.webp'); position: absolute; top: 16%; right: -10%; }
.floating-section section{background: #2AACADC4;padding: 2rem 3rem;border-radius: 1rem;width: 31.5%;box-sizing: border-box;} 
.floating-section section:nth-child(1) span { font-size: clamp(3.25rem, 2.9342rem + 1.4035vw, 4.25rem); }
.floating-section section:nth-child(1) h3 { margin: 4rem 0 0; }
.floating-section section:nth-child(2) { background: #3A3CF2CC; }
.floating-section section:nth-child(2) img { border-radius: 1rem; overflow: hidden; }
.floating-section section:nth-child(2) span { font-size: 4.25rem; margin: 0 0 7rem;}
.floating-section section:nth-child(3) { background: url('images/home/work.webp'); background-size: cover; position: relative;  flex-direction: column; justify-content: flex-end;     padding: 00;display: flex;overflow: hidden;}
.content-wrapper { backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 13%, black 20%); -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 13%, black 20%);    padding: 3rem 3rem 1rem;  background-color: transparent; --background-overlay: ''; background-image: linear-gradient(360deg, #000C 0%, #0000 100%); display: flex;flex-direction: column;gap: 0rem;}
.floating-section .button-2 { color: var(--whiteColor); }

.floating-section section figure{} 
.floating-section section figure img{} 
.floating-section section h3{color: var(--whiteColor);margin: 0 0 1rem;} 
.floating-box .button { margin: 0; background: unset; padding: 1.2rem 4rem 1.2rem 0; }
.floating-box .button::after {background: unset;}
.floating-section section:nth-child(2) h3 { width: 90%; margin: 0 0 2rem; }

/* End of Middle */

/* Main  */
.main-con { margin: 16rem 0 0; }
.main-info {width: 54%;}
.main-heading-info {display: flex;flex-wrap: wrap;justify-content: space-between;position: relative; padding: 0px 0 3.5rem; align-items: center;}
.main-heading-info::after { content: ''''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #55555538; }
.main-info .sub-heading { color: var(--priColor); margin: 0 0 1rem; position: relative;padding: 0 0 0 1.5rem;}
.main-info .sub-heading::after { content: ''; position: absolute; top: 50%; left: 0; width: 2%; height: 1em; -webkit-mask-image: url('images/home/fill-icon.svg'); mask-image: url('images/home/fill-icon.svg'); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background: var(--priColor); transform: translateY(-50%);}
.main-info h2 {color: var(--darkColor);margin: 0 0 2rem;}
.main-info p {}
.main-con .sidebar-img {width: 45%;}
.main-con .sidebar-img figure{}
.main-con .sidebar-img figure img{margin: 0 auto;}
.spin { animation: spin360 10s linear infinite; will-change: transform; }
@keyframes spin360 { to { transform: rotate(360deg); } }
.main-btm-info {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 5rem 0 0; counter-reset: item;}
.main-btm-info section{width: 30%;}
.main-btm-info section h3{ position: relative;padding: 00 0;}
.main-btm-info section svg.number-outline { position: relative; top: 0; left: 0;   pointer-events: none; }
.main-btm-info section p{}
.main-btm-info section a{}
/* End of main */

/* Bottom  */

/* Services  */
#services {position: relative;}
.services-con { display: flex; flex-wrap: wrap; margin: 5rem 0 5rem; align-items: end;}
.services-con h2 { margin: 0; }
.services-con .left-info { width: 70%; }
.services-boxes section { background: #EFEFEF; margin: 0 10px !important; padding: 2rem; position: relative; overflow: hidden;border-radius: var(--radious-2);}
.services-boxes section::after {content: url('images/home/dotted-circle.png'); position: absolute; top: 0%; right: -42%; transform: translateY(-50%);z-index: 0;}
.services-boxes section figure { background: var(--whiteColor); width: fit-content; padding: 1.6rem; border-radius: 50px; }
.services-boxes section h3 {text-align: left;margin: 7rem 0 2rem;}
.services-boxes section p {text-align: left;}
.services-boxes section:hover {  background: var(--hoverColor);}
.services-boxes section:hover h3, .services-boxes section:hover p, .services-boxes section:hover a { color: var(--whiteColor); }
.services-boxes section:nth-child(4) { background: var(--hoverColor); }
.services-boxes section:nth-child(4) h3, .services-boxes section:nth-child(4) p, .services-boxes section:nth-child(4) a{ color: var(--whiteColor);} 

.marquee-con{overflow:hidden;background: var(--fifthColor);padding: 1.5rem 0;margin: 6rem 0 0;}
.marquee{display:inline-flex;align-items:center;white-space:nowrap;gap:6rem;will-chanage:transform;backface-visibility:hidden;transform:translateZ(0); margin: 0;color: var(--whiteColor);}
.marquee span{flex:0 0 auto}
.marquee.marquee-animating span{position: relative;}
.marquee.marquee-animating span::after { content: ""; width: 40px; height: 40px; background: linear-gradient(92.47deg, var(--priColor) 2.07%, var(--fifthColor) 99.72%); border-radius: 50%; position: absolute;top: 50%;transform: translateY(-50%);left: -5%;}
.marquee .title-scrolling{flex:0 0 auto}
.marquee.marquee-animating{animation:marquee-scroll var(--marquee-duration,15s) linear infinite}
@keyframes marquee-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--marquee-shift),0,0)}}

/* Marketing */
#marketing { background: var(--secColor);margin: 8rem 0 0; border-top-left-radius: 4rem;border-top-right-radius: 4rem;position: relative;}
#marketing::after { content: url('images/home/3d-glossy-link-square-icon.webp'); position: absolute; top: -6%; right: 25%; rotate: -21deg;}
#marketing::before { content: url('images/home/circle-abstract.png'); position: absolute; top: 30%; left: -2%; rotate: 26deg;}
.marketing-con { padding: 8rem 0; }
.m-heading-info-con { display: flex;  align-items: end;}
.m-heading-info-con h2 {margin: 0; color: var(--whiteColor);}
.m-heading-info-con .left-info { width: 70%; }
.marketing-con .button { margin: 0 0 0 auto; }

.marketing-section {display: flex;flex-wrap: wrap;gap: 2rem;margin: 3rem 0 0;}
.marketing-section section{}
.marketing-section section figure{ width: 55%;}
.marketing-section section figure img { width: 100%; height: 100%; object-fit: cover; }
.marketing-section section .sidebar-content {width: 42%;display: flex;flex-direction: column;justify-content: center;padding: 0 2rem;flex-wrap: wrap;}
.marketing-section section .sidebar-content h3{}
.marketing-section section .sidebar-content p{}
.marketing-section section .sidebar-content a{}
.marketing-section section .sidebar-content ul {margin: 5rem 0 0;display: flex;gap: 1rem;flex-wrap: wrap;}
.marketing-section section .sidebar-content ul li{border: 1px solid #55555542;padding: 0.5rem;box-sizing: border-box;width: fit-content;border-radius: var(--radious);color: var(--textColor);}
.marketing-section section .sidebar-content ul li a{color: var(--textColor);font-weight: 100;font-size: .9rem;}
.marketing-section section { display: flex; flex-wrap: wrap; background: var(--whiteColor);border-radius: 1.5rem;overflow: hidden;gap: 2rem; position: sticky; top: 0; transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 250ms ease, opacity 250ms ease; will-change: transform, opacity; backface-visibility: hidden; transform: translateY(6px); contain: paint; }
 
.marketing-section section.stuck { transform: translateY(0); box-shadow: 0 12px 30px rgba(0,0,0,.08); }

/* Why Choose Us  */
#why-choose-us {}
.why-choose-us-con { display: flex; flex-wrap: wrap; align-items: center; margin: 5rem 0 2rem;}
.wcuc-top {display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;align-items: center;}
.wcuc-top .sidebar-content {width: 50%;}
.wcuc-top .sidebar-content span{}
.wcuc-top .sidebar-content h2{}
.wcuc-top .sidebar-content p{}
.wcuc-top .sidebar-content ul{margin: 3rem 0 0;display: flex;flex-wrap: wrap;gap: 3rem;}
.wcuc-top .sidebar-content ul li{position: relative;padding: 0 0 0 8rem;}
.wcuc-top .sidebar-content ul li::after { content: url('images/home/analytics.png'); position: absolute; top: 50%; left: 0; transform: translateY(-50%);width: fit-content;height: fit-content;padding: 1.5rem 1.7rem;border-radius: 100%;box-sizing: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent;background: linear-gradient(92.47deg, var(--6thColor) 2.07%, var(--fifthColor) 99.72%);border: unset;}
.wcuc-top .sidebar-content ul li:hover::after { background: linear-gradient(92.47deg, var(--6thColor) 2.07%, var(--fifthColor) 99.72%); border: unset;}
.wcuc-top .sidebar-content ul li h3{margin: 0 0 1rem;}
.wcuc-top .sidebar-content ul li p{}

.wcuc-top .sidebar-img {width: 50%; position: relative;}
.wcuc-top .sidebar-img::after {  position: absolute; top: 50.8%; left: 50%; z-index: -1;transform: translate(-50%, -50%);content: '';background: url('images/home/3d-glossy-gradient-orb-blue-teal-orange.webp');width: 100%;height: 100%;background-repeat: no-repeat;background-size: contain;}
.wcuc-top .sidebar-img figure { position: relative;}
.wcuc-top .sidebar-img figure::after { position: relative;}
.wcuc-top .sidebar-img figure img {margin: 0 auto;}

.wcuc-top .floating-info {}
.wcuc-top .total-sales {position: absolute;bottom: 1%;left: 4%;background: #FFFC;border: 1px solid #9d9d9d45;border-radius: 1.5rem;width: fit-content;padding: 2rem 0;backdrop-filter: blur(60px);-webkit-backdrop-filter: blur(60px);padding: ;width: 50%;}
.wcuc-top .total-sales::after{ content: url('images/home/growth.png'); position: absolute; top: 22%; left: 9%; background: var(--priColor);text-align: center;width: 20%;height: 30%;display: flex;align-items: center;justify-content: center;border-radius: .5rem;}
.wcuc-top .total-sales span {color: var(--textColor);padding: 0 2rem 0 7rem;}
.wcuc-top .total-sales  h3{padding: .5rem 2rem 0 7rem;}
.wcuc-top .total-sales ul{display: flex;justify-content: space-around;position: relative;padding: 0.5rem 0 0;}
.wcuc-top .total-sales ul::after {content: '';position: absolute;top: -.5rem;width: 100%;height: 1px;background: #5555551a;}
.wcuc-top .total-sales ul li{color: var(--textColor);font-weight: 300;}
.wcuc-top .total-sales ul li + li {color: #62DE47;list-style: disclosure-closed;}
.wcuc-top .happy-client {position: absolute;top: 41%;right: 8%;background: #FFFC;border-radius: 20rem;backdrop-filter: blur(60px);-webkit-backdrop-filter: blur(60px);}
.wcuc-top .happy-client li{position: relative; padding: .5rem 2.5rem .5rem 6rem;}
.wcuc-top .happy-client li::after { content: url('images/home/shield.png'); position: absolute; top: 50%; left: 9%; transform: translateY(-50%);background: #7EE167;padding: 0.7rem .8rem;text-align: center;border-radius: 50px;}
.wcuc-top .happy-client li h3 {margin: 0;}
.wcuc-top .happy-client li p{}


.wcuc-bottom {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin: 6rem 0 0;}

.wcuc-bottom .sidebar-img {position: relative;width: 40%;}
.wcuc-bottom .sidebar-img::after {  position: absolute; top: 63%; left: 50%; z-index: -1;transform: translate(-50%, -50%);content: '';background: url('images/home/3d-abstract-gradient-orb-teal-blue-orange.png');width: 100%;height: 100%;background-size: contain;background-repeat: no-repeat;}
.wcuc-bottom .sidebar-img figure{}
.wcuc-bottom .sidebar-img figure img{}
.wcuc-bottom .sidebar-content{width: 50%;}
.wcuc-bottom .sidebar-content span{text-transform: capitalize;}
.wcuc-bottom .sidebar-content h2{}
.wcuc-bottom .sidebar-content p{}
.wcuc-bottom .sidebar-content .business{display: flex;flex-wrap: wrap;gap: 1.5rem;margin: 2rem 0 0;}
.wcuc-bottom .sidebar-content .business li{color: var(--darkColor);font-size: 1.3rem;width: 48%;box-sizing: border-box;border: 1px solid #55555538;padding: 5rem 2rem 2rem;border-radius: 1rem;font-weight: 300;position: relative;}
.wcuc-bottom .sidebar-content .business li::after{content: url('images/home/digital.svg');position: absolute;top: 10%;left: 2rem;}
.wcuc-bottom .sidebar-content .business li:nth-child(2)::after{content: url('images/home/data.svg')}
.wcuc-bottom .sidebar-content .business li:nth-child(3)::after{content: url('images/home/content-settings.svg')}
.wcuc-bottom .sidebar-content .business li:nth-child(4)::after{content: url('images/home/seo.svg')}


.wcuc-bottom ul li {position: absolute; background: var(--btnbg); border: 1px solid var(--border2); padding: 1.2rem 1rem 1.2rem 4rem; border-radius: 3rem; backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px);}
.wcuc-bottom .sidebar-img ul li:nth-child(1) { position: absolute; top: 24%;background: var(--btnbg);border: 1px solid var(--border2);padding: 1.2rem 1rem 1.2rem 4rem;border-radius: 3rem;font-weight: 100;left: -10%;}
.wcuc-bottom .sidebar-img ul li:nth-child(2) { position: absolute; top: 50%;right: 0;}
.wcuc-bottom .sidebar-img ul li:nth-child(3) { position: absolute; top: 80%;left: -15%;width: 83%;padding: 2rem 2rem 2rem 11rem; --progress: 80%; --ring-size: 6rem; --ring-width: 12px; --start-angle: 90deg;}

.wcuc-bottom .sidebar-img ul li:nth-child(1)::after{content: url('images/home/shooting-star.png');position: absolute;top: 50%;left: 10%;transform: translateY(-50%);}
.wcuc-bottom .sidebar-img ul li:nth-child(2)::after{content: url('images/home/storm.png');position: absolute;top: 50%;left: 10%;transform: translateY(-50%);}
.wcuc-bottom .sidebar-img ul li:nth-child(3)::before{content: '';position: absolute;top: 50%;left: 3%;transform: translateY(-50%);width: var(--ring-size);height: var(--ring-size);border-radius: 50%;background: conic-gradient(from var(--start-angle), var(--priColor) var(--progress), #E5E5E5 0 360deg);-webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--ring-width)), black 0);mask: radial-gradient(closest-side, transparent calc(100% - var(--ring-width)), black 0);}
.wcuc-bottom .sidebar-img ul li:nth-child(3)::after{content: attr(data-progress);position: absolute;top: 50%;left: 3%;transform: translateY(-50%);color: var(--priColor);font-size: 2rem;width: var(--ring-size);height: var(--ring-size);display: flex;align-items: center;justify-content: center;border-radius: 50%;border: none;padding: 0;box-sizing: border-box;}
.wcuc-bottom .sidebar-img ul li.use-svg-progress::before{content:none}

/* End of Why Choose Us  */

/* Business Goals */
#business-goals {background-image: linear-gradient(14.15deg, var(--6thColor) 1.34%, var(--fifthColor) 77.26%);margin: 12rem 0 5rem;position: relative;height: 39rem;border-radius: 3rem;}
#business-goals::after { content: url('images/home/3d-spiral-coil-orb-blue-teal.webp'); position: absolute; top: -18%; right: 26%; rotate: -33deg;} 
.business-goals-con { padding: 5rem 0;position: relative;}
.business-goals-con .bgc-info { }
.business-goals-con .bgc-info span { }
.business-goals-con .bgc-info h2 { width: 50%;color: var(--whiteColor);}
.business-goals-con .business-logo { display: flex;justify-content: space-between;margin: 3rem 0 0;}
/* .business-logo .slick-next, .slick-prev { display: none !important; } */
.business-goals-con .business-logo figure { }
.business-goals-con .business-logo figure img { }


.testimonials{background:#EFEFEF;margin:8rem 0 0;padding:4rem 0;border-radius:2rem;position: absolute;top: 68%;}
.testimonials-con{display:flex;align-items:center;gap:3rem}
.left-badge{width:61%;margin: 0 auto;text-align: center;}
.quote-badge{position:relative;width:205px;height:205px;margin:0 0 0 auto;}
.quote-badge .badge-svg{width:100%;height:100%;transform-origin:50% 50%;animation:badge-rotate var(--badge-speed,20s) linear infinite;}
.testimonials .slick-slider{position:relative}
.quote-badge .quote-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--whiteColor);font-size:7rem;background: var(--priColor);border-radius: 50%;display: flex;width: 50%;height: 50%;margin: 0 auto;justify-content: center;}
.testimonials-slider{width:76%;}
.testimonials .slick-arrow{position:absolute;bottom:28rem;z-index:3}
.testimonials .slick-prev{left:auto;right:10rem;}
.testimonials .slick-next{right:5rem;}
.testimonial-item h3{color:var(--darkColor);font-weight:300;text-align: left;height: 8rem;}
.item-divider{width:100%;height:1px;background:#55555538;margin:2rem 0}
.item-footer{display:flex;justify-content:space-between;align-items:center}
.author{display:flex;align-items:center;gap: .2rem;}
.author figure{width:56px;height:56px;border-radius:50%;overflow:hidden}
.author figure img{width:100%;height:100%;object-fit:cover}
.author .meta h4{font-size:1.1rem;color:var(--darkColor)}
.author .meta span{font-size:.9rem;color:#777}
.testimonials .slick-arrow{width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid #eee;box-shadow:0 4px 10px rgba(0,0,0,.06);top: 87%;}
.testimonials .slick-prev:before,.testimonials .slick-next:before{color:#000}
.testimonials .slick-dots{bottom:-35px}
textPath { letter-spacing: .8rem; }
.testimonial-item { padding: 0 5rem 0 4rem; }
.slick-next:focus, .slick-next:hover, .slick-prev:focus, .slick-prev:hover { color: var(--whiteColor); outline: 0; background: var(--priColor) !important; }
.slick-next:focus::before, .slick-next:hover::before, .slick-prev:focus::before, .slick-prev:hover::before { opacity: 1; color: var(--whiteColor) !important; }

@keyframes badge-rotate{to{transform:rotate(360deg)}}


/* Blog */
.blog-con .left-info { width: 70%; }
.blog-heading-info { display: flex; flex-wrap: wrap; align-items: end;  gap: 1rem;margin: 1.5rem 0 1rem;}
.blog-posts-con { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 5rem 0 0; }
.blog-post { width: 32%; }
.blog-post figure { height: 20rem; }
.blog-btm-info h3 {text-align: left;}
.blog-post { margin: 0 10px !important; }
.blog-post img { border-radius: 1.5rem; }
.blog-post figure img { width: 100%; height: 100%; object-fit: cover; }
.blog-heading-info li{font-family: var(--secFont); font-weight: 600;}
.blog-heading-info .category { color: var(--priColor); text-transform: uppercase;position: relative;}
.blog-heading-info .date { color: #18121291; font-family: var(--secFont); font-weight: 500; }
.blog-heading-info .author span { color: #55555591; font-family: var(--secFont); font-weight: 600; }
.blog-heading-info .author {color: var(--darkColor); text-transform: capitalize;}
.blog-heading-info .category::after { content: '/'; position: absolute; top: 0; right: -.5rem; }
.blog-heading-info .category::before { content: '/'; position: absolute; top: 0; left: -.5rem; }
.blog-con .button { margin: 0 0 0 auto; }
.blog-heading-info h2 { margin: 0; }
#blog { margin: 17rem 0 8rem; }

/* Footer */
footer {background: linear-gradient(0deg, #12ACAD 1.34%, #3C3ED4 77.26%); overflow: hidden;} 
.footer-con { padding: 5rem 0;}
.footer-heading-info {display: flex;flex-wrap: wrap;align-items: center;margin: 0 0 10rem;}
.footer-heading-info .left-info{width: 60%;}
.footer-heading-info .sub-heading-bullet{}
.footer-heading-info h2{color: var(--whiteColor);}
.footer-heading-info .right-info{width: 40%;}
.footer-heading-info .right-info p{color: var(--whiteColor);font-size: 1.1rem;margin: 0 0 2rem;}
.footer-heading-info .right-info .subscribe-form{display:flex;align-items:center;gap:1rem;background:#fff;border-radius:var(--radious-2);padding:1rem 1.25rem;box-shadow:0 10px 30px rgba(0,0,0,.15); display: none;}
.footer-heading-info .right-info .subscribe-form .email-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.footer-heading-info .right-info .subscribe-form .email-icon img{width:100%;height:100%;object-fit:contain}
.footer-heading-info .right-info .subscribe-form input{flex:1;border:none;outline:none;background:transparent;font-size: clamp(0.9rem, 0.8684rem + 0.1404vw, 1rem);color:#333;padding:.5rem 0}
.footer-heading-info .right-info .subscribe-form input::placeholder{color:#999}
.footer-heading-info .right-info .subscribe-form .subscribe-btn{margin:0;color:#000;border: unset;}

.footer-btm {display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;}
.footer-btm::after {content: ''; position: absolute; top: -35%; left: 0; width: 100%;height: 1px;background: var(--border2);}
.footer-btm section{width: 14%;}
.footer-btm section:nth-child(2) { display: flex; flex-direction: column; justify-content: space-between; }
.footer-btm section figure{width: 70%;} 
.footer-btm section figure img{} 
.footer-btm section .social-media{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 1rem;} 
.footer-btm section .social-media li{} 
.footer-btm section .social-media li a{color: var(--whiteColor);} 
.footer-btm section .contact-info{}
.footer-btm .footer-logo {width: 35%;display: flex;flex-wrap: wrap;align-content: space-between;} 
.footer-btm section h5{text-transform: uppercase;color: var(--whiteColor);margin: 0 0 1rem;}
.footer-btm section ul{}
.footer-btm section ul li{line-height: 2;}
.footer-btm section ul li a{color: var(--whiteColor);font-family: var(--secFont);} 

#backToTop { position: fixed; bottom: 2rem; right: 2rem; width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--priColor); color: var(--whiteColor); box-shadow: 0 10px 30px rgba(0,0,0,.2); cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity 250ms ease, transform 250ms ease; z-index: 1100; pointer-events: none; border: 2px solid var(--borderColor);}
#backToTop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }


/* Nonhome */
#nh-bnr { background-repeat: no-repeat; background-size: cover; position: relative; height: 35rem; display: flex; align-items: end; background-position: center; border-bottom-left-radius: 4rem; overflow: hidden; border-bottom-right-radius: 4rem; position: relative;}
#nh-bnr::before { content: url('images/home/3d-spiral-coil-orb-blue-teal.webp'); position: absolute; bottom: -16%; left: 5%; width: fit-content; height: auto; background-size: cover; background-position: center; z-index: 1; pointer-events: none; transform: translate(var(--banner-before-tx), var(--banner-before-ty)) rotate(var(--banner-before-rot)); transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; rotate: 30deg; }
#nh-bnr::after { content: url('images/3d-glossy-gradient-square-frame.png'); position: absolute; top: 32%; right: -1%; width: fit-content; height: auto; background-size: cover; background-position: center; z-index: 1; pointer-events: none; transform: translate(var(--banner-before-tx), var(--banner-before-ty)) rotate(var(--banner-before-rot)); transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; rotate: -20deg; }

.nh-bnr-con { text-align: center; display: flex; flex-direction: column; justify-content: space-between; height: 18rem; margin: 0 0 3rem; }
.heading-title { color: var(--whiteColor); }
#breadcrumbs span { display: flex; gap: 2rem; justify-content: center; }
#breadcrumbs span, #breadcrumbs a { color: var(--whiteColor); }

/* Nonhome Main */
.empty-content { padding: 12rem 0; text-align: center; font-size: 1.2rem; }
.nh-main-con { padding: 5rem 0; }
.online_process_top_info h2 { text-align: center; }
.online_process_top_info { margin: 0 0 5rem; }
.online_process_top_info .sub-heading-bullet { margin: 0 auto 1.5rem; }

.nh_heading_top_info span { margin: 0 auto 1.5rem; }
.nh_heading_top_info { margin: 0 0 5rem; }
.nh_heading_top_info h2 { width: 80%; margin: 0 auto;  text-align: center;}

/* backend */
#wp-admin-bar-my-account span { display: contents; }