/* =====================================================
   SEYWAVE TECHNOLOGIES WEBSITE TEMPLATE
===================================================== */


/* =====================================================
   BRAND COLOURS
===================================================== */

:root{

  --brand-navy:#1b2366;

  --brand-teal:#1f7697;

  --brand-cyan:#9fe6fb;

  --brand-dark:#111833;

  --brand-text:#475569;

  --brand-light:#f4f8fb;

  --white:#ffffff;


  /* GRADIENTS */

  --brand-gradient:
    linear-gradient(
      135deg,
      #1b2366,
      #1f7697
    );

  --brand-gradient-hover:
    linear-gradient(
      135deg,
      #151c54,
      #155f7b
    );
}


/* =====================================================
   RESET
===================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}


/* =====================================================
   BODY
===================================================== */

body{

  background:var(--brand-light);

  font-family:'Roboto', sans-serif;

  color:var(--brand-dark);

  overflow-x:hidden;
}


/* =====================================================
   HEADINGS
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

  font-family:'DM Serif Display', serif;

  font-weight:400;

  color:var(--brand-dark);

  letter-spacing:-1px;
}


/* =====================================================
   GLOBAL
===================================================== */

a{
  text-decoration:none;
  transition:0.3s ease;
}

img{
  max-width:100%;
  display:block;
}


/* =====================================================
   NAVIGATION
===================================================== */

.site-header{

  position:sticky;

  top:0;

  z-index:1000;

  width:100%;

  background:rgba(255,255,255,0.96);

  backdrop-filter:blur(10px);

  box-shadow:
    0 10px 35px rgba(17,24,51,.06);
}


/* NAVBAR */

.navbar{

  min-height:88px;

  padding:0;
}


/* LOGO */

.navbar-brand img{

  width:185px;

  height:auto;
}


/* MENU */

.navbar-nav{

  gap:38px;
}


/* NAV LINKS */

.nav-link{

  font-family:'Roboto', sans-serif;

  color:var(--brand-dark) !important;

  font-size:15px;

  font-weight:700;

  padding:0 !important;
}


.nav-link:hover,
.nav-link.active{

  color:var(--brand-teal) !important;
}


/* BUTTON */

.quote-btn{

  height:50px;

  padding:0 28px;

  border-radius:14px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  background:var(--brand-gradient);

  color:#fff;

  font-family:'Roboto', sans-serif;

  font-size:15px;

  font-weight:700;

  box-shadow:
    0 14px 28px rgba(31,118,151,.22);
}


.quote-btn:hover{

  background:var(--brand-gradient-hover);

  color:#fff;

  transform:translateY(-2px);
}


/* MOBILE BUTTON */

.navbar-toggler{

  border:none !important;

  box-shadow:none !important;
}


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

main{
  padding:0;
  min-height:auto;
}


.hero-carousel{
  width:100%;
  overflow:hidden;
}

.hero-slide{
  width:100%;
  min-height:760px;
  background-size:cover;
  background-position:center right;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
}

.hero-content-wrap{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  padding:0 7%;
  position:relative;
  z-index:2;
}

.hero-content{
  max-width:620px;
  padding-top:40px;
}


/* HERO SLIDE */

.hero-slide{

  min-height:760px;

  background-size:cover;

  background-position:center right;

  position:relative;

  display:flex;

  align-items:center;

  overflow:hidden;
}


/* HERO OVERLAY */

.hero-overlay{

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      105deg,
      #f4f8fb 0%,
      #f4f8fb 38%,
      rgba(244,248,251,.94) 43%,
      rgba(244,248,251,.25) 56%,
      rgba(244,248,251,0) 100%
    );
}


/* CURVED SHAPE */

.hero-overlay::after{

  content:"";

  position:absolute;

  left:38%;

  top:-10%;

  width:260px;

  height:130%;

  background:rgba(31,118,151,.08);

  transform:skewX(-14deg);

  border-radius:120px;
}


/* HERO CONTENT */

.hero-content{

  position:relative;

  z-index:2;

  max-width:580px;

  padding-top:40px;
}


/* HERO TITLE */

.hero-content h1{

  font-size:64px;

  line-height:1.05;

  margin-bottom:26px;

  color:var(--brand-dark);
}


/* HIGHLIGHT */

.hero-content h1 span{

  color:var(--brand-teal);
}


/* HERO TEXT */

