/* ---------------------------------------------------------------------------
   Webfonts, self-hosted (audit item 2.8).

   They used to arrive as three @import rules against Google's font CSS endpoint, which
   meant: the browser had to download and parse this stylesheet before it even
   learned the font requests existed, every visitor's IP went to Google on every
   page view, and first paint waited on two extra DNS+TLS hops.

   These files are the exact faces those three @imports were delivering, byte for
   byte, taken from Google's font CDN and kept to the latin and latin-ext subsets
   (this site is Spanish and English; the cyrillic, greek, vietnamese and
   devanagari subsets were downloaded by nobody). The @font-face set is
   deliberately NOT "corrected":

     - Ubuntu now ships 400 AND 700. It shipped 400 only until 2026-08-29, and so
       did the three @imports before it: they asked for `Ubuntu:wght@400;700`, which
       is v2 syntax sent to the v1 css? endpoint, which ignores it and returns
       regular. Every uppercase Ubuntu heading on this site — and every heading is
       Ubuntu at font-weight:700 — was therefore drawn in the browser's SYNTHETIC
       bold, an algorithmic smear of the regular face, for years. The real 700 is
       here now; it is a designed weight and it is what the CSS has always asked
       for.
     - Poppins now ships 400 AND 700, for exactly the same reason and fixed on the
       same day. `.faq-question { font-weight: bold }` and every <strong> inside a
       `.faq-answer` ask Poppins for 700; only 400 was ever delivered, so all seven
       FAQ questions and all eleven bold benefit labels were synthetic too. 13,248 B
       for the pair. A request for 500 (.menu-btn, .link-button) still resolves to the
       400 face and is NOT synthesised — the browser picks the nearest real weight
       below 600 — so those are unchanged.
     - Lora and Raleway are variable files, so one woff2 covers all their weights.

   Fourteen files; a Spanish visitor downloads five of them (Ubuntu 400 + 700,
   Poppins 400 + 700, Lora latin = 118 KB) — the two extras are the bolds the
   browser used to fake.
   --------------------------------------------------------------------------- */
/* Ubuntu 400 normal, latin */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ubuntu-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Ubuntu 400 normal, latin-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ubuntu-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Ubuntu 700 bold, latin */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ubuntu-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Ubuntu 700 bold, latin-ext */
@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ubuntu-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 400 normal, latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 400 normal, latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Poppins 700 bold, latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/poppins-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Poppins 700 bold, latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/poppins-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora 400 italic, latin */
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lora-italic-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lora 400 italic, latin-ext */
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lora-italic-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora 400 normal, latin */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lora-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lora 400 normal, latin-ext */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/lora-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora 700 normal, latin */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/lora-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lora 700 normal, latin-ext */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/lora-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Raleway 300 normal, latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/raleway-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Raleway 300 normal, latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/raleway-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Raleway 600 normal, latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/raleway-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Raleway 600 normal, latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/raleway-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Raleway 700 normal, latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/raleway-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Raleway 700 normal, latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/raleway-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Raleway 900 normal, latin */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/raleway-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Raleway 900 normal, latin-ext */
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/raleway-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*Global Settings*/

:root {
    /*Colours*/
    --main-color: #a30006;
    /*Fonts*/
    --main-font: 'Ubuntu', sans-serif;
    --second-font: 'Poppins', sans-serif;
}

body {
    font-family: 'Lora', serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--main-font);
    text-transform: uppercase;
    font-weight: 700;
    color: #424242;
    margin-bottom: 35px;
    margin-top: 0;
}

h1 {
    font-size: 45px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 21px;
}

p {
    font-family: var(--second-font);
    font-size: 16px;
    color: #767676;
}

a {
    transition: all 0.3s ease-in-out;
}

section {
    text-align: center;
}

ul { 
    padding:0 
}

.blockquote p {
    font-size: 32px;
    line-height: 45px;
    padding-left: 30px;
    border-left: 3px solid #424242;
    color: #424242;
}

.title {
    position: relative;
    margin-bottom: 100px;
}

.subtitle {
    margin-top: 10px;
    font-weight: 100;
    text-transform: none;
    font-size: 15px;
}

.section-title{
    font-size: 32px;
    line-height: 1.42857143;
    font-family: var(--main-font);
    text-transform: uppercase;
    font-weight: 700;
    color: #424242;
    margin-bottom: 100px;
    margin-top: 0;
}

.text-title {
    font-family: var(--second-font);
    text-transform: none;
    color: #fff;
    margin-top: 10px;
    letter-spacing: 2px;
    font-weight: normal;
}

