/* ==========================================================
   PR INFOTECH SOLUTIONS — ABOUT PAGE CSS
   Used only by about.html.
========================================================== */

/*==================================================
 ABOUT PAGE
==================================================*/

.inner-banner{
    position:relative;
    padding:105px 0;
    overflow:hidden;
    background:
        linear-gradient(135deg,rgba(0,42,105,.95),rgba(0,87,217,.88)),
        url("../images/about/about-company.webp") center/cover no-repeat;
    color:#fff;
}

.inner-banner::before{
    content:"";
    position:absolute;
    width:330px;
    height:330px;
    top:-160px;
    right:-80px;
    border:55px solid rgba(255,255,255,.08);
    border-radius:50%;
}

.inner-banner::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    left:-90px;
    bottom:-130px;
    border:40px solid rgba(255,255,255,.06);
    border-radius:50%;
}

.inner-banner-content{
    position:relative;
    z-index:2;
    max-width:800px;
}

.inner-banner-tag,
.section-label{
    display:inline-block;
    color:#FFB067;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.5px;
    margin-bottom:15px;
}

.inner-banner h1{
    max-width:760px;
    font-size:50px;
    line-height:1.2;
    margin-bottom:20px;
}

.inner-banner p{
    max-width:720px;
    font-size:18px;
    line-height:1.8;
    color:rgba(255,255,255,.88);
}

.breadcrumb{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:30px;
    font-size:15px;
}

.breadcrumb a{
    color:#fff;
    font-weight:600;
}

.breadcrumb i{
    font-size:12px;
    color:#FFB067;
}

.breadcrumb span{
    color:rgba(255,255,255,.75);
}

.about-company-section{
    padding:100px 0;
    background:#fff;
}

.about-company-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-company-image{
    position:relative;
}

.about-company-image::before{
    content:"";
    position:absolute;
    left:-20px;
    top:-20px;
    width:135px;
    height:135px;
    border-radius:24px 0 0 0;
    border-left:8px solid #FF6B00;
    border-top:8px solid #FF6B00;
    z-index:0;
}

.about-company-image img{
    position:relative;
    z-index:1;
    width:100%;
    height:530px;
    object-fit:cover;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(15,35,65,.18);
}

.about-experience-box{
    position:absolute;
    z-index:2;
    right:-25px;
    bottom:35px;
    width:210px;
    padding:24px;
    border-radius:16px;
    background:#0057D9;
    color:#fff;
    box-shadow:0 18px 40px rgba(0,87,217,.30);
}

.about-experience-box strong{
    display:block;
    font-family:'Poppins',sans-serif;
    font-size:28px;
    margin-bottom:4px;
}

.about-experience-box span{
    font-size:14px;
    line-height:1.5;
}

.about-company-content .section-label,
.about-why-content .section-label{
    color:#0057D9;
}

.about-company-content h2,
.about-why-content h2{
    font-size:40px;
    line-height:1.3;
    color:#1F2937;
    margin-bottom:22px;
}

.about-company-content > p,
.about-why-content > p{
    color:#6b7280;
    line-height:1.85;
    margin-bottom:18px;
}

.about-highlight-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin:30px 0;
}

.about-highlight{
    display:flex;
    gap:14px;
    padding:18px;
    border-radius:14px;
    background:#f6f9ff;
    border:1px solid #e5edf7;
}

.about-highlight > i{
    color:#FF6B00;
    font-size:23px;
    margin-top:3px;
}

.about-highlight h3{
    font-size:17px;
    color:#1F2937;
    margin-bottom:5px;
}

.about-highlight p{
    color:#6b7280;
    font-size:14px;
    line-height:1.6;
}

.about-main-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
}

.mission-vision-section{
    padding:95px 0;
    background:#f8fbff;
}

.purpose-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.purpose-card{
    padding:38px 32px;
    border-radius:18px;
    background:#fff;
    border:1px solid #e5edf7;
    box-shadow:0 12px 35px rgba(15,35,65,.07);
    transition:.35s;
}

