/*==========================================================
CODEEXAI
HOME PAGE
Version : 2.0
==========================================================*/


/*==========================================================
ROOT
==========================================================*/

:root{

    --home-primary:#16a34a;

    --home-primary-dark:#15803d;

    --home-light:#f0fdf4;

    --home-bg:#f8fafc;

    --home-border:#e5e7eb;

    --home-text:#111827;

    --home-muted:#6b7280;

    --home-shadow:

        0 10px 30px rgba(0,0,0,.06);

    --home-shadow-lg:

        0 25px 60px rgba(0,0,0,.12);

}


/*==========================================================
COMMON
==========================================================*/

.hero-section,
.section,
.home-cta{

    position:relative;

}

.section{

    padding:48px 0;

}

.section-heading{

    margin-bottom:24px;

}

.section-heading.text-center{

    max-width:700px;

    margin:auto;

    margin-bottom:28px;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:40px;

    background:var(--home-light);

    color:var(--home-primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

    margin-bottom:18px;

}

.section-heading h2{

    font-size:25px;

    font-weight:800;

    line-height:1.3;

    color:var(--home-text);

    margin-bottom:6px;

}

.section-heading p{

    font-size:14px;

    color:var(--home-muted);

    line-height:1.55;

}

.section-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--home-primary);

    font-weight:700;

    text-decoration:none;

}

.section-link:hover{

    color:var(--home-primary-dark);

}


/*==========================================================
HERO
==========================================================*/

.hero-section{

    position:relative;

    padding:40px 10px 30px 10px;

    background:linear-gradient(180deg,#f7fdf9 0%,#ffffff 55%,#f8fafc 100%);

}

.hero-bg-clip{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}

.hero-bg-circle{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.hero-circle-1{

    width:360px;

    height:360px;

    top:-160px;

    right:-160px;

    background:

        rgba(22,163,74,.06);

}

.hero-circle-2{

    width:300px;

    height:300px;

    left:-140px;

    bottom:-140px;

    background:

        rgba(22,163,74,.05);

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 15px;

    border-radius:40px;

    background:#ffffff;

    border:1px solid #bbf7d0;

    color:var(--home-primary);

    font-size:13px;

    font-weight:700;

    margin-bottom:14px;

    box-shadow:

        0 8px 25px rgba(22,163,74,.08);

}

.hero-title{

    font-size:38px;

    line-height:1.16;

    font-weight:800;

    color:#111827;

    letter-spacing:-.5px;

    margin-bottom:10px;

}

.hero-title span{

    color:var(--home-primary);

}

.hero-description{

    max-width:580px;

    font-size:15px;

    line-height:1.6;

    color:#64748b;

    margin-bottom:16px;

}
/*==========================================================
HERO BUTTONS
==========================================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:30px;

}

.hero-btn-primary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:15px 28px;

    background:var(--home-primary);

    color:#fff;

    border-radius:14px;

    font-size:15px;

    font-weight:700;

    box-shadow:

        0 10px 25px rgba(22,163,74,.25);

    transition:.3s;

}

.hero-btn-primary:hover{

    background:var(--home-primary-dark);

    color:#fff;

    transform:translateY(-3px);

}

.hero-btn-primary i{

    transition:.3s;

}

.hero-btn-primary:hover i{

    transform:translateX(4px);

}

.hero-btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 28px;

    background:#fff;

    color:#374151;

    border:1px solid #d1d5db;

    border-radius:14px;

    font-size:15px;

    font-weight:700;

    transition:.3s;

}

.hero-btn-secondary:hover{

    background:#f8fafc;

    color:#111827;

    border-color:#9ca3af;

}


/*==========================================================
HERO STATS
==========================================================*/

.hero-stats{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

}

.hero-stat{

    display:flex;

    align-items:center;

    gap:12px;

    background:#fff;

    padding:11px 14px;

    border-radius:14px;

    border:1px solid #edf2f7;

    box-shadow:

        0 8px 24px rgba(0,0,0,.05);

    min-width:150px;

}

.hero-stat:hover{

    transform:translateY(-3px);

    transition:.3s;

}

.hero-stat-icon{

    width:38px;

    height:38px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--home-light);

    color:var(--home-primary);

    font-size:16px;

}

.hero-stat h4{

    margin:0;

    font-size:19px;

    font-weight:800;

    color:#111827;

}

.hero-stat span{

    display:block;

    margin-top:2px;

    color:#64748b;

    font-size:12px;

}


/*==========================================================
RIGHT PANEL
==========================================================*/

.hero-panel{

    background:#fff;

    border-radius:24px;

    padding:28px;

    border:1px solid #edf2f7;

    box-shadow:

        0 20px 50px rgba(0,0,0,.08);

}

.hero-panel-header{

    margin-bottom:24px;

}

.hero-panel-header h5{

    font-size:24px;

    font-weight:800;

    margin-bottom:4px;

    color:#111827;

}

.hero-panel-header span{

    color:#64748b;

    font-size:14px;

}


/*==========================================================
TRENDING TECHNOLOGY
==========================================================*/

.hero-track-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.hero-track{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px;

    background:#fff;

    border:1px solid #edf2f7;

    border-radius:18px;

    text-decoration:none;

    transition:.3s;

}

.hero-track:hover{

    background:#f9fffb;

    border-color:#86efac;

    transform:translateX(6px);

}

.hero-track-left{

    display:flex;

    align-items:center;

    gap:16px;

}

.hero-track-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    background:

        linear-gradient(

            135deg,

            #16a34a,

            #22c55e

        );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.hero-track h6{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:#111827;

}

.hero-track small{

    display:block;

    margin-top:3px;

    color:#6b7280;

    font-size:13px;

}

.hero-track>i{

    font-size:28px;

    color:var(--home-primary);

    transition:.3s;

}

.hero-track:hover>i{

    transform:translateX(6px);

}


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

.hero-panel{

    animation:heroFloat 6s ease-in-out infinite;

}

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==========================================================
POPULAR TECHNOLOGIES
==========================================================*/

.technology-section{

    background:#ffffff;

}

.technology-section .section-heading{

    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:60px;

}

.technology-card{

    position:relative;

    height:100%;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #e8edf3;

    border-radius:22px;

    padding:14px;

    transition:.3s;

    box-shadow:

        0 10px 28px rgba(0,0,0,.05);

    color:inherit;

}

.technology-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 24px 48px rgba(0,0,0,.1);

    color:inherit;

}

