body{
    background-color: #fff;
     font-family: "Inter", sans-serif;
     font-size: 18px;
      margin: 0;
    padding: 0;
}


html {
  scroll-behavior: smooth;
}

/* Hide scrollbars on all devices/browsers but keep scrolling */
html, body {
  -ms-overflow-style: none; /* IE and old Edge */
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

::-webkit-scrollbar {
    display: none;
}


.header{
       width: 100%;
       height: 100px;
}



*{
    box-sizing: border-box;
}

.container{
       width: 100%;
       max-width: 1400px;
       margin: 0 auto;
}

h1,h2,h3,h4,h5{
    margin: 0;
    padding: 0;
        margin-block-start:0;
    margin-block-end: 0;
}

.flex{
    display: flex;
       flex-wrap: wrap;
}

img{
    display: block;
    max-width: 100%;
}


.blue_section{
       width: 100%;
       padding: 100px 0;
         background: #2a71ed;
}

 .header-badge {
            display: inline-block;
            background: #072736;
            color: #fff;
            padding: 10px 25px;
            border-radius: 80px;
            font-size: 16px;
            line-height: 20px;
            margin-bottom: 20px;
        }

        .main-heading {
            font-size: 80px;
            font-weight:bold;
            color: bold;
            color: #fff;
            line-height: 85px;
            margin-bottom: 30px;
           max-width: 990px;
         
        }

        .home-financing {
            font-style: italic;
             font-family: "Playfair Display", serif;
           letter-spacing: 0px;
        }

        p {
            font-size: 18px;
            line-height: 28px;
            margin: 0;
            margin-bottom: 10px;
            color: #000000;
           
          
        }

         p:last-child{
              margin-bottom: 0;
         }

        p.description{
              color: #fff;
                max-width: 980px;
                 margin-bottom: 50px;
        }

        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
        }

        .card {

            width: 100%;
        }

        .card-box{
               width: 100%;
               overflow: hidden;
               -webkit-border-radius: 20px;
               border-radius: 20px;
        }

        .card-box img{
               width: 100%;
               height: 355px;
               display: block;
               object-fit: cover;
        }

        .card-content{
            width: 100%;
              margin-top: auto;
              text-align: center;
              padding-top: 20px;
              color: #fff;
        }


