/*========================================================

        ROHIT GIS APPS
        Enterprise GIS Platform
        Version 2.0

========================================================*/


/*========================================================
                GOOGLE FONT
========================================================*/

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


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

*{

margin:0;

padding:0;

box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

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

background:#020712;

color:#ffffff;

overflow-x:hidden;

min-height:100vh;

position:relative;

}


/*========================================================
            SCROLL BAR
========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#071320;

}

::-webkit-scrollbar-thumb{

background:#00bfff;

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#00d8ff;

}


/*========================================================
            LINKS
========================================================*/

a{

text-decoration:none;

color:inherit;

}


ul{

list-style:none;

}


button{

cursor:pointer;

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

border:none;

outline:none;

}


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

body{

background:

radial-gradient(circle at top right,

rgba(0,174,255,.18),

transparent 40%),


radial-gradient(circle at bottom left,

rgba(0,255,255,.10),

transparent 40%),


#030812;

}


/*========================================================
        STAR BACKGROUND
========================================================*/

#stars{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

pointer-events:none;

background-image:

radial-gradient(#ffffff 1px,transparent 1px);

background-size:55px 55px;

opacity:.18;

z-index:-3;

}


/*========================================================
        BLUE GLOW
========================================================*/

#backgroundGlow{

position:fixed;

left:-250px;

top:-250px;

width:700px;

height:700px;

border-radius:50%;

background:

rgba(0,183,255,.18);

filter:blur(140px);

animation:moveGlow 18s linear infinite;

z-index:-2;

}


@keyframes moveGlow{

0%{

transform:translate(0,0);

}

25%{

transform:translate(300px,150px);

}

50%{

transform:translate(650px,250px);

}

75%{

transform:translate(250px,450px);

}

100%{

transform:translate(0,0);

}

}


/*========================================================
        CONNECTION BACKGROUND
========================================================*/

#connections{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

pointer-events:none;

background-image:

linear-gradient(

rgba(0,183,255,.04) 1px,

transparent 1px),

linear-gradient(

90deg,

rgba(0,183,255,.04) 1px,

transparent 1px);

background-size:80px 80px;

z-index:-1;

}
/*========================================================
                LOADING SCREEN
========================================================*/

#loadingScreen{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#020712;

display:none;

align-items:center;

justify-content:center;

z-index:99999;

}

.loader{

text-align:center;

}

.loader h2{

margin-top:30px;

font-size:34px;

font-weight:700;

letter-spacing:2px;

color:#00d4ff;

}

.loader p{

margin-top:12px;

font-size:15px;

color:#d7e7ff;

opacity:.8;

}

/*========================================================
                EARTH LOADER
========================================================*/

.earth-loader{

width:120px;

height:120px;

border-radius:50%;

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

border-top:4px solid #00d4ff;

border-right:4px solid #0099ff;

box-shadow:

0 0 50px rgba(0,212,255,.45);

animation:earthRotate 2s linear infinite;

}

@keyframes earthRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

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

.header{

position:fixed;

top:0;

left:0;

right:0;

height:82px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 35px;

background:rgba(8,18,34,.65);

backdrop-filter:blur(18px);

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

z-index:9999;

}

/*========================================================
                    LOGO
========================================================*/

.logo-area{

display:flex;

align-items:center;

gap:15px;

}