.purpose-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 48px rgba(15,35,65,.13);
}

.purpose-icon{
    width:65px;
    height:65px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:#edf4ff;
    color:#0057D9;
    font-size:28px;
    margin-bottom:24px;
}

.purpose-card h3{
    font-size:23px;
    color:#1F2937;
    margin-bottom:14px;
}

.purpose-card p{
    color:#6b7280;
    line-height:1.8;
}

.featured-purpose-card{
    background:linear-gradient(145deg,#0057D9,#003E99);
    border-color:transparent;
}

.featured-purpose-card .purpose-icon{
    background:rgba(255,255,255,.14);
    color:#fff;
}

.featured-purpose-card h3,
.featured-purpose-card p{
    color:#fff;
}

.featured-purpose-card p{
    opacity:.88;
}

.about-why-section{
    padding:100px 0;
    background:#fff;
}

.about-why-grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:65px;
    align-items:center;
}

.about-feature-list{
    display:grid;
    gap:15px;
    margin-top:30px;
}

.about-feature-list div{
    display:flex;
    gap:13px;
    align-items:flex-start;
    color:#374151;
    font-weight:600;
}

.about-feature-list i{
    flex:0 0 25px;
    width:25px;
    height:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e8f8ef;
    color:#16a34a;
    font-size:12px;
    margin-top:1px;
}

.about-stat-panel{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    padding:32px;
    border-radius:24px;
    background:linear-gradient(145deg,#f3f7ff,#eaf2ff);
}

.about-stat-card{
    padding:30px 25px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(15,35,65,.07);
}

.about-stat-card i{
    font-size:32px;
    color:#0057D9;
    margin-bottom:18px;
}

.about-stat-card h3{
    font-size:19px;
    color:#1F2937;
    margin-bottom:9px;
}

.about-stat-card p{
    color:#6b7280;
    font-size:14px;
    line-height:1.7;
}

.about-process-section{
    padding:95px 0;
    background:#f8fbff;
}

.about-process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.about-process-card{
    position:relative;
    padding:35px 25px;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    border:1px solid #e5edf7;
    box-shadow:0 10px 30px rgba(15,35,65,.06);
}

.about-process-card > span{
    position:absolute;
    right:18px;
    top:6px;
    font-family:'Poppins',sans-serif;
    font-size:58px;
    font-weight:800;
    color:#edf2f9;
}

.about-process-card > i{
    position:relative;
    z-index:1;
    font-size:34px;
    color:#FF6B00;
    margin-bottom:22px;
}

.about-process-card h3{
    position:relative;
    z-index:1;
    font-size:19px;
    color:#1F2937;
    margin-bottom:12px;
}

.about-process-card p{
    position:relative;
    z-index:1;
    color:#6b7280;
    font-size:14px;
    line-height:1.75;
}

@media(max-width:1100px){
    .about-company-grid,
    .about-why-grid{
        grid-template-columns:1fr;
    }

    .about-company-image{
        max-width:720px;
        margin:auto;
    }

    .about-process-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:900px){
    .purpose-grid{
        grid-template-columns:1fr;
    }

    .inner-banner h1{
        font-size:42px;
    }
}

@media(max-width:700px){
    .inner-banner{
        padding:75px 0;
    }

    .inner-banner h1{
        font-size:34px;
    }

    .inner-banner p{
        font-size:16px;
    }

    .about-company-section,
    .mission-vision-section,
    .about-why-section,
    .about-process-section{
        padding:70px 0;
    }

    .about-company-content h2,
    .about-why-content h2{
        font-size:31px;
    }

    .about-company-image img{
        height:380px;
    }

    .about-experience-box{
        right:15px;
        bottom:18px;
        width:185px;
        padding:18px;
    }

    .about-highlight-grid,
    .about-stat-panel,
    .about-process-grid{
        grid-template-columns:1fr;
    }

    .about-stat-panel{
        padding:20px;
    }
}

/* ==========================================================
   ABOUT PAGE PREMIUM REFINEMENT v2.0
========================================================== */

/* Top header: phone left, email centered, hours right */
.top-header .top-header-wrapper{
    min-height:48px;
    display:grid !important;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;
}

.top-contact{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#fff;
    white-space:nowrap;
}

.top-phone{justify-self:start;}
.top-email{justify-self:center;}
.top-hours{justify-self:end;}

.top-contact i{
    margin:0 !important;
    color:#8ab7ff;
}

/* Navbar and logo */
.nav-wrapper{
    min-height:96px !important;
}

.logo{
    width:220px !important;
    min-width:220px !important;
}

.logo img{
    width:220px !important;
    height:74px !important;
    object-fit:contain;
    object-position:left center;
}

.nav-menu{
    gap:22px !important;
}

.nav-menu .has-dropdown{
    position:relative;
}

.nav-menu .dropdown-toggle{
    display:flex;
    align-items:center;
    gap:7px;
    padding:28px 0;
    border:0;
    background:transparent;
    color:var(--navy);
    font:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

.nav-menu .dropdown-toggle i{
    font-size:11px;
    transition:transform .25s ease;
}

.nav-menu .dropdown-menu{
    position:absolute;
    top:calc(100% - 8px);
    left:50%;
    z-index:1200;
    min-width:240px;
    margin:0;
    padding:10px;
    list-style:none;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 18px 45px rgba(15,35,60,.16);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,12px);
    transition:.22s ease;
}

.nav-menu .dropdown-menu a{
    display:block;
    padding:11px 13px;
    border-radius:9px;
    white-space:nowrap;
}

.nav-menu .dropdown-menu a:hover{
    background:#eef5ff;
    color:var(--primary);
}

.nav-menu .has-dropdown:hover .dropdown-menu,
.nav-menu .has-dropdown:focus-within .dropdown-menu,
.nav-menu .has-dropdown.open .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}

