.elementor-62 .elementor-element.elementor-element-87ad662{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-77ddce1 *//*=====================================
LBSTI DIT COURSE CSS
======================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
font-size:16px;
color:#444;
background:#fff;
line-height:1.8;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1200px;
margin:auto;

}

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

.section{

padding:80px 0;
position:relative;

}

/* Alternate Background */

.section:nth-child(even){

background:#ffffff;

}

.section:nth-child(odd){

background:#F7F9FC;

}

.section h2{

font-size:36px;
font-weight:700;
color:#0C1F3C;
text-align:center;
margin-bottom:18px;

}

.section h2::after{

content:"";
display:block;
width:70px;
height:4px;
background:#FFC107;
margin:15px auto 0;
border-radius:20px;

}

.section> .container> p{

max-width:900px;
margin:auto;
text-align:center;
font-size:17px;
color:#666;
margin-bottom:45px;

}

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

.hero{

background:linear-gradient(135deg,#7B0000,#B30000);
padding:90px 20px;
text-align:center;
color:#fff;

}

.hero h1{

font-size:46px;
font-weight:700;
line-height:1.3;
max-width:900px;
margin:auto;
margin-bottom:22px;

}

.hero p{

font-size:22px;
font-weight:400;
margin-bottom:40px;
color:#f7f7f7;

}

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

.hero-box{

display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;

}

.hero-box span{

background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.12);
padding:15px 24px;
border-radius:40px;
backdrop-filter:blur(8px);
font-size:16px;
transition:.3s;

}

.hero-box span:hover{

background:#FFC107;
color:#0C1F3C;
transform:translateY(-5px);

}

.hero-box i{

margin-right:8px;

}

/*=========================
ABOUT
=========================*/

.section p{

font-size:17px;
line-height:1.9;
color:#666;

}
/*=========================================
MODULE GRID
=========================================*/

.module-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:45px;

}

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

.module{

background:#ffffff;
padding:32px;
border-radius:18px;
border-top:5px solid #FFC107;
border:1px solid #ececec;
box-shadow:0 10px 35px rgba(0,0,0,.06);
transition:.35s ease;
position:relative;
overflow:hidden;

}

.module::before{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#0C1F3C;
transform:scaleX(0);
transition:.35s;

}

.module:hover::before{

transform:scaleX(1);

}

.module:hover{

transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.module h3{

font-size:23px;
font-weight:700;
color:#0C1F3C;
margin-bottom:15px;
line-height:1.4;

}

.module p{

font-size:16px;
color:#666;
line-height:1.9;
margin:0;

}

/*=========================================
LIST DESIGN
=========================================*/

.list{

max-width:900px;
margin:45px auto 0;
padding:0;

}

.list li{

background:#fff;
margin-bottom:18px;
padding:18px 25px 18px 65px;
border-radius:14px;
border-left:5px solid #FFC107;
position:relative;
font-size:17px;
box-shadow:0 8px 25px rgba(0,0,0,.05);
transition:.3s;

}

.list li:hover{

transform:translateX(8px);

}

.list li::before{

content:"✓";
position:absolute;
left:22px;
top:50%;
transform:translateY(-50%);
width:30px;
height:30px;
background:#FFC107;
color:#0C1F3C;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;

}

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

.icon-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:45px;

}

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

.icon-box{

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

}

.icon-box:hover{

transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.icon-box i{

width:80px;
height:80px;
line-height:80px;
background:#FFF6D8;
color:#FFC107;
font-size:34px;
border-radius:50%;
margin-bottom:20px;
transition:.35s;

}

.icon-box:hover i{

background:#FFC107;
color:#0C1F3C;
transform:rotate(10deg);

}

.icon-box p{

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

}

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

.section-text{

max-width:850px;
margin:auto;
text-align:center;
margin-bottom:40px;
font-size:17px;
color:#666;

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

.faq{

    background:#ffffff;
    border-left:5px solid #FFC107;
    border-radius:18px;
    padding:25px 30px;
    margin-bottom:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.35s;

}

.faq:hover{

    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.faq h3{

    color:#0C1F3C;
    font-size:22px;
    margin-bottom:12px;
    font-weight:700;

}

.faq p{

    color:#666;
    font-size:16px;
    line-height:1.8;

}

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

.cta-section{

    background:linear-gradient(135deg,#081A35,#0C1F3C);
    color:#fff;
    text-align:center;
    padding:90px 20px;
    position:relative;
    overflow:hidden;

}

.cta-section::before{

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

}

.cta-section::after{

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

}

.cta-section .container{

    position:relative;
    z-index:2;

}

.cta-section h2{

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

}

.cta-section p{

    max-width:850px;
    margin:0 auto 40px;
    color:#ddd;
    font-size:18px;
    line-height:1.9;

}

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

.cta-buttons{

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

    display:inline-block;
    padding:16px 36px;
    border-radius:50px;
    font-size:17px;
    font-weight:600;
    transition:.35s;
    text-decoration:none;

}

.btn-primary{

    background:#FFC107;
    color:#0C1F3C;

}

.btn-primary:hover{

    background:#ffffff;
    transform:translateY(-5px);

}

.btn-secondary{

    border:2px solid #fff;
    color:#fff;

}

.btn-secondary:hover{

    background:#fff;
    color:#0C1F3C;
    transform:translateY(-5px);

}

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

.hero-box span,
.module,
.icon-box,
.list li,
.faq,
.btn-primary,
.btn-secondary{

    transition:all .35s ease;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

.hero{

padding:80px 20px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:19px;

}

.section{

padding:70px 0;

}

.section h2{

font-size:32px;

}

.module-grid{

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

}

.icon-grid{

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

}

.cta-section h2{

font-size:34px;

}

}

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

@media(max-width:768px){

.hero{

padding:70px 20px;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:17px;

}

.hero-box{

flex-direction:column;
align-items:center;

}

.hero-box span{

width:100%;
max-width:320px;
text-align:center;

}

.section{

padding:60px 0;

}

.section h2{

font-size:28px;

}

.module-grid,
.icon-grid{

grid-template-columns:1fr;

}

.module{

padding:24px;

}

.module h3{

font-size:21px;

}

.list li{

padding:18px 20px 18px 60px;
font-size:16px;

}

.faq{

padding:22px;

}

.faq h3{

font-size:20px;

}

.cta-section{

padding:70px 20px;

}

.cta-section h2{

font-size:30px;

}

.cta-section p{

font-size:16px;

}

.cta-buttons{

flex-direction:column;
align-items:center;

}

.btn-primary,
.btn-secondary{

width:100%;
max-width:280px;
text-align:center;

}

}

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

@media(max-width:480px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:15px;

}

.section h2{

font-size:24px;

}

.icon-box{

padding:28px 20px;

}

.icon-box i{

width:65px;
height:65px;
line-height:65px;
font-size:28px;

}

.cta-section h2{

font-size:26px;

}

}/* End custom CSS */