/*====================================================
 PART 2
 HERO • CONTENT • CARDS • MEDIA
======================================================*/


/*====================================================
21. HERO SECTION
=====================================================*/

.hero{

background:linear-gradient(
135deg,
rgba(13,71,161,.92),
rgba(21,101,192,.85)),
url("img/Strip.png") center/cover no-repeat;

padding:70px 30px;

border-radius:16px;

text-align:center;

color:#fff;

box-shadow:var(--shadow);

margin:30px 0;

}

.hero h1{

font-size:46px;

margin-bottom:15px;

font-weight:700;

}

.hero p{

font-size:20px;

max-width:900px;

margin:auto;

opacity:.95;

}


/*====================================================
22. INTRO PANELS
=====================================================*/

.intro-box{

background:#ffffff;

padding:22px;

border-left:6px solid var(--primary);

border-radius:12px;

box-shadow:var(--shadow);

margin:15px 0;

transition:var(--transition);

}

.intro-box:hover{

transform:translateY(-6px);

}

.intro-box h3{

color:var(--primary);

margin-bottom:12px;

}


/*====================================================
23. COURSE CARDS
=====================================================*/

.course-card{

background:#fff;

border-radius:15px;

overflow:hidden;

box-shadow:var(--shadow);

transition:var(--transition);

height:100%;

}

.course-card:hover{

transform:translateY(-8px);

}

.course-card img{

width:100%;

height:230px;

object-fit:cover;

}

.course-card h3{

padding:18px 20px 10px;

color:var(--primary);

}

.course-card p{

padding:0 20px 20px;

color:var(--light-text);

}

.course-card a{

display:inline-block;

margin:0 20px 20px;

}


/*====================================================
24. IMAGE STYLING
=====================================================*/

.w3-row-padding img{

box-shadow:0 10px 22px rgba(0,0,0,.18);

background:white;

padding:6px;

}

.w3-row-padding img:hover{

transform:scale(1.04);

}


/*====================================================
25. COURSE BUTTONS
=====================================================*/

.course-btn{

display:inline-block;

padding:12px 24px;

background:var(--primary);

color:white;

border-radius:30px;

font-weight:600;

transition:var(--transition);

}

.course-btn:hover{

background:var(--accent);

color:#222;

}


/*====================================================
26. VIDEO SECTION
=====================================================*/

iframe{

width:100%;

max-width:500px;

height:300px;

border:none;

border-radius:12px;

box-shadow:var(--shadow);

background:white;

}


/*====================================================
27. INFORMATION BOXES
=====================================================*/

.info-box{

background:white;

padding:25px;

border-radius:12px;

box-shadow:var(--shadow);

margin:20px 0;

}

.info-box h2{

color:var(--primary);

}

.info-box ul{

padding-left:22px;

}

.info-box li{

margin-bottom:10px;

}


/*====================================================
28. BLUE TITLE BAR
=====================================================*/

.title-bar{

background:linear-gradient(
90deg,
var(--primary),
var(--secondary));

color:white;

padding:16px;

font-size:24px;

font-weight:600;

border-radius:10px;

margin:30px 0 20px;

}


/*====================================================
29. FEATURE GRID
=====================================================*/

.feature-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:30px;

}


/*====================================================
30. FEATURE CARD
=====================================================*/

.feature{

background:white;

padding:25px;

text-align:center;

border-radius:14px;

box-shadow:var(--shadow);

transition:var(--transition);

}

.feature:hover{

transform:translateY(-8px);

}

.feature i{

font-size:48px;

color:var(--primary);

margin-bottom:15px;

}


/*====================================================
31. DOWNLOAD BUTTON
=====================================================*/

.download-btn{

display:inline-block;

background:#2E7D32;

padding:14px 28px;

border-radius:30px;

color:white;

font-weight:600;

transition:var(--transition);

}

.download-btn:hover{

background:#1B5E20;

}


/*====================================================
32. IMAGE CAPTION
=====================================================*/

.caption{

text-align:center;

font-size:15px;

margin-top:10px;

color:var(--light-text);

font-style:italic;

}


/*====================================================
33. NOTICE BOX
=====================================================*/

.notice{

background:#FFF8E1;

border-left:6px solid var(--accent);

padding:20px;

border-radius:12px;

margin:25px 0;

}

.notice strong{

color:#E65100;

}


/*====================================================
34. SUCCESS BOX
=====================================================*/

.success{

background:#E8F5E9;

border-left:6px solid #43A047;

padding:20px;

border-radius:12px;

}


/*====================================================
35. SHADOW UTILITIES
=====================================================*/

.shadow-sm{

box-shadow:0 3px 8px rgba(0,0,0,.10);

}

.shadow{

box-shadow:var(--shadow);

}

.shadow-lg{

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

}


/*====================================================
36. TEXT UTILITIES
=====================================================*/

.text-center{

text-align:center;

}

.text-left{

text-align:left;

}

.text-right{

text-align:right;

}

.text-primary{

color:var(--primary);

}

.text-secondary{

color:var(--secondary);

}


/*====================================================
37. SPACING UTILITIES
=====================================================*/

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}

.p-1{padding:10px;}
.p-2{padding:20px;}
.p-3{padding:30px;}
.p-4{padding:40px;}


/*====================================================
38. ANIMATIONS
=====================================================*/

.fade-in{

animation:fadeIn .8s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*====================================================
39. BACK TO TOP BUTTON
=====================================================*/

#topBtn{

position:fixed;

right:25px;

bottom:25px;

display:none;

padding:14px 18px;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

cursor:pointer;

font-size:20px;

box-shadow:var(--shadow);

transition:var(--transition);

z-index:999;

}

#topBtn:hover{

background:var(--accent);

color:#222;

}


/*====================================================
40. RESPONSIVE
=====================================================*/

@media(max-width:768px){

.hero{

padding:40px 20px;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:17px;

}

iframe{

height:230px;

}

.course-card img{

height:180px;

}

.title-bar{

font-size:20px;

}

}