:root{
    --Dark-purple: #3A28DE;
    --Yellow: #FFE45E;
    --Pure-white: #FAFBFF;
    --Light-white:#E8E9FD;
    --Light-grey:#B5B5B5;
    --Black: #0F0F1E;
}

main{
    background:
    radial-gradient(circle at 0% 0%, rgb(58, 40, 222, 0.3), #0e0f1200 30%),
    radial-gradient(circle at 100% 40%, rgb(58, 40, 222, 0.2), #0e0f1200 20%),
    radial-gradient(circle at 0% 65%, rgb(58, 40, 222, 0.2), #0e0f1200 20%),
    radial-gradient(circle at 100% 10%, rgb(255, 228, 94, 0.3), #0e0f1200 20%),
    url(img/circle-background.png) no-repeat 75vw 25%,
    url(img/circle-background.png) no-repeat -15vw 80%;
  }
  #circle1{
    right: -20%;
    top: 100%; 
  }
  #circle2{
    left: -20%;
    top: 390%; 
  }

.certificate-container{
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 200px;
}
.cer-box{
    display: flex;
    background: var(--Light-white);
    padding: 30px 50px;
    flex-direction: column;
    border-radius: 30px;
    max-width: 48%;
}
.cer-box-r{
    display: flex;
    background: var(--Light-white);
    padding: 30px 50px;
    flex-direction: column;
    border-radius: 30px;
    max-width: 48%;
    width: 48%;
    justify-content: center;
}

li{
    font-weight: 600;
    font-size: 18px;
    line-height: 2.5;
}
.cer-title{
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

@media only screen and (min-width: 480px) and (max-width: 780px) {

    .certificate-container{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        padding-bottom: 100px;
        gap: 40px;
    }
    .cer-box{
        display: flex;
        background: var(--Light-white);
        padding: 30px 40px;
        flex-direction: column;
        border-radius: 30px;
        width: 100%;
        max-width: 100%;
    }
    .cer-box-r{
        display: flex;
        background: var(--Light-white);
        padding: 30px ;
        flex-direction: column;
        border-radius: 30px;
        max-width: 100%;
        width: 100%;
        justify-content: center;
    }
}

@media only screen and (min-width: 300px) and (max-width: 480px) {
    .certificate-container{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        padding-bottom: 100px;
        gap: 40px;
    }
    .cer-box{
        display: flex;
        background: var(--Light-white);
        padding: 30px 40px;
        flex-direction: column;
        border-radius: 30px;
        width: 100%;
        max-width: 100%;
    }
    .cer-box-r{
        display: flex;
        background: var(--Light-white);
        padding: 30px ;
        flex-direction: column;
        border-radius: 30px;
        max-width: 100%;
        width: 100%;
        justify-content: center;
    }

    main{
    background: 
    radial-gradient(circle at 0% 0%, rgb(58, 40, 222, 0.3), #0e0f1200 10%),
    radial-gradient(circle at 100% 40%, rgb(58, 40, 222, 0.3), #0e0f1200 20%),
    radial-gradient(circle at 0% 65%, rgb(58, 40, 222, 0.2), #0e0f1200 15%),
    radial-gradient(circle at 100% 10%, rgb(255, 228, 94, 0.3), #0e0f1200 20%),
    url(img/circle-background.png) no-repeat 45vw 25%,
    url(img/circle-background.png) no-repeat -45vw 50%;
      
    }
}