/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.1.1769865382
Updated: 2026-01-31 13:16:22

*/
:root {
    /* Colors */
    --color-primary: #fba21a;
    --color-primary-hover: #e89010;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-text: #1a1a1a;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-bg-light: #f7f7f7;
    /* Typography */
    --font-heading: "manrope", sans-serif;
    --font-body: "Roboto", sans-serif;
    --font-code: "JetBrains Mono", monospace;
    /* Font sizes */
    --fs-h1: 3rem;
    --fs-h2: 2.5rem;
    --fs-h3: 1.5rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;
    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    /* Container */
    --container-width: 1200px;
}

/* =============================== RESET ================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 14px;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text);
    background: var(--color-white);
    line-height: 1.6;
}

/* =============================== Typography ================================== */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -1px;
}

h1 {
    font-size: var(--fs-h1);
    margin-bottom: var(--space-md);
}

h2 {
    font-size: var(--fs-h2);
    margin-bottom: var(--space-xs);
}

h3 {
    font-size: var(--fs-h3);
    margin-bottom: var(--space-xs);
}

.heading {
    text-align: center;
    padding-bottom: 20px;
}

.heading__black {
    text-align: center;
    color: #121212;
    padding-bottom: 20px;
}

p {
    margin-bottom: var(--space-sm);
    font-size: var(--fs-body);
    font-weight: 400;
}

li {
    margin-bottom: 0;
}

ul {
    padding-left: 0;
    margin-left: 24px;
}

code {
    font-family: var(--font-code);
}

/* =============================== Container ================================== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
}

.section {
    padding: var(--space-lg) 0;
}

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

/* =============================== Global Default ================================== */
.card {
    border-radius: var(--radius-md);
    padding: var(--space-md);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.glass-card {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
    overflow: hidden;
}

.glass-card:hover {
    transform: translateY(-8px);
    border: 1px solid rgba(251, 162, 26, 0.5);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5), 0 0 30px rgba(77, 163, 255, 0.4);
}

.glass-card::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 300%;
    background: linear-gradient(120deg, transparent 40%, rgb(255 255 255 / 9%) 50%, transparent 60%);
    transform: rotate(25deg);
    transition: 0.8s ease;
}

.glass-card:hover::before {
    top: 100%;
    left: 100%;
}

.btn {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-primary {
    background: var(--color-primary) !important;
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-primary-hover) !important;
}

.btn-outline {
    border: 1px solid var(--color-black);
    color: var(--color-black);
}

.cta-button {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: fadeInUp 1s ease-out 0.6s both;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-banner .cta-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

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

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

.bg-gradient-modern {
    background: radial-gradient(circle at 20% 25%, rgba(251, 162, 26, 0.95) 0%, rgba(251, 162, 26, 0.6) 30%, transparent 65%), radial-gradient(circle at 80% 70%, rgba(77, 163, 255, 0.95) 0%, rgba(77, 163, 255, 0.6) 35%, transparent 70%), linear-gradient(135deg, #fba21a 0%, #4da3ff 100%);
}

.bg-gradient-smooth {
    background: radial-gradient(circle at 20% 25%, #fba21a 0%, transparent 60%), radial-gradient(circle at 80% 70%, #4da3ff 0%, transparent 65%);
    filter: blur(0px);
}

.bg-animated-modern {
    background: linear-gradient(-45deg, #fba21a, #ffbe55, #6ec1ff, #4da3ff);
    background-size: 400% 400%;
    animation: gradientMove 10s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.bg-tech-modern {
    background: radial-gradient(circle at 20% 40%, rgba(251, 162, 26, 0.7) 0%, transparent 50%), radial-gradient(circle at 80% 60%, rgba(77, 163, 255, 0.7) 0%, transparent 50%);
    background-color: #0b1120;
}

.bg-blob-modern {
    background: radial-gradient(circle at 30% 20%, #fba21a 0%, transparent 55%), radial-gradient(circle at 75% 80%, #4da3ff 0%, transparent 55%);
    background-color: #ffffff;
}

.bg-glass-modern {
    background: linear-gradient(135deg, #fba21a 0%, #ffbe55 25%, #6ec1ff 60%, #4da3ff 100%);
}

.bg-mesh-modern {
    background: radial-gradient(at 20% 30%, #fba21a 0%, transparent 50%), radial-gradient(at 80% 70%, #4da3ff 0%, transparent 50%), radial-gradient(at 50% 50%, #6ec1ff 0%, transparent 60%);
    background-color: #0f172a;
}

.section-modern-1 {
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.section-modern-1::before,
.section-modern-1::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    z-index: 0;
}

.section-modern-1::before {
    background: #fba21a;
    top: -150px;
    left: -150px;
}

.section-modern-1::after {
    background: #4da3ff;
    bottom: -150px;
    right: -150px;
}

.section-modern-2 {
    position: relative;
    background: #f9fafc;
    overflow: hidden;
}

.section-modern-2::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at top right, #4da3ff 0%, transparent 60%);
    opacity: 0.3;
}

.section-modern-2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at bottom left, #fba21a 0%, transparent 60%);
    opacity: 0.3;
}

.section-modern-3 {
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.section-modern-3::before {
    content: "";
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #4da3ff 0%, transparent 65%);
    filter: blur(100px);
}

.section-modern-3::after {
    content: "";
    position: absolute;
    bottom: -200px;
    left: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #fba21a 0%, transparent 65%);
    filter: blur(100px);
}

.section-dark-modern {
    position: relative;
    background: #0f172a;
    /* dark navy */
    overflow: hidden;
}

.section-dark-modern::before {
    content: "";
    position: absolute;
    top: -200px;
    left: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(251, 162, 26, 0.4) 0%, transparent 70%);
    filter: blur(120px);
}

.section-dark-modern::after {
    content: "";
    position: absolute;
    bottom: -200px;
    right: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(77, 163, 255, 0.4) 0%, transparent 70%);
    filter: blur(120px);
}

.section-dark-glass {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #111827 100%);
    overflow: hidden;
}

.section-dark-glass::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(77, 163, 255, 0.35), transparent 60%);
}

.section-dark-glass::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at bottom left, rgba(251, 162, 26, 0.35), transparent 60%);
}

.section-white-modern {
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.section-white-modern::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(77, 163, 255, 0.25) 0%, transparent 70%);
    filter: blur(100px);
}