/* The hero subtitle is a <p>, not an <h2>: it is a line of prose under the h1,
   not a section of the document (audit item 2.6). These four declarations are
   what the <h2> was getting from the heading rules above, restated, so the swap
   moves nothing -- without them `.header p` would give it 32px/1.43 and 40px of
   padding-bottom and push the ¡ME APUNTO! button 15px down. */
.header .text-title {
    font-size: 32px;
    line-height: 1.1;
    margin-bottom: 35px;
    padding-bottom: 0;
}

/* Same idea for the two headings that gain a level: an <h1> on inscripcion.html
   is the page title and must still be drawn at the 32px section-title size, and
   the contact heading becomes an <h2> whose <p> line-height is restated so the
   section below it does not move up by 10px. */
h1.title {
    font-size: 32px;
}

.title:after {
    content: '';
    height: 5px;
    width: 40px;
    background-color: var(--main-color);
    position: absolute;
    top: 80px;
    left: calc(50% - 20px);
}

.association-logo {
    width: 25rem;
    height: auto;
}

.menu-logo {
    width: 180px;
    /* 180px inside a .col-xs-4, which at a 360px viewport is 120px wide — the wordmark
       has always overhung its own column by 60px and collided with whatever the right of
       the bar held. Measured on the build before this one: at a 320px viewport the
       document scrolled sideways to 353px and the word MENU sat on the letters "EC".
       The language switch made that collision start at 360px, the width of most Android
       phones, so it is now worth fixing rather than noting.

       min() and not a breakpoint, because the column is a percentage and so the clash
       is continuous: 40vw tracks it exactly. 180px at 450px and above, so every tablet
       and every desktop is the size it has always been; 156px at 390, 144 at 360, 128
       at 320. A browser that does not know min() drops this line and keeps the 180px
       above it, which is what it renders today. */
    width: min(180px, 40vw);
    height: auto;
    filter: brightness(90%);
}

.menu-logo::hover {
    width: 50px;
}



/*Bootstrap*/

.navbar-vira {
    background-image: none;
    background-color: transparent;
    margin-bottom: 0;
    border-radius: 0;
    border-color: transparent;
    transition: all 0.3s ease-in-out;
}

.form-control option {
    color: #424242;
}

.form-control {
    border-radius: 0;
    font-family: var(--second-font);
    padding: 25px;
    font-size: 18px;
    background-color: transparent;
    color: #424242;
    margin-bottom: 30px;
    border-color: var(--main-color);
}

.form-control:focus {
    border-color: var(--main-color);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(81, 194, 185, 0.6);
}

.form-control::-webkit-input-placeholder {
    color: #fff;
}

.form-control:-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
}

.form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
}

.form-control:-ms-input-placeholder {
    color: #fff;
}

.element .form-control::-webkit-input-placeholder {
    color: #424242;
}

.element .form-control:-moz-placeholder {
    /* Firefox 18- */
    color: #424242;
}

.element .form-control::-moz-placeholder {
    /* Firefox 19+ */
    color: #424242;
}

.element .form-control:-ms-input-placeholder {
    color: #424242;
}


/*Helper class*/

.mt80 {
    margin-top: 80px;
}

.mb80 {
    margin-bottom: 80px;
}

.mr60 {
    margin-right: 60px;
}

.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.bg-img div {
    z-index: 1;
    position: relative;
}

.bg-img:after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.section {
    padding: 100px 0;
}


/*Vira Card*/

.vira-card {
    text-align: center;
    /*margin-bottom: 45px;*/
}

.vira-card .vira-card-header {
    margin-bottom: 25px;
}

.vira-card .vira-card-header .card-icon {
    border: 1px solid var(--main-color);
    border-radius: 100%;
    display: inline-block;
    height: 120px;
    width: 120px;
    line-height: 120px;
    position: relative;
}

.vira-card .vira-card-header .card-icon .fa {
    margin-top: 45px;
    font-size: 30px;
}

.vira-card .vira-card-header .card-icon:after {
    content: '';
    height: 100px;
    width: 100px;
    background-color: var(--main-color);
    border-radius: 100%;
    position: absolute;
    top: 9px;
    left: 9px;
}

.vira-card .vira-card-header .card-icon span {
    color: #fff;
    font-size: 45px;
    position: relative;
    z-index: 1;
}

.vira-card .vira-card-content h3 {
    position: relative;
    margin-bottom: 10px;
}

.vira-card .vira-card-content h3>a {
    color: #1a1a1a;
}

.vira-card .vira-card-content p {
    font-size: 15px;
}

.news-newspaper {
    font-style: italic;
}

.vira-card .vira-card-content .social-icons {
    margin-top: 30px;
}


