:root {
   --navy: #071d3d;
   --navy2: #0b3262;
   --orange: #ff7200;
   --orange2: #ff8a18;
   --ink: #0b1d3b;
   --muted: #111;
   --pale: #f2f7ff;
   --line: #e7edf5;
   --white: #fff;
   --shadow: 0 12px 35px rgba(7, 29, 61, .08)
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 88px
}

body {
   margin: 0;
   font-family: Montserrat, Arial, sans-serif;
   color: var(--ink);
   background: #fff;
   line-height: 1.55
}

a {
   color: inherit;
   text-decoration: none;
   font-size:15px;
}

button,
input,
select,
textarea {
   font: inherit
}

.container {
   width: min(1180px, calc(100% - 44px));
   margin-inline: auto
}

.site-header {
   height: 78px;
   background: #fff;
   position: sticky;
   top: 0;
   z-index: 1000;
   box-shadow: 0 3px 18px rgba(6, 28, 59, .08)
}

.nav-wrap {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px
}

.brand {
   display: flex;
   align-items: center;
   gap: 9px;
   min-width: 220px
}

.brand-mark {
   width: 48px;
   height: 46px;
   border-radius: 12px 18px 12px 18px;
   background: linear-gradient(135deg, var(--orange) 0 36%, var(--navy2) 37% 100%);
   display: grid;
   place-items: center;
   position: relative;
   color: white;
   font-weight: 900;
   font-size: 22px;
   letter-spacing: -4px;
   box-shadow: inset 0 0 0 3px white
}

.brand-mark span {
   position: absolute;
   left: 8px;
   top: 5px;
   color: #fff
}

.brand-mark b {
   position: absolute;
   right: 7px;
   bottom: 3px;
   color: #fff
}

.brand-mark i {
   position: absolute;
   font-style: normal;
   color: var(--orange);
   right: -3px;
   top: -9px;
   font-size: 22px;
   text-shadow: 0 1px white
}

.brand-copy {
   display: flex;
   flex-direction: column;
   line-height: 1.05
}

.brand-copy strong {
   font-size: 17px;
   font-weight: 900;
   letter-spacing: -.7px;
   white-space: nowrap
}

.brand-copy em {
   font-style: normal;
   color: var(--orange)
}

.brand-copy small {
   font-size: 6.5px;
   font-weight: 800;
   letter-spacing: .5px;
   margin-top: 5px;
   white-space: nowrap
}

.main-nav {
   display: flex;
   align-items: center;
   gap: 22px;
   font-size: 12px;
   font-weight: 650
}

.main-nav>a:not(.btn):hover,
.main-nav>a.active {
   color: var(--orange)
}

.nav-phone {
   border: 1px solid #d9e2ef;
   padding: 10px 13px;
   border-radius: 30px;
   white-space: nowrap
}

.btn {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   border: 0;
   border-radius: 28px;
   padding: 14px 23px;
   background: linear-gradient(110deg, var(--orange), #ff5100);
   color: #fff;
   font-size: 13px;
   font-weight: 800;
   box-shadow: 0 7px 18px rgba(255, 105, 0, .2);
   transition: transform .2s, box-shadow .2s;
   cursor: pointer
}

.btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 22px rgba(255, 105, 0, .3)
}

.btn-small {
   padding: 11px 15px;
   font-size: 11px;
   white-space: nowrap
}

.menu-toggle {
   display: none;
   background: none;
   border: 0;
   padding: 8px
}

.menu-toggle span {
   width: 24px;
   height: 2px;
   background: var(--navy);
   display: block;
   margin: 5px
}

.hero {
   /* background: radial-gradient(ellipse at 75% 40%, #0e467d 0, #08264d 38%, #061832 72%); */
   background-image: url("./image/hero-bg.webp");
   background-size: cover;
   color: #fff;
   position: relative;
   overflow: hidden;
   min-height: 435px
}

/* .hero:after {
   content: "";
   position: absolute;
   right: -5%;
   bottom: -90px;
   width: 60%;
   height: 170px;
   background: linear-gradient(110deg, #ff8d20, #ffb45c);
   transform: rotate(-8deg);
   border-radius: 50% 0 0 0;
   opacity: .95
} */

