body,
html {
    scroll-behavior: smooth;
    max-width: 100%;
}

body {
    font-family: 'Helvetica Neue', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
    font-weight: 500;
    color: #000;
    overflow-x: hidden;
    margin: auto;
    background: #fff;
}

p {
    font-family: 'Helvetica Neue', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Helvetica Neue', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #000;
}

strong {
    font-weight: 700;
}

h3 {
    font-size: 32px;
}

a {
    text-decoration: none;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    color: #fff;
}

a:hover,
a:focus,
select {
    text-decoration: none;
    outline: none;
    color: inherit;
    cursor: pointer;
    color: inherit !important;
}

.btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: none;
}

.form-control {
    margin-bottom: 15px;
}

.form-control:focus {
    box-shadow: none;
    border-color: #020087;
}

button {
    background-color: transparent;
    border: none;
}

button:focus {
    outline: none;
}

p {
    margin-bottom: 0;
    color: #000;
    line-height: 28px;
}

ul,
li {
    margin: 0;
    padding: 0;
    list-style-type: none;

}

textarea {
    resize: none;
}

.bg-darkgreen{
	background-color:#071a2e;
}
.bg-darkblue{
	background-color: #071a2e;
}
.bg-darkbrown{
	background-color: #071a2e;
}
.bg-magenta{
	background-color: #071a2e;
}
.bg-c1 {
background: #dc8510;
}
 
.bg-c2 {
background: #dc8510;
}

.bg-c3 {
background: #dc8510;
}

.bg-c4 {
background: #dc8510;
}

.bg-c5 {
background: #dc8510;
}

.bg-c6 {
background: #dc8510;
}

.text-light-blue{
	color:#c7dbed;
}

.c-dark-blue{
	background: #0b1a23;
}

.text-orange {
    color: #e37f6c;
}
.mt-5{
margin-top:50px;
}

.mt-6{
margin-top: 60px;
}

.mt-7{
margin-top: 70px;
}


/*==Scrollbar==*/

::-webkit-scrollbar {
    width: 5px;
}

::-moz-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
    background-color: #bfbfbf;
}

::-moz-scrollbar-track {
  background-color: #bfbfbf;
}

::-webkit-scrollbar-thumb {
    background: #031c2c;
    border-radius: 10px;
}

::-moz-scrollbar-thumb {
  background: #031c2c;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #ea4724;
}


/*@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');*/

.thm-btn {
    display: inline-block;
    border: 2px solid #e04524;
    padding: 12px 15px;
    font-size: 18px;
    margin-top: 20px;
    color: #e04524;
    font-weight: 700;
    transition: 1s;
    border-radius: 50px;
    position: relative;
}

.thm-btn:hover {
    background-color: #e04524;
    color: #fff !important;
}

.card-style{
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
}


.title {
    font-size: 40px;
    font-weight: 800;
    color: #031c2c;
    margin-bottom: 15px;
    line-height: 40px;
    text-transform: capitalize;
    position: relative;
}

.sb-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 30px;
}

.feature-sec{
    background: white;
}

.space {
    padding-top: 50px;
    padding-bottom: 50px;
}

.space-2 {
    padding-top: 70px;
    padding-bottom: 50px;
}

.space-pt50 {
    padding-top: 50px;
}

.fw-700 {
    font-weight: 700;
}

.fw-400 {
    font-weight: 400;
}

.w-20 {
    width: 20% !important;
}
.w-90 {
    width: 90% !important;
}
.bg-skyblue{
    background: #8ecaf0;
    border-radius: 20px;
}

.custom-header .navbar-brand img {
    width: 150px;
}

.custom-header .nav-item .nav-link {
    font-weight: 600;
    margin-left: 15px;
    color: #fff !important;
    text-transform: uppercase;
}

.custom-header .nav-item .nav-link:hover {
    color: #a7cae1 !important;
}

.custom-header .navbar-nav .dropdown-menu {
    top: 50px;
    background-color: #fff;
}

.custom-header .navbar-nav .dropdown-menu .dropdown-item {
    color: #031c2c;
}

.custom-header .navbar-nav .dropdown-menu .dropdown-item:focus,
.dropdown-item:hover {
    color: #031c2c !important;
    background-color: #a7cae1;
    
}

.custom-header .dropdown.show {
    transition: 1s;
}

.custom-header {
    background-color: #020e15;
    transition: .5s;
    box-shadow: 0px 0px 10px rgb(204 204 204 / 20%);
}


.banner {
    width: 100%;
    padding: 60px 0px 0px 0px;
    position: relative;
    /*background-image: url(../images/banner-bg.png);*/
    background-repeat: no-repeat;
    background-size: cover;
}

.banner-left {
    margin-top: 64px;
}
/*.banner:before {*/
/*    width: 60%;*/
/*    height: 100%;*/
/*    background-color: #031c2c;*/
/*    content: "";*/
/*    position: absolute;*/
/*    right: -18%;*/
/*    top: -18%;*/
    /*z-index: -1;*/
/*    border-radius: 100px;*/
/*    transform: rotate(-30deg);*/
/*}*/

.page-banner {
    width: 100%;
    padding: 98px 0px;
   /*position: relative;*/
    /*background-image: url(../images/cloud-banner-bg.webp);*/
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    background-color: #c8e3ef;
}

.banner h1 {
    font-size: 47px;
    font-weight: 700;
    color: #031c2c;
    margin-bottom: 20px;
}

.banner h1 span {
    color: #e04524;
    font-weight: 700;
    text-decoration: underline;
    font-size: 60px;
}

.banner-right img {
    width: 100%;
}

.banner-inner {
    background-color: #031c2c;
    padding-top: 120px;
    padding-bottom: 50px;
}

.banner-inner h1 {
    font-size: 60px;
    font-weight: 700;
}

/*counter-css-start*/
.counter-section {
    background-color: #eee;
}

.counter-section .counter-section-content h4 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px
}

.counter-section .counter-section-content h3 {
    font-size: 30px;
    font-weight: 700;
    color: #e04524;
}

.counter-section .counter-inner {
    background-color: #fff;
    padding: 17px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px rgb(204 204 204 / 50%);
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    transition: 0.5s;
}

.counter-section .counter-inner:hover {
    box-shadow: 0px 0px 15px rgb(206 52 41);
}

.counter-section .counter-inner h5 {
    font-size: 40px;
    color: #e04524;
}

.counter-section .counter-inner h4 {
    font-size: 28px;
    font-weight: 700;
    color: #333;
}

.counter-section .counter-inner p {
    font-weight: 600;
}


/*counter-css-end*/

/* Hero Banner Section Start*/

/* Custom CSS for Hero Banner with Light Grey Gradient and Background Effects */

.hero-banner {
    position: relative; 
    overflow: hidden;
    
    /* Base background image (still optional, but overlay will mostly cover it) */
    background-image: url('placeholder-server-room.jpg'); /* REPLACE with your actual image URL if desired */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    z-index: 1; /* For stacking context */

    border-radius: 0;
    padding-top: 5rem;
    padding-bottom: 5rem;
    margin-bottom: 0;
    min-height: 500px;
}

/* 1. PRIMARY BACKGROUND: Light Grey Linear Gradient and Abstract Grid */
.hero-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Light Grey Linear Gradient */
    background-image: 
        linear-gradient(to bottom, #ffffff 0%, #f1f1f1 100%),
        /* Subtle repeating pattern for a digital grid feel on top of the gradient */
        repeating-linear-gradient(
            45deg,
            rgba(204, 204, 204, 0.1), /* Very light grey for subtle lines */
            rgba(204, 204, 204, 0.1) 1px,
            transparent 1px,
            transparent 15px
        );
    background-blend-mode: overlay; /* Blends the gradient and pattern subtly */
    
    z-index: 2; 
}