.nav-menu .has-dropdown:hover .dropdown-toggle i,
.nav-menu .has-dropdown:focus-within .dropdown-toggle i,
.nav-menu .has-dropdown.open .dropdown-toggle i{
    transform:rotate(180deg);
}

/* Premium buttons */
.navbar .call-btn{
    min-height:52px;
    padding:0 25px;
    border:2px solid var(--primary);
    border-radius:12px;
    box-shadow:0 8px 22px rgba(0,87,217,.10);
    transition:.25s ease;
}

.navbar .call-btn:hover{
    color:#fff;
    background:var(--primary);
    transform:translateY(-2px);
}

.navbar .quote-btn{
    min-height:52px;
    padding:0 25px;
    border-radius:12px;
    box-shadow:0 8px 22px rgba(255,107,0,.16);
}

/* Hero banner */
.inner-banner{
    padding:78px 0 !important;
    background:
        linear-gradient(120deg,rgba(0,87,217,.93),rgba(9,31,66,.88)),
        url("../images/about/about-company.webp") center/cover no-repeat !important;
}

.inner-banner-content{
    max-width:850px !important;
}

.inner-banner h1{
    max-width:820px;
    font-size:clamp(40px,4.7vw,58px) !important;
    line-height:1.12 !important;
}

.inner-banner p{
    max-width:780px;
    font-size:18px !important;
    line-height:1.75 !important;
}

.inner-banner .eyebrow{
    margin-bottom:16px;
}

.breadcrumb{
    margin-top:22px !important;
}

/* Main section polish */
section{
    padding:78px 0 !important;
}

.about-image-wrap img{
    min-height:440px !important;
}

.experience-card{
    right:-18px !important;
    bottom:24px !important;
}

.highlight,
.purpose-card,
.industry-card,
.process-card{
    transition:transform .28s ease,box-shadow .28s ease;
}

