/* =========================================
   HDII DRONE SHOW WEBSITE V3
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

:root{

    --bg1:#020615;
    --bg2:#081a34;
    --bg3:#101f47;

    --blue:#5bc0ff;
    --purple:#a473ff;
    --pink:#ff4cc9;
    --cyan:#3bf5d7;

    --white:#f5faff;
    --text:#cdd8ff;
    --muted:#9db4d8;
    --card:rgba(7,14,36,.72);
    --border:rgba(255,255,255,.12);
}

/* =========================================
   BODY
========================================= */

body{

    background:
    radial-gradient(circle at top left, rgba(91,192,255,.12), transparent 18%),
    radial-gradient(circle at bottom right, rgba(255,76,201,.12), transparent 18%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 100%);

    color:var(--white);

    overflow-x:hidden;

    min-height:100vh;

    position:relative;

    background-attachment:fixed;
}

img,
picture,
video,
iframe{
    max-width:100%;
    height:auto;
    display:block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
a{
    overflow-wrap:break-word;
    word-wrap:break-word;
}

*{
    box-sizing:border-box;
}

.hero-content,
.about-container,
.gallery-grid,
.video-grid,
.service-grid,
.formation-grid,
.stats,
.footer-grid{
    width:min(100%,1200px);
    margin-inline:auto;
}

/* =========================================
   ANIMATED BACKGROUND
========================================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at 10% 20%, rgba(91,192,255,.18), transparent 18%),
    radial-gradient(circle at 85% 18%, rgba(255,76,201,.16), transparent 14%),
    radial-gradient(circle at 50% 80%, rgba(59,245,215,.12), transparent 14%),
    radial-gradient(circle at 30% 55%, rgba(255,255,255,.08), transparent 12%),
    radial-gradient(circle at 70% 45%, rgba(255,255,255,.08), transparent 12%);

    filter:blur(0.5px);

    z-index:-1;
}

/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#111D35;
}

::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
        var(--blue),
        var(--purple)
    );

    border-radius:20px;
}

/* =========================================
   NAVBAR
========================================= */

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    padding:5px 3%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:1000;

    background:rgba(3,11,31,.72);

    backdrop-filter:blur(24px);

    border-bottom:1px solid rgba(255,255,255,.08);

    box-shadow:0 18px 40px rgba(0,0,0,.24);
}

.logo{

    display:flex;

    align-items:center;

    text-decoration:none;
    
    cursor:pointer;
}

.logo img{
    
    width:140px;
    height: 70px;
    
    padding:7px;
    object-fit:contain;

    border-radius:7px;

    transition:.4s;
}

.logo:hover img{

    transform:scale(1.05);

    box-shadow:
    0 0 16px rgba(91,192,255,.45),
    0 0 32px rgba(255,76,201,.28);
}

.nav-links{

    display:flex;

    align-items:center;

    gap:28px;

    margin:0;

    padding:0;

    list-style:none;
}

.nav-links li{

    list-style:none;
}

.nav-links a{

    color:var(--white);

    text-decoration:none;

    font-weight:600;

    font-size:.95rem;

    letter-spacing:.05em;

    text-transform:uppercase;

    transition:.25s ease-in-out;
}

.nav-links a:hover{

    color:var(--cyan);

    text-shadow:0 0 18px rgba(59,245,215,.45);
}

.nav-links a.active{

    color:var(--cyan);

    position:relative;
}

.nav-links a.active::after{

    content:'';

    position:absolute;

    inset:auto 0 0;

    height:3px;

    width:100%;

    background:linear-gradient(90deg, var(--cyan), var(--blue));

    border-radius:999px;
}

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

.hero{

    position:relative;
    
    min-height:46vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;
    align-content: center;
}

.hero-bg{

    position:absolute;

    inset:0;

    background-image:url('../images/gallery/BG1.png');

    background-size:cover;

    background-position:center;

    opacity:.6;

    filter:brightness(.65) saturate(1.15);
}

.hero-animation{

    position:absolute;

    inset:0;

    overflow:hidden;
}

