.container-fluid{
background: linear-gradient(135deg, #00E0BA, #1B4EF5);
font-family:Poppins;
}
.btn-outline{
    background-color: #00E0BA;
    font: #1B4EF5;
}
.btn-outline:hover{
    color: #222222;
}
body{
    background-color: #F8FCFF;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
#h1-part {
    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(
        -45deg,
        #00E0BA,
        #1B4EF5,
        #00E0BA,
        #1B4EF5
    );

    background-size: 400% 400%;
    animation: gradientMove 10s ease infinite;
}
h1{
    font-family: Poppins,serif;
}
p{
    font-family: Montserrat;
}
.d-block{
    height: 100;
    border-radius: 60px;

}
h3{
    font-family: Inter;
}
.icon{
    justify-content: center;
    align-items: center;
}
.d-block{
    height: 30rem;
    display: flex;
    justify-content: center;
}
h3{
    font-family: Inter;
}
h4{
    font-family: poppins;
    font-size: medium;
    font-weight: light;
}
.testimony{
    background: linear-gradient(
        -45deg,
        #00E0BA,
        #1B4EF5,
        #00E0BA,
        #1B4EF5
    );

    background-size: 400% 400%;
    animation: gradientMove 10s ease infinite;

    border-radius: 15px;
    color: white;
    text-align: center;
    height: 100%;
}
.profile{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}
/* =========================
   Products Section
========================= */

#products{
    padding: 80px 0;
    background: #f8f9fa;
}

#products h2{
    color: #1B4EF5;
    font-weight: 700;
}

#products p{
    color: #6c757d;
}

/* =========================
   Carousel
========================= */

#productCarousel{
    max-width: 1200px;
    margin: auto;
}

/* =========================
   Images
========================= */

.carousel-image{
    width: 100%;
    height: 260px;
    object-fit: cover;

    border-radius: 15px;

    transition: all .4s ease;

    box-shadow: 0 8px 20px rgba(0,0,0,.12);

    cursor: pointer;
}

.carousel-image:hover{
    transform: translateY(-8px) scale(1.05);

    box-shadow: 0 20px 40px rgba(0,0,0,.25);
}

/* =========================
   Carousel Controls
========================= */

.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-color: #1B4EF5;
    border-radius: 50%;
    padding: 20px;
}

/* =========================
   Indicators
========================= */

.carousel-indicators [data-bs-target]{
    width: 12px;
    height: 12px;

    border-radius: 50%;

    background-color: #00E0BA;
}

.carousel-indicators .active{
    background-color: #1B4EF5;
}

/* =========================
   Responsive
========================= */

@media (max-width:992px){

.carousel-image{
    height:220px;
}

}

@media (max-width:768px){

.carousel-image{
    height:200px;
}

}

@media (max-width:576px){

.carousel-image{
    height:180px;
}

}
/* ==========================
        FAQ SECTION
========================== */

#faq{
    padding:80px 0;
    background:#f8f9fa;
}

#faq h2{
    color:#1B4EF5;
    font-weight:700;
}

#faq p{
    color:#6c757d;
}

/* Accordion */

.accordion{
    max-width:900px;
    margin:auto;
    border-radius:20px;
    overflow:hidden;
}

/* Items */

.accordion-item{
    border:none;
    margin-bottom:15px;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

/* Question */

.accordion-button{

    font-size:18px;
    font-weight:600;

    color:#1B4EF5;

    background:#ffffff;

    padding:20px;

    transition:.3s;
}

/* Open */

.accordion-button:not(.collapsed){

    background:#1B4EF5;

    color:white;

    box-shadow:none;

}

/* Remove Bootstrap outline */

.accordion-button:focus{

    box-shadow:none;

    border:none;

}

/* Answer */

.accordion-body{

    font-size:16px;

    line-height:1.8;

    background:white;

    color:#555;

}

/* Arrow */

.accordion-button::after{

    filter:brightness(0);

}

.accordion-button:not(.collapsed)::after{

    filter:brightness(0) invert(1);

}
/*==========================
      CONTACT SECTION
===========================*/

#contact{

    background:#f8f9fa;

    padding:80px 0;

}

#contact h2{

    color:#1B4EF5;

    font-weight:700;

}

#contact p{

    color:#222;
    font-weight: 200px;

}

/* Left Card */

