@import url('https://fonts.googleapis.com/css2?family=Asimovian&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/* ================= RESET ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    overflow-x: hidden;
}
a{
    text-decoration: none;
}

/* ================= NAVBAR ================= */
.navbar {
    background: #ffffff;
    position: relative;
    transition: all 0.4s ease;
}

.navbar-brand img {
    max-height: 44px;
}

.nav-link {
    font-weight: 500;
    color: #426db4 !important;
    padding: 8px 12px;
    font-size: 17px;
    font-weight: 700;
    font-family: "Lato", sans-serif;
}

.nav-link:hover {
    color: #f36c21 !important;
}

/* ================= MEGA MENU ================= */
.menus-dropdown {
    position: relative;
}

/* FULL WIDTH MENU */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    background: #f8f9fa;
    padding: 40px 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border-top: 1px solid rgb(204, 203, 203);

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;

    z-index: 999;
}

/* SHOW ON HOVER */
.menus-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mega-menu h5 i {
    opacity: 0;
}
/* TEXT STYLE */
.mega-menu h5 {
    color: #f36c21;
    font-weight: 600;
    font-family: "Lato", sans-serif;
    transition: all 0.3s ease;
}


.mega-menu a:hover h5 i {
    animation: iconSlide 0.4s forwards;
}

.mega-menu a:hover h5 {
    color: #426db4;
}

@keyframes iconSlide {
    0%   { opacity: 0; transform: translateX(0px); }
    25%  { opacity: 0.3; transform: translateX(1px); }
    50%  { opacity: 0.6; transform: translateX(3px); }
    100% { opacity: 1; transform: translateX(5px); }
}

.mega-menu p {
    font-size: 14px;
    color: #555;
}

/* RIGHT SIDE TEXT */
.cta-title {
    color: red;
    font-weight: 700;
}



/* ROTATE ICON */
.menus-dropdown:hover i {
    transform: rotate(180deg);
}

.menus-dropdown i {
    transition: 0.3s;
}

/* ================= BUTTON ================= */
.btn-border {
    position: relative;
    padding: 8px 22px;
    border-radius: 50px;
    background: #f36c21;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    border: none;
    display: inline-block;
    transition: all 0.3 ease;
}

.btn-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50px;
    border: 3px solid #4eba6f;
    animation: borderRun 2s linear infinite;
}

@keyframes borderRun {
    0% { clip-path: inset(0 100% 0 0); }
    50% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 100%); }
}

.btn-border:hover {
    background: #fff;
    color: #f36c21;
}

/* ================= STICKY ================= */
.navbar.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050;
    animation: stickySlide 0.4s ease forwards;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

