/* Theme */
.bg-c{background-color: black;}
.main-btn{background: linear-gradient(to right, #244e7e, #1287da); padding: 8px 20px; border-radius: 10px; border: none; color:#FFF; font-weight: bold;}
.main-text{background: linear-gradient(to right, black, #333);  -webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.secondary-text{color: #565656;}
.text-b{color: #000;}
.navbar .nav-link,
.navbar .dropdown-item {
    color: black !important;
}

.navbar .nav-link:hover,
.navbar .dropdown-item:hover {
    color: #333 !important;
}
.glass-navbar {
    background: rgba(255, 255, 255, 0.7); /* Light transparent background */
    backdrop-filter: blur(10px);         /* Blur effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Optional subtle border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);         /* Optional subtle shadow */
}



.main-logo{width: 60px;}
.home-title{margin-top: 20%; font-weight: bold; font-size: 50px;}
.reward-img{width: 150px; display: block; margin: auto;}
.area2{margin-top: 50px; background-color:#1287da ;}
.area2-content{margin-top: 20px; margin-bottom: 10px; padding-top: 50px; padding-bottom: 50px;}
.img-are3{display: block; margin: auto; width: 250px;}
.img-are3-j{display: block; margin: auto; width: 100%;}
.img-border{border-radius: 10px; margin-top: 10%; width: 70%;}
.bg-c{background-color: #f7f9fd;}
.row-magin{margin-top: 200px;}
.contact-back{background-color: rgb(30, 30, 30); border-radius: 10px;}
.home-client-js{padding: 100px 0px 10px 0px;}
.logo-container {width: 100%;overflow: hidden;white-space: nowrap;position: relative;height: 100px;}
.logo-strip {display: inline-block;white-space: nowrap;position: absolute;will-change: transform; padding: 20px;}
.logo-strip img {margin: 0 20px;height: 60px;}
.logo-strip {display: flex;justify-content: center;align-items: center;gap: 40px;flex-wrap: nowrap;z-index: 1;filter: grayscale(100%) brightness(0.7);}
.logo-strip img {height: 60px;opacity: 0.8;transition: opacity 0.3s ease;}
.logo-strip img:hover {opacity: 1;}
.section-m{margin-top: 150px;}
img{border-radius: 10px;}

/* Dropdown Menu Styling */
.custom-dropdown .dropdown-menu {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border: none;
}

/* Dropdown Item Styling */
.custom-dropdown .dropdown-item {
    padding: 10px 20px;
    font-weight: 500;
    color: #333;
    transition: background 0.3s, color 0.3s;
}

.custom-dropdown .dropdown-item:hover {
    background-color: #FFC107;
    color: #fff;
    border-radius: 5px;
}

/* Divider Styling */
.custom-dropdown .dropdown-divider {
    margin: 0.5rem 1rem;
    border-top: 1px solid #ddd;
}

/* Active Nav Link */
.custom-dropdown .nav-link.active {
    color: #FFC107;
    font-weight: bold;
}


.navbar-nav .nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem;
}
.transition-navbar {
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
    background-color: transparent !important;
}

.navbar-scrolled {
    background-color: #ffffff !important; /* or your preferred color */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.navbar-scrolled .nav-link {
    color: #000 !important;
}

.navbar-scrolled .main-btn {
    background-color: #1287da;
    color: #fff;
}
.contact-form-wrapper {
    background-color: f7f9fd;
    border: 2px solid #f7f9fd;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}


.banner {
     background: linear-gradient(to right, #244e7e, #1287da);
    color: f7f9fd;
    padding: 20px;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 15px; /* optional, for smooth corners */
        }
        .banner-item {
            margin: 10px;
        }
        .star-rating {
            color: #ffca08;
        }
        .award {
            font-weight: bold;
        }
        .downloads, .body-builders {
            font-size: 1.5rem;
        }
        @media (max-width: 768px) {
            .banner {
                flex-direction: column;
                padding: 10px;
            }
            .banner-item {
                margin: 5px 0;
            }
        }

@media  (max-width:760px) {
    .area2{margin-top: 10px;}
    .row-magin{margin-top: 30px;}
    h1{text-align: center;}
    h2{text-align: center;}
    h3{text-align: center;}
    p{text-align: center;}
    .main-btn{ display: flex; margin: auto; margin-bottom: 10px;}
    .section-m{margin-top: 30px;}
    .img-border{margin: auto; display: flex;}
}