/* .hero-glow {
   position: absolute;
   width: 480px;
   height: 480px;
   border: 1px solid rgba(255, 255, 255, .06);
   border-radius: 50%;
   right: 5%;
   top: -150px;
   box-shadow: 0 0 0 55px rgba(255, 255, 255, .025), 0 0 0 110px rgba(255, 255, 255, .018)
} */

.hero-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   min-height: 435px;
   position: relative;
   z-index: 1
}

.hero-content {
   padding: 42px 0 36px;
   position: relative;
   z-index: 3
}

.eyebrow-pill {
   display: inline-block;
   background: var(--orange);
   padding: 7px 15px;
   border-radius: 30px;
   font-size: 10px;
   letter-spacing: .45px;
   font-weight: 850;
   margin-bottom: 15px
}

.hero h1 {
   font-size: clamp(34px, 4.2vw, 54px);
   line-height: 1.08;
   letter-spacing: -2px;
   margin: 0 0 18px;
   font-weight: 700
}

.hero h1 span {
   color: var(--orange)
}

.hero-content>p {
   font-size: 15px;
   max-width: 510px;
   color: #e1e9f4;
   margin: 0 0 23px
}

.hero-actions {
   display: flex;
   gap: 13px;
   flex-wrap: wrap
}

.btn-outline {
   background: transparent;
   border: 1px solid #c7d6e9;
   box-shadow: none
}

.btn-outline:hover {
   background: #fff;
   color: var(--navy)
}

.hero-stats {
   display: flex;
   gap: 25px;
   margin-top: 27px
}

.hero-stats div {
   display: flex;
   flex-direction: column;
   border-right: 1px solid rgba(255, 255, 255, .15);
   padding-right: 25px
}

.hero-stats div:last-child {
   border: 0
}

.hero-stats b {
   font-size: 18px;
   color: #ffb638
}

.hero-stats small {
   font-size: 10px;
   color: #d6dfeb
}

.hero-art {
   height: 400px;
   position: relative;
   z-index: 2
}

.person-card {
   position: absolute;
   bottom: 0;
   left: 24%;
   width: 48%;
   height: 315px;
   z-index: 2
}

