.main-container{
    max-width: 80%;
    margin: 1em auto;
}

.tablet-text{
    display: none;
}

.main-container > h1{
    text-align: center;
    color: #ffffff;
	font-size: 3rem;
    /* border: 1px solid black; */
}

.span-bold{
    position: relative;
    z-index: 0;
}

.underline{
    position: absolute;
    width: 100%;
    height: 10px;
    border-radius: 1em;
    z-index: -1;
    /* border: 1px solid black; */
    
}

.yellow-line{
    background-color: #FFD230;
    bottom: 5px;
    left: 0;
}

.green-line{
    background-color: #02D12F;
    left: 0;
    bottom: 5px;
}

.main-sub-container > div {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    font-size: 1.5em;
    color: #282828;
	transform: scale(0.78);
    
}

.top-banner {
  /* background-color: #ffeead; */
  /* margin: 10px; */
  /* background: rgb(124,198,253);
  background: linear-gradient(90deg, rgba(124,198,253,1) 0%, rgba(55,144,210,1) 100%); */
  background: rgb(55,144,210);
  background: linear-gradient(180deg, rgba(55,144,210,1) 0%, rgba(218,248,255,1) 80%);
  padding-top: 0.6em;
}


.main-sub-container {
    /* border: 1px solid red; */
	margin: 0 auto; 
	width: 85%;
    padding-top: 1em;
	padding-bottom: 3em;
    min-height: 450px;
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: 100px; */
}

.container-one{
    grid-column: 1 / 3 ;
    /* border: 1px solid #282828; */

}



.container-two{
    grid-column: 4 / -1;
    /* border: 1px solid #282828; */

}

.container-one{
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: 100px 100px 100px; */
}

.one{
    grid-column: 1 / 3;
}

.two{
    grid-column: 3 / 5;
}

.three{
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}

.four{
    grid-column: 3 / 5;
    grid-row: 2 / 3;
}

.five{
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}

.six{
    grid-column: 3 / 5;
    grid-row: 3 / 4;
}

.container-two{
    display: grid;
    grid-gap: 1em;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-rows: 100px 100px 100px; */
    /* border: 1px solid #282828; */

}

.seven{
    grid-column: 1 / -1;
}

.eight{
    grid-column: 1 / -1;
    grid-row: 2 / 3;
}

.nine{
    grid-column: 1 / -1;
    grid-row: 3 / 4;
}

.one, .two, .three, .four,
.five, .six, .seven, .eight,
.nine{
    background-color: #ffffff;
    /* border: 1px solid #282828; */
    border-radius: 1.25em;
    margin: 0.5em;
    display: flex;
    justify-content: center;
    align-items: center;

}


.square{
    height: 127.43px;
    width: 162.85px;
    position: relative;
}

.icon-img{
    display: block;

}

.square > .caption-div > h3{
    color: #495057;
    text-align: center;
	font-weight: 900;
    font-size: 0.8em;
}


.square > .caption-div{
    width: 131.83px;
    height: 75px;
    /* border: 1px solid red; */
    border-radius: 20px;
	box-shadow: 4px 4px 6px 2px #6c757d;
	display: flex;
	justify-content: center;
	align-items: center;

}

.container-one > .square > .caption-div{
    background-color: #FFD230;
}

.one-cap, .three-cap, .five-cap{
    position: absolute;
    bottom: -0.9em;
    left: -2em;
}


.two-cap, .four-cap, .six-cap{
    position: absolute;
    bottom: -0.9em;
    right: -2em;
}


.container-two > .square > .caption-div{
    background-color: #02D12F;
}

.seven-cap, .eight-cap, .nine-cap{
    position: absolute;
    bottom: -0.9em;
    right: -2em;

}

/* tablet design */

