.mithilaH2{

font-family: 'Montserrat', sans-serif;

font-size: 42px;

font-weight: 900;

letter-spacing: 2px;

text-transform: uppercase;

background: linear-gradient(135deg,#0A2540,#00C2FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}


 .hero-section{
    background: linear-gradient(135deg, #000E23, #000E23);
    color:#fff;
    box-shadow: 5px 5px 15px 5px #000E23;
    padding:30px 0;
}

.hero-title{
    font-size:48px;
    font-weight:700;
    line-height:1.3;
    margin-bottom:25px;
}

.typing-container{
    font-size:28px;
    font-weight:600;
    color:#00C2FF;
    min-height:50px;
    margin-bottom:20px;
}

.hero-desc{
    font-size:17px;
    line-height:32px;
    color:#d7e3f4;
}

.hero-image{
    max-height:500px;
}

@media(max-width:768px){

.hero-title{
    font-size: 24px;
}

.typing-container{
    font-size:20px;
}

.hero-desc{
    font-size:15px;
    line-height:28px;
}

}


#enqcss{
outline: none;
padding: 15px 20px;
appearance: none;
color: rgb(0, 0, 0);
font-weight: 600;
width: 100%;
font-size: 16px;
line-height: 26px;
margin-bottom: 15px;
border-radius: var(--card-curve);
border: 1px solid rgb(238, 238, 238);
background: #f7f9fc;
}
.custom-logo {
  max-width: 160px;
}

@media (max-width: 767px) {
  .custom-logo {
    max-width: 130px;
  }
}


.stats-section{
    padding:40px 0;
    background: linear-gradient(135deg, #071b35d9, #0a2540db);
}

.stat-card{

    position:relative;

    height:100%;

    padding:35px 25px;

    text-align:center;

    border-radius:25px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.15);

    overflow:hidden;

    transition:.4s;
}

.stat-card::before{

    content:'';

    position:absolute;

    top:-100%;

    left:-100%;

    width:250px;
    height:250px;

    background:
    radial-gradient(
    circle,
    rgba(0,194,255,.35),
    transparent
    );

    transition:.5s;
}

.stat-card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 15px 40px rgba(0,194,255,.25);
}

.stat-card:hover::before{

    top:-30px;
    left:-30px;
}

.stat-icon{

    width:80px;
    height:80px;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #00C2FF,
    #1E90FF
    );

    color:#fff;

    font-size:30px;

    box-shadow:
    0 10px 30px rgba(0,194,255,.4);

    margin-bottom:20px;
}

.stat-card h2{

    color:#fff;

    font-size:42px;

    font-weight:800;

    margin-bottom:10px;
}

.stat-card h5{

    color:#fff;

    font-weight:600;
}

.stat-card p{

    color:#c7d6ea;

    margin:0;
}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.highlights-section{
    background:#ffffff;
    position:relative;
}

.highlight-card{

    height:100%;

    background:#fff;

    text-align:center;

    padding:25px 15px;

    border-radius:18px;

    border:1px solid #edf2f7;

    transition:.35s;

    box-shadow:
    0 5px 20px rgba(0,0,0,.05);
}

.highlight-card:hover{

    transform:translateY(-8px);

    border-color:#00C2FF;

    box-shadow:
    0 15px 35px rgba(0,194,255,.15);
}

.highlight-card i{

    width:65px;
    height:65px;

    line-height:65px;

    border-radius:50%;

    font-size:26px;

    color:#00C2FF;

    background:#eefbff;

    margin-bottom:15px;
}

.highlight-card h3{

    font-size:18px;

    font-weight:600;

    color:#0A2540;

    margin-bottom:10px;
}

.highlight-card p{

font-size:14px;

line-height:24px;

color: #000000;

margin:0;
}

@media(max-width:767px){

.highlight-card{
    padding:20px 10px;
}

.highlight-card h3{
    font-size:15px;
}

.highlight-card p{
    font-size:12px;
    line-height:20px;
}

}

/*:::::::::::::::::::::::::::   ABOUT SECTION CODE::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.about-company-section{

    background:
    linear-gradient(
    180deg,
    #ffffff,
    #f8fbff,
    #ffffff
    );

    position:relative;

    overflow:hidden;

}

.about-company-section:before{

    content:"";

    position:absolute;

    top:-150px;
    right:-150px;

    width:350px;
    height:350px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(0,194,255,.10),
    transparent
    );

}

.main-about-img{

    border-radius:30px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.10);

}

.experience-ribbon{

    position:absolute;

    top:20px;

    left:-10px;

    background:
    linear-gradient(
    135deg,
    #D4AF37,
    #F7DC6F
    );

    color:#111;

    padding:15px 25px;

    border-radius:
    0 50px 50px 0;

    font-weight:700;

    box-shadow:
    0 10px 30px rgba(212,175,55,.25);

}

.experience-ribbon span{

    display:block;

    font-size:28px;

    line-height:1;

}

.section-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:#eefbff;

    color:#00C2FF;

    font-weight:700;

    margin-bottom:20px;

}

.about-company-section h2{

font-size: 2rem;

font-weight:800;

color:#0A2540;

line-height:1.25;

/* margin-bottom:20px; */
}

.lead-text{

    font-size:18px;

    color:#334155;

    line-height:32px;

}

.partner-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    background:
    linear-gradient(
    135deg,
    #0A2540,
    #00C2FF
    );

    color:#fff;

    border-radius:50px;

    font-weight:600;

    margin-top:10px;

}

.about-feature{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    background:#fff;

    border-radius:20px;

    border:1px solid rgba(0,0,0,.04);

    box-shadow:
    0 10px 25px rgba(0,0,0,.05);

    transition:.35s;

}

.about-feature:hover{

    transform:translateY(-5px);

    box-shadow:
    0 20px 40px rgba(0,194,255,.12);

}

.about-feature i{

    width:55px;
    height:55px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:15px;

    color:#fff;

    font-size:22px;

    background:
    linear-gradient(
    135deg,
    #00C2FF,
    #0A2540
    );

}

.about-feature h5{

    margin:0;

    font-size:17px;

    font-weight:700;

    color:#0A2540;

}

.about-feature p{

    margin:0;

    color:#64748b;

    font-size:13px;

}

.about-stats{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.stat-box{

    flex:1;

    min-width:110px;

    text-align:center;

    padding:20px;

    border-radius:20px;

    background:#fff;

    box-shadow:
    0 10px 25px rgba(0,0,0,.05);

}

.stat-box h3{

    margin:0;

    font-size:30px;

    color:#00C2FF;

    font-weight:800;

}

.stat-box span{

    color:#64748b;

    font-weight:600;

}

@media(max-width:768px){

.about-company-section h2{

font-size: 22px;
}

.about-stats{

    gap:10px;

}

.stat-box{

    min-width:45%;

}

}

.about-badge{

    display:inline-block;

    font-size:14px;

    font-weight:700;

    color:#ff7a00;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:15px;

}

.about-title{

    font-size:60px;

    font-weight:900;

    line-height:1;

    color:#0A2540;

    margin-bottom:15px;

}

.about-strip{

    display:inline-block;

    background:#ff7a00;

    color:#fff;

    padding:12px 30px;

    border-radius:50px;

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

}

.about-text{

font-size:18px;

line-height:32px;

color:#334155;

margin-bottom:15px;

text-align: justify;
}

.feature-box{

    display:flex;

    align-items:center;

    background:#fff;

    border-radius:20px;

    padding:18px;

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

    transition:.3s;

}

.feature-box:hover{

    transform:translateY(-5px);

}

.feature-box i{

    width:60px;

    height:60px;

    line-height:60px;

    text-align:center;

    border-radius:15px;

    background:#0A2540;

    color:#fff;

    font-size:24px;

    margin-right:15px;

}

.feature-box h5{

    margin:0;

    font-size:17px;

    font-weight:700;

    color:#0A2540;

}

.feature-box span{

font-size:13px;

color: #494522;

/* line-height: 0.8; */
}

.stats-strip{

    margin-top:30px;

    background:#0A2540;

    border-radius:25px;

    padding:25px;

    display:flex;

    justify-content:space-around;

    text-align:center;

}

.stats-strip h3{

    color:#ff7a00;

    font-size:34px;

    font-weight:800;

    margin:0;

}

.stats-strip span{

    color:#fff;

    font-size:14px;

}

.tech-circle-wrapper{

    position:relative;

    width:500px;
    height:500px;

    margin:auto;

}

.outer-ring{

    position:absolute;

    width:100%;
    height:100%;

    border:4px solid #ff7a00;

    border-radius:50%;

    animation:spin 25s linear infinite;

}

.middle-ring{

    position:absolute;

    top:50px;
    left:50px;

    width:400px;
    height:400px;

    border:2px dashed #00c2ff;

    border-radius:50%;

    animation:spinReverse 20s linear infinite;

}

/* ===========================
   CENTER CIRCLE
=========================== */

.center-circle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:230px;
    height:230px;
    border-radius:50%;
    background:linear-gradient(135deg,#0A2540,#00C2FF);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    z-index:10;
    overflow:hidden;
    box-shadow:
    0 0 50px rgba(0,194,255,.25),
    0 20px 60px rgba(0,0,0,.15);
}

.center-glow{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
    radial-gradient(
    rgba(255,255,255,.25),
    transparent 70%
    );
}

.center-logo{
    width:60px;
    margin-bottom:10px;
    position:relative;
    z-index:2;
}

.center-circle h3{
    margin:0;
    font-size:34px;
    font-weight:800;
    letter-spacing:1px;
}

.center-circle span{
    font-size:14px;
    letter-spacing:2px;
}

.center-circle small{
    margin-top:5px;
    font-size:11px;
    letter-spacing:2px;
    opacity:.9;
}

/* ===========================
   TECH ICONS
=========================== */

.tech-icon{
    position:absolute;
    width:70px;
    height:70px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    box-shadow:
    0 10px 30px rgba(0,0,0,.08);
}

.tech-icon i{
    /* color:#0A2540; */
}

/* Main Icons */

.html{top:0;left:50%;transform:translateX(-50%);}
.css{top:90px;right:20px;}
.js{top:220px;right:-10px;}
.php{bottom:90px;right:20px;}
.python{bottom:0;left:50%;transform:translateX(-50%);}
.react{bottom:90px;left:20px;}
.node{top:220px;left:-10px;}
.db{top:90px;left:20px;}

/* Extra Icons */

.java{top:45px;left:95px;}
.seo{top:45px;right:95px;}
.uiux{bottom:55px;left:90px;}
.dm{bottom:55px;right:90px;}

/* ===========================
   GLOW DOTS
=========================== */

.glow-dot{
    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#00C2FF;
    box-shadow:
    0 0 20px #00C2FF,
    0 0 40px #00C2FF;
}

.dot1{top:60px;left:30px;}
.dot2{top:130px;right:30px;}
.dot3{bottom:80px;left:60px;}
.dot4{bottom:40px;right:80px;}
.dot5{top:250px;left:-10px;}
.dot6{top:250px;right:-10px;}

/* ===========================
   RINGS
=========================== */

.outer-ring{
    animation:spin 30s linear infinite;
}

.middle-ring{
    animation:spinReverse 25s linear infinite;
}

/* ===========================
   ANIMATION
=========================== */

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes spinReverse{
    from{
        transform:rotate(360deg);
    }
    to{
        transform:rotate(0deg);
    }
}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

    .tech-circle-wrapper{
        width:300px;
        height:300px;
        margin:20px auto;
    }

    .outer-ring{
        border-width:3px;
    }

    .middle-ring{
        width:220px;
        height:220px;
        top:40px;
        left:40px;
    }

    .center-circle{
        width:130px;
        height:130px;
    }

    .center-logo{
        width:40px;
    }

    .center-circle h3{
        font-size:20px;
    }

    .center-circle span{
        font-size:10px;
        letter-spacing:1px;
    }

    .center-circle small{
        font-size:9px;
    }

    .tech-icon{
        width:48px;
        height:48px;
        font-size:18px;
    }

    .learn-grow{
        margin-top:15px;
        font-size:18px;
    }
}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/



/* ===== PREMIUM SERVICE SECTION ===== */
.premium-service-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #f8faff 0%, #eef2f7 100%);
    position: relative;
    overflow: hidden;
}

/* Background decoration */
.premium-service-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.premium-service-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(10, 26, 58, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.premium-container {
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ===== HEADER STYLES ===== */
.premium-header {
    margin-bottom: 60px;
}

.premium-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0a1a3a;
    color: #f5c842;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(245, 200, 66, 0.15);
    box-shadow: 0 4px 15px rgba(10, 26, 58, 0.2);
    animation: premiumPulse 2s ease-in-out infinite;
}

@keyframes premiumPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(10, 26, 58, 0.2); }
    50% { box-shadow: 0 4px 30px rgba(245, 200, 66, 0.3); }
}

