/*
Theme Name: bwctheme
Author: the business website team
*/


:root{
  --ink: #14171F;
  --amber: #97CEFF;
  --fog: #F6F7F9;
  --border: #E7E9ED;
  --muted: #6B7280;
	--bs-secondary-color: #4B4B4B !important;
}
body{
  font-family: 'DM Sans thin', sans-serif;
  color: var(--ink);
  padding-top: 72px; /* space for fixed navbar */
}

h1, h2, h3, h4, h5, h6,
.navbar-brand{
  font-family: 'DM Sans Bold', sans-serif;
  font-weight: 600;
}
a{ text-decoration: none; }
nav#mainNavbar {
    box-shadow: 0 8px 25px rgb(0 0 0 / 37%);
}
/* -------- buttons -------- */
.btn-warning{
  background-color: var(--amber);
  border-color: var(--amber);
  color: var(--ink);
  font-weight: 600;
}
.btn-warning:hover{
  background-color: #DD9110;
  border-color: #DD9110;
  color: var(--ink);
}
span.iconannounce {
    border-radius: 15px;
    background: #ffffff;
    color: #000;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
}
.btn-outline-dark:hover{ color: #fff; }

/* =========================================================
   NAVBAR
   ========================================================= */
   /*
#mainNavbar{
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(20,23,31,0.02);
}
*/
div#nav-tab\ technologies button.nav-link {
    color: #fff;
    font-family: 'DM Sans Bold';
    font-size: 18px;
}
div#nav-tab\ technologies button.nav-link.active {
    color: #000;
}
h5.mb-3.lh-base.text-black {
    font-size: 2.5rem;
}
.navbar-brand{
  font-size: 1.2rem;
  color: var(--ink);
}
.brand-icon{ color: var(--amber); font-size: 0.85rem; margin-right: 6px; }
li.nav-item {border-right: 1px solid #b9b9b9;}
.navbar-nav .nav-link{
  color: var(--ink);
  padding: 0.35rem 1rem !important;
    letter-spacing: -0.7px;
    font-family: 'DM Sans Bold', sans-serif;
	
}
li.nav-item:last-child{ border-right: none; }

.navbar-nav .nav-link:hover{ color: #0d6efd; }
a.btn.btn-calls.btn-lg.rounded-pill.px-4 {
     font-family: 'DM Sans Bold';
    color: #000000;
    padding: 5px 15px;
    margin-top: 1.5rem;
    background: #fff;
}
.small.text-muted.mb-1.cats {
  font-size: 14px;
  padding-bottom: 5px;
}
#blog .card.work-card.border-0.h-100 {
  box-shadow: 0 14px 28px rgba(20,23,31,0.08);
}
.h6.titles {
  font-size: 18px;
  line-height: 25px;
  padding-bottom: 2px;
}
.topmesageepre12 {
    background: #000000cf;
    border-radius: 36px;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
    margin: 0 auto;
    padding: 10px 10px;
    width: 420px;
    font-size: 18px;
    font-family: 'DM Sans Bold';
	line-height: inherit;
    letter-spacing: -0.5px;
    color: #85ffea;
}
.trynow {font-family: 'DM Sans Bold', sans-serif;
    color: #fff;
    font-size: 18px;}

/* remove default caret spacing */
.dropdown-toggle::after{ vertical-align: 2px; }

/* -------- mega menu -------- */
.mega-dropdown{ position: static; }

.mega-menu{
  width: 100%;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: 0 16px 32px rgba(20,23,31,0.08);
  padding: 28px 0;
  margin-top: 0;
}

.mega-link{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px;
  border-radius: 8px;
  color: var(--ink);
  transition: background 0.15s ease;
}
.mega-link:hover{ background: var(--fog); }

.mega-icon{
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fog);
  border-radius: 8px;
  color: var(--amber);
}

