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

        body {
            font-family: Arial, sans-serif;
            /* background-color: #121212; */
            color: #ffffff;
            line-height: 1.6;
            overflow-x: hidden;


	background-image: repeating-linear-gradient(45deg, transparent, transparent 32px, #0F0F0F 32px, #0F0F0F 64px);
	background-color: #000;

}

        .logo {
  
            font-size: 2.8rem;
            font-weight: bold;
            color: #fff;
            text-align: right;

            margin-right:2rem;

        }
        
        .logo span {
            color: #ff8a00;
        }

/* Header */
header {
    background: rgba(0, 0, 0, 0.95);
    /* gradient - black to transparent */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 1.0));
    color: #fff;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.3s;

    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #333;

    
}


.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    
}

/* Hamburger button styles */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 1001;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    transition: all 0.3s ease;
}


.hamburger-line:nth-child(1) { top: 0; }
.hamburger-line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger-line:nth-child(3) { bottom: 0; }

/* Navigation styles */
nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}
    
nav ul li a:hover {
        color: #ff8a00;
}


.hero {
    background-color: rgb(32, 32, 32);
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
    background-size: 10px 10px, 10px 10px, 10px 5px;
    background-position: 0px 0px, 5px 5px, 0px 0px;
    width:100%;
    min-height:auto;
}

        /* Hero Section */
        .hero {
            text-align: center;
            padding: 4rem 1rem;
            background-color: #1a1a1a;
            position: relative;
            color: #e0e0e0;
            border:1px solid #111;
            border-bottom:4px solid #010101;
        }
        
        .hero-container {
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: 700;
            color: #fff;
            margin-top:0em;
        }

        .hero p {
            font-size: 1.25rem;
            margin: 1rem;
            color: #b0b0b0;
            padding:1rem;
            margin-bottom:4rem;
        }