.person-head {
   position: absolute;
   left: 38%;
   top: 9px;
   width: 92px;
   height: 105px;
   background: linear-gradient(100deg, #d9a37b, #f4c39c 45%, #a96e4e);
   border-radius: 48% 48% 42% 42%;
   box-shadow: inset -13px -3px 0 rgba(83, 43, 31, .18)
}

.person-head:before {
   content: "";
   position: absolute;
   top: -12px;
   left: -4px;
   width: 100px;
   height: 50px;
   border-radius: 50% 50% 18% 18%;
   background: #1d2531;
   transform: rotate(-8deg)
}

.person-head:after {
   content: "";
   position: absolute;
   top: 48px;
   left: 18px;
   width: 56px;
   height: 7px;
   border-top: 3px solid #26394c;
   border-bottom: 2px solid #26394c;
   border-radius: 50%
}

.person-body {
   position: absolute;
   top: 102px;
   left: 14%;
   width: 80%;
   height: 175px;
   background: linear-gradient(120deg, #1672a5, #075081 60%, #05294b);
   border-radius: 55px 55px 0 0;
   transform: skew(-5deg);
   box-shadow: inset -20px 0 rgba(0, 0, 0, .1)
}

.person-body:before {
   content: "";
   position: absolute;
   top: 0;
   left: 38%;
   height: 100%;
   width: 2px;
   background: rgba(255, 255, 255, .12)
}

.laptop {
   position: absolute;
   bottom: 8px;
   left: 0;
   width: 100%;
   height: 95px;
   background: linear-gradient(140deg, #e6ebf0, #8e9aa8);
   border: 5px solid #596979;
   border-radius: 8px 8px 3px 3px;
   transform: perspective(300px) rotateX(-3deg);
   display: grid;
   place-items: center;
   box-shadow: 0 12px 20px #06172d
}

.laptop:after {
   content: "";
   position: absolute;
   width: 115%;
   height: 11px;
   bottom: -14px;
   background: #aeb8c3;
   clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
   border-radius: 0 0 8px 8px
}

.laptop-logo {
   background: var(--navy);
   color: var(--orange);
   font-weight: 900;
   padding: 7px 10px;
   border-radius: 8px
}

.chart-card,
.sales-card {
   position: absolute;
   z-index: 4;
   background: #fff;
   color: var(--navy);
   border-radius: 13px;
   padding: 15px 17px;
   box-shadow: 0 10px 35px rgba(0, 0, 0, .2);
   min-width: 145px
}

.chart-card small,
.sales-card small {
   display: block;
   font-size: 10px;
   color: #43526a
}

.chart-card strong,
.sales-card strong {
   display: block;
   font-size: 22px;
   line-height: 1.3
}

.traffic {
   left: 1%;
   top: 45px
}

.leads {
   left: 0;
   top: 175px
}

.bars {
   display: flex;
   align-items: end;
   gap: 5px;
   height: 27px;
   margin-top: 6px
}

.bars i {
   width: 10px;
   background: #23b66d;
   border-radius: 3px 3px 0 0;
   height: 30%
}

.bars i:nth-child(2) {
   height: 48%
}

.bars i:nth-child(3) {
   height: 68%
}

.bars i:nth-child(4) {
   height: 100%
}

.bars.orange i {
   background: var(--orange)
}

.chart-card>span {
   position: absolute;
   right: 15px;
   top: 22px;
   color: #20b96a;
   font-size: 30px
}

.growth-orbit {
   position: absolute;
   right: 0;
   top: 35px;
   color: #fff;
   z-index: 3;
   text-align: center;
   font-weight: 800;
   font-size: 11px;
   transform: rotate(7deg)
}

.orbit-arrow {
   display: block;
   font-size: 95px;
   line-height: .9;
   color: var(--orange);
   text-shadow: 0 4px 10px #041b35
}

.orbit-label {
   display: block;
   margin-top: 5px
}

.sales-card {
   right: 0;
   top: 180px
}

.mini-chart {
   color: #2088e8;
   font-size: 27px;
   letter-spacing: 3px;
   white-space: nowrap
}

.hero-swoosh {
   position: absolute;
   right: -30px;
   bottom: 15px;
   width: 160px;
   height: 90px;
   border-top: 4px solid var(--orange);
   border-radius: 50%;
   transform: rotate(-25deg)
}

.section {
   padding: 62px 0
}

.section-heading {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 35px;
   margin-bottom: 26px
}

.kicker {
   display: block;
   color: var(--orange);
   font-size: 11px;
   font-weight: 900;
   letter-spacing: .8px;
   margin-bottom: 7px
}

.section h2,
.section-heading h2 {
   font-size: clamp(27px, 3vw, 37px);
   line-height: 1.15;
   letter-spacing: -1.2px;
   margin: 0;
   font-weight: 700
}

.section h2 span,
.section-heading h2 span {
   color: var(--orange)
}

.section-heading>p {
   max-width: 440px;
   color: var(--muted);
   font-size: 13px;
   margin: 0 0 4px
}

.service-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px
}

.service-card {
   padding: 22px 19px 20px;
   border: 1px solid #edf1f7;
   border-radius: 15px;
   text-align: center;
   background: #fff;
   box-shadow: 0 6px 22px rgba(10, 39, 75, .045);
   transition: transform .22s, box-shadow .22s
}

.service-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow)
}

.service-icon {
   width: 64px;
   height: 60px;
   margin: 0 auto 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--orange);
   font-size: 36px;
   font-weight: 900;
   position: relative
}

.service-icon b {
   font-size: 13px;
   position: absolute;
   color: var(--navy);
   background: #fff;
   border: 2px solid var(--navy2);
   border-radius: 50%;
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center
}

.social-icon {
   gap: 3px
}

.social-icon b {
   position: static;
   width: 31px;
   height: 31px;
   border: 0;
   background: #0877d5;
   color: white;
   font-size: 18px
}

.social-icon b:nth-child(2) {
   background: #e94286
}

.social-icon b:nth-child(3) {
   background: #0877a9;
   font-size: 12px
}

.youtube-icon {
   width: 56px;
   height: 39px;
   border-radius: 12px;
   background: #ff1737;
   color: white;
   font-size: 24px;
   margin-top: 10px;
   margin-bottom: 23px
}