.card-content p{
       color: #fff;
}
     

        .card-title {
            font-size: 23px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #fff;
        }

    


        @media (max-width: 768px) {
            .container {
                max-width: 90%;
            }
            
            .cards-container {
                grid-template-columns: 1fr;
            }
            
            .card {
                padding: 0;
            }
        }

        /* Animation */
        .card {
            animation: fadeInUp 0.6s ease forwards;
            opacity: 0;
            transform: translateY(30px);
        }

        .card:nth-child(1) { animation-delay: 0.1s; }
        .card:nth-child(2) { animation-delay: 0.2s; }
        .card:nth-child(3) { animation-delay: 0.3s; }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .main-heading, .description {
            animation: fadeIn 0.8s ease forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }


        .platform_section{
               width: 100%;
               overflow: hidden;
               padding: 100px 0 0;
        }

        .platform-title{
              text-align: center;
        }

        .main-heading-second{
             font-size: 80px;
    font-weight: bold;
    color: bold;
    color: #072736;
    line-height: 85px;
    margin-bottom: 30px;
    margin-top: 20px;
        }

        .platform-title p{
            font-size: 16px;
            line-height: 20px;
            color: #065084;
            font-weight: 600;
        }

         .main-heading-second .home-financing{
            color: #2A71ED;
         }

         .platform-img{
               width: max-content;
               margin: 0 auto;
         }

         /* AOS override to move 600px on fade-up */
         [data-aos="fade-up"] {
               transform: translate3d(0, 600px, 0);
         }
         [data-aos="fade-up"].aos-animate {
               transform: translate3d(0, 0, 0);
         }

         .contact_section{
               width: 100%;
               padding: 100px 0;
               background-image: url(../images/get-bg.jpg);
               background-repeat: no-repeat;
               background-size: cover;
               background-position: center;
         }


         .get_form_wrap{
               width: 100%;
               max-width: 660px;
         }

         .get_form_main{
                width: 100%;
                margin-top: 30px;
         }

         .form-feild{
               width: 100%;
         }

         .main_text_feild{
               width: 100%;
               background-color: transparent;
               height: 60px;
               line-height: 60px;
               font-size: 16px;
               color: rgba(7, 39, 54, 0.5);
               font-weight: 600;
               border: none;
               border-bottom: 1px solid rgba(7, 39, 54, 0.3);
         }

         .main_text_feild::placeholder{
             color: rgba(7, 39, 54, 0.5);
         }

           .main_text_feild:focus,
             .main_text_feild:active{
                  border: none;
               border-bottom: 1px solid rgba(7, 39, 54, 0.3);
               outline: none;
             }

         .get_form_main form{
               display: flex;
               flex-wrap: wrap;
               row-gap: 15px;
         }

         select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

         select.main_text_feild{
               background-image: url(../images/arrow.svg);
               background-repeat: no-repeat;
               background-position: center right;
         }

         /* File Upload Styles */
         .file-upload-container {
               position: relative;
         }

         .file-upload-label {
               cursor: pointer;
               display: block;
               transition: all 0.3s ease;
               background-repeat: no-repeat;
               background-position: right 15px center;
               background-size: 20px 20px;
               padding-right: 45px;
               box-sizing: border-box;
               position: relative;
         }

          .file-upload-label::after{
                  content: "Choose file";
    width: 105px;
    height: 26px;
    line-height: 26px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.5);
    color: rgba(7, 39, 54, 0.5);
    position: absolute;
    right: 0;
    top: 15px;
    text-align: center;
}
          

      

         .file-input {
               display: none !important;
         }


         /* Animation Initial States handled by GSAP to avoid conflicts */
         .banner_section_content {
               will-change: transform, opacity;
         }

         /* Banner Logo Animation States */
         .main-logo {
               transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
                   transform: translate(0px, 0) !important;
         }

         .main-logo.animate-to-top {
               position: absolute;
               top: 15px;
               z-index: 1001;
               width: 200px;
               margin: 0 auto;
                   transform: translate(0px, 0) !important;
     
         }

         .main-logo.animate-to-top img {
               width: 100%;
               height: auto;
               display: block;
         }

         .main-btn{
               width: 238px;
               line-height: 65px;
               height: 65px;
               background-color: #fff;
               display: inline-block;
               text-align: center;
               text-transform: uppercase;
               font-weight: 600;
               color: #003867;
               font-size: 14px;
               -webkit-border-radius: 66px;
               border-radius: 66px;
               border: none;
               cursor: pointer;
               margin-top: 40px;
               -webkit-transition: all 0.3s ease-in-out;
               transition: all 0.3s ease-in-out;
         }

              .main-btn:hover{
                background-color: #003867;
                color: #fff;
              }



               .contact-container {
            background: #fff;
            -webkit-border-radius: 40px;
            border-radius: 40px;
            padding: 10px;
            box-sizing: border-box;
            max-width: 595px;
            width: 100%;
            overflow: hidden;
            margin-left: auto;
        }

        .contact-header {
            background: #072736;
            color: white;
            text-align: center;
            padding: 30px 20px;
            min-height: 175px;
            box-sizing: border-box;
            position: relative;
              -webkit-border-radius: 30px;
            border-radius: 30px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .contact-header::before,
        .contact-header::after {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            background: white;
            border-radius: 50%;
            top: 18px;
        }

        .contact-header::before {
            left: 15px;
        }

        .contact-header::after {
            right: 15px;
        }

        .contact-header h2 {
            font-size: 21px;
            line-height: 28px;
            font-weight: 400;
            margin-bottom: 8px;
            opacity: 0.9;
        }

        .contact-header h3 {
            font-size: 27px;
            line-height: 30px;
            font-weight: 900;
            margin: 0;
        }

        .contact-content {
            padding: 30px 20px;
            position: relative;
        }

         .contact-content::before,
       .contact-content::after {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            background: white;
            border-radius: 50%;
        }

            .contact-content::before{
                  top: -28px;
                   left: 15px;
            }

              .contact-content::after{
                   top: -28px;
    right: 15px;
            }

        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            transition: transform 0.2s ease;
        }

        .contact-item:hover {
            transform: translateX(5px);
        }

        .contact-item:last-child {
            margin-bottom: 0;
        }

        .contact-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: #2A71ED;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 25px;
            flex-shrink: 0;
        }

        .contact-icon svg {
            width: 24px;
            height: 24px;
            fill: white;
        }

        .contact-text {
            color: #000000;
            font-size: 18px;
            font-weight: 400;
            flex: 1;
        }

        .contact-text a {
              font-size: 18px;
            font-weight: 400;
            color: #000000;
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .contact-text a:hover {
            color: #4299e1;
        }

      
   
        .contact-container {
            position: relative;
        }

        .contact_section .flex{
            align-items: flex-end;
        }

        .copyright{
               width: 100%;
               height: 80px;
               text-align: center;
               display: flex;
               align-items: center;
        }

        .copyright p{
              font-size: 16px;
              color: #000000;
        }


        .banner_section{
                width: 100%;
                min-height: 100vh;
    height: auto;
    overflow: hidden;
    background-image: url(../images/banner-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    box-sizing: border-box;
        }

        .main-logo{
               width: max-content;
              height: auto;
               margin: 0 auto;
               position: absolute;
               top: 15%;
               margin: 0 auto;
               z-index: 3;
               left: 0;
               right: 0;
        
        }

        .banner_section_content{
               padding-top: 0;
        }

        /* When logo is fixed, add extra offset so content doesn't overlap */
        body.logo-fixed .banner_section_content{
               padding-top: 70px;
        }

        .banner_section_content h2{
            font-size: 128px;
            line-height: 120px;
            font-weight: 900;
            color: #072736;
            text-align: center;
            text-transform: uppercase;
        }

        .banner_section_wrap{
               width: 100%;
              padding: 0 40px;
              box-sizing: border-box;
        }


        .banner_img{
            position: relative;
            z-index: 2;
            margin-top: -58px;
            text-align: center;
            display: flex;
            justify-content: center;
        }

        .banner-btn{
             width: 100%;
             height: 70px;
             line-height: 70px;
             -webkit-border-radius: 63px;
             border-radius: 63px;
             text-align: center;
             font-size: 20px;
             font-weight: 800;
             color: #003867;
             background-color: #fff;
             max-width: 850px;
             position: absolute;
             left: 0;
             right: 0;
             margin: 0 auto;
             top: 50%;
             text-decoration: none;
             border: 1px solid #000000;
             -webkit-transition: all 0.3s ease;
             transition: all 0.3s ease;
      
        }

            .banner-btn:hover{
                 background-color: #003867;
                color: #fff;
                border: 1px solid #003867;
            }

               .banner-btn::after{
                  content: "";
    width: 54px;
    height: 54px;
    background-color: #2A71ED;
    background-image: url(../images/btn-arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
    right: 8px;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    top: 8px;
               }