/* Reset and Base Styles */

:root {

    --primary-color: #2b2d42;     /* Deeper navy blue - more sophisticated */

    --secondary-color: #ffd60a;    /* Warmer yellow - better contrast */

    --accent-color: #4361ee;       /* Vibrant blue for highlights */

    --text-light: #ffffff;

    --text-dark: #2b2d42;

    --bg-light: #f8f9fa;

    --bg-alternate: #edf2f4;

    --spacing-sm: 1rem;

    --spacing-md: 2rem;

    --spacing-lg: 4rem;

    --border-radius: 8px;

    --transition: all 0.3s ease;

    --font-size-base: 16px;

    --font-size-lg: 1.25rem;

    --font-size-xl: 1.5rem;

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;

    font-size: var(--font-size-base);

    line-height: 1.6;

    color: var(--text-dark);

}



/* Container */

.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 var(--spacing-sm);

}



/* Bootstrap Button Customization */

.btn-primary {

    background-color: var(--primary-color);

    border-color: var(--primary-color);

    padding: 0.8rem 2rem;

    border-radius: 50px;

    font-weight: 600;

    transition: all 0.3s ease;

}



.btn-primary.hover-effect:hover {

    background-color: var(--secondary-color);

    border-color: var(--secondary-color);

    color: var(--primary-color);

    transform: translateY(-3px);

    box-shadow: 0 5px 15px rgba(0,0,0,0.2);

}



/* Header and Navigation */

.header {

    background-color: var(--primary-color);

    color: var(--text-light);

    padding: var(--spacing-sm) 0;

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



.nav-wrapper {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo-link {

    display: flex;

    align-items: center;

    text-decoration: none;

    color: var(--text-light);

}







.nav-menu {

    display: flex;

    list-style: none;

    margin: 0;

    padding: 0;

}



.nav-link {

    color: var(--text-light);

    text-decoration: none;

    padding: 0.5rem 1rem;

    transition: var(--transition);

}



.nav-link:hover {

    color: var(--secondary-color);

}



/* Updated Navbar Styles */

.navbar {

    background-color: var(--primary-color);

    padding: 1rem 0;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



.navbar-brand {

    color: var(--text-light);

    font-weight: bold;

    padding: 0;

}



.navbar-brand:hover {

    color: var(--secondary-color);

}



.logo-img {

    height: 40px;

    width: auto;

}



.brand-name {

    font-size: 1.5rem;

    color: var(--text-light);

}



.navbar-toggler {

    border-color: var(--text-light);

    padding: 0.25rem 0.5rem;

}



.navbar-toggler-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

}



.navbar-nav .nav-link {

    color: var(--text-light);

    padding: 0.5rem 1rem;

    transition: color 0.3s ease;

}



.navbar-nav .nav-link:hover,

.navbar-nav .nav-link:focus {

    color: var(--secondary-color);

}



/* Mobile Menu Toggle */

.mobile-menu-toggle {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

    padding: 0.5rem;

}



.mobile-menu-toggle span {

    display: block;

    width: 25px;

    height: 2px;

    background-color: var(--text-light);

    margin: 5px 0;

    transition: var(--transition);

}



/* Main Content */

.main-content {

    margin-top: 80px; /* Header height */

}



/* Section Styles */

.section {

    padding: var(--spacing-lg) 0;

}





.section-light {

    background-color: #ffffff;

}



.section-dark {

    background-color: var(--primary-color);

    color: var(--text-light);

}



.section-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-lg);

    align-items: center;

}



.section-title {

    font-size: 3rem;

    margin-bottom: var(--spacing-md);

    font-weight: bold;

}



.section-content {

    padding: var(--spacing-md);

}



.section-content p {

    font-size: var(--font-size-lg);

}



/* Animations */

.animate-fade-left {

    opacity: 0;

    transform: translateX(-20px);

    animation: fadeLeft 1s ease forwards;

}



.animate-fade-right {

    opacity: 0;

    transform: translateX(20px);

    animation: fadeRight 1s ease forwards;

}



.animate-fade-up {

    opacity: 0;

    transform: translateY(20px);

    animation: fadeUp 1s ease forwards;

}



