/*==================================================
    SPEED EV+ COMING SOON
    STYLE.CSS (PART 1)
==================================================*/

/*=========================
Google Fonts
=========================*/

:root{

    --primary:#B5CA1C;
    --primary-dark:#7C9315;
    --secondary:#1D4B28;
    --dark:#08150F;
    --dark2:#10211A;
    --dark3:#173126;

    --white:#ffffff;
    --text:#E8F0E5;
    --muted:#A7B5A7;

    --glass:rgba(255,255,255,.06);

    --border:rgba(181,202,28,.18);

    --shadow:0 15px 40px rgba(0,0,0,.35);

    --radius:18px;

}


/*=========================
Reset
=========================*/

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

html{
    scroll-behavior:smooth;
}

body{

background: linear-gradient(
    180deg,
    #123220 0%,
    #1B4A2B 45%,
    #2A6A3F 100%
);
    color:var(--white);

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

    overflow-x:hidden;

}


/*=========================
Scrollbar
=========================*/

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

::-webkit-scrollbar-track{
    background:#08150F;
}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}


/*=========================
Selection
=========================*/

::selection{

    background:var(--primary);

    color:#111;

}


/*=========================
Container
=========================*/

.container{

    width:90%;

    max-width:1280px;

    margin:auto;

}


/*=========================
Typography
=========================*/

h1,h2,h3{

    font-family:'Hanken Grotesk',sans-serif;

}

h1{

    font-size:68px;

    line-height:1.05;

    font-weight:800;

}

h2{

    font-size:48px;

    margin-bottom:20px;

}

h3{

    font-size:26px;

}

p{

    color:var(--muted);

    line-height:1.8;

    font-size:18px;

}


/*=========================
Section
=========================*/

section{

    padding:50px 0;

    position:relative;

}


/*=========================
Animated Background
=========================*/

.grid-bg{

    position:fixed;

    width:100%;

    height:100%;

    left:0;

    top:0;

    background-image:

    linear-gradient(rgba(181,202,28,.05) 1px, transparent 1px),

    linear-gradient(90deg, rgba(181,202,28,.05) 1px, transparent 1px);

    background-size:60px 60px;

    z-index:-2;

}


/*=========================
Glow Overlay
=========================*/

body::before{

    content:"";

    position:fixed;

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(var(--primary),transparent 70%);

    opacity:.08;

    left:-200px;

    top:-200px;

    filter:blur(70px);

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    width:600px;

    height:600px;

    border-radius:50%;

    background:radial-gradient(#5c7c12,transparent 70%);

    opacity:.07;

    right:-250px;

    bottom:-250px;

    filter:blur(90px);

    z-index:-2;

}


/*=========================
Particles
=========================*/

.particles{

    position:fixed;

    width:100%;

    height:100%;

    left:0;

    top:0;

    pointer-events:none;

    z-index:-1;

}


/*=========================
Mouse Glow
=========================*/

.mouse-glow{

    position:fixed;

    width:250px;

    height:250px;

    border-radius:50%;

    background:radial-gradient(circle,var(--primary),transparent 70%);

    opacity:.10;

    filter:blur(60px);

    pointer-events:none;

    z-index:999;

}


/*=========================
Hero
=========================*/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}


.logo{

    width:220px;

    margin:auto;

    display:block;

    margin-bottom:35px;

}


.mini-title{

    color:var(--primary);

    letter-spacing:5px;

    font-size:16px;

    text-transform:uppercase;

    margin-bottom:25px;

}


.hero h1{

    max-width:850px;

    margin:auto;

}


.hero p{

    max-width:700px;

    margin:35px auto;

}


/*=========================
Countdown
=========================*/

.countdown{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:22px;

    margin-top:55px;

}


.countdown .box{

    width:150px;

    height:150px;

    border-radius:20px;

    background:var(--glass);

    backdrop-filter:blur(14px);

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.4s;

    box-shadow:var(--shadow);

}


.countdown .box:hover{

    transform:translateY(-12px);

    border-color:var(--primary);

    box-shadow:0 0 35px rgba(181,202,28,.35);

}


.countdown span{

    font-family:'JetBrains Mono',monospace;

    font-size:54px;

    font-weight:700;

    color:var(--primary);

}


.countdown small{

    margin-top:12px;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#fff;

}