.premium-tag:hover {
    background: #f5c842;
    color: #0a1a3a;
    transform: translateY(-2px);
}

.premium-tag svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.premium-title {
    font-size: 2rem;
    font-weight: 800;
    color: #0a1a3a;
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.premium-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #f5c842, #0a1a3a);
    margin: 18px auto 0;
    border-radius: 4px;
}

.premium-subtitle {
    color: #5a6a7a;
    margin: 0 auto;
    line-height: 1.6;
}

/* ===== GRID LAYOUT ===== */
.premium-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* ===== CARD WRAPPER ===== */
.premium-card-wrapper {
    display: flex;
}

/* ===== CARD BASE ===== */
.premium-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 24px 28px;
    width: 100%;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(10, 26, 58, 0.08);
    display: flex;
    flex-direction: column;
}

.premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 20px 20px 0 0;
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(245, 200, 66, 0.12);
    border-color: rgba(245, 200, 66, 0.2);
}

/* Card gradient overlays - UPDATED */
.premium-card-website::before { background: linear-gradient(90deg, #f5c842, #0a1a3a); }
.premium-card-featured::before { background: linear-gradient(90deg, #f5c842, #e8b830); }
.premium-card-programming::before { background: linear-gradient(90deg, #f5c842, #d4a020); }
.premium-card-internship::before { background: linear-gradient(90deg, #f5c842, #0a1a3a); }

/* ===== BADGE ===== */
.premium-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 16px;
    align-self: flex-start;
}

.badge-blue { background: rgba(10, 26, 58, 0.1); color: #0a1a3a; }
.badge-gold { background: rgba(245, 200, 66, 0.15); color: #b8860b; }
.badge-green { background: rgba(245, 200, 66, 0.12); color: #b8860b; }
.badge-purple { background: rgba(10, 26, 58, 0.1); color: #0a1a3a; }

/* ===== CARD ICON ===== */
.premium-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 26, 58, 0.08);
    color: #0a1a3a;
}

.premium-card-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.premium-card-featured .premium-card-icon {
    background: rgba(245, 200, 66, 0.12);
    color: #f5c842;
}

.premium-card-programming .premium-card-icon {
    background: rgba(245, 200, 66, 0.1);
    color: #f5c842;
}

.premium-card-internship .premium-card-icon {
    background: rgba(10, 26, 58, 0.1);
    color: #0a1a3a;
}

/* ===== CARD TITLE ===== */
.premium-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #0a1a3a;
    margin-bottom: 12px;
    line-height: 1.3;
}

/* ===== META TAGS ===== */
.premium-meta-tags {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #5a6a8a;
    background: #f1f4fb;
    padding: 4px 12px;
    border-radius: 50px;
    font-weight: 500;
}

.meta-tag svg {
    width: 14px;
    height: 14px;
    color: #f5c842;
}

/* ===== FEATURE LIST ===== */
.premium-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: grid;
    gap: 6px;
    flex: 1;
}

.premium-feature-list.list-two-col {
    grid-template-columns: 1fr 1fr;
}

.premium-feature-list li {
    font-size: 14px;
    color: #2a3a5a;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(10, 26, 58, 0.06);
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 450;
}

.premium-feature-list li:last-child {
    border-bottom: none;
}

/* ===== BUTTON ===== */
.premium-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 6px;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.premium-btn svg {
    transition: transform 0.3s ease;
    fill: currentColor;
}

.premium-btn:hover svg {
    transform: translateX(4px);
}

/* All buttons - UPDATED */
.premium-btn-blue {
    background: #0a1a3a;
    color: #f5c842;
    box-shadow: 0 4px 20px rgba(10, 26, 58, 0.25);
}

.premium-btn-blue:hover {
    background: #f5c842;
    color: #0a1a3a;
    box-shadow: 0 8px 30px rgba(245, 200, 66, 0.4);
    transform: translateY(-2px);
    color: #0a1a3a;
}

.premium-btn-gold {
    background: #f5c842;
    color: #0a1a3a;
    box-shadow: 0 4px 20px rgba(245, 200, 66, 0.3);
}

.premium-btn-gold:hover {
    background: #0a1a3a;
    color: #f5c842;
    box-shadow: 0 8px 30px rgba(10, 26, 58, 0.3);
    transform: translateY(-2px);
    color: #f5c842;
}

.premium-btn-green {
    background: #0a1a3a;
    color: #f5c842;
    box-shadow: 0 4px 20px rgba(10, 26, 58, 0.25);
}

.premium-btn-green:hover {
    background: #f5c842;
    color: #0a1a3a;
    box-shadow: 0 8px 30px rgba(245, 200, 66, 0.4);
    transform: translateY(-2px);
    color: #0a1a3a;
}

.premium-btn-purple {
    background: #0a1a3a;
    color: #f5c842;
    box-shadow: 0 4px 20px rgba(10, 26, 58, 0.25);
}

.premium-btn-purple:hover {
    background: #f5c842;
    color: #0a1a3a;
    box-shadow: 0 8px 30px rgba(245, 200, 66, 0.4);
    transform: translateY(-2px);
    color: #0a1a3a;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .premium-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .premium-service-section {
        padding: 50px 16px;
    }

    .premium-title {
        font-size: 28px;
    }

    .premium-subtitle {
        font-size: 16px;
    }

    .premium-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .premium-card {
        padding: 24px 18px 22px;
    }

    .premium-feature-list.list-two-col {
        grid-template-columns: 1fr 1fr;
    }

    .premium-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .premium-feature-list.list-two-col {
        grid-template-columns: 1fr;
    }

    .premium-title {
        font-size: 24px;
    }

    .premium-meta-tags {
        flex-direction: column;
        gap: 6px;
    }
}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

 /* ===============================
   COMPACT CERT SECTION
================================ */
.compact-cert {
    /* padding: 15px 0; */
    background: linear-gradient(135deg, rgba(245, 200, 66, 0.08) 0%, rgba(10, 26, 58, 0.06) 100%);
    position: relative;
    overflow: hidden;
}

.compact-cert::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.compact-cert .cert-heading p {
    font-size: 18px;
    color: #000000;
    margin-bottom: 0;
}

.compact-cert .cert-heading h3 {
    color: #0a1a3a;
    font-weight: 700;
}

.compact-cert .cert-heading h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #f5c842, #0a1a3a);
    margin: 8px 0 0;
    border-radius: 3px;
}

/* ==========================================
   CERT CARD - UPDATED
========================================== */
.cert-card {
    background: #ffffff;
    padding: 22px;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(10, 26, 58, 0.06);
    border: 1px solid rgba(10, 26, 58, 0.04);
    transition: all 0.3s ease;
}

.cert-card:hover {
    box-shadow: 0 12px 35px rgba(245, 200, 66, 0.08);
    border-color: rgba(245, 200, 66, 0.1);
}

.cert-card h5 {
    color: #0a1a3a;
    font-weight: 700;
}

.cert-card p {
    font-size: 16px;
    color: #5a6a7a;
}

/* ==========================================
   CERT LIST - UPDATED
========================================== */
.cert-list {
    padding-left: 8px;
    margin-bottom: 5px;
    list-style: none;
}

.cert-list li {
    font-size: 14px;
    margin-bottom: 6px;
    padding-left: 20px;
    position: relative;
    color: #2a3a5a;
}

.cert-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: #f5c842;
    font-weight: 700;
}

/* ==========================================
   BADGE ROW - UPDATED
========================================== */
.badge-row {
    margin-top: 10px;
    margin-bottom: 15px;
}

.trust-badge {
    text-align: center;
    padding: 12px 8px;
    background: rgba(10, 26, 58, 0.04);
    border-radius: 10px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.trust-badge i {
    font-size: 18px;
    color: #f5c842;
    margin-bottom: 5px;
    display: block;
    transition: all 0.3s ease;
}

.trust-badge h6 {
    font-size: 13px;
    margin: 0;
    font-weight: 600;
    color: #0a1a3a;
    transition: all 0.3s ease;
}

.trust-badge:hover {
    background: #0a1a3a;
    border-color: #f5c842;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(10, 26, 58, 0.15);
}

.trust-badge:hover i {
    color: #f5c842;
}

.trust-badge:hover h6 {
    color: #f5c842;
}

/* ==========================================
   CERT BUTTON - UPDATED
========================================== */
.cert-btn {
    display: inline-block;
    padding: 8px 18px;
    font-size: 14px;
    border-radius: 30px;
    background: #0a1a3a;
    color: #f5c842;
    text-decoration: none;
    transition: 0.3s ease;
    border: 1px solid rgba(245, 200, 66, 0.15);
    font-weight: 600;
}

.cert-btn:hover {
    background: #f5c842;
    color: #0a1a3a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 200, 66, 0.3);
    text-decoration: none;
}

/* ==========================================
   DOCUMENT PREVIEW - UPDATED
========================================== */
.doc-box {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(10, 26, 58, 0.06);
    border: 1px solid rgba(10, 26, 58, 0.06);
    transition: all 0.3s ease;
}

.doc-box:hover {
    box-shadow: 0 8px 30px rgba(245, 200, 66, 0.08);
    border-color: rgba(245, 200, 66, 0.12);
}

.doc-box iframe {
    width: 100%;
    height: 200px;
    border: none;
}

.small-doc iframe {
    height: 160px;
}

/* ==========================================
   RESPONSIVE
========================================== */
@media (max-width: 992px) {
    .doc-box iframe,
    .small-doc iframe {
        height: 180px;
    }

    .compact-cert .cert-heading h3 {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .compact-cert {
        /* padding: 10px 0; */
    }

    .compact-cert .cert-heading p {
        font-size: 16px;
    }

    .compact-cert .cert-heading h3 {
        font-size: 20px;
    }

    .cert-card {
        padding: 16px;
        border-radius: 12px;
    }

    .cert-card p {
        font-size: 13px;
    }

    .cert-list li {
        font-size: 13px;
    }

    .trust-badge {
        padding: 10px 6px;
    }

    .trust-badge i {
        font-size: 16px;
    }

    .trust-badge h6 {
        font-size: 12px;
    }

    .cert-btn {
        padding: 6px 16px;
        font-size: 13px;
    }

    .doc-box iframe {
        height: 150px;
    }

    .small-doc iframe {
        height: 130px;
    }
}

@media (max-width: 480px) {
    .compact-cert {
        /* padding: 8px 0; */
    }

    .compact-cert .cert-heading p {
        font-size: 16px;
        line-height: 1.6;
    }

    .compact-cert .cert-heading h3 {
        font-size: 18px;
    }

    .compact-cert .cert-heading h3::after {
        width: 40px;
        height: 2px;
    }

    .cert-card {
        padding: 14px;
        border-radius: 10px;
    }

    .cert-card p {
        font-size: 12px;
    }

    .cert-list {
        padding-left: 4px;
    }

    .cert-list li {
        font-size: 12px;
        margin-bottom: 4px;
        padding-left: 16px;
    }

    .trust-badge {
        padding: 8px 4px;
        border-radius: 8px;
    }

    .trust-badge i {
        font-size: 14px;
    }

    .trust-badge h6 {
        font-size: 11px;
    }

    .cert-btn {
        padding: 5px 14px;
        font-size: 12px;
        border-radius: 25px;
    }

    .doc-box {
        border-radius: 10px;
    }

    .doc-box iframe {
        height: 120px;
    }

    .small-doc iframe {
        height: 100px;
    }

    .badge-row {
        margin-top: 6px;
        margin-bottom: 10px;
    }

    .badge-row .col-4 {
        padding: 0 4px;
    }
}




/*::::::::::::::::::::::::::: css of client logo:::::::::::::::::::::::::::::::*/

/* ==========================================
   PREMIUM CLIENT SHOWCASE SECTION
   Mithila Tech Academy
========================================== */

.brand-one{
    position: relative;
    overflow: hidden;
    /* padding: 25px 0; */
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbff 50%,
        #ffffff 100%
    );
}

/* Background Glow */
.brand-one::before{
    content: "";
    position: absolute;
    top: -180px;
    left: -180px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        rgba(0,194,255,.12),
        transparent 70%
    );
}

.brand-one::after{
    content: "";
    position: absolute;
    bottom: -180px;
    right: -180px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(
        rgba(212,175,55,.10),
        transparent 70%
    );
}

.brand-one .container{
    position: relative;
    z-index: 2;
}

/* ==========================================
   BADGE
========================================== */

.brand-one .badge{
    background: linear-gradient(
        135deg,
        #D4AF37,
        #F7DC6F
    ) !important;

    color: #111;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;

    border-radius: 50px;

    padding: 12px 25px !important;

    box-shadow:
        0 10px 30px rgba(212,175,55,.25);
}

/* ==========================================
   HEADING
========================================== */

.brand-one h2{
    font-size: 42px;
    font-weight: 800;
    color: #0A2540;
    line-height: 1.2;
    margin-bottom: 20px;
}

.brand-one h2::after{
    content: '';
    display: block;

    width: 100px;
    height: 5px;

    margin: 20px auto 0;

    border-radius: 50px;

    background: linear-gradient(
        90deg,
        #00C2FF,
        #D4AF37
    );
}

.brand-one p{
    /* max-width: 900px; */
    margin: auto;
    /* font-size: 12px; */
    line-height: 32px;
    color: #010750;
}

/* ==========================================
   SLIDER WRAPPER
========================================== */

.brand-one__main-content{
    position: relative;
    padding: 15px 0;
}

.brand-one__main-content::before{
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 80%;
    height: 120px;

    background: radial-gradient(
        rgba(0,194,255,.06),
        transparent
    );

    z-index: -1;
}

/* ==========================================
   CLIENT CARD
========================================== */

.client-logo-wrapper{

    width: 240px;
    height: 140px;

    background: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    overflow: hidden;

    border-radius: 28px;

    border: 1px solid rgba(0,0,0,.05);

    transition: .45s ease;

    box-shadow:
        0 15px 40px rgba(0,0,0,.05);
}

/* Top Premium Line */

.client-logo-wrapper::before{

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #00C2FF,
        #D4AF37
    );
}

/* Corner Glow */

.client-logo-wrapper::after{

    content: "";

    position: absolute;

    top: -40px;
    right: -40px;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background: radial-gradient(
        rgba(0,194,255,.12),
        transparent
    );
}

/* Hover */

.client-logo-wrapper:hover{

    transform:
        translateY(-12px);

    box-shadow:
        0 30px 70px rgba(0,194,255,.15),
        0 10px 40px rgba(212,175,55,.10);
}

/* ==========================================
   LOGO IMAGE
========================================== */

.client-logo{

    max-width: 80%;
    max-height: 85px;

    object-fit: contain;

    opacity: .85;

    transition: .45s ease;

    filter: grayscale(100%);
}

.client-logo-wrapper:hover .client-logo{

    opacity: 1;

    filter: grayscale(0);

    transform: scale(1.08);
}

/* ==========================================
   SWIPER
========================================== */

.thm-swiper__slider{
    /* padding: 20px 0; */
}

.thm-swiper__slider .swiper-wrapper{
    transition-timing-function: linear !important;
}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:991px){

    .brand-one h2{
        font-size: 38px;
    }

}

@media(max-width:768px){

    .brand-one{
        /* padding: 35px 0; */
    }

    .brand-one h2{
        font-size: 30px;
    }

    .brand-one p{
        font-size: 14px;
        line-height: 1.6;
    }

    .client-logo-wrapper{
        width: 160px;
        height: 95px;
        border-radius: 20px;
    }

    .client-logo{
        max-height: 55px;
    }

}

.service-pills-wrapper{

    /*max-width:1100px;*/
    margin:auto;

}

.pill-heading{

    font-size:18px;

    font-weight:700;

    color:#0A2540;

    margin-bottom:25px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.service-pills{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

}

.service-pills span{

    display:inline-flex;

    align-items:center;

 padding: 6px 10px;

    background:#fff;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    color:#0A2540;

    border:1px solid rgba(0,194,255,.15);

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

    transition:.35s ease;

}

.service-pills span:hover{

    transform:translateY(-4px);

    background:
    linear-gradient(
    135deg,
    #00C2FF,
    #0A2540
    );

    color:#fff;

    box-shadow:
    0 12px 25px rgba(0,194,255,.20);

}

.client-name{

    margin-top:12px;

    font-size:15px;

    font-weight:700;

    color:#0A2540;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:220px;

    margin-left:auto;
    margin-right:auto;

    transition:.3s ease;

}

.swiper-slide:hover .client-name{

    color:#00C2FF;

}.client-name{

    margin-top:12px;

    font-size:15px;

    font-weight:700;

    color:#0A2540;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:220px;

    margin-left:auto;
    margin-right:auto;

    transition:.3s ease;

}

.swiper-slide:hover .client-name{

    color:#00C2FF;

}.client-name{

    margin-top:12px;

    font-size:15px;

    font-weight:700;

    color:#0A2540;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:220px;

    margin-left:auto;
    margin-right:auto;

    transition:.3s ease;

}

.swiper-slide:hover .client-name{

    color:#00C2FF;

}.client-name{

    margin-top:12px;

    font-size:15px;

    font-weight:700;

    color:#0A2540;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    max-width:220px;

    margin-left:auto;
    margin-right:auto;

    transition:.3s ease;

}

.swiper-slide:hover .client-name{

    color:#00C2FF;

}

.client-company-name{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:8px 10px;

    background:
    linear-gradient(
    90deg,
    #0A2540,
    #00C2FF
    );

    color:#fff;

    font-size:12px;

    font-weight:600;

    text-align:center;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* ==========================================
   SUCCESS STORIES SECTION
========================================== */

.brand-one {
    position: relative;
    overflow: hidden;
    /* padding: 60px 0; */
    background: linear-gradient(180deg, #ffffff, #f5f8ff, #ffffff);
}

.brand-one::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.brand-one::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(10, 26, 58, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ==========================================
   SECTION TAG - UPDATED
========================================== */
.success-tag {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    background: #0a1a3a;
    color: #f5c842;
    font-weight: 700;
    margin-bottom: 20px;
    border: 1px solid rgba(245, 200, 66, 0.15);
    box-shadow: 0 10px 25px rgba(10, 26, 58, 0.2);
    transition: all 0.3s ease;
}

.success-tag:hover {
    background: #f5c842;
    color: #0a1a3a;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(245, 200, 66, 0.3);
}

/* ==========================================
   TITLE - UPDATED
========================================== */
.brand-one h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #0a1a3a;
    line-height: 1.2;
    margin-bottom: 20px;
}

.brand-one h2::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #f5c842, #0a1a3a);
    margin: 15px auto 0;
    border-radius: 4px;
}

.section-subtitle {
    max-width: 850px;
    margin: auto;
    color: #5a6a7a;
    font-size: 18px;
    line-height: 32px;
}

/* ==========================================
   CARD - UPDATED
========================================== */
.placement-card {
    width: 260px;
    background: #fff;
    border-radius: 30px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: 0.4s ease;
    border: 1px solid rgba(10, 26, 58, 0.06);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
}

.placement-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #0a1a3a, #0a1a3a);
}

.placement-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 70px rgba(245, 200, 66, 0.12);
    border-color: rgba(245, 200, 66, 0.15);
}

/* ==========================================
   RIBBON - UPDATED
========================================== */
.card-ribbon {
    position: absolute;
    top: 15px;
    right: -35px;
    background: linear-gradient(135deg, #0a1a3a, #0a1a3a);
    color: #fff;
    padding: 8px 40px;
    font-size: 12px;
    font-weight: 700;
    transform: rotate(45deg);
    box-shadow: 0 4px 15px rgba(245, 200, 66, 0.2);
}

/* ==========================================
   IMAGE - UPDATED
========================================== */
.placement-img-wrapper {
    width: 110px;
    height: 110px;
    margin: 0 auto 20px;
    position: relative;
}

.placement-img-wrapper::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0A1A3B, #0a1a3a);
    z-index: 0;
}

.placement-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 4px;
}

/* ==========================================
   TEXT - UPDATED
========================================== */
.student-name {
    font-size: 18px;
    font-weight: 700;
    color: #0a1a3a;
    margin-bottom: 6px;
}

.course-name {
    font-size: 14px;
    color: #5a6a7a;
    margin-bottom: 15px;
    min-height: 40px;
}

/* ==========================================
   STATUS BADGES - UPDATED
========================================== */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 15px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Under Training */
.status-badge.intern {
    background: rgba(245, 200, 66, 0.15);
    color: #b8860b;
    border: 1px solid rgba(245, 200, 66, 0.2);
}

/* Completed */
.status-badge.completed {
    background: rgba(10, 26, 58, 0.08);
    color: #0a1a3a;
    line-height: 1.2;
    border: 1px solid rgba(10, 26, 58, 0.1);
}

/* Placed */
.status-badge.placed {
    background: rgba(245, 200, 66, 0.12);
    color: #b8860b;
    border: 1px solid rgba(245, 200, 66, 0.15);
}

/* Entrepreneur / Ongoing */
.status-badge.ongoing {
    background: rgba(10, 26, 58, 0.08);
    color: #0a1a3a;
    border: 1px solid rgba(10, 26, 58, 0.1);
}

/* ==========================================
   SLIDER
========================================== */
.swiper-slide {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.thm-swiper__slider .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* ==========================================
   RESPONSIVE - UPDATED
========================================== */
@media (max-width: 768px) {
    .brand-one {
        /* padding: 40px 0; */
    }

    .brand-one h2 {
        font-size: 24px;
    }

    .section-subtitle {
        font-size: 15px;
        line-height: 28px;
    }

    .placement-card {
        width: 220px;
        border-radius: 22px;
        padding: 24px 16px;
    }

    .placement-img-wrapper {
        width: 90px;
        height: 90px;
    }

    .placement-img-wrapper::before {
        inset: -6px;
    }

    .student-name {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .brand-one {
        /* padding: 30px 0; */
    }

    .success-tag {
        font-size: 11px;
        padding: 8px 16px;
    }

    .brand-one h2 {
        font-size: 22px;
    }

    .section-subtitle {
        font-size: 14px;
        line-height: 24px;
        padding: 0 15px;
    }

    .placement-card {
        width: 180px;
        border-radius: 18px;
        padding: 18px 12px;
    }

    .placement-img-wrapper {
        width: 70px;
        height: 70px;
        margin-bottom: 14px;
    }

    .placement-img-wrapper::before {
        inset: -5px;
    }

    .student-name {
        font-size: 14px;
    }

    .course-name {
        font-size: 12px;
        min-height: 30px;
    }

    .status-badge {
        font-size: 9px;
        padding: 2px 12px;
    }

    .card-ribbon {
        font-size: 10px;
        padding: 6px 30px;
        right: -30px;
        top: 12px;
    }
}


/* ==========================================
   STUDENT ACHIEVEMENT GALLERY
========================================= */
.testimonial-one {
    position: relative;
    padding: 40px 0;
    background: linear-gradient(180deg, #ffffff, #f5f8ff, #ffffff);
    overflow: hidden;
}

/* ==========================================
   SECTION TITLE
========================================== */
.gallery-tag {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 50px;
    background: #0a1a3a;
    color: #f5c842;
    font-weight: 700;
    margin-bottom: 20px;
    border: 1px solid rgba(245, 200, 66, 0.15);
    box-shadow: 0 10px 25px rgba(10, 26, 58, 0.2);
    transition: all 0.3s ease;
}

.gallery-tag:hover {
    background: #f5c842;
    color: #0a1a3a;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(245, 200, 66, 0.3);
}

.section-title__title {
    font-size: 42px;
    font-weight: 800;
    color: #0a1a3a;
    line-height: 1.2;
    margin-bottom: 20px;
}

.section-title__title::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #f5c842, #0a1a3a);
    margin: 15px auto 0;
    border-radius: 4px;
}

.gallery-subtitle {
    max-width: 850px;
    margin: auto;
    color: #000000;
    font-size: 18px;
    line-height: 32px;
}

/* ==========================================
   IMAGE CARD
========================================== */
.image-only-card {
    position: relative;
    height: 320px;
    width: 100%;
    overflow: hidden;
    border-radius: 30px;
    background: #fff;
    padding: 8px;
    border: 1px solid rgba(10, 26, 58, 0.06);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
    transition: 0.45s ease;
}

/* TOP GRADIENT - UPDATED */
.image-only-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #f5c842, #0a1a3a);
    z-index: 2;
}

/* CERTIFICATE BADGE - UPDATED */
.image-only-card::after {
    content: "Certificate Distribution";
    position: absolute;
    top: 18px;
    left: 18px;
    background: rgba(10, 26, 58, 0.9);
    backdrop-filter: blur(12px);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    color: #f5c842;
    z-index: 3;
    box-shadow: 0 5px 20px rgba(10, 26, 58, 0.15);
    border: 1px solid rgba(245, 200, 66, 0.1);
}

.image-only-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 80px rgba(245, 200, 66, 0.15);
    border-color: rgba(245, 200, 66, 0.2);
}

/* ==========================================
   IMAGE
========================================== */
.image-only-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 24px;
    transition: 0.6s ease;
}