/* 2. BACKGROUND EFFECT: ANIMATED NOISE/GRAIN */
.hero-banner::after {
    content: "";
    position: absolute;
    top: -100%; /* Start off-screen */
    left: -100%; /* Start off-screen */
    width: 300%; /* Make it large to avoid repetition */
    height: 300%; /* Make it large to avoid repetition */
    
    /* Abstract noise pattern (can be a small repeating PNG or CSS generated) */
    /* Using CSS generated dots for simplicity */
    background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 5px 5px; /* Size of the noise particles */
    
    opacity: 0.5; /* Subtle opacity */
    animation: backgroundMove 60s linear infinite; /* Slow, continuous movement */
    
    z-index: 2; /* Same as the gradient, but will be visually "behind" due to blending/opacity */
    
}

/* Keyframe animation for the background movement */
@keyframes backgroundMove {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(33.33%, 33.33%); /* Moves the large background for seamless loop */
    }
}


/* 3. ENSURE CONTENT IS ON TOP */
.hero-banner > .container {
    position: relative;
    z-index: 3; 
}

/* Custom styling for the title */

/* Custom styling for the description */
.hero-description {
    color: #4a5568; 
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Custom styling for the button */
.hero-cta-button {
    background-color: white; 
    border-color: #e04524;;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2); 
}

.hero-cta-button:hover {
    background-color: #95cce0;
    border-color: #95cce0;
    box-shadow: 0 5px 25px rgba(0, 123, 255, 0.4);
    transform: translateY(-2px);
}

.h5-color {
    color: #e04727;
    font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-banner {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .hero-title {
        font-size: 2.5rem;
    }
}

/* Hero Banner Section End*/

/*Service-section-css-start*/
.service-section li .service-inner {
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: 0.5s;
}

.service-section li .service-inner:hover {
    box-shadow: 0px 0px 15px rgb(2 0 135 / 50%);
}

.service-section li:nth-child(1) .service-inner {
    background-color: rgb(2 0 135 / 70%);
}

.service-section li:nth-child(2) .service-inner {
    background-color: rgb(255 142 0 / 70%);
}

.service-section li:nth-child(3) .service-inner {
    background-color: rgb(17 136 6 / 70%);
}

.service-section li .service-inner img {
    width: 50px;
    margin-bottom: 15px;
    filter: brightness(0) invert(1);
}

.service-section li .service-inner h4 {
    font-size: 25px;
    margin-bottom: 15px;
}

/*Service-section-css-end*/

.client-section {
    padding: 20px;
    border-radius: 14px;
}



/*feature-sec-css-start*/



.feature-cnt {
    margin-bottom: 30px;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    transition: 0.5s;
}

.feature-cnt:hover {
    box-shadow: 0px 0px 6px rgb(2 0 135 / 50%);
}

.feature-cnt img {
    margin-bottom: 20px;
}

.feature-cnt h4 {
    color: #031c2c;
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
}

.feature-img img {
    width: 100%;
}

.testimonial-sec {
    background-color: #ececec;
}


.testimonial-slider-inner {
    padding: 10px;
    border-bottom: 3px solid #031a28;
    border-radius: 10px;
    background-color: #fff;
    cursor: grab;
    min-height: 300px;
    box-shadow: 0px 0px 5px rgb(238 238 238 / 50%);

}

.testimonial-slider-inner img {
    border: 2px solid #031a28;
    padding: 10px;
    border-radius: 50%;
    margin-bottom: 20px;
    height: 80px;
    width: 80px;
    object-fit: cover;
}

.testimonial-slider-inner h4 {
    font-size: 22px;
    font-weight: 600;
    color: #031a28;
    text-transform: capitalize;
}

.testimonial-slider .slick-dots {
    bottom: -40px;
}

.testimonial-slider .slick-dots li button {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 100%;
    border: 1px solid rgb(3 26 40);;
}

.testimonial-slider .slick-dots li button:hover,
.slick-dots li.slick-active button {
    background: #031a28;
}

.slick-slide {
    margin: 0 10px;
}

@media screen and (max-width: 767px) {
  .slick-slide img {
    display: none;
  }
}

.slick-list {
    margin: 0 -10px;
}


/*slective-std-css-start*/

.slective-std {
    /*background: linear-gradient(to right, #110f6c 0%, #5467b7 100%);*/
    background: #eff3f6;
    width: 100%;
    padding-top: 200px;
    padding-bottom: 50px;
    position: relative;
}


.slective-std .shape-img {
    width: 100%;
    position: absolute;
    top: -2px;
    left: 0;
}

.slective-std-inner ul li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 5px 5px 5px 10px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px rgb(238 238 238 / 50%);
}

.slective-std-inner li:nth-child(odd) {
    background-color: #108409;
}

.slective-std-inner li:nth-child(even) {
    background-color: #FF9000;
    margin-left: 40px;
}

.slective-std-inner li .std-img img {
    margin-right: 20px;
    height: 90px;
    width: 90px;
    border-radius: 50px;
    border: 1px solid #fff;
    padding: 5px;
}

.slective-std-inner li .std-content h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

.slective-std-inner li .std-content h6 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 5px;
}

.slective-std .thm-btn {
    border-color: #fff;
    color: #fff;
    font-size: 15px;
    padding: 10px 20px;
}

.slective-std .thm-btn:hover {
    background-color: #fff !important;
    color: #020087 !important;
}

/*slective-std-css-end*/

/*feature-sec-css-end*/

/* Global Location Section */

.globe{
  padding:30px;
  background: linear-gradient(55deg, rgb(0 14 25) 0%, rgb(14 31 44) 100%);
}

.globe .global-text p{
    font-size: 2.5rem;
    color: white;
    text-align: center;
    line-height: 1.3;
}

/* Global Location Section End */

/*Dashboad-sec-css-start*/
.dashboard-sec {
    background-image: url(../images/background-image.webp);
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: 100%;
    background-size: cover;

}

.dashboard-sec-lft {
    display: flex;
    margin-bottom: 60px;
    transition: 0.5s;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
}

.dashboard-sec-lft:hover {
    box-shadow:  0px 0px 15px rgb(206 52 41);
}

.dashboard-sec-lft img {
    margin-right: 15px;
}

.dashboard-sec-lft h4 {
    font-size: 22px;
    margin-bottom: 5px;
    font-weight: 600;
    color: #e04524;
}

.dashboard-download h2 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: capitalize;
    color: #333;
}

.dashboard-download span {
    color: #e04524;
}

.dashboard-download p {
    font-size: 25px;
    font-style: italic;
    margin-bottom: 20px;
}

.app-view-slider {
    cursor: grab;
}

.app-view-slider .slick-dots li button {
    width: 10px;
    height: 10px;
    background: #eee;
    border-radius: 100%;
    border: 1px solid rgb(2 0 135 / 50%);
}

.app-view-slider .slick-dots li button:hover,
.slick-dots li.slick-active button {
    background: #031a28;
}

/*Dashboad-sec-css-end*/

.why-sec .why-sec-img img {
    width: 100%;
    margin-bottom: 15px;
}

.why-sec .why-sec-content ul li {
    margin-bottom: 15px;
    font-size: 15px;
    position: relative;
}

.why-sec .why-sec-content ul li:after {
    position: absolute;
    content: '\f178';
    top: 0px;
    left: -20px;
    font-family: fontawesome;
    color: #020087;
    font-size: 15px;
}



.cta-section .container {
    background-image: url(../images/cta-bg.png);
    width: 100%;
    background-color: #efefff;
    background-repeat: no-repeat;
    padding-top: 100px;
    padding-bottom: 100px;
    background-size: cover;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 30px 60px 0px rgb(0 0 0 / 10%);
}

.cta-section .title {
    font-size: 50px;
}

.cta-section h5 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 20px;
}

