/*====================================================
    EAGLE SP
    PREMIUM UNDER CONSTRUCTION PAGE
=====================================================*/

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

*{
    Margin:0;
    Padding:0;
    Box-sizing:border-box;
}

Html{
    Scroll-behavior:smooth;
}

Body{
    Font-family:’Poppins’,sans-serif;
    Color:#fff;
    Overflow-x:hidden;
    Background:#081421;
    Background-image:url("images/background.jpg");
    Background-size:cover;
    Background-position:center;
    Background-attachment:fixed;
    Animation:bgZoom 35s ease-in-out infinite alternate;
}

/*==============================
  OVERLAY
===============================*/

.overlay{
    Position:fixed;
    Inset:0;
    Background:rgba(3,15,32,.82);
    z-index:-1;
}

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

.hero{
    Min-height:100vh;
    Display:flex;
    Justify-content:center;
    Align-items:center;
    Padding:60px 20px;
}

.container{
    Width:100%;
    Max-width:1150px;
    Text-align:center;
}

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

.logo img{
    Width:80px;
    Max-width:90%;
    Animation:logoFloat 5s ease-in-out infinite;
    Filter:drop-shadow(0 0 20px rgba(255,215,0,.45));
}

/*==============================
 COMPANY NAME
===============================*/

.company-name{
    Margin-top:20px;
    Font-size:34px;
    Font-weight:700;
    Letter-spacing:1px;
}

.rc-number{
    Color:#FFD700;
    Margin-top:8px;
    Font-size:17px;
}

.slogan{
    Margin-top:15px;
    Color:#d8d8d8;
    Font-size:18px;
    Line-height:1.8;
}

/*==============================
 LAUNCH BADGE
===============================*/

.launch-badge{
    Display:inline-flex;
    Align-items:center;
    Gap:10px;
    Margin-top:35px;
    Padding:12px 28px;
    Background:#D4AF37;
    Color:#111;
    Border-radius:40px;
    Font-weight:600;
    Box-shadow:0 0 25px rgba(212,175,55,.35);
    Animation:pulse 2.5s infinite;
}

/*==============================
 MAIN TITLE
===============================*/

H1{
    Margin-top:35px;
    Font-size:58px;
    Line-height:1.2;
    Font-weight:800;
}

.intro{
    Max-width:820px;
    Margin:30px auto;
    Color:#e4e4e4;
    Line-height:1.9;
    Font-size:19px;
}

/*==============================
 COUNTDOWN
===============================*/

.countdown{
    Margin-top:45px;
    Display:flex;
    Justify-content:center;
    Gap:25px;
    Flex-wrap:wrap;
}

.time-box{
    Width:140px;
    Height:140px;
    Border-radius:18px;
    Background:rgba(255,255,255,.08);
    Backdrop-filter:blur(14px);
    Border:1px solid rgba(255,255,255,.12);
    Display:flex;
    Flex-direction:column;
    Justify-content:center;
    Align-items:center;
    Transition:.4s;
}

.time-box:hover{
    Transform:translateY(-8px);
    Box-shadow:0 15px 40px rgba(212,175,55,.25);
}

.time-box span{
    Font-size:48px;
    Color:#FFD700;
    Font-weight:700;
}

.time-box small{
    Margin-top:10px;
    Font-size:17px;
    Color:#ddd;
}

/*==============================
 PROGRESS BAR
===============================*/

.progress-section{
    Max-width:700px;
    Margin:60px auto;
}

.progress-bar{
    Width:100%;
    Height:18px;
    Background:#1b2f49;
    Border-radius:30px;
    Overflow:hidden;
}

