/*------------------------------------------------------------------
    [Table of contents]

    1. IMPORT FONTS
    2. IMPORT FILES
    3. SKELETON
    4. WP CORE
    5. HEADER
    6. SECTIONS
    7. SECTIONS
    8. PORTFOLIO
    9. TESTIMONIALS
    10. PRICING TABLES
    11. ICON BOXES
    12. MESSAGE BOXES
    13. FEATURES
    14. CONTACT
    15. FOOTER
    16. MISC
    17. BUTTONS
-------------------------------------------------------------------*/


/*------------------------------------------------------------------
    IMPORT FONTS
-------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i');

/*------------------------------------------------------------------
    IMPORT FILES
-------------------------------------------------------------------*/

@import url(css/animate.css);
@import url(css/animate.min.css);
@import url(css/pr_loading.css);
@import url(css/bootstrap-touch-slider.css);
@import url(css/flaticon.css);
@import url(css/prettyPhoto.css);
@import url(css/owl.carousel.css);
@import url(css/font-awesome.min.css);

/*------------------------------------------------------------------
    SKELETON
-------------------------------------------------------------------*/
@media (max-width: 1200px) {
    .header_style_01 .navbar-default .navbar-nav > li a {
    text-color: white;
}
}
@media (max-width: 1000px) {
    .header_style_01 .navbar-default .navbar-nav > li a {
        padding: 10px 5px;
		color:#fff;
    }
}
body {
    color: #999;
    font-size: 15px;
    font-family: 'PT Sans', sans-serif;
    line-height: 1.80857;
}

body.demos .section {
    background: url(images/bg.png) repeat top center #f2f3f5;
}

body.demos .section-title img {
    max-width: 280px;
    display: block;
    margin: 10px auto;
}

body.demos .service-widget h3 {
    border-bottom: 1px solid #ededed;
    font-size: 18px;
    padding: 20px 0;
    background-color: #ffffff;
}

body.demos .service-widget {
    margin: 0 0 30px;
    padding: 30px;
    background-color: #fff
}

body.demos .container-fluid {
    max-width: 1080px
}

a {
    color: #1f1f1f;
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0;
    font-weight: normal;
    position: relative;
    padding: 0 0 10px 0;
    font-weight: normal;
    line-height: 120% !important;
    color: #1f1f1f;
    margin: 0
}

h1 {
    font-size: 24px
}

h2 {
    font-size: 22px
}

h3 {
    font-size: 18px
}

h4 {
    font-size: 16px
}

h5 {
    font-size: 14px
}

h6 {
    font-size: 13px
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #212121;
    text-decoration: none!important;
    opacity: 1
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    opacity: .8
}
.mt-5{margin-top:5px;}
.mt-10{margin-top:10px;}
.mt-15{margin-top:15px;}
.mt-20{margin-top:20px;}
.mt-25{margin-top:25px;}
.mt-30{margin-top:39px;}
.mt-50{margin-top:50px;}

.mb-5{margin-bottom:5px;}
.mb-10{margin-bottom:10px;}
.mb-15{margin-bottom:15px;}
.mb-20{margin-bottom:20px;}
.mb-25{margin-bottom:25px;}
.mb-30{margin-bottom:39px;}
.mb-50{margin-bottom:50px;}

.pt-5{padding-top:5px;}
.pt-10{padding-top:10px;}
.pt-15{padding-top:15px;}
.pt-20{padding-top:20px;}
.pt-25{padding-top:25px;}
.pt-30{padding-top:30px;}
.pt-50{padding-top:50px;}

.pb-5{padding-bottom:5px;}
.pb-10{padding-bottom:10px;}
.pb-15{padding-bottom:15px;}
.pb-20{padding-bottom:20px;}
.pb-25{padding-bottom:25px;}
.pb-30{padding-bottom:30px;}
.pb-50{padding-bottom:50px;}

.text-white{color:#fff;}
a {
    color: #1f1f1f;
    text-decoration: none;
    outline: none;
}

a,
.btn {
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.btn-custom {
    margin-top: 20px;
    background-color: transparent !important;
    border: 2px solid #ddd;
    padding: 12px 40px;
    font-size: 16px;
}

.lead {
    font-size: 18px;
    line-height: 30px;
    color: #767676;
    margin: 0;
    padding: 0;
}

blockquote {
    margin: 20px 0 20px;
    padding: 30px;
}


/*------------------------------------------------------------------
    WP CORE
-------------------------------------------------------------------*/

.first {
    clear: both
}

.last {
    margin-right: 0
}

.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float: right;
    margin: 10px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 10px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 10px 0 20px 20px;
}

a img.alignnone {
    margin: 10px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 10px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}


/* Text meant only for screen readers. */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}


/*------------------------------------------------------------------
    HEADER
-------------------------------------------------------------------*/

.megamenu .nav,
.megamenu .collapse,
.megamenu .dropup,
.megamenu .dropdown {
    position: static;
}

.megamenu .container-fluid {
    position: relative;
}

.megamenu .dropdown-menu {
    left: auto;
}

.megamenu .megamenu-content {
    padding: 20px 30px;
}

.megamenu .dropdown.megamenu-fw .dropdown-menu {
    left: 0;
    right: 0;
}

.megamenu .list-unstyled {
    min-width: 200px;
}

.header_style_01 {
    background-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 8px 0 rgba(0,0,0,.12);
    display: block;
    left: 0;
    padding: 20px 40px !important;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 111;
}

/* Fix the Header to the top */
.header_style_01 {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Push the Slider down so it doesn't hide behind the header */
#bootstrap-touch-slider {
    margin-top: 80px; /* Adjust this based on your header height */
}

/* Clean up the '25-Year Advantage' spacing */
#overviews {
    padding: 60px 0 !important;
}

.header_style_01 .container {
    width: 95% !important; /* Increases the width so elements can move closer to the edges */
    max-width: 100%;
}

.header_style_01 .navbar-default {
    background-color: transparent;
    border: 0;
	border-radius: 0px;
}

.header_style_01 .navbar,
.header_style_01 .navbar-nav,
.header_style_01 .navbar-default,
.header_style_01 .nav {
    margin-bottom: 0 !important;
}
.nav.navbar-nav li a.current {
    color: blue;
    font-weight: bold;
}


.header_style_01 .nav {padding-left:20px;}
.header_style_01 .navbar-brand {
    padding: 2px 15px 0 15px;
}

.header_style_01 .navbar-default .navbar-nav > li > a {
    color: #ffffff;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    text-transform: capitalize;
    background-color: transparent;
}

.header_style_01 .navbar-default .navbar-nav > li a {
    background-color: transparent;
}
/* 2. Remove the default left padding from the brand/logo area */
.navbar-brand {
    padding-left: 0 !important;
    margin-left: -15px; /* Adjust this number to move it even further left */
}

/* 3. Optional: If the logo still feels too far in, adjust the navbar-header */
.navbar-header {
    margin-left: 0 !important;
}
body.host_version .header_style_01 .navbar-default .navbar-nav > li:hover a,
body.host_version .header_style_01 .navbar-default .navbar-nav > li:focus a {
	color: #00aeef;
}

body.host_version  .header_style_01 .navbar-default .navbar-nav > li a.active{
	color: #00aeef;
}

.header_style_01 .navbar-right > li {
    margin-top: 2px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

body.host_version .header_style_01 .navbar-right > li .log:hover{
	background: #00aeef;
	color: #fff !important;
	border-color: #00aeef !important;
}

.header_style_01 .navbar-right > li > a {
    padding-bottom: 10px;
    padding-top: 10px;
}

li.social-links {
    margin: 0 8px;
}

li.social-links a {
    padding: 13px 0 !important;
}

.affix-top {
    overflow: hidden;
    visibility: visible;
    opacity: 1;
    top: -100%;
}

.affix {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 20px 40px;
    background-color: #1f1f1f !important;
    -webkit-transition: visibility 0.95s ease-in-out, opacity 0.95s ease-in-out, bottom 0.95s ease-in-out, top 0.95s ease-in-out, left 0.95s ease-in-out, right 0.95s ease-in-out;
    -moz-transition: visibility 0.95s ease-in-out, opacity 0.95s ease-in-out, bottom 0.95s ease-in-out, top 0.95s ease-in-out, left 0.95s ease-in-out, right 0.95s ease-in-out;
    -o-transition: visibility 0.95s ease-in-out, opacity 0.95s ease-in-out, bottom 0.95s ease-in-out, top 0.95s ease-in-out, left 0.95s ease-in-out, right 0.95s ease-in-out;
    transition: visibility 0.95s ease-in-out, opacity 0.95s ease-in-out, top 0.95s ease-in-out, bottom 0.95s ease-in-out, left 0.95s ease-in-out, right 0.95s ease-in-out;
}

.navbar-nav li {
    position: relative;
}

.navbar-nav span {
  /*  font-size: 24px; */
    position: absolute;
    right: 2px;
    top: 13px;
	margin-right: 10px;
}

.fixed-menu .navbar-default{
	position: fixed;
	visibility: hidden;
	left: 0px;
	top: 0px;
	width: 100%;
	padding: 0px 0px;
	background: #ffffff;
	z-index: 0;
	transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	z-index: 999;
	opacity: 1;
	visibility: visible;
	-ms-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-op-animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	-ms-animation-duration: 500ms;
	-moz-animation-duration: 500ms;
	-op-animation-duration: 500ms;
	-webkit-animation-duration: 500ms;
	animation-duration: 500ms;
	-ms-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-op-animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-ms-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-op-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

.fixed-menu .navbar-default{
	padding: 15px 0px;
	box-shadow: 0 0 8px 0 rgba(0,0,0,.12);
}


/*------------------------------------------------------------------
    SECTIONS
-------------------------------------------------------------------*/

.parallax {
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    padding: 120px 0;
    position: relative;
    width: 100%;
}

.parallax.parallax-off {
    background-attachment: fixed !important;
    display: block;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    position: relative;
    background-position: center center;
    vertical-align: sub;
    width: 100%;
    z-index: 2;
}

.no-scroll-xy {
    overflow: hidden !important;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.section {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 120px 0;
}

.noover {
    overflow: visible;
}

.noover .btn-dark {
    border: 0 !important;
}

.nopad {
    padding: 0;
}

.nopadtop {
    padding-top: 0;
}

.section.wb {
    background-color: #ffffff;
}

.section.lb {
    background-color: #f2f3f5;
}

.section.db {
    background-color: #1f1f1f;
}

.section.color1 {
    background-color: #448AFF;
}
.section.cl {
	background-color: #2d3032;
}

.first-section {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 16em 0 13em;
}

.first-section::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
	top: 0px;
	left: 0px;
    display: block;
    background: linear-gradient(to right,rgba(255,255,255,0.99) 20%,rgba(255,255,255,0.7) 70%,rgba(255,255,255,0) 95%);
}

.first-section h2 {
    color: #2d3032;
    font-size: 68px;
    font-weight: 300;
    text-transform: capitalize;
    display: block;
    margin: 0;
    padding: 0 0 30px;
    position: relative;
}

.first-section h2 strong{
	color: #00aeef;
}

.first-section .lead {
    font-size: 21px;
    font-weight: 300;
    padding: 0 0 40px;
    margin: 0;
    line-height: inherit;
    color: #2d3032;
}

.macbookright {
    width: 980px;
    position: absolute;
    right: -15%;
    bottom: -6%;
}

.section-title {
    display: block;
    position: relative;
    margin-bottom: 60px;
}

.section-title p {
    color: #7c7c80;
    font-weight: 400;
    font-size: 18px;
    line-height: 33px;
    margin: 0;
	margin-bottom: 30px;
}

.section-title h3 {
    font-size: 42px;
    font-weight: 300;
    line-height: 62px;
    margin: 0 0 25px;
    padding: 0;
    text-transform: none;
}

.section.colorsection p,
.section.colorsection h3,
.section.db h3 {
    color: #ffffff;
}


/*------------------------------------------------------------------
    PORTFOLIO
-------------------------------------------------------------------*/

.item-h2,
.item-h1 {
    height: 100% !important;
    height: auto !important;
}

.isotope-item {
    z-index: 2;
    padding: 0;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

.portfolio-filter ul {
    padding: 0;
    z-index: 2;
    display: block;
    position: relative;
    margin: 0;
}

.portfolio-filter ul li {
    border-radius: 0;
    display: inline-block;
    margin: 0 5px 0 0;
    text-decoration: none;
    text-transform: uppercase;
    vertical-align: middle;
}

.portfolio-filter ul li:last-child:after {
    content: "";
}

.portfolio-filter ul li .btn-dark {
    box-shadow: none;
    background-color: transparent;
    border: 1px solid #e6e7e6 !important;
    color: #1f1f1f;
    font-weight: 400;
    font-size: 13px;
    padding: 10px 30px;
}

.da-thumbs {
    list-style: none;
    position: relative;
    padding: 0;
}

.da-thumbs .pitem {
    margin: 0;
    padding: 15px;
    position: relative;
}

.da-thumbs .pitem a,
.da-thumbs .pitem a img {
    display: block;
    position: relative;
}

.da-thumbs .pitem a {
    overflow: hidden;
}

.da-thumbs .pitem a div {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
}

.da-thumbs .pitem a div h3 {
    display: block;
    color: #ffffff;
    font-size: 20px;
    padding: 30px 15px;
    text-transform: capitalize;
    font-weight: normal;
}

.da-thumbs .pitem a div h3 small {
    display: block;
    color: #ffffff;
    margin-top: 5px;
    font-size: 13px;
    font-weight: 300;
}

.da-thumbs .pitem a div i {
    background-color: #1f1f1f;
    position: absolute;
    color: #ffffff !important;
    bottom: 0;
    font-size: 15px;
    z-index: 12;
    right: 0;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}


/*------------------------------------------------------------------
    TESTIMONIALS
-------------------------------------------------------------------*/

.logos img {
    margin: auto;
    display: block;
    text-align: center;
    width: 100%;
    opacity: 0.3;
}

.logos img:hover {
    opacity: 0.5;
}

.desc h3 i {
    color: #2f2f2f;
    font-size: 37px;
    vertical-align: middle;
    margin-right: 12px;
}

.desc {
    padding: 30px;
    position: relative;
    background: #000;
    border: 1px solid #111111;
}

.testi-meta {
    display: block;
    margin-top: 20px;
}

.testimonial h4 {
    font-size: 18px;
    color: #ffffff;
    padding: 13px 0 0;
}

.testimonial img {
    max-width: 55px;
}

.testimonial small {
    margin-top: 7px;
    font-size: 16px;
    display: block;
}

.testimonial {
    background-color: transparent;
}

.testimonial h3 {
    padding: 0 0 10px;
    font-size: 20px;
    font-weight: 300;
}

.testimonial small,
.testimonial .lead {
    background-color: transparent;
    color: #aaa;
    display: block;
    font-size: 16px;
    font-style: italic;
    line-height: 30px;
    margin: 0;
    padding: 0;
    position: relative;
}

.testimonial p:after {
    display: none;
}


/*------------------------------------------------------------------
    PRICING TABLES
-------------------------------------------------------------------*/

.pricing-table {
    margin: 0px;
    background: #fff;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
}

.pricing-table i {
    width: 30px;
    color: #c2c2c2;
    display: inline-block;
    margin-right: 10px;
    padding-right: 5px;
    border-right: 1px solid #ececec;
}

.pricing-table .btn-dark {
    padding: 10px 24px;
    font-size: 15px;
}

.pricing-table strong {
    font-weight: 600;
    margin-right: 6px;
    color: #1f1f1f;
}

.pricing-table-header {
    padding: 30px 0 25px 0;
    background: #ffffff;
}

.pricing-table-header h2 {
    font-size: 31px;
    margin: 0;
    padding: 0;
    font-weight: 300;
}

.pricing-table-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #aaaaaa;
    margin-top: 10px;
    text-transform: uppercase;
}

.pricing-table-space {
    height: 10px;
}

.pricing-table-text {
    margin: 15px 30px 0 30px;
    padding: 0 10px 15px 10px;
    border-bottom: 1px solid #ececec;
    font-weight: 300;
    line-height: 30px;
    color: #c2c2c2;
    font-size: 16px;
}

.pricing-table-text p {
    font-weight: 400;
}

.pricing-table-features {
    margin: 15px 30px 0 30px;
    padding: 0 10px 15px 30px;
    border-bottom: 1px solid #ececec;
    text-align: left;
    line-height: 30px;
    font-size: 16px;
    color: #c2c2c2;
}

.pricing-table-highlighted h3,
.pricing-table-highlighted h2 {
    color: #ffffff !important;
}

.pricing-table-sign-up {
    margin-top: 25px;
    padding-bottom: 30px;
}


.pricing-table:hover {
	transform: scale(1.05,1.06);
	-webkit-transform: scale(1.05,1.06);
	-moz-transform: scale(1.05,1.06);
	-o-transform: scale(1.05,1.06);
	transition: 0.5s all ease;
	-webkit-transition: 0.5s all ease;
	-moz-transition: 0.5s all ease;
	-o-transition: 0.5s all ease;
	-ms-transition: 0.5s all ease;
}

/* Highlighted table */

.pricing-table-highlighted {
    margin-top: 0;
}

.m130 {
    margin-top: 130px;
}

.nav-pills {
    border: 1px solid #e1e1e1;
}

.nav-pills > li {
    width: 50%;
    padding: 10px;
    float: left;
    margin: 0 !important;
}

.nav-pills > li > a {
    margin: 0!important;
    text-align: center;
    background-color: #f4f4f4;
}


/*------------------------------------------------------------------
    ICON BOXES
-------------------------------------------------------------------*/

/* 1. Make the Icon Thick, Colorful, and "Royal" */
.icon-wrapper i {
    float: none !important; /* Forces the icon to stop floating left of text */
    width: 75px;
    height: 75px;
    text-align: center;
    line-height: 75px;
    font-size: 32px;
    background-color: #002366;
    color: #ffffff;
    margin: 0 0 20px 0; /* Space only at the bottom */
    font-weight: 900;
    border-radius: 8px;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
}
/* 1. Container Fix: Remove floats and center/left align properly */
.icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Keeps everything left-aligned */
    padding: 20px;
    text-align: left;
}
/* Hover effect to make it interactive */
/* Hover Interaction */
.icon-wrapper:hover i {
    background-color: #0041ab;
    transform: translateY(-5px);
}

/* 2. Style the Service Headlines */
.icon-wrapper h3 {
    color: #002366;
    font-weight: 700;
    margin-bottom: 15px;
}

/* 3. Proper Indent and Styling for List Items */
/* Fix the list spacing so bullets don't hang too far left */
.icon-wrapper ul {
    margin: 10px 0 0 0;
    padding-left: 0;
    list-style: none; /* We use the ::before bullet below */
}

/* 1. Container: Reset and padding */
.icon-wrapper {
    padding: 20px 0;
    text-align: left;
    display: block; /* The container stays a block */
}

/* 2. Header Flex: This puts Icon and H3 on the same line */
.service-header {
    display: flex;
    align-items: center; /* Vertically centers the title with the icon */
    gap: 15px; /* Space between icon and title */
    margin-bottom: 15px;
}

/* 3. Icon: Slightly smaller and "Thick" Royal Blue */
.icon-wrapper i {
    flex-shrink: 0;
    width: 35px; /* Slightly smaller as requested */
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 24px;
    background-color: #002366; /* Royal Blue */
    color: #ffffff;
    border-radius: 8px;
    box-shadow: 3px 3px 10px rgba(0, 35, 102, 0.15);
    margin: 0 !important; /* Removes old margins */
    float: none !important; /* Breaks the old 'alignleft' float */
}

/* 4. Title Style */
.icon-wrapper h3 {
    color: #002366;
    font-weight: 700;
    font-size: 19px;
    margin: 0; /* Important: removes default spacing */
    padding: 0;
}

/* 5. Content Style: Below the header */
.icon-wrapper p {
    padding-left: 0 !important; /* Fixes the 95px gap from your image */
    margin-bottom: 15px;
    color: #444;
    line-height: 1.6;
}

/* 6. List Style: Proper Indent */
.icon-wrapper ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.icon-wrapper ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 5px;
    color: #002366;
    font-size: 14px;
}

.icon-wrapper ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    font-weight: bold;
}
.small-icons.icon-wrapper:hover i,
.small-icons.icon-wrapper:hover i:hover,
.small-icons.icon-wrapper i {
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    padding: 0 !important;
    color: #e3e3e3 !important;
    background-color: transparent !important;
    background: none !important;
    margin-right: 10px !important;
    vertical-align: middle;
    font-size: 24px !important;
}

.small-icons.icon-wrapper h3 {
    font-size: 18px;
    padding-bottom: 5px;
}

.small-icons.icon-wrapper p {
    padding: 0;
    margin: 0;
}

.icon-wrapper h3 {
    color: #002366;
    font-weight: 700;
    font-size: 21px;
    margin: 0 0 15px 0;
    padding: 0;
}

.icon-wrapper p {
    padding-left: 0 !important; /* Removes the old indent */
    margin-bottom: 10px;
    color: #444;
    line-height: 1.6;
}

.icon-wrapper p small {
    display: block;
    color: #999;
    margin-top: 10px;
    text-transform: none;
    font-weight: 600;
    font-size: 16px;
}

.icon-wrapper p small:after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 5px;
    font-size: 11px;
}

.effect-1 {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    position: relative;
    text-decoration: none;
    z-index: 1;
}

.effect-1:after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    content: '';
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.effect-1 {
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}

.effect-1:after {
    top: -7px;
    left: -7px;
    padding: 7px;
    box-shadow: 0 0 0 2px #2750ff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    transition: transform 0.2s, opacity 0.2s;
    transform: scale(.8);
    opacity: 0;
}