/*=========================
Notify Button
=========================*/

.notify-btn{

    display:inline-block;

    margin-top:60px;

    padding:18px 55px;

    border-radius:60px;

    background:var(--primary);

    color:#111;

    font-weight:700;

    text-decoration:none;

    font-size:17px;

    position:relative;

    overflow:hidden;

    transition:.4s;

}


.notify-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(181,202,28,.40);

}


.notify-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

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

    transform:skewX(-30deg);

    transition:.7s;

}


.notify-btn:hover::before{

    left:120%;

}


/*=========================
Section Heading
=========================*/

section h2{

    text-align:center;

}

section p{

    text-align:center;

    max-width:850px;

    margin:auto;

}
/*==================================================
    STYLE.CSS (PART 2)
    EV CAR | BATTERY | VIDEO | GALLERY
==================================================*/


/*==================================
CAR SECTION
==================================*/

.car-section{

    position:relative;

    padding:50px 0;

}

.charging-area{

    position:relative;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:120px;

    margin-top:40px;

}


/*==================================
BATTERY
==================================*/

.battery{

    position:absolute;

    top:-80px;

    left:50%;

    transform:translateX(-50%);

    width:320px;

    height:48px;

    border:3px solid var(--primary);

    border-radius:10px;

    overflow:hidden;

    background:#08150F;

    box-shadow:0 0 25px rgba(181,202,28,.25);

}

.battery::after{

    content:"";

    position:absolute;

    right:-14px;

    top:12px;

    width:10px;

    height:20px;

    background:var(--primary);

    border-radius:0 5px 5px 0;

}

.battery-fill{

    width:75%;

    height:100%;

    background:linear-gradient(
        90deg,
        #3cff4b,
        #B5CA1C
    );

    animation:batteryCharge 8s linear infinite;

}

#batteryPercent{

    position:absolute;

    width:100%;

    left:0;

    top:0;

    text-align:center;

    line-height:42px;

    font-family:'JetBrains Mono';

    font-weight:700;

    color:#fff;

    text-shadow:0 0 10px #000;

}


/*==================================
CAR
==================================*/

.car-wrapper{

    position:relative;

    width:700px;

}

.car{

    width:100%;

    display:block;

    filter:

        drop-shadow(0 25px 45px rgba(0,0,0,.45))
        drop-shadow(0 0 30px rgba(181,202,28,.18));

}


/*==================================
HEADLIGHT GLOW
==================================*/

.car-wrapper::before{

    content:"";

    position:absolute;

    right:-25px;

    top:165px;

    width:220px;

    height:55px;

    background:linear-gradient(
        90deg,
        rgba(181,202,28,.5),
        transparent
    );

    filter:blur(18px);

    animation:headlight 2s infinite;

}


/*==================================
WHEELS
==================================*/

.wheel{

    position:absolute;

    width:92px;

    height:92px;

    border:5px solid #333;

    border-top-color:var(--primary);

    border-radius:50%;

    animation:wheelRotate 3s linear infinite;

}

.left-wheel{

    left:132px;

    bottom:18px;

}

.right-wheel{

    right:126px;

    bottom:18px;

}


/*==================================
ROAD
==================================*/

.car-section::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:8px;

    background:repeating-linear-gradient(

        90deg,

        transparent 0 70px,

        var(--primary) 70px 110px

    );

    animation:roadMove 2s linear infinite;

}


/*==================================
CHARGER
==================================*/

.charger{

    width:130px;

    height:250px;

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

    border:1px solid rgba(181,202,28,.2);

    border-radius:18px;

    backdrop-filter:blur(10px);

    position:relative;

    box-shadow:var(--shadow);

}

.charger-head{

    width:70px;

    height:70px;

    border-radius:50%;

    background:var(--primary);

    position:absolute;

    left:30px;

    top:28px;

    box-shadow:0 0 25px rgba(181,202,28,.55);

}


/*==================================
CHARGING WIRE
==================================*/

.charging-wire{

    position:absolute;

    left:-250px;

    top:95px;

    width:250px;

    height:5px;

    background:linear-gradient(

        90deg,

        var(--primary),

        #fff,

        var(--primary)

    );

    border-radius:50px;

    animation:wireGlow 1.5s infinite;

}


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

.video-section{

    text-align:center;

}