.highlight:hover,
.purpose-card:hover,
.industry-card:hover,
.process-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(18,38,75,.11);
}

/* Connected process cards */
.process-grid{
    position:relative;
}

.process-card:not(:last-child)::after{
    content:"";
    position:absolute;
    top:50%;
    right:-22px;
    width:22px;
    height:2px;
    background:linear-gradient(90deg,#8ab7ff,#0057d9);
}

/* Tablet */
@media(max-width:1100px){
    .logo{
        width:190px !important;
        min-width:190px !important;
    }

    .logo img{
        width:190px !important;
        height:64px !important;
    }

    .process-card::after{
        display:none;
    }
}

/* Mobile */
@media(max-width:700px){
    .top-header{
        display:none;
    }

    .nav-wrapper{
        min-height:78px !important;
    }

    .logo,
    .logo img{
        width:165px !important;
        min-width:165px !important;
        height:56px !important;
    }

    .inner-banner{
        padding:58px 0 !important;
    }

    .inner-banner h1{
        font-size:36px !important;
    }

    section{
        padding:58px 0 !important;
    }

    .about-image-wrap img{
        min-height:320px !important;
    }
}

/* ==========================================================
   ABOUT PAGE HEADER POSITION & FOOTER LOGO FIX
========================================================== */

/* Keep all three top-header items away from screen edges */
.top-header .top-header-wrapper{
    width:min(1180px, calc(100% - 80px)) !important;
    max-width:1180px !important;
    min-height:48px;
    margin:0 auto !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1fr auto 1fr;
    align-items:center !important;
    gap:28px !important;
}

.top-phone{
    justify-self:start !important;
}

.top-email{
    justify-self:center !important;
}

.top-hours{
    justify-self:end !important;
}

/* Make the footer logo clearly visible on the dark footer */
.footer-logo{
    width:230px !important;
    height:auto !important;
    max-height:90px !important;
    padding:10px 14px !important;
    margin:0 0 20px !important;
    object-fit:contain !important;
    object-position:left center !important;
    background:#ffffff !important;
    border-radius:12px !important;
    filter:none !important;
    box-shadow:0 10px 28px rgba(0,0,0,.18);
}

/* Tablet */
@media(max-width:900px){
    .top-header .top-header-wrapper{
        width:min(100% - 40px, 1180px) !important;
        grid-template-columns:1fr 1fr;
        row-gap:8px !important;
    }

    .top-phone{
        justify-self:start !important;
    }

    .top-email{
        justify-self:end !important;
    }

    .top-hours{
        grid-column:1 / -1;
        justify-self:center !important;
    }
}

/* Mobile */
@media(max-width:700px){
    .footer-logo{
        width:205px !important;
        max-height:82px !important;
    }
}

/* ==========================================================
   ABOUT PAGE — IMAGE-BASED INDUSTRY CARDS
========================================================== */

.industry-image-panel{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}

.industry-image-card{
    min-height:0 !important;
    padding:0 !important;
    overflow:hidden;
    text-align:left;
    display:flex;
    flex-direction:column;
    border:1px solid #e3e9f2;
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 12px 32px rgba(18,38,75,.08);
    transition:transform .3s ease,box-shadow .3s ease;
}

.industry-image-card:hover{
    transform:translateY(-7px);
    box-shadow:0 20px 44px rgba(18,38,75,.14);
}

.industry-card-image{
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#edf4ff;
}

.industry-card-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    transition:transform .45s ease;
}

.industry-image-card:hover .industry-card-image img{
    transform:scale(1.06);
}

.industry-card-content{
    position:relative;
    padding:28px 22px 24px;
    flex:1;
}

.industry-card-content i{
    width:48px;
    height:48px;
    margin:-52px 0 16px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    border:5px solid #ffffff;
    border-radius:50%;
    background:#0057d9;
    color:#ffffff !important;
    font-size:19px !important;
    box-shadow:0 8px 20px rgba(0,87,217,.24);
}

