/* =========================================================
WEBLINKUS
ENGLISH CALL US PAGE
========================================================= */

.en-call-page {


--en-navy: #071b3a;
--en-navy-2: #0d2c55;

--en-blue: #4db9e9;
--en-blue-light: #d7f1fc;

--en-white: #ffffff;

--en-text: #26364a;
--en-muted: #718096;

--en-border: #e4edf4;

direction: ltr;

color: var(--en-text);
background: #fff;

overflow: hidden;


}

/* =========================================================
CONTAINER
========================================================= */

.en-call-container {


width: min(1180px, calc(100% - 40px));

margin: 0 auto;


}

/* =========================================================
HERO
========================================================= */

.en-call-hero {


position: relative;

padding: 105px 0 95px;

background:
    radial-gradient(
        circle at 85% 20%,
        rgba(77,185,233,.22),
        transparent 28%
    ),
    linear-gradient(
        135deg,
        #d7f1fc 0%,
        #ffffff 60%
    );

overflow: hidden;


}

.en-call-hero-content {


position: relative;

z-index: 2;

max-width: 850px;

margin: auto;

text-align: center;

animation: enCallFadeUp .8s ease both;


}

.en-call-badge {


display: inline-flex;

align-items: center;

gap: 9px;

padding: 9px 18px;

border: 1px solid rgba(77,185,233,.35);

border-radius: 50px;

background: rgba(255,255,255,.75);

color: var(--en-navy);

font-size: 13px;

font-weight: 700;

letter-spacing: .5px;

box-shadow:
    0 10px 30px rgba(7,27,58,.06);


}

.en-call-badge-dot {


width: 8px;
height: 8px;

border-radius: 50%;

background: var(--en-blue);

box-shadow:
    0 0 0 6px rgba(77,185,233,.12);


}

.en-call-hero h1 {


margin: 25px 0 20px;

color: var(--en-navy);

font-size: clamp(38px, 5vw, 68px);

line-height: 1.15;

font-weight: 800;


}

.en-call-hero h1 span {


display: block;

color: #249ed4;


}

.en-call-hero p {


max-width: 720px;

margin: 0 auto;

color: var(--en-muted);

font-size: 18px;

line-height: 1.8;


}

.en-call-hero p strong {


color: var(--en-navy);


}

/* =========================================================
BUTTONS
========================================================= */

.en-call-buttons {


display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 14px;

margin-top: 32px;


}

.en-call-btn {


display: inline-flex;

align-items: center;

justify-content: center;

gap: 10px;

min-height: 54px;

padding: 0 25px;

border-radius: 12px;

text-decoration: none !important;

font-size: 15px;

font-weight: 700;

transition: .3s ease;


}

.en-call-btn-primary {


background: var(--en-navy);

color: #fff !important;

box-shadow:
    0 12px 30px rgba(7,27,58,.18);


}

.en-call-btn-primary:hover {


transform: translateY(-3px);

background: var(--en-navy-2);


}

.en-call-btn-whatsapp {


background: #fff;

color: var(--en-navy) !important;

border: 1px solid #dceaf3;

box-shadow:
    0 10px 25px rgba(7,27,58,.07);


}

.en-call-btn-whatsapp:hover {


transform: translateY(-3px);

border-color: var(--en-blue);

box-shadow:
    0 15px 30px rgba(77,185,233,.16);


}

.en-call-btn-icon {


font-size: 20px;


}

.en-call-trust {


display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 22px;

margin-top: 25px;

color: #627386;

font-size: 13px;

font-weight: 600;


}

/* =========================================================
HERO GLOW
========================================================= */

.en-call-hero-glow {


position: absolute;

width: 320px;
height: 320px;

border-radius: 50%;

filter: blur(60px);

opacity: .35;

background: #8cddff;


}

.en-call-glow-1 {


top: -160px;

right: -100px;


}

.en-call-glow-2 {


bottom: -180px;

left: -100px;


}

/* =========================================================
SECTIONS
========================================================= */

.en-call-info,
.en-call-why,
.en-call-faq {


padding: 100px 0;


}

.en-call-heading {


max-width: 720px;

margin: 0 auto 55px;

text-align: center;


}