.effect-1:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.effect-1:after {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.effect-1:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}


/*------------------------------------------------------------------
    MESSAGE BOXES
-------------------------------------------------------------------*/

.service-widget h3 {
    font-size: 21px;
    color: #ffffff;
    padding: 20px 0 12px;
    margin: 0;
}

.service-widget h3 a,
.section.wb .service-widget h3,
.section.lb .service-widget h3 {
    color: #1f1f1f;
}

.service-widget p {
    margin-bottom: 0;
    padding-bottom: 0;
}

.message-box h4 {
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 15px;
    color: #999;
}

.message-box h2 {
    font-size: 38px;
    font-weight: 300;
    padding: 0 0 10px;
    margin: 0;
    line-height: 62px;
    margin-top: 0;
    text-transform: none;
}

.message-box p {
    margin-bottom: 20px;
}

.message-box .lead {
    padding-top: 10px;
    font-size: 19px;
    font-style: italic;
    color: #999;
    padding-bottom: 0;
}

.post-media {
    position: relative;
}

.post-media img {
    width: 100%;
}

.playbutton {
    position: absolute;
    color: #ffffff !important;
    top: 40%;
    font-size: 60px;
    z-index: 12;
    left: 0;
    right: 0;
    text-align: center;
    margin: -20px auto;
}

.hoverbutton {
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    color: #1f1f1f !important;
    top: 48%;
    font-size: 21px;
    z-index: 12;
    left: 0;
    opacity: 0;
    right: 0;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: -20px auto;
}

.service-widget:hover .hoverbutton {
    opacity: 1;
}

hr.hr1 {
    position: relative;
    margin: 60px 0;
    border: 1px dashed #f2f3f5;
}

hr.hr2 {
    position: relative;
    margin: 17px 0;
    border: 1px dashed #f2f3f5;
}

hr.hr3 {
    position: relative;
    margin: 25px 0 30px 0;
    border: 1px dashed #f2f3f5;
}

hr.invis {
    border-color: transparent;
}

hr.invis1 {
    margin: 10px 0;
    border-color: transparent;
}

.section.parallax hr.hr1 {
    border-color: rgba(255, 255, 255, 0.1);
}

.sep1 {
    display: block;
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    bottom: -20px;
    left: 50%;
    margin-left: -14px;
    background-color: #1f1f1f;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}

.sep2 {
    display: block;
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    top: -20px;
    left: 50%;
    margin-left: -14px;
    background-color: #1f1f1f;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 1;
}


/* Divider Styles */

.divider-wrapper {
    width: 100%;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
    height: 540px;
    margin: 0 auto;
    position: relative;
}

.divider-wrapper:hover {
    cursor: none;
}

.divider-bar {
    position: absolute;
    width: 10px;
    left: 50%;
    top: -10px;
    bottom: -15px;
}

.code-wrapper {
    border: 1px solid #ffffff;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    background: url("uploads/code.jpg") no-repeat;
}

.design-wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}

.design-image {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: url("uploads/design.jpg") no-repeat;
}


/*------------------------------------------------------------------
    FEATURES
-------------------------------------------------------------------*/

.customwidget h1 {
    font-size: 44px;
    color: #ffffff;
    padding: 15px 0 25px;
    margin: 0;
    line-height: 1 !important;
    font-weight: 300;
}

.customwidget ul {
    padding: 0;
    display: block;
    margin-bottom: 30px;
}

.customwidget li i {
    margin-right: 5px;
}

.customwidget li {
    color: #ffffff;
    margin-right: 10px;
}

.image-center img {
    position: relative;
    margin: 0 0 -208px;
    z-index: 10;
    padding-right: 30px;
    text-align: center;
}

.customwidget p {
    font-style: italic;
    font-size: 18px;
    padding: 0 0 10px;
}

.img-center img {
    width: 100%;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
}

.img-center {
    margin: auto;
}

#features li p {
    margin-bottom: 0;
    padding-bottom: 0;
}

#features li {
    display: table;
    width: 100%;
    margin: 35px 0;
    cursor: pointer;
}

.features-left,
.features-right {
    padding: 0 10px;
}

.features-right li:last-child,
.features-left li:last-child {
    margin-bottom: 0px;
    padding-bottom: 0 !important;
}

.features-right li i,
.features-left li i {
    width: 68px;
    height: 68px;
    line-height: 68px;
    display: table;
    border-radius: 50%;
    font-size: 26px;
    background-color: #f2f3f5;
    margin: 0 auto 22px;
    position: relative;
    text-align: center;
    z-index: 55;
    transition: .4s;
    padding: 0;
}

#features i img {
    display: table;
    margin: 0 auto;
}

.features-left li i:before,
.features-right li i:before {
    text-align: center;
}

.features-right li i .ico-current,
.features-left li i .ico-current {
    opacity: 1;
    transition: .4s;
    visibility: visible;
}

.features-right li i .ico-hover,
.features-left li i .ico-hover {
    opacity: 0;
    transition: .4s;
    visibility: hidden;
    top: 19px;
}

.features-right li:hover .ico-current,
.features-left li:hover .ico-current {
    opacity: 0;
    transition: .4s;
    visibility: hidden;
}

.features-right li:hover .ico-hover,
.features-left li:hover .ico-hover {
    opacity: 1;
    transition: .4s;
    visibility: visible;
}

.features-right i {
    float: left;
}

.fr-inner {
    margin-left: 90px;
}

.features-left i {
    float: right;
}

.fl-inner {
    text-align: right;
    margin-right: 90px;
}

#features h4 {
    text-transform: capitalize;
    margin: 0;
    font-size: 19px;
}


/*------------------------------------------------------------------
    CONTACT
-------------------------------------------------------------------*/

.bootstrap-select {
    width: 100% \0;
    /*IE9 and below*/
}

.bootstrap-select > .dropdown-toggle {
    width: 100%;
    padding-right: 25px;
}

.has-error .bootstrap-select .dropdown-toggle,
.error .bootstrap-select .dropdown-toggle {
    border-color: #b94a48;
}

.bootstrap-select.fit-width {
    width: auto !important;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%;
}

.bootstrap-select .dropdown-toggle:focus {
    outline: thin dotted #333333 !important;
    outline: 5px auto -webkit-focus-ring-color !important;
    outline-offset: -2px;
}

.bootstrap-select.form-control {
    margin-bottom: 0;
    padding: 0;
    border: none;
}

.bootstrap-select.form-control:not([class*="col-"]) {
    width: 100%;
}

.bootstrap-select.form-control.input-group-btn {
    z-index: auto;
}

.bootstrap-select.btn-group:not(.input-group-btn),
.bootstrap-select.btn-group[class*="col-"] {
    float: none;
    display: inline-block;
    margin-left: 0;
}

.bootstrap-select.btn-group.dropdown-menu-right,
.bootstrap-select.btn-group[class*="col-"].dropdown-menu-right,
.row .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right {
    float: right;
}

.form-inline .bootstrap-select.btn-group,
.form-horizontal .bootstrap-select.btn-group,
.form-group .bootstrap-select.btn-group {
    margin-bottom: 0;
}

.form-group-lg .bootstrap-select.btn-group.form-control,
.form-group-sm .bootstrap-select.btn-group.form-control {
    padding: 0;
}

.form-inline .bootstrap-select.btn-group .form-control {
    width: 100%;
}

.bootstrap-select.btn-group.disabled,
.bootstrap-select.btn-group > .disabled {
    cursor: not-allowed;
}

.bootstrap-select.btn-group.disabled:focus,
.bootstrap-select.btn-group > .disabled:focus {
    outline: none !important;
}

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    text-align: left;
}

.bootstrap-select.btn-group .dropdown-toggle .fa-angle-down {
    position: absolute;
    top: 30% !important;
    right: -5px;
    vertical-align: middle;
}

.bootstrap-select.btn-group[class*="col-"] .dropdown-toggle {
    width: 100%;
}

.bootstrap-select.btn-group .dropdown-menu {
    border: 1px solid #ededed;
    box-shadow: none;
    box-sizing: border-box;
    min-width: 100%;
    padding: 20px 10px;
    z-index: 1035;
}

.dropdown-menu > li > a {
    background-color: transparent !important;
    color: #bcbcbc !important;
    font-size: 15px;
    padding: 10px 20px;
}

.bootstrap-select.btn-group .dropdown-menu.inner {
    position: static;
    float: none;
    border: 0;
    padding: 0;
    margin: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.bootstrap-select.btn-group .dropdown-menu li {
    position: relative;
}

.bootstrap-select.btn-group .dropdown-menu li.active small {
    color: #fff;
}

.bootstrap-select.btn-group .dropdown-menu li.disabled a {
    cursor: not-allowed;
}

.bootstrap-select.btn-group .dropdown-menu li a {
    cursor: pointer;
}

.bootstrap-select.btn-group .dropdown-menu li a.opt {
    position: relative;
    padding-left: 2.25em;
}

.bootstrap-select.btn-group .dropdown-menu li a span.check-mark {
    display: none;
}

.bootstrap-select.btn-group .dropdown-menu li a span.text {
    display: inline-block;
}

.bootstrap-select.btn-group .dropdown-menu li small {
    padding-left: 0.5em;
}

.bootstrap-select.btn-group .dropdown-menu .notify {
    position: absolute;
    bottom: 5px;
    width: 96%;
    margin: 0 2%;
    min-height: 26px;
    padding: 3px 5px;
    background: #f5f5f5;
    border: 1px solid #e3e3e3;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    pointer-events: none;
    opacity: 0.9;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bootstrap-select.btn-group .no-results {
    padding: 3px;
    background: #f5f5f5;
    margin: 0 5px;
    white-space: nowrap;
}

.bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option {
    position: static;
}

.bootstrap-select.btn-group.fit-width .dropdown-toggle .caret {
    position: static;
    top: auto;
    margin-top: 4px;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
    position: absolute;
    display: inline-block;
    right: 15px;
    margin-top: 5px;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
    margin-right: 34px;
}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle {
    z-index: 1036;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle:before {
    content: '';
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid rgba(204, 204, 204, 0.2);
    position: absolute;
    bottom: -4px;
    left: 9px;
    display: none;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle:after {
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    position: absolute;
    bottom: -4px;
    left: 10px;
    display: none;
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {
    bottom: auto;
    top: -3px;
    border-top: 7px solid rgba(204, 204, 204, 0.2);
    border-bottom: 0;
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {
    bottom: auto;
    top: -3px;
    border-top: 6px solid white;
    border-bottom: 0;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {
    right: 12px;
    left: auto;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {
    right: 13px;
    left: auto;
}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before,
.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after {
    display: block;
}

.bs-searchbox,
.bs-actionsbox,
.bs-donebutton {
    padding: 4px 8px;
}

.bs-actionsbox {
    float: left;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bs-actionsbox .btn-group button {
    width: 50%;
}

.bs-donebutton {
    float: left;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bs-donebutton .btn-group button {
    width: 100%;
}

.bs-searchbox + .bs-actionsbox {
    padding: 0 8px 4px;
}

.bs-searchbox .form-control {
    margin-bottom: 0;
    width: 100%;
}

select.bs-select-hidden,
select.selectpicker {
    display: none !important;
}

select.mobile-device {
    position: absolute !important;
    top: 0;
    left: 0;
    display: block !important;
    width: 100%;
    height: 100% !important;
    opacity: 0;
}


/*# sourceMappingURL=bootstrap-select.css.map */

.bootstrap-select > .btn {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    font-size: 15px;
    height: 33px;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0;
    width: 100%;
    color: #bcbcbc !important;
}

.contact_form {
    border: 1px solid #ededed;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
    background-color: #f2f3f5;
    padding: 40px 30px;
}

.contact_form .form-control {
    background-color: #fff;
    margin-bottom: 30px;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    color: #bcbcbc;
    font-size: 16px;
    outline: 0 none;
    padding: 10px 25px;
    height: 55px;
    resize: none;
    box-shadow: none !important;
    width: 100%;
}

.contact_form textarea {
    color: #bcbcbc;
    padding: 20px 25px !important;
    height: 160px !important;
}

.contact_form .form-control::-webkit-input-placeholder {
    color: #bcbcbc;
}

.contact_form .form-control::-moz-placeholder {
    opacity: 1;
    color: #bcbcbc;
}

.contact_form .form-control::-ms-input-placeholder {
    color: #bcbcbc;
}

#contact {
    background: url(images/bg.png) no-repeat center center #fff;
}


/*------------------------------------------------------------------
    FOOTER
-------------------------------------------------------------------*/

.cac {
    background-color: #232323;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.cac:hover a h3 {
    color: #fff !important;
}

.cac a h3 {
    color: #999;
}

.cac h3 {
    padding: 60px 0;
    margin: 0;
    font-weight: 400;
    font-size: 20px;
    text-transform: capitalize;
    line-height: !important;
}

.footer {
    padding: 90px 0 80px !important;
    color: #313030;
    background-color: #fff;
}

.footer .widget-title {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.footer .widget-title small {
    color: #999;
    display: block;
    padding: 0 58px;
    text-transform: uppercase;
}

.footer .widget-title h3 {
    color: #08169e-;
    font-weight: 300;
    font-size: 21px;
    padding: 0;
    margin: 0;
    line-height: 1 !important;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links a {
    color: #373535;
}

.footer-links a:hover,
.footer a:hover {
    color: #1255d0 !important;
	font-weight:bold;
}

.footer-links li {
    margin-bottom: 10px;
    display: block;
    width: 100%;
    border-bottom: 1px dashed rgb(20 19 19);
    padding-bottom: 10px;
}

.twitter-widget li {
    margin-bottom: 0;
    border: 0 !important;
}

.twitter-widget li i {
    border-right: 0 !important;
    margin-right: 0;
}

.footer-links li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border: 0;
}

.footer-links i {
    display: inline-block;
    width: 25px;
    margin-right: 10px;
    border-right: 1px dashed rgba(255, 255, 255, 0.1);
}

.copyrights {
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    background-color: #1f1f1f;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    padding: 10px 10px;
    overflow: hidden;
	color: #fff;
}

/* Footer left */

.footer-distributed .footer-left {
    float: left;
}

.footer-distributed .footer-links {
    margin: 0 0 10px;
    text-transform: uppercase;
    padding: 0;
}

.footer-distributed .footer-links a {
    display: inline-block;
    line-height: 1.8;
    margin: 0 10px 0 10px;
    text-decoration: none;
}

.footer-distributed .footer-company-name {
    font-weight: 300;
    margin: 0 10px;
    color: #666;
    padding: 19px 0px;
}


/* Footer right */

.footer-distributed .footer-right {
    float: right;
}


/* The search form */

.footer-distributed form {
    position: relative;
}

.footer-distributed form input {
    display: block;
    border-radius: 3px;
    box-sizing: border-box;
    background-color: #181818;
    border: none;
    font: inherit;
    font-size: 15px;
    font-weight: normal;
    color: #999;
    width: 400px;
    padding: 18px 50px 18px 18px;
}

.footer-distributed form input:focus {
    outline: none;
}


/* Changing the placeholder color */

.footer-distributed form input::-webkit-input-placeholder {
    color: #999;
}

.footer-distributed form input::-moz-placeholder {
    opacity: 1;
    color: #999;
}

.footer-distributed form input:-ms-input-placeholder {
    color: #999;
}


/* The magnify glass icon */

.footer-distributed form i {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 16px;
    right: 18px;
    color: #999;
    font-size: 18px;
    margin-top: 6px;
}


.footer-distributed .footer-company-name a{
	color: #ffffff;
}

.footer-distributed .footer-company-name a:hover{
	color: #00aeef;
}

/*------------------------------------------------------------------
    MISC
-------------------------------------------------------------------*/

.progress {
    background-color: #f2f3f5;
    border-radius: 0;
    box-shadow: none;
    height: 5px;
    margin-bottom: 20px;
    overflow: hidden;
}

.skills h3 {
    color: #999999;
    font-size: 15px;
}

.dmtop {
    background-color: #3C3D41;
    z-index: 100;
    width: 50px;
    height: 50px;
    line-height: 47px;
    position: fixed;
    bottom: -100px;
    border-radius: 3px;
    right: 50px;
    text-align: center;
    font-size: 28px;
    color: #ffffff !important;
    cursor: pointer;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

.icon_wrap {
    background-color: #1f1f1f;
    width: 100px;
    height: 100px;
    display: block;
    line-height: 100px;
    font-size: 34px;
    color: #ffffff;
    margin: 0 auto;
    text-align: center;
    padding: 0 !important;
    border: 0 !important;
}

.stat-wrap h3 {
    font-size: 18px;
    font-weight: 400;
    color: #999 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important:
}

.stat-wrap p {
    font-size: 38px;
    color: #ffffff;
    margin: 0;
    font-weight: 300;
    padding: 4px 0 0;
    line-height: 1 !important:
}

#preloader {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #00aeef;
    z-index: 11000;
    position: fixed;
    display: block
}

.preloader {
    position: absolute;
    margin: 0 auto;
    left: 1%;
    right: 1%;
    top: 45%;
    width: 95px;
    height: 95px;
    background: center center no-repeat none;
    background-size: 95px 95px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}


/*------------------------------------------------------------------
    BUTTONS
-------------------------------------------------------------------*/

.navbar-default .btn-light {
    padding: 0 20px;
    margin-left: 15px;
}

.btn {
    border: 0 !important;
}

.nav-pills,
.effect-1:after,
.nav-pills > li > a,
.global-radius,
.btn-brd { 
	border-radius: 4px;
}

.btn-light {
    padding: 13px 40px;
    font-size: 18px;
    border: 2px solid #ffffff !important;
    color: #ffffff;
    background-color: transparent;
}

.btn-dark {
    padding: 13px 40px;
    font-size: 18px;
    border: 1px solid #ececec !important;
    color: #1f1f1f;
    background-color: transparent;
}

.btn-light:hover,
.btn-light:focus {
    border-color: rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.6);
}

body.host_version .slide-btn.btn-light{
	background-color: #2d3032 !important;
	color: #ffffff !important;
	border: 2px solid #2d3032 !important;
}
body.host_version .first-section .effect-1.slide-btn::after{
	box-shadow: 0 0 0 2px #2d3032;
}



/**-------------- inner Page css ---------------**/

.all-title-box{
	background: url(uploads/banner.jpg)no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	min-height: 300px;
}

.all-title-box h1{
	color: #fff;
	font-weight: 800;
	text-transform: capitalize;
	padding-top: 11%;
	font-size: 3em;
	line-height: 0em;
}

span.m_1 {
    font-weight: 300;
    font-size: 20px;
    line-height: 1.5em;
	display: block;
}

.list-domain{
	margin-top: 30px;
}

.list-domain ul{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.list-domain ul li{
	display: inline-block;
	padding: 10px 30px;
}

.dmoain-pricing table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

.dmoain-pricing table .domain-head {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  background: #00aeef;
}

.dmoain-pricing table .domain-head th {
  border-right: 2px solid #fff;
}

.dmoain-pricing table .domain-head th:last-child {
  border-right: none;
}

.dmoain-pricing table th {
  padding: 11px 0;
  text-align: center;
  font-weight: 600;
}

.dmoain-pricing table td {
  padding: 23px 0;
  text-align: center;
  font-weight: 700;
  color: #707070;
}

.dmoain-pricing table th,
.dmoain-pricing tbody tr td:nth-child(1) {
  text-transform: capitalize;
}

.dmoain-pricing tbody tr td:nth-child(1) {
  font-size: 20px;
  color: #000;
  font-weight: 600;
}


#pricing-box .grid1{
	background-color: #f6f6f6;
    position: relative;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.grid1 span {
    position: relative;
    top: 0%;
	right: 0px;
    color: #F8F8FF;
	display: inline-block;
    font-size: 20px;
    font-weight: 900;
    padding: 10px 30px;
    background-color: #00aeef;
	border-radius: 18px 18px 0 0;
}

.grid1 h2 {
    text-align: center;
    padding: 15px 0;
    color: #F8F8FF;
    background-color: #00aeef;
	font-size: 28px;
	font-weight: 600;
}

.grid1 .para{
	padding: 30px;
}

#pricing-box .grid2{
	background-color: #f6f6f6;
    position: relative;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.grid2 span {
    position: relative;
    top: 0%;
    right: 0%;
    color: #F8F8FF;
	display: inline-block;
    font-size: 20px;
    font-weight: 900;
    padding: 10px 30px;
    background-color: #00aeef;
	border-radius: 18px 18px 0 0;
}

.grid2 h2 {
    text-align: center;
    padding: 15px 0;
    color: #F8F8FF;
    background-color: #00aeef;
	font-size: 28px;
	font-weight: 600;
}

.grid2 .para{
	padding: 30px;
}

#pricing-box .grid3{
	background-color: #f6f6f6;
    position: relative;
	box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1);
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    -ms-transition: 0.5s all;
}

.grid3 span {
    position: relative;
    top: 0%;
    right: 0%;
    color: #F8F8FF;
	display: inline-block;
    font-size: 20px;
    font-weight: 900;
    padding: 10px 30px;
    background-color: #00aeef;
	border-radius: 18px 18px 0 0;
}

.grid3 h2 {
    text-align: center;
    padding: 15px 0;
    color: #F8F8FF;
    background-color: #00aeef;
	font-size: 28px;
	font-weight: 600;
}

.grid3 .para{
	padding: 30px;
}

.para p{
	font-size: 16px;
	color: #2d3032;
}

.price-tit{
	background: #00aeef;
	padding: 20px;
}

.price-tit p{
	color: #ffffff;
	font-size: 18px;
}

#testimonial-box .testimonial h3{
	color: #ffffff;
}

#testimonial-box .desc:hover{
	background: #00aeef;
	border: 1px solid #00aeef;
}

#testimonial-box .desc:hover .lead{
	color: #121212;
}

.customer-box{
	
}
.customer-box .nav-tabs{
	border-bottom: none;
	padding: 20px;
	background: #f6f6f6;
}

.customer-box .nav-tabs > li.active > a{
	border: none;
	background: #00aeef;
	color: #fff;
	border-radius: 0px;
}

.customer-box .nav-tabs > li > a{
	border-radius: 0px;
	border: 0px;
	background: #2d3032;
	color: #ffffff;
	padding: 14px 25px;
	font-size: 18px;
}

.customer-box .nav-tabs > li > a:hover{
	background: #00aeef;
	color: #ffffff;
	border: 0px;
}

.customer-box .tab-content{
	padding: 20px;
}

.for-pwd{
	margin-left: 20px;
}

.customer-box .tab-content .form-group .form-control{
	background-color: #fff;
	margin-bottom: 30px;
	border: 1px solid #ebebeb;
	box-sizing: border-box;
	color: #bcbcbc;
	font-size: 16px;
	outline: 0 none;
	padding: 10px 25px;
	height: 55px;
	resize: none;
	box-shadow: none !important;
	width: 100%;
}

.tit-up .close{
	position: relative;
	z-index: 2;
}

.small-map {
    width: 100%;
    height: 400px;
    margin: 0 auto auto;
    box-shadow: 10px 10px 15px 0px #ccc;
}

.map-btn{
	background: #2d3032;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	font-size: 25px;
	color: #fff;
	margin: 0 auto;
	cursor: pointer;
	border-radius: 4px 4px 0px 0px;
}

.map-box{
	display: none;
}
/* Change the dull grey to a sharp, professional dark color */
.navbar-nav > li > a, 
.dropdown-menu > li > a {
    color: #2c3e50 !important; /* A deep, professional slate blue/black */
    font-weight: 500;           /* Gives the text a bit more "meat" */
    font-size: 14px;
}

/* Make the icons pop with your brand purple */
.dropdown-menu > li > a i {
    color: #8e44ad; /* Use the purple from your logo */
    opacity: 1;      /* Ensure they aren't transparent */
}
/* Make the dropdown text dark and readable */
.dropdown-menu > li > a {
    color: #333 !important; /* Dark grey/black */
    padding: 10px 20px;
	margin-right: 20px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* Icons styling */
.dropdown-menu > li > a i {
    margin-right: 5px;
    width: 20px;
    color: #007bff; /* Professional Blue */
}

/* Fix the 'New' Badge */
.badge-new {
    background-color: #20c997; /* Minty green looks more modern than bright blue */
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto; /* Pushes badge to the far right */
    text-transform: uppercase;
    font-weight: bold;
}

/* Hover effect */
.dropdown-menu > li > a:hover {
    background-color: #f8f9fa;
    color: #0056b3 !important;
}
.navbar-nav a.current {
    color: blue;
    font-weight: bold;
}
.hero-section {
  padding: 90px 0;
  background: #f8fafc;
}

.hero-section h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
}

.hero-sub {
  font-size: 18px;
  margin: 20px 0 30px;
  color: #555;
}

.hero-buttons .btn {
  margin-right: 15px;
}

.hero-stats {
  margin-top: 30px;
  font-size: 15px;
  color: #666;
}

.hero-stats span {
  margin-right: 20px;
}

.hero-image {
  max-width: 100%;
}
.service-card {
  background: #f9f9f9;
  padding: 30px 20px;
  border-radius: 8px;
  text-align: center;
  height: 100%;
  transition: 0.3s ease;
}

.service-card:hover {
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.section-sub {
  color: #666;
  margin-bottom: 10px;
}
.seo-list {
  font-size: 16px;
  line-height: 2;
  color: #444;
}

.seo-box {
  background: #ffffff;
  padding: 30px;
  border-radius: 8px;
}

/* ===== PREMIUM FOOTER BACKGROUND ===== */
.footer {
    background: linear-gradient(
        180deg,
        #020617 0%,
        #02120d 40%,
        #020617 100%
    );
    position: relative;
    padding-top: 70px;
}

/* Top Glow Divider */
.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #22c55e,
        transparent
    );
    opacity: 0.7;
}

/* ===== COLUMN HOVER PREMIUM EFFECT ===== */
.footer .widget {
    transition: all 0.35s ease;
    padding: 18px;
    border-radius: 10px;
}

.footer .widget:hover {
    background: rgba(34, 197, 94, 0.05);
    transform: translateY(-3px);
}

/* ===== TEXT COLORS ===== */
.footer p,
.footer li,
.footer a {
    color: #cbd5e1;
}

.footer a:hover {
    color: #22c55e;
}

/* ===== TITLES ===== */
.footer .widget-title h2,
.footer .widget-title h3 {
    color: #f1f5f9;
    font-weight: 600;
}
.footer .widget {
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.35s ease;
}

.footer .widget:hover {
    border-color: rgba(34,197,94,0.35);
    box-shadow: 0 0 25px rgba(34,197,94,0.15);
    transform: translateY(-4px);
}

/* ===== TRUST CHECK ICON STYLE ===== */
.footer-links li {
    margin-bottom: 8px;
}

/* ===== COPYRIGHT AREA ===== */
.copyrights {
    background: #020617;
    border-top: 1px solid rgba(34, 197, 94, 0.15);
    padding: 25px 0;
}

/* ===== SOCIAL ICON PREMIUM ===== */
.social-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    transition: 0.3s;
	color: #333;
}

.social-icon:hover {
    background: #22c55e;
    color: #000;
}
.footer::after {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 400px;
    background: radial-gradient(
        circle,
        rgba(34,197,94,0.15),
        transparent 70%
    );
    filter: blur(80px);
    pointer-events: none;
}
.legacy-badge {
    display: inline-block;
    margin: 12px 0 18px 0;
    padding: 6px 14px;
    font-size: 13px;
    border-radius: 30px;
    background: rgba(34,197,94,0.15);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.35);
}
.cta-footer-divider {
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        #22c55e,
        transparent
    );
    opacity: 0.6;
}
.trust-seal {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-top: 20px;
    background: radial-gradient(circle, #22c55e, #064e3b);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(34,197,94,0.35);
}

.seal-inner {
    text-align: center;
    color: white;
}

.seal-years {
    font-size: 24px;
    font-weight: bold;
    display: block;
}

.seal-text {
    font-size: 11px;
    line-height: 1.2;
}
.locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 18px;
    margin-top: 10px;
}

.locations-grid span {
    font-size: 14px;
    color: #cbd5e1;
}
.mini-cta {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 14px;
}

.mini-cta-links a {
    margin-right: 14px;
    color: #4ade80;
    font-size: 13px;
}
.footer {
    background: #050a0f; /* Deeper dark blue/black */
    color: #cbd5e0;
    padding: 80px 0 40px;
    font-family: 'Inter', sans-serif;
}

.widget-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
}