.cta-section ul li {
    display: inline-block;
    margin-top: 20px;
}

.cta-section ul li p {
    font-size: 18px;
    font-weight: 600;
    color: #020087;
    margin-right: 15px;
}

.cta-section ul li a {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    color: #020087;
    margin-right: 10px;
    transition: .2s;
}

.cta-section ul li a:hover {
    color: #FF9000 !important;
}

.custom-footer {
    background-color: #020e15;
    padding-top: 50px;
    position: relative;
}

.custom-footer h3 {
    font-size: 25px;
    font-weight: 600;
    color: #fff;
    padding: 10px 0px 15px;
    position: relative;
    margin-bottom: 20px;
}

.custom-footer h3:before {
    position: absolute;
    content: "";
    top: 90%;
    left: 0;
    width: 80px;
    height: 1px;
    background-color: #e04524;
}

.custom-footer h3:after {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    width: 50px;
    height: 0px;
    border-bottom: 1px solid #e04524;
}

.custom-footer .ftr-about img {
    width: 120px;
    margin-bottom: 10px;
    margin-top: 13px;
}

.social-media a {
    display: inline-block;
    font-size: 18px;
    height: 35px;
    width: 35px;
    line-height: 36px;
    text-align: center;
    color: #fff;
    border: 1px solid #fff;
    margin-top: 15px;
    border-radius: 25px;
    margin-right: 10px;
    transition: 0.2s;
}

.fa-phone, .fa-envelope-o {
    background: #031c2c;
    padding: 8px 10px 8px 10px;
    border-radius: 16px;
    color: #ffffff;
    font-size: 13px;
}

.top-bar .fa-whatsapp {
    background: #25d366;
    padding: 8px 10px 8px 10px;
    border-radius: 16px;
    color: #ffffff;
    font-size: 13px;
}

.social-media a:hover {
    background-color: #e04524;
    color: #fff !important;
    border-color: #e04524;
}

.custom-footer .ftr-links li a {
    display: inline-block;
    margin-bottom: 10px;
    transition: 0.2s;
}

.custom-footer .ftr-links li a:hover {
    color: #e04524 !important;
}

.copy-right {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid rgb(255 255 255 / 10%);
    margin-top: 40px;
}

.copy-right a {
    color: #FF9000;
    text-decoration: underline;
}

.copy-right a:hover {
    color: #fff;
}

.scroll {
    position: fixed;
    bottom: 20px;
    right: 20px;

}

.scroll a {
    display: inline-block;
    background-color: #38a443;
    color: #fff;
    font-size: 16px;
    padding: 7px 10px 8px 13px;
    border-radius: 25px;
    animation: MoveUpDown 2s linear infinite;
    transition: 0.2s;
}

.scroll .fa-whatsapp{
    font-size: 25px;
    padding: 3px;
}

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

@keyframes MoveUpDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


/*Toggle-css-start*/

.navbar-toggler-icon {
    height: 40px;
    width: 40px;
    line-height: 43px;
    text-align: center;
    background-color: #e04524;
    color: #fff;
    font-size: 24px;
    border-radius: 50px;
}

/*Toggle-css-end*/


/*content-page-css-start*/

.content h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.content h4 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px;
}

.content ul li {
    list-style-type: disc;
    margin-left: 15px;
}

.content p a {
    display: inline-block;
    font-weight: 700;
    color: #020087;
}

/*content-page-css-end*/

.bubbles_wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
    pointer-events: none;
}

@-webkit-keyframes animateBubble {
    0% {
        margin-top: 20%
    }

    to {
        margin-top: -30%
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 20%
    }

    to {
        margin-top: -30%
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 20%
    }

    to {
        margin-top: -30%
    }
}

@-webkit-keyframes sideWays {
    0% {
        margin-left: 0
    }

    to {
        margin-left: 25px
    }
}

@-moz-keyframes sideWays {
    0% {
        margin-left: 0
    }

    to {
        margin-left: 25px
    }
}

@keyframes sideWays {
    0% {
        margin-left: 0
    }

    to {
        margin-left: 25px
    }
}

.x1 {
    -webkit-animation: animateBubble 15s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 15s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 6%;
    top: 45%;
    background: #FF9000;
}

.x2 {
    -webkit-animation: animateBubble 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 5%;
    top: 80%;
    background: #108409;
}

.x3 {
    -webkit-animation: animateBubble 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 10%;
    top: 40%;
    background: #ff5219;
}

.x4 {
    -webkit-animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    left: 20%;
    top: 0;
    background: #020087;
}

.x5 {
    -webkit-animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 30%;
    top: 50%;
    background: #FF9000;
}

.x6 {
    -webkit-animation: animateBubble 11s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 11s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 50%;
    top: 0;
    background: #108409;
}

.x7 {
    -webkit-animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 10s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 65%;
    top: 70%;
    background: #FF9000;
}

.x8 {
    -webkit-animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    animation: animateBubble 12s linear infinite, sideWays 3s ease-in-out infinite alternate;
    left: 80%;
    top: 10%;
    background: #020087;
}

.x9 {
    -webkit-animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    animation: animateBubble 19s linear infinite, sideWays 4s ease-in-out infinite alternate;
    left: 90%;
    top: 50%;
    background: #FF9000;
}

.x10 {
    -webkit-animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate;
    animation: animateBubble 16s linear infinite, sideWays 2s ease-in-out infinite alternate;
    left: 80%;
    top: 80%;
    background: #020087;
}

.bubble {
    position: absolute;
    border-radius: 25px;
    box-shadow: none;
    width: 8px;
    height: 8px;
}

/*==========Bubbles Animation CSS End==========*/


/* ==== 1.) Managed Services Page - ========= */

/* Managed Service page Banner Section CC Starts */

        /* A very light grey for a clean, modern feel */
        .managed-banner {
            background-color: #ccdce6; /* Light Grey (similar to Tailwind's gray-100) */
            color: #1A202C; /* Very Dark Grey/Near-Black text for contrast */
            padding: 8rem 0; /* Generous padding for visual impact */
            border-radius: 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        .managed-banner h1 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
            color: #1A202C; /* Ensure heading is dark */
        }

        .managed-banner p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            color: #4A5568; /* Slightly softer dark text for paragraphs */
        }
        
        
        
        /* The warning button provides excellent contrast */
        .managed-banner .btn-warning {
            color: #1A202C !important; /* Ensures the button text is dark for readability */
            font-weight: 600;
            border-radius: 0.5rem;
        }

        /* Styling for the small text below the button */
        .managed-banner small {
             color: #718096 !important; /* Medium grey for subtle detail */
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 768px) {
            .managed-banner {
                padding: 3rem 0;
            }
            .managed-banner h1 {
                font-size: 2rem;
            }
            .managed-banner p {
                font-size: 1rem;
            }
        }
        @media (max-width: 768px) {
            .managed-banner {
                padding: 3rem 1rem; /* Reduce vertical padding and add horizontal padding */
            }
            .managed-banner h1 {
                font-size: 2.25rem; /* Adjust title size */
            }
            .managed-banner p {
                font-size: 1.1rem; /* Adjust paragraph size */
            }
        }

        /* Mobile phones (max-width: 500px) */
        @media (max-width: 500px) {
            .managed-banner {
                padding: 10rem 1.5rem 2rem 1.5rem; /* More aggressive padding reduction for small screens */
            }
            .managed-banner h1 {
                font-size: 1.75rem; /* Smaller title for narrow displays */
                /* Bootstrap text sizing works well, but we ensure it doesn't get too cramped */
            }
            .managed-banner p {
                font-size: 1rem;
            }
            .managed-banner .btn-lg {
                /* Optionally ensure button remains a good size on small devices */
                font-size: 1rem;
                padding: 0.75rem 1.5rem;
            }
        }