.image-only-card:hover img {
    transform: scale(1.08);
}

/* ==========================================
   DARK OVERLAY - UPDATED
========================================== */
.image-only-card .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, rgba(10, 26, 58, 0.55));
}

/* ==========================================
   OWL
========================================== */
.testimonial-one__carousel .owl-dots,
.owl-theme .owl-dots {
    display: none !important;
}

.owl-carousel .owl-stage {
    padding: 15px 0;
}

/* ==========================================
   SHAPES - UPDATED
========================================== */
.testimonial-one-shape-2 {
    opacity: 0.15;
}

.testimonial-one-shape-3 {
    opacity: 0.12;
}

/* ==========================================
   MOBILE
========================================== */
@media (max-width: 768px) {
    .section-title__title {
        font-size: 32px;
    }

    .gallery-subtitle {
        font-size: 17px;
        line-height: 1.6;
    }

    .image-only-card {
        height: 260px;
        border-radius: 20px;
    }

    .image-only-card img {
        border-radius: 16px;
    }

    .image-only-card::after {
        font-size: 10px;
        padding: 6px 12px;
    }
}

@media (max-width: 480px) {
    .testimonial-one {
        padding: 30px 0;
    }

    .section-title__title {
        font-size: 24px;
    }

    .gallery-tag {
        font-size: 11px;
        padding: 8px 16px;
    }

    .image-only-card {
        height: 200px;
        border-radius: 16px;
        padding: 5px;
    }

    .image-only-card img {
        border-radius: 12px;
    }

    .image-only-card::after {
        font-size: 9px;
        padding: 4px 10px;
        top: 12px;
        left: 12px;
    }

    .image-only-card::before {
        height: 3px;
    }
}