/* The Green Glow Seal from your image, but cleaner */
.trust-seal-modern {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #00b09b, #96c93d);
    padding: 10px 20px;
    border-radius: 50px;
    margin-top: 20px;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 176, 155, 0.2);
}

.seal-number {
    font-size: 24px;
    font-weight: 800;
    margin-right: 10px;
    border-right: 1px solid rgba(255,255,255,0.3);
    padding-right: 10px;
}

.seal-label {
    font-size: 11px;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 1px;
}

/* Glassmorphism for CTA boxes */
.footer-cta-box, .quick-answers-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 15px;
    border-radius: 12px;
    margin-top: 20px;
}

.locations-tags span {
    display: inline-block;
    background: rgba(255,255,255,0.05);
    padding: 4px 12px;
    border-radius: 4px;
    margin: 0 5px 8px 0;
    font-size: 12px;
    transition: 0.3s;
}

.locations-tags span:hover {
    background: #96c93d;
    color: #000;
}
.footer-brand-title{
color:#fff;	
}
/* Remove those pesky default bullets */
.contact-list, .footer-links {
    list-style: none;
    padding-left: 0;
}

/* Align icons and text perfectly */
.contact-list li {
    display: flex;
    align-items: flex-start; /* Keeps text aligned if it wraps */
    gap: 12px;
    margin-bottom: 15px;
    color: #a0aec0;
}

.contact-list i {
    color: #48bb78; /* Match your brand green */
    margin-top: 4px; /* Manual nudge for perfect centering */
    width: 20px; /* Ensures text stays aligned vertically */
}

/* Fix the service links spacing */
.footer-links li {
    margin-bottom: 10px;
}

.footer-links li a {
    text-decoration: none;
    color: #cbd5e0;
    transition: color 0.2s ease;
}

.footer-links li a:hover {
    color: #48bb78;
}

/* Clean up the Location Tags */
.locations-tags span {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}
.expert-btn{
	padding-top:20px;
}

/* Home page manual css code */
	:root {
  --primary-navy: #002e5b;
  --accent-green: #28a745;
  --card-shadow: 0 10px 40px rgba(0,0,0,0.04);
  --transition-smooth: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
	.btn-primary-glow {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    background: var(--primary-navy); /* Using a variable */
    color: white;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-smooth);
    box-shadow: 0 10px 20px rgba(40, 167, 69, 0.2);
}