.video-section h2{

    margin-bottom:50px;

}

.video-section video{

    width:100%;

    max-width:800px;

    border-radius:22px;

    border:2px solid rgba(181,202,28,.2);

    box-shadow:

        0 30px 60px rgba(0,0,0,.45),

        0 0 40px rgba(181,202,28,.12);

    transition:.5s;

}

.video-section video:hover{

    transform:scale(1.02);

}


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

.gallery{

    text-align:center;

}

.gallery-grid{

    margin-top:60px;

    display:grid;

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

    gap:30px;

}

.gallery-grid img{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:22px;

    border:1px solid rgba(181,202,28,.15);

    transition:.5s;

    cursor:pointer;

    box-shadow:var(--shadow);

}

.gallery-grid img:hover{

    transform:

        translateY(-10px)

        scale(1.05);

    border-color:var(--primary);

    box-shadow:

        0 25px 45px rgba(0,0,0,.45),

        0 0 30px rgba(181,202,28,.25);

}


/*==================================
SECTION SPACING
==================================*/

.video-section,
.gallery{

    position:relative;

    z-index:2;

}
/*==================================================
    STYLE.CSS (PART 3)
    FEATURES | ABOUT | CM GROUP | FOOTER
==================================================*/


/*==============================
FEATURES
==============================*/

.features{
    position:relative;
    padding:50px 0;
    text-align: center;
}

.feature-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

.feature-card{

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

    border:1px solid rgba(181,202,28,.15);

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

    transition:.45s;

    backdrop-filter:blur(14px);

    box-shadow:0 15px 40px rgba(0,0,0,.35);

    overflow:hidden;

    position:relative;

}

.feature-card::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(181,202,28,.18),
        transparent
    );

    transition:.7s;

}

.feature-card:hover::before{

    left:100%;

}

.feature-card:hover{

    transform:translateY(-15px);

    border-color:var(--primary);

    box-shadow:

        0 20px 45px rgba(0,0,0,.4),

        0 0 30px rgba(181,202,28,.3);

}

.feature-card h3{

    color:var(--primary);

    margin-bottom:18px;

}

.feature-card p{

    font-size:16px;

    line-height:1.8;

}


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

.about{

    text-align:center;

    padding:50px 0;

}

.about p{

    max-width:900px;

    margin:30px auto 0;

    font-size:19px;

    color:#d9e2d6;

    line-height:2;

}


/*==============================
CM GROUP
==============================*/

.cm-group{

    text-align:center;

    padding:50px 0;

}

.cm-group .container{

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

    border:1px solid rgba(181,202,28,.18);

    border-radius:30px;

    padding:70px;

    backdrop-filter:blur(15px);

    box-shadow:0 20px 60px rgba(0,0,0,.35);

}

.cm-group h2{

    color:var(--primary);

    margin-bottom:18px;

}

.cm-group img{

    width:100%;

    max-width:200px;

    margin:40px auto;

    display:block;

    border-radius:24px;

    border:2px solid rgba(181,202,28,.2);

    transition:.5s;

    box-shadow:

        0 20px 50px rgba(0,0,0,.45);

}

.cm-group img:hover{

    transform:scale(1.03);

    box-shadow:

        0 25px 55px rgba(0,0,0,.45),

        0 0 30px rgba(181,202,28,.25);

}

.cm-group h3{

    margin-top:15px;

    color:#fff;

    font-size:34px;

}

.cm-group p{

    margin-top:20px;

    max-width:700px;

}


footer{

    padding:70px 20px;

    text-align:center;

    background:#08150F;

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

}

.footer-logo{

    width:180px;

    margin-bottom:20px;

}

.footer-tagline{

    color:#C8D4C4;

    margin-bottom:30px;

    font-size:16px;

}

.store-badges{

    margin-bottom:35px;

}

.store-badges img{

    max-width:260px;

    width:100%;

    transition:.35s ease;

}

.store-badges img:hover{

    transform:translateY(-5px) scale(1.03);

}

.footer-copy{

    color:#B9C4B7;

    font-size:15px;

    line-height:1.8;

}

.footer-copy span{

    margin:0 8px;

    color:#555;

}

.developer-link{

    color:#B5CA1C;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.developer-link:hover{

    color:#E5FF55;

    text-shadow:0 0 12px rgba(181,202,28,.6);

}
/*==============================
COMMON IMAGE
==============================*/

