/* Sarna TV home page theme: tribal green / sky blue / sun yellow / festive red */
:root {
    --s-green: #0c6b1f;
    --s-green-dark: #053705;
    --s-lime: #50be00;
    --s-blue: #0b3fa8;
    --s-sky: #1ea0ff;
    --s-yellow: #ffd400;
    --s-red: #d4111f;
    --s-orange: #f47c10;
    --s-purple: #7b1fa2;
    --s-pink: #e91e83;
    --s-cream: #fffbea;
}

body { font-family: 'Poppins', 'Roboto', Arial, sans-serif; }

/* ---------- Hero ---------- */
.home-hero { background: linear-gradient(180deg, #e8f6ff 0%, #f1fbe9 100%); position: relative; padding-top: 22px; }
.home-hero #heroCarousel {
    max-width: 1100px; margin: 0 auto 22px; border-radius: 18px; overflow: hidden;
    border: 5px solid #fff; box-shadow: 0 0 0 4px var(--s-green), 0 14px 34px rgba(0, 0, 0, .28);
}
@media (max-width: 1160px) { .home-hero #heroCarousel { margin-left: 15px; margin-right: 15px; } }
.home-hero .carousel-item img { width: 100%; height: auto; max-height: none; object-fit: contain; }
.home-hero .carousel-indicators li {
    width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff;
    background: transparent; opacity: .9;
}
.home-hero .carousel-indicators li.active { background: var(--s-yellow); border-color: var(--s-yellow); }
.home-hero .carousel-control-prev-icon,
.home-hero .carousel-control-next-icon {
    background-color: rgba(5, 55, 5, .65); border-radius: 50%;
    width: 46px; height: 46px; background-size: 45%;
}
.tribal-strip {
    height: 14px;
    background:
        repeating-linear-gradient(135deg, var(--s-red) 0 14px, #fff 14px 28px, var(--s-green) 28px 42px, var(--s-yellow) 42px 56px);
}

/* ---------- Tagline ---------- */
.home-tagline {
    text-align: center; padding: 60px 0 50px;
    background: linear-gradient(180deg, #e8f6ff 0%, #ffffff 100%);
    position: relative; overflow: hidden;
}
.home-tagline::before, .home-tagline::after {
    content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; opacity: .12;
}
.home-tagline::before { background: var(--s-lime); left: -80px; top: -90px; }
.home-tagline::after { background: var(--s-yellow); right: -80px; bottom: -100px; }
.tag-script { font-family: 'Yellowtail', cursive; font-size: 2.2rem; color: var(--s-red); display: block; }
.tag-script-dark { color: var(--s-green); }
.home-tagline h1 {
    font-size: 4.2rem; font-weight: 800; color: var(--s-green); margin: 0; line-height: 1.1;
    text-shadow: 3px 3px 0 rgba(255, 212, 0, .55);
}
.home-tagline h1 em { color: var(--s-blue); font-style: normal; }
.tag-sub { font-size: 1.15rem; color: #333; margin: 12px auto 26px; max-width: 760px; font-weight: 500; }
.tag-actions .btn-sarna { margin: 6px 8px; }

.btn-sarna {
    display: inline-block; padding: 12px 30px; border-radius: 50px; font-weight: 600;
    text-decoration: none !important; transition: all .3s; box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.btn-sarna i { margin-right: 8px; }
.btn-sarna-green { background: linear-gradient(135deg, var(--s-lime), var(--s-green)); color: #fff !important; }
.btn-sarna-yellow { background: linear-gradient(135deg, #ffe44d, var(--s-yellow)); color: var(--s-green-dark) !important; }
.btn-sarna:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .25); }

/* ---------- Section titles ---------- */
.section-title { text-align: center; margin-bottom: 40px; }
.section-title h2 {
    font-size: 2.4rem; font-weight: 800; color: var(--s-green); margin: 0 0 6px;
    text-transform: uppercase; letter-spacing: 1px; border: 0; padding: 0; text-align: center;
}
.section-title p { color: var(--s-blue); font-weight: 600; font-size: 1.05rem; margin: 0; text-align: center; }
.section-title::after {
    content: ""; display: block; width: 110px; height: 5px; margin: 14px auto 0; border-radius: 4px;
    background: linear-gradient(90deg, var(--s-red), var(--s-yellow), var(--s-green), var(--s-sky));
}

/* ---------- S.A.R.N.A. pillars ---------- */
.home-sarna { padding: 70px 0 30px; background: #fff; }
.pillar {
    text-align: center; background: #fff; border-radius: 16px; padding: 28px 16px 24px; height: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .09); border-top: 6px solid var(--c); transition: all .3s;
}
.pillar:hover { transform: translateY(-8px); box-shadow: 0 14px 30px rgba(0, 0, 0, .16); }
.pillar-icon {
    width: 78px; height: 78px; margin: 0 auto 14px; border-radius: 50%; background: var(--c);
    color: #fff; font-size: 2rem; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, .05);
}
.pillar h3 { font-size: 1.25rem; font-weight: 700; color: var(--c); margin: 0 0 8px; text-transform: uppercase; }
.pillar h3 span {
    display: inline-block; background: var(--c); color: #fff; width: 30px; height: 30px; line-height: 30px;
    border-radius: 50%; font-size: 1rem; margin-right: 4px; text-align: center;
}
.pillar p { font-size: .92rem; color: #444; margin: 0; line-height: 1.5rem; text-align: center; }
.pillar-blue { --c: #1565d8; }
.pillar-green { --c: #1b9a2a; }
.pillar-orange { --c: var(--s-orange); }
.pillar-purple { --c: var(--s-purple); }
.pillar-pink { --c: var(--s-pink); }

/* ---------- About ---------- */
.home-about { padding: 60px 0 40px; background: linear-gradient(180deg, #fff 0%, #f1fbe9 100%); }
.frame-img {
    border-radius: 18px; overflow: hidden; border: 6px solid #fff; background: #fff;
    box-shadow: 0 0 0 4px var(--s-green), 0 14px 32px rgba(0, 0, 0, .22);
}
.frame-img img { display: block; width: 100%; }
.frame-img-red { box-shadow: 0 0 0 4px var(--s-red), 0 14px 32px rgba(0, 0, 0, .22); }
.intro-card {
    background: #fff; border-left: 8px solid var(--s-yellow); border-radius: 14px; padding: 28px 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.welcome-part .intro-card p { font-size: 1.08rem; line-height: 1.9rem; margin-top: 0; }
.intro-card blockquote {
    margin: 18px 0 0; padding: 14px 18px; background: var(--s-cream); border-radius: 10px;
    font-family: 'Yellowtail', cursive; font-size: 1.7rem; color: var(--s-red); line-height: 2.2rem;
}

.feat {
    background: #fff; border-radius: 14px; padding: 26px 24px; height: 100%; position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08); border-bottom: 5px solid var(--c); transition: all .3s;
}
.feat:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0, 0, 0, .15); }
.feat > i { font-size: 1.7rem; color: #fff; background: var(--c); width: 56px; height: 56px; line-height: 56px; text-align: center; border-radius: 14px; margin-bottom: 14px; }
.welcome-part .feat h3 { text-align: left; font-size: 1.2rem; font-weight: 700; color: #111; margin: 0 0 8px; }
.welcome-part .feat p { font-size: .95rem; color: #444; margin: 0; line-height: 1.55rem; text-align: left; }
.feat-green { --c: #1b9a2a; }
.feat-blue { --c: #1565d8; }
.feat-yellow { --c: #e0a800; }
.feat-red { --c: var(--s-red); }

/* ---------- Culture ---------- */
.home-culture {
    padding: 70px 0; color: #fff;
    background: linear-gradient(135deg, rgba(5, 55, 5, .96), rgba(12, 107, 31, .92)), repeating-linear-gradient(45deg, #000 0 10px, #111 10px 20px);
    position: relative;
}
.home-culture::before, .home-culture::after {
    content: ""; position: absolute; left: 0; right: 0; height: 10px;
    background: repeating-linear-gradient(135deg, var(--s-red) 0 12px, #fff 12px 24px, var(--s-yellow) 24px 36px);
}
.home-culture::before { top: 0; }
.home-culture::after { bottom: 0; }
.home-culture .tag-script-dark { color: var(--s-yellow); font-size: 2rem; }
.home-culture h2 { font-size: 2.4rem; font-weight: 800; color: #fff; margin: 6px 0 16px; text-transform: uppercase; }
.home-culture p { font-size: 1.05rem; line-height: 1.9rem; color: #f2fff0; }
.culture-tags { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; }
.culture-tags li {
    background: var(--s-yellow); color: var(--s-green-dark); font-weight: 700; padding: 8px 18px;
    border-radius: 50px; margin: 0 10px 10px 0; font-size: .92rem;
}
.culture-tags li:nth-child(2) { background: #fff; }
.culture-tags li:nth-child(3) { background: #ff6b6b; color: #fff; }
.culture-tags li:nth-child(4) { background: var(--s-sky); color: #fff; }

/* ---------- Mission / Vision ---------- */
.home-mv { padding: 70px 0 30px; background: #fff; }
.mv-card {
    border-radius: 18px; padding: 34px 30px; color: #fff; height: 100%; position: relative; overflow: hidden;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.mv-card > i { font-size: 2.4rem; opacity: .95; margin-bottom: 10px; display: block; }
.mv-card h3 { font-size: 1.7rem; font-weight: 800; margin: 0 0 10px; text-transform: uppercase; }
.mv-card p { font-size: 1.02rem; line-height: 1.8rem; margin: 0; }
.mv-card::after {
    content: ""; position: absolute; right: -50px; bottom: -50px; width: 170px; height: 170px;
    border-radius: 50%; background: rgba(255, 255, 255, .12);
}
.mv-mission { background: linear-gradient(135deg, #0b3fa8, #1ea0ff); }
.mv-vision { background: linear-gradient(135deg, #0c6b1f, #50be00); }

/* ---------- Gallery ---------- */
.home-gallery { padding: 50px 0 60px; background: linear-gradient(180deg, #fff, #e8f6ff); }
.gal-item {
    display: block; position: relative; border-radius: 16px; overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18); border: 4px solid #fff;
}
.gal-item img { width: 100%; transition: transform .5s; display: block; }
.gal-item:hover img { transform: scale(1.08); }
.gal-item span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; color: #fff; font-weight: 700;
    text-align: center; background: linear-gradient(0deg, rgba(5, 55, 5, .92), rgba(5, 55, 5, 0));
}

/* ---------- Call to action (overrides main.css) ---------- */
.end-part {
    padding: 110px 0;
    background:
        linear-gradient(135deg, rgba(5, 55, 5, .85), rgba(11, 63, 168, .75)),
        url('../img/banner/baner1.jpeg') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.end-part h2 { font-weight: 800; }
.end-part h2 strong { color: var(--s-yellow); }
.end-part p { font-family: 'Yellowtail', cursive; font-size: 2.4rem; }
.end-part a {
    background: linear-gradient(135deg, #ffe44d, var(--s-yellow)); color: var(--s-green-dark);
    border-radius: 50px; margin-top: 10px; font-size: 1.05rem; transition: all .3s;
}
.end-part a:hover { transform: translateY(-3px); text-decoration: none; color: var(--s-green-dark); box-shadow: 0 10px 22px rgba(0, 0, 0, .35); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .home-tagline h1 { font-size: 3.2rem; }
    .end-part { background-attachment: scroll; }
}
@media (max-width: 575px) {
    .home-tagline { padding: 40px 0 36px; }
    .home-tagline h1 { font-size: 2.6rem; }
    .tag-script { font-size: 1.7rem; }
    .section-title h2, .home-culture h2 { font-size: 1.8rem; }
    .end-part { padding: 70px 0; }
    .end-part h2 { font-size: 1.8rem; }
    .end-part p { font-size: 1.8rem; }
}