/* =========================================
   GLOBAL FIXES (Prevents Horizontal Overflow)
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

/* =========================================
   CORPORATE BRAND VARIABLES
   ========================================= */
:root {
    --brand-navy: #003049;       
    --brand-navy-dark: #002336;  
    --brand-red: #d32f2f;        
    --brand-yellow: #ffcc00;     
    
    --f-white: #ffffff;
    --f-text: #d1d5db;           
    --f-border: rgba(255, 255, 255, 0.1);
    
    --font-main: 'Poppins', sans-serif;
}

.corp-footer-full {
    width: 100%;
    margin-top: 100px; 
    position: relative;
    font-size: 0.95rem;
    line-height: 1.6;
    font-family: var(--font-main);
}

/* =========================================
   1. FLOATING CTA CARD (DYNAMIC LAYOUT FIX)
   ========================================= */
.cta-float-wrapper {
    position: relative; /* Changed from absolute to flow naturally */
    z-index: 10;
    width: 100%;
    padding: 0 20px;
    margin-top: -60px; /* Pulls the card up to stick out of the footer */
    pointer-events: none; 
}

.cta-float-card {
    pointer-events: auto;
    max-width: 1200px; 
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); 
    border-radius: 8px;
    padding: 25px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    border-top: 4px solid var(--brand-yellow); 
}

/* Left Text Content */
.cta-float-text {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 250px;
}

.cta-icon-small {
    width: 50px; height: 50px;
    background-color: var(--brand-navy);
    color: var(--brand-yellow);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.cta-text-content h3 {
    margin: 0; font-size: 1.3rem; font-weight: 700;
    color: var(--brand-navy);
    line-height: 1.2;
}

.cta-text-content p {
    margin: 4px 0 0; font-size: 0.9rem; 
    color: #666; 
}

/* Right Form */
.cta-float-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: 12px;
    flex: 1.5;
    width: 100%;
}

.input-group-small {
    position: relative;
    display: flex; align-items: center;
}

.input-group-small i {
    position: absolute; left: 12px;
    color: #888;
    font-size: 1rem;
    z-index: 2;
}

.input-group-small input {
    width: 100%;
    padding: 12px 12px 12px 38px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: #333;
    background: #f9f9f9;
    transition: all 0.2s;
}

.input-group-small input:focus {
    border-color: var(--brand-navy);
    background: #fff;
}

.btn-download-small {
    background: var(--brand-red);
    color: #ffffff;
    border: none;
    padding: 0 25px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: 0.2s;
    white-space: nowrap;
}

.btn-download-small:hover {
    background: #b71c1c; 
    transform: translateY(-2px);
}

/* =========================================
   2. MAIN FOOTER
   ========================================= */
.footer-main {
    background-color: var(--brand-navy);
    margin-top: -60px; /* Pulls navy background up to sit behind bottom half of the card */
    padding: 110px 0 60px; /* 60px overlap + 50px clearance space = 110px padding */
    color: var(--f-text);
    position: relative;
    z-index: 1; /* Keeps background strictly behind the floating card */
}

.footer-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 50px;
}

/* Brand Column */
.f-logo {
    display: flex; align-items: center; gap: 15px;
    text-decoration: none; margin-bottom: 25px;
}
.f-logo img { height: 45px; width: auto; }
.f-logo span {
    font-size: 1.6rem; font-weight: 800; color: var(--f-white); text-transform: uppercase;
}

.f-about {
    margin-bottom: 30px; font-size: 0.95rem; max-width: 400px; opacity: 0.8; line-height: 1.7;
}

/* Badges */
.cert-badges {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-bottom: 25px;
}
.c-badge {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--f-border);
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 0.85rem; font-weight: 600; color: var(--f-white);
    display: flex; align-items: center; gap: 8px;
    transition: 0.3s;
}
.c-badge i { color: var(--brand-yellow); font-size: 1.2rem; }
.c-badge:hover { background: rgba(255,255,255,0.1); border-color: var(--brand-yellow); }

/* Brand Socials */
.brand-socials { display: flex; gap: 10px; margin-top: 25px; }
.soc-item {
    width: 42px; height: 42px;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--f-white); text-decoration: none;
    border-radius: 4px; transition: 0.2s; font-size: 1.2rem;
}
.soc-item:hover {
    background: var(--brand-red);
    transform: translateY(-3px);
}

/* Headings */
.f-heading {
    color: var(--f-white);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 10px;
}
.f-heading::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 40px; height: 3px; background: var(--brand-yellow);
}

