/* Header */
.main-header {
  background: #ffffff;
  padding: 16px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: relative;
  z-index: 1000;
}

/* Logo */
.logo span {
  font-size: 22px;
  font-weight: 700;
  color: #2b2b2b;
}

/* Navigation */
.nav-menu {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 30px;
}

.nav-menu li a {
  text-decoration: none;
  color: #4d4d4d;
  font-weight: 500;
}

/* Button */
.register-btn {
  background: #4CAF4F;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 500;
}

.register-btn:hover {
  background: #43a047;
  color: #fff;
}

/* Hamburger */
.menu-btn {
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* Mobile */
@media (max-width: 768px) {
  .nav-menu {
    display: none;
    flex-direction: column;
    background: #ffffff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 20px;
    gap: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  }

  .nav-menu.active {
    display: flex;
  }
}

/* Hero Section */

.hero-slider {
  background: #f8f9fa;
  min-height: 80vh;
}

.hero-content h1 {
  font-size: 44px;
  font-weight: 600;
  color: #4d4d4d;
}

.hero-content span {
  color: #4CAF50;
}

.hero-content p {
  color: #6c757d;
  margin-top: 15px;
}

.hero-btn {
  background: #4CAF50;
  color: #fff;
  padding: 10px 25px;
  border-radius: 6px;
  text-decoration: none;
}

.hero-img img {
  max-width: 100%;
}
/* remove bootstrap default icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: none;
}

/* arrow button */
.simple-arrow {
  width: 60px;
  z-index: 10;
  opacity: 1;
}

/* text arrow */
.arrow-text {
  font-size: 40px;
  color:  #4CAF50;
  font-weight: 300;
  line-height: 1;
}

/* hover effect (optional) */
.simple-arrow:hover .arrow-text {
  opacity: 0.7;
}

.arrow.right {
  transform: rotate(45deg);
}

.arrow.left {
  transform: rotate(-135deg);
}

        

/* client */
.client {
        text-align: center;
        margin: 27px;
        }
        .client-title {
            font-size: 25px;
            font-weight: 600;
            color: #4D4D4D;
            margin-bottom: 20px;
        }
        
        

/* logos */

/* .logos{
        align-items: center;
        justify-content: left;
        padding: 60px;
        }


            /* Text styles 
        .dark {
        color: rgb(61, 70, 61);
        }

        .green {
        color: rgb(72, 235, 69);
        }

        .hero p {
        margin: 20px 0;
        font-size: 16px;
        }

        button {
        background-color: #4caf50;
        color: white;
        padding: 10px 22px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin: 20px;
        }

        article{
            text-decoration: none;
        }
        .font{
            text-align: center;
        } */

/* community */
.community{
            text-align: center;
            padding: 27px;
            }
             .container {
                        width: 1140px;
                        margin: auto;
                        }
           
            .row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 3px;
                }
            
                .col-12{
                    text-align: center;
                    }


/* second */
.second{
        align-items: center;
        }

        .container {
        width: 1140px;
        margin: auto;
        }
        .text-box{
            align-items: center;
        }
        .i-con{
            padding: 10px;
        }
        .second-title {       
            font-size: 20px;
            font-weight: 185%;
            color: #4D4D4D;
        }
   


/* title */

.title {
        padding: 33px;
        }


/* stats */
.stats {
        padding: 50px 0;
        background: #F5F7FA;
        }

        .container {
        width: 1140px;
        margin: auto;
        }

        .stats-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        }

        /* LEFT */
        .stats-left {
        width: 40%;
        }

        .stats-left h2 {
        font-size: 38px;
        line-height: 1.3;
        color: #222;
        }

        .stats-left span {
        color: #4caf50;
        }

        .stats-left p {
        margin-top: 12px;
        color: #666;
        }
        .text-stats{
            width: 300px;
        }
        /* RIGHT */
        .stats-right {
        width: 55%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        }

        .stat-item {
        display: flex;
        align-items: center;
        gap: 15px;
        }

        .stat-item img {
        width: 40px;
        }

        .stat-item h3 {
        font-size: 24px;
        margin: 0;
        color: #222;
        }

        .stat-item p {
        margin: 4px 0 0;
        color: #666;
        font-size: 14px;
        }

/* smith */
.smith {
        background: #F5F7FA;
        padding: 10px;
        margin-top: 20px;
        }


/* blog */