/* Mobile styles */
@media screen and (max-width: 767px) {

    h1 {
        font-size: 2rem;
    }

    .ham-container {
        display: flex;
        justify-content: flex-end;
        align-items: right;
        width:100%;
    }

    /* center align the logo */
    .logo {
        text-align: left;
        position:fixed;
        top:0.2rem;
        left:0px;
        z-index:99999;
        margin:0px;
        margin-left:1rem;
        font-size:2rem;

    }



    header {
        padding:0px;
        /* box */
        box-sizing:border-box;
        width:100%;

        padding-top:1rem;
        padding-bottom:1rem;
    }


    .hamburger {
        display: block;
        text-align: right;

    }


    .hamburger.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg);
        top: 11px;
    }

    .hamburger.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg);
        bottom: 11px;
    }

    .container {
        flex-direction: column;
    }

    nav ul {
        margin-top:3rem;
        margin-bottom:3rem;
        flex-direction: column;
        align-items: /* begin */ flex-start;
        width: 100%;
    }

    nav ul li {
        margin: 10px 0; /* Adjust vertical spacing */
        width: 100%;
        text-align: center;
        font-size:2rem;
    }


    /* hide .cta button in the header */
    /* nav ul li:last-child {
        display: none;
    } */


}

        /* ---- */
        /* .isdesktop .cta-button { */

        /* begin :: blue button */
        
        .btn-style {
            background: linear-gradient(180deg, 
                rgba(25, 118, 210, 0.95) 0%, /* Deep blue */
                rgba(30, 144, 255, 0.9) 45%, /* Dodger blue */
                rgba(30, 144, 255, 0.9) 55%, /* Dodger blue */
                rgba(25, 118, 210, 0.95) 100%); /* Deep blue */
            color: #ffffff;
            padding: 8px 30px;
            border-radius: 5px;
            font-weight: 700;
            text-transform: uppercase;
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.3s ease-out;
            box-shadow: 
                inset 0 1px 0 rgba(255,255,255,0.8),
                inset 0 -1px 0 rgba(0,0,0,0.4),
                inset 0 0 10px rgba(255,255,255,0.3),
                0 4px 8px rgba(0,0,0,0.3),
                0 0 20px rgba(25,118,210,0.4); /* Updated shadow color */
            border: 1px solid rgba(30,144,255,0.2); /* Updated border color */
            text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
            backdrop-filter: blur(8px);
        
            margin-top:2em;
        
            animation: bounce 2s infinite;

            /* nowrap */
            white-space:nowrap;
        }
        
        .btn-style:hover {
            background: linear-gradient(180deg,
                rgba(0, 89, 255, 0.9) 0%,
                rgba(3, 3, 3, 0.85) 100%);
            box-shadow: 
                inset 0 3px 6px rgba(0,0,0,0.4),
                inset 0 0 10px rgba(0,0,0,0.3);
            transform: translateY(2px);
            transform: scale(1.1) rotate(3deg);
            filter: brightness(1.2);
            animation: pulse 1s infinite alternate;

            background: radial-gradient(ellipse at bottom, #5091DD 0%, #030617 100%);
            color:white;
        }
        
        @keyframes pulse {
            from {
                transform: scale(1.1) rotate(3deg);
            }
            to {
                transform: scale(1.15) rotate(-3deg);
            }
        }        
        .btn-style:active {
            transform: translateY(1px);
            box-shadow: 0 0 0 rgba(0,0,0,0.4);
            filter: brightness(1);
            animation: none;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }
        /* end :: blue button */

        /* begin :: button orange */
        .btn-orange {
            background: linear-gradient(180deg, 
                rgba(255,165,0,0.95) 0%,
                rgba(255,140,0,0.9) 45%,
                rgba(255,69,0,0.85) 50%,
                rgba(255,140,0,0.9) 55%,
                rgba(255,69,0,0.95) 100%);
            color: #ffffff;
            padding: 8px 30px;
            border-radius: 5px;
            font-weight: 700;
            text-transform: uppercase;
            text-decoration: none;
            white-space: nowrap;
            transition: all 0.3s ease-out;
            box-shadow: 
                inset 0 1px 0 rgba(255,255,255,0.8),
                inset 0 -1px 0 rgba(0,0,0,0.4),
                inset 0 0 10px rgba(255,255,255,0.3),
                0 4px 8px rgba(0,0,0,0.3),
                0 0 20px rgba(255,69,0,0.4);
            border: 1px solid rgba(255,140,0,0.8);
            text-shadow: 0 -1px 0 rgba(0,0,0,0.4);
            backdrop-filter: blur(8px);
        
            margin-top: 2em;
        
            animation: bounce 2s infinite;
        }
        
        .btn-orange:hover {
            background: linear-gradient(180deg,
                rgba(255,69,0,0.9) 0%,
                rgba(3, 3, 3, 0.85) 100%);
            box-shadow: 
                inset 0 3px 6px rgba(0,0,0,0.4),
                inset 0 0 10px rgba(0,0,0,0.3);
            transform: translateY(2px);
            transform: scale(1.1) rotate(3deg);
            filter: brightness(1.2);
            animation: pulse 1s infinite alternate;
        
            background: radial-gradient(ellipse at bottom, #FF8C00 0%, #030617 100%);
            color: white;
        }
        
        .btn-orange:active {
            transform: translateY(1px);
            box-shadow: 0 0 0 rgba(0,0,0,0.4);
            filter: brightness(1);
            animation: none;
        }
        /* end :: orange button */

        /*
        .hero .btn-primary {
            background: linear-gradient(135deg, #ff007a, #ff8a00);
            padding: 12px 25px;
            color: #fff;
            border-radius: 25px;
            font-size: 1.2rem;
            font-weight: bold;
            text-decoration: none;
        }
        */

        .btn-primary {
            background: linear-gradient(135deg, #ff4081, #ffa000); /* Vibrant gradient colors */
            padding: 12px 24px; /* Increased padding for a more prominent appearance */
            color: #fff; /* White text for high contrast */
            border-radius: 12px; /* More rounded corners for a friendly look */
            font-size: 1.2rem; /* Slightly larger font size for better visibility */
            font-weight: 700; /* Bold text for emphasis */
            text-decoration: none; /* No underline */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
            transition: background 0.3s ease, transform 0.3s ease; /* Smooth transition for background and transform */
            border: none;
        }

        .btn-primary:hover {
            /* sky blue gradient */
            background: linear-gradient(135deg, #00c6fb, #005bea);
        }

        /* Services Section */
        .services {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: space-around;
            padding: 3rem 1rem;
        }

        .service-card {
            /* make this style amazing looking */
            /* I want it to look like a card */
            background-color: #1a1a1a;
            padding: 1rem;
            border-radius: 10px;
            text-align: center;
            
            flex: 1;

            margin: 1rem;

            /* add a shadow */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

            /* add a hover effect */
            transition: transform 0.3s;

            padding-top:2rem;
            padding-bottom:2rem;

            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .service-card:hover {
            transform: translateY(-10px);
        }


        .service-card h3 {
            font-size: 1.5rem;
            color: #ff8a00;
        }

        .service-card p {
            /* Set display type */
            display: block;
            
            /* Use both height and min-height for better browser support */
            height: 10rem;
            min-height: 10rem;
            
            /* Preserve existing styles */
            font-size: 1rem;
            color: #b0b0b0;
            
            /* Prevent content overflow if needed */
            overflow-y: auto;

        }

        /* .service-card .btn-primary {
            background: linear-gradient(135deg, #ff8a00, #ff007a);
            color: #fff;
            padding: 10px 20px;
            border-radius: 20px;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: 1rem;
            display: inline-block;
            text-decoration: none;
        } */

        .service-card .btn-primary {
            font-size:1.1em;
        }



        /* FAQ Section */
        .faq {
            padding: 3rem 1rem;
            color: #e0e0e0;
            text-align: center;

            
        }

        .faq h2 {
            font-size: 2rem;
            color: #fff;
            margin-bottom: 1rem;

        }

        .faq-item {
            margin: 1.5rem 0;
        }

        .faq-item h3 {
            font-size: 1.25rem;
            color: #ff8a00;



        }

        .faq-item p {
            color: #b0b0b0;
            font-size: 1.1rem;
            margin-top: 0.5rem;
/* 
            text-align: justify;
            text-indent: 1rem; */

        }

        /* Contact Section */
        .contact {
            padding: 3rem 1rem;
            background-color: #1a1a1a;
            text-align: center;
            border-top: 1px solid #333;
        }

        .contact h2 {
            font-size: 2rem;
            color: #fff;
            margin-bottom: 1rem;
        }

        .contact p {
            color: #b0b0b0;
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        .contact b {
            color: #ff8a00;
        }

        .contact form {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 500px;
            margin: 0 auto;
        }

        .contact form input,
        .contact form textarea {
            width: 100%;
            padding: 12px;
            margin-bottom: 1rem;
            border-radius: 8px;
            border: none;
            font-size: 1rem;
        }

        /* .contact form button {
            background: linear-gradient(135deg, #ff007a, #ff8a00);
            padding: 12px 25px;
            color: #fff;
            border-radius: 25px;
            font-size: 1.2rem;
            font-weight: bold;
            text-decoration: none;
            border: none;
            cursor: pointer;
            margin-top:2rem;

        } */

        .contact .btn-primary {
            font-size:1.1em;
            cursor:pointer;
        }

        /* hover */

        .contact form button:hover {
            background: linear-gradient(135deg, #00c6fb, #005bea);
        }









        /* Responsive adjustments */
        @media (max-width: 767px) {
            .hero h1 {
                font-size: 2.5rem;
                margin:0.2rem;
                margin-top:3rem;
                padding:0.1rem;
                /* line spacing */
                line-height:1.2;
            }

            .hero {
                margin:0rem;
                padding:0rem 0rem;
                padding-bottom:4rem;
            }
            .hero p {
                padding-bottom:0rem;
                margin:1rem;
            }


            .services {
                flex-direction: column;
                align-items: center;
            }
        }




        /*
<!-- Footer Section -->
<footer>
    <div class="container">
        <div class="footer-logo">Right<span>SEO</span>.ca</div>
        <div class="footer-nav">
            <ul>
                <li><a href="#intro">Home</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#service-regions">Regions</a></li>
                <li><a href="#faq">FAQ</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
        
        <div class="footer-social">
            <a href="https://facebook.com" target="_blank"><i class="fab fa-facebook"></i></a>
            <a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
            <a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a>
        </div>

        <div class="footer-info">
            <p>&copy; 2024 RightSEO.ca. All rights reserved.</p>
            <p>Designed by <a href="https://rightdesign.ca" target="_blank">RightDesign</a></p>
        </div>
    </div>
</footer>
        */

        /* Footer Section */
        footer {
            background-color: #121212;
            color: #fff;
            padding: 1rem 0;
            text-align: center;
            position:fixed;
            bottom:0px;
            width:100vw;
        }

        footer {
            background: radial-gradient(ellipse at bottom, #5091DD 0%, #030617 100%);
            /* match our theme better */
            border-top:2px solid #ff8a00;
        }



        footer .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        footer .footer-logo {
            font-size: 1.5rem;
            font-weight: bold;
        }

        footer .footer-logo span {
            color: #ff8a00;
        }

        footer .footer-nav ul {
            display: flex;
            justify-content: center;
            list-style: none;
        }

        footer .footer-nav ul li {
            margin: 0 15px;
        }

        footer .footer-nav ul li a {
            color: #fff;
            text-decoration: none;
        }

        footer .footer-social a {
            margin: 0 10px;
        }

        /* hovers (fontawesome social) */
        footer a:hover {
            /* make pop */
            transform: scale(1.2);
        }

        


        /*
        footer .footer-social img {
            width: 30px;
            height: 30px;
        }
        */ 
        /* now fontawesome icons */
        footer .footer-social i {
            font-size: 1.5rem;
            color: #ff8a00;
        }



        footer .footer-info {
            font-size: 0.9rem;
        }

        footer .footer-info a {
            color: #ff8a00;
            text-decoration: none;
        }

        footer .footer-info a:hover {
            text-decoration: underline;
        }


        /* Responsive adjustments */
        @media (max-width: 767px) {
            footer .container {
                flex-direction: column;
            }

            footer .footer-nav ul {
                margin-top: 1rem;
            }

            footer .footer-social {
                margin-top: 1rem;
                margin-bottom:1rem;
            }
        }

        /* links */
        a {
            color: #ff8a00;
            text-decoration: none;
        }

        a:hover {
            color:white;
        }
        .fab {
            font-size: 1.5rem;
            color: #ff8a00;
            margin: 0 10px;


            /* shadow like the icon is hovering */
            transition: transform 0.3s;

            /* make it look like it is clickable */
            cursor:pointer;

            /* disable user select */
            user-select:none;



        }



        /* make the fontawesome icons hover effects */
        .fab:hover {
            color:white;
            /* make pop */
            transform: scale(1.2);

        }

        /* when less than 768px social icon section has margin-top */
        .ismobile div.footer-social {
        }

        /* ---- */
    

        /*
 <footer>
    <div class="container">
        <div class="footer-logo">Right<span>SEO</span>.ca</div>

        <div class="footer-nav">
            <ul>
                <li><a href="#intro">Home</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#service-regions">Regions</a></li>
                <li><a href="#faq">FAQ</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
        */

        /* handle hover overs */
        .footer-nav ul li a:hover {
            color: #ff8a00;
        }

        /* ---- */

        ul {
            list-style-type: none;
            /* interesting style: flexbox */
            display: flex;
        }
    
        li {
            margin: 0 1rem;
            font-weight: bold;
        }

        .hero-phone-seo-services {
            letter-spacing:0.1rem;
        }
    

        .faq {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

    }


    .faq-item {
        flex: 1;
        margin: 1rem;
        padding: 1rem;
        border-radius: 10px;
        background-color: #1a1a1a;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .faq-item h3 {
        font-size: 1.5rem;
        color: #ff8a00;
    }

    .faq-item p {
        font-size: 1rem;
        color: #b0b0b0;
    }

    @media (max-width: 767px) {

        .faq-item {
            flex: 1 1 100%;
        }


    }

    /* else set to max 3 up on a row */
    @media (min-width: 767px) {

        .faq-item {
            flex: 1 1 30%;
        }

    }


    @media (max-width: 766px) {
        nav ul {
            display: none;
        }
    }

    .main {
        /* gradient fade alpha from transparent to black */
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1.0));
        display: block;

        min-height:100vh;

    }