.drone-dot{

    position:absolute;

    width:16px;

    height:16px;

    border-radius:50%;

    background:rgba(59,245,215,.9);

    box-shadow:0 0 18px rgba(59,245,215,.65), 0 0 40px rgba(59,245,215,.18);

    opacity:0;

    animation:droneFlight 12s ease-in-out infinite;
}

.drone-dot::after{

    content:'';

    position:absolute;

    inset:0;

    border-radius:50%;

    background:radial-gradient(circle, rgba(59,245,215,.34), transparent 55%);
}

.dot-1{top:22%; left:12%; animation-delay:0s;}

.dot-2{top:35%; right:18%; animation-delay:1.8s;}

.dot-3{bottom:28%; left:20%; animation-delay:3.7s;}

.dot-4{bottom:18%; right:22%; animation-delay:5.4s;}

@keyframes droneFlight{

    0%, 100%{opacity:0; transform:translate(0,0) scale(.75);}
    10%{opacity:1;}
    50%{opacity:.35; transform:translate(30px, -24px) scale(1.08);}
    80%{opacity:.1; transform:translate(-12px, 18px) scale(.9);}
}

.overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(180deg, rgba(2,6,21,.45), rgba(1,4,17,.88));
}

.hero-contentD{
    padding: 10px;
}

.hero-content{

    position:relative;

    z-index:0;

    width:min(100%,980px);
    max-width:980px;

    padding:10px 10px 10px;

    /* background:rgba(255, 255, 255, 0.05); */
    border:1px solid rgba(255,255,255,0.15);

    border-radius:32px;

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    box-shadow:
        0 8px 32px rgba(0,0,0,0.2);
}

.hero-tag{

    display:inline-block;

    padding:10px 18px;

    margin-bottom:28px;

    border-radius:999px;

    color:var(--cyan);

    background:rgba(59,245,215,.08);

    border:1px solid rgba(59,245,215,.22);

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    font-size:.85rem;
}

.hero-content h1{

    font-size:5rem;

    font-weight:900;

    line-height:1.05;

    margin-bottom:10px;

    color:transparent;

    background:linear-gradient(90deg, var(--cyan), var(--blue), var(--pink));

    background-size:200% auto;

    background-position:0% 50%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:glowText 12s ease-in-out infinite;
}

@keyframes glowText{

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

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

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

.hero-content p{

    color:var(--muted);

    font-size:1.35rem;

    margin-bottom:42px;

    line-height:1.9;
}

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

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;
}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(90deg, var(--cyan), var(--blue), var(--pink));

    color:var(--bg1);

    text-decoration:none;

    padding:16px 44px;

    border-radius:999px;

    font-weight:700;

    transition:.35s ease;

    box-shadow:0 15px 35px rgba(59,245,215,.2);
}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(59,245,215,.28);
}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border:2px solid rgba(91,192,255,.35);

    color:var(--white);

    text-decoration:none;

    padding:16px 44px;

    border-radius:999px;

    font-weight:700;

    transition:.35s ease;
}

.btn-secondary:hover{

    background:rgba(91,192,255,.16);

    color:var(--cyan);
}

/* =========================================
   SECTION TITLES
========================================= */

.services h2,
.gallery-preview h2,
.contact-home h2{

    text-align:center;

    margin-bottom:15px;

    font-size:3rem;

    background:
    linear-gradient(
        90deg,
        var(--cyan),
        var(--blue),
        var(--pink)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

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

.services{

    padding:30px 3%;
}

.service-grid2{

    display:grid;

    /* Fixed 3 columns: three items per row */
    grid-template-columns: repeat(3, 1fr);

    gap:30px;
}

.service-grid{

    display:grid;

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

    gap:30px;
}

.card{

    background:
    rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:25px;

    padding:15px;

    transition:.4s;
}

.card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 0 15px rgba(0,229,255,.4),

    0 0 30px rgba(160,32,240,.3);
}

.card h3{

    color:var(--blue);
    
    margin-bottom:15px;
}

.card p{

    color:var(--text);

    line-height:1.8;
}

/* =========================================
   STATS
========================================= */

.stats{

    padding:5px 0.5%;

    display:grid;

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

    gap:25px;
}

.stat-box{

    background:
    rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    border-radius:20px;

    padding:40px;

    text-align:center;
}

.stat-box h2{

    font-size:3rem;

    color:var(--blue);

    margin-bottom:10px;
}

.stat-box p{

    color:var(--text);
}

/* =========================================
   GALLERY
========================================= */

.gallery-preview{
    padding: 20px 3% 20px;
}

.gallery-grid{

    display:grid;

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

    gap:25px;
}

.gallery-grid img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:20px;

    transition:.4s;
}

