*{
    scroll-behavior: smooth;
}

body{
    display:flex;
    margin: 0;
    flex-direction: column;
    color: black;
    font-family: monospace, sans-serif, Arial;
    background-color:#8B4411;
}

/*Scroll Animaiton*/
.scroll-fade{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease-out, transform .5s ease-out;
}

.scroll-fade.is-inview{
    opacity: 1;
    transform: translateY(0);
}

.left{
    animation-name: left;
    animation-duration: 2s;
    animation-direction: normal;
}

.right{
    animation-name: right;
    animation-duration: 2s;
    animation-direction: normal;
}

.reveal{
    animation-name: reveal;
    animation-duration: 4s;
    animation-direction: normal;
}

/*Header*/
.background{
    background-image: url('pictures/good-faces-DavJROC1lBM-unsplash.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.header{
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
    position: sticky;
}

.other-header{
    top: 0;
    z-index: 1000;
    background-color:#8B4411;
}

.header a img{
    height: auto;
    width: 4rem;
    border-radius: 1rem;
    transition: all 1s ease;
}

.header a img:hover{
    border-radius: 4rem;
}

.navbar{
    display: flex;
    justify-content: center;
}

.navbar .nav{
    display: flex;
    gap: 2rem;
}

.navbar .nav a{
    text-decoration: none;
    gap: .25rem;
    padding: 1rem;
    margin-top: 1rem;
    transition: all .8s ease;
    color: white;
}

.navbar .nav a:hover{
    border-radius: 2rem;
    background-color: whitesmoke;
    color: rgb(159, 159, 45);
}

.header button{
    justify-content: center;
    display: inline-block;
    justify-content: center;
    text-align: center;
    transition: all .8s ease;
    font-size: 1rem;
    font-weight: bold;
    padding: 1rem;
    border-radius: 1rem;
    width: 8rem;
    margin-top: .75rem;
    background-color: transparent;
    color: white;
}

.header button:hover{
    cursor: pointer;
    color: white;
    border-radius: 2rem;
    color: rgb(159, 159, 45);
}

/*Naviagation*/
span, .closebtn{
    display: none;
}

/*Heading Catcher*/
.catchers-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: .25rem;
    color: white;
    text-align: center;
}

/*Footer*/
.footer{
    padding: 2rem 2rem;
}

.footer .stamp img{
    height: auto;
    width: 26rem;
}

.footer .footer-container{
    display: flex;
    padding: 2rem 2rem;
    justify-content: space-between;
}
.footer .footer-container h2{
    font-weight: bold;
    text-decoration: underline;
}
.footer .footer-container a{
    text-decoration: none;
    color: black;
    transition: all .8s ease;
}

.footer .footer-container a:hover{
    color: #FDFCE8;
}

.footer .footer-container .middle a{
    display: flex;
    flex-direction: column;
    padding-top: .75rem;
}

.footer .footer-container .right{
    text-align: center;

    i{
        font-size: 1.5rem;
    }
}

.sub-foot{
    display: flex;
    justify-content: center;
}

.sub-foot p{
    color: white;
    padding: 1rem;
    text-align: center;
    margin-bottom: 0;
    font-size:10px;
}

/*Book Now*/
.button{
    display: flex;
    justify-content: center;
}

.button-contain{
    padding: 1rem;
    border-radius: 1rem;
    transition: all .8s ease;
    cursor:pointer;
    font-weight: bold;
}

.button-contain:hover{
    border-radius: 2rem;
    background-color: whitesmoke;
    color: rgb(159, 159, 45);
}

/*Offer*/
.offer-container{
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    background-color:#FDFCE8;
}

.offer-container .bubble-1{
    text-align: center;
    padding: 1rem;
    border-radius: 2rem;
}

.offer-container .bubble-1 img{
    height: auto;
    width: 10rem;
}

.offer-container .bubble-2 img{
    height: auto;
    width: 10rem;
}

.offer-container .bubble-2{
    text-align: center;
    padding: 1rem;
    border-radius: 2rem;
}

/*Seller*/
.seller-container{
    padding: 2rem;
    background-color: beige;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}
