/*!
Theme Name: Gecon
Theme URI: http://underscores.me/
Author: openxcode
Author URI: https://openxcode.com/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gecon
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Gecon is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
# Custom Theme Styles (Extracted from index.html)
--------------------------------------------------------------*/
  :root {
            --brand: #1d3960;
        }
        body {
            font-family: 'Space Grotesk', sans-serif;
            background-color: #eff9ff;
            overflow-x: hidden;
        }
        h1, h2, h3 {
            font-family: 'Space Grotesk', sans-serif;
            text-transform: uppercase;
        }
        /* Diagonal clip-path */
        .bg-hero-diagonal {
            clip-path: polygon(0 0, 100% 0, 100% 55%, 0 85%);
        }
        /* Architectural cuts */
        .image-diagonal-cut {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 85%);
        }
        .image-cut-br {
            clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
        }
        .badge-cut-bl, .card-image-cut {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 0 87%);
        }

          .badge-cut-bl1 {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%, 0 82%);
        }   
        .bg-cut-tr {
            clip-path: polygon(0 0, 86% 0, 100% 11%, 100% 100%, 0 100%);
        }

        .bg-cut-tr1 {
             clip-path: polygon(0 0, 94% 0, 100% 22%, 100% 100%, 0 100%);
        }

        .card-cut-br {
            clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
        }

        .video-cut-bl {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 88%);
        }
        .image-cut-tl {
            clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 15%);
        }
        .cta-cut-bl {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 85%);
        }

        /* Product Details Specific Cuts */
        .product-hero-cut {
            clip-path: polygon(0 0, 94% 0, 100% 15%, 100% 100%, 0 100%);
        }
        @media (max-width: 768px) {
            .product-hero-cut {
                clip-path: polygon(0 0, 90% 0, 100% 8%, 100% 100%, 0 100%);
            }
        }

        .product-sidebar-cut {
            clip-path: polygon(0 0, 75% 0, 100% 25%, 100% 100%, 0 100%);
        }
        @media (max-width: 768px) {
            .product-sidebar-cut {
                clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 0 100%);
            }
        }

        .product-card-cut {
            clip-path: polygon(0 0, 100% 0, 100% 71%, 83% 100%, 0 100%);
        }
        @media (max-width: 768px) {
            .product-card-cut {
                clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
            }
        }
        .card-cut-tr {
            clip-path: polygon(0 0, 85% 0, 100% 15%, 100% 100%, 0 100%);
        }
        .footer-cut-tr {
            clip-path: polygon(0 0, 91% 0, 100% 152px, 100% 100%, 0 100%);
        }
        /* Force slider buttons to stay visible */
        .nav-prev, .nav-next {
            display: flex !important;
            opacity: 1 !important;
            visibility: visible !important;
            z-index: 100 !important;
        }
        /* Sticky Header Effects */
        #main-header.scrolled {
            background-color: #003466;
            backdrop-filter: blur(12px);
            padding-top: 0.85rem;
            padding-bottom: 0.85rem;
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        #main-header.scrolled #header-logo {
            height: 2.5rem;
        }

        /* Mobile nav drawer */
        #mobile-menu {
            transform: translateX(100%);
            transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), 
                        opacity 0.5s ease, 
                        visibility 0s linear 0.6s;
            visibility: hidden;
            opacity: 0;
            display: flex;
        }
        #mobile-menu.open {
            transform: translateX(0);
            visibility: visible;
            opacity: 1;
            transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), 
                        opacity 0.5s ease, 
                        visibility 0s linear 0s;
        }
        
        /* Mobile Link Stagger Base (Closing Delays) */
        .mobile-link {
            opacity: 0;
            transform: translateX(30px);
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }
        .mobile-link:nth-child(1) { transition-delay: 0.4s; }
        .mobile-link:nth-child(2) { transition-delay: 0.3s; }
        .mobile-link:nth-child(3) { transition-delay: 0.2s; }
        .mobile-link:nth-child(4) { transition-delay: 0.1s; }
        .mobile-link:nth-child(5) { transition-delay: 0s; }

        /* Mobile Link Stagger Open (Opening Delays) */
        #mobile-menu.open .mobile-link {
            opacity: 1;
            transform: translateX(0);
        }
        #mobile-menu.open .mobile-link:nth-child(1) { transition-delay: 0.2s; }
        #mobile-menu.open .mobile-link:nth-child(2) { transition-delay: 0.3s; }
        #mobile-menu.open .mobile-link:nth-child(3) { transition-delay: 0.4s; }
        #mobile-menu.open .mobile-link:nth-child(4) { transition-delay: 0.5s; }
        #mobile-menu.open .mobile-link:nth-child(5) { transition-delay: 0.6s; }

        /* Hamburger lines animation */
        #burger-btn.open span:nth-child(1) {
            transform: translateY(8.5px) rotate(45deg);
            background-color: #fff;
        }
        #burger-btn.open span:nth-child(2) {
            opacity: 0;
            transform: translateX(-10px);
        }
        #burger-btn.open span:nth-child(3) {
            transform: translateY(-8.5px) rotate(-45deg);
            background-color: #fff;
        }
        #burger-btn span {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }


        @media screen and (max-width:768px){
            .bg-hero-diagonal {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }
        }  
       


    
        .card-cut-br-small {
            clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
        }

        /*--------------------------------------------------------------
        # Hero & Mission Custom Styles
        --------------------------------------------------------------*/
        .site-hero {
            position: relative;
            background-color: #003466;
            padding-top: 3.5rem;
            padding-bottom: 8rem;
            margin-top: 1.25rem;
            overflow: hidden;
            z-index: 10;
        }

        @media (min-width: 768px) {
            .site-hero {
                padding-top: 5rem;
                padding-bottom: 10rem;
            }
        }

        @media (min-width: 1280px) {
            .site-hero {
                min-height: 550px;
                padding-bottom: 7rem;
            }
        }

        .hero-container {
            max-width: 1440px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            position: relative;
            z-index: 30;
        }

        @media (min-width: 768px) {
            .hero-container {
                padding-left: 3rem;
                padding-right: 3rem;
            }
        }

        .site-mission {
            position: relative;
            margin-top: -6rem;
            padding-bottom: 3rem;
            width: 100%;
            z-index: 30;
        }

        @media (min-width: 768px) {
            .site-mission {
                margin-top: -160px;
                padding-bottom: 6rem;
            }
        }

        @media (min-width: 1280px) {
            .site-mission {
                margin-top: -240px;
            }
        }

        .mission-text-col {
            padding-top: 5rem;
            padding-bottom: 3rem;
        }

        @media (min-width: 1024px) {
            .mission-text-col {
                width: 20%;
                padding-top: 140px;
                padding-right: 2.5rem;
            }
        }

        @media (min-width: 1280px) {
            .mission-text-col {
                width: 18%;
                padding-top: 160px;
            }
        }

        .mission-image-col {
            flex: 1;
            position: relative;
            z-index: 30;
        }

        @media (min-width: 1024px) {
            .mission-image-col {
                margin-left: auto;
                margin-right: -3rem;
            }
        }

        @media (min-width: 1280px) {
            .mission-image-col {
                margin-left: auto;
                margin-right: -6rem;
                max-width: 1000px;
            }
        }

        .hero-building-img-wrap {
            height: 280px;
            width: 100%;
            overflow: hidden;
        }

        @media (min-width: 640px) { .hero-building-img-wrap { height: 400px; } }
        @media (min-width: 768px) { .hero-building-img-wrap { height: 550px; } }
        @media (min-width: 1024px) { .hero-building-img-wrap { height: 650px; } }
        @media (min-width: 1280px) { .hero-building-img-wrap { height: 680px; } }


          .site-main {
            background-color: #f8fafd;
            background-image: linear-gradient(to right, rgba(0, 52, 102, 0.05) 1px, transparent 1px);
            background-size: 25% 100%;
        }

        .section-diagonal-cut {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 5% 100%, 0 76%);
        }

        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }

        .animate-marquee {
            animation: marquee 30s linear infinite;
        }

        .group:hover .animate-marquee {
            animation-play-state: paused;
        }

        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -17px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: white;
        }

        .tab-btn.active {
            opacity: 1;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

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

        .animate-fadeIn {
            animation: fadeIn 0.5s ease-out forwards;
        }

/* Service detail: all process steps full-width below image + description */
.service-detail-flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service-detail-flow__step {
  display: flex;
}

.service-detail-flow__process {
  width: 100%;
  clear: both;
}
   
/* ========================================
   Base
======================================== */
.clip {
  /* Default fallback (bottom-right cut) */
  --cut-x: 40px !important;
  --cut-y: 40px !important;

  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cut-y)),
    calc(100% - var(--cut-x)) 100%,
    0 100%
  ) !important;
}


