body{
    padding: 0px;
    margin: 0px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* .poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
} */


.header{
    width: 100%;
    height: 450px;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    background-color: #2b69bb;
}

.header .topbar{
    display: flex;
    padding: 10px;
    align-items: center;
    background-color: #2b69bb;
    justify-content: space-between;
}

.header .topbar .logo-area{
    color: #000;
    font-weight: 600;
    font-size: 20px;
}

.header .topbar > ul{
    display: flex;
    list-style: none;

}

.header .topbar > ul li{
   padding: 10px;    
}

.header .topbar > ul li a{
   text-decoration: none; 
   color: #ddd;
   font-weight: bold;
   transition: all ease .3s;
}

.header .topbar > ul li a:hover{
    color: #757171;
    transition: all ease .3s;
}

.lead{
    width: 80%;
    padding: 20px;
    margin: 0px auto;
}

.lead .lead-header{
    font-weight: 600;
    font-size: 35px;
}

.header-content{
    width: 80%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 50px auto;
    /* border: 1px solid #277bab; */
}


.rotating-pentagon {
  width: 150px;
  height: 150px;
  /* background-color: #2b69bb; */
  background-color: #eeee;
  /* Define the 5 points of a pentagon */
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  
  /* Rotation animation */
  animation: rotatePentagon 5s linear infinite;
  
  /* Center on screen (optional) */
  margin: 50px auto;
}

@keyframes rotatePentagon {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.header-content .title{
    font-size: 10px !important;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.header-content .sub-title{
    
}

.style-sub{
    color: #eee;
}

.toggle-btn{
    display: none;
}

.learn-more-btn a{
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    transition: all ease .3s;
    background-color: #2b69bb;
    
}

.learn-more-btn a:hover{
    transition: all ease .3s;
    background-color: #477cc2;
}

.products-designs{
    width: 90%;
    height: 500px;
    display: flex;
    margin: 50px auto;
    align-items: center;
    /* border: 1px solid #ddd; */
    
    justify-content: space-between;
}

.products-designs .products-cards{
    width: 55%;
    margin: 5px;
    height: 450px;
    overflow: hidden;
    /* border-radius: 10px; */
    background-color: #eee;
    /* border: 1px solid #2b69bb; */
}

.products-designs .products-cards-img{
    width: 100%;
    height: 300px;
}

.products-designs .product-card-img img{
    width: 100%;
    height: auto;
}

.products-designs .product-card-header{
    font-weight: bold;
    font-size: 25px;
}
.products-designs .product-card-body{
    padding: 10px;
}

.products-designs .product-card-footer{
    padding: 10px;
}
.products-designs .product-card-footer a{
    padding: 10px 14px;
    color: #eee;
    text-decoration: none;
    background-color: #2b69bb;
}

.products-container{
    width: 100%;
    margin: 50px auto;
    background-color: #477cc2;
}

@media(max-width: 480px){
    .header{
        width: 100%;
    }

    .header .topbar ul{
        display: none;
    }

    .products-designs{
        width: 100%;
        height: auto;
        display: flex;
        margin: 50px auto;
        align-items: center;
        flex-direction: column;
        /* border: 1px solid #ddd; */
        justify-content: space-between;
}
    .products-designs .products-cards{
        width: 90%;
        margin: 5px;
        height: 500px;
        overflow: hidden;
        /* border-radius: 10px; */
        background-color: #eee;
        /* border: 1px solid #2b69bb; */
    }

    
    .products-designs .product-card-img img{
        width: 100%;
        height: 250px;
    }
}