/* CSS Stylesheet for the Web Page "Aula Camir"*/
/* Body Styles */
.body-style {
    width: 100%;
    background-image: url("/images/background-images/aulacamir-background-image.webp");
    background-position: center;
    background-size: auto;
    background-repeat: repeat-y;
    background-attachment: scroll;
}

    /*Header Styles*/
    header {
    position: sticky;
    top: 0;
    }
    .header-container {
        background-color: rgba(102, 0, 255,0.3);
        width: 100%;
        height: 120px;
        display: flex;
        flex-direction: row;
        border-radius: 30px;
    }
    .site-branding-box {
        width: 40%;
        height: 120px;
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
    }
    .logo-box {
        width: 100px;
        height: 100px;
        display: flex;;
        justify-content: center;
        align-items: center;
    }
    .aulacamir-logo {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .aulacamir-branding-box {
        width: 73%;
        height: 73%;
        display: flex;
        justify-content: center;
        align-items:flex-start;
        flex-direction: column;
    }
    .aulacamir-style-name {
        width: fit-content;
        display:flex;
        justify-content: left;
        align-items:center;
        flex-direction: row;
    }
    .aula-style {
        font-family: 'caveat-brush';
        font-size: 40px;
        color: rgb(0,102,255);
        display:inline-flex;
        justify-content: justify;
        align-items:flex-start;
        flex-direction: row;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: white;
        padding: 1%;
    }
    .camir-style {
        font-family: 'caveat-brush';
        font-size: 40px;
        color: rgb(102,0,255);;
        display:inline-flex;
        justify-content: justify;
        align-items:flex-start;
        flex-direction: row;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: white;
        padding: 3%;
    }
    .aulacamir-slogan {
        color: rgb(255, 255, 255);
        font-family: 'signika-ligth';
        font-size: 20px;
        font-style: oblique;
        align-items: flex-start;
    }
    .social-media-icons-box {
        width: 60%;
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:flex-end;
    }
    .social-media-item {
        width: 40%;
        height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
    }
    .social-icon {
        width: 30px;
        height: 30px;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .social-media-caption {
        font-family: 'signika-bold';
        font-size: 16px;
        color: white;
    }

    .main-menu-box {
        width: 100%;
        height: 60px;
        background-color: rgba(0, 162, 255, 0.5);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        margin-top: 10px;
    }
    .main-menu{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .menu-list {
        width: 100%;
        height: 100%;
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        gap: 2%;
        list-style: none;
        text-decoration: none;
    }
    .main-menu-button {
        color: rgb(255, 255, 255);  
        font-family: 'signika-bold';
        font-size: 100%;
        font-weight: 400;
        text-align: center;
        padding-bottom: 2%;
        cursor: pointer;
        text-decoration: none;
    }
    .main-menu-button:hover {
        color: rgb(255, 0, 255);
    }

/* Tags styles */
    h1 {
        color: rgb(255, 255, 255);
        font-family: 'signika-bold';
        text-align: center;
    }
    h2 {
        color: rgb(255, 255, 255);
        font-family: 'signika-regular';
        text-align: center;
    }
    .centered-par {
        color: rgb(255, 255, 255);
        font-family: 'signika-regular';
        text-align: center;
        padding-left: 50px;
        padding-right: 50px;
    }
    .justified-par {
        color: rgb(255, 255, 255);
        font-family: 'signika-regular';
        text-align: justify;
    }

/* Body Containers styles */
    /* home container style*/
    .home-container {
        width: 100%;
        height: 300px;
        background-color: rgba(0, 0, 0,0.8);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 25px;
        border-radius: 30px;
    }
    .demo-class-button {
        width: 25%;
        height: 50px;
        background-color: rgb(204, 0, 255);
        color: rgb(255, 255, 255);
        font-family: 'signika-bold';
        font-size: 100%;
        border-radius: 10px;
        border: 3px solid rgb(255, 255, 255);
        cursor: pointer;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .demo-class-link {
        color: rgb(255, 255, 255);
        text-decoration: none;
    }
    .demo-class-button:hover {
        background-color: rgb(0, 102, 255);
        transform: scale(1.05);
        transition: transform 0.3s ease;
    }
    /* About Us Container Styles */
    .main-div-container {
        margin-top: 25px;
        margin-bottom: 25px;
        width: 100%;
        height: 100%;
        background-color: transparent;
        display: flex;
        flex-direction: row;
        justify-content:center;
        align-items:center;
        gap: 10px;
    }
    .left-to-right-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    .top-to-bottom-container {
        width: 1000%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        padding: 50px;      
    }
    .content-image {
        width: 30%;
        margin: 1%;
        border-radius: 30px;
    }
    /* Educational Model Styles */
    .educative-model-container {
        margin-top: 45px;
        width: 100%;
        height: 100%;
        border-radius: 30px;
    }
    .educational-model-image {
        width: 30%;
        height: auto;
        border-radius: 30px;
        margin: 1%;
    }
    .educational-offer-image {
        width: 30%;
        height: auto;
        border-radius: 30px;
        margin: 1%;
        mask-image: linear-gradient(rgb(0, 0, 0) 70%, transparent 94%);
    }
    /* Blog Container Styles */
    .blog-image {
        width: 30%;
        height: auto;
        border-radius: 30px;
        margin: 1%;
    }
    .blog-button {
        width: 25%;
        height: 50px;
        background-color: rgb(102, 0, 255);
        color: rgb(255, 255, 255);
        font-family: 'signika-bold';
        font-size: 100%;
        border-radius: 10px;
        border: 3px solid rgb(255, 255, 255);
        cursor: pointer;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .blog-link {
        color: rgb(255, 255, 255);
        text-decoration: none;
    }
    .blog-button:hover {
        background-color: rgb(0, 102, 255);
        transform: scale(1.05);
        transition: transform 0.3s ease;
    }
    .social-networks-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    .social-network-icon {
        width: 50px;
        height: 50px;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px;
    }
    .social-network-link:hover {
        color: transparent;
        transform: scale(1.1);
        transition: transform 0.3s ease;
    }
    .social-icon-group {
        width: 60px;
        background-color: transparent;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-right: 50px;
    }
    .supportive-community-image {
        width: 30%;
        height: auto;
        border-radius: 30px;
        margin: 1%;
        mask-image: linear-gradient(rgb(0, 0, 0) 70%, transparent 94%);
        mask-image: linear-gradient(to botton, rgb(0, 0, 0) 70%, transparent 94%);
        
    }
    .left-to-right-container {
        width: 100%;
        background-color: rgba(21, 1, 54, 0.75);
        border-radius: 30px;
    }
    .social-icon-left-to-right-container {
        width: 100%;
        border-radius: 30px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .contact-main-div-container{
        background-color: rgba(6, 1, 14, 0.8);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-bottom: 30px;
    }
    .contact-us-left-container {
        width:80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5%;
        margin-left: 3%;
    }
    .form-top-to-bottom-container {
        height: 100%;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 0;
        margin-right: 5%;
    }
    .top-to-bottom-contact-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: left;
        align-items: center;       
    }
    .contact-form-title {
        width: 100%;
        color: rgb(102, 0, 255);
        font-family: 'caveat-brush';
        text-align: center;
        font-weight: 400;
        font-size: 200%;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-text-stroke-width: 0.5px;
        -webkit-text-stroke-color: white;
        margin: 0px;
    }
    .contact-form-title:hover {
        color: rgb(0, 102, 255);
    }
    .contact-form-container {
        width: 100%;
        height: 100%;
        background-color: rgb(33, 0, 77);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        border-radius: 30px;
        border: 5px solid rgb(255, 255, 255);
    }
    .tag-input-form-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:flex-start;
        padding-right: 10px;
    }
    .tag-form-style {
        width: 100%;
        height: 100%;
        color: rgb(255, 255, 255);
        font-family: 'signika-regular';
        font-size: 100%;
        border-radius: 10px;
        border: none;
        padding-top: 5%;
    }
    .input-box-style {
        width: 100%;
        height: 10px;
        background-color: rgb(255, 255, 255);
        color: rgb(47, 7, 141);
        font-family: 'signika-regular';
        font-size: 100%;
        border-radius: 5px;
        border: none;
        padding: 4%;
    }
    .text-area-input-box-style {
        width: 100%;
        height: 100px;
        background-color: rgb(255, 255, 255);
        color: rgb(47, 7, 141);
        font-family: 'signika-regular';
        font-size: 100%;
        border-radius: 5px;
        border: none;
        padding: 4%;
    }
    .contact-form-submit-button {
        width: 20%;
        height: 50px;
        background-color: rgb(102, 0, 255);
        color: rgb(255, 255, 255);
        font-family: 'signika-bold';
        font-size: 100%;
        border-radius: 10px;
        border: 3px solid rgb(255, 255, 255);
        cursor: pointer;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .contact-form-submit-button:hover {
        background-color: rgb(0, 102, 255);
        transform: scale(1.05);
        transition: transform 0.3s ease;
    }
    .contact-form-submit-button:active {
        background-color: rgb(87, 141, 11);
        transform: scale(0.95);
    }

/* footer styles */
    .footer-style-box {
        width: 100%;
        height: 100%;
        background-color: rgba(13, 1, 26,0.9);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 30px 30px 0 0px;
        margin-top: 10px;
        padding-bottom: 50px;
    }
    .footer-brand-logo-box {
        width: 100%;
        height: 50px;
        background-color: transparent;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .footer-logo {
        width: 50px;
        height: 50px;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .aulacamir-footer-slogan {
        color: rgb(255, 255, 255);
        font-family: 'signika-regular';
        font-size: 100%;
        text-align: center;
        padding: 0;
    }
    .footer-text {
        color: rgb(255, 255, 255);
        font-family: 'signika-regular';
        font-size: 100%;
        text-align: center;
        padding: 0;
        margin: 0;
    }
    .copyright-footer-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 0 0 30px 30px;
    }
    .c-footer-text {
        color: rgb(255, 255, 255);
        font-family: 'signika-regular';
        font-size: 100%;
        text-align: center;
        padding: 0;
        margin: 0;
    }
    .footer-row-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items:flex-start;
        margin-bottom: 25px;
    }
    .footer-content-box {
        width: 30%;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        border-right: 1px solid rgb(255, 255, 255);
        padding: 2%;
    }
    .section-footer-title {
        color: rgb(255, 255, 255);
        font-family: 'signika-bold';
        font-size: 120%;
        text-align: center;
    }
    .footer-menu-list {
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        align-items:flex-start;
        list-style: none;
    }
    .footer-link {
        color: rgb(255, 255, 255);
        font-family: 'signika-regular';
        font-size: 90%;
        font-weight: 400;
        text-align: left;
        justify-content: left;
        align-items:flex-start;
        cursor: pointer;
        list-style: none;
        text-decoration: none;
    }
    .footer-link:hover {
        color: rgb(4, 127, 199);
        transform: scale(1.1);
        transition: transform 0.3s ease;
    }
    .last-footer-content-box {
        width: 30%;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items:center;
        padding: 2%;
    }