.btn-primary-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(40, 167, 69, 0.3);
}
        .hero-section { padding: 100px 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9cece 100%); }
        .trust-strip { background: #44b0f2; color: #fff; padding: 30px 0; margin-top: -50px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative; z-index: 10; }
        .section-padding { padding: 80px 0; }
        .service-card { padding: 30px; border: 1px solid #eee; transition: all 0.3s; border-radius: 10px; background: #fff; height: 100%; }
        .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
        .badge-new { background: #ff3b3b; color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; text-transform: uppercase; }
        .industry-tag { display: inline-block; padding: 10px 20px; margin: 5px; background: #fff; border: 1px solid #ddd; border-radius: 50px; transition: 0.3s; }
        .industry-tag:hover { background: #002e5b; color: #fff; }
	.hero-section { 
    padding: 140px 0; /* Extra padding for a "spacious" premium feel */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('images/dark-tech-bg2.jpg'); /* Ensure this path is correct */
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
    background-attachment: fixed; /* This creates a cool parallax effect on scroll */
    color: #ffffff;
}

.hero-section h1 {
    color: #ffffff !important;
    font-size: 48px;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-section .lead {
    color: #cccccc !important; /* Slightly dimmed white for better hierarchy */
    font-weight: 300;
}

.btn-primary {
    background-color: #081539; /* Or your brand's primary blue */
    border: none;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
}

.btn-default {
    background: transparent;
    color: #fff !important;
    border: 2px solid #ffffff;
    transition: all 0.3s;
}

.btn-default:hover {
    background: #ffffff;
    color: #000 !important;
}	
.domain-section-light {
    padding: 100px 0;
    background-color: #fcfcfc;
    overflow: hidden;
  }

  /* Initial hidden states */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .zoom-on-scroll {
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  /* When the 'visible' class is added via JS */
  .reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .zoom-on-scroll.visible {
    opacity: 1;
    transform: scale(1);
  }

  /* Stats Text Styling */
  .stats-text span {
    margin-right: 20px;
    font-weight: 600;
    color: #28a745;
    font-size: 15px;
  }

  /* Professional Search Card */
  .search-container-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border: 1px solid #eee;
  }

  .domain-input-group {
    display: flex;
    background: #f4f7f6;
    padding: 10px;
    border-radius: 8px;
  }

  .domain-input-group input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 15px;
    outline: none;
    font-size: 16px;
  }

  .search-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .search-btn:hover { background: #000; }

  .tld-checkboxes {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    color: #666;
  }

.stats-text {
    font-size: 14px;
    color: #888;
    margin-top: 15px;
    display: flex;
    gap: 20px;
}

.stats-text i {
    color: #28a745; /* Green checkmark */
    margin-right: 5px;
}
/* Section Styling */
.hosting-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.hosting-section h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 50px;
    color: #333;
}

/* Card Styling */
.host-card {
    padding: 40px 20px;
    border: 1px solid #14547b; /* Very light border */
    border-radius: 12px;
    background:#44b0f2;
    transition: all 0.3s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Hover Effect - Subtle Lift */
.host-card:hover {
    border-color: #d1d1d1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transform: translateY(-5px);
}

/* Icon Styling */
.host-icon {
    margin-bottom: 20px;
    height: 50px;
    display: flex;
    align-items: center;
}

.host-icon img {
    max-height: 50px;
    width: auto;
}

.host-icon i {
    font-size: 45px;
    color: #002e5b; /* Using your brand navy blue */
}

/* Text Styling */
.host-card h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #222;
}

.host-card p {
    font-size: 15px;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
}




/* Dark Tech Background */
  .ai-search-section {
    padding: 100px 0;
    /* Deep Navy Gradient with a hint of tech-green glow */
    background: radial-gradient(circle at 80% 20%, rgba(40, 167, 69, 0.15), transparent 40%), 
                linear-gradient(135deg, #001a33 0%, #002e5b 100%);
    color: #ffffff;
    border-top: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
  }

  /* Text Colors for Dark Mode */
  .ai-search-section h2 {
    color: #ffffff;
    font-size: 45px; 
    font-weight: 800;
  }
  
  .ai-search-section p {
    color: #b0c4de; /* Soft blue-grey for readability */
  }

  .gradient-text-alt {
    background: linear-gradient(90deg, #28a745, #85ffbd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Rocket Styling */
  .rocket-icon {
    /* Green Head, White/Silver Body */
    background: linear-gradient(180deg, #28a745 0%, #28a745 40%, #f8f9fa 40%, #f8f9fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Rocket Glow */
    filter: drop-shadow(0 0 20px rgba(40, 167, 69, 0.4));
    font-size: 130px;
  }

  /* Animations */
  @keyframes rocket-launch {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(-2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
  }

  @keyframes engine-fire {
    0% { box-shadow: 0 15px 20px -5px rgba(40, 167, 69, 0.7); opacity: 0.8; }
    50% { box-shadow: 0 25px 35px -5px rgba(255, 255, 255, 0.4); opacity: 1; }
    100% { box-shadow: 0 15px 20px -5px rgba(40, 167, 69, 0.7); opacity: 0.8; }
  }

  .floating-rocket {
    animation: rocket-launch 4s ease-in-out infinite;
    display: inline-block;
    position: relative;
  }

  /* The "Engine" Light under the rocket */
  .floating-rocket::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 25%;
    width: 50%;
    height: 20px;
    background: #28a745;
    filter: blur(15px);
    border-radius: 50%;
    animation: engine-fire 2s infinite;
    z-index: -1;
  }
.industry-grid {
  display: grid;
  /* Forces 4 equal columns on desktop */
  grid-template-columns: repeat(4, 1fr); 
  gap: 30px;
  margin-top: 50px;
}
/* Responsive adjustment for tablets and mobile */
@media (max-width: 1200px) {
  .industry-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 per row on tablets */
  }
}

@media (max-width: 768px) {
  .industry-grid {
    grid-template-columns: 1fr; /* 1 per row on mobile */
  }
}
  .industry-card {
    background: #ffffff;
    padding: 45px 35px;
    border-radius: 24px; /* Smoother, more modern corners */
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    text-align: left;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.03); /* Soft border */
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
  }

  /* The Hover State */
  .industry-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
    background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
  }

  /* Animated Icon Container */
  .icon-box {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 32px;
    transition: 0.3s;
  }

  .industry-card:hover .icon-box {
    transform: scale(1.1) rotate(-5deg);
  }

  .industry-card h4 {
    font-weight: 800;
    font-size: 22px;
    color: #1a1a1a;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
  }

  .industry-card p {
    font-size: 16px;
    color: #5f6368;
    line-height: 1.7;
    margin: 0;
  }

  /* Individual Color Themes */
  .card-red .icon-box { background: rgba(255, 71, 87, 0.1); color: #ff4757; }
  .card-red:hover { border-bottom: 4px solid #ff4757; }

  .card-teal .icon-box { background: rgba(0, 210, 211, 0.1); color: #00d2d3; }
  .card-teal:hover { border-bottom: 4px solid #00d2d3; }

  .card-gold .icon-box { background: rgba(255, 165, 2, 0.1); color: #ffa502; }
  .card-gold:hover { border-bottom: 4px solid #ffa502; }

  .card-navy .icon-box { background: rgba(0, 46, 91, 0.1); color: #002e5b; }
  .card-navy:hover { border-bottom: 4px solid #002e5b; }
  
  /* Row 2 - Custom Colors */
.card-purple .icon-box { background: rgba(128, 90, 213, 0.1); color: #805ad5; }
.card-purple:hover { border-bottom: 4px solid #805ad5; }

.card-blue .icon-box { background: rgba(56, 161, 105, 0.1); color: #38a169; }
.card-blue:hover { border-bottom: 4px solid #38a169; }

.card-law .icon-box { background: rgba(45, 55, 72, 0.1); color: #9bcf12; }
.card-law:hover { border-bottom: 4px solid #9bcf12; }

.card-orange .icon-box { background: rgba(221, 107, 32, 0.1); color: #dd6b20; }
.card-orange:hover { border-bottom: 4px solid #dd6b20; }

  .cta-section-premium {
    padding: 120px 0;
    /* Deep charcoal background with a subtle navy/green spotlight */
    background: radial-gradient(circle at 50% 50%, rgba(40, 167, 69, 0.12), transparent 50%), 
                #0a0a0a;
    position: relative;
    overflow: hidden;
    color: white;
  }

  .cta-content h2 {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
	color: #fff;
  }

  /* Subtitle with high-readability color */
  .cta-subtitle {
    font-size: 20px;
    color: #94a3b8; 
    margin-bottom: 40px;
  }

  /* Professional "Glow" Button */
  .btn-cta-main {
    background: #28a745;
    color: white;
    padding: 18px 45px;
    font-weight: 700;
    font-size: 18px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 rgba(40, 167, 69, 0);
    border: none;
  }

  .btn-cta-main:hover {
    transform: translateY(-4px);
    background: #34c759;
    box-shadow: 0 15px 30px rgba(40, 167, 69, 0.4);
    color: #fff;
  }

  /* Trust Badges Styling */
  .trust-footer {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    opacity: 0.7;
  }

  .trust-footer span {
    font-size: 14px;
    font-weight: 600;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Decorative Background Circles */
  .cta-bg-glow {
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 46, 91, 0.2), transparent 70%);
    z-index: 0;
  }
  /* Display submenu on hover */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
    top: 0;
    left: 100%; /* Push it to the right of the parent */
    margin-top: -6px;
}

/* Optional: Smooth out the positioning for better UX */
.dropdown-submenu {
    position: relative;
}

/* Ensure the arrow shows there is a submenu */
.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

/* Web hosting page */
/* Compact Internal Hero */
.hosting-hero-compact {
    padding: 100px 0 60px; /* Reduced vertical padding */
    background: linear-gradient(135deg, #bde2ed 0%, #f4f7f9 100%); /* Clean tech gradient */
    border-bottom: 1px solid #eee;
}

.internal-hero-title {
    font-size: 34px; /* Smaller than homepage */
    font-weight: 800;
    color: #222;
    margin: 15px 0;
    line-height: 1.2;
}

.internal-hero-title span {
    color: #007bff; /* Highlight color */
}

.hero-subtitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
}

.hero-bullets {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns for bullets to save space */
    gap: 10px 20px;
    margin-bottom: 30px;
}

.bullet {
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

.bullet i {
    color: #28a745;
    margin-right: 8px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-whatsapp-link {
    font-weight: 700;
    color: #25d366;
    text-decoration: none;
    font-size: 16px;
}

/* Floating Image Adjustment */
.hero-image-wrapper img {
    max-width: 100%;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.trust-authority-section {
    padding: 80px 0;
    background-color: #fcfdfe;
}

.service-trust-card {
    background: #fff;
    padding: 40px 20px;
    border-radius: 12px;
    border: 1px solid #edf2f7;
    transition: all 0.3s ease;
    height: 100%;
}

.service-trust-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 123, 255, 0.08);
    border-color: #007bff;
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(0, 123, 255, 0.05);
    color: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
    transition: 0.3s;
}

.service-trust-card:hover .icon-circle {
    background: #007bff;
    color: #fff;
}

.service-trust-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.service-trust-card p {
    font-size: 14px;
    color: #718096;
    line-height: 1.6;
}

.trust-footer-note {
    font-size: 18px;
    color: #2d3748;
}

/* Solution Gateway Cards */
.solution-card {
    background: #fff;
    padding: 30px 25px;
    border-radius: 12px;
    border: 1px solid #eef2f6;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.solution-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: #007bff;
}

.sol-icon {
    font-size: 32px;
    color: #007bff;
    margin-bottom: 20px;
	text-align:center;
}

.solution-card h4 {
    font-weight: 700;
    font-size: 19px;
    margin-bottom: 10px;
}

.sol-ideal {
    font-size: 13px;
    color: #007bff;
    background: rgba(0, 123, 255, 0.08);
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
}

.sol-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1; /* Pushes button to the bottom */
}

.sol-features li {
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
    position: relative;
    padding-left: 25px;
}

.sol-features li::before {
    content: "\f058"; /* FontAwesome check-circle */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #28a745;
}

/* Featured Styling for WP */
.solution-card.featured {
    border: 2px solid #007bff;
    position: relative;
}

.solution-card.featured::after {
    content: "MOST POPULAR";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #007bff;
    color: #fff;
    padding: 2px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
}

.btn-block {
    display: block;
    width: 100%;
    padding: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* Dark Section Background */
.section-dark-hosting {
    background: #0b1120; /* Deep midnight blue */
    padding: 80px 0;
}

.section-dark-hosting .text-white { color: #ffffff !important; }
.text-muted-light { color: #94a3b8; }

/* Solution Gateway Cards - Dark Version */
.solution-card {
    background: #161e2e; /* Dark card background */
    padding: 30px 25px;
    border-radius: 12px;
    border: 1px solid #2d3748; /* Subtle border */
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.solution-card h4 {
    color: #f8fafc; /* Light text for dark cards */
    font-weight: 700;
    font-size: 19px;
    margin-bottom: 10px;
    text-align: center;
}

.solution-card:hover {
    transform: translateY(-10px);
    /* The Glowing Effect */
    border-color: #007bff;
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.4); 
    background: #1a2436;
}

.sol-icon {
    font-size: 32px;
    color: #3b82f6; /* Brightened blue for dark mode visibility */
    margin-bottom: 20px;
    text-align: center;
}

.sol-ideal {
    font-size: 12px;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.15); /* Semi-transparent blue */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 20px;
    text-align: center;
}

.sol-features li {
    font-size: 14px;
    color: #cbd5e1; /* Soft grey text */
    margin-bottom: 12px;
    position: relative;
    padding-left: 25px;
}

/* Featured Styling - WordPress */
.solution-card.featured {
    background: #1d2d50; /* A visibly lighter navy than #161e2e */
    border: 2px solid #3b82f6;
    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.1); /* Inner glow */
}
.solution-card.featured::after {
    content: "MOST POPULAR";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #007bff;
    color: #fff;
    padding: 2px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
}

/*** Hostng Advantages Section **/
.hosting-advantage-grid {
    padding: 100px 0;
    background: #ffffff;
}

.info-block {
    padding: 30px;
    height: 100%;
    border-radius: 15px;
    transition: 0.3s ease;
}

.block-title {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 25px;
    color: #222;
    display: flex;
    align-items: center;
    gap: 12px;
}

.block-title i { color: #007bff; }

/* Column 1 Styling */
.check-list-modern { list-style: none; padding: 0; }
.check-list-modern li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    color: #444;
}
.check-list-modern li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #28a745;
    margin-right: 10px;
}

/* Column 2 Styling */
.benefit-list { list-style: none; padding: 0; }
.benefit-list li {
    margin-bottom: 15px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}
.benefit-list li i {
    width: 30px;
    height: 30px;
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Column 3 Styling: Tags */
.industry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag {
    background: #f8f9fa;
    border: 1px solid #eee;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    transition: 0.3s;
}
.tag:hover {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.location-box h5 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
}
.faq-section-modern {
    background-color: #f8fafc;
    padding: 100px 0;
}

.faq-panel {
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    margin-bottom: 15px !important;
    box-shadow: none !important;
    transition: 0.3s;
}

.faq-panel:hover {
    border-color: #007bff !important;
}

.faq-panel .panel-heading {
    background: #fff !important;
    padding: 20px !important;
    border-radius: 10px !important;
}

.faq-panel .panel-title a {
    font-size: 17px;
    font-weight: 700;
    color: #1a202c;
    text-decoration: none;
    display: block;
}

.faq-panel .panel-title a i {
    font-size: 14px;
    color: #718096;
    transition: 0.3s;
}

.faq-panel .panel-title a[aria-expanded="true"] i {
    transform: rotate(180deg);
    color: #007bff;
}

.faq-panel .panel-body {
    padding: 0 20px 20px !important;
    font-size: 15px;
    line-height: 1.6;
    color: #4a5568;
    border-top: none !important;
}
.faq-cta-wrap {
    padding: 100px 0;
    background-color: #fcfdfe;
}

.faq-header-compact h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 30px;
    text-align: left; /* Aligned to match the columns */
}

/* CTA Sidebar Card Styling */
.cta-sidebar-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid #eef2f6;
    box-shadow: 0 20px 40px rgba(0, 123, 255, 0.05);
    position: sticky;
    top: 100px; /* Makes it stay on screen as they scroll */
}

.cta-badge {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 15px;
}

.cta-sidebar-card h4 {
    font-weight: 800;
    margin-bottom: 15px;
    color: #1a202c;
}

.cta-mini-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.cta-mini-list li {
    font-size: 14px;
    margin-bottom: 10px;
    color: #4a5568;
}

.cta-mini-list i { color: #28a745; margin-right: 8px; }

.btn-whatsapp-sidebar {
    background: #25d366;
    color: #fff;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    text-align: center;
    display: block;
    transition: 0.3s;
}

.btn-whatsapp-sidebar:hover {
    background: #128c7e;
    color: #fff;
    transform: translateY(-3px);
}

/* -------------------------------------------------------------------------------*/
/* Style sheet for index page */
    
	:root {
  --primary-navy: #002e5b;
  --accent-green: #28a745;
  --card-shadow: 0 10px 40px rgba(0,0,0,0.04);
  --transition-smooth: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
}
	.btn-primary-glow {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    background: var(--primary-navy); /* Using a variable */
    color: white;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-smooth);
    box-shadow: 0 10px 20px rgba(40, 167, 69, 0.2);
}

.btn-primary-glow:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(40, 167, 69, 0.3);
}
        .hero-section { padding: 100px 0; background: linear-gradient(135deg, #f8f9fa 0%, #e9cece 100%); }
        .trust-strip { background: #44b0f2; color: #fff; padding: 30px 0; margin-top: -50px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative; z-index: 10; }
        .section-padding { padding: 80px 0; }
        .service-card { padding: 30px; border: 1px solid #eee; transition: all 0.3s; border-radius: 10px; background: #fff; height: 100%; }
        .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
        .badge-new { background: #ff3b3b; color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; text-transform: uppercase; }
        .industry-tag { display: inline-block; padding: 10px 20px; margin: 5px; background: #fff; border: 1px solid #ddd; border-radius: 50px; transition: 0.3s; }
        .industry-tag:hover { background: #002e5b; color: #fff; }
	.hero-section { 
    padding: 140px 0; /* Extra padding for a "spacious" premium feel */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgb(35 63 115 / 70%)), url(images/dark-tech-bg2.jpg);
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
    background-attachment: fixed; /* This creates a cool parallax effect on scroll */
    color: #ffffff;
}

.hero-section h1 {
    color: #ffffff !important;
    font-size: 48px;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.hero-section .lead {
    color: #cccccc !important; /* Slightly dimmed white for better hierarchy */
    font-weight: 300;
}

.btn-primary {
    background-color: #062349; /* Or your brand's primary blue */
    border: none;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
}

.btn-default {
    background: transparent;
    color: #fff !important;
    border: 2px solid #ffffff;
    transition: all 0.3s;
}

.btn-default:hover {
    background: #ffffff;
    color: #000 !important;
}	
.domain-section-light {
    padding: 100px 0;
    background-color: #fcfcfc;
    overflow: hidden;
  }

  /* Initial hidden states */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .zoom-on-scroll {
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  /* When the 'visible' class is added via JS */
  .reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .zoom-on-scroll.visible {
    opacity: 1;
    transform: scale(1);
  }

  /* Stats Text Styling */
  .stats-text span {
    margin-right: 20px;
    font-weight: 600;
    color: #28a745;
    font-size: 15px;
  }

  /* Professional Search Card */
  .search-container-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border: 1px solid #eee;
  }

  .domain-input-group {
    display: flex;
    background: #f4f7f6;
    padding: 10px;
    border-radius: 8px;
  }

  .domain-input-group input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 15px;
    outline: none;
    font-size: 16px;
  }

  .search-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }

  .search-btn:hover { background: #000; }

  .tld-checkboxes {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    color: #666;
  }

.stats-text {
    font-size: 14px;
    color: #888;
    margin-top: 15px;
    display: flex;
    gap: 20px;
}

.stats-text i {
    color: #28a745; /* Green checkmark */
    margin-right: 5px;
}
/* Section Styling */
.hosting-section {
    padding: 80px 0;
    background-color: #ffffff;
}

.hosting-section h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 50px;
    color: #333;
}

/* Card Styling */
.host-card {
    padding: 40px 20px;
    border: 1px solid #14547b; /* Very light border */
    border-radius: 12px;
    background:#44b0f2;
    transition: all 0.3s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Hover Effect - Subtle Lift */
.host-card:hover {
    border-color: #d1d1d1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transform: translateY(-5px);
}

/* Icon Styling */
.host-icon {
    margin-bottom: 20px;
    height: 50px;
    display: flex;
    align-items: center;
}

.host-icon img {
    max-height: 50px;
    width: auto;
}

.host-icon i {
    font-size: 45px;
    color: #002e5b; /* Using your brand navy blue */
}

/* Text Styling */
.host-card h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #222;
}

.host-card p {
    font-size: 15px;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
}




/* Dark Tech Background */
  .ai-search-section {
    padding: 100px 0;
    /* Deep Navy Gradient with a hint of tech-green glow */
    background: radial-gradient(circle at 80% 20%, rgba(40, 167, 69, 0.15), transparent 40%), 
                linear-gradient(135deg, #001a33 0%, #002e5b 100%);
    color: #ffffff;
    border-top: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
  }

  /* Text Colors for Dark Mode */
  .ai-search-section h2 {
    color: #ffffff;
    font-size: 45px; 
    font-weight: 800;
  }
  
  .ai-search-section p {
    color: #b0c4de; /* Soft blue-grey for readability */
  }

  .gradient-text-alt {
    background: linear-gradient(90deg, #28a745, #85ffbd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Rocket Styling */
  .rocket-icon {
    /* Green Head, White/Silver Body */
    background: linear-gradient(180deg, #28a745 0%, #28a745 40%, #f8f9fa 40%, #f8f9fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Rocket Glow */
    filter: drop-shadow(0 0 20px rgba(40, 167, 69, 0.4));
    font-size: 130px;
  }

  /* Animations */
  @keyframes rocket-launch {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(-2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
  }

  @keyframes engine-fire {
    0% { box-shadow: 0 15px 20px -5px rgba(40, 167, 69, 0.7); opacity: 0.8; }
    50% { box-shadow: 0 25px 35px -5px rgba(255, 255, 255, 0.4); opacity: 1; }
    100% { box-shadow: 0 15px 20px -5px rgba(40, 167, 69, 0.7); opacity: 0.8; }
  }

  .floating-rocket {
    animation: rocket-launch 4s ease-in-out infinite;
    display: inline-block;
    position: relative;
  }

  /* The "Engine" Light under the rocket */
  .floating-rocket::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 25%;
    width: 50%;
    height: 20px;
    background: #28a745;
    filter: blur(15px);
    border-radius: 50%;
    animation: engine-fire 2s infinite;
    z-index: -1;
  }
.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 50px;
  }

  .industry-card {
    background: #ffffff;
    padding: 45px 35px;
    border-radius: 24px; /* Smoother, more modern corners */
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    text-align: left;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0,0,0,0.03); /* Soft border */
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
  }

  /* The Hover State */
  .industry-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
    background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
  }

  /* Animated Icon Container */
  .icon-box {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 32px;
    transition: 0.3s;
  }

  .industry-card:hover .icon-box {
    transform: scale(1.1) rotate(-5deg);
  }

  .industry-card h4 {
    font-weight: 800;
    font-size: 22px;
    color: #1a1a1a;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
  }

  .industry-card p {
    font-size: 16px;
    color: #5f6368;
    line-height: 1.7;
    margin: 0;
  }

  /* Individual Color Themes */
  .card-red .icon-box { background: rgba(255, 71, 87, 0.1); color: #ff4757; }
  .card-red:hover { border-bottom: 4px solid #ff4757; }

  .card-teal .icon-box { background: rgba(0, 210, 211, 0.1); color: #00d2d3; }
  .card-teal:hover { border-bottom: 4px solid #00d2d3; }

  .card-gold .icon-box { background: rgba(255, 165, 2, 0.1); color: #ffa502; }
  .card-gold:hover { border-bottom: 4px solid #ffa502; }

  .card-navy .icon-box { background: rgba(0, 46, 91, 0.1); color: #002e5b; }
  .card-navy:hover { border-bottom: 4px solid #002e5b; }
  .cta-section-premium {
    padding: 120px 0;
    /* Deep charcoal background with a subtle navy/green spotlight */
    background: radial-gradient(circle at 50% 50%, rgba(40, 167, 69, 0.12), transparent 50%), 
                #0a0a0a;
    position: relative;
    overflow: hidden;
    color: white;
  }

  .cta-content h2 {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
	color: #fff;
  }

  /* Subtitle with high-readability color */
  .cta-subtitle {
    font-size: 20px;
    color: #94a3b8; 
    margin-bottom: 40px;
  }

  /* Professional "Glow" Button */
  .btn-cta-main {
    background: #28a745;
    color: white;
    padding: 18px 45px;
    font-weight: 700;
    font-size: 18px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 rgba(40, 167, 69, 0);
    border: none;
  }

  .btn-cta-main:hover {
    transform: translateY(-4px);
    background: #34c759;
    box-shadow: 0 15px 30px rgba(40, 167, 69, 0.4);
    color: #fff;
  }

  /* Trust Badges Styling */
  .trust-footer {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    opacity: 0.7;
  }

  .trust-footer span {
    font-size: 14px;
    font-weight: 600;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Decorative Background Circles */
  .cta-bg-glow {
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 46, 91, 0.2), transparent 70%);
    z-index: 0;
  }
  .faq-header-compact p {
    margin: 0;
    color: #6b6b6b;
    line-height: 1.5;
}
 /* -------------------------------------------------------------------------------*/
 
 /********************* DOMAINS PAGE REVAMP *********************/
 
.domain-hero-centered {
    position: relative;
    padding: 120px 0 100px 0; /* Ensures it stays below your sticky header */
    background-image: url('images/domains-illustration.jpg'); 
    background-size: cover;
    background-position: center;
    color: #ffffff;
    overflow: hidden;
    text-align: center;
}

/* Enhanced Dark Overlay with Blur */
.domain-hero-centered .background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(19 19 43 / 82%); /* Deep blue-black tint */
    backdrop-filter: blur(2px); /* Mutes the sharp lines of the illustration */
    z-index: 1;
}
.domain-hero-centered .container {
    position: relative;
    z-index: 2;
}
/* Ensure the heading stands out against a busy background */
.internal-hero-title-light {
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
	color:#ffffff;
	font-size:32px;
	
}
.hero-subtitle-light {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 25px;
}

/* Search Box Layout Fix */
.centered-search-container {
    margin: 30px auto;
    max-width: 750px;
    width: 100%;
}

.search-box-wrapper {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 6px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.search-input {
    flex: 1;
    border: none !important;
    padding: 10px 25px;
    font-size: 18px;
    outline: none;
    background: transparent;
    color: #333;
    min-width: 0; /* Prevents input from pushing out button */
}

.search-btn {
    background: #0062cc; /* Matches your branding */
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 700;
    white-space: nowrap;
    transition: 0.3s;
}

.search-btn:hover {
    background: #004a9b;
}

/* Footer elements within Hero */
.popular-tlds-centered {
    margin-top: 15px;
    font-size: 15px;
}

.popular-tlds-centered span {
    margin: 0 10px;
}

.popular-tlds-centered strong {
    color: #00d0ff;
}

.hero-bullets-centered {
    margin-top: 25px;
}

.hero-bullets-centered span {
    margin: 0 12px;
    font-size: 15px;
    opacity: 0.9;
	color: #24dfe8;
}

/* Mobile Fix */
@media (max-width: 767px) {
    .domain-hero-centered { padding-top: 130px; }
    .search-box-wrapper { flex-direction: column; background: transparent; box-shadow: none; padding: 0; }
    .search-input { background: #fff; width: 100%; border-radius: 50px !important; margin-bottom: 10px; height: 55px; }
    .search-btn { width: 100%; height: 55px; }
}

/* Service Cards */
.services-dp { padding: 60px 0; background: #f9f9f9; }
.card-dp { 
    background: #fff; padding: 30px; text-align: center; 
    border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: 0.3s;
}
.card-dp:hover { transform: translateY(-10px); }
.card-dp i { font-size: 40px; color: #0062cc; margin-bottom: 15px; }

/* Pricing Table */
.table-dp { background: #fff; border-radius: 10px; overflow: hidden; }
.table-dp thead { background: #0062cc; color: #fff; }
.btn-sm-dp { background: #0062cc; color: #fff; padding: 5px 15px; border-radius: 5px; text-decoration: none; }

/* Section Titles */
.section-title-dp { text-align: center; margin-bottom: 50px; }
.section-title-dp h2 { font-weight: 800; color: #333; }

/* Steps */
.step-item-dp { margin-bottom: 15px; font-weight: 600; }
.step-item-dp span { 
    background: #0062cc; color: #fff; width: 30px; height: 30px; 
    display: inline-block; text-align: center; border-radius: 50%; margin-right: 10px;
}

/* Final CTA */
.final-cta-dp { padding: 80px 0; background: #001a33; color: #fff; }
.btn-lg-dp { 
    display: inline-block; padding: 15px 40px; background: #00d0ff; 
    color: #fff; font-weight: bold; border-radius: 50px; text-decoration: none; margin-top: 20px;
}
/* --- Why Choose Us Enhancement --- */
.why-choose-dp {
    padding: 80px 0;
    background-color: #ffffff;
}

.section-title-dp {
    text-align: center;
    margin-bottom: 50px;
}

.title-dp {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.subtitle-dp {
    color: #666;
    font-size: 18px;
}

.feature-item-dp {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    padding: 15px;
    transition: 0.3s;
}

.feature-item-dp:hover {
    background: #f8f9fa;
    border-radius: 10px;
}

.feature-icon-dp {
    min-width: 50px;
    height: 50px;
    background: #0062cc;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 20px;
}

.feature-text-dp h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

.feature-text-dp p {
    margin: 0;
    color: #6b6b6b;
    line-height: 1.5;
}

/* Floating Animation for Illustration */
.floating-dp {
    animation: floating 3s ease-in-out infinite;
    max-width: 100%;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* --- Pricing Table Enhancement --- */
.pricing-table-dp {
    padding: 80px 0;
    background-color: #f4f7fa;
}

.table-container-dp {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow-x: auto;
}

.table-dp {
    width: 100%;
    border-collapse: collapse;
}

.table-dp th {
    background: #0062cc;
    color: #fff;
    padding: 15px;
    text-align: left;
    font-weight: 600;
}

.table-dp td {
    padding: 20px 15px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.tld-name-dp {
    font-size: 18px;
    font-weight: 700;
    color: #0062cc;
}

.price-tag-dp {
    font-weight: 700;
    color: #28a745; /* Green for pricing prominence */
    font-size: 18px;
}

.btn-register-dp {
    background: #0062cc;
    color: white !important;
    padding: 8px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: 0.3s;
}

.btn-register-dp:hover {
    background: #004a9b;
    box-shadow: 0 4px 12px rgba(0,98,204,0.3);
}
/*****************************************************************


/* ---------------------------- doman basic --------------------- */
/* Deep Midnight Theme */
.edu-dark-section {
    background:#e5f1ff;
    color: #ffffff;
    padding: 100px 20px; /* Significant vertical padding */
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Wider Container */
.container-large {
    max-width: 1300px; /* Expanded for a "Big" look */
    margin: 0 auto;
}

.section-headline {
    text-align: center;
    font-size: 2.8rem; /* Large headline */
    font-weight: 800;
    margin-bottom: 60px;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Bigger Grid */
.edu-grid-large {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px; /* More space between boxes */
}

/* Individual Large Boxes */
.edu-box {
    background: rgb(19 20 51);
    padding: 60px 45px; /* Heavy internal padding */
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
}

/* Featured (Middle) Box */
.featured {
    background: rgba(37, 99, 235, 0.05); /* Subtle blue tint */
    border: 1px solid rgba(37, 99, 235, 0.4);
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.1);
    transform: scale(1.05); /* Makes it visually dominant */
}

.edu-box:hover {
    transform: translateY(-15px) scale(1.02);
    background: #162f49;
    border-color: #3b82f6;
}

.edu-top {
    margin-bottom: 25px;
}

.edu-emoji {
    font-size: 3rem; /* Huge icons */
    display: block;
    margin-bottom: 15px;
}

.edu-box h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #3b82f6;
}

.edu-box p {
    font-size: 1.3rem;
    line-height: 1.8;
    color: #fff;
    margin-bottom: 30px;
}

/* List Styling */
.benefit-list {
    list-style: none;
    padding: 0;
    margin-top: auto; /* Pushes list to the bottom */
}

.benefit-list li {
    font-size: 1.2rem;
    margin-bottom: 10px;
    padding-left: 28px;
    position: relative;
    color: #48586c;
}

.benefit-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #3b82f6;
    font-weight: bold;
}

.status-badge {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-block;
    align-self: flex-start;
}

/* Mobile Fix */
@media (max-width: 1024px) {
    .edu-grid-large { grid-template-columns: 1fr; }
    .featured { transform: none; margin: 20px 0; }
    .section-headline { font-size: 2rem; }
}
/* ========================================================= */

/* TLD section chatgpt================= */
.tld-section {
  padding: 70px 20px;
  background: #f9fbfd;
  font-family: Arial, sans-serif;
}

.container {
  max-width: 1200px;
  margin: auto;
}

.section-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #1a1a1a;
}

.section-subtitle {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px auto;
  color: #555;
  font-size: 16px;
}

.tld-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.tld-card {
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
}

.tld-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.tld-card h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #222;
}

.tld-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
}

.tld-card ul li {
  margin-bottom: 10px;
  color: #444;
  font-size: 15px;
}

.tld-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #0066ff;
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  transition: 0.3s ease;
}

.tld-btn:hover {
  background: #004bcc;
}

/* ----------------------------------------- */

/* -----------------------Transfer section------------------------------- */
.transfer-section {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  padding: 80px 20px;
  font-family: Arial, sans-serif;
  color: #ffffff;
}

.transfer-container {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.transfer-title {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 10px;
}

.transfer-subtitle {
  color: #cbd5e1;
  max-width: 700px;
  margin: 0 auto 60px auto;
  font-size: 16px;
}

.transfer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  margin-bottom: 60px;
}

.transfer-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 30px 20px;
  border-radius: 14px;
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}

.transfer-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 20px rgba(0, 132, 255, 0.6);
  border-color: rgba(0, 132, 255, 0.6);
}

.transfer-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #38bdf8;
}

.transfer-card p {
  font-size: 14px;
  color: #e2e8f0;
}

.transfer-conditions {
  background: rgba(0, 132, 255, 0.1);
  padding: 40px;
  border-radius: 16px;
  border: 1px solid rgba(0, 132, 255, 0.3);
  box-shadow: 0 0 25px rgba(0, 132, 255, 0.4);
  text-align: left;
  max-width: 900px;
  margin: auto;
}

.transfer-conditions h3 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #38bdf8;
  text-align: center;
}

.transfer-conditions ul {
  list-style: none;
  padding: 0;
}

.transfer-conditions ul li {
  margin-bottom: 12px;
  font-size: 14px;
  position: relative;
  padding-left: 25px;
}

.transfer-conditions ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #38bdf8;
  font-weight: bold;
}
 .dom-price-section {
    --domprice-bg:        #05060f;
    --domprice-card:      #111328;
    --domprice-border:    rgba(255,255,255,0.07);
    --domprice-accent1:   #4f8eff;
    --domprice-accent2:   #a259ff;
    --domprice-accent3:   #00e5c0;
    --domprice-text:      #eaeaf0;
    --domprice-muted:     #7b7d9a;
    --domprice-font-head: 'Syne', sans-serif;
    --domprice-font-body: 'DM Sans', sans-serif;
  }
  .dom-price-currency {
    font-family: var(--domprice-font-head);
    font-size: 14px;
    font-weight: 300;
    color: var(--domprice-muted);
    line-height: 1.8;
  }
/* ------------------------------------------------------------ */

/* ========================================= SEO SERIVES =========================== */
/* Container & General Styles */
.seo-results-process {
    padding: 80px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    color: #333;
}
.container {
    margin: 0 auto;
    padding: 0 20px;
}
.section-header {
    text-align: center;
    margin-bottom: 50px;
}
.section-header h2 {
    font-size: 2.2rem;
    color: #0056b3; /* Matches your brand blue */
    margin-bottom: 10px;
}

/* Results Grid */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}
.result-card {
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease;
}
.result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.stat {
    font-size: 2.5rem;
    font-weight: bold;
    color: #28a745; /* Growth Green */
    margin: 15px 0;
}
.stat span {
    display: block;
    font-size: 1rem;
    color: #666;
    font-weight: normal;
}

/* Process Timeline */
.process-timeline {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}
.process-step {
    flex: 1;
    min-width: 180px;
    position: relative;
    padding: 20px;
	background-color: #e1f8f8;
	overflow: hidden;
}
.step-num {
    font-size: 3rem;
    font-weight: 800;
    color: #b5cfdec9;
    position: absolute;
    top: 2px;
    right: 10px;
    z-index: 1;
	line-height: 1;
    pointer-events: none;
}
.process-step h4 {
    position: relative;
    z-index: 2;
    color: #0056b3;
    margin-bottom: 10px;
}
.process-step p {
    font-size: 1.2rem;
    color: #666;
}

/* UI Elements */
.section-divider {
    border: 0;
    border-top: 1px solid #eee;
    margin: 60px 0;
}
.cta-wrapper {
    text-align: center;
}
.btn-outline {
    display: inline-block;
    padding: 12px 30px;
    border: 2px solid #0056b3;
    color: #0056b3;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s;
}
.btn-outline:hover {
    background: #0056b3;
    color: #fff;
}


.seo-cta-compact {
  /* Reduced padding for smaller height */
  padding: 60px 0; 
  /* Dynamic gradient to separate from black footer */
  background: linear-gradient(135deg, #002e5b 0%, #001a33 100%);
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.seo-cta-compact .pre-title {
  color: #00d2d3; /* Vibrant teal from your industry cards */
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 14px;
  display: block;
  margin-bottom: 10px;
}

.seo-cta-compact h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 15px;
}

.seo-cta-compact h2 span {
  color: #2ecc71; /* Success green from your results section */
}

.seo-cta-compact p {
  font-size: 18px;
  max-width: 650px;
  margin: 0 auto 30px;
  opacity: 0.9;
}

.btn-whatsapp {
  background: #25d366;
  color: white;
  padding: 15px 35px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
  box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
}

.btn-whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
  background: #20ba5a;
}

.cta-trust-badges {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 14px;
  opacity: 0.7;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .cta-trust-badges {
    flex-direction: column;
    gap: 10px;
  }
}

/* seo pricing section */
/* Container at 90% width */
.seo-pricing-container {
    width: 80%;
    max-width: 1300px;
    margin: 50px auto;
}

.seo-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.seo-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Dark Header like the Hosting Screenshot */
.seo-card-header {
    background: #1a1a1a; /* Dark background */
    color: #fff;
    padding: 25px 5px;
    text-align: center;
}

.seo-header-top {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 20px;
}
	
.seo-icon-box {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Icon Colors */
.seo-bg-teal { background: rgba(0, 210, 211, 0.2); color: #00d2d3; }
.seo-bg-blue { background: rgba(0, 123, 255, 0.2); color: #007bff; }
.seo-bg-purple { background: rgba(128, 90, 213, 0.2); color: #a29bfe; }

.seo-package-name {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
	color: #fff;
}

.seo-price-wrap .seo-amount {
    font-size: 20px;
    font-weight: 400;
}

/* Body and Button */
.seo-card-body {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.seo-features {
    list-style: none;
    padding: 0;
    margin: 20px 0 30px 0;
    text-align: left;
    flex-grow: 1;
}

.seo-features li {
    margin-bottom: 12px;
    font-size: 15px;
    color: #444;
}

.seo-features i {
    color: #00d2d3;
    margin-right: 8px;
}

.seo-order-btn {
    background: #1a1a1a;
    color: #fff;
    padding: 14px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
    display: block;
    margin-bottom: 15px;
}

.seo-order-btn:hover {
    background: #006ed3;
	color:#fff;
}

/* Featured / Recommended Plan */
.seo-featured {
    border: 2px solid #dfe0e0;
    transform: scale(1.03);
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}

.seo-restriction { font-size: 14px; color: #ff4757; font-weight: 600; }
.seo-suitability-alt { font-size: 14px; color: #00d2d3; font-weight: 600; }

.seo-suitability { font-size: 14px; color: #3892a3; font-weight: 600; }

/* SEO GAQ */
.seo-faq-section {
    padding: 80px 0;
    background-color: #f9fafb;
}

.seo-faq-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.seo-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.seo-section-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
}

.seo-section-header h2 span {
    color: #00d2d3;
}

.seo-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.seo-faq-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
}

.seo-faq-question {
    padding: 20px;
    font-weight: 700;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
}

.seo-faq-question:hover {
    background: #f0fdfa;
    color: #00d2d3;
}

.seo-faq-answer {
    padding: 0 20px 20px;
    color: #666;
    line-height: 1.6;
    font-size: 15px;
    /* For a simple toggle effect, you can use JS or keep it visible */
}

.seo-faq-question i {
    font-size: 12px;
    transition: 0.3s;
}

/* Responsive */
@media (max-width: 768px) {
    .seo-faq-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------WEB DESGIN------------------- */
.webdesign-hero-section {
    width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden; /* Ensures no scrollbars if the image slightly overflows */
  line-height: 0;   /* Removes any bottom whitespace from the image */
}

.webdesign-hero-section img {
  width: 100%;      /* Covers full width */
  height: auto;
  max-height: 500px;      /* Fixed height of 3 inches */
  object-fit: cover; /* Maintains aspect ratio without stretching */
  display: block;
}
.hero-webdesign {
  background: url('images/web-design-illustration.jpg') no-repeat center center/cover;
  height: 520px;
  position: relative;
}

.hero-overlay {
  
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-content {
  max-width: 600px;
  padding-left: 80px;
  color: #ffffff;
}

.hero-content h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 20px;
  color:#fff;
}

.hero-content p {
  font-size: 18px;
  margin-bottom: 25px;
  color: #e2e8f0;
}

.hero-btn {
  background: #06b6d4;
  padding: 14px 30px;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: 0.3s ease;
}

.hero-btn:hover {
  background: #fff;
  color:#000;
}
/* -----------------SEO PACKAGES NEW-------------------------*/
  /* =====================
     SCOPED CSS VARIABLES
     (scoped to .sp-seo-section so they don't
      leak into the rest of the page)
  ===================== */
  .sp-seo-section {
    --sp-bg:        #05060f;
    --sp-card:      #111328;
    --sp-border:    rgba(255,255,255,0.07);
    --sp-accent1:   #4f8eff;
    --sp-accent2:   #a259ff;
    --sp-accent3:   #00e5c0;
    --sp-text:      #eaeaf0;
    --sp-muted:     #7b7d9a;
    --sp-font-head: 'Syne', sans-serif;
    --sp-font-body: 'DM Sans', sans-serif;
  }

  /* =====================
     SECTION WRAPPER
  ===================== */
  .sp-seo-section {
    position: relative;
    padding: 100px 24px 120px;
    overflow: hidden;
    background: var(--sp-bg);
    color: var(--sp-text);
    font-family: var(--sp-font-body);
  }

  /* Background grid */
  .sp-seo-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(79,142,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(79,142,255,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
  }

  /* Glow orbs */
  .sp-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.18;
    pointer-events: none;
  }
  .sp-orb-1 { width: 500px; height: 500px; background: var(--sp-accent1); top: -100px; left: -150px; }
  .sp-orb-2 { width: 400px; height: 400px; background: var(--sp-accent2); bottom: 0; right: -100px; }
  .sp-orb-3 { width: 300px; height: 300px; background: var(--sp-accent3); top: 40%; left: 50%; transform: translateX(-50%); }

  /* =====================
     HEADER
  ===================== */
  .sp-section-head {
    text-align: center;
    margin-bottom: 72px;
    position: relative;
    z-index: 2;
  }

  .sp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sp-font-body);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sp-accent3);
    background: rgba(0,229,192,0.08);
    border: 1px solid rgba(0,229,192,0.2);
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 24px;
  }
  .sp-eyebrow::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--sp-accent3);
    border-radius: 50%;
    animation: sp-pulse 2s infinite;
  }

  @keyframes sp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(1.5); }
  }

  .sp-section-title {
    font-family: var(--sp-font-head);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
    color: var(--sp-text);
  }
  .sp-section-title span {
    background: linear-gradient(135deg, var(--sp-accent1), var(--sp-accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .sp-section-sub {
    font-size: 17px;
    color: var(--sp-muted);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: 300;
  }

  /* =====================
     CARDS GRID
  ===================== */
  .sp-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    align-items: start;
  }

  @media (max-width: 900px) {
    .sp-cards-grid { grid-template-columns: 1fr; max-width: 480px; }
  }

  /* =====================
     CARD BASE
  ===================== */
  .sp-card {
    background: var(--sp-card);
    border: 1px solid var(--sp-border);
    border-radius: 24px;
    padding: 36px 32px 40px;
    position: relative;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s;
    animation: sp-fadeUp 0.6s both;
    box-sizing: border-box;
  }
  .sp-card:nth-child(1) { animation-delay: 0.1s; }
  .sp-card:nth-child(2) { animation-delay: 0.2s; }
  .sp-card:nth-child(3) { animation-delay: 0.3s; }

  @keyframes sp-fadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .sp-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 64px rgba(0,0,0,0.4);
  }

  /* =====================
     FEATURED (MIDDLE) CARD
  ===================== */
  .sp-card.sp-featured {
    border-color: rgba(79,142,255,0.35);
    background: linear-gradient(160deg, #131730 0%, #0e1125 100%);
    box-shadow: 0 0 0 1px rgba(79,142,255,0.15), 0 24px 56px rgba(79,142,255,0.12);
    padding-top: 48px;
  }
  .sp-card.sp-featured:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 0 1px rgba(79,142,255,0.3), 0 40px 80px rgba(79,142,255,0.2);
  }

  /* Top bar accent */
  .sp-card.sp-featured::before {
    content: '';
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--sp-accent1), var(--sp-accent2));
    border-radius: 0 0 4px 4px;
  }

  /* =====================
     POPULAR BADGE
  ===================== */
  .sp-popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--sp-accent1), var(--sp-accent2));
    color: #fff;
    font-family: var(--sp-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 18px;
    border-radius: 100px;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(79,142,255,0.4);
  }

  /* =====================
     CARD ICON
  ===================== */
  .sp-card-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
    font-size: 22px;
  }
  .sp-card:nth-child(1) .sp-card-icon { background: rgba(0,229,192,0.1); }
  .sp-card:nth-child(2) .sp-card-icon { background: rgba(79,142,255,0.1); }
  .sp-card:nth-child(3) .sp-card-icon { background: rgba(162,89,255,0.1); }

  /* =====================
     PLAN NAME & DESC
  ===================== */
  .sp-plan-name {
    font-family: var(--sp-font-head);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .sp-card:nth-child(1) .sp-plan-name { color: var(--sp-accent3); }
  .sp-card:nth-child(2) .sp-plan-name { color: var(--sp-accent1); }
  .sp-card:nth-child(3) .sp-plan-name { color: var(--sp-accent2); }

  .sp-plan-desc {
    font-size: 14px;
    color: var(--sp-muted);
    margin-bottom: 28px;
    line-height: 1.6;
  }

  /* =====================
     PRICE
  ===================== */
  .sp-price-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-bottom: 24px;
  }
  .sp-currency {
    font-family: var(--sp-font-head);
    font-size: 20px;
    font-weight: 700;
    color: var(--sp-muted);
    line-height: 1.8;
  }
  .sp-amount {
    font-family: var(--sp-font-head);
    font-size: clamp(42px, 5vw, 52px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
  }
  .sp-card:nth-child(1) .sp-amount { color: var(--sp-accent3); }
  .sp-card:nth-child(2) .sp-amount { color: var(--sp-accent1); }
  .sp-card:nth-child(3) .sp-amount { color: var(--sp-accent2); }

  .sp-per {
    font-size: 13px;
    color: var(--sp-muted);
    margin-bottom: 8px;
    margin-left: 2px;
    line-height: 2.2;
  }

  /* =====================
     DIVIDER
  ===================== */
  .sp-divider {
    height: 1px;
    background: var(--sp-border);
    margin: 24px 0;
  }

  /* =====================
     FEATURES LIST
  ===================== */
  .sp-features-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sp-muted);
    margin-bottom: 16px;
    font-family: var(--sp-font-body);
  }

  .sp-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
    padding: 0;
  }
  .sp-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #c5c7d8;
    line-height: 1.5;
  }
  .sp-check {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .sp-card:nth-child(1) .sp-check { background: rgba(0,229,192,0.15); color: var(--sp-accent3); }
  .sp-card:nth-child(2) .sp-check { background: rgba(79,142,255,0.15); color: var(--sp-accent1); }
  .sp-card:nth-child(3) .sp-check { background: rgba(162,89,255,0.15); color: var(--sp-accent2); }

  .sp-cross { color: #3a3c54; }

  /* =====================
     CTA BUTTON
  ===================== */
  .sp-btn {
    display: block;
    width: 100%;
    padding: 15px 24px;
    border-radius: 12px;
    font-family: var(--sp-font-head);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    box-sizing: border-box;
  }
  .sp-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
  }
  .sp-btn:active { transform: translateY(0); }

  .sp-btn-outline {
    background: transparent;
    border: 1.5px solid rgba(0,229,192,0.35);
    color: var(--sp-accent3);
  }
  .sp-btn-outline:hover {
    background: rgba(0,229,192,0.06);
    border-color: var(--sp-accent3);
  }

  .sp-btn-primary {
    background: linear-gradient(135deg, var(--sp-accent1), var(--sp-accent2));
    color: #fff;
    border: none;
    box-shadow: 0 8px 32px rgba(79,142,255,0.35);
  }
  .sp-btn-primary:hover {
    box-shadow: 0 12px 40px rgba(79,142,255,0.5);
  }

  .sp-btn-outline-purple {
    background: transparent;
    border: 1.5px solid rgba(162,89,255,0.35);
    color: var(--sp-accent2);
  }
  .sp-btn-outline-purple:hover {
    background: rgba(162,89,255,0.06);
    border-color: var(--sp-accent2);
  }

  /* =====================
     FOOTER NOTE
  ===================== */
  .sp-section-footer {
    text-align: center;
    margin-top: 56px;
    position: relative;
    z-index: 2;
  }
  .sp-section-footer p {
    font-size: 14px;
    color: var(--sp-muted);
    font-family: var(--sp-font-body);
  }
  .sp-section-footer a {
    color: var(--sp-accent1);
    text-decoration: none;
    font-weight: 500;
  }
  .sp-section-footer a:hover { text-decoration: underline; }

  .sp-trust-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 28px;
    flex-wrap: wrap;
  }
  .sp-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sp-muted);
    font-family: var(--sp-font-body);
  }
  .sp-trust-icon {
    font-size: 16px;
  }
  /************************************************************/
  
  /****************** WEB DEVELOPEMNET **********************/
  #wd-page {
    --ink: #0d1b3e;
    --paper: #f4f6fb;
    --accent: #00aaff;
    --accent-hover: #0088dd;
    --accent2: #1a3a8f;
    --muted: #7a8aaa;
    --card-bg: #ffffff;
    --border: #dde3ef;
    --border-dark: #1a2d52;
    --tag-bg: #e8edf8;
    --icon-color: #00aaff;
  }

  html { scroll-behavior: smooth; }

  #wd-page {
    font-family: 'Outfit', sans-serif;
    background: var(--paper);
    color: var(--ink);
    overflow-x: hidden;
  }

  /* ── HERO ── */
  .wd-hero {
    min-height: 92vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
  }

  .wd-hero-left {
    padding: 80px 60px 80px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--ink);
    color: var(--paper);
    position: relative;
    z-index: 2;
  }

  .wd-hero-tag {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .wd-hero-tag::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 2px;
    background: var(--accent);
  }

  .wd-hero h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(56px, 7vw, 96px);
    line-height: 0.92;
    letter-spacing: -1px;
    margin-bottom: 28px;
	color: #fff;
  }
  .wd-hero h1 em {
    font-style: normal;
    color: var(--accent);
    display: block;
  }

  .wd-hero-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #a0b0cc;
   /* max-width: 440px; */
    margin-bottom: 40px;
  }

  .wd-hero-locations {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 44px;
  }

  .wd-loc-pill {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #b0c0d8;
    padding: 5px 12px;
    border-radius: 100px;
  }

  .wd-hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .wd-btn-primary {
    background: var(--accent);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 16px 32px;
    border: 2px solid var(--accent);
    text-decoration: none;
    display: inline-block;
    transition: all 0.25s;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  }
  .wd-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-2px); }

  .wd-btn-outline {
    background: transparent;
    color: var(--paper);
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 14px;
    padding: 16px 32px;
    border: 2px solid rgba(255,255,255,0.3);
    text-decoration: none;
    display: inline-block;
    transition: all 0.25s;
  }
  .wd-btn-outline:hover { border-color: var(--paper); background: rgba(255,255,255,0.05); }

  .wd-hero-right {
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
  }

  .wd-hero-graphic {
    width: 100%;
    max-width: 420px;
    position: relative;
  }

  .wd-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--border);
    border: 1px solid #9ea0a5;
  }

  .wd-stat-cell {
    background: var(--paper);
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
  }
  .wd-stat-cell:hover { background: var(--tag-bg); }

  .wd-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 4px;
  }
  .wd-stat-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .wd-stat-cell.wd-dark {
    background: var(--ink);
    color: var(--paper);
  }
  .wd-stat-cell.wd-dark .wd-stat-num { color: var(--accent); }
  .wd-stat-cell.wd-dark .wd-stat-label { color: var(--muted); }

  .wd-floating-badge {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 90px;
    height: 90px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.2;
    animation: wd-spin-slow 12s linear infinite;
    border: 3px solid var(--ink);
    z-index: 10;
  }
  @keyframes wd-spin-slow { to { transform: rotate(360deg); } }

  /* ── SECTION COMMONS ── */
  .wd-section-eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
  }
  .wd-section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
  }
  .wd-section-sub {
    font-size: 16px;
    color: var(--muted);
    max-width: 560px;
    line-height: 1.7;
    margin-bottom: 60px;
  }

  /* ── WHY SECTION ── */
  .wd-why-section {
    padding: 100px 80px;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
  }

  .wd-why-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border: 1px solid var(--border);
  }

  .wd-why-item {
    padding: 40px 24px;
    border-right: 1px solid var(--border);
    text-align: center;
    position: relative;
    transition: background 0.25s;
  }
  .wd-why-item:last-child { border-right: none; }
  .wd-why-item:hover { background: var(--ink); color: var(--paper); }
  .wd-why-item:hover .wd-why-icon { color: var(--accent); }
  .wd-why-item:hover .wd-why-text { color: #90a8c8; }

  .wd-why-icon {
    font-size: 32px;
    margin-bottom: 16px;
    display: block;
    color: var(--icon-color);
    transition: color 0.25s;
  }
  .wd-why-title {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
  }
  .wd-why-text {
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    transition: color 0.25s;
  }

  /* ── SERVICES ── */
  .wd-services-section {
    padding: 100px 80px;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 1px solid var(--border-dark);
  }
  .wd-services-section .wd-section-title { color: var(--paper); }
  .wd-services-section .wd-section-sub { color: #7a90b4; }

  .wd-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--border-dark);
  }

  .wd-service-card {
    background: #0a1628;
    padding: 50px 44px;
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
  }
  .wd-service-card:hover { background: #0f2347; }

  .wd-service-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 80px;
    line-height: 1;
    color: rgba(255,255,255,0.04);
    position: absolute;
    top: 20px;
    right: 28px;
    pointer-events: none;
    transition: color 0.3s;
  }
  .wd-service-card:hover .wd-service-num { color: rgba(0,170,255,0.1); }

  /* Big centered icon for service cards */
  .wd-service-icon {
    font-size: 40px;
    color: var(--accent);
    margin-bottom: 20px;
    display: block;
    opacity: 0.9;
  }

  .wd-service-tag {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .wd-service-card h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    line-height: 1.05;
	color: #fff;
  }
  .wd-service-card p {
    font-size: 14px;
    line-height: 1.7;
    color: #7a90b4;
    margin-bottom: 28px;
    max-width: 380px;
  }

  .wd-feature-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .wd-feature-list li {
    font-size: 12px;
    font-weight: 500;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #b0c0d8;
    padding: 6px 14px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .wd-feature-list li i {
    color: var(--accent);
    font-size: 10px;
    flex-shrink: 0;
  }

  /* ── WHY CHOOSE US ── */
  .wd-choose-section {
    padding: 100px 80px;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
  }
  .wd-choose-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: start;
  }
  .wd-choose-sticky {
    position: sticky;
    top: 40px;
  }
  .wd-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
  }
  .wd-choose-item {
    background: var(--paper);
    padding: 36px 32px;
    transition: background 0.25s;
  }
  .wd-choose-item:hover { background: var(--tag-bg); }

  /* Inline icon + title layout for choose items */
  .wd-choose-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .wd-choose-head i {
    font-size: 20px;
    color: var(--icon-color);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
  }
  .wd-choose-item h4 {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
  }
  .wd-choose-item p {
    font-size: 13px;
    line-height: 1.65;
    color: var(--muted);
    padding-left: 36px;
  }

  /* ── PROCESS ── */
  .wd-process-section {
    padding: 100px 80px;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 1px solid var(--border-dark);
    overflow: hidden;
  }
  .wd-process-section .wd-section-title { color: var(--paper); }
  .wd-process-section .wd-section-sub { color: #7a90b4; }

  .wd-process-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative;
    gap: 0;
  }
  .wd-process-track::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    z-index: 0;
  }
  .wd-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
    position: relative;
    z-index: 1;
  }
  .wd-step-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ink);
    border: 2px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--accent);
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
    transition: all 0.3s;
  }
  .wd-process-step:hover .wd-step-circle {
    background: var(--accent);
    color: #fff;
    transform: scale(1.1);
  }
  .wd-process-step:hover .wd-step-circle i { color: #fff; }
  .wd-step-title {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .wd-step-desc {
    font-size: 12px;
    color: #6a82a8;
    line-height: 1.6;
  }

  /* ── INDUSTRIES ── */
  .wd-industries-section {
    padding: 100px 80px;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
  }
  .wd-industries-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 48px;
  }
  .wd-industry-tag {
    font-weight: 600;
    font-size: 14px;
    padding: 14px 22px;
    border: 1px solid var(--border);
    background: transparent;
    cursor: default;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
    color: var(--ink);
  }
  .wd-industry-tag i {
    font-size: 16px;
    color: var(--icon-color);
    transition: color 0.2s;
    width: 18px;
    text-align: center;
  }
  .wd-industry-tag:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .wd-industry-tag:hover i { color: var(--accent); }

  /* ── LOCATIONS ── */
  .wd-locations-section {
    padding: 80px 80px;
    background: var(--accent);
    color: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.1);
  }
  .wd-locations-inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: center;
  }
  .wd-locations-section .wd-section-title { color: #fff; font-size: 48px; }
  .wd-locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.1);
  }
  .wd-loc-item {
    background: rgba(255,255,255,0.12);
    padding: 20px 18px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s;
  }
  .wd-loc-item:hover { background: rgba(0,0,0,0.12); }
  .wd-loc-item i { font-size: 12px; opacity: 0.8; }

  /* ── SEO SECTION ── */
  .wd-seo-section {
    padding: 100px 80px;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 1px solid var(--border-dark);
  }
  .wd-seo-section .wd-section-title { color: var(--paper); }
  .wd-seo-section .wd-section-sub { color: #7a90b4; }

  .wd-seo-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 60px;
  }
  .wd-seo-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-dark);
  }
  .wd-seo-list li {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-dark);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
  }
  .wd-seo-list li:last-child { border-bottom: none; }
  .wd-seo-list li:hover { background: #0f2347; }
  .wd-seo-list li i {
    color: var(--accent);
    font-size: 14px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
  }

  .wd-seo-highlight {
    background: linear-gradient(135deg, rgba(0,170,255,0.08) 0%, transparent 70%);
    border: 1px solid rgba(0,170,255,0.2);
    padding: 40px;
    position: relative;
    overflow: hidden;
  }
  .wd-seo-highlight::before {
    content: 'RANK';
    font-family: 'Bebas Neue', sans-serif;
    font-size: 120px;
    color: rgba(0,170,255,0.05);
    position: absolute;
    bottom: -10px;
    right: 10px;
    line-height: 1;
    pointer-events: none;
  }
  .wd-seo-highlight h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 38px;
    color: var(--paper);
    margin-bottom: 16px;
    line-height: 1;
  }
  .wd-seo-highlight p {
    font-size: 14px;
    line-height: 1.7;
    color: #7a90b4;
    position: relative;
    z-index: 1;
  }

  /* ── PRICING ── */
  .wd-pricing-section {
    padding: 100px 80px;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
  }
  .wd-pricing-card {
    background: var(--ink);
    color: var(--paper);
    padding: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    border: 1px solid var(--border-dark);
    margin-top: 60px;
    position: relative;
    overflow: hidden;
  }
  .wd-pricing-card::before {
    content: '₹';
    font-family: 'Bebas Neue', sans-serif;
    font-size: 300px;
    color: rgba(255,255,255,0.02);
    position: absolute;
    right: 100px;
    top: -40px;
    line-height: 1;
    pointer-events: none;
  }
  .wd-pricing-left h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    margin-bottom: 16px;
  }
  .wd-pricing-left p {
    font-size: 15px;
    color: #7a90b4;
    line-height: 1.7;
    margin-bottom: 32px;
  }
  .wd-pricing-factors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--border-dark);
  }
  .wd-pf-item {
    background: #0a1628;
    padding: 16px 18px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b0c0d8;
    transition: background 0.2s;
  }
  .wd-pf-item:hover { background: #0e1e38; color: #fff; }
  .wd-pf-item i {
    color: var(--accent);
    font-size: 11px;
    flex-shrink: 0;
  }

  /* ── FAQ ── */
  .wd-faq-section {
    padding: 100px 80px;
    background: var(--paper);
    border-bottom: 1px solid var(--border);
  }
  .wd-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-top: 60px;
  }
  .wd-faq-item {
    background: var(--paper);
    padding: 36px;
    cursor: pointer;
    transition: background 0.25s;
  }
  .wd-faq-item:hover { background: var(--tag-bg); }
  .wd-faq-q {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.4;
  }
  .wd-faq-q i {
    color: var(--accent);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .wd-faq-a {
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
    padding-left: 30px;
  }

  /* ── CTA ── */
  .wd-cta-section {
    padding: 120px 80px;
    background: var(--ink);
    color: var(--paper);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .wd-cta-bg-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(80px, 15vw, 200px);
    color: rgba(255,255,255,0.03);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
    letter-spacing: -2px;
  }
  .wd-cta-section h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(42px, 6vw, 80px);
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    line-height: 1;
	color: #fff;
  }
  .wd-cta-section h2 span { color: var(--accent); }
  .wd-cta-section p {
    font-size: 16px;
    color: #7a90b4;
    max-width: 500px;
    margin: 0 auto 48px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
  }
  .wd-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
  }
  .wd-btn-cta-main {
    background: var(--accent);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 18px 44px;
    border: 2px solid var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  }
  .wd-btn-cta-main:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-3px); }

  .wd-btn-cta-wa {
    background: #25D366;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 18px 44px;
    border: 2px solid #25D366;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s;
  }
  .wd-btn-cta-wa:hover { background: #1eaf57; border-color: #1eaf57; transform: translateY(-3px); }

  /* ── ANIMATIONS ── */
  @keyframes wd-fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .wd-fade-up { animation: wd-fadeUp 0.7s ease forwards; }
  .wd-delay-1 { animation-delay: 0.1s; }
  .wd-delay-2 { animation-delay: 0.2s; }
  .wd-delay-3 { animation-delay: 0.3s; }
  .wd-delay-4 { animation-delay: 0.4s; }

  /* ── RESPONSIVE ── */
  @media (max-width: 1100px) {
    .wd-hero { grid-template-columns: 1fr; min-height: auto; }
    .wd-hero-left { padding: 60px 40px; }
    .wd-hero-right { padding: 40px; }
    .wd-why-grid { grid-template-columns: repeat(3, 1fr); }
    .wd-why-item:nth-child(3) { border-right: none; }
    .wd-why-item:nth-child(4), .wd-why-item:nth-child(5) { border-top: 1px solid var(--border); }
    .wd-choose-layout { grid-template-columns: 1fr; }
    .wd-choose-sticky { position: static; }
    .wd-process-track { grid-template-columns: 1fr 1fr; gap: 30px; }
    .wd-process-track::before { display: none; }
    .wd-seo-layout { grid-template-columns: 1fr; }
    .wd-pricing-card { grid-template-columns: 1fr; }
  }

  @media (max-width: 768px) {
    .wd-hero-left, .wd-why-section, .wd-services-section, .wd-choose-section,
    .wd-process-section, .wd-industries-section, .wd-locations-section,
    .wd-seo-section, .wd-pricing-section, .wd-faq-section, .wd-cta-section { padding: 60px 24px; }
    .wd-hero-left { padding: 60px 24px; }
    .wd-why-grid { grid-template-columns: 1fr; }
    .wd-why-item { border-right: none; border-bottom: 1px solid var(--border); text-align: left; }
    .wd-why-icon { font-size: 24px; }
    .wd-services-grid, .wd-choose-grid, .wd-faq-grid, .wd-locations-grid { grid-template-columns: 1fr; }
    .wd-process-track { grid-template-columns: 1fr; }
    .wd-pricing-card { padding: 36px 24px; }
    .wd-pricing-factors { grid-template-columns: 1fr; }
    .wd-locations-inner { grid-template-columns: 1fr; }
    .wd-hero-right { display: none; }
  }
  /* ══ RECENT WORK ══ */
  .wd-work-section {
    padding: 100px 80px;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 1px solid var(--border-dark);
  }
  .wd-work-section .wd-section-title { color: var(--paper); }
  .wd-work-section .wd-section-sub { color: #7a90b4; }

  .wd-work-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .wd-work-card {
    background: #0a1628;
    border: 1px solid var(--border-dark);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .wd-work-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px rgba(0,170,255,0.12);
  }

  /* ── Browser chrome ── */
  .wd-browser-wrap {
    border-bottom: 1px solid var(--border-dark);
  }
  .wd-browser-bar {
    background: #0d1e3a;​
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-dark);
  }
  .wd-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  }
  .wd-dot-r { background: #ff5f57; }
  .wd-dot-y { background: #febc2e; }
  .wd-dot-g { background: #28c840; }
  .wd-browser-url {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    padding: 5px 12px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: #7a90b4;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .wd-browser-url i { color: #28c840; font-size: 9px; flex-shrink: 0; }

  /* ── Screen area ── */
  .wd-browser-screen {
    height: 230px;
    overflow: hidden;
    position: relative;
  }

  /* ── Shared mock nav ── */
  .wd-mock-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border-bottom: 1px solid #eee;
  }
  .wd-mock-nav.dark-nav { background: #1a1a1a; border-bottom-color: #333; }
  .wd-mock-logo {
    width: 60px; height: 10px; border-radius: 2px;
    background: #d0d8ea;
  }
  .wd-mock-logo.light { background: rgba(255,255,255,0.4); }
  .wd-mock-logo.navy  { background: #1a3a8f; }
  .wd-mock-logo.pink  { background: #f472b6; }
  .wd-mock-nav-links {
    flex: 1; display: flex; gap: 8px; justify-content: center;
  }
  .wd-mock-nav-links span {
    width: 30px; height: 7px; background: #e0e4ef; border-radius: 3px;
  }
  .wd-mock-nav-links.light span { background: rgba(255,255,255,0.3); }
  .wd-mock-btn {
    width: 48px; height: 20px; border-radius: 3px; background: var(--accent);
  }
  .wd-mock-btn.orange { background: #f97316; }
  .wd-mock-btn.navy   { background: #1a3a8f; }
  .wd-mock-btn.pink   { background: #f472b6; }

  /* ── CORPORATE screen ── */
  .wd-screen-corporate { background: #f8f9fc; }
  .wd-mock-hero-corp {
    display: flex;
    align-items: center;
    padding: 18px 16px 10px;
    gap: 16px;
  }
  .wd-mock-hero-text { flex: 1; }
  .wd-mock-h1 {
    height: 10px; background: #1a2540; border-radius: 3px;
    margin-bottom: 6px; width: 90%;
  }
  .wd-mock-h1.short  { width: 60%; }
  .wd-mock-h1.light  { background: rgba(255,255,255,0.85); }
  .wd-mock-h1.light.short { width: 55%; }
  .wd-mock-h1.pink   { background: #be185d; }
  .wd-mock-h1.pink.short { width: 55%; }
  .wd-mock-p {
    height: 6px; background: #d0d8ea; border-radius: 3px;
    margin-bottom: 5px; width: 95%;
  }
  .wd-mock-p.short { width: 70%; }
  .wd-mock-cta-row {
    display: flex; gap: 8px; margin-top: 10px;
  }
  .wd-mock-cta-row.center { justify-content: center; }
  .wd-mock-cta-btn {
    width: 64px; height: 20px; background: var(--accent); border-radius: 3px;
  }
  .wd-mock-cta-btn.orange { background: #f97316; }
  .wd-mock-cta-btn.pink   { background: #f472b6; }
  .wd-mock-cta-ghost {
    width: 64px; height: 20px;
    border: 1.5px solid #c0c8d8; border-radius: 3px;
  }
  .wd-mock-hero-img {
    width: 110px; height: 80px; border-radius: 4px; flex-shrink: 0;
  }
  .wd-mock-hero-img.corp {
    background: linear-gradient(135deg, #1a3a8f 0%, #00aaff 100%);
    opacity: 0.3;
  }
  .wd-mock-stats-row {
    display: flex; gap: 2px; padding: 0 16px; margin-top: 4px;
  }
  .wd-mock-stat {
    flex: 1; height: 34px; background: #e8edf8; border-radius: 2px;
  }

  /* ── RESTAURANT screen ── */
  .wd-screen-restaurant { background: #1a1a1a; }
  .wd-mock-rest-hero {
    height: 130px;
    background: linear-gradient(135deg, #7c2d12 0%, #b45309 50%, #92400e 100%);
    position: relative; overflow: hidden;
    display: flex; align-items: center;
  }
  .wd-mock-rest-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.4);
  }
  .wd-mock-rest-overlay {
    position: relative; z-index: 1; padding: 14px 16px; width: 100%;
  }
  .wd-mock-rest-badge {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.3);
    margin-bottom: 8px;
  }
  .wd-mock-menu-row {
    display: flex; gap: 6px; padding: 10px 12px;
    background: #111;
  }
  .wd-mock-menu-card {
    flex: 1; height: 48px; border-radius: 4px;
    background: linear-gradient(135deg, #292524, #44403c);
    border: 1px solid #44403c;
  }

  /* ── REAL ESTATE screen ── */
  .wd-screen-realestate { background: #f0f4f8; }
  .wd-mock-search-bar {
    display: flex; gap: 4px; padding: 8px 14px;
    background: #fff;
    border-bottom: 1px solid #dde3ef;
  }
  .wd-mock-search-input {
    flex: 1; height: 20px; background: #e8edf8; border-radius: 3px;
  }
  .wd-mock-search-input.small { flex: 0.5; }
  .wd-mock-search-btn {
    width: 44px; height: 20px; background: #1a3a8f; border-radius: 3px;
  }
  .wd-mock-prop-grid {
    display: flex; gap: 6px; padding: 10px 14px;
  }
  .wd-mock-prop-card {
    border-radius: 4px; overflow: hidden;
    background: #fff; border: 1px solid #dde3ef;
  }
  .wd-mock-prop-card.large { flex: 1.4; }
  .wd-mock-prop-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
  .wd-mock-prop-card.small { flex: 1; }
  .wd-mock-prop-img {
    height: 68px;
    background: linear-gradient(135deg, #1a3a8f22, #00aaff33);
  }
  .wd-mock-prop-img.sm { height: 38px; }
  .wd-mock-prop-info { padding: 6px 8px; }
  .wd-mock-prop-info div {
    height: 5px; background: #d0d8ea; border-radius: 2px; margin-bottom: 4px;
  }
  .wd-mock-prop-info div:last-child { width: 60%; background: var(--accent); opacity: 0.5; }
  .wd-mock-prop-info.sm { padding: 4px 6px; }
  .wd-mock-prop-info.sm div { height: 4px; }

  /* ── PET SHOP screen ── */
  .wd-screen-petshop { background: #fdf2f8; }
  .wd-mock-cart-icon {
    font-size: 14px; color: #f472b6; margin-left: auto;
  }
  .wd-mock-shop-banner {
    display: flex; align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 100%);
    min-height: 80px;
    gap: 12px;
  }
  .wd-mock-banner-text { flex: 1; }
  .wd-mock-cat-art {
    font-size: 44px; opacity: 0.2; color: #be185d;
    flex-shrink: 0;
  }
  .wd-mock-products-row {
    display: flex; gap: 6px; padding: 8px 12px;
    background: #fff; border-top: 1px solid #fce7f3;
  }
  .wd-mock-product-card {
    flex: 1; border-radius: 4px; overflow: hidden;
    background: #fdf2f8; border: 1px solid #fce7f3;
  }
  .wd-mock-product-img {
    height: 44px;
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  }
  .wd-mock-product-info { padding: 6px; }
  .wd-mock-product-info div {
    height: 5px; background: #f9a8d4; border-radius: 2px; margin-bottom: 3px;
  }
  .wd-mock-product-info div:last-child { width: 55%; background: #ec4899; opacity: 0.4; }

  /* ── Card info area ── */
  .wd-work-info {
    padding: 28px 32px 32px;
  }
  .wd-work-category {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .wd-work-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    color: var(--paper);
    line-height: 1.1;
  }
  .wd-work-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #7a90b4;
    margin-bottom: 18px;
  }
  .wd-work-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .wd-work-tags span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 5px 12px;
    border: 1px solid rgba(0,170,255,0.3);
    color: var(--accent);
    border-radius: 3px;
    background: rgba(0,170,255,0.06);
  }

  @media (max-width: 900px) {
    .wd-work-grid { grid-template-columns: 1fr; }
  }
  /**************************************************************************/
 /* =====================================================
   GEO RESET — Force all fonts regardless of parent CSS
   ===================================================== */
[class*="geo-"] {
  box-sizing: border-box !important;
  font-family: 'Barlow', sans-serif !important;
}
[class*="geo-"] h1,
[class*="geo-"] h2,
[class*="geo-"] h3,
[class*="geo-"] h4,
[class*="geo-"] h5 {
  font-family: 'Barlow Condensed', sans-serif !important;
  line-height: 1.1 !important;
}

/* =====================================================
   GEO GOOGLE FONTS IMPORT
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@300;400;500;600&display=swap');

/* =====================================================
   GEO COLOR TOKENS
   ===================================================== */
.geo-wrap {
  --gc-navy:    #040e1c;
  --gc-dark:    #071525;
  --gc-card:    #0a1e33;
  --gc-border:  #0f2d4a;
  --gc-blue:    #1565c0;
  --gc-bright:  #1e88e5;
  --gc-sky:     #64b5f6;
  --gc-ice:     #90caf9;
  --gc-light:   #bbdefb;
  --gc-accent:  #29b6f6;
  --gc-white:   #e8f4fd;
  --gc-muted:   #5d9bbf;
}

/* =====================================================
   GEO WRAPPER
   ===================================================== */
.geo-wrap {
  background: var(--gc-navy) !important;
  color: var(--gc-white) !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* =====================================================
   GEO HERO
   ===================================================== */
.geo-hero {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 7rem 6% 5rem !important;
  background:
    radial-gradient(ellipse 75% 65% at 65% 38%, rgba(21,101,192,.28) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 8% 75%, rgba(41,182,246,.12) 0%, transparent 58%),
    linear-gradient(180deg, #040e1c 0%, #071525 100%) !important;
}

/* Grid overlay */
.geo-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(100,181,246,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,181,246,.05) 1px, transparent 1px) !important;
  background-size: 55px 55px !important;
  mask-image: radial-gradient(ellipse at 60% 35%, black 20%, transparent 75%) !important;
  pointer-events: none !important;
}

/* Floating orb */
.geo-hero::after {
  content: '' !important;
  position: absolute !important;
  width: 500px !important; height: 500px !important;
  right: -100px !important; top: -100px !important;
  background: radial-gradient(circle, rgba(30,136,229,.15) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.geo-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 4rem !important;
  align-items: center !important;
}

.geo-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: .6rem !important;
  background: rgba(41,182,246,.1) !important;
  border: 1.5px solid rgba(41,182,246,.35) !important;
  color: var(--gc-accent) !important;
  font-size: 13px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: .5rem 1.2rem !important;
  border-radius: 100px !important;
  margin-bottom: 1.6rem !important;
}
.geo-hero-badge::before {
  content: '' !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--gc-accent) !important;
  box-shadow: 0 0 10px var(--gc-accent) !important;
  animation: geo-blink 2s infinite !important;
  flex-shrink: 0 !important;
}
@keyframes geo-blink {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(1.5); }
}

.geo-hero h1 {
  font-size: clamp(3.2rem, 6vw, 5.2rem) !important;
  font-weight: 900 !important;
  color: var(--gc-white) !important;
  letter-spacing: -.02em !important;
  margin: 0 0 1.4rem !important;
  line-height: 1.0 !important;
  text-transform: uppercase !important;
}
.geo-hero h1 em {
  font-style: normal !important;
  color: var(--gc-sky) !important;
  display: block !important;
}

.geo-hero-lead {
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--gc-muted) !important;
  line-height: 1.7 !important;
  max-width: 520px !important;
  margin: 0 0 2rem !important;
}
.geo-hero-lead strong {
  color: var(--gc-ice) !important;
  font-weight: 600 !important;
}

.geo-hero-location {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  font-size: 15px !important;
  color: var(--gc-muted) !important;
  margin-bottom: 2.5rem !important;
}
.geo-hero-location::before {
  content: '📍' !important;
  font-size: 16px !important;
}

.geo-hero-actions {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.geo-btn-p {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: var(--gc-bright) !important;
  color: #fff !important;
  padding: 1rem 2.2rem !important;
  border-radius: 6px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-decoration: none !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 28px rgba(30,136,229,.4) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.geo-btn-p:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 36px rgba(30,136,229,.6) !important;
}
.geo-btn-s {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  border: 1.5px solid var(--gc-border) !important;
  color: var(--gc-sky) !important;
  padding: 1rem 2.2rem !important;
  border-radius: 6px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-decoration: none !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  transition: border-color .25s, color .25s !important;
}
.geo-btn-s:hover {
  border-color: var(--gc-sky) !important;
  color: var(--gc-light) !important;
}

/* AI CITATION CARDS */
.geo-hero-visual {
  display: flex !important;
  flex-direction: column !important;
  gap: .9rem !important;
  animation: geo-rise .9s ease both .2s !important;
}
@keyframes geo-rise {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
.geo-cite-card {
  background: var(--gc-card) !important;
  border: 1.5px solid var(--gc-border) !important;
  border-radius: 14px !important;
  padding: 1.3rem 1.6rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .3s !important;
}
.geo-cite-card:hover { border-color: var(--gc-blue) !important; }
.geo-cite-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--gc-bright), transparent) !important;
  opacity: 0 !important;
  transition: opacity .3s !important;
}
.geo-cite-card:hover::after { opacity: 1 !important; }

.geo-cite-engine {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  margin-bottom: .7rem !important;
}
.geo-cite-dot {
  width: 9px !important; height: 9px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.geo-cite-dot.gd-green  { background: #43a047 !important; box-shadow: 0 0 7px #43a047 !important; }
.geo-cite-dot.gd-blue   { background: var(--gc-accent) !important; box-shadow: 0 0 7px var(--gc-accent) !important; }
.geo-cite-dot.gd-purple { background: #8e24aa !important; box-shadow: 0 0 7px #8e24aa !important; }
.geo-cite-dot.gd-orange { background: #e65100 !important; box-shadow: 0 0 7px #e65100 !important; }

.geo-cite-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gc-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}
.geo-cite-text {
  font-size: 15px !important;
  color: var(--gc-sky) !important;
  line-height: 1.6 !important;
}
.geo-cite-text strong { color: var(--gc-light) !important; font-weight: 600 !important; }
.geo-cited {
  display: inline-block !important;
  background: rgba(41,182,246,.18) !important;
  border: 1px solid rgba(41,182,246,.4) !important;
  color: var(--gc-accent) !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  margin-left: 4px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  vertical-align: middle !important;
}

/* =====================================================
   GEO STATS STRIP
   ===================================================== */
.geo-stats {
  background: var(--gc-card) !important;
  border-top: 1.5px solid var(--gc-border) !important;
  border-bottom: 1.5px solid var(--gc-border) !important;
  padding: 3rem 6% !important;
}
.geo-stats-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 2rem !important;
}
.geo-stat { text-align: center !important; }
.geo-stat-n {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 52px !important;
  font-weight: 900 !important;
  color: var(--gc-sky) !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: .3rem !important;
}
.geo-stat-l {
  font-size: 15px !important;
  color: var(--gc-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 500 !important;
}

/* =====================================================
   SHARED SECTION STRUCTURE
   ===================================================== */
.geo-sec {
  padding: 7rem 6% !important;
}
.geo-sec-alt { background: var(--gc-dark) !important; }
.geo-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
}
.geo-eyebrow {
  display: inline-block !important;
  color: var(--gc-accent) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: .9rem !important;
}
.geo-h2 {
  font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
  font-weight: 900 !important;
  color: var(--gc-white) !important;
  letter-spacing: -.01em !important;
  text-transform: uppercase !important;
  margin: 0 0 1rem !important;
  line-height: 1.05 !important;
}
.geo-h2 em { font-style: normal !important; color: var(--gc-sky) !important; }
.geo-lead {
  font-size: 18px !important;
  color: var(--gc-muted) !important;
  max-width: 580px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  margin-bottom: 3.5rem !important;
}
.geo-center { text-align: center !important; }
.geo-center .geo-lead { margin-left: auto !important; margin-right: auto !important; }

/* =====================================================
   WHAT IS GEO SECTION
   ===================================================== */
.geo-what-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5rem !important;
  align-items: start !important;
}
.geo-what-body p {
  font-size: 17px !important;
  color: var(--gc-muted) !important;
  line-height: 1.75 !important;
  margin-bottom: 1.2rem !important;
}
.geo-what-body p strong { color: var(--gc-ice) !important; font-weight: 600 !important; }

.geo-pill-list { list-style: none !important; margin: 2rem 0 0 !important; padding: 0 !important; }
.geo-pill-list li {
  display: flex !important;
  gap: 1rem !important;
  align-items: flex-start !important;
  padding: 1.1rem 0 !important;
  border-bottom: 1px solid var(--gc-border) !important;
  font-size: 16px !important;
  color: var(--gc-muted) !important;
  line-height: 1.6 !important;
}
.geo-pill-list li:last-child { border-bottom: none !important; }
.geo-pill-icon {
  flex-shrink: 0 !important;
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
  background: rgba(30,136,229,.12) !important;
  border: 1px solid rgba(30,136,229,.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}
.geo-pill-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--gc-white) !important;
  display: block !important;
  margin-bottom: .2rem !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* Compare table */
.geo-tbl-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gc-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin-bottom: 1rem !important;
}
.geo-tbl-wrap { border: 1.5px solid var(--gc-border) !important; border-radius: 14px !important; overflow: hidden !important; }
.geo-tbl-wrap table { width: 100% !important; border-collapse: collapse !important; }
.geo-tbl-wrap th {
  background: var(--gc-card) !important;
  padding: 1.1rem 1.3rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gc-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  text-align: left !important;
  border-bottom: 1.5px solid var(--gc-border) !important;
}
.geo-tbl-wrap th:not(:first-child) { text-align: center !important; }
.geo-tbl-wrap td {
  padding: 1rem 1.3rem !important;
  font-size: 16px !important;
  border-bottom: 1px solid var(--gc-border) !important;
  color: var(--gc-muted) !important;
}
.geo-tbl-wrap td:not(:first-child) { text-align: center !important; }
.geo-tbl-wrap tr:last-child td { border-bottom: none !important; }
.geo-tbl-wrap tr:hover td { background: rgba(10,30,51,.7) !important; }
.geo-yes { color: #43a047 !important; font-size: 18px !important; }
.geo-no  { color: #e53935 !important; font-size: 16px !important; }
.geo-meh { color: #fb8c00 !important; font-size: 18px !important; }

/* =====================================================
   HOW IT WORKS — 6 CARDS
   ===================================================== */
.geo-grid3 {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 1.8rem !important;
}
.geo-step {
  background: var(--gc-card) !important;
  border: 1.5px solid var(--gc-border) !important;
  border-radius: 16px !important;
  padding: 2.2rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .3s, transform .3s !important;
}
.geo-step:hover { border-color: var(--gc-blue) !important; transform: translateY(-5px) !important; }
.geo-step::after {
  content: attr(data-n) !important;
  position: absolute !important;
  right: 1.5rem !important; top: 1rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 72px !important;
  font-weight: 900 !important;
  color: rgba(30,136,229,.06) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
.geo-step-ico {
  width: 54px !important; height: 54px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(21,101,192,.5), rgba(30,136,229,.2)) !important;
  border: 1px solid rgba(30,136,229,.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  margin-bottom: 1.3rem !important;
}
.geo-step h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--gc-white) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin: 0 0 .7rem !important;
}
.geo-step p {
  font-size: 16px !important;
  color: var(--gc-muted) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* =====================================================
   SERVICES GRID
   ===================================================== */
.geo-grid3b {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 1.5rem !important;
}
.geo-svc {
  background: var(--gc-card) !important;
  border: 1.5px solid var(--gc-border) !important;
  border-radius: 16px !important;
  padding: 2.2rem !important;
  transition: border-color .3s, transform .3s !important;
}
.geo-svc:hover { border-color: var(--gc-bright) !important; transform: translateY(-5px) !important; }
.geo-svc-ico {
  width: 54px !important; height: 54px !important;
  border-radius: 13px !important;
  background: rgba(30,136,229,.1) !important;
  border: 1px solid rgba(30,136,229,.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  margin-bottom: 1.4rem !important;
  transition: background .3s !important;
}
.geo-svc:hover .geo-svc-ico { background: rgba(30,136,229,.25) !important; }
.geo-svc h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--gc-white) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin: 0 0 .7rem !important;
}
.geo-svc p { font-size: 16px !important; color: var(--gc-muted) !important; line-height: 1.7 !important; margin: 0 !important; }
.geo-tag-pill {
  display: inline-block !important;
  margin-top: 1.1rem !important;
  background: rgba(41,182,246,.1) !important;
  border: 1px solid rgba(41,182,246,.3) !important;
  color: var(--gc-accent) !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* =====================================================
   AI ENGINES
   ===================================================== */
.geo-grid4 {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 1.5rem !important;
}
.geo-engine {
  background: var(--gc-card) !important;
  border: 1.5px solid var(--gc-border) !important;
  border-radius: 14px !important;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
  transition: border-color .3s, transform .3s !important;
}
.geo-engine:hover { border-color: var(--gc-blue) !important; transform: translateY(-4px) !important; }
.geo-engine-ico { font-size: 40px !important; display: block !important; margin-bottom: 1rem !important; }
.geo-engine h4 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--gc-white) !important;
  text-transform: uppercase !important;
  margin: 0 0 .4rem !important;
}
.geo-engine p { font-size: 14px !important; color: var(--gc-muted) !important; line-height: 1.5 !important; margin: 0 !important; }
.geo-eng-bar { margin-top: 1rem !important; }
.geo-eng-track { height: 5px !important; background: var(--gc-border) !important; border-radius: 3px !important; overflow: hidden !important; }
.geo-eng-fill { height: 100% !important; border-radius: 3px !important; background: linear-gradient(90deg, var(--gc-bright), var(--gc-sky)) !important; }
.geo-eng-pct {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gc-accent) !important;
  margin-top: .4rem !important;
  display: block !important;
}

/* =====================================================
   PROCESS TIMELINE + RESULTS PANEL
   ===================================================== */
.geo-proc-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5rem !important;
  align-items: start !important;
}
.geo-timeline { position: relative !important; }
.geo-timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 29px !important; top: 0 !important; bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(180deg, var(--gc-bright), rgba(41,182,246,.05)) !important;
}
.geo-tl {
  display: flex !important;
  gap: 2rem !important;
  align-items: flex-start !important;
  padding-bottom: 2.8rem !important;
}
.geo-tl-n {
  flex-shrink: 0 !important;
  width: 60px !important; height: 60px !important;
  border-radius: 50% !important;
  background: var(--gc-card) !important;
  border: 2px solid var(--gc-blue) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--gc-sky) !important;
  position: relative !important;
  z-index: 1 !important;
}
.geo-tl-body h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--gc-white) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin: 0 0 .5rem !important;
}
.geo-tl-body p { font-size: 16px !important; color: var(--gc-muted) !important; line-height: 1.7 !important; margin: 0 !important; }

.geo-results-box {
  background: var(--gc-card) !important;
  border: 1.5px solid var(--gc-border) !important;
  border-radius: 18px !important;
  padding: 2.5rem !important;
  margin-top: 4rem !important;
}
.geo-results-box-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--gc-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  margin-bottom: 1.8rem !important;
}
.geo-bar-row { margin-bottom: 1.6rem !important; }
.geo-bar-row:last-child { margin-bottom: 0 !important; }
.geo-bar-hd {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: .5rem !important;
}
.geo-bar-lbl { font-size: 16px !important; color: var(--gc-muted) !important; }
.geo-bar-val {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--gc-sky) !important;
}
.geo-bar-track2 { height: 7px !important; background: var(--gc-border) !important; border-radius: 4px !important; overflow: hidden !important; }
.geo-bar-fill2 { height: 100% !important; border-radius: 4px !important; background: linear-gradient(90deg, var(--gc-bright), var(--gc-sky)) !important; }

/* =====================================================
   CITY COVERAGE — SEO RICH SECTION
   ===================================================== */
.geo-cities-sec { background: var(--gc-dark) !important; }
.geo-city-tabs {
  display: flex !important;
  gap: .8rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 2.5rem !important;
}
.geo-city-tab {
  background: none !important;
  border: 1.5px solid var(--gc-border) !important;
  color: var(--gc-muted) !important;
  padding: .6rem 1.4rem !important;
  border-radius: 100px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all .25s !important;
}
.geo-city-tab.active,
.geo-city-tab:hover {
  background: var(--gc-bright) !important;
  border-color: var(--gc-bright) !important;
  color: #fff !important;
}
.geo-city-panel { display: none !important; }
.geo-city-panel.active { display: block !important; }
.geo-cities-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 1rem !important;
}
.geo-city-card {
  background: var(--gc-card) !important;
  border: 1.5px solid var(--gc-border) !important;
  border-radius: 12px !important;
  padding: 1.2rem !important;
  text-align: center !important;
  transition: border-color .25s, transform .25s !important;
}
.geo-city-card:hover { border-color: var(--gc-sky) !important; transform: translateY(-3px) !important; }
.geo-city-card h4 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--gc-white) !important;
  text-transform: uppercase !important;
  margin: 0 0 .2rem !important;
}
.geo-city-card p { font-size: 13px !important; color: var(--gc-muted) !important; margin: 0 !important; }

/* =====================================================
   CLIENT RESULTS
   ===================================================== */
.geo-grid3c {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 2rem !important;
}
.geo-result-card {
  background: var(--gc-card) !important;
  border: 1.5px solid var(--gc-border) !important;
  border-radius: 16px !important;
  padding: 2.2rem !important;
}
.geo-result-ind {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--gc-accent) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin-bottom: .8rem !important;
}
.geo-result-num {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 60px !important;
  font-weight: 900 !important;
  color: var(--gc-sky) !important;
  line-height: 1 !important;
  margin-bottom: .5rem !important;
}
.geo-result-desc { font-size: 16px !important; color: var(--gc-muted) !important; line-height: 1.65 !important; margin: 0 !important; }