.seller-container .seller{
    margin-left: 6rem;
}
.seller-container img{
    height: auto;
    width: 20rem;
    border-radius: 2rem;
    margin-left: 8rem;
}

.seller-container .seller ul{
    list-style-position: inside;
}

/*Programs*/
.program{
    padding: 2rem;
    background-color: antiquewhite;
}
.program .container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}

.program .container .link{
    margin-top: 4rem;
}

.program .container .link button{
    padding: 1rem;
    border-radius: 1rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.5rem;
    transition: all .8s ease;
}

.program .container .link button:hover{
    cursor: pointer;
    color: white;
    border-radius: 2rem;
    color: rgb(159, 159, 45);
}

/*About Page*/
.content-container{
    padding: 2rem;
    display: flex;
    flex-direction:column;
    align-items: center;
    background-color: #FFFFF0;
}

.meet-container .meet img{
    height: auto;
    width: 14rem;
    border-radius: 1rem;
}

.meet-container .story img{
    height: auto;
    width: 20rem;
    border-radius: 1rem;
}

/*Mission*/
.mission-container{
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    text-align: center;
    background-color: #FDFCE8;
}
.mission-container img{
    margin-top: 3rem;
    height: auto;
    width: 15rem;
    border-radius: 1rem;
}

/*Approach*/
.approach-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #EBDDBE;
}
.approach-container .accordion-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 50rem;
    height: auto;
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}
.approach-container .accordion-container .accordion{
    cursor: pointer;
    color: black;
    padding: .5rem;
    width: 100%;
    border:none;
    font-size: 1.25rem;
    text-align: left;
    outline: .05rem solid black;
    background-color: white;
    transition: background-color .3s ease;
}
.approach-container .accordion-container .accordion:hover,
.approach-container .accordion-container .accordion:focus{
    background-color: #f2f2f2;
}

.approach-container .accordion-container .panel{
    max-height: 0;
    overflow:hidden;
    padding: 0 1rem;
    outline: .05rem solid black;
    background-color: white;
    transition: max-height 0.4s ease, padding .3s ease;
}
.approach-container .accordion-container .panel.open{
    padding: 1rem;
}

/*Meet*/
.meet-container .meet, .story{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 2rem;
    background-color:wheat;
    text-align: center;
}

.ender{
    background-color: #f6e6c2;
    padding: 2rem;
    text-align: center;
}

/*Booking Page*/
.process-container{
    padding: 2rem;
    background-color:#FFFFF0;
}

.process-container .process{
    display: flex;
    gap: 3rem;
    justify-content: center;
}

.process-container .process .container{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;

    .circle{
        background-color: white;
        border-radius: 10rem;
        height: auto;
        width: 4rem;
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
    }
}

/*Steps*/
.bc-container{
    background-color: beige;
    padding: 2rem;

    .button{
        padding: 3rem;
        margin-top: 3rem;

        button{
            padding: .5rem;
            border-radius: 1rem;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.5rem;
            transition: all .8s ease;
            width: 30rem;
        }

        button:hover{
            border-radius: 2rem;
        }
    }
}

.bc-container .offer{
    text-align: center;

    h2{
        margin-bottom: 3rem;
    }
}

.bc-container .offer .offerings{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 2rem;

    .card{
        display: grid;
        grid-template-columns: 1fr 1fr;
        background-color: white;
        border-radius: 1rem;
        padding: 1rem;
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
    }
}

.bc-container .offer .offerings img{
    height: auto;
    width: 7rem;
}

.bc-container .offer .offerings-1{
    display: flex;
    gap: 0;
    justify-content: center;

    .card{
        display: grid;
        grid-template-columns: 1fr 1fr;
        background-color: white;
        border-radius: 1rem;
        padding: 1rem;
        width: 23rem;
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
    }
}

.bc-container .offer .offerings-1 img{
    height: auto;
    width: 7rem;
}

/*Date & Time*/
.date-container{
    padding: 2rem;
    background-color:antiquewhite;
}

.date-container .operation{
    text-align: center;
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
    width: fit-content;
    height: fit-content;
    margin-left: 19rem;
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);

    p{
        text-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
    }
}

.date-container .operation h2{
    text-align: center;
}

