/* FlyParatrike - Military/Vintage Style */
/* Based on paratrike.co design language */
:root{
 /* Primary Colors - Dark Clean Palette */
 --paper-color:#1c1917;
 --paper-light:#292524;
 --paper-dark:#0c0a09;
 --ink-color:#ffffff;
 --ink-light:#d4d4d4;
 --military-green:#4b5320;
 --faded-red:#8b0000;
 /* Amber Accents */
 --amber-50:#fffbeb;
 --amber-100:#fef3c7;
 --amber-200:#fde68a;
 --amber-400:#fbbf24;
 --amber-500:#f59e0b;
 --amber-600:#d97706;
 --amber-700:#b45309;
 --amber-800:#92400e;
 --amber-900:#78350f;
 /* Stone/Dark */
 --stone-300:#d4d4d4;
 --stone-400:#a8a29e;
 --stone-700:#444444;
 --stone-800:#292524;
 --stone-900:#1c1917;
 --stone-950:#0c0a09;
 /* Typography */
 --font-main:'Montserrat', sans-serif;
 /* Spacing */
 --container-width:1200px;
 --section-padding:5rem;
}
/* Reset & Base */
*, *::before, *::after{
 box-sizing:border-box;
 margin:0;
 padding:0;
}
html{
 scroll-behavior:smooth;
}
body{
 font-family:var(--font-main);
 background-color:#1c1917;
 color:#ffffff;
 line-height:1.6;
}
/* Typography */
h1, h2, h3, h4, h5, h6{
 font-family:var(--font-main);
 text-transform:uppercase;
 letter-spacing:0.05em;
 font-weight:800;
 line-height:1.2;
 color:#ffffff;
}
h1{font-size:clamp(2.5rem, 8vw, 5rem);}
h2{font-size:clamp(1.8rem, 5vw, 3rem);}
h3{font-size:clamp(1.2rem, 3vw, 1.5rem);}
.highlight{
 color:var(--amber-500);
}
/* Container */
.container{
 max-width:var(--container-width);
 margin:0 auto;
 padding:0 1.5rem;
}
/* Section */
.section{
 padding:var(--section-padding) 0;
}
.section-dark{
 background-color:#292524;
 color:#ffffff;
}
/* Light sections for contrast */
.section{
 background-color:#1c1917;
 color:#ffffff;
}
.section-header{
 text-align:center;
 margin-bottom:3rem;
 padding-top:1.5rem;
}
.section-tag{
 display:inline-block;
 background:var(--amber-500);
 color:var(--stone-900);
 padding:0.25rem 1rem;
 font-size:0.75rem;
 font-weight:700;
 letter-spacing:0.2em;
 margin-bottom:1rem;
}
/* Navigation */
.navbar{
 position:fixed;
 top:0;
 left:0;
 right:0;
 z-index:100;
 background:rgba(28, 25, 23, 0.95);
 backdrop-filter:blur(4px);
 border-bottom:2px solid var(--stone-800);
}
.nav-container{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:1rem 1.5rem;
}
.logo{
 display:flex;
 align-items:center;
 gap:0.5rem;
 text-decoration:none;
 color:#ffffff;
}
.logo-icon{
 font-size:1.5rem;
 color:#ffffff;
}
.logo-text{
 font-size:1.25rem;
 font-weight:800;
 letter-spacing:0.1em;
 color:#ffffff;
}
.nav-menu{
 display:flex;
 list-style:none;
 gap:2rem;
}
.nav-menu a{
 color:var(--stone-300);
 text-decoration:none;
 font-size:0.875rem;
 font-weight:600;
 letter-spacing:0.1em;
 text-transform:uppercase;
 transition:color 0.3s;
}
.nav-menu a:hover,
.nav-menu a.active{
 color:var(--amber-500);
}
.nav-toggle{
 display:none;
 flex-direction:column;
 gap:5px;
 background:rgba(245, 158, 11, 0.15);
 border:2px solid var(--amber-500);
 border-radius:6px;
 cursor:pointer;
 padding:8px 7px;
}
.nav-toggle span{
 display:block;
 width:26px;
 height:3px;
 background:var(--amber-500);
 border-radius:2px;
 transition:0.3s;
}
/* Stamp Badge */
.stamp-badge{
 display:inline-block;
 border:3px solid var(--amber-500);
 color:var(--amber-500);
 padding:0.5rem 1.5rem;
 font-size:0.875rem;
 font-weight:700;
 letter-spacing:0.2em;
 margin-bottom:1.5rem;
 transform:rotate(-2deg);
}
/* Hero Buttons */
.hero-buttons{
 display:flex;
 gap:1rem;
 justify-content:center;
 flex-wrap:wrap;
}
/* Buttons */
.btn{
 display:inline-block;
 padding:1rem 2rem;
 font-family:var(--font-main);
 font-size:0.875rem;
 font-weight:700;
 letter-spacing:0.1em;
 text-transform:uppercase;
 text-decoration:none;
 border:2px solid;
 cursor:pointer;
 transition:all 0.3s;
}
.btn-primary{
 background:var(--amber-600);
 border-color:var(--amber-600);
 color:#ffffff;
 box-shadow:0 4px var(--amber-800);
}
.btn-primary:hover{
 background:var(--amber-700);
 transform:translateY(2px);
 box-shadow:0 2px var(--amber-800);
}
.btn-secondary{
 background:var(--stone-800);
 border-color:var(--stone-700);
 color:#ffffff;
 box-shadow:0 4px var(--stone-950);
}
.btn-secondary:hover{
 background:var(--stone-700);
 transform:translateY(2px);
 box-shadow:0 2px var(--stone-950);
}
.btn-outline{
 background:transparent;
 border-color:var(--amber-500);
 color:var(--amber-500);
}
.btn-outline:hover{
 background:var(--amber-500);
 color:var(--stone-900);
}
.btn-large{
 padding:1.25rem 2.5rem;
 font-size:1rem;
}
/* Testimonials */
.testimonials-section{
 padding:5rem 0;
}
.testimonials-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:2rem;
}
.testimonial-card{
 background:#292524;
 border:2px solid #444;
 padding:2rem;
 position:relative;
}
.testimonial-card::before{
 content:'"';
 font-size:4rem;
 color:var(--amber-200);
 position:absolute;
 top:10px;
 left:20px;
 line-height:1;
}
.testimonial-content{
 position:relative;
 z-index:1;
 margin-bottom:1.5rem;
}
.testimonial-content p{
 font-style:italic;
 color:#d4d4d4;
}
.testimonial-author{
 display:flex;
 flex-direction:column;
}
.author-name{
 font-weight:700;
 color:#ffffff;
}
.author-info{
 font-size:0.875rem;
 color:var(--amber-600);
}
/* CTA Section */
.cta{
 background:
 linear-gradient(rgba(28, 25, 23, 0.9), rgba(28, 25, 23, 0.95)),
 url('https://images.unsplash.com/photo-1503034823782-2f26eb0f2a35?w=1920') center/cover;
 color:#ffffff;
 text-align:center;
}
.cta-content h2{
 margin-bottom:1rem;
}
.cta-content p{
 max-width:600px;
 margin:0 auto 2rem;
 color:var(--stone-300);
}
.cta-buttons{
 display:flex;
 gap:1rem;
 justify-content:center;
 flex-wrap:wrap;
}
/* Footer */
.footer{
 background:#0c0a09;
 color:#ffffff;
 padding:4rem 0 2rem;
}
.footer-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 gap:2rem;
 margin-bottom:2rem;
}
.footer-brand .logo{
 margin-bottom:1rem;
}
.footer-brand .logo img{
 height:60px !important;
}
.footer-brand p{
 font-size:0.875rem;
 color:#ffffff;
}
.footer h4{
 color:var(--amber-500);
 font-size:0.875rem;
 letter-spacing:0.1em;
 margin-bottom:1rem;
}
.footer ul{
 list-style:none;
}
.footer ul li{
 margin-bottom:0.5rem;
 color:#ffffff;
}
.footer a{
 color:#ffffff;
 text-decoration:none;
 transition:color 0.3s;
}
.footer a:hover{
 color:var(--amber-400);
}
.social-links{
 display:flex;
 gap:1rem;
}
.social-links a{
 display:flex;
 align-items:center;
 justify-content:center;
 width:42px;
 height:42px;
 background:transparent;
 border:1px solid #444;
 border-radius:8px;
 color:#888;
 transition:all 0.3s;
}
.social-links a:hover{
 background:rgba(255,255,255,0.05);
 border-color:#f59e0b;
 color:#f59e0b;
}
.footer-bottom{
 border-top:1px solid #444;
 padding-top:2rem;
 text-align:center;
 font-size:0.875rem;
 color:#ffffff;
}
/* ===== GALLERY PAGE ===== */
.gallery-hero{
 min-height:35vh !important;
}
.contact-hero{
 min-height:35vh !important;
}
.courses-hero-small{
 min-height:35vh !important;
}
.gallery-filters{
 display:flex;
 justify-content:center;
 gap:1rem;
 margin-bottom:2rem;
 flex-wrap:wrap;
}
.filter-btn{
 background:transparent;
 border:2px solid var(--stone-700);
 color:var(--ink-light);
 padding:0.5rem 1.5rem;
 font-family:var(--font-main);
 font-size:0.875rem;
 font-weight:700;
 letter-spacing:0.1em;
 cursor:pointer;
 transition:all 0.3s;
}
.filter-btn:hover,
.filter-btn.active{
 background:var(--amber-500);
 border-color:var(--amber-500);
 color:var(--stone-900);
}
.gallery-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
 gap:1.5rem;
}
.gallery-item{
 aspect-ratio:4/3;
 overflow:hidden;
 cursor:pointer;
 transition:transform 0.3s;
}
.gallery-item:hover{
 transform:scale(1.02);
}
.gallery-placeholder{
 width:100%;
 height:100%;
 background:var(--paper-light);
 border:2px solid var(--stone-700);
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
}
.gallery-placeholder span{
 font-size:3rem;
 margin-bottom:0.5rem;
}
.gallery-placeholder p{
 font-weight:600;
 color:var(--ink-light);
}
.video-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:1.5rem;
 margin-bottom:2rem;
}
.video-placeholder{
 aspect-ratio:16/9;
 background:var(--stone-800);
 border:2px solid var(--stone-700);
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 cursor:pointer;
 transition:border-color 0.3s;
}
.video-placeholder:hover{
 border-color:var(--amber-500);
}
.video-placeholder span{
 font-size:3rem;
 margin-bottom:0.5rem;
}
.video-placeholder p{
 color:var(--stone-400);
}
.video-embed{
 position:relative;
 overflow:hidden;
}
.video-embed iframe{
 width:100%;
 aspect-ratio:16/9;
 border-radius:8px;
 border:2px solid var(--stone-700);
 transition:border-color 0.3s;
}
.video-embed iframe:hover{
 border-color:var(--amber-500);
}
.video-embed p{
 color:var(--stone-400);
 text-align:center;
 margin-top:0.5rem;
 font-size:0.9rem;
}
.video-cta{
 text-align:center;
}
.video-cta p{
 color:var(--stone-400);
 margin-bottom:1rem;
}
.instagram-cta{
 text-align:center;
 padding:4rem 2rem;
 background:var(--paper-light);
 border:2px dashed var(--stone-700);
}
.instagram-cta p{
 font-size:1.25rem;
 margin-bottom:1.5rem;
 color:var(--ink-light);
}
/* ===== CONTACT PAGE ===== */
.contact-grid{
 display:grid;
 grid-template-columns:1.5fr 1fr;
 gap:3rem;
}
.contact-form-wrapper h2{
 margin-top:0.5rem;
 margin-bottom:0.5rem;
}
.form-intro{
 color:var(--ink-light);
 margin-bottom:2rem;
}
.contact-form{
 background:#292524;
 border:2px solid #444;
 padding:2rem;
}
/* Forms */
.form-group{
 margin-bottom:1.5rem;
}
.form-group label{
 display:block;
 font-size:0.875rem;
 font-weight:600;
 letter-spacing:0.05em;
 text-transform:uppercase;
 margin-bottom:0.5rem;
 color:#d4d4d4;
}
.form-group input,
.form-group textarea,
.form-group select{
 width:100%;
 padding:1rem;
 font-family:var(--font-main);
 font-size:1rem;
 border:2px solid #444;
 background:#1c1917;
 color:#ffffff;
 transition:border-color 0.3s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
 outline:none;
 border-color:var(--amber-500);
}
.form-group textarea{
 min-height:150px;
 resize:vertical;
}
.contact-info{
 display:flex;
 flex-direction:column;
 gap:1.5rem;
}
.info-card{
 background:#292524;
 border:2px solid #444;
 padding:1.5rem;
}
.info-icon{
 font-size:1.5rem;
 margin-bottom:0.5rem;
}
.info-card h3{
 color:#ffffff;
 font-size:1rem;
 margin-bottom:0.5rem;
}
.info-card p{
 color:#d4d4d4;
 font-size:0.9rem;
 margin-bottom:0.5rem;
}
.info-small{
 font-size:0.8rem !important;
 color:var(--stone-400) !important;
}
.contact-link{
 color:var(--amber-500);
 font-weight:700;
 text-decoration:none;
 font-size:1.1rem;
}
.contact-link:hover{
 color:var(--amber-400);
 text-decoration:underline;
}
.social-links-col{
 display:flex;
 flex-direction:column;
 gap:0.5rem;
}
.social-links-col a{
 color:var(--ink-light);
 text-decoration:none;
 font-weight:600;
 transition:color 0.3s;
}
.social-links-col a:hover{
 color:var(--amber-500);
}
/* ===== RESPONSIVE ===== */
@media (max-width:768px){
 .nav-menu{
 position:fixed;
 top:60px;
 left:0;
 right:0;
 background:var(--stone-900);
 flex-direction:column;
 padding:2rem;
 gap:1rem;
 transform:translateY(-100%);
 opacity:0;
 visibility:hidden;
 transition:all 0.3s;
}
 .nav-menu.active{
 transform:translateY(0);
 opacity:1;
 visibility:visible;
}
 .nav-toggle{
 display:flex;
}
 .hero-buttons{
 flex-direction:column;
 align-items:center;
}
 .btn{
 width:100%;
 max-width:280px;
 text-align:center;
}
 .section{
 padding:3rem 0;
}
 .contact-grid{
 grid-template-columns:1fr;
}
 .gallery-hero,
 .contact-hero,
 .courses-hero-small{
 min-height:25vh !important;
}
}
/* ========================================
 FAQ Section
 ======================================== */