.hero-content p{

  max-width:470px;

  font-size:18px;

  line-height:1.9;

  color:var(--brand-dark);

  margin-bottom:36px;
}


/* HERO BUTTONS */

.hero-buttons{

  display:flex;

  gap:18px;

  flex-wrap:wrap;
}


/* PRIMARY BUTTON */

.hero-btn-primary{

  min-height:54px;

  padding:0 30px;

  border-radius:12px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  background:var(--brand-gradient);

  color:#fff;

  font-family:'Roboto', sans-serif;

  font-weight:700;

  font-size:15px;

  box-shadow:
    0 14px 28px rgba(31,118,151,.22);
}


.hero-btn-primary:hover{

  background:var(--brand-gradient-hover);

  color:#fff;

  transform:translateY(-2px);
}


/* SECONDARY BUTTON */

.hero-btn-secondary{

  min-height:54px;

  padding:0 30px;

  border-radius:12px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  border:2px solid var(--brand-teal);

  background:#fff;

  color:var(--brand-dark);

  font-family:'Roboto', sans-serif;

  font-weight:700;

  font-size:15px;
}


.hero-btn-secondary:hover{

  background:var(--brand-teal);

  color:#fff;
}


/* CAROUSEL CONTROLS */

.carousel-control-prev,
.carousel-control-next{

  width:5%;
}


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

.services-section{

  position:relative;

  padding:0 0 120px;

  background:var(--brand-light);
}


/* FLOATING STRIP */

.services-strip{

  position:relative;

  margin-top:-70px;

  margin-bottom:80px;

  background:#fff;

  border-radius:28px;

  padding:30px;

  display:grid;

  grid-template-columns:repeat(6,1fr);

  gap:18px;

  box-shadow:
    0 25px 60px rgba(17,24,51,.08);

  z-index:5;
}


/* MINI CARD */

.service-mini-card{

  background:#f4f8fb;

  border-radius:20px;

  padding:24px 18px;

  text-align:center;

  color:var(--brand-dark);

  transition:0.3s;
}


.service-mini-card:hover{

  transform:translateY(-4px);

  background:#fff;

  box-shadow:
    0 18px 45px rgba(17,24,51,.08);

  color:var(--brand-teal);
}


/* ICON */

.service-icon{

  width:60px;

  height:60px;

  margin:auto auto 18px;

  border-radius:18px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
    linear-gradient(
      135deg,
      var(--service-color),
      color-mix(in srgb, var(--service-color) 72%, white)
    );

  color:#fff;

  font-size:24px;

  box-shadow:
    0 10px 24px rgba(0,0,0,.08);
}


/* MINI TEXT */

.service-mini-card span{

  font-size:15px;

  font-weight:700;

  line-height:1.5;

  display:block;
}


/* MAIN WRAPPER */

.services-wrapper{

  position:relative;
}


/* BADGE */

.section-badge{

  display:inline-block;

  margin-bottom:18px;

  color:var(--brand-teal);

  font-size:13px;

  font-weight:700;

  letter-spacing:2px;
}


/* TITLE */

.services-content h2{

  font-size:54px;

  line-height:1.08;

  margin-bottom:24px;
}


/* TEXT */

.services-content p{

  font-size:18px;

  line-height:1.9;

  color:var(--brand-text);

  margin-bottom:34px;
}


/* BUTTON */

.services-btn{

  height:54px;

  padding:0 32px;

  border-radius:14px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  background:var(--brand-gradient);

  color:#fff;

  font-weight:700;

  box-shadow:
    0 14px 28px rgba(31,118,151,.22);
}


.services-btn:hover{

  background:var(--brand-gradient-hover);

  color:#fff;

  transform:translateY(-2px);
}


/* GRID */

.services-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:24px;
}


/* SERVICE CARD */

.service-card{

  background:#fff;

  border-radius:24px;

  padding:36px;

  color:var(--brand-dark);

  box-shadow:
    0 18px 45px rgba(17,24,51,.05);

  transition:0.3s;
}


.service-card:hover{

  transform:translateY(-5px);

  box-shadow:
    0 24px 60px rgba(17,24,51,.10);

  color:var(--brand-dark);
}


/* CARD ICON */

.service-card i{

  width:72px;

  height:72px;

  border-radius:20px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:24px;

  background:var(--brand-gradient);

  color:#fff;

  font-size:28px;
}


/* CARD TITLE */

