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

* {
   box-sizing: border-box;
   font-family: 'Open Sans', sans-serif;
}

body {
   margin: 0;
   padding: 0;
   background-color: #f0f0f0;
}

.header {
   display: flex;
   align-items: center;
   justify-content: space-around;
   padding: 10px;
   background-color: #FFFFFF;
   margin-bottom: 30px;
}

.header img {
   width: 100%;
   max-width: 266px;
}

.header p {
   margin: 0;
   font-size: 18px;
   font-family: "Roboto", sans-serif;
   color: #999;
}

.main {
   display: flex;
   flex-flow: column;
   margin: 0 auto;
   max-width: 1220px;
   padding: 10px 3% 30px;
   background-color: #fff;
}

.main .breadcrumbs {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
}

.main .breadcrumbs span {
   font-family: "Roboto", sans-serif;
}

.main .breadcrumbs span.blue {
   color: rgb(0, 102, 153);
   font-size: 15px;
   font-weight: 700;
}

.main .breadcrumbs span.data {
   color: rgb(123, 123, 123);
   font-size: 15px;
   font-weight: 400;
}

.main h1 {
   color: rgb(51, 51, 51);
   text-align: center;
   font-weight: 700;
   font-size: 45px;
}

.main h2 {
   font-family: 'Open Sans', sans-serif;
   font-size: 28px;
   color: #333333;
   margin: 12px 0;
}

.main p {
   font-family: 'Open Sans', sans-serif;
   font-size: 18px;
   color: rgb(51, 51, 51);
   margin: 12px 0;
}

.main a {
   font-family: 'Open Sans', sans-serif;
   font-size: 18px;
   color: rgb(51, 51, 51);
   text-decoration: underline;
}

.main a.blue {
   color: #006699;
   font-weight: 700;
}

.main h3 {
   text-align: center;
   font-family: "Roboto", sans-serif;
   color: #006699;
   font-weight: 700;
   font-size: 24px;
}

.main .ages-wrapper {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: center;
   gap: 5px;
}

.main .ages-wrapper .age {
   background-color: rgb(238, 238, 238);
   padding: 10px 30px;
   color: #006699;
   font-size: 22px;
   text-decoration: none;
   font-weight: 400;
}

.main p.red {
   font-size: 20px;
   color: rgb(192, 57, 43);
   font-weight: 700;
}

.main .offer {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 10px;
   margin: 20px auto;
   width: 100%;
   max-width: 485px;
   padding: 10px 20px;
   color: rgb(251, 251, 251);
   font-size: 24px;
   font-weight: 700;
   background: rgb(122, 193, 67);
   text-decoration: none;
   border-radius: 0px;
   transition: .3s all;
}

/* .main .offer:hover {
   transform: scale(1.2);
} */

.main .offer svg {
   width: 15px;
   height: 15px;
   fill: #fff;
}

.footer {
   display: flex;
   flex-flow: column;
   background-color: rgb(0, 102, 153);
}

.topfooter {
   padding: 10px;
   max-width: 1000px;
   margin: 0 auto;
}

.topfooter p {
   text-align: center;
   color: #fff;
   margin: 12px 0;
   font-family: "Roboto", sans-serif;
}

.topfooter a {
   color: #fff;
   font-family: "Roboto", sans-serif;
}

.bottomfooter {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: flex-end;
   gap: 10px;
   padding: 30px 10px;
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
}

.bottomfooter > div {
   display: flex;
   align-items: center;
   justify-content: center;
}

.bottomfooter a {
   font-family: "Roboto", sans-serif;
   color: #fff;
   text-decoration: none;
   transition: .3s all;
}
.bottomfooter a:hover {
   text-decoration: underline;
}

.mainimg {
   width: 100%;
}


@media (max-width: 768px) {
   .header {
      justify-content: space-between;
      margin-bottom: 10px;
   }

   .main h1 {
      font-size: 40px;
   }

   .main .ages-wrapper .age {
      font-size: 32px;
   }

   .main .offer {
      text-align: center;
   }

   .bottomfooter a {
      font-size: 14px;
   }
}