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



/* ===================================================
   LARGE DEVICES
   1200px and below
=================================================== */

@media (max-width:1200px){


    .hero-section h1{

        font-size:48px;

    }


    .hero-image{

        max-width:450px;

    }



    .floating-card{

        transform:scale(.9);

    }



}





/* ===================================================
   TABLETS
   992px and below
=================================================== */

@media (max-width:992px){



    /* Navbar */


    .retro-navbar{

        background:white;

        padding:15px 0;

    }



    .brand-name{

        color:var(--secondary-color);

    }



    .nav-link{

        color:#333;

        margin-left:0;

        padding:12px 0;

    }



    .navbar-collapse{

        background:white;

        padding:20px;

        margin-top:15px;

        border-radius:15px;

        box-shadow:
        0 10px 30px rgba(0,0,0,.08);

    }



    .demo-btn{

        display:inline-block;

        margin-top:15px;

    }





    /* Hero */


    .hero-section{

        padding-top:120px;

        text-align:center;

    }



    .hero-section h1{

        font-size:42px;

    }



    .hero-section p{

        margin-left:auto;

        margin-right:auto;

    }



    .hero-buttons{

        justify-content:center;

    }



    .hero-contact{

        justify-content:center;

    }



    .hero-image-container{

        margin-top:60px;

    }




    .floating-card{


        font-size:13px;

    }



    .card-one{

        left:5%;

    }



    .card-two{

        right:5%;

    }





    /* Footer */


    .footer-bottom{

        flex-direction:column;

        text-align:center;

        gap:10px;

    }



}







/* ===================================================
   MOBILE DEVICES
   768px and below
=================================================== */

@media (max-width:768px){



    body{

        overflow-x:hidden;

    }




    /* Navbar */


    .navbar-logo{

        width:45px;

        height:45px;

    }



    .brand-name{

        font-size:16px;

    }





    /* Hero */


    .hero-section{

        min-height:auto;

        padding-bottom:80px;

    }



    .hero-section h1{

        font-size:34px;

        line-height:1.3;

    }



    .hero-tag{

        font-size:11px;

    }



    .hero-section p{

        font-size:16px;

    }



    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }



    .hero-buttons .btn{


        width:90%;

    }





    .hero-contact{

        flex-direction:column;

        gap:12px;

    }





    .hero-image{


        max-width:330px;

    }





    /* Floating Cards */


    .floating-card{


        padding:10px 15px;

        font-size:12px;

    }



    .floating-card i{

        font-size:16px;

    }



    .card-one{

        top:10%;

        left:0;

    }



    .card-two{

        right:0;

        bottom:25%;

    }



    .card-three{

        bottom:5%;

    }






    /* Sections */


    .intro-placeholder{

        padding:70px 20px;

    }



    .intro-placeholder h2{

        font-size:26px;

    }







    /* WhatsApp */


    .floating-whatsapp{


        width:55px;

        height:55px;


        left:15px;

        bottom:20px;


        font-size:25px;

    }





    /* Back To Top */


    .back-to-top{

        width:45px;

        height:45px;


        right:15px;

        bottom:20px;

    }



}







/* ===================================================
   SMALL PHONES
   480px and below
=================================================== */

@media (max-width:480px){



    .brand-name{

        display:none;

    }



    .hero-section h1{

        font-size:30px;

    }



    .hero-section p{

        font-size:15px;

    }



    .floating-card span{

        display:none;

    }



    .floating-card{

        width:45px;

        height:45px;

        justify-content:center;

        padding:0;

        border-radius:50%;

    }



    .hero-image{

        max-width:280px;

    }



}

@media(max-width:768px){


.hero-promo-wrapper{


    position:relative;


    bottom:auto;


    margin-top:30px;


}



.promo-item{


    width:220px;


    height:80px;


}


}