/*Button*/

.vira-btn {
    font-family: var(--main-font);
    color: var(--main-color);
    font-weight: 700;
    letter-spacing: 3px;
    /* 80px of horizontal padding is 160px of chrome around the label. On the
       payment page that made GESTIONAR SUSCRIPCIÓN 419px wide inside a 390px
       viewport and the whole page scrolled sideways by 14px. clamp() keeps the
       desktop value exactly (8vw is over 80px from 1000px up) and lets the phone
       have 24-31px. Audit item 2.2. */
    padding: 15px clamp(24px, 8vw, 80px);
    margin-bottom: 30px;
    background-color: transparent;
    /* Bootstrap's .btn already reserves `border: 1px solid transparent`, so
       colouring it in costs zero layout: the ghost variant simply stops reading
       as a paragraph of red text. Audit item 2.3. */
    border-color: var(--main-color);
    transition: all 0.3s ease-in-out;
}

.vira-btn:hover {
    background-color: var(--main-color);
    color: #fff;
}

.news-btn {
    font-family: var(--second-font);
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
    /* The same defect Stage 2 fixed on .vira-btn (audit item 2.2), on the button it
       missed. MÁS INFORMACIÓN E INSCRIPCIÓN measures 323px at a 320px viewport and
       scrolls the whole homepage sideways to 353px — measured on this build and on the
       one before it, so it is not new. Bootstrap 3's .btn is white-space: nowrap, which
       is what turns a long label into horizontal overflow instead of a second line.
       max-width keeps it inside its column; normal lets it wrap when it has to. The
       desktop rendering does not move: at 1100px the label is 322px in a 458px column
       and never reaches either limit. */
    max-width: 100%;
    white-space: normal;
    padding: 5px 30px;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    background-color: var(--main-color);
    margin-top: 20px;
}

.news-btn:hover {
    color: #fff;
    background-color: #fff;
    border-color: var(--main-color);
    color: var(--main-color);
}

.menu-btn {
    font-family: var(--second-font);
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 3px 10px;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    background-color: var(--main-color);
}

.menu-btn:hover {
    color: #fff;
    background-color: #fff;
    border-color: var(--main-color);
    color: var(--main-color);
}

.ins-btn {
    font-family: var(--second-font);
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 5px 30px;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    background-color: var(--main-color);
    margin-top: 20px;
}

.ins-btn:hover {
    color: #fff;
    background-color: #fff;
    border-color: var(--main-color);
    color: var(--main-color);
}

.solid {
    background-color: var(--main-color);
    color: #fff;
}

.solid:hover {
    background-color: #fff;
    color: var(--main-color);
}

.small-btn {
    padding: 10px 130px;
}


/*Element page*/

.element .navigation-bar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.element .navigation-bar a {
    color: #424242;
}

.element .dark-bar {
    background-color: #fff;
}

.element .menu:after {
    color: #424242;
}

.element .title:after {
    left: 0;
    top: 60px;
}

.headings p {
    margin-bottom: 80px;
}

.social-icons ul {
    text-align: center;
    padding-left: 0;
    display: inline-block;
}

/* The markup is now <ul><li><a><span>, the way HTML requires — it used to be
   <ul><a><li><span>, with <a> as a direct child of <ul>, which is invalid. The <li> keeps
   every box property it always had, so the pill is pixel-identical; the <a> is made a
   block so it fills that pill and inherits its colour instead of Bootstrap's link blue. */
.social-icons ul li {
    display: inline-block;
    list-style-type: none;
    border: 2px solid var(--main-color);
    background-color: var(--main-color);
    color: #fff;
    font-size: 18px;
    line-height: 32px;
    width: 36px;
    border-radius: 5rem;
}

.social-icons ul li a {
    display: block;
    color: inherit;
}

/* The inline SVG social marks (see the sprite at the top of index.html). Sized in em
   so the two existing font-size rules — 18px here, 18px on .social-icons-form — keep
   driving them exactly as they drove the icon-font glyph, and filled with currentColor
   so :hover inverting the pill still inverts the mark. */
.ic {
    /* 0.9em, not 1em: an icon-font glyph is drawn inside its em box with side bearings,
       so the Ionicons mark came out around 14px in the 36 x 32px pill. An SVG has no
       bearings and 1em filled the pill edge to edge. 0.9em of 18px is 16.2px — 45% of
       the pill across, 51% down — which is where the old row sat, only sharper. */
    width: 0.9em;
    height: 0.9em;
    fill: currentColor;
    vertical-align: -0.12em;
}

