@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
body{
    font-family: 'Poppins', sans-serif;
}

/* ----------------------------------------------------------------------------------
------------------------------------ Common Css---------------------------------- */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 80%;
    margin: 0 auto;
    margin-bottom: 40px;
    margin-top: 40px;
}
p{
    color: gray;
}
.red-color{
    color: #F4556F;
}

/* -------------------------------------------------------------------------------
------------------------------------- Navbar Css-------------------------------- */

nav{
    display: flex;
    justify-content: space-between;
}
.navigation>li{
    list-style: none;
    display: inline;
    margin-right: 15px;
}
.navigation>li>a{
    text-decoration: none; 
}
#nav-toggle-bar{
        display: none;
    }
.nav-toggler-icon{
        display: none;
} 

/* -------------------------------------------------------------------------------
----------------------------- Heading Banner Css-------------------------------- */
.banner{
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner {
  min-width: 240px;
  max-width: 100%;
  width: 100%;
}

.banner img {
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.banner:hover img {
  transform: scale(1.3) rotate(5deg);
}
.button-style{
    color: white;
    font-size: 18px;
    background-color: #E02C6D;
    margin-top: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 24px;
}
button:active{
    background-color: lightgreen; ;
    color: black;
}

/* -------------------------------------------------------------------------------
----------------------------- cards section Css-------------------------------- */


.popular{
    text-align: center;
    margin-bottom: 80px;
}
h2, h4{
    margin-bottom: 10px;
}
span p{
    display: inline-block;
}
.card{
    height: 490px;
    width: 330px;
    border-radius: 3%;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}
.card-details{
    padding: 4.5%;
}
.card-img>img{
    border-radius: 5%;
    padding: 4.5%;
}
.filled{
    color: #FB8A10;
}
.gray{
    color: gray;
}
.all-cards{
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
/* --------------------------------------------------------------------------------- ----------------------technical support section Css-------------------------------- */

.technical{
   text-align: center;
   margin: 3% auto;
}
.customer-support{
    display: flex;
    justify-content: space-evenly;
}
.black{
    color: black;
}




/* -------------------------------------------------------------------------------
----------------------------- footer section Css-------------------------------- */


footer{
    text-align: center;
    color: #fff;
    background-color: #0A0826;
}


/* -------------------------------------------------------------------------------
----------------------------- madia section Css-------------------------------- */

@media (max-width:800px) {
    .banner{
        grid-template-columns: 1fr;
        height: fit-content;
        flex-direction: column;
    }
    .banner-left{
        grid-auto-rows: auto;
        order: 2;
    }
    .banner-right{
        order: 1;
    }
    .all-cards{
        grid-template-columns: 1fr;
        height: fit-content;
        width: fit-content;
    }
    .customer-support{
        grid-template-columns: 1fr;
        height: fit-content;
        flex-direction: column;
    }
    .left-side{
        grid-auto-rows: auto;
        order: 1;
        width: fit-content;

    }
    .left-side>img{
        width: 100%;
    }
    .right-side{
        order: 2;
    }
    #nav-toggle-bar{
        display: hidden;
    }
    .nav-toggler-icon{
        display: block;
    }
    .navigation{
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        background-color: rgb(226, 83, 83);
        /* padding: 20px 0; */
        transform: translateY(-330px);
        transition: 1s ease-in-out;
    }
     .navigation li a{
        color: #121212;
    }
    #nav-toggle-bar:checked ~ .navigation{
        transform: translateY(0px);
    }
    nav{
        align-items: center;
    }
    .all-cards{
        align-items: center;

    }
}