/* ============================================================
   SIGNAL BYTES TECHNOLOGIES - MAIN STYLESHEET
   Edit this single file to change design across the website.
   Automatic cache versioning is handled by includes/config.php.
   ============================================================ */

:root{
  --navy:#071a3d;
  --blue:#0864ee;
  --light:#f2f7ff;
  --orange:#ff7b2c;
  --green:#12b66b
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  color:var(--navy);
  font-family:Arial,Helvetica,sans-serif;
  background:#fff
}
a{
  text-decoration:none;
  color:inherit
}
button,input,textarea,select{
  font:inherit
}
small{
  letter-spacing:.08em;
  color:#1768e9;
  font-weight:800
}
h2{
  font-size:30px;
  margin:8px 0 28px
}
header{
  height:78px;
  padding:0 4vw;
  display:flex;
  align-items:center;
  border-bottom:1px solid #e4eaf4;
  background:#fff;
  position:sticky;
  top:0;
  z-index:100
}
.brand img{
  width:205px;
  height:64px;
  object-fit:contain
}
nav{
  display:flex;
  align-items:center;
  gap:27px;
  margin-left:auto;
  height:100%;
  font-size:13px;
  font-weight:700
}
nav>a,.nav-group>a{
  height:100%;
  display:flex;
  align-items:center;
  gap:5px
}
.nav-group{
  height:100%;
  display:flex;
  align-items:center
}
.nav-group>a b{
  font-size:16px
}
.proposal,.primary{
  border:0;
  background:linear-gradient(#1775f5,#0759dc);
  color:#fff;
  padding:13px 20px;
  border-radius:5px;
  font-weight:700;
  box-shadow:0 7px 18px #0966ee35
}
.proposal{
  margin-left:25px
}
.hamb,.close{
  display:none
}
.mega{
  position:absolute;
  top:77px;
  left:4vw;
  right:4vw;
  background:#fff;
  border-radius:0 0 24px 24px;
  padding:25px;
  box-shadow:0 24px 55px #061a3d33;
  display:grid;
  grid-template-columns:1.55fr .55fr;
  gap:25px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.2s
}
.nav-group:hover .mega{
  opacity:1;
  visibility:visible;
  transform:none
}
.mega-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px
}
.mega-list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px;
  border-radius:10px;
  font-size:13px
}
.mega-list a:hover{
  background:#f1f6ff;
  color:#0864ee
}
.mega-list i,.type-grid i,.marketing-grid i,.brand-grid i{
  width:40px;
  height:40px;
  border-radius:10px;
  background:#e9f2ff;
  color:#0864ee;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-size:19px
}
.mega-feature{
  background:#eef5ff;
  border-radius:18px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:9px
}
.mega-feature img{
  width:100%;
  height:145px;
  object-fit:cover;
  border-radius:13px
}
.mega-feature span{
  color:#0864ee;
  font-size:12px;
  font-weight:800
}

