/*
Copyright © Wild Rose Devs. & Alberta Lynx 2025. All rights reserved.

This software and its source code are proprietary and confidential.
Unauthorized copying, distribution, modification, or use in whole or in part
is strictly prohibited and may result in civil and/or criminal penalties.

No license or rights are granted by implication or otherwise under any
intellectual property rights.

For licensing inquiries, contact: https://wildrosedevs.ca
*/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Make sure html & body have no margin/padding */
html,
body {
    margin: 0;
    background-color: white;
    padding: 0;
    overflow-x: hidden;
    font-family: "Arial", sans-serif;
}

a {
    text-decoration: none;
}

/* ==============================
   HEADER (Desktop + Mobile)
================================= */
.header-bar {
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 80px;
    position: relative;
    background-color: #0071e2;
    /* Ensure consistent background */
}

.logo-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.logo-block img {
    background-color: #f5f5f5;
    border-radius: 50%;
    height: 9vh;
    display: block;
    margin-right: 10px;
    /* Proper spacing between the logo and the fallback text */
}

.logo-fallback {
    display: flex;
    flex-direction: row;
    /* Position "BlueRose" and "Project" horizontally */
    align-items: center;
    justify-content: flex-start;
    line-height: 1.1;
    padding: 0;
    margin: 0;
}

.logo-fallback .logo-top {
    font-family: "Times New Roman", serif;
    font-family: "Cairo", sans-serif;
    font-size: 36px;
    font-weight: bold;
    color: white;
    /* Blue top row color */
    margin: 0;
    padding: 0;
}

.logo-fallback .logo-bottom {
    font-family: "Cairo", sans-serif;
    font-size: 20px;
    color: #000;
    /* Black bottom row color */
    margin: 0;
    padding: 0;
    position: relative;
    top: 0.3em;
    /* Adjust position slightly */
}

/* Main Navigation (Desktop) */
.main-nav {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-left: auto;
}

.main-nav ul {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav a {
    font-size: 16px;
    font-weight: 600;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: #000;
}

.quote-btn {
    padding: 12px 20px;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid #eb0b4d;
    background-color: #eb0b4d;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    margin: 0 auto;
    transition: background-color 0.3s ease;
}

.quote-btn:hover {
    background-color: #b31444;
    color: #fff;
}

/* Hide menu toggle on desktop */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
}

/* Mobile Menu */
@media (max-width: 768px) {
    .logo-block img {
        height: 7vh;
    }

    .logo-fallback .logo-top {
        font-size: 30px;
    }

    .logo-fallback .logo-bottom {
        font-size: 14px;
    }

    .menu-toggle {
        display: block;
        cursor: pointer;
    }

    .menu-toggle i {
        font-size: 24px;
        color: white;
    }

    .main-nav {
        display: none;
        /* Hide menu by default */
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: #0071e2;
        padding: 20px 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .main-nav.show {
        display: flex;
    }

    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .quote-btn {
        display: none;
        /* Hide quote button on mobile */
    }

    .hero {
        height: auto;
    }
}

/* Mobile navbar toggle (rotation on active) */
.menu-toggle i.active {
    transform: rotate(90deg);
}

/* Full-bleed hero with dark overlay + background image */
.hero {
    background:
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url("../images/code-1076533_1920.jpg") no-repeat center center / cover;
    padding: 100px 0;
    height: 90vh;
}

.hero-content {
    width: 100%;
    position: relative;
    max-width: 1280px;
    margin-top: 40px;
    padding-left: 60px;
    padding-right: 60px;
    text-align: left;
}

/* Keep your original heading style */
.hero h1 {
    font-size: 6rem;
    font-weight: 700;
    color: #0c81f7;
    margin: 0 0 20px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Keep your original paragraph style */
.hero p {
    font-size: 1.4rem;
    color: #f7f7f7;
    line-height: 1.4;
    max-width: 1280px;
    margin-bottom: 10px;
}

/* Buttons row */
.hero .buttons {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 10px;
}

/* Hero CTA styling */
.hero .btn {
    padding: 16px 32px;
    font-size: 1.3rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s;
}

/* Pinkish-red CTA */
.hero-cta {
    background-color: #eb0b4d;
    color: #f2f2f2;
}

.hero-cta:hover {
    background-color: #b1083b;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .hero-content {
        margin-top: 50px;
        /* smaller top margin for mobile, if you like */
        padding: 0 20px;
        /* narrower side padding */
    }

    .hero h1 {
        font-size: 1.6rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero .buttons {
        flex-direction: column;
        gap: 10px;
    }

    .hero .btn {
        width: 100%;
        text-align: center;
    }
}

.main-title::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #0071e2;
    border-radius: 50%;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
}

.main-title::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #0071e2;
    border-radius: 50%;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}

