/*=====================================================BASE SETUP=====================================================*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --primary:#f3943e;
    --secondary:#898989;
    --bg_color:#fffbfc;
    --pink_color:#ff9ec3;
    --brown_color:#c78d5e;
    --grey_color:#a9a1a4;
}
.primary_color{
    color: var(--primary);
}
.pink_color{
    color: var(--pink_color);
}
.brown_color{
    color: var(--brown_color);
}
.grey_color{
    color: var(--grey_color);
}
@font-face {
    font-family: Hey Kidos;
    src: url("../fonts/HeyKidos.ttf");
}
@font-face {
    font-family: calibri-regular;
    src: url("../fonts/calibri-regular.ttf");
}
@font-face {
    font-family: calibri-italic;
    src: url("../fonts/calibri-italic.ttf");
}
/*Container setup - This is the same, as Bootstrap containers*/
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px) {
    .container-sm, .container {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .container-md, .container-sm, .container {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px;
    }
}

.section_title h1, .section_title h2{
    font-family: Hey Kidos;
    text-align: center;
    font-size: 100px;
    font-weight: 500;
}
.section_title h2{
    padding: 25px;
    margin: 0;
}

/*=====================================================BASE SETUP=====================================================*/

/*===================================================header_section===================================================*/
#header{
    background: var(--primary);
    padding: 15px;
    color: white;
    font-size: 22px;
    text-align: center;
}
#header span{
    font-family: sans-serif;
}
.header_logo img {
    width: 520px;
    display: block;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 50px;
}
#header_section h1{
    padding-top: 50px;
    padding-bottom: 50px;
}
/*===================================================header_section===================================================*/