.hero{
  min-height:590px;
  padding:60px 6vw 35px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  background:linear-gradient(115deg,#fff 10%,#edf6ff 100%);
  position:relative;
  overflow:hidden
}
.hero:after{
  content:"";
  position:absolute;
  right:-90px;
  top:-120px;
  width:550px;
  height:550px;
  border:1px solid #bddcff;
  border-radius:50%
}
.hero-copy{
  z-index:2
}
.hero-copy>small{
  display:inline-block;
  background:#eef5ff;
  border-radius:20px;
  padding:8px 12px
}
.hero h1{
  font-size:54px;
  line-height:1.05;
  margin:20px 0;
  color:#071941
}
.hero h1 em{
  font-style:normal;
  color:#0864ee
}
.hero p{
  font-size:16px;
  line-height:1.65;
  color:#5a6476;
  max-width:590px
}
.actions{
  display:flex;
  gap:15px;
  margin:25px 0
}
.secondary{
  display:inline-flex;
  border:1px solid #1d71e8;
  border-radius:5px;
  padding:12px 20px;
  color:#095fdf;
  font-weight:700;
  background:#fff
}
.hero-stats{
  display:flex;
  gap:38px;
  margin-top:45px
}
.hero-stats span{
  font-size:9px;
  color:#657084;
  display:flex;
  flex-direction:column
}
.hero-stats b{
  font-size:18px;
  color:#1267e5;
  margin-bottom:5px
}
.hero-stats .stars{
  font-size:13px;
  color:#ffb000
}
.hero-art{
  z-index:2;
  display:flex;
  align-items:center
}
.hero-art img{
  width:100%;
  max-height:515px;
  object-fit:contain;
  mix-blend-mode:multiply
}
.trusted{
  text-align:center;
  padding:23px 5vw;
  border-bottom:1px solid #e5ecf7
}
.trusted>b{
  font-size:13px
}
.trusted>div{
  display:flex;
  justify-content:space-around;
  align-items:center;
  margin-top:23px;
  color:#2062b7;
  font-weight:800;
  font-size:16px
}
.services,.website-types,.work,.pricing,.blogs{
  padding:55px 5vw;
  text-align:center
}
.service-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.service-cards article{
  height:310px;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  text-align:left
}
.service-cards img{
  width:100%;
  height:100%;
  object-fit:cover
}
.service-cards article>div{
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  background:#fff;
  padding:17px;
  border-radius:11px 11px 0 0
}
.service-cards h3{
  font-size:17px;
  margin:0
}
.service-cards p{
  font-size:11px;
  color:#647084
}
.service-cards a{
  font-size:11px;
  color:#0864ee;
  font-weight:800
}
.website-types{
  background:#fff
}
.type-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px
}
.type-grid a,.marketing-grid a,.brand-grid a{
  border:1px solid #dfe8f5;
  border-radius:9px;
  padding:12px 8px;
  min-height:100px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#fff
}
.type-grid b,.marketing-grid b,.brand-grid b{
  font-size:11px
}
.type-grid i,.marketing-grid i,.brand-grid i{
  background:transparent;
  font-size:27px
}
.marketing{
  padding:45px 5vw;
  background:#f3f8ff;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:22px;
  text-align:left
}
.marketing-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:25px
}
.performance{
  background:#fff;
  border-radius:12px;
  padding:18px
}
.performance>b{
  display:block;
  color:#12b66b;
  font-size:22px
}
.performance svg,.roi svg{
  width:100%;
  height:145px
}
.performance polyline,.roi polyline{
  fill:none;
  stroke:#176eef;
  stroke-width:5
}
.performance>div{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}
.performance span{
  background:#f8fbff;
  padding:10px;
  font-size:9px;
  color:#7b8493
}
.performance span b{
  display:block;
  color:#07995b;
  font-size:16px
}
.branding{
  padding:45px 5vw;
  background:#f5f9ff;
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:32px;
  align-items:center
}
.branding>img{
  width:100%;
  height:285px;
  object-fit:cover;
  border-radius:12px
}
.branding>div{
  text-align:left
}
.brand-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px
}
.work{
  background:#fff
}
.portfolio{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:18px
}
.portfolio article{
  text-align:left;
  border:1px solid #dde6f1;
  border-radius:10px;
  overflow:hidden;
  padding-bottom:13px
}
.portfolio b,.portfolio span{
  display:block;
  padding:4px 13px
}
.portfolio span{
  font-size:10px;
  color:#667085
}
.mock{
  height:185px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:24px;
  font-weight:900;
  margin-bottom:8px
}
.mahindra{
  background:radial-gradient(circle at 70%,#1856a2,#020916)
}
.india{
  background:linear-gradient(135deg,#2259e6,#7138ce)
}
.bisleri{
  background:linear-gradient(135deg,#02a3a6,#026d8e)
}
.pricing{
  background:#fbfdff
}
.plans{
  display:grid;
  grid-template-columns:1fr 1fr .72fr 1fr;
  gap:12px;
  align-items:stretch
}
.plans article{
  background:#fff;
  border:1px solid #dce6f4;
  border-radius:10px;
  padding:22px;
  text-align:left;
  position:relative
}
.plans article.popular{
  border:2px solid #146cef
}
.plans label{
  position:absolute;
  right:10px;
  top:10px;
  background:#ff9b35;
  color:#fff;
  font-size:9px;
  padding:4px 8px;
  border-radius:10px
}
.plans h3{
  font-size:21px;
  margin:0
}
.plans p{
  font-size:10px;
  color:#6c7483
}
.plans strong{
  display:block;
  font-size:25px;
  color:#095ee1;
  margin:18px 0
}
.plans strong small{
  font-size:9px;
  color:#657084
}
.plans ul{
  list-style:none;
  padding:0;
  line-height:2;
  font-size:11px
}
.plans li:before,.venture li:before,.contact li:before{
  content:"✓";
  color:#11b56b;
  margin-right:8px
}
.plans button,.contact button,.modal form button{
  width:100%;
  border:1px solid #146cef;
  background:#fff;
  color:#095fdf;
  padding:10px;
  border-radius:5px;
  font-weight:800
}
.plans .popular button,.contact button,.modal form button{
  background:#0a65ea;
  color:#fff
}
.roi{
  text-align:center!important
}
.stories{
  padding:30px 3vw;
  background:#f2f7ff;
  display:grid;
  grid-template-columns:1fr 1.3fr .8fr;
  gap:16px
}
.stories article>small{
  display:block;
  margin-bottom:10px
}
.video{
  height:205px;
  background:linear-gradient(135deg,#071226,#265ca0);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  border-radius:10px
}
.video>b,.person{
  font-size:28px
}
.test-videos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px
}
.person{
  height:205px;
  border-radius:10px;
  background:linear-gradient(#7e9cc0,#17233a);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff
}
.person b{
  font-size:10px;
  margin-top:50px
}
.p2{
  background:linear-gradient(#d1a890,#6f3d33)
}
.p3{
  background:linear-gradient(#8b9cac,#243249)
}
.quote{
  background:#fff;
  padding:20px;
  border-radius:10px
}
.quote p{
  font-size:13px;
  line-height:1.6
}
.quote>b{
  color:#fdb100
}
.quote>span{
  display:block;
  margin-top:20px;
  font-size:11px
}
.venture{
  padding:55px 6vw;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:45px;
  align-items:center
}
.venture h2{
  font-size:25px
}
.venture ul{
  list-style:none;
  padding:0;
  line-height:2;
  font-size:12px
}
.dash{
  background:#f7fbff;
  border:1px solid #bcd6fa;
  border-radius:12px;
  padding:18px
}
.dash>b{
  color:#0a65ea
}
.dash-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:17px 0
}
.dash-stats span{
  background:#fff;
  padding:12px;
  font-weight:900;
  color:#146cef
}
.dash-stats small{
  display:block;
  font-size:8px;
  color:#77808f
}
.world{
  height:160px;
  background:radial-gradient(ellipse,#d8efff,#fff);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#2a7cf0;
  font-weight:800
}
.blogs{
  background:#f4f8ff
}
.blogs>div{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px;
  margin:20px 0
}
.blogs article{
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  text-align:left;
  padding-bottom:15px
}
.blogs article b,.blogs article small{
  display:block;
  margin:9px 14px
}
.blog{
  height:150px
}
.b0{
  background:linear-gradient(135deg,#07183c,#078fe5)
}
.b1{
  background:linear-gradient(135deg,#265cff,#fa5d54)
}
.b2{
  background:linear-gradient(135deg,#eee,#a98665)
}
.contact{
  margin:45px 5vw 20px;
  padding:30px;
  background:linear-gradient(120deg,#0755d5,#0b70ff);
  border-radius:15px;
  color:#fff;
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:25px
}
.contact h2{
  margin:0;
  color:#fff
}
.contact p{
  font-size:12px
}
.contact ul{
  list-style:none;
  padding:0;
  font-size:11px;
  line-height:2
}
.contact form,.modal form{
  background:#fff;
  padding:12px;
  border-radius:9px;
  display:flex;
  flex-direction:column;
  gap:8px
}
.contact form>div{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.contact input,.contact textarea,.modal input,.modal textarea,.modal select{
  border:1px solid #d8e1ee;
  border-radius:5px;
  padding:10px
}
.thanks{
  background:#fff;
  color:#071a3d;
  border-radius:10px;
  padding:25px;
  text-align:center
}
.thanks>b{
  font-size:30px;
  color:#11b56b
}
footer{
  padding:50px 5vw 20px;
  background:#031b36;
  color:#fff;
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:35px
}
footer>div{
  display:flex;
  flex-direction:column;
  gap:8px
}
footer img{
  width:220px;
  background:#fff;
  border-radius:6px
}
footer p,footer a{
  font-size:10px;
  color:#b8c7d8;
  line-height:1.7
}
.copyright{
  grid-column:1/-1!important;
  border-top:1px solid #29435b;
  padding-top:18px;
  flex-direction:row!important;
  justify-content:space-between;
  font-size:10px;
  color:#8aa0b5
}
.whatsapp{
  position:fixed;
  right:20px;
  bottom:18px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#18ba68;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  z-index:50
}
.modal{
  position:fixed;
  inset:0;
  background:#071a3dcc;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px
}
.modal-box{
  background:#fff;
  width:min(470px,95vw);
  padding:28px;
  border-radius:15px;
  position:relative
}
.modal-box>button{
  position:absolute;
  right:15px;
  top:10px;
  border:0;
  background:none;
  font-size:27px
}
.modal-box h2{
  margin-bottom:8px
}
.modal-box p{
  color:#657084;
  font-size:12px
}

@media(max-width:900px){
  header{
  height:66px;
  padding:0 16px
}
.brand img{
  width:175px
}
.proposal{
  display:none
}
.hamb{
  display:block;
  margin-left:auto;
  border:0;
  background:#edf4ff;
  border-radius:5px;
  padding:10px
}
nav{
  position:fixed;
  inset:0;
  background:#061a35;
  color:#fff;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  padding:70px 22px;
  gap:0;
  transform:translateX(100%);
  transition:.25s;
  overflow:auto
}
nav.open{
  transform:none
}
.close{
  display:block;
  position:absolute;
  right:20px;
  top:14px;
  border:0;
  background:none;
  color:#fff;
  font-size:35px
}
.nav-group{
  display:block;
  height:auto
}
.nav-group>a,nav>a{
  height:auto;
  padding:15px 0;
  border-bottom:1px solid #ffffff20
}
.mega{
  position:static;
  display:none
}
.nav-group:focus-within .mega{
  display:block;
  opacity:1;
  visibility:visible;
  transform:none;
  background:#0c2b53;
  color:#fff;
  grid-template-columns:1fr;
  padding:10px
}
.mega-list{
  grid-template-columns:1fr
}
.mega-feature{
  display:none
}
.hero{
  grid-template-columns:1fr;
  padding:45px 20px 25px
}
.hero h1{
  font-size:43px
}
.hero-art{
  margin-top:10px
}
.hero-stats{
  gap:15px;
  display:grid;
  grid-template-columns:repeat(2,1fr)
}
.trusted>div{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  font-size:11px
}
.services,.website-types,.work,.pricing,.blogs{
  padding:45px 20px
}
.service-cards{
  grid-template-columns:1fr
}
.type-grid{
  grid-template-columns:repeat(2,1fr)
}
.marketing,.branding,.venture,.contact{
  grid-template-columns:1fr;
  padding:40px 20px
}
.marketing-grid,.brand-grid{
  grid-template-columns:repeat(2,1fr)
}
.portfolio{
  grid-template-columns:1fr
}
.plans{
  grid-template-columns:1fr
}
.stories{
  grid-template-columns:1fr;
  padding:30px 20px
}
.dash-stats{
  grid-template-columns:1fr
}
.blogs>div{
  grid-template-columns:1fr
}
.contact{
  margin:20px
}
.contact form>div{
  grid-template-columns:1fr
}
footer{
  grid-template-columns:1fr 1fr;
  padding:45px 22px 90px
}
.footer-brand{
  grid-column:1/-1
}
.copyright{
  flex-direction:column!important
}
.whatsapp{
  bottom:20px
}

}

@media(max-width:520px){
  h2{
  font-size:24px
}
.hero h1{
  font-size:38px
}
.hero-art img{
  min-height:245px;
  object-fit:cover;
  border-radius:12px
}
.actions{
  flex-direction:column
}
.trusted>div{
  grid-template-columns:repeat(2,1fr)
}
.type-grid{
  grid-template-columns:repeat(2,1fr)
}
.marketing-grid,.brand-grid{
  grid-template-columns:repeat(2,1fr)
}
.test-videos{
  grid-template-columns:1fr
}
.person{
  height:150px
}
.contact{
  margin:12px
}
.venture{
  padding:40px 20px
}
footer{
  grid-template-columns:1fr
}
.footer-brand{
  grid-column:auto
}
.copyright{
  grid-column:auto!important
}

}

/* Homepage refinement */
body{
  font-size:16px
}
h1,h2,h3,b,strong{
  font-weight:800
}
h2{
  font-size:clamp(34px,3.2vw,52px);
  line-height:1.12;
  margin-bottom:36px
}
header{
  height:82px;
  padding-inline:3vw
}
.brand img{
  width:215px;
  height:68px
}
nav{
  gap:24px;
  font-size:15px;
  font-weight:800
}
nav>a,.nav-group>a{
  gap:6px;
  white-space:nowrap
}
.nav-group>a b{
  font-size:14px;
  line-height:1;
  transform:translateY(1px)
}

.hero h1{
  font-size:clamp(54px,5vw,76px);
  font-weight:900;
  line-height:1.02;
  letter-spacing:-.035em
}
.service-cards article>div{
  padding:22px
}
.service-cards h3{
  font-size:23px
}
.service-cards p{
  font-size:15px;
  line-height:1.55
}
.service-cards a{
  font-size:15px
}

.thumb{
  display:block;
  width:58px;
  height:46px!important;
  border-radius:8px;
  background-repeat:no-repeat;
  background-color:#e9f2ff;
  flex:0 0 auto
}
.thumb-web{
  background-image:url('/assets/web-services-grid.jpg');
  background-size:400% 300%
}
.thumb-digital{
  background-image:url('/assets/digital-services-grid.jpg');
  background-size:400% 300%
}
.thumb-brand{
  background-image:url('/assets/branding-services-grid.jpg');
  background-size:400% 200%
}
.type-grid a,.marketing-grid a,.brand-grid a{
  min-height:128px;
  border-radius:12px;
  gap:11px;
  overflow:hidden;
  transition:.25s
}
.type-grid b,.marketing-grid b,.brand-grid b{
  font-size:14px;
  line-height:1.25
}
.type-grid .thumb,.marketing-grid .thumb,.brand-grid .thumb{
  width:82px;
  height:61px!important
}
.type-grid a:hover,.marketing-grid a:hover,.brand-grid a:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px #0b5fce1b
}

.work{
  overflow:hidden
}
.portfolio-track{
  display:flex;
  gap:22px;
  width:max-content;
  margin:0 0 22px;
  transition:transform .65s ease
}
.portfolio-track article{
  width:calc((90vw - 44px)/3);
  text-align:left;
  border:1px solid #dde6f1;
  border-radius:12px;
  overflow:hidden;
  padding-bottom:15px;
  background:#fff
}
.portfolio-track img{
  width:100%;
  height:245px;
  object-fit:cover
}
.portfolio-track b,.portfolio-track span{
  display:block;
  padding:5px 16px
}
.portfolio-track b{
  font-size:20px
}
.portfolio-track span{
  font-size:13px;
  color:#667085
}
.slider-dots,.review-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin:10px 0 18px
}
.slider-dots button,.review-dots button{
  width:8px;
  height:8px;
  border:0;
  border-radius:8px;
  background:#b9c8dc;
  padding:0
}
.slider-dots button.active,.review-dots button.active{
  width:25px;
  background:#0966ee
}

.plans h3{
  font-size:28px
}
.plans p{
  font-size:15px
}
.plans strong{
  font-size:32px
}
.plans strong small{
  font-size:13px
}
.plans ul{
  font-size:15px;
  line-height:2.15
}
.plans button{
  font-size:16px;
  padding:13px!important
}
.stories{
  padding-block:48px
}
.showreel{
  width:100%;
  height:245px;
  object-fit:cover;
  border-radius:12px;
  background:#061b3d
}
.person{
  height:245px;
  border:0;
  cursor:pointer
}
.quote p{
  font-size:17px;
  line-height:1.65;
  min-height:135px
}
.quote>span{
  font-size:14px!important
}
.review-dots{
  justify-content:flex-start;
  margin-top:20px
}

.venture{
  padding:70px 6vw;
  background:linear-gradient(120deg,#fff 0%,#edf7ff 58%,#e6f1ff 100%);
  position:relative;
  overflow:hidden
}
.venture:after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border:1px solid #a9d2ff;
  border-radius:50%;
  right:-160px;
  bottom:-260px
}
.venture>div{
  position:relative;
  z-index:2
}
.venture h2{
  font-size:40px
}
.venture ul{
  font-size:16px;
  line-height:2.1
}
.world{
  height:230px;
  font-size:22px;
  border-radius:10px
}

.blogs article{
  cursor:pointer;
  transition:.25s
}
.blogs article:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 35px #102f5b1b
}
.blogs article b{
  font-size:20px;
  line-height:1.35
}
.blogs article button{
  margin:8px 16px;
  border:0;
  background:none;
  padding:0;
  color:#0864ee;
  font-weight:800
}
.blog{
  width:100%;
  height:210px;
  object-fit:cover
}

.contact{
  margin:55px 5vw 25px;
  padding:48px;
  gap:40px
}
.contact h2{
  font-size:44px!important
}
.contact p,.contact li{
  font-size:15px!important
}
.contact-direct{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-weight:700;
  margin-top:25px
}
.contact form{
  padding:22px;
  gap:14px
}
.contact form>div{
  gap:14px
}
.contact label{
  display:flex;
  flex-direction:column;
  gap:7px;
  color:#172947;
  font-size:13px;
  font-weight:800
}
.contact input,.contact textarea,.contact select{
  padding:13px;
  background:#fff;
  color:#071a3d
}
.contact textarea{
  min-height:105px
}
.contact .consent{
  flex-direction:row;
  align-items:center;
  font-weight:500
}
.consent input{
  width:auto
}
.contact form button{
  padding:14px;
  font-size:16px
}

.article-modal{
  background:#fff;
  width:min(650px,95vw);
  max-height:90vh;
  overflow:auto;
  border-radius:15px;
  padding:28px;
  position:relative
}
.article-modal>button{
  position:absolute;
  right:12px;
  top:10px;
  border:0;
  background:#fff;
  width:38px;
  height:38px;
  border-radius:50%;
  font-size:25px
}
.article-modal>img{
  width:100%;
  height:250px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:20px
}
.article-modal h2{
  font-size:34px
}
.article-modal p{
  line-height:1.8;
  color:#596579;
  margin-bottom:28px
}

@media(max-width:900px){
  .portfolio-track article{
  width:82vw
}
.showreel{
  height:230px
}
.contact{
  padding:35px 24px
}
.venture h2{
  font-size:34px
}

}

@media(max-width:520px){
  h2{
  font-size:32px
}
.hero h1{
  font-size:42px
}
.type-grid .thumb,.marketing-grid .thumb,.brand-grid .thumb{
  width:72px;
  height:54px!important
}
.contact h2{
  font-size:34px!important
}
.contact form>div{
  grid-template-columns:1fr
}
.portfolio-track article{
  width:85vw
}

}

/* Ensure generated service thumbnails override the legacy icon background */
h2{
  font-weight:700!important
}

.mega-list .thumb,.type-grid .thumb,.marketing-grid .thumb,.brand-grid .thumb{
  display:block!important;
  background-color:#e9f2ff!important;
  background-repeat:no-repeat!important;
  font-size:0!important
}

.mega-list .thumb-web,.type-grid .thumb-web{
  background-image:url('/assets/web-services-grid.jpg')!important;
  background-size:400% 300%!important
}

.mega-list .thumb-digital,.marketing-grid .thumb-digital{
  background-image:url('/assets/digital-services-grid.jpg')!important;
  background-size:400% 300%!important
}

.mega-list .thumb-brand,.brand-grid .thumb-brand{
  background-image:url('/assets/branding-services-grid.jpg')!important;
  background-size:400% 200%!important
}

/* Requested sizing and hero polish */
nav{
  gap:23px!important;
  font-size:15px!important;
  font-weight:700!important
}

.hero{
  min-height:540px;
  padding:52px 5.5vw 40px;
  grid-template-columns:.82fr 1.18fr;
  background:radial-gradient(circle at 82% 22%,#dceeff 0,transparent 32%),linear-gradient(120deg,#fff 0%,#f5faff 48%,#eaf5ff 100%)
}

.hero-copy{
  align-self:center
}
.hero h1{
  font-size:clamp(46px,4.2vw,64px)!important;
  line-height:1.05!important;
  letter-spacing:-.03em
}
.hero-copy>p{
  font-size:16px;
  max-width:540px
}
.hero-art img{
  max-height:470px;
  border-radius:20px;
  filter:drop-shadow(0 24px 40px #0c31552b)
}

.service-cards h3{
  font-size:20px!important;
  font-weight:700!important
}

.branding h2{
  font-size:clamp(27px,2.35vw,38px)!important;
  white-space:nowrap;
  margin-bottom:30px
}

@media(max-width:1100px){
  nav{
  gap:15px!important;
  font-size:14px!important
}
.branding h2{
  white-space:normal
}
.hero h1{
  font-size:48px!important
}

}

@media(max-width:900px){
  nav{
  font-size:20px!important
}
.hero{
  grid-template-columns:1fr;
  padding:42px 20px 28px
}
.hero h1{
  font-size:43px!important
}
.hero-art img{
  max-height:none
}
.branding h2{
  font-size:32px!important;
  white-space:normal
}

}

/* Motion and finishing details */
.hero h1{
  font-weight:700!important;
  margin-bottom:0
}
.typing-line{
  height:1.18em;
  position:relative;
  overflow:hidden;
  color:var(--blue);
  font-size:clamp(46px,4.2vw,64px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
  margin:0 0 24px
}
.typing-line span{
  position:absolute;
  left:0;
  top:0;
  width:max-content;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  border-right:3px solid var(--blue);
  opacity:0;
  animation:typePhrase 9s steps(24,end) infinite
}
.typing-line span:nth-child(2){
  animation-delay:3s
}
.typing-line span:nth-child(3){
  animation-delay:6s
}
@keyframes typePhrase{
  0%{
  width:0;
  opacity:1
}
24%{
  width:100%;
  opacity:1
}
29%{
  width:100%;
  opacity:1
}
33%,100%{
  width:0;
  opacity:0
}

}

.service-cards a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:.25s
}
.service-cards a:hover{
  color:#ff762b;
  transform:translateX(7px);
  text-shadow:0 4px 14px #ff762b33
}
.service-cards article>div:has(a:hover){
  box-shadow:0 18px 35px #0737721f
}

.portfolio-marquee{
  width:100%;
  overflow:hidden;
  padding:12px 0 24px
}
.portfolio-marquee .portfolio-track{
  display:flex;
  width:max-content;
  gap:22px;
  animation:workMarquee 28s linear infinite;
  will-change:transform
}
.portfolio-marquee:hover .portfolio-track{
  animation-play-state:paused
}
.portfolio-marquee article{
  width:340px;
  flex:0 0 340px
}
@keyframes workMarquee{
  to{
  transform:translateX(calc(-50% - 11px))
}

}

.dash{
  box-shadow:0 22px 55px #0b5cbd1d;
  background:#fff
}
.dash-head{
  display:flex;
  align-items:center;
  justify-content:space-between
}
.dash-head>b{
  color:#0965e8;
  font-size:22px
}
.dash-head>span{
  font-size:11px;
  color:#728096;
  background:#eef5ff;
  padding:7px 11px;
  border-radius:20px
}
.trade-chart{
  background:linear-gradient(180deg,#f6fbff,#edf6ff);
  border-radius:12px;
  padding:15px 18px 10px
}
.trade-chart>div:first-child{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.trade-chart>div b{
  color:#0aad6a;
  font-size:20px
}
.trade-chart svg{
  width:100%;
  height:170px;
  overflow:visible
}
.trade-chart polyline{
  fill:none;
  stroke:#126bf0;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round
}
.trade-chart .area{
  fill:url(#tradeFill)
}
.chart-legend{
  display:flex;
  gap:22px;
  font-size:10px;
  color:#6d7890
}
.chart-legend span:before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#126bf0;
  margin-right:5px
}
.chart-legend span:nth-child(2):before{
  background:#13bb7b
}
.chart-legend span:nth-child(3):before{
  background:#ff8a36
}

.contact{
  padding:32px 38px!important;
  align-items:center
}
.contact>div>small{
  color:#dcecff!important;
  background:#ffffff1f;
  padding:7px 10px;
  border-radius:5px;
  display:inline-block
}
.contact h2{
  font-size:38px!important;
  margin:10px 0
}
.contact p{
  margin:4px 0
}
.contact ul{
  margin:10px 0
}
.contact-direct{
  margin-top:15px
}
.contact form{
  padding:18px
}
.contact textarea{
  min-height:75px
}
.contact form button{
  padding:12px
}

footer{
  padding-top:55px;
  gap:45px
}
footer b{
  font-size:18px
}
footer p,footer a{
  font-size:14px;
  line-height:1.75
}
.footer-brand p{
  max-width:440px
}
.copyright{
  font-size:12px
}
.whatsapp svg{
  width:29px;
  height:29px;
  fill:#fff
}
.whatsapp{
  box-shadow:0 9px 25px #07975166
}

@media(max-width:900px){
  .typing-line{
  font-size:43px
}
.contact{
  padding:28px 22px!important
}
.portfolio-marquee article{
  width:78vw;
  flex-basis:78vw
}
footer b{
  font-size:17px
}
footer p,footer a{
  font-size:13px
}

}

@media(max-width:520px){
  .typing-line{
  font-size:39px;
  height:1.3em
}
.typing-line span{
  white-space:normal
}
.contact h2{
  font-size:32px!important
}
.chart-legend{
  flex-wrap:wrap;
  gap:8px
}
.dash-stats{
  grid-template-columns:1fr
}
.trade-chart svg{
  height:130px
}

}

/* Trust, process and why-us sections */
.hero-art{
  position:relative
}
.hero-logo{
  position:absolute;
  left:8%;
  bottom:10%;
  background:#fffffff2;
  border:1px solid #dce8f7;
  border-radius:10px;
  padding:7px 12px;
  box-shadow:0 12px 32px #0829552b
}
.hero-logo img{
  width:180px!important;
  height:50px!important;
  object-fit:contain!important;
  filter:none!important;
  border-radius:0!important
}
.google-rating{
  display:grid!important;
  grid-template-columns:auto 1fr;
  column-gap:7px;
  align-items:center
}
.google-rating .stars{
  grid-row:1/3
}
.google-rating strong{
  font-size:16px;
  color:#071a3d
}

.process-section{
  padding:80px 6vw;
  background:#fff;
  text-align:center
}
.section-title{
  max-width:760px;
  margin:0 auto
}
.section-title>p{
  color:#68758a;
  line-height:1.7;
  margin-top:-20px
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:45px
}
.process-grid article{
  position:relative;
  text-align:left;
  padding:30px 25px;
  border:1px solid #dce7f5;
  border-radius:15px;
  background:linear-gradient(150deg,#fff,#f8fbff);
  transition:.3s
}
.process-grid article:hover{
  transform:translateY(-7px);
  box-shadow:0 18px 40px #0b58b51a
}
.process-grid article>span{
  position:absolute;
  right:18px;
  top:15px;
  font-size:13px;
  font-weight:800;
  color:#a8bdd8
}
.process-icon{
  width:54px;
  height:54px;
  border-radius:14px;
  background:#e8f2ff;
  color:#0865e9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:25px
}
.process-grid h3{
  font-size:21px;
  margin:20px 0 10px
}
.process-grid p{
  font-size:14px;
  line-height:1.7;
  color:#68758a
}
.pi1{
  background:#fff1e8;
  color:#ff772c
}
.pi2{
  background:#eafaf4;
  color:#0dad71
}
.pi3{
  background:#f1eaff;
  color:#764ddb
}

.why-section{
  padding:80px 6vw;
  background:linear-gradient(120deg,#eef6ff,#fff);
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:7vw;
  align-items:center
}
.why-visual{
  height:440px;
  border-radius:28px;
  background:radial-gradient(circle at center,#2478ed,#062b69);
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 60px #0b4b9b2d
}
.why-visual:before,.why-visual:after{
  content:"";
  position:absolute;
  border:1px solid #ffffff35;
  border-radius:50%
}
.why-visual:before{
  width:360px;
  height:360px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}
.why-visual:after{
  width:240px;
  height:240px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%)
}
.why-ring{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:170px;
  height:170px;
  border-radius:50%;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:2
}
.why-ring b{
  font-size:48px;
  color:#0865e9
}
.why-ring span{
  font-size:13px;
  color:#607089
}
.why-card{
  position:absolute;
  background:#fff;
  padding:15px 18px;
  border-radius:12px;
  box-shadow:0 13px 30px #001a3f4d;
  z-index:3
}
.why-card b,.why-card span{
  display:block
}
.why-card b{
  font-size:23px;
  color:#0865e9
}
.why-card span{
  font-size:11px;
  color:#64748a
}
.wc1{
  left:7%;
  top:12%
}
.wc2{
  right:7%;
  bottom:12%
}
.why-copy h2{
  font-size:clamp(35px,3.2vw,50px)
}
.why-copy>p{
  color:#64748a;
  line-height:1.75
}
.why-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin:30px 0
}
.why-list>div{
  display:flex;
  gap:11px
}
.why-list i{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#e7f9f1;
  color:#0ca86a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  flex:0 0 auto
}
.why-list b,.why-list small{
  display:block
}
.why-list b{
  font-size:15px
}
.why-list small{
  font-size:11px;
  color:#718096;
  letter-spacing:0;
  line-height:1.5;
  margin-top:4px
}
.call-float{
  position:fixed;
  right:20px;
  bottom:82px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#1269e8;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  box-shadow:0 9px 25px #0756b866
}
.call-float svg{
  width:25px;
  height:25px;
  fill:#fff
}

@media(max-width:900px){
  .process-grid{
  grid-template-columns:1fr 1fr
}
.why-section{
  grid-template-columns:1fr
}
.why-visual{
  height:360px
}
.hero-logo{
  left:5%;
  bottom:5%
}
.why-list{
  grid-template-columns:1fr
}

}

@media(max-width:520px){
  .process-section,.why-section{
  padding:60px 20px
}
.process-grid{
  grid-template-columns:1fr
}
.why-visual{
  height:320px
}
.why-ring{
  width:140px;
  height:140px
}
.why-ring b{
  font-size:38px
}
.hero-logo img{
  width:135px!important;
  height:40px!important
}
.hero-logo{
  padding:4px 8px
}
.call-float{
  right:15px;
  bottom:78px
}
.whatsapp{
  right:15px
}

}

/* Device branding and WhatsApp CTA */
.hero-logo{
  display:none!important
}
.device-logo{
  position:absolute;
  z-index:4;
  pointer-events:none
}
.device-logo img{
  object-fit:contain!important;
  filter:none!important;
  border-radius:0!important
}
.laptop-logo{
  left:45.5%;
  top:19%;
  transform:perspective(700px) rotate(-1deg)
}
.laptop-logo img{
  width:105px!important;
  height:30px!important
}
.mobile-logo{
  left:18.2%;
  top:38%
}
.mobile-logo img{
  width:47px!important;
  height:23px!important
}
.whatsapp-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:#16b86a!important;
  box-shadow:0 10px 24px #07965345
}
.whatsapp-cta:hover{
  background:#0fa35c!important
}
.whatsapp-cta svg{
  width:23px;
  height:23px;
  fill:#fff
}

@media(max-width:900px){
  .laptop-logo{
  left:45%;
  top:19%
}
.mobile-logo{
  left:18%;
  top:38%
}

}

@media(max-width:520px){
  .laptop-logo img{
  width:66px!important;
  height:20px!important
}
.mobile-logo img{
  width:30px!important;
  height:15px!important
}

}

/* Align device logos with the brand positions inside the mockups */
.laptop-logo{
  left:36.5%!important;
  top:18.2%!important;
  transform:perspective(700px) rotate(-1deg) scale(.78)!important;
  transform-origin:left center
}
.mobile-logo{
  left:16.8%!important;
  top:36.5%!important;
  transform:scale(.7)!important;
  transform-origin:left top
}

/* Proposal popup and service detail pages */
.proposal-modal .modal-box{
  width:min(520px,95vw)
}
.proposal-modal .modal-x{
  position:absolute;
  right:14px;
  top:10px;
  border:0;
  background:none;
  font-size:28px;
  cursor:pointer
}
.proposal-modal form{
  padding:0;
  margin-top:20px
}
.proposal-modal form button{
  background:#0966e8;
  color:#fff;
  border:0;
  border-radius:7px;
  padding:13px;
  font-weight:800
}
.hp-field{
  position:absolute!important;
  left:-9999px!important;
  opacity:0!important
}

.service-hero{
  padding:70px 6vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6vw;
  align-items:center;
  background:linear-gradient(120deg,#f8fbff,#eaf5ff)
}
.service-hero h1{
  font-size:clamp(44px,5vw,72px);
  line-height:1.05;
  margin:14px 0;
  font-weight:700
}
.service-hero p{
  font-size:18px;
  line-height:1.75;
  color:#5f6e82
}
.service-hero>img{
  width:100%;
  height:430px;
  object-fit:cover;
  border-radius:24px;
  box-shadow:0 28px 60px #0a468d30
}
.service-intro{
  padding:80px 7vw;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:7vw
}
.service-intro h2,.service-benefits h2,.service-process h2,.service-faq h2,.service-related h2{
  font-size:clamp(34px,3.5vw,50px)
}
.service-intro p{
  font-size:16px;
  line-height:1.85;
  color:#5f6e82
}
.service-intro aside{
  background:#071f43;
  color:#fff;
  border-radius:18px;
  padding:32px
}
.service-intro aside>b{
  font-size:23px
}
.service-intro ul{
  padding-left:0;
  list-style:none;
  margin-top:22px
}
.service-intro li{
  padding:12px 0;
  border-bottom:1px solid #ffffff20
}
.service-intro li:before{
  content:"✓";
  color:#29d98d;
  margin-right:10px
}
.service-benefits,.service-process,.service-related{
  padding:75px 6vw;
  text-align:center
}
.service-benefits{
  background:#f3f8ff
}
.service-benefits>div,.service-process>div{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.service-benefits article,.service-process article{
  background:#fff;
  border:1px solid #dde8f5;
  padding:28px 22px;
  border-radius:14px;
  text-align:left
}
.service-benefits i{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#e7faf2;
  color:#0baa69;
  display:grid;
  place-items:center;
  font-style:normal
}
.service-benefits h3,.service-process h3{
  font-size:20px
}
.service-benefits p,.service-process p{
  color:#69788d;
  line-height:1.65;
  font-size:14px
}
.service-process article>b{
  font-size:13px;
  color:#0865e9
}
.service-faq{
  padding:75px 7vw;
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:7vw;
  background:#fff
}
.service-faq details{
  border-bottom:1px solid #dce5f1;
  padding:20px 0
}
.service-faq summary{
  font-weight:800;
  cursor:pointer;
  font-size:17px
}
.service-faq details p{
  color:#627087;
  line-height:1.7
}
.service-related>div{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.service-related a{
  text-align:left;
  border:1px solid #dce6f3;
  border-radius:14px;
  overflow:hidden;
  padding-bottom:16px;
  transition:.25s
}
.service-related a:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 35px #0b4e9d1f
}
.service-related img{
  width:100%;
  height:200px;
  object-fit:cover
}
.service-related b,.service-related span{
  display:block;
  padding:7px 16px
}
.service-related b{
  font-size:19px
}
.service-related span{
  font-size:13px;
  color:#0966e8;
  font-weight:700
}
.service-cta{
  margin:20px 6vw 60px;
  background:linear-gradient(120deg,#064fc7,#0b73f5);
  color:#fff;
  border-radius:18px;
  padding:45px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.service-cta small{
  color:#d8e9ff
}
.service-cta h2{
  font-size:34px;
  margin:10px 0
}
.service-cta p{
  color:#dbe9ff
}
.service-cta .primary{
  white-space:nowrap;
  background:#fff;
  color:#0865e9
}

@media(max-width:900px){
  .service-hero,.service-intro,.service-faq{
  grid-template-columns:1fr
}
.service-hero{
  padding:50px 20px
}
.service-hero>img{
  height:300px
}
.service-benefits>div,.service-process>div{
  grid-template-columns:1fr 1fr
}
.service-related>div{
  grid-template-columns:1fr
}
.service-cta{
  flex-direction:column;
  align-items:flex-start;
  margin-inline:20px
}
.proposal-modal{
  z-index:300
}

}

@media(max-width:520px){
  .service-benefits,.service-process,.service-related,.service-intro,.service-faq{
  padding:55px 20px
}
.service-benefits>div,.service-process>div{
  grid-template-columns:1fr
}
.service-hero h1{
  font-size:40px
}
.service-cta{
  padding:28px 22px
}
.service-cta h2{
  font-size:28px
}

}

/* Shared navigation and inner pages */
.nav-trigger{
  height:100%;
  display:flex;
  align-items:center;
  gap:5px;
  border:0;
  background:none;
  color:inherit;
  font-weight:700;
  padding:0;
  cursor:pointer
}
.company-menu{
  position:absolute;
  top:77px;
  background:#fff;
  width:275px;
  padding:12px;
  border-radius:0 0 14px 14px;
  box-shadow:0 22px 45px #061a3d2b;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.2s
}
.company-menu a{
  display:block;
  padding:12px 14px;
  border-radius:8px;
  font-size:14px
}
.company-menu a:hover{
  background:#eef5ff;
  color:#0864ee
}
.company-group:hover .company-menu,.company-group.mobile-active .company-menu{
  opacity:1;
  visibility:visible;
  transform:none
}

.page-heading{
  text-align:center;
  padding:78px 20px 48px;
  background:linear-gradient(135deg,#fff,#edf6ff)
}
.page-heading h1,.inner-hero h1,.contact-page h1{
  font-size:clamp(42px,5vw,68px);
  line-height:1.05;
  letter-spacing:-.035em;
  margin:14px 0 20px
}
.page-heading p{
  max-width:760px;
  margin:auto;
  color:#637087;
  font-size:17px;
  line-height:1.7
}
.inner-hero{
  padding:70px 6vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:center;
  background:linear-gradient(120deg,#fff,#edf6ff)
}
.inner-hero p{
  font-size:19px;
  line-height:1.7;
  color:#637087;
  margin-bottom:30px
}
.inner-hero img{
  width:100%;
  height:390px;
  object-fit:cover;
  border-radius:24px;
  box-shadow:0 25px 60px #0b4d9c25
}
.content-grid{
  padding:70px 6vw;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px
}
.content-grid article{
  padding:34px;
  border:1px solid #dbe7f5;
  border-radius:18px;
  background:#fff
}
.content-grid article>span{
  color:#0b65e8;
  font-weight:900
}
.content-grid h2{
  font-size:27px;
  margin:12px 0
}
.content-grid p{
  color:#657188;
  line-height:1.75;
  margin:0
}
.inner-cta{
  margin:20px 6vw 70px;
  padding:38px 42px;
  border-radius:18px;
  background:linear-gradient(115deg,#0754d5,#0b72ff);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.inner-cta small{
  color:#cfe3ff
}
.inner-cta h2{
  margin:7px 0 0
}
.package-page{
  padding:30px 5vw 75px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px
}
.package-page article{
  padding:28px;
  border:1px solid #dce6f3;
  border-radius:16px;
  position:relative
}
.package-page .featured{
  border:2px solid #0b68ee;
  box-shadow:0 18px 45px #0864ee1a
}
.package-page label{
  position:absolute;
  right:14px;
  top:14px;
  background:#ff8a32;
  color:#fff;
  padding:6px 9px;
  border-radius:14px;
  font-size:11px
}
.package-page strong{
  display:block;
  color:#0864ee;
  font-size:31px;
  margin:20px 0
}
.package-page ul{
  list-style:none;
  padding:0;
  line-height:2.2;
  color:#526079;
  min-height:155px
}
.portfolio-page{
  padding:30px 5vw 80px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px
}
.portfolio-page article{
  border:1px solid #dce6f3;
  border-radius:18px;
  padding:22px;
  background:#fff;
  box-shadow:0 15px 35px #0a3b7010
}
.laptop{
  padding-top:5px
}
.laptop>div{
  height:210px;
  border:10px solid #102039;
  border-bottom-width:16px;
  border-radius:14px 14px 5px 5px;
  overflow:hidden
}
.laptop img{
  width:100%;
  height:100%;
  object-fit:cover
}
.laptop i{
  display:block;
  width:72%;
  height:10px;
  margin:auto;
  background:#cbd4df;
  clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);
  border-radius:0 0 8px 8px
}
.portfolio-page small{
  display:block;
  margin-top:22px
}
.portfolio-page h2{
  font-size:24px;
  margin:7px 0
}
.portfolio-page p{
  color:#6b7586
}
.contact-page{
  padding:75px 6vw;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:60px;
  background:linear-gradient(135deg,#fff,#edf6ff)
}
.contact-page>div>p{
  font-size:18px;
  line-height:1.7;
  color:#647188
}
.contact-details{
  display:grid;
  gap:12px;
  margin-top:30px
}
.contact-details>a,.contact-details>div{
  background:#fff;
  border:1px solid #dbe7f5;
  border-radius:12px;
  padding:17px;
  display:flex;
  flex-direction:column;
  gap:6px
}
.contact-details span{
  color:#526079
}
.contact-page form{
  background:#fff;
  padding:28px;
  border-radius:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  box-shadow:0 22px 60px #0b4d9c1b
}
.contact-page label{
  font-weight:700
}
.contact-page input,.contact-page select,.contact-page textarea{
  display:block;
  width:100%;
  margin-top:7px;
  border:1px solid #d4dfed;
  border-radius:7px;
  padding:13px
}
.contact-page textarea{
  min-height:120px
}
.contact-page .full{
  grid-column:1/-1
}
.contact-page button{
  border:0;
  background:#0864ee;
  color:#fff;
  padding:14px;
  border-radius:7px;
  font-weight:800
}

@media(max-width:900px){
  .nav-trigger{
  height:auto;
  width:100%;
  padding:15px 0;
  border-bottom:1px solid #ffffff20;
  justify-content:space-between;
  font-size:20px
}
.nav-group:not(.mobile-active) .mega,.company-group:not(.mobile-active) .company-menu{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important
}
.nav-group.mobile-active .mega{
  display:grid!important;
  opacity:1;
  visibility:visible;
  transform:none;
  background:#0c2b53;
  color:#fff;
  grid-template-columns:1fr;
  padding:10px;
  transition:none
}
.nav-group.mobile-active .company-menu{
  display:block!important;
  position:static;
  width:100%;
  opacity:1;
  visibility:visible;
  transform:none;
  background:#0c2b53;
  box-shadow:none;
  transition:none
}
.company-menu{
  display:none
}
.company-menu a{
  font-size:15px;
  border-bottom:1px solid #ffffff17
}
.mega-list a{
  font-size:15px
}
.inner-hero,.contact-page{
  grid-template-columns:1fr
}
.inner-hero{
  padding:55px 22px
}
.content-grid{
  grid-template-columns:1fr;
  padding:55px 22px
}
.package-page{
  grid-template-columns:1fr 1fr;
  padding-inline:22px
}
.portfolio-page{
  grid-template-columns:1fr 1fr;
  padding-inline:22px
}
.inner-cta{
  margin-inline:22px;
  flex-direction:column;
  align-items:flex-start;
  gap:20px
}

}

@media(max-width:520px){
  .hero h1{
  font-size:41px!important
}
.hero .actions{
  flex-direction:row!important;
  gap:8px
}
.hero .actions a{
  flex:1;
  justify-content:center;
  text-align:center;
  white-space:nowrap;
  padding:12px 8px;
  font-size:14px
}
.typing-line{
  font-size:36px!important;
  height:2.35em!important;
  line-height:1.08!important;
  margin-bottom:14px
}
.typing-line span{
  white-space:normal!important;
  width:100%!important;
  max-width:100%!important;
  border-right:0!important;
  animation:typePhraseMobile 9s ease-in-out infinite!important
}
.typing-line span:nth-child(2){
  animation-delay:3s!important
}
.typing-line span:nth-child(3){
  animation-delay:6s!important
}
@keyframes typePhraseMobile{
  0%{
  opacity:0;
  transform:translateY(10px)
}
7%,28%{
  opacity:1;
  transform:none
}
33%,100%{
  opacity:0;
  transform:translateY(-8px)
}

}
.services h2{
  font-size:30px!important;
  line-height:1.18
}
.services h2 br{
  display:none
}
.package-page,.portfolio-page{
  grid-template-columns:1fr
}
.contact-page{
  padding:55px 20px
}
.contact-page form{
  grid-template-columns:1fr;
  padding:20px
}
.contact-page label{
  grid-column:1/-1
}
.inner-hero img{
  height:260px
}
.inner-cta{
  padding:28px 22px
}
.laptop>div{
  height:190px
}

}

.typing-line.live-typing{
  height:1.18em
}
.typing-line.live-typing span{
  position:static!important;
  display:inline!important;
  width:auto!important;
  max-width:100%!important;
  opacity:1!important;
  animation:none!important;
  white-space:nowrap;
  border-right:3px solid var(--blue);
  padding-right:4px
}

@media(max-width:520px){
  .typing-line.live-typing{
  font-size:clamp(28px,8.4vw,35px)!important;
  min-height:2.22em!important;
  height:auto!important;
  line-height:1.08!important;
  overflow:visible
}
.typing-line.live-typing span{
  white-space:normal!important;
  overflow-wrap:normal;
  word-break:normal;
  animation:none!important;
  opacity:1!important
}

}

/* ==================== SERVICE CATEGORY PAGES ==================== */
.category-heading{
  padding-bottom:45px
}

.category-services-page{
  padding:55px 5vw 80px;
  background:#f5f9ff
}

.category-services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  max-width:1450px;
  margin:auto
}

.category-service-card{
  background:#fff;
  border:1px solid #dce7f5;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 15px 40px #0b4b9512;
  transition:transform .25s,box-shadow .25s
}

.category-service-card:hover{
  transform:translateY(-7px);
  box-shadow:0 22px 50px #0b4b9524
}

.category-service-image{
  width:100%;
  height:220px;
  background-repeat:no-repeat;
  background-color:#e9f2ff
}

.category-service-image.thumb-web{
  background-image:url('/assets/web-services-grid.jpg');
  background-size:400% 300%
}

.category-service-image.thumb-digital{
  background-image:url('/assets/digital-services-grid.jpg');
  background-size:400% 300%
}

.category-service-image.thumb-brand{
  background-image:url('/assets/branding-services-grid.jpg');
  background-size:400% 200%
}

.category-service-content{
  padding:24px
}

.category-service-content h2{
  font-size:24px;
  margin:0 0 12px
}

.category-service-content p{
  color:#627087;
  line-height:1.7;
  min-height:78px;
  margin:0 0 18px
}

.category-service-content a{
  color:#0864ee;
  font-weight:800;
  display:inline-flex;
  transition:transform .2s
}

.category-service-content a:hover{
  transform:translateX(6px);
  color:#ff762b
}

@media(max-width:950px){
  .category-services-grid{
  grid-template-columns:repeat(2,1fr)
}

}

@media(max-width:580px){
  .category-services-page{
  padding:40px 20px 65px
}
.category-services-grid{
  grid-template-columns:1fr
}
.category-service-image{
  height:210px
}
.category-service-content p{
  min-height:0
}

}