/* TechMyCar Reviews Page - Custom CSS */

:root {
    --primary-blue: #015bf8;
    --gradient-start: #01d0fc;
    --gradient-end: #015bf8;
    --dark-bg: #181f1f;
    --light-bg: #f1f1f1;
    --text-muted: #6c7175;
    --text-gray: #878787;
    --beige: #ddd7cf;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #000;
    background-color: var(--light-bg);
}

/* Navigation (Same as career page) */
.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 1rem 0;
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
}

.logo-text {
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.5rem;
}

.nav-link {
    color: #000 !important;
    font-size: 1rem;
    padding: 0.5rem 1rem !important;
}

.btn-gradient {
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 91, 248, 0.3);
    color: white;
}

/* Hero Section Reviews */
.hero-section-reviews {
    padding: 60px 0;
    background: var(--light-bg);
}

.hero-title {
    font-size: 3.875rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #000;
}

.hero-description {
    font-size: 1.0625rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Review Badges */
.review-badge {
    background: var(--beige);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 67px;
}

.reviewer-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.reviewer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-badge-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #000;
    margin: 0;
    line-height: 1.3;
}

/* Featured Reviews Cards */
.featured-reviews {
    background: var(--light-bg);
    padding: 60px 0;
}

.review-card {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    height: 218px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.star-rating {
    height: 17px;
}

.star-rating img {
    height: 100%;
    width: auto;
}

.review-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #000;
    margin: 1rem 0;
    line-height: 1.4;
}

.reviewer-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reviewer-img {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    object-fit: cover;
}

.reviewer-name {
    font-size: 0.5625rem;
    font-weight: 400;
    color: #000;
    margin: 0;
}

.titles {
    margin-left: 100px;
}

.reviewer-location {
    font-size: 0.5625rem;
    color: #000;
    margin: 0;
    line-height: 1.3;
}

/* Dark Reviews Section */
.reviews-dark-section {
    background: var(--dark-bg);
    padding: 60px 0;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    margin: 0 auto;
    /* max-width: 1440px; */
}

.reviews-dark-section-mid {
    background: var(--dark-bg);
    padding: 60px 0;
    margin: 0 auto;
}


.reviews-dark-section-bottom {
    background: var(--dark-bg);
    padding: 60px 0;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    margin: 0 auto;
}


.section-title-white {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: white;
    margin-bottom: 1.5rem;
}

.section-subtitle-gray {
    font-size: 0.875rem;
    color: var(--text-gray);
    font-weight: 500;
    max-width: 656px;
}

/* White Review Cards (In Dark Section) */
.review-card-white {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    height: 207px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.review-text {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #000;
    line-height: 1.5;
    flex-grow: 1;
    margin: 1rem 0;
}

.reviewer-info-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reviewer-avatar-sm {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    object-fit: cover;
}

.reviewer-name-sm {
    font-size: 0.78125rem;
    font-weight: 700;
    color: #000;
}

/* Video Testimonial Section */
.video-testimonial-section {
    background: var(--dark-bg);
    position: relative;
}

.video-testimonial-section .row {
    position: relative;
}

.video-testimonial-section .col-lg-8 {
    position: relative;
    z-index: 1;
}

.video-testimonial-section .col-lg-4 {
    position: relative;
    z-index: 2;
    margin-left: -80px;
    /* Overlap amount */
    display: flex;
    align-items: center;
}

.video-container {
    position: relative;
    border-radius: 60px;
    overflow: hidden;
    height: 645px;
    cursor: pointer;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Featured Review Card */
.review-card-feature {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    height: auto;
    min-height: 246px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.review-card-feature2nd {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    height: auto;
    min-height: 246px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* top:-165%; left:55% used to live in the base rules above. Percentage
   offsets on a `position:relative` element are relative to its own
   containing block's width/height -- since this card's own width
   already equals ~100% of that same containing block, "left:55%"
   unconditionally demands another 55% of the column's width on top
   of the card's own, so most of the card (rating, title, reviewer
   name, and the "Read on captera" link) was pushed off past the
   right edge and clipped/inaccessible. Confirmed this wasn't a
   deliberate small bleed effect: at the page's own 1440px desktop
   width the card's right edge landed at x=2232, well over half the
   card hanging off-page, at every width tested (this is a bug, not a
   design intentionally sacrificing readability at its own native
   size). Left in normal document flow -- stacks cleanly under the
   video at every breakpoint, all content visible. */

.feature-review-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #000;
    line-height: 1.3;
}

.reviewer-img-lg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.read-more-link {
    color: var(--primary-blue);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.read-more-link:hover {
    text-decoration: underline;
}


/* CTA Section Reviews */
.cta-section-reviews {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    padding: 60px 0;
    border-radius: 60px 60px 0 0;
}

/* Footer */
.footer {
    background: white;
    border-radius: 60px 60px 0 0;
    margin-top: -40px;
}

.footer-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-gray);
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: #000;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-blue);
}

/* Responsive Design */
@media (max-width: 991px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .section-title-white {
        font-size: 2.5rem;
    }

    .review-card {
        height: auto;
        min-height: 200px;
    }

    .review-card-white {
        height: auto;
        min-height: 180px;
    }

    .video-container {
        height: 400px;
    }

    .review-card-feature {
        height: auto;
        margin-top: 2rem;
    }

    .review-card-feature2nd {
        height: auto;
        margin-top: 2rem;
    }
}

@media (max-width: 767px) {
    .hero-title {
        font-size: 2rem;
    }

    .section-title-white {
        font-size: 2rem;
    }

    .hero-section-reviews {
        padding: 120px 0 40px;
    }

    .review-badge {
        height: auto;
        min-height: 60px;
    }

    .review-card,
    .review-card-white,
    .review-card-feature {
        height: auto;
        min-height: 160px;
    }

    .video-container {
        height: 300px;
    }

    .btn-gradient {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
}

@media (max-width: 575px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .section-title-white {
        font-size: 1.75rem;
    }

    .review-badge-text {
        font-size: 0.675rem;
    }

    .reviewer-avatar {
        width: 36px;
        height: 36px;
    }

    .video-container {
        height: 250px;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.review-card,
.review-card-white,
.review-card-feature {
    animation: fadeInUp 0.6s ease-out;
    transition: transform 0.3s ease;
}

.review-card-feature2nd {
    animation: fadeInUp 0.6s ease-out;
    transition: transform 0.3s ease;
}

.review-card:hover,
.review-card-white:hover {
    transform: translateY(-5px);
}

/* Utility Classes */
.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.bg-light {
    background-color: var(--light-bg) !important;
}

/* Star Rating Icons */
.star-rating {
    display: flex;
    gap: 0.15rem;
    font-size: 0.875rem;
}

.star-rating i {
    font-size: 0.875rem;
}

.star-rating .bi-star-fill {
    color: #000000 !important;
}

/* Play Button Icon */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
    font-size: 5rem;
    color: white;
    cursor: pointer;
}

.play-button i {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Arrow Icons */
.read-more-link i,
.btn i {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

.read-more-link:hover i {
    transform: translateX(3px);
}

.btn:hover i {
    transform: translateX(2px) translateY(-2px);
}