/* =========================
   MODERN UI SYSTEM
   Creative Martin Studios
   Bootstrap Override + Manrope
   ========================= */

/* =========================
   FONT SYSTEM
   ========================= */

/* Load Manrope */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

/* Override Bootstrap font variables */
:root{

  --bs-font-sans-serif: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);

  --primary:#2cdd9b;
  --primary-dark:#23b97f;
  --dark:#333;
  --light:#f8f9fa;
  --card-bg:#ffffff;
  --border:#e9ecef;
  --radius:14px;
  --transition:.25s ease;
}

/* Force font everywhere */
html,
body,
button,
input,
select,
textarea,
.form-control,
.form-select,
.btn,
.navbar,
.card,
.dropdown-menu{

  font-family: var(--bs-font-sans-serif) !important;
}

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

body{

  background:#f5f7f6;
  color:var(--dark);
  font-weight:400;
}

.container{

  max-width:1080px;
}

/* =========================
   TYPOGRAPHY
   ========================= */

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

  font-weight:700;
}

p{

  font-weight:400;
  line-height:1.6;
}

.hero-title{

  font-size:44px;
  font-weight:800;
}

.hero-title span{

  color:var(--primary);
}

/* =========================
   CARDS
   ========================= */

.card,
.portfolio-item-inner,
.blog-card,
.service-card{

  background:var(--card-bg);
  border:none;
  border-radius:var(--radius);

  box-shadow:
  0 4px 14px rgba(0,0,0,.05);

  transition:var(--transition);

  overflow:hidden;
}

.card:hover,
.portfolio-item-inner:hover,
.blog-card:hover,
.service-card:hover{

  transform:translateY(-6px);

  box-shadow:
  0 12px 30px rgba(0,0,0,.10);
}

.card-body{

  padding:20px;
}

/* =========================
   BUTTONS
   ========================= */

.btn{

  border-radius:8px;
  padding:10px 18px;
  font-weight:600;
  transition:var(--transition);
}

.btn-primary{

  background:var(--primary);
  border:none;
  color:#fff;
}

.btn-primary:hover{

  background:var(--primary-dark);
  transform:translateY(-2px);
}

.btn-outline-primary{

  border:2px solid var(--primary);
  color:var(--primary);
}

.btn-outline-primary:hover{

  background:var(--primary);
  color:#fff;
  border:2px solid var(--primary);
}

.btn-dark{

  background:var(--dark);
  border:none;
}

.btn-dark:hover{

  background:#111;
}

/* =========================
   BADGES
   ========================= */

.badge{

  border-radius:20px;
  padding:6px 12px;
  font-weight:600;
}

.badge-primary,
.bg-primary{

  background:var(--primary) !important;
}

/* =========================
   NAVBAR
   ========================= */

.navbar{

  box-shadow:
  0 2px 10px rgba(0,0,0,.05);
}

.navbar .nav-link{

  font-weight:600;
  color:var(--dark);
}

.navbar .nav-link:hover{

  color:var(--primary);
}

/* =========================
   LINKS
   ========================= */

a{

  color:var(--primary);
  text-decoration:none;
}

a:hover{

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

/* =========================
   FORMS
   ========================= */

.form-control,
.form-select{

  border-radius:8px;
  padding:10px;
}

.form-control:focus,
.form-select:focus{

  border-color:var(--primary);

  box-shadow:
  0 0 0 3px rgba(44,221,155,.15);
}

/* =========================
   PORTFOLIO
   ========================= */

.portfolio-item-inner img{

  border-radius:
  var(--radius)
  var(--radius)
  0 0;
}

.overlay{

  background:
  linear-gradient(
  transparent,
  rgba(0,0,0,.7));
}

/* =========================
   BLOG
   ========================= */

.blog-card-title{

  font-size:20px;
  font-weight:600;
}

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

.hero-section{

  padding-bottom:80px;
}

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

.footer{

  background:#212529;
}

.footer-title{

  font-weight:700;
  margin-bottom:12px;
}

.footer-links a{

  color:#aaa;
}

.footer-links a:hover{

  color:var(--primary);
}

/* =========================
   LOAD MORE
   ========================= */

#load-more-button{

  background:var(--primary);
  border:none;
  color:#fff;
}

#load-more-button:hover{

  background:var(--primary-dark);
}

/* =========================
   CALLBACK CARD
   ========================= */

.callback-card{

  padding:30px;
}

/* =========================
   IMAGES
   ========================= */

img{

  border-radius:10px;
}

/* =========================
   MOBILE
   ========================= */

@media(max-width:768px){

.hero-title{

font-size:32px;

}

}