/*
Theme Name: Trionyx Core
Author: Trionyx
test.trionyx.ph
Style v18
Version: 18
*/

/* ========================================
   GLOBAL DESIGN SYSTEM
======================================== */

:root {

    --primary-bg: #0f2741;
    --headline: #0f2741;
    --text: #475569;
    --white: #ffffff;

    --header-cta-width: 200px;

}


/* ========================================
   GLOBAL RESET
======================================== */

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


/* ========================================
   TYPOGRAPHY
======================================== */

h1,
h2,
h3 {

    font-family: 'Lato', sans-serif;
    color: var(--headline);

}


h4,
h5,
h6 {

    font-family: 'Allerta', sans-serif;
    color: var(--headline);

}


p,
li,
a {

    font-family: 'Aleo', serif;
    color: var(--text);

}


/* ========================================
   HEADER
======================================== */

.site-header {

    background: #0f2741;
    padding: 20px 0;

}

.header-container {

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.site-logo a {

    color: #ffffff;
    font-size: 28px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;

}

.site-logo img {

    max-height: 60px;
    width: auto;

}

.header-cta .cta-button,
.header-cta input[type="search"],
.header-cta button {

    width: var(--header-cta-width);

}

.cta-button {

    font-size: 14px;
    background: #1d5fa8;
    color: #ffffff;
    padding: 12px;
    border-radius: 6px;
    font-family: 'Lato', sans-serif;
    transition: 0.3s ease;

}

.cta-button:hover {

    opacity: 0.9;

}

.header-cta {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

}

.header-cta .cta-button {

    text-align: center;

}

.header-cta form {

    display: flex;

    flex-direction: column;

    gap: 15px;

}

.header-cta input[type="search"] {

    padding: 12px;

}

.header-cta button {

    color: #fff;
    
    background: #1d5fa8;

    border: none;

    padding: 12px;

    border-radius: 6px;

    cursor: pointer;

}


/* ========================================
   NAVIGATION
======================================== */

.nav-menu {

    display: flex;
    gap: 30px;
    list-style: none;

}


.nav-menu li a {

    color: #0f2741;
    font-family: 'Aleo', serif;
    transition: 0.3s ease;

}


.nav-menu li a:hover {

    opacity: 0.8;

}


/* ========================================
   BUTTONS
======================================== */

.primary-button {

    background: #104e90;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 6px;
    display: inline-block;

}


.secondary-button {

    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 6px;
    display: inline-block;

}


/* ========================================
   SMOOTH SCROLLING
======================================== */

html {

    scroll-behavior: smooth;

}


/* ========================================
   HOME HERO SECTION
======================================== */

.home-hero-section {

    background: #f8fafc;

    padding: 60px 60px;

}

.home-hero-title {

    font-family: 'Lato', sans-serif;
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    color: #0f2741;

    padding-bottom: 30px;
    
    white-space: nowrap;
}

.home-hero-subtitle {

    font-family: 'Lato', sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;

    color: #0f2741;
    
    padding-top: 25px;
    padding-bottom: 40px;

}

.home-hero-container{

    width: 92%;
    
    max-width: 1600px;

    margin: 0 auto;

    display:flex;

    background: #ebf4ff;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    min-height: 600px;
}

.home-hero-content{

    flex:0 0 46%;
    
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top: 25px;
    padding-left: 40px;

}


.home-hero-description {

    font-family: 'Aleo', serif;

    font-size: 22px;
    
    text-align: justify;

    line-height: 1.7;

    color: #104e90;
    padding-top: 25px;
    max-width: 620px;

}

.home-hero-pillars {

    display: flex;

    flex-wrap: wrap;

    gap: 28px;

    margin: 40px 0;

    margin-bottom: 50px;

    font-family: 'Lato', sans-serif;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: .5px;

    color: #0f2741;

}

.home-hero-pillars span {

    display: inline-flex;

    align-items: center;

    gap: 8px;

}

.home-hero-buttons {
    text-align: center;
    padding-top: 25px;
}

.home-hero-image-container{

    flex:0 0 52%; 

    display:flex;

    justify-content:center;

    align-items:center;

}

.home-hero-image{

    width:100%;

    max-width:900px;

    height:auto;

}


/*==================================================
SECTION 2 - DATA IS MONEY
==================================================*/

.section-data-value {
    padding: 40px 20px;
    background: #f5f7fa;
}

.section-data-value .container {
    max-width: 1100px;
    margin: 0 auto;
}

.data-value-header {
    text-align: center;
    margin-bottom: 60px;
}

.data-value-header h2 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0f2b46;
    margin-bottom: 15px;
}

