/*
    File: styles/about.css
    Purpose: Styles for the About page layout and cards.
*/

/* About section wrapper */
.about-wrapper{
    width:100%;
    padding:50px 40px 60px;
    background: linear-gradient(180deg, #FFFFFF 0%, #f8fafc 100%);
}


/* Layout: main grid */
.about-layout{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px;   
}


/* Right column */
.right-column{
    display:flex;
    flex-direction:column;
    gap:35px;   
}


/* Component: about cards */
.about-horizontal-card{
    background: #FFFFFF;
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(7, 65, 113, 0.12);
    transition: all 0.4s ease;
    border: 2px solid #E8E8E8;
    border-left: 5px solid #FFD60A;
}

.about-horizontal-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(7, 65, 113, 0.18);
    border-left: 5px solid #074171;
}


/* Typography: headings */
.about-horizontal-card h1{
    font-size: 26px;
    color: #074171;
    margin-bottom: 12px;
    font-weight: 800;
}

.about-horizontal-card h3{
    font-size: 17px;
    margin-bottom: 18px;
    font-weight: 700;
    color: #FFD60A;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}


/* Component: list items */
.about-horizontal-card ul{
    list-style:none;
    padding:0;
}

.about-horizontal-card ul li{
    margin-bottom:12px;   
    line-height:1.7;
    color:#333333;
    font-size:15px;
    position:relative;
    padding-left:28px;
}

.about-horizontal-card ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#FFD60A;
    font-weight:bold;
    font-size: 18px;
}


/* Layout: footer gap */
.main-footer{
    margin-top:40px;   
}


/* Responsive rules */
@media (max-width:1024px){
    .about-layout{
        grid-template-columns:1fr;
        gap:30px;
    }
}

@media (max-width:768px){
    .about-wrapper{
        padding:70px 20px 40px;    
    }

    .about-horizontal-card{
        padding:25px;
    }

    .about-horizontal-card h1{
        font-size:22px;
    }

    .about-horizontal-card ul li{
        font-size:14px;
    }
}