/* =====================================================
   FAQ
   ===================================================== */
.geo-faq-wrap { max-width: 860px !important; }
.geo-faq-item { border-bottom: 1.5px solid var(--gc-border) !important; }
.geo-faq-btn {
  width: 100% !important;
  background: none !important;
  border: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1.5rem 0 !important;
  cursor: pointer !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gc-white) !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  gap: 1rem !important;
  transition: color .25s !important;
}
.geo-faq-btn:hover { color: var(--gc-sky) !important; }
.geo-faq-ico {
  flex-shrink: 0 !important;
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  background: rgba(30,136,229,.12) !important;
  border: 1px solid rgba(30,136,229,.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: var(--gc-accent) !important;
  transition: transform .3s, background .3s !important;
}
.geo-faq-item.open .geo-faq-ico { transform: rotate(180deg) !important; background: rgba(30,136,229,.25) !important; }
.geo-faq-ans { max-height: 0 !important; overflow: hidden !important; transition: max-height .4s ease !important; }
.geo-faq-item.open .geo-faq-ans { max-height: 400px !important; }
.geo-faq-ans-inner { padding-bottom: 1.5rem !important; font-size: 17px !important; color: var(--gc-muted) !important; line-height: 1.75 !important; }

/* =====================================================
   CTA SECTION
   ===================================================== */
.geo-cta {
  background: var(--gc-navy) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 8rem 6% !important;
}
.geo-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(21,101,192,.28) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.geo-cta-inner { position: relative !important; z-index: 2 !important; max-width: 760px !important; margin: 0 auto !important; }
.geo-cta h2 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(2.6rem, 5vw, 4.2rem) !important;
  font-weight: 900 !important;
  color: var(--gc-white) !important;
  text-transform: uppercase !important;
  letter-spacing: -.01em !important;
  margin: 0 0 1.2rem !important;
  line-height: 1.05 !important;
}
.geo-cta h2 em { font-style: normal !important; color: var(--gc-sky) !important; }
.geo-cta p { font-size: 19px !important; color: var(--gc-muted) !important; line-height: 1.7 !important; margin: 0 0 2.8rem !important; }
.geo-cta-btns { display: flex !important; gap: 1rem !important; justify-content: center !important; flex-wrap: wrap !important; }