.technology-image-wrap{

    position:relative;

    height:150px;

    border-radius:16px;

    background:#f1f8f3;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:16px;

    overflow:hidden;

}

.technology-image{

    max-width:65%;

    max-height:65%;

    object-fit:contain;

}

.technology-logo-fallback{

    font-size:44px;

    color:var(--home-primary);

}

.technology-content{

    flex:1;

    padding:0 2px;

}

.technology-level{

    display:inline-flex;

    align-items:center;

    padding:3px 9px;

    border-radius:30px;

    background:#eafcf0;

    color:var(--home-primary-dark);

    font-size:10px;

    font-weight:700;

    margin-bottom:6px;

}

.technology-content h3{

    font-size:16px;

    font-weight:800;

    margin-bottom:4px;

    color:#111827;

}

.technology-content p{

    color:#64748b;

    font-size:12.5px;

    line-height:1.5;

    margin:0;

}

.technology-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:

        14px
        2px
        2px;

    margin-top:8px;

    border-top:1px solid #edf2f7;

}

.technology-count{

    color:#64748b;

    font-size:14px;

}

.technology-count strong{

    display:block;

    color:#111827;

    font-size:20px;

    font-weight:800;

    line-height:1;

    margin-bottom:2px;

}

.technology-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    width:auto;

    height:40px;

    padding:0 16px;

    border-radius:30px;

    background:var(--home-primary);

    color:#fff;

    font-size:13.5px;

    font-weight:700;

    white-space:nowrap;

    transition:.3s;

    flex-shrink:0;

}

.technology-button i{

    font-size:14px;

    transition:transform .3s;

}

.technology-card:hover .technology-button{

    background:var(--home-primary-dark);

}

.technology-card:hover .technology-button i{

    transform:translateX(3px);

}

/*==========================================================
FEATURE SECTION
==========================================================*/

.feature-section{

    background:#f8fafc;

    position:relative;

    overflow:hidden;

}

.feature-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    top:-180px;

    border-radius:50%;

    background:rgba(22,163,74,.04);

}

.feature-section .container{

    position:relative;

    z-index:2;

}

