/* @import url("../fonts/satoshi/WEB/css/satoshi.css");
@import url("../fonts/ClashDisplay/WEB/css/clash-display.css");
@import url("../fonts/GeneralSans/WEB/css/general-sans.css");
@import url("../fonts/Manrope/WEB/css/manrope.css");
@import url("../fonts/PlusJakartaSans/WEB/css/plus-jakarta-sans.css"); */

/* ========= TÍTULOS ========= */
/* @font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/WEB/fonts/Poppins-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
} */

/* ========= TEXTO ========= */
/* @font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto/Roboto-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
} */

/* tipografia titulos Poppins */

/* tipografia texto Roboto */

/* Variables */
:root {
    /* Opción 1 */
    --primary-color: #121B48;
    --primary-color-hover: #163E6D;
    --primary-color-pressed: #123154;
    --primary-color-soft: #EAF1F8;
    --primary-color-rgb: 30 79 138;
    --secondary-color: #0B6CB5;
    --secondary-color-soft: #DFF5F2;
    --accent-color: #E86727;
    --accent-color-soft: #FFF1E8;
    --tertiary-color: #FFFFFF;
    --quaternary-color: #E0E4EB;
    --quinary-color: #F7F9FC;
    --border-color: #A7A9C7;
    --text-color: #0F172A;
    --text-muted-color: #334155;
    --text-subtle-color: #64748B;
    --navy-color: #123154;

    /* Opción 2 */
    /* --primary-color: #1D4ED8;
    --primary-color-hover: #1E40AF;
    --primary-color-pressed: #1E3A8A;
    --primary-color-soft: #DBEAFE;
    --primary-color-rgb: 29 78 216;

    --secondary-color: #0369A1;
    --secondary-color-soft: #E0F2FE;

    --accent-color: #F2752F;
    --accent-color-soft: #FFF1E8;

    --tertiary-color: #FFFFFF;
    --quaternary-color: #EEF6FF;
    --quinary-color: #F8FAFC;

    --border-color: #BFDBFE;

    --text-color: #0B3B6E;
    --text-muted-color: #334155;
    --text-subtle-color: #475569;

    --contrast-color: #0369A1;
    --navy-color: #1E3A8A;

    --background-light: #F8FAFC;
    --background-off-white: #EEF6FF;
    --background-dark: #0F172A;
    --background-dark-card: #0B3B6E;

    --card-light: #FFFFFF;
    --card-dark: #0B3B6E; */


    /* Opción 3 */
    /* --primary-color: #312E81;
    --primary-color-hover: #4C1D95;
    --primary-color-pressed: #312E81;
    --primary-color-soft: #EDE9FE;
    --primary-color-rgb: 91 33 182;

    --secondary-color: #6D28D9;
    --secondary-color-soft: #F3E8FF;

    --accent-color: #F2752F;
    --accent-color-soft: #FFF1E8;

    --tertiary-color: #FFFFFF;
    --quaternary-color: #EEF2FF;
    --quinary-color: #F7F7FB;

    --border-color: #C7D2FE;

    --text-color: #0F172A;
    --text-muted-color: #334155;
    --text-subtle-color: #64748B;

    --contrast-color: #5B21B6;
    --navy-color: #312E81;

    --background-light: #F7F7FB;
    --background-off-white: #EEF2FF;
    --background-dark: #0F172A;
    --background-dark-card: #312E81;

    --card-light: #FFFFFF;
    --card-dark: #312E81; */

    /* Opción 4 */
    /* --primary-color: #1E4F8A;
    --primary-color-hover: #163E6D;
    --primary-color-pressed: #123154;
    --primary-color-soft: #EAF1F8;
    --primary-color-rgb: 30 79 138;

    --secondary-color: #0F766E;
    --secondary-color-soft: #DFF5F2;

    --accent-color: #F2752F;
    --accent-color-soft: #FFF1E8;

    --tertiary-color: #FFFFFF;
    --quaternary-color: #EEF2F6;
    --quinary-color: #F7F9FC;

    --border-color: #CBD5E1;

    --text-color: #1E3A5F;
    --text-muted-color: #334155;
    --text-subtle-color: #64748B;

    --navy-color: #123154; */

    /* Opción 5 */
    /* --primary-color: #1E4F8A;
    --primary-color-hover: #163E6D;
    --primary-color-pressed: #123154;
    --primary-color-soft: #EAF1F8;
    --primary-color-rgb: 30 79 138;

    --secondary-color: #5B21B6;
    --secondary-color-soft: #EDE9FE;

    --accent-color: #F2752F;
    --accent-color-soft: #FFF1E8;

    --tertiary-color: #FFFFFF;
    --quaternary-color: #F1F3FF;
    --quinary-color: #F8F9FD;

    --border-color: #C7D2FE;

    --text-color: #0F172A;
    --text-muted-color: #334155;
    --text-subtle-color: #64748B;

    --navy-color: #123154; */
}