.date-container .date_time{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
}

.date-container .date_time .calendar{
    padding: 1rem;

    iframe{
        height: 30rem;
        width: 30rem;
        border-radius: 1rem;
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
    }
}

.date-container .date_time .time{
    text-align: center;
    background-color: #DEDFE4;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);

    h2{
        font-size: 1.18rem;
    }

    .slot{
        display: grid;
        grid-template-columns: 1fr 1fr;
        background-color:rgba(0, 0, 0, 0.4);
        padding: 1rem;
        border-radius: 1rem;
        margin-top: 1rem;
    }
}

.date-container .date_time .time .slot button{
    border-radius: 1rem;
    padding: .75rem;
    cursor: pointer;
    transition: all .8s ease;
}

.date-container .date_time .time .slot button:hover{
    border-radius: 2rem;
}

/*Booking Section*/
.new-line::after{
  content: "\A";
  white-space: pre;
}

.booking-section{
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  background-color:#EBDDBE;
}

.booking-section .button{
  padding: 1rem;
  cursor: pointer;
  border-radius: 1rem;
  width: 10rem;
  transition: all .8s ease;
}
.booking-section button:hover{
  border-radius: 2rem;
}

form{
  display: grid;
  grid-template-columns: auto;
  padding: 4rem;
  outline: 2px solid black;
  width: 20rem;
  border-radius: 1rem;
  
  label{
    font-size: 1.25rem;
  }
  input{
    margin-top: .5rem;
    padding: 1rem;
    border-radius: 1rem;
  }

  select{
    padding: .5rem;
    border-radius: 1rem;
  }

  textarea{
    padding: 1rem;
  }
}

.review{
  h2{
    text-align: center;
  }


}

/*FAQ*/
.student-container{
    padding: 1rem;
    background-color: #e2baa5;
    display: flex;
    flex-direction: column;
}

.student-container .student{
    padding: 1rem;

    h2{
        text-align: center;
    }
}

.student-container .student .info{
    outline: .1rem solid black;
    padding: 1rem;
    
    label{
        font-size: 1.25rem;
    }

    input{
        margin-bottom: 1rem;
        padding: .5rem;
        width: 50rem;
    }

    .button{
        text-align: center;

        button{
            font-size: 1.25rem;
            padding: 1rem;
            border-radius: 1rem;
            cursor: pointer;
            transition: all .8s ease;
        }

        button:hover{
            border-radius: 2rem;
            background-color: white;
        }
    }
}
.faq-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: wheat;
}
.accordion-container{
    display: flex;
    flex-direction: column;
    width: 50rem;
    height: auto;
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}
.faq-container .accordion-container .accordion{
    cursor: pointer;
    color: black;
    padding: .5rem;
    width: 100%;
    border:none;
    font-size: 1.25rem;
    text-align: left;
    outline: .05rem solid black;
    background-color: white;
    transition: background-color .3s ease;
}

.faq-container .accordion-container .accordion:hover,
.faq-container .accordion-container .accordion:focus{
    background-color: #f2f2f2;
}

.faq-container .accordion-container .panel{
    max-height: 0;
    overflow:hidden;
    padding: 0 1rem;
    outline: .05rem solid black;
    background-color: white;
    transition: max-height 0.4s ease, padding .3s ease;
}

/*Scholarship Page*/
.scholarship-catcher{
    background-color:#f9ebce;
    padding: 2rem;
    text-align: center;
}

.about-scholarship{
    text-align: center;
    padding: 2rem;
    background-color:#f6e6c2;

    .scholarship-cards{
        padding: 1rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;

        .card{
            outline: 2px solid black;
            background-color:white;
            padding: 1rem;
            border-radius: 1rem;
            box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
        }
    }
}

.requirements-container{
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    background-color:#EBDDBE;

    .statement{
        outline: 2px solid black;
        padding: 1rem;
        height: fit-content;
        margin-top:10rem;
        border-radius: 1rem;
        background-color: white;
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);

        h2{
            text-align: center;
        }
    }

    .check-list{
        background-color: white;
        outline: 2px solid black;
        padding: 1rem;
        border-radius: 1rem;
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.4);
    }
}