.main-title {
    display: block;
    width: fit-content;
    margin: 0 0 40px 20px;
    padding-bottom: 8px;
    font-size: 50px;
    color: #0071e2;
    font-weight: bold;
    border: none;
    border-bottom: 2px solid #000;
    text-align: left;
}


.main-title::before,
.main-title::after {
    display: none;
}

.diff-title::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #0071e2;
    border-radius: 50%;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
}

.diff-title::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #0071e2;
    border-radius: 50%;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}

.diff-title {
    display: inline-block;
    margin: 0 auto 40px;
    padding-bottom: 8px;
    font-size: 50px;
    color: #0071e2;
    font-weight: bold;
    border: none;
    border-bottom: 2px solid #000;
    text-align: center;
}

.diff-title::before,
.diff-title::after {
    display: none;
}

/* Difference We Bring Section */
.difference-highlight {
    background-color: #f5f5f5;
    padding: 20px 10px;
    text-align: center;
}

.diff-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Intro text right under heading */
.diff-lead {
    color: #333;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* Additional paragraphs */
.diff-text {
    color: #333;
    font-size: 1.5rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 20px auto;
    text-align: left;
}

/* Button row */
.diff-button-wrap {
    margin-top: 30px;
    margin: 0 auto;
}

/* “Features” button */
.diff-btn {
    display: inline-block;
    font-weight: 700;
    font-size: 1.5rem;
    color: #0071e2;
    background-color: #fff;
    border: 2px solid #0071e2;
    border-radius: 4px;
    padding: 14px 28px;
    text-decoration: none;
    transition: 0.3s;
}

.diff-btn:hover {
    background-color: #0071e2;
    color: #fff;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .diff-title {
        font-size: 1.8rem;
    }

    .diff-lead,
    .diff-text {
        font-size: 1rem;
    }
}

/****************************************
  Our Work Section - With Linked Images
*****************************************/
.our-work-section {
    padding: 4rem 2rem;
    background-color: #f5f5f5;
}

.section-title1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
    text-align: left;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.project-card {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    text-align: center;
}

.project-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.project-text {
    padding: 1rem;
}

.project-text h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.project-text p {
    font-size: 0.9rem;
    color: #777;
}

.see-more {
    text-align: center;
    margin-top: 2rem;
    /* optional spacing above */
}

.see-more p {
    font-size: 1.2rem;
    color: #0071e2;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.see-more-button {
    display: inline-block;
    background-color: #0071e2;
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.see-more-button:hover {
    background-color: #bd1e48;
}

.hover-card {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: black;
}

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

.hover-card .hover-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    text-align: center;
}

.hover-card:hover .hover-content {
    transform: translateY(0%);
}

.hover-card .hover-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
}

.hover-card .hover-content p {
    font-size: 0.9rem;
    opacity: 0.85;
}

/**********************************************
  VIDEO + GET-IN-TOUCH (Centered Text) SECTION
**********************************************/
.video-contact-section {
    display: flex;
    flex-wrap: wrap;
    min-height: 400px;
    /* sets some vertical space for the section */
    margin: 0;
    padding: 0;
}

