@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Poppins:ital,wght@0,100;0,300;0,400;1,500&family=Roboto+Condensed:ital,wght@0,400;0,700;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Roboto Condensed', sans-serif;
}
.body{
    max-width: 1200px;
    margin:0 auto;
}
section,header{
    margin:50px 0 ;
    padding:0 30px;
}
.section-heading{
    margin:100px auto 50px;
    text-align: center;
    font-size: 30px;
}
.primary-button{
    background-color: #E02C6D;
    color:#fff;
    border:none;
    border-radius:20px;
    padding:10px 20px;
    margin:20px 0;
    font-weight: 600;
    transition: .3s;
}
.primary-button:hover{
    background-color: #71203e;
}
.primary-button i{
    font-size: 18px;
    margin-left: 7px;
}

/*----------------------------*/
 /* Header deasign start  */
 /*--------------------------*/

.navbar{
    display:flex;
    justify-content: space-between;
    margin-top:50px;
    align-items: center;  
}
.nav-title{
   color:#3A3A3A;
   font-size: 20px;
}
.nav-manu{
    display:flex;
}
.nav-manu  li{
    list-style: none;
    padding:10px;
}
.nav-manu  li:hover{
    cursor: pointer;
}
.nav-manu li a{
    text-decoration: none ;
    color:#000;
}
.banner{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;   
    margin-top: 70px; 
}
.banner:hover img{
    transform: scale(1.1);
    transition: 1s ease-in;
}
.left-banner h1{
    color:#3A3A3A;
    padding:20px 0;
    font-size: 35px;
}
.left-banner p{
    color:#3A3A3A;
    padding:10px 0;
}
.right-banner img{
    width: 100%;
    justify-content:center;   
    display:inline-flex;
    margin-left:100px;
    transition: .5s;
}

/*----------------------------*/
 /* Header deasign end  */
 /*--------------------------*/

/*----------------------------*/
 /* logo section deasign start  */
 /*--------------------------*/

.logos{
     display:flex;
    justify-content: center;  
    align-items:center;
}
.logo{
    margin:10px;
    padding: 10px;
    cursor: pointer;
}

/*----------------------------*/
 /* logo section deasign end  */
 /*--------------------------*/

 /*----------------------------*/
 /* product section deasign start  */
 /*--------------------------*/

.product-container{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    }
.product-card{
    width:300px;
    height:475px;
    box-shadow: 2px  2px 20px #a6a3a3;
    border-radius:5px;
    padding:15px;
    margin: 20px;
}
.product-card img{
    width:270px;
    height:250px;
}
.product-detail{
    margin: top 15px;
    color:#18191F;
}
.product-detail .product-name{
    margin:10px 0;
    text-transform: capitalize;
    font-size: 25px;
}
.product-detail .price{
    margin-bottom:10px;
    font-size: 22px;
}
.ratting{
    display: flex;
    align-items: center;
    margin-bottom:20px ;
}
.icon{
    color:goldenrod;
    font-size: 20px;
    margin-right: 20px;  
}
.product-button{
    display:flex;
    justify-content: flex-end;
    border:none;
    color:#E02C6D;
    font-weight: 700;
    background: none;
    margin-right:20px;
}

/*----------------------------*/
 /* product section deasign end  */
 /*--------------------------*/

 #last-section{
    display: flex;
   margin: 0;
   }
   .web-part{
       width: 40%;
       margin-left:4%;
   }
   .web-part img{
       width: 75%;
       margin-left: 7%;
   }
   .myservice{
       text-align: center;
       font-weight: 700;
       font-size: 70px;
   }
 /*----------------------------*/
 /* footer deasign start  */
 /*--------------------------*/

.footer{
    padding:0;
    color:#fff;
    background-color: rgb(15, 15, 53);
    text-align: center;
    padding:20px 0;
}
.footer p{
    margin:8px 0;
}
.footer-icon i{
    padding:3px;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 2px;
}
.footer-icon i:hover{
    background:#E02C6D; 
}

/*----------------------------*/
 /*  footer deasign end  */
 /*--------------------------*/

/*-------small device ranponsive--------*/
 
@media only screen and (max-width:688px){
    
    .nav-title{
        margin:auto
    }
    .nav-manu{
        display: none;
    }    
    .banner{
         display:grid;
         grid-template-columns: 1fr;
     }
     .banner-description{
         min-width:300px;
         width:100%;
     }
     .left-banner,.right-banner{
         width:50%;
     }
     .right-banner{
         width:100%
     }
     .right-banner img{
         margin-left:0;
         width:100%
     }
     .left-banner h1{
         font-size: 30px;
     }
     .section-heading{
         font-size: 30px;;
     }
     /* header end  */

     /* logo start  */
     .logos{
         flex-wrap: wrap;
     }

     /* logo end  */

     /* product start  */

     .product-container{
         grid-template-columns: 1fr;
        grid-gap: 30px;
        }
     .product-card{
        justify-content: center;
        align-items: center;
        margin:  auto;
     }
     .product-button{
         margin:20px 30px 30px 0;
     }
     .card{
         width:100%
     }
     /* product start  */
     .footer{
         align-items: center;
     }

 }

 @media only screen and (min-width:688px) and (max-width:900px) {
    .banner{
        width:100%;
        display:grid;
        grid-template-columns: repeat(2,1fr);
    }
    .logos{
        flex-wrap:wrap;
    }
    .product-container{
        width:100%;
        grid-template-columns:repeat(2, 1fr);
    }
 }