/* Managed Service page Banner Section CC Ends */

/* ===== Nav pills Section CCS Starts ====== */


#services .container-fluid-custom {
    padding: 50px 15px;
}

/* --- Scrollable Nav Pills (Tabs) --- */
#services .nav-tabs-scrollable {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* Enables horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Better scrolling experience on iOS */
    padding-bottom: 15px; /* Space for scrollbar */
    margin-bottom: 30px;
    /* Hide the scrollbar visual (optional, often preferred for aesthetics) */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#services .nav-tabs-scrollable::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}
        
#services .nav-tabs-scrollable .nav-item {
    flex-shrink: 0; /* Prevents items from shrinking */
    margin-right: 8px;
}

#services .nav-tabs-scrollable .nav-link {
    white-space: nowrap; /* Ensures text stays on one line */
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    color: #495057;
    font-weight: 500;
    padding: 8px 15px;
    transition: background-color 0.2s;
}

#services .nav-tabs-scrollable .nav-link.active {
    background-color: #1a202c; /* Dark background for active tab */
    border-color: #1a202c;
    color: #fff !important;
}

/* --- Icon Card Styling (Applied universally) --- */
#services .icon-card {
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    text-align: center;
    padding: 1rem;
    min-height: 120px; /* Ensure a consistent height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#services .icon-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

#services  .icon-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 8px;
    /* Simulating the placeholder image style */
    background-color: #f8f8fa;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    font-weight: bold;
}

#services .icon-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #343a40;
}
        
#services .item-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 5px;
    border-radius: 37px;
}

/* Content Group Heading - STYLISH UPDATE */
#services .content-group-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-top: 2.5rem; 
    margin-bottom: 1.5rem;
    text-align: left;
    /* Highlighting/Styling */
    display: inline-block; /* Essential to wrap background around text */
    background-color: #e9ecef; /* Light gray background for highlight */
    padding: 0.25rem 0.75rem; /* Padding around the text */
    border-radius: 0.5rem; /* Rounded corners for the background */
    line-height: 1.2; /* Ensures vertical alignment is clean */
}

/* Custom Grid for 6 columns on desktop, 4 on small tablet, 3 on mobile (Used for large groups) */
#services .icon-grid {
    display: grid;
    gap: 10px; /* Gap between cards */
    /* Default: Mobile (3 columns) */
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 576px) { /* Small devices (sm) - 4 columns */
    #services .icon-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 992px) { /* Large devices (lg) - 6 columns */
    #services .icon-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}
        
/* --- Centering Grids for Partial Rows (Used for small groups) --- */

/* 3-Column Centering (CMS, Utility, Dev) */
#services .centered-three-col-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
    max-width: 550px; /* Constrains max width for clean grouping */
    width: 100%;
    margin: 0 auto; /* Centers the block */
}
     

/* =========== Nav pills CCS For Managed Services Page Ends ========= */
  
/* ========= Client Review Section Starts =================*/

.reviews-section {
    max-width: 960px;
    margin: auto;
    background: #ffffff;
    padding: 2rem;
}

.section-title {
    font-weight: 700;
    color: #031c2c;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 26px;
}

.review-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.review-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.star-rating {
    color: #ffc107; /* Bootstrap yellow */
    font-size: 1.25rem;
}

.review-text {
    font-style: italic;
    color: #495057;
    margin: 1rem 0;
}

.reviewer-name {
    font-weight: 600;
    color: #212529;
}

.review-date {
    font-size: 0.875rem;
    color: #6c757d;
}
    
/* ========= Client Review Section Ends =================*/
    
/* --- START: FULLY RESPONSIVE TOP BAR STYLING --- */

.top-bar {
    height: auto; /* Allow height to adjust on mobile */
    min-height: 35px; /* Minimum height for better tap target */
    background-color: #f0f0f0; 
    color: #ecf0f1; 
    padding: 5px 0; /* Reduced padding for mobile */
    position: relative; 
    z-index: 1040; 
    font-size: 0.8rem; /* Smaller font size on mobile */
}

/* Default styling for all screens */
.top-bar .contact-info {
    text-align: center; /* Center content by default */
    padding: 0;
    margin: 0;
}

.top-bar .list-inline-item {
    margin: 0 5px; /* Reduced horizontal margin for small screens */
}

.top-bar a {
    color: #031c2c; 
    text-decoration: none;
    transition: color 0.3s ease;
    /* Ensure the link text doesn't wrap oddly on one line */
    white-space: nowrap; 
}

.top-bar a:hover, .top-bar a span:hover {
    color: #031c2c; 
}

.top-bar .whatsapp-link a {
    color: #25d366; 
}

/* ------------------------------------------ */
/* TABLET AND DESKTOP RESPONSIVENESS (≥576px) */
/* ------------------------------------------ */

@media (min-width: 576px) {
    .top-bar {
        font-size: 0.9rem; /* Slightly larger font on tablet */
        padding: 8px 0;
        height: 40px;
    }
    .top-bar .contact-info {
        text-align: right; /* Align right on larger screens */
    }
}

/* ------------------------------------------ */
/* LARGE DESKTOP ADJUSTMENTS (≥992px) */
/* ------------------------------------------ */

/* On large screens (lg and up), fix the custom header position below the top bar */
@media (min-width: 992px) {
    /*.custom-header.fixed-top {*/
    /*    top: 40px; */
    /*    z-index: 1030;*/
    /*}*/
    /*.top-bar {*/
    /*    font-size: 0.85rem;*/
    /*}*/
    /* Show the full text descriptions on larger screens */
    /*.d-none.d-sm-inline-block {*/
    /*    display: inline-block !important;*/
    /*}*/
    
    #runner .top-bar{
        display: none;
    }
}

/* ------------------------------------------ */
/* ALL SCREENS: HEADER POSITIONING */
/* ------------------------------------------ */

/* Default header position is 0 (for mobile) */
.custom-header.fixed-top {
    top: 0;
    z-index: 1030;
}


/* --- LIGHT HERO BANNER STYLE --- */
.hero-banner-linux {
    background-color: #ccdce6; /* Pure white background */
    color: #212529; /* Dark text */
    padding: 80px 20px;
    margin-bottom: 10px;
    text-align: center;
    border: 1px solid #e0e6ed; /* Subtle border for definition */
}

.hero-banner-linux h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1.2;
    color: #031c2c; /* Primary blue highlight for main heading */
}

.hero-banner-linux .lead {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: #3b4855;
}

.hero-tagline {
    font-size: 0.95rem;
    color: #28a745; /* Green highlight for the key benefit */
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-outline-banner:hover{
    color: #031c2c;
    border-color: #031c2c;
    background-color: white;
}
        
.btn-outline-banner{
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
    font-weight: 600;
}

/* --- END LIGHT HERO BANNER STYLE --- */


      
/* Custom card style to match the image's rounded shadow look */

.icon-card {
    border: none;
    border-radius: 1rem !important; /* Larger radius than default Bootstrap */
    transition: all 0.3s ease;
    cursor: pointer;
}
       
.icon-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; /* Stronger hover shadow */
}
        
/* Simulating the larger gap between the two main sections */
.main-section-gap {
    margin-bottom: 6rem; /* Large vertical gap */
}

 /* Ensure heading weight is bold (Bootstrap's font-weight system is simpler) */
#panel-section .custom-heading {
    font-weight: 800;
    line-height: 1.1;
}
        
@media (max-width: 576px) {
    #panel-section .custom-heading, .lead {
        font-size: 1.5rem; /* Desktop font size (e.g., 40px) */
        text-align: center;
    }
}
        
#panel-section{
    background: #efefef;
}

/* ======= Server Page Features Section Start ======== */
#adv-features .dark-feature-section {
    background-color: #020e15; /* Deep blue/black background */
    color: #ffffff;
    padding: 80px 0; /* Padding top and bottom */
}

