/*
Copyright © Wild Rose Devs. & Alberta Lynx 2025. Design & Code rights reserved - United Conservative Party logo and name reserved by The United Conservative Party of Alberta, Canada.

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
*/

body {
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f7f7f7;
    width: 100%;
    overflow-x: hidden;
}

header {
    background-color: #004080;
    color: white;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

header .logo {
    margin-right: auto;
    display: flex;
    align-items: center;
    position: relative;
}

header .logo img {
    max-height: 70px;
    margin-right: 20px;
}

.menu-button {
    display: none;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-end;
}

.desktop-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px;
}
.desktop-nav ul li {
    position: relative;
}
.desktop-nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    padding: 8px 12px;
    transition: background-color 0.3s ease;
}

.desktop-nav ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #0056b3;
    padding: 10px 0;
    border-radius: 5px;
    min-width: 180px;
}
.desktop-nav ul li:hover > ul {
    display: block;
}
.desktop-nav ul li ul li a {
    display: block;
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 0.9rem;
}
.desktop-nav ul li ul li a:hover {
    background-color: #007bff;
    border-radius: 5px;
}

.desktop-nav ul li a.membership {
    background-color: #007bff;
    border-radius: 8px;
    padding: 10px 15px;
}
.desktop-nav ul li a.donate {
    background-color: #ed272a;
    border-radius: 8px;
    padding: 10px 15px;
}
.desktop-nav ul li a.membership:hover {
    background-color: #0056b3;
}
.desktop-nav ul li a.donate:hover {
    background-color: #b8001c;
}

.hero {
    position: relative;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url("../images/Rail\ View\ of\ Truss\ Bridge.png") no-repeat center
            center/cover;
    height: 80vh;
    color: white;
    display: flex;
    margin: 0 auto;
    overflow: hidden;
    max-width: 100vw;
    align-items: center;
    text-align: left;
    padding: 60px 20px;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    margin-top: 100px;
}

.hero h1 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 5rem;
    line-height: 1.1;
    color: rgb(255, 255, 255);
    text-align: left;
    display: block;
    box-sizing: border-box;
    width: auto;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    unicode-bidi: isolate;
    margin: 0;
    padding: 0;
}

.hero p {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
    color: rgb(255, 255, 255);
    text-align: left;
    display: block;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    margin-top: 20px;
}

.hero .buttons {
    display: flex;
    gap: 20px;
}

.hero .buttons a {
    background-color: #007bff;
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 1.3rem;
    transition: background-color 0.3s;
}

.hero .buttons a:hover {
    background-color: #002f5d;
}

.hero .buttons a.donate {
    background-color: #ed272a;
}

.hero .buttons a.donate:hover {
    background-color: #b8001c;
}

/* ADDON */
.feature-addon-section {
    padding: 60px 20px;
    background-color: #f7f7f7; /* Matches body background */
}

.feature-addon-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.feature-addon-section .explore-btn {
    display: inline-block;
    background-color: #007bff; /* Primary blue */
    color: #ffffff;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    text-align: center;
    margin-top: 10px;
}

.feature-addon-section .explore-btn:hover {
    background-color: #0056b3; /* Hover blue */
}

.addon-tile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.addon-info {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.addon-info h2 {
    font-family: "Poppins", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: #004080; /* Dark header blue */
}

.addon-info p {
    font-size: 1.1rem;
    margin-bottom: 24px;
    color: #333333;
}

.addon-info .explore-btn {
    padding: 12px 28px;
}

.addon-preview img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .addon-tile {
        grid-template-columns: 1fr;
    }

    .addon-preview {
        order: -1;
    }
}
/* ADDON */

.youtube-section {
    background-color: transparent;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin: 30px auto;
    padding: 40px;
    max-width: 1200px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.youtube-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../images/Suport\ Alberta.jpg") no-repeat center
        center/cover;
    z-index: 1;
    opacity: 0.6;
    filter: brightness(50%);
    border-radius: 10px;
}

.youtube-section {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin: 30px auto;
    padding: 40px;
    max-width: 1100px;
    text-align: center;
    overflow: hidden;
    color: white;
}

.youtube-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
    border-radius: 10px;
}

.youtube-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: white;
    position: relative;
    z-index: 2;
}

.youtube-container {
    position: relative;
    z-index: 2;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

.youtube-iframe {
    width: 100%;
    height: 500px;
    border: none;
    border-radius: 10px;
}

.support-movement {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../images/Pump\ Jack.png") no-repeat center bottom/cover;
    padding: 60px 20px;
    color: white;
    text-align: center;
    max-width: 1200px;
    margin: 20px auto;
    border-radius: 10px;
}

.support-movement h2 {
    font-family: "Poppins", sans-serif;
    font-size: 4rem;
    text-align: left;
    padding-left: 69px;
    margin-bottom: 20px;
}

.support-movement p {
    margin: 20px 0 40px;
    text-align: left;
    padding-left: 70px;
    font-weight: normal;
    font-style: normal;
}

.donation-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    column-gap: 2px;
    justify-items: center;
}

.donation-buttons a {
    background-color: #007bff;
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    font-size: 1.5rem;
    font-family: "Poppins", sans-serif;
    border-radius: 5px;
    transition: background-color 0.3s;
    text-align: center;
    display: block;
    width: 200px;
}

.donation-buttons a:hover {
    background-color: #0056b3;
}

.contact-info {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto 60px auto;
    background-color: #f7f7f7;
    border-radius: 10px;
}

.contact-info div {
    background-color: #004080;
    color: white;
    padding: 20px;
    flex: 1;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 180px;
}

.contact-info div i {
    font-size: 2.5rem;
    margin-bottom: 10px;
    display: block;
    text-align: center;
}

.contact-info i {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #66b3ff;
}

.contact-info h3 {
    font-family: "Poppins", sans-serif;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.contact-info p {
    font-size: 1rem;
    line-height: 1.5;
    font-family: "Tanseek Modern Arabic Medium", sans-serif;
}

.contact-info a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-info a:hover {
    color: #66b3ff;
}

footer {
    background-color: #004080;
    color: white;
    padding: 40px 20px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-links {
    display: flex;
    gap: 100px;
}

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

.footer-links ul.bold-links li a {
    font-weight: bold;
}

.footer-links ul.regular-links li a {
    font-weight: normal;
}

.footer-links ul li {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.footer-links ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
}

.footer-links ul li a:hover {
    text-decoration: underline;
}

.footer-social {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

.footer-social a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-social svg {
    width: 24px;
    height: 24px;
    fill: white !important;
    transition: fill 0.3s ease;
}

.footer-social i {
    font-size: 1.5rem;
    color: white !important;
    transition: color 0.3s ease;
}

.footer-social svg:hover {
    fill: #66b3ff !important;
}

.footer-social i:hover {
    color: #66b3ff !important;
}