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

.course-hero{

    padding:120px 0;
    background:linear-gradient(135deg,#0f172a,#0d6efd);
    overflow:hidden;
    position:relative;

}

.course-hero::before{

    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    right:-120px;
    top:-120px;

}

.course-hero::after{

    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    left:-80px;
    bottom:-80px;

}

.course-hero-content{

    position:relative;
    z-index:2;

}

.course-badge{

    display:inline-block;
    padding:10px 22px;
    background:#fff;
    color:#0d6efd;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    margin-bottom:25px;

}

.course-hero h1{

    color:#fff;
    font-size:58px;
    font-weight:700;
    margin-bottom:20px;

}

.course-hero p{

    color:#dbeafe;
    font-size:18px;
    line-height:1.9;

}

/*==================================================
 COURSE INFO
==================================================*/

.course-info{

    display:flex;
    gap:20px;
    margin:40px 0;
    flex-wrap:wrap;

}

.info-box{

    background:#fff;
    padding:20px;
    border-radius:15px;
    display:flex;
    align-items:center;
    gap:15px;
    min-width:180px;

}

.info-box i{

    width:55px;
    height:55px;
    background:#eaf2ff;
    color:#0d6efd;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    font-size:22px;

}

.info-box h6{

    margin:0;
    font-weight:700;

}

.info-box span{

    color:#64748b;
    font-size:14px;

}

/*==================================================
 BUTTONS
==================================================*/

.hero-buttons{

    margin-top:20px;

}

.hero-buttons .btn{

    padding:14px 35px;
    border-radius:50px;
    margin-right:15px;
    font-weight:600;

}

/*==================================================
 GOOGLE RATING
==================================================*/

.hero-rating{

    display:flex;
    align-items:center;
    gap:18px;
    margin-top:45px;

}

.hero-rating img{

    width:65px;

}

.hero-rating h5{

    color:#fff;
    margin-bottom:5px;

}

.hero-rating span{

    color:#dbeafe;

}

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

.course-hero-image{

    text-align:center;

}

.course-hero-image img{

    width:100%;
    max-width:480px;
    animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

/*==================================================
 COURSE DETAILS
==================================================*/

.course-details{

    background:#f8fbff;

}

.course-box{

    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.course-box+.course-box{

    margin-top:30px;

}

.section-title span{

    color:#0d6efd;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;

}

.section-title h2{

    margin-top:12px;
    font-size:38px;
    font-weight:700;

}

/*==================================================
 TABLE
==================================================*/

.course-table th{

    width:250px;
    background:#0d6efd;
    color:#fff;
    font-weight:600;

}

.course-table td{

    color:#475569;

}
/*==================================================
            COURSE SIDEBAR
==================================================*/

.course-sidebar{

    position:sticky;
    top:100px;

}

.sidebar-card{

    background:#fff;
    border-radius:20px;
    padding:30px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    margin-bottom:30px;
    transition:.35s;

}

.sidebar-card:hover{

    transform:translateY(-6px);

}

.sidebar-card h3{

    font-size:24px;
    font-weight:700;
    margin-bottom:15px;
    color:#0f172a;

}

.sidebar-card p{

    color:#64748b;
    margin-bottom:20px;

}

.sidebar-card .btn{

    height:55px;
    border-radius:50px;
    font-weight:600;

}

/*==================================================
CONTACT
==================================================*/

.contact-list{

    list-style:none;
    padding:0;
    margin:0;

}

.contact-list li{

    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:20px;
    color:#475569;
    line-height:1.7;

}

.contact-list i{

    width:45px;
    height:45px;
    background:#0d6efd;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;

}

/*==================================================
WHY COURSE
==================================================*/

.why-course{

    background:#fff;

}

.feature-card{

    background:#fff;
    border-radius:20px;
    padding:35px 30px;
    text-align:center;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;

}

.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(13,110,253,.15);

}

.feature-card i{

    width:80px;
    height:80px;
    background:#eaf2ff;
    color:#0d6efd;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    font-size:32px;
    margin-bottom:25px;

}

.feature-card h4{

    font-size:22px;
    font-weight:700;
    margin-bottom:15px;
    color:#0f172a;

}

.feature-card p{

    color:#64748b;
    line-height:1.8;

}

/*==================================================
TOOLS
==================================================*/

.tools-section{

    background:#f8fbff;

}

.tool-box{

    background:#fff;
    border-radius:18px;
    text-align:center;
    padding:30px 15px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.35s;

}

.tool-box:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(13,110,253,.15);

}

.tool-box img{

    width:70px;
    height:70px;
    object-fit:contain;
    margin-bottom:20px;

}

.tool-box h5{

    font-size:18px;
    font-weight:600;
    margin:0;
    color:#0f172a;

}
/*==================================================
        COURSE CURRICULUM
==================================================*/

.course-curriculum{

    background:#ffffff;

}

.course-curriculum .accordion-item{

    border:none;
    margin-bottom:20px;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.course-curriculum .accordion-button{

    background:#ffffff;
    color:#0f172a;
    font-size:20px;
    font-weight:600;
    padding:22px 25px;
    box-shadow:none;

}

.course-curriculum .accordion-button:not(.collapsed){

    background:#0d6efd;
    color:#ffffff;

}

.course-curriculum .accordion-button:focus{

    box-shadow:none;

}

.course-curriculum .accordion-body{

    padding:30px;
    background:#ffffff;

}

.course-curriculum .accordion-body ul{

    margin:0;
    padding:0;
    list-style:none;

}

.course-curriculum .accordion-body ul li{

    position:relative;
    padding:12px 0 12px 35px;
    border-bottom:1px solid #edf2f7;
    color:#475569;

}

.course-curriculum .accordion-body ul li:last-child{

    border-bottom:none;

}

.course-curriculum .accordion-body ul li::before{

    content:"✔";
    position:absolute;
    left:0;
    top:11px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#0d6efd;
    color:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:12px;

}

/*==================================================
        LIVE PROJECTS
==================================================*/

.live-projects{

    background:#f8fbff;

}

.project-card{

    background:#ffffff;
    padding:35px 30px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;

}

.project-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(13,110,253,.15);

}

.project-card i{

    width:80px;
    height:80px;
    border-radius:50%;
    background:#eaf2ff;
    color:#0d6efd;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto auto 25px;
    font-size:30px;

}

.project-card h4{

    font-size:22px;
    font-weight:700;
    margin-bottom:15px;

}

.project-card p{

    color:#64748b;
    line-height:1.8;

}

/*==================================================
        CAREER
==================================================*/

.career-section{

    background:#ffffff;

}

.career-card{

    background:#ffffff;
    border-radius:16px;
    text-align:center;
    padding:35px 20px;
    border:2px solid #edf2f7;
    transition:.35s;

}

.career-card:hover{

    border-color:#0d6efd;

    transform:translateY(-8px);

}

.career-card h5{

    margin:0;
    font-size:22px;
    font-weight:700;
    color:#0f172a;

}

/*==================================================
        SALARY TABLE
==================================================*/

.salary-section{

    background:#f8fbff;

}

.salary-table{

    background:#ffffff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.08);

}

.salary-table thead{

    background:#0d6efd;
    color:#ffffff;

}

.salary-table th{

    padding:18px;
    border:none;
    font-weight:600;

}

.salary-table td{

    padding:18px;
    color:#475569;
    vertical-align:middle;

}

.salary-table tbody tr:hover{

    background:#f1f8ff;

}
/*==================================================
        CERTIFICATE SECTION
==================================================*/

.certificate-section{

    background:#ffffff;

}

.certificate-card{

    background:#ffffff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    height:100%;

}

.certificate-card h2{

    font-size:36px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:20px;

}

.certificate-card p{

    color:#64748b;
    line-height:1.9;

}

.certificate-image img{

    width:100%;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

/*==================================================
        FAQ
==================================================*/

.faq-section{

    background:#f8fbff;

}

.faq-section .accordion-item{

    border:none;
    margin-bottom:18px;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.faq-section .accordion-button{

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

}

.faq-section .accordion-button:not(.collapsed){

    background:#0d6efd;
    color:#fff;

}

.faq-section .accordion-button:focus{

    box-shadow:none;

}

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

.course-cta{

    background:linear-gradient(135deg,#0d6efd,#003b95);
    padding:70px 0;
    color:#fff;
    text-align:center;

}

.course-cta h2{

    font-size:42px;
    font-weight:700;
    margin-bottom:20px;

}

.course-cta p{

    font-size:18px;
    max-width:750px;
    margin:auto auto 35px;
    color:#dbeafe;

}

.course-cta .btn{

    padding:15px 40px;
    border-radius:50px;
    font-weight:600;
    margin:10px;

}

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

.project-card,
.feature-card,
.tool-box,
.sidebar-card,
.course-box,
.career-card{

    transition:.35s;

}

.project-card:hover,
.feature-card:hover,
.tool-box:hover,
.sidebar-card:hover,
.course-box:hover,
.career-card:hover{

    transform:translateY(-8px);

}

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

@media(max-width:991px){

.course-hero{

padding:90px 0;

}

.course-hero h1{

font-size:42px;

}

.course-sidebar{

position:relative;
top:0;
margin-top:40px;

}

.course-info{

justify-content:center;

}

.section-title h2{

font-size:32px;

}

}

@media(max-width:767px){

.course-hero{

text-align:center;

}

.course-hero h1{

font-size:34px;

}

.course-info{

flex-direction:column;

}

.info-box{

width:100%;

}

.hero-buttons .btn{

width:100%;
margin-bottom:15px;

}

.hero-rating{

justify-content:center;

}

.course-box{

padding:25px;

}

.section-title h2{

font-size:28px;

}

.project-card,
.feature-card{

padding:25px;

}

.tool-box{

padding:20px;

}

.course-cta h2{

font-size:30px;

}

}

@media(max-width:576px){

.course-banner{

padding:60px 0;

}

.course-table{

font-size:14px;

}

.course-table th{

width:140px;

}

.course-curriculum .accordion-button{

font-size:16px;

}

.sidebar-card{

padding:22px;

}

}