@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Oswald:wght@200..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
body {
  margin: 0;
  padding: 0;
  font-family:"Oswald", sans-serif;
}
#main-container{width:100%; height:auto;}
#wrapper{max-width:100%;  width:100%; margin: 0 auto;position: relative;}
.clear{ clear: both;}
.box-1{float:left; width:50%;  background:url("../../assets/img/1.jpeg"); background-size: auto;background-position: center;background-repeat: repeat; height:200px;}
.box-2{float:left; width:50%;  background:url("../../assets/img/2.jpeg");  background-size: auto;  background-position: center;  background-repeat: repeat; height:200px;} 
.box-3{float:left; width:50%;  background:url("../../assets/img/4.jpeg");  background-size: auto;  background-position: center;background-repeat: repeat; height:200px;}
.box-4{float:left; width:50%;  background:url("../../assets/img/6.jpeg"); background-size: auto; background-position: center;  background-repeat: repeat; height:200px;} 
.my-button {background-color:transparent; color: white; padding: 10px 20px; border: 2px solid #fff;  border-radius: 5px;   font:600 15px  "Oswald", sans-serif; cursor: pointer;}
.my-button:hover {  background-color: #0fc4fa;}
.btn-2 button:hover{background-color:#bbee07}
.btn-3 button:hover{background-color:#bf54e0}
.btn-4 button:hover{background-color:#fbe101}
.btn-5 button:hover{background-color:#f45594}
.box-1-left{float:left; width:30%;padding:25px 35px; height: 200px;display: flex;flex-direction: column; }
.box-1-left h3{font:600 40px  "Oswald", sans-serif; color:#fff;} 
.knowmore-btn{  margin-top: auto; }
.box-1-right{float:left; width:50%; }
.box-1-right img{width:303px; height:100%;}
.box-2-right{float:right; width:34%;padding:25px 0px; height: 200px;display: flex; flex-direction: column; }
.box-2-right h3{font:600 40px  "Oswald", sans-serif; color:#fff;} 
.knowmore-btn{  margin-top: auto;position: relative;   z-index: 1; }
.box-2-left{float:left; width:58%;text-align: right; position:relative; z-index:0;}
.box-2-left img{width:303px; height:100%;}
.pentagon {      width: 470px;    height: 380px;   background: #3498db;   clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);   display: flex;    align-items: center;    justify-content: center;    color: white;}
.pentagon h2{font:600 40px  "Oswald", sans-serif; color:#fff; text-align:center}
.pentagon h2 span{font:800 76px  "Oswald", sans-serif; color:#fff;}
#boxes-main{position:relative;  width: 100%;}
#circle-img{       height: auto;    position: absolute;    top: 0%;    left: 65%;} 
#circle-img img{width:50%}
#delivery-img{      height: auto;    position: absolute;    top: 0;   left: 37%;}
#delivery-img img{    width:36%;}
#bottom-wrapper{max-width:100%;  width:100%;background:url("../../assets/img/5.jpeg"); background-size: auto;background-position: center;background-repeat: repeat; height:200;}
.bottom-right{   float: left;    width: 58%;    padding: 40px 35px 40px 50px;}
.bottom-right h2{font:600 40px  "Oswald", sans-serif; color:#fff;}
.bottom-right p{font: 18px "Lato", sans-serif; line-height:1.6;   color: #fff;   padding: 14px 0px 36px 0;   text-align: justify;}
.bottom-left img{width:75%}
.bottom-left{float:left; width:35%; padding: 10px 10px 10px;}
.brand::after {  content: "\2122";  font-size:40px;  vertical-align: super;  margin-left: 2px; color:#000}