.service-card h3{

  font-size:30px;

  margin-bottom:16px;
}


/* CARD TEXT */

.service-card p{

  margin:0;

  color:var(--brand-text);

  line-height:1.8;

  font-size:16px;
}


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

.site-footer{

  background:var(--brand-dark);

  padding:75px 0 25px;

  color:#fff;
}


/* FOOTER TEXT */

.footer-text{

  font-family:'Roboto', sans-serif;

  color:#cbd5e1;

  line-height:1.9;

  font-size:16px;

  max-width:420px;
}


/* FOOTER TITLE */

.footer-title{

  font-family:'DM Serif Display', serif;

  color:#fff;

  font-size:28px;

  margin-bottom:24px;
}


/* FOOTER LINKS */

.footer-links{

  list-style:none;

  padding:0;

  margin:0;
}


.footer-links li{

  margin-bottom:14px;
}


.footer-links a{

  font-family:'Roboto', sans-serif;

  color:#cbd5e1;

  font-size:15px;

  font-weight:500;
}


.footer-links a:hover{

  color:var(--brand-cyan);
}


/* SOCIAL ICONS */

.social-icons{

  display:flex;

  align-items:center;

  gap:14px;

  margin-top:26px;
}


/* SOCIAL BUTTON */

.social-icon{

  width:44px;

  height:44px;

  border-radius:12px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:rgba(255,255,255,.08);

  color:#fff;

  font-size:18px;
}


.social-icon:hover{

  background:var(--brand-gradient);

  color:#fff;

  transform:translateY(-2px);
}


/* FOOTER BOTTOM */

.footer-bottom{

  margin-top:55px;

  padding-top:24px;

  border-top:
    1px solid rgba(255,255,255,.12);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  flex-wrap:wrap;

  color:#94a3b8;

  font-family:'Roboto', sans-serif;

  font-size:14px;
}


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

@media(max-width:1200px){

  .services-strip{
    grid-template-columns:repeat(3,1fr);
  }
}