img{

    max-width:100%;

}


/*==============================
UTILITY
==============================*/

.text-center{

    text-align:center;

}

.mt-30{

    margin-top:30px;

}

.mt-50{

    margin-top:50px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-50{

    margin-bottom:50px;

}


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

section h2{

    position:relative;

    display:inline-block;

    padding-bottom:18px;

}

section h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:90px;

    height:4px;

    border-radius:20px;

    background:var(--primary);

}


/*==============================
CARD GLOW
==============================*/

.feature-card,
.countdown .box,
.cm-group .container{

    transition:.45s;

}

.feature-card:hover,
.countdown .box:hover{

    box-shadow:

    0 0 40px rgba(181,202,28,.25);

}


/*==============================
TEXT GLOW
==============================*/

.hero h1,
.features h2,
.gallery h2,
.video-section h2{

    text-shadow:

    0 0 20px rgba(181,202,28,.18);

}


/*==============================
END
==============================*/
/*=========================================
    SCROLL TO TOP BUTTON
=========================================*/

.scrollTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:linear-gradient(135deg,#B5CA1C,#7C9315);

    color:white;

    font-size:24px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:
        0 10px 25px rgba(0,0,0,.35),
        0 0 20px rgba(181,202,28,.25);

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:all .4s ease;

    z-index:9999;

}

/* Active State */

.scrollTop.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* Hover */

.scrollTop:hover{

    transform:translateY(-6px) scale(1.08);

    box-shadow:
        0 15px 35px rgba(0,0,0,.45),
        0 0 35px rgba(181,202,28,.5);

}

/* Click */

.scrollTop:active{

    transform:scale(.92);

}

/* Rotating Glow */

.scrollTop::before{

    content:"";

    position:absolute;

    inset:-4px;

    border-radius:50%;

    background:conic-gradient(
        from 0deg,
        transparent,
        rgba(181,202,28,.8),
        transparent
    );

    animation:rotateBorder 3s linear infinite;

    z-index:-1;

}

/* Inner Circle */

.scrollTop::after{

    content:"";

    position:absolute;

    inset:3px;

    border-radius:50%;

    background:#10211A;

    z-index:-1;

}

/* Rotation Animation */

@keyframes rotateBorder{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}@media(max-width:768px){

    .scrollTop{

        width:50px;

        height:50px;

        right:20px;

        bottom:20px;

        font-size:20px;

    }

}

.feature-icon{

    width:80px;
    height:80px;

    margin:0 auto 25px;

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

    border-radius:20px;

    background:rgba(181,202,28,.08);

    border:1px solid rgba(181,202,28,.15);

    transition:.4s;

}

.feature-icon svg{

    width:42px;
    height:42px;

    transition:.4s;

}

.feature-card:hover .feature-icon{

    transform:translateY(-8px);

    background:#B5CA1C;

    box-shadow:0 0 30px rgba(181,202,28,.35);

}

.feature-card:hover .feature-icon svg path,
.feature-card:hover .feature-icon svg rect,
.feature-card:hover .feature-icon svg circle{

    fill:#0B1610;

}
:root {
  --slides: 9;
  --slide-duration: 2000ms;
}
  
/* Slideshow Images START */
  .phone-slideshow-list li:nth-child(1) {
    background-image: url('../images/mobile-1.png'); /* PNG */
    background-color: pink;
  }
  .phone-slideshow-list li:nth-child(2) {
    background-image: url('../images/mobile-2.png'); /* JPG */
  }
  .phone-slideshow-list li:nth-child(3) {
    background-image: url('../images/mobile-3.jpeg'); /* JPG */
  }
  .phone-slideshow-list li:nth-child(4) {
    background-image: url('../images/mobile-4.jpeg'); /* JPG */
  }
  .phone-slideshow-list li:nth-child(5) {
    background-image: url('../images/mobile-5.jpeg'); /* PNG */
  }
  .phone-slideshow-list li:nth-child(6) {
    background-image: url('../images/mobile-1.png'); /* JPG */
  }
  .phone-slideshow-list li:nth-child(7) {
    background-image: url('../images/mobile-2.png'); /* PNG */
  }
  .phone-slideshow-list li:nth-child(8) {
    background-image: url('../images/mobile-3.jpeg'); /* PNG */
  }
  .phone-slideshow-list li:nth-child(9) {
    background-image: url('../images/mobile-4.jpeg'); /* PNG */
  }

