/* =====================================================
   CUSTOM PAGES STYLESHEET
   Extends assets/css/style.css for inner pages:
   About, Gallery, Contact, Product Detail, Offer Detail
   Colors matched to existing theme:
   Navy  : #001659 / #0c1c4b
   Teal  : #128b90 / #138b90 / #1e4668
   Accent: #de3139
   ===================================================== */

/* ---------- Page Title Banner Overlay ---------- */
.page-title{
    background-color:#0c1c4b;
    background-blend-mode: multiply;
    overflow:hidden;
}
.page-title::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, rgba(0,22,89,.92) 10%, rgba(19,139,144,.78) 100%);
    z-index:1;
}
.page-title .auto-container{
    position:relative;
    z-index:2;
}
.page-title .page-breadcrumb{
    margin-top:12px;
}
.page-title .sub-heading{
    display:inline-block;
    color:#fff;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.35);
    padding:6px 18px;
    border-radius:30px;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:18px;
    animation:fadeInUp .7s ease both;
}
.page-title h2{
    animation:fadeInUp .8s ease both .1s;
}
.page-title .page-breadcrumb{
    animation:fadeInUp .8s ease both .25s;
}
@keyframes fadeInUp{
    0%{opacity:0; transform:translateY(25px);}
    100%{opacity:1; transform:translateY(0);}
}

/* ---------- Generic Section Spacing ---------- */
.inner-section{
    padding:90px 0;
    position:relative;
}
.inner-section.bg-light-grey{
    background:#f7f9fb;
}
.inner-section.pt-0{padding-top:0;}
.inner-section.pb-0{padding-bottom:0;}