@keyframes stickySlide {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

body.has-sticky-nav {
    padding-top: 70px;
}


/* ================= OFFCANVAS (MOBILE MENU) ================= */
.offcanvas {
    max-width: 75%;
}

.offcanvas-header img {
    height: 35px;
}

.offcanvas-body .nav-link {
    font-size: 16px;
    padding: 10px 0;
}

.offcanvas .nav-link i {
    transition: 0.3s;
}

.offcanvas .nav-link[aria-expanded="true"] i {
    transform: rotate(180deg);
}
/* ================= RESPONSIVE ================= */
@media (max-width: 767px) {

    /* Hide top bar */
    .top-bar {
        display: none;
    }

    /* Center menu items in mobile */
    .navbar-nav {
        text-align: left;
    }

    /* Button spacing in mobile menu */
    .navbar .btn-border {
        margin-top: 10px;
    }
}


/* ================= HERO SECTION ================= */
.hero-section {
    background: radial-gradient(circle at top left,#426db4, #426db4);
    padding: 20px 0;
    color: #fff;
    overflow: hidden;
}

.hero-content h1 {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
}

.hero-sub1{
    font-size: 18px !important;
    font-weight: 400;
}
.hero-sub2{
    font-size: 18px !important;
    font-weight: 400;
}

@media (max-width: 576px) {
.hero-content h1 {
    font-size: 28px;

}

}
 .drop-text {
    position: relative;
    display: inline-block;
    height: 60px;
}

.drop-text span {
    position: absolute;
    color: #68ef91;
    top: 0;
    opacity: 0;
    animation: dropTop 10s infinite;
}

.drop-text span:nth-child(1) { animation-delay: 0s; }
.drop-text span:nth-child(2) { animation-delay: 2s; }
.drop-text span:nth-child(3) { animation-delay: 4s; }
.drop-text span:nth-child(4) { animation-delay: 6s; }
.drop-text span:nth-child(5) { animation-delay: 8s; }
.drop-text span:nth-child(6) { animation-delay: 10s; }

@keyframes dropTop {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }
    8% {
        transform: translateY(0);
        opacity: 1;
    }
    20% {
        transform: translateY(0);
        opacity: 1;
    }
    30% {
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.badge-ai {
    display: inline-block;
    margin-bottom: 15px;
    font-size: 14px;
    opacity: 0.9;
}

.features {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 25px 0;
    font-size: 15px;
}

.features span i {
    margin-right: 6px;
    color: #68ef91;
}@media (max-width: 576px) {
.hero-content h1 {
    font-size: 28px;

}
.hero-sub1{
    margin-top: -20px;
    font-size: 16px !important;
}
.hero-sub2{
    font-size: 16px !important;
}
.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
}

/* Buttons */
.hero-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.btn-outline {
    padding: 12px 26px;
    border: 1px solid #f36c21;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    background-color: #f36c21;
    font-weight: 500;
}

.btn-outline:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    background: #fff;
    color: #f36c21;
}

/* ================= IMAGE AREA ================= */
.hero-image-area {
    position: relative;
    text-align: center;
}

.hero-image {
    max-height: 450px;
    animation: floatImage 4s ease-in-out infinite;
}

/* Image up-down animation */
@keyframes floatImage {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* ================= MESSAGE BUBBLES ================= */
.msg {
    position: absolute;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    opacity: 0;
    animation: msgAnimation 6s infinite;
}

.msg-blue {
    background: #f36c21;
    top: 80px;
    right: 40px;
    animation-delay: 0s;
    border-radius: 50px;
}

.msg-green {
    background: #f36c21;
    bottom: 140px;
    right: 20px;
    animation-delay: 2s;
    border-radius: 50px;
}

.msg-yellow {
    background: #f36c21;
    color: #FFF;
    bottom: 60px;
    left: 40px;
    animation-delay: 4s;
     border-radius: 50px;
}

/* Message show-hide animation */
@keyframes msgAnimation {
    0% { opacity: 0; transform: translateY(10px); }
    20% { opacity: 1; transform: translateY(0); }
    60% { opacity: 1; }
    80% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 0; }
}

/* Responsive */
@media (max-width: 991px) {
    .hero-section {
        padding: 20px;
    }
    .hero-buttons {
        justify-content: center;
    }
}



/* ================= features section ================= */
.trust-strip {
    background: linear-gradient(180deg, #0e5a82, #426db4);
    padding: 25px 0;
}

.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    padding: 15px 10px;
    transition: all 0.35s ease;
    cursor: pointer;
}

/* Icons */
.trust-item i {
    font-size: 24px;
    transition: transform 0.35s ease, color 0.35s ease;
}

/* Hover effect */
.trust-item:hover {
    transform: translateY(-6px);
    color: #ec9769;
}

.trust-item i {
    color: #6af795;
    font-size: 24px;
    animation: iconZoom 2s infinite ease-in-out;
}

/* Subtle glow */
.trust-item:hover {
    text-shadow: 0 0 15px rgba(0,229,255,0.6);
}
/* Infinite Zoom Animation */
@keyframes iconZoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}


/* Responsive spacing */
@media (max-width: 767px) {
    .trust-item {
        margin-bottom: 10px;
        font-size: 15px;
    }
}


/* ================= ABOUT SECTION ================= */
.about-section {
    background: #ffffff;
    overflow: hidden;
}

.about-wrapper {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

/* LEFT */
.about-left {
    flex: 1;
    display: flex;
    justify-content: center;
}

.circle-wrapper {
    position: relative;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 2px dashed #ddd;
}

/* MAIN IMAGE (STATIC) */
.main-circle {
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
}

.main-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ROTATING WRAPPER */
.orbit-rotate {
    position: absolute;
    inset: 0;
    animation: orbitSpin 20s linear infinite;
}

/* ORBIT IMAGES */
.orbit {
    position: absolute;
    width: 50px;
    height: 50px;
}

.orbit img {
    width: 100%;
    height: 100%;
    /* border-radius: 50%;
    border: 3px solid #fff; */
}

/* Positions */
.orbit-1 { top: -22px; left: 50%; transform: translateX(-50%); }
.orbit-2 { right: -25px; top: 50%; transform: translateY(-50%); }
.orbit-3 { bottom: -23px; left: 50%; transform: translateX(-50%); }
.orbit-4 { left: -25px; top: 50%; transform: translateY(-50%); }

/* ONLY SMALL IMAGES ROTATE */
@keyframes orbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* RIGHT SIDE */
.about-right {
    flex: 1;
}

.about-tag {
    color: #ff6a00;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
}

.about-right h2 {
    font-size: 36px;
    margin: 10px 0;
    font-weight: 700;
    color: #f36c21;
}

.about-right h4 {
    color: #426db4;
    margin-bottom: 10px;
    text-align: left;
}

.about-text {
    margin: 15px 0 20px;
    color: #555;
}

.about-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.about-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 16px;
}
.about-list li i{
    
    animation: iconZoom 2s infinite ease-in-out;
}

/* Icon Box */
.icon-box {
    background: #fff;
    width: 35px;
    height: 35px;
    min-width: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.icon-box i {
    color: #f36c21; /* green check */
    font-size: 14px;
}

/* Responsive */
@media (max-width: 576px) {
    .about-list li {
        font-size: 14px;
        gap: 10px;
    }

    .icon-box {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

    .icon-box i {
        font-size: 12px;
    }
}

.about-stats {
    display: flex;
    gap: 40px;
    margin: 25px 0;
}

.about-stats h3 {
    font-size: 32px;
    color: #ff6a00;
}


.about-btn {
    padding: 14px 28px;
    background: #ff6a00;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
}

/* RESPONSIVE */

/* Tablet */
@media (max-width: 991px) {
    .about-wrapper {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .about-right {
        max-width: 100%;
    }

    .about-right h2 {
        font-size: 30px;
    }

    .about-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 25px;
    }

    .about-stats div {
        min-width: 120px;
    }
}

/* Mobile */
@media (max-width: 576px) {

    /* Circle resize */
    .circle-wrapper {
        width: 280px;
        height: 280px;
    }

    .main-circle {
        inset: 20px;
    }

    .orbit {
        width: 35px;
        height: 35px;
    }

    /* Text sizing */
    .about-right h2 {
        font-size: 26px;
    }

    .about-text {
        font-size: 14px;
    }

    .about-right h4 {
        font-size: 18px;
        color: #426db4;
    }

    /* Stats stacked nicely */
    .about-stats {
        gap: 20px;
    }

    .about-stats h3 {
        font-size: 24px;
    }

    .about-stats span {
        font-size: 13px;
    }

    /* Button full width */
    .about-btn {
        display: inline-block;
        width: 100%;
        max-width: 260px;
    }
}

/* Extra small devices */
@media (max-width: 400px) {
    .circle-wrapper {
        width: 240px;
        height: 240px;
    }

    .orbit {
        width: 30px;
        height: 30px;
    }
}



/* .services-heading .why-badge {
    display: inline-block;
    background: #f484231c;
    color: #f48323;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 18px;
}

.services-heading h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #6c0000;
}

.services-heading h2 span {
    color: #f48323;
} */


/* ================= SERVICES SECTION  ================= */

.digital-section {
  background: #f4f6f9;
}

.services-title {
  font-weight: 700;
  font-size: 32px;
  color: #1f6fd6;
}

.section-subtitle {
  max-width: 850px;
  margin: auto;
  color: #555;
  font-size: 16px;
  line-height: 1.7;
}

.service-card {
  background: #426db4;
  padding: 40px;
  border-radius: 12px;
  transition: all 0.4s ease;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.services-icon-box {
  width: 80px;
  height: 80px;
  background: #ffe5d6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30px;
  flex-shrink: 0;
  overflow: hidden;
}

.services-icon-box img {
  width: 50px;
  animation: iconZoom 1s infinite ease-in-out;
  transition: transform 1s ease;
}

.service-card:hover .services-icon-box img {
    animation: none;
  transform: rotate(10deg) scale(1.1);
}

.content-box h4 {
  font-weight: 700;
  margin-bottom: 15px;
  color: #ffa472;
}

.content-box p {
  color: #fff;
  line-height: 1.7;
  margin-bottom: 20px;
}

.learn-btn {
  color: #10ef53;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.learn-btn span {
  margin-left: 5px;
  transition: 0.3s;
}

.learn-btn:hover span {
  margin-left: 10px;
}

/* Responsive */
@media (max-width: 768px) {
  .service-card {
    flex-direction: column;
    text-align: center;
  }

  .services-title {
 font-size: 20px;
}
.content-box p{
    text-align: left;
    text-align: justify;
}
  .services-icon-box {
    margin: 0 auto 20px;
  }
}


/* ================= COUNTER SECTION================= */
.counter-section {
  background: linear-gradient(-45deg, #6e3414, #3d2417, #bb4b0f, #3d2417);
  background-size: 400% 400%;
  animation: gradientMove 8s ease infinite;
  color: #fff;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.counter-box {
  padding: 30px 15px;
  transition: 0.3s ease;
}

.counter-box:hover {
  transform: translateY(-6px);
}


.icon-circle {
  width: 70px;
  height: 70px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.icon-circle i {
  font-size: 28px;
  color: #f36c21;
  animation: iconZoom 1s infinite ease-in-out;
}

.counter {
  font-weight: 700;
  color: #ffffff;
  font-size: clamp(28px, 5vw, 48px);
}

.counter-box p {
  font-size: clamp(12px, 2.5vw, 14px);
  letter-spacing: 2px;
  margin: 0;
  
}

/* Mobile */
@media (max-width: 576px) {
  .icon-circle {
    width: 55px;
    height: 55px;
  }
  .icon-circle i {
    font-size: 22px;
  }
}

/* ================= WHAT WE DO ================= */
.what-we-do {

    background: #ffffff;
}

/* Heading */
.section-title {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    color: #222;
}

/* Card */
.do-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 55px 30px 40px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
    position: relative;
}

/* Icon */
.do-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(244,131,35,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -90px auto 25px;
    transition: all 0.4s ease;
}

.do-icon i {
    font-size: 32px;
    color: #f48323;
    transition: all 0.4s ease;
}



.do-card.active h4,
.do-card.active p {
    color: #ffffff;
}

.do-card.active .do-icon {
    background: #ffffff;
}

.do-card.active .do-icon i {
    color: #6c0000;
}

/* Hover effects */
.do-card:hover {
    transform: translateY(-18px);
    box-shadow: 0 30px 70px rgba(0,0,0,0.15);
}

.do-card:hover .do-icon {
    transform: scale(1.15);
    background: radial-gradient(circle at top left, #6c0000, #f48323);
}

.do-card:hover .do-icon i {
    color: #ffffff;
    transform: rotate(8deg);
}

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

.do-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .section-title {
        font-size: 20px;
    }
    .do-icon {
        margin-top: -70px;
    }
}


/* ================= WHY CHOOSE US ================= */
.why-tittle-m .why-badge {
    display: inline-block;
    background: #f484231c;
    color: #f48323;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 18px;
}

.why-tittle-m h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: #426db4;
}

.why-tittle-m h2 span {
    color: #f48323;
}

.why-choose {
    padding: 50px 0;
    background: #f7f9fc;
}

/* Left */
.why-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #222;
    margin-bottom: 25px;
}

.why-text {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 30px;
}

.why-btn {
    display: inline-block;
    background: radial-gradient(circle at top left, #6c0000, #f48323);
    color: #fff;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.why-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* Right Features */
.why-feature {
    display: flex;
    gap: 20px;
    background: #426db4;
    padding: 25px 28px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin-bottom: 25px;
    align-items: flex-start;
}

/* Icon Box */
.why-icon {
    min-width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-icon i {
    font-size: 26px;
    color: #f48323;
}

/* Text */
.why-feature h5 {
    font-size: 19px;
    margin-bottom: 8px;
    font-weight: 700;
    color: #fff;
}

.why-feature p {
    font-size: 14px;
    color: #fff4dc;
    line-height: 1.6;
}

/* ================= AUTO ANIMATIONS ================= */

/* Slow rotation */
.spin {
    animation: spin 6s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pulse */
.pulse {
    animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Rotate back and forth */
.rotate {
    animation: rotate 3s ease-in-out infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(12deg); }
    100% { transform: rotate(0deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .why-title {
        font-size: 34px;
    }
}


/* Business Goals Section  */
.custom-section {
  background: #fff;
  position: relative;
  overflow: hidden;
}

/* Gradient Heading */
.section-title {
  font-size: 24px; /* decreased size */
  line-height: 1.3;
  background: linear-gradient(90deg, #426db4,#f36c21, #4eba6f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
}

/* Subtitle */
.section-subtitle {
  font-size: 17px;
  color: #555;
  max-width: 500px;
}

/* Image Animation */
.image-wrapper {
  overflow: hidden;
}

.section-img {
  max-width: 90%;
  animation: floatImage 5s ease-in-out infinite alternate;
  transition: 0.4s ease;
}

.section-img:hover {
  transform: scale(1.04);
}

@keyframes floatImage {
  0% { transform: translateY(-12px); }
  100% { transform: translateY(12px); }
}

/* List Modern Style */
.custom-list li {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
}

.custom-list i {
  min-width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #f36c21, #f36c21);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 8px 20px rgba(66, 109, 180, 0.25);
  animation: iconZoom 2s infinite ease-in-out;
}

.custom-list strong {
  display: block;
  font-size: 18px;
  color: #426db4;
  margin-bottom: 3px;
}

.custom-list span {
  font-size: 16px;
  color: #666;
}

/* Responsive */
@media (max-width: 991px) {
  .section-title {
    font-size: 24px;
    text-align: center;
  }

  .section-subtitle {
    text-align: center;
    margin: auto;
  }

  .section-img {
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .section-title {
    font-size: 21px;
  }
}


/* ================= PROCESS SECTION ================= */
.process-section {
  background: linear-gradient(135deg, #0f2043, #0f2043);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Section Heading */
.process-main-title {
  font-size: 30px;
  font-weight: 700;
  background: linear-gradient(90deg, #f36c21, #f36c21);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.process-main-subtitle {
  color: #cbd5e1;
  font-size: 15px;
  max-width: 600px;
  margin: 10px auto 0;
}

/* Card Style */
.process-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  padding: 35px 25px;
  border-radius: 18px;
  position: relative;
  height: 100%;
  transition: all 0.4s ease;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Unique Hover Effect */
.process-card:hover {
  transform: translateY(-10px) scale(1.02);
  background: linear-gradient(135deg, #426db4, #426db4);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.process-card:hover h5,
.process-card:hover p {
  color: #fff;
}

/* Step Number Circle */
.step-number {
  position: absolute;
  top: -18px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #f36c21, #426db4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  transition: 0.4s ease;
}

.process-card:hover .step-number {
  transform: rotate(15deg) scale(1.1);
}

/* Text */
.process-card h5 {
  margin-top: 15px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
}

.process-card p {
  font-size: 14px;
  color: #cbd5e1;
  margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .process-main-title {
    font-size: 24px;
  }
}



.project-section {
  background: #fff;
}

/* Heading */
.project-title {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(90deg, #426db4, #2d5697);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project-subtitle {
  color: #555;
  font-size: 15px;
  max-width: 600px;
  margin: 10px auto 0;
}

/* Filter Buttons */
.project-filter button {
  border: none;
  background: #fff;
  padding: 10px 22px;
  margin: 5px;
  border-radius: 30px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.project-filter button.active,
.project-filter button:hover {
  background: linear-gradient(90deg, #f36c21, #f36c21);
  color: #fff;
}

/* Project Card */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.project-card img {
  width: 100%;
  display: block;
  transition: 0.6s ease;
}

/* Overlay */
.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,32,67,0.9), rgba(66,109,180,0.9));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: 0.5s ease;
  text-align: center;
  padding: 20px;
  color: #fff;
}

.project-card:hover img {
  transform: scale(1.1);
}

.project-card:hover .project-overlay {
  transform: translateY(0);
}

/* Button */
.project-overlay a {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 18px;
  border-radius: 25px;
  background: #fff;
  color: #0f2043;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s ease;
}

.project-overlay a:hover {
  background: #f36c21;
  color: #fff;
}
@media (max-width: 768px) {
.project-filter button {
  border: none;
  background: transparent;
  padding: 0px;
  margin: 4px;
  border-radius: 0px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: none;
  font-weight: 700;
}

.project-filter button.active,
.project-filter button:hover {
  background: transparent;
  color: #f36c21;
}

}




/* ================= HOME GET IN TOUCH SECTION ================= */
.contact-section {
  background: linear-gradient(135deg, #0f2043, #1f3a5f);
}
.contact-section h2{
    color: #fff;
}
/* Contact Section */
.contact-info {
  margin-top: 30px;
}

/* Each Row */
.contact-item {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}

/* Round White Icon */
.contact-icon {
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

}

/* Icon Style */
.contact-icon i {
  font-size: 18px;
  color: #426db4;
    animation: smoothZoom 2.8s ease-in-out infinite;
}

/* Infinite Smooth Zoom */
@keyframes smoothZoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Text */
.contact-text {
  font-size: 17px;
  color: #ffffff;
  font-weight: 500;
}

/* Form Glass Effect */
.contact-form {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  border-radius: 15px;
}

/* Input */
.custom-input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 12px;
  border-radius: 8px;
}

.custom-input::placeholder {
  color: #cbd5e1;
}

.custom-input:focus {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: #426db4;
  box-shadow: none;
}


.custom-select {
  background-color: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

.custom-select option {
  background: #0f2043;
  color: #fff;
}

/* Button */
.custom-btn {
  background: linear-gradient(90deg, #f36c21, #f36c21);
  border: none;
  border-radius: 30px;
  color: #fff !important;
  font-weight: 600;
  transition: 0.3s ease;
}

.custom-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* Social Icons */

.social-icons a {
  display: inline-block;
  margin-right: 10px;
  color: #fff;
  font-size: 18px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  transition: 0.3s;
}

.social-icons a:hover {
  transform: scale(1.15);
  background: linear-gradient(90deg, #f36c21, #f36c21);
}



/* ================= BENEFITS SECTION ================= */
.benefits-section {
  background: #ffffff !important;
}

/* MULTICOLOR HEADING */
.benefits-title {
  font-size: 32px;
  font-weight: 700;
  color: #0f2043;
}

.benefits-title span {
  background: linear-gradient(45deg, #c6581d, #f36c21);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* FLOATING IMAGE */
.benefits-floating-img {
  border-radius: 15px;

  animation: floatImage 4s ease-in-out infinite;
}

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

/* ITEM */
.benefits-item {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 8px;
}

/* ICON CIRCLE (NO ANIMATION HERE) */
.benefits-icon {
  width: 45px;
  height: 45px;
  background: linear-gradient(45deg, #f36c21, #f36c21);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 19px;
}

/* ROTATE ICON */
.icon-rotate {
  animation: rotateIcon 6s linear infinite;
}

@keyframes rotateIcon {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ZOOM ICON */
.icon-zoom {
  animation: zoomIcon 2.5s ease-in-out infinite;
}

@keyframes zoomIcon {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.benefits-content h6 {
    font-size: 20px;
    color: #426db4;
    font-weight: 700;
  }

  .benefits-content p{
    color: #000;
  }

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


@media (max-width: 991px) {

  .benefits-title {
    font-size: 26px;
  }

  .benefits-item {
    gap: 15px;
  }

  .benefits-icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

}


@media (max-width: 767px) {

  /* Make full section single column */
  .benefits-section .row {
    flex-direction: column;
  }

  /* Image full width */
  .benefits-image-wrapper {
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
  }

  .benefits-floating-img {
    width: 100%;
    height: auto;
  }

  /* Heading & subtitle center */
  .benefits-title {
    font-size: 24px;
    text-align: center;
  }

  .benefits-subtitle {
    text-align: center;
    font-size: 14px;
  }

  /* Each item full width */
  .benefits-item {
    flex-direction: row;   /* Keep icon + text in one row */
    gap: 15px;
    margin-bottom: 10px;
  }

  /* Fix icon round shape */
  .benefits-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;   /* IMPORTANT (prevents squeeze) */
    min-height: 40px;  /* IMPORTANT */
    border-radius: 50%;
  }

  .benefits-icon i {
    font-size: 18px;
  }

  .benefits-content h6 {
    font-size: 17px;
  }

  .benefits-content p {
    font-size: 14px;
  }

  /* Button center */
  .benefits-btn {
    display: block;
    width: fit-content;
    margin: 20px auto 0 auto;
  }

}


.inductexyz-section {
  background: #f8f9fc;
}

/* Title */
.inductexyz-title {
  font-size: 38px;
  font-weight: 700;
  color: #0f2043;
}

.inductexyz-title {
  background: linear-gradient(45deg, #ce5819, #f36c21);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Card */
.inductexyz-card {
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 18px;
  text-align: center;
  transition: 0.4s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.inductexyz-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Image */
.inductexyz-img {
  width: 60px;
  margin-bottom: 15px;
}

/* Rotate Animation */
.rotate-img {
  animation: rotateIndustry 8s linear infinite;
}

@keyframes rotateIndustry {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Zoom Animation */
.zoom-img {
  animation: zoomIndustry 3s ease-in-out infinite;
}

@keyframes zoomIndustry {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Text */
.inductexyz-card h6 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #426db4;
}

/* Button */
.inductexyz-btn {
  padding: 12px 26px;
    border: 1px solid #f36c21;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    background-color: #f36c21;
    font-weight: 500;
}

.inductexyz-btn:hover {
  transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    background: #fff;
    color: #f36c21;
}

/* Responsive */
@media (max-width: 991px) {
  .inductexyz-title {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .inductexyz-card {
    padding: 20px 15px;
  }

  .inductexyz-img {
    width: 50px;
  }

  .inductexyz-card h6 {
    font-size: 14px;
  }
}




/* ===================================
   TESTIMONIAL SECTION
=================================== */

.testimonial-section {
    background: #f3f5f9;
    padding: 50px 0px 80px 0;
    overflow: hidden;
}
/* Heading */
.testimonial-title {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(90deg, #22467f, #426db4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.testimonial-subtitle {
  color: #555;
  font-size: 15px;
  max-width: 600px;
  margin: 10px auto 0;
}

.testimonial-carousel {
    position: relative;
}

/* Make owl stage flex so all cards equal height */
.testimonial-carousel .owl-stage {
    display: flex;
}

.testimonial-carousel .owl-item {
    display: flex;
    justify-content: center;
}

/* Equal height card */
.testimonial-card {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.08);
    transition: 0.4s ease;
    opacity: 0.5;
    transform: scale(0.9);
    width: 100%;
    min-height: 260px;   /* Equal height */
}

/* Active card */
.owl-item.center .testimonial-card {
    opacity: 1;
    transform: scale(1);
}

/* Left color strip */
.testimonial-left {
    width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.color-1{
    background: #ff6a00;
}
.color-2{
    background: #426db4;
}
.testimonial-top{
    display: flex;
    align-items: center;
    gap: 20px;
}
.testimonial-top img {
    width: 85px !important;
    height: 85px !important;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
    margin-left: -91px;
}

/* Content */
.testimonial-content {
    flex: 1;
    padding: 19px 50px 15px 50px;
}

.testimonial-content h5 {
    font-weight: 600;
    margin-bottom: 5px;
}

.testimonial-content span {
    font-size: 14px;
    color: #999;
}

.testimonial-content p {
    margin-top: 20px;
    color: #777;
    line-height: 1.7;
}

.testimonial-content i {
    color: #ff6a00;
    margin-right: 8px;
}



.testimonial-carousel .owl-nav {
    position: absolute;
    bottom: -17px;      /* Exact as you said */
    right: 251px;      /* Exact as you said */
}

.testimonial-carousel .owl-nav button {
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    margin-left: 10px;
    transition: 0.3s ease;
}

.testimonial-carousel .owl-nav button span {
    font-size: 18px;
    color: #ff6a00;
}

.testimonial-carousel .owl-nav button:hover {
    background: #ff6a00 !important;
}

.testimonial-carousel .owl-nav button:hover span {
    color: #ffffff;
}

.owl-dots {
    display: none;
}



/* Laptop */
@media (max-width: 1400px) {
    .testimonial-carousel .owl-nav {
        right: 317px;
    }
}

/* Tablet */
@media (max-width: 991px) {

    .testimonial-card {
        flex-direction: column;
        min-height: auto;
    }

    .testimonial-left {
        width: 100%;
        height: 10px;
    }
    .testimonial-top img{
    width: 60px !important;
    height: 60px !important;
    margin-left: 0;
    }
    .testimonial-top{
        gap: 15px;
    }

    .testimonial-content {
        padding: 30px 30px 80px 30px;
    }

    .testimonial-carousel .owl-nav {
        bottom: -17px;
        right: 169px;
    }
}

/* Mobile */
@media (max-width: 576px) {

    .testimonial-section {
        padding: 40px 0;
    }

    .testimonial-content {
        padding: 25px 20px 70px 20px;
    }

    /* Button inside card bottom right */
    .testimonial-carousel .owl-nav {
        bottom: 20px;
        right: 20px;
    }
}


/* ================= CTA SECTION ================= */
.cta-section {
    background: #426db4;
    padding: 100px 0;
    position: relative;
}

/* Button Style */
.cta-btn {
    background: #000;
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: 0.3s ease;
}

.cta-btn:hover {
    background: #222;
    transform: translateY(-3px);
}

.cta-rings-wrapper {
    position: absolute;
    right: -200px;
    top: 50%;
    transform: translateY(-50%);
    width: 600px;
    height: 600px;
    pointer-events: none;
}

.cta-ring {
    position: absolute;
    border-radius: 50%;
    border: 40px solid #edad80;
    animation: ctaPulse 6s infinite ease-in-out;
}

.ring-1 { width: 600px; height: 600px; animation-delay: 0s; }
.ring-2 { width: 450px; height: 450px; top: 75px; left: 75px; animation-delay: 1s; }
.ring-3 { width: 300px; height: 300px; top: 150px; left: 150px; animation-delay: 2s; }
.ring-4 { width: 150px; height: 150px; top: 225px; left: 225px; animation-delay: 3s; }

@keyframes ctaPulse {
    0% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.6; }
}

/* Responsive */
@media (max-width: 991px) {
    .cta-section {
        padding: 70px 0;
        text-align: center;
    }

    .cta-rings-wrapper {
        right: -300px;
        width: 500px;
        height: 500px;
    }
}

@media (max-width: 576px) {
    .cta-section {
        padding: 60px 20px;
    }

    .cta-btn {
        width: 100%;
        justify-content: center;
    }

    .cta-rings-wrapper {
        right: -350px;
        width: 400px;
        height: 400px;
    }
}

/* ================= PARTNERS SECTION ================= */
.partners-section {
    background: #fff;
    overflow: hidden;
    padding: 60px 0;
}
/* Heading */
.partners-title {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(90deg, #cb632b, #f36c21);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.partners-subtitle {
  color: #555;
  font-size: 15px;
  max-width: 600px;
  margin: 10px auto 0;
}
/* Wrapper */
.partners-marquee {
    width: 100%;
    position: relative;
}

/* Animated Track */
.partners-content {
    display: flex;
    width: fit-content;
    animation: marquee 180s linear infinite; /* 🔥 SPEED CONTROL HERE */
}

/* 🔥 Pause on hover */
.partners-marquee:hover .partners-content {
    animation-play-state: paused;
}

/* Cards */
.partner-card {
    width: 150px;
    height: 126px;
    margin-right: 30px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s ease;
    cursor: pointer;
    border: 1px solid #426db4;
}

/* Image */
.partner-card img {
    width: 45px;
    height: 45px;
    margin-bottom: 8px;
    transition: 0.4s ease;
}

/* Text */
.partner-card h6 {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
}

/* 🔥 Premium Hover Effect */
.partner-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px #ff6a00;
}

.partner-card:hover img {
    transform: scale(1.1);
}

/* Animation */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


.blog-section {
    background: #f4f6f9;
}

/* Heading */
.blog-title {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(90deg, #cb632b, #f36c21);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blog-subtitle {
  color: #555;
  font-size: 15px;
  max-width: 600px;
  margin: 10px auto 0;
}

.blog-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    transition: 0.3s ease;
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.blog-image {
    position: relative;
}

.blog-image img {
    width: 100%;
    height: 230px;
    object-fit: cover;
}

.blog-date {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #ffffff;
    color: #ff6a00;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.blog-content {
    padding: 22px;
}

.blog-content h4 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.4;
    color: #426db4;
}

.blog-content p {
    font-size: 15px;
    color: #555;
    margin-bottom: 20px;
}

.blog-read-more {
    color: #f36c21;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.blog-read-more:hover {
    letter-spacing: 1px;
}



/* ================= FOOTER ================= */


.main-footer {
    background: linear-gradient(135deg, #0f2043, #1f3a5f);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}


.main-footer::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300%;
    pointer-events: none;
    z-index: 0;

    background-image: 
        radial-gradient(2px 18px at 10% 10%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 20px at 20% 30%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 16px at 30% 50%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 22px at 40% 20%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 18px at 50% 60%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 20px at 60% 40%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 17px at 70% 70%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 19px at 80% 30%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 21px at 90% 80%, rgba(255,255,255,0.8), transparent);
        

    animation: rainFall 1.8s linear infinite;
    opacity: 0.5;
}

@keyframes rainFall {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

.main-footer .container,
.footer-bottom {
    position: relative;
    z-index: 2;
}



.footer-logo {
    margin-bottom: 20px;
    max-width: 200px;
}

.footer-text {
    font-size: 16px;
    line-height: 1.7;
    opacity: 0.9;
}

/* Titles */
.footer-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 18px;
    position: relative;
}

.footer-title::after {
    content: "";
    width: 35px;
    height: 2px;
    background: #f48323;
    display: block;
    margin-top: 6px;
}

/* Menu */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 12px;
}

.footer-menu a {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.9;
    position: relative;
    padding-left: 15px;
    transition: all 0.3s ease;
}

.footer-menu a::before {
    content: "›";
    position: absolute;
    left: 0;
    color: #f36c21;
    transition: transform 0.3s ease;
}

.footer-menu a:hover {
    color: #f36c21;
    opacity: 1;
}

.footer-menu a:hover::before {
    transform: translateX(4px);
}

/* Contact */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.footer-contact i {
    color: #f36c21;
    margin-top: 4px;
}

/* ================================
   FOOTER BOTTOM
================================ */

.footer-bottom {
    background: linear-gradient(135deg, #233b6b, #233b6b);
    padding: 15px 0;
    position: relative;
    z-index: 2;
    border-top: 1px solid #426db4;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Copyright */
.copyright-text {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
}

.copyright-text span {
    color: #f48323;
    font-weight: 600;
}

/* ================================
   SOCIAL ICONS
================================ */

.footer-social {
    display: flex;
    gap: 12px;
}

.social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.social-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #f48323;
    transform: scale(0);
    border-radius: 50%;
    transition: transform 0.35s ease;
    z-index: 0;
}

.social-icon i {
    position: relative;
    z-index: 1;
    font-size: 14px;
}

.social-icon:hover::after {
    transform: scale(1);
}

.social-icon:hover {
    transform: translateY(-4px) rotate(6deg);
    color: #ffffff;
}



@media (max-width: 768px) {

    .main-footer {
        padding-left: 40px;
    }

 

    .footer-bottom-inner {
        justify-content: center;
        gap: 12px;
    }
}




/* ================================
   ABOUT PAGE CODE START------------------------------------------------------------------------------------
================================ */



/* =========================
   HERO SECTION
========================= */

.about-hero-video{
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 40px 20px;
}

/* Background Video */

.hero-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Overlay */

.video-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(13,42,69,0.95) 0%,
        rgba(13,42,69,0.85) 40%,
        rgba(13,42,69,0.4) 70%,
        rgba(13,42,69,0.2) 100%
    );
    z-index: 2;
}

/* Content */

.about-hero-video .container{
    position: relative;
    z-index: 3;
}

/* Heading */

.about-title{
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 25px;
    color: #f36c21;
}

.about-title span{
    color: #4eba6f;
}

/* Paragraph */

.about-text{
    font-size: 20px;
    color: #e0e0e0;
    line-height: 1.8;
    max-width: 650px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 992px){

    .about-title{
        font-size: 38px;
    }

    .about-text{
        font-size: 18px;
    }

    
}

@media (max-width: 576px){

    .about-title{
        font-size: 34px;
    }

    .about-text{
        font-size: 16px;
    }
    
}


/* Marketing Section Start */

.about-marketing-section{
    padding:40px 0;
    background:#f5f7fa;
}

.about-top-line{
    font-size:14px;
    letter-spacing:1px;
    font-weight:600;
    color:#555;
    text-transform:uppercase;
}

.about-top-line::before{
    content:"";
    display:inline-block;
    width:50px;
    height:3px;
    background:#f48323;
    margin-right:15px;
    vertical-align:middle;
}

.about-main-heading{
    font-size:28px;
    font-weight:700;
    line-height:1.3;
    color:#111;
}

.about-highlight{
    color:#426db4;
}

.about-content-box{
    padding-left:40px;
    border-left:4px solid #e0e0e0;
}

.about-sub-text{
    font-size:20px;
    color:#666;
    line-height:1.7;
}

/* Responsive */
@media(max-width:991px){
    .about-main-heading{
        font-size:20px;
    }
    .about-sub-text{
        font-size:18px;
    }
}

@media(max-width:767px){
    .about-marketing-section{
        text-align:center;
        padding:20px 0;
    }
    .about-content-box{
        padding-left:0;
        border-left:none;
        margin-top:30px;
    }
}


/* ABOUT COUNTER SECTION */
.about-counter-section{
    background:#426db4;
    padding:20px 0;
    color:#fff;
}

/* Border Between Items */
.about-counter-item{
    position:relative;
    padding:30px 15px;
}

.about-counter-item:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:20%;
    width:1px;
    height:60%;
    background:rgba(255,255,255,0.2);
}

/* Bottom Border For Mobile */
@media(max-width:991px){
    .about-counter-item{
        border-bottom:1px solid rgba(255,255,255,0.2);
    }
    .about-counter-item::after{
        display:none;
    }
    .about-counter-item:nth-child(3),
    .about-counter-item:nth-child(4){
        border-bottom:none;
    }
}

.about-counter-icon{
    width:80px;
    height:80px;
    background:rgba(255,255,255,0.1);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-size:28px;
}
.about-counter-icon I{
animation: iconZoom 1s infinite ease-in-out;
color: #ffd7c1;
}
.about-counter-number{
    font-size:40px;
    font-weight:700;
    margin-bottom:5px;
}

.about-counter-number::after{
    content:"+";
}

.about-counter-text{
    font-size:16px;
    opacity:0.9;
}


.about-section{
    background:#f8fafc;
    overflow:hidden;
}

/* Perfect Round Image */
.about-image-wrapper{
    position:relative;
    text-align:center;
}

.about-img-circle{
    width:420px;
    height:420px;
    margin:auto;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,0.1);
}

.about-img-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Floating Cards */
.about-floating-card{
    position:absolute;
    background:#fff;
    padding:10px 20px;
    border-radius:50px;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
    border: 1px solid #426db4;
    animation: about-float 4s ease-in-out infinite;
}

.about-floating-card i{
    color:#426db4;
}

.about-floating-card span{
    color: #f36c21;
}

/* Card Positions */
.about-card-1{ top:8%; left:5%; }
.about-card-2{ bottom:10%; right:8%; animation-delay:1s; }
.about-card-3{ top:65%; left:0; animation-delay:2s; }
.about-card-4{ top:20%; right:5%; animation-delay:1.5s; }

/* Smooth Infinite Animation */
@keyframes about-float{
    0%{ transform:translateY(0px);}
    50%{ transform:translateY(-15px);}
    100%{ transform:translateY(0px);}
}

/* Right Content */
.about-subtitle{
    color:#f36c21;
    font-weight:600;
    
}

.about-title{
    font-size:36px;
    font-weight:700;
    margin-bottom:20px;
}

.about-description{
    color:#555;
    line-height:1.7;
}

.about-feature{
    font-weight:500;
    display:flex;
    align-items:center;
    gap:8px;
}

.about-feature i{
    color:#0f6d66;
}

/* Responsive */
@media(max-width:991px){
    .about-title{ font-size:28px; }
    .about-img-circle{ width:300px; height:300px; }
}

@media(max-width:576px){
    .about-img-circle{ width:250px; height:250px; }
    .about-floating-card{
        font-size:12px;
        padding:8px 15px;
    }
}



/* WHAT MAKES US DIFFERENT */

.about-manifesto-section{
    padding:50px 0;
    background:linear-gradient(135deg, #426db4, #2c5364);
    color:#fff;
}

.about-manifesto-title{
    font-size:36px;
    font-weight:700;
}

.about-manifesto-box{
    background:rgba(255,255,255,0.05);
    padding:40px 20px;
    text-align:center;
    border-radius:15px;
    transition:0.3s ease;
    height:100%;
}

.about-manifesto-box:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,0.1);
}

/* 50px round white background */
.about-icon-circle{
    width:50px;
    height:50px;
    background:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
}

.about-icon-circle i{
    font-size:20px;
    color:#f36c21;
    animation: iconZoom 2s infinite ease-in-out;
}

.about-manifesto-box p{
    margin:0;
    font-size:16px;
    font-weight:500;
}

/* Responsive */
@media(max-width:768px){
    .about-manifesto-title{
        font-size:28px;
    }
}



.about-mission-section{
    background:#fff;
}

/* Image Wrapper */
.about-mission-image-wrapper{
    position:relative;
}

.about-mission-main-img{
    width:90%;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,0.1);
}

/* Small Floating Image */
.about-mission-small-img{
    position:absolute;
    right:30px;
    bottom:30px;
    width:200px;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,0.15);
    border: 5px solid #fff;
    animation: about-mission-float 4s ease-in-out infinite;
}

.about-mission-small-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.about-image-left{
    margin-left: 30px !important;
}
/* Smooth Infinite Top-Bottom Animation */
@keyframes about-mission-float{
    0%{ transform:translateY(0px); }
    50%{ transform:translateY(-20px); }
    100%{ transform:translateY(0px); }
}

/* Right Content */
.about-mission-title{
    font-size:36px;
    font-weight:700;
    margin-bottom:20px;
}

.about-mission-text{
    color:#555;
    line-height:1.7;
    margin-bottom:20px;
}

.about-mission-list{
    list-style:none;
    padding:0;
}

.about-mission-list li{
    margin-bottom:12px;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:10px;
}

.about-mission-list i{
    color:#1aa179;
}

/* Responsive */
@media(max-width:991px){
    .about-mission-title{
        font-size:28px;
    }
}

/* Hide small image on mobile */
@media(max-width:767px){
    .about-mission-small-img{
        display:none;
    }
    .about-image-left{
    margin-left: 0px !important;
}
    .about-mission-main-img{
    width:100%;
}

}




/* =============================
   ABOUT PROCESS SECTION
============================= */

.about-process-section{
    padding:40px 0;
    background:#f8faff;
}

.about-process-title{
    font-size:36px;
    font-weight:700;
    margin-bottom:30px;
    color: #426db4;
}

.about-process-wrapper{
    position:relative;
}

/* LINE EXACTLY BETWEEN ICON CENTERS */
.about-process-line{
    position:absolute;
    top: 83px;
    left:16.66%;      /* center of first column */
    width:66.66%;     /* between first & last center */
    height:2px;
    border-top:2px dotted #cfd8f6;
    z-index:0;
}

/* RUNNING DOT */
.about-process-runner{
    position:absolute;
    top:-8px;
    left:0;
    width:14px;
    height:14px;
    background:#426db4;
    border-radius:50%;
    box-shadow:0 0 15px #4e73df;
    animation:aboutMoveHorizontal 6s linear infinite;
}

@keyframes aboutMoveHorizontal{
    0%{ left:0%; }
    50%{ left:50%; }
    100%{ left:100%; }
}

/* STEP */
.about-process-step{
    padding-top:40px;
    position:relative;
    transition:0.4s ease;
}

/* ICON */
.about-process-icon{
    width:80px;
    height:80px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    position:relative;
    z-index:2;
    transition:0.4s ease;
}

.about-process-icon i{
    font-size:24px;
    color:#f36c21;
}

/* ACTIVE */
.about-process-step.active .about-process-icon{
    background:#4e73df;
    transform:scale(1.1);
}

.about-process-step.active .about-process-icon i{
    color:#fff;
}

/* =============================
   MOBILE VERTICAL VERSION
============================= */

@media(max-width:767px){

    .about-process-wrapper{
        padding-left:50px;
    }

    .about-process-line{
        top:0;
        left:90px;
        width:2px;
        height:100%;
        border-top:none;
        border-left:2px dotted #cfd8f6;
    }

    .about-process-runner{
        left:-6px;
        top:0;
        animation:aboutMoveVertical 6s linear infinite;
    }

    @keyframes aboutMoveVertical{
        0%{ top:0%; }
        50%{ top:50%; }
        100%{ top:100%; }
    }

    .about-process-step{
        text-align:left;
        margin-bottom:60px;
        display:flex;
        align-items:center;
        gap: 10px;
    }

    .about-process-icon{
        margin:0 0 15px 0;
    }

}




/* -----------------------------------------------
            Blog page code start
---------------------------------------------------*/


/* ===== BLOG PAGE STYLE ===== */

.blog-page-section {
  background: #f8f9fc;
}

.blog-page-title {
  font-size: 36px;
  color: #426db4;
}

.blog-page-title span {
  background: linear-gradient(90deg, #e1601a, #f36c21);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blog-page-subtitle {
  max-width: 650px;
  margin: auto;
  color: #6c757d;
}

/* Featured */
.blog-page-featured {
  border-radius: 18px;
  overflow: hidden;
}

.blog-page-featured-img {
  height: 100%;
  object-fit: cover;
}

.blog-page-badge {
  background: #e9f2ff;
  color: #0d6efd;
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 12px;
}

.blog-page-featured-title {
  font-size: 22px;
}

.blog-page-featured-text {
  color: #6c757d;
}

.blog-page-meta span {
  font-size: 14px;
  color: #6c757d;
}

.blog-page-btn {
  background: linear-gradient(90deg, #6f42c1, #0d6efd);
  color: #fff;
  padding: 10px 22px;
  border-radius: 50px;
  border: none;
}

/* Cards */
.blog-page-card {
  border-radius: 18px;
  overflow: hidden;
  transition: 0.3s;
}

.blog-page-card:hover {
  transform: translateY(-3px);
}

/* Card Image */
.blog-page-card-top {
  height: 180px;
  overflow: hidden;
}

.blog-page-card-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: 0.4s ease;
}


.blog-page-card:hover .blog-page-card-img {
  transform: scale(1.08);
}
.blog-page-time-badge {
  position: absolute;
  right: 15px;
  bottom: 15px;
  background: #426db4;
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 20px;
}

.blog-page-small-badge {
  background: #f1f3f5;
  color: #f36c21;
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 20px;
}

.blog-page-card-title {
  font-size: 16px;
  transition: all 0.3s ease;
  color: #000;
}
.blog-page-card:hover .blog-page-card-title {
  color: #f36c21;
}
.blog-page-footer i{
 color: #f36c21;
}
.blog-page-read-more {
  text-decoration: none;
  font-weight: 500;
  color: #426db4;
}


.blog-page-read-more:hover {
  color: #0d6efd;
}

/* Responsive */
@media (max-width: 576px) {
  .blog-page-title {
    font-size: 26px;
  }
}



/* FAQ SECTION START */
.blog-page-faq-section{
  background:linear-gradient(135deg,#f4f7fc,#eef3fb);
}

/* TAG */
.blog-page-faq-tag{
  font-weight:600;
  color:#426db4;
  display:flex;
  align-items:center;
  gap:8px;
}
.blog-page-faq-tag span{
  width:8px;
  height:8px;
  background:#f36c21;
  border-radius:50%;
}

/* TITLE */
.blog-page-faq-title{
  font-size:42px;
  font-weight:700;
  color:#222;
}

/* CALL BOX */
.blog-page-faq-call-box{
  background:#fff;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
}
.blog-page-faq-call-box h4{
    color: #426db4;
}


/* BUTTON */
.blog-page-faq-btn{
  display:inline-block;
  padding:12px 30px;
  background:#f36c21;
  color:#fff;
  border-radius:50px;
  font-weight:600;
  text-decoration:none;
  transition:0.3s;
}
.blog-page-faq-btn:hover{
  background:#426db4;
  color:#fff;
}

/* ACCORDION */
.blog-page-faq-item{
  border:none;
  border-radius:15px !important;
  overflow:hidden;
  margin-bottom:15px;
  box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

.blog-page-faq-question{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  font-weight:600;
  background:#fff;
}

.blog-page-faq-question::after{
  display:none !important; /* remove default arrow */
}

.blog-page-faq-question:not(.collapsed){
  background:#426db4;
  color:#fff;
}

.blog-page-faq-answer{
  padding:20px;
  background:#fff;
  font-size:15px;
  color:#555;
}

/* ICON */
.blog-page-faq-icon{
  transition:0.3s;
  font-size:16px;
  color:#426db4;
}

.blog-page-faq-question:not(.collapsed) .blog-page-faq-icon{
  color:#fff;
}

.blog-page-faq-question:not(.collapsed) .blog-page-faq-icon:before{
  content:"\f068"; /* minus */
}

/* RESPONSIVE */
@media(max-width:991px){
  .blog-page-faq-title{
    font-size:32px;
    text-align:center;
  }
}



/* ---------------------------------------
          CONTACT US PAGE CODE START
-------------------------------------------*/

/* CONTACT SECTION START */.contact-page-section{
  background:#f5f8ff;
}

/* TITLE */
.contact-page-title{
  font-size:30px;
  font-weight:700;
  color:#f36c21;
}

.contact-page-text{
  color:#666;
  font-size:15px;
}

/* INFO */
.contact-page-info h6{
  font-weight:600;
  margin-bottom:4px;
}
.contact-page-info p{
  margin:0;
  color:#666;
  font-size:14px;
}

/* ICON */
.contact-page-icon{
  width:45px;
  height:45px;
  background:#f36c21;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:15px;
  font-size:16px;
}

.contact-page-icon i{
animation: iconZoom 2s infinite ease-in-out;

}
/* SOCIAL */
.contact-page-social a{
  width:40px;
  height:40px;
  background:#f36c21;
  color:#fff;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:10px;
  transition:0.3s;
  text-decoration:none;

}
.contact-page-social a i{
  animation: iconZoom 2s infinite ease-in-out;
}
.contact-page-social a:hover{
  background:#f36c21;
  transform:translateY(-3px);
}

/* FORM BOX */
.contact-page-form-box{
  background:#fff;
  border-radius:20px;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

/* INPUT */
.contact-page-input{
  border:none;
  background:#eef3ff;
  padding:12px 15px;
  border-radius:10px;
  font-size:14px;
}
.contact-page-input:focus{
  box-shadow:none;
  background:#e4edff;
  border:1px solid #426db4;
}

/* BUTTON */
.contact-page-btn{
  background:#f36c21;
  color:#fff;
  border:none;
  padding:12px 35px;
  border-radius:50px;
  font-weight:600;
  transition:0.3s;
}
.contact-page-btn:hover{
  transform:translateY(-3px);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

/* RESPONSIVE */
@media(max-width:991px){
  .contact-page-title{
    font-size:24px;
  }
}




/* -------------------------------------
    WHY CHOOSE US PAGE CODE START 
----------------------------------------*/


/* WHY US SECTION */
.why-us-section {
  background: #f8f9fb;
}

/* CARD */
.why-us-card {
  position: relative;
  background: #fff;
  padding: 30px 25px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  transition: all 0.35s ease;
  overflow: hidden;
  cursor: pointer;
}

/* LEFT BORDER */
.why-us-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: #426db4;
  transition: 0.3s;
}

/* ICON */
.why-us-icon {
  font-size: 28px;
  color: #426db4;
  margin-bottom: 15px;
  transition: 0.3s;
  
}

/* TITLE */
.why-us-title {
  font-weight: 600;
  margin-bottom: 10px;
  color: #f36c21;

}

/* TEXT */
.why-us-text {
  font-size: 14px;
  color: #6c757d;
}

/* HOVER */
.why-us-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.why-us-card:hover::before {
  width: 6px;
  background: linear-gradient(180deg, #426db4, #f36c21);
}

.why-us-card:hover .why-us-icon {
  color: #f36c21;
 
}

.why-us-card:hover .why-us-title {
  color: #426db4;
}

/* MOBILE */
@media (max-width: 576px) {
  .why-us-card {
    padding: 25px 20px;
  }
}



/* --------------------------------------
    OUR PROCESS PAGE CODE START
-----------------------------------------*/

/* SECTION */
.process-page-section {
  position: relative;
}

/* TITLE */
.process-page-title {
  font-weight: 700;
  font-size: 34px;
  color: #426db4;
}

/* TEXT */
.process-page-text {
  color: #666;
  font-size: 15px;
}

/* CARD */
.process-page-card {
  background: #fff;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* HOVER */
.process-page-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* ICON */
.process-page-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #426db4, #f36c21);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 18px;
  margin-bottom: 15px;
}

/* TEXT */
.process-page-card h6 {
  font-weight: 600;
  margin-bottom: 8px;
}

.process-page-card p {
  font-size: 14px;
  color: #777;
  margin: 0;
}

/* INFINITE ANIMATION */
.process-page-card::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  top: -50%;
  left: -50%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(66,109,180,0.15),
    rgba(243,108,33,0.15),
    transparent
  );
  transform: rotate(25deg);
  animation: process-page-animate 6s linear infinite;
}

@keyframes process-page-animate {
  0% { transform: translateX(-100%) rotate(25deg); }
  100% { transform: translateX(100%) rotate(25deg); }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .process-page-title {
    font-size: 26px;
  }
}



/* --------------------------------------
    WEBSITE DESIGN PAGE CODE START
-----------------------------------------*/


/* Hero Background */
.wbdesign-page-hero {
  padding: 40px 0;
  background: radial-gradient(circle at top left, #426db4, #05060f 70%);
  color: #fff;
}

/* Badge */
.wbdesign-page-badge {
  padding: 6px 14px;
  border: 1px solid #f36c21;
  border-radius: 50px;
  font-size: 14px;
  color: #fff;
  animation: wbdesign-page-float 3s infinite ease-in-out;
}

/* Title */
.wbdesign-page-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
}

.wbdesign-page-title span {
  color: #f36c21;
}

/* Description */
.wbdesign-page-desc {
  color: #ccc;
  max-width: 500px;
}

/* Button */
.wbdesign-page-btn {
  padding: 12px 28px;
  border-radius: 10px;
  border: 1px solid #426db4;
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.wbdesign-page-btn:hover {
  background: #f36c21;
  border-color: #f36c21;
  transform: translateY(-3px);
}

/* Users */
.wbdesign-page-user-imgs img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: -10px;
  border: 2px solid #111;
}

/* Image Animation */
.wbdesign-page-img-box {
  display: inline-block;
  animation: wbdesign-page-floatY 5s ease-in-out infinite;
}

.wbdesign-page-img {
  max-width: 350px;
}

/* Infinite Top-Bottom Animation */
@keyframes wbdesign-page-floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

/* Small Float */
@keyframes wbdesign-page-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* Responsive */
@media (max-width: 991px) {
  .wbdesign-page-title {
    font-size: 36px;
  }
}

@media (max-width: 576px) {
  .wbdesign-page-title {
    font-size: 28px;
  }
}



/* WHY US SECTION START */
.wbdesign-cards-section {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #f5f7ff, #ffffff);
}

/* Card Base */
.wbdesign-card {
  border-radius: 24px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}



/* Hover Effect */
.wbdesign-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* Infinite Floating Animation */
@keyframes wbdesign-float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

/* Glow Rotate */
@keyframes wbdesign-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



/* Variants */
.wbdesign-card-main {
  background: linear-gradient(135deg, #426db4, #6f8fdc);
  color: #fff;
}

.wbdesign-card-horizontal {
  background: linear-gradient(135deg, #f36c21, #ff9a5a);
  color: #fff;
}

.wbdesign-card-small {
  background: linear-gradient(135deg, #ffffff, #f1f3ff);
}

/* Typography */
.wbdesign-title {
  font-size: 34px;
  font-weight: 700;
}

.wbdesign-title-sm {
  font-size: 20px;
  font-weight: 600;
}

.wbdesign-text {
  font-size: 16px;
  opacity: 0.9;
}

.wbdesign-text-sm {
  font-size: 14px;
  opacity: 0.8;
}

/* Icons */
.wbdesign-icon-wrap i {
  font-size: 60px;
  color: #fff;
  animation: wbdesign-float 4s ease-in-out infinite;
}

.wbdesign-card i {
  font-size: 28px;
}

/* Responsive */
@media (max-width: 768px) {
  .wbdesign-title {
    font-size: 24px;
  }

  .wbdesign-title-sm {
    font-size: 18px;
  }
}



/* CTA SECTION CODE START */
.web-design-cta-modern {
  background: linear-gradient(135deg, #426db4, #2f4f9e);
 
  color: #fff;
}

/* Left Content */
.web-design-cta-heading {
  font-size: 38px;
  font-weight: 700;
}

.web-design-cta-text {
  margin: 15px 0 20px;
  opacity: 0.9;
}

/* Button */
.web-design-cta-btn {
  background: #f36c21;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.web-design-cta-btn:hover {
  background: #ff7f3f;
  transform: translateY(-3px);
}

/* Cards Row Fix (Equal Height) */
.web-design-cta-modern .row > div {
  display: flex;
}

/* Cards */
.web-design-cta-card {
  background: #ffffff;
  color: #333;
  border-radius: 18px;
  padding: 25px;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Hover */
.web-design-cta-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* Active Card */
.web-design-cta-card-active {
  background: #f36c21;
  color: #fff;
}

/* Icons */
.web-design-cta-card i {
  font-size: 30px;
  margin-bottom: 12px;
  color: #426db4;
}

/* Active icon */
.web-design-cta-card-active i {
  color: #fff;
}

/* Titles */
.web-design-cta-card h4 {
  font-size: 18px;
  font-weight: 600;
}

.web-design-cta-card p {
  font-size: 14px;
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
  .web-design-cta-heading {
    font-size: 26px;
  }
}




/* Web Design Services Section Start */
.web-design-service-section {
  background: linear-gradient(135deg, #ffffff, #f4f7ff);
  font-family: 'Inter', sans-serif;
}

/* Image */
.web-design-service-img {
  position: relative;
  display: inline-block;
  border-radius: 20px;
  overflow: hidden;
  animation: wd-float 6s ease-in-out infinite;
}

/* Floating Cards */
.web-design-service-float {
  position: absolute;
  background: #fff;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(66,109,180,0.15);
  display: flex;
  align-items: center;
  gap: 6px;
  animation: wd-float 5s ease-in-out infinite;
}

/* Icon Colors */
.web-design-service-float i {
  color: #f36c21;
}

/* Positions */
.web-design-service-card-1 {
  top: 15%;
  left: 0;
}

.web-design-service-card-2 {
  bottom: 10%;
  left: 5%;
}

.web-design-service-card-3 {
  bottom: 20%;
  right: 0;
}

/* Content */
.web-design-service-subtitle {
  color: #f36c21;
  font-weight: 600;
  margin-bottom: 10px;
}

.web-design-service-title {
  font-size: 34px;
  font-weight: 700;
  color: #426db4;
  margin-bottom: 15px;
}

.web-design-service-desc {
  color: #555;
  margin-bottom: 20px;
}

/* List */
.web-design-service-list {
  list-style: none;
  padding: 0;
}

.web-design-service-list li {
  margin-bottom: 10px;
  font-size: 15px;
}

.web-design-service-list i {
  color: #426db4;
  margin-right: 8px;
}

/* Animation */
@keyframes wd-float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

/* Hover micro interaction */
.web-design-service-float:hover {
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
  .web-design-service-title {
    font-size: 26px;
  }

  .web-design-service-float {
    font-size: 12px;
    padding: 6px 10px;
  }
}





/* --------------------------------------------------
  WEB DEVELOPMENT PAGE CODE START 
-----------------------------------------------------*/


/* Section */
.web-development-hero {
  background: #f7ffff;
}


/* Badge */
.web-development-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #f36c21;
  color: #fff;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 50px;
  font-size: 13px;
}

/* Content */
.web-development-content h2 {
  font-size: 34px;
  line-height: 1.3;
  color: #426db4;
}

/* Description */
.web-development-desc {
  color: #555;
  font-size: 15px;
}

/* Feature */
.web-development-feature {
  font-size: 15px;
  color: #444;
  align-items: center;
  transition: 0.3s;
}

/* Icon */
.web-development-feature i {
  color: #f36c21;
}

/* Hover */
.web-development-feature:hover {
  transform: translateX(5px);
}

/* Button */
.web-development-btn {
  background: linear-gradient(135deg, #426db4, #2f4f9e);
  color: #fff;
  padding: 12px 26px;
  border-radius: 30px;
  transition: 0.3s;
  border: none;
}

/* Button Hover */
.web-development-btn:hover {
  background: #f36c21;
  color: #fff;
  transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 767px) {
  .web-development-content {
    text-align: center;
  }

  .web-development-feature {
    justify-content: center;
  }

  .web-development-content h2 {
    font-size: 26px;
  }
}


/* Section */
.web-development-pricing {
  background: linear-gradient(135deg, #ffffff, #f4f7ff);
}

/* Content */
.web-development-pricing-content h3 {
  font-size: 32px;
  color: #426db4;
}

.web-development-desc {
  color: #555;
  font-size: 15px;
}

/* Button */
.web-development-pricing-btn {
  background: linear-gradient(135deg, #426db4, #2f4f9e);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  transition: 0.3s;
  border: none;
}

.web-development-pricing-btn:hover {
  background: #f36c21;
  color: #fff;
  transform: translateY(-3px);
}

/* Cards */
.web-development-price-card {
  background: #fff;
  padding: 20px 22px;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 10px 25px rgba(66,109,180,0.08);
  transition: 0.3s;
}

/* Hover */
.web-development-price-card:hover {
  transform: translateX(6px);
  box-shadow: 0 15px 35px rgba(66,109,180,0.15);
}

/* Titles */
.web-development-price-card h6 {
  font-size: 16px;
  margin-bottom: 6px;
}

/* Text */
.web-development-price-card p {
  font-size: 14px;
  color: #555;
}

/* Border Colors (updated to brand tone) */
.web-development-border-blue {
  border-left: 4px solid #426db4;
}

.web-development-border-yellow {
  border-left: 4px solid #f36c21;
}

.web-development-border-green {
  border-left: 4px solid #426db4;
}

/* Responsive */
@media (max-width: 767px) {
  .web-development-pricing-content {
    text-align: center;
  }

  .web-development-pricing-content h3 {
    font-size: 26px;
  }
}



.web-development-section {
  background: #f5f7fb;
}

/* CARD */
.web-development-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 12px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  border: 1px solid #eee;
}

/* SUBTLE SHADOW */
.web-development-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* BOTTOM GLOW LINE */
.web-development-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #426db4, #f36c21);
  transition: 0.4s;
  transform: translateX(-50%);
  border-radius: 10px;
}

.web-development-card:hover::after {
  width: 60%;
}

/* ICON */
.web-development-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  border-radius: 14px;
  background: rgba(66, 109, 180, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #426db4;
  font-size: 20px;
  transition: 0.3s;
}

/* ICON HOVER (color switch effect) */
.web-development-card:hover .web-development-icon {
  background: linear-gradient(135deg, #426db4, #f36c21);
  color: #fff;
  transform: scale(1.08);
}

/* TEXT */
.web-development-card h6 {
  font-size: 13px;
  font-weight: 600;
  color: #2c2c2c;
  margin: 0;
  letter-spacing: 0.4px;
  transition: 0.3s;
  margin-top: 15px;
}

/* TEXT HOVER */
.web-development-card:hover h6 {
  color: #426db4;
}

/* MOBILE */
@media (max-width: 576px) {
  .web-development-card {
    padding: 14px 8px;
  }

  .web-development-icon {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .web-development-card h6 {
    font-size: 12px;
  }
}


/* Section */
.web-development-services {
  background: linear-gradient(135deg, #ffffff, #f4f7ff);
}

/* Card */
.web-development-service-card {
  background: #fff;
  padding: 30px 20px;
  border-radius: 18px;
  transition: all 0.4s ease;
  height: 100%;
  box-shadow: 0 10px 30px rgba(66,109,180,0.08);
  position: relative;
  overflow: hidden;
}

/* Gradient Border Effect */
.web-development-service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg, #426db4, #f36c21);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Hover */
.web-development-service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(66,109,180,0.2);
}

/* Icon */
.web-development-icon {
  width: 65px;
  height: 65px;
  margin: 0 auto;
  border-radius: 16px;
  background: linear-gradient(135deg, #426db4, #2f4f9e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  transition: 0.3s;
}

/* Icon hover */
.web-development-service-card:hover .web-development-icon {
  background: #f36c21;
}

/* Text */
.web-development-service-card h6 {
  margin-top: 12px;
  font-size: 16px;
}

.web-development-service-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 12px;
}

/* Button */
.web-development-service-btn {
  background: transparent;
  color: #426db4;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 14px;
  border: 1px solid #426db4;
  transition: 0.3s;
}

/* Button hover */
.web-development-service-btn:hover {
  background: #f36c21;
  color: #fff;
  border-color: #f36c21;
}

/* Responsive */
@media (max-width: 767px) {
  .web-development-service-card {
    padding: 25px 18px;
  }
}




/* ------------------------------------------------------------------
      E-COMMERCE
---------------------------------------------------------------------*/

/* SECTION */
.ecommerce-frontend {
  background: linear-gradient(135deg, #f8fbff, #f3f6fa);
  padding: 60px 0;
}

/* TITLE */
.ecommerce-title {
  font-size: 34px;
  font-weight: 700;
  color: #222;
  position: relative;
}

/* TITLE UNDERLINE */
.ecommerce-title::after {
  content: "";
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #426db4, #f36c21);
  position: absolute;
  bottom: -8px;
  left: 0;
  border-radius: 10px;
}

/* SUBTITLE */
.ecommerce-subtitle {
  font-size: 17px;
  color: #555;
  max-width: 500px;
}

/* LIST */
.ecommerce-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* LIST ITEM */
.ecommerce-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 15px;
  color: #444;
  transition: 0.3s;
}

/* ICON STYLE */
.ecommerce-icon {
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f36c21, #f36c21);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  margin-top: 3px;
  transition: 0.3s;
}


/* IMAGE WRAPPER */
.ecommerce-image-wrapper {
  position: relative;
  display: inline-block;
}

/* MAIN IMAGE */
.ecommerce-main-img {
  border-radius: 12px;
  transition: 0.4s;
  max-width: 100%;
}



/* RESPONSIVE */
@media (max-width: 991px) {
  .ecommerce-image-wrapper {
    text-align: center;
    margin-top: 20px;
  }
}

@media (max-width: 576px) {
  .ecommerce-title {
    font-size: 26px;
  }

  .ecommerce-subtitle {
    font-size: 15px;
  }

  .ecommerce-list li {
    font-size: 14px;

  }

}




.ecommerce-cta {
  background: linear-gradient(135deg, #426db4, #426db4);
  color: #fff;
}

.ecommerce-cta-text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}

.ecommerce-cta-btn {
  display: inline-block;
  padding: 12px 26px;
    border: 1px solid #f36c21;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    background-color: #f36c21;
    font-weight: 500;
}

.ecommerce-cta-btn:hover {
  transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    background: #fff;
    color: #f36c21;
}


/* RESPONSIVE */
@media (max-width: 991px) {
  .ecommerce-cta-text {
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  .ecommerce-cta-text {
    font-size: 16px;
  }

  .ecommerce-cta-btn {
    width: 100%;
    text-align: center;
  }
}



/* ===============================
   E-commerce Solutions Section
================================= */

/* SECTION */
.ecommerce-sol-section {
  background-color: #eef3f6;
}

/* TITLE */
.ecommerce-sol-title {
  font-size: 38px;
  font-weight: 700;
  color: #222;
  position: relative;
}

/* GRADIENT LINE */
.ecommerce-sol-title::after {
  content: "";
  width: 70px;
  height: 4px;
  background: linear-gradient(90deg, #426db4, #f36c21);
  display: block;
  margin: 10px auto 0;
  border-radius: 10px;
}

/* SUBTITLE */
.ecommerce-sol-subtitle {
  font-size: 17px;
  color: #666;
}

/* CARD */
.ecommerce-sol-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  transition: 0.3s;
  border: 1px solid #eee;
  height: 100%;
}

/* HOVER */
.ecommerce-sol-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(66,109,180,0.15);
}

/* ICON */
.ecommerce-sol-icon {
  min-width: 55px;
  height: 55px;
  border-radius: 14px;
  background: linear-gradient(135deg, #426db4, #f36c21);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  transition: 0.3s;
}

/* ICON HOVER */
.ecommerce-sol-card:hover .ecommerce-sol-icon {
  transform: scale(1.1) rotate(5deg);
}

/* HEADING */
.ecommerce-sol-heading {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  margin-bottom: 6px;
}

/* TEXT */
.ecommerce-sol-text {
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
}

/* HIGHLIGHT */
.ecommerce-sol-highlight {
  font-size: 14px;
  color: #426db4;
}

.ecommerce-sol-highlight strong {
  color: #f36c21;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .ecommerce-sol-title {
    font-size: 30px;
  }
}

@media (max-width: 576px) {
  .ecommerce-sol-card {
    padding: 16px;
  }

  .ecommerce-sol-icon {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .ecommerce-sol-heading {
    font-size: 17px;
  }

  .ecommerce-sol-text,
  .ecommerce-sol-highlight {
    font-size: 13px;
  }
}



/* -----------------------------------------------------------------
   SEO PAGE CODE START 
-------------------------------------------------------------------*/


/* SECTION */
.seo-banner-section {
  background: linear-gradient(135deg, #426db4, #f36c21);
  padding: 30px 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* SOFT OVERLAY GLOW */
.seo-banner-section::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}

/* TITLE */
.seo-banner-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}

/* DESC */
.seo-banner-desc {
  font-size: 18px;
  max-width: 520px;
  opacity: 0.95;
  margin-bottom: 25px;
}

/* BUTTON */
.seo-banner-btn {
  display: inline-block;
  background: #fff;
  color: #426db4;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

/* BUTTON HOVER */
.seo-banner-btn:hover {
  background: #f36c21;
  color: #fff;
  transform: translateY(-2px);
}

/* IMAGE */
.seo-img-wrapper {
  position: relative;
}

.seo-main-img {
  max-width: 100%;
  border-radius: 12px;
  transition: 0.4s;
  filter: drop-shadow(0 15px 30px rgba(0,0,0,0.2));
}

/* IMAGE HOVER */
.seo-main-img:hover {
  transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .seo-banner-title {
    font-size: 30px;
    text-align: center;
  }

  .seo-banner-desc {
    text-align: center;
    margin: 0 auto 20px;
  }

  .seo-banner-btn {
    display: block;
    width: fit-content;
    margin: 0 auto;
  }

  .seo-img-wrapper {
    margin-top: 40px;
  }
}

@media (max-width: 576px) {
  .seo-banner-title {
    font-size: 22px;
  }

  .seo-banner-desc {
    font-size: 15px;
  }
}



/* SECTION */
.seo-process-section {
  background: #ffffff;
  padding: 50px 0;
}

/* IMAGE */
.seo-process-main-img {
  max-width: 100%;
  border-radius: 12px;
  transition: 0.4s;
  
}



/* CONTENT */
.seo-process-content {
  font-size: 16px;
  color: #444;
  line-height: 1.7;
}

/* TITLE */
.seo-process-title {
  font-size: 28px;
  font-weight: 700;
  color: #426db4;
  margin-bottom: 15px;
}

/* PARAGRAPH */
.seo-process-content p {
  margin-bottom: 15px;
}

/* HIGHLIGHT BOX */
.seo-process-box {
  background: #fff;
  border-left: 4px solid #426db4;
  padding: 15px 18px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  margin-top: 20px;
  transition: 0.3s;
}

/* BOX HOVER */
.seo-process-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(66,109,180,0.15);
}

/* EMAIL */
.seo-email {
  color: #f36c21;
  font-weight: 600;
}

/* HIGHLIGHT TEXT */
.seo-highlight {
  color: #426db4;
  font-weight: 600;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .seo-process-content {
    margin-top: 30px;
    text-align: center;
  }

  .seo-process-title {
    font-size: 24px;
  }
}

@media (max-width: 576px) {
  .seo-process-title {
    font-size: 20px;
  }

  .seo-process-content {
    font-size: 14px;
  }
}



/* SECTION */
.seo-results-section {
  background: linear-gradient(135deg, #f8fbff, #f3f6fa);
  padding: 50px 0;
}

/* TITLE */
.seo-results-title {
  font-size: 40px;
  font-weight: 700;
  color: #222;
}

/* GRADIENT TEXT */
.seo-results-title span {
  background: linear-gradient(90deg, #426db4, #f36c21);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* SUBTITLE */
.seo-results-subtitle {
  max-width: 650px;
  margin: 15px auto 40px;
  font-size: 17px;
  color: #666;
}

/* CARD */
.seo-card {
  background: #fff;
  padding: 28px 20px;
  border-radius: 14px;
  transition: 0.3s;
  height: 100%;
  border: 1px solid #eee;
  position: relative;
}

/* HOVER */
.seo-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(66,109,180,0.15);
}

/* TOP LINE EFFECT */
.seo-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #426db4, #f36c21);
  transition: 0.4s;
  transform: translateX(-50%);
}

.seo-card:hover::before {
  width: 70%;
}

/* ICON */
.seo-icon {
  width: 65px;
  height: 65px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: rgba(66, 109, 180, 0.08);
  color: #426db4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  transition: 0.3s;
}

/* ICON HOVER */
.seo-card:hover .seo-icon {
  background: linear-gradient(135deg, #426db4, #f36c21);
  color: #fff;
  transform: scale(1.1);
}

/* TEXT */
.seo-card h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

.seo-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* HIGHLIGHT CARD */
.seo-card-highlight {
  border: 1px solid rgba(66,109,180,0.2);
  background: linear-gradient(135deg, rgba(66,109,180,0.05), rgba(243,108,33,0.05));
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .seo-results-title {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .seo-results-title {
    font-size: 24px;
  }

  .seo-results-subtitle {
    font-size: 15px;
  }
}




/* SECTION */
.seo-page-services {
  background: linear-gradient(135deg, #f8fbff, #f3f6fa);
}

/* TITLE */
.seo-page-title {
  font-size: 40px;
  color: #222;
}

.seo-page-title span {
  background: linear-gradient(90deg, #426db4, #f36c21);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* SUBTITLE */
.seo-page-subtitle {
  max-width: 650px;
  margin: auto;
  color: #666;
  font-size: 16px;
}

/* CARD */
.seo-page-card {
  background: #fff;
  border-radius: 14px;
  padding: 25px 20px;
  border: 1px solid #eee;
  transition: 0.3s;
  position: relative;
}

/* HOVER */
.seo-page-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(66,109,180,0.15);
}

/* TOP LINE */
.seo-page-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #426db4, #f36c21);
  transform: translateX(-50%);
  transition: 0.4s;
}

.seo-page-card:hover::before {
  width: 60%;
}

/* ICON */
.seo-page-icon {
  width: 55px;
  height: 55px;
  border-radius: 14px;
  background: rgba(66,109,180,0.08);
  color: #426db4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 15px;
  transition: 0.3s;
}

/* ICON HOVER */
.seo-page-card:hover .seo-page-icon {
  background: linear-gradient(135deg, #426db4, #f36c21);
  color: #fff;
  transform: scale(1.1);
}

/* TEXT */
.seo-page-card h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.seo-page-card p {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

/* LIST */
.seo-page-card ul {
  padding-left: 0;
  list-style: none;
}

.seo-page-card ul li {
  font-size: 14px;
  margin-bottom: 8px;
  color: #333;
}

.seo-page-card ul li i {
  color: #f36c21;
  margin-right: 6px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .seo-page-title {
    font-size: 28px;
  }
}




/* SECTION */
.seo-page-process {
  background: #0f2043;
  padding: 80px 0;
  color: #fff;
}

/* TITLE */
.seo-page-process-title {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
}

.seo-page-process-title span {
  color: #f36c21;
}

/* SUBTITLE */
.seo-page-process-subtitle {
  color: rgba(255,255,255,0.7);
  max-width: 600px;
  margin: 10px auto 0;
}

/* BOX */
.seo-process-box {
  position: relative;
  padding: 30px 20px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: 0.3s;
}

/* HOVER */
.seo-process-box:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

/* BIG BACKGROUND NUMBER */
.seo-process-number {
  position: absolute;
  top: -10px;
  right: 10px;
  font-size: 80px;
  font-weight: 800;
  color: rgba(255,255,255,0.05);
  z-index: 0;
}

/* ICON */
.seo-process-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, #426db4, #f36c21);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 15px;
  z-index: 1;
  position: relative;
}

/* TEXT */
.seo-process-box h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  z-index: 1;
  position: relative;
}

.seo-process-box p {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  z-index: 1;
  position: relative;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .seo-page-process-title {
    font-size: 30px;
  }

  .seo-process-number {
    font-size: 60px;
  }
}

@media (max-width: 576px) {
  .seo-page-process-title {
    font-size: 24px;
  }
}


/* -----------------------------------------------------------------------
    DIGITAL MARKETION PAGE CODE
--------------------------------------------------------------------------*/

/* SECTION */
.related-services {
  background: #ffffff;
}

/* TITLE */
.rs-title {
  font-size: 36px;
  font-weight: 600;
  color: #1e2a3b;
}

/* UNDERLINE */
.rs-line {
  width: 70px;
  height: 3px;
  background: #f36c21;
  margin: 10px auto 0;
  border-radius: 5px;
}

/* ITEM */
.rs-item {
  text-align: center;
  transition: 0.3s;
}

/* ICON CIRCLE */
.rs-icon {
  width: 140px;
  height: 140px;
  margin: auto;
  border-radius: 50%;
  border: 2px solid #426db4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: 0.4s;
}

/* IMAGE */
.rs-icon img {
  width: 70px;
  transition: 0.4s;
}

/* TEXT */
.rs-item p {
  margin-top: 15px;
  font-size: 16px;
  color: #333;
  font-weight: 700;
}

/* HOVER EFFECT */
.rs-item:hover .rs-icon {
  transform: translateY(-8px);
}

.rs-item:hover img {
  transform: scale(1.1);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .rs-icon {
    width: 110px;
    height: 110px;
  }

  .rs-icon img {
    width: 55px;
  }

  .rs-title {
    font-size: 28px;
  }
}


/* ------------------------------------------------------------------------
  Modal Form
----------------------------------------------------------------------------*/

/* LEFT SIDE */
.pop-left-side{
    background:linear-gradient(135deg,#426db4,#2f5da7);
    color:#fff;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
}

.pop-left-side::before{
    content:'';
    position:absolute;
    width:280px;
    height:280px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-100px;
    left:-100px;
}

.pop-logo img{
    width:180px;
    max-width:100%;
}

.pop-left-title{
    font-size:30px;
    font-weight:700;
    margin-bottom:12px;
}

.pop-left-desc{
    font-size:14px;
    line-height:24px;
    margin-bottom:25px;
}

/* INFO BOX */
.pop-info-box{
    display:flex;
    gap:12px;
    margin-bottom:18px;
}

.pop-icon{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.pop-info-box h6{
    font-size:15px;
    margin-bottom:4px;
    font-weight:600;
}

.pop-info-box p{
    font-size:13px;
    margin:0;
}

/* RIGHT SIDE */
.pop-right-side{
    padding:35px;
}

.pop-service-title{
    color:#426db4;
    font-size:20px;
    margin-top: 25px;
    font-weight:700;
    margin-bottom:25px;
}

/* SERVICE CARD */
.pop-service-card{
    border:2px solid #edf1f7;
    border-radius:16px;
    padding:22px 10px;
    text-align:center;
    cursor:pointer;
    transition:.3s;
    background:#fff;
    height:100%;
}

.pop-service-card:hover{
    transform:translateY(-4px);
    border-color:#426db4;
    box-shadow:0 8px 20px rgba(66,109,180,.12);
}

.pop-service-card.active{
    background:linear-gradient(135deg,#426db4,#2f5da7);
    border-color:#426db4;
}

.pop-service-card.active i,
.pop-service-card.active h5{
    color:#fff;
}

.pop-service-card i{
    font-size:28px;
    color:#426db4;
    margin-bottom:12px;
}

.pop-service-card h5{
    font-size:15px;
    font-weight:600;
    margin:0;
}

/* INPUT */
.pop-input{
    height:50px;
    border-radius:12px;
    border:1px solid #dfe6f1;
    box-shadow:none !important;
    font-size:14px;
}

textarea.pop-input{
    resize:none;
    height:auto;
}

.pop-input:focus{
    border-color:#426db4;
}

/* BUTTON */
.pop-submit-btn{
    background:linear-gradient(135deg,#426db4,#2f5da7);
    border:none;
    color:#fff;
    height:50px;
    border-radius:12px;
    font-weight:600;
    transition: all 0.3s ease;
}

.pop-submit-btn:hover{
    transform:translateY(-4px);
    color: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.pop-back-btn{
    background:linear-gradient(135deg,#f36c21, #f36c21);
    border:none;
    height:50px;
    border-radius:12px;
    font-weight:600;
    transition: all 0.3s ease;
    color: #fff;
}

.pop-back-btn:hover{
    transform:translateY(-4px);
    color: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

/* MOBILE */
@media(max-width:991px){

    .pop-left-side{
        display:none;
    }

    .pop-right-side{
        padding:22px;
    }

    .pop-service-title{
        font-size:16px;
    }

    .pop-service-card{
        padding:18px 8px;
    }

    .pop-service-card i{
        font-size:24px;
    }

    .pop-service-card h5{
        font-size:13px;
    }

}




/* ====================================================================
        CHATBOAT SECTION CODE
======================================================================*/

/* FLOAT BUTTON */
.chat-toggle{
    position:fixed;
    right:10px;
    bottom:10px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#4eba6f;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    cursor:pointer;
    z-index:99999;
    box-shadow:0 10px 35px rgba(0,0,0,.25);
    animation:pulse 2s infinite;
    
}

@keyframes pulse{
    0% {
        box-shadow: 0 0 0 0 rgba(78, 186, 111, 0.5);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(78, 186, 111, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(78, 186, 111, 0);
    }
}
@media(max-width:768px){

    .chat-toggle{
        width:55px;
        height:55px;
        right:10px;
        bottom:10px;
        font-size:30px;
    }

}


/* CHATBOX */
.chatbox{
    position:fixed;
    top:0;
    right:0;
    width:420px;
    max-width:100%;
    height:100vh;
    background:#426db4;
    z-index:999999;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transform:translateX(100%);
    transition:.4s;
    box-shadow: 2px 0 7px #5bc49d;
    /* 2px 0 7px #fff */
}

.chatbox.active{
    transform:translateX(0);
}

/* HEADER */
.chat-header{
    padding:15px;
    background:rgba(0,0,0,.15);
    backdrop-filter:blur(10px);
}

.chat-logo{
    width:55px;
    height:55px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid rgba(255,255,255,.3);
}

.chat-logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.chat-title{
    color:#fff;
    font-size:14px;
    font-weight:700;
}

/* RESET & CLOSE */
.chat-reset,
.chat-close{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.3s;
}

.chat-reset:hover,
.chat-close:hover{
    background:#fff;
    color:#426db4;
}

/* BODY */
.chat-body{
    flex:1;
    overflow-y:auto;
    padding:20px;
}

.chat-body::-webkit-scrollbar{
    width:4px;
}

.chat-body::-webkit-scrollbar-thumb{
    background:#d0dcf2;
    border-radius:20px;
}

/* MESSAGE */
.message{
    max-width:85%;
    margin-bottom:18px;
    animation:fade .4s ease;
}

.message-box{
    padding:14px 18px;
    border-radius:18px;
    font-size:15px;
    line-height:1.6;
    font-weight:500;
    backdrop-filter:blur(10px);
}

/* RECEIVE */
.receive .message-box{
    background:#fff;
    color:#222;
    border-top-left-radius:5px;
}

/* SEND */
.send{
    margin-left:auto;
}

.send .message-box{
    background:#27c26c;
    color:#fff;
    border-top-right-radius:5px;
}

/* TIME */
.message-time{
    color:#fff;
    font-size:12px;
    margin-top:5px;
    padding-left:5px;
}

.send .message-time{
    text-align:right;
    padding-right:5px;
}

/* BUTTON CHOICE */
.choice-box{
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: end;
    gap:10px;
    margin-bottom:20px;
}

.choice-btn{
    border:2px solid transparent;
    background:#fff;
    color:#426db4;
    padding:12px 20px;
    border-radius:50px;
    font-size:15px;
    font-weight:600;
    transition:.3s;
}

.choice-btn:hover{
    border:2px solid #27c26c;
    transform:translateX(-5px);
}

/* FOOTER */
.chat-footer{
    padding:15px;
    background:rgba(0,0,0,.15);
    backdrop-filter:blur(10px);
}

/* INPUT WRAP */
.input-wrap{
    position:relative;
}

/* INPUT */
.chat-input{
    width:100%;
    height:55px;
    border:none;
    border-radius:50px;
    padding:0 60px 0 20px;
    outline:none;
    font-size:15px;
    background:#fff;
}

/* SEND BUTTON */
.send-btn{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#426db4;
    color:#fff;
    display:none;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.3s;
}

.send-btn:hover{
    background:#2f5ca7;
}

/* TYPING LOADER */
.typing{
    display:flex;
    align-items:center;
    gap:5px;
    background:#fff;
    width:80px;
    padding:14px;
    border-radius:18px;
    margin-bottom:18px;
}

.typing span{
    width:10px;
    height:10px;
    background:#426db4;
    border-radius:50%;
    animation:blink 1.4s infinite;
}

.typing span:nth-child(2){
    animation-delay:.2s;
}

.typing span:nth-child(3){
    animation-delay:.4s;
}

@keyframes blink{
    0%{
        opacity:.2;
    }
    20%{
        opacity:1;
    }
    100%{
        opacity:.2;
    }
}

/* FOOTER TEXT */
.footer-text{
    color:#fff;
    font-size:11px;
    margin-top:10px;
    opacity:.8;
    line-height:1.5;
}

/* SUCCESS CARD */
.success-card{
    background:#f8fbff;
    border-radius:18px;
    padding:18px;
}

.success-title{
    font-size:18px;
    font-weight:700;
    color:#426db4;
    margin-bottom:18px;
    line-height:1.5;
}

.success-item{
    background:#fff;
    border-radius:14px;
    padding:12px 15px;
    margin-bottom:12px;
    border:1px solid #e4edf9;
}

.success-item span{
    display:block;
    font-size:13px;
    color:#777;
    margin-bottom:4px;
}

.success-item b{
    color:#222;
    font-size:15px;
}

/* ACTION BUTTONS */
.modern-action{
    display:flex;
    gap:10px;
    margin-top:15px;
}

.modern-btn{
    flex:1;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.call-modern{
    background:#fff;
    color:#426db4;
}

.whatsapp-modern{
    background:#27c26c;
    color:#fff;
}

.modern-btn:hover{
    transform:translateY(-3px);
}

/* ANIMATION */
@keyframes fade{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* MOBILE */
@media(max-width:600px){

    .chatbox{
        width:100%;
    }

}





/* MOBILE RESPONSIVE LEFT WHATSAPP BUTTON */
.whatsapp-sticky{
    position:fixed;
    left:10px;
    bottom:10px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    text-decoration:none;
    z-index:99999;
    box-shadow:0 10px 35px rgba(0,0,0,.25);

    opacity:0;
    visibility:hidden;
    transform:translateY(100px);
    transition:all .4s ease;

    animation:pulse 2s infinite;
}

/* SHOW BUTTON */
.whatsapp-sticky.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* HOVER */
.whatsapp-sticky:hover{
    color:#fff;
    transform:scale(1.05);
}

/* PULSE EFFECT */
@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.5);
    }

    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){

    .whatsapp-sticky{
        width:55px;
        height:55px;
        left:10px;
        bottom:10px;
        font-size:30px;
    }

}