/* =====================================================
   HIDDEN SEO TEXT (crawlable, not visual)
   ===================================================== */
.geo-seo-block {
  font-size: 1px !important;
  color: transparent !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
}

/* =====================================================
   REVEAL ANIMATION
   ===================================================== */
.geo-reveal { opacity: 0 !important; transform: translateY(26px) !important; transition: opacity .65s ease, transform .65s ease !important; }
.geo-reveal.geo-vis { opacity: 1 !important; transform: none !important; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 960px) {
  .geo-hero-inner    { grid-template-columns: 1fr !important; }
  .geo-hero-visual   { display: none !important; }
  .geo-what-grid     { grid-template-columns: 1fr !important; gap: 3rem !important; }
  .geo-grid3         { grid-template-columns: 1fr 1fr !important; }
  .geo-grid3b        { grid-template-columns: 1fr 1fr !important; }
  .geo-grid3c        { grid-template-columns: 1fr !important; }
  .geo-grid4         { grid-template-columns: 1fr 1fr !important; }
  .geo-proc-grid     { grid-template-columns: 1fr !important; }
  .geo-stats-inner   { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .geo-grid3         { grid-template-columns: 1fr !important; }
  .geo-grid3b        { grid-template-columns: 1fr !important; }
  .geo-grid4         { grid-template-columns: 1fr 1fr !important; }
  .geo-stats-inner   { grid-template-columns: 1fr 1fr !important; }
  .geo-hero h1       { font-size: 2.8rem !important; }
}
 /******************************************************************************************************************/
 
 /* =====================================================
   AEO RESET — Force all fonts regardless of parent CSS
   ===================================================== */
[class*="aeo-"] {
  box-sizing: border-box !important;
  font-family: 'Barlow', sans-serif !important;
}
[class*="aeo-"] h1,
[class*="aeo-"] h2,
[class*="aeo-"] h3,
[class*="aeo-"] h4,
[class*="aeo-"] h5 {
  font-family: 'Barlow Condensed', sans-serif !important;
  line-height: 1.1 !important;
}

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@300;400;500;600&display=swap');

/* =====================================================
   AEO COLOR TOKENS
   ===================================================== */
.aeo-wrap {
  --ac-navy:   #040e1c;
  --ac-dark:   #071525;
  --ac-card:   #0a1e33;
  --ac-border: #0f2d4a;
  --ac-blue:   #1565c0;
  --ac-bright: #1e88e5;
  --ac-sky:    #64b5f6;
  --ac-ice:    #90caf9;
  --ac-light:  #bbdefb;
  --ac-accent: #29b6f6;
  --ac-white:  #e8f4fd;
  --ac-muted:  #5d9bbf;
  --ac-teal:   #00e5cc;
}

/* =====================================================
   AEO WRAPPER
   ===================================================== */
.aeo-wrap {
  background: var(--ac-navy) !important;
  color: var(--ac-white) !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

/* =====================================================
   AEO HERO
   ===================================================== */
.aeo-hero {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 7rem 6% 5rem !important;
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, rgba(8,229,284,.2) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 90% 75%, rgba(124,77,255,.12) 0%, transparent 58%),
    linear-gradient(180deg, #040e1c 0%, #071525 100%) !important;
}
.aeo-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(100,181,246,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,181,246,.05) 1px, transparent 1px) !important;
  background-size: 55px 55px !important;
  mask-image: radial-gradient(ellipse at 35% 40%, black 20%, transparent 75%) !important;
  pointer-events: none !important;
}
.aeo-hero::after {
  content: '' !important;
  position: absolute !important;
  width: 600px !important; height: 600px !important;
  left: -150px !important; bottom: -150px !important;
  background: radial-gradient(circle, rgba(124,77,255,.12) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.aeo-hero-inner {
  position: relative !important;
  z-index: 2 !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: center !important;
}

/* ── HERO LEFT ── */
.aeo-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: .6rem !important;
  background: rgba(124,77,255,.12) !important;
  border: 1.5px solid rgba(0,188,212,.35) !important;
  color: var(--ac-teal) !important;
  font-size: 13px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: .5rem 1.2rem !important;
  border-radius: 100px !important;
  margin-bottom: 1.6rem !important;
}
.aeo-hero-badge::before {
  content: '' !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--ac-teal) !important;
  box-shadow: 0 0 10px var(--ac-teal) !important;
  animation: aeo-blink 2s infinite !important;
  flex-shrink: 0 !important;
}
@keyframes aeo-blink {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(1.5); }
}