.blog-section {
            padding: 80px 0;
            background-color: #fff;
            text-align: center;
        }
        .section-title {
            font-size: 36px;
            font-weight: 600;
            color: #4D4D4D;
            margin-bottom: 20px;
        }
        .section-description {
            font-size: 16px;
            color: #717171;
            max-width: 800px;
            margin: 0 auto 50px;
            line-height: 1.6;
        }
        .blog-card {
            background: #FFFFFF;
            border: 1px solid #E5E5E5;
            border-radius: 8px;
            overflow: hidden;
            height: 100%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .blog-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .blog-content {
            padding: 24px;
        }
        .blog-title {
            font-size: 20px;
            font-weight: 600;
            color: #4D4D4D;
            margin-bottom: 16px;
            line-height: 1.4;
        }
        .blog-text{
            color: #4d4d4d;
            font-weight: 500;
        }
        .read-more {
            color: #fff;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: color 0.3s ease;
        }
        .read-more:hover {
            color: #3e8e41;
        }
        .read-more::after {
            content: '→';
            margin-left: 8px;
            transition: transform 0.3s ease;
        }
        .read-more:hover::after {
            transform: translateX(4px);
        }

/* letter */
.letter-row{            
            text-align: center;
            margin: 20px;
            background: #F5F7FA;
            padding: 22px;
            }
            .letter-col{
                margin-bottom: inherit;
            }
            .letter-col h1 {
                display: inline-block;
                font-size: 45px;
                width: 617px;
                line-height: 52px;
                color: #4D4D4D;
            }
        
/* pricing */

.pricing-section{
                    padding: 80px 0;
                    background-color: #fff;
                    text-align: center;
                }
                .pricing-title {
                    font-size: 25px;
                    font-weight: 600;
                    color: #4D4D4D;
                    margin-bottom: 20px;
                }
                .pricing-description {
                    font-size: 16px;
                    color: #717171;
                    max-width: 800px;
                    margin: 0 auto 50px;
                    line-height: 1.6;
                }
                .pricing-card {
                    background: #FFFFFF;
                    border: 1px solid #E5E5E5;
                    border-radius: 8px;
                    overflow: hidden;
                    height: 100%;
                    transition: transform 0.3s ease, box-shadow 0.3s ease;
                }
                .pricing-card:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
                }
                .pricing-image {
                    width: 100%;
                    height: 200px;
                    object-fit: cover;
                }
                .pricing-content {
                    padding: 24px;
                }
                .pricing-title {
                    font-size: 20px;
                    font-weight: 600;
                    color: #4D4D4D;
                    margin-bottom: 16px;
                    line-height: 1.4;
                }
                .pricing-row{
                        text-align: center;
                        font-size: 44px;
                }
                .read-more {
                    color: #4CAF50;
                    font-weight: 600;
                    text-decoration: none;
                    display: inline-flex;
                    align-items: center;
                    transition: color 0.3s ease;
                }
                .read-more:hover {
                    color: #3e8e41;
                }
                .read-more::after {
                    content: '→';
                    margin-left: 8px;
                    transition: transform 0.3s ease;
                }
                .read-more:hover::after {
                    transform: translateX(4px);
                }


.scroll-wrapper {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 20px;
}
 
.card {
  min-width: 300px;
  height: 200px;
  background: #f3f4f6;
  border-radius: 12px;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
/* footer */

.main-footer {
  background: #263238;
  color: #ffffff;
  padding: 60px 0;
}

.main-footer h4 {
  font-weight: 700;
  margin-bottom: 20px;
}

.main-footer h5 {
  font-weight: 600;
  margin-bottom: 20px;
}

.main-footer p {
  font-size: 14px;
  color: #cfd8dc;
}

.main-footer ul {
  list-style: none;
  padding: 0;
  font-size: 22px;
}

.main-footer ul li {
  margin-bottom: 10px;
}

.main-footer ul li a {
  color: #cfd8dc;
  text-decoration: none;
  font-size: 14px;
}

.main-footer ul li a:hover {
  color: #4CAF4F;
}
.logo-outer{
    margin: 0px;
}
.footer-logo{
    margin-bottom: 30px;
}
.footer-logo img{
    width: 50%;
}
/* Social Icons */
.social-icons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.social-icons a {
  width: 36px;
  height: 36px;
  background: #37474f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  text-decoration: none;
}

/* Newsletter */
.newsletter {
  display: flex;
  background: #37474f;
  border-radius: 8px;
  overflow: hidden;
  max-width: 320px;
}

.newsletter input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px;
  color: #fff;
  font-size: 14px;
}

.newsletter input::placeholder {
  color: #b0bec5;
}

.newsletter button {
  background: none;
  border: none;
  color: #fff;
  padding: 0 15px;
  font-size: 18px;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 768px) {
  .newsletter {
    max-width: 100%;
  }
}