html {
    scroll-behavior: smooth;
    
  }

body {
    font-family: 'Sora', sans-serif;
}

.maindiv {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

.mydark {
    color: #2F2551;
}

.mydarkbg {
    background-color: #2F2551;

}

.mylightgreybg {

    background-color: #EFEDF6;
}

.mywhite {
    color: #fff
}

.mywhitebg {
    background-color: #fff;
}

.myleftpad {
    margin-left: 2rem;
}

.myautoleft {
    margin-left: auto;
}

.myautoright {
    margin-right: auto;
}

.mymtauto {
    margin-top: auto;
}

.myselected {
    border: 1px solid #fff;
    background-color: #ffffff31;
    border-radius: 8px;
}

.seeborder {
    border: 1px solid red;
}

.seeborder2 {
    border: 1px solid rgb(0, 255, 42);
}

.mymaxw100 {
    max-width: 30px;
}

.mymaxh50 {
    max-height: 70px;
}

.mynavtext {
    font-family: Sora;
    font-size: 1rem;
    font-weight: 300;
}

.mygreenbackground {
    background-color: #5CC2A7;
}

.mybluebackground {
    background-color: #2F2551;
}

.mygradientbackground {
    background: linear-gradient(180deg, #FFC857 0%, #F15E5E 100%);
}

.cblue {
    color: #2F2551;
}

.myherotxt {
    font-family: Dela Gothic One;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 105%;
}

.mycardtxt {
font-family: Sora;
font-size: 1.125rem;
line-height: 140%; /* 1.575rem */
}

.mycard {
border-radius: 1.375rem;
background-color: #fff;
}

.mycardtxt_s {
    font-family: Sora;
    font-size: 0.9rem;
    line-height: 140%; /* 1.575rem */
    }


/*

My starndards

*/

.myh0 {
    font-family: Dela Gothic One;
    font-size: 3rem;
    font-weight: 400;
    line-height: 105%;
}

.myh1 {
    font-family: Dela Gothic One;
    font-size: 2.8rem;
    font-weight: 400;
    line-height: 105%;
}

.myh2 {
    font-family: Dela Gothic One;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 105%;
}


.myh3 {
    font-family: Dela Gothic One;
    font-size: 2rem;
    font-weight: 400;
    line-height: 105%;
}


.myh4 {
    font-family: Dela Gothic One;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 105%;
}

.myh5 {
    font-family: Dela Gothic One;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 105%;
}


.myp2 {
    font-family: Sora;
    font-size: 1.3rem;
}

.herosize {}

.heroimg {
    width: 100%;
}

.redtitle {
    font-family: Dela Gothic One;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 80%;
    color: #fff;
    background-color: #F15E5E;
}

.bluetitle {
    font-family: Dela Gothic One;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 80%;
    color: #fff;
    background-color: #2F2551;
}



/*
Bootstrap edits
*/


.nav-link {
    color: #fff;
}


.btn:hover:hover 
{
    background-color: #5CC2A7;
}

.btn
{
    border: 0px;
    border-radius: 0.625rem;
}



.nav-link:visited {
    color: #fff;
}
.nav-link:hover {
    color: #5CC2A7;
}
.nav-link:active {
    color: #b8b8b8;
}
.navbar-toggler-icon {
    border: 1px;


    padding: 0px;
    margin: 0px;
}

.card {
 border: 0px;
 background-color: #ffffff00;
}


/*
Carrossel
*/


.carousel-indicators li {
    background-color: #000;
    /* Cor de fundo dos círculos */
    border: 1px solid #fff;
    /* Borda dos círculos */
    border-radius: 50%;
    /* Forma de círculo */
    max-width: 10px;
    /* Largura dos círculos */
    min-height: 10px;
    /* Altura dos círculos */
    margin-right: 5px;
    /* Espaço entre os círculos */
    cursor: pointer;
    /* Mostra que os círculos são clicáveis */
}

/* Defina a cor do círculo ativo (se desejar) */
.carousel-indicators .active {
    background-color: #fff;
    /* Cor de fundo do círculo ativo */
}

/*
animation css
*/

.animation-container {
    height: 1px;
    display: flex;
    flex-direction: column;

}

.word {

    opacity: 0;
    position: absolute;
    transition: opacity 1s, transform 1s;
    transform: translateY(100%);
    color: #F15E5E;
}



.treta {
    text-align: left;
    padding: 50px;
}


.active {
    opacity: 1;
    transform: translateY(0);
}

/*
animation css
*/

.animation-container {
    height: 1px;
    display: flex;
    flex-direction: column;

}

.bola {

    opacity: 0;
    position: absolute;
    transition: opacity 1s, transform 1s;
    transform: translateY(100%);
    color: #F15E5E;
}



.treta {
    text-align: left;
    padding: 50px;
}


.active {
    opacity: 1;
    transform: translateY(0);
}



        /* Estilos para o carrossel */
        .my-carousel-container {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .my-carousel-slide {
      
            display: flex;
            transition: transform 0.3s ease-in-out;
        }
        .my-carousel-item {
          
            flex: 0 0 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .my-carousel-item img {
          
        }
        .my-carousel-caption {
  
            color: #fff;
            padding: 10px;
            text-align: left;

        }
        /* Estilos para a navegação */
        .my-carousel-nav {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        .my-carousel-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #ffffff81;
            margin: 0 5px;
            cursor: pointer;
        }
        /* Estilo para destacar o dot ativo */
        .my-carousel-dot.active {
            background-color: #fff; /* Cor de destaque desejada */
        }

        .mycarouseltxt {
            font-size: 0.9rem;
            color: #fff;
            font-family: 'Sora', sans-serif;
            padding-left: 20px;
        
        }
        
        
        .mycaroh {
            min-height: 300px;
            padding-top: 50px;
 
        }
        .carimg {

        
        }
        

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {

    .redtitle {
        font-size: 1.8rem;
    }

    .bluetitle {
        font-size: 1.8rem;
    }
    
    

    .myherotxt {
        font-size: 2.5rem;
    }
      /* Estilos para o carrossel */
    .mycarouseltxt {
        font-size: 1.2rem;
        color: #fff;
        font-family: 'Sora', sans-serif;
    }
    .mycaroh {
        min-height: 250px;
        padding-top: 50px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .myh0 {
        font-size: 3.5rem;
    }
    
    .myh1 {
        font-size: 3rem;
    }
    
    .myh2 {
        font-size: 2.5rem;
    }
    

    .myh3 {
        font-size: 2rem;
    
    }
    .myh4 {
        font-size: 1.5rem;
    }
    
    .mycardtxt_s {

        font-size: 1rem;
  
        }

        
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .myherotxt {
        font-size: 3.5rem;
    }
    .myherotxt {
        font-size: 2.5rem;
    }
      /* Estilos para o carrossel */
    .mycarouseltxt {
        font-size: 1.3rem;
        color: #fff;
        font-family: 'Sora', sans-serif;
    }
    .mycaroh {
        min-height: 250px;
        padding-top: 50px;
        padding-left: 10px;
        padding-right: 10px;
    }


}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .redtitle {
        font-size: 2rem;
    }
    .bluetitle {
        font-size: 2rem;
    }

    .myh0 {
        font-size: 4rem;
    }
    
    .myh1 {
        font-size: 3.5rem;
    }
    
    .myh2 {
        font-size: 3rem;
    }
    

    .myh3 {
        font-size: 2.5rem;
    
    }
    .myh4 {
        font-size: 2rem;
    }
    
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}