.section-white-modern::after {
    content: "";
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(251, 162, 26, 0.25) 0%, transparent 70%);
    filter: blur(100px);
}

.section-ai-white {
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

.section-ai-white::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 15% 25%, rgba(251, 162, 26, 0.35) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(77, 163, 255, 0.35) 0%, transparent 45%);
    filter: blur(120px);
}

.section-ai-white>* {
    position: relative;
    z-index: 2;
}

.section-modern-1,
.section-modern-2,
.section-modern-3,
.section-dark-modern,
.section-white-modern,
.section-dark-glass {
    z-index: 1;
}

.section-modern-1>*,
.section-modern-2>*,
.section-modern-3>*,
.section-dark-modern>*,
.section-white-modern>*,
.section-dark-glass>* {
    position: relative;
    z-index: 2;
}

/* =============================== Header ================================== */
.inside-header {
    padding: 5px 20px;
}

.site-header.grid-container {
    position: fixed;
    width: 100%;
    transition: all 0.3s ease;
    z-index: 99;
    background: #fff;
    left: 0;
    right: 0;
    max-width: 100% !important;
}

.site-header.scrolled {
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.menu-toggle {
    padding: 0px 12px;
    line-height: 40px;
    font-size: 15px;
    border-radius: 8px;
    background-color: #222222 !important;
    color: #fff !important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.main-navigation .menu-bar-item>a {
    padding: 0px 12px;
    line-height: 40px;
    font-size: 15px;
    border-radius: 8px;
    background-color: #f7f7f7 !important;
    color: #000 !important;
    margin-right: -7px;
}

.search-modal-form {
    border-radius: 8px !important;
    overflow: hidden;
}

.search-modal-fields button {
    background-color: #e89010;
}

.search-modal-fields button:hover {
    background-color: #222;
    color: #fff;
}

/* Footer */
.wp-block-social-links .wp-social-link svg {
    height: 1.4em;
    width: 1.4em;
}

.wp-block-social-links.has-huge-icon-size {
    font-size: 15px;
}

.footer-widgets-container .widget-title {
    margin-bottom: 15px;
}

.footer-widgets-container {
    background-color: var(--background-mint);
    background: linear-gradient(to right, transparent, black 50%, transparent) bottom / 100% 1px no-repeat;
}

/* =============================== Hero ================================== */
.hero-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #f1a129, #457091, #1a1a2e);
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite, softPulse 8s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Subtle pulsing effect */
@keyframes softPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.95;
    }
}

.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(241, 161, 41, 0.2) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(69, 112, 145, 0.2) 0%, transparent 50%);
    z-index: 1;
    animation: swirl 25s linear infinite;
}

.hero-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 30s linear infinite;
    z-index: 1;
}

@keyframes swirl {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Content container */
.hero-banner>*:not(:before):not(:after) {
    position: relative;
    z-index: 2;
}

/* Blog Page */
/* =============================== Responsive ================================== */
@media (max-width: 1199px) {
    .main-navigation .main-nav ul li a {
        padding-inline: 10px;
    }
}

@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .header-widget {
        display: none;
    }

    .main-navigation .menu-bar-item>a {
        background-color: #e89010 !important;
        color: #fff !important;
        margin-right: 6px;
    }

    .main-navigation .main-nav ul li a {
        line-height: 35px;
    }

    .main-navigation.toggled .main-nav>ul {
        background: #fff;
    }

    .inside-header {
        padding-block: 8px;
    }

    .inside-footer-widgets {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .footer-widget-1 {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    .grid-3,
    .grid-4,
    .grid-2 {
        grid-template-columns: 1fr;
    }

    .section {
        padding: var(--space-lg) 0;
    }

    .site-header .header-image {
        width: 120px;
    }

    .inside-footer-widgets>div:not(:last-child) {
        margin-bottom: 0px;
    }
}

@media (max-width: 480px) {
    .inside-footer-widgets {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    .footer-widget-1 {
        grid-column: auto;
    }

    .gb-element-7a35d1e3 {
        max-width: 120px;
    }

    .footer-widgets .widget {
        margin-bottom: 12px;
    }
}