.data-value-header .subtitle {
    font-size: 1.6rem;
    color: #666;
    font-weight: 300;
}

.data-grid {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    max-width: 850px;
    margin: 0 auto 70px;

}

.data-column h3 {

    text-align: center;
    margin-bottom: 25px;

    font-size: 1.4rem;
    color: #0f2b46;

}

.data-column ul {

    list-style: none;
    padding: 0;
    margin: 0;

}

.data-column li {

    padding: 12px 0;

    display: flex;
    align-items: center;

    gap: 14px;

    font-size: 1.05rem;

    color: #555;

    border-bottom: 1px solid #f1f1f1;

}

.data-column i {

    width: 22px;
    color: #1f66d1;

}

.data-message {

    text-align: center;
    max-width: 700px;
    margin: auto;

}

.story {

    font-size: 1.5rem;
    line-height: 1.8;
    color: #333;

    margin-bottom: 45px;

}

.worth {

    line-height: 2;

    margin-bottom: 45px;

}

.worth span {

    color: #666;
    font-size: 1.2rem;

}

.worth strong {

    display: block;

    margin-top: 10px;

    font-size: 2rem;

    color: #0056b3;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1px;

}

.data-actions {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    color: #0f2b46;

    font-size: 1rem;

}

/* Mobile */

@media (max-width:768px) {

    .data-value-header h2 {

        font-size: 2rem;
        line-height: 1.3;

    }

    .data-value-header .subtitle {

        font-size: 1.2rem;

    }

    .data-grid {

        grid-template-columns: 1fr;
        gap: 40px;

    }

    .story {

        font-size: 1.2rem;

    }

    .worth strong {

        font-size: 1.5rem;

    }

}

/*======================================================
SECTION 3 - SOLUTIONS
======================================================*/

.home-solutions{

    padding:40px 20px;
    background:#f8fafc;

}

.home-solutions .container{

    max-width:1200px;
    margin:auto;

}

/* Header */

.solutions-header{

    text-align:center;
    margin-bottom:70px;

}

.solutions-header h2{

    font-size:3rem;
    font-weight:800;
    text-transform:uppercase;
    color:#0d2b52;

    margin-bottom:20px;

}

.solutions-subtitle{

    font-size:2rem;
    font-style:italic;
    font-weight:300;

    color:#666;

    margin-bottom:25px;

}

.solutions-intro{

    max-width:700px;
    margin:auto;

    font-size:1.15rem;
    line-height:1.8;

    color:#666;

}

/* Grid */

.solutions-grid{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:30px;

}

/* Card */

.solution-card{

    background:#fff;

    border-radius:14px;

    padding:45px 30px;

    text-align:center;

    text-decoration:none;

    color:inherit;

    transition:.25s;

    border:1px solid #ececec;

    box-shadow:
    0 3px 15px rgba(0,0,0,.04);

}

.solution-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}

/* Icon */

.solution-icon{

    font-size:3rem;

    margin-bottom:25px;

}

/* Title */

.solution-card h3{

    font-size:1.7rem;

    color:#0d2b52;

    margin-bottom:20px;

}

/* Description */

.solution-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:35px;

    font-size:1rem;

}

/* Link */

.solution-link{

    color:#0057b8;

    font-weight:700;

    letter-spacing:.3px;

}

/* Mobile */

@media(max-width:1000px){

    .solutions-grid{

        grid-template-columns:
        repeat(2,1fr);

    }

}

@media(max-width:768px){

    .home-solutions{

        padding:70px 20px;

    }

    .solutions-header h2{

        font-size:2rem;

    }

    .solutions-subtitle{

        font-size:1.4rem;

    }

    .solutions-grid{

        grid-template-columns:1fr;

    }

}


/*======================================================
SECTION 4 - WHY TRIONYX
======================================================*/

.home-why{

    padding:40px 20px;

    background: #f5f7fa;

}

.home-why .container{

    max-width:900px;

    margin:auto;

}

.why-content{

    text-align:center;

}

.why-title{

    font-size:3rem;

    font-weight:800;

    text-transform:uppercase;

    color:#0d2b52;

    margin-bottom:20px;

}