@media(max-width:991px){

  .navbar{
    padding:18px 0;
  }

  .navbar-nav{
    gap:18px;
    padding-top:24px;
  }

  .quote-btn{
    width:100%;
    margin-top:14px;
  }

  .hero-slide{
    min-height:700px;
    background-position:center;
  }

  .hero-overlay{
    background:rgba(244,248,251,.92);
  }

  .hero-overlay::after{
    display:none;
  }

  .hero-content h1{
    font-size:46px;
  }

  .services-strip{
    grid-template-columns:repeat(2,1fr);
  }

  .services-content{
    margin-bottom:40px;
  }

  .services-content h2{
    font-size:42px;
  }

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


@media(max-width:767px){

  .hero-content h1{
    font-size:38px;
  }

  .hero-content p{
    font-size:16px;
  }

  .services-grid{
    grid-template-columns:1fr;
  }

  .services-strip{
    grid-template-columns:1fr;
  }

  .services-content h2{
    font-size:36px;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero-btn-primary,
  .hero-btn-secondary{
    width:100%;
  }
}
/* =====================================================
   DROPDOWN MENU
===================================================== */

.custom-dropdown{

  border:none;

  border-radius:18px;

  padding:14px;

  min-width:320px;

  box-shadow:
    0 25px 60px rgba(17,24,51,.08);

  background:#fff;

  margin-top:20px;
}


.dropdown-item{

  border-radius:12px;

  padding:14px 18px;

  font-family:'Roboto', sans-serif;

  font-size:15px;

  font-weight:500;

  color:var(--brand-dark);

  transition:0.3s;
}


.dropdown-item:hover{

  background:#f4f8fb;

  color:var(--brand-teal);
}


/* REMOVE DEFAULT ARROW ANIMATION */

.dropdown-toggle::after{

  margin-left:8px;

  vertical-align:middle;
}
/* =====================================================
   SERVICE COLOURS
===================================================== */

.service-web{
  --service-color:#1b2366;
}

.service-branding{
  --service-color:#6c63ff;
}

.service-data{
  --service-color:#00a6c7;
}

.service-bi{
  --service-color:#14b789;
}

.service-hosting{
  --service-color:#4b5d9a;
}

.service-ai{
  --service-color:#5b4bdb;
}
/* ==========================================
   QUOTE BANNER
========================================== */

.quote-banner-section {
    padding: 40px 0 30px;
}

.quote-banner {
    background: linear-gradient(135deg, #1b2366 0%, #1f7697 100%);
    border-radius: 28px;
    padding: 60px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}

.quote-banner::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 280px;
    height: 280px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}

.quote-banner-content h1 {
    color: #fff;
    font-size: 3rem;
    margin-bottom: 20px;
}

.quote-banner-content p {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.quote-features {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.quote-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    background: rgba(255,255,255,0.08);
    padding: 12px 18px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
}

.quote-feature i {
    color: #9fe6fb;
}

.quote-form-card {
    background: #fff;
    padding: 35px;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.quote-form-card h3 {
    color: #1b2366;
    margin-bottom: 25px;
}

.quote-form-card .form-control {
    border-radius: 14px;
    padding: 14px 18px;
    border: 1px solid #e5e7eb;
    box-shadow: none;
}

.quote-form-card .form-control:focus {
    border-color: #1f7697;
    box-shadow: 0 0 0 0.2rem rgba(31,118,151,0.15);
}

@media (max-width: 991px) {

    .quote-banner {
        padding: 35px 25px;
    }

    .quote-banner-content {
        text-align: center;
    }

    .quote-banner-content h1 {
        font-size: 2.2rem;
    }

    .quote-features {
        justify-content: center;
    }

    .quote-form-card {
        margin-top: 10px;
    }
}

@media (max-width: 576px) {

    .quote-banner-content h1 {
        font-size: 1.9rem;
    }

    .quote-feature {
        width: 100%;
        justify-content: center;
    }

    .quote-form-card {
        padding: 25px;
    }
}
/* ==========================================
   PORTFOLIO HIGHLIGHT
========================================== */

.portfolio-highlight {
    background: #fff;
    border-radius: 28px;
    padding: 45px;
    box-shadow: 0 15px 50px rgba(15,23,42,0.06);
    border: 1px solid rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}

.portfolio-highlight::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: rgba(159,230,251,0.12);
    border-radius: 50%;
    top: -120px;
    right: -100px;
}

.portfolio-highlight-content h2 {
    margin-bottom: 15px;
}

.portfolio-highlight-content p {
    margin-bottom: 0;
}

.portfolio-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 600;
    background: linear-gradient(
        135deg,
        #1b2366 0%,
        #6d3bb8 100%
    );
    color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 12px 30px rgba(109,59,184,0.25);
}

.portfolio-btn:hover {
    transform: translateY(-4px);
    color: #fff;
}

@media (max-width: 991px) {

    .portfolio-highlight {
        padding: 35px 25px;
        text-align: center;
    }

    .portfolio-btn {
        margin-top: 10px;
    }
}
/* ==========================================
   BRANDING PAGE CUSTOM COLOURS
========================================== */

.branding-page .branding-banner {
    background:
    radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(135deg, #1b2366 0%, #5b2ca0 42%, #c026d3 100%) !important;
}

.branding-page .quote-feature i {
    color: #f5d0fe;
}

.branding-page .service-card {
    border: 1px solid rgba(192,38,211,0.08);
    transition: all 0.35s ease;
}

.branding-page .service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(192,38,211,0.22);
    box-shadow: 0 18px 45px rgba(91,44,160,0.14);
}

.branding-page .service-card i {
    background: linear-gradient(135deg, #5b2ca0, #c026d3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ==========================================
   BRANDING PROJECT SHOWCASE BUTTON
========================================== */

.branding-portfolio-card {
    background:
    linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
    border: 1px solid rgba(192,38,211,0.10);
}

.branding-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 32px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #5b2ca0 0%, #c026d3 100%);
    box-shadow: 0 14px 35px rgba(192,38,211,0.30);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.branding-project-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
    opacity: 0;
    transition: all 0.35s ease;
}

.branding-project-btn span,
.branding-project-btn i {
    position: relative;
    z-index: 2;
}

.branding-project-btn:hover {
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 22px 45px rgba(192,38,211,0.40);
}

.branding-project-btn:hover::before {
    opacity: 1;
}

.branding-project-btn i {
    transition: all 0.35s ease;
}

.branding-project-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 991px) {
    .branding-project-btn {
        width: 100%;
        margin-top: 10px;
    }
}
/* ==========================================
   DATA SCIENCE PAGE
========================================== */

.data-science-page .data-science-banner {

    background:
    radial-gradient(circle at top right,
    rgba(255,255,255,0.15),
    transparent 30%),

    linear-gradient(
        135deg,
        #063b44 0%,
        #0f766e 45%,
        #14b8a6 100%
    ) !important;
}

.data-science-page .quote-feature i {
    color: #ccfbf1;
}

.data-science-page .service-card {
    border: 1px solid rgba(20,184,166,0.08);
    transition: all 0.35s ease;
}

.data-science-page .service-card:hover {

    transform: translateY(-8px);

    border-color: rgba(20,184,166,0.20);

    box-shadow:
    0 18px 45px rgba(15,118,110,0.14);
}

.data-science-page .service-card i {

    background:
    linear-gradient(
        135deg,
        #0f766e,
        #14b8a6
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================
   DATA SCIENCE PROJECT CARD
========================================== */

.data-science-portfolio-card {

    background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f0fdfa 100%
    );

    border:
    1px solid rgba(20,184,166,0.10);
}

.data-science-project-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 18px 32px;

    border-radius: 18px;

    text-decoration: none;
    font-weight: 700;

    color: #fff;

    background:
    linear-gradient(
        135deg,
        #0f766e 0%,
        #14b8a6 100%
    );

    box-shadow:
    0 14px 35px rgba(20,184,166,0.25);

    transition: all 0.35s ease;

    position: relative;
    overflow: hidden;
}

.data-science-project-btn::before {

    content: "";

    position: absolute;
    inset: 0;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.22),
        rgba(255,255,255,0)
    );

    opacity: 0;

    transition: all 0.35s ease;
}