/*:::::::::::::::::::::::::::::::::::review::::::::::::::::::::::::::::::::::*/

.google-review-section{

    /*padding:100px 0;*/

    background:
    linear-gradient(
    180deg,
    #ffffff,
    #f8fbff,
    #ffffff
    );

    overflow:hidden;

}

.review-tag{

    display:inline-block;

    padding:12px 25px;

    border-radius:50px;

    background:
    linear-gradient(
    135deg,
    #D4AF37,
    #F7DC6F
    );

    font-weight:700;

}

.review-desc{

/* max-width:700px; */

margin:15px auto;

color: #000000;
}

.review-slider{

    overflow:hidden;

    position:relative;

}

.review-track{

    display:flex;

    gap:25px;

    width:max-content;

    animation:
    scrollReviews 35s linear infinite;

}

.review-slider:hover .review-track{

    animation-play-state:paused;

}

.review-card{

/* max-width: 420px; */

background:#fff;

border-radius:25px;

padding:30px;

border:1px solid #edf2f7;

box-shadow:
    0 15px 40px rgba(0,0,0,.05);

flex-shrink:0;

transition:.4s;
}

.review-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 25px 60px rgba(66,133,244,.12);

}

.review-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

}

.review-user{

    display:flex;

    align-items:center;

}

.review-user img{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

    margin-right:15px;

}

.review-user h5{

    margin:0;

    font-size:18px;

    font-weight:700;

}

.review-user small{

    color:#16a34a;

    font-weight:600;

}

.google-logo{

    width:42px;

}

.stars{

    color:#FBBC05;

    font-size:20px;

    margin-bottom:15px;

}

.review-card p{

    color:#4b5563;

    line-height:30px;

    margin:0;

}

@keyframes scrollReviews{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

@media(max-width:768px){

.review-card{

    width:300px;

    padding:20px;

}

}

/*::::::::::::::::::::::::::::::custom price:::::::::::::::::::::::*/

.pricing-section {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 0;
    background: linear-gradient(180deg, #ffffff, #f5f8ff, #ffffff);
    position: relative;
    overflow: hidden;
}

.pricing-section::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.pricing-section::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(10, 26, 58, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.container {
    /* padding: 0 15px; */
    position: relative;
    z-index: 1;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

/* ===== BADGE - UPDATED ===== */
.pricing-badge {
    display: inline-block;
    background: #0a1a3a;
    color: #f5c842;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    padding: 0.35rem 1.2rem;
    border-radius: 40px;
    border: 1px solid rgba(245, 200, 66, 0.2);
    backdrop-filter: blur(2px);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.pricing-badge:hover {
    background: #f5c842;
    color: #0a1a3a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 200, 66, 0.3);
}

/* ===== TITLE - UPDATED ===== */
.pricing-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0a1a3a;
    margin: 0.5rem 0 0.75rem;
    line-height: 1.2;
}

.pricing-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, #f5c842, #0a1a3a);
    margin: 15px auto 0;
    border-radius: 4px;
}

/* ===== DESCRIPTION - UPDATED ===== */
.pricing-desc {
    margin: 0 auto;
    font-size: 16px;
    color: #000000;
    line-height: 1.6;
}

/* ===== CARD BASE - UPDATED ===== */
.pricing-card {
    background: #ffffff;
    border-radius: 36px;
    padding: 12px;
    box-shadow: 0 20px 50px -10px rgba(10, 26, 58, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(10, 26, 58, 0.06);
    backdrop-filter: blur(2px);
    position: relative;
    background: linear-gradient(145deg, #ffffff 0%, #f8faff 100%);
}

.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -14px rgba(245, 200, 66, 0.12);
    border-color: rgba(245, 200, 66, 0.15);
}

/* ===== FEATURED PLAN - UPDATED ===== */
.featured-plan {
    background: linear-gradient(135deg, #ffffff 0%, #fff9f0 100%);
    border: 2px solid #f5c842;
    box-shadow: 0 24px 48px -10px rgba(245, 200, 66, 0.18);
}

.featured-plan .popular-ribbon {
    position: absolute;
    top: -12px;
    right: 20px;
    background: #f5c842;
    color: #0a1a3a;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.4rem 1.2rem;
    border-radius: 40px;
    box-shadow: 0 4px 12px rgba(245, 200, 66, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ===== IMAGE STYLE ===== */
.plan-image {
    width: 100%;
    height: 150px;
    background: #eef3f8;
    border-radius: 28px;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: 0.2s;
    border: 1px solid rgba(10, 26, 58, 0.04);
}

.plan-image .img-placeholder-text {
    font-weight: 600;
    color: #0a1a3a;
    background: rgba(255, 255, 255, 0.5);
    padding: 0.4rem 1.2rem;
    border-radius: 60px;
    font-size: 0.9rem;
    backdrop-filter: blur(2px);
}

/* ===== CARD CONTENT - UPDATED ===== */
.pricing-card h3 {
    font-size: 1.7rem;
    font-weight: 700;
    color: #0a1a3a;
    letter-spacing: -0.02em;
    margin: 0 0 0.3rem;
}

.price {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0a1a3a;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0.2rem 0 0.1rem;
}

.price small {
    font-size: 1rem;
    font-weight: 500;
    color: #5a6a7a;
    margin-left: 4px;
}

.plan-subtitle {
    font-size: 0.9rem;
    color: #4a5e76;
    font-weight: 500;
    border-bottom: 1px solid rgba(10, 26, 58, 0.06);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

/* ===== PLAN LIST - UPDATED ===== */
.plan-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.8rem;
    flex: 1 0 auto;
    min-height: 160px;
    max-height: 160px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: #f5c842 #f1f5f9;
}

.plan-list::-webkit-scrollbar {
    width: 5px;
}

.plan-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.plan-list::-webkit-scrollbar-thumb {
    background: #f5c842;
    border-radius: 10px;
}

.plan-list li {
    font-size: 0.92rem;
    font-weight: 500;
    color: #1a2d44;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(10, 26, 58, 0.03);
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-list li::before {
    content: ">";
    color: #f5c842;
    font-weight: 700;
    font-size: 1rem;
    margin-right: 6px;
    display: inline-block;
}

/* ===== ACTION GROUP - UPDATED ===== */
.action-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(10, 26, 58, 0.06);
    padding-top: 1.2rem;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 60px;
    background: #f1f5f9;
    color: #0a1a3a;
    text-decoration: none;
    transition: 0.15s;
    border: 1px solid transparent;
    flex: 1 1 auto;
    min-width: 60px;
}

.action-btn i {
    font-size: 0.9rem;
}

.action-btn.whatsapp {
    background: rgba(245, 200, 66, 0.1);
    color: #b8860b;
    border-color: rgba(245, 200, 66, 0.2);
}

.action-btn.whatsapp:hover {
    background: rgba(245, 200, 66, 0.2);
    transform: translateY(-2px);
}

.action-btn.call {
    background: rgba(10, 26, 58, 0.08);
    color: #0a1a3a;
    border-color: rgba(10, 26, 58, 0.15);
}

.action-btn.call:hover {
    background: rgba(10, 26, 58, 0.15);
    transform: translateY(-2px);
}

.action-btn.email {
    background: rgba(245, 200, 66, 0.1);
    color: #b8860b;
    border-color: rgba(245, 200, 66, 0.2);
}

.action-btn.email:hover {
    background: rgba(245, 200, 66, 0.2);
    transform: translateY(-2px);
}

.action-btn.text {
    background: rgba(10, 26, 58, 0.06);
    color: #2f4058;
    border-color: rgba(10, 26, 58, 0.1);
}

.action-btn.text:hover {
    background: rgba(10, 26, 58, 0.12);
    transform: translateY(-2px);
}

/* ===== MAIN CTA - UPDATED ===== */
.pricing-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.9rem 1rem;
    border-radius: 60px;
    background: #0a1a3a;
    color: #f5c842;
    text-decoration: none;
    transition: 0.18s;
    border: 1px solid #0a1a3a;
    letter-spacing: 0.3px;
    margin-top: 0.3rem;
}

.pricing-btn:hover {
    background: #f5c842;
    color: #0a1a3a;
    border-color: #f5c842;
    transform: scale(0.98);
}

.featured-plan .pricing-btn {
    background: #f5c842;
    border-color: #f5c842;
    color: #0a1a3a;
}

.featured-plan .pricing-btn:hover {
    background: #e8b830;
    border-color: #e8b830;
}

.starting-badge {
    background: rgba(10, 26, 58, 0.06);
    border-radius: 60px;
    padding: 0.15rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #0a1a3a;
    display: inline-block;
    margin-left: 0.5rem;
    border: 1px solid rgba(10, 26, 58, 0.04);
}

/* ===== BOTTOM NOTE - UPDATED ===== */
.bottom-note {
    text-align: center;
    /* margin-top: 2.5rem; */
    font-size: 0.95rem;
    color: #000000;
    opacity: 0.75;
    border-top: 1px solid rgba(10, 26, 58, 0.06);
    padding-top: 2rem;
}

.bottom-note i {
    margin: 0 6px;
    color: #f5c842;
}

.bottom-note span {
    background: rgba(10, 26, 58, 0.06);
    padding: 0.2rem 1.2rem;
    border-radius: 40px;
    font-weight: 600;
    margin: 0 4px;
    color: #0a1a3a;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .col-lg-4 {
        width: 50%;
    }
}

@media (max-width: 700px) {
    .col-lg-4 {
        width: 100%;
    }
    .pricing-title {
        font-size: 2rem;
    }
}

@media (max-width: 500px) {
    .pricing-title {
        font-size: 22px;
    }
    .price {
        font-size: 2.1rem;
    }
    .action-group {
        flex-wrap: wrap;
    }
    .action-btn {
        flex: 1 0 40%;
    }
}




/*:::::::::::::::::::::::::::::::::::course programming css:::::::::::::::::::::::*/

.course-section{

position:relative;

overflow:hidden;

background:
linear-gradient(
135deg,
#f8fbff 0%,
#ffffff 50%,
#f4fbff 100%
);

}

.course-section:before{

content:'';

position:absolute;

top:-300px;
right:-300px;

width:600px;
height:600px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(0,194,255,.08),
transparent
);

}

.course-badge{

display:inline-block;

padding:10px 20px;

border-radius:50px;

background:#eef9ff;

color:#00a8ff;

font-weight:700;

font-size:13px;

}

.course-title{

font-size:46px;

font-weight:800;

color:#0A2540;

margin:20px 0;

}

.course-desc{

max-width:850px;

margin:auto;

color:#64748b;

font-size:17px;

}

.course-card{

position:relative;

height:520px;

padding:25px;

border-radius:25px;

   display:flex;

    flex-direction:column;

    overflow:hidden;

background:
rgba(255,255,255,.72);

backdrop-filter:blur(30px);

-webkit-backdrop-filter:blur(30px);

border:1px solid rgba(255,255,255,.6);

box-shadow:
0 20px 60px rgba(0,0,0,.05),
0 0 0 1px rgba(255,255,255,.4) inset;

transition:.5s;

z-index:1;

}

.course-card:before{

content:'';

position:absolute;

width:280px;
height:280px;

top:-120px;
right:-120px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(0,194,255,.18),
transparent 70%
);

z-index:-1;

}



.course-card:hover{

transform:
translateY(-15px)
scale(1.02);

box-shadow:
0 30px 80px rgba(0,194,255,.15),
0 20px 50px rgba(255,122,0,.08);

}

.featured-course{

background:
linear-gradient(
135deg,
rgba(255,255,255,.88),
rgba(240,250,255,.95)
);

border:2px solid rgba(0,194,255,.25);

transform:scale(1.04);

}

.popular-course{

position:absolute;

top:15px;

right:15px;

background:#FF7A00;

color:#fff;

padding:6px 15px;

border-radius:30px;

font-size:12px;

font-weight:700;

}

.course-icon{

width:95px;
height:95px;

border-radius:28px;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

background:
linear-gradient(
135deg,
#071a2f,
#00C2FF
);

color:#fff;

margin-bottom:25px;

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

position:relative;

}

.course-icon:before{

content:'';

position:absolute;

inset:4px;

border-radius:24px;

border:1px solid rgba(255,255,255,.25);

}

.course-card h3{

font-size:28px;

font-weight:800;

color:#0A2540;

margin-bottom:15px;

line-height:1.3;

}

.course-meta{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:20px;

}

.course-meta span{

padding:8px 14px;

border-radius:50px;

background:#eef9ff;

color:#0099dd;

font-size:13px;

font-weight:600;

}

.course-card ul{

padding:0;

/*margin:0 0 25px;*/

list-style:none;

flex:1;

    overflow-y:auto;

    margin:15px 0 20px;

    padding-right:8px;

}

/* Premium Scrollbar */

.course-card ul::-webkit-scrollbar{

    width:6px;

}

.course-card ul::-webkit-scrollbar-track{

    background:#edf2f7;

    border-radius:20px;

}

.course-card ul::-webkit-scrollbar-thumb{

    background:linear-gradient(
    180deg,
    #00C2FF,
    #0A2540
    );

    border-radius:20px;

}

/* Button Always Bottom */

.course-btn{

    margin-top:auto;

}

.course-card ul li{

padding:10px 0;

font-size:15px;

font-weight:500;

color:#334155;

display:flex;

align-items:center;

gap:10px;

border-bottom:1px dashed rgba(0,0,0,.08);

}

.course-card ul li:before{

content:'>';

width:24px;
height:24px;

border-radius:50%;

background:
linear-gradient(
135deg,
#00C2FF,
#0A2540
);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:12px;

font-weight:700;

flex-shrink:0;

}

.course-btn{

position:relative;

display:block;

text-align:center;

padding:16px;

border-radius:60px;

font-weight:700;

font-size:15px;

overflow:hidden;

background:
linear-gradient(
135deg,
#0A2540,
#00C2FF
);

color:#fff;

text-decoration:none;

box-shadow:
0 15px 35px rgba(0,194,255,.25);

transition:.4s;

}

.course-btn:hover{

transform:translateY(-3px);

color:#fff;

}

.course-btn:before{

content:'';

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.4),
transparent
);

transition:.7s;

}

.course-btn:hover:before{

left:100%;

}

@media(max-width:768px){

.course-title{

font-size:30px;

}

.featured-course{

transform:none;

}

}

.popular-course{

position:absolute;

top:18px;
right:-35px;

width:160px;

text-align:center;

padding:8px;

background:
linear-gradient(
135deg,
#ff7a00,
#ffb000
);

color:#fff;

font-size:12px;

font-weight:700;

transform:rotate(45deg);

box-shadow:
0 10px 30px rgba(255,122,0,.25);

}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.section-badge{

display:inline-block;

padding:10px 22px;

background:linear-gradient(135deg,#0A2540,#00C2FF);

color:#fff;

font-size:13px;

font-weight:700;

border-radius:50px;

letter-spacing:.5px;

margin-bottom:15px;

}

.section-title{

/* font-size:46px; */

/* font-weight:800; */

/* color:#0A2540; */

line-height:1.2;

margin-bottom:15px;
}

.section-desc{

max-width:850px;

margin:auto;

font-size: 17px;

line-height: 25px;

color: #000000;
}

@media(max-width:768px){

.section-title{
font-size:30px;
}

.section-desc{
font-size:15px;
line-height:26px;
}

}


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* =========================================
   STATS SECTION
========================================= */

.stats-strip{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;

    margin-top:40px;

}

/* =========================================
   CARD
========================================= */

.stat-item{

position:relative;

flex:1 1 calc(16.66% - 20px);

max-width:190px;

min-width: 130px;

padding: 8px 6px;

text-align:center;

border-radius:24px;

background:
    rgba(255,255,255,.92);

backdrop-filter:blur(15px);

-webkit-backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.8);

overflow:hidden;

transition:.4s ease;

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

/* Glow Top */

.stat-item:before{

    content:'';

    position:absolute;

    width:180px;
    height:180px;

    top:-100px;
    right:-100px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(0,194,255,.12),
    transparent
    );

}

/* Glow Bottom */

.stat-item:after{

    content:'';

    position:absolute;

    width:140px;
    height:140px;

    left:-70px;
    bottom:-70px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(255,122,0,.10),
    transparent
    );

}

