body {
    font-family: 'Proxima Nova', sans-serif;
    
}

img {
    width: 100%;
}

.container{
    max-width: 900px;
    margin: 0 auto;        
}

.wrapper {
    margin-top: 100px;
    margin-bottom: 100px;
    height: 500px;
    position: relative;
}

.text_on_image {
    font-size: 120px;
    color: #fff;
    position: absolute;
    margin-top: 200px;
    margin-left: 100px;
}

.intro_image {
    border-top: solid 20px rgb(0,24,134);
    border-bottom: solid 40px rgb(0,24,134);
}

h1 {
    font-size: 60px;
    text-transform: uppercase;
    letter-spacing: 2px; 
}

h2 {
    font-size: 36px;
}

h3{
    font-size: 36px;
}
.colum_text {
    padding: 50px;
    column-count: 2;
    column-gap: 40px;
    
    font-size: 20px;
    line-height: 1.5;
}

.circle {
    width: 400px;
    height: 400px;
    margin: 40px;
    border-radius: 50%;
    background-color: #658efd;
    float: left;
    position: relative;
}

/* left one */
.circle_over {
    width: 400px;
    height: 400px;
    margin: 40px;
    margin-top: 100px;
    margin-left: -10px;
    border-radius: 50%;
    background-color: ;
    position: absolute;
    
}

.circle_over_right {
    width: 400px;
    height: 400px;
    margin: 40px;
    margin-top: 60px;
    border-radius: 50%;
    background-color: ;
    position: absolute;
    right:-60px;
}

.circle_last {
    width: 400px;
    height: 400px;
    margin: 40px;
    border-radius: 50%;
    background-color: #658efd;
    float: left;
    position: relative;
}





.circle_text {
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

.circle_icons {
    font-size: 200px;
    color: #e3e3e3;
    opacity: 0.7;
    margin: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 20px;
  
}

.steps {
    width:400px;
    padding: 10px;
    float: left;
    background-color: rgb(247,252,254)
}

.clear {
    clear:both;
}

p {
   
}

/* ths code make the number bolded */
ol > li::marker {
    font-weight: bold;
    font-style: ;
}

ol {
    font-size: 18px;
}

ul {
    font-size: 18px;
}

li {
    padding-bottom: 10px;
    line-height: 1.5;
}

/* this is footer */
footer {
    background-color: #658efd;
    font-size: 14px;
    margin-top: 100px;
    padding: 50px;
    text-align: center;
}