/* CSS Refactored for AI Agency Theme */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Outfit:wght@400;600;700&display=swap');

body { font-family: 'Inter', sans-serif; background:#050510 !important; width:100%; color: #d0d0d0;}
div { display:block;}
img { display:block; border:0;}
strong { font-weight:600; color: #00E5FF;}

h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; color: #ffffff; }

.left { float:left}
.right { float:right}
.clearfix { clear:both}
.relative { position:relative}
.space--10 { height:10px; clear:both}
.floatLess:before, .floatLess:after { display:table; content:"";}
.floatLess:after { clear:both}

span.w {height: 1px; background-image: linear-gradient(90deg, transparent, #00E5FF, transparent); width: 140px; display: inline-block; position: relative; top: -10px; margin: 0 20px;}

/* Custom CSS */
.topH { height:40px; border-bottom:1px solid rgba(255,255,255,0.1);}
.topHead .left p { background:url(../img/location.png) left center no-repeat; color:#a0a0a0; font-size:13px; padding:0 0 0 26px; line-height:40px; margin:0;}
.topHead .right { margin-top:6px;}
.topHead .right li { float:left; list-style:none; margin-left:6px;}
.topHead .right li a { text-decoration:none; display:block; height:28px; width:28px; transition: opacity 0.3s ease;}
.topHead .right li a:hover { opacity:0.5;}

.header { height:80px; background:rgba(5,5,16,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.05); }
.head { height:80px;}
.head .left { margin-top:14px;}
/* Invert logo if it's dark text */
.head .left img { filter: brightness(0) invert(1); height: 50px; object-fit: contain; }
.head .right li { float:left; list-style:none;}
.head .right li a { text-decoration:none; text-align:center; color:#d0d0d0; font-size:14px; height:80px; min-width:80px; display:block; border-bottom:4px solid transparent; padding:20px 0 0 0; transition: all 0.3s ease;}
.head .right li a span { width:16px; height:16px; display:block; margin:0 auto 6px auto; filter: invert(0.8); transition: all 0.3s ease;}
.head .right li a span.home { background:url(../img/ic-home.png) top left no-repeat;}
.head .right li a span.abou { background:url(../img/ic-abou.png) top left no-repeat;}
.head .right li a span.serv { background:url(../img/ic-serv.png) top left no-repeat;}
.head .right li a span.jupi { background:url(../img/ic-jupi.png) top left no-repeat;}
.head .right li a span.proj { background:url(../img/ic-proj.png) top left no-repeat;}
.head .right li a span.care { background:url(../img/ic-care.png) top left no-repeat;}
.head .right li a span.cont { background:url(../img/ic-cont.png) top left no-repeat;}
.head .right li a:hover {border-bottom:4px solid #00E5FF; color:#00E5FF; text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);}
.head .right li a:hover span { filter: drop-shadow(0 0 5px #00E5FF) brightness(2); background-position:bottom left;}
.head .right li a.active {border-bottom:4px solid #00E5FF; color:#00E5FF; text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);}
.head .right li a.active span { filter: drop-shadow(0 0 5px #00E5FF) brightness(2); background-position:bottom left;}

.banner { background:#0a0a1a; height:460px; position:relative; overflow:hidden; width: 100%; display: block; clear: both;}
#owl-demo { width: 100%; display: block; }
.item.relative { position:relative; width: 100%;}
.item.relative img { width: 100%; height: 460px; object-fit: cover; opacity: 0.4; mix-blend-mode: luminosity; display: block; }
.item.relative h2 {position:absolute; top:30%; right:0; left:0; margin:auto;color:#ffffff; font-size:48px; font-weight: 700; text-align:center; width:80%; text-shadow: 0 4px 12px rgba(0,0,0,0.8); }
.item.relative h2 strong { color: #00E5FF; text-shadow: 0 0 15px rgba(0,229,255,0.6);}
.item.relative p { position:absolute; top:60%; right:0; left:0; margin:auto; font-size:18px; text-align:center; width:60%; color:#d0d0d0; text-shadow: 0 2px 4px rgba(0,0,0,0.8);}
.item.relative a.anchB { background: linear-gradient(45deg, #00E5FF, #7B2CBF); color:#fff; text-transform:uppercase; text-align:center; width:180px; height:45px; line-height:45px; font-weight:600; text-decoration:none; position:absolute; bottom:80px; left:calc(50% - 90px); border-radius: 30px; box-shadow: 0 4px 15px rgba(0,229,255,0.4); transition: transform 0.3s ease, box-shadow 0.3s ease;}
.item.relative a.anchB:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(123,44,191,0.6); }

.service { min-height:500px; padding: 60px 0; background: radial-gradient(circle at right, rgba(123,44,191,0.1), transparent 40%);}
.service h2 { margin:20px 0 40px; text-align:center; text-transform:uppercase; color:#00E5FF; font-size:36px; font-weight:700; letter-spacing: 2px;}
.service h4 {margin:40px 0; padding:0 15px; line-height:40px; border-left:4px solid #00E5FF; background: rgba(0,229,255,0.05); color: #fff;}
.service p { width:100%; max-width: 800px; margin: 0 auto 20px; color:#b0b0b0; font-size:16px; line-height:28px; text-align:center;}
.service strong { color: #fff; margin-left: 0; }
.service ul { padding:30px; background:rgba(255, 255, 255, 0.03); margin:30px auto; border-radius: 12px; max-width: 800px; border: 1px solid rgba(255,255,255,0.05);}
.service li { list-style-type:none; margin-bottom:12px; color: #d0d0d0; padding-left: 20px; position: relative;}
.service li:before { content: '>'; position: absolute; left: 0; color: #00E5FF; font-weight: bold; }

.service.b1,.service.b2,.service.b3,.service.b4,.service.b5,.service.b6,.service.b7,.service.b8 { min-height:240px; border-bottom:1px solid rgba(255,255,255,0.05); padding: 40px 0;}
.service.b1 h4,.service.b2 h4,.service.b3 h4,.service.b4 h4,.service.b5 h4,.service.b6 h4,.service.b7 h4,.service.b8 h4 { margin-left:0;}
.service.b1 p,.service.b2 p,.service.b3 p,.service.b4 p,.service.b5 p,.service.b6 p,.service.b7 p,.service.b8 p { margin-left:0; width:100%; text-align: left; }

.whatwedo { background: linear-gradient(180deg, #050510, #0a0a1a); width:100%; min-height:510px; padding: 60px 0;}
.whatwe h2 { margin:0 0 50px 0; text-align:center; text-transform:uppercase; color:#fff; font-size:36px; font-weight:700;}
.cent { text-align:center; margin-top:30px; padding: 30px; background: rgba(255,255,255,0.02); border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.3s ease, background 0.3s ease; }
.cent:hover { transform: translateY(-10px); background: rgba(255,255,255,0.04); box-shadow: 0 10px 30px rgba(0,229,255,0.1); }
.cent img { width:80px; margin:auto; filter: drop-shadow(0 0 10px rgba(0,229,255,0.4)); margin-bottom: 20px;}
.cent h2 { margin:10px 0 20px; text-align:center; text-transform:initial; color:#00E5FF; font-size:24px; font-weight:600;}
.cent p { color:#a0a0a0; font-size:14px; padding:0; margin-bottom:25px; line-height: 1.6;}
.cent a.anchB { background:transparent; color:#00E5FF; text-transform:uppercase; text-align:center; width:140px; height:40px; line-height:38px; text-decoration:none; display:block; margin:10px auto; border:1px solid #00E5FF; border-radius: 20px; transition: all 0.3s ease;}
.cent a.anchB:hover { background: #00E5FF; color: #050510; box-shadow: 0 0 15px rgba(0,229,255,0.5); }

.ourServ { padding: 60px 0;}
.ourServ h2 { margin:0 0 10px 0; text-align:center; text-transform:initial; color:#ffffff; font-size:36px; font-weight:700;}
.ourServ p { color:#00E5FF; font-size:16px; text-align:center; }
.getServ { width:100%; max-width:800px; margin:50px auto;}
.getServ .list { width:100%; padding: 0 15px;}
.getServ .list li { border-bottom:1px solid rgba(255,255,255,0.1); line-height:50px; background:none; font-size:16px; color:#c0c0c0; list-style:none; padding:0 10px 0 30px; position: relative; transition: all 0.3s ease;}
.getServ .list li:before { content: '>'; position: absolute; left: 10px; color: #7B2CBF; font-weight: bold; }
.getServ .list li:hover { background-color:rgba(255,255,255,0.05); color: #fff; padding-left: 35px;}

.engage { background: linear-gradient(45deg, #050510, #7B2CBF); min-height:222px; width:100%; padding: 50px 0; text-align:center; position: relative; overflow: hidden;}
.engage::before { content: ''; position: absolute; top:0; left:0; width: 100%; height: 100%; background: url(../img/noise.png) opacity(0.2); pointer-events: none;}
.eng { position: relative; z-index: 1;}
.eng h2 { color:#fff; font-size:32px; margin:0 0 20px 0; font-weight: 700;}
.eng h2 strong { color: #00E5FF; }
.eng p {color:#e0e0e0; font-size:16px; width:70%; margin:auto; line-height: 1.6;}
.eng a.anchB { background:#fff; color:#050510; text-transform:uppercase; text-align:center; width:160px; height:45px; line-height:45px; font-weight: 600; text-decoration:none; display:block; margin:30px auto 0; border-radius: 30px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.3);}
.eng a.anchB:hover { transform: scale(1.05); background: #00E5FF; }

.subpage { background: #0a0a15; margin-bottom:40px; border-bottom: 1px solid rgba(255,255,255,0.05);}
.undwrp {}
.undwrp h2 { margin:0;  0; color:#fff; font-size:36px; text-transform:uppercase; text-align: center; font-weight: 700; text-shadow: 0 0 20px rgba(0,229,255,0.3);}

.footer {border-top:1px solid rgba(255,255,255,0.1); padding: 20px 0; background: #030308;}
.foot { }
.foot .left p {line-height:60px; margin:0; color:#888; font-size:13px;}
.foot .right {}
.foot .right ul { margin-top:20px;}
.foot .right li { list-style:none; float:left; margin-left: 20px;}
.foot .right li a { text-decoration:none; color:#888; font-size:13px; transition: color 0.3s ease;}
.foot .right li a:hover { color: #00E5FF; }

.contact { min-height:500px; padding: 60px 0; background: #050510;}
.contact .form { width:100%; background: rgba(255,255,255,0.02); padding: 30px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05);}
.contact .form h4 { border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:15px; margin-bottom: 20px; font-size: 24px; color: #fff;}
.contact .form td { color:#c0c0c0; font-size:14px; padding:10px 0;}
.contact .form input.dInput { width:100%; height:45px; padding:10px 15px; border:1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.5); color: #fff; border-radius: 8px; font-family: 'Inter', sans-serif;}
.contact .form textarea.dtxt {width:100%; height:120px; padding:15px; border:1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.5); color: #fff; border-radius: 8px; font-family: 'Inter', sans-serif; resize: vertical;}
.contact .form input.dInput:focus, .contact .form textarea.dtxt:focus { border-color: #00E5FF; outline: none; box-shadow: 0 0 10px rgba(0,229,255,0.2);}
.contact .form a.anchD {background: linear-gradient(45deg, #00E5FF, #7B2CBF); color:#fff; text-transform:uppercase; text-align:center; width:160px; height:45px; line-height:45px; text-decoration:none; display:block; margin:30px 0 0 0; border-radius: 30px; font-weight: 600; border: none; cursor: pointer; transition: all 0.3s ease;}
.contact .form a.anchD:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(123,44,191,0.6); }

.contact .cInfo { width:100%; padding-left: 40px;}
.contact .cInfo h4 { border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:15px; margin-bottom: 20px; font-size: 24px; color: #fff;}
.contact .cInfo ul { margin:20px 0;}
.contact .cInfo li { list-style:none; border-bottom:1px solid rgba(255,255,255,0.05); line-height:50px; color: #a0a0a0;}
.contact .cInfo li.ema { background:url(../img/email.png) left center no-repeat; padding-left:35px; filter: invert(0.8) sepia(1) hue-rotate(180deg) saturate(3);}
.contact .cInfo li.con { background:url(../img/call.png) left center no-repeat; padding-left:35px; filter: invert(0.8) sepia(1) hue-rotate(180deg) saturate(3);}
.contact .cInfo li.fax { background:url(../img/fax.png) left center no-repeat; padding-left:35px; filter: invert(0.8) sepia(1) hue-rotate(180deg) saturate(3);}
.contact .cInfo li.add { background:url(../img/loc.png) left center no-repeat; padding-left:35px; filter: invert(0.8) sepia(1) hue-rotate(180deg) saturate(3);}
.contact .cInfo li.reg { background:url(../img/loc.png) left center no-repeat; padding-left:35px; filter: invert(0.8) sepia(1) hue-rotate(180deg) saturate(3);}
.contact .cInfo li.web { background:url(../img/web.png) left center no-repeat; padding-left:35px; filter: invert(0.8) sepia(1) hue-rotate(180deg) saturate(3);}

.scrollup { position:fixed; right:20px; bottom:20px; background: #00E5FF; width:45px; height:45px; display:none; cursor:pointer; border-radius: 50%; box-shadow: 0 4px 15px rgba(0,229,255,0.4); text-align: center; line-height: 40px; color: #000; font-weight: bold;}
.scrollup:after { content: '↑'; font-size: 24px; }
.scrollup:hover { transform: scale(1.1); }

/* stick header*/
.banner--clone { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; box-shadow:0 4px 20px rgba(0,0,0,0.5); background: rgba(5,5,16,0.95); -webkit-transform: translateY(-100%); transform: translateY(-100%); transition: all 300ms ease-in-out; }
.banner--stick { -webkit-transform: translateY(0%); transform: translateY(0%); }

#returnmessage {font-weight: bold; color: #00E5FF;}
.cus-navbar { display:none}
.sideMenu { display:none}
.wrp { display:none}
.cross { display:none}

@media (max-width: 991px) {
    .foot .right ul { overflow:auto; margin:10px 0;}	
    .head .right li a { min-width:66px; font-size:12px;}
    .foot .left p { font-size:12px; border-bottom:1px solid rgba(255,255,255,0.1); text-align:center; line-height:40px;}
    .foot .right li a { font-size:12px; padding:0 2px;}
    .foot .right li { padding:0 5px;}
    .cent h2 { font-size:22px;}
}
@media (max-width: 767px){
    .cent h2 { font-size:18px;}
    .service h2 { font-size:24px;}
    .whatwe h2 { font-size:24px;}
    .ourServ h2 { font-size:24px;}
    span.w { display: none !important; }
    .getServ,.getServ .list { width:100%;}
    .foot .left,.foot .right { width:100%;}	
    .container-fluid { padding-left:0; padding-right:0;}
    .navbar-default .navbar-collapse, .navbar-default .navbar-form { margin-top:15px; background:#0a0a1a; border-bottom:1px solid rgba(255,255,255,0.1); border-top:1px solid rgba(255,255,255,0.1);}
    .navbar-default .navbar-toggle { margin-top:22px; background:#333 !important;}
    .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { margin-right:-15px !important;}
    .item.relative a.anchB { left:50%; transform: translateX(-50%); bottom:40px;}
    .service { background:none;}
    .service p { width:100%;}
    .topHead .right {display:none}
    .item.relative h2 { height:auto; top: 20%; font-size:30px;}
    .item.relative p { width:90%; font-size:14px; top: 50%;}
    .whatwedo { min-height:1020px;}
    .engage { padding: 40px 15px;}
    .eng p { width:100%;}
    .contact .form { width:100%; margin-bottom: 30px;}
    .contact .cInfo { width:100%; padding-left: 0;}
    .navbar-toggle { display:none}
    .cus-navbar { display:block; position: relative; padding: 9px 10px; background: #00E5FF;
        border: 1px solid transparent; border-radius: 4px; margin:22px 0 0 20px; width:40px; height:40px;}
    .cus-navbar:after { content: '☰'; color: #000; font-size: 20px; position:absolute; top:8px; left:10px; }
    .cross {display:none; position: relative; padding: 9px 10px; background:#ff3366; cursor:pointer; z-index:11; top:-54px; border: 1px solid transparent; border-radius: 4px; margin:22px 0 0 20px; width:40px; height:40px;}
    .cross:after { content: '✕'; color: #fff; font-size: 20px; position:absolute; top:8px; left:12px; }
    .wrp { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:10; background:rgba(0,0,0,0.8); backdrop-filter: blur(5px); }
    .sideMenu { display:none; position:absolute; top:0; left:0; height:100%; width:60%; background:#0a0a1a; padding-top: 60px;}
    .sideMenu ul { list-style: none; padding: 0; margin: 0; }
    .sideMenu li { border-bottom: 1px solid rgba(255,255,255,0.1); }
    .sideMenu li a { display: block; padding: 15px 20px; color: #d0d0d0; text-decoration: none; font-size: 16px; }
    .sideMenu li a:hover, .sideMenu li a.active { background: rgba(0,229,255,0.1); color: #00E5FF; }
    .head .right li { float:none; border-bottom:1px solid rgba(255,255,255,0.1);}					 
}
/* Responsive Mobile Fixes */
@media (max-width: 767px) {
    /* Footer */
    .footer .foot .left { text-align: center; margin-bottom: 20px; }
    .footer .foot .left p { display: inline-block; }
    .footer .foot .right ul { float: none; display: flex; flex-wrap: wrap; justify-content: center; padding: 0; }
    .footer .foot .right li { float: none; margin: 5px 10px; }
    
    /* Headings Alignment */
    h2, h3, h4, .undwrp h2, .service h2, .service h4, .eng h2 { text-align: center !important; }
}

/* Responsive Headings fix for single line */
@media (max-width: 767px) {
    .service h2, .whatwe h2, .ourServ h2, .eng h2, .undwrp h2 { 
        font-size: 20px !important; 
        letter-spacing: 0px !important; 
    }
}