.feature-card{

    height:100%;

    background:#ffffff;

    border:1px solid #e8edf3;

    border-radius:16px;

    padding:20px 18px;

    text-align:center;

    transition:.35s;

    box-shadow:

        0 10px 30px rgba(0,0,0,.05);

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 30px 60px rgba(0,0,0,.12);

}

.feature-icon{

    width:44px;

    height:44px;

    margin:0 auto 10px;

    border-radius:13px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    color:#ffffff;

    background:

        linear-gradient(

            135deg,

            #16a34a,

            #22c55e

        );

    transition:.35s;

}

.feature-card:hover .feature-icon{

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

}

.feature-card:nth-child(2) .feature-icon{

    background:

        linear-gradient(

            135deg,

            #059669,

            #34d399

        );

}

.feature-card:nth-child(3) .feature-icon{

    background:

        linear-gradient(

            135deg,

            #9333ea,

            #c026d3

        );

}

.feature-card:nth-child(4) .feature-icon{

    background:

        linear-gradient(

            135deg,

            #ea580c,

            #fb923c

        );

}

.feature-card h4{

    font-size:16px;

    font-weight:800;

    color:#111827;

    margin-bottom:6px;

}

.feature-card p{

    color:#64748b;

    line-height:1.5;

    font-size:12.5px;

    margin:0;

}


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

.feature-card{

    animation:fadeUp .6s ease both;

}

.feature-card:nth-child(2){

    animation-delay:.08s;

}

.feature-card:nth-child(3){

    animation-delay:.16s;

}

.feature-card:nth-child(4){

    animation-delay:.24s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*==========================================================
LEARNING ROADMAP
==========================================================*/

.roadmap-section{

    background:#ffffff;

}

.roadmap{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:0;

    margin-top:22px;

}

.roadmap-item{

    flex:1;

    position:relative;

    text-align:center;

    padding:0 18px;

}

.roadmap-number{

    width:44px;

    height:44px;

    margin:0 auto 10px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );

    color:#fff;

    font-size:16px;

    font-weight:800;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
        0 10px 22px rgba(22,163,74,.28);

}

.roadmap-item h4{

    font-size:16px;

    font-weight:800;

    margin-bottom:6px;

    color:#111827;

}

.roadmap-item p{

    font-size:15px;

    line-height:1.8;

    color:#64748b;

    margin:0;

}

.roadmap-line{

    flex:0 0 90px;

    height:4px;

    margin-top:42px;

    border-radius:50px;

    background:
        linear-gradient(
            90deg,
            #16a34a,
            #86efac
        );

}


/*==========================================================
CTA
==========================================================*/

.home-cta{

    padding:90px 0;

    background:#f8fafc;

}

.cta-box{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #15803d,
            #16a34a
        );

    border-radius:18px;

    padding:32px;

    color:#fff;

    box-shadow:
        0 16px 36px rgba(22,163,74,.25);

}

.cta-box::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    right:-130px;

    top:-130px;

    border-radius:50%;

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

}

.cta-box::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    left:-70px;

    bottom:-70px;

    border-radius:50%;

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

}

.cta-box>*{

    position:relative;

    z-index:2;

}

.cta-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    border-radius:40px;

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

    color:#fff;

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}

.cta-box h2{

    color:#fff;

    font-size:24px;

    font-weight:800;

    margin-bottom:8px;

}

.cta-box p{

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

    font-size:14px;

    line-height:1.6;

    margin:0;

}

.cta-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 34px;

    border-radius:14px;

    background:#fff;

    color:#15803d;

    font-weight:700;

    font-size:16px;

    transition:.3s;

}

.cta-btn:hover{

    background:#f8fafc;

    color:#166534;

    transform:translateY(-4px);

}

.cta-btn i{

    transition:.3s;

}

.cta-btn:hover i{

    transform:translateX(5px);

}

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

@media (max-width:1200px){

    .hero-title{

        font-size:38px;

    }

    .technology-section .section-heading{

        flex-direction:column;

        align-items:flex-start;

    }

    .roadmap{

        flex-wrap:wrap;

        gap:28px;

    }

    .roadmap-line{

        display:none;

    }

    .roadmap-item{

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

    }

}

