@font-face {
    font-family: poppins;
    src: url(../fonts/Poppins/Poppins-Light.ttf);
}



:root{

    --dark: #d31717;
    --lantern-yellow: #f0a63c;
    --monk-orange:  #d88c3a;
    --light: rgb(255, 247, 235);
}


* {box-sizing: border-box;}


html{
    background-color: var(--lantern-yellow);
    scroll-behavior: smooth;
    overflow-x: hidden;
}



/* NAVBAR */
#navbar {
    overflow: hidden;
    background-color: transparent;
    padding: 0 0 0 0;
    transition: 0.4s;
    position: fixed;
    width: 100vw;
    z-index: 98;



    transition: all 0.1s ease;


    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    padding-top: 0.5vw;

}



#navbar a{
    text-align: center;
    line-height:0;
    text-decoration: none;
    font-size: 1.1vw;
    font-family: poppins;
    font-weight: 100;
    font-style: normal;
    color: #ffffff;

    transition: all 0.25s ease;
}

#navbar a:hover{
    transition: all ease-in-out 300ms;
    cursor: pointer;
    color: rgb(176, 27, 27);
}

#logo{
    position: fixed;
    transform: translate(-45.8vw, 0);
    margin-inline: 3.8vw;
}

#navbar #logo {
    transition: all 0.4s ease;
    color: white;
    font-family: "ivypresto-display", serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2.3vw;
    white-space: nowrap;
    margin-top: -0.4vw;
}

#second{
    position: fixed;
    transform: translate(-5vw, 3.7vh);
}

#navbar #logo-space{
    color: transparent;
    font-family: "ivypresto-display", serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2vw;
    margin-top: -0.4vw;
}


#link, #link1, #link2, #link3, #link4, #link5{
    margin-inline: 3.8vw;
}

#link4-1{
    margin-inline: 0.1vw;
}

#link5{
    font-size: 1.25vw;
    white-space: nowrap;
    background-color: rgb(219, 123, 41);
    padding: 0.5vw;

}

#link5:hover{
    background-color: rgba(253, 234, 26, 0.412);
    transition: all 1.5s ease-in-out;
}






/*DROPDOWN SERVICES MENU*/
.dropdown-content {
        text-align: center;
    line-height:0;
    text-decoration: none;
    font-size: 1.1vw;
    font-family: poppins;
    font-weight: 100;
    font-style: normal;
    color: #ffffff;

    transition: opacity 0.5s ease;

    display: block;
    opacity: 0;
    position: fixed;

    transform: translate(26vw, 5.2vh);
    z-index: 99;

    font-size: 1.1vw;
    color: rgb(255, 255, 255);

    height:10.2vh;

    padding-inline: 0.3vw;

    background-color: var(--monk-orange);
}

.dropdown-content span{
    display: flex;
    flex-flow: column nowrap;
    height: 10vh;
    color: #ffffff;
}

.dropdown-content #public-dropdown{
    height: 1.8vh; 
    text-align: left;
    text-decoration: none;
    color: #ffffff;
    transform: translateY(1.6vh);
}

.dropdown-content #org-dropdown{
    transform: translateY(3.3vh);
    text-align: left;
    text-decoration: none;
    color: #ffffff;
}
.dropdown-content #public-dropdown:hover{
    transition: all ease-in-out 300ms;
    cursor: pointer;

    color: rgb(176, 27, 27);
}

.dropdown-content #org-dropdown:hover{
    transition: all ease-in-out 300ms;
    cursor: pointer;

    color: rgb(176, 27, 27);
}

.dropdown-content #sunday-dropdown{
    transform: translateY(6.4vh);
    text-align: left;
    text-decoration: none;
    color: #ffffff;
}


.dropdown-content #sunday-dropdown:hover{
    transition: all ease-in-out 300ms;
    cursor: pointer;

    color: rgb(176, 27, 27);
}


.dropdown:hover .dropdown-content {
    display: block;
}