.contact-info{

    background:linear-gradient(
    135deg,
    #1B4EF5,
    #00E0BA);

    color:white;

    padding:40px;

    border-radius:20px;

    height:100%;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.contact-info h5{

    font-weight:600;

}

/* Form */

.contact-form{

    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/* Inputs */

.form-control{

    border-radius:12px;

    padding:15px;

    border:2px solid #e9ecef;

    transition:.3s;

}

/* Focus */

.form-control:focus{

    border-color:#1B4EF5;

    box-shadow:0 0 10px rgba(27,78,245,.15);

}

/* Button */

.btn-contact{

    background:#1B4EF5;

    color:white;

    padding:14px 35px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.btn-contact:hover{

    background:#00E0BA;

    color:#111;

    transform:translateY(-3px);

}

/* Responsive */

@media(max-width:768px){

.contact-info{

margin-bottom:30px;

}

.contact-form{

padding:30px;

}

}
/*==========================
        FOOTER
===========================*/

#footer{

    background:#050B4D;

    color:white;

}

#footer h5{

    color:#00E0BA;

    margin-bottom:20px;

    font-weight:600;

}

#footer p{

    color:#d9d9d9;

}

#footer ul{

    list-style:none;

    padding:0;

}

#footer ul li{

    margin-bottom:12px;

}

#footer ul li a{

    color:#d9d9d9;

    text-decoration:none;

    transition:.3s;

}

#footer ul li a:hover{

    color:#00E0BA;

    padding-left:8px;

}

/* Social Icons */

.social-icons{

    margin-top:20px;

}

.social-icons a{

    width:45px;

    height:45px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    margin-right:10px;

    text-decoration:none;

    background:#1B4EF5;

    color:white;

    font-size:20px;

    transition:.3s;

}

.social-icons a:hover{

    background:#00E0BA;

    color:#050B4D;

    transform:translateY(-5px);

}

#footer hr{

    border-color:rgba(255,255,255,.15);

}

#footer .text-center{

    color:#bfbfbf;

}
/* =========================
   FEATURES SECTION
========================= */

#features{
    background: #f8f9fa;
    padding: 80px 0;
}

/* Feature Card */
.feature-box{
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    height: 100%;
}

/* Hover effect */
.feature-box:hover{
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

/* Icon container */
.icon-box{
    width: 70px;
    height: 70px;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1B4EF5, #00E0BA);
    border-radius: 50%;
}

/* Title */
.feature-box h3{
    font-size: 22px;
    font-weight: 700;
    color: #1B4EF5;
    margin-bottom: 10px;
}

/* Text */
.feature-box p{
    font-size: 15px;
    color: #666;
    line-height: 1.6;
}
/* =========================
   HERO SECTION
========================= */

#hero{
    background: linear-gradient(180deg, #ffffff, #f8f9fa);
    padding: 100px 0;
}

/* Title */
.hero-title{
    color: #1B4EF5;
    font-weight: 800;
}

/* Paragraph */
#hero .lead{
    color: #555;
    line-height: 1.8;
}

/* Image */
.hero-img{
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    transition: 0.3s;
}

.hero-img:hover{
    transform: scale(1.03);
}

/* Buttons */
.btn-primary{
    background-color: #1B4EF5;
    border: none;
}

.btn-primary:hover{
    background-color: #00E0BA;
    color: #000;
}

.btn-outline-primary{
    border-color: #1B4EF5;
    color: #1B4EF5;
}

.btn-outline-primary:hover{
    background-color: #1B4EF5;
    color: white;
}
/* =========================
   NAVBAR STYLING
========================= */

.navbar{
    transition: 0.3s ease;
}

/* Brand */
.navbar-brand{
    font-size: 22px;
    letter-spacing: 1px;
}

/* Links */
.nav-link{
    font-weight: 500;
    color: #333 !important;
    transition: 0.3s;
}

.nav-link:hover{
    color: #1B4EF5 !important;
}

/* Active link */
.nav-link.active{
    color: #1B4EF5 !important;
}

/* CTA Button */
.btn-primary{
    background: #1B4EF5;
    border: none;
    padding: 8px 18px;
    border-radius: 8px;
}

.btn-primary:hover{
    background: #00E0BA;
    color: #000;
}

/* Sticky spacing fix */
body{
    padding-top: 70px;
}