*{
    font-family:Arial;
}

.logo{
  width:15%;
  height:15%;
  padding-left:10%;

}

header{
  background-color: #fdfcfc; /* Set header background color */
  padding: 10px; /* Add some padding to the header */
}

.header-logo{
position:relative;
}

.header-links{
position:absolute;
top:35%;
left:55%;
}

.dropdown {
  position:relative;
  left:70%;
  margin-top:-7%;
  margin-bottom: -10%;
  display: none;
}

@media screen and (max-width: 1099px) {
  .header-links {
      display: none; /* Initially hide the menu items on smaller screens */
      flex-direction: column;
      position: absolute;
      top: 60px; /* Adjust as needed to position the menu below the header */
      left: 20px; /* Adjust as needed to position the menu */
      color:#000;
      background-color: #fff;
      padding: 10px;
      border: 1px solid #ccc;
    }
  
        /* Style for the dropdown container */
        .dropdown {
          position: relative;
          display: inline-block;
      }

      .logo-menu{
        position:absolute;
      }

      /* Style for the dropdown button */
      .dropdown-button {
          background-color:#ed2d26;
          border-radius:5px;
          color: #fff;
          font-weight:bold;
          padding: 7px 16px;
          border: none;
          cursor: pointer;
          
      }

      /* Style for the dropdown content (hidden by default) */
      .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f9f9f9;
          min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
      }

      /* Style for dropdown content links */
      .dropdown-content a {
          color: #333;
          padding: 12px 16px;
          text-decoration: none;
          display: block;
      }

      /* Change link color on hover */
      .dropdown-content a:hover {
          background-color: #ddd;
      }

      /* Show the dropdown content when the dropdown button is hovered over */
      .dropdown:hover .dropdown-content {
          display: block;
      }
    


  }







nav ul {
    list-style: none; /* Remove default bullet points for list items */
    margin: 0;
    padding: 0;
    text-align: right; /* Center the navigation links */
}

nav li {
    display: inline-block; /* Display list items horizontally */
    margin: 0 10px; /* Add some spacing between list items */
}

nav li a {
    color: #ed2d26; /* Set link text color */
    text-decoration: none; /* Remove underline from links */
    padding: 5px 10px; /* Add padding to the links for better click area */
    font-weight:Bold;
}

nav li a:hover {
    background-color: #b9b9b9; /* Change the background color on hover */
    color:black;
}

/* styles.css */
body {
    margin: 0; /* Reset default margin */
    padding-top: 70px; /* Ensure content doesn't get hidden behind the header */
}

.floating-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fcfbfb;
    color: #fff;
    padding: 20px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 999; /* Ensure the header appears above other elements */
}

.floating-header h1 {
    margin: 0;
}



h1{
    color:white;
    font-size: 50px;
    font-weight:700;
    text-align: left;
   padding-left:45%;
}

h2{
    font-size:30px;
    font-weight:bolder
}

h3{
    font-size:17px;
}

p{
    font-size:15px;
}

p.landing{
    color:white;
    font-size: 20px;
    font-weight:400;
    text-align: left;
    padding-left:45%;
    padding-right:15%;
}