.service-card h3 {
   font-size: 18px;
   margin: 0 0 2px;
   font-weight: 600;
}

.service-card>small {
   font-size: 10px;
   font-weight: 650;
   color: #4f5b6e
}

.service-card p {
   font-size: 12px;
   color: var(--muted);
   min-height: 52px;
   margin: 12px 0
}

.learn-link {
   font-size: 11px;
   font-weight: 800;
   color: var(--orange)
}

.portfolio-section {
   background: linear-gradient(120deg, #f1f7ff, #fff 55%, #eaf4ff)
}

.portfolio-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 17px
}

.project-card {
   background: #fff;
   border: 1px solid #e8eef6;
   border-radius: 13px;
   overflow: hidden;
   box-shadow: 0 7px 22px rgba(10, 39, 75, .06)
}

.project-preview {
   height: 175px;
   padding: 22px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   color: white;
   position: relative;
   overflow: hidden
}

.project-preview:after {
   content: "";
   position: absolute;
   width: 170px;
   height: 170px;
   border: 1px solid rgba(255, 255, 255, .22);
   border-radius: 50%;
   right: -35px;
   bottom: -65px;
   box-shadow: 0 0 0 20px rgba(255, 255, 255, .04), 0 0 0 40px rgba(255, 255, 255, .035)
}

.project-preview span {
   font-size: 10px;
   font-weight: 900;
   letter-spacing: 2px;
   margin-bottom: 12px
}

.project-preview b {
   font-size: 25px;
   line-height: 1.12;
   letter-spacing: -.8px;
   z-index: 1
}

.project-preview i {
   font-style: normal;
   font-size: 10px;
   margin-top: 18px;
   z-index: 1
}

