@import "../css/bootstrap.min.css";

/*=================================================
  Font Import
=================================================*/
@font-face {
  font-family: "Chivo";
  src: url("../fonts/Chivo-Medium.eot");
  src: url("Chivo-Medium.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Chivo-Medium.woff2") format("woff2"),
       url("../fonts/Chivo-Medium.woff") format("woff"),
       url("../fonts/Chivo-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chivo";
  src: url("../fonts/Chivo-Bold.eot");
  src: url("../fonts/Chivo-Bold.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Chivo-Bold.woff2") format("woff2"),
       url("../fonts/Chivo-Bold.woff") format("woff"),
       url("../fonts/Chivo-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chivo";
  src: url("../fonts/Chivo-Regular.eot");
  src: url("../fonts/Chivo-Regular.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Chivo-Regular.woff2") format("woff2"),
       url("../fonts/Chivo-Regular.woff") format("woff"),
       url("../fonts/Chivo-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chivo";
  src: url("../fonts/Chivo-SemiBold.eot");
  src: url("../fonts/Chivo-SemiBold.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Chivo-SemiBold.woff2") format("woff2"),
       url("../fonts/Chivo-SemiBold.woff") format("woff"),
       url("../fonts/Chivo-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/*=================================================
  Brand Colors
=================================================*/
:root {
  --primary: #FF8500;   /* Orange (pin) */
  --secondary: #FFA500; /* Yellow-Orange (helmet) */
  --accent: #FFD54F;    /* Light Yellow accent */
  --dark-blue: #0A2A47; /* Background/nav */
  --light-gray: #F4F4F4;
  --text-dark: #222;
  --text-light: #fff;
}

/*=================================================
  Reset
=================================================*/
ul, li { list-style: none; margin: 0; padding: 0; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: "Chivo"; }
img { max-width: 100%; vertical-align: middle; border: none; }
a { text-decoration: none; color: #000; transition: all 0.3s ease-in-out; }
a:hover { color: var(--primary); }

/*=================================================
  Utility Classes
=================================================*/
.f-12 { font-size: 0.75rem !important; }
.f-14 { font-size: 0.875rem !important; }
.f-16 { font-size: 1rem !important; }
.f-18 { font-size: 1.125rem !important; }
.f-20 { font-size: 1.25rem !important; }
.f-22 { font-size: 1.375rem !important; }
.f-24 { font-size: 1.5rem !important; }
.f-26 { font-size: 1.625rem !important; }
.f-28 { font-size: 1.75rem !important; }
.f-30 { font-size: 1.875rem !important; }
.f-32 { font-size: 2rem !important; }
.f-34 { font-size: 2.125rem !important; }

.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

/* Padding & Margin Utils */
.pt-80 { padding-top: 5rem; } .pb-80 { padding-bottom: 5rem; }
.mb-20 { margin-bottom: 1.25rem; } .mb-40 { margin-bottom: 2.5rem; }

/*=================================================
  Header
=================================================*/
.navbar {
  background: var(--dark-blue);
  transition: transform 0.2s;
  padding: 15px 0;
}
.navbar .nav-link {
  color: var(--text-light) !important;
}
.navbar .nav-link:hover {
  color: var(--secondary) !important;
}
.navbar .nav-link.active {
  color: var(--primary) !important;
  font-weight: 600;
}
.navbar .nav-btn .btn {
  border-radius: 6px;
  padding: 10px;
  min-width: 110px;
}
.navbar .nav-btn .btn-primary {
  background: var(--primary);
  border: none;
}
.navbar .nav-btn .btn-primary:hover {
  background: var(--secondary);
}
.navbar.sticky { position: fixed; width: 100%; z-index: 9999; }

/*=================================================
  Banner
=================================================*/
.banner {
  position: relative;
  background: linear-gradient(180deg, rgba(255,133,0,0.1) 0%, #fff 100%);
}
.banner .main-heading { font-weight: 700; }
.banner .main-heading span { color: var(--primary); }
.banner .banner-para { max-width: 720px; margin: 0 auto; }

/*=================================================
  App Screen
=================================================*/
.app-screen .mobile-screen { margin: 0 auto; max-width: 80%; }
.app-screen .bg-image { max-height: 320px; width: 100%; position: absolute; bottom: 0; }

/*=================================================
  About Us Section
=================================================*/
.about-us { background: var(--light-gray); }
.about-us .short-heading span {
  width: 44px; height: 2px; background-color: var(--primary);
}
.about-us h2 span { color: var(--primary); }
.about-us .key-feature span {
  background: var(--primary);
  border-radius: 6px;
  height: 48px; width: 48px;
  color: var(--text-light);
  font-size: 20px;
}
.about-us .key-feature p { font-size: 18px; }
.about-us .key-feature .feature-point {
  padding: 15px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/*=================================================
  Why Choose Us
=================================================*/
.why-choose-us {
  background: linear-gradient(180deg, #fff 0%, rgba(255,133,0,0.1) 100%);
}
.why-choose-us .why-choose-box {
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #FFD194;
}
.why-choose-us .why-choose-box span {
  height: 52px; width: 52px; border-radius: 6px;
  color: #fff; font-size: 20px; font-weight: 600;
}
.why-choose-us .why-choose-box span.green { background-color: var(--primary); }
.why-choose-us .why-choose-box span.red { background-color: var(--secondary); }
.why-choose-us .why-choose-box span.yellow { background-color: var(--accent); }
.why-choose-us h2 span { color: var(--primary); }

/*=================================================
  Footer
=================================================*/
.footer {
  background-color: var(--dark-blue);
  color: var(--text-light);
  font-weight: 300;
  padding: 10px 0;
}
.footer a { color: var(--text-light); padding: 0 10px; }
.footer a:hover { color: var(--accent); }

/*=================================================
  About Page Banner
=================================================*/
.about-banner { background-image: url(../images/mobile-bg.png); }
.about-banner h1 { color: #fff; }