#adv-features h1, #adv-features p, #adv-features h2{
    font-family: 'Helvetica Neue', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}      
#adv-features .feature-box {
    padding: 16px;
    margin-bottom: 40px; /* Space between rows on mobile */
}

/* Adjusting the main heading size for responsiveness */
#adv-features .main-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
}
        
@media (min-width: 768px) { /* md breakpoint and up */
    #adv-features .main-title {
        font-size: 3.5rem;
    }
}
        
/* Style for the icons (simulating the blue glow/color) */
#adv-features .feature-icon {
        font-size: 2.2rem;
        color: #e37f6c; /* Bright blue color */
        margin-bottom: 15px;
        display: block; /* Ensure icons take up a block for margin */
}
        
/* Adjusting feature title size */
#adv-features .feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: white;
}

/* Subtitle style */
#adv-features .sub-title {
    color: #b0c4de; /* Lighter text color for body */
    font-size: 0.95rem;
}

/* ========== Server Page Features Section Ends ============= */    


/* ========== Support Section Strarts ============= */   

.support-section {
    background-color: #ffffff;
    padding: 80px 0;
}

/* Main Heading Styling */
#support-section .main-title {
    font-size: 2.25rem; /* Mobile default */
    font-weight: 800;
    line-height: 1.2;
    color: #1a202c; /* Dark text */
}

@media (min-width: 768px) { /* Medium screens and up */
    #support-section .main-title {
        font-size: 30px;
    }
}
        
/* Introductory paragraph text */
#support-section .intro-text {
    color: #6c757d; /* Muted gray */
    line-height: 1.6;
}

/* Feature Card Styling */
#support-section .feature-card {
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    padding: 30px;
    height: 100%; /* Ensures cards in the row are same height */
    transition: box-shadow 0.3s ease;
    /* Ensure text inside cards is centered on mobile too */
    text-align: center;
}

/* Override card text centering on desktop */
@media (min-width: 768px) {
    #support-section .feature-card {
        text-align: left;
    }
}

#support-section .feature-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Icon Container (simulating the bubble backgrounds) */
#support-section .icon-container {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 20px;
    background-color: #e37f6c2e; /* Light blue background */
    /* Center the icon container horizontally on mobile */
    margin-left: auto;
    margin-right: auto;
}
       
@media (min-width: 768px) {
    #support-section .icon-container {
        margin-left: 0; /* Reset margin on desktop */
    }
}
        
/* Icon color */
#support-section .feature-icon {
    font-size: 28px;
    color: #e37f6c; /* Orange color */
}

/* Custom style for the envelope icon (using a placeholder image simulation for complexity) */
       
/* Custom style for the phone icon (using a placeholder image simulation for complexity) */


/* Feature content styling */
#support-section .feature-title {
    font-weight: 700;
    color: #212529;
    font-size: 1.25rem;
    margin-bottom: 8px;
}

#support-section .feature-detail, #support-section .feature-detail-light {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #6c757d;
}

#support-section .feature-detail-light {
    color: #99a2ad; /* Lighter color for the 24/7 text */
}

#support-section .call-now {
    font-weight: 700;
    color: #e37f6c; /* Blue call link */
}
        
/* ========== Support Section Ends ============= */


/* Pill Tab - 1.) Server Packages page Section */
#pricecard{
    background: white;
}

#pricecard .pricing-section {
    padding: 10px 0;
    text-align: center;
}

/* Responsive Pills Container */
#pricecard .nav-pills-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    max-width: 600px;
    margin: 0 auto 30px;
	border-bottom: 1px solid #dee2e6;
    /* Ensure nav-pills look correct with custom styling */
}
        
#pricecard .nav-pills .nav-link {
    color: #495057;
    font-weight: 600;
    transition: all 0.3s;
	border: 1px solid #dee2e6;
}

#pricecard .nav-item {
    flex-shrink: 0;
    margin-right: 27px;
}
        
#pricecard .nav-pills .nav-link:hover {
     background-color: #e9ecef;
}
        
#pricecard .nav-pills .nav-link.active, #pricecard .nav-pills .show > .nav-link {
    background-color: #031c2c;
    color: #fff !important;
}

        /* Pricing Card Customization */
#pricecard .card-pricing {
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    height: 100%;
}
        
#pricecard .card-pricing:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
}

/* Header Style for Packages */
#pricecard .card-pricing .card-header {
    color: #fff;
    padding: 1.5rem;
    border-bottom: 0;
    font-size: 21px;
    font-weight: 700;
}

/* Feature List Styling */
#pricecard .list-group-item {
    border: none;
    padding: 10px 15px;
    color: #495057;
    font-size: 0.95rem;
}

#pricecard .list-group-item:nth-child(even) {
    background-color: #f8f9fa;
}


/* Price text */
#pricecard .price-display {
    font-size: 1.5rem;
    font-weight: 700;
    color: #343a40;
    line-height: 1;
}

#pricecard .price-display small {
    font-size: 60%;
    font-weight: 400;
    color: #6c757d;
}

/* Button Styling */
#pricecard .btn-primary-custom {
    background-color: #020e15; 
    border-color: #020e15;
    font-weight: 600;
    border-radius: 0 0 1rem 1rem;
    padding: 10px 30px;
}

#pricecard .btn-primary-custom:hover {
    background-color: #c54111;
    border-color: #c54111;
}

/* Custom Colors for Packages */
#pricecard .card-header { 
    background-color: #c54111; 
}

/* ==== Contact Page --- Get in Touch Form CSS Starts ===== */

    .getintouch .contact-title {
      font-weight: bold;
      font-size: 2.2rem;
    }
    .getintouch label {
      font-weight: 500;
    }
    .getintouch .btn-custom {
      background-color: #1a2238;
      color: #fff;
      font-size: 1.2rem;
      border-radius: 8px;
      padding: 8px 32px;
    }
    .getintouch .btn-custom:hover {
      background-color: #394362;
    }
    .getintouch .card-shadow {
      box-shadow: 0 4px 14px 0 rgba(0,0,0,.09), 0 1.5px 4px 0 rgba(0,0,0,.04);
      border: none;
      border-radius: 18px;
      transition: box-shadow 0.3s;
    }
    .getintouch .card-shadow:hover {
      box-shadow: 0 8px 24px 0 rgba(0,0,0,.16), 0 3px 8px 0 rgba(0,0,0,.10);
    }
    .getintouch .support-icon {
      font-size: 2.5rem;
      color: #e37f6c;
      margin-bottom: 10px;
    }

  .getintouch .text-orange {
       color: #e37f6c;
	   font-weight: 600;
	}

    @media (max-width: 767.98px) {
      .getintouch .contact-title {
        font-size: 1.5rem;
      }
    }
/* ==== Contact Page --- Get in Touch Form CSS Ends ===== */   

/* ==== SSL Certificate Plans  ==== */

#ssl-plans .plan-card {
            transition: all 0.3s ease;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            min-height: 100%; /* Ensures cards in a row have equal height */
        }
       #ssl-plans .plan-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
        }
       #ssl-plans .section-header {
            margin-bottom: 3rem;
            font-weight: 700;
            color: #343a40;
        }

 #security-sec .section-bg {
      background-color: #071927;
      color: #ffffff;
    }
    #security-sec .sec-title {
      font-size: 2rem;
      font-weight: bold;
      letter-spacing: 1px;
    }
    #security-sec .title-underline {
      width: 150px;
      height: 8px;
      background: #f27227;
      border-radius: 0 12px 12px 0;
      margin-bottom: 2rem;
      margin-top: 1rem;
      display: block;
    }
    
    @media (max-width: 767.98px) {
      #security-sec .sec-title { font-size: 1.7rem; }
      #security-sec .section-content p { font-size: 1.05rem; }
      #security-sec .section-bg { padding: 2rem 1rem !important; }
    }

