/*
=====================================================
 Retro-Tech Solutions Website
 Main Stylesheet
=====================================================
*/


/* ==========================
   GLOBAL VARIABLES
========================== */

:root {

    --primary-color: #1E63FF;
    --secondary-color: #082E8B;
    --accent-color: #29A7FF;

    --dark-color: #071B4A;
    --text-color: #222222;

    --light-bg: #F7FAFD;
    --white: #FFFFFF;

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

    --transition:
    all 0.35s ease;

}





/* ==========================
   GLOBAL SETTINGS
========================== */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

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

    color:var(--text-color);

    background:#ffffff;

    overflow-x:hidden;

}



a {

    text-decoration:none;

    transition:var(--transition);

}



p {

    line-height:1.8;

    color:#555;

}





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


#scroll-progress {

    position:fixed;

    top:0;

    left:0;

    width:0%;

    height:4px;

    background:
    linear-gradient(
        90deg,
        var(--primary-color),
        var(--accent-color)
    );

    z-index:9999;

}





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


.retro-navbar{
    background:transparent;
    padding:15px 0;
    transition:.4s ease;
}



.retro-navbar.scrolled {


    background:white;

    padding:12px 0;

    box-shadow:
    0 5px 25px rgba(0,0,0,.08);

}



.navbar-logo {


    width:55px;

    height:55px;

    object-fit:contain;

}



.brand-name {

    margin-left:12px;

    font-weight:700;

    color:white;

    font-size:20px;

}



.retro-navbar.scrolled .brand-name {

    color:var(--secondary-color);

}



.nav-link {

    color:white;

    font-weight:400;

    margin-left:20px;

}



.retro-navbar.scrolled .nav-link {

    color:#082E8B;

}



.nav-link:hover {


    color:var(--accent-color);

}



.demo-btn {

    background:
    linear-gradient(
        135deg,
        var(--primary-color),
        var(--accent-color)
    );

    border:none;

    padding:12px 25px;

    border-radius:30px;

    color:white;

    font-weight:600;

}



.demo-btn:hover {


    transform:translateY(-3px);

    color:white;

}





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


.hero-section {


    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;


    background:

    linear-gradient(
        135deg,
        #082E8B,
        #1E63FF,
        #29A7FF
    );

}



.hero-section:before {


    content:"";

    position:absolute;

    inset:0;


    background-image:

    radial-gradient(
        rgba(255,255,255,.15) 1px,
        transparent 1px
    );

    background-size:35px 35px;


}



.hero-section .container {


    position:relative;

    z-index:2;

}





.hero-tag {


    display:inline-block;

    padding:8px 18px;

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

    border-radius:30px;

    color:white;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:20px;

}



.hero-section h1 {


    color:white;

    font-size:55px;

    font-weight:800;

    line-height:1.2;


}



.hero-section h1 span {


    display:block;

    color:#d8efff;

}



.hero-section p {


    color:white;

    font-size:18px;

    max-width:580px;

    margin:25px 0;

}





/* HERO BUTTONS */


.hero-buttons {


    display:flex;

    gap:15px;

    flex-wrap:wrap;

}



.btn-primary {


    background:white;

    color:var(--primary-color);

    border:none;

    padding:14px 32px;

    border-radius:30px;

    font-weight:600;

}



.btn-primary:hover {


    transform:translateY(-4px);

    color:var(--secondary-color);

}





.btn-outline-primary {


    border:2px solid white;

    color:white;

    padding:12px 32px;

    border-radius:30px;

    font-weight:600;

}



.btn-outline-primary:hover {


    background:white;

    color:var(--primary-color);

}





.hero-contact {


    display:flex;

    gap:25px;

    margin-top:35px;

    color:white;

    flex-wrap:wrap;

}



.hero-contact i {

    margin-right:8px;

}





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


.hero-image-container {


    position:relative;

}



.hero-image {


    width:100%;

    max-width:520px;

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

}



@keyframes floating {


    0%,100% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-15px);

    }

}




/* FLOATING CARDS */


.floating-card {


    position:absolute;

    background:white;

    padding:15px 20px;

    border-radius:15px;

    box-shadow:var(--shadow);

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

    color:var(--secondary-color);

}



.floating-card i {


    color:var(--primary-color);

    font-size:22px;

}



.card-one {


    top:15%;

    left:-5%;

}



.card-two {


    bottom:30%;

    right:-5%;

}



.card-three {


    bottom:5%;

    left:15%;

}





/* ==========================
   HERO BACKGROUND CIRCLES
========================== */


.hero-circle {


    position:absolute;

    border-radius:50%;

    filter:blur(5px);

}



.circle-one {


    width:300px;

    height:300px;

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

    top:-100px;

    right:-100px;

}



.circle-two {


    width:250px;

    height:250px;

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

    bottom:-100px;

    left:-100px;

}





/* ==========================
   PLACEHOLDER SECTION
========================== */


.intro-placeholder {


    padding:100px 0;

    background:var(--light-bg);

}



.intro-placeholder h2 {


    color:var(--secondary-color);

    font-weight:700;

    margin-bottom:20px;

}





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


.floating-whatsapp {


    position:fixed;

    bottom:25px;

    left:25px;


    width:60px;

    height:60px;


    background:#25D366;

    color:white;


    border-radius:50%;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:30px;


    z-index:999;


    animation:
    pulse 2s infinite;


}



@keyframes pulse {


    0% {

        box-shadow:0 0 0 0 rgba(37,211,102,.6);

    }


    70% {

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

    }


    100% {

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}





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


.back-to-top {


    position:fixed;


    bottom:30px;

    right:30px;


    width:50px;

    height:50px;


    border:none;

    border-radius:50%;


    background:
    var(--primary-color);


    color:white;


    display:none;


    z-index:999;


}





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


.retro-footer {


    background:
    var(--dark-color);


    color:white;


    padding:80px 0 20px;

}



.footer-logo {


    width:60px;

}



.footer-brand {


    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}



.retro-footer h4,
.retro-footer h5 {


    color:white;

    margin-bottom:25px;

}



.retro-footer p {


    color:#c8d5ef;

}



.footer-links,
.footer-contact {


    list-style:none;

    padding:0;

}



.footer-links li,
.footer-contact li {


    margin-bottom:12px;

    color:#c8d5ef;

}



.footer-links a,
.footer-contact a {


    color:#c8d5ef;

}



.footer-links a:hover {


    color:white;

}



.footer-social a {


    width:40px;

    height:40px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    color:white;

    margin-right:8px;

}



.footer-bottom {


    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    margin-top:30px;

}

/*=================================
 HERO PROMOTION CAROUSEL
==================================*/


.hero-image-container{

    position:relative;

}


.hero-promo-wrapper{


    position:absolute;


    bottom:-120px;


    left:0;


    width:95%;
    height:120px;


    overflow:hidden;


    border-radius:15px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.20);



    background:white;


}




.hero-promo-track{


    display:flex;


    width:max-content;


    animation:
    promoScroll 25s linear infinite;


}





.promo-item{


    width:320px;


    height:120px;


    padding:8px;


    flex-shrink:0;


}




.promo-item img{


    width:100%;


    height:100%;


    object-fit:cover;


    border-radius:12px;


}





@keyframes promoScroll{


    from{


        transform:translateX(0);


    }


    to{


        transform:translateX(-50%);


    }


}





.hero-promo-wrapper:hover
.hero-promo-track{


    animation-play-state:paused;


}