/*
 Theme Name:   Learnify Child Theme
 Theme URI:    http://learnify.axiomthemes.com
 Description:  Learnify Child Theme
 Author:       AncoraThemes
 Author URI:   http://axiomthemes.com
 Template:     learnify
 Version:      1.0
 Tags:         flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
 Text Domain:  learnify
*/


/* =Theme customization starts here
------------------------------------------------------------ */
/* 1. The 3-Column Grid */
.fancy-branch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Forces exactly 3 columns */
    gap: 20px;
    margin: 40px 0;
}

/* 2. The Horizontal Card */
.branch-card {
    background: #ffffff;
    border-radius: opx;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-decoration: none !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    /* This puts the icon and text side-by-side */
    flex-direction: row;
    /* Explicitly horizontal */
    border: 1px solid #eaeaea;
    min-height: 90px;
    /* Ensures cards have a consistent base height */
}

.branch-card:hover {
    transform: translateY(-3px);
    box-shadow: 4px 4px 0px 0px #FB3434;
}

/* 3. Left Side: Full Height Icon Area */
.branch-card-media {
    width: 80px;
    /* Fixed width for the icon box */
    background-color: #fcf0f0;
    /* Very soft red background */
    display: flex;
    align-items: center;
    /* Vertically centers the icon */
    justify-content: center;
    /* Horizontally centers the icon */
    flex-shrink: 0;
    /* Prevents the icon area from squishing */
    border-right: 1px solid #eaeaea;
}

/* 4. The SVG Icon Itself */
.branch-svg-icon {
    width: 30px;
    height: 30px;
    color: #FB3434;
    /* The red brand color */
}

/* 5. Right Side: Content Area */
.branch-card-content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically centers the text */
    flex-grow: 1;
    /* Takes up the remaining space */
}

.branch-title {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    color: #333333;
    font-weight: 600;
    line-height: 1.3;
}

.branch-link-text {
    font-size: 0.85rem;
    color: #FB3434;
    /* Matches the icon color */
    font-weight: 500;
}

/* 6. Responsive Rules (Crucial for mobile devices) */
@media only screen and (max-width: 992px) {
    .fancy-branch-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablets */
    }
}

@media only screen and (max-width: 600px) {
    .fancy-branch-grid {
        grid-template-columns: 1fr;
        /* 1 column on mobile phones */
    }
}