#backup-plans .card {
            border: none;
            border-radius: 1rem; /* Rounded corners for modern feel */
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            height: 100%; /* Ensure all cards are the same height */
        }
 #backup-plans .card:hover {
            transform: translateY(-5px); /* Lift card on hover */
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
        }
       #backup-plans .card-header {
            background-color: #c54111;
            color: white;
            border-radius: 0.5rem 0.5rem 0 0;
    		text-align: center;
    		/* padding: 1.5rem; */
    		font-size: 1.3rem;
    		font-weight: 700;
        }
       #backup-plans .card-body .price {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
       #backup-plans .list-group-item {
            border: none;
            padding: 5px 10px;
        }
      
      #backup-plans .btn-block {
            border-radius: 0 0 1rem 1rem; /* Match bottom card rounding */
			background: #020e15;
			color:white;
        }

		#backup-plans .btn-block:hover{
border-radius: 0 0 1rem 1rem; /* Match bottom card rounding */
			border: 2px solid #020e15;
			background: white;
			font-weight: 500;
        }
        /* Make the card footer stick to the bottom */
       #backup-plans .card-footer {
            margin-top: auto;
            border-radius: 0 0 1rem 1rem;
            border-top: 1px solid #dee2e6;
        }

/* Video Stream Solution Page */

		
       #vhero-section .btn-signup {
            transform: translateY(-1px);
            box-shadow: 0 6px 15px rgba(111, 66, 193, 0.3);
            background-color: #5a32a3;
			color: white;

        }

        /* --- Hero Section --- */
        .vhero-section {
            padding: 140px 0 100px;
            position: relative;
            background: #ccdce6;
        }

        #vhero-section .hero-badge {
            display: inline-block;
            background: rgba(111, 66, 193, 0.1);
            color: var(--primary-accent);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
        }

        #vhero-section .hero-title {
            font-size: 3.5rem;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            color: #111;
        }

        #vhero-section .hero-lead {
            font-size: 1.25rem;
            color: var(--text-muted);
            margin-bottom: 2.5rem;
            max-width: 500px;
        }

        #vhero-section .btn-watch-demo {
            background-color: white;
            border: 1px solid #ced4da;
            color: var(--text-main);
            padding: 0.8rem 1.5rem;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s;
            font-weight: 600;
        }

        #vhero-section .btn-watch-demo:hover {
            border-color: var(--primary-accent);
            color: var(--primary-accent);
            text-decoration: none;
            background-color: #fcfcfc;
        }

        /* --- Video/Code Split --- */
        #vhero-section .code-window {
            background: #1e1e24; /* Keep code block dark for contrast */
            border-radius: 12px;
            font-family: 'Fira Code', monospace;
            font-size: 0.9rem;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(0,0,0,0.1);
        }

        #vhero-section .window-header {
            background: rgba(255,255,255,0.05);
            padding: 12px 15px;
            display: flex;
            gap: 8px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        #vhero-section .dot { width: 10px; height: 10px; border-radius: 50%; background: #333; }
        #vhero-section .dot.red { background: #ff5f56; }
        #vhero-section .dot.yellow { background: #ffbd2e; }
        #vhero-section .dot.green { background: #27c93f; }

        #vhero-section .code-content {
            padding: 20px;
            color: #a9b7c6;
        }

        #vhero-section .keyword { color: #cc7832; }
        #vhero-section .string { color: #6a8759; }
        #vhero-section .function { color: #ffc66d; }
        #vhero-section .comment { color: #808080; }

        /* --- Features Grid --- */
        #products .feature-card {
            background: white;
            padding: 2.5rem 2rem;
            border-radius: 12px;
            height: 100%;
            border: 1px solid var(--border-light);
            transition: transform 0.3s, box-shadow 0.3s;
        }

         #products .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
            border-color: transparent;
        }

        #products .feature-icon {
            width: 55px;
            height: 55px;
            background: rgb(255 236 232);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #e56c52;
            font-size: 1.6rem;
            margin-bottom: 1.5rem;
        }

        /* --- Stats --- */
        .stats-section {
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            background: #fafafa;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--primary-accent);
        }

        .stat-label {
            color: var(--text-main);
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
        }

        /* --- Global Map Visual --- */
        .map-bg {
            background: #020e15;
            position: relative;
            overflow: hidden;
        }

        /* Map image needs to be visible on white bg, removing invert filter */
        .map-image {
            background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/World_map_blank_without_borders.svg/2000px-World_map_blank_without_borders.svg.png') no-repeat center center;
            background-size: contain;
            opacity: 0.08;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .pulse-dot {
            width: 12px;
            height: 12px;
            background-color: #00d4ff;
            border-radius: 50%;
            position: absolute;
            animation: pulse-glow 2s infinite;
        }

        /* --- CTA Section --- */
        .cta-section {
            background: #0f1115; /* Keep CTA dark for contrast/impact */
            color: white;
        }

        .cta-section .text-gray {
            color: #a0a0a5;
        }

 		 /* --- Animations --- */
        @keyframes pulse-glow {
            0% { box-shadow: 0 0 0 0 rgba(111, 66, 193, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(111, 66, 193, 0); }
            100% { box-shadow: 0 0 0 0 rgba(111, 66, 193, 0); }
        }

/* Responsive */
        @media(max-width: 768px) {
           #vhero-section .hero-title { font-size: 2.5rem; }
           #vhero-section .code-window { margin-top: 2rem; }
            
            /* Map adjustments for mobile */
           #vhero-section .map-container {
                height: 300px;
                padding: 20px 0;
            }
           #vhero-section .map-image {
                background-size: cover; /* Ensures map texture covers area */
                opacity: 0.05;
            }
            .pulse-dot {
                display: none; /* Hide dots as they won't align with 'cover' scaling */
            }
        }

/* --- Hero Section --- */
        .dmhero-section {
           background: radial-gradient(circle at top right, rgba(51, 149, 255, 0.15), transparent 50%),
                        linear-gradient(180deg, var(--bg-dmbody) 0%, #061b29 100%);
            color: #fff;
            padding: 100px 0 80px;
            position: relative;
            overflow: hidden;
        }

        /* Abstract tech pattern overlay */
        .dmhero-section::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.02) 0%, transparent 25%),
                              radial-gradient(circle at 80% 20%, rgba(51, 149, 255, 0.05) 0%, transparent 30%);
            pointer-events: none;
          }

        .dmhero-section .hero-content h1 {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }

       .dmhero-section .hero-content p {
            font-size: 1.25rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            max-width: 600px;
        }

       .dmhero-section .btn-hero-primary {
            background-color: var(--action-color);
            color: #fff;
            border: none;
            padding: 1rem 2.5rem;
            font-weight: 600;
            border-radius: 5px;
            font-size: 1.1rem;
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
            transition: all 0.3s ease;
        }

        .dmhero-section .btn-hero-primary:hover {
            background-color: #e55a2b;
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
        }

       .dmhero-section .btn-hero-secondary {
            background-color: transparent;
            color: #fff;
            border: 2px solid rgba(255,255,255,0.3);
            padding: 0.9rem 2.5rem;
            font-weight: 600;
            border-radius: 5px;
            font-size: 1.1rem;
            margin-left: 1rem;
            transition: all 0.3s ease;
        }

       .dmhero-section .btn-hero-secondary:hover {
            background-color: rgba(255,255,255,0.1);
            border-color: #fff;
            color: #fff;
        }