.industry-card-content h3{
    margin:0 0 9px !important;
    color:#13213d;
    font-size:19px;
}

.industry-card-content p{
    margin:0 !important;
    color:#4c5870;
    font-size:14px;
    line-height:1.7;
}

@media(max-width:700px){
    .industry-image-panel{
        grid-template-columns:1fr;
        gap:18px;
    }

    .industry-card-content{
        padding:27px 20px 22px;
    }
}

/* ==========================================================
   FINAL ABOUT PAGE HERO & LOGO REFINEMENT
========================================================== */

/* Slightly larger and clearer navbar logo */
.logo{
    width:245px !important;
    min-width:245px !important;
}

.logo img{
    width:245px !important;
    height:78px !important;
    object-fit:contain !important;
    object-position:left center !important;
}

/* Reduce banner height and improve background visibility */
.inner-banner{
    padding:68px 0 !important;
    background:
        linear-gradient(120deg,rgba(0,87,217,.88),rgba(9,31,66,.80)),
        url("../images/about/about-company.webp") center/cover no-repeat !important;
}

/* Better title balance */
.inner-banner-content{
    max-width:900px !important;
}

.inner-banner h1{
    max-width:900px !important;
    font-size:clamp(40px,4.3vw,54px) !important;
    line-height:1.14 !important;
    margin-bottom:18px !important;
}

.inner-banner p{
    max-width:800px !important;
}

/* Tablet */
@media(max-width:1100px){
    .logo{
        width:210px !important;
        min-width:210px !important;
    }

    .logo img{
        width:210px !important;
        height:68px !important;
    }

    .inner-banner{
        padding:62px 0 !important;
    }
}

/* Mobile */
@media(max-width:700px){
    .logo,
    .logo img{
        width:170px !important;
        min-width:170px !important;
        height:56px !important;
    }

    .inner-banner{
        padding:52px 0 !important;
    }

    .inner-banner h1{
        font-size:34px !important;
    }
}


/* ==========================================================
   FINAL PREMIUM POLISH v3.0
========================================================== */

/* Larger premium logo */
.logo{
    width:280px !important;
    min-width:280px !important;
}
.logo img{
    width:280px !important;
    height:88px !important;
    object-fit:contain !important;
}

/* Tighter navbar */
.nav-wrapper{
    min-height:88px !important;
}
.nav-menu{
    gap:18px !important;
}

/* Better hero proportions */
.inner-banner{
    padding:58px 0 !important;
    background:
      linear-gradient(120deg,rgba(0,87,217,.82),rgba(9,31,66,.72)),
      url("../images/about/about-company.webp") center/cover no-repeat !important;
}

.inner-banner-content{
    max-width:920px !important;
    padding-left:30px;
}

.inner-banner h1{
    font-size:clamp(38px,4vw,50px) !important;
    line-height:1.12 !important;
    margin-bottom:16px !important;
}

.inner-banner p{
    font-size:18px !important;
    max-width:760px !important;
}

/* Softer decorative circles */
.inner-banner::before,
.inner-banner::after{
    opacity:.06 !important;
    transform:scale(.82);
}

/* Better CTA buttons */
.call-btn,
.quote-btn{
    transition:all .3s ease !important;
}

.call-btn:hover,
.quote-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(0,0,0,.15);
}

/* Responsive */
@media(max-width:992px){
    .logo,
    .logo img{
        width:220px !important;
        min-width:220px !important;
        height:72px !important;
    }

    .inner-banner{
        padding:50px 0 !important;
    }

    .inner-banner-content{
        padding-left:0;
    }
}

@media(max-width:768px){
    .logo,
    .logo img{
        width:170px !important;
        min-width:170px !important;
        height:56px !important;
    }

    .inner-banner h1{
        font-size:34px !important;
    }
}