/* ========================================
   Bottom Right (BR)
======================================== */
.clip-br-sm {
  --cut-x: 20px !important;
  --cut-y: 20px !important;
}

.clip-br-md {
  --cut-x: 40px !important;
  --cut-y: 40px !important;
}


/* ========================================
   Top Right (TR)
======================================== */
.clip-tr-md {
  clip-path: polygon(
    0 0,
    calc(100% - 40px) 0,
    100% 40px,
    100% 100%,
    0 100%
  ) !important;
}


/* ========================================
   Bottom Left (BL)
======================================== */
.clip-bl-md {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    40px 100%,
    0 calc(100% - 40px)
  ) !important;
}


/* ========================================
   Top Left (TL)
======================================== */


/* ========================================
   Navigation & Menus
======================================== */

/* Desktop Sub-menu styling */
#desktop-navigation .group:hover > div {
    display: block;
}

/* Ensure sub-menu items are accessible */
.sub-menu-item a {
    display: block;
    width: 100%;
}

/* Active menu item dot animation */
@keyframes dotFadeIn {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}

.current-menu-item > a span {
    animation: dotFadeIn 0.3s ease-out forwards;
}

/*--------------------------------------------------------------
# Contact Form 7 Submit Button
--------------------------------------------------------------*/
.contact-submit-btn {
    background-color: #003466 !important;
    color: #ffffff !important;
    padding: 1rem 3rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 0.375rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    font-size: 0.875rem !important;
    display: inline-block !important;
    font-family: 'Space Grotesk', sans-serif !important;
}