/* SCROLL STYLING */
.navbar.small {
    background-image: url(../images/nav-background.png);
    background-position: 0vh -15vh;
    background-size: 100%;
    background-repeat: no-repeat;
    padding-bottom: 0vh;

    font-size: 0.85vw;

}
















/*BODY*/

body{
    width: 100vw;
    height: auto;
    margin: 0;

    font-size: 1vw;
    font-family: poppins;
    font-weight: 100;
    color: #ffffff;
    text-align: center;
}



/* Front Page */
.front-page{
    width: auto;
    min-height: 100vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.front-page img{
    width: auto;
    height: 30vh;
}

#graph{
    width: 35vw;
    height: auto;  
}
#table{
    width: 25vw;
    height: auto;  
    
}

.front-page .left-side{
    height: auto;
    width: 100vw;
    text-align: center;
    margin-top: 3vh;
    padding-bottom: 5vh;
}

#flex-row{
    display: flex;
    flex-flow: row nowrap;
justify-content: center;
    align-items: center;
    gap: 4vw;
    margin-top: 5vh;
}

.front-page h3{
    color: white;
    font-size: 3.5vw;
    font-family: ivypresto-display, serif;
    font-weight: 100;
    font-style: normal;
    text-align: center;

    margin-top: 10vh;
    margin-bottom: 5vh;
}


.front-page .right-side{
    background-color: var(--monk-orange);

    height: auto;
    width: 100vw;
    padding-inline: 25vw;
    padding-top: 10vh;
    padding-bottom: 12vh;
}

.front-page .right-side div{
    font-family: poppins;
    font-size: 1vw;

    border:  1.5px solid white;
    border-radius: 200px;

    padding-top: 1.2vh;
    padding-bottom: 4vh;
    padding-inline: 4vw;

margin-top: 5vh;

}
.testimonial p{
    padding-top: 3vh;
    margin-bottom: 4vh;

}

#testimonial-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr 0.5fr;
    margin-inline: 11rem;
    place-items: center;

}

#testimonial-grid img{
    width: 11rem;
    height: auto;

}

#testimonial-grid p{
    margin-top: 0;
    margin-bottom: 0;

}

button, .button{ /*button class also styles the button on the register form with the .button class*/
    cursor: pointer;
    background-color: #ad200051;
    border: none;
    border-radius: 200px;
    padding:  0.5vw;
    color: white;
    font-family: ivypresto-display, serif;
    font-weight: 100;
    font-style:normal;
    font-size: 1.2vw;
}

.button:hover, button:hover{
    background-color: rgba(253, 234, 26, 0.412);
    transition: all 1.75s ease-in-out;
}



.button-text{
    color: white;
    font-family: ivypresto-display, serif;
    font-weight: 100;
    font-size: 1.25vw;
    text-align: center;
}





/* TABLE */
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid #ffffff;
      padding: 8px;
      text-align: left;
    }















/* FOOTER */
.footer{
    display: flex;
    flex-flow: row nowrap;
    justify-content:baseline;
    align-items: center;
    background-color: var(--lantern-yellow); 

    margin-top: 0;
    margin-bottom: 0;

    transform: translateY(0vw);
    transform: translateX(5vw);
}

.footer p{
    font-size: 1vw;
    font-family: poppins;
    font-weight: 100;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    transform: translateX(40vw);

    margin: 0 0 0 0;
}

.footer span{
    transform: translateX(65vw);
    font-size: 0.65vw;
}

.footer span a{
    text-decoration: none;
    color: aquamarine;
}


.nav {
    display: none;}












@media only screen and (max-width: 400px){
    #dropdown-mob-item a{

    font-size: 2.5rem !important;

    }

    #dropdown-mob-item2 a{

    font-size: 2rem !important;

    }
    #ebook-nav-mob a {
        font-size: 2.5rem !important;
    }
}




@media only screen and (max-width: 350px){


    #dropdown-mob-item2 a{

    font-size: 1.65rem !important;

    }

}