.progress-fill{
    Width:75%;
    Height:100%;
    Background:linear-gradient(90deg,#FFD700,#D4AF37,#FFD700);
    Display:flex;
    Justify-content:flex-end;
    Align-items:center;
    Padding-right:12px;
    Color:#111;
    Font-size:13px;
    Font-weight:700;
    Animation:progressGlow 3s infinite;
}

.progress-section p{
    Margin-top:18px;
    Color:#ddd;
    Letter-spacing:1px;
}

/*==============================
 NOTIFY FORM
===============================*/

.notify-box{
    Margin:70px auto;
    Max-width:700px;
    Padding:40px;
    Border-radius:20px;
    Background:rgba(255,255,255,.08);
    Backdrop-filter:blur(12px);
    Border:1px solid rgba(255,255,255,.12);
}

.notify-box h2{
    Margin-bottom:25px;
    Color:#FFD700;
}

.notify-box form{
    Display:flex;
    Flex-wrap:wrap;
    Justify-content:center;
    Gap:15px;
}

.notify-box input{
    Flex:1;
    Min-width:260px;
    Padding:16px;
    Border:none;
    Border-radius:8px;
    Outline:none;
    Font-size:16px;
}

.notify-box button{
    Padding:16px 30px;
    Border:none;
    Background:#D4AF37;
    Color:#111;
    Border-radius:8px;
    Font-weight:600;
    Cursor:pointer;
    Transition:.4s;
}

.notify-box button:hover{
    Background:#FFD700;
    Transform:translateY(-3px);
}

/*==============================
 ANIMATIONS
===============================*/

@keyframes bgZoom{
    From{
        Background-size:100%;
    }

    To{
        Background-size:110%;
    }
}

@keyframes logoFloat{
    0%{
        Transform:translateY(0);
    }

    50%{
        Transform:translateY(-10px);
    }

    100%{
        Transform:translateY(0);
    }
}

@keyframes pulse{
    0%{
        Transform:scale(1);
    }

    50%{
        Transform:scale(1.05);
    }

    100%{
        Transform:scale(1);
    }
}

@keyframes progressGlow{

    0%{
        Box-shadow:0 0 10px rgba(255,215,0,.2);
    }

    50%{
        Box-shadow:0 0 25px rgba(255,215,0,.6);
    }

    100%{
        Box-shadow:0 0 10px rgba(255,215,0,.2);
    }
}

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

.contact-section{
    Margin:70px auto;
    Max-width:850px;
}

.contact-card{
    Background:rgba(255,255,255,.08);
    Backdrop-filter:blur(15px);
    Border:1px solid rgba(255,255,255,.10);
    Border-radius:20px;
    Padding:45px;
    Transition:.4s;
}

.contact-card:hover{
    Transform:translateY(-8px);
    Box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.contact-card h2{
    Color:#FFD700;
    Margin-bottom:30px;
    Font-size:32px;
}

.contact-item{
    Display:flex;
    Align-items:center;
    Gap:18px;
    Margin:22px 0;
    Font-size:18px;
}

.contact-item i{
    Width:55px;
    Height:55px;
    Line-height:55px;
    Text-align:center;
    Border-radius:50%;
    Background:#D4AF37;
    Color:#111;
    Font-size:22px;
}

.contact-item a{
    Color:#fff;
    Text-decoration:none;
    Transition:.3s;
}

.contact-item a:hover{
    Color:#FFD700;
}

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

.social-icons{
    Margin:55px 0;
    Display:flex;
    Justify-content:center;
    Flex-wrap:wrap;
    Gap:18px;
}

.social-icons a{
    Width:60px;
    Height:60px;
    Display:flex;
    Justify-content:center;
    Align-items:center;
    Border-radius:50%;
    Background:rgba(255,255,255,.10);
    Color:#fff;
    Text-decoration:none;
    Font-size:24px;
    Transition:.4s;
}

.social-icons a:hover{
    Background:#FFD700;
    Color:#111;
    Transform:translateY(-10px) rotate(360deg);
}

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

.whatsapp{
    Position:fixed;
    Right:25px;
    Bottom:30px;
    Width:70px;
    Height:70px;
    Border-radius:50%;
    Background:#25D366;
    Display:flex;
    Justify-content:center;
    Align-items:center;
    Color:#fff;
    Font-size:36px;
    Text-decoration:none;
    z-index:999;
    box-shadow:0 12px 30px rgba(0,0,0,.35);
    animation:whatsappPulse 2s infinite;
}

.whatsapp:hover{
    Transform:scale(1.12);
}

/*=========================================
    BACK TO TOP
=========================================*/

#topBtn{
    Position:fixed;
    Left:25px;
    Bottom:30px;
    Width:55px;
    Height:55px;
    Border:none;
    Border-radius:50%;
    Background:#FFD700;
    Color:#111;
    Font-size:22px;
    Cursor:pointer;
    Display:none;
    Transition:.4s;
    z-index:999;
}

#topBtn:hover{
    Transform:translateY(-6px);
}

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

Footer{
    Margin-top:70px;
    Padding:30px;
    Text-align:center;
    Background:#06111E;
    Color:#ccc;
    Font-size:16px;
    Border-top:1px solid rgba(255,255,255,.08);
}

Footer span{
    Color:#FFD700;
}

/*=========================================
    EXTRA ANIMATIONS
=========================================*/
@keyframes whatsappPulse{

0%{
Transform:scale(1);
Box-shadow:0 0 0 rgba(37,211,102,.5);
}

50%{
Transform:scale(1.08);
Box-shadow:0 0 25px rgba(37,211,102,.7);
}

100%{
Transform:scale(1);
Box-shadow:0 0 0 rgba(37,211,102,.5);
}
}

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

@media(max-width:992px){

H1{
Font-size:48px;
}

.company-name{
Font-size:28px;
}

.time-box{
Width:120px;
Height:120px;
}

.time-box span{
Font-size:40px;
}
}

@media(max-width:768px){
.hero{
Padding:40px 20px;
}

.logo img{
Width:140px;
}

.company-name{
Font-size:24px;
}

.slogan{
Font-size:16px;
}

H1{
Font-size:38px;
}

.intro{
Font-size:16px;
}

.countdown{
Gap:15px;
}

.time-box{
Width:95px;
Height:95px;
}

.time-box span{
Font-size:30px;
}

.time-box small{
Font-size:14px;
}

.contact-card{
Padding:30px;
}

.contact-item{
Flex-direction:column;
Text-align:center;
Gap:10px;
}

.notify-box{
Padding:30px;
}

.notify-box form{
Flex-direction:column;
}

.notify-box input,

.notify-box button{
Width:100%;
}

.social-icons a{
Width:52px;
Height:52px;
Font-size:20px;
}

.whatsapp{
Width:60px;
Height:60px;
Font-size:30px;
}
}

@media(max-width:480px){
.logo img{
Width:120px;
}

.company-name{
Font-size:20px;
}

.rc-number{
Font-size:15px;
}

.launch-badge{
Font-size:14px;
Padding:10px 20px;
}

H1{
Font-size:30px;
}

.intro{
Font-size:15px;
}

.contact-card h2{
Font-size:26px;
}

.contact-item{
Font-size:15px;
}

Footer{
Font-size:14px;
}
}