html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin:0; font-family: "Roboto", sans-serif;
  height: 100%;
  padding: 0;
}
.site-container{width: 100%; height: auto;}
.theheader{height: 64px;}
.the-header-wrap{position: fixed; width: 100%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); left: 0; top: 0; 
  display: flex; align-items: center; z-index: 100;}
.header-content{max-width: 1170px; width: 100%; padding: 0 15px; height: 64px; display: flex;}
.hd-con2{align-items: center; justify-content: space-between;}
.header-logo{max-width: 180px; width: 100%; position: relative; font-size: 24px; font-weight: 600;}
.header-menu{display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
ul{margin: 0;}
.header-nav{list-style-type: none; display: flex; align-items: center; justify-content: center;}
.nav-item{margin: 0 15px; position: relative; cursor: pointer; display: flex; align-items: center;}
.nav-item-link{padding: 25px 0; font-size: 14px; display: flex; align-items: center; color:#12171C;
line-height: inherit; font-style: normal; font-weight: 500; letter-spacing: normal;}
a{text-decoration: none; outline: none !important; color:inherit;}
.tam{color:#12171C; font-family: 'avenir next','proxima nova', sans-serif;}
.green{color: #2e7a56; font-family: 'montserrat','futura',sans-serif;}
.textgr{color: #7AEBB5;}
.text-800{color: #2e7a56;}
.header-singup{display: flex; flex-direction: row; align-items: center; position: relative;}
.btn{height: 32px; padding: 0 12px; font-size: 14px; margin-right: 15px;}
.btn-log{border: 2px solid #2e7a56; background-color: transparent; color: #2e7a56;}
.btn-log:hover{color: #fff; background-color:#2e7a56; transition: all .3s ease-in-out;}
.button{display: inline-flex; justify-content: center; align-items: center;}
.btn-sign{background-color:#2e7a56; color: #fff; border: unset;}
.index-content{background-color: #f2f4f5; padding-bottom: 20px;}
.menu-bar {display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer;
  color: #12171C; padding: 0.5rem; z-index: 1001;}
/* New CSS for the slideshow */
.slideshow-container {max-width: 100%; position: relative; margin: auto; overflow: hidden; border-radius:0;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
 /* This creates the dark shadow overlay */
.slideshow-container::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
             background: rgba(0, 0, 0, 0.6);  z-index: 1; }
.mySlides {display: none;}
.mySlides img {width: 100%; height: 460px; display: block;}
 .slideshow-text{line-height: 32px; color: #fff; padding:0; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); text-align: center; font-family: Montserrat, sans-serif;  z-index: 2; /* Ensures the text is on top of the shadow */}
.slideshow-text h1{font-size: 30px; font-weight: 600; text-transform: uppercase; text-shadow: 1px 1px 3px #00000030;}
.btn-link{background-color:#2e7a56; padding: 10px 20px; font-size: 20px; border-radius:50px;}
         /* Fade animation for smooth transition */
      .fade {  animation-name: fade; animation-duration: 1.5s;}
 
         @keyframes fade {
             from { opacity: .4 } 
             to { opacity: 1 }
         }
.invest-option{padding:0 20px; width:100%; box-sizing: border-box;}
.in-op-header h5{font-size: 30px; margin:25px 0px; text-transform: uppercase;}
.center-hiw{text-align:center; }
.invest-option-table-wrapper {width: 100%; margin: 0 auto; position: relative; overflow: hidden;}
.invest-option-table { display: grid; grid-template-columns: repeat(4, 1fr); gap:5px;
            transition: transform 0.5s ease-in-out;}
.invest-card { background: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); padding: 20px;
            text-align: left; display: flex; flex-direction: column; justify-content: space-between;}
.card-header {border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; margin-bottom: 15px;
            display: flex; align-items: center; justify-content: center;}
.card-title { font-size: 20px; font-weight: 600; color: #2e7a56; margin: 0; padding: 0; display: block;}
 .card-details {list-style: none; padding: 0; margin: 0;}
.card-details li {display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f2f4f5;
            font-size: 15px; color: #4b5563;}
.card-details li span {font-weight: 600; color: #12171C;}
 .invest-btn { background-color:#fff; color: #2e7a56; border:2px solid #2e7a56; padding:7px 7px;
    border-radius: 20px; font-size: 16px; text-align: center; text-decoration: none;
            display: block; margin-top: 20px; transition: background-color 0.3s ease-in-out;}
.invest-btn:hover {color: #fff; background-color:#2e7a56;}
.button-nav { display:none; position: absolute; top: 50%; width: 40px; height: 40px;
            transform: scale(0.75); background-color: #fff; color: #fff; border: none;
            padding:0px; cursor: pointer; z-index: 10; border-radius: 50%; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);}
.flickity-button-icon{width: 12px; top: 9px; height: 55%; font-size: 25px;}
.slideshow-prev-btn {left: 5px;}
.slideshow-next-btn {right: 5px;}
.how-it-works { width: 100%; padding: 0 20px; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center;}
.left-hiw{text-align: left;}
.howitworks-table-wrapper { display: inline-block; width: 69%; padding-right: 40px; /* Add some space between text and image */
            box-sizing: border-box; position: relative;}
.wpb_wrapper {font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 2rem;}
.step-list { list-style: none; padding: 0; position: relative;}
.step-list li { position: relative; margin-bottom: 2rem; padding-left: 50px;}

        /* The vertical line connecting the steps */
        .step-list::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 20px;
            width: 1px;
            height: calc(100% - 40px);
            background-color: #2e7a56;
        }


        .step-number-circle {
            position: absolute;
            top: 0;
            left: 0;
            width: 40px;
            height: 40px;
            background-color: #fff;
            border: 1px solid #2e7a56;
                        border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #2e7a56;
            font-size: 14px; /* Font size updated to 14px */
        }
        
        .step-text {
            font-size: 12px; /* Font size updated to 12px */
            line-height: 1.5;
            color: #555;
            margin: 0;
        }
        
        strong {
            font-weight: bold;
        }

.howitworks-art {
            flex-grow: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 31%;
            box-sizing: border-box;

        }

        .howitworks-art img {
           width:100%;
           height: 300px;
            display: block;

        }

.why-invest{width: 100%; padding: 0 20px; box-sizing: border-box;}
.reason-card {
            background-color: #ffffff;
            border-radius: 8px;
            padding:20px;
            margin-bottom: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
            border-left: 5px solid #28a745; /* Green vertical line */
        }

        .reason-card h4{
            font-size: 16px;
            font-weight: 600;
            color: #2c3e50;
            margin-top: 0;
            margin-bottom:2px;
        }

        .reason-card-text{
            font-size: 14px;
            line-height:18px;
            color: #777;
            margin-bottom: 0;
        }
.what-investor-says{width: 100%; padding: 0 20px; box-sizing: border-box;}
 .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
        }

        .testimonial-card {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }

        .testimonial-quote {
            font-size: 14px;
            line-height: 1.4;
            color: #555;
            font-style: italic;
            margin-bottom: 10px;
            position: relative;
        }

        .testimonial-quote::before {
            content: '“';
            font-family: serif;
            font-size: 16px;
            color: #d1b896;
            position: absolute;
            top: -10px;
            left: -15px;
            opacity: 0.5;
        }

        .investor-name {
            font-weight: bold;
            color: #2c3e50;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .investor-title {
            font-size: 12px;
            color: #777;
        }

/* --- New Footer Styles --- */
        .new-footer-style {
            background-color: #12171C; /* A darker, more sophisticated green/gray */
            color: #fff;
            padding: 60px 20px;
            text-align: center;
        }

        .new-footer-style .footer-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .new-footer-style .footer-logo {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        .new-footer-style .tam { color: #fff; }
        .new-footer-style .green { color: #2e7a56; }

        .new-footer-style .footer-description {
            font-size: 16px;
            line-height: 1.5;
            color: #a0a0a0;
            margin-bottom: 25px;
        }

        .new-footer-style .footer-links a {
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            padding: 0 10px;
            transition: color 0.3s ease;
        }

        .new-footer-style .footer-links a:hover {
            color: #28a745;
        }

        .new-footer-style .link-separator {
            color: #555;
            font-size: 14px;
        }
        
        .new-footer-style .copyright {
            font-size: 12px;
            color: #777;
            margin-top: 20px;
        }
.lastest-news{width: 100%; padding: 0 20px; box-sizing: border-box; margin-bottom: 20px;}
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }
        .blog-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        .blog-card:hover {
            transform: translateY(-5px);
        }
        .blog-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .blog-content {padding:10px; }
        .blog-content h4 { font-size: 16px; margin-top: 0; }
        .blog-content p { font-size: 14px; color: #555; }
        .blog-card a {
            display: inline-block;
            margin-top:4px;
            color: #2e7a56;
            font-weight: 500;
        }
 @media (max-width: 990px) {

.menu-bar { display: block;}
            .header-menu {
                position: fixed;
                top: 64px; /* Adjusted to start below the 64px header */
                right: -284px; /* Hides the menu off-screen to the right */
                width: 284px;
                max-width: 80%; /* Ensure it's not too wide on small phones */
                height: calc(100% - 64px); /* Fills the remaining viewport height */
                background-color: #fff;
                flex-direction: column;
                justify-content: flex-start;
                padding-top: 2rem;
                box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
                transition: right 0.4s ease-in-out; /* Smooth transition for slide effect */
                z-index: 9; /* Ensure menu is above other content but below button */
            }

            /* This class is added by JavaScript to open the menu */
            .header-menu.active {
                right: 0; /* Slides the menu into view */
              padding: 0px;
            }

            /* Styling for the list within the mobile menu */
            .header-menu ul {
                flex-direction: column;
                width: 100%;
                padding: 0px;
            }

            .header-menu li {
                width: 100%;
                text-align: left;
                border-bottom: 1px solid #e2e8f0;
            }

            .nav-item-link{ padding: 20px 20px;
                
            }
            .header-signup{width: auto; display: flex; padding:10px 10px; 
              flex-direction: row; justify-content: space-between; align-items: center;}
            .btn{width:; height: 40px; font-size: 16px; margin-right: 0px;}
            .btn-log{margin-right: 10px;}

            /* The overlay for mobile */
            .menu-overlay {
                top: 64px; /* Starts below the header */
                height: calc(100% - 64px); /* Fills the rest of the screen */
            }
          .mySlides img {
    height: 250px;
  }
  
  .slideshow-text h1 {
    font-size: 20px;
    line-height: 1.2;
  }
  
  .slideshow-text {
    width: 90%;
  }

  .btn-link {
    font-size: 16px;
    padding: 10px 20px;
  }
 
    .invest-option-table-wrapper {
                position: relative;
                padding: 0;
                width: 100%;
            }

            .invest-option-table {
                display: flex; /* Change to flexbox for slideshow */
                flex-direction: row;
                transition: transform 0.5s ease-in-out;
            }
            
            .invest-card {
                flex: 0 0 50%; /* Show two cards on tablets */
                box-sizing: border-box;
                padding: 0 15px;

            }

            .button-nav {
                display: block; /* Show buttons for tablets and mobile */
            }
            .how-it-works{display: block;}
            .howitworks-table-wrapper{width: 100%;}
            .howitworks-art{width: 100%;}
            .howitworks-art img {width:100%; max-width: 358px; height: 300px;}
            .footer-container {flex-direction: column; gap: 20px;}
            .footer-column { min-width: 100%; text-align: center; }
            .footer-column h4::after { left: 50%; transform: translateX(-50%); }
            .footer-social .social-icons { justify-content: center; }

}

 @media (max-width: 690px) {
  .in-op-header h5{font-size: 21px; text-transform: uppercase;}
  .invest-card {
                flex: 0 0 100%; /* Show one card on mobile phones */
            }
             .new-footer-style .footer-links {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .new-footer-style .link-separator {
                display: none;
            }
}