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


:root{
  --primary:#04b77d;
  --secondary:#ffffff;
  --text-dark:#1a1a1a;
}


/* =========================================
   Global Plus Jakarta Sans Font
   ========================================= */

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
label,
button,
input,
textarea,
select,
.form-control,
.form-select {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}


/* =========================================
   Common
   ========================================= */

.text-primary{
  color: var(--primary) !important;
}

.bg-primary{
  background-color: var(--primary) !important;
}

.container{
  max-width: 1240px !important;
}


/* =========================================
   Form CSS
   ========================================= */

.form-box{
  max-width: 420px;
}

.form-control,
.form-select{
  border: 1px solid #ddd;
}

.form-control:focus,
.form-select:focus{
  box-shadow: none;
  border-color: var(--primary);
}

.submit-btn{
  background: var(--primary);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  margin: 0 auto;
}

.submit-btn:hover{
  background: var(--primary);
  font-size: 1.05rem;
  letter-spacing: 0.5px;
  margin: 0 auto;
}


/* =========================================
   Stat Card CSS
   ========================================= */

.stat-card{
  background: rgba(255,255,255,0.95);
  color: #1a1a1a;
  border-radius: 14px;
  padding: 22px 15px 35px;
  position: relative;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-card h3{
  color: var(--primary);
}

.stat-card p{
  font-size: 0.9rem;
  color: #555;
}

.stat-bottom{
  height: 6px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 14px 14px;
}


/* =========================================
   Brand
   ========================================= */

.st-barnd{
  width: 80%;
}


/* =========================================
   Header
   ========================================= */

.top-header{
  background:#fff;
}


/* =========================================
   Hero Section
   ========================================= */

.hero-section{
  background:url('../img/hero.jpg') center/cover no-repeat;
  padding:80px 0;
}


/* =========================================
   Stat Box
   ========================================= */

.stat-box{
  background:#fff;
  color:#4b0082;
  padding:15px 20px;
  border-radius:10px;
  text-align:center;
}


/* =========================================
   Form Box
   ========================================= */

.form-box{
  background:#fff;
  padding:25px;
  border-radius:15px;
}


/* =========================================
   Contact Box
   ========================================= */

.st-contact-bx{
  max-width:100% !important;
  padding:0px !important;
}


/* =========================================
   Timeline
   ========================================= */

.timeline{
  position:relative;
  padding-left:30px;
}

.timeline::before{
  content:'';
  position:absolute;
  left:15px;
  top:0;
  width:3px;
  height:100%;
  background:#dbeafe;
}

.timeline-item{
  display:flex;
  align-items:start;
  margin-bottom:30px;
  position:relative;
}

.timeline-icon{
  width:35px;
  height:35px;
  color:#fff;
  font-weight:bold;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:15px;
}

.timeline-content h6{
  font-weight:600;
  margin-bottom:4px;
}

.timeline-content p{
  font-size:14px;
  color:#6c757d;
}


/* =========================================
   Warning
   ========================================= */

.bg-warning{
  background-color:#ff7300 !important;
  color:#fff !important;
  border:none !important;
}

.btn-warning{
  background-color:#ff7300 !important;
  color:#fff !important;
  border:none !important;
}

.text-warning{
  color:#ff7300 !important;
}


/* =========================================
   Blink CSS
   ========================================= */

@keyframes blink{
  0%, 50%, 100%{
    opacity:1;
  }

  25%, 75%{
    opacity:0.4;
  }
}

.icon-blink i{
  animation:blink 1.2s infinite;
}

.icon-blink:hover i{
  transform:scale(1.2);
  transition:transform 0.3s;
}


/* =========================================
   Logo
   ========================================= */

.logo-st{
  width:200px;
}


/* =========================================
   Mobile Floating Buttons
   ========================================= */

.mobile-floating-buttons{
  position:fixed;
  right:8px;
  bottom:65px;
  z-index:1050;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}


/* =========================================
   Apply Now
   ========================================= */

.floating-apply{
  width:44px;
  min-height:44px;
  background:#ffffff;
  color:#111111;
  border-radius:50%;
  text-decoration:none;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  box-shadow:0 3px 12px rgba(0,0,0,0.20);
  overflow:hidden;
}

.floating-apply .floating-icon{
  width:100%;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#1689ff;
}

.floating-apply .floating-label{
  display:none;
}


/* =========================================
   WhatsApp / Call
   ========================================= */

.floating-whatsapp,
.floating-call{
  width:44px;
  height:44px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  text-decoration:none;

  box-shadow:0 3px 10px rgba(0,0,0,0.20);
  font-size:21px;
}

.floating-whatsapp{
  background:#25d366;
}

.floating-call{
  background:#ff6b35;
}


.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #dbeafe !important ;
    background-color: var( --primary) !important;
}

.nav-pills .nav-link, .nav-pills .show>.nav-link {
    color: var(--text-dark) !important ;
}
/* =========================================
   Mobile CSS
   ========================================= */

@media only screen and (max-width:600px){

  .stcenter{
    text-align:center !important;
    width:100% !important;
  }

  .st-collapse{
    flex-basis:100%;
    flex-grow:1;
    align-items:center;
    position:absolute;
    z-index:9999999;
    background-color:#fff;
    width:100%;
    top:72px;
    left:0px;
    padding-bottom:30px;
  }

}