/* Lists */
.f-list { list-style: none; padding: 0; margin: 0; }
.f-list li { margin-bottom: 15px; }
.f-list a {
    color: var(--f-text); text-decoration: none;
    font-size: 0.95rem; transition: 0.2s;
    display: flex; align-items: center; gap: 10px;
}
.f-list a i { font-size: 1.1rem; color: var(--brand-red); transition: 0.2s; }
.f-list a:hover { color: var(--f-white); padding-left: 8px; }
.f-list a:hover i { color: var(--brand-yellow); }

.country-list span.flag-icon {
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}

/* Location Col */
.map-widget {
    width: 100%; height: 130px; background: #000;
    border-radius: 8px; overflow: hidden; position: relative;
    border: 1px solid rgba(255,255,255,0.2); margin-bottom: 20px;
}
.map-widget iframe { width: 100%; height: 100%; filter: grayscale(0.2) contrast(1.1); }
.map-overlay-label {
    position: absolute; bottom: 8px; left: 8px;
    background: var(--brand-red); color: #fff;
    padding: 4px 10px; border-radius: 4px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.address-block { margin-bottom: 20px; }
.addr-text { font-size: 0.95rem; color: var(--f-text); margin-bottom: 10px; line-height: 1.6; }
.addr-text strong { color: var(--f-white); font-size: 1rem; }
.phone-highlight {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 1.1rem; font-weight: 700; color: var(--brand-yellow);
    text-decoration: none; transition: 0.2s;
}
.phone-highlight:hover { color: #fff; transform: translateX(5px); }

.btn-branches {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px;
    border: 1px solid rgba(255,255,255,0.2); color: var(--f-white);
    text-decoration: none; border-radius: 6px; font-weight: 600;
    background: rgba(255,255,255,0.05); transition: 0.3s;
}
.btn-branches:hover {
    background: var(--brand-red); border-color: var(--brand-red); color: #fff;
}

/* =========================================
   3. BOTTOM COPYRIGHT
   ========================================= */
.footer-bottom {
    background-color: var(--brand-navy-dark);
    padding: 20px 0;
    border-top: 1px solid var(--f-border);
    font-size: 0.9rem;
    color: #8899a6;
}

.fb-container {
    width: 100%; max-width: 1400px;
    margin: 0 auto; padding: 0 40px;
    display: flex; justify-content: space-between; align-items: center;
}

.fb-left p { margin: 0; }
.fb-left strong { color: var(--f-white); }
.sep-line { margin: 0 10px; color: #555; }

.designer-link {
    color: var(--brand-yellow);
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
}
.designer-link:hover { color: #fff; text-decoration: underline; }

.fb-socials { display: flex; gap: 8px; }
.soc-item-small {
    width: 34px; height: 34px;
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
    color: var(--f-white); text-decoration: none;
    border-radius: 4px; transition: 0.2s; font-size: 1rem;
}
.soc-item-small:hover {
    background: var(--brand-red);
    transform: translateY(-2px);
}

.fb-right a { color: #8899a6; text-decoration: none; transition: 0.2s; }
.fb-right a:hover { color: var(--f-white); }
.sep { margin: 0 10px; opacity: 0.3; }

/* =========================================
   RESPONSIVE DESIGN (FIXED OVERLAPS)
   ========================================= */

@media (max-width: 1200px) {
    .cta-float-card {
        flex-direction: column;
        text-align: center;
        padding: 30px;
        gap: 25px;
    }
    .cta-float-text {
        flex-direction: column;
        justify-content: center;
    }
    
    .cta-float-form { grid-template-columns: 1fr 1fr; }
    .btn-download-small { grid-column: span 2; padding: 14px; }

    .footer-row { gap: 30px; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
}

@media (max-width: 992px) {
    .footer-row { grid-template-columns: 1fr 1fr; gap: 50px; }
    
    .fb-container {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .sep-line { display: none; }
    .designer-link { display: block; margin-top: 5px; }
}

@media (max-width: 768px) {
    .corp-footer-full { margin-top: 80px; }
    
    .footer-container, .fb-container { padding: 0 20px; }
    
    .cta-float-form { grid-template-columns: 1fr; }
    .btn-download-small { grid-column: span 1; }
    
    /* With dynamic positioning, we no longer need to force huge paddings! */
    
    .footer-row { grid-template-columns: 1fr; gap: 40px; }
    
    .brand-col { text-align: center; }
    .f-logo { justify-content: center; }
    .f-about { margin: 0 auto 25px; text-align: center; }
    .cert-badges { justify-content: center; }
    .brand-socials { justify-content: center; }
    
    .fb-socials { order: -1; margin-bottom: 10px; }
}

@media (max-width: 480px) {
    .cta-float-wrapper { padding: 0 15px; }
    .cta-float-card { padding: 25px 15px; }
    .cta-text-content h3 { font-size: 1.2rem; }
    
    .footer-container, .fb-container { padding: 0 15px; }
}

/* =========================================
   GLOBAL SECTIONS (Migrated from Home)
   ========================================= */

/* Shared Global Headings (Needed for added sections) */
.section-header {
    margin-bottom: 30px;
    border-left: 5px solid var(--brand-red);
    padding-left: 20px;
}
.pro-title {
    font-size: 2rem; color: #222; margin-bottom: 5px;
    font-family: var(--font-main); font-weight: 700;
}
.pro-subtitle { color: #666; font-size: 1rem; }
.header-divider {
    width: 80px; height: 4px; background-color: var(--brand-yellow); 
    margin: 0 auto 50px auto; border-radius: 2px;
}

/* =========================================
   WHATSAPP WIDGET STYLES (FINAL)
   ========================================= */

.whatsapp-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000;
    font-family: 'Segoe UI', sans-serif;
}

/* --- Launcher Button --- */
.wa-launcher {
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    position: relative;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wa-launcher:hover {
    transform: scale(1.1);
}

/* Launcher State Changes */
.wa-launcher.active i { display: none; }
.wa-launcher.active::after {
    content: '\eb98'; /* RemixIcon 'close-line' code */
    font-family: 'remixicon';
    font-size: 24px;
}

/* Pulse Animation */
.wa-pulse {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid #25d366;
    animation: pulseRing 2s infinite;
    opacity: 0;
}

@keyframes pulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* --- Chat Box Container --- */
.wa-chat-box {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform-origin: bottom right;
}

.wa-chat-box.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Header */
.wa-header {
    background: #075e54;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.wa-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* === LOGO & DOT FIX === */
.wa-avatar-group {
    position: relative;
    width: 45px;
    height: 45px;
    flex-shrink: 0; 
}

.wa-img-wrap {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 50%;
    overflow: hidden; /* Keeps the logo clipped inside */
    display: flex;
    align-items: center;
    justify-content: center;
}

.wa-avatar-img {
    width: 80% !important;
    height: 80% !important;
    object-fit: contain;
}

.online-dot {
    position: absolute;
    bottom: 0px; 
    right: 0px;
    width: 12px; 
    height: 12px;
    background: #25d366;
    border-radius: 50%;
    border: 2px solid #075e54; /* Dark border blends with header */
    z-index: 5;
}
/* ===================== */

.wa-info {
    display: flex;
    flex-direction: column;
}

.wa-name { font-weight: 700; font-size: 1rem; }
.wa-status { font-size: 0.75rem; opacity: 0.8; }

.wa-close {
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.8;
}
.wa-close:hover { opacity: 1; }

/* Body */
.wa-body {
    padding: 20px;
    background-color: #e5ddd5;
    background-image: url('/footer/images/Whatsapp-Bg.png');
    height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.wa-msg-received {
    background: #fff;
    padding: 10px 15px;
    border-radius: 0 12px 12px 12px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    max-width: 85%;
    position: relative;
    font-size: 0.9rem;
    color: #111;
    line-height: 1.4;
}

.wa-msg-received::before {
    content: '';
    position: absolute;
    top: 0; left: -10px;
    width: 0; height: 0;
    border-top: 10px solid #fff;
    border-left: 10px solid transparent;
}

.wa-msg-name {
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 4px;
    display: block;
}

.wa-time {
    font-size: 0.65rem;
    color: #999;
    float: right;
    margin-top: 5px;
    margin-left: 10px;
}

/* Footer */
.wa-footer {
    padding: 15px;
    background: #f0f0f0;
    text-align: center;
}

.wa-btn-send {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: background 0.2s;
}

.wa-btn-send:hover {
    background: #1ebc57;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    .whatsapp-widget {
        bottom: 20px;
        right: 20px;
    }
    .wa-chat-box {
        width: 300px;
        right: -20px;
        bottom: 70px;
    }
}

/* =========================================
   STUDENT FEEDBACK SECTION (Mixed Avatars)
   ========================================= */

.feedback-section {
    padding: 80px 20px;
    background-color: #fcfcfc; /* Slightly off-white to make white cards pop */
    position: relative;
    border-top: 1px solid #eee;
}

.feedback-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

/* Scrollable Container */
.feedback-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 20px 5px; 
    
    /* Hide scrollbars for a cleaner look */
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

.feedback-carousel::-webkit-scrollbar {
    display: none; 
}

/* Individual Card */
.feedback-card.banner-square {
    flex: 0 0 calc(33.333% - 14px); 
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 30px;
    scroll-snap-align: start;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden; /* Keeps background icon inside bounds */
}

.feedback-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #d32f2f;
}

/* Decorative Background Quote */
.quote-bg-icon {
    position: absolute;
    top: -10px;
    right: 15px;
    font-size: 6rem;
    color: rgba(0,0,0,0.03);
    z-index: 0;
    transform: rotate(10deg);
}

/* Ensures content sits above the background quote */
.feedback-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Top Row: Avatar & Details */
.student-top-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* Unified Avatar Base (Handles both Images and Letters) */
.student-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden; /* Keeps images perfectly round */
    background: #e0e0e0; /* Fallback color */
}

/* Image behavior inside the avatar */
.student-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient Colors for Letter Avatars */
.avatar-1 { background: linear-gradient(135deg, #d32f2f, #ef5350); }
.avatar-2 { background: linear-gradient(135deg, #1976d2, #42a5f5); }
.avatar-3 { background: linear-gradient(135deg, #388e3c, #66bb6a); }
.avatar-4 { background: linear-gradient(135deg, #f57c00, #ffa726); }
.avatar-5 { background: linear-gradient(135deg, #7b1fa2, #ab47bc); }

/* Student Name & Course */
.student-meta h4 {
    margin: 0 0 4px 0;
    font-size: 1.1rem;
    color: #222;
    font-weight: 700;
}

.student-meta span {
    font-size: 0.8rem;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ratings */
.stars {
    color: #fbbf24;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

/* Review Text */
.feedback-text {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

/* Navigation Buttons */
.nav-btn {
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.nav-btn:hover {
    background: #d32f2f;
    color: #fff;
    border-color: #d32f2f;
    transform: scale(1.1);
}

.left-btn { left: -25px; }
.right-btn { right: -25px; }

/* Responsive Adjustments */
@media (max-width: 1000px) {
    .feedback-card.banner-square { flex: 0 0 calc(50% - 10px); }
}

@media (max-width: 600px) {
    .feedback-section { padding: 50px 15px; }
    .feedback-card.banner-square { flex: 0 0 100%; }
    .left-btn { left: -10px; width: 40px; height: 40px; font-size: 1.4rem; }
    .right-btn { right: -10px; width: 40px; height: 40px; font-size: 1.4rem; }
}

/* =========================================
   IMAGE TESTIMONIALS SECTION 
   (Parallax BG, Dark Overlay, Feedback Card Effects)
   ========================================= */

.testimonial-section {
    padding: 100px 20px;
    position: relative;
    /* Image Background with Parallax Effect */
    background-image: url('/footer/images/Testi.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
}

/* Dark overlay so the white text and images stand out */
.testimonial-section::before {
    content: '';
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(10, 25, 47, 0.85); /* Deep slate/blue overlay */
    z-index: 1;
}

/* Forces the header text to be white against the dark background */
.testimonial-section .section-header .pro-title,
.testimonial-section .section-header .pro-subtitle {
    color: #fff;
}

.testimonial-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2; /* Ensures everything sits above the dark overlay */
}

/* Scrollable Container */
.testimonial-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 20px 5px; 
    
    /* Hide scrollbars for a cleaner look */
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

.testimonial-carousel::-webkit-scrollbar {
    display: none; 
}

/* Image Card Styling - FEEDBACK CARD EFFECT */
.testi-card {
    flex: 0 0 calc(25% - 15px); /* 4 cards per row */
    aspect-ratio: 1 / 1; /* Perfect squares */
    border-radius: 12px;
    overflow: hidden;
    scroll-snap-align: start;
    position: relative;
    
    /* Feedback Card Base Styles */
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Feedback Card Hover Lift & Border Color Change */
.testi-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5); /* Stronger shadow for the dark background */
    border-color: #d32f2f;
}

.testi-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* Responsive Adjustments */
@media (max-width: 1000px) {
    .testi-card { flex: 0 0 calc(33.333% - 14px); } /* 3 images on tablet */
}

@media (max-width: 768px) {
    .testi-card { flex: 0 0 calc(50% - 10px); } /* 2 images on large mobile */
}

@media (max-width: 480px) {
    .testi-card { flex: 0 0 calc(85% - 10px); } /* 1 large image on small mobile */
}