.preview-fashion {
   background: linear-gradient(135deg, #f7d8cb, #8b4752 70%, #271b30)
}

.preview-corporate {
   background: linear-gradient(135deg, #0e4b82, #0a1a36)
}

.preview-app {
   background: linear-gradient(135deg, #ffb66c, #e75b1a 60%, #132d54);
   align-items: center
}

.preview-app b {
   align-self: flex-start
}

.phone-mock {
   position: absolute;
   right: 20px;
   top: 22px;
   width: 62px;
   height: 120px;
   background: #071d3d;
   border: 4px solid #f4f5f8;
   border-radius: 12px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6px;
   padding: 14px 6px 8px
}

.phone-mock span {
   background: #ff8b1b;
   border-radius: 4px
}

.preview-food {
   background: linear-gradient(135deg, #111, #3b1b0b 60%, #ff6b00)
}

.preview-food b {
   color: #ff9b27
}

.project-meta {
   padding: 14px 15px
}

.project-meta h3 {
   font-size: 18px;
   margin: 0 0 3px
}

.project-meta p {
   font-size: 11px;
   color: var(--muted);
   margin: 0
}

.portfolio-note {
   font-size: 10px;
   color: #111;
   margin: 13px 0 0
}

.tech-section {
   background: #f6f9ff
}

.section-intro {
   font-size: 13px;
   color: var(--muted);
   margin: 9px 0 24px
}

.tech-grid {
   display: grid;
   grid-template-columns: repeat(9, 1fr);
   gap: 12px
}

.tech-card {
   background: #fff;
   border: 1px solid #e8edf5;
   border-radius: 12px;
   padding: 17px 8px 13px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 9px;
   box-shadow: 0 5px 15px rgba(10, 39, 75, .04)
}

.tech-card>b {
   height: 45px;
   display: grid;
   place-items: center;
   font-size: 29px;
   font-weight: 900
}

.tech-card strong {
   font-size: 11px
}

.html-logo {
   color: #e95420
}

.css-logo {
   color: #1572b6
}

.react-logo {
   color: #28b8d7
}

.node-logo {
   font-size: 18px !important;
   color: #438c4b;
   border: 3px solid #438c4b;
   border-radius: 50%;
   width: 42px;
   height: 42px
}

.dotnet-logo {
   font-size: 22px !important;
   color: #1574c4;
   font-style: italic
}

.next-logo {
   background: #111;
   color: white;
   width: 40px;
   border-radius: 50%;
   font-size: 25px !important
}

.php-logo {
   color: #6379ad;
   font-style: italic
}

.laravel-logo {
   color: #f13c35;
   font-size: 37px !important
}

.wp-logo {
   color: #22749a;
   border: 3px solid #22749a;
   border-radius: 50%;
   width: 42px
}

.about-section {
   background: #fff
}

.strength-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 17px;
   margin-top: 29px
}

.strength-grid article {
   display: flex;
   align-items: center;
   gap: 13px
}

.strength-icon {
   flex: 0 0 56px;
   width: 56px;
   height: 56px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: linear-gradient(135deg, #ff9a24, #ff5d00);
   color: #fff;
   font-size: 27px;
   font-weight: 900;
   box-shadow: 0 8px 18px rgba(255, 112, 0, .2)
}

.strength-grid h3 {
   font-size: 18px;
   margin: 0 0 3px
}

.strength-grid p {
   font-size: 11px;
   color: var(--muted);
   margin: 0
}

.contact-section {
   background: linear-gradient(120deg, #f1f7ff, #fff 60%, #fff0e4)
}

.contact-layout {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 55px;
   align-items: start
}

.contact-copy {
   box-shadow: 0 12px 35px rgba(7, 29, 61, .08);
    border-radius: 18px;
    padding: 28px;
    background: #fff;
    min-height: 535px;
    border: 1px solid #e7edf6;
}

.contact-copy>p {
   color: var(--muted);
   font-size: 14px;
   max-width: 420px
}

.contact-details {
   display: grid;
   gap: 13px;
   margin-top: 27px
}

.contact-details>a,
.contact-details>div {
   display: flex;
   align-items: center;
   gap: 13px
}

.contact-details>a>span,
.contact-details>div>span {
   display: grid;
   place-items: center;
   width: 43px;
   height: 43px;
   border-radius: 12px;
   background: var(--orange);
   color: #fff;
   font-size: 20px
}

.contact-details small,
.contact-details b {
   display: block
}

.contact-details small {
   font-size: 11px;
   color: var(--muted)
}

.contact-details b {
   font-size: 13px
}

.enquiry-form {
   background: #fff;
   border: 1px solid #e7edf6;
   padding: 28px;
   border-radius: 18px;
   box-shadow: var(--shadow)
}

.enquiry-form h3 {
   font-size: 21px;
   margin: 0 0 3px
}

.enquiry-form>p {
   font-size: 11px;
   color: var(--muted);
   margin: 0 0 19px
}

.form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px
}

.form-grid label {
   font-size: 11px;
   font-weight: 750;
   color: #34415a;
   display: flex;
   flex-direction: column;
   gap: 7px
}

.form-grid input,
.form-grid select,
.form-grid textarea {
   width: 100%;
   border: 1px solid #dce4ef;
   border-radius: 9px;
   background: #fbfcff;
   padding: 12px 13px;
   font-size: 12px;
   color: var(--ink);
   outline: none;
   transition: border .2s, box-shadow .2s
}

.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
   border-color: var(--orange);
   box-shadow: 0 0 0 3px rgba(255, 114, 0, .1)
}

.form-grid textarea {
   resize: vertical;
   min-height: 105px
}

.full-field {
   grid-column: 1/-1
}

.form-submit {
   width: 100%;
   margin-top: 16px
}

.form-status {
   font-size: 12px;
   font-weight: 700;
   margin-top: 10px;
   color: #157245
}

.form-disclaimer {
   display: block;
   font-size: 10px;
   color: #7a8597;
   margin-top: 12px
}

.final-cta {
   background: linear-gradient(110deg, #06172f, #092c55);
   color: #fff;
   padding: 35px 0;
   position: relative;
   overflow: hidden
}

.final-cta:after {
   content: "↗";
   position: absolute;
   right: 7%;
   top: -42px;
   font-size: 180px;
   color: rgba(255, 114, 0, .18);
   font-weight: 900
}

.cta-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px;
   position: relative;
   z-index: 1
}

.cta-inner h2 {
   font-size: clamp(24px, 3vw, 35px);
   line-height: 1.2;
   letter-spacing: -1px;
   margin: 0 0 7px
}

.cta-inner h2 span {
   color: var(--orange)
}

.cta-inner p {
   margin: 0;
   color: #d2deed;
   font-size: 13px
}

.site-footer {
   background: #04142a;
   color: #fff;
   padding: 42px 0 0
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.45fr .8fr 1.1fr 1.2fr;
   gap: 40px;
   padding-bottom: 35px
}

.brand-footer {
   min-width: 0
}

.footer-about>p {
   font-size: 12px;
   color: #c5d0df;
   max-width: 290px;
   margin: 17px 0
}

.footer-grid h3 {
   font-size: 16px;
   margin: 4px 0 16px
}

.footer-grid>div:not(.footer-about)>a {
   display: block;
   font-size: 15px;
   color: #c5d0df;
   margin: 8px 0
}

.footer-grid a:hover {
   color: var(--orange)
}

.social-links {
   display: flex;
   gap: 9px
}

.social-links a {
   display: grid;
   place-items: center;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: #0c3c6a;
   color: #fff;
   font-weight: 800;
   font-size: 12px
}

.footer-contact>a {
   display: flex !important;
   gap: 10px;
   align-items: center
}

.footer-contact>a,
.footer-contact p {
   color: #ffb333 !important
}

.footer-contact span {
   color: #d0d9e7
}

.footer-contact p {
   font-size: 11px;
   display: flex;
   gap: 10px
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .15);
   padding: 16px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #aebbd0;
   font-size: 10px
}

.footer-bottom p {
   margin: 0
}

.footer-bottom div {
   display: flex;
   gap: 18px
}

.floating-contact {
   position: fixed;
   left: 0;
   top: 38%;
   z-index: 900;
   display: flex;
   flex-direction: column;
   gap: 7px
}

.floating-contact a {
   display: flex;
   align-items: center;
   gap: 8px;
   color: #fff;
   padding: 11px 10px;
   border-radius: 0 9px 9px 0;
   box-shadow: 0 5px 15px rgba(0, 0, 0, .18);
   font-size: 10px;
   font-weight: 800;
   writing-mode: horizontal-tb;
   transition: padding .2s
}

.floating-contact a:hover {
   padding-right: 17px
}

.floating-contact b {
   font-size: 18px
}

.float-whatsapp {
   background: #13b75a
}

.float-call {
   background: var(--orange)
}

.back-to-top {
   position: fixed;
   bottom: 22px;
   right: 22px;
   width: 42px;
   height: 42px;
   border: 0;
   border-radius: 50%;
   background: var(--orange);
   color: #fff;
   font-size: 23px;
   box-shadow: var(--shadow);
   cursor: pointer;
   opacity: 0;
   pointer-events: none;
   transition: opacity .2s;
   z-index: 800
}

.back-to-top.visible {
   opacity: 1;
   pointer-events: auto
}

@media(max-width:1050px) {
   .main-nav {
      gap: 13px
   }

   .main-nav {
      font-size: 11px
   }

   .brand {
      min-width: 200px
   }

   .brand-copy strong {
      font-size: 15px
   }

   .nav-phone {
      display: none
   }

   .hero-art {
      transform: scale(.92);
      transform-origin: center right
   }

   .tech-grid {
      grid-template-columns: repeat(5, 1fr)
   }

   .portfolio-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:760px) {
   .container {
      width: min(100% - 32px, 560px)
   }

   .site-header {
      height: 70px
   }

   .brand {
      min-width: 0
   }

   .brand-mark {
      width: 42px;
      height: 42px
   }

   .brand-copy strong {
      font-size: 14px
   }

   .brand-copy small {
      font-size: 5.5px
   }

   .menu-toggle {
      display: block;
      z-index: 1002
   }

   .main-nav {
      position: absolute;
      top: 70px;
      left: 0;
      right: 0;
      background: #fff;
      display: none;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 12px 22px 22px;
      box-shadow: 0 12px 20px rgba(7, 29, 61, .12)
   }

   .main-nav.open {
      display: flex
   }

   .main-nav>a:not(.btn) {
      padding: 12px 4px;
      border-bottom: 1px solid #eef1f6;
      font-size: 13px
   }

   .main-nav .btn {
      margin-top: 12px
   }

   .hero-grid {
      grid-template-columns: 1fr;
      min-height: 0
   }

   .hero-content {
      padding: 42px 0 18px
   }

   .hero h1 {
      font-size: clamp(35px, 9vw, 48px);
      letter-spacing: -1.5px
   }

   .hero-content>p {
      font-size: 13px
   }

   .hero-stats {
      gap: 15px;
      margin-top: 22px
   }

   .hero-stats div {
      padding-right: 14px
   }

   .hero-stats b {
      font-size: 16px
   }

   .hero-stats small {
      font-size: 9px
   }

   .hero-art {
      height: 280px;
      transform: scale(.8);
      transform-origin: top center;
      margin: 0 -55px -45px
   }

   .person-card {
      left: 25%;
      height: 275px
   }

   .person-head {
      transform: scale(.8);
      transform-origin: top left
   }

   .person-body {
      height: 135px
   }

   .laptop {
      height: 75px
   }

   .traffic {
      left: 3%;
      top: 28px
   }

   .leads {
      left: 2%;
      top: 135px
   }

   .sales-card {
      right: 2%;
      top: 145px
   }

   .growth-orbit {
      right: 3%;
      top: 15px
   }

   .hero:after {
      width: 100%;
      bottom: -130px
   }

   .section {
      padding: 46px 0
   }

   .section-heading {
      display: block;
      margin-bottom: 22px
   }

   .section-heading>p {
      margin-top: 12px
   }

   .section h2,
   .section-heading h2 {
      font-size: 29px
   }

   .service-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 11px
   }

   .service-card {
      padding: 17px 11px
   }

   .service-card h3 {
      font-size: 13px
   }

   .service-card p {
      font-size: 11px;
      min-height: 68px
   }

   .service-card>small {
      font-size: 9px
   }

   .service-icon {
      transform: scale(.9);
      margin-bottom: 8px
   }

   .portfolio-grid {
      grid-template-columns: 1fr 1fr;
      gap: 11px
   }

   .project-preview {
      height: 140px;
      padding: 14px
   }

   .project-preview b {
      font-size: 20px
   }

   .project-meta {
      padding: 11px
   }

   .project-meta h3 {
      font-size: 11px
   }

   .project-meta p {
      font-size: 9px
   }

   .tech-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 9px
   }

   .tech-card {
      padding: 13px 5px
   }

   .tech-card strong {
      font-size: 10px
   }

   .strength-grid {
      grid-template-columns: 1fr 1fr;
      gap: 20px 12px
   }

   .strength-grid article {
      align-items: flex-start;
      gap: 10px
   }

   .strength-icon {
      flex-basis: 43px;
      width: 43px;
      height: 43px;
      font-size: 21px
   }

   .strength-grid h3 {
      font-size: 12px
   }

   .strength-grid p {
      font-size: 10px
   }

   .contact-layout {
      grid-template-columns: 1fr;
      gap: 27px
   }

   .contact-copy {
      padding-top: 0
   }

   .contact-details {
      grid-template-columns: 1fr;
      gap: 12px
   }

   .enquiry-form {
      padding: 21px 16px
   }

   .enquiry-form h3 {
      font-size: 19px
   }

   .form-grid {
      gap: 12px
   }

   .form-grid input,
   .form-grid select,
   .form-grid textarea {
      padding: 11px 9px;
      font-size: 11px
   }

   .cta-inner {
      align-items: flex-start;
      flex-direction: column
   }

   .cta-inner .btn {
      width: 100%
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 28px 20px
   }

   .footer-about {
      grid-column: 1/-1
   }

   .footer-about>p {
      max-width: 440px
   }

   .footer-bottom {
      align-items: flex-start;
      gap: 12px;
      flex-direction: column
   }

   .floating-contact a {
      padding: 9px 8px
   }

   .floating-contact span {
      display: none
   }

   .floating-contact b {
      font-size: 20px
   }

   .back-to-top {
      right: 13px;
      bottom: 14px
   }
}

