/* ==========================================================================
   SRKPCS theme overrides
   Loaded last, after the stock theme CSS, so these rules win without editing
   vendor files. Palette sampled from the school crest: deep teal, gold, cream.
   ========================================================================== */

:root {
    --srk-teal: #13403e;
    --srk-teal-dark: #0c2d2e;
    --srk-gold: #feaf47;
    --srk-gold-dark: #e09433;
    --srk-cream: #fbf4df;
    --srk-ink: #1f2d3d;
    --srk-muted: #5a6b7b;
    --srk-line: #e6ebef;
}

/* --------------------------------------------------------------------------
   1. Custom (Editor.js) components
   editorJsToHtml() wraps every prose page in .blog_details-area, and this theme
   ships no rules for it at all -- which is why these pages rendered flush
   against the banner above and the newsletter strip below, with no rhythm
   between blocks. Everything in this section exists to fix that.
   -------------------------------------------------------------------------- */

.blog_details-area {
    padding: 70px 0 60px;
}

.blog_details-area .blog_details-wrap {
    margin-bottom: 0 !important;
}

/* The generated markup carries .mr-80 from another template; it pushes prose
   off-centre inside an already-constrained column. */
.blog_details-area .blog_details-inner-text {
    margin-right: 0 !important;
    color: var(--srk-ink);
    font-size: 16px;
    line-height: 1.8;
}

.blog_details-area h2,
.blog_details-area h3,
.blog_details-area h4 {
    color: var(--srk-teal);
    margin: 38px 0 16px;
    line-height: 1.3;
}

.blog_details-area > .container > .row > div > .blog_details-wrap > .blog_details-content > .blog_details-inner-text > h2:first-child,
.blog_details-area h2:first-child,
.blog_details-area h3:first-child {
    margin-top: 0;
}

.blog_details-area h2 { font-size: 30px; }
.blog_details-area h3 { font-size: 22px; }
.blog_details-area h4 { font-size: 19px; }

.blog_details-area p,
.blog_details-area p.mb-10 {
    margin: 0 0 16px !important;
    color: var(--srk-muted);
}

.blog_details-area b,
.blog_details-area strong { color: var(--srk-ink); font-weight: 600; }

/* Images: never wider than the column, and never butted against the text. */
.blog_details-area img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 26px auto 30px;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(19, 64, 62, .12);
}

/* Lists -- the generated markup uses Bootstrap's .list-group, which draws a
   boxed card per item. Soften it back into readable prose. */
.blog_details-area ul.list-group,
.blog_details-area ol.list-group {
    margin: 0 0 22px;
    padding-left: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--srk-line);
}

.blog_details-area .list-group-item {
    border: 0;
    border-bottom: 1px solid var(--srk-line);
    padding: 13px 18px;
    color: var(--srk-muted);
    background: #fff;
    line-height: 1.7;
}

.blog_details-area .list-group-item:last-child { border-bottom: 0; }
.blog_details-area .list-group-item:nth-child(odd) { background: #fcfdfd; }

/* Tables: the at-a-glance / curriculum blocks. */
.blog_details-area table.table {
    width: 100%;
    margin: 6px 0 28px;
    border: 1px solid var(--srk-line);
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.blog_details-area table.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--srk-line);
    color: var(--srk-muted);
    vertical-align: top;
}

.blog_details-area table.table tr:last-child td { border-bottom: 0; }
.blog_details-area table.table tr:first-child td {
    background: var(--srk-teal);
    color: #fff;
    font-weight: 600;
}
.blog_details-area table.table tr:not(:first-child) td:first-child {
    font-weight: 600;
    color: var(--srk-ink);
    width: 32%;
    background: #fafbfc;
}

/* Wide tables must scroll inside themselves rather than widen the page. */
.blog_details-area .blog_details-inner-text { overflow-x: auto; }

.blog_details-area blockquote.blog_details-quote {
    margin: 26px 0 30px;
    padding: 24px 28px;
    background: var(--srk-cream);
    border-left: 4px solid var(--srk-gold);
    border-radius: 0 8px 8px 0;
}

.blog_details-area blockquote.blog_details-quote p {
    margin: 0 0 8px !important;
    font-size: 18px;
    font-style: italic;
    color: var(--srk-teal);
    line-height: 1.65;
}