@media (max-width:992px){

    .hero-section{

        padding:32px 0;

    }

    .hero-title{

        font-size:34px;

    }

    .hero-description{

        font-size:15px;

    }

    .hero-panel{

        margin-top:36px;

    }

    .hero-buttons{

        flex-wrap:wrap;

    }

    .hero-stats{

        gap:14px;

    }

    .hero-stat{

        flex:1 1 0;

        min-width:0;

    }

    .section{

        padding:40px 0;

    }

    .section-heading h2{

        font-size:22px;

    }

    .technology-card{

        border-radius:18px;

    }

    .cta-box{

        padding:26px;

        text-align:center;

    }

    .cta-box h2{

        font-size:22px;

    }

}

@media (max-width:768px){

    .hero-section{

        padding:28px 0;

    }

    .hero-title{

        font-size:28px;

        line-height:1.25;

    }

    .hero-description{

        font-size:14px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .hero-btn-primary,

    .hero-btn-secondary{

        justify-content:center;

        width:100%;

    }

    .hero-stats{

        flex-direction:row;

        flex-wrap:nowrap;

        gap:8px;

    }

    .hero-stat{

        flex:1 1 0;

        min-width:0;

        width:auto;

        padding:10px 8px;

        gap:8px;

        border-radius:14px;

    }

    .hero-stat-icon{

        width:34px;

        height:34px;

        min-width:34px;

        border-radius:10px;

        font-size:14px;

    }

    .hero-stat h4{

        font-size:15px;

    }

    .hero-stat span{

        font-size:10px;

        white-space:nowrap;

    }

    .hero-panel{

        padding:18px;

        border-radius:16px;

    }

    .hero-track{

        padding:12px;

    }

    .section{

        padding:34px 0;

    }

    .section-heading{

        margin-bottom:20px;

    }

    .section-heading h2{

        font-size:20px;

    }

    /* -----------------------------------------------------
       COMPACT TECHNOLOGY CARDS ON MOBILE / TABLET
       Below 768px we drop the badge, description, topic
       count and Explore button — just the logo/image and
       the technology name remain, in a smaller card.
    ----------------------------------------------------- */

    .technology-card{

        padding:8px;

        border-radius:14px;

    }

    .technology-image-wrap{

        height:72px;

        margin-bottom:8px;

        border-radius:10px;

    }

    .technology-logo-fallback{

        font-size:26px;

    }

    .technology-level,
    .technology-content p,
    .technology-footer{

        display:none;

    }

    .technology-content{

        flex:none;

        padding:0 2px;

        text-align:center;

    }

    .technology-content h3{

        font-size:12.5px;

        margin-bottom:0;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;

    }

    .feature-card{

        padding:16px 14px;

    }

    .feature-icon{

        width:40px;

        height:40px;

        font-size:16px;

    }

    .roadmap{

        flex-direction:column;

        gap:16px;

    }

    .roadmap-item{

        width:100%;

    }

    .roadmap-number{

        width:40px;

        height:40px;

        font-size:15px;

    }

    .cta-box{

        padding:22px 18px;

        border-radius:16px;

    }

    .cta-box h2{

        font-size:20px;

    }

    .cta-box p{

        font-size:13.5px;

    }

    .cta-btn{

        width:100%;

        justify-content:center;

        margin-top:16px;

    }

}

@media (max-width:576px){

    .hero-title{

        font-size:24px;

    }

    .hero-badge{

        font-size:12px;

        padding:8px 14px;

    }

    .section-heading h2{

        font-size:19px;

    }

    .section-heading p{

        font-size:13px;

    }

    .technology-image-wrap{

        height:64px;

    }

    .feature-card h4{

        font-size:15px;

    }

    .roadmap-item h4{

        font-size:15px;

    }

    .cta-box h2{

        font-size:18px;

    }

}


/*==========================================================
SMOOTH EFFECTS
==========================================================*/

.hero-track,
.technology-card,
.feature-card,
.cta-btn,
.hero-btn-primary,
.hero-btn-secondary,
.technology-button{

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        background .3s ease,

        color .3s ease;

}


/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#16a34a;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#eef2f7;

}


/*==========================================================
SELECTION
==========================================================*/

::selection{

    background:#16a34a;

    color:#fff;

}


/*==========================================================
FOCUS
==========================================================*/

button:focus,
a:focus,
input:focus{

    outline:none;

}


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

img{

    max-width:100%;

    display:block;

}