/* The Font Awesome card icons. Their source viewBoxes are not square — 0 0 640 512 for
   the gears, 0 0 448 512 for the calendar — and `width: auto` on an <svg> with no
   intrinsic size resolves to the CSS default 300px, not to the aspect ratio: the first
   build of this drew a 300 x 27px box and pushed every glyph out of its 120px circle,
   invisibly. So each <symbol> carries a viewBox padded out to a square centred on the
   original, exactly the way an icon font sits a glyph in a square em box, and these are
   square too. */
.ic-fa {
    /* 1.08em / -0.21em is measured, not guessed: at 0.9em the gem's ink came out 27x23px
       inside the 100px disc where the icon font drew it 33x27, and raising the box without
       lowering the baseline offset by half the growth would have floated it upwards.
       Measured after: within a pixel of the glyph it replaces, same centre. */
    width: 1.08em;
    height: 1.08em;
    fill: currentColor;
    vertical-align: -0.21em;
}

.social-icons-form ul li {
    display: inline-block;
    list-style-type: none;
    color: var(--main-color);
    font-size: 18px;
    line-height: 32px;
    width: 36px;
    margin-top: 30px;
}

.social-icons-form ul li a {
    display: block;
    color: inherit;
}

/* 36 x 32px is below every touch-target floor there is, and this is the row a
   thumb reaches for. Raised to 44 x 44 on the phone only: at 36px per icon the
   desktop row is a deliberate piece of the design and does not move. Audit
   item 2.5. */
@media only screen and (max-width: 995px) {
    .social-icons-form ul li {
        width: 44px;
    }

    .social-icons-form ul li a {
        min-height: 44px;
        line-height: 44px;
    }
}

.social-icons {
    margin-top: 30px;
}

.social-icons ul li:hover {
    color: var(--main-color);
    background-color: #fff;
}


/*Navigation*/

/* The mobile menu. Below 995px .menu-links is display:none and, until now, that
   was the whole story: a phone got the logo and nothing else -- no navigation
   and no INSCRÍBETE, on the page students arrive at from Instagram. The panel
   and the toggle were styled here and driven by script.js for years; only the
   markup was missing. Audit item 2.1. Nothing in this block applies above
   995px. */

#menu-item {
    /* Absolutely positioned under the bar rather than in flow: opening the menu
       must not push the hero down, and it means the open/shut animation is
       transform + opacity only. Nothing here animates a layout property -- the
       original `transition: all` over margin-top did, and it also slid the links
       up over the navigation bar instead of behind it. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateY(-8px);
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
}

/* Above the breakpoint the panel is not merely hidden, it does not exist: with a
   box on the page (even at opacity 0) it is a composited layer the desktop never
   needs, and the desktop is exactly what this change is not allowed to touch. */
@media only screen and (min-width: 996px) {
    #menu-item {
        display: none;
    }
}

.menu-item {
    background-color: #1a1a1a;
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
}

.menu-item ul {
    padding-left: 0;
    margin-bottom: 0;
}

/* <ul><li><a> and not the template's <ul><a><li>, which is invalid HTML and
   which tests/verify.sh check 4 rejects. */
.menu-item ul li {
    list-style-type: none;
}

.menu-item ul li a {
    display: block;
    padding: 15px 0;
    min-height: 44px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-item ul li a:hover,
.menu-item ul li a:focus {
    color: var(--main-color);
    text-decoration: none;
}

/* The join button keeps its colour in the panel: it is the reason the menu is
   being restored at all. */
.menu-item ul li a.menu-item-cta,
.menu-item ul li a.menu-item-cta:hover,
.menu-item ul li a.menu-item-cta:focus {
    background-color: var(--main-color);
    color: #fff;
    border-bottom: none;
}

.menu-item ul li a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* Collapsed with max-height rather than the old margin-top: -377px, which was a
   magic number equal to the height of a panel that never existed and which slid
   the links up *over* the navigation bar instead of clipping them. visibility
   also takes the links out of the tab order while the panel is shut. */
/* Both selectors carry the id, because the rule that sets the shut state above
   does too: `.show-menu { opacity: 1 }` alone loses to `#menu-item { opacity: 0 }`
   and the panel toggles its class, animates nothing, and stays invisible.
   visibility and not just opacity: a transparent panel would still be in the tab
   order, and a keyboard user would fall into an invisible menu. */
#menu-item.hide-menu {
    visibility: hidden;
}

#menu-item.show-menu {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.dark-bar {
    background-color: #fff;
    background-image: none;
    -webkit-box-shadow: 0px 10px 40px -17px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 10px 40px -17px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 10px 40px -17px rgba(0, 0, 0, 0.5);
}

.navigation-bar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 0;
    font-size: 30px;
}

.navigation-bar a {
    color: #fff;
}