.gallery-grid img:hover{

    transform:scale(1.05);

    box-shadow:
    0 0 15px var(--blue),
    0 0 25px var(--purple);
}

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

.contact-home{

    padding:30px 3%;

    text-align:center;
}

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

footer{

    background:rgba(8,17,32,.92);

    padding:12px 15px 12px 15px;

    text-align:left;

    margin-top:2px;
}

footer p{

    color:var(--text);

    line-height:1.8;
}

.footer-grid{

    display:grid;

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

    gap:24px;

    align-items:start;

    margin-bottom:28px;
}

.footer-section.footer-brand{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    justify-self:center;
}

.footer-section h3{

    color:var(--white);
    text-align: center;
    margin-bottom:18px;

    font-size:1rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    position:relative;
}

.footer-section h3::after{

    content:'';

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-8px;

    width:50px;

    height:3px;

    border-radius:999px;

    background:linear-gradient(90deg,var(--blue),var(--cyan));

    box-shadow:0 0 15px rgba(59,245,215,.25);
}

.footer-links-section{

    text-align:center;
}

.footer-links-grid{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:24px;

    padding-top:8px;
}

.footer-link{

    color:var(--text);

    text-decoration:none;

    transition:.25s;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    background:transparent;

    border:none;

    border-radius:0;

    padding:0;

    min-width:auto;

    min-height:auto;

    font-size:1rem;

    font-weight:500;
}

.footer-link:hover{

    color:var(--white);

    background:transparent;
}

.footer-link + .footer-link::before{

    content:'';

    display:inline-block;

    width:1px;

    height:20px;

    margin:0 18px;

    background:rgba(255,255,255,.18);

    vertical-align:middle;
}

.footer-link-icon{

    display:none;
}

.footer-contact-item{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:16px;
}

.footer-icon-img{

    width:40px;

    height:40px;

    object-fit:contain;

    display:block;
}

.footer-contact p{

    margin:0;

    color:var(--text);

    line-height:1.8;
}

.footer-social{

    display:grid;

    gap:16px;
}

.footer-social-buttons{

    display:grid;

    grid-template-columns:0.5fr;

    gap:14px;
    text-align: center;    
    justify-content: space-around;
}

.footer-social a{

    color:var(--text);

    text-decoration:none;

    transition:.25s;

    display:flex;

    align-items:center;

    gap:12px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:14px 18px;

    min-height:56px;

}

.footer-social a:hover{

    color:var(--white);

    background:rgba(91,192,255,.08);
}

.footer-social-icon{

    width:28px;

    height:28px;

    display:block;

    object-fit:contain;
}

