*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif !important;
}

.mont{
    font-family: 'Montserrat',sans-serif;
}

.section1{
    background-color: #6E508B;
}

.page-title{
    color: #F4C89D;
    font-weight: 500;
    line-height: 156px;
    font-size: 7.375rem;
    letter-spacing: 0;
}

.support-btn{
    border: 2px solid #F4C89D !important;
    color: #F4C89D !important;
    line-height: 24px;
    font-size: 1.25rem;
    font-weight: 300;
    border-radius: 0;
    background-color: rgba(244, 200, 157, 0);
    transition: transform .3s cubic-bezier(.4,0,0,1) !important;
}

.support-btn:hover{
    background-color: #F4C89D !important;
    color:#9C74B6 !important;
    transform: scale(1.1);
}

.info-title{
    color: rgba(244, 200, 157, 1);
    font-size: 3.75rem;
    font-weight: 500;
    line-height: 79px;
}

.break{
    overflow-wrap: break-word;
}

.info-text{
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
}

.line{
    background-color: #fff;
    height: 2px;
}

.section2{
    background-color: rgba(156, 116, 182, 1);
}

.fw_medium{
    font-weight: 500;
}

/* section3 */
.section3{
    background-color: rgba(190, 149, 178, 1);
}

.info-title2{
    color:rgba(110, 80, 139, 1);
    font-size: 3.75rem;
    font-weight: 500;
    line-height: 79px;
}

.info-text2{
    color:rgba(110, 80, 139, 1);
    font-size: 1rem;
    font-weight: 400;
}

.line2{
    background-color: rgba(110, 80, 139, 1);
    height: 2px;
}

.footer{
    background-color: rgba(110, 80, 139, 1);
    color: rgba(244, 200, 157, 1);
    font-size: 1rem;
    font-weight: 400;
    line-height: 55px;
}

@media (max-width:576px){
    .page-title{
        font-size: 3.25rem;
        line-height: normal;
    }

    .info-title{
        font-size: 2rem;
        line-height: normal;
    }

    .info-title2{
        font-size: 2rem;
        line-height: normal;
    }
}


/* nav */
.offcanvas{
    background-color: #9C74B6 !important;
}

.nav-font{
    color:#F4C89D !important;
    font-size: 3.75rem !important;
    font-weight: 400 !important;
    font-family: 'Roboto', sans-serif !important;
    transition: transform .3s cubic-bezier(.4,0,0,1) !important;
    text-align: center !important;
}

.nav-font:hover{
    transform: skew(-16deg);
}

.floating {  
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    color:#F4C89D;
    font-size: 1.5rem;
    font-weight: 400;
}

.floating a {
    transition: transform .3s cubic-bezier(.4,0,0,1);
}

.floating a:hover {
    transform: skew(-16deg);
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }    
}

@media (max-width:576px){
    .nav-font{
        font-size: 1.5rem !important;
        line-height: normal;
    }
}

@media (min-width:576px) and (max-width:992px){
    .nav-font{
        font-size: 2.5rem !important;
        line-height: normal;
    }
}

.custom-close i{
    color: #6E508B !important;
    font-size: 2.5rem !important;
    margin: 0 10px;
    align-content: center;
}

.custom-close{
    aspect-ratio: 1/1 !important;
    border-radius: 50%;
    display: flex;
    align-self: center;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #fff;
    transition: transform .45s cubic-bezier(.4,0,0,1),opacity .45s cubic-bezier(.4,0,0,1) !important;
    padding: 0.2rem;
}

.custom-close:hover{
    border: 2px solid #6E508B !important;
    transform: scale(1.1);
}

.custom-toggler i::before{
    aspect-ratio: 1/1 !important;
    color:#6E508B !important;
    font-size: 	1.875rem !important;
    align-content: center !important;
    width: 50px !important;
    height: 50px !important;
    display: flex;
    align-self: center;
    flex-direction: column;
    justify-content: center;
}
.custom-toggler {
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    background-color: #fff !important;
    transition: transform .45s cubic-bezier(.4,0,0,1),opacity .45s cubic-bezier(.4,0,0,1) !important;
    display: flex !important;
    align-self: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1 !important;
    padding: 0.2rem;
}

.custom-toggler:hover{
    border: 2px solid #6E508B !important;
    transform: scale(1.1);
}

.navbar-toggler:active{
    border: 2px solid #fff !important;
}

.footer p{
    line-height: normal;
}

/* index.html */
.first-sec{
    background-color: #F4C89D;
    background-image: url(img/Final\ Project-01.png);
    width: 100%;
    height: 100%;
    background-size: cover;
}

.index-title{
    font-size: 7.375rem;
    font-weight: 600;
    color: #6E508B;
    line-height: 156px;
}

.index-text1{
    font-size: 1.5625rem;
    font-weight: 500;
    color:#6E508B;
}

.support-btn_index{
    color:#6E508B;
    border: 2px solid #6E508B;
    background: rgba(244, 200, 157, 0);
    font-size: 1.25rem;
    transition: transform .3s cubic-bezier(.4,0,0,1) !important;
}

.support-btn_index:hover{
    color: #F4C89D;
    background-color: #6E508B;
    transform: scale(1.1);
}


.index-text2{
    font-size: 1.5625rem;
    color:#F4C89D;
    font-weight: 500;
    line-height: 39px;
}

.sec-text_index{
    font-size: 1rem;
}

.number{
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #fff;
    font-size: medium;
    color: #9C74B6;
    line-height: normal;
    width: 36px;
}

.number-text{
    color: #fff !important;
    font-size: 1.5625rem;
}

.more-details{
    font-size: 0.6rem;
    color: #fff;
}

.more-details2{
    font-size: 0.6rem;
    color: #6E508B;
}

.footer_index{
    background-color: #F4C89D;
    color: #6F518B;
    font-size: 1rem;
    font-weight: 400;
    line-height: 55px;
}

.footer_index p{
    line-height: normal;
}

.footer-list a{
    cursor: context-menu;
}

.footer-list_index a{
    cursor: context-menu;
}

.footer-list_index a:hover{
    color: rgba(111, 81, 139, 0.7) !important;
}

.footer-list a:hover{
    color:rgba(244, 200, 157, 0.6) !important;
}

@media (max-width:576px){
    .index-title{
        font-size: 3rem;
        font-weight: 600;
        color: #6E508B;
        line-height: 5rem;
    }

    .index-text1{
        font-size: 1.8rem;
        font-weight: 600;
        color: #6E508B;
        line-height: 2rem;
    }
}

.info-text-page4-title{
    font-size: 1.5rem;
}


.mobile-gap{
    background-color: #F4C89D;
}

.icon a i{
    font-size: 3rem;
    color: #F4C89D;
}

@media (max-width:576px){
    .icon a i{
        font-size: 2rem;
    } 
}

.icon2 a i{
    font-size: 3rem;
    color: #6F518B;
}

@media (max-width:576px){
    .icon2 a i{
        font-size: 2rem;
    } 
}