/* ==========================================================================
   Laxmi Balaji Automotive – UI enhancements
   Loaded after styles.css / responsive.css. Refines the existing template
   without changing its layout or markup. Safe to remove to get the old look.
   ========================================================================== */

:root {
    --lb-navy: #002147;
    --lb-navy-2: #0b3566;
    --lb-orange: #f1992d;
    --lb-orange-2: #d9821a;
    --lb-teal: #1095ad;
    --lb-blue: #00aaff;
    --lb-ink: #1f2937;
    --lb-muted: #5b6573;
    --lb-line: #e5e9ef;
    --lb-bg-soft: #f6f8fb;
    --lb-radius: 12px;
    --lb-radius-sm: 8px;
    --lb-shadow: 0 6px 18px rgba(0, 33, 71, .08);
    --lb-shadow-lg: 0 18px 40px rgba(0, 33, 71, .16);
    --lb-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base typography ---------- */
html { scroll-behavior: smooth; }
body {
    color: var(--lb-ink);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { color: var(--lb-navy); letter-spacing: .01em; }
p { color: var(--lb-muted); }
a { transition: color .2s var(--lb-ease), background-color .2s var(--lb-ease), border-color .2s var(--lb-ease), box-shadow .2s var(--lb-ease), transform .2s var(--lb-ease); }
img { max-width: 100%; height: auto; }
::selection { background: var(--lb-orange); color: #fff; }
:focus-visible { outline: 3px solid rgba(0, 170, 255, .55); outline-offset: 2px; }

/* ---------- Header ---------- */
.header-top { padding: 8px 0; }
.header-top-left li { font-size: 13px; letter-spacing: .01em; }
.header-top-left li i { border-radius: 50%; background: rgba(255, 255, 255, .18); }
.header-top-right li a { border-width: 1.5px; transition: all .2s var(--lb-ease); }
.header-top-right li a:hover { transform: translateY(-2px); }

.header-area .header-bottom {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 990;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    box-shadow: 0 1px 0 var(--lb-line), 0 8px 24px rgba(0, 33, 71, .06);
}
.mainmenu ul li a {
    position: relative;
    font-weight: 600;
    color: var(--lb-navy);
    padding: 28px 12px;
}
.mainmenu ul li img.s11 { vertical-align: middle; }
.mainmenu ul li img.s11[src*="icon2"] { width: 190px !important; }
.mainmenu ul li img.s11[src*="india"] { width: 104px !important; }
.mainmenu ul > li > a::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--lb-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--lb-ease);
}
.mainmenu ul > li:hover > a::after,
.mainmenu ul > li.active > a::after { transform: scaleX(1); }
.mainmenu ul > li:hover > a,
.mainmenu ul > li.active > a { color: var(--lb-orange); }
.mainmenu ul li img.s11 { transition: transform .25s var(--lb-ease); }
.mainmenu ul li:hover img.s11 { transform: translateY(-2px); }

.header-area .mainmenu ul li > ul.submenu {
    background: #fff;
    border-radius: var(--lb-radius-sm);
    box-shadow: var(--lb-shadow-lg);
    padding: 8px 0;
    min-width: 280px;
    border: 1px solid var(--lb-line);
    transform: translateY(8px);
    transition: opacity .2s var(--lb-ease), transform .2s var(--lb-ease), visibility .2s;
}
.header-area .mainmenu ul li:hover > ul.submenu { transform: translateY(0); }
.header-area .mainmenu ul li > ul.submenu li > a {
    color: var(--lb-navy);
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
}
.header-area .mainmenu ul li > ul.submenu li > a::after { display: none; }
.header-area .mainmenu ul li > ul.submenu li:hover > a,
.header-area .mainmenu ul li > ul.submenu li.active > a {
    background: #fff4e8;
    color: var(--lb-orange-2);
    padding-left: 24px;
}

/* ---------- Hero slider ---------- */
.slider-area { position: relative; }
.slider-items { position: relative; }
.slider-items::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 33, 71, 0) 55%, rgba(0, 33, 71, .35) 100%);
    pointer-events: none;
}
.slider-active .owl-nav div {
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--lb-navy);
    box-shadow: var(--lb-shadow);
    font-size: 22px;
    transition: all .25s var(--lb-ease);
}
.slider-active .owl-nav div:hover { background: var(--lb-orange); color: #fff; }

/* ---------- Feature strip (4 coloured boxes) ---------- */
.featured-area.mb-100 { margin-bottom: 80px; }
.featured-wrap {
    position: relative;
    padding: 34px 22px;
    height: auto;
    min-height: 256px;
    overflow: hidden;
    transition: transform .3s var(--lb-ease), box-shadow .3s var(--lb-ease);
}
.featured-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}
.featured-wrap:hover { transform: translateY(-6px); box-shadow: var(--lb-shadow-lg); z-index: 2; }
.featured-wrap i {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .12);
    transition: transform .3s var(--lb-ease);
}
.featured-wrap:hover i { transform: scale(1.08) rotate(-4deg); }
.featured-wrap h2 { letter-spacing: .06em; color: #fff; margin-bottom: 10px; }
.featured-wrap p { color: rgba(255, 255, 255, .9); font-size: 14px; line-height: 1.7; }

/* ---------- Welcome / request-info section ---------- */
.free-account-area { background-size: cover; background-position: center; }
.free-account-info { padding: 40px 0; }
.free-account-info h2 { color: var(--lb-navy) !important; font-size: 34px !important; font-weight: 700; line-height: 1.3; }
.free-account-info h2 span {
    background: var(--lb-teal) !important;
    border-radius: 6px;
    padding: 4px 12px !important;
    box-shadow: 0 4px 14px rgba(16, 149, 173, .35);
}
.free-account-info h3 { color: var(--lb-navy-2) !important; font-style: normal; font-weight: 500; font-size: 20px; margin-bottom: 22px; }
.free-account-info p { color: var(--lb-ink) !important; font-weight: 400; margin-bottom: 18px; }
.free-account-info a,
.featured-area2 .featured-wrap a,
.quote-wrap2 ul li a,
.test-form button,
.tbl-btn,
.modal .btn {
    border-radius: 999px !important;
    font-weight: 600;
    letter-spacing: .02em;
    box-shadow: 0 6px 16px rgba(241, 153, 45, .32);
    transition: all .25s var(--lb-ease);
}
.free-account-info a { padding: 12px 30px; }
.free-account-info a:hover,
.quote-wrap2 ul li a:hover,
.test-form button:hover,
.tbl-btn:hover { background: var(--lb-orange-2) !important; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(241, 153, 45, .40); color: #fff; }

.test-form {
    background: linear-gradient(160deg, var(--lb-teal), #0d7a8f);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow-lg);
    margin-top: 40px;
    padding: 30px;
}
.test-form h3 { font-size: 16px; letter-spacing: .08em; color: #fff; }
.test-form input,
.test-form textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 14px;
    height: auto;
    font-style: normal;
    color: var(--lb-ink) !important;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: var(--lb-radius-sm);
    transition: box-shadow .2s var(--lb-ease), border-color .2s var(--lb-ease);
}
.test-form textarea { min-height: 90px; resize: vertical; }
.test-form input::placeholder,
.test-form textarea::placeholder { color: #8b95a3; }
.test-form input:focus,
.test-form textarea:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.test-form button { width: 100%; padding: 12px 20px; margin-top: 4px; border: 0; }
.test-form label.validation-error-message { color: #ffe1c2; font-size: 12px; margin: -6px 0 8px; display: block; }

/* ---------- Section titles ---------- */
.section-title h2 { font-size: 30px; line-height: 1.25; letter-spacing: .04em; margin-bottom: 12px; }
.section-title p { font-style: normal; color: var(--lb-muted); max-width: 720px; margin: 0 auto 18px; font-size: 15px; }
.section-line::before { background: rgba(0, 33, 71, .18); }
.section-title { margin-bottom: 40px; }

/* ---------- Mission / vision / value cards ---------- */
.service-area { background-size: cover; padding-top: 60px; padding-bottom: 40px; }
.service-wrap {
    background: #fff;
    border: 1px solid var(--lb-line);
    border-top: 4px solid var(--lb-orange);
    border-radius: var(--lb-radius);
    padding: 34px 26px 28px !important;
    box-shadow: var(--lb-shadow);
    margin-bottom: 30px;
    height: 100%;
    transition: transform .3s var(--lb-ease), box-shadow .3s var(--lb-ease);
}
.service-wrap:hover { transform: translateY(-6px); box-shadow: var(--lb-shadow-lg); }
.service-icon {
    background: #fff;
    box-shadow: 0 0 0 6px #fff4e8, 0 10px 24px rgba(0, 33, 71, .12);
    width: 100px;
    height: 100px;
    line-height: 100px;
    padding: 18px;
    transition: transform .3s var(--lb-ease);
}
.service-wrap:hover .service-icon { transform: scale(1.06); }
.service-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.service-wrap h3 { font-size: 18px; letter-spacing: .06em; margin-bottom: 12px; }
.service-wrap p { font-size: 14.5px; }
.service-wrap ul li { color: var(--lb-muted); font-size: 14.5px; line-height: 1.9; }
.service-wrap a strong {
    display: inline-block;
    color: var(--lb-orange-2);
    font-weight: 600;
    letter-spacing: .02em;
    transition: transform .25s var(--lb-ease);
}
.service-wrap a:hover strong { transform: translateX(3px); color: var(--lb-navy); }

/* ---------- Product cards ---------- */
.popular-courses-area { padding-top: 60px; background-size: cover; }
.popular-courses-wrap {
    border-radius: var(--lb-radius);
    overflow: hidden;
    box-shadow: var(--lb-shadow);
    border: 1px solid var(--lb-line);
    transition: transform .3s var(--lb-ease), box-shadow .3s var(--lb-ease);
}
.popular-courses-wrap:hover { transform: translateY(-6px); box-shadow: var(--lb-shadow-lg); }
.sylabus-img { margin-bottom: 0; aspect-ratio: 4 / 3; background: #f0f3f7; }
.sylabus-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--lb-ease); }
.sylabus-wrap:hover .sylabus-img img { transform: scale(1.08); }
.sylabus-wrap:hover .sylabus-img::before { opacity: .15; }
.sylabus-info { padding: 22px 22px 24px !important; }
.sylabus-info h3 { font-size: 17px; margin-bottom: 10px; }
.sylabus-info p { font-size: 14px; margin-bottom: 14px; }
.sylabus-info a {
    display: inline-block;
    font-size: 13px;
    letter-spacing: .08em;
    color: var(--lb-orange-2);
    border-bottom: 2px solid transparent;
}
.sylabus-info a:hover { color: var(--lb-navy); border-color: var(--lb-orange); }

/* ---------- Client logos ---------- */
.teacher-area.ptb-120 { padding: 70px 0; }
.teacher-img {
    background: #fff;
    border: 1px solid var(--lb-line) !important;
    border-radius: var(--lb-radius-sm);
    padding: 14px !important;
    box-shadow: var(--lb-shadow);
    transition: transform .3s var(--lb-ease), box-shadow .3s var(--lb-ease);
}
.teacher-img img { filter: grayscale(60%); opacity: .85; transition: filter .3s var(--lb-ease), opacity .3s var(--lb-ease); }
.teacher-wrap:hover .teacher-img { transform: translateY(-4px); box-shadow: var(--lb-shadow-lg); }
.teacher-wrap:hover .teacher-img img { filter: none; opacity: 1; }
.teacher-active .owl-dot { border-radius: 999px; }

/* ---------- Map ---------- */
.container-fluid iframe { display: block; width: 100%; border: 0; }

/* ---------- Call-out band ---------- */
.quote-area2 { padding: 34px 0; }
.quote-wrap2 p { font-style: normal; font-weight: 400; font-size: 19px; }
.quote-wrap2 ul li a { width: auto; padding: 0 26px; }

/* ---------- Footer ---------- */
.footer-area { background: linear-gradient(180deg, var(--lb-navy) 0%, #011633 100%); }
.footer-top { padding: 56px 0 24px; }
.footer-widget h2 { font-size: 15px; letter-spacing: .12em; }
.footer-widget h2::before { background: var(--lb-orange); width: 36px; height: 3px; border-radius: 3px; }
.footer-widget p, .footer-widget li { color: #cbd5e1 !important; font-size: 14px; }
.footer-menu ul li { margin-bottom: 6px; }
.footer-menu ul li a { display: inline-block; transition: transform .2s var(--lb-ease), color .2s; }
.footer-menu ul li a i { color: var(--lb-orange); margin-right: 6px; }
.footer-menu ul li a:hover { color: #fff !important; transform: translateX(4px); }
.footer-widget.contact ul li { line-height: 1.7; margin-bottom: 10px; padding-left: 26px; position: relative; }
.footer-widget.contact ul li i { position: absolute; left: 0; top: 6px; color: var(--lb-orange); }
.footer-widget.event-gallery img { border-radius: var(--lb-radius-sm); background: #fff; padding: 6px; max-width: 150px; }
.footer-bottom-area { border-top: 1px solid rgba(255, 255, 255, .08); padding: 16px 0; }
.footer-bottom p { font-size: 13px; margin: 0; }
.footer-bottom span { color: #94a3b8 !important; }

/* ---------- Inner page banner ---------- */
.breadcumb-area { background-size: cover; background-position: center; padding: 90px 0 0; }
.breadcumb-area.black-opacity::before { background: linear-gradient(180deg, rgba(0, 33, 71, .55), rgba(0, 33, 71, .75)); }
.breadcumb-wrap h2 { font-size: 44px !important; font-weight: 700; letter-spacing: .04em; margin-bottom: 40px; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.breadcumb-wrap ul {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 999px 999px 0 0;
    padding: 10px 34px;
}
.breadcumb-wrap ul li { font-style: normal; font-size: 13px; letter-spacing: .04em; margin: 0 4px; }
.breadcumb-wrap ul li a { color: #fff; }
.breadcumb-wrap ul li a:hover { color: var(--lb-orange); }

/* ---------- Product detail pages ---------- */
.alumni-wrap { margin-bottom: 30px; }
.alumni-wrap #jssor_1 { border-radius: var(--lb-radius); box-shadow: var(--lb-shadow-lg); }
.alumni-wrap h3, .alumni-wrap h2 { font-size: 22px; margin: 18px 0 10px; }
.alumni-wrap p { font-size: 15px; }
.alumni-menu ul li a {
    border-radius: var(--lb-radius-sm);
    margin-bottom: 8px;
    border: 0;
    background: var(--lb-navy);
    font-weight: 500;
    padding: 15px 18px;
    position: relative;
}
.alumni-menu ul li a::after { content: "\f105"; font-family: FontAwesome; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); opacity: .7; transition: right .2s var(--lb-ease); }
.alumni-menu ul li a:hover::after { right: 12px; }
.alumni-menu ul li.active a, .alumni-menu ul li a:hover { background: var(--lb-orange); color: #fff; }
.tbl-btn { margin-top: 12px; padding: 10px 24px !important; border: 0 !important; }

/* ---------- Gallery / machinery grids ---------- */
.project-area { padding: 60px 0 70px; }
.portfolio-items {
    border-radius: var(--lb-radius);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--lb-line);
    box-shadow: var(--lb-shadow) !important;
    transition: transform .3s var(--lb-ease), box-shadow .3s var(--lb-ease);
}
.portfolio-items:hover { transform: translateY(-6px); box-shadow: var(--lb-shadow-lg) !important; }
.portfolio-items a img { box-shadow: none !important; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--lb-ease); }
.portfolio-items:hover a img { transform: scale(1.05); }
.portfolio-items a::before { z-index: 1; }
.portfolio-items a::after {
    content: "\f00e";
    font-family: FontAwesome;
    position: absolute;
    left: 50%; top: 50%;
    width: 46px; height: 46px; line-height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--lb-navy);
    text-align: center;
    font-size: 18px;
    opacity: 0;
    transform: scale(.6);
    transition: all .3s var(--lb-ease);
    z-index: 2;
}
.portfolio-items:hover a::after { opacity: 1; transform: scale(1); }
.machine-caption { background: var(--lb-bg-soft); border-top: 1px solid var(--lb-line); padding: 14px 12px; text-align: center; }
.machine-caption h3 { font-size: 15px !important; margin: 0; letter-spacing: .03em; line-height: 1.4; }
.portfolio-menu button { border-radius: 999px; font-size: 15px; padding: 8px 22px; border-width: 1.5px; margin: 0 4px 10px; transition: all .2s var(--lb-ease); }
.portfolio-menu button:hover { background: rgba(0, 170, 255, .1); }

/* ---------- Quote modal ---------- */
.modal-content { border-radius: var(--lb-radius); border: 0; box-shadow: var(--lb-shadow-lg); overflow: hidden; }
.modal-header { background: var(--lb-navy); padding: 18px 24px; }
.modal-header .section-title { margin: 0; }
.modal-header h5 { color: #fff; margin: 0; font-size: 16px; letter-spacing: .04em; }
.modal-body { padding: 24px; }
.modal .form-control { border-radius: var(--lb-radius-sm); box-shadow: none; height: 42px; border-color: #d6dde6; }
.modal textarea.form-control { height: auto; }
.modal .form-control:focus { border-color: var(--lb-blue); box-shadow: 0 0 0 3px rgba(0, 170, 255, .18); }
.modal-footer { border-top: 1px solid var(--lb-line); padding: 14px 0 0; }
.modal .btn { padding: 9px 24px; border: 0; }
.modal .btn-danger { background: #e5e9ef !important; color: var(--lb-navy) !important; box-shadow: none; }
.modal .btn-danger:hover { background: #d6dde6 !important; }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
    transition: transform .25s var(--lb-ease), box-shadow .25s var(--lb-ease);
    animation: wa-pulse 2.6s infinite;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 14px 30px rgba(37, 211, 102, .55); }
@keyframes wa-pulse {
    0%   { box-shadow: 0 10px 26px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, .45); }
    70%  { box-shadow: 0 10px 26px rgba(37, 211, 102, .45), 0 0 0 16px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 10px 26px rgba(37, 211, 102, .45), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ---------- Scroll to top ---------- */
#scrollUp {
    right: 22px;
    bottom: 100px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 50%;
    background: var(--lb-navy);
    color: #fff;
    text-align: center;
    font-size: 16px;
    box-shadow: var(--lb-shadow-lg);
    transition: background .2s var(--lb-ease), transform .2s var(--lb-ease);
}
#scrollUp:hover { background: var(--lb-orange); transform: translateY(-3px); }

/* ---------- Mobile menu ---------- */
.slicknav_menu { background: var(--lb-navy); border-radius: var(--lb-radius-sm); }
.slicknav_btn { border-radius: var(--lb-radius-sm); background: var(--lb-orange); }
.slicknav_nav a { border-radius: 6px; }
.slicknav_nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .section-title h2 { font-size: 26px; }
    .breadcumb-wrap h2 { font-size: 34px !important; }
    .featured-wrap { width: 50%; min-height: 240px; }
    .free-account-info h2 { font-size: 28px !important; }
    .header-area .header-bottom { position: relative; }
}
@media (max-width: 575px) {
    .section-title h2 { font-size: 23px; }
    .breadcumb-area { padding-top: 56px; }
    .breadcumb-wrap h2 { font-size: 28px !important; margin-bottom: 26px; }
    .featured-wrap { width: 100%; min-height: 0; }
    .featured-area.mb-100 { margin-bottom: 50px; }
    .free-account-info h2 { font-size: 24px !important; }
    .free-account-info h2 span { display: inline-block; margin-top: 6px; }
    .test-form { padding: 22px; }
    .quote-wrap2 p { font-size: 16px; }
    .quote-wrap2 ul li { margin: 8px 8px 0 0; }
    .footer-bottom p { float: none !important; text-align: center; }
    .footer-bottom p + p { margin-top: 6px; }
    .wa-float { width: 56px; height: 56px; right: 16px; bottom: 16px; }
    #scrollUp { right: 16px; bottom: 84px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}