:root {
            /* Core Theme Colors */
            --bg-dmbody: #020e15;       /* The requested dark color */

            --bg-surface: #061b29;    /* Slightly lighter for cards */
            --bg-surface-2: #0a2638;  /* Even lighter for hover states/secondary cards */
            
            /* Brand Colors */
            --primary-color: #020e15; /* Brightened for dark mode visibility */
            --action-color: #ff6b35;
            --accent-color: #00d4ff;
            
            /* Text Colors */
            --text-main: #ffffff;
            --text-muted: #a0aec0;
            --text-dark: #ffffff;     /* Override previous variable */
            
            /* Borders */
            --border-color: rgba(255, 255, 255, 0.08);
        }

/* --- Services Section --- */
        .y2k-services .section-title {
            text-align: center;
            margin-bottom: 4rem;
        }

        .y2k-services .section-title h2 {
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .y2k-services .section-title .line {
            height: 4px;
            width: 60px;
            background-color: var(--action-color);
            margin: 0 auto;
            border-radius: 2px;
        }

        .y2k-services .service-card {
            border: none;
            border-radius: 10px;
            padding: 2rem;
            background: #fff;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
            text-align: center;
        }

        .y2k-services .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
			border-top: 4px solid #ff6b35;
        }

        .y2k-services .icon-box {
            width: 80px;
            height: 80px;
            line-height: 80px;
            border-radius: 50%;
            background: rgb(255 107 53 / 6%);
            color: var(--accent-color);
            font-size: 2rem;
            margin: 0 auto 1.5rem;
        }

		.y2k-services .icon-box .fa{
			color: #ff6b35;
		}

       .y2k-services .service-card h4 {
            margin-bottom: 1rem;
            font-weight: 600;
        }

/* --- Process Section --- */
        .process-section {
            background-color: #020e15;
            color: #fff;
            padding: 80px 0;
        }
        
        .process-step {
            position: relative;
            padding: 20px;
            text-align: center;
        }

        .step-number {
            font-size: 4rem;
            font-weight: 700;
            color: rgb(141 182 206 / 39%);
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 0;
        }

        .step-content {
            position: relative;
            z-index: 1;
            margin-top: 2rem;
        }

        .step-icon {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--action-color);
        }

/* Home Page Hero Section */