/* Left Column: the embedded video */
.video-col {
    flex: 1;
    background-color: #eaeaea;
    /* Light gray behind the video (optional) */
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* so the iframe can fill the space if needed */
}

/* The iframe stretches to fill left column */
.video-col iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Right Column: now text + content is centered horizontally */
.contact-col {
    flex: 1;
    background-color: #fff;
    padding: 40px;

    /* Center everything horizontally */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* centers vertically if there's extra height */
    align-items: center;
    text-align: center;
    /* center the text lines */
}

/* Big heading */
.contact-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 20px;
    line-height: 1.2;
}

/* Paragraph text, narrower width for easier reading */
.contact-desc {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #333;
    max-width: 500px;
    /* restrict line length a bit */
    margin-bottom: 20px;
}

/* Red-outlined "ENQUIRE" button */
.enquire-button {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    border: 2px solid #eb0b4d;
    background-color: #fff;
    border-radius: 6px;
    padding: 12px 24px;
    text-decoration: none;
    transition: 0.3s;
    margin-top: 10px;
    /* optional space above button */
}

.enquire-button:hover {
    background-color: #eb0b4d;
    color: #fff;
}

/* Stack columns vertically on narrow screens */
@media (max-width: 768px) {
    .video-contact-section {
        flex-direction: column;
    }

    .video-col,
    .contact-col {
        width: 100%;
        min-height: auto;
        padding: 20px;
    }

    .contact-heading {
        font-size: 2rem;
    }

    .contact-desc {
        font-size: 1rem;
    }
}

/******************************************************
   3-COLUMN FOOTER: (LEFT: TEXT/LINKS, CENTER: S.M.,
   RIGHT: 2X2 IMAGES), THEN BOTTOM BAR
*******************************************************/
.bluerose-footer {
    border-top: 1px solid #ccc;
}

/* The top row: 3 columns side by side */
.footer-top {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    /* let columns wrap on smaller screens */
    padding: 30px 20px;
}

/* LEFT column (Title + Link columns) */
.footer-left {
    flex: 1;
    min-width: 240px;
    margin-bottom: 20px;
}

.footer-heading {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0071e2;
    margin: 0 0 15px;
}

/* 2 columns of links inside the left column */
.footer-links-group {
    display: flex;
    gap: 40px;
}

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

.footer-col li {
    margin-bottom: 8px;
}

.footer-col li a {
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col li a:hover {
    color: #0071e2;
}

/* CENTER column (Social media) */
.footer-center {
    flex: 1;
    min-width: 200px;
    text-align: center;
    margin-bottom: 20px;
}

.social-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #000;
}

.social-row {
    display: flex;
    gap: 100px;
    justify-content: center;
}

.social-icon {
    color: #000;
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.3s;
}

.social-icon:hover {
    color: #0071e2;
}

.social-extra img {
    max-width: 250px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

/* RIGHT column (2x2 image squares) */
.footer-right {
    flex: 1;
    min-width: 240px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 120px);
    grid-template-rows: repeat(2, 120px);
    gap: 20px;
}

.logo-box {
    background-color: transparent;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.logo-box:hover {
    transform: translateY(-3px);
}

.logo-box img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* BOTTOM BAR (copyright) */
.footer-bottom {
    text-align: center;
    padding: 10px 20px;
    font-size: 0.9rem;
    color: #666;
    background-color: #fff;
    border-top: 1px solid #ccc;
}

/* MOBILE: stack columns vertically */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    .footer-left .footer-links-group {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .social-row {
        justify-content: flex-start;
    }

    .footer-right {
        justify-content: flex-start;
    }

    .logo-grid {
        margin-top: 10px;
    }
}

.splitter {
    width: 100%;
    height: 8rem;
    background-color: #f5f5f5;
    margin: 0 0;
    padding: 0 0;
}