/* Hover */

.stat-item:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 50px rgba(0,194,255,.12);

}

/* =========================================
   ICON
========================================= */

.stat-icon{

    width:70px;
    height:70px;

    margin:0 auto 18px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    #0A2540,
    #00C2FF
    );

    box-shadow:
    0 12px 30px rgba(0,194,255,.25);

    transition:.4s;

}

.stat-item:hover .stat-icon{

    transform:
    rotate(8deg)
    scale(1.08);

}

/* =========================================
   NUMBER
========================================= */

.stat-item h3{

margin:0;

/* font-size:42px; */

/* font-weight:800; */

line-height:1;

background:
    linear-gradient(
    135deg,
    #0A2540,
    #00C2FF
    );

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;
}

/* =========================================
   TEXT
========================================= */

.stat-item span{

display:block;

margin-top:10px;

/* font-size:14px; */

/* font-weight:600; */

color: #030304;

line-height:22px;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:991px){

    .stat-item{

        flex:0 0 calc(33.33% - 14px);

        max-width:calc(33.33% - 14px);

        min-width:auto;

    }

}

@media(max-width:768px){

    .stats-strip{

        gap:12px;

    }

    .stat-item{

        flex:0 0 calc(50% - 6px);

        max-width:calc(50% - 6px);

        padding:18px 10px;

    }

    .stat-icon{

        width:55px;
        height:55px;

        font-size:22px;

        border-radius:18px;

        margin-bottom:12px;

    }

    .stat-item h3{

        font-size:28px;

    }

    .stat-item span{

        font-size:12px;

        line-height:18px;

    }

}

/* =========================================
   EXTRA PREMIUM EFFECT
========================================= */

.stats-strip:hover .stat-item{

    opacity:.8;

}

.stats-strip .stat-item:hover{

    opacity:1;

}



/*::::::::::::::::::::::::PPT:::::::::::::::::::::::::::::*/

.cta-strip-section{

    margin:60px 0;

}

.cta-strip{

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

    border:1px solid #edf2f7;

}

/* Left */

.cta-brochure{

    width:280px;

    background:
    linear-gradient(
    135deg,
    #ff4b4b,
    #c81e1e
    );

    color:#fff;

    padding:30px;

    display:flex;

    align-items:center;

    gap:15px;

}

.cta-brochure i{

    font-size:45px;

}

.cta-brochure small{

    display:block;

    opacity:.8;

}

.cta-brochure h4{

    margin:0;

    font-size:24px;

}

/* Center */

.cta-content{

    flex:1;

    text-align:center;

    padding:20px 40px;

}

.cta-content h3{

    margin:0 0 8px;

    font-size:34px;

    font-weight:800;

    color:#0A2540;

}

.cta-content p{

    margin:0;

    color:#64748b;

}

/* Button */

.cta-action{

    padding:30px;

}

.cta-btn{

    display:inline-block;

    padding:16px 30px;

    border-radius:60px;

    background:
    linear-gradient(
    135deg,
    #0A2540,
    #00C2FF
    );

    color:#fff;

    font-weight:700;

    text-decoration:none;

    box-shadow:
    0 10px 25px rgba(0,194,255,.25);

}

.cta-btn:hover{

    color:#fff;

}

/* Mobile */

@media(max-width:991px){

.cta-strip{

    flex-direction:column;

}

.cta-brochure{

    width:100%;

    justify-content:center;

}

.cta-content{

    padding:25px;

}

.cta-content h3{

    font-size:26px;

}

.cta-action{

    padding:0 25px 25px;

}

.cta-btn{

    width:100%;

    text-align:center;

}

}
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::why choose us ::::::::::::::::::*/

.why-choose-us-section{

    padding:90px 0;

    background:
    linear-gradient(
    135deg,
    #f8fbff,
    #ffffff
    );

}

.why-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:
    linear-gradient(
    135deg,
    rgba(0,194,255,.12),
    rgba(255,122,0,.12)
    );

    color:#0A2540;

    font-weight:700;

    margin-bottom:15px;

}

.why-card{

    background:#fff;

    border-radius:30px;

    padding:35px 25px;

    text-align:center;

    height:100%;

    position:relative;

    overflow:hidden;

    border:1px solid #eef2f7;

    transition:.4s;

    box-shadow:
    0 15px 40px rgba(0,0,0,.05);

}

.why-card:before{

    content:'';

    position:absolute;

    width:150px;
    height:150px;

    top:-70px;
    right:-70px;

    border-radius:50%;

    background:
    radial-gradient(
    circle,
    rgba(0,194,255,.10),
    transparent
    );

}

.why-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 50px rgba(0,194,255,.15);

}

.featured{

    border:2px solid #00C2FF;

}

.why-icon{

    width:80px;
    height:80px;

    margin:0 auto 20px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
    135deg,
    #0A2540,
    #00C2FF
    );

    color:#fff;

    font-size:32px;

    box-shadow:
    0 10px 30px rgba(0,194,255,.25);

}

.why-card h3{

    font-size:24px;

    font-weight:700;

    color:#0A2540;

    margin-bottom:15px;

}

.why-card p{

    color:#64748b;

    line-height:28px;

    margin:0;

}

@media(max-width:768px){

.why-choose-us-section{

    padding:60px 0;

}

.why-card{

    padding:25px 20px;

}

.why-icon{

    width:65px;
    height:65px;

    font-size:24px;

}

.why-card h3{

    font-size:20px;

}

}

/*::::::::::::::::::::::::::::::::::::::FAQ::::::::::::::::::::::::::::::::::*/