.en-call-section-label {


display: block;

margin-bottom: 12px;

color: #239bd2;

font-size: 12px;

font-weight: 800;

letter-spacing: 2px;


}

.en-call-heading h2 {


margin: 0 0 15px;

color: var(--en-navy);

font-size: clamp(30px, 4vw, 46px);

line-height: 1.25;


}

.en-call-heading h2 strong {


color: #299fd4;


}

.en-call-heading p {


margin: 0;

color: var(--en-muted);

font-size: 16px;

line-height: 1.9;


}

/* =========================================================
CONTACT CARDS
========================================================= */

.en-call-grid {


display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 22px;


}

.en-call-card {


position: relative;

padding: 35px 30px;

min-height: 310px;

border: 1px solid var(--en-border);

border-radius: 22px;

background: #fff;

box-shadow:
    0 15px 45px rgba(7,27,58,.06);

transition: .35s ease;


}

.en-call-card:hover {


transform: translateY(-8px);

border-color: rgba(77,185,233,.45);

box-shadow:
    0 25px 55px rgba(7,27,58,.11);


}

.en-call-card-dark {


background: var(--en-navy);

border-color: var(--en-navy);

color: #fff;


}

.en-call-card-icon {


width: 58px;
height: 58px;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 25px;

border-radius: 16px;

background: var(--en-blue-light);

color: #209bd2;


}

.en-call-card-dark .en-call-card-icon {


background: rgba(255,255,255,.1);

color: var(--en-blue);


}

.en-call-card-icon svg {


width: 28px;
height: 28px;

fill: currentColor;

stroke: currentColor;

stroke-width: 1.3;


}

.en-call-card h3 {


margin: 0 0 10px;

color: var(--en-navy);

font-size: 24px;


}

.en-call-card-dark h3 {


color: #fff;


}

.en-call-card p {


margin: 0 0 20px;

color: var(--en-muted);

line-height: 1.8;


}

.en-call-card-dark p {


color: rgba(255,255,255,.7);


}

.en-call-card-links {


display: flex;

flex-direction: column;

gap: 8px;


}

.en-call-card-links a {


color: #209bd2;

font-size: 18px;

font-weight: 700;

text-decoration: none;


}

.en-call-card-dark .en-call-card-links a {


color: var(--en-blue);


}

.en-call-card-links a:hover {


text-decoration: underline;


}

.en-call-card-action {


display: inline-flex;

align-items: center;

gap: 10px;

margin-top: 22px;

color: #fff !important;

text-decoration: none !important;

font-weight: 700;


}

.en-call-card-action span {


transition: .25s;


}

.en-call-card-action:hover span {


transform: translateX(5px);


}

/* =========================================================
SERVICES
========================================================= */

.en-call-services {


display: flex;

flex-wrap: wrap;

gap: 8px;


}

.en-call-services span {


padding: 7px 11px;

border-radius: 7px;

background: var(--en-blue-light);

color: #237da7;

font-size: 12px;

font-weight: 700;


}

/* =========================================================
WHY WEBLINKUS
========================================================= */

.en-call-why {


background: #f7fcff;


}

.en-call-why-grid {


display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 25px;


}

.en-call-why-item {


padding: 30px 25px;

border-left: 1px solid #dcecf4;


}

.en-call-why-item > span {


color: #69c8f1;

font-size: 14px;

font-weight: 800;


}

.en-call-why-item h3 {


margin: 15px 0 10px;

color: var(--en-navy);

font-size: 20px;


}

.en-call-why-item p {


margin: 0;

color: var(--en-muted);

line-height: 1.8;

font-size: 14px;


}

/* =========================================================
FAQ
========================================================= */

.en-call-faq-list {


max-width: 850px;

margin: auto;


}

.en-call-faq-item {


margin-bottom: 12px;

border: 1px solid var(--en-border);

border-radius: 14px;

background: #fff;

overflow: hidden;

transition: .3s ease;


}

.en-call-faq-question {


width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

padding: 21px 24px;

border: 0;

background: transparent;

color: var(--en-navy);

cursor: pointer;

text-align: left;

font-family: inherit;

font-size: 16px;

font-weight: 700;


}

.en-call-faq-question b {


display: flex;

align-items: center;

justify-content: center;

min-width: 30px;

height: 30px;

border-radius: 50%;

background: var(--en-blue-light);

color: #239bd2;

font-size: 22px;

font-weight: 400;

transition: .3s;


}