@media(max-width:390px) {
   .container {
      width: calc(100% - 24px)
   }

   .brand-copy strong {
      font-size: 12px
   }

   .brand-copy small {
      font-size: 5px
   }

   .hero-actions .btn {
      width: 100%
   }

   .hero-art {
      transform: scale(.68);
      margin-left: -65px;
      margin-right: -65px;
      margin-bottom: -80px
   }

   .service-grid {
      grid-template-columns: 1fr 1fr
   }

   .service-card p {
      min-height: 84px
   }

   .portfolio-grid {
      grid-template-columns: 1fr
   }

   .project-preview {
      height: 165px
   }

   .strength-grid {
      grid-template-columns: 1fr
   }

   .form-grid {
      grid-template-columns: 1fr
   }

   .full-field {
      grid-column: auto
   }

   .footer-grid {
      grid-template-columns: 1fr
   }

   .footer-about {
      grid-column: auto
   }

   .footer-bottom div {
      flex-wrap: wrap
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   *,
   *:before,
   *:after {
      transition: none !important;
      animation: none !important
   }
}


/* CDN photography for a more visual, polished landing page */
.hero-art {
   isolation: isolate
}

.hero-photo {
   position: absolute;
   z-index: 0;
   right: 8%;
   bottom: 0;
   width: 64%;
   height: 92%;
   object-fit: cover;
   object-position: center 25%;
   border-radius: 48% 48% 0 0 / 38% 38% 0 0;
   opacity: .92;
   mix-blend-mode: screen;
   mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
   -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%)
}