/* The toggle. It is hidden above 995px, where .menu-links is the navigation;
   the two are never on screen together. 44x44 because it is the single most
   important target on a phone. */
.menu-toggle-wrap {
    display: none;
}

@media only screen and (max-width: 995px) {
    .menu-toggle-wrap {
        /* flex, so the language switch and the toggle sit on one line and neither has
           to be positioned against the other. */
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

.menu {
    /* A real <button>: it is a control, it opens and closes something on this
       page, and Space has to work as well as Enter without any script saying so. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 44px;
    min-height: 44px;
    line-height: 44px;
    font: inherit;
    background: none;
    border: 0;
    padding: 0;
    /* .navigation-bar a is white and this bar is white (.menu-container). */
    color: #1a1a1a;
}

.menu:hover,
.menu:focus {
    color: var(--main-color);
    text-decoration: none;
}

.menu:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 4px;
}

/* The MENU label is drawn inside the button's own left padding.

   It used to be `left: -65px` — absolutely positioned OUTSIDE the button, over whatever
   happened to sit beside it. Nothing ever did, until the language switch moved into this
   bar and the label landed on top of it: measured on that build, the link was 60 x 44px
   and visible, and a click at its centre did not navigate, because the label was in
   front of it. Moving the label into the button's padding draws it in exactly the same
   place relative to the bars and stops it overlapping its neighbour. */
.menu {
    padding-left: 65px;
}

.menu:after {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 44px;
    color: #1a1a1a;
    font-size: 16px;
    font-family: var(--main-font);
    letter-spacing: 1px;
}

.menu:hover:after,
.menu:focus:after {
    color: var(--main-color);
}

/* The bars and the cross are one inline SVG and the class on the button picks
   which one is drawn. The template's ion-navicon would have been the obvious
   choice; the icon font it came from is gone from this site entirely now, and
   this is the pattern that replaced it everywhere. */
.menu .menu-icon-x,
.menu.c .menu-icon-bars {
    display: none;
}

.menu.c .menu-icon-x {
    display: inline;
}

.menu-container {
    background-color: #fff;
    color: #1a1a1a;
}

/* The row of desktop navigation links.

   The markup has carried `d-flex flex-row` since the template this site came from, and
   those are Bootstrap 4 class names — this project is on Bootstrap 3.3.7 and defines
   neither, so the row has always been inline anchors laid out by `text-align: right`.
   Making it the flex row it already says it is costs nothing to look at and buys back
   the collapsed inter-tag whitespace that six gaps between seven inline items were
   spending, which is what makes room for the language switch without pushing INSCRÍBETE
   onto a second line. Measured at 1200px: 7 items on one row before, 7 on one row after
   with the switch added.

   Below 995px the media query further down in this file sets .menu-links to display:
   none and the phone panel takes over, so nothing here applies to a phone. */
.menu-links {
    display: flex;
    /* wrap, not nowrap: between 995 and ~1160px the Spanish row does not fit and never
       has — on the build before this one INSCRÍBETE already sat on a second line at
       1100px. Wrapping keeps that behaviour (the overflow drops to a right-aligned
       second row) instead of squeezing "Sobre Nosotros" onto two lines inside its own
       item, which is what nowrap did. */
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    row-gap: 8px;
}

.menu-link {
    /* A navigation label never breaks mid-item. */
    white-space: nowrap;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 0.6em;
    color: #1a1a1a !important;
    margin-right: 15px;
}

.menu-link:hover {
    text-decoration: none;
    color: #a30006 !important;
}

.m:after {
    content: 'MENU';
}

/* ---------------------------------------------------------------------------
   The language switch. Spanish first, English one tap away.

   It is a plain <a> to the other language's copy of the page the visitor is on
   (/ <-> /en/), so: it works with JavaScript off, it survives being shared —
   the URL carries the language — and a crawler can follow it. There is no
   cookie and no Accept-Language negotiation on purpose: an unqualified visit to
   multitecua.com is Spanish, always, and the switch is right here for the
   exceptions.

   A globe and not a flag. A flag names a country; the English half of this site
   exists for the Erasmus student who could be from anywhere, and half of them
   would not recognise a Union Jack as "the language I read". The two-letter code
   beside it is the unambiguous part.

   Everything here is padding and colour: no min-height, no display change, so
   the anchor sits on the same line box as the six links beside it and the
   navigation row is exactly as tall as it was.
   --------------------------------------------------------------------------- */
.menu-link.lang-link {
    margin-left: 12px;
    margin-right: 0;
    padding: 4px 8px;
    flex: 0 0 auto;
    border: 1px solid rgba(26, 26, 26, 0.35);
    border-radius: 3px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.menu-link.lang-link:hover,
.menu-link.lang-link:focus {
    border-color: var(--main-color);
}

.menu-link.lang-link .ic-fa {
    /* 0.95em keeps the globe optically level with the two capitals beside it;
       the -0.15em is half the difference between that and the cap height, the
       same correction .ic-fa makes for the card icons. */
    width: 0.95em;
    height: 0.95em;
    vertical-align: -0.15em;
    margin-right: 4px;
}

/* The phone copy. There are two switches in the markup, exactly as there are two
   copies of the navigation links: one inside .menu-links, which is display:none below
   995px, and one inside .menu-toggle-wrap, which is display:none above it. At most one
   is ever on screen.

   The phone copy is in the BAR and not in the slide-down panel, and that is the whole
   point of it: the panel is opened by script, so a switch inside it is unreachable with
   JavaScript off — measured, on this build, before this rule existed. In the bar it is
   two taps from nothing: it is simply a link, sitting next to MENU, at every width.
   44px tall because it is a phone target. */
.menu-toggle-wrap .lang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-right: 14px;
    vertical-align: middle;
    font-size: 16px;
}


.c:after {
    content: 'CLOSE';
}


/*Home page*/

.header {
    background-image: url(../images/multitec-banner.webp);
    height: 100vh;
    position: relative;
    min-height: 659px;
}

.intro-box {
    height: 100vh;
    display: table;
    text-align: center;
    width: 100%;
}

.intro {
    display: table-cell;
    vertical-align: middle;
}

.header h1 {
    margin: 0;
}

.header h1,
.header p {
    color: #fff;
    letter-spacing: 2px;
}

.header p {
    font-size: 32px;
    padding-top: 0;
    padding-bottom: 40px;
}

.header .vira-btn {
    background-color: var(--main-color);
    color: #fff;
}

.header .vira-btn:hover {
    background-color: #fff;
    color: #424242;
}

.about {
    background-color: #f8f8f8;
}

.about img {
    margin: 30px auto;
    display: block;
}

.about span {
    font-family: 'Raleway';
    font-weight: 600;
}

.expert {
    background-color: #f8f8f8;
}

.expert p {
    line-height: 200%;
}

.expert .bg-img {
    background-image: url(../images/multitec-inscripcion.webp);
    background-position-x: 85%;
    height: 100%;
}

/* ---------------------------------------------------------------------------
   #inscription is a split panel: a photograph on the left, text on the right.
   The photo column has no content of its own, so something has to give it a
   height, and that something used to be script.js:

       var h = $('.expert').height();
       $('.expert .col-sm-6 div').height(h);

   read once at DOM-ready. Below 768px the paragraph beside it is 8 lines in
   Poppins and 7 in the fallback face, at 32px a line, so the panel came out
   729px if the webfont had not arrived yet and 761px if it had -- a layout that
   depended on network timing, and the reason a Stage 1 with no visual change in
   it still moved a 32px band on a phone.

   Flex says the same thing at the layout level: side by side, the two columns
   are the same height by construction, with no measurement and nothing to race.
   Stacked, there is no second column to match, so the photo is a band sized in
   CSS. Audit item 2.0 / 1.12.
   --------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
    #inscription .row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    #inscription .bg-img {
        height: auto;
    }
}

@media only screen and (max-width: 767px) {
    /* 90vh is 760px on the 390x844 phone this was measured on -- one pixel off
       the 761px the JavaScript produced when it won its own race, and the same
       number on every load. */
    #inscription .bg-img {
        height: 90vh;
        min-height: 320px;
        max-height: 760px;
    }
}

