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

.about-page{

    background:#f8f9fb;
    color:#333;
    font-family:'Poppins',sans-serif;

}

.about-container{

    width:90%;
    max-width:1200px;
    margin:auto;

}






/* HERO */

.about-hero{

    height:420px;
    background:url("image/weld1.jpg") center/cover no-repeat;
    position:relative;
    background:linear-gradient(30deg,#0d4c92,#0066cc);
    display:flex;
    justify-content:left;
    align-items:left;

}

.about-hero-overlay{

    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, 0);

}

.about-hero-content{

    position:relative;
    z-index:2;

    text-align:center;
    color:white;

}

.about-hero-content h1{
    
    position:relative;
    top: 38%;
    right: 110px;
    margin: 0 0 15px;
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;

}

.about-hero-content p{
    position:relative;
    top: 40%;
    left: 82px;
    margin-right: 10px;
    text-align: left;
    max-width:900px;
    font-size:16px;
    color: #ffffff;

}



/* ==========================================
    TEXT
========================================== */

.aboutocv-title h2{

    text-align:center;
    font-size:42px;
    margin-bottom:50px;
    color:#163b65;
    padding-top: 0px;

}

.aboutocv-title p{

    text-align:center;
    font-size:18px;
    margin-top: 70px;
    padding-top: 10px;
    color:#111111;

}




/* VISION & MISSION */

.about-vm{

    padding:80px 0;
    background:#fff;

}

.about-vm-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:35px;

}

.about-vm-card{

    background:white;
    padding:40px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.about-vm-card h2{
    font-size: 25px;
    text-align: left;
    color:#163b65;
    margin-bottom:20px;

}

.about-vm-card p{
    
    font-size: 18px;
    text-align: left;
    line-height: 1.9;
    max-width: 500px;
}

.about-vm-card ul{

    font-size: 18px;
    text-align: left;
    line-height: 1;
    padding-left:20px;
    max-width: 520px;

}

.about-vm-card li{

    margin-bottom:12px;

}

/* VALUES */

.about-values{

    background:#eef4fb;
    padding:80px 0;

}

.about-value-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

    margin-top:50px;

}

.about-value-card{

    background:white;

    padding:35px;

    border-radius:15px;

    text-align:center;

    transition:.35s;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.about-value-card:hover{

    transform:translateY(-8px);

}

.about-value-card h3{

    color:#163b65;

    margin-bottom:15px;

    font-size:24px;

}

.about-value-card p{
    
    font-size: 18px;
    color:#111111;
    line-height:1.6;
    text-align: left;

}

/* FOOTER */

.about-footer{

    background:linear-gradient(30deg,#07264a,#0066cc);
    color:white;
    text-align:center;
    padding:30px;

}

.about-footer p {

    font-size: 14px;
    text-align: left;
    margin-left: 100px;
    
}

/* MOBILE */

@media(max-width:768px){

.about-hero{
    height:320px;
    padding:0 20px;
}

.about-hero-content{
    position:relative;
    top: 40%;
    width:100%;
    max-width:100%;
}

.about-hero-content h1{
    position:static;
    margin:0 0 15px;
    font-size:30px;
    text-align:center;
}

.about-hero-content p{
    position:static;
    left:0;
    margin:0 auto;
    text-align:center;
    max-width:100%;
    font-size:15px;
}

.aboutocv-title h2{
    font-size:32px;
}

.about-vm-grid{
    grid-template-columns:1fr;
}

}

@media(max-width:480px){

.about-hero{
    height:280px;
}

.about-hero-content h1{
    font-size:26px;
}

.about-hero-content p{
    font-size:14px;
}

}

/* ============================================================================================
   OUR STORY SECTION NEWW
========================================== */

.about-story-section {
    width: 100%;
    background: #ffffff;
    padding: 80px 0;
}


/* ==========================================
   STORY CONTAINER
========================================== */

.about-story-container {
    width: 90%;
    max-width: 1450px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    gap: 100px;
    align-items: center;
}


/* ==========================================
   STORY IMAGE
========================================== */

.about-story-image {
    width: 100%;
    height: 500px;
    margin-top: 20px;

    overflow: hidden;
    border-radius: 16px;
}

.about-story-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.5s ease;
}

.about-story-image:hover img {
    transform: scale(1.03);
}


/* ==========================================
   STORY CONTENT
========================================== */

.about-story-content {
    width: 100%;
    max-width: 620px;
}

.about-story-content h2 {
    margin: 0 0 40px;

    color: #163b65;

    font-family: Arial, sans-serif;
    font-size: 40px;
    font-weight: 700;
    text-align: left;
    line-height: 1.1;
    letter-spacing: -1.5px;
}

.about-story-content p {

    margin: 0 0 35px;
    color: #111111;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0;
    text-align: left;
    max-width: 500px;
}

.about-story-content p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1000px) {

    .about-story-container {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    .about-story-image {
        height: 500px;
    }

    .about-story-content h2 {
        font-size: 42px;
        margin-bottom: 30px;
    }

    .about-story-content p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 25px;
    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 768px) {

    .about-story-section {
        padding: 60px 0;
    }

    .about-story-container {
        width: 90%;

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .about-story-image {
        height: 350px;
    }

    .about-story-content {
        max-width: 100%;
    }

    .about-story-content h2 {
        font-size: 36px;
        margin-bottom: 25px;
        letter-spacing: -1px;
    }

    .about-story-content p {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 25px;
    }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

    .about-story-section {
        padding: 50px 0;
    }

    .about-story-container {
        width: 92%;
        gap: 30px;
    }

    .about-story-image {
        height: 280px;
    }

    .about-story-content h2 {
        font-size: 32px;
    }

    .about-story-content p {
        font-size: 15px;
        line-height: 1.7;
    }

}