.why-subtitle{

    max-width:650px;

    margin:0 auto 60px;

    font-size:1.25rem;

    line-height:1.8;

    color:#666;

}

.why-list{

    list-style:none;

    padding:0;

    margin:0 auto 70px;

    max-width:550px;

}

.why-list li{

    padding:14px 0;

    font-size:1.15rem;

    color:#333;

    border-bottom:1px solid #ececec;

}

.why-list li:last-child{

    border-bottom:none;

}

.why-highlight{

    display:inline-block;

    padding:18px 40px;

    border-top:2px solid #d9d9d9;

    border-bottom:2px solid #d9d9d9;

    font-size:2rem;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#0056b3;

}

/* Mobile */

@media (max-width:768px){

    .home-why{

        padding:70px 20px;

    }

    .why-title{

        font-size:2rem;

    }

    .why-subtitle{

        font-size:1.1rem;

    }

    .why-list li{

        font-size:1rem;

    }

    .why-highlight{

        font-size:1.3rem;

        padding:15px 20px;

    }

}


/* ========================================
   ARTICLE HERO
======================================== */

.article-hero {
    margin-bottom: 30px;
}

.article-hero-series {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 14px;

    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;

    color: #005baa;
    background: #eef6ff;

    border-radius: 20px;
}

.article-hero-title {
    font-size: 2.2rem;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 16px;
}


.article-hero-summary {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    max-width: 720px;
    margin-bottom: 18px;
}

.article-hero-meta {
    font-size: 12px;
    color: #777;
    line-height: 1.5;
    margin-bottom: 24px;
}

.article-hero-image {
    margin-bottom: 30px;
}

.article-hero-image img {
    width: 100%;
    height: auto;

    border-radius: 8px;

    display: block;
}

/* ========================================
   SERVICES
======================================== */

.services-section {

    padding: 100px 0;

}


.section-title {

    font-size:3rem;
    text-align: center;
    margin-bottom: 60px;

}


.services-grid {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;

}


.service-card {

    background: #ffffff;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

}


.service-card h3 {

    margin-bottom: 20px;

}


/* ========================================
   ABOUT
======================================== */

.about-section {

    background: #f5f7fa;
    padding: 100px 0;
    text-align: center;

}


.about-content {

    max-width: 800px;
    margin: auto;

}


.about-content h2 {

    margin-bottom: 20px;

}


.about-content p {

    margin-bottom: 40px;

}


/* ========================================
   BLOG
======================================== */

.blog-section {

    padding: 40px 0;
    background:#f8fafc;

}

.blog-grid {

    display: grid;

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

    gap: 30px;

}

.blog-card {

    background: #ffffff;

    padding: 30px;

    border: 1px solid #eee;

    border-radius: 10px;

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

}

.blog-card img {

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    height: auto;

    margin-bottom: 15px;

}

.blog-card h2 {

    margin-bottom: 10px;

}

.blog-card h3 {

    margin-bottom: 20px;

}

.blog-date {

    color: #777;
    font-size: 8px;
    margin-bottom: 15px;

}

.read-more {

    display: inline-block;

    margin-top: 10px;

    font-weight: bold;

}

.series-label {
    display: inline-block;
    margin-bottom: 12px;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    position: relative;
    padding-left: 18px;

    padding: 8px 16px;
    background: #104e90;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 4px;
}

.single-post .entry-title {
    margin-top: 0;
}

.truth-label {

    color: #ffffff;

}

.aware-label {

    color: #f59e0b;

}

/* ========================================
   TABLE OF CONTENTS
======================================== */

.table-of-contents {
    background: #f8f9fa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 20px;
    margin: 30px 0;
}

.table-of-contents h2 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
}

.table-of-contents ul {
    margin: 0;
    padding-left: 20px;
}

.table-of-contents li {
    margin: 8px 0;
}

.table-of-contents a {
    text-decoration: none;
}

.table-of-contents a:hover {
    text-decoration: underline;
}


/* ========================================
   POST NAVIGATION
======================================== */

.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 40px 0;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.post-navigation div {
    flex: 1;
}

.nav-next {
    text-align: right;
}

.post-navigation a {
    text-decoration: none;
    font-weight: 500;
}

.post-navigation a:hover {
    text-decoration: underline;
}

/* ========================================
   PAGE
======================================== */

.page-section {

    padding: 100px 0;

}


.page-title {

    font-size: 44px;
    margin-bottom: 20px;
    text-align: center;

}

