/* assets/css/about_custom_styles.css */

/* --- Global Variables --- */
:root {
--primary-color: #5d5dff;
--secondary-color: #3f3f74;
--accent-color: #ff9933;
--success-color: #4CAF50;
--info-color: #2196F3;
warning-color: #ffc107;
danger-color: #f44336;
--text-dark: #34495e;
--text-light: #7f8c8d;
--bg-light: #f4f7f6;
--bg-card: #ffffff;
--border-color: #e0e6ed;
--border-radius: 12px;
shadow-light: 0 4px 20px rgba(0, 0, 0, 0.08);
transition-speed: 0.3s ease;
}

/* --- Universal Reset --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* --- Body Base Styles --- */
body {
font-family: 'Vazirmatn', sans-serif;
line-height: 1.6;
color: var(--text-dark);
direction: rtl;
background-color: var(--bg-light);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* --- Page Wrapper --- */
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}

/* --- General Link Styles --- */
a {
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-speed);
}

a:hover {
color: var(--secondary-color);
text-decoration: underline;
}

/* --- General Headings Styles --- */
h1, h2, h3, h4, h5, h6 {
color: var(--secondary-color);
font-weight: 700;
margin-bottom: 0.5em;
}

p{
color: var(--text-dark);
line-height: 1.8;
margin-bottom: 1em;
}

/* --- Styles for above-the-fold elements (e.g., header, main container) --- */
.site-logo {
height: 40px;
width: auto;
max-width:100%;
vertical-align: middle;
}

/* Special Background for About Page */
.about-page-main {
    padding-top: 100px; /* Space for fixed navbar */
    min-height: 100vh; /* Ensure it takes full viewport height */
    
    /* Unique Background: Subtle Pattern + Gradient Overlay */
    background-color: #f8f9fa; /* A very light greyish background */
    background-image: url('../images/subtle-pattern-bg.png'); /* Add a subtle pattern if you have one */
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    position: relative; /* For overlay */
}

/* You can also use a gradient directly like in contact.php, adjust colors */
/* .about-page-main {
    background: linear-gradient(135deg, rgba(93, 93, 255, 0.05) 0%, rgba(59, 59, 152, 0.05) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    padding-top: 100px;
} */


.about-page-title {
    color: var(--secondary-color); /* Dark purple-blue for titles */
    font-weight: 800;
    margin-bottom: 3rem !important; /* Extra space below title */
    position: relative;
    padding-bottom: 10px;
}

.about-page-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 120px;
    height: 6px;
    background-color: var(--primary-color); /* Vibrant blue/purple underline */
    border-radius: 5px;
}

.about-page-title .about-icon {
    color: var(--accent-color); /* Bright orange icon */
    margin-left: 10px;
}

/* Section Headings */
.section-heading {
    color: var(--primary-color); /* Primary color for section headings */
    font-weight: 700;
    border-bottom: 3px solid var(--accent-color); /* Underline with accent color */
    padding-bottom: 10px;
    margin-bottom: 1.5rem;
    display: inline-block; /* To make border-bottom only cover text */
}

.section-heading .section-icon {
    color: var(--secondary-color); /* Secondary color for icons in headings */
    margin-left: 8px;
}

/* Image styles */
.about-image {
    /*max-height: 400px; /* Limit height of images */
    width: 100%;
    height: 400px;
    object-fit: cover; /* Ensure image fits without distortion */
    border: 5px solid var(--border-color); /* Light border around image */
    padding: 5px;
}

/* Card Styles for Values Section */
.value-card {
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--bg-card); /* White background for cards */
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.value-card .card-title {
    color: var(--secondary-color);
}

/* Team Member Photos (if uncommented) */
.team-member-photo {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 4px solid var(--primary-color);
    box-shadow: var(--shadow-light);
}
/* Responsive adjustments */
@media (max-width: 991px) { /* Medium devices and below */
.about-page-main {
     padding-top: 80px;
     }
.about-section {
     margin-bottom: 3rem !important; /* Adjust section spacing */
     }
.about-image {
     margin-bottom: 2rem; /* Space below image on smaller screens */
     }
    }
    
@media (max-width: 767px) { /* Small devices and below */
.about-page-title {
     font-size: 2rem; /* Adjust title size */
     }
.about-page-title::after {
     width: 80px;
     height: 4px;
     }
.section-heading {
     font-size: 1.5rem;
     }
.about-image {
     max-height: 300px;
     }
.value-card {
     margin-bottom: 1.5rem;
     }
    }
    
    @media (max-width: 576px) { /* Extra small devices */
.about-page-main {
     padding-top: 70px;
     }
.card.p-4 {
     padding: 20px !important; /* Adjust card padding */
     }
.about-image {
     max-height: 250px;
     }
    }