.data-science-project-btn span,
.data-science-project-btn i {

    position: relative;
    z-index: 2;
}

.data-science-project-btn:hover {

    color: #fff;

    transform: translateY(-5px);

    box-shadow:
    0 22px 45px rgba(20,184,166,0.35);
}

.data-science-project-btn:hover::before {
    opacity: 1;
}

.data-science-project-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 991px) {

    .data-science-project-btn {
        width: 100%;
        margin-top: 10px;
    }
}
/* ==========================================
   WEB DEVELOPMENT PAGE
========================================== */

.web-development-page .web-development-banner {
    background:
    radial-gradient(circle at top right, rgba(159,230,251,0.24), transparent 30%),
    linear-gradient(135deg, #1b2366 0%, #1f7697 48%, #38bdf8 100%) !important;
}

.web-development-page .quote-feature i {
    color: #9fe6fb;
}

.web-development-page .service-card {
    border: 1px solid rgba(31,118,151,0.08);
    transition: all 0.35s ease;
}

.web-development-page .service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(56,189,248,0.24);
    box-shadow: 0 18px 45px rgba(31,118,151,0.14);
}

.web-development-page .service-card i {
    background: linear-gradient(135deg, #1b2366, #1f7697, #38bdf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ==========================================
   WEB DEVELOPMENT PROJECT CARD
========================================== */

.web-development-portfolio-card {
    background: linear-gradient(135deg, #ffffff 0%, #f0fbff 100%);
    border: 1px solid rgba(56,189,248,0.12);
}

.web-development-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 32px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #1b2366 0%, #1f7697 55%, #38bdf8 100%);
    box-shadow: 0 14px 35px rgba(31,118,151,0.28);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.web-development-project-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
    opacity: 0;
    transition: all 0.35s ease;
}

.web-development-project-btn span,
.web-development-project-btn i {
    position: relative;
    z-index: 2;
}

.web-development-project-btn:hover {
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 22px 45px rgba(31,118,151,0.38);
}

.web-development-project-btn:hover::before {
    opacity: 1;
}

.web-development-project-btn i {
    transition: all 0.35s ease;
}

.web-development-project-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 991px) {
    .web-development-project-btn {
        width: 100%;
        margin-top: 10px;
    }
}
/* ==========================================
   BI DASHBOARDS PAGE
========================================== */

.bi-dashboards-page .bi-dashboards-banner {
    background:
    radial-gradient(circle at top right, rgba(199,210,254,0.24), transparent 30%),
    linear-gradient(135deg, #1b2366 0%, #3730a3 48%, #2563eb 100%) !important;
}

.bi-dashboards-page .quote-feature i {
    color: #c7d2fe;
}

.bi-dashboards-page .service-card {
    border: 1px solid rgba(37,99,235,0.08);
    transition: all 0.35s ease;
}

.bi-dashboards-page .service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(37,99,235,0.22);
    box-shadow: 0 18px 45px rgba(37,99,235,0.14);
}

.bi-dashboards-page .service-card i {
    background: linear-gradient(135deg, #1b2366, #3730a3, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ==========================================
   BI DASHBOARDS PROJECT CARD
========================================== */

.bi-dashboards-portfolio-card {
    background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%);
    border: 1px solid rgba(37,99,235,0.12);
}

.bi-dashboards-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 32px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #1b2366 0%, #3730a3 55%, #2563eb 100%);
    box-shadow: 0 14px 35px rgba(37,99,235,0.28);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.bi-dashboards-project-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
    opacity: 0;
    transition: all 0.35s ease;
}

.bi-dashboards-project-btn span,
.bi-dashboards-project-btn i {
    position: relative;
    z-index: 2;
}

.bi-dashboards-project-btn:hover {
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 22px 45px rgba(37,99,235,0.38);
}

.bi-dashboards-project-btn:hover::before {
    opacity: 1;
}

.bi-dashboards-project-btn i {
    transition: all 0.35s ease;
}

.bi-dashboards-project-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 991px) {
    .bi-dashboards-project-btn {
        width: 100%;
        margin-top: 10px;
    }
}

