/*
Theme Name: dclanguagecenter
Theme URI: 
Author: Gerson Ruíz
Author URI: 
Description: theme gor dclanguagecenter site
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dclanguagecenter
Tags: 
*/

@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Raleway:ital,wght@0,100..900;1,100..900&family=Staatliches&display=swap" rel="stylesheet');

@import 'styles/front-page.css';
@import 'styles/about-us.css';
@import 'styles/language-lessons.css';
@import 'styles/contact.css';
@import 'styles/language-testing.css';
@import 'styles/available.css';
@import 'styles/government.css';
@import 'styles/language-app.css';
@import 'styles/translation.css';

:root {
    --fuente-principal: "Arimo", sans-serif;
    --fuente-headings: "Staatliches", sans-serif;
    --background: #F8FAFD;
    --section-background: #a39f88;
    --primary-dark: #0E295A;
    --primary-font: #F6B400;
}


body {
    margin: 0;
    background: radial-gradient(circle, #f0dd79 0%, #b88a2e 60%);
    font-family: var(--fuente-principal);
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.header {
    z-index: 10;
    display: flex;
    justify-content: center;
    width: 100%;
    position: static;
    top: 0;
    padding: 1rem 0;
    border-bottom: 3px solid var(--section-background);
    background-color: var(--primary-dark);
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.logo {
    height: 8rem;
    border-radius: 50%;
}

.menu-principal {
    font-family: var(--fuente-headings);
    color: var(--background);
    text-align: center;
    padding: .5rem 0;
    font-size: 1.7rem;
}

.menu-principal .current_page_item {
    border-bottom: 3px solid azure;
}

.barra-navegacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
}

@media (max-width: 1025px) {
    .menu-principal {
        font-size: 1rem;
    }
}

/* headings */

.page-title {
    color:  #0E295A;
    margin: 20px 15%;
    border-bottom: 2px solid black;
    line-height: normal;
}

h1, h2 {
    text-align: center;
    margin: 1rem auto;
}

h1 {
    font-size: 1em;
}

h3 {
    text-align: center;
}

h4 {
    text-align: center;
}

p {
    margin: 0;
}

a,
a:visited,
a:hover,
a:active {
    color: inherit;
    text-decoration: none;
    line-height: normal;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    margin: 0 2rem;
}

img {
    display: block;
}

.imagen-destacada {
    margin-bottom: 2rem;
}

/* Footer */

.footer {
    background-image: linear-gradient(45deg, #0E295A 80%, #c0150c 80%);
    color: azure;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 1rem 0;
}

.footer__content {
    color: azure;
    display: flex;
    flex-direction: column;
}

.footer__button {
    background-color: #c0150c;
    border-radius: 5px;
    color: var(--background);
    padding: 0 2rem;
    font-weight: bold;
    margin: 1rem auto;
    width: fit-content;
    box-shadow: inset -1px 3px 8px 5px #6d0d0d, 2px 5px 16px 0px #0B325E, 5px 5px 15px 5px rgba(0,0,0,0);
}

.footer__icon {
    height: 2rem;
}

.footer__cont {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}



/* search button */
.header-search {
    position: relative;
    z-index: 10;
    align-self: center;
    display: flex;
    flex-direction: column;
    margin: auto, 0;
}

.search-toggle {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    margin: 0 0;
    padding: 0;
}

.search-container {
    position: absolute;
    top: 45px;
    right: 0;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);

    transition: all 0.3s ease;

    background-color: white;
    padding: 10px;
    border-radius: 8px;
}

.search-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* dropdown menu */

.dropdown-menu {
    display: none;
}

@media (min-width: 769px) {

    .header {
        position: sticky;
    }

    body {
    font-size: 2rem;
    }

    .barra-navegacion {
        display: flex;
        flex-direction: row;
    }

    .menu-principal ul{
    display: flex;
    }

    .logo {
        border-radius: 50%;
        height: 15rem;
        padding: 0;
        display: block;
    }

    .footer__content {
        display: flex;
        font-size: 2rem;
        margin: 0;
        flex-direction: row;
        justify-content: space-around;
    }

    .input-container {
        width: 35rem;
    }

    .footer-phone {
        margin-right: 15rem;
    }

    .page-title {
    color:  #0E295A;
    margin: 20px 30rem;
    border-bottom: 2px solid black;
    }

    .footer__cont {
        gap: 1rem;
    }

    h1 {
        font-size: 2em;
    }
}