/*==============================================================
INTERNSHIP SECTION
==============================================================*/

.internships{

    position:relative;

    overflow:hidden;

    background:#0f172a;

    padding:120px 0;

}

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

.internships::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-260px;

    top:-250px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(59,130,246,.14),
    transparent 70%);

}

.internships::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    left:-250px;

    bottom:-260px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(124,58,237,.14),
    transparent 70%);

}

.internships-container{

    position:relative;

    z-index:2;

    width:min(92%,1320px);

    margin:auto;

}

/*==============================================================
SECTION HEADER
==============================================================*/

.internship-heading{

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:65px;

}

.internship-heading .section-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:9px 18px;

    border-radius:30px;

    background:#152c55;

    border:1px solid rgba(59,130,246,.30);

    color:#60a5fa;

    font-size:12px;

    font-weight:700;

    letter-spacing:.4px;

    margin-bottom:22px;

}

.internship-heading h2{

    color:#fff;

    font-size:58px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:18px;

}

.internship-heading h2 span{

    background:linear-gradient(
    90deg,
    #60a5fa,
    #8b5cf6);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.internship-heading p{

    max-width:650px;

    margin:auto;

    color:#94a3b8;

    line-height:1.9;

    font-size:17px;

}

/*==============================================================
FEATURE GRID
==============================================================*/

.feature-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:36px;

}

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

.feature-card{

    background:#20293b;

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

    border-radius:14px;

    padding:26px 20px;

    text-align:center;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-5px);

    border-color:#2563eb;

    box-shadow:0 20px 45px rgba(37,99,235,.15);

}

.feature-icon{

    width:42px;

    height:42px;

    margin:auto;

    margin-bottom:16px;

    border-radius:10px;

    background:linear-gradient(
    135deg,
    #2563eb,
    #7c3aed);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:18px;

}

.feature-card h4{

    color:#fff;

    font-size:16px;

    font-weight:700;

    margin-bottom:6px;

}

.feature-card p{

    color:#94a3b8;

    font-size:12px;

}
/*==============================================================
INTERNSHIP GRID
==============================================================*/

.internship-grid{

    display:grid;

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

    gap:16px;

    margin-top:20px;

}

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

.internship-card{

    position:relative;

    background:#20293b;

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

    border-radius:14px;

    padding:16px;

    transition:.35s;

    overflow:hidden;

}

.internship-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #7c3aed);

    transform:scaleX(0);

    transition:.35s;

    transform-origin:left;

}

.internship-card:hover::before{

    transform:scaleX(1);

}

.internship-card:hover{

    transform:translateY(-6px);

    border-color:#2f62ff;

    box-shadow:0 18px 40px rgba(0,0,0,.35);

}

/*==============================================================
TOP
==============================================================*/

.internship-top{

    display:flex;

    justify-content:flex-start;

    align-items:center;

    margin-bottom:14px;

}

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

.internship-icon{

    width:40px;

    height:40px;

    border-radius:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18px;

    transition:.35s;

}

.internship-card:hover .internship-icon{

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

}

/*==============================================================
TITLE
==============================================================*/

.internship-card h3{

    color:#ffffff;

    font-size:16px;

    line-height:1.45;

    font-weight:700;

    min-height:48px;

    margin-bottom:10px;

}

/*==============================================================
META
==============================================================*/

.course-meta{

    display:flex;

    align-items:center;

    gap:10px;

    color:#94a3b8;

    font-size:12px;

    margin-bottom:12px;

}

.course-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

/*==============================================================
TECH TAGS
==============================================================*/

.course-tags{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-bottom:16px;

}

.course-tags span{

    background:#2a3449;

    color:#cbd5e1;

    font-size:10px;

    padding:5px 8px;

    border-radius:20px;

    transition:.3s;

    white-space:nowrap;

}

.course-tags span:hover{

    background:#2563eb;

    color:#fff;

}

/*==============================================================
DIVIDER
==============================================================*/

.course-footer{

    display:flex;

    justify-content:space-between;

    border-top:1px solid rgba(255,255,255,.05);

    padding-top:12px;

    margin-bottom:14px;

}

.course-footer div{

    display:flex;

    flex-direction:column;

}

.course-footer small{

    color:#64748b;

    font-size:10px;

    margin-bottom:3px;

}

.course-footer strong{

    color:#ffffff;

    font-size:13px;

    font-weight:700;

}

/*==============================================================
BOTTOM BUTTON
==============================================================*/

.course-btn{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#60a5fa;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

}

.course-btn i{

    width:28px;

    height:28px;

    border-radius:50%;

    background:#2b3850;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:12px;

    transition:.35s;

}

.internship-card:hover .course-btn i{

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed);

    color:#fff;

    transform:translateX(4px);

}
/*==============================================================
ICON COLORS
==============================================================*/

.blue{
    background:#dbeafe;
    color:#2563eb;
}

