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

 :root {
   --blue: #0057fc;
   --yellow: #dbd525;
   --dark: #252428;
   --gray: #dfdfdf;
 }

 .text-warning {
   --bs-text-opacity: 1;
   color: rgb(215 223 35) !important;
 }

 html,
 body {
   height: auto;
   min-height: auto;
 }

 .page-wrapper {
   padding-top: 120px !important;
   /* moved from body */
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   color: #fff;
   margin-bottom: 20px;
   font-weight: 700;
 }

 p {
   font-size: 16px;
   line-height: 1.6;
   margin-bottom: 20px;
   color: #fff;
 }

 body {
   background: var(--dark);
   color: #000;
   font-family: "Segoe UI", system-ui, sans-serif;
   overflow-x: hidden;
   overflow-y: auto;

 }

 /* NAV */
 .navbar {
   background: rgba(37, 36, 40, .8);
   backdrop-filter: blur(2px);
 }

 .nav-item .nav-link {
   font-size: 18px;
   font-weight: 600;
   padding: 14px 18px;
   transition: color .3s;
 }

 .hover-dropdown:hover>.dropdown-menu {
   display: block;
   margin-top: 0;
 }

 .drop .dropdown-item {
   background: var(--dark);
   color: #fff;
   font-weight: 500;
   padding: 10px 15px;
   transition: background .3s, color .3s;
 }

 .drop .dropdown-item:hover {
   background: var(--yellow);
   color: #000;
 }

 .dropdown-divider {
   border-top: 1px solid var(--gray);
 }

 .nav-item .nav-link:hover {
   color: var(--yellow) !important;
   display: inline-block;
 }

 .navbar-brand img {
   height: 60px;
 }

 .btn-yellow {
   background: var(--yellow);
   color: #000;
   font-weight: 600;
   border: none;
   padding: 10px 28px;
   border-radius: 4px;
   font-size: 18px;
   line-height: 1.5;
 }

 .btn-yellow:hover {
   background: #000;
   color: var(--yellow);
   transition: background .5s, color .6s;
 }

 .btn-white {
   background: #fff;
   color: #000;
   font-weight: 600;
   border: none;
   padding: 12px 28px;
   border-radius: 4px;
   font-size: 18px;
   line-height: 1.5;
 }

 .btn-white:hover {
   background: #000;
   color: var(--yellow);
   transition: background .5s, color .6s;
 }

 /* HERO */
 .hero {
   background:
     radial-gradient(circle at center, rgba(37, 36, 40, .06), transparent),
     url("../img/hs-02.png") center/cover no-repeat;
   display: flex;
   align-items: center;
   text-align: center;
   padding: 200px 200px;
 }

 .hero h1 {
   font-size: 56px;
   font-weight: 700;
   line-height: 1.25;
   z-index: 0;
 }

 .hero p {
   max-width: 820px;
   margin: 20px auto;
   color: var(--gray);
   font-size: 24px;
   line-height: 1.44;
   font-weight: 500;
   margin-top: 12px;
 }

 /* Spinning Animation for Hero Icons */
 @keyframes spin {
   from {
     transform: rotate(0deg);
   }

   to {
     transform: rotate(360deg);
   }
 }

 .spin-icon {
   animation: spin 3s linear infinite;
 }

 /* TICKER */
 /* .ticker {
   background: #000;
   font-size: 13px;
   padding: 8px 0;
   white-space: nowrap;
 } */

 .bottom-link {
   color: #000 !important;
   display: none !important;
 }

 /* Principles SECTION */
 .blue-section {
   background: var(--blue);
   padding: 90px 10px;
 }

 .principle-section span {
   font-size: 18px;
   font-weight: 600;
 }

 .principle-section h2 {
   font-size: 43px;
   font-weight: 600;
   line-height: 1.25;
 }

 .principle-section h2 .text-warning {
   color: var(--yellow);
   font-size: 43px;
   font-weight: 800;
   line-height: 1.25;
   text-transform: uppercase;
 }

 .feature {
   display: flex;
   gap: 14px;
   margin-bottom: 35px;
 }

 .feature i {
   font-size: 19px;
   background: #fff;
   color: var(--blue);
   border-radius: 50%;
   font-weight: 900;
   width: 40px;
   height: 40px;
   padding: 15px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .feature div h3 {
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 6px;
 }

 .feature div p {
   font-size: 16px;
   font-weight: 500;
   line-height: 1.5;
 }

 /* PHONE MOCKUP */
 .phone-mockup {
   max-width: 420px;
   margin: auto;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
   border-radius: 24px;
   overflow: hidden;
 }

 /* SECTION TITLE */
 .section {
   padding: 150px 0;
 }

 .tagline {
   color: #f5e000;
   letter-spacing: 2px;
   font-size: 14px;
   font-weight: 600;
 }

 .headline {
   font-size: 42px;
   font-weight: 700;
 }

 .feature-icon i {
   width: 48px;
   height: 48px;
   border: 2px solid #0d6efd;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #0d6efd;
   font-size: 20px;
   flex-shrink: 0;
   background: transparent !important;
 }

 .feature h5 {
   color: #f5e000;
   font-weight: 600;
 }

 .yellow-circle {
   position: absolute;
   width: 400px;
   height: 400px;
   background: #f5e000;
   border-radius: 50%;
   z-index: auto;
   left: 50%;
   transform: translateX(-50%);
   top: 50px;
 }

 /* Discover section */
 .discovery {
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
   width: 100%;
 }

 .highlight {
   color: #d7df23;
 }

 .section-dark {
   background: linear-gradient(135deg, #1a1a1f, #0f0f12);
 }

 .stat-number {
   font-size: 45px;
   font-weight: 700;
   color: #fff;
 }

 .stat-label {
   color: #fff;
   font-size: 14px;
 }

 .vision-section {
   padding: 80px 0;
 }

 .vision p {
   font-size: 20px;
   line-height: 1.6;
   color: #fff;
 }

 .btn-yellow {
   background: #d7df23;
   color: #000;
   font-weight: 600;
   padding: 12px 28px;
   border-radius: 4px;
   border: none;
 }

 .btn-yellow:hover {
   background: #c5cd1f;
   color: #000;
 }

 .btn-white {
   background: #fff;
   color: #000;
   font-weight: 600;
   padding: 12px 28px;
   border-radius: 4px;
   border: none;
 }

 .image-cover {
   background-size: cover;
   background-position: center;
   min-height: 100%;
 }

 /* Table styles */
 /* .trade-section {
   background: radial-gradient(circle at top, #1a1a1a, #000);
 } */

 .trade-title {
   font-size: 2.5rem;
   font-weight: 700;
   color: #ffffff;
 }

 .trade-subtitle {
   color: #b5b5b5;
   max-width: 600px;
   margin: 0 auto;
   font-size: 18px;
 }

 .trade-header {
   color: #8f8f8f;
   font-size: 1.2rem;
   padding: 0.75rem 1.5rem;
   text-transform: uppercase;
   font-weight: 600;
 }

 .trade-row {
   background: #3b3b3e;
   border-radius: 8px;
   padding: 1.25rem 1.2rem;
   margin-bottom: 1rem;
 }

 .trade-row .text {
   color: #d0d0d0;
   font-size: 1.2rem;
   font-weight: 500;
 }

 .trade-row span {
   color: #a0a0a0;
   font-size: 1rem;
   font-weight: 600;
 }

 .status {
   color: #ffffff;
 }

 .status.applied {
   color: #cfcfcf;
 }


 .section-label {
   color: #dbd525;
   letter-spacing: 2px;
   font-size: 12px;
   margin-bottom: 10px;
 }

 .service-card {
   border: 1px solid #222;
   border-radius: 10px;
   padding: 30px;
   text-align: left;
   height: 100%;
   transition: all 0.3s ease;
 }

 .service-card:hover {
   border-color: #dbd525;
   transform: translateY(-5px);
 }

 .service-card i {
   font-size: 40px;
   color: #1e90ff;
   margin-bottom: 15px;
 }

 .service-title {
   color: #dbd525;
   font-weight: 600;
   font-size: 18px;
 }

 .highlight-box {
   background-color: #dbd525;
   color: #000;
   padding: 40px;
   height: 100%;
   border-radius: 10px;
 }

 ul {
   list-style: none;
   padding-left: 0;
 }

 ul li::before {
   content: "";
 }

 ul li {
   /* margin-bottom: 10px; */
   font-size: 16px;
   font-weight: 500;
 }

 .img-card {
   border-radius: 20px;
   width: 100%;
   height: auto;
 }

 .side-panel {
   background-color: #e9e6f0;
   height: 100%;
   min-height: 600px;
   border-radius: 4px;
 }

 /* call to action */

 .whyus-row {
   margin-top: 80px;
 }

 .whyus-row .feature {
   text-align: left !important;
   padding: 20px;
   display: block;
 }

 .whyus-row .feature .feature-icon {
   width: 40px;
   height: 40px;
   margin-bottom: 15px;
 }

 .whyus-row .feature h6 {
   font-weight: 600;
   margin-bottom: 10px;
 }

 .whyus-row.feature p {
   font-size: 0.85rem;
 }

 .steps-box {
   background: #1c1c21;
   border-radius: 10px;
   padding: 60px;
   margin-top: 100px;
 }

 .steps-box h3 {
   font-weight: 700;
   margin-bottom: 10px;
   font-size: 40px;
 }

 .steps-box span {
   color: #2f80ff;
   text-decoration: underline;
 }

 .step {
   display: flex;
   align-items: center;
   margin-top: 25px;
 }

 .step-number {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: #000;
   color: #2f80ff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   margin-right: 15px;
   font-size: 30px;
 }

 .step strong {
   color: #fff;
   font-size: 25px;
 }


 /*  SUMMARY SECTION  */
 .summary-section {
   background: #0d5efd;
   padding: 80px 0;
 }

 .summary-section h2 {
   font-weight: 700;
 }

 .summary-section p {
   /* max-width: 420px; */
   opacity: .9;
 }

 /*  TESTIMONIAL SECTION  */
 .testimonial-section {
   padding: 90px 0;
 }

 .testimonial-card {
   background: #1e1e1e;
   border-radius: 14px;
   padding: 30px;
   min-height: 260px;
   position: relative;
 }

 .testimonial-card p {
   font-size: 1rem;
   line-height: 1.6;
   color: #e0e0e0;
 }

 .testimonial-card small {
   color: #fff;
 }

 .testifyer-info p {
   font-weight: 600;
   color: #fff;
   font-size: 17px;
   margin-bottom: 1px;
 }

 .quote-icon {
   position: absolute;
   top: 18px;
   right: 20px;
   font-size: 48px;
   color: #0d5efd;
   line-height: 1;
   opacity: .9;
 }

 .carousel-indicators button {
   width: 10px !important;
   height: 10px !important;
   border-radius: 50% !important;
   background: #777;
   margin: 0 5px;
 }

 .carousel-indicators button.active {
   background: #fff;
   width: 10px !important;
   height: 10px !important;
 }

 /*  FOOTER  */
 footer {
   border-top: 1px solid #222;
   padding: 70px 0 30px;
 }

 footer h6 {
   margin-bottom: 14px;
   font-size: 20px;
 }

 footer a {
   color: #aaa;
   text-decoration: none;
   font-size: 16px;
 }

 footer a:hover {
   color: #fff;
 }

 footer ul li {
   margin-bottom: 10px;
   font-size: 18px !important;
 }

 footer ul li::before {
   content: none;
 }

 .footer-bottom {
   border-top: 1px solid #222;
   padding-top: 20px;
   margin-top: 40px;
   font-size: .85rem;
   color: #777;
 }


 /* FOOTER CHAT */
 .chat {
   position: fixed;
   bottom: 25px;
   right: 25px;
   background: var(--yellow);
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #000;
   font-size: 26px;
   box-shadow: 0 0 20px rgba(245, 212, 0, .7);
 }

 /* mobile responsive */

 @media (min-width: 300px) {


   .hero {
     padding: 200px 100px;
   }

 }

 /* ABOUT US PAGE */

 .about-hero {
   background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/banner-image-03.jpg') center/cover no-repeat;
   min-height: 600px;
   display: flex;
   align-items: center;
   text-align: center;
   padding: 100px 100px;
 }

 .about-counter {
   background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%);
   border-top: 3px solid #ffc107;
   border-bottom: 3px solid #ffc107;
 }

 .about-counter .box {
   background: rgba(255, 193, 7, 0.1);
 }





 /* faq */
 .accordion-header button {
   font-size: 20px;
   font-weight: 600;
   color: #fff !important;
   padding: 20px 15px;
 }

 .accordion-header button:focus {
   font-size: 20px;
   font-weight: 600;
   color: #fff !important;
   padding: 20px 15px;
 }

 .accordion-body {
   color: #fff !important;
   font-size: 18px;
 }



 /* contact us */
 .contact-hero {
   min-height: 420px;
   background: url(../img/banner-image-03.jpg) center/cover no-repeat;
   display: flex;
   align-items: center;
   text-align: center;
   padding-top: 180px !important;
   flex-direction: column;
   /* accounts for fixed navbar */
 }

 .contact-hero h1 {
   font-size: 56px;
   font-weight: 700;
 }

 .contact-hero p {
   font-size: 20px;
   color: #fff;
 }

 .contact-section {
   padding-bottom: 80px;
 }

 .contact-section .form-label {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 8px;
 }

 .contact-section .form-control {
   padding: 12px 16px;
   font-size: 16px;
   background-color: #1a1a1e;
   border: 1px solid #404044;
   color: #fff;
   border-radius: 6px;
   transition: border-color 0.3s;
 }

 .contact-section .form-control:focus {
   background-color: #1a1a1e;
   border-color: #dbd525;
   color: #fff;
   box-shadow: 0 0 0 0.2rem rgba(219, 213, 37, 0.25);
 }

 .contact-section .form-control::placeholder {
   color: #888;
 }

 .contact-section textarea.form-control {
   min-height: 150px;
   resize: vertical;
 }


 body::after {
   content: none !important;
   display: none !important;
 }