.mega-title{
  display: block;
  font-size: 0.88rem;
  font-family: 'DM Sans', sans-serif;
      color: #000;

}
.mega-desc{
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

.mega-link-simple{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 500;
  transition: background 0.15s ease;
}
.mega-link-simple:hover{ background: var(--fog); }
.mega-link-simple i{ color: var(--amber); width: 18px; text-align: center; }

.mega-feature{
  background: var(--ink);
  color: #fff;
  border-radius: 10px;
  padding: 22px;
  height: 100%;
}
.mega-feature-label{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--amber);
  margin-bottom: 8px;
}
.mega-feature h6{ color: #fff; margin-bottom: 8px; }
.mega-feature-text{
  font-size: 0.85rem;
  color: #C6CAD3;
  margin-bottom: 16px;
}

@media (min-width: 992px){
  .mega-menu{ position: absolute; left: 0; right: 0; top: 100%; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  padding: 90px 0 70px;
  background: #fff;
  margin-top: -2px;
	 background: url(https://www.businesswebsitecreation.com/wp-content/uploads/2026/08/hero-background.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.eyebrow{
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.hero .topmessage {
font-size: clamp(3rem, 1vw, 8rem);
 display: block;
    margin-bottom: 18px;
    color: #000;
    letter-spacing: -0.8px;
    margin-top: 30px;

}
.tab-content.iconsnew p.text-muted {
    color: #fff !important;
    font-family: 'DM Sans Bold';
    margin-top: 8px;
}
.tab-content.iconsnew .card.service-card.h-50.border-0 img {
      height: 90px;
    padding: 10px;
}

a.contirnureadmig:hover svg, a.btn.btn-calls.btn-lg.rounded-pill.px-4:hover svg {
  transform: translateX(2px);
}
.hero-sub{
    color: #000;
    font-size: 1.38rem;
    font-family: 'DM Sans';
    letter-spacing: -0.3px;
}
.hero-stats strong{
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
}
.hero-stats span{
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
}

.hero-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(20,23,31,0.06);
}
.hero-card-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-weight: 500;
}
.hero-card-row:last-child{ border-bottom: none; }

/* =========================================================
   LOGO STRIP
   ========================================================= */
.logo-item img{
    width: 130px;
}

/* =========================================================
   SECTIONS (shared)
   ========================================================= */
.section{ padding: 88px 0; }
.section-head{ max-width: 620px; margin-bottom: 44px; }
.section-head h2{ font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 12px; }

/* -------- services -------- */
.service-card{ background: transparent; }
.service-icon{
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fog);
  border-radius: 10px;
  color: var(--amber);
  font-size: 1.1rem;
  margin-bottom: 18px;
}

/* -------- process -------- */
.process-step{
  padding: 22px;
  height: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.step-num{
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: #0068f9;
  margin-bottom: 10px;
}

/* -------- work -------- */
.work-thumb{ height: 180px; border-radius: 8px 8px 0 0; }
.work-thumb-1{ background: linear-gradient(135deg, #1B2340, #2C3A63); }
.work-thumb-2{ background: linear-gradient(135deg, #16302B, #234A41); }
.work-thumb-3{ background: linear-gradient(135deg, #2A1F33, #402D4D); }
.work-card{
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.work-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(20,23,31,0.08);
}

/* -------- testimonial -------- */
.testimonial-section{ background: var(--ink); color: #fff; }
.testimonial-quote{
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.4;
}
.testimonial-section footer{ color: #A9AEB8; }
.testimonial-section strong{ color: #fff; }

/* -------- cta / contact -------- */
button.btn.btn-warning.w-100.bt {
    background: #7d94ef;
    border: none;
    color: #fff;
}
.conhead {font-size: 2.1rem !important; color: #fff;}
.col-md-6.frm label.form-label, .col-12.frm label.form-label {
    color: #fff;
    font-family: 'DM Sans Bold', sans-serif;
}
.cta-section.homes {
    background: url('https://www.businesswebsitecreation.com/wp-content/uploads/2026/08/back-contact.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	padding: 65px 0px !important;
}
.cta-section .form-control{
  border-color: var(--border);
  padding: 0.65rem 0.9rem;
}
.cta-section .form-control:focus{
  border-color: var(--amber);
  box-shadow: 0 0 0 0.2rem rgba(245,166,35,0.18);
}
.form-success{ font-weight: 500; min-height: 20px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--ink);
  padding-top: 56px;
}
.footer-links li{ margin-bottom: 10px; }
.footer-links a{
  color: #A9AEB8;
  font-size: 0.92rem;
}
.footer-links a:hover{ color: #fff; }

h1.heading_1 {
    color: #fff;
    letter-spacing: -.02em;
    font-size: 3rem;
}

p.hero-subheaind {
    color: #ffffffe6;
    font-size: 1.135rem;
    font-weight: 500;
}
.breadcrumb-item, .breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before {
  color: #ffffffc4 !important;
  text-transform: uppercase;
  font-size: 0.8rem;
    font-family: "DM Sans Bold";
	z-index:9;
}
a.btn.talk.rounded-pill.px-4:hover {background: #ebebeb;}
#experiences .card.service-card.h-100.border-0 {    
	background: #000;
}
.gradient-text {
  background: linear-gradient(90deg, #00c4ff 0%, #6d00fd 50%, #01934a 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
p.text-muted.white {
    color: #8b8b8b !important;
}
section#services {
       background: linear-gradient(90deg, #00c4ff 0%, #051491 50%, #065656 100%);
}
p.eyebrownew {
    font-size: 14px;
    font-family: 'DM Sans Bold';
    color: #fff;
    text-transform: uppercase;
    border-bottom: 1px solid #2e2e2e;
    padding-bottom: 16px;
}
a.btn.talk.rounded-pill.px-4 {
        font-family: 'DM Sans Bold';
    color: #000000;
    padding: 5px 15px;
    margin-top: 1.5rem;
    background: #fff;
}
h3.h5.options {
    font-size: 38px;
    font-weight: 900;
    color: #082785;
}
.card.service-card.h-100 {
    grid-column-gap: .55rem;
    grid-row-gap: .55rem;
    border: 1px solid #e2e2de;
    border-radius: 6px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.55rem;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    display: flex;
    box-shadow: 0 4px 8px -2px #0000001a, 0 2px 4px -2px #0000000f;

  }

  .section-headcms{ max-width: 720px; margin-bottom: 30px; }

section#hiredeveloper .card-body h3.h5 {
    height: 60px;
	min-height: 60px;
}
  .services-dot {
    background-color: #0068f9;
    width: 6px;
    height: 6px;
    display: inline-flex;
    box-shadow: rgba(5, 150, 105, 0.2) 0px 0px 0px 2px;
    border-radius: 50%;
}
small.text-muteds { font-family: 'DM Sans Bold', sans-serif;
    font-size: 20px;
}
a.btn.btn-calls.btn-lg.rounded-pill.px-4:hover {    background: #e7e7e7;}
.services-now {
  color: #0068f9;
    letter-spacing: 0.05em;
    text-indent: 5px;
    text-transform: uppercase;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    margin-bottom: 10px;
}

#hiredeveloper .card.service-card.h-100.border-0 {
    background: #fff;
    border: 1px solid #e3e3e3 !important;
}
.wp-block-accordion-heading__toggle-title {
  font-size: 16px;
  font-weight: 100;
}

.accordion-button:not(.collapsed) {
    color: #000 !important;
    background-color: #ffffff !important
  }



element.style {
}
button:focus:not(:focus-visible) {
    outline: 0;
}
.accordion-button:focus {
    z-index: 3;
    outline: 0;
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}
[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}
.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}
[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
}
button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button {
    border-radius: 0;
}
*, ::after, ::before {
    box-sizing: border-box;
}
user agent stylesheet
button {
    appearance: auto;
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-variant-alternates: ;
    font-variant-position: ;
    font-variant-emoji: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: ;
    font-optical-sizing: ;
    font-size-adjust: ;
    font-kerning: ;
    font-feature-settings: ;
    font-variation-settings: ;
    font-language-override: ;
    text-rendering: auto;
    color: buttontext;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    cursor: default;
    box-sizing: border-box;
    background-color: buttonface;
    margin: 0em 0em 0em 0em;
    padding-block: 1px;
    padding-inline: 6px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonborder;
    border-image: none;
}
h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'DM Sans Bold', sans-serif;
    font-weight: 600;
}
@media (min-width: 1200px) {
    .h2, h2 {
        font-size: 2rem;
    }
}
.h2, h2 {
    font-size: calc(1.325rem + .9vw);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: #000; 
    letter-spacing: -0.5px !important;
}
user agent stylesheet
h2 {
    font-size: 1.5em;
    font-weight: bold;
}
.accordion-item {
    color: var(--bs-accordion-color);
    background-color: var(--bs-accordion-bg);
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion { --bs-accordion-btn-focus-box-shadow: none !important;  }
.mb-3.lh-base.text-white {
  font-size: 2.1rem;
}

.footerback {
 position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at 52% 45%, #00ffff 0%, #00e5ed 25%, transparent 55%),
    radial-gradient(circle at 85% 45%, #006cff 0%, #0051d9 30%, transparent 60%),
    radial-gradient(circle at 100% 0%, #061052 0%, #062d91 35%, transparent 65%),
    radial-gradient(ellipse at 0% 65%, #000812 0%, #001a2c 35%, transparent 65%),
    linear-gradient(120deg, #00101e, #008ed0 30%, #00f5f0 52%, #0074ee 75%, #061653);
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.topmesageepre12 {width: 350px; font-size: 14px; }
.trynow {font-size: 14px;}
	span.iconannounce { width: 25px; height: 25px;}
	.row.g-4.py-4 .col-md-6.col-lg-2 {float: left;display: inline-block;width: 31%;}
	.navbar-brand .img-fluid { width: 266px;}
	.hero .topmessage {font-size: clamp(2.5rem, 1vw, 8rem);}
	.hero-sub {font-size: 1.09rem; }
	.navbar-nav .dropdown-menu {  max-height: 300px;overflow-y: auto;overflow-x: hidden;}
}