@media only screen and (max-width: 300px){


    #dropdown-mob-item2 a{

    font-size: 1.45rem !important;

    }
    #ebook-nav-mob a {
        font-size: 2rem !important;
    }
}


@media only screen and (max-width: 800px) {


    #navbar {
        display: none;
    }

    #dropdown-content {
        display: none;
    }

    .menu-btn {
        display: block;
    }

@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ivypresto-display, serif;
    font-size: 62.5%;
    font-size: 10px;
}
/*-- Inspiration taken from abdo steif -->
/* --> https://codepen.io/abdosteif/pen/bRoyMb?editors=1100*/

/* Navbar section */

.nav {
    display: block;
    width: 100vw;
    height: 65px;
    position: fixed;
    line-height: 65px;
    text-align: center;
    z-index: 99;


}

.nav div.logo {
    width: auto;
    height: auto;
    inset: 0;
    margin: auto;
    /* margin-top: -3vh; */
}

.nav div.logo a {
    text-decoration: none;
    color: #fff;
    font-size: 2.9rem;
    white-space: nowrap;
}

.nav div.logo a:hover {
    color: rgb(176, 27, 27);
}

.nav div.main_list {
    height: 65px;
    float: right;

}

    .nav div.main_list ul {
        width: 100%;
        height: 100vh;

        display: flex;
        flex-flow: column nowrap;

        background-color: var(--monk-orange);

        list-style: none;
        white-space: nowrap;

        margin: 0;
        padding: 0;
    }

    .nav div.main_list ul li {
        width: auto;
        height: 9.5vh;

        text-align: right;

        padding: 0;
    }

    .nav div.main_list ul li a {
        width: 100%;
        font-size: 2.7rem;
        color: #fff;
        text-align: center;
        text-decoration: none;
        line-height: 65px;
        padding: 20px;
        font-size: 3.5rem;
    }

    #dropdown-mob-item a{
        padding-right: 5vw;
        font-size: 2.55rem;
        white-space: nowrap;
    }

    #dropdown-mob-item2 a{
        padding-right: 5vw;
        font-size: 2.25rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #ebook-nav-mob a {
    font-size: 3.25rem;
    }

    .nav div.main_list ul li a:hover {
        color: rgb(176, 27, 27);
    }

/* Home section */

.navTrigger {
    display: none;
}

.nav {
    padding-top: 0px;
    padding-bottom: 20px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

    .navTrigger {
        display: block;
    }

    .nav div.main_list {
        width: 100%;
        height: 0;
        overflow: hidden;
    }
    .nav div.show_list {
        height: auto;
        display: none;
    }
  
    .nav div.media_button {
        display: block;
    }


/* Animation */
/* Inspiration taken from Dicson https://codemyui.com/simple-hamburger-menu-x-mark-animation/ */

.navTrigger {
    cursor: pointer;
    width: 30px;
    height: 25px;
    margin: auto;
    position: absolute;
    right: 30px;
    top: 7px;
    bottom: 0;
}

.navTrigger i {
    background-color: #fff;
    border-radius: 2px;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
}

.navTrigger i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
    animation: outBtm 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger.active i:nth-child(1) {
    -webkit-animation: inT 0.8s forwards;
    animation: inT 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
    -webkit-animation: inM 0.8s forwards;
    animation: inM 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
    -webkit-animation: inBtm 0.8s forwards;
    animation: inBtm 0.8s forwards;
}

@-webkit-keyframes inM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes inM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes outM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes inT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes outT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes outT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes inBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes inBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

@-webkit-keyframes outBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

.affix {
    /* padding: 0; */
    background-color: var(--monk-orange)
}

.myH2 {
	text-align:center;
	font-size: 4rem;
}

.myP {
	text-align: justify;
	padding-left:15%;
	padding-right:15%;
	font-size: 20px;
}

#dropdown-mob-item{
    display: none;

}
#dropdown-mob-item2{
    display: none;

}
#dropdown-mob-item3{
    display: none;

}