.contact-submit-btn:hover {
    background-color: #2a4e7a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.contact-submit-btn:active {
    transform: translateY(0) !important;
}

/* Ensure CF7 alerts don't break layout */
.wpcf7-response-output {
    border-radius: 0.375rem !important;
    margin: 2rem 0 0 !important;
    padding: 1rem !important;
    font-size: 0.875rem !important;
    border-width: 2px !important;
    font-weight: 600 !important;
}

/*--------------------------------------------------------------
# Sidebar Contact Form Styles
--------------------------------------------------------------*/
.cf7-sidebar-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 1.25rem;
}

.cf7-sidebar-form label {
    display: block;
    color: #94a3b8;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.cf7-sidebar-form input:not([type="submit"]),
.cf7-sidebar-form textarea {
    width: 100% !important;
    background-color: #f8fafc !important;
    border: none !important;
    padding: 1rem !important;
    font-size: 0.875rem !important;
    outline: none !important;
    transition: all 0.3s ease !important;
    border-radius: 0.25rem !important;
}

.cf7-sidebar-form input:focus,
.cf7-sidebar-form textarea:focus {
    box-shadow: 0 0 0 2px rgba(0, 52, 102, 0.1) !important;
}

.cf7-sidebar-form .contact-submit-btn {
    width: 100% !important;
    margin-top: 1rem !important;
}