@keyframes fadeLeft {

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes fadeRight {

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes fadeUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Images */

.img-feature {

    width: 100%;

    max-width: 600px;

    transition: all 0.5s ease;

    border-radius: var(--border-radius);

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

}



.img-featurelogo {

    width: 100%;

    max-width: 600px;

    transition: all 0.5s ease;

    border-radius: var(--border-radius);

    box-shadow: 0 4px 6px rgba(0,0,0,0);

    background: transparent;

}



.img-featurelogo:hover {

    transform: scale(1.05) rotate(1deg);

    box-shadow: 0 15px 30px rgba(0,0,0,0);

}



.img-feature:hover {

    transform: scale(1.05) rotate(1deg);

    box-shadow: 0 15px 30px rgba(0,0,0,0.2);

}



/* Enhanced Pricing Cards */

.pricing-cards {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: var(--spacing-md);

    margin-bottom: var(--spacing-lg);

}



.price-card {

    background: #ffffff;

    padding: var(--spacing-md);

    border-radius: var(--border-radius);

    text-align: center;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    transition: all 0.3s ease;

    border: 2px solid transparent;

    position: relative;

    overflow: hidden;

}



.price-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 10px 20px rgba(0,0,0,0.1);

    border-color: var(--secondary-color);

}



.price-card.featured {

    border: 2px solid var(--secondary-color);

}



.price-card.featured::before {

    content: 'Most Popular';

    position: absolute;

    top: 1.5rem;

    right: -3rem;

    transform: rotate(45deg);

    background: var(--secondary-color);

    color: var(--primary-color);

    padding: 0.5rem 4rem;

    font-size: 0.8rem;

    font-weight: bold;

}



.price-card h3 {

    color: var(--primary-color);

    font-size: 1.5rem;

    margin-bottom: var(--spacing-md);

}



.price-content {

    margin-top: var(--spacing-sm);

}



.price-content p {

    margin-bottom: 0.5rem;

    color: var(--text-dark);

}

/* Contact Section Styles */

.section-contact {

    background-color: #2b2d42; /* Light blue-gray background */

}



.contact-image {

    border-radius: var(--border-radius);

    box-shadow: 0 6px 12px rgba(0,0,0,0.15);

    transition: var(--transition);

}



.contact-image:hover {

    transform: scale(1.02);

}



.contact-card {

    background: #ffffff;

    border-radius: var(--border-radius);

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    padding: var(--spacing-md);

}



.contact-item {

    display: flex;

    align-items: flex-start;

    margin-bottom: var(--spacing-md);

}



.contact-icon {

    background-color: var(--accent-color);

    color: var(--text-light);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: var(--spacing-md);

    flex-shrink: 0;

}



.contact-link {

    color: var(--accent-color);

    text-decoration: none;

    transition: var(--transition);

}



.contact-link:hover {

    color: var(--primary-color);

    text-decoration: underline;

}



.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: var(--spacing-lg);

    align-items: start;

}



.map-container {

    border-radius: var(--border-radius);

    overflow: hidden;

    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    height: 100%;

}



/* Section Title Modifications */

.section-contact .section-title {

    color: #ffffff;

}



/* Responsive Adjustments */

@media (max-width: 768px) {

    .section-grid {

        grid-template-columns: 1fr;

    }



    .section-image {

        margin-bottom: var(--spacing-md);

    }



    .contact-item {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }



    .contact-icon {

        margin-right: 0;

        margin-bottom: var(--spacing-sm);

    }

}



/* Reviews Section Styles */

.reviews-container {

    position: relative;

    padding: 0 40px;

    overflow: hidden;

}



.reviews-wrapper {

    display: flex;

    overflow-x: auto;

    scroll-behavior: smooth;

    gap: 20px;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none; /* Firefox */

    -ms-overflow-style: none; /* Internet Explorer 10+ */

}



.reviews-wrapper::-webkit-scrollbar {

    display: none; /* WebKit */

}



.review-card {

    flex: 0 0 calc(50% - 10px);

    max-width: calc(50% - 10px);

    border: 1px solid #ddd;

    border-radius: 8px;

    padding: 20px;

    transition: all 0.3s ease;

}



.review-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}



.review-header {

    display: flex;

    align-items: center;

    margin-bottom: var(--spacing-sm);

}