@media (max-width: 890px){

    

    .desktop-text{
        display: none;
    }

    .tablet-text{
        display: block;
        color: #ffffff;
        text-align: center;
        margin-top: 0;
    }

    .tablet-text-top{
        margin-top: -1.4em;
    }

    .main-sub-container{
        display: block;
    }

    .container-one{
        display: grid;
        grid-gap: 3px;
        grid-template-columns: repeat(6, 1fr);
        /* grid-template-rows: 100px 100px 100px; */
    }

    
    .one{
        grid-column: 1 / 3;
    }
    
    .two{
        grid-column: 3 / 5;
    }
    
    .three{
        grid-column: 5 / 7;
        grid-row: 1 / 2;
    }
    
    .four{
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
    
    .five{
        grid-column: 3 / 5;
        grid-row: 2 / 3;
    }
    
    .six{
        grid-column: 5 / 7;
        grid-row: 2 / 3;
    }


    .one-cap{
        position: absolute;
        bottom: -0.9em;
        left: -2em;
    }

    .four-cap{
        position: absolute;
        bottom: -0.9em;
        left: -2em;
    }
    
    
    #threeCap{
        position: absolute;
        bottom: -0.9em;
        right: -2em;
        left: unset;
    }

    .six-cap{
        position: absolute;
        bottom: -0.9em;
        right: -2em;
    }

    .two-cap{
        position: absolute;
        bottom: -0.8em;
        right: 0;
        left: 0.7em;

    }

    .five-cap{
        position: absolute;
        bottom: -0.8em;
        left: 0.7em;
        right: 0;
    }

    .square{
        height: auto;
        width: auto;
    }

    .main-container,
    .main-sub-container,
    .container-one,
    .container-two,
    .square{
        transform: scale(0.95);
    }

    /* container 2 */
    .container-two{
        display: grid;
        grid-gap: 3px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        /* border: 1px solid #282828; */
    
    }
    
    .seven{
        grid-column: 1 / 2;
    }
    
    .eight{
        grid-column: 2 / 3;
        grid-row: 1 / -1;
    }    
    
    .nine{
        grid-column: 3/ 4;
        grid-row: 1 / -1;

    }

    .seven-cap{
        right: 2em;
    }

    .eight-cap{
        left: 0.7em;
        right: 0;
    }


}

@media (max-width: 832px){
    .main-sub-container,
    .container-one,
    .container-two,
    .square{
        transform: scale(0.9);
    }
}


/* mobile */

@media ( max-width: 720px){

    .main-container{
        max-width: 95%;
    }

    .container-one{
        display: grid;
        grid-gap: 3px;
        grid-template-columns: repeat(4, 1fr);
        /* grid-template-rows: 100px 100px 100px; */
    }

    
    .one{
        grid-column: 1 / 3;
    }
    
    .two{
        grid-column: 3 / 5;
    }
    
    .three{
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }
    
    .four{
        grid-column: 3 / 5;
        grid-row: 2 / 3;
    }
    
    .five{
        grid-column: 1 / 3;
        grid-row: 3 / 5;
    }
    
    .six{
        grid-column: 3 / 5;
        grid-row: 3 / 5;
    }


    .one-cap{
        position: absolute;
        bottom: -0.9em;
        left: -2em;
    }


    .four-cap{
        position: absolute;
        bottom: -0.9em;
        right: -2em;
        left: unset;
    }
    
    
    #threeCap{
        position: absolute;
        bottom: -0.9em;
        left: -2em;
    }

    .six-cap{
        position: absolute;
        bottom: -0.9em;
        right: -2em;
    }

    .two-cap{
        position: absolute;
        bottom: -0.9em;
        right: -2em;
        left: unset;

    }

    .five-cap{
        position: absolute;
        bottom: -0.9em;
        left: -2em;
        right: unset;
    }

    .square{
        height: auto;
        width: auto;
    }


    /* container 2 */
    .container-two{
        display: grid;
        grid-gap: 3px;
        grid-template-columns: repeat(2, 1fr);
        /* grid-template-rows: 1fr; */
        /* border: 1px solid #282828; */
    
    }
    
    .seven{
        grid-column: 1 / 2;
    }
    
    .eight{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }    
    
    .nine{
        grid-column: 1 / -1;
        grid-row: 2 / -1;
        justify-self: center;
        width: 50%;

    }

    .seven-cap{
        right: unset;
        left: -2em;
    }

    .eight-cap{
        left: unset;
        right: -2em;
    }

    .nine-cap{
        left: unset;
        right: unset;
    }

}