html,
body {
    overflow-x: hidden;
    max-width: 100%;
}


body {
    font-family: "Roboto", sans-serif !important;
    background-color: var(--quinary-color);
    color: var(--text-color);
    padding-top: 80px;
}

@media (max-width: 1024px) {
    body {
        padding-top: 64px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-titular {
    font-family: "Poppins", sans-serif !important;
    font-weight: 700;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

h1 {
    font-size: 4rem;
}

.text-contrast {
    font-style: italic;
}

h2 {
    font-size: 2rem;
}

p {
    color: var(--text-muted-color);
}

a {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* img {
    border-radius: 1rem;
} */

.icon-custom-gray {
    filter: invert(65%) sepia(9%) saturate(253%) hue-rotate(172deg) brightness(92%) contrast(88%);
}

/* Header */
/* .site-header {
    position: relative;
    z-index: 1030;
} */


/* APARIENCIA DEL MENU DE NAVIGACION AL HACER SCROLL UP */
.nav-header {
    transition: transform 0.4s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
}

.nav-up {
    transform: translateY(-100%);
}

.nav-down {
    transform: translateY(0);
}



/* Links centrados (tono gris como en la captura) */
.site-nav-link {
    color: var(--text-muted-color);
    /* gris */
    font-weight: 500;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.site-nav-link:hover,
.site-nav-link:focus {
    color: var(--text-color);
    /* gris más oscuro */
}

/* Base */
.nav-underline {
    position: relative;
    text-decoration: none;
}

.nav-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.12rem;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background-color: var(--secondary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
}

/* Entrada */
.nav-underline.is-entering[data-enter="left"]::after {
    transform-origin: left;
}

.nav-underline.is-entering[data-enter="right"]::after {
    transform-origin: right;
}

.nav-underline.is-entering::after {
    transform: scaleX(1);
    transition: transform 0.18s ease-out;
}

/* Salida */
.nav-underline.is-leaving[data-leave="left"]::after {
    transform-origin: left;
}

.nav-underline.is-leaving[data-leave="right"]::after {
    transform-origin: right;
}

.nav-underline.is-leaving::after {
    transform: scaleX(0);
    transition: transform 0.28s cubic-bezier(.22, 1, .36, 1);
}

/* Entrada desde arriba/abajo: desde centro a extremos */
.nav-underline.is-entering[data-enter="top"]::after,
.nav-underline.is-entering[data-enter="bottom"]::after {
    transform-origin: center;
}

/* Salida hacia arriba/abajo: de extremos al centro */
.nav-underline.is-leaving[data-leave="top"]::after,
.nav-underline.is-leaving[data-leave="bottom"]::after {
    transform-origin: center;
}



/* Botones tipo "pill" */
.site-btn {
    border-radius: 0.5rem;
    padding: 0.6rem 1.1rem;
    font-weight: 600;
    border: 1px solid transparent;
    line-height: 1;
    white-space: nowrap;
}

/* Botón rojo */
.site-btn-primary {
    background: var(--primary-color);
    color: #fff;
}

.site-btn-primary:hover,
.site-btn-primary:focus {
    background: var(--primary-color-hover);
    color: #fff;
    transform: translateY(-2px);
}

.btn-hero-primary {
    background-color: var(--primary-color);
    color: #fff;
    padding: 1rem 2rem;
    border: 2.5px solid var(--primary-color);
}

.btn-hero-primary:hover,
.btn-hero-primary:focus {
    background-color: var(--primary-color-hover);
    color: #fff;
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

/* Botón azul marino */
.site-btn-secondary {
    background: var(--navy-color);
    color: #fff;
}

.site-btn-secondary:hover,
.site-btn-secondary:focus {
    background: var(--primary-color-pressed);
    color: #fff;
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

.btn-hero-secondary {
    background-color: var(--navy-color);
    color: #fff;
    padding: 1rem 2rem;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
}

.btn-hero-secondary:hover,
.btn-hero-secondary:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2.5px solid rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

.bg-section {
    background: var(--navy-color);
    color: #ffffff;
}

.hero-shape-secondary {
    display: none;
}

@media (min-width: 854px) {
    .hero-shape-secondary {
        display: block;
        position: absolute;
        top: 19%;
        right: 47%;
        z-index: 10;
        animation: spin-clockwise 20s linear infinite;
    }
}

@media (min-width: 1024px) {
    .hero-shape-secondary {
        display: block;
        position: absolute;
        top: 20%;
        right: 43%;
        z-index: 10;
        animation: spin-clockwise 20s linear infinite;
    }
}

@keyframes spin-clockwise {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Ocultamos los elementos inicialmente */
.js .animate-on-scroll {
    opacity: 0;
    transition: none !important;
    will-change: opacity, transform;
}

/* 2. Cuando la animación se inicia, garantizamos visibilidad */
.js .animate-on-scroll.animate__animated,
.js .animate-on-scroll.animated-in {
    opacity: 1;
}

@keyframes aos-fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.aos-fadeInUp {
    animation-name: aos-fadeInUp;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}


.hero-image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
}

.hero-image {
    display: block;
}

.hero-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(var(--primary-color-rgb) / 0.18) 0%, transparent 55%);
    pointer-events: none;
}

/* Sombra eliptica "suelo" del mockup principal */
#mockup-hero div[class*="sombra"]:has(> img[src$="mockup-hero-transparente.png"]) {
    position: relative;
    overflow: visible;
}

#mockup-hero div[class*="sombra"]:has(> img[src$="mockup-hero-transparente.png"])::after {
    content: "";
    position: absolute;
    left: 5%;
    bottom: -2rem;
    width: 111%;
    height: 5rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.34);
    filter: blur(11px);
    pointer-events: none;
    z-index: 0;
}

#mockup-hero img[src$="mockup-hero-transparente.png"] {
    position: relative;
    z-index: 1;
}

/* Banner */

#banner {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 34%),
        radial-gradient(ellipse at top center, rgba(255, 255, 255, 0.18), transparent 74%),
        radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.12), transparent 28%),
        linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
}

#banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(179, 179, 179, 0.158) 1px, transparent 1px),
        linear-gradient(90deg, rgba(179, 179, 179, 0.205) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 80%);
    pointer-events: none;
}

.banner-item {
    color: var(--tertiary-color);
}

.separador-banner {
    position: relative;
}

.separador-banner::before,
.separador-banner::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 5rem;
    background-color: rgba(255, 255, 255, 0.16);
}

.separador-banner::before {
    left: 0;
}

.separador-banner::after {
    right: 0;
}

/* Formulario */
.card {
    border-radius: 1rem;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.card-title {
    font-size: 2rem;
    font-weight: 600;
}

.card-text {
    font-size: 1.2rem;
    font-weight: 400;
}

.form-input {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.form-input:focus {
    transform: scale(1.01);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(30, 79, 138, 0.08);
    transition: transform 0.2s ease-in-out;
}

/* Sección 1 */

.list-item-icon {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
    background-color: var(--quaternary-color);
    color: var(--primary-color);
}

/* Accordion */
.accordion-content {
    transition: max-height 0.3s ease-out, padding 0.3s ease;
    max-height: 0;
    overflow: hidden;
}

.accordion-item.active .accordion-content {
    max-height: 200px;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

/* Portfolio */
.portfolio-overlay {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.18), rgba(15, 23, 42, 0.82));
    backdrop-filter: blur(2px);
}

.portfolio-card {
    position: relative;
    width: 100%;
    min-width: 260px;
}

.portfolio-card__inner {
    position: relative;
    width: 100%;
}

.portfolio-card__backdrop {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 12.25rem 0.875rem 1rem;
    background-color: var(--primary-color);
    border: 1px solid var(--secondary-color);
    border-radius: 0.875rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    text-align: center;
}

.portfolio-card__backdrop.bottom {
    padding: 12.75rem 0.875rem 1rem;
}

.portfolio-card__image-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: calc(100% + 1.5rem);
    transform: translateX(-50%);
    border: 4px solid var(--tertiary-color);
    border-radius: 0.625rem;
    background-color: var(--tertiary-color);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    overflow: visible;
}

.portfolio-card__image-link {
    display: block;
    overflow: hidden;
    border-radius: 0.375rem;
    line-height: 0;
}

.portfolio-card__image-link img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-card__image-link:hover img {
    transform: scale(1.03);
}

.portfolio-card__icon {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    background-color: var(--tertiary-color);
    color: var(--primary-color);
    font-size: 0.9rem;
    transform: translate(-50%, 50%);
}

.portfolio-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-top: 2rem;
}

.portfolio-card__content h4 {
    margin: 0;
    color: var(--tertiary-color);
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: center;
}

.portfolio-card__tag {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background-color: rgba(11, 108, 181, 0.35);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    line-height: 1.2;
}

@media (min-width: 1024px) {
    .portfolio-card__content h4 {
        white-space: nowrap;
    }
}

/* Premium dark surfaces */
.premium-dark-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 28%),
        radial-gradient(circle at bottom right, rgba(15, 118, 110, 0.14), transparent 26%),
        linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-pressed) 100%);
    color: var(--tertiary-color);
}

.premium-dark-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 82%);
    pointer-events: none;
}

.premium-dark-inner {
    position: relative;
    z-index: 1;
}

.premium-dark-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.88));
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 1rem;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
}

.premium-cta {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    background: var(--primary-color);
    color: var(--tertiary-color);
    transition: 0.4s;
    box-shadow: inset 0 0 0 0 var(--primary-color-hover);
}