.review-avatar {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    margin-right: var(--spacing-sm);

    border: 2px solid var(--secondary-color);

}



.review-author {

    color: var(--primary-color);

    font-size: 1.1rem;

    font-weight: bold;

    margin-bottom: 0.25rem;

}



.review-rating {

    color: var(--secondary-color);

    letter-spacing: 2px;

}



.review-content {

    color: #4a4a4a;

    line-height: 1.8;

    font-style: italic;

}



.review-nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    background: #333;

    color: white;

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    cursor: pointer;

}



.prev-btn { left: 0; }

.next-btn { right: 0; }



.review-nav:hover {

    background: var(--accent-color);

}



.smooth-scroll {

    scroll-behavior: smooth;

}



/* Responsive adjustments */

@media (max-width: 768px) {

    .review-card {

        flex: 0 0 100%;

        max-width: 100%;

    }

}



/* Utility Classes */



.text-center {

    text-align: center;

}

.mb-sm { margin-bottom: var(--spacing-sm); }

.mb-md { margin-bottom: var(--spacing-md); }

.mb-lg { margin-bottom: var(--spacing-lg); }



/* Animation classes */

.fade-in {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}



.fade-in.visible {

    opacity: 1;

    transform: translateY(0);

}



/* Responsive Design */

/* Desktop (default) */

@media (max-width: 768px) {

    .section-grid {

        grid-template-columns: 1fr;

    }

    

    .pricing-cards {

        grid-template-columns: 1fr;

    }

    

    .animate-fade-left,

    .animate-fade-right {

        animation-name: fadeUp;

    }

}







/* Tablet */

@media screen and (max-width: 1023px) {

    .section-title {

        font-size: 2.5rem;

    }

    

    .contact-grid {

        grid-template-columns: 1fr;

    }

    

    .reviews-wrapper {

        gap: var(--spacing-sm);

    }

}



/* Mobile */

@media screen and (max-width: 767px) {

    .section-title {

        font-size: 2rem;

    }

    

    .section-grid {

        grid-template-columns: 1fr;

    }

    

    .img-feature {

        max-width: 100%;

    }

    

    

    .contact-card {

        padding: var(--spacing-sm);

    }

    

    .nav-menu {

        position: fixed;

        top: 80px;

        left: 0;

        right: 0;

        background: var(--primary-color);

        padding: var(--spacing-sm);

        flex-direction: column;

        transform: translateY(-100%);

        transition: transform 0.3s ease;

    }

    

    .nav-menu.active {

        transform: translateY(0);

    }

}



/* Mobile Responsive Styles */

@media (max-width: 991.98px) {

    .navbar-collapse {

        background-color: var(--primary-color);

        padding: 1rem;

        border-radius: 0 0 var(--border-radius) var(--border-radius);

    }



    .navbar-nav {

        margin-top: 1rem;

    }



    .nav-link {

        padding: 0.75rem 0;

        border-bottom: 1px solid rgba(255,255,255,0.1);

    }



    .nav-item:last-child .nav-link {

        border-bottom: none;

    }

}



/* Accessibility Improvements */

@media (prefers-reduced-motion: reduce) {

    .animate-fade-left,

    .animate-fade-right,

    .animate-fade-up,

    .img-feature,

    .price-card,

    .btn-primary {

        animation: none;

        transition: none;

    }

}



:focus {

    outline: 3px solid var(--secondary-color);

    outline-offset: 2px;

}



.skip-link {

    position: absolute;

    top: -100px;

    left: 0;

    padding: var(--spacing-sm);

    background-color: var(--primary-color);

    color: var(--text-light);

    z-index: 1001;

}



.skip-link:focus {

    top: 0;

}



/* Print Styles */

@media print {

    .header,

    .mobile-menu-toggle {

        display: none;

    }

    

    .main-content {

        margin-top: 0;

    }

    

    .section {

        page-break-inside: avoid;

    }

}



/* Responsive Adjustments */

@media (max-width: 768px) {

    .contact-grid {

        grid-template-columns: 1fr;

    }



    .map-container {

        height: 300px;

    }

}



.light-border {

    border: 0.75px solid #d8d2d2;

}