.page-date {

    color: #777;
    font-size: 12px;
    text-align: center;
    margin-bottom: 15px;

}

.page-content {

    max-width: 900px;
    margin: auto;
    line-height: 1.8;

}


/* ========================================
   SINGLE PAGE
======================================== */

.single-blog-page {

    padding: 80px 0;

}

.blog-article {

    max-width: 900px;

    margin: 0 auto;

}

.blog-category {

    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #104e90;

}

.blog-title {

    line-height: 1.15;
    font-size: 44px;
    margin-bottom: 15px;

}

.blog-meta {

    margin-bottom: 25px;

    color: #777;

}

.blog-featured-image {

    margin-bottom: 30px;

}

.blog-featured-image img {

    width: 100%;

    height: auto;

}

.blog-meta {
    font-size: 12px;
}

.blog-content {

    line-height: 1.8;

}

.blog-content p {
    margin-top: 12px;
    margin-bottom: 18px;
    text-align: justify;
}

.blog-content p:last-child {

    margin-bottom: 0;

}

.blog-content h2,
.blog-content h3,
.blog-content h4 {

    margin-top: 16px;
    margin-bottom: 10px;

}

.blog-content h2 {
    font-size: 36px;
}

.blog-content h3 {
    font-size: 28px;
}

.blog-content h4 {
    font-size: 20px;
}

.blog-content ul {
    padding-left: 30px;
    line-height: 1.6;
    margin-top: 10px;
    margin-bottom: 10px;
}

.blog-content li {
    margin-bottom: 12px;
}

.blog-content {
    font-size: 20px;
}

.blog-content ol {

    margin-bottom: 1.5em;
    padding-left: 2em;

}

.blog-content img {

    max-width: 100%;

    height: auto;

}

.wp-block-paragraph {
    margin-bottom: 24px;
}

.blog-cta {

    padding: 60px 20px;

    text-align: center;

}

.verdict-badge {
    display: inline-block;
    margin: 15px 0;
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 700;
}

.verdict-truth {
    background: #dcfce7;
    color: #166534;
}

.verdict-delusion {
    background: #fee2e2;
    color: #991b1b;
}


/* ========================================
   RELATED POSTS
======================================== */

.related-posts {

    padding: 80px 0;

    background: #f5f7fa;

}

.related-posts h2 {

    text-align: center;

    margin-bottom: 40px;

}


/* ========================================
   CATEGORY
======================================== */

.category-page {

    padding: 80px 0;

}

.category-header {

    text-align: center;

    margin-bottom: 50px;

}

.category-description {

    max-width: 800px;

    margin: 20px auto 0;

}


/* ========================================
   SEARCH PAGE
======================================== */

.search-page {

    padding: 80px 0;

}

.search-header {

    text-align: center;

    margin-bottom: 50px;

}

.no-results {

    text-align: center;

    padding: 60px 20px;

}


/* ========================================
   ARCHIVE PAGE
======================================== */

.archive-page {

    padding: 80px 0;

}

.archive-header {

    text-align: center;

    margin-bottom: 50px;

}

.archive-header p {

    max-width: 700px;

    margin: 15px auto 0;

}

.archive-value-header {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #0f2b46;
    margin-bottom: 15px;
}


.blog-pagination {

    margin-top: 50px;

    text-align: center;

}


/* ========================================
   CONTACT
======================================== */

.contact-section {

    background: #0f2741;
    color: #ffffff;
    text-align: center;
    padding: 100px 0;

}

.contact-section h2 {

    color: #ffffff;
    margin-bottom: 20px;

}

.contact-section p {

    color: #ffffff;
    margin-bottom: 40px;

}

.contact-details-section {

    padding: 80px 0;
    background: #f5f7fa;

}


.contact-details-grid {

    display: grid;
    grid-template-columns: 40% 60%;
    gap: 40px;
    align-items: stretch;

}

.contact-details {
    
    background: #ffffff;
    padding: 35px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);

}

.contact-details h3 {
    margin-top: 20px;
    margin-bottom: 8px;

}

.contact-details p {
    margin-bottom: 15px;
}

.contact-map {

    height: 100%;

}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 450px;
    border: 0;
    border-radius: 10px;

}

/* Mobile */
@media (max-width: 768px) {

    .contact-details-grid {

        grid-template-columns: 1fr;

    }

}

/* ========================================
   CONTACT FORM
======================================== */