.aeo-hero h1 {
  font-size: clamp(3.2rem, 6vw, 5.2rem) !important;
  font-weight: 900 !important;
  color: var(--ac-white) !important;
  letter-spacing: -.02em !important;
  margin: 0 0 1.4rem !important;
  line-height: 1.0 !important;
  text-transform: uppercase !important;
}
.aeo-hero h1 em {
  font-style: normal !important;
  color: #ff951b; !important;
  display: block !important;
}

.aeo-hero-lead {
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--ac-muted) !important;
  line-height: 1.7 !important;
  max-width: 520px !important;
  margin: 0 0 2rem !important;
}
.aeo-hero-lead strong { color: var(--ac-ice) !important; font-weight: 600 !important; }

.aeo-hero-location {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  font-size: 15px !important;
  color: var(--ac-muted) !important;
  margin-bottom: 2.5rem !important;
}
.aeo-hero-location::before { content: '📍' !important; font-size: 16px !important; }

.aeo-hero-actions { display: flex !important; gap: 1rem !important; flex-wrap: wrap !important; }

.aeo-btn-p {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: var(--ac-bright) !important;
  color: #fff !important;
  padding: 1rem 2.2rem !important;
  border-radius: 6px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-decoration: none !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 28px rgba(30,136,229,.4) !important;
  transition: transform .2s, box-shadow .2s !important;
}
.aeo-btn-p:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 36px rgba(30,136,229,.6) !important; }

