/* --- About Us Section Styles --- */
.about-us {
    position: relative;
    width: 100%;
    min-height: 80vh; /* පෙනුම ලස්සන වෙන්න උස වැඩි කර ඇත */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('/images/about.webp'); /* ඔබේ background රූපයේ path එක මෙතනට දාන්න */
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Scroll කරන විට රූපය නිශ්චලව පවතින (Parallax) ලස්සන පෙනුමක් ලැබේ */
    padding: 60px 20px;
    text-align: center;
}


/* Content (අකුරු) */
.about-content {
    position: relative;
    z-index: 2; /* Overlay එකට උඩින් පෙන්වීමට */
    max-width: 900px; /* අකුරු පෙළ ලස්සනට මැද පෙනීමට */
}

.about-content h1 {
    font-family: 'Adobe Garamond Pro', serif;
    font-size: 64px; /* Image එකේ විදියට විශාල අකුරු */
    color: #1a0b16;
    margin-bottom: 30px;
    font-weight: normal;
}

.about-content p {
    font-family: 'Adobe Garamond Pro', serif;
    font-size: 24px;
    line-height: 1.6;
    color: #1a0b16;
    word-spacing: 2px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .about-content h1 {
        font-size: 40px;
    }
    
    .about-content p {
        font-size: 18px;
        padding: 0 10px;
    }
    
    .about-us {
        min-height: 60vh;
    }
}

/* What We Do Section Styles */

/* --- What We Do Section --- */
.what-we-do {
    padding: 80px 0;
    background-color: #ffffff;
    width: 100%;
}

.section-title {
    font-family: 'Adobe Garamond Pro', serif;
    font-size: 48px;
    text-align: center;
    margin-bottom: 50px;
    color: #1a0b16;
    font-weight: normal; 
    letter-spacing: 1px; 
}

.full-width-container {
    width: 100%;
}

/* Grid සැකසුම */
.services-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6ක grid එකක් භාවිතා කර සමාන බෙදීම් ලබා ගැනීම */
    width: 100%;
    margin: 0;
    padding: 0;
}

.service-box {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Adobe Garamond Pro', serif;
    font-size: 32px;
    color: #1a0b16;
    cursor: pointer;
    transition: all 0.4s ease;
    padding: 20px;
    text-align: center;
}

/* උඩ පේළියේ 3: එකක් columns 2ක් බැගින් ගනී (6/3 = 2) */
.branding, .packaging, .social {
    grid-column: span 2;
}

/* යට පේළියේ 2: එකක් columns 3ක් බැගින් ගනී (6/2 = 3) */
.web, .videography {
    grid-column: span 3;
}

/* Colors */
.branding { background-color: #e1e2cc; }
.packaging { background-color: #f5ece0; }
.social { background-color: #a6b9a5; }
.web { background-color: #e5cbd0; }
.videography { background-color: #ccd9de; }

/* Hover Effect */
.service-box:hover {
    filter: brightness(0.95);
    font-size: 34px; /* පොඩි zoom effect එකක් */
}

/* පහළ විස්තරය */
.section-footer-text {
    max-width: 900px;
    margin: 60px auto 0;
    padding: 0 20px;
    text-align: center;
}

.section-footer-text p {
    font-family: 'Adobe Garamond Pro', serif;
    font-size: 22px;
    line-height: 1.6;
    color: #1a0b16;
}

/* --- Mobile View --- */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* එකක් යට එකක් පෙනීමට */
    }

    .service-box {
        grid-column: span 1 !important; /* Mobile එකේදී span ඔක්කොම 1ක් වේ */
        height: 180px;
        font-size: 26px;
    }

    .section-title {
        font-size: 36px;
    }
}