/* ===== FAQ SECTION ===== */
.faq-section {
    background: linear-gradient(135deg, #f8faff 0%, #eef2f7 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.faq-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(10, 26, 58, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.faq-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* FAQ Badge */
.faq-badge {
    display: inline-block;
    background: #0a1a3a;
    color: #f5c842;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 8px 24px;
    border-radius: 50px;
    margin-bottom: 15px;
    border: 1px solid rgba(245, 200, 66, 0.15);
    transition: all 0.3s ease;
}

.faq-badge:hover {
    background: #f5c842;
    color: #0a1a3a;
    border-color: #f5c842;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 200, 66, 0.2);
}

/* Section Title */
.section-title__title {
    font-size: 2rem;
    font-weight: 700;
    color: #0a1a3a;
    margin-bottom: 15px;
    line-height: 1.2;
}

.section-title__title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #f5c842, #0a1a3a);
    margin: 12px auto 0;
    border-radius: 4px;
}

.anu-hero-desc {
    color: #5a6a7a;
    font-size: 17px;
    /* max-width: 650px; */
    margin: 0 auto;
    line-height: 1.7;
}

/* ===== ACCORDION / CARDS ===== */
.accordion {
    max-width: 850px;
    margin: 0 auto;
}

.card {
    background: #ffffff;
    border: 1px solid rgba(10, 26, 58, 0.08);
    border-radius: 14px !important;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.card:last-child {
    margin-bottom: 0;
}

.card:hover {
    border-color: rgba(245, 200, 66, 0.3);
    box-shadow: 0 6px 25px rgba(10, 26, 58, 0.08);
}

.card-header {
    background: #ffffff;
    padding: 0;
    border-bottom: none;
}

.card-header .btn-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    font-size: 17px;
    font-weight: 600;
    color: #0a1a3a;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    border: none;
    background: transparent;
}

.card-header .btn-link:hover {
    color: #f5c842;
    background: rgba(245, 200, 66, 0.04);
}

.card-header .btn-link:focus {
    box-shadow: none;
}

.card-header .btn-link::after {
    content: '+';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 16px;
    color: #0a1a3a;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 15px;
}

.card-header .btn-link.collapsed::after {
    content: '+';
    color: #7a8a9a;
}

.card-header .btn-link:not(.collapsed)::after {
    content: '-';
    color: #f5c842;
    transform: rotate(180deg);
}

.card-header .btn-link:not(.collapsed) {
    color: #f5c842;
    background: rgba(245, 200, 66, 0.05);
}

/* Accordion Body */
.accordion-collapse {
    transition: all 0.3s ease;
}

.card-body {
    padding: 0 24px 24px;
    color: #00112e;
    font-size: 16px;
    line-height: 1.7;
    border-top: 1px solid rgba(10, 26, 58, 0.06);
}

/* Active card styling */
.card:has(.btn-link:not(.collapsed)) {
    border-color: rgba(245, 200, 66, 0.3);
    box-shadow: 0 6px 30px rgba(245, 200, 66, 0.08);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .faq-section {
        padding: 60px 0;
    }

    .section-title__title {
        font-size: 32px;
    }

    .card-header .btn-link {
        font-size: 16px;
        padding: 16px 20px;
    }
}

@media (max-width: 768px) {
    .faq-section {
        padding: 45px 0;
    }

    .section-title__title {
        font-size: 26px;
    }

    .anu-hero-desc {
        font-size: 15px;
        padding: 0 15px;
    }

    .faq-badge {
        font-size: 12px;
        padding: 6px 18px;
    }

    .card-header .btn-link {
        font-size: 15px;
        padding: 14px 18px;
    }

    .card-body {
        font-size: 15px;
        padding: 0 18px 18px;
    }

    .card {
        border-radius: 12px !important;
        margin-bottom: 12px;
    }
}

@media (max-width: 480px) {
    .faq-section {
        padding: 35px 0;
    }

    .section-title__title {
        font-size: 22px;
    }

    .section-title__title::after {
        width: 40px;
        height: 3px;
    }

    .anu-hero-desc {
        font-size: 14px;
    }

    .faq-badge {
        font-size: 11px;
        padding: 5px 14px;
    }

    .card-header .btn-link {
        font-size: 14px;
        padding: 12px 14px;
    }

    .card-header .btn-link::after {
        font-size: 14px;
        margin-left: 10px;
    }

    .card-body {
        font-size: 14px;
        padding: 0 14px 14px;
    }

    .card {
        border-radius: 10px !important;
        margin-bottom: 10px;
    }
}


/*:::::::::::::::::::::::::::::::::::::::::::FOOTER::::::::::::::::::::::::::::::*/


.footer-top-strip{

background:linear-gradient(135deg,#ff7a00,#ff9a2f);

padding:30px;

border-radius:25px;

margin-bottom:-50px;

position:relative;

z-index:10;

color:#fff;

}

.footer-top-strip h3{

font-size:32px;

font-weight:800;

margin-bottom:8px;

}

.footer-cta-btn{

background:#fff;

color:#0A2540;

padding:15px 30px;

border-radius:50px;

font-weight:700;

display:inline-block;

text-decoration:none;

}

.premium-footer{

background:#071a35;

padding:100px 0 30px;

color:#fff;

position:relative;

}

.footer-logo{

max-width:280px;

margin-bottom:20px;

background:#fff;

padding:10px;

border-radius:15px;

}

.footer-about{

line-height: 1.6;

text-align: justify;

color:#d7e2f0;

margin-bottom:25px;
}

.footer-stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:12px;

margin-bottom:25px;

}

.footer-stats div{

background:rgba(255,255,255,.08);

padding:15px;

border-radius:15px;

text-align:center;

}

.footer-stats h4{

font-size:26px;

font-weight:800;

color:#00c2ff;

margin:0;

}

.footer-stats span{

font-size:12px;

}

.footer-social{

display:flex;

gap:12px;

}

.footer-social a{

width:45px;

height:45px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

border:1px solid rgba(255,255,255,.2);

color:#fff;

text-decoration:none;

transition:.3s;

}

.footer-social a:hover{

background:#00c2ff;

transform:translateY(-4px);

}

.footer-title{

font-size:24px;

font-weight:700;

margin-bottom:20px;

color:#fff;

}

.footer-pills{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.footer-pills a{

padding:10px 16px;

background:rgba(255,255,255,.08);

border-radius:50px;

color:#fff;

text-decoration:none;

font-size:14px;

transition:.3s;

}

.footer-pills a:hover{

background:#00c2ff;

}

.contact-card{

background:rgba(255,255,255,.08);

padding:20px;

border-radius:20px;

margin-bottom:20px;

}

.contact-card p{

margin-bottom:12px;

}

.contact-card i{

color:#00c2ff;

margin-right:10px;

}

.mini-map iframe{

width:100%;

height:220px;

border:0;

border-radius:20px;

}

.footer-bottom{

text-align:center;

padding-top:20px;

color:#cbd5e1;

}

.premium-footer hr{

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

margin:40px 0 20px;

}

@media(max-width:768px){

.footer-top-strip{

text-align:center;

}

.footer-top-strip h3{

font-size:24px;

}

.footer-stats{

grid-template-columns:repeat(2,1fr);

}

.footer-title{

margin-top:30px;

}

}


/*:::::::::::::::::::::::::::::::::::::::::::SOFTWARE:::::::::::::::::::::::::::::::*/
.software-section{

padding:100px 0;

background:
linear-gradient(
135deg,
#f7fbff 0%,
#ffffff 50%,
#eef8ff 100%
);

position:relative;

overflow:hidden;

}

.software-section:before{

content:'';

position:absolute;

width:400px;
height:400px;

background:
radial-gradient(
circle,
rgba(0,194,255,.12),
transparent
);

top:-200px;
right:-150px;

}

.software-hero{

text-align:center;

max-width:850px;

margin:auto auto 60px;

}

.software-svg img{

max-width:280px;

margin-bottom:25px;

}

.software-badge{

display:inline-block;

padding:10px 20px;

background:#e8f7ff;

color:#00a8ff;

border-radius:50px;

font-weight:700;

margin-bottom:15px;

}

.software-hero h2{

font-size:48px;

font-weight:800;

color:#0A2540;

margin-bottom:15px;

}

.software-hero p{

font-size:18px;

color:#64748b;

}

.software-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:25px;

}

.software-card{

background:#fff;

border-radius:24px;

padding:25px;

box-shadow:
0 15px 40px rgba(0,0,0,.05);

border:1px solid rgba(0,0,0,.05);

transition:.4s;

}

.software-card:hover{

transform:
translateY(-8px);

box-shadow:
0 25px 60px rgba(0,194,255,.12);

}

.software-head{

display:flex;

align-items:center;

justify-content:space-between;

}

.software-head h4{

font-size:20px;

font-weight:700;

margin:0;

color:#0A2540;

}

.software-head i{

font-size:22px;

color:#00C2FF;

}

.expand-btn{

width:40px;
height:40px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:
linear-gradient(
135deg,
#0A2540,
#00C2FF
);

color:#fff;

cursor:pointer;

}

.software-content{

display:none;

padding-top:15px;

color:#64748b;

line-height:28px;

}

.software-card.active .software-content{

display:block;

}

@media(max-width:991px){

.software-grid{

grid-template-columns:
repeat(2,1fr);

}

}

@media(max-width:576px){

.software-grid{

grid-template-columns:1fr;

}

.software-hero h2{

font-size:32px;

}

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


.stats-service-section{/* padding: 20px 0px; */}

.achievement-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:20px;

margin-top:30px;

}

.achievement-card {
    background: #182857;
    padding: 4px 0px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    border: 1px solid rgba(245, 200, 66, 0.08);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    cursor: default;
}

/* ==========================================
   GLOW EFFECT ON HOVER
   ========================================== */

.achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(245, 200, 66, 0.04), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.achievement-card:hover::before {
    opacity: 1;
}

/* ==========================================
   ICON - LEFT SIDE
   ========================================== */

.achievement-card i {
    font-size: 36px;
    color: #F5C842;
    flex-shrink: 0;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 200, 66, 0.08);
    border-radius: 14px;
    transition: all 0.4s ease;
    border: 1px solid rgba(245, 200, 66, 0.06);
}

.achievement-card:hover i {
    background: rgba(245, 200, 66, 0.18);
    transform: scale(1.05) rotate(-5deg);
    border-color: rgba(245, 200, 66, 0.2);
    box-shadow: 0 8px 25px rgba(245, 200, 66, 0.15);
}

/* ==========================================
   CONTENT - RIGHT SIDE
   ========================================== */

.achievement-card .content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ==========================================
   NUMBER
   ========================================== */

.achievement-card h4 {
    font-size: 16px;
    font-weight: 800;
    color: #F5C842;
    margin: 0;
    line-height: 1;
    letter-spacing: -0.5px;
    transition: all 0.4s ease;
}

.achievement-card:hover h4 {
    transform: scale(1.02);
    color: #ffffff;
}

/* ==========================================
   LABEL
   ========================================== */

.achievement-card span {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.3px;
    transition: color 0.4s ease;
}

.achievement-card:hover span {
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================
   CARD HOVER - 3D EFFECT
   ========================================== */

.achievement-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    border-color: rgba(245, 200, 66, 0.15);
}

.service-showcase{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-top:20px;

}

.service-box{

position:relative;

overflow:hidden;

padding:25px;

border-radius:24px;

background:
rgba(255,255,255,.88);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.7);

box-shadow:
0 10px 35px rgba(0,0,0,.06);

transition:.45s;

min-height:190px;

display:flex;

flex-direction:column;

justify-content:center;

}

.service-box:before{

content:'';

position:absolute;

width:180px;
height:180px;

top:-90px;
right:-90px;

border-radius:50%;

background:
radial-gradient(
rgba(0,194,255,.15),
transparent
);

}

.service-box:after{

content:'';

position:absolute;

width:140px;
height:140px;

bottom:-70px;
left:-70px;

border-radius:50%;

background:
radial-gradient(
rgba(255,122,0,.12),
transparent
);

}

.service-box:hover{

transform:
translateY(-10px);

box-shadow:
0 25px 60px rgba(0,194,255,.18);

}

.service-box i{

width:70px;
height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

font-size:30px;

margin-bottom:18px;

background:
linear-gradient(
135deg,
#0A2540,
#00C2FF
);

color:#fff;

box-shadow:
0 10px 30px rgba(0,194,255,.25);

}

.service-box h5{

font-size:20px;

font-weight:800;

margin-bottom:10px;

color:#0A2540;

line-height:30px;

}

.service-box p{

margin:0;

font-size:14px;

line-height:24px;

color:#64748b;

font-weight:500;

}

.service-box:hover i{

transform:
rotate(8deg)
scale(1.08);

transition:.4s;

}

/* Mobile */

@media(max-width:768px){

.service-showcase{

grid-template-columns:1fr;

gap:15px;

}

.service-box{

min-height:auto;

padding:22px;

}

.service-box h5{

font-size:18px;

line-height:28px;

}

}

.premium-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 28px;

border-radius:50px;

background:
linear-gradient(
135deg,
#ff7a00,
#ff9800
);

color:#fff;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.premium-btn:hover{

transform:translateY(-3px);

color:#fff;

}

@media(max-width:768px){

.achievement-grid{

grid-template-columns:1fr 1fr;

gap:12px;

}

.service-box{

padding:18px;

}

.service-box i{

width:55px;
height:55px;

font-size:22px;

}

}


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/* ============================================
   ROADMAP SECTION - CENTER LINE STYLE
   ============================================ */
<style>
/* ============================================
   ROADMAP SECTION - UPDATED WITH NEW COLORS
   ============================================ */

/* ----- Section ----- */
.roadmap-section {
    padding: 30px 20px 30px;
    background: linear-gradient(135deg, #f8faff 0%, #eef2f7 100%);
    position: relative;
    overflow: hidden;
}

.roadmap-section::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.roadmap-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ----- Header ----- */
.roadmap-header {
    text-align: center;
    margin-bottom: 50px;
}

.roadmap-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0a1a3a;
    color: #f5c842;
    padding: 6px 22px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
    border: 1px solid rgba(245, 200, 66, 0.15);
    transition: all 0.3s ease;
}

.roadmap-tag:hover {
    background: #f5c842;
    color: #0a1a3a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 200, 66, 0.2);
}

.roadmap-tag svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.roadmap-title {
    font-weight: 700;
    color: #0a1a3a;
    margin-bottom: 12px;
}

.roadmap-title .highlight {
    color: #f5c842;
}