.expert .bg-img:after {
    display: none;
}

.expert .section {
    padding-left: 30px;
    padding-right: 30px;
}

.vira-quote {
    /*padding: 120px 0;*/
    color: #fff;
    font-style: italic;
}

.vira-quote p {
    font-size: 32px;
    color: #fff;
}

.vira-quote .quote {
    margin-bottom: 40px;
}

.vira-quote .author {
    font-size: 21px;
    margin-bottom: 40px;
}

.watch {
    font-size: 32px;
    color: #fff;
    padding: 150px 0;
}

.watch a {
    border: 2px solid #fff;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 70px;
    border-radius: 100%;
    width: 70px;
    height: 70px;
    padding: 0;
    font-size: 21px;
    color: #fff;
}

.watch a:hover,
.watch a:active,
.watch a:focus {
    background-color: #fff;
    color: #424242;
}

.subscribe {
    background-color: var(--main-color);
}

.subscribe .vira-btn {
    margin-bottom: 0;
    color: #424242;
    font-weight: 700;
    border-color: #fff;
    background-color: #fff;
}

.subscribe .vira-btn:hover {
    background-color: transparent;
    color: #fff;
}

.subscribe .form-control {
    width: 320px;
    margin-bottom: 0;
    border-color: #fff;
    color: #fff;
}