/*==========================================================
HERO SEARCH BAR
(pill search bar in the site's green theme, now built
directly into the centered hero section)
==========================================================*/

.hero-search-form{

    width:100%;

    max-width:680px;

    margin:0 auto 14px;

}

.sl-search-container{

    position:relative;

    width:100%;

}

.sl-search-wrapper{

    position:relative;

    width:100%;

    border-radius:999px;

    background:linear-gradient(135deg,#4ade80 0%,var(--home-primary) 100%);

    padding:6px;

    display:flex;

    align-items:center;

    box-shadow:
        0 10px 26px -8px rgba(22,163,74,.5),
        inset 0 1px 0 rgba(255,255,255,.25);

}

.sl-search-icon{

    color:#ffffff;

    font-size:19px;

    margin-left:16px;

    margin-right:10px;

    flex-shrink:0;

}

.sl-search-input{

    flex:1;

    min-width:0;

    border:none;

    background:transparent;

    padding:13px 8px;

    font-size:15.5px;

    color:#ffffff;

    font-weight:500;

}

.sl-search-input::placeholder{

    color:rgba(255,255,255,.8);

}

.sl-search-input:focus{

    outline:none;

}

.sl-search-btn{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#ffffff;

    color:var(--home-primary-dark);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:17px;

    flex-shrink:0;

    border:none;

    cursor:pointer;

    box-shadow:0 4px 10px rgba(0,0,0,.12);

    transition:.2s;

}

.sl-search-btn:hover{

    transform:translateX(2px);

    background:#f0fdf4;

}


/*==========================================================
HERO SEARCH SUGGESTIONS (live results as you type)
==========================================================*/

.sl-suggestions{

    position:absolute;

    top:100%;

    left:0;

    right:0;

    margin-top:10px;

    background:#fff;

    border:1px solid #e6e9ef;

    border-radius:20px;

    overflow-y:auto;

    overflow-x:hidden;

    max-height:360px;

    box-shadow:0 16px 40px rgba(0,0,0,.12);

    display:none;

    z-index:20;

    text-align:left;

}

.start-learning-tags{

    margin-top:12px;

    font-size:14px;

    color:var(--home-muted);

    display:flex;

    gap:10px;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

}

.start-learning-tags a{

    color:var(--home-primary);

    font-weight:600;

    text-decoration:none;

    padding:4px 12px;

    border-radius:999px;

    background:var(--home-light);

    transition:.2s;

}

.start-learning-tags a:hover{

    background:#dcfce7;

}


/*==========================================================
CENTERED HERO LAYOUT
(single centered column: badge, title, description, search,
tags, explore link, stats — replaces the old two-column hero
+ separate "Start Learning" section)
==========================================================*/

.hero-section-centered{

    padding:24px 10px 22px;

    min-height:calc(100vh - 114px);

    display:flex;

    align-items:center;

}

.hero-section-centered .container{

    position:relative;

    z-index:1;

    width:100%;

}

.hero-center{

    max-width:820px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.hero-section-centered .hero-description{

    margin:0 auto 16px;

}

.hero-explore-link{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:var(--home-muted);

    font-size:13.5px;

    font-weight:600;

    margin:14px 0 16px;

    text-decoration:none;

    transition:color .2s ease;

}

.hero-explore-link:hover{

    color:var(--home-primary);

}

.hero-explore-link i{

    font-size:12px;

    animation:heroExploreBounce 1.6s ease-in-out infinite;

}

@keyframes heroExploreBounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(4px);

    }

}

.hero-section-centered .hero-stats{

    justify-content:center;

}


/*==========================================================
HERO SEARCH / RESPONSIVE
==========================================================*/

@media (max-width:768px){

    .hero-section-centered{

        padding:28px 10px 24px;

        min-height:auto;

    }

    .sl-search-icon{

        font-size:17px;

        margin-left:10px;

        margin-right:8px;

    }

    .sl-search-input{

        font-size:14px;

        padding:10px 6px;

    }

    .sl-search-btn{

        width:38px;

        height:38px;

        font-size:15px;

    }

}

@media (max-width:480px){

    .hero-explore-link{

        margin-bottom:28px;

    }

    .start-learning-tags{

        font-size:12.5px;

        gap:6px;

    }

    .start-learning-tags a{

        padding:3px 10px;

    }

}