.roadmap-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, #f5c842, #0a1a3a);
    margin: 16px auto 0;
    border-radius: 3px;
}

.roadmap-subtitle {
    font-size: 18px;
    color: #000000;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================
   TIMELINE - CENTER LINE
   ============================================ */

.roadmap-timeline {
    position: relative;
    padding: 20px 0 30px;
    margin-bottom: 0px;
}

/* Center Line - UPDATED */
.roadmap-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #f5c842, #0a1a3a);
}

/* ----- Each Row ----- */
.roadmap-item {
    display: flex;
    align-items: center;
    margin-bottom: 35px;
    position: relative;
}

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

/* ----- Left Side Content ----- */
.roadmap-item.left {
    justify-content: flex-start;
}

.roadmap-item.left .roadmap-content {
    padding-right: 70px;
    text-align: right;
    justify-content: flex-end;
}

.roadmap-item.left .roadmap-card {
    margin-left: auto;
}

/* ----- Right Side Content ----- */
.roadmap-item.right {
    justify-content: flex-end;
}

.roadmap-item.right .roadmap-content {
    padding-left: 70px;
    text-align: left;
    justify-content: flex-start;
}

.roadmap-item.right .roadmap-card {
    margin-right: auto;
}

/* ----- Content Wrapper ----- */
.roadmap-content {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 46%;
    position: relative;
}

/* ----- Center Dot - UPDATED ----- */
.roadmap-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f5c842;
    border: 3px solid #f8faff;
    box-shadow: 0 0 0 3px #f5c842;
    z-index: 2;
    transition: all 0.3s ease;
}

.roadmap-item:hover .roadmap-dot {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 0 0 5px #f5c842, 0 0 20px rgba(245, 200, 66, 0.3);
}

/* ----- Icon - UPDATED ----- */
.roadmap-icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    border-radius: 12px;
    background: rgba(10, 26, 58, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5c842;
    transition: all 0.3s ease;
}

.roadmap-item:hover .roadmap-icon {
    background: #0a1a3a;
    color: #f5c842;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(10, 26, 58, 0.15);
}

.roadmap-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ----- Card - UPDATED ----- */
.roadmap-card {
    flex: 1;
    background: #ffffff;
    border-radius: 18px;
    padding: 25px 28px;
    border: 1px solid rgba(10, 26, 58, 0.08);
    transition: all 0.3s ease;
    max-width: 550px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.roadmap-item:hover .roadmap-card {
    border-color: #f5c842;
    box-shadow: 0 8px 30px rgba(245, 200, 66, 0.12);
    transform: translateY(-6px);
}

.roadmap-step {
    display: inline-block;
    font-weight: 700;
    color: #f5c842;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(245, 200, 66, 0.1);
    padding: 2px 12px;
    border-radius: 20px;
    margin-bottom: 4px;
}

.roadmap-title-card {
    font-weight: 700;
    color: #0a1a3a;
    margin-bottom: 6px;
}

.roadmap-desc {
    color: #5a6a7a;
    line-height: 1.6;
    margin: 0 0 10px 0;
}

.roadmap-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.roadmap-tags span {
    font-weight: 500;
    color: #5a6a7a;
    padding: 2px 12px;
    background: #f5f7fb;
    border-radius: 20px;
    border: 1px solid rgba(10, 26, 58, 0.04);
}

.roadmap-tags span:hover {
    background: #0a1a3a;
    color: #f5c842;
}

/* ============================================
   STATS - UPDATED
   ============================================ */

.roadmap-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(10, 26, 58, 0.08);
    padding: 25px 20px;
    margin-bottom: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.stat-item {
    text-align: center;
    padding: 5px 10px;
}

.stat-divider {
    width: 1px;
    background: rgba(10, 26, 58, 0.08);
    align-self: stretch;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #0a1a3a;
    line-height: 1.2;
}

.stat-number .plus {
    color: #f5c842;
}

.stat-label {
    font-size: 13px;
    color: #5a6a7a;
    margin-top: 2px;
}

/* ============================================
   CTA - UPDATED
   ============================================ */

.roadmap-cta {
    text-align: center;
}

.roadmap-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 38px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    background: #0a1a3a;
    color: #f5c842;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(10, 26, 58, 0.2);
}

.roadmap-btn:hover {
    background: #f5c842;
    color: #0a1a3a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 200, 66, 0.3);
    text-decoration: none;
}

.roadmap-btn svg {
    transition: transform 0.3s ease;
    fill: currentColor;
}

.roadmap-btn:hover svg {
    transform: translateX(4px);
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 992px) {
    .roadmap-section { padding: 50px 16px 40px; }
    .roadmap-title { font-size: 28px; }
    
    .roadmap-content { width: 45%; }
    .roadmap-item.left .roadmap-content { padding-right: 30px; }
    .roadmap-item.right .roadmap-content { padding-left: 30px; }
    
    .roadmap-card { padding: 16px 18px; max-width: 300px; }
    
    .roadmap-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-divider { display: none; }
    .stat-number { font-size: 28px; }
}

/* Mobile */
@media (max-width: 768px) {
    .roadmap-section { padding: 40px 16px 30px; }
    .roadmap-title { font-size: 24px; }
    .roadmap-subtitle {font-size: 16px;}
    
    /* Hide center line on mobile */
    .roadmap-timeline::before { display: none; }
    
    .roadmap-item {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 20px;
        padding-left: 16px;
        border-left: 3px solid #f5c842;
    }
    
    .roadmap-item::before {
        content: '';
        position: absolute;
        left: -7px;
        top: 8px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #f5c842;
        border: 2px solid #f8faff;
        box-shadow: 0 0 0 2px #f5c842;
    }
    
    .roadmap-dot { display: none; }
    
    .roadmap-item.left .roadmap-content,
    .roadmap-item.right .roadmap-content {
        flex-direction: column;
        width: 100%;
        padding: 0;
        text-align: left;
        align-items: flex-start;
    }
    
    .roadmap-item.left .roadmap-card,
    .roadmap-item.right .roadmap-card {
        margin: 0;
        max-width: 100%;
        width: 100%;
    }
    
    .roadmap-icon {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        margin-bottom: 8px;
    }
    
    .roadmap-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .roadmap-card {
        padding: 14px 16px;
        border-radius: 14px;
    }
    
    .roadmap-title-card { font-size: 15px; }
    .roadmap-desc { font-size: 12px; }
    
    .roadmap-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 16px 14px;
    }
    
    .stat-number { font-size: 24px; }
    .stat-label { font-size: 12px; }
    
    .roadmap-btn {
        padding: 12px 28px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .roadmap-section { padding: 30px 12px 25px; }
    .roadmap-title {font-size: 22px;}
    .roadmap-tag { font-size: 10px; padding: 4px 16px; }
    
    .roadmap-item { padding-left: 14px; margin-bottom: 16px; }
    .roadmap-item::before { left: -6px; width: 8px; height: 8px; }
    
    .roadmap-icon {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }
    
    .roadmap-icon svg {
        width: 14px;
        height: 14px;
    }
    
    .roadmap-card {
        padding: 12px 14px;
        border-radius: 12px;
    }
    
    .roadmap-step { font-size: 9px; padding: 1px 10px; }
    .roadmap-title-card { font-size: 14px; }
    .roadmap-desc { font-size: 11px; }
    .roadmap-tags span { font-size: 9px; padding: 1px 10px; }
    
    .roadmap-stats {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 12px 10px;
        border-radius: 12px;
    }
    
    .stat-item { padding: 3px 6px; }
    .stat-number { font-size: 20px; }
    .stat-label { font-size: 11px; }
    
    .roadmap-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}
</style>


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/* ============================================
   ABOUT SECTION - MITHILA TECH ACADEMY THEME
   ============================================ */

/* ----- Container ----- */
.premium-about-content {
    padding: 10px 0;
}

/* ----- Badge Styles ----- */
.about-badge {
    display: inline-block;
    background: linear-gradient(135deg, #1a2a5a, #2a4a7a);
    color: #f5c842;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 24px;
    border-radius: 50px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(26, 42, 90, 0.3);
    border: 1px solid rgba(245, 200, 66, 0.15);
    position: relative;
}

/* ----- Title Styles ----- */
.about-title {
    font-size: 34px;
    font-weight: 800;
    color: #0a1a3a;
    margin-bottom: 8px;
    line-height: 1.2;
    letter-spacing: 1px;
    position: relative;
    display: inline-block;
}

.about-title::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #f5c842, #e8b830);
    border-radius: 4px;
}

/* ----- Strip/Banner Styles ----- */
.about-strip {
    display: inline-block;
    background: linear-gradient(135deg, #0a1a3a, #1a2a5a);
    color: #f5c842;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    margin: 12px 0 18px 0;
    border-left: 4px solid #f5c842;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 15px rgba(10, 26, 58, 0.15);
}

.about-strip::before {
    content: '>';
    color: #f5c842;
}

/* ----- Text Styles ----- */
.about-text {
    /* font-size: 15px; */
    /* line-height: 1.8; */
    /* color: #3a4a6a; */
    /* margin-bottom: 14px; */
    /* font-weight: 400; */
}

.about-text strong {
    color: #0a1a3a;
    font-weight: 600;
}

.about-text a {
    color: #1a2a5a;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    border-bottom: 1px solid rgba(26, 42, 90, 0.15);
}

.about-text a:hover {
    color: #f5c842;
    border-bottom-color: #f5c842;
}

/* ----- Feature Box Styles ----- */
.feature-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 7px 8px;
    background: #f8faff;
    border-radius: 12px;
    border: 1px solid #eef3fc;
    transition: all 0.3s ease;
    cursor: default;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(10, 26, 58, 0.1);
    border-color: #1a2a5a;
    background: #ffffff;
}

/*.feature-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(10, 26, 58, 0.1);
    border-color: #1a2a5a;
    background: #ffffff;
}*/

.feature-box i {
    font-size: 28px;
    color: #1a2a5a;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 42, 90, 0.08);
    border-radius: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
     background: linear-gradient(135deg, #0a1a3a, #1a2a5a);
    color: #f5c842;
    transform: scale(1.05);
}

/*.feature-box:hover i {
    background: linear-gradient(135deg, #0a1a3a, #1a2a5a);
    color: #f5c842;
    transform: scale(1.05);
}*/

.feature-box h5 {
    font-size: 15px;
    font-weight: 700;
    color: #0a1a3a;
    margin: 0 0 2px 0;
}

.feature-box span {
    /* font-size: 13px; */
    /* color: #5a6a8a; */
    font-weight: 600;
}

/* ============================================
   DECORATIVE ELEMENTS
   ============================================ */

/* Small decorative line */
.about-title-wrapper {
    position: relative;
}

.about-title-wrapper::before {
    content: 'â—†';
    color: #f5c842;
    font-size: 10px;
    margin-right: 8px;
}

/* Gold accent dots */
.about-text::first-letter {
    color: #f5c842;
    font-size: 20px;
    font-weight: 700;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 992px) {
    .about-title {
        font-size: 30px;
    }
    
    .about-text {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .about-title {
        font-size: 26px;
        letter-spacing: 0.5px;
    }
    
    .about-title::after {
        width: 50px;
    }
    
    .about-strip {
        font-size: 13px;
        padding: 8px 18px;
    }
    
    .about-text {
        font-size: 14px;
        line-height: 1.7;
    }
    
    .feature-box {
        padding: 14px 16px;
    }
    
    .feature-box i {
        font-size: 22px;
        width: 44px;
        height: 44px;
    }
    
    .feature-box h5 {
        font-size: 14px;
    }
    
    .feature-box span {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .about-badge {
        font-size: 10px;
        padding: 4px 18px;
    }
    
    .about-title {
        font-size: 22px;
        letter-spacing: 0.3px;
    }
    
    .about-title::after {
        width: 40px;
        height: 3px;
    }
    
    .about-strip {
        font-size: 12px;
        padding: 6px 8px;
        border-left-width: 3px;
    }
    
    .about-text {
        font-size: 14px;
        line-height: 1.6;
    }
    
    .feature-box {
        padding: 12px 14px;
        border-radius: 10px;
    }
    
    .feature-box i {
        font-size: 20px;
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    
    .feature-box h5 {
        font-size: 13px;
    }
    
    .feature-box span {
        font-size: 11px;
    }
}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.trust-badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:20px 0;
}

.trust-badges span{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.15);
    padding:8px 14px;
    border-radius:30px;
    font-size:13px;
    color:#fff;
}


/*::::::::::::::::::::::::::TECHNOLOGY WE WORK:::::::::::::::::::::::::::::::::::*/
/* ============================================
   TECH SHOWCASE - CUSTOM CLASSES (No Conflict)
   ============================================ */

/* ----- Main Section ----- */
.mt-tech-showcase {
    padding: 80px 0;
    background: #f8fafc;
}

/* ----- Filter Wrapper ----- */
.mt-tech-filter-wrap {
    background: #ffffff;
    padding: 18px;
    border-radius: 24px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
}

/* ----- Tabs ----- */
.mt-tech-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.mt-tech-tab {
    border: none;
    background: #f1f5f9;
    padding: 12px 22px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #334155;
    border: 1px solid transparent;
}

.mt-tech-tab:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
}

.mt-tech-tab.active {
    background: #0f172a;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.25);
    border-color: #0f172a;
}

/* ----- Tech Grid ----- */
.mt-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* ----- Tech Card ----- */
.mt-tech-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
    cursor: default;
}