.premium-outline-cta {
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    transition: 0.4s;
    box-shadow: inset 0 0 0 0 var(--primary-color-hover);
}

.premium-cta-accent {
    background: var(--accent-color) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 0 var(--primary-color);
    border: none;
    transition: 0.4s;
    position: relative;
    z-index: 1;
}

.premium-cta-accent:hover {
    box-shadow: inset 40rem 0 0 0 var(--secondary-color);
    color: #ffffff;
    transform: translateY(-2px);
}



.no-hover {
    transition: 0.4s;
    transform: translateY(0);
}

.no-hover:hover {
    transform: translateY(-2px) !important;
    background-color: transparent !important;
    color: var(--secondary-color) !important;
    box-shadow: none !important;
}

/* #whatsApp {
    background: #25D366;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 18px 34px rgba(37, 211, 102, 0.28);
} */

.premium-google-button {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color) !important;
    backdrop-filter: blur(10px) saturate(135%);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.92);
}

.premium-google-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 120% at 10% 0%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(90% 90% at 100% 100%, rgba(30, 79, 138, 0.08) 0%, rgba(15, 118, 110, 0) 70%);
    pointer-events: none;
}

.premium-google-button:hover,
.premium-google-button:focus {
    transform: translateY(-2px);
    border-color: rgba(30, 79, 138, 0.28) !important;
    background: var(--primary-color-soft);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.premium-google-button:hover::before,
.premium-google-button:focus::before {
    opacity: 1;
}

.premium-cta:hover,
.premium-cta:focus {
    box-shadow: inset 40rem 0 0 0 var(--secondary-color);
    color: var(--tertiary-color);
    transform: translateY(-2px);
}

.premium-outline-cta:hover,
.premium-outline-cta:focus {
    box-shadow: inset 40rem 0 0 0 var(--secondary-color);
    color: var(--tertiary-color);
    border-color: var(--secondary-color);
    transform: translateY(-2px);
}

.premium-kicker {
    letter-spacing: 0.2em;
}

.premium-muted {
    color: rgba(255, 255, 255, 0.76);
}

svg {
    fill: currentColor;
}




/* COOKIE CONSENT */
#cc-main {
    --cc-bg: #ffffff;
    --cc-font-family: 'Poppins', sans-serif !important;
    --cc-text: var(--text-color);

    /* Boton "acceptAllBtn" */
    --cc-btn-primary-bg: var(--primary-color);
    --cc-btn-primary-text: #ffffff;
    --cc-btn-primary-hover-bg: var(--primary-color-hover);

    --cc-modal-border-radius: 12px;
    --cc-btn-border-radius: 8px;
}

#cc-main .cm__title {
    color: var(--primary-color);
}

#cc-main .cm__desc {
    color: var(--text-muted-color-color);
}

/* sin esto aparece margin 6px en el boton acceptNecessaryBtn */
#cc-main .cm__btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (max-width: 640px) {
    #cc-main .cm__btn-group .cm__btn[data-role="necessary"] {
        margin-top: 0 !important;
    }
}


/* Boton "acceptNecessaryBtn" */
#cc-main .cm__btn[data-role="necessary"] {
    background: #e5e7eb !important;
    color: #1b2a4a !important;
    border: none !important;
}

#cc-main .cm__btn[data-role="necessary"]:hover {
    color: var(--primary-color-hover) !important;
}


/* Boton "showPreferencesBtn" */
#cc-main .cm__btn[data-role="show"] {
    background: #ffffff !important;
    color: var(--primary-color);
    border: 2px solid #e5e7eb !important;
}

#cc-main .cm__btn[data-role="show"]:hover {
    color: var(--primary-color-hover) !important;
}


/* Order de los botones*/
#cc-main .cm__btn[data-role="necessary"] {
    order: 1;
}

#cc-main .cm__btn[data-role="all"] {
    order: 2;
}

#cc-main .cm__btn[data-role="show"] {
    order: 3;
}


/* layout */
#cc-main .cm__btn-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    margin-bottom: 4px;
}

#cc-main .cm__btn[data-role="necessary"],
#cc-main .cm__btn[data-role="all"] {
    grid-column: auto;
}

#cc-main .cm__btn[data-role="show"] {
    grid-column: 1 / -1;
}


/* Los enlaces por debajo */
#cc-main .cm__footer-links {
    margin-top: 15px;
    border-top: 1px solid var(--border-color);
    padding-top: 10px;
}

#cc-main .cm__footer-links a {
    color: #9ca3af !important;
    font-size: 0.75rem;
    text-decoration: underline;
    margin-right: 15px;
}


.grecaptcha-badge {
    visibility: hidden;
}


.pill{
    border-color:#F68E4E;
    padding:22px;

}