.chart-card,
.growth-orbit,
.sales-card,
.hero-swoosh {
   z-index: 2
}

.project-preview {
   background-size: cover;
   background-position: center;
   position: relative;
   isolation: isolate;
   overflow: hidden
}

.project-preview:before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(110deg, rgba(4, 20, 42, .78), rgba(4, 20, 42, .12))
}

.preview-fashion {
   background-image: url('https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=900&q=80')
}

.preview-corporate {
   background-image: url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80')
}

.preview-app {
   background-image: url('https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&w=900&q=80')
}

.preview-food {
   background-image: url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=900&q=80')
}

.project-preview>* {
   position: relative;
   z-index: 1
}

@media(max-width:760px) {
   .hero-photo {
      right: 8%;
      width: 75%;
      height: 90%;
      opacity: .72
   }

   .chart-card,
   .growth-orbit,
   .sales-card {
      z-index: 3
   }
}


/* Brand typography: Montserrat complements the bold geometric logo.
   All paragraph text uses the requested 15px size on desktop and mobile. */
body,
button,
input,
select,
textarea {
   font-family: 'Montserrat', Arial, sans-serif;
}

p {
   font-size: 15px !important;
}

/* Added reference-design sections. Existing styles above are preserved. */
.testimonials-section { background: linear-gradient(135deg, #fff 0%, #f3f8ff 100%); }
.testimonial-heading { text-align: center; max-width: 700px; margin: 0 auto 28px; }
.testimonial-heading h2 { margin: 7px 0 9px; color: var(--navy, #08284f); }
.testimonial-heading h2 span { color: var(--orange, #ff7200); }
.testimonial-heading p { margin: 0; font-size: 15px; color: #111; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.testimonial-card { background: #fff; border: 1px solid #e7edf5; border-radius: 15px; padding: 22px; box-shadow: 0 8px 26px rgba(8, 40, 79, .06); }
.testimonial-person { display: flex; align-items: center; gap: 12px; }
.testimonial-person img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid #fff0e4; }
.testimonial-person h3 { margin: 0 0 4px; color: var(--navy, #08284f); font-size: 15px; }
.testimonial-person small { color: #667085; font-size: 12px; }
.testimonial-stars { margin: 14px 0 8px; color: #f5a623; letter-spacing: 3px; font-size: 17px; }
.testimonial-card blockquote { margin: 0; color: #111; font-size: 15px; line-height: 1.75; }
.testimonial-note { margin: 18px 0 0; text-align: center; color: #111; font-size: 12px; }
.footer-map { display: block; margin-top: 12px; overflow: hidden; border-radius: 8px; background: #eef4fa; text-decoration: none; }
.footer-map img { display: block; width: 100%; height: 105px; object-fit: cover; }
.footer-map span { display: block; padding: 10px 12px; color: var(--navy, #08284f); font-size: 12px; font-weight: 700; }
.footer-map.map-fallback { background: linear-gradient(135deg, #e9f2fc, #fff2e8); border: 1px solid #dce6f2; }
@media(max-width:900px) { .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:600px) { .testimonial-grid { grid-template-columns: 1fr; } .testimonial-card { padding: 18px; } .testimonial-heading { margin-bottom: 20px; } }