/* ---------- Mission / Vision / Values Cards ---------- */
.mv-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:20px;
}
.mv-card{
    background:#fff;
    border-radius:10px;
    padding:40px 30px;
    text-align:center;
    box-shadow:0 10px 35px rgba(12,28,75,.08);
    transition:.4s ease;
    border-bottom:4px solid transparent;
}
.mv-card:hover{
    transform:translateY(-10px);
    border-bottom-color:#128b90;
    box-shadow:0 20px 45px rgba(12,28,75,.14);
}
.mv-card .icon{
    width:70px;
    height:70px;
    line-height:70px;
    border-radius:50%;
    background:linear-gradient(135deg,#001659,#128b90);
    color:#fff;
    font-size:28px;
    margin:0 auto 22px;
    transition:.4s;
}
.mv-card:hover .icon{
    transform:rotateY(180deg);
}
.mv-card h4{
    color:#001659;
    font-weight:700;
    margin-bottom:12px;
}
.mv-card p{
    color:#5a5a5a;
    margin-bottom:0;
    font-size:15px;
    line-height:1.7;
}

/* ---------- Timeline (About) ---------- */
.about-timeline{
    position:relative;
    margin-top:20px;
    padding-left:40px;
    border-left:2px dashed #128b90;
}
.about-timeline .t-item{
    position:relative;
    padding-bottom:38px;
}
.about-timeline .t-item:last-child{padding-bottom:0;}
.about-timeline .t-item::before{
    content:"";
    position:absolute;
    left:-49px;
    top:2px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    border:4px solid #128b90;
}
.about-timeline .t-item h5{
    color:#001659;
    font-weight:700;
    margin-bottom:6px;
}
.about-timeline .t-item p{
    color:#5a5a5a;
    margin-bottom:0;
}

/* ---------- Gallery Page Filters ---------- */
.gallery-filters{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-bottom:40px;
}
.gallery-filters button{
    border:1px solid #d8dee7;
    background:#fff;
    color:#0c1c4b;
    padding:10px 26px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
    cursor:pointer;
    transition:.35s;
}
.gallery-filters button:hover,
.gallery-filters button.active{
    background:linear-gradient(135deg,#001659,#128b90);
    border-color:transparent;
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(18,139,144,.28);
}
.gallery-page .gallery figure{
    max-height:260px;
    border-radius:8px;
    transition:.4s ease, opacity .35s ease, transform .35s ease;
}
.gallery-page .gallery figure.hide{
    display:none;
}
.gallery-page .gallery figure img{
    border-radius:8px;
    height:100%;
    object-fit:cover;
}
.gallery-page .gallery figure:hover img{
    transform:scale(1.08);
}

/* ---------- Contact Page Info Cards ---------- */
.contact-info-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:-140px;
    position:relative;
    z-index:5;
    margin-bottom:70px;
}
.contact-info-cards .info-card{
    background:#fff;
    border-radius:10px;
    padding:35px 25px;
    text-align:center;
    box-shadow:0 15px 40px rgba(12,28,75,.14);
    transition:.4s;
}
.contact-info-cards .info-card:hover{
    transform:translateY(-8px);
}
.contact-info-cards .info-card .icon-box{
    width:60px;
    height:60px;
    line-height:60px;
    border-radius:50%;
    background:#eef6f6;
    margin:0 auto 18px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.contact-info-cards .info-card .icon-box img{
    width:26px;
    height:26px;
}
.contact-info-cards .info-card h5{
    color:#001659;
    font-weight:700;
    margin-bottom:8px;
    font-size:17px;
}
.contact-info-cards .info-card p,
.contact-info-cards .info-card a{
    color:#5a5a5a;
    font-size:14px;
    margin-bottom:0;
    word-break:break-word;
}
.contact-info-cards .info-card a:hover{
    color:#128b90;
}

/* ---------- Product / Offer Detail Layout ---------- */
.detail-gallery{
    position:relative;
}
.detail-gallery .main-image{
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(12,28,75,.12);
}
.detail-gallery .main-image img{
    width:100%;
    display:block;
    transition:.5s ease;
}
.detail-gallery .thumb-row{
    display:flex;
    gap:14px;
    margin-top:16px;
}
.detail-gallery .thumb-row .thumb{
    width:90px;
    height:90px;
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    border:2px solid transparent;
    transition:.3s;
    flex-shrink:0;
}
.detail-gallery .thumb-row .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.detail-gallery .thumb-row .thumb.active,
.detail-gallery .thumb-row .thumb:hover{
    border-color:#128b90;
    transform:translateY(-3px);
}

.detail-content .badge-tag{
    display:inline-block;
    background:#eef6f6;
    color:#128b90;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:6px 16px;
    border-radius:30px;
    margin-bottom:16px;
}
.detail-content h1{
    color:#001659;
    font-size:34px;
    font-weight:800;
    margin-bottom:14px;
}
.detail-content .short-desc{
    color:#5a5a5a;
    font-size:16px;
    line-height:1.8;
    margin-bottom:26px;
}
.detail-content .spec-table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:28px;
}
.detail-content .spec-table tr{
    border-bottom:1px solid #eceef2;
}
.detail-content .spec-table tr:last-child{border-bottom:none;}
.detail-content .spec-table td{
    padding:13px 10px;
    font-size:14.5px;
    color:#333;
}
.detail-content .spec-table td:first-child{
    font-weight:700;
    color:#001659;
    width:42%;
}
.detail-cta-row{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:center;
}
.detail-cta-row .phone-inline{
    display:flex;
    align-items:center;
    gap:10px;
    color:#001659;
    font-weight:700;
}
.detail-cta-row .phone-inline .icon-circle{
    width:44px;
    height:44px;
    border-radius:50%;
    background:linear-gradient(135deg,#001659,#128b90);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Tabs */
.product-tabs{
    margin-top:20px;
}
.product-tabs .tab-nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    border-bottom:2px solid #eceef2;
    margin-bottom:30px;
}
.product-tabs .tab-nav button{
    background:0 0;
    border:none;
    padding:14px 26px;
    font-size:15px;
    font-weight:700;
    color:#5a5a5a;
    cursor:pointer;
    position:relative;
    transition:.3s;
}
.product-tabs .tab-nav button::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    width:0;
    height:2px;
    background:#128b90;
    transition:.35s;
}
.product-tabs .tab-nav button.active{
    color:#001659;
}
.product-tabs .tab-nav button.active::after{
    width:100%;
}
.product-tabs .tab-panel{
    display:none;
    animation:fadeInUp .5s ease both;
}
.product-tabs .tab-panel.active{
    display:block;
}
.product-tabs .tab-panel ul{
    margin:0;
    padding:0;
    list-style:none;
}
.product-tabs .tab-panel ul li{
    position:relative;
    padding:8px 0 8px 28px;
    color:#444;
    line-height:1.6;
}
.product-tabs .tab-panel ul li::before{
    content:"\f00c";
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    position:absolute;
    left:0;
    top:8px;
    color:#128b90;
    font-size:13px;
}

/* Sidebar */
.detail-sidebar .widget-box{
    background:#fff;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(12,28,75,.08);
    padding:28px;
    margin-bottom:28px;
}
.detail-sidebar .widget-box h4{
    color:#001659;
    font-weight:700;
    margin-bottom:20px;
    padding-bottom:14px;
    border-bottom:2px solid #eef6f6;
}
.detail-sidebar .cat-list li{
    list-style:none;
}
.detail-sidebar .cat-list li a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 4px;
    color:#333;
    font-size:14.5px;
    border-bottom:1px dashed #eceef2;
    transition:.3s;
}
.detail-sidebar .cat-list li:last-child a{border-bottom:none;}
.detail-sidebar .cat-list li a:hover,
.detail-sidebar .cat-list li a.active{
    color:#128b90;
    padding-left:10px;
}
.detail-sidebar .cat-list li a i{
    font-size:12px;
}
.detail-sidebar .cta-box{
    background:linear-gradient(135deg,#001659,#128b90);
    color:#fff;
    text-align:center;
}
.detail-sidebar .cta-box h4{
    color:#fff;
    border-bottom-color:rgba(255,255,255,.25);
}
.detail-sidebar .cta-box p{
    color:rgba(255,255,255,.85);
    font-size:14px;
    margin-bottom:20px;
}
.detail-sidebar .cta-box .phone-big{
    font-size:22px;
    font-weight:800;
    display:block;
    margin-bottom:18px;
    color:#fff;
}
.detail-sidebar .cta-box .theme-btn{
    background:#fff;
    color:#001659;
    display:inline-block;
    padding:12px 26px;
    border-radius:30px;
    font-weight:700;
    font-size:14px;
    text-transform:uppercase;
    transition:.3s;
}
.detail-sidebar .cta-box .theme-btn:hover{
    background:#0c1c4b;
    color:#fff;
}

/* Applications / Features grid (offer + product) */
.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    margin-top:10px;
}
.feature-grid .feature-item{
    background:#fff;
    border-radius:10px;
    padding:28px 20px;
    text-align:center;
    box-shadow:0 8px 25px rgba(12,28,75,.07);
    transition:.35s;
}
.feature-grid .feature-item:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(12,28,75,.13);
}
.feature-grid .feature-item .icon{
    width:56px;
    height:56px;
    line-height:56px;
    border-radius:50%;
    background:#eef6f6;
    color:#128b90;
    font-size:22px;
    margin:0 auto 16px;
}
.feature-grid .feature-item h5{
    color:#001659;
    font-weight:700;
    font-size:15px;
    margin-bottom:0;
}

/* Related grid heading */
.related-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:30px;
}

/* Breadcrumb small helper on non-banner sections */
.simple-crumb{
    color:#8892a6;
    font-size:14px;
    margin-bottom:18px;
}
.simple-crumb a{color:#128b90;}

/* ---------- Responsive ---------- */
@media only screen and (max-width:991px){
    .mv-cards{grid-template-columns:repeat(2,1fr);}
    .contact-info-cards{grid-template-columns:repeat(2,1fr); margin-top:30px;}
    .feature-grid{grid-template-columns:repeat(2,1fr);}
}
@media only screen and (max-width:767px){
    .mv-cards{grid-template-columns:1fr;}
    .contact-info-cards{grid-template-columns:1fr;}
    .feature-grid{grid-template-columns:1fr;}
    .inner-section{padding:60px 0;}
    .page-title{padding:80px 0 !important;}
    .detail-content h1{font-size:26px;}
}