.social-instagram::before{

    background:linear-gradient(135deg,#d531f9,#fc3787);

    mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M7.75 2h8.5A5.75 5.75 0 0 1 22 7.75v8.5A5.75 5.75 0 0 1 16.25 22h-8.5A5.75 5.75 0 0 1 2 16.25v-8.5A5.75 5.75 0 0 1 7.75 2Zm0 1.5A4.25 4.25 0 0 0 3.5 7.75v8.5A4.25 4.25 0 0 0 7.75 20.5h8.5A4.25 4.25 0 0 0 20.5 16.25v-8.5A4.25 4.25 0 0 0 16.25 3.5h-8.5Zm10.5 1.22a1.13 1.13 0 1 1 0 2.26 1.13 1.13 0 0 1 0-2.26ZM12 7.75a4.25 4.25 0 1 1 0 8.5 4.25 4.25 0 0 1 0-8.5Zm0 1.5a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5Z'/%3E%3C/svg%3E") center/60% no-repeat;
    -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M7.75 2h8.5A5.75 5.75 0 0 1 22 7.75v8.5A5.75 5.75 0 0 1 16.25 22h-8.5A5.75 5.75 0 0 1 2 16.25v-8.5A5.75 5.75 0 0 1 7.75 2Zm0 1.5A4.25 4.25 0 0 0 3.5 7.75v8.5A4.25 4.25 0 0 0 7.75 20.5h8.5A4.25 4.25 0 0 0 20.5 16.25v-8.5A4.25 4.25 0 0 0 16.25 3.5h-8.5Zm10.5 1.22a1.13 1.13 0 1 1 0 2.26 1.13 1.13 0 0 1 0-2.26ZM12 7.75a4.25 4.25 0 1 1 0 8.5 4.25 4.25 0 0 1 0-8.5Zm0 1.5a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5Z'/%3E%3C/svg%3E") center/60% no-repeat;
}

.social-facebook::before{

    background:linear-gradient(135deg,#2b8cff,#0056ff);

    mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M13.5 21.5h-3.5v-9H7.5V9.5h2.5V7.5a3.5 3.5 0 0 1 3.8-3.5h2.2v2.9h-1.6c-.7 0-.8.3-.8.8v1.9h2.4l-.3 3h-2.1v9Z'/%3E%3C/svg%3E") center/60% no-repeat;
    -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M13.5 21.5h-3.5v-9H7.5V9.5h2.5V7.5a3.5 3.5 0 0 1 3.8-3.5h2.2v2.9h-1.6c-.7 0-.8.3-.8.8v1.9h2.4l-.3 3h-2.1v9Z'/%3E%3C/svg%3E") center/60% no-repeat;
}

.social-linkedin::before{

    background:linear-gradient(135deg,#00c0ff,#0054ff);

    mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M6.94 8.66H4.24V19h2.7V8.66ZM5.6 7.08a1.56 1.56 0 1 1 0-3.12 1.56 1.56 0 0 1 0 3.12Zm5.58 1.58h-2.7V19h2.7v-5.22c0-1.4.28-2.78 2.02-2.78 1.73 0 1.75 1.62 1.75 2.86V19h2.7v-5.7c0-3.3-1.76-4.82-4.1-4.82-1.86 0-2.66 1.02-3.11 1.74v.06Z'/%3E%3C/svg%3E") center/60% no-repeat;
    -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M6.94 8.66H4.24V19h2.7V8.66ZM5.6 7.08a1.56 1.56 0 1 1 0-3.12 1.56 1.56 0 0 1 0 3.12Zm5.58 1.58h-2.7V19h2.7v-5.22c0-1.4.28-2.78 2.02-2.78 1.73 0 1.75 1.62 1.75 2.86V19h2.7v-5.7c0-3.3-1.76-4.82-4.1-4.82-1.86 0-2.66 1.02-3.11 1.74v.06Z'/%3E%3C/svg%3E") center/60% no-repeat;
}

.social-youtube::before{

    background:linear-gradient(135deg,#ff003c,#ff6a00);

    mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M21 7.5c0-1.24-.98-2.25-2.22-2.27C16.92 5.2 12 5.2 12 5.2s-4.92 0-6.78.03C3.98 5.25 3 6.27 3 7.5 3 9.71 3 12 3 12s0 2.29.22 4.5c.07 1.24.98 2.25 2.22 2.27C7.08 18.8 12 18.8 12 18.8s4.92 0 6.78-.03C20.02 18.75 21 17.73 21 16.5c0-2.54 0-5.09 0-7.5Zm-11 7.1V9.4l5.5 2.6-5.5 2.6Z'/%3E%3C/svg%3E") center/60% no-repeat;
    -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M21 7.5c0-1.24-.98-2.25-2.22-2.27C16.92 5.2 12 5.2 12 5.2s-4.92 0-6.78.03C3.98 5.25 3 6.27 3 7.5 3 9.71 3 12 3 12s0 2.29.22 4.5c.07 1.24.98 2.25 2.22 2.27C7.08 18.8 12 18.8 12 18.8s4.92 0 6.78-.03C20.02 18.75 21 17.73 21 16.5c0-2.54 0-5.09 0-7.5Zm-11 7.1V9.4l5.5 2.6-5.5 2.6Z'/%3E%3C/svg%3E") center/60% no-repeat;
}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.12);

    padding-top:9px;

    text-align:center;

    font-size:.95rem;
}

.footer-logo img{

    width:300px;

    max-width:100%;

    height:auto;

    margin-bottom:18px;
}

@media (min-width: 992px){

    .footer-grid{
        grid-template-columns:0.9fr 1fr 0.15fr 0.15fr;
        grid-template-areas:
            "brand links links links"
            "brand contact follow follow";
        gap:28px;
        align-items:start;
    }

    .footer-section.footer-brand{
        grid-area:brand;
        text-align:left;
        align-items:flex-start;
        justify-self:start;
        padding-top: 25px;
        padding-bottom:0;
    }

    .footer-section.footer-links-section{
        grid-area:links;
        padding-top:6px;
        padding-bottom: 12px;
    }

    .footer-section.footer-contact{
        grid-area:contact;
        text-align:left;        
        
        align-items: center;
        padding-right:10px;
        /* border-right:1px solid rgba(255,255,255,.08); */
    }

    .footer-section.footer-follow{
        grid-area:follow;
        text-align:center;
        padding-left:20px;
        border-left:1px solid rgba(255,255,255,.08);
    }

    .footer-links-grid{
        justify-content:center;
    }

    .footer-section.footer-follow .footer-social-buttons{
        grid-template-columns:1fr;
    }

}

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

.page-header{

    padding-top:120px;
    padding-bottom:60px;

    text-align:center;

    background:rgba(3,11,31,.45);

    border-bottom:1px solid var(--border);
}

.page-header-content{

    max-width:900px;

    margin-inline:auto;

    padding:40px 32px;

    background:var(--card);

    border:1px solid rgba(255,255,255,.12);

    border-radius:28px;

    backdrop-filter:blur(20px);
}

.page-header h1{

    font-size:4rem;

    background:
    linear-gradient(
    90deg,
    var(--cyan),
    var(--blue),
    var(--pink));

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.page-header p{

    color:var(--text);

    margin-top:20px;
}

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

.about-section{

    padding:30px 5%;
}

.about-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:flex-start;
}

.about-image{

    width:100%;
}

.about-image img{

    width:100%;

    border-radius:25px;
    object-fit:cover;
}

.about-content{

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.about-content h2{

    color:var(--blue);

    margin-bottom:20px;

    font-size:2.5rem;
}

.about-content p{

    line-height:1.9;

    margin-bottom:20px;

    color:var(--text);
}

/* =========================================
   MISSION
========================================= */

.mission-section{

    padding:30px 5%;

    text-align:center;
}

.mission-section h2{

    font-size:3rem;

    margin-bottom:25px;

    color:var(--blue);
}

.mission-section p{

    max-width:900px;

    margin:auto;

    color:var(--text);

    line-height:1.8;
}

/* =========================================
   FORMATIONS
========================================= */

.formations-section{

    padding:20px 5%;
}

.formations-section h2{

    text-align:center;

    margin-bottom:30px;

    font-size:3rem;

    background:
    linear-gradient(
    90deg,
    var(--blue),
    var(--purple));

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.formation-grid{

    display:grid;

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

    gap:30px;
}

.formation-card{

    background:
    rgba(255,255,255,.05);

    border-radius:25px;

    overflow:hidden;

    backdrop-filter:blur(20px);

    transition:.4s;
}

.formation-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 0 15px rgba(0,229,255,.4),
    0 0 25px rgba(160,32,240,.3);
}

.formation-card img{

    width:100%;

    height:300px;

    object-fit:cover;
}

.formation-card h3{

    text-align:center;

    padding:20px;

    color:var(--blue);
}

/* =========================================
   PROCESS
========================================= */

.process-section{

    padding:20px 4%;
}

.process-section h2{

    text-align:center;

    margin-bottom:30px;

    font-size:3rem;

    background:
    linear-gradient(
    90deg,
    var(--blue),
    var(--purple));

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

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

.gallery-section{

    padding:30px 5%;
}

.gallery-section h2{

    text-align:center;

    margin-bottom:30px;

    font-size:3rem;

    background:
    linear-gradient(
    90deg,
    var(--blue),
    var(--purple));

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.gallery-container{

    display:grid;

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

    gap:25px;
}

.gallery-item{

    overflow:hidden;

    border-radius:25px;

    background:
    rgba(255,255,255,.05);

    backdrop-filter:blur(20px);
}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;
}

.gallery-item:hover img{

    transform:scale(1.1);
}

/* =========================================
   VIDEO SECTION
========================================= */

.video-section{

    padding:30px 8%;
}

.video-section h2{

    text-align:center;

    margin-bottom:30px;

    font-size:3rem;

    background:
    linear-gradient(
    90deg,
    var(--blue),
    var(--purple));

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.video-grid{

    display:grid;

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

    gap:30px;
}

.video-card{

    background:
    rgba(255,255,255,.05);

    padding:20px;

    border-radius:25px;

    backdrop-filter:blur(20px);
}

.video-card video{

    width:100%;

    border-radius:20px;
}

.video-card h3{

    margin-top:15px;

    color:var(--blue);

    text-align:center;
}

/* =========================================
   SHOWCASE
========================================= */

.showcase-section{

    padding:30px 8%;
}

.showcase-section h2{

    text-align:center;

    margin-bottom:30px;

    font-size:3rem;

    background:
    linear-gradient(
    90deg,
    var(--blue),
    var(--purple));

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.showcase-grid{

    display:grid;

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

    gap:30px;
}

.showcase-card{

    background:
    rgba(255,255,255,.05);

    padding:35px;

    border-radius:25px;

    backdrop-filter:blur(20px);

    transition:.4s;
}

.showcase-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 0 15px rgba(0,229,255,.3),
    0 0 25px rgba(160,32,240,.3);
}

.showcase-card h3{

    color:var(--blue);

    margin-bottom:15px;
}

.showcase-card p{

    color:var(--text);

    line-height:1.8;
}

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

.contact-section{

    padding:90px 8%;
}

.contact-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;
}

.contact-info,
.contact-form{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    padding:40px;

    border-radius:25px;
}

.map-container{

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.map-container iframe{

    width:100%;

    min-height:360px;

    height:100%;

    border:0;
}

@media (max-width: 992px) {

    .contact-section,
    .map-section,
    .social-section,
    .footer-grid,
    .about-section,
    .services,
    .gallery-preview,
    .video-section,
    .showcase-section,
    .mission-section,
    .formations-section,
    .process-section,
    .contact-home{
        padding-left:6%;
        padding-right:6%;
    }

    .about-container{
        grid-template-columns:1fr;
    }

    .service-grid{
        grid-template-columns:1fr;
    }

    .contact-container{
        grid-template-columns:1fr;
    }

    .contact-info,
    .contact-form{
        padding:28px;
    }

    .contact-form input,
    .contact-form textarea{
        font-size:1rem;
    }

    .map-container iframe{
        min-height:280px;
    }

    .page-header{
        padding-top:120px;
        padding-bottom:60px;
    }

    .page-header-content{
        padding:32px 24px;
    }

    .page-header h1{
        font-size:2.8rem;
    }

    .page-header p,
    .about-content p,
    .services h2,
    .mission-section p,
    .contact-home h2,
    .video-section h2,
    .social-section h2,
    .showcase-section h2{
        font-size:1.05rem;
    }
}

@media (max-width: 768px) {

    .hero-content{
        padding:28px 24px 30px;
    }

    .hero-content h1{
        font-size:3rem;
    }

    .hero-buttons{
        flex-direction:column;
        gap:16px;
    }

    .footer-grid{
        grid-template-columns:1fr;
    }

    .footer-section{
        padding-bottom:20px;
    }
}

.contact-info h2,
.contact-form h2{

    margin-bottom:30px;

    color:var(--blue);
}

.info-box{

    margin-bottom:25px;
}

.info-box h3{

    display:flex;
    align-items:center;
    gap:12px;

    color:var(--blue);

    margin-bottom:10px;
}

.info-box h3 .info-icon{

    width:28px;
    height:auto;
    display:inline-block;
}

.whatsapp-button .btn-icon{

    width:28px;
    height:auto;
    display:inline-block;
}

.whatsapp-button img{

    width:20px;
    height:auto;
    margin-right:10px;
}

.whatsapp-float-icon{

    width:28px;
    height:auto;
}

.info-box p{

    color:var(--text);
}

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:15px;
}

.contact-form input,
.contact-form textarea{

    padding:15px;

    border:none;

    border-radius:12px;

    background:
    rgba(255,255,255,.08);

    color:white;

    outline:none;
}

.contact-form textarea{

    resize:none;
}

/* =========================================
   MAP
========================================= */

.map-section{

    padding:90px 8%;
}

.map-section h2{

    text-align:center;

    margin-bottom:40px;

    font-size:3rem;

    background:
    linear-gradient(
    90deg,
    var(--blue),
    var(--purple));

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.map-container iframe{

    width:100%;

    height:450px;

    border:none;

    border-radius:25px;
}

/* =========================================
   SOCIAL
========================================= */

.social-section{

    padding:90px 8%;

    text-align:center;
}

.social-section h2{

    margin-bottom:40px;

    font-size:3rem;

    background:
    linear-gradient(
    90deg,
    var(--blue),
    var(--purple));

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.social-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;
}

.social-links a{

    text-decoration:none;

    padding:15px 30px;

    border-radius:50px;

    background:
    rgba(255,255,255,.05);

    color:white;

    transition:.4s;
}

.social-links a:hover{

    background:var(--blue);

    color:#081120;
}

/* =========================================
   WHATSAPP FLOAT
========================================= */

.whatsapp-float{

    position:fixed;

    bottom:25px;

    right:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    /* background:#25D366; */

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    text-decoration:none;

    color:white;

    z-index:999;

    box-shadow:
    0 0 20px rgba(37,211,102,.5);
}

/* =========================================
   DRONE SKY ANIMATION
========================================= */

#drone-sky{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    overflow:hidden;

    pointer-events:none;

    z-index:1;
}

.drone-fly{

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

    font-size:1rem;
    line-height:1;

    color:var(--bg1);
    text-shadow:
    0 0 10px currentColor,
    0 0 18px currentColor,
    0 0 28px currentColor;

    pointer-events:none;
}

@keyframes fly{

    0%{

        transform:
        translateX(-100px)
        translateY(0px)
        rotate(0deg);

        opacity:0;
    }

    10%{
        opacity:1;
    }

    50%{

        transform:
        translateX(50vw)
        translateY(-80px)
        rotate(10deg);
    }

    100%{

        transform:
        translateX(120vw)
        translateY(40px)
        rotate(-10deg);

        opacity:0;
    }
}

.hero-content.home-hero{
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    margin-top:-40px;
}

/* =========================================
   MOBILE MENU
========================================= */

.menu-toggle{

    display:none;

    font-size:32px;

    color:white;

    cursor:pointer;

    z-index:10001;
}

@media(max-width:768px){

    .navbar{
        padding:16px 5%;
    }

    .hero{
        min-height:auto;
        padding-top:30px;
    }

    .hero-content{
        width:calc(100% - 40px);
        padding:28px 20px 30px;
    }

    .hero-content h1{
        font-size:2.8rem;
    }

    .hero-content p{
        font-size:1rem;
    }

    .hero-buttons{
        flex-direction:column;
        gap:14px;
    }

    .page-header{
        padding-top:120px;
        padding-bottom:60px;
    }

    .page-header h1,
    .services h2,
    .gallery-preview h2,
    .contact-home h2,
    .map-section h2,
    .social-section h2,
    .showcase-section h2,
    .mission-section h2,
    .formations-section h2,
    .process-section h2{
        font-size:2.4rem;
    }

    .footer-grid{
        gap:24px;
    }

    .footer-bottom{
        font-size:0.95rem;
    }

    .menu-toggle{

        display:block;
    }

    .nav-links{

        position:fixed;

        top:80px;

        right:-100%;

        width:260px;

        height:auto;

        background:
        rgba(8,17,32,.95);

        backdrop-filter:blur(20px);

        flex-direction:column;

        padding:25px;

        gap:20px;

        border-radius:20px;

        transition:.4s;

        z-index:9999;
    }

    .nav-links.active{

        right:20px;
    }

    .nav-links li{

        width:100%;
    }

    .nav-links a{

        display:block;

        padding:12px;

        border-radius:10px;
    }

    .nav-links a:hover{

        background:
        rgba(255,255,255,.08);
    }
}