style.css

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
   }
   body {
        font-family: 'Patua One', light;
        background-color: rgb(255, 255, 255);
   }
/*NAVBAR*/
   a {
        text-decoration: none;
   }
   li {
        list-style: none;
   }
   .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 35px;
        background-color: rgba(255, 255, 255, 0.767);
        padding-left: 10%;
        padding-right: 10%;
        z-index: 2;
        box-shadow: 0px 2px 5px -4px rgba(0,0,0,0.75);
   }
   .nav-links a {
        color: rgb(128, 128, 128);
   }
   /* LOGO */
   .logo {
        font-size: 25px;
        color: rgb(21, 11, 117);
   }
   .logo a:visited{
        color: rgb(21, 11, 117);;
   }
   /* NAVBAR MENU */
   .menu {
        display: flex;
        gap: 2em;
        font-size: 16px;
        font-family: 'Patua One', cursive;
        font-family: 'Ubuntu', sans-serif; 
        font-family: 'Varela Round', sans-serif;
   }
   .menu li:hover {
        background-color: #1f55e9;
        border-radius: 5px;
        transition: 0.3s ease;
        color: white;
        box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.75);
   }
   .menu li a:hover{
        color: white;
   }
   .menu li {
        padding: 10px 15px;
   }
   input[type=checkbox]{
        display: none;
   } 
   /*HAMBURGER MENU*/
   .hamburger {
        display: none;
        font-size: 24px;
        user-select: none;
   }
   /* APPLYING MEDIA QUERIES */
   @media (max-width: 768px) {
   .menu { 
        display:none;
        position: absolute;
        background-color:teal;
        right: 0;
        left: 0;
        text-align: center;
        padding: 16px 0;
   }
   .menu li:hover {
        display: inline-block;
        background-color:#4d4c9e;
        transition: 0.3s ease;
   }
   .menu li + li {
        margin-top: 12px;
   }
   input[type=checkbox]:checked ~ .menu{
        display: block;
   }
   .hamburger {
        display: block;
   }
   }
   
   .triangulo1 {
     width: 0; 
     height: 0px; 
     border-top: 70px solid rgba(22, 11, 117, 0.068);
     border-right: 70px solid transparent;
     border-left: 70px solid transparent; 
     margin-left: -5%;
     position:absolute;
   }
   .triangulo2 {
     width: 0; 
     height: 0px; 
     border-top: 200px solid transparent;
     border-right: 250px solid rgba(22, 11, 117, 0.068);
     border-bottom: 250px solid transparent;
     padding-right: 38%;
     margin-top: -42%;
    }