.mt-tech-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border-color: #e2e8f0;
}

/* ----- Tech Icon Wrapper (Custom Class - No Conflict) ----- */
.mt-tech-icon-wrap {
    font-size: 38px;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 14px;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.mt-tech-card:hover .mt-tech-icon-wrap {
    background: #f1f5f9;
    transform: scale(1.05);
}

/* ----- Tech Card Text ----- */
.mt-tech-card span {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.mt-tech-card p {
    margin: 4px 0 0;
    font-size: 13px;
    color: #64748b;
}

/* ----- Hide/Show ----- */
.mt-hidden {
    display: none !important;
}

/* ----- Technology Colors (Custom Classes) ----- */
/* Frontend */
.mt-html5 { color: #E34F26; }
.mt-css3 { color: #1572B6; }
.mt-js { color: #F7DF1E; }
.mt-react { color: #61DAFB; }
.mt-bootstrap { color: #7952B3; }
.mt-tailwind { color: #38BDF8; }
.mt-sass { color: #CC6699; }
.mt-vue { color: #4FC08D; }
.mt-angular { color: #DD0031; }
.mt-typescript { color: #3178C6; }

/* Backend */
.mt-php { color: #777BB4; }
.mt-laravel { color: #FF2D20; }
.mt-node { color: #339933; }
.mt-java { color: #F89820; }
.mt-python { color: #3776AB; }
.mt-dotnet { color: #512BD4; }
.mt-django { color: #092E20; }
.mt-spring { color: #6DB33F; }
.mt-golang { color: #00ADD8; }
.mt-ruby { color: #CC342D; }

/* Database */
.mt-mysql { color: #4479A1; }
.mt-mongodb { color: #47A248; }
.mt-mariadb { color: #003545; }
.mt-firebase { color: #FFCA28; }
.mt-postgresql { color: #4169E1; }
.mt-redis { color: #DC382D; }
.mt-elasticsearch { color: #005571; }
.mt-sqlite { color: #003B57; }

/* Mobile */
.mt-android { color: #3DDC84; }
.mt-flutter { color: #02569B; }
.mt-reactnative { color: #61DAFB; }
.mt-kotlin { color: #7F52FF; }
.mt-swift { color: #FA7343; }
.mt-ionic { color: #3880FF; }

/* Digital Marketing */
.mt-seo { color: #16A34A; }
.mt-googleads { color: #4285F4; }
.mt-facebookads { color: #1877F2; }
.mt-wordpress { color: #21759B; }
.mt-analytics { color: #E37400; }
.mt-semrush { color: #FF6B00; }
.mt-hubspot { color: #FF7A59; }
.mt-mailchimp { color: #FFE01B; }

/* DevOps & Cloud */
.mt-docker { color: #2496ED; }
.mt-kubernetes { color: #326CE5; }
.mt-aws { color: #FF9900; }
.mt-azure { color: #0078D4; }
.mt-gcp { color: #4285F4; }
.mt-github { color: #181717; }
.mt-gitlab { color: #FC6D26; }
.mt-jenkins { color: #D24939; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .mt-tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .mt-tech-showcase {
        padding: 50px 0 40px;
    }
    
    .mt-tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    
    .mt-tech-card {
        padding: 16px 18px;
        border-radius: 14px;
    }
    
    .mt-tech-icon-wrap {
        font-size: 30px;
        width: 48px;
        height: 48px;
    }
    
    .mt-tech-card h4 {
        font-size: 16px;
    }
    
    .mt-tech-card p {
        font-size: 12px;
    }
    
    .mt-tech-tab {
        padding: 10px 16px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .mt-tech-showcase {
        padding: 35px 0 30px;
    }
    
    .mt-tech-filter-wrap {
        padding: 12px;
        border-radius: 16px;
    }
    
    .mt-tech-tabs {
        gap: 6px;
    }
    
    .mt-tech-tab {
        padding: 8px 8px;
        font-size: 12px;
        border-radius: 8px;
    }
    
    .mt-tech-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .mt-tech-card {
        padding: 14px 14px;
        border-radius: 12px;
        gap: 12px;
        flex-direction: column;
        text-align: center;
    }
    
    .mt-tech-icon-wrap {
        font-size: 30px;
        width: 50px;
        height: 50px;
    }
    
    .mt-tech-card h4 {
        font-size: 14px;
    }
    
    .mt-tech-card p {
        font-size: 11px;
    }
}



/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/* ==========================================
   C PROGRAMMING COURSE SECTION - PREMIUM
   ========================================== */

.praveen9123425048 {
    background: #1A2A59;
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}

/* ==========================================
   BACKGROUND DECORATIONS
   ========================================== */

.praveen9123425048::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -5%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.praveen9123425048::after {
    content: '';
    position: absolute;
    bottom: -15%;
    left: -5%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 200, 66, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* ==========================================
   CONTAINER
   ========================================== */

.praveen9123425048 .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================
   H2 HEADING - PREMIUM
   ========================================== */

.praveen9123425048 h2 {
    font-size: 38px;
    font-weight: 800;
    color: #F5C842;
    margin-bottom: 30px;
    line-height: 1.3;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 20px rgba(245, 200, 66, 0.08);
}

.praveen9123425048 h2::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #F5C842, transparent);
    margin: 12px auto 0;
    border-radius: 4px;
}

.praveen9123425048 h2.text-center::after {
    margin: 15px auto 0;
    background: linear-gradient(90deg, #F5C842, #1A2A59, #F5C842);
}

/* ==========================================
   H3 HEADING - PREMIUM
   ========================================== */

.praveen9123425048 h3 {
    font-size: 28px;
    font-weight: 700;
    color: #F5C842;
    margin-top: 40px;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
    padding-left: 20px;
    border-left: 4px solid #F5C842;
    text-shadow: 0 2px 15px rgba(245, 200, 66, 0.05);
}

/* ==========================================
   H4 HEADING - PREMIUM
   ========================================== */

.praveen9123425048 h4 {
    font-size: 24px;
    font-weight: 700;
    color: #F5C842;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
    display: inline-block;
}

.praveen9123425048 h4::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(245, 200, 66, 0.15);
    margin-top: 4px;
    border-radius: 2px;
}

/* ==========================================
   PARAGRAPHS - PREMIUM
   ========================================== */

.praveen9123425048 p {
    font-size: 17px;
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.praveen9123425048 p strong {
    color: #F5C842;
    font-weight: 700;
    padding: 0 4px;
    background: rgba(245, 200, 66, 0.06);
    border-radius: 4px;
}

/* ==========================================
   LISTS - PREMIUM
   ========================================== */

.praveen9123425048 ul {
    list-style: none;
    padding: 0;
    margin: 20px 0 25px;
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
}

.praveen9123425048 ul li {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    padding: 10px 0 10px 40px;
    position: relative;
    border-bottom: 1px solid rgba(245, 200, 66, 0.04);
    transition: all 0.3s ease;
}

.praveen9123425048 ul li:hover {
    padding-left: 48px;
    color: #ffffff;
}

.praveen9123425048 ul li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: #F5C842;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
}

.praveen9123425048 ul li:hover::before {
    transform: scale(1.3) rotate(90deg);
}

.praveen9123425048 ul li:last-child {
    border-bottom: none;
}

/* ==========================================
   IMAGES - PREMIUM
   ========================================== */

.praveen9123425048 img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.25);
    border: 2px solid rgba(245, 200, 66, 0.06);
    transition: all 0.5s ease;
    margin-bottom: 20px;
}

.praveen9123425048 img:hover {
    transform: scale(1.02);
    border-color: rgba(245, 200, 66, 0.15);
    box-shadow: 0 25px 60px rgba(245, 200, 66, 0.06);
}

/* ==========================================
   VIDEO BOX - PREMIUM
   ========================================== */

.praveen9123425048 .two-column {
    margin: 35px 0 40px;
    position: relative;
    z-index: 1;
}

.praveen9123425048 .two-column .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.praveen9123425048 .two-column .column {
    flex: 1;
    min-width: 280px;
}

.praveen9123425048 .video-box-three {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 24px;
    padding: 12px;
    border: 1px solid rgba(245, 200, 66, 0.06);
    transition: all 0.5s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.praveen9123425048 .video-box-three:hover {
    border-color: rgba(245, 200, 66, 0.15);
    box-shadow: 0 15px 50px rgba(245, 200, 66, 0.04);
    transform: translateY(-4px);
}

.praveen9123425048 .video-image {
    overflow: hidden;
    border-radius: 18px;
}

.praveen9123425048 .video-image img {
    margin-bottom: 0;
    border-radius: 18px;
    transition: transform 0.7s ease;
}

.praveen9123425048 .video-image:hover img {
    transform: scale(1.05);
}

/* ==========================================
   SPECIAL - GOLD BAR DIVIDER
   ========================================== */

.praveen9123425048 .gold-divider {
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #F5C842, transparent);
    margin: 30px 0;
    opacity: 0.2;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 992px) {
    .praveen9123425048 {
        padding: 55px 0;
    }

    .praveen9123425048 h2 {
        font-size: 32px;
    }

    .praveen9123425048 h3 {
        font-size: 25px;
    }

    .praveen9123425048 h4 {
        font-size: 22px;
    }

    .praveen9123425048 p {
        font-size: 16px;
    }

    .praveen9123425048 .two-column .row {
        flex-direction: column;
        gap: 25px;
    }

    .praveen9123425048 .two-column .column {
        width: 100%;
        min-width: unset;
    }
}

@media (max-width: 768px) {
    .praveen9123425048 {
        padding: 45px 0;
    }

    .praveen9123425048 h2 {
        font-size: 28px;
    }

    .praveen9123425048 h2::after {
        width: 60px;
        height: 3px;
    }

    .praveen9123425048 h3 {
        font-size: 22px;
        padding-left: 16px;
        border-left-width: 3px;
    }

    .praveen9123425048 h4 {
        font-size: 20px;
    }

    .praveen9123425048 p {
        font-size: 15px;
        line-height: 1.8;
    }

    .praveen9123425048 ul li {
        font-size: 15px;
        padding: 8px 0 8px 34px;
    }

    .praveen9123425048 ul li::before {
        font-size: 16px;
    }

    .praveen9123425048 img {
        border-radius: 16px;
    }

    .praveen9123425048 .video-box-three {
        padding: 8px;
        border-radius: 20px;
    }

    .praveen9123425048 .video-image {
        border-radius: 14px;
    }

    .praveen9123425048 .video-image img {
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    .praveen9123425048 {
        padding: 35px 0;
    }

    .praveen9123425048 h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .praveen9123425048 h2::after {
        width: 50px;
        height: 3px;
        margin-top: 10px;
    }

    .praveen9123425048 h3 {
        font-size: 20px;
        margin-top: 30px;
        margin-bottom: 14px;
        padding-left: 12px;
        border-left-width: 3px;
    }

    .praveen9123425048 h4 {
        font-size: 18px;
    }

    .praveen9123425048 p {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 14px;
    }

    .praveen9123425048 ul {
        margin: 14px 0 18px;
        gap: 2px;
    }

    .praveen9123425048 ul li {
        font-size: 14px;
        padding: 6px 0 6px 30px;
    }

    .praveen9123425048 ul li::before {
        font-size: 14px;
    }

    .praveen9123425048 ul li:hover {
        padding-left: 36px;
    }

    .praveen9123425048 .two-column {
        margin: 20px 0 25px;
    }

    .praveen9123425048 .two-column .row {
        gap: 15px;
    }

    .praveen9123425048 .video-box-three {
        padding: 5px;
        border-radius: 16px;
    }

    .praveen9123425048 .video-image {
        border-radius: 12px;
    }

    .praveen9123425048 .video-image img {
        border-radius: 12px;
    }

    .praveen9123425048 img {
        border-radius: 14px;
        margin-bottom: 14px;
    }

    .praveen9123425048 .gold-divider {
        margin: 20px 0;
    }
}