/*====================================================main_section====================================================*/
main{
    position: relative;
}
main p, main ul li{
    font-family: calibri-italic;
}
.border_box_one{
    border: 5px solid var(--primary);
    border-radius: 25px;
    display: flex;
    align-items: center;
    flex-direction: row;
    background: var(--bg_color);
}
.border_box_one_center{
    text-align: center;
    display: block;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    color: var(--secondary);
}
.border_box_one_center p {
    font-size: 22px;
    padding: 10px;
    font-style: italic;
}
.border_box_one_center img{
    text-align: center;
    display: block;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.border_box_one_img_right{
    text-align: right;
    display: block;
}

.border_box_two{
    position: relative;
    border: 5px solid var(--pink_color);
    border-radius: 25px;
    background: var(--bg_color);
    padding: 25px;
    margin-top: 50px;
}
.border_box_two p {
    font-size: 22px;
    color: var(--secondary);
    font-style: italic;
}
.border_box_two_right_top {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 25px;
    padding-top: 0;
}
.border_box_two_right_bottom {
    position: absolute;
    bottom: 5px;
    right: 5px;
    text-align: right;
    width: 420px;
    padding: 25px;
}

.border_box_two_center img {
    width: 420px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
}
.border_box_two_left {
    text-align: left;
    width: 420px;
}

.border_box_three {
    position: relative;
    border: 5px solid var(--pink_color);
    border-radius: 25px;
    background: var(--bg_color);
    padding: 25px;
    display: flex;
    align-items: end;
}
.border_box_three img{
    width: 240px;
}
.border_box_three_center {
    width: 420px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 22px;
    color: var(--secondary);
    background: var(--bg_color);
    margin-bottom: 70px;
}
.border_box_three_center p{
    font-style: italic;
}
.border_box_three_left{
    margin-bottom: 150px;
}

.border_box_four {
    position: relative;
    border: 5px solid var(--pink_color);
    border-radius: 25px;
    background: var(--bg_color);
    padding: 25px;
    font-size: 22px;
    display: flex;
    align-items: center;
}

.border_box_four p{
    color: var(--secondary);
    padding-top: 25px;
    padding-bottom: 25px;
}
.border_box_four ul li {
    list-style: none;
    color: var(--secondary);
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.border_box_four ul li img{
    padding-right: 15px;
}
.border_box_four_img{
    text-align: right;
    right: 0;
    margin-left: auto;
}
.border_box_four_img img{
    width: 240px;
}

.border_box_five{
    position: relative;
    border: 5px solid var(--pink_color);
    border-radius: 25px;
    background: var(--bg_color);
    padding: 25px;
    margin-top: 50px;
}
.border_box_five img{
    width: 240px;
}
.border_box_five p {
    font-size: 22px;
    text-align: center;
    color: var(--secondary);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 25px;
    font-style: italic;
}
.border_box_five img{
    width: 320px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
}
/*====================================================main_section====================================================*/

/*================================================CALL TO ACTION BUTTON================================================*/
.callToActionButton a {
    color: white;
    background: var(--primary);
    padding: 15px 25px;
    border-radius: 5px;
    text-align: center;
    display: block;
    width: 320px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 22px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-family: sans-serif;
}
.callToActionButton a:hover{
    background: var(--pink_color);
}
/*================================================CALL TO ACTION BUTTON================================================*/

/*=======================================================FOOTER========================================================*/
#footer {
    background: #2c2a2a;
    padding-top: 25px;
    padding-bottom: 25px;
    font-family: sans-serif;
}
.footer_box {
    display: block;
    text-align: center;
}
.footer_box_one{
    color: var(--primary);
}
.footer_box_one ul{
    margin: 0;
    padding: 0;
}
.footer_box_one ul li{
    font-size: 22px;
    list-style: none;
    margin-top: 25px;
    margin-bottom: 25px;
    color: var(--primary);
}
.footer_box_one ul li i{
    color: white;
}
.footer_box_one ul li a{
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 15px;
}
.footer_box_one ul li a:hover{
    color: var(--pink_color);
}
.footer_box_two {
    text-align: center;
    color: white;
    font-size: 22px;
    text-shadow: 0 5px 10px #000000d4;
}
/*=======================================================FOOTER========================================================*/

/*====================================================MEDIA QUERY======================================================*/
@media only screen and (max-width: 1199px){
    .border_box_two_left {
        width: 320px;
    }
    .border_box_two_right_bottom {
        width: 320px;
    }
    .border_box_three_center {
        width: 270px;
        margin-bottom: 0px;
    }
    .border_box_four {
        font-size: 18px;
    }
    .border_box_five p {
        font-size: 22px;
    }
}
@media only screen and (max-width: 991px){
    .border_box_two_right_top {
        position: relative;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        top: 0;
        padding: 0;
        padding-bottom: 25px;
    }
    .border_box_two_left {
        text-align: left;
        width: 100%;
    }
    .border_box_two_center img {
        width: 70%;
    }
    .border_box_two_right_bottom {
        position: relative;
        bottom: 0;
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        width: 100%;
        padding: 0;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .border_box_three {
        display: block;
    }
    .border_box_three_center {
        width: 100%;
    }
    .border_box_three_left {
        margin-bottom: 25px;
        text-align: center;
    }
    .border_box_three_right{
        margin-top: 25px;
        text-align: center;
    }
    .border_box_four {
        display: block;
        text-align: center;
    }
    .border_box_four_img {
        text-align: center;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}
@media only screen and (max-width: 768px){
    .section_title h1, .section_title h2 {
        font-size: 62px;
    }
    .header_logo img {
        width: 85%;
    }
    .border_box_one {
        display: block;
    }
    .no_phone{
        display: none;
    }
}
@media only screen and (max-width: 425px){
    #header span{
        font-size: 18px;
    }
    .section_title h1 {
        font-size: 80px;
    }
    .section_title h2{
        font-size: 56px;
    }
    .border_box_three_left img{
        width: 100%;
    }
    .border_box_three_right img{
        width: 100%;
    }
    .border_box_four_img img{
        width: 100%;
    }

    .border_box_four ul li {
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }
    .border_box_four ul li img {
        padding-right: 0;
        padding-bottom: 15px;
    }

    .border_box_five img{
        width: 100%;
    }
    .callToActionButton a {
        width: 100%;
    }
    .footer_box_two {
        font-size: 16px;
    }
}
/*====================================================MEDIA QUERY======================================================*/