/*SECTION 1*/
   .section1{
     width: 100%;
     padding-left: 10%;
   }
   .text{
     color: rgb(21, 11, 117);
     display: inline-block;
     width: 45%;
     padding-right: 15%;
     text-align: justify;
     margin-top: 15%;
     position: absolute;
   }
   .icon1{
        color: #ffd900;
        display: inline-block;
   }
   .circulo {
     width: 35px;
     height: 35px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: #ffe1393f;
     padding-left: 3%;
     padding-top: 3%;
}
   h1{
     font-size:50px;
     letter-spacing: 1.5pt;
   }
   p{
     font-family: 'Patua One', cursive;
     font-family: 'Ubuntu', sans-serif;
     font-family: 'Varela Round', sans-serif;
     color: rgb(128, 128, 128);
     line-height: 28px;
   }
   .img{
     margin-left: 45%;
     margin-top: 0%;
     width: 45%;
     display: inline-block;
   }
   .section1-1{
        display:inline-flex ;
        align-items: center;
        width: 50%;
   }
   .section1-1:hover{
     display: inline-flex;
     vertical-align: middle;
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     transition-duration: 0.3s;
     transition-property: transform;
     -webkit-transform: scale(1.1);
     transform: scale(1.1);
   }
   .section1-2{
     display:inline-flex ;
     align-items: center;
     width: 49%;
     }
     .section1-2:hover{
          display: inline-flex;
          vertical-align: middle;
          transform: translateZ(0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
          backface-visibility: hidden;
          -moz-osx-font-smoothing: grayscale;
          transition-duration: 0.3s;
          transition-property: transform;
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
     }
     .title{
          display: inline-block;
          font-size: 14px;
          margin-left: 5%;
          font-family: 'Patua One', cursive;
          font-family: 'Ubuntu', sans-serif; 
          font-family: 'Varela Round', sans-serif;
     }
     .section1-3{   
          width: 100%;
          display: inline-flex;
          align-items: center;
          padding-left: 1%;
     }
     .section1-3 .icon2{
          display: inline-block;
          font-size: 15px;
     }
     .section1-3 h2{
          display: inline-block;
          margin-left: 2%;
          color: #233872;
          font-family: 'Patua One', cursive;
          font-family: 'Ubuntu', sans-serif;
          font-family: 'Varela Round', sans-serif;
          font-size: 15px;
     }
     .cuadrado {
          width: 20px; 
          height: 20px; 
          background: #6cb1ee25;
          border-radius: 5px;
          box-shadow: 0px 4px 5px -4px rgba(0,0,0,0.75);
     }
     .icon2{
          margin-left: 10%;
          margin-top: 10%;
     }
     .section1-3:hover{
          display: inline-flex;
          vertical-align: middle;
          transform: translateZ(0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
          backface-visibility: hidden;
          -moz-osx-font-smoothing: grayscale;
          transition-duration: 0.3s;
          transition-property: transform;
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
     }
     .section1-4{
          display: flex;
          align-items: center;
          text-align: center;
          width: 170%;
          height: 80px;
          background-color: rgba(255, 255, 255, 0.822);
          box-shadow: 0px 4px 5px -6px rgba(0,0,0,0.75);
     }
     .section1-4 .icon3{
          margin-left: 4%;
          font-size: 15px;
          margin-top: 15%;
     }
     .section1-4 .cuadrado{
          display: inline-block;
          margin-left: 4%;
          width: 20px;
          height: 20px;
          text-align: center;
          box-shadow: 0px 4px 5px -4px rgba(0, 0, 0, 0);
          margin-top: -4%;
     }
     .section1-4 h2{
          display: inline-block;
          font-size: 15px;
          margin-left: 1%;
          font-family: 'Patua One', cursive;
          font-family: 'Ubuntu', sans-serif;
          font-family: 'Varela Round', sans-serif;
          color: rgb(119, 119, 119);
          margin-right: 10%;
          margin-top: -4%;
     }
     .button1{
          width: 100px;
          height: 40px;
          position:absolute;
          margin-left: 92%;
          background-color: #1f55e9;
          border-radius: 5px;
          color: white;
          box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.45);
          font-family: 'Patua One', cursive;
          font-family: 'Ubuntu', sans-serif;
          font-family: 'Varela Round', sans-serif;
          border: 0cm;
     }
     .section1-4-1{
          position:absolute;
          display:inline-block;
          margin-top: 30px;
          margin-left: -1%;
          width: 100%;
     }
     .section1-4-1 h2{
          margin-right: 11%;
          color: #233872;
     }

/*VACCINE IMAGES*/
     .imgVac{
         width: 100%;
         text-align: center;
         margin-right: 20%;
         align-items: center;
         opacity: 0.25;
         -webkit-filter: grayscale(1);
         filter: gray;
         filter: grayscale(1);
     }
     .vaccine{
          height: 20%;
          margin-right: 5%;
     }

/*SECTION 2*/
.section2{
     width: 100%;
     padding-left: 10%;
     align-items: center;
     display: flex;
   }
.section2-1{
     display: inline-block;
     width: 42%;
}
.section2-1-1{
     display: inline-block;
     width: 45%;
}
.section2 h1{
     color: rgb(21, 11, 117); 
     font-size: 40px;
}
.section2-1 p{
     line-height: 28px;
}
.triangulo3 {
     width: 0; 
     height: 0px; 
     border-top: 150px solid transparent;
     border-right: 150px solid rgba(22, 11, 117, 0.068);
     border-bottom: 150px solid transparent;
     margin-left: 45%;
     margin-top: -6%;
    }
    hr{
         height: 2px;
         position:relative;
         margin-left: 110%;
         width: 125%;
         margin-top: -3.3%;
         border: rgba(128, 128, 128, 0.027);
         background-color: rgba(128, 128, 128, 0.090);
    }

/*SECTION 3*/
     .section3{
          display: flex;
          margin-left: 10%;
     }
     .box{
          display: inline-block;
          margin-right: 3%;
          width: 20%;
          height: 280px;
          padding: 2%;
          box-shadow: 2px 2px 9px -5px rgba(0,0,0,0.45);
     }
     .section3 .cuadrado{
          width: 50px;
          height: 50px;
     }
     .section3 .icon4{
          margin-top: 10%;
          margin-left: 10%;
          font-size: 40px;
          color: #1f55e9;
     }
     .section3 h2{
          font-size: 20px;
          font-family: 'Patua One', cursive;
          font-family: 'Ubuntu', sans-serif;
          font-family: 'Varela Round', sans-serif;
          color: rgb(21, 11, 117);
     }
     .section3 p{
          font-size: 12px;
          line-height: 20px;
     }
     .box:hover{
          vertical-align: middle;
          transform: translateZ(0);
          backface-visibility: hidden;
          -moz-osx-font-smoothing: grayscale;
          transition-duration: 0.3s;
          transition-property: transform;
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
          box-shadow: 5px 4px 8px -5px rgba(0,0,0,0.75);
     }

/*SECTION 4*/
     .section4{
          width: 100%;
          align-items: center;
          display: flex;
     }
     .section4-1{
          display: inline-block;
          width: 45%;
     }
     .section4-2{
          display: inline-block;
          width: 45%;
          margin-left: 38%;
     }
     .section4 h1{
          color: rgb(21, 11, 117); 
          font-size: 40px;
     }
     .section4-1 p{
          line-height: 28px;
     }
     .section4 .triangulo4 {
          width: 0; 
          height: 0px; 
          border-left: 100px solid rgba(22, 11, 117, 0.068);
          border-top: 100px solid transparent;
          border-bottom: 120px solid transparent; 
          margin-top: -6%;
     }
     .section4 .section4-1 hr{
          height: 2px;
          width: 85%;
          position:absolute;
          margin-left: -50%;
          margin-top: -0.03%;
          border: rgba(128, 128, 128, 0.63);
          background-color: rgba(143, 79, 79, 0.09);
     }

/*SECTION 5*/
     .section5{
          width: 100%;   
          align-items: center;
          display: flex;
     }
     .section5-1{
          display: inline-block;
          margin-left: -10%;
          width: 50%;
          height: 432px;
          background-color: #1f55e9;
          margin-top: 1%;
          margin-right: 5%;
     }
     .section5-1 img{
          margin-top: -15%;
          width: 125%;
     }
     .section5-2{
          display: inline-block;
          width: 45%;
          text-align: center;
          align-items: center;
     }
     .box2{
          display: flex;
          align-items: center;
          text-align: center;
          margin-left: 15%;
          width: 70%;
          height: 60px;
          box-shadow: 2px 2px 9px -5px rgba(0,0,0,0.45);
     }
     .section5 .cuadrado{
          display: inline-block;
          margin-left: 10%;
          width: 25px;
          height: 25px;
          box-shadow: 0px 4px 2px -4px rgba(0,0,0,0.75);
     }
     .section5 .icon4{
          display: inline-block;
          margin-top: 2px;
          font-size: 22px;
          color: #1f55e9;
     }
     .section5 .cuadrado2{
          display: inline-block;
          width: 25px;
          height: 25px;
          background: #6cb1ee25;
          border-radius: 5px;
          box-shadow: 0px 4px 2px -4px rgba(0,0,0,0.75);
     }
     .section5 .icon5{
          display: inline-block;
          margin-right: 50%;
          margin-top: 2px;
          font-size: 22px;
          color: #1f55e9;
     }
     .section5 h2{
          font-size: 16px;
          display: inline-block;
          margin-left: 2%;
          margin-right: 10%;
          padding-inline-start: 5%;
          font-family: 'Patua One', cursive;
          font-family: 'Ubuntu', sans-serif;
          font-family: 'Varela Round', sans-serif;
          color: rgb(21, 11, 117);
     }
     .box2:hover{
          display: flex;
          vertical-align: middle;
          transform: translateZ(0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
          backface-visibility: hidden;
          -moz-osx-font-smoothing: grayscale;
          transition-duration: 0.3s;
          transition-property: transform;
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
          box-shadow: 5px 4px 8px -5px rgba(0,0,0,0.75);
          height: 150px;
     }
     .icon5:hover{
          transform: rotate(180deg);
     }

/*SECTION 6*/
     .section6{
          width: 100%;
          padding-left: 10%;
          align-items: center;
          display: flex;
     }
     .section6-1{
          display: inline-block;
          width: 42%;
     }
     .section6-1-1{
          display: inline-block;
          width: 45%;
     }
     .section6 h1{
          color: rgb(21, 11, 117); 
          font-size: 40px;
     }
     .section6-1 p{
          line-height: 28px;
     }
     .triangulo3 {
          width: 0; 
          height: 0px; 
          border-top: 150px solid transparent;
          border-right: 150px solid rgba(22, 11, 117, 0.068);
          border-bottom: 150px solid transparent;
          margin-left: 45%;
          margin-top: -6%;
     }
     hr{
          height: 2px;
          position:relative;
          margin-left: 110%;
          width: 125%;
          margin-top: -3.3%;
          border: rgba(128, 128, 128, 0.027);
          background-color: rgba(128, 128, 128, 0.090);
     }

     /*SECTION 7*/
     .section7{
          width: 100%;   
          align-items: center;
          display: flex;
     }
     .section7-1{
          display:inline-block;
          text-align: center;
          align-items: center;
          width: 40%;
          margin-left: 15%;
     }
     .section7-2{
          display: inline-block;
          text-align: center;
          margin-top: 5%;
          margin-right: -50%;
          width: 45%;
          height: 449px;
          background-color: #1f55e9;
     }
     .section7-2 img{
          margin-top: -22%;
          width: 70%;
     }
     .box3{
          display:inline-flex;
          text-align: center;
          margin-left: -15%;
          margin-right: 14.5%;
          width: 50%;
          height: 180px;
          box-shadow: 2px 2px 9px -5px rgba(0,0,0,0.45);
     }
     .section7 .cuadrado{
          display: inline-block;
          margin-left: 10%;
          margin-top: 13%;
          width: 60px;
          height: 45px;
          box-shadow: 0px 4px 2px -4px rgba(0,0,0,0.75);
     }
     .section7 .icon4{
          display: inline-block;
          margin-top: 8px;
          font-size: 30px;
          color: #1f55e9;
     }
     .section7 .cuadrado2{
          display: inline-block;
          width: 25px;
          height: 25px;
          background: #6cb1ee25;
          border-radius: 5px;
          box-shadow: 0px 4px 2px -4px rgba(0,0,0,0.75);
     }
     .section7 h2{
          font-size: 16px;
          display: inline-block;
          margin-left: 2%;
          margin-right: 10%;
          margin-top: 14%;
          padding-inline-start: 5%;
          font-family: 'Patua One', cursive;
          font-family: 'Ubuntu', sans-serif;
          font-family: 'Varela Round', sans-serif;
          color: rgb(21, 11, 117);
     }
     .section7 p{
          position: absolute;
          margin-top: 4.5%;
          margin-left: 8%;
          font-size: 10px;
     }
     .button2{
          position: absolute;
          margin-top: 8%;
          margin-left: 2.5%;
          width: 15%;
          height: 40px;
          background: #6cb1ee25;
          border-radius: 5px;
          color: #1f55e9;
          box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.45);
          font-family: 'Patua One', cursive;
          font-family: 'Ubuntu', sans-serif;
          font-family: 'Varela Round', sans-serif;
          border: 0cm;
     }
     .button2:hover{
          background-color: #1f55e9;
          border-radius: 5px;
          color: white;
          box-shadow: 0px 5px 5px -4px rgba(0,0,0,0.45);
          font-family: 'Patua One', cursive;
          font-family: 'Ubuntu', sans-serif;
          font-family: 'Varela Round', sans-serif;
          border: 0cm;
     }

/*FOOTER*/
.footer{
     width: 100%;
     height: 150px;
     background-color: #6cb1ee25;
     display: flex;
}
.footer h2{
     color: #1f55e9;
     letter-spacing: 0.8pt;
}
.footer h3{
     color: rgb(21, 11, 117);
     letter-spacing: 0.8pt;
}
.f1{
     width: 27%;
     height: 100%;
     padding-left: 9%;
     padding-top: 4%;
}
.f2{
     width: 73%;
     height: 100%;
     display: flex;
     margin-left: 20%;
     padding-top: 4%;
     align-items: center;
}
.f2-1{
     margin-left: 12%;
}
.f3{
     width: 100%;
     display: flex;
     background-color: #6cb1ee25;
}
.f3 .f3-1{
     display: flex;
     margin-left: -81.5%;
     margin-top: 7%;
     margin-right: 35%;
}
.f3 .f3-2{
     display: flex;
     margin-top: 7%;
}
.triangulo5{
     width: 0;
     height: 0;
     border-right: 180px solid transparent;
     border-top: 0px solid transparent;
     border-left: 140px solid transparent;
     border-bottom: 135px solid rgba(22, 11, 117, 0.068);
     margin-left: 65%;
}