.landing-page{
    position: relative;
    padding:5%;
    background-image: linear-gradient(45deg,red, #801b1b, red);
    height:400px;
    background-size:300%;
    animation: landing-animation 4s infinite alternate;
}

@keyframes landing-animation {
  0%{
    background-position: left;
  }
  100%{
    background-position: right;
  }
}

.landing-page img {
    position: absolute;
    top: 50%;
    left: 30%;
    height:500px;
    transform: translate(-50%, -50%);
    /* Customize the positioning of the image */
    z-index: 1; /* Place the image on top of the gradient background */
    
  }

  @media screen and (max-width:890px) {
   .header-logo img{
    width:30%;
    height:30%;
    padding-left:5%;
   }

    h1{
      color:white;
    font-size: 30px;
    font-weight:700;
    text-align: center;
   padding-left:20%;
   padding-right:20%;
    }

    h2{
      font-size:17px;
      font-weight:bolder
  }
  
  h3{
      font-size:9px;
  }
  
  p{
      font-size:8px;
  }

  .landing-page img{
    display:none;
  }

  p.landing{
    text-align:center;
    padding:2% 15% 2% 15%;
  }

  .logo{
    width:20%;
    height:20%;
    padding-left:5%;
  }



  }

/* Hover effect */
.my-button:hover {
    background-color: #801b1b; /* Change background color on hover */
    color:white;
}

.container {
    position: relative; /* Required for positioning the button */
  }
  
  .my-button {
    position: absolute;
    top: 50%; /* Adjust the top position as needed */
    left: 52%; /* Position the button in the center horizontally */
    transform: translateX(-50%); /* Center the button horizontally using transform */
    /* Add additional styles for the button */
    background-color: white; /* Change background color */
    border-radius: 5px; /* Add rounded corners */
    transition: background-color 0.3s ease-in-out; /* Add a smooth transition */
    color:grey;
    font-size:15px;
    font-weight:bold;
    height:40px;
    width:150px;
    border:none;
    cursor:pointer;
  }
  
  .button2{
    position: absolute;
    top: 45%; /* Adjust the top position as needed */
    left: 50%; /* Position the button in the center horizontally */
    transform: translateX(-50%); /* Center the button horizontally using transform */
    /* Add additional styles for the button */
    background-color: #ed2d26; /* Change background color */
    border-radius: 5px; /* Add rounded corners */
    transition: background-color 0.3s ease-in-out; /* Add a smooth transition */
    color:white;
    font-size:15px;
    font-weight:bold;
    height:40px;
    width:150px;
    border:none;
    cursor:pointer;
  }

  .button2:hover {
    background-color: #801b1b; /* Change background color on hover */
    color:white;
}



.grey-background{
    background-color: #ddd5d6; /* Change the background color to your desired color */
    color: #000; /* Set the text color (optional, use a contrasting color for better readability) */
    padding: 15px; /* Add some padding to the text to separate it from the background */
    border-top: 50px solid white;
    border-bottom:50px solid white;
    padding-bottom:10%;
}

.centered-text{
    text-align:center;
}

.middle{
    padding-right:10%;
    padding-left:10%;
    padding-bottom:3%;
}

p.middlee{
    padding-left:10%;
    padding-right:10%;
}

.two-column-list {
    column-count: 2; /* Set the number of columns */
    column-gap: 20px; /* Add some space between columns (optional) */
}

/* Optional styling for list items */
.two-column-list li {
    list-style: none; /* Remove default bullet points */
    margin-bottom: 10px; /* Add some vertical space between list items */
}

.four-column-list{
    column-count: 4; /* Set the number of columns */
    column-gap: 20px; /* Add some space between columns (optional) */
}

.four-column-list li {
    list-style: none; /* Remove default bullet points */
    margin-bottom: 10px; /* Add some vertical space between list items */
}

.left{
    padding-left:20%;
}

.more-middle{
    padding-right:20%;
    padding-left:20%; 
    text-align:center;
}



.heading{
    position:relative;
}

.heading img{
    position:absolute;
    width:40px;
    height:40px;
   
}

.choose{
  padding-bottom:1%;
  
  padding-top:1%;
}

.custom-list {
    list-style-type: none;
    counter-reset: my-counter;
    padding-left: 30px;
    
  }
  
  .custom-list li {
    position: relative;
    counter-increment: my-counter;
    margin-bottom: 10px;
    padding-bottom:3%;
  }
  
  .custom-list li::before {
    content: counter(my-counter);
    position: absolute;
    left:-55px;
    top:3px;
    width: 50px;
    height: 50px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    color: transparent;
    
  }
  
  /* Custom list number images for each list item */
  .list1::before {
    background-image: url("Images/accounts receivable icon.png");
    /* Additional styles for the first list item number if needed */
    background-size:cover;
  }

  .list2::before {
    background-image: url("Images/Business term-loan.png");
    /* Additional styles for the first list item number if needed */
    background-size:cover;
  }

  .list3::before {
    background-image: url("Images/Short term.png");
    /* Additional styles for the first list item number if needed */
    background-size:cover;
  }

  .list4::before {
    background-image: url("Images/merchant-cash-advance.png");
    /* Additional styles for the first list item number if needed */
    background-size:cover;
  }

  .list5::before {
    background-image: url("Images/Equipment financing.png");
    /* Additional styles for the first list item number if needed */
    background-size:cover;
  }

  .list6::before {
    background-image: url("Images/Working capital .png");
    /* Additional styles for the first list item number if needed */
    background-size:cover;
  }

  .two-columns {
    display: flex;
    padding-left:12%;
    
  }

  .column2{
    padding-left:7%;
  }
  
  .column1, .column2 {
    /* Set the width of the columns (you can use percentage, pixels, or other units) */
    flex-basis: 80%;
    /* Add spacing between the columns (optional) */
    margin-right: 12%;
  }
  
  /* If you want the columns to be of equal width, you can use the flex property */
  /* Instead of using flex-basis, you can use flex: 1; for both columns */
  

  @media screen and (max-width:890px) {
    .middle{
      
      padding-left:12%;
      padding-bottom:3%;
      margin-left:5%;
      margin-right:-3%;
  }
  
  p.middlee{
      padding-left:12%;
      
  }

  .choose{
padding:1% 5% 1% 5%;
  }

  .column2{
    padding-left:30%;
  }

  .column1, .column2 {
display:block;

  }

}

video{
    width: 80%; /* Set the desired width, e.g., 100% to make it responsive */
  height: auto;
}

.red-border{
  background-color: rgba(215, 211, 211, 0.9);
  border-radius: 15px;
  padding:2% 5% 5% 5%;
  
}

.red-border1{
  background-color: rgba(215, 211, 211, 0.9);
  border-radius: 15px;
  padding:2% 5% 9% 5%;
  
}

.equal{
  text-align: justify;
}

.google-play{
    width:40%;
    height:40%;
    padding-bottom:5%;
}



  .button3:hover {
    background-color: #801b1b; /* Change background color on hover */
    color:white;
}

.waiting-list{
    width:50%;
    height:50%;
    padding-bottom:9%;
   
}


.container2{
    position:relative;
}

.item{
    position:absolute;
    top: 50%; /* Vertical alignment */
  left: 50%; /* Horizontal alignment */
}

.centered{
    text-align:center;
    padding-bottom:3%;
}

.off-right{
       padding-left:14%;  
       padding-bottom:3%;
}

.container5{
    display: flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
  gap:25px;
}

a {
    /* Remove default underline from links */
    text-decoration: none;
    /* Set link text color */
    color: #0066cc;
    /* Make the link behave like a block element, so the image takes the full width */
    display: block;
    /* Add some padding around the image */
    padding: 10px;
  }

  @media screen and (max-width: 890px) {
.container5{
  margin-top:-5%;
  gap:15px;
 
}
.more-middle{
  padding-right:10%;
  padding-left:10%; 
  text-align:center;
  
}

.red-border{
  background-color: rgba(215, 211, 211, 0.9);
  border-radius: 15px;
  padding:2% 5% 9% 5%;
  margin-right:4%;
}

.red-border1{
  background-color: rgba(215, 211, 211, 0.9);
  border-radius: 15px;
  padding:2% 5% 0% 5%;
  margin-left:5%;
}

.process{
  margin-top:6%;
  padding-bottom:3%;
}

    }
  
    
.list{
list-style-type:none;
padding-left:10%;
padding-right:10%;
padding-bottom:2%;
color:black;

}

.step{
  border:2px solid #ddd5d6;
  border-radius:15px;
  box-shadow: 0px 0px 5px rgba(245, 233, 233, 0.1);
  padding-left:7%;
  padding-right:7%;
  padding-bottom:2%;
  background-color: #ddd5d6;
  margin:3% 10% 1% 10%;
}



.white{
    color:white;
    padding-top:5%;
    padding-bottom:2%;
}

.process{
    background-image:url("Images/grey_hexagons_on_black_background.png");
    background-size:cover;
    margin-top:8%;
}

/* Hover effect */
.button10:hover {
    background-color: #801b1b; /* Change background color on hover */
    color:white;
}

.container10 {
    position: relative; /* Required for positioning the button */
    padding-bottom:10%;
  }
  
  .button10 {
    position: absolute;
    top: 20%; /* Adjust the top position as needed */
    left: 50%; /* Position the button in the center horizontally */
    transform: translateX(-50%); /* Center the button horizontally using transform */
    /* Add additional styles for the button */
    background-color: #ed2d26; /* Change background color */
    border-radius: 5px; /* Add rounded corners */
    transition: background-color 0.3s ease-in-out; /* Add a smooth transition */
    color:white;
    font-size:15px;
    font-weight:bold;
    height:40px;
    width:150px;
    border:none;
    cursor:pointer;
  }


  
  .next {
    right: 0;
  }
  
  
 .social-media{
  color:white;
  text-align:center;
  border: 3px solid #ed2d26; /* Border width, style, and color */
  background-color:#ed2d26;
  background-size:100px 75px;
  border-radius:10px;
  display:flex;
  justify-content: center; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
  margin:10% 15% 7% 15%;
 } 
 
 .social-media img{
  width:40px;
  height:40px;
 }

 .address{
  text-align:left;
  padding-left:23%;
  position:relative;
  color:#000;
  font-weight:400;
  margin-bottom: 10px;
 }

 .footer-logo{
  width:15%;
  height:15%;
  padding-left:23%;
}

.two-columns-footer{
  display:flex;
  padding-bottom:5%;
}



.legal{
  padding-left:20%;
}

.contacts{
  text-align:left;
  padding-left:21%;
  position:relative;
  color:#000;
  font-weight:400;
  margin-bottom: 10px;
}

.bold{
  font-weight:bold;
}



.customer-review{
  display:flex;
    justify-content: center; /* Horizontal alignment */
    gap:30px;
}
.review img{
  width:250px;
  height:250px;
  padding-top:5%;
}

@media screen and (max-width: 890px) {
  .customer-review{
    display:block;
      
  }
  .review img{
    width:150px;
    height:150px;
    padding-top:5%;
border-radius:10px;
  }

  .line1{
    display:flex;
    justify-content: center;
    gap:30px;
  }

  .line2{
    display:flex;
    justify-content: center;
    gap:30px;
    padding-top:3%;
  }
}

.section{
  display:grid;
  place-items:center;
  align-content:center;
  min-height:100vh
}

.animate{
  
  animation: fade-in 5s;
}

@keyframes fade-in{
  from{
    opacity:0.2;
    
  }

  to{
    opacity:1;
    
  }
}



@media screen and (max-width: 890px) {
.stay-updated{
  display:none;
}

.footer-logo{
  width:20%;
  height:20%;
  padding-left:20%;
}


.address{
  text-align:left;
  padding-left:20%;
  position:relative;
  color:#000;
  font-weight:400;
  margin-bottom: 10px;
 }

 .legal{
  padding-left:16%;
  padding-right:9%;
}

.contacts{
  text-align:left;
  padding-left:11%;
  position:relative;
  color:#000;
  font-weight:400;
  margin-bottom: 10px;
}

}