/* ==========================================
   AI CHATBOTS PAGE
========================================== */

.ai-chatbots-page .ai-chatbots-banner {
    background:
    radial-gradient(circle at top right, rgba(34,211,238,0.28), transparent 30%),
    linear-gradient(135deg, #0f172a 0%, #1b2366 45%, #06b6d4 100%) !important;
}

.ai-chatbots-page .quote-feature i {
    color: #a5f3fc;
}

.ai-chatbots-page .service-card {
    border: 1px solid rgba(6,182,212,0.08);
    transition: all 0.35s ease;
}

.ai-chatbots-page .service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(6,182,212,0.24);
    box-shadow: 0 18px 45px rgba(6,182,212,0.14);
}

.ai-chatbots-page .service-card i {
    background: linear-gradient(135deg, #1b2366, #06b6d4, #67e8f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ==========================================
   AI CHATBOTS PROJECT CARD
========================================== */

.ai-chatbots-portfolio-card {
    background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%);
    border: 1px solid rgba(6,182,212,0.12);
}

.ai-chatbots-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 32px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #0f172a 0%, #1b2366 50%, #06b6d4 100%);
    box-shadow: 0 14px 35px rgba(6,182,212,0.28);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.ai-chatbots-project-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
    opacity: 0;
    transition: all 0.35s ease;
}

.ai-chatbots-project-btn span,
.ai-chatbots-project-btn i {
    position: relative;
    z-index: 2;
}

.ai-chatbots-project-btn:hover {
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 22px 45px rgba(6,182,212,0.38);
}

.ai-chatbots-project-btn:hover::before {
    opacity: 1;
}

.ai-chatbots-project-btn i {
    transition: all 0.35s ease;
}

.ai-chatbots-project-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 991px) {
    .ai-chatbots-project-btn {
        width: 100%;
        margin-top: 10px;
    }
}
/* ==========================================
   HOSTING PAGE
========================================== */

.hosting-page .hosting-banner {

    background:
    radial-gradient(circle at top right,
    rgba(191,219,254,0.22),
    transparent 30%),

    linear-gradient(
        135deg,
        #0f172a 0%,
        #1e3a8a 45%,
        #3b82f6 100%
    ) !important;
}

.hosting-page .quote-feature i {
    color: #bfdbfe;
}

.hosting-page .service-card {
    border: 1px solid rgba(59,130,246,0.08);
    transition: all 0.35s ease;
}

.hosting-page .service-card:hover {

    transform: translateY(-8px);

    border-color: rgba(59,130,246,0.22);

    box-shadow:
    0 18px 45px rgba(59,130,246,0.14);
}

.hosting-page .service-card i {

    background:
    linear-gradient(
        135deg,
        #1e3a8a,
        #3b82f6
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ==========================================
   HOSTING PROJECT CARD
========================================== */

.hosting-portfolio-card {

    background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #eff6ff 100%
    );

    border:
    1px solid rgba(59,130,246,0.12);
}

.hosting-project-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    padding: 18px 32px;

    border-radius: 18px;

    text-decoration: none;
    font-weight: 700;

    color: #fff;

    background:
    linear-gradient(
        135deg,
        #1e3a8a 0%,
        #3b82f6 100%
    );

    box-shadow:
    0 14px 35px rgba(59,130,246,0.25);

    transition: all 0.35s ease;

    position: relative;
    overflow: hidden;
}