.contact-form {

    max-width: 900px;
    margin: auto;

}


.form-grid {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;

}


.form-group {

    width: 100%;

}

.contact-form textarea {

    resize: vertical;
    margin-bottom: 20px;

}

.contact-form button {

    border: none;
    cursor: pointer;

}


/* ========================================
   CONTACT FORM FIELDS
======================================== */

.contact-form input:not([type="hidden"]),
.contact-form textarea {

    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 6px;
    font-family: 'Aleo', serif;
    font-size: 16px;

}

.contact-form select {

    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 6px;
    background: #ffffff;
    color: #000000;
    font-size: 16px;

}


/* ========================================
   FOOTER
======================================== */

.site-footer {

    background: #081a2d;
    color: #ffffff;
    padding-top: 80px;

}


.footer-container {

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding-bottom: 60px;

}


.footer-column h3,
.footer-column h4 {

    color: #ffffff;
    margin-bottom: 20px;

}


.footer-column p,
.footer-column li,
.footer-column a {

    color: rgba(255,255,255,0.8);
    line-height: 1.8;

}


.footer-column ul {

    list-style: none;

}


.footer-column a:hover {

    opacity: 0.8;

}


.footer-bottom {

    font-size: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
    text-align: center;

}


.footer-bottom p {

    color: rgba(255,255,255,0.7);

}


/* ========================================
   UTILITIES
======================================== */

/* HIDDEN INPUTS */

.contact-form input[type="hidden"] {

    display: none;

}

/* HONEYPOT FIELD */

.honeypot-field {

    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;

}

/* BODY */

body {

    background: var(--white);
    color: var(--text);
    font-family: 'Aleo', serif;
    line-height: 1.6;

}

/* LINKS */

a {

    text-decoration: none;

}

/* BLOG CONTENT LINKS */

.blog-content a {

    text-decoration: underline;

    font-weight: 600;

}

.blog-content a:hover {

    opacity: .85;

}

/* CONTAINER */

.container {

    width: 90%;
    max-width: 1200px;
    margin: auto;

}

/* COLORED BADGES */

.status-new {
    color: blue;
}

.status-won {
    color: green;
}

.status-lost {
    color: red;
}

/* SUCCESS - ERROR MESSAGE */

.success-message {

    background: #d4edda;
    color: #155724;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 6px;

}

.error-message {

    background: #f8d7da;
    color: #721c24;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 6px;

}

/* BACK TO TOP */

#back-to-top {

    position: fixed;

    bottom: 30px;
    right: 30px;

    width: 50px;
    height: 50px;

    background: #104e90;
    color: #ffffff;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    font-size: 24px;

    z-index: 999;

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

}

#back-to-top:hover {

    opacity: .9;

}


/* ========================================
   404 PAGE
======================================== */

.error-404-page{
    padding:120px 20px;
    text-align:center;
}

.error-404-content{
    max-width:700px;
    margin:0 auto;
}

.error-404-content h1{
    font-size:8rem;
    line-height:1;
    color:#104e90;
    margin-bottom:10px;
}

.error-404-content h2{
    font-size:2rem;
    color:#0f2741;
    margin-bottom:20px;
}

.error-404-content p{
    font-size:1.1rem;
    color:#5b6b7b;
    line-height:1.8;
    margin-bottom:40px;
}

.error-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}


/* ========================================
   RESPONSIVE
======================================== */

@media(max-width: 991px) {

    .form-grid {

        grid-template-columns: 1fr;

    }

    .services-grid,
    .blog-grid {

        grid-template-columns: 1fr;

    }

    .header-cta .cta-button,
    .header-cta input[type="search"],
    .header-cta button {

        width: 100%;

        max-width: 500px;

    }

    .home-hero-content h1 {

        font-size: 40px;

    }

    .home-hero-buttons {

        flex-direction: column;

    }

    .header-container {

        flex-direction: column;
        gap: 20px;

    }

    .contact-details-grid {

    grid-template-columns: 1fr;

    }

    .nav-menu {

        flex-direction: column;
        align-items: center;

    }

    .footer-container {

        grid-template-columns: 1fr;
        text-align: center;

    }

    @media (max-width:768px){

    .home-hero-container{

        flex-direction:column;

    }

    .home-hero-content{

        text-align:center;

    }

    .home-hero-image-container{

        order:-1;

    }
    
        .home-hero-image{

        display: none;

    }
    

}