.aeo-btn-s {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  border: 1.5px solid var(--ac-border) !important;
  color: var(--ac-sky) !important;
  padding: 1rem 2.2rem !important;
  border-radius: 6px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-decoration: none !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  transition: border-color .25s, color .25s !important;
}
.aeo-btn-s:hover { border-color: var(--ac-sky) !important; color: var(--ac-light) !important; }

/* ── HERO RIGHT — Answer Boxes ── */
.aeo-hero-visual {
  display: flex !important;
  flex-direction: column !important;
  gap: .9rem !important;
  animation: aeo-rise .9s ease both .2s !important;
  padding-top: 30px;
}
@keyframes aeo-rise {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}

.aeo-answer-box {
  background: var(--ac-card) !important;
  border: 1.5px solid var(--ac-border) !important;
  border-radius: 14px !important;
  padding: 1.3rem 1.6rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .3s !important;
}
.aeo-answer-box:hover { border-color: var(--ac-blue) !important; }
.aeo-answer-box::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--ac-teal), transparent) !important;
  opacity: 0 !important;
  transition: opacity .3s !important;
}
.aeo-answer-box:hover::after { opacity: 1 !important; }

.aeo-ans-header {
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  margin-bottom: .8rem !important;
}
.aeo-ans-icon { font-size: 20px !important; flex-shrink: 0 !important; }
.aeo-ans-platform {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ac-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}
.aeo-ans-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.aeo-ans-dot.green  { background: #43a047 !important; box-shadow: 0 0 7px #43a047 !important; }
.aeo-ans-dot.blue   { background: var(--ac-accent) !important; box-shadow: 0 0 7px var(--ac-accent) !important; }
.aeo-ans-dot.teal   { background: var(--ac-teal) !important; box-shadow: 0 0 7px var(--ac-teal) !important; }
.aeo-ans-dot.orange { background: #e65100 !important; box-shadow: 0 0 7px #e65100 !important; }

.aeo-ans-q {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ac-ice) !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
  margin-bottom: .5rem !important;
}
.aeo-ans-text {
  font-size: 15px !important;
  color: var(--ac-sky) !important;
  line-height: 1.6 !important;
}
.aeo-ans-text strong { color: var(--ac-light) !important; font-weight: 600 !important; }
.aeo-featured {
  display: inline-block !important;
  background: rgba(0,188,212,.18) !important;
  border: 1px solid rgba(0,188,212,.4) !important;
  color: var(--ac-teal) !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  margin-left: 4px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  vertical-align: middle !important;
}

/* =====================================================
   STATS STRIP
   ===================================================== */
.aeo-stats {
  background: var(--ac-card) !important;
  border-top: 1.5px solid var(--ac-border) !important;
  border-bottom: 1.5px solid var(--ac-border) !important;
  padding: 3rem 6% !important;
}
.aeo-stats-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 2rem !important;
}
.aeo-stat { text-align: center !important; }
.aeo-stat-n {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 52px !important;
  font-weight: 900 !important;
  color: var(--ac-sky) !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: .3rem !important;
}
.aeo-stat-l {
  font-size: 15px !important;
  color: var(--ac-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 500 !important;
}

/* =====================================================
   SHARED SECTION STRUCTURE
   ===================================================== */
.aeo-sec { padding: 7rem 6% !important; }
.aeo-sec-alt { background: var(--ac-dark) !important; }
.aeo-container { max-width: 1280px !important; margin: 0 auto !important; }

.aeo-eyebrow {
  display: inline-block !important;
  color: var(--ac-teal) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: .9rem !important;
}
.aeo-h2 {
  font-size: clamp(2.4rem, 4vw, 3.4rem) !important;
  font-weight: 900 !important;
  color: var(--ac-white) !important;
  letter-spacing: -.01em !important;
  text-transform: uppercase !important;
  margin: 0 0 1rem !important;
  line-height: 1.05 !important;
}
.aeo-h2 em { font-style: normal !important; color: var(--ac-sky) !important; }
.aeo-lead {
  font-size: 18px !important;
  color: var(--ac-muted) !important;
  max-width: 580px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  margin-bottom: 3.5rem !important;
}
.aeo-center { text-align: center !important; }
.aeo-center .aeo-lead { margin-left: auto !important; margin-right: auto !important; }

/* =====================================================
   WHAT IS AEO
   ===================================================== */
.aeo-what-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5rem !important;
  align-items: start !important;
}
.aeo-what-body p {
  font-size: 17px !important;
  color: var(--ac-muted) !important;
  line-height: 1.75 !important;
  margin-bottom: 1.2rem !important;
}
.aeo-what-body p strong { color: var(--ac-ice) !important; font-weight: 600 !important; }

.aeo-pill-list { list-style: none !important; margin: 2rem 0 0 !important; padding: 0 !important; }
.aeo-pill-list li {
  display: flex !important;
  gap: 1rem !important;
  align-items: flex-start !important;
  padding: 1.1rem 0 !important;
  border-bottom: 1px solid var(--ac-border) !important;
  font-size: 16px !important;
  color: var(--ac-muted) !important;
  line-height: 1.6 !important;
}
.aeo-pill-list li:last-child { border-bottom: none !important; }
.aeo-pill-icon {
  flex-shrink: 0 !important;
  width: 40px !important; height: 40px !important;
  border-radius: 10px !important;
  background: rgba(124,77,255,.12) !important;
  border: 1px solid rgba(0,188,212,.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}
.aeo-pill-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ac-white) !important;
  display: block !important;
  margin-bottom: .2rem !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* Compare table */
.aeo-tbl-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ac-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin-bottom: 1rem !important;
}
.aeo-tbl-wrap { border: 1.5px solid var(--ac-border) !important; border-radius: 14px !important; overflow: hidden !important; }
.aeo-tbl-wrap table { width: 100% !important; border-collapse: collapse !important; }
.aeo-tbl-wrap th {
  background: var(--ac-card) !important;
  padding: 1.1rem 1.3rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ac-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  text-align: left !important;
  border-bottom: 1.5px solid var(--ac-border) !important;
}
.aeo-tbl-wrap th:not(:first-child) { text-align: center !important; }
.aeo-tbl-wrap td {
  padding: 1rem 1.3rem !important;
  font-size: 16px !important;
  border-bottom: 1px solid var(--ac-border) !important;
  color: var(--ac-muted) !important;
}
.aeo-tbl-wrap td:not(:first-child) { text-align: center !important; }
.aeo-tbl-wrap tr:last-child td { border-bottom: none !important; }
.aeo-tbl-wrap tr:hover td { background: rgba(10,30,51,.7) !important; }
.aeo-yes { color: #43a047 !important; font-size: 18px !important; }
.aeo-no  { color: #e53935 !important; font-size: 16px !important; }
.aeo-meh { color: #fb8c00 !important; font-size: 18px !important; }

/* =====================================================
   VOICE & ANSWER PLATFORMS
   ===================================================== */
.aeo-platforms-grid {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 1.5rem !important;
}
.aeo-platform {
  background: var(--ac-card) !important;
  border: 1.5px solid var(--ac-border) !important;
  border-radius: 14px !important;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
  transition: border-color .3s, transform .3s !important;
}
.aeo-platform:hover { border-color: var(--ac-teal) !important; transform: translateY(-4px) !important; }
.aeo-platform-ico { font-size: 40px !important; display: block !important; margin-bottom: 1rem !important; }
.aeo-platform h4 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ac-white) !important;
  text-transform: uppercase !important;
  margin: 0 0 .4rem !important;
}
.aeo-platform p { font-size: 14px !important; color: var(--ac-muted) !important; line-height: 1.5 !important; margin: 0 !important; }
.aeo-plat-bar { margin-top: 1rem !important; }
.aeo-plat-track { height: 5px !important; background: var(--ac-border) !important; border-radius: 3px !important; overflow: hidden !important; }
.aeo-plat-fill { height: 100% !important; border-radius: 3px !important; background: linear-gradient(90deg, var(--ac-bright), var(--ac-teal)) !important; }
.aeo-plat-pct {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ac-teal) !important;
  margin-top: .4rem !important;
  display: block !important;
}

/* =====================================================
   HOW IT WORKS — 6 CARDS
   ===================================================== */
.aeo-grid3 {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 1.8rem !important;
}
.aeo-step {
  background: var(--ac-card) !important;
  border: 1.5px solid var(--ac-border) !important;
  border-radius: 16px !important;
  padding: 2.2rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color .3s, transform .3s !important;
}
.aeo-step:hover { border-color: var(--ac-teal) !important; transform: translateY(-5px) !important; }
.aeo-step::after {
  content: attr(data-n) !important;
  position: absolute !important;
  right: 1.5rem !important; top: 1rem !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 72px !important;
  font-weight: 900 !important;
  color: rgba(0,188,212,.06) !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
.aeo-step-ico {
  width: 54px !important; height: 54px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(0,188,212,.25), rgba(30,136,229,.15)) !important;
  border: 1px solid rgba(0,188,212,.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  margin-bottom: 1.3rem !important;
}
.aeo-step h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ac-white) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin: 0 0 .7rem !important;
}
.aeo-step p { font-size: 16px !important; color: var(--ac-muted) !important; line-height: 1.7 !important; margin: 0 !important; }

/* =====================================================
   SERVICES GRID
   ===================================================== */
.aeo-grid3b {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 1.5rem !important;
}
.aeo-svc {
  background: var(--ac-card) !important;
  border: 1.5px solid var(--ac-border) !important;
  border-radius: 16px !important;
  padding: 2.2rem !important;
  transition: border-color .3s, transform .3s !important;
}
.aeo-svc:hover { border-color: var(--ac-bright) !important; transform: translateY(-5px) !important; }
.aeo-svc-ico {
  width: 54px !important; height: 54px !important;
  border-radius: 13px !important;
  background: rgba(124,77,255,.12) !important;
  border: 1px solid rgba(0,188,212,.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  margin-bottom: 1.4rem !important;
  transition: background .3s !important;
}
.aeo-svc:hover .aeo-svc-ico { background: rgba(0,188,212,.25) !important; }
.aeo-svc h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ac-white) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin: 0 0 .7rem !important;
}
.aeo-svc p { font-size: 16px !important; color: var(--ac-muted) !important; line-height: 1.7 !important; margin: 0 !important; }
.aeo-tag-pill {
  display: inline-block !important;
  margin-top: 1.1rem !important;
  background: rgba(124,77,255,.12) !important;
  border: 1px solid rgba(0,188,212,.3) !important;
  color: var(--ac-teal) !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* =====================================================
   SCHEMA TYPES SHOWCASE
   ===================================================== */
.aeo-schema-grid {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 1.2rem !important;
}
.aeo-schema-card {
  background: var(--ac-card) !important;
  border: 1.5px solid var(--ac-border) !important;
  border-radius: 12px !important;
  padding: 1.6rem 1.4rem !important;
  transition: border-color .3s, transform .3s !important;
}
.aeo-schema-card:hover { border-color: var(--ac-teal) !important; transform: translateY(-3px) !important; }
.aeo-schema-card h4 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ac-teal) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin: 0 0 .5rem !important;
}
.aeo-schema-card p { font-size: 14px !important; color: var(--ac-muted) !important; line-height: 1.6 !important; margin: 0 !important; }
.aeo-schema-ico { font-size: 28px !important; margin-bottom: .8rem !important; display: block !important; }

/* =====================================================
   PROCESS TIMELINE + RESULTS
   ===================================================== */
.aeo-proc-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5rem !important;
  align-items: start !important;
}
.aeo-timeline { position: relative !important; }
.aeo-timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 29px !important; top: 0 !important; bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(180deg, var(--ac-teal), rgba(0,188,212,.05)) !important;
}
.aeo-tl {
  display: flex !important;
  gap: 2rem !important;
  align-items: flex-start !important;
  padding-bottom: 2.8rem !important;
}
.aeo-tl-n {
  flex-shrink: 0 !important;
  width: 60px !important; height: 60px !important;
  border-radius: 50% !important;
  background: var(--ac-card) !important;
  border: 2px solid var(--ac-teal) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: var(--ac-teal) !important;
  position: relative !important;
  z-index: 1 !important;
}
.aeo-tl-body h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ac-white) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin: 0 0 .5rem !important;
}
.aeo-tl-body p { font-size: 16px !important; color: var(--ac-muted) !important; line-height: 1.7 !important; margin: 0 !important; }

.aeo-results-box {
  background: var(--ac-card) !important;
  border: 1.5px solid var(--ac-border) !important;
  border-radius: 18px !important;
  padding: 2.5rem !important;
  margin-top: 4rem !important;
}
.aeo-results-box-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ac-teal) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  margin-bottom: 1.8rem !important;
}
.aeo-bar-row { margin-bottom: 1.6rem !important; }
.aeo-bar-row:last-child { margin-bottom: 0 !important; }
.aeo-bar-hd { display: flex !important; justify-content: space-between !important; margin-bottom: .5rem !important; }
.aeo-bar-lbl { font-size: 16px !important; color: var(--ac-muted) !important; }
.aeo-bar-val { font-family: 'Barlow Condensed', sans-serif !important; font-size: 18px !important; font-weight: 800 !important; color: var(--ac-sky) !important; }
.aeo-bar-track { height: 7px !important; background: var(--ac-border) !important; border-radius: 4px !important; overflow: hidden !important; }
.aeo-bar-fill { height: 100% !important; border-radius: 4px !important; background: linear-gradient(90deg, var(--ac-bright), var(--ac-teal)) !important; }

/* =====================================================
   CITY COVERAGE
   ===================================================== */
.aeo-city-tabs {
  display: flex !important;
  gap: .8rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 2.5rem !important;
}
.aeo-city-tab {
  background: none !important;
  border: 1.5px solid var(--ac-border) !important;
  color: var(--ac-muted) !important;
  padding: .6rem 1.4rem !important;
  border-radius: 100px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all .25s !important;
}
.aeo-city-tab.active,
.aeo-city-tab:hover { background: var(--ac-teal) !important; border-color: var(--ac-teal) !important; color: #fff !important; }
.aeo-city-panel { display: none !important; }
.aeo-city-panel.active { display: block !important; }
.aeo-cities-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 1rem !important;
}
.aeo-city-card {
  background: var(--ac-card) !important;
  border: 1.5px solid var(--ac-border) !important;
  border-radius: 12px !important;
  padding: 1.2rem !important;
  text-align: center !important;
  transition: border-color .25s, transform .25s !important;
}
.aeo-city-card:hover { border-color: var(--ac-teal) !important; transform: translateY(-3px) !important; }
.aeo-city-card h4 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ac-white) !important;
  text-transform: uppercase !important;
  margin: 0 0 .2rem !important;
}
.aeo-city-card p { font-size: 13px !important; color: var(--ac-muted) !important; margin: 0 !important; }

/* =====================================================
   CLIENT RESULTS
   ===================================================== */
.aeo-grid3c {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 2rem !important;
}
.aeo-result-card {
  background: var(--ac-card) !important;
  border: 1.5px solid var(--ac-border) !important;
  border-radius: 16px !important;
  padding: 2.2rem !important;
}
.aeo-result-ind {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ac-teal) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  margin-bottom: .8rem !important;
}
.aeo-result-num {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 60px !important;
  font-weight: 900 !important;
  color: var(--ac-sky) !important;
  line-height: 1 !important;
  margin-bottom: .5rem !important;
}
.aeo-result-desc { font-size: 16px !important; color: var(--ac-muted) !important; line-height: 1.65 !important; margin: 0 !important; }

/* =====================================================
   FAQ
   ===================================================== */
.aeo-faq-wrap { max-width: 860px !important; }
.aeo-faq-item { border-bottom: 1.5px solid var(--ac-border) !important; }
.aeo-faq-btn {
  width: 100% !important;
  background: none !important;
  border: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1.5rem 0 !important;
  cursor: pointer !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ac-white) !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  gap: 1rem !important;
  transition: color .25s !important;
}
.aeo-faq-btn:hover { color: var(--ac-teal) !important; }
.aeo-faq-ico {
  flex-shrink: 0 !important;
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  background: rgba(0,188,212,.12) !important;
  border: 1px solid rgba(0,188,212,.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  color: var(--ac-teal) !important;
  transition: transform .3s, background .3s !important;
}
.aeo-faq-item.open .aeo-faq-ico { transform: rotate(180deg) !important; background: rgba(0,188,212,.25) !important; }
.aeo-faq-ans { max-height: 0 !important; overflow: hidden !important; transition: max-height .4s ease !important; }
.aeo-faq-item.open .aeo-faq-ans { max-height: 400px !important; }
.aeo-faq-ans-inner { padding-bottom: 1.5rem !important; font-size: 17px !important; color: var(--ac-muted) !important; line-height: 1.75 !important; }

/* =====================================================
   CTA
   ===================================================== */
.aeo-cta {
  background: var(--ac-navy) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 8rem 6% !important;
}
.aeo-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(0,188,212,.18) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.aeo-cta-inner { position: relative !important; z-index: 2 !important; max-width: 760px !important; margin: 0 auto !important; }
.aeo-cta h2 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(2.6rem, 5vw, 4.2rem) !important;
  font-weight: 900 !important;
  color: var(--ac-white) !important;
  text-transform: uppercase !important;
  letter-spacing: -.01em !important;
  margin: 0 0 1.2rem !important;
  line-height: 1.05 !important;
}
.aeo-cta h2 em { font-style: normal !important; color: var(--ac-sky) !important; }
.aeo-cta p { font-size: 19px !important; color: var(--ac-muted) !important; line-height: 1.7 !important; margin: 0 0 2.8rem !important; }
.aeo-cta-btns { display: flex !important; gap: 1rem !important; justify-content: center !important; flex-wrap: wrap !important; }

/* =====================================================
   REVEAL ANIMATION
   ===================================================== */
.aeo-reveal { opacity: 0 !important; transform: translateY(26px) !important; transition: opacity .65s ease, transform .65s ease !important; }
.aeo-reveal.aeo-vis { opacity: 1 !important; transform: none !important; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 960px) {
  .aeo-hero-inner      { grid-template-columns: 1fr !important; }
  .aeo-hero-visual     { display: none !important; }
  .aeo-what-grid       { grid-template-columns: 1fr !important; gap: 3rem !important; }
  .aeo-grid3           { grid-template-columns: 1fr 1fr !important; }
  .aeo-grid3b          { grid-template-columns: 1fr 1fr !important; }
  .aeo-grid3c          { grid-template-columns: 1fr !important; }
  .aeo-platforms-grid  { grid-template-columns: 1fr 1fr !important; }
  .aeo-schema-grid     { grid-template-columns: 1fr 1fr !important; }
  .aeo-proc-grid       { grid-template-columns: 1fr !important; }
  .aeo-stats-inner     { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .aeo-grid3           { grid-template-columns: 1fr !important; }
  .aeo-grid3b          { grid-template-columns: 1fr !important; }
  .aeo-platforms-grid  { grid-template-columns: 1fr 1fr !important; }
  .aeo-schema-grid     { grid-template-columns: 1fr 1fr !important; }
  .aeo-stats-inner     { grid-template-columns: 1fr 1fr !important; }
  .aeo-hero h1         { font-size: 2.8rem !important; }
}
/*****************************************************************************************************/