.blog_details-area blockquote.blog_details-quote footer {
    font-size: 14px;
    color: var(--srk-muted);
    font-weight: 600;
}

/* "Awaiting school data" callouts. */
.blog_details-area .warning {
    margin: 24px 0 28px;
    padding: 16px 20px;
    background: #fff8e8;
    border: 1px solid #f2d9a0;
    border-left: 4px solid var(--srk-gold);
    border-radius: 0 8px 8px 0;
    color: #6b5420;
    line-height: 1.7;
}

.blog_details-area .warning strong { color: #8a6a22; }

.blog_details-area hr {
    margin: 36px 0;
    border: 0;
    border-top: 1px solid var(--srk-line);
}

/* --------------------------------------------------------------------------
   2. Page banner
   Feature photos are wide crowd shots; default positioning cut heads off.
   -------------------------------------------------------------------------- */

.page-banner-area {
    background-position: center 28% !important;
    background-size: cover !important;
    position: relative;
}

.page-banner-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19, 64, 62, .62), rgba(19, 64, 62, .80));
}

.page-banner-area .d-table { position: relative; z-index: 2; }
/* The theme sets this dark; over a photograph it is unreadable. This is a
   legibility fix, not part of the palette change. */
.page-banner-area .page-banner-content h2 {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* Breadcrumb sat dark-on-dark against the photo. */
.page-banner-area .page-banner-content ul li,
.page-banner-area .page-banner-content ul li a { color: #fff !important; }
.page-banner-area .page-banner-content ul li:last-child { color: var(--srk-gold) !important; }

/* --------------------------------------------------------------------------
   3. Footer
   The school's full name is 42 characters; at stock <h2> size it overflowed a
   col-lg-3 and ran under the Contact Us column.
   -------------------------------------------------------------------------- */

.footer-area .single-footer-widget .logo h2 {
    font-size: 21px;
    line-height: 1.35;
    margin-bottom: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.footer-area .single-footer-widget .logo h2 a { color: #fff; }
.footer-area .single-footer-widget { padding-right: 18px; }
.footer-area .single-footer-widget.pl-5 { padding-left: 0 !important; }

/* Footer background photo made the text hard to read. */
.footer-area { position: relative; }
.footer-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(19, 64, 62, .96);
}
.footer-area > * { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   4. Home: announcement marquee
   A vertical <marquee> with no height reserved a tall empty block before the
   first notice scrolled into view.
   -------------------------------------------------------------------------- */

.home-notice-marquee,
.about-area marquee {
    height: 155px !important;
    overflow: hidden;
    display: block;
}

/* --------------------------------------------------------------------------
   5. Section rhythm
   -------------------------------------------------------------------------- */

.gallery-area,
.events-area,
.facility-area,
.counter-area,
.team-area { padding-top: 70px; padding-bottom: 50px; }

.section-title { margin-bottom: 38px; }
.section-title span { color: var(--srk-gold); }

/* --------------------------------------------------------------------------
   6. Scroll reveal
   Paired with the IntersectionObserver in web_layout/main.blade.php. The
   no-js/!observed fallback is visible, so content never hides if JS fails.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .srk-reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
        will-change: opacity, transform;
    }
    .srk-reveal.srk-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   7. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .blog_details-area { padding: 45px 0 35px; }
    .blog_details-area h2 { font-size: 25px; }
    .blog_details-area h3 { font-size: 20px; }
    .blog_details-area table.table tr:not(:first-child) td:first-child { width: 40%; }
    .footer-area .single-footer-widget { padding-right: 0; margin-bottom: 30px; }
}

@media (max-width: 575px) {
    .blog_details-area { padding: 35px 0 25px; }
    .blog_details-area h2 { font-size: 22px; }
    .blog_details-area img { margin: 18px auto 22px; }
    .blog_details-area table.table td { padding: 10px 12px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   8. Contact: map embed
   The iframe ships with no dimensions, so it collapsed to a sliver and left a
   tall blank band on the contact page.
   -------------------------------------------------------------------------- */

#map { line-height: 0; }

#map iframe {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
}

@media (max-width: 767px) {
    #map iframe { height: 300px; }
}

/* Contact column spacing */
.contact-area .contact-info-box,
.contact-area ul { margin-bottom: 26px; }

/* --------------------------------------------------------------------------
   9. Small-screen safety
   An earlier pass added overflow-x:hidden here on the belief that the theme
   overflowed on mobile. It does not: measured in-page, documentElement
   scrollWidth equals clientWidth. The apparent clipping was an artefact of
   headless Chrome clamping its window to a 500px minimum while writing a
   390px-wide screenshot canvas.

   So the blunt instruments are gone -- no overflow-x:hidden (it breaks
   position:sticky) and no hiding of the theme's decorative shapes. What
   remains are plain defensive rules that are correct regardless.
   -------------------------------------------------------------------------- */

img,
iframe,
video { max-width: 100%; height: auto; }

/* Long unbroken strings (emails, URLs) wrap instead of pushing the layout. */
.blog_details-area .blog_details-inner-text,
.footer-area,
.contact-area { overflow-wrap: break-word; word-wrap: break-word; }

@media (max-width: 575px) {
    .container { padding-left: 18px; padding-right: 18px; }
}

/* ==========================================================================
   10. Brand palette -- BACKGROUNDS ONLY
   Generated from style.css. An earlier version repainted every rule that
   mentioned a theme accent, text colours included, which left footer copy
   and page-banner titles dark-on-dark. Only background/border properties
   are touched now; the theme keeps its own text colours.
     #358f4d -> #13403e   #f5890d -> #feaf47   #1b0238 -> #0e2f2e
   ========================================================================== */

.default-btn{background-color: #13403e !important}
.default-btn::before{background-color: #feaf47 !important}
.optional-btn{background-color: #feaf47 !important}
.optional-btn::before{background-color: #13403e !important}
.preloader{background-color: #13403e !important}
.preloader-area::before,
.preloader-area::after{background: #13403e !important}
.others-option-for-responsive .dot-menu .inner .circle{background-color: #0e2f2e !important}
.others-option-for-responsive .dot-menu:hover .inner .circle{background-color: #13403e !important}
.home-slides.owl-theme .owl-nav [class*="owl-"]{background: #13403e !important}
.home-slides.owl-theme .owl-nav [class*="owl-"]:hover{background-color: #feaf47 !important}
.video-banner-item:after{background-color: #0e2f2e !important}
.who-we-are-image::before{background-color: #13403e !important}
.who-we-are-image::after{background-color: #feaf47 !important}
.who-we-are-content .who-we-are-list li span{background-color: #13403e !important}
.who-we-are-content .who-we-are-list li:hover span{background-color: #feaf47 !important}
.single-class .class-content .price{background-color: #13403e !important}
.single-class:hover .class-content .price{background-color: #feaf47 !important}
.value-item .value-inner-content:hover .number span{background-color: #13403e !important}
.value-item .value-inner-content:hover .number span::before{border: 1px solid #13403e !important}
.single-teacher .image::before{background-color: #13403e !important}
.single-teacher .image .social li a{background-color: #13403e !important}
.single-teacher .image .social li a:hover{background-color: #feaf47 !important}
.single-teacher-box .image .social li a{background-color: #13403e !important}
.single-teacher-box .image .social li a:hover{background-color: #feaf47 !important}
.single-teacher-item .image .content .social li a:hover{background-color: #feaf47 !important}
.testimonials-item .testimonials-item-box:hover .icon i{background-color: #13403e !important}
.testimonials-slides.owl-theme .owl-nav [class*="owl-"]{background: #13403e !important}
.testimonials-slides.owl-theme .owl-nav [class*="owl-"]:hover{background-color: #feaf47 !important}
.feedback-slides .feedback-item .feedback-image::before{background-color: #13403e !important}
.feedback-slides.owl-theme .owl-nav [class*="owl-"]{background: #13403e !important}
.feedback-slides.owl-theme .owl-nav [class*="owl-"]:hover{background-color: #feaf47 !important}
.single-activities .number span{background-color: #13403e !important}
.single-activities .number span::before{border: 1px solid #13403e !important}
.single-activities:hover .number span{background-color: #feaf47 !important}
.single-activities:hover .number span::before{border: 1px solid #feaf47 !important}
.single-facilities .number span{background-color: #13403e !important}
.single-facilities .number span::before{border: 1px solid #13403e !important}
.single-facilities:hover .number span{background-color: #feaf47 !important}
.single-choose .icon i{background-color: #13403e !important}
.single-choose:hover .icon i{background-color: #feaf47 !important}
.quote-item form .form-group .form-control:focus{border-color: #13403e !important}
.single-tour h3:hover{background-color: #13403e !important}
.newsletter-form button{background-color: #13403e !important}
.newsletter-form button:hover{background-color: #0e2f2e !important}
.page-banner-content ul li::before{background: #13403e !important}
.apply-form form .form-group .form-control:focus{border-color: #13403e !important}
.faq-contact-form #contactForm .form-group .form-control:focus{border-color: #13403e !important}
.login-form form .form-group .form-control:focus{border: 1px solid #13403e !important}
.login-form form .lost-your-password a::after{background-color: #feaf47 !important}
.login-form form button{background-color: #13403e !important}
.login-form form button:hover{background-color: #feaf47 !important}
.register-form form .form-group .form-control:focus{border: 1px solid #13403e !important}
.register-form form button{background-color: #13403e !important}
.register-form form button:hover{background-color: #feaf47 !important}
.error-content .default-btn{background-color: #13403e !important}
.error-content .default-btn:hover{background-color: #feaf47 !important}
.coming-soon-content #timer div{background-color: #0e2f2e !important}
.coming-soon-content .newsletter-form .default-btn{background-color: #13403e !important}
.coming-soon-content .newsletter-form .default-btn:hover{background-color: #feaf47 !important}
.contact-information .contact-list li a::before{background-color: #13403e !important}
.contact-form #contactForm .form-group .form-control:focus{border-color: #13403e !important}
.teacher-details-information h3::before{background-color: #13403e !important}
.event-details-information h3::before{background-color: #13403e !important}
.class-details-desc .class-details-tab .tabs li a:hover,
.class-details-desc .class-details-tab .tabs li a:focus{background-color: #13403e !important}
.class-details-desc .class-details-tab .tabs li.current a{background-color: #13403e !important;border-color: #13403e !important}
.class-details-information h3::before{background-color: #13403e !important}
.class-newsletter .newsletter-form button{background: #13403e !important}
.class-newsletter .newsletter-form button:hover{background-color: #feaf47 !important}
.pagination-area .page-numbers.current,
.pagination-area .page-numbers:hover,
.pagination-area .page-numbers:focus{background: #feaf47 !important}
.blog-details-desc .article-content .entry-meta ul li::before{background: #13403e !important}
.blog-details-desc .article-content .features-list li:hover i{background-color: #feaf47 !important}
.blog-details-desc .article-footer .article-share .social li a:hover{background-color: #feaf47 !important}
.comments-area .comment-body .reply a:hover{background-color: #feaf47 !important;border-color: #feaf47 !important}
.comments-area .comment-respond .form-submit input{background: #13403e !important}
.widget-area .widget .widget-title::before{background: #13403e !important}
.widget-area .widget_search form .search-field:focus{border-color: #feaf47 !important}
.widget-area .widget_search form button:hover,
.widget-area .widget_search form button:focus{background-color: #feaf47 !important}
.widget-area .widget_categories ul li::before{background: #13403e !important}
.widget-area .tagcloud a:hover,
.widget-area .tagcloud a:focus{background-color: #feaf47 !important}
.single-footer-widget .social li a{background-color: #13403e !important}
.single-footer-widget .social li a:hover,
.single-footer-widget .social li a:focus{background-color: #feaf47 !important}
.single-footer-widget h3::before{background-color: #13403e !important}
.single-footer-widget .footer-contact-info li a::before{background-color: #13403e !important}
.single-footer-widget .quick-links li a::before{background-color: #13403e !important}
.single-footer-widget .photo-gallery-list li .box::before{background-color: #13403e !important}
.copyright-area{background-color: #13403e !important}
.go-top{background-color: #13403e !important}
.go-top:hover{background-color: #13403e !important}
.buy-now-btn:hover{background-color: #13403e !important}
.top-navbar{background-color: #13403e !important}

@media only screen and (max-width: 1199px){
.main-responsive-nav .mean-container a.meanmenu-reveal span{background: #0e2f2e !important}
}