.faq-section{
 background:var(--paper-light);
}
.faq-list{
 max-width:800px;
 margin:0 auto;
}
.faq-item{
 border-bottom:1px solid var(--stone-700);
 overflow:hidden;
}
.faq-item:first-child{
 border-top:1px solid var(--stone-700);
}
.faq-question{
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:1.25rem 0;
 cursor:pointer;
 font-family:var(--font-main);
 font-weight:700;
 font-size:1rem;
 color:#ffffff;
 list-style:none;
 user-select:none;
 transition:color 0.2s;
}
.faq-question::-webkit-details-marker{
 display:none;
}
.faq-question::after{
 content:'+';
 font-size:1.5rem;
 font-weight:700;
 color:var(--amber-500);
 margin-left:1rem;
 flex-shrink:0;
 transition:transform 0.3s;
}
.faq-item[open] .faq-question::after{
 content:'−';
 transform:rotate(0deg);
}
.faq-question:hover{
 color:var(--amber-500);
}
.faq-answer{
 padding:0 0 1.25rem 0;
 color:var(--ink-light);
 line-height:1.8;
 font-size:0.95rem;
}
.faq-answer p{
 margin:0;
}
/* ========================================
 Mobile CTA Button
 ======================================== */
.mobile-cta-btn{
 display:none;
}
@media (max-width:767px){
 .mobile-cta-btn{
 display:block;
 position:fixed;
 bottom:0;
 left:0;
 right:0;
 width:100%;
 background:var(--amber-500);
 color:#ffffff;
 text-align:center;
 padding:1rem;
 font-family:var(--font-main);
 font-weight:800;
 font-size:1.1rem;
 letter-spacing:0.1em;
 text-decoration:none;
 text-transform:uppercase;
 z-index:9999;
 box-shadow:0 -4px 20px rgba(0,0,0,0.4);
 transition:background 0.2s;
}
 .mobile-cta-btn:hover,
 .mobile-cta-btn:active{
 background:var(--amber-600);
}
 /* Add padding to body so footer isn't hidden behind CTA */
 body{
 padding-bottom:60px;
}
}
/* WhatsApp Floating Button */
.whatsapp-float{
 position:fixed;
 bottom:24px;
 right:24px;
 width:60px;
 height:60px;
 background:#25D366;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 4px 12px rgba(37, 211, 102, 0.4);
 z-index:9998;
 transition:transform 0.3s, box-shadow 0.3s;
 text-decoration:none;
}
.whatsapp-float:hover{
 transform:scale(1.1);
 box-shadow:0 6px 20px rgba(37, 211, 102, 0.5);
}
.whatsapp-float svg{width:32px;height:32px;fill:white;}
@media (max-width:768px){
 .whatsapp-float{bottom:80px;right:16px;width:54px;height:54px;}
 .whatsapp-float svg{width:28px;height:28px;}
}