@charset "UTF-8";
/* CSS Document */

   
        /*Jave Script Scroll START*/
        /* Initial state of the sections */
section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* State of the sections when they are in view */
        section.in-view {
        opacity: 1;
        transform: translateY(0);
}
         /*Jave Script Scroll END*/

        .logo {
            margin-bottom: 2%;
            margin-left: 5%;
        }
     body {
         font-family: Arial, sans-serif;

        }
     html {
         scroll-behavior: smooth;
     }
        
        #intro {
         
            margin-left: 5%;
                
        }
        
        h2 {
            font-size: 1.7rem;
        }
        
        h1, h2, h3 {
            text-align: center;
            color: #008037;
        }
        .red-text {
            color: red;
        }
        
        
        .headline-bg-color {
            background: #008037;
           
    padding: 0.25px; /* Add padding around the text */
    /* Optional additional styles */
    margin: 0px; /* Add space around the element */
   
           
        }
        
        .headline-bg-color .title {
            color: white;
        }
        
        /*START NAV MENU*/

        header {
            display: flex;
            justify-content: space-between; /* Align items on opposite ends */
            align-items: center; /* Center items vertically */
            padding: 0 20px; /* Add some padding on both sides */
            
            background-color: white;/* Green color */
            text-align: center;
            margin-bottom: -20px;
        }

            .heading-title {
            font-size: 2.3rem;
}

            .h2-headline {
         font-size: 1.5rem;
}        

        header nav ul {
            list-style-type: none;
             display: flex;
            margin: 0;
            padding: 0;
        }

        header nav ul li {
            display: inline;
            margin-right: 20px;
        }

        header nav ul li a {
            color: #008037;
            text-decoration: none;
        }
        
        /*END NAV MENU*/
        
        
        
          .content-1, #about-us-content-3 {
            background: #008037;
        }
        
        .content-2 {
            margin-bottom: 5%;
            clear: both;
        }
        
      
        
       .h2-white-text {
            color: white;
            text-align: center;
        }
        
        .p-green-color {
             color: white;
             text-align: justify;
            
        }

        /* Additional styles for the new layout */
        /*musfiq shanta*/


        .content-container {
            display: flex;
            padding-top: 50px;
          
        /*justify-content: space-evenly;*/
             
           
        }
        .content-container .checklist {
            padding-left: 20vw;
        }
        .content-container .checklist li {
            font-weight: 600;
        }
        .content-container .cta-element{
                    padding-right: 10vw;
                }

/* Styles for the overlay background */



.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: green;*/
    z-index: 1;

}

/* Close button style */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: white;
    font-size: 20px;
}

iframe{
    width: 10px;
    min-width: 100%;
    height: 100vh;
    display: block;
    overflow: hidden;
    border: none;
}



.survey-container {
    width: 100%; /* Full width for larger screens */
    /*max-width: 800px; !* Maximum width of the form *!*/
    margin: 0 auto; /* Center the form */
}

@media screen and (max-width: 768px) {
    .survey-container {
        width: 100%; /* Full width on mobile devices */
        padding: 0 10px; /* Add some padding on smaller screens */
    }
}

@media screen and (min-width: 1024px) and (max-width: 1299px) {
    .content-container .checklist {
        padding-left: 3vw !important;
    }
}
@media screen and (min-width: 778px) and (max-width: 1023px) {
    .content-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;

    }
    .content-container .checklist {
        padding-left: 0vw !important;
    }
    .content-container .cta-element{
        padding-right: 0vw !important;
    }
    .checklist, .cta-element {
        width: 50% !important;
    }

}

@media screen and (min-width: 320px) and (max-width: 425px) {
    .content-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;

    }
    .content-container .checklist {
        padding-left: 0 !important;
        font-size: 16px;
    }
    .content-container .cta-element{
        padding-right: 0vw !important;
    }
    .checklist, .cta-element {
        width: 310px !important;
    }
    #intro {
        padding: 0 !important;
    }

    .pre-qualified-btn {
        width: auto;
        padding: 10px 10px !important;
        font-size: 18px !important;
    }
    h2 {
        font-size: 24px !important;
    }
}

/*musfiq shanta*/

/*Jotform At Top START*/