.hosting-project-btn::before {

    content: "";

    position: absolute;
    inset: 0;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.22),
        rgba(255,255,255,0)
    );

    opacity: 0;

    transition: all 0.35s ease;
}

.hosting-project-btn span,
.hosting-project-btn i {

    position: relative;
    z-index: 2;
}

.hosting-project-btn:hover {

    color: #fff;

    transform: translateY(-5px);

    box-shadow:
    0 22px 45px rgba(59,130,246,0.35);
}

.hosting-project-btn:hover::before {
    opacity: 1;
}

.hosting-project-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 991px) {

    .hosting-project-btn {
        width: 100%;
        margin-top: 10px;
    }
}
/* ==========================================
   DIGITAL MARKETING PAGE
========================================== */

.digital-marketing-page .digital-marketing-banner {
    background:
    radial-gradient(circle at top right, rgba(254,215,170,0.26), transparent 30%),
    linear-gradient(135deg, #7c2d12 0%, #ea580c 45%, #ec4899 100%) !important;
}

.digital-marketing-page .quote-feature i {
    color: #fed7aa;
}

.digital-marketing-page .service-card {
    border: 1px solid rgba(234,88,12,0.08);
    transition: all 0.35s ease;
}

.digital-marketing-page .service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(236,72,153,0.22);
    box-shadow: 0 18px 45px rgba(234,88,12,0.14);
}

.digital-marketing-page .service-card i {
    background: linear-gradient(135deg, #ea580c, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ==========================================
   DIGITAL MARKETING PROJECT CARD
========================================== */

.digital-marketing-portfolio-card {
    background: linear-gradient(135deg, #ffffff 0%, #fff7ed 55%, #fdf2f8 100%);
    border: 1px solid rgba(236,72,153,0.12);
}

.digital-marketing-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 32px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #ea580c 0%, #ec4899 100%);
    box-shadow: 0 14px 35px rgba(236,72,153,0.28);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.digital-marketing-project-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
    opacity: 0;
    transition: all 0.35s ease;
}

.digital-marketing-project-btn span,
.digital-marketing-project-btn i {
    position: relative;
    z-index: 2;
}

.digital-marketing-project-btn:hover {
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 22px 45px rgba(236,72,153,0.38);
}

.digital-marketing-project-btn:hover::before {
    opacity: 1;
}

.digital-marketing-project-btn i {
    transition: all 0.35s ease;
}

.digital-marketing-project-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 991px) {
    .digital-marketing-project-btn {
        width: 100%;
        margin-top: 10px;
    }
}
/* ==========================================
   SEO PAGE
========================================== */

.seo-page .seo-banner {
    background:
    radial-gradient(circle at top right, rgba(187,247,208,0.26), transparent 30%),
    linear-gradient(135deg, #14532d 0%, #16a34a 45%, #22c55e 100%) !important;
}

.seo-page .quote-feature i {
    color: #bbf7d0;
}

.seo-page .service-card {
    border: 1px solid rgba(34,197,94,0.08);
    transition: all 0.35s ease;
}

.seo-page .service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(34,197,94,0.22);
    box-shadow: 0 18px 45px rgba(34,197,94,0.14);
}

.seo-page .service-card i {
    background: linear-gradient(135deg, #14532d, #16a34a, #22c55e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ==========================================
   SEO PROJECT CARD
========================================== */

.seo-portfolio-card {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    border: 1px solid rgba(34,197,94,0.12);
}

.seo-project-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 32px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #14532d 0%, #16a34a 55%, #22c55e 100%);
    box-shadow: 0 14px 35px rgba(34,197,94,0.28);
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

.seo-project-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0));
    opacity: 0;
    transition: all 0.35s ease;
}

.seo-project-btn span,
.seo-project-btn i {
    position: relative;
    z-index: 2;
}

.seo-project-btn:hover {
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 22px 45px rgba(34,197,94,0.38);
}

.seo-project-btn:hover::before {
    opacity: 1;
}

.seo-project-btn i {
    transition: all 0.35s ease;
}

.seo-project-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 991px) {
    .seo-project-btn {
        width: 100%;
        margin-top: 10px;
    }
}