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

/* About section wrapper */
.about-wrapper{
    width:100%;
    padding:90px 40px 60px;   
}


/* 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:30px;   
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,0,0.07);
    transition:0.3s ease;
    border:3px solid #0a1a4f;
}

.about-horizontal-card:hover{
    transform:translateY(-4px);
    box-shadow: #0a1a4f 0px 20px 40px -10px;
}


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

.about-horizontal-card h3{
    font-size:17px;
    margin-bottom:18px;   
    font-weight:600;
    color:#333;
}


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

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

.about-horizontal-card ul li::before{
    content:"✔";
    position:absolute;
    left:0;
    color:#0a1a4f;
    font-weight:bold;
}


/* 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;
    }
}