.contact .vira-card {
    background-color: #f8f8f8;
    padding: 35px 0;
    transition: all 0.3s ease-in-out;
    margin-bottom: 45px;
}

.faq-title{
    font-size: 32px;
    color: #fff;
    font-family: var(--main-font);
}

.faq-title:after{
    content: '';
    height: 5px;
    width: 40px;
    background-color: white;
    position: absolute;
    top: 81px;
    left: calc(50% - 20px);
}

.faq-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.faq-question {
    font-family: var(--second-font);
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    padding: 30px 20px;
    width: 60%;
    border: none;
    outline: none;
    transition: 0.4s;
    margin: auto;
    text-transform: uppercase;
}

.faq-question:hover {
    font-size: 21px;
}

/* The questions are role="button" tabindex="0" now (audit item 2.4), so they
   have to show where the keyboard is. Only ever visible to a keyboard user. */
.faq-question:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -6px;
}


/* Audit item 4.2. The ten benefit bullets carried style="text-align: justify"
   inline, which is 20 of the 31 findings the detector had left on this site and,
   far more to the point, is at its worst exactly where this text lives: a 15px
   Poppins paragraph in a ~370px column on a phone, where justification has to
   stretch four or five words to fill a line and opens rivers of white down the
   block. The other six answers had no text-align at all and were inheriting
   `center` from `section`, so the FAQ was showing centred prose in one place and
   justified prose in another. One rule now, left, for all of them — which is
   also what every line of running text on this site wants. */
.faq-answer {
    font-family: var(--second-font);
    font-weight: 100;
    font-size: 15px;
    color: #fff;
    text-align: left;
    padding: 0 250px;
    overflow: hidden;
    display: block;

    animation-duration: 0.4s;
    animation-name: animate-fade;
    animation-fill-mode: backwards;
}


.faq-question:after {
    content: "+";
    font-size: 20px;
    color: #fff;
    float: right;
}

.faq-active:after {
    content: "-";
}

.contact .vira-card .vira-card-header {
    margin-bottom: 15px;
    font-size: 21px;
    color: var(--main-color);
}

.contact .vira-card .vira-card-content h3 {
    letter-spacing: 2px;
    margin-bottom: 45px;
}

.contact .vira-card .vira-card-content h3:after {
    top: 40px;
}

.contact .vira-card .vira-card-content p {
    font-size: 18px;
}

.contact-title{
    font-size: 21px;
    letter-spacing: 2px;
    margin-bottom: 45px;
    font-family: var(--main-font);
    text-transform: uppercase;
    font-weight: 700;
    color: #424242;
    margin-bottom: 35px;
    margin-top: 0;
}

/* -----------------------------------------------------------------------------
   FIND US — what replaced the Google Maps iframe on 2026-08-29.

   The iframe was not broken: rendered in a clean headless Chromium at 390px it drew
   the map and the marker perfectly. It failed on a real phone because that browser
   blocked a third-party frame, which is what tracking protection, privacy browsers and
   content blockers all do, and it is the same grey broken-content box in every one of
   them. That is the argument for removing it: a contact section that renders only for
   visitors who let Google run a frame is not a contact section, and every visitor who
   did let it was disclosed to Google before they had asked for anything. Three CDNs
   came out of this site today for exactly that reason; this was the fourth.

   Everything below is served from our own container and needs no network at all. The
   plate is inline SVG, deliberately an abstraction and not a copy of a map: it carries
   no street names and claims nothing it cannot back up. The address is the claim, and
   the button is the map — one tap, the visitor's own choice, and Google hears about it
   only then.

   It matches .contact .vira-card above it — same #f8f8f8, same radius — so the section
   reads as four panels, not as three panels and a gap where something used to be.
   ----------------------------------------------------------------------------- */
.find-us {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    background-color: #f8f8f8;
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 45px;
    text-align: left;
}

.find-us-plate {
    flex: 1 1 260px;
    /* The plate keeps the 4:3 the iframe had, so the band is the same shape in the
       page it has always been. */
    max-width: 380px;
}

.find-us-plate svg {
    display: block;
    width: 100%;
    height: auto;
}

.fu-bg {
    fill: #ecebe9;
}

.fu-road {
    stroke: #fdfdfc;
    stroke-width: 9;
    fill: none;
}

.fu-road-main {
    stroke-width: 14;
}