.en-call-faq-answer {


display: grid;

grid-template-rows: 0fr;

transition: .35s ease;


}

.en-call-faq-answer p {


overflow: hidden;

margin: 0;

padding: 0 24px;

color: var(--en-muted);

line-height: 1.9;


}

.en-call-faq-item.active {


border-color: rgba(77,185,233,.5);


}

.en-call-faq-item.active .en-call-faq-answer {


grid-template-rows: 1fr;


}

.en-call-faq-item.active .en-call-faq-answer p {


padding-bottom: 22px;


}

.en-call-faq-item.active .en-call-faq-question b {


transform: rotate(45deg);


}

/* =========================================================
CTA
========================================================= */

.en-call-cta {


padding: 0 0 100px;


}

.en-call-cta-box {


position: relative;

display: flex;

align-items: center;

justify-content: space-between;

gap: 40px;

padding: 55px;

border-radius: 28px;

background:
    radial-gradient(
        circle at 85% 20%,
        rgba(77,185,233,.18),
        transparent 30%
    ),
    var(--en-navy);

overflow: hidden;


}

.en-call-cta-content {


position: relative;

z-index: 2;


}

.en-call-cta-content > span {


color: var(--en-blue);

font-size: 12px;

font-weight: 800;

letter-spacing: 2px;


}

.en-call-cta-content h2 {


margin: 15px 0;

color: #fff;

font-size: clamp(30px, 4vw, 46px);

line-height: 1.25;


}

.en-call-cta-content h2 strong {


color: var(--en-blue);


}

.en-call-cta-content p {


margin: 0;

color: rgba(255,255,255,.7);

line-height: 1.8;


}

.en-call-cta-buttons {


position: relative;

z-index: 2;

display: flex;

flex-wrap: wrap;

gap: 12px;


}

.en-call-btn-outline {


color: #fff !important;

border: 1px solid rgba(255,255,255,.25);

background: rgba(255,255,255,.06);


}

.en-call-btn-outline:hover {


background: rgba(255,255,255,.12);

transform: translateY(-3px);


}

/* =========================================================
ANIMATION
========================================================= */

@keyframes enCallFadeUp {


from {

    opacity: 0;

    transform: translateY(25px);
}

to {

    opacity: 1;

    transform: translateY(0);
}


}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 900px) {


.en-call-grid {

    grid-template-columns: 1fr;
}


.en-call-why-grid {

    grid-template-columns: repeat(2, 1fr);
}


.en-call-cta-box {

    flex-direction: column;

    align-items: flex-start;
}


}

@media (max-width: 600px) {


.en-call-container {

    width: min(100% - 28px, 1180px);
}


.en-call-hero {

    padding: 75px 0 65px;
}


.en-call-hero h1 {

    font-size: 39px;
}


.en-call-hero p {

    font-size: 15px;
}


.en-call-buttons {

    flex-direction: column;
}


.en-call-btn {

    width: 100%;
}


.en-call-trust {

    flex-direction: column;

    gap: 8px;
}


.en-call-info,
.en-call-why,
.en-call-faq {

    padding: 70px 0;
}


.en-call-heading {

    margin-bottom: 35px;
}


.en-call-why-grid {

    grid-template-columns: 1fr;
}


.en-call-why-item {

    border-left: 0;

    border-bottom: 1px solid #dcecf4;

    padding: 20px 0;
}


.en-call-cta {

    padding-bottom: 70px;
}


.en-call-cta-box {

    padding: 35px 25px;

    border-radius: 22px;
}


.en-call-cta-buttons {

    width: 100%;

    flex-direction: column;
}


.en-call-cta-buttons .en-call-btn {

    width: 100%;
}


}

/* =========================================================
ACCESSIBILITY
========================================================= */

.en-call-faq-question:focus-visible,
.en-call-btn:focus-visible,
.en-call-card-links a:focus-visible,
.en-call-card-action:focus-visible {


outline: 3px solid rgba(77,185,233,.5);

outline-offset: 3px;


}

/* =========================================================
REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


.en-call-page *,
.en-call-page *::before,
.en-call-page *::after {

    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;
}


}