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

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
}

@property --a {
   syntax: "<angle>";
   inherits: false;
   initial-value: 0deg;
}

#progress {
   height: 120px;
   aspect-ratio: 1/1;
   background: conic-gradient(rgb(55, 55, 199) var(--a), rgb(179, 236, 229) var(--a));
   border-radius: 50%;
   position: relative;
   transition: --a 2s linear;
}

#progress::before {
   position: absolute;
   content: "";
   width: 65px;
   background-color: #71e026;
   aspect-ratio: 1/1;
   border-radius: 50%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#progress:hover {
   --a: 360deg;
}

section{
   position: relative;
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content:flex-start;
   background : url(Badge3.jpg);
   background-size: cover;
   background-position: center;
}

header{
   position: relative;
   top: 0;
   width: 100;
   padding: 40px 100px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header .Logo{
   position: relative;
   color: #000;
   font-size: 69px;
   text-decoration: none;
   font-weight: 650;
   letter-spacing: 1px;
}

header .navigation a{
   color: #000;
   text-decoration: none;
   font-weight: 500;
   letter-spacing: 1px;
   padding: 2px 15px;
   border-radius: 20px;
   transition: 0.3s;
   transition-property: background;
}

header .navigation a:not(:last-child){
   margin-right: 30px;
}

header .navigation a:hover{
   background: #fff;
}

.wrapper {
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

.container {
   height: 400px;
   display: flex;
   flex-wrap: nowrap;
   justify-content: start;
}

.card {
   width: 80px;
   border-radius: .75rem;
   background-size: cover;
   cursor: pointer;
   overflow: hidden;
   border-radius: 2rem;
   margin: 0 10px;
   display: flex;
   align-items: flex-end;
   transition: .6s cubic-bezier(.28,-0.03,0,.99);
   box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.8);
}

.card > .row {
   color: white;
   display: flex;
   flex-wrap: nowrap;
}

.card > .row > .icon {
   background: #223;
   color: white;
   border-radius: 50%;
   width: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 15px;
}

.card > .row > .description {
   display: flex;
   justify-content: center;
   flex-direction: column;
   overflow: hidden;
   height: 80px;
   width: 520px;
   opacity: 0;
   transform: translateY(30px);
   transition-delay: .3s;
   transition: all .3s ease;
}

.description p {
   color: #b0b0ba;
   padding-top: 5px;
}

.description h4 {
   text-transform: uppercase;
}

input {
   display: none;
}

input:checked + label {
   width: 600px;
}

input:checked + label .description {
   opacity: 1 !important;
   transform: translateY(0) !important;
}

.card[for="c1"] {
   background-image: url(cert1.jpg);
}
.card[for="c2"] {
   background-image: url(cert2.jpg);
}
.card[for="c3"] {
   background-image: url(cert3.jpg);
}
.card[for="c4"] {
   background-image: url(cert4.jpg);
}

.card[for="c5"] {
   background-image: url(cert5.jpg);
}

.card[for="c6"] {
   background-image: url(cert6.jpg);
}

.content{
   max-width: 650px;   
   margin: 1px 100px;
   }
  
   .content .info h2{
      color: blue;
      font-size: 55px;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 2px;
      line-height: 60px;
      margin-bottom: 30px;
   }
  
   .content .info h2 span{
      color: #71e026;
      font-size: 50px;
      font-weight: 500;
   }
  
   .content .info p{
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 40px;
   }
  
   .content .info-btn{
      color: #fff;
      background: #226a80;
      text-decoration: none;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 2px;
      padding: 10px 20px;
      border-radius: 5px;
      transition: 0.3s;
      transition-property: background;
   }
  
   .content .info-btn:hover{
      background: #091f0e;
   }
  
   .media-icon{
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
   }
  
   .media-icon a{
      position: relative;
      color: rgb(28, 31, 28);
      font-size: 40px;
   }
  
   .media-icon a:not(:last-child){
      margin-right: 80px;
   }
  
   .media-icon a:hover{
      transform: scale(2.0);
   }
  
   label{
     display:flex;
   }
  
   #check{
     z-index: 3;
     display: none;
   }
  
  
  
   @media (max-width: 960px) {
     header .navigation{
        display: none;
     }
       
     label{
        display: block;
        font-size: 40px;
        cursor: pointer;
        transition: 0.3s;
        transition-property: color;
     }
  
     label:hover{
        color: #fff;
     }
     label .close-btn{
        display: none;
     }
     #check:checked ~ header .navigation{
        z-index: 2;
        position: fixed;
        background: rgb(176, 200, 207, 0.9);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
     }
     #check:checked ~ header .navigation a{
        font-weight: 700;
        margin-right: 0;
        margin-bottom: 50px;
        letter-spacing: 2px;
     }
     #check:checked ~ header label .menu-btn{
        display: none;
     }
  
     #check:checked ~ header label .close-btn{
        z-index: 2;
        display: block;
        position: fixed;
     }
  
     label .menu-btn{
        position: absolute;
     }
     header .Logo{
        position: absolute;
     }
  
     .content .info h2{
        font-size: 45px;
        line-height: 50px;
     }
  
     .content .info h2 span{
        font-size: 40px;
        font-weight: 600;
     }
     .content .info p{
        font-size: 14px;
     }
   }
  
   @media (max-width: 560px){
     .content .info h2{
        font-size: 35px;
        line-height: 40px;
     }
  
     .content .info h2 span{
        font-size: 30px;
        font-weight: 600;
     }
     .content .info p{
        font-size: 14px;
     }
   }