/*Jotform At Top END*/


        .checklist, .cta-element {
         
            width: 45%; /* Slightly reduced from 48% */
            /*margin: 0 0%;  Adjust the margin for better spacing */
           
}
        
     

        /* Styles for the checklist */
        .checklist {
            list-style: none;
            padding-left: 0;
            font-size: 1.2rem;
        }

        .checklist li::before {
            content: '\2713'; /* Unicode character for checkmark */
            margin-right: 5px;
            margin-left: 30px;
            margin-bottom: 10px;
            color: #008037; /* Green color for the checkmark */
            background-color: white; /* White background */
            border-radius: 50%; /* Makes the background a circle */
            padding: 2px; /* Adjust the padding as needed */
            font-size: 20px; /* Adjust the font size as needed */
            display: inline-block;
            width: 20px; /* Fixed width for uniform size */
            text-align: center; /* Center the checkmark in the circle */
        }
        
        p {
            line-height: 22px;
            text-align: justify;
          
           
        }
        
        /*Images for the PreQualify & How Fast Can I Close - START */
        .centered-images {
            margin-top: -50px;
        float: left; /* Or 'left', depending on your layout */
        margin-left: 5px; /* Adjust spacing as needed */
        margin-right: 4%;
        width: 250px; /* Optional: Adjust the width as needed */
}
           /*Images for the PreQualify & How Fast Can I Close - END */

        
 /* Specific Paragraph Styling within Sections */
section .content-1 p,
section .content-2 p,
section #about-us-content-3 p {
    margin-left: 5%;
    margin-right: 5%;
    /* Adjust bottom margin as needed */
}

        
        .disclaimer-paragraph {
           
             margin-left: 5%;
            margin-right: 5%;
            
        }


        section {
            margin: 20px;
            padding: 20px;
            /*border: 1px solid #ddd;*/
        }
        
        /*Comparsion Column START*/
 .comparison-table {
            width: 100%;
            border-collapse: collapse;
        }
        .comparison-table th, .comparison-table td {
            border: 1px solid black;
            padding: 15px;
            text-align: center;
            font-size: 1rem;
        }
        .comparison-table th {
            background-color: #f2f2f2;
        }
        .column-header {
            font-weight: bold;
            color: black;
            
        }
        
        td {
            color: white;
        }

/*Comparison Column END*/
        
        
/*Testimonial Boxes START*/
#testimonials {
    display: flex;
    flex-wrap: wrap; /* Allows boxes to wrap to the next line on smaller screens */
    justify-content: space-around;
    padding: 20px;
    margin-top: -5%;
 
 
}

.testimonial-box {
    border: 1px solid #008037;
    padding: 10px;
    margin: 10px;
    flex-basis: 23%; /* Reduced the width of each box */
    text-align: center; /* Center the text inside the box */
    display: flex; /* Makes the content of the box flex */
    flex-direction: column; /* Stacks the content vertically */
    align-items: center; /* Centers the content horizontally */
    justify-content: space-between; /* Distributes space between and around content items */
      margin-left: auto;
    margin-right: auto;
     
}

.testimonial-box iframe {
    width: 100%; /* Set the width of the video to fill the box */
    height: auto; /* Adjust the height automatically */
    border: none; /* Removes the border from the iframe */
}

.testimonial-box footer {
    display: block;
    margin-top: 10px;
    font-style: italic;
    color: white;
}
    
.p-green-color-2 {
    color: #008037;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
}

/*Testimonial Boxes END*/
        
        
        

        footer {
            background-color: #008037; /* Green color */
            color: white;
            text-align: center;
            padding: 10px 0;
            /*position: fixed;*/
            bottom: 0;
            width: 100%;
        }
        
        .footer-heading {
            color: white;
        }
        
        .p-footer, .copyright, .footer-privacy, .footer-heading {
             font-size:0.85rem;
            text-align: center;
          
           
        }
        
        .p-footer{
            text-align: center;
        }
        
        .footer-privacy {
            color: white;
        }
        
        .footer-privacy a {
            color: white;
           text-decoration: none;
        }
        
        .footer-privacy a:hover {
            color: #E6AC0B;
        }
        
        .disclaimer-paragraph {
            font-size:0.85rem;
            text-align: justify;
            
            
           
          
        }
        
        .nmls a {
               text-decoration: none;
            color: white;
            
        }
        
        .nmls a:hover {
            color: #E6AC0B;
         
            
        }
        
        .back_to_top {
            color: white;
        }
       
/* For the 'Get Pre Qualified Now' Button START */
        
        
        .pre-qual-button {
            text-align: center;
            margin-top: 5%;
            clear: both;
        }
.pre-qualified-btn {
    background-color: #E6AC0B; /* Set the button background color to #E6AC0B */
   /* border: 2px solid #000;*/ /* Black border, adjust as needed */
    color: #fff; /* Set text color, adjust as needed */
    padding: 10px 20px; /* Add some padding */
    text-align: center; /* Center the text inside the button */
    cursor: pointer; /* Change cursor to indicate clickable */
    display: inline-block; /* Align the button correctly */
    font-size: 1.4rem; /* Adjust font size as needed */
    font-weight: bold;
    text-decoration: none; /* Remove underline from text */
    margin: 0 auto; /* Center the button */
    width: auto; /* Auto width based on content */
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* Add drop shadow */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add text shadow */
}