.purple{
    background:#ede9fe;
    color:#7c3aed;
}

.green{
    background:#dcfce7;
    color:#16a34a;
}

.orange{
    background:#ffedd5;
    color:#ea580c;
}

.red{
    background:#fee2e2;
    color:#ef4444;
}

.pink{
    background:#fce7f3;
    color:#ec4899;
}

.cyan{
    background:#cffafe;
    color:#0891b2;
}

.yellow{
    background:#fef3c7;
    color:#ca8a04;
}

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

.internship-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.04),
        transparent 65%);

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.internship-card:hover::after{

    opacity:1;

}

/*==============================================================
FEATURE CARD GLOW
==============================================================*/

.feature-card{

    position:relative;

    overflow:hidden;

}

.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        rgba(59,130,246,.05),
        transparent);

    opacity:0;

    transition:.35s;

}

.feature-card:hover::before{

    opacity:1;

}

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

.internship-stats{

    margin-top:60px;

    background:linear-gradient(
        135deg,
        #1d4ed8,
        #312e81);

    border-radius:18px;

    padding:28px;

    display:grid;

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

    gap:20px;

}

.stat-box{

    text-align:center;

}

.stat-box h3{

    color:#fff;

    font-size:32px;

    font-weight:800;

    margin-bottom:8px;

}

.stat-box span{

    color:#cbd5e1;

    font-size:13px;

}

/*==============================================================
DIVIDERS
==============================================================*/

.stat-box{

    position:relative;

}

.stat-box:not(:last-child)::after{

    content:"";

    position:absolute;

    right:-10px;

    top:50%;

    transform:translateY(-50%);

    width:1px;

    height:40px;

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

}
/*==============================================================
CALL TO ACTION
==============================================================*/

.internship-action{

    display:flex;

    justify-content:center;

    margin-top:55px;

}

.explore-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 34px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed);

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.35s;

    box-shadow:
    0 20px 40px rgba(37,99,235,.30);

}

.explore-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 28px 55px rgba(37,99,235,.40);

}

.explore-btn i{

    transition:.35s;

}

.explore-btn:hover i{

    transform:translateX(8px);

}

/*==============================================================
HOVER SHADOW
==============================================================*/

.internship-card{

    transition:
    transform .35s,
    box-shadow .35s,
    border-color .35s;

}

.feature-card{

    transition:
    transform .35s,
    box-shadow .35s,
    border-color .35s;

}

/*==============================================================
SMOOTH ICON ANIMATION
==============================================================*/

.feature-icon,
.internship-icon{

    transition:
    transform .35s,
    box-shadow .35s;

}

.feature-card:hover .feature-icon{

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

}

.internship-card:hover .internship-icon{

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

}

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

.course-tags span{

    transition:
    background .3s,
    color .3s,
    transform .3s;

}

.course-tags span:hover{

    transform:translateY(-2px);

}

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

.course-btn{

    transition:.35s;

}

.course-btn:hover{

    color:#ffffff;

}

.course-btn:hover i{

    transform:translateX(5px);

}

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

.internship-card{

    opacity:0;

    transform:translateY(40px);

}

.feature-card{

    opacity:0;

    transform:translateY(35px);

}

.stat-box{

    opacity:0;

    transform:translateY(30px);

}

.internship-card.show,
.feature-card.show,
.stat-box.show{

    opacity:1;

    transform:translateY(0);

    transition:

    opacity .7s ease,

    transform .7s ease;

}

/*==============================================================
FLOATING BACKGROUND
==============================================================*/

.internships::before{

    animation:float1 8s ease-in-out infinite;

}

.internships::after{

    animation:float2 10s ease-in-out infinite;

}

@keyframes float1{

0%{

transform:translateY(0);

}

50%{

transform:translateY(20px);

}

100%{

transform:translateY(0);

}

}

@keyframes float2{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

100%{

transform:translateY(0);

}

}

/*==============================================================
BUTTON SHINE
==============================================================*/

.explore-btn{

    position:relative;

    overflow:hidden;

}

.explore-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80px;

    height:100%;

    background:

    rgba(255,255,255,.18);

    transform:skewX(-25deg);

}

.explore-btn:hover::before{

    left:130%;

    transition:1s;

}
/*==============================================
PREMIUM EFFECTS
==============================================*/

.internship-card{

backdrop-filter:blur(10px);

}

.internship-card:hover{

background:#263245;

}

.feature-card:hover{

background:#263245;

}

.course-btn{

transition:.35s;

}

.course-btn:hover{

color:#fff;

}

.course-btn:hover i{

background:#2563eb;

}

.feature-icon{

box-shadow:0 8px 20px rgba(37,99,235,.25);

}

.internship-icon{

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

}

.stat-box h3{

letter-spacing:-1px;

}

.course-tags span{

font-weight:600;

}