/*BODY*/

body{
    /* width: 100vw;
    height: auto;
    margin: 0;

    font-size: 1vw;
    font-family: poppins;
    font-weight: 100;
    color: #ffffff;
    text-align: center; */
}



/* Front Page */
.front-page{
    /* width: auto;
    min-height: 100vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center; */
}

.front-page img{
    /* width: auto;
    height: 30vh; */
}

#graph{
    /* 
    height: auto;   */width: 100vw;
    margin-bottom: 5vh;
}
#table{
    /* width: 25vw;
    height: auto;  
     */
}

.front-page .left-side{
    /* height: auto;
    width: 100vw;
    text-align: center;
    margin-top: 3vh;
    padding-bottom: 5vh; */
}

#flex-row{
    /* display: flex;

justify-content: center;
    align-items: center;
 */    flex-flow: column nowrap;    gap: 0vw;
    margin-top: 15vh;

}

.front-page h3{
    /* color: white;

    font-family: ivypresto-display, serif;
    font-weight: 100;
    font-style: normal;
    text-align: center;

    margin-top: 10vh;
    margin-bottom: 5vh; */    font-size: 3.25rem; 
}


.front-page .right-side{
    /* background-color: var(--monk-orange);

    height: auto;
    width: 100vw;

    padding-top: 10vh;
    padding-bottom: 12vh; */    padding-inline: 0vw;
}

.front-page .right-side div{    font-size: 3.5vw;
    border-radius: 0px; 
    /* font-family: poppins;





    padding-top: 1.2vh;
    padding-bottom: 4vh;


margin-top: 5vh; */        border:unset;
padding-inline: 0vw;

}
.testimonial p{
    /* padding-top: 3vh;
    margin-bottom: 4vh; */padding-inline: 5vw;

}

#testimonial-grid{
    /* display: grid;



    place-items: center; */    margin-inline: 0rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;



}
#t1, #t2, #t3, #t4, #t5{
        transform: translateY(10vh);
        font-size: 1.9rem;
}

#t1{
    grid-row: 1;
    grid-column: 1;

}
#t2{
    grid-row: 2;
    grid-column: 2;

}
#t3{
    grid-row: 3;
    grid-column: 1;
}
#t4{
    grid-row: 4;
    grid-column: 2;
}
#t5{
    grid-row: 5;
        grid-column: 1;
}


#s1{
    grid-row: 1;
    grid-column: 1;
}
#s2{
    grid-row: 2;
    grid-column: 2;
}
#s3{
    grid-row: 3;
        grid-column: 1;
}
#s4{
    grid-row: 4;
    grid-column: 2;
}
#s5{
    grid-row: 5;
        grid-column: 1;
}

#testimonial-grid img{
    /* width: 11rem;
    height: auto; */

}

#testimonial-grid p{
    /* margin-top: 0;
    margin-bottom: 0; */

}

button, .button{ /*button class also styles the button on the register form with the .button class*/
    /* cursor: pointer;
    background-color: #ad200051;
    border: none;
    border-radius: 200px;
    padding:  0.5vw;
    color: white;
    font-family: ivypresto-display, serif;
    font-weight: 100;
    font-style:normal;
    font-size: 1.2vw; */
}

.button:hover, button:hover{
    /* background-color: rgba(253, 234, 26, 0.412);
    transition: all 1.75s ease-in-out; */
}



.button-text{
    /* color: white;
    font-family: ivypresto-display, serif;
    font-weight: 100;
    font-size: 1.25vw;
    text-align: center; */
}





/* TABLE */
    table {
      /* border-collapse: collapse;
      width: 100%; */
        font-size: 1.5rem;
    }
    th, td {
      /* border: 1px solid #ffffff;
      padding: 8px;
      text-align: left; */
    }









/* MOBILE FOOTER */

.footer p{
    font-size: 2.5vw;
    transform: unset;
    inset: 0;
    margin: auto;
}
}