/* Hover effect for the button (optional) */
.pre-qualified-btn:hover {
    background-color: #d9a10b; /* Darker shade for hover effect */
}
        
        /* Hide mobile button on larger screens */
.pre-qual-button-mobile {
    display: none;
}


  /* For the Buttons - END */
        
        
        
        
        
     /* ========================================================== */
/* 						   MOBILE                       */
/* ========================================================== */
        
        /*Mobile NAV Menu START*/
       @media handheld, only screen and (max-width: 768px) {
           
     .headline-bg-color .title .heading-title {
        font-size: 1.5rem; /* Adjust size as needed */
    }

    .h2-class .h2-headline {
        font-size: 1.3rem; /* Adjust size as needed */
    }
           
    header nav ul {
        flex-direction: column;
        width: 100%;
    }

    header nav ul li {
        display: block;
        width: 100%;
        text-align: center;
    }

    header nav ul li a {
        display: block;
        padding: 10px; /* Add padding for touch targets */
    }
        }
        
        /*Mobile NAV Menu END*/
        
        
        /*Mx Width 768 For Everything Else*/
        
        @media screen and (max-width: 768px) {
  .menu-toggle {
    display: none; /* Hide checkbox */
}

.menu-icon {
    display: none; /* Hide menu icon initially */
    cursor: pointer;
}

         
            /*Section 1 - Mobile START*/
            
    .content-container {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align the items */
        
      
    }
            
            .checklist {
                font-size: 1.2rem;
                width: auto;
            }

    .checklist, .cta-element {
        width: 100%; /* Make each element take full width */
        margin-bottom: 20px; /* Add some space between items */
    }

    .cta-element img {
        width: 100%; /* Make the image responsive */
        height: auto; /* Maintain aspect ratio */
    }
            
             /* Hide CTA banner on smaller screens */
    .cta-banner {
        display: none;
    }

    /* Show mobile button on smaller screens START */
    .pre-qual-button-mobile {
        display: block;
        text-align: center; /* Center the button */
        width: 100%; /* Full width */
        margin-top: 10px; /* Space from the checklist */
    }

    .pre-qualified-btn {
        width: auto; /* Auto width based on content */
        padding: 10px 20px; /* Adjust padding as needed */
    }
              /* Show mobile button on smaller screens END */
            
              /*Section 1 - Mobile END*/
        }
            
            
            /*Wider Screen for Content Section*/
             @media screen and (max-width: 844px) {  
            
            /*Section Content 1 "Why Pre-Qualify"/"How Fast Can I Close?" MOBILE - START*/
        .content-1 .centered-images, .content-2 .centered-images {
        float: none; /* Remove float for mobile */
        display: block; /* Ensure it's a block element */
        margin: 0 auto; /* Center the image */
        width: 100%; /* Full width of the container */
        max-width: 275px; /* Maximum width of the image */
        margin-bottom: 20px; /* Space below the image */
    }

    .content-1 img, .content-2 img {
        width: 100%; /* Responsive image width */
        height: auto; /* Maintain aspect ratio */
    }

    .content-1 .pre-qual-button, .content-2 .pre-qual-button {
        text-align: center; /* Center the button */
        margin-top: 20px; /* Space above the button */
    }
             
            
            
        }
          /*Section Content 1 "Why Pre-Qualify"/Content 2 "How Fast Can I Close? MOBILE - END*/
            
           
            
            /*Testimonial Section START*/
         @media screen and (max-width: 768px) {   
            #testimonials {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

.testimonial-box {
    border: 1px solid #ddd;
    padding: 20px;
   /* margin: 10px;*/
    margin-top: -5%;
    flex-basis: 30%; /* Adjust the width of each box */
    text-align: center; /* Center the text inside the box */
}
            
         

    #testimonials {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align the items */
    }

    .testimonial-box {
        width: 100%; /* Make each box take full width */
        margin-bottom: 20px; /* Add some space between boxes */
          margin-left: auto;
    margin-right: auto;
    }

    .additional-reviews {
        text-align: center; /* Center align the content */
    }
            /*Testimonial Section END*/
}
            


/* iPhone in Landscape */
@media screen and (min-width: 568px) and (max-width: 667px) and (orientation: landscape) {
    .checklist li {
        font-size: 0.8em; /* Even smaller font size */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .content-1, .content-2 {
        display: flex;
        flex-direction: column; /* Stack elements on smaller screens */
        align-items: center;
    }

    .content-1 img, .content-2 img {
        max-width: 100%;
    }
}


        
        /*Mobile Responsive END*/