/* Reset some default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* Header and Navigation */
header {
    background: #fff;
    color: #333;
    border-top: 5px solid #D98F00; /* Orange top border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Drop shadow */
}

.logo img {
    max-height: 50px; /* Adjust the height as needed */
}

.nav-link {
    color: #333;
}

.nav-link:hover {
    color: #D98F00;
}

.nav-item .active {
    background-color: #D98F00 !important;
}

/* HERO SECTION */

.hero {
    height: 555px;
    background: url('images/hero_01.png') no-repeat center center/cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-align: center;
    width: 100%;
}

/* SECTIONS */
 .como-funciona {
    margin-top: 60px;
 }

 .bg-orange {
    background-color: #F78D1E;
 }

 #section3 {
    position: relative;
 }

 #section4 {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
 }

 .absolute-image {
    position: absolute;
    top: 0;
    right: 0;
 }

 .absolute-image-02 {
    position: absolute;
    bottom: 0;
    left: 0;
 }

 .container-fluid {
    margin: 0;
    padding: 0;
 }

 /* BUTTONS */

 .btn-primary {
    background-color: #F78D1E;
    border: none;
 }

 .btn-primary:hover {
    background-color: #cf630b;
 }

 /* FOOTER */

 footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px;
   color: #999999;
}

.footer-left, .footer-right {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.footer-right {
   align-items: flex-end;
}

.footer-logo {
   max-width: 100px;
   margin-bottom: 10px;
}

.social-media {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
}

.social-media p {
   margin: 0;
   margin-right: 10px;
}

.social-icon {
   width: 24px;
   height: 24px;
}

/* RESPONSIVE CODE */

@media (max-width: 600px) { 
   /* Styles for small devices */
   .nav-pills {
      display: none;
   }

   .absolute-image, .absolute-image-02 {
      display: none;
   }

   .hero {
      height: 210px;
      background: url('images/hero_01.png') no-repeat center center/cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-align: center;
      width: auto;
      background-size: cover;
  }
  
   
}