.homehero-sec  {
            width: 100%;
            padding: 60px 0;
            /* Radial gradient to mimic the lighting in the image */
            background: radial-gradient(circle at 20% 50%, #092033 0%, #020c13 100%); 
            position: relative;
            overflow: hidden;
        }

        /* Ensure content sits above background animations */
        .homehero-sec .container {
            position: relative;
            z-index: 10;
        }

        /* --- UNIQUE ANIMATION: Digital Data Squares --- */
        .homehero-sec .bg-digital-square {
            position: absolute;
            background: rgba(232, 93, 40, 0.05);
            border: 1px solid rgba(232, 93, 40, 0.1);
            z-index: 1;
            animation: floatUp linear infinite;
        }

        .homehero-sec .sq-1 { width: 60px; height: 60px; left: 10%; bottom: -60px; animation-duration: 15s; animation-delay: 0s; }
        .homehero-sec .sq-2 { width: 100px; height: 100px; left: 20%; bottom: -100px; animation-duration: 25s; animation-delay: 2s; background: rgba(255, 255, 255, 0.02); border-color: rgba(255,255,255,0.05); }
        .homehero-sec .sq-3 { width: 40px; height: 40px; left: 85%; bottom: -40px; animation-duration: 12s; animation-delay: 5s; }
        .homehero-sec .sq-4 { width: 80px; height: 80px; left: 90%; bottom: -80px; animation-duration: 20s; animation-delay: 1s; background: rgba(58, 75, 88, 0.1); border-color: rgba(58, 75, 88, 0.2); }
        .homehero-sec .sq-5 { width: 150px; height: 150px; left: 50%; bottom: -150px; animation-duration: 30s; animation-delay: 7s; opacity: 0.3; }

        @keyframes floatUp {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
        }

        .homehero-sec .hero-title {
            font-weight: 700;
            font-size: 2.5rem;
            line-height: 1.2;
            margin-bottom: 0.5rem;
            opacity: 0;
        }

        .homehero-sec .hero-subtitle {
            color: #e85d28;
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            letter-spacing: 1px;
            opacity: 0;
            position: relative;
            display: inline-block;
        }
        
        .homehero-sec .service-pills {
            color: #8fa6b6;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            opacity: 0;
        }

        .homehero-sec .hero-text {
            color: #cfd8dc;
            font-size: 1rem;
            line-height: 1.8;
            margin-bottom: 2.5rem;
            max-width: 95%;
            opacity: 0;
        }

        /* Custom Orange Button */
        .homehero-sec .btn-custom-orange, .reviews-section .btn-custom-orange  {
            background-color: #e85d28;
            border: none;
            color: white;
            padding: 12px 30px;
            font-weight: 600;
            border-radius: 4px;
            box-shadow: 0 4px 15px rgba(232, 93, 40, 0.3);
            transition: all 0.3s ease;
            opacity: 1;
        }
	.btn-custom-orange  {
            background-color: #e85d28;
            border: none;
            color: white;
            padding: 12px 30px;
            font-weight: 600;
            border-radius: 4px;
            box-shadow: 0 4px 15px rgba(232, 93, 40, 0.3);
            transition: all 0.3s ease;
            opacity: 1;
        }

        .homehero-sec .btn-custom-orange:hover {
            background-color: #d14d1d;
            color: white;
            transform: translateY(-1px);
            text-decoration: none;
        }

        /* Custom Outline Button */
        .homehero-sec .btn-custom-outline {
            background-color: transparent;
            border: 1px solid #3a4b58;
            color: white;
            padding: 12px 30px;
            font-weight: 600;
            border-radius: 4px;
            margin-left: 15px;
            transition: all 0.3s ease;
            opacity: 1;
        }

        .homehero-sec .btn-custom-outline:hover {
            border-color: white;
            background-color: rgba(255,255,255,0.05);
            color: white !important;
            text-decoration: none;
        }

        /* Cloud Icon styling */
        .homehero-sec .cloud-icon-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            position: relative;
        }

        .homehero-sec .cloud-icon {
            font-size: 12rem;
            color: #1a2e3d;
            opacity: 1; /* Changed to 1 for scanner visibility */
            position: relative;
            z-index: 5;
        }

        /* --- UNIQUE ANIMATION: Scanner Beam --- */
        .homehero-sec .scanner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            border-radius: 10px; /* Approximation for icon shape */
            mask-image: linear-gradient(to bottom, transparent, black, transparent); /* Limits beam visually */
            -webkit-mask-image: linear-gradient(to bottom, transparent, black, transparent);
        }

        .homehero-sec .scan-beam {
            position: absolute;
            width: 100%;
            height: 4px;
            background: #e85d28;
            box-shadow: 0 0 15px #e85d28, 0 0 30px #e85d28;
            top: 0;
            left: 0;
            animation: scanIcon 3s ease-in-out infinite;
            opacity: 0.8;
            z-index: 6;
        }

        /* Pulse effect behind the server */
        .homehero-sec .server-pulse {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 2px solid rgba(232, 93, 40, 0.3);
            animation: ripple 2s linear infinite;
            z-index: 4;
        }
        
        .homehero-sec .server-pulse:nth-child(2) {
            animation-delay: 1s;
        }

        @keyframes scanIcon {
            0% { top: 20%; opacity: 0; width: 0%; left: 50%; }
            20% { opacity: 1; width: 100%; left: 0%; }
            80% { opacity: 1; width: 100%; left: 0%; }
            100% { top: 80%; opacity: 0; width: 0%; left: 50%; }
        }

        @keyframes ripple {
            0% { width: 0; height: 0; opacity: 1; }
            100% { width: 400px; height: 400px; opacity: 0; }
        }
        
        /* Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

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

        .homehero-sec .animate-fade-up { animation: fadeInUp 0.8s ease-out forwards; }
        .homehero-sec .animate-float { animation: float 6s ease-in-out infinite; }

        .homehero-sec .delay-1 { animation-delay: 0.2s; }
        .homehero-sec .delay-2 { animation-delay: 0.4s; }
        .homehero-sec .delay-3 { animation-delay: 0.6s; }
        .homehero-sec .delay-4 { animation-delay: 0.8s; }

        @media (max-width: 768px) {
            .homehero-sec .hero-title { font-size: 2.2rem; }
            .homehero-sec .hero-text { max-width: 100%; }
            .homehero-sec .btn-custom-outline { margin-left: 0; margin-top: 15px; display: block; width: 100%; }
            .homehero-sec .btn-custom-orange { display: block; width: 100%; }
            .homehero-sec .cloud-icon { font-size: 8rem; margin-top: 40px; }
            .homehero-sec .btn-wrapper { display: flex; flex-direction: column; }
        }

 /* Custom Styling for the Cards */
       .why-sec .feature-card {
            border-radius: 12px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%; /* Ensure equal height */
        }
       .why-sec .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 1rem 3rem rgba(0,0,0,.1)!important; /* Subtle lift on hover */
        }
       .why-sec .icon-box {
            /* Ensures the icon container doesn't shrink */
            flex-shrink: 0;
            display: inline-flex;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
        }
        
        /* Define custom colors based on Bootstrap's primary color */
        :root {
            --primary: #007bff;
            --primary-light: rgba(0, 123, 255, 0.1);
        }

        /* Color adjustments for specific icons */
       .why-sec .icon-1 .icon-box { background-color: rgba(108, 117, 125, 0.1); } /* info light */
       .why-sec .icon-2 .icon-box { background-color: rgba(108, 117, 125, 0.1); } /* success light */
       .why-sec .icon-3 .icon-box { background-color: rgba(108, 117, 125, 0.1); } /* warning light */
       .why-sec .icon-4 .icon-box { background-color: rgba(108, 117, 125, 0.1); } /* secondary light */

        /* Ensure text content fills remaining space and is left-aligned */
       .why-sec .card-content-wrapper {
            text-align: left;
        }

 /* --- Hero Section --- */
        .ecom-hero-section {
            padding: 140px 0 100px;
            position: relative;
            overflow: hidden;
            /* background: radial-gradient(circle at 20% 30%, #0d3b5e 0%, var(--theme-ebg) 70%); */
			background: radial-gradient(circle at top right, rgba(51, 149, 255, 0.15), transparent 50%), linear-gradient(180deg, var(--bg-dmbody) 0%, #061b29 100%);
			
        }

        .ecom-hero-section .hero-tag {
            background: rgba(232, 93, 40, 0.15);
            color: var(--theme-accent);
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 25px;
            display: inline-block;
            border: 1px solid rgba(232, 93, 40, 0.3);
        }

        .ecom-hero-section h1 {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 25px;
        }
        
        .ecom-hero-section .highlight-text {
            background: -webkit-linear-gradient(45deg, #fff, #a0aec0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .ecom-hero-section .hero-desc {
            font-size: 1.15rem;
            color: var(--text-secondary);
            margin-bottom: 40px;
            max-width: 90%;
            line-height: 1.6;
        }

        /* Custom Buttons */
        .ecom-hero-section .btn-primary-custom {
            background: var(--theme-accent);
            border: none;
            padding: 14px 35px;
            font-weight: 600;
            border-radius: 6px;
            color: white;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .btn-primary-custom:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(232, 93, 40, 0.4);
            color: white;
            text-decoration: none;
        }

        .ecom-hero-section .btn-outline-custom {
            background: transparent;
            border: 1px solid rgba(255,255,255,0.2);
            padding: 14px 35px;
            font-weight: 600;
            border-radius: 6px;
            color: white;
            margin-left: 15px;
            transition: all 0.2s;
        }
        .ecom-hero-section .btn-outline-custom:hover {
            background: rgba(255,255,255,0.05);
            border-color: white;
            color: white;
            text-decoration: none;
        }

        /* --- Server Visuals --- */
        .ecom-hero-section .server-rack {
            position: relative;
            z-index: 2;
            perspective: 1000px;
        }
        .ecom-hero-section .server-unit {
            background: #0b2a3f;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: space-between;
            transform: rotateY(-10deg);
            transition: transform 0.3s;
        }
        .ecom-hero-section .server-unit:hover {
            transform: rotateY(0deg) scale(1.02);
           /* border-color: var(--theme-accent); */
			border-color: cyan;
        }
        .ecom-hero-section .server-lights span {
            height: 6px; width: 6px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 4px;
            animation: blink 2s infinite;
        }
       .ecom-hero-section .light-green { background: #00ff88; box-shadow: 0 0 5px #00ff88; }
       .ecom-hero-section .light-blue { background: #00ccff; box-shadow: 0 0 5px #00ccff; animation-delay: 0.5s !important; }
        
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

  /* --- Platform Logos Grid --- */
        .platform-strip {
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            padding: 40px 0;
            background: #ffffff;
        }
        .platform-item {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-weight: 700;
            font-size: 1.2rem;
            transition: 0.3s;
        }
        .platform-item:hover { color: black; transform: translateY(-2px); }
        .platform-item i { margin-right: 10px; font-size: 1.5rem; }

       
        /* --- Pricing Table --- */
        .pricing-section { padding: 100px 0; background: var(--theme-bg); }
        .pricing-card {
            background: var(--theme-surface);
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 40px;
            position: relative;
            transition: 0.3s;
            box-shadow: var(--shadow-soft);
        }
        .pricing-card:hover {
            box-shadow: var(--shadow-hover);
        }
        .pricing-card.popular {
            background: #ffffff;
            border: 2px solid var(--theme-accent);
            transform: scale(1.05);
            z-index: 2;
            box-shadow: 0 20px 40px rgba(232, 93, 40, 0.1);
        }
        .pricing-badge {
            position: absolute;
            top: -15px; left: 50%;
            transform: translateX(-50%);
            background: var(--theme-accent);
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
        }
        .price { font-size: 3rem; font-weight: 800; color: var(--text-primary); }
        .period { font-size: 1rem; color: var(--text-secondary); font-weight: 400; }
        
        .specs-list li {
            margin-bottom: 12px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
        }
        .specs-list i { color: var(--theme-accent); margin-right: 10px; width: 20px; }

        /* --- CTA Section --- */
        .cta-box {
            /* Keeping CTA dark for contrast pop */
            background: linear-gradient(90deg, #051a27 0%, #0d3b5e 100%);
            
            padding: 60px;
            text-align: center;
            position: relative;
            overflow: hidden;
            color: white;
            box-shadow: 0 20px 40px rgba(5, 26, 39, 0.15);
        }
        .cta-box h2 { color: white; }
        .cta-box p { color: rgba(255,255,255,0.8); }
        .cta-box::after {
            content: '';
            position: absolute;
            top: -50%; right: -10%;
            width: 300px; height: 300px;
            background: radial-gradient(circle, rgba(232,93,40,0.2) 0%, transparent 70%);
            border-radius: 50%;
        }

      

        @media (max-width: 991px) {
            h1 { font-size: 2.5rem; }
            .ecom-hero-section { text-align: center; padding-top: 100px; }
            .hero-desc { margin: 0 auto 30px auto; }
            .server-rack { margin-top: 60px; transform: none; perspective: none; }
            .server-unit { transform: none; justify-content: center; }
            .btn-outline-custom { margin: 15px 0 0 0; }
            .pricing-card.popular { transform: scale(1); margin: 20px 0; }
        }

:root {
            --theme-ebg: #051a27;
            --theme-surface: #082538;
            --theme-accent: #e85d28;
            --text-primary: #ffffff;
            --text-secondary: #a0aec0;
            --border-color: rgba(255,255,255,0.05);
        }