.logo-icon{

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

background:linear-gradient(135deg,#00d4ff,#006eff);

color:white;

box-shadow:

0 0 25px rgba(0,212,255,.4);

}

.logo-text h2{

font-size:24px;

font-weight:700;

color:white;

}

.logo-text span{

font-size:13px;

color:#8ab9ff;

}

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

.main-nav ul{

display:flex;

align-items:center;

gap:28px;

}

.main-nav a{

padding:10px 18px;

border-radius:12px;

display:flex;

align-items:center;

gap:8px;

transition:.35s;

font-size:15px;

color:#d9ecff;

}

.main-nav a:hover{

background:rgba(0,212,255,.15);

color:#00d4ff;

}

.main-nav .active{

background:linear-gradient(135deg,#009dff,#00d4ff);

color:white;

box-shadow:

0 0 25px rgba(0,212,255,.35);

}

/*========================================================
                    RIGHT MENU
========================================================*/

.header-right{

display:flex;

align-items:center;

gap:15px;

}

/*========================================================
                    SEARCH BOX
========================================================*/

.search-box{

display:flex;

align-items:center;

gap:12px;

width:290px;

height:48px;

padding:0 18px;

border-radius:30px;

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

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

}

.search-box i{

color:#00d4ff;

}

.search-box input{

width:100%;

background:none;

border:none;

outline:none;

font-size:15px;

color:white;

}

.search-box input::placeholder{

color:#9fcfff;

}

/*========================================================
                    ICON BUTTON
========================================================*/

.icon-btn{

width:46px;

height:46px;

border-radius:50%;

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

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

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:18px;

transition:.35s;

position:relative;

}

.icon-btn:hover{

transform:translateY(-3px);

background:#00cfff;

color:#001826;

box-shadow:

0 0 25px rgba(0,212,255,.45);

}

/*========================================================
                NOTIFICATION BADGE
========================================================*/

.badge{

position:absolute;

top:-4px;

right:-2px;

width:18px;

height:18px;

border-radius:50%;

background:#ff2d55;

font-size:11px;

display:flex;

align-items:center;

justify-content:center;

color:white;

font-weight:700;

}

/*========================================================
                    LOGIN BUTTON
========================================================*/

.login-btn{

height:48px;

padding:0 24px;

border-radius:30px;

background:linear-gradient(135deg,#009dff,#00d4ff);

display:flex;

align-items:center;

gap:10px;

font-size:15px;

font-weight:600;

color:white;

transition:.35s;

box-shadow:

0 0 30px rgba(0,212,255,.35);

}

.login-btn:hover{

transform:translateY(-3px);

box-shadow:

0 0 40px rgba(0,212,255,.55);

}

/*========================================================
                MAIN LAYOUT
========================================================*/

.main-container{

display:flex;

width:100%;

min-height:100vh;

padding-top:82px;

}

/*========================================================
                    SIDEBAR
========================================================*/

.sidebar{

position:fixed;

top:82px;

left:0;

width:280px;

height:calc(100vh - 82px);

background:rgba(9,18,36,.78);

backdrop-filter:blur(18px);

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

overflow-y:auto;

transition:.35s;

z-index:999;

}

.sidebar::-webkit-scrollbar{

width:6px;

}

.sidebar::-webkit-scrollbar-thumb{

background:#00d4ff;

border-radius:30px;

}

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

.sidebar-header{

padding:30px;

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

}

.sidebar-header h3{

font-size:22px;

font-weight:700;

color:#ffffff;

margin-bottom:6px;

}

.sidebar-header span{

font-size:13px;

color:#7dbdff;

}

/*========================================================
            SIDEBAR MENU
========================================================*/

.sidebar-menu{

padding:18px;

}

.sidebar-menu li{

margin-bottom:10px;

}

.sidebar-menu li a{

display:flex;

align-items:center;

gap:15px;

padding:14px 18px;

border-radius:16px;

font-size:15px;

font-weight:500;

color:#dbe9ff;

transition:.35s;

}

.sidebar-menu li a i{

font-size:18px;

width:22px;

text-align:center;

color:#00d4ff;

}

/* Hover */

.sidebar-menu li a:hover{

background:rgba(0,212,255,.12);

transform:translateX(8px);

box-shadow:0 0 20px rgba(0,212,255,.18);

}

/* Active */

.sidebar-menu li.active a{

background:linear-gradient(135deg,#009dff,#00d4ff);

color:#ffffff;

box-shadow:0 0 28px rgba(0,212,255,.35);

}

.sidebar-menu li.active i{

color:#ffffff;

}

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

.sidebar-footer{

position:absolute;

bottom:25px;

left:20px;

right:20px;

padding:15px;

border-radius:18px;

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

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

}

.online-status{

display:flex;

align-items:center;

gap:10px;

font-size:14px;

color:#bfe8ff;

}

.status-dot{

width:10px;

height:10px;

border-radius:50%;

background:#00ff8c;

box-shadow:0 0 12px #00ff8c;

animation:statusBlink 1.5s infinite;

}

@keyframes statusBlink{

0%{

opacity:1;

transform:scale(1);

}

50%{

opacity:.4;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}

/*========================================================
                CONTENT AREA
========================================================*/

.content-area{

margin-left:280px;

width:calc(100% - 280px);

padding:40px;

position:relative;

min-height:100vh;

}

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

.hero-section{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

padding:60px 0;

position:relative;

min-height:750px;

}

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

.hero-left{

display:flex;

flex-direction:column;

justify-content:center;

z-index:10;

}

.hero-tag{

display:inline-block;

width:max-content;

padding:10px 22px;

border-radius:30px;

background:rgba(0,212,255,.12);

border:1px solid rgba(0,212,255,.25);

color:#00d4ff;

font-size:14px;

font-weight:600;

margin-bottom:25px;

backdrop-filter:blur(10px);

}

.hero-left h1{

font-size:68px;

line-height:78px;

font-weight:800;

margin-bottom:25px;

color:#ffffff;

}

.hero-left p{

font-size:18px;

line-height:34px;

color:#b8d8ff;

max-width:680px;

margin-bottom:40px;

}

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

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:50px;

}

.primary-btn{

padding:18px 36px;

border-radius:40px;

background:linear-gradient(135deg,#00bfff,#008cff);

font-size:16px;

font-weight:600;

color:white;

box-shadow:

0 0 35px rgba(0,191,255,.35);

transition:.35s;

}

.primary-btn:hover{

transform:translateY(-5px);

box-shadow:

0 0 45px rgba(0,191,255,.55);

}

.secondary-btn{

padding:18px 36px;

border-radius:40px;

background:transparent;

border:2px solid rgba(0,212,255,.4);

font-size:16px;

font-weight:600;

color:#00d4ff;

transition:.35s;

}

.secondary-btn:hover{

background:#00d4ff;

color:#00121e;

}

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

.hero-stats{

display:grid;

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

gap:20px;

}

.hero-stats div{

padding:25px;

border-radius:20px;

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

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

backdrop-filter:blur(12px);

transition:.35s;

}

.hero-stats div:hover{

transform:translateY(-8px);

border-color:#00d4ff;

box-shadow:

0 0 30px rgba(0,212,255,.25);

}

.hero-stats h2{

font-size:34px;

color:#00d4ff;

margin-bottom:10px;

}

.hero-stats span{

font-size:15px;

color:#d5e9ff;

}

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

.hero-right{

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

/*========================================================
                LIVE EARTH CARD
========================================================*/

.earth-card{

position:relative;

width:100%;

height:700px;

border-radius:30px;

overflow:hidden;

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

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

backdrop-filter:blur(20px);

box-shadow:

0 0 60px rgba(0,212,255,.18);

}

/*========================================================
                CESIUM CONTAINER
========================================================*/

#cesiumContainer{

width:100%;

height:100%;

background:#02111d;

}

/*========================================================
                EARTH INFO
========================================================*/

.earth-info{

position:absolute;

left:25px;

top:25px;

z-index:100;

padding:18px 24px;

border-radius:20px;

background:rgba(0,0,0,.35);

backdrop-filter:blur(15px);

}

.earth-info h3{

font-size:28px;

color:#00d4ff;

margin-bottom:8px;

}

.earth-info p{

font-size:15px;

color:white;

}

/*========================================================
                EARTH GLOW
========================================================*/

.earth-glow{

position:absolute;

left:50%;

top:50%;

width:420px;

height:420px;

transform:translate(-50%,-50%);

border-radius:50%;

background:rgba(0,191,255,.15);

filter:blur(120px);

pointer-events:none;

animation:earthPulse 4s ease-in-out infinite;

}

@keyframes earthPulse{

0%{

transform:translate(-50%,-50%) scale(.9);

opacity:.5;

}

50%{

transform:translate(-50%,-50%) scale(1.1);

opacity:1;

}

100%{

transform:translate(-50%,-50%) scale(.9);

opacity:.5;

}

}

/*========================================================
                FLOATING CARDS
========================================================*/

.floating-card{

position:absolute;

padding:14px 20px;

border-radius:18px;

background:rgba(8,20,40,.72);

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

backdrop-filter:blur(18px);

display:flex;

align-items:center;

gap:10px;

font-size:15px;

font-weight:600;

color:#ffffff;

box-shadow:

0 0 30px rgba(0,212,255,.18);

animation:floatCard 5s ease-in-out infinite;

z-index:100;

}

.floating-card i{

color:#00d4ff;

font-size:20px;

}

.top-left{

left:25px;

top:120px;

}

.top-right{

right:25px;

top:120px;

animation-delay:1s;

}

.bottom-left{

left:25px;

bottom:40px;

animation-delay:2s;

}

.bottom-right{

right:25px;

bottom:40px;

animation-delay:3s;

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

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

.hero-grid{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background-image:

linear-gradient(rgba(0,212,255,.05) 1px,transparent 1px),

linear-gradient(90deg,rgba(0,212,255,.05) 1px,transparent 1px);

background-size:70px 70px;

pointer-events:none;

opacity:.45;

}

/*========================================================
            CONNECTION LINES
========================================================*/

.hero-section{

position:relative;

overflow:hidden;

}

.connection-lines{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

overflow:hidden;

pointer-events:none;

z-index:1;

}


.connection-lines path{

fill:none;

stroke:#00d4ff;

stroke-width:2;

stroke-linecap:round;

stroke-dasharray:12 12;

filter:drop-shadow(0 0 12px #00d4ff);

animation:lineFlow 10s linear infinite;

}

.line2{

animation-delay:2s;

}

.line3{

animation-delay:4s;

}

@keyframes lineFlow{

from{

stroke-dashoffset:0;

}

to{

stroke-dashoffset:-500;

}

}


/* =========================================
   PART 3 - GIS NETWORK LINES
========================================= */

.gis-network-lines{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:2;

    overflow:hidden;

}


.gis-line{

    fill:none;

    stroke:#00d4ff;

    stroke-width:3;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:14 18;

    filter:
        drop-shadow(0 0 6px #00d4ff)
        drop-shadow(0 0 14px rgba(0,212,255,.55));

    animation:
        gisLineFlow 8s linear infinite;

}


.gis-line-1{

    opacity:.9;

}


.gis-line-2{

    opacity:.75;

    animation-duration:11s;

    animation-delay:-3s;

}


.gis-line-3{

    opacity:.65;

    animation-duration:14s;

    animation-delay:-6s;

}


@keyframes gisLineFlow{

    0%{

        stroke-dashoffset:0;

    }

    100%{

        stroke-dashoffset:-500;

    }

}
/*========================================================
                GPS PULSE
========================================================*/

.gps-pulse{

position:absolute;

width:18px;

height:18px;

border-radius:50%;

background:#00d4ff;

box-shadow:

0 0 18px #00d4ff;

animation:pulse 2s infinite;

z-index:20;

}

.pulse-1{

left:20%;

top:30%;

}

.pulse-2{

left:55%;

top:45%;

animation-delay:.8s;

}

.pulse-3{

left:82%;

top:22%;

animation-delay:1.6s;

}

@keyframes pulse{

0%{

transform:scale(.8);

opacity:1;

}

70%{

transform:scale(3);

opacity:0;

}

100%{

transform:scale(.8);

opacity:0;

}

}

/*========================================================
            LIVE STATUS
========================================================*/

.live-status{

display:grid;

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

gap:25px;

margin-top:60px;

margin-bottom:70px;

}

.status-card{

display:flex;

align-items:center;

gap:18px;

padding:22px;

border-radius:22px;

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

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

backdrop-filter:blur(16px);

transition:.35s;

}

.status-card:hover{

transform:translateY(-8px);

border-color:#00d4ff;

box-shadow:

0 0 28px rgba(0,212,255,.25);

}

.status-icon{

width:60px;

height:60px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#00d4ff,#0077ff);

font-size:24px;

color:#fff;

}

.status-card h4{

font-size:16px;

margin-bottom:6px;

color:#fff;

}

.status-card span{

font-size:15px;

color:#00d4ff;

font-weight:700;

}

/*========================================================
            EARTH INFORMATION
========================================================*/

.earth-information{

margin-top:40px;

}

.earth-info-card{

max-width:850px;

margin:auto;

padding:30px;

border-radius:25px;

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

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

backdrop-filter:blur(20px);

}

.earth-info-card h3{

margin-bottom:25px;

font-size:28px;

color:#00d4ff;

}

.earth-info-card table{

width:100%;

border-collapse:collapse;

}

.earth-info-card td{

padding:16px;

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

font-size:15px;

color:#dbeaff;

}

.online{

color:#00ff99;

font-weight:700;

}
/*========================================================
            QUICK ACTION SECTION
========================================================*/

.quick-actions{

margin-top:70px;

margin-bottom:80px;

}

.quick-actions h2{

font-size:42px;

font-weight:700;

margin-bottom:35px;

color:#ffffff;

}

.quick-grid{

display:grid;

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

gap:30px;

}

.quick-card{

position:relative;

padding:35px;

border-radius:25px;

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

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

backdrop-filter:blur(18px);

overflow:hidden;

transition:.4s;

cursor:pointer;

}

.quick-card::before{

content:"";

position:absolute;

right:-70px;

top:-70px;

width:180px;

height:180px;

border-radius:50%;

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

transition:.5s;

}

.quick-card:hover{

transform:translateY(-12px);

border-color:#00d4ff;

box-shadow:0 0 45px rgba(0,212,255,.28);

}

.quick-card:hover::before{

transform:scale(1.3);

}

.quick-card i{

font-size:55px;

color:#00d4ff;

margin-bottom:20px;

}

.quick-card h3{

font-size:24px;

margin-bottom:12px;

}

.quick-card p{

font-size:15px;

color:#bddcff;

line-height:28px;

}

/*========================================================
            SECTION TITLE
========================================================*/

.section-title{

margin:80px 0 40px;

text-align:center;

}

.section-title h2{

font-size:44px;

font-weight:700;

margin-bottom:10px;

}

.section-title p{

font-size:18px;

color:#a8cbff;

}

/*========================================================
            APPS GRID
========================================================*/

.apps-grid{

display:grid;

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

gap:30px;

margin-bottom:80px;

}

.app-card{

position:relative;

padding:35px;

border-radius:25px;

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

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

backdrop-filter:blur(18px);

transition:.4s;

overflow:hidden;

}

.app-card::after{

content:"";

position:absolute;

width:220px;

height:220px;

right:-120px;

top:-120px;

border-radius:50%;

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

transition:.4s;

}

.app-card:hover{

transform:translateY(-10px);

border-color:#00d4ff;

box-shadow:0 0 45px rgba(0,212,255,.25);

}

.app-card:hover::after{

transform:scale(1.25);

}

.app-card i{

font-size:55px;

color:#00d4ff;

margin-bottom:20px;

}

.app-card h3{

font-size:24px;

margin-bottom:15px;

}

.app-card p{

font-size:15px;

line-height:28px;

color:#cbe5ff;

margin-bottom:25px;

}

.app-card a{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 28px;

border-radius:30px;

background:linear-gradient(135deg,#00aaff,#00d4ff);

color:white;

font-weight:600;

transition:.35s;

}

.app-card a:hover{

transform:scale(1.05);

}

/*========================================================
            DASHBOARD BOXES
========================================================*/

.dashboard-grid{

display:grid;

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

gap:25px;

margin-bottom:80px;

}

.dashboard-box{

padding:35px;

border-radius:25px;

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

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

transition:.35s;

}

.dashboard-box:hover{

transform:translateY(-8px);

border-color:#00d4ff;

}

.dashboard-box h4{

font-size:18px;

margin-bottom:15px;

color:#cfe7ff;

}

.dashboard-box span{

font-size:34px;

font-weight:700;

color:#00d4ff;

}

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

footer{

margin-top:100px;

padding:60px 40px;

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

display:flex;

justify-content:space-between;

align-items:center;

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

backdrop-filter:blur(18px);

}

footer h2{

font-size:28px;

margin-bottom:8px;

}

footer p{

color:#9bc7ff;

font-size:15px;

}

footer a{

margin-left:18px;

color:#d6eaff;

transition:.35s;

}

footer a:hover{

color:#00d4ff;

}

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

@media(max-width:1400px){

.hero-section{

grid-template-columns:1fr;

}

.hero-right{

margin-top:40px;

}

.quick-grid,

.apps-grid,

.dashboard-grid{

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

}

}

@media(max-width:900px){

.sidebar{

display:none;

}

.content-area{

margin-left:0;

width:100%;

padding:25px;

}

.hero-left h1{

font-size:46px;

line-height:56px;

}

.hero-stats{

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

}

.quick-grid,

.apps-grid,

.dashboard-grid{

grid-template-columns:1fr;

}

.header{

padding:0 20px;

}

.main-nav{

display:none;

}

.search-box{

display:none;

}

footer{

flex-direction:column;

gap:20px;

text-align:center;

}

}

/* =========================================
   PART 3 - HERO GIS NETWORK LINES
========================================= */

.hero-section{

    position:relative;

    overflow:hidden;

}


.gis-network-lines{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:1;

}


.gis-line{

    fill:none;

    stroke:#00d4ff;

    stroke-width:3;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:14 18;

    filter:
        drop-shadow(0 0 6px #00d4ff)
        drop-shadow(0 0 12px #00d4ff);

    animation:
        gisNetworkFlow 8s linear infinite;

}


.gis-line:nth-child(2){

    opacity:.75;

    animation-duration:11s;

}


.gis-line:nth-child(3){

    opacity:.55;

    animation-duration:14s;

}


@keyframes gisNetworkFlow{

    from{

        stroke-dashoffset:0;

    }

    to{

        stroke-dashoffset:-500;

    }

}