.fu-block {
    fill: #dedbd7;
}

.fu-green {
    fill: #dfe7dc;
}

.fu-pin {
    fill: var(--main-color);
}

.fu-pin-dot {
    fill: #fff;
}

.find-us-body {
    flex: 1 1 260px;
}

.find-us-eyebrow {
    font-family: var(--main-font);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
    /* #8a8a8a on #f8f8f8 is 3.5:1 and this is 13px text. #6f6f6f is 5.1:1. */
    color: #6f6f6f;
    margin-bottom: 10px;
}

.find-us-place {
    font-family: var(--main-font);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.35;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.find-us-address {
    font-family: var(--second-font);
    font-size: 16px;
    line-height: 1.6;
    /* <address> is italic in every UA stylesheet and this is not a signature block. */
    font-style: normal;
    color: #4a4a4a;
    margin-bottom: 22px;
}

.find-us-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 26px;
    font-family: var(--second-font);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    color: #fff;
    background-color: var(--main-color);
    border-radius: 4px;
    max-width: 100%;
    white-space: normal;
    transition: all 0.3s ease-in-out;
}

.find-us-btn .ic-fa {
    width: 1.05em;
    height: 1.05em;
    margin-right: 10px;
    flex: 0 0 auto;
}

.find-us-btn:hover,
.find-us-btn:focus {
    color: var(--main-color);
    background-color: #fff;
    box-shadow: inset 0 0 0 1px var(--main-color);
}

.find-us-note {
    font-family: var(--second-font);
    font-size: 13px;
    line-height: 1.6;
    /* Saying where the button goes before it is tapped. The old iframe went there
       without asking. */
    color: #6f6f6f;
    margin: 12px 0 0;
}

@media only screen and (max-width: 767px) {
    .find-us {
        padding: 24px;
        gap: 22px;
        text-align: center;
    }

    .find-us-plate {
        /* Centred and capped, so it is a plate and not a stretched banner on a phone. */
        margin: 0 auto;
        max-width: 300px;
        flex-basis: 100%;
    }

    .find-us-body {
        flex-basis: 100%;
    }

    .find-us-address {
        margin-bottom: 18px;
    }
}

.footer {
    background-color: #202020;
    text-align: center;
    padding: 30px 0;
}

.footer span {
    color: var(--main-color);
}

.footer a {
    color: #fff;
}

.footer-container{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.footer-row {
    display: flex;
    justify-content: center!important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.footer-center{
    text-align: center!important;
}

.footer-nav-links{
    display: flex;
    justify-content: space-around;
    list-style:none;
    font-family: var(--second-font);
    padding: 0;
}

.footer-copy {
    font-size: 14px;
    font-family: var(--second-font);
    font-style: italic;
    color: #fff;
}

.footer-little{
    font-size: 14px;
    color: #fff;
}

/*animations*/

.vira-card .vira-card-header .card-icon:after {
    transition: all 0.3s ease-in-out;
}

.vira-card:hover .vira-card-header .card-icon:after {
    height: 120px;
    width: 120px;
    top: -1px;
    left: -1px;
}

.owl-theme .owl-dots .owl-dot span {
    background-color: var(--main-color);
    margin: 5px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--main-color);
    height: 14px;
    width: 14px;
    margin: 3px;
}

@media (max-width: 767px) {
    .vira-card {
        margin-bottom: 60px;
    }

    .maps{
        border-radius: 20px;
        width: 350px; 
        height: 225px;
    }
}

::-webkit-scrollbar {
    width: 1.4rem;
}

::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    width: 1rem;
    border-radius: 5px;
    border: 3px solid #fff;
}

.red_text {
    color: var(--main-color);
}

.telegram {
    color: var(--main-color);
    font-weight: bold;
}

.telegram:hover{
    text-decoration: underline;
    color: var(--main-color);
}

.youtube {
    -webkit-box-shadow: 10px 10px 61px -18px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 61px -18px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 61px -18px rgba(0, 0, 0, 0.75);
}

.video-container {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
    
}

.video-container iframe,
.video-container object,
.video-container embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@keyframes animate-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@media only screen and (max-width: 995px) {
    .menu-links {
        display: none;
    }

    .maps{
        border-radius: 20px;
        width: 400px; 
        height: 250px;
    }
    .faq-answer {
        padding: 0 10px;
    }

    .title:after {
        top: 100px;
    }
}

@media only screen and (max-width: 400px) {
    .maps{
        border-radius: 20px;
        width: 300px; 
        height: 200px;
    }

    .faq-answer {
        padding: 0 10px;
    }

    .title:after {
        top: 120px;
    }

    .title:after {
        top: 95px;
    }
}