/* Slideshow Images END */

.phone-slideshow {
  width: 100%;
  height: auto;
  max-width: 264px;
  margin: auto;
  position: relative;
  display: table;
}
    .phone-slideshow:before { /* Phone Template */
      content: "";
      display: block;
      width: 100%;
      height:0;
      padding-bottom: 206.13%;
      background: #0002;
      background: transparent url('https://www.goodwall.io/sandbox/wp-content/uploads/sites/5/2021/05/iphonex-black.png') no-repeat 50% 50%;
      background-size: contain;
      position:absolute;
      top:0;
      left:0;
      z-index: 2;
    }

.phone-slideshow .screen-mask {
    display: block;
    border: 1px solid purple;
    width: auto;
    height: 100%;
    margin: 3%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    padding-bottom: 199%;
    border-radius: 7%;
}

.phone-slideshow-list {
  list-style: none;
  position: absolute;
  top: 0;
  left: 0;
  display:block;
  width: calc(100% * var(--slides) );
  height: 100%;
  margin: 0;
  padding:0;
  display: flex;
  flex-direction: row;
    animation-name: phone-slideshow;
    animation-duration: calc(var(--slide-duration) * var(--slides));
    animation-iteration-count: infinite;
    animation-delay: 1s;
}

  .phone-slideshow-list li {
    display: block;
    width: calc(100% * var(--slides));
    width: 100%;
    height: 0%;
    padding-bottom: 23.75%;
    font-size: 5em;
    position: relative;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
  }

    .phone-slideshow-list li:first-child {
      z-index:-1;
      animation-name: first-loop;
      animation-duration: calc(var(--slide-duration) * var(--slides));
      animation-iteration-count: infinite;
      animation-delay: 1s;
    }


@keyframes phone-slideshow {
  0%   {left: 0;}
  5.5%  {left: calc( -100% ); }
  11%  {left: calc( -100% ); }
  16.5%  {left: calc( -100%*2 ); }
  22%  {left: calc( -100%*2 ); }
  27.5%  {left: calc( -100%*3 ); }
  33%  {left: calc( -100%*3 ); }
  38.5%  {left: calc( -100%*4 ); }
  44%  {left: calc( -100%*4 ); }
  49.5%  {left: calc( -100%*5 ); }
  55%  {left: calc( -100%*5 ); }
  60.5%  {left: calc( -100%*6 ); }
  66%  {left: calc( -100%*6 ); }
  71.5%  {left: calc( -100%*7 ); }
  77%  {left: calc( -100%*7 ); }
  82.5%  {left: calc( -100%*8 ); }
  88%  {left: calc( -100%*8 ); }
  93.5%  {left: calc( -100%*9 ); }
  99.99%  {left: calc( -100%*9 ); }
  100% {left: 0;}
}

@keyframes first-loop {
  0%   {left: 0;}
  47.99%  {left: 0; }
  48%  {left: calc( 100% ); }
  99.99%  {left: calc( 100% ); }
  100% {left: 0;}
}
/*=========================================
    MOBILE APP TITLE
=========================================*/

.mobile-app-title{

    text-align:center;

    max-width:700px;

    margin:0 auto 60px;

}

.mobile-app-title span{

    display:inline-block;

    color:#B5CA1C;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:4px;

    margin-bottom:15px;

}

.mobile-app-title h2{

    font-size:52px;

    font-weight:800;

    color:#ffffff;

    line-height:1.2;

    margin-bottom:20px;

}

.mobile-app-title p{

    font-size:18px;

    color:#C7D3C2;

    line-height:1.8;

    max-width:600px;

    margin:auto;

}

/*=========================
Responsive
=========================*/

@media(max-width:768px){

.mobile-app-title{

    margin-bottom:40px;

}

.mobile-app-title h2{

    font-size:36px;

}

.mobile-app-title p{

    font-size:16px;

}

}

@media(max-width:480px){

.mobile-app-title h2{

    font-size:30px;

}

.mobile-app-title span{

    font-size:12px;

    letter-spacing:3px;

}

.mobile-app-title p{

    font-size:15px;

}

}