/* Start custom CSS for html, class: .elementor-element-d9379e1 *//* =========================================================
EAGLES SKILLS INSTITUTE
PREMIUM DARK + BLUE + ORANGE DESIGN
NO HEADER / NO FOOTER
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

/* =========================================================
ROOT
========================================================= */

.eagles-landing {

--navy: #041326;
--navy2: #071d38;
--navy3: #0b294c;

--blue: #006cff;
--blue2: #1684ff;
--blue3: #45a1ff;

--orange: #ff6b0b;
--orange2: #ff8b2c;
--orange3: #ffad5c;

--white: #ffffff;
--offwhite: #f7f9fc;

--text: #263c55;
--muted: #70839a;

--border: #dfe7f0;

width: 100%;
overflow: hidden;

font-family: "DM Sans", sans-serif;

background: var(--offwhite);
color: var(--text);
}

.eagles-landing *,
.eagles-landing *::before,
.eagles-landing *::after {
box-sizing: border-box;
}

.eagles-landing img {
width: 100%;
display: block;
}

.eagles-landing a {
text-decoration: none;
}

.eagles-container {
width: min(1180px, calc(100% - 40px));
margin: auto;
}

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

.esi-hero {

position: relative;

min-height: 770px;

display: flex;
align-items: center;

overflow: hidden;

background:
radial-gradient(
circle at 76% 22%,
rgba(0,108,255,.28),
transparent 30%
),
radial-gradient(
circle at 90% 80%,
rgba(255,107,11,.18),
transparent 28%
),
var(--navy);
}

.esi-grid-bg {

position: absolute;
inset: 0;

background-image:
linear-gradient(
rgba(255,255,255,.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.035) 1px,
transparent 1px
);

background-size: 55px 55px;

opacity: .6;
}

.esi-blue-glow {

position: absolute;

width: 450px;
height: 450px;

right: -160px;
top: -150px;

border-radius: 50%;

background: rgba(0,108,255,.22);

filter: blur(80px);
}

.esi-orange-glow {

position: absolute;

width: 300px;
height: 300px;

left: -120px;
bottom: -120px;

border-radius: 50%;

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

filter: blur(80px);
}

.esi-hero-grid {

position: relative;
z-index: 3;

display: grid;

grid-template-columns:
.92fr 1.08fr;

align-items: center;

gap: 70px;
}

/* HERO CONTENT */

.esi-hero-content {

animation:
esiHeroIn 1s ease both;
}

.esi-top-badge {

display: inline-flex;
align-items: center;
gap: 9px;

padding: 9px 15px;

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

border-radius: 50px;

color: #c5d9f1;

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

backdrop-filter: blur(15px);

font-size: 9px;
font-weight: 900;

letter-spacing: 1.5px;
}

.esi-top-badge span {

width: 7px;
height: 7px;

border-radius: 50%;

background: var(--orange);

box-shadow:
0 0 0 5px
rgba(255,107,11,.13);

animation: esiPulse 2s infinite;
}

.esi-hero-content h1 {

margin: 27px 0 22px;

color: #fff;

font-family: "Manrope", sans-serif;

font-size:
clamp(50px, 6vw, 76px);

line-height: 1.01;

letter-spacing: -4px;

font-weight: 800;
}

.esi-hero-content h1 strong {

display: block;

color: var(--orange);

font-weight: 800;
}

.esi-hero-content > p {

max-width: 560px;

margin: 0;

color: #9fb4ce;

font-size: 15px;

line-height: 1.85;
}

.esi-hero-actions {

display: flex;
gap: 12px;

margin-top: 32px;
}

.esi-btn {

min-height: 53px;

display: inline-flex;

align-items: center;
justify-content: center;

gap: 13px;

padding: 0 23px;

border-radius: 9px;

font-size: 12px;
font-weight: 800;

transition:
.35s ease;
}

.esi-btn b {

font-size: 18px;

transition:
transform .3s ease;
}

.esi-btn b {
transform: translateX(4px);
}

.esi-btn-orange {

color: #fff;

background:
linear-gradient(
135deg,
var(--orange),
var(--orange2)
);

box-shadow:
0 14px 35px
rgba(255,107,11,.28);
}

.esi-btn-orange {

transform: translateY(-3px);

box-shadow:
0 20px 45px
rgba(255,107,11,.36);
}

.esi-btn-white {

color: #fff;

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

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

backdrop-filter: blur(12px);
}

.esi-btn-white {

transform: translateY(-3px);

background:
rgba(255,255,255,.11);
}

/* PROOF */

.esi-hero-proof {

display: flex;
align-items: center;

gap: 12px;

margin-top: 38px;
}

.esi-proof-avatars {
display: flex;
}

.esi-proof-avatars i {

width: 31px;
height: 31px;

margin-left: -7px;

display: flex;
align-items: center;
justify-content: center;

border:
2px solid
var(--navy);

border-radius: 50%;

color: #fff;

background: #204a76;

font-style: normal;

font-size: 7px;
font-weight: 900;
}

.esi-proof-avatars i {

margin-left: 0;

background:
var(--orange);
}

.esi-hero-proof strong,
.esi-hero-proof span {
display: block;
}

.esi-hero-proof strong {

color: #e5eef8;

font-size: 10px;
}

.esi-hero-proof span {

margin-top: 3px;

color: #718aa5;

font-size: 8px;
}

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

.esi-hero-visual {

position: relative;

min-height: 570px;

display: flex;
align-items: center;
justify-content: center;

animation:
esiImageIn 1s .15s ease both;
}

.esi-hero-photo {

position: relative;
z-index: 3;

width: min(500px,100%);

overflow: hidden;

border-radius: 25px;

transform: rotate(2deg);

border:
5px solid
rgba(255,255,255,.06);

box-shadow:
0 35px 90px
rgba(0,0,0,.40);
}

.esi-hero-photo img {

height: 560px;

object-fit: cover;

transition:
transform 1s ease;
}

.esi-hero-photo img {
transform: scale(1.06);
}

.esi-photo-overlay {

position: absolute;
inset: 0;

background:
linear-gradient(
to top,
rgba(4,19,38,.78),
transparent 60%
);
}

.esi-photo-caption {

position: absolute;

left: 27px;
bottom: 25px;

color: #fff;
}

.esi-photo-caption span {

display: block;

color: var(--orange);

font-size: 8px;

font-weight: 900;

letter-spacing: 2px;
}

.esi-photo-caption strong {

display: block;

margin-top: 5px;

font-family: "Manrope", sans-serif;

font-size: 20px;
}

.esi-visual-ring {

position: absolute;

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

border-radius: 50%;
}

.ring-one {

width: 540px;
height: 540px;

animation:
esiRotate 25s linear infinite;
}

.ring-two {

width: 420px;
height: 420px;

border-color:
rgba(255,107,11,.10);

animation:
esiRotate 18s linear infinite reverse;
}

.esi-floating {

position: absolute;
z-index: 5;

display: flex;
align-items: center;

gap: 10px;

padding: 13px 15px;

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

border-radius: 12px;

background:
rgba(5,25,47,.92);

backdrop-filter: blur(15px);

box-shadow:
0 20px 50px
rgba(0,0,0,.32);
}

.esi-floating strong,
.esi-floating small {

display: block;
}

.esi-floating strong {

color: #fff;

font-size: 9px;
}

.esi-floating small {

margin-top: 3px;

color: #7891ac;

font-size: 7px;
}

.esi-float-icon {

width: 35px;
height: 35px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 9px;

font-size: 15px;
}

.esi-float-icon.blue {

color: #65aaff;

background:
rgba(0,108,255,.16);
}

.esi-float-icon.orange {

color: #ff9a52;

background:
rgba(255,107,11,.14);
}

.esi-floating-one {

left: -15px;
top: 65px;

animation:
esiFloat 4s infinite ease-in-out;
}

.esi-floating-two {

right: -20px;
bottom: 80px;

animation:
esiFloat 4s 1s infinite ease-in-out;
}

.esi-number-card {

position: absolute;

z-index: 6;

left: 10px;
bottom: 20px;

width: 100px;
height: 100px;

display: flex;
flex-direction: column;
justify-content: center;

padding-left: 18px;

border:
5px solid
rgba(4,19,38,.95);

border-radius: 50%;

color: #fff;

background:
linear-gradient(
135deg,
var(--orange),
#ff9545
);

box-shadow:
0 15px 40px
rgba(0,0,0,.3);
}

.esi-number-card strong {

font-family: "Manrope", sans-serif;

font-size: 26px;
}

.esi-number-card span {

font-size: 7px;

line-height: 1.5;

font-weight: 800;
}

/* =========================================================
INTRO
========================================================= */

.esi-intro {

padding: 120px 0;

background:
#ffffff;
}

.esi-intro-grid {

display: grid;

grid-template-columns:
1fr 1fr;

align-items: center;

gap: 100px;
}

.esi-intro-image {

position: relative;

height: 490px;

overflow: visible;
}

.esi-intro-image::before {

content: "";

position: absolute;

width: 110px;
height: 110px;

left: -30px;
top: -25px;

border:
12px solid
var(--orange);

opacity: .8;

border-radius: 50%;
}

.esi-intro-image img {

height: 100%;

object-fit: cover;

border-radius: 22px;

box-shadow:
0 30px 70px
rgba(4,19,38,.17);
}

.esi-image-tag {

position: absolute;

right: -25px;
bottom: 35px;

display: flex;
align-items: center;

gap: 10px;

padding: 13px 17px;

color: #fff;

background: var(--navy);

border-radius: 9px;

box-shadow:
0 15px 35px
rgba(4,19,38,.25);
}

.esi-image-tag strong {

color: var(--orange);

font-size: 21px;
}

.esi-image-tag span {

font-size: 7px;

line-height: 1.5;

font-weight: 900;
}

.esi-label {

color: var(--blue);

font-size: 9px;

font-weight: 900;

letter-spacing: 2px;
}

.esi-intro-content h2,
.esi-heading h2,
.esi-dark-content h2,
.esi-reviews-heading h2 {

margin: 15px 0 20px;

color: var(--navy);

font-family: "Manrope", sans-serif;

font-size:
clamp(38px,4.4vw,56px);

line-height: 1.08;

letter-spacing: -2.5px;
}

.esi-intro-content h2 span,
.esi-heading h2 span,
.esi-dark-content h2 span,
.esi-reviews-heading h2 span {

color: var(--blue);
}

.esi-intro-content > p {

color: #64778d;

font-size: 14px;

line-height: 1.85;
}

.esi-check-list {

margin-top: 28px;
}

.esi-check-list > div {

display: flex;

gap: 12px;

padding: 13px 0;

border-bottom:
1px solid
#e3e9ef;
}

.esi-check-list b {

width: 29px;
height: 29px;

flex-shrink: 0;

display: flex;
align-items: center;
justify-content: center;

color: #fff;

border-radius: 8px;

background: var(--blue);

font-size: 11px;
}

.esi-check-list span {

color: #8391a1;

font-size: 9px;
line-height: 1.6;
}

.esi-check-list strong {

display: block;

margin-bottom: 2px;

color: var(--navy);

font-size: 11px;
}

/* =========================================================
STATS
========================================================= */

.esi-stats {

background: var(--navy);

border-top:
1px solid
rgba(255,255,255,.04);

border-bottom:
1px solid
rgba(255,255,255,.04);
}

.esi-stats-grid {

display: grid;

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

.esi-stat {

padding: 42px 20px;

text-align: center;

border-right:
1px solid
rgba(255,255,255,.08);
}

.esi-stat {
border-right: 0;
}

.esi-stat strong {

display: block;

color: #fff;

font-family: "Manrope", sans-serif;

font-size: 40px;
}

.esi-stat strong span {
color: var(--orange);
}

.esi-stat p {

margin: 5px 0 0;

color: #8299b2;

font-size: 9px;
}

/* =========================================================
PROGRAMS
========================================================= */

.esi-programs {

padding: 120px 0;

background:
#f4f7fb;
}

.esi-heading {

display: flex;

align-items: flex-end;

justify-content: space-between;

gap: 50px;

margin-bottom: 55px;
}

.esi-heading > p {

max-width: 380px;

margin: 0 0 4px;

color: #718197;

font-size: 13px;

line-height: 1.8;
}

.esi-course-grid {

display: grid;

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

gap: 18px;
}

.esi-course {

overflow: hidden;

border-radius: 16px;

border:
1px solid
#dbe4ee;

background: #fff;

transition:
.4s ease;
}

.esi-course {

transform:
translateY(-8px);

border-color:
rgba(0,108,255,.3);

box-shadow:
0 25px 60px
rgba(4,19,38,.12);
}

.esi-course-image {

position: relative;

height: 210px;

overflow: hidden;
}

.esi-course-image::after {

content: "";

position: absolute;

inset: 0;

background:
linear-gradient(
to top,
rgba(4,19,38,.55),
transparent 60%
);
}

.esi-course-image img {

height: 100%;

object-fit: cover;

transition:
.6s ease;
}

.esi-course
.esi-course-image img {

transform:
scale(1.08);
}

.esi-course-image span {

position: absolute;

z-index: 3;

right: 14px;
top: 14px;

width: 33px;
height: 33px;

display: flex;
align-items: center;
justify-content: center;

color: #fff;

border-radius: 50%;

background:
rgba(4,19,38,.78);

backdrop-filter:
blur(10px);

font-size: 8px;

font-weight: 900;
}

.esi-course-body {

padding: 24px;
}

.esi-course-body small {

color: var(--orange);

font-size: 8px;

font-weight: 900;

letter-spacing: 1.5px;
}

.esi-course-body h3 {

margin: 8px 0 10px;

color: var(--navy);

font-family: "Manrope", sans-serif;

font-size: 20px;
}

.esi-course-body p {

min-height: 72px;

margin: 0;

color: #718197;

font-size: 11px;

line-height: 1.75;
}

.esi-course-body a {

display: inline-block;

margin-top: 13px;

color: var(--blue);

font-size: 10px;

font-weight: 900;
}

/* =========================================================
DARK FEATURE
========================================================= */

.esi-dark-feature {

padding: 120px 0;

background:
radial-gradient(
circle at 80% 20%,
rgba(0,108,255,.23),
transparent 30%
),
var(--navy);
}

.esi-dark-grid {

display: grid;

grid-template-columns:
1fr 1fr;

align-items: center;

gap: 100px;
}

.esi-dark-image {

position: relative;

height: 500px;

overflow: hidden;

border-radius: 23px;

transform: rotate(-2deg);

box-shadow:
0 35px 75px
rgba(0,0,0,.4);
}

.esi-dark-image img {

height: 100%;

object-fit: cover;
}

.esi-dark-image::after {

content: "";

position: absolute;

inset: 0;

background:
linear-gradient(
to top,
rgba(4,19,38,.8),
transparent 65%
);
}

.esi-dark-image-label {

position: absolute;

z-index: 3;

left: 25px;
bottom: 25px;

color: #fff;
}

.esi-dark-image-label span {

display: block;

color: var(--orange);

font-size: 8px;

font-weight: 900;

letter-spacing: 2px;
}

.esi-dark-image-label strong {

display: block;

margin-top: 4px;

font-family: "Manrope", sans-serif;

font-size: 27px;
}

.orange-label {
color: var(--orange);
}

.esi-dark-content h2 {
color: #fff;
}

.esi-dark-content h2 span {
color: var(--orange);
}

.esi-dark-content > p {

max-width: 520px;

color: #8fa5bd;

font-size: 14px;

line-height: 1.85;
}

.esi-dark-points {

margin-top: 30px;
}

.esi-dark-points > div {

display: flex;

gap: 17px;

padding: 16px 0;

border-bottom:
1px solid
rgba(255,255,255,.08);
}

.esi-dark-points > div > b {

color: var(--orange);

font-size: 9px;
}

.esi-dark-points section strong,
.esi-dark-points section small {

display: block;
}

.esi-dark-points section strong {

color: #fff;

font-size: 12px;
}

.esi-dark-points section small {

margin-top: 3px;

color: #748ca7;

font-size: 9px;
}

/* =========================================================
REVIEWS
========================================================= */

.esi-reviews {

padding: 120px 0;

overflow: hidden;

background:
#ffffff;
}

.esi-reviews-heading {

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

margin: 0 auto 55px;

text-align: center;
}

.esi-reviews-heading h2 {
margin-bottom: 14px;
}

.esi-reviews-heading p {

max-width: 580px;

margin: auto;

color: #77879a;

font-size: 13px;

line-height: 1.8;
}

.esi-review-wrapper {

width: 100%;

overflow: hidden;

position: relative;
}

.esi-review-wrapper::before,
.esi-review-wrapper::after {

content: "";

position: absolute;

z-index: 5;

top: 0;

bottom: 0;

width: 150px;

pointer-events: none;
}

.esi-review-wrapper::before {

left: 0;

background:
linear-gradient(
90deg,
#fff,
transparent
);
}

.esi-review-wrapper::after {

right: 0;

background:
linear-gradient(
-90deg,
#fff,
transparent
);
}

.esi-review-track {

display: flex;

width: max-content;

gap: 18px;

animation:
esiReviewScroll 38s
linear infinite;
}

.esi-review-track {
animation-play-state: paused;
}

.esi-review-card {

width: 380px;

min-height: 250px;

flex-shrink: 0;

padding: 27px;

border:
1px solid
#dce5ef;

border-radius: 17px;

background:
#fff;

box-shadow:
0 10px 35px
rgba(4,19,38,.05);

transition:
.35s ease;
}

.esi-review-card {

transform:
translateY(-6px);

box-shadow:
0 25px 55px
rgba(4,19,38,.11);
}

.esi-review-top {

display: flex;

align-items: center;

gap: 11px;
}

.esi-student-avatar {

width: 43px;
height: 43px;

display: flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius: 50%;

color: #fff;

background:
linear-gradient(
135deg,
var(--blue),
#3995ff
);

font-size: 9px;

font-weight: 900;
}

.orange-avatar {

background:
linear-gradient(
135deg,
var(--orange),
var(--orange2)
);
}

.esi-review-top > div(2) {

flex: 1;
}

.esi-review-top strong,
.esi-review-top small {

display: block;
}

.esi-review-top strong {

color: var(--navy);

font-family: "Manrope", sans-serif;

font-size: 11px;
}

.esi-review-top small {

margin-top: 3px;

color: #8b99a9;

font-size: 8px;
}

.esi-review-top > span {

color: var(--orange);

font-size: 10px;

letter-spacing: 1px;
}

.esi-review-card > p {

margin: 22px 0;

color: #65778b;

font-size: 12px;

line-height: 1.85;
}

.course-name {

display: inline-block;

padding-top: 14px;

border-top:
1px solid
#edf1f5;

color: var(--blue);

font-size: 8px;

font-weight: 800;
}

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

.esi-final {

position: relative;

overflow: hidden;

padding: 110px 0;

background:
var(--navy);
}

.esi-final-bg {

position: absolute;

width: 600px;
height: 600px;

right: -250px;
top: -300px;

border-radius: 50%;

background:
rgba(0,108,255,.22);

filter: blur(80px);
}

.esi-final-grid {

position: relative;
z-index: 2;

display: grid;

grid-template-columns:
1fr .9fr;

align-items: center;

gap: 70px;
}

.final-label {
color: var(--orange);
}

.esi-final-content h2 {

margin: 15px 0 20px;

color: #fff;

font-family: "Manrope", sans-serif;

font-size:
clamp(40px,5vw,59px);

line-height: 1.06;

letter-spacing: -2.5px;
}

.esi-final-content h2 span {
color: var(--orange);
}

.esi-final-content p {

max-width: 520px;

color: #94aac2;

font-size: 14px;

line-height: 1.85;
}

.esi-final-buttons {

display: flex;

gap: 12px;

margin-top: 28px;
}

.esi-final-image {

position: relative;

height: 400px;

overflow: hidden;

border-radius: 22px;

box-shadow:
0 30px 70px
rgba(0,0,0,.35);

transform: rotate(2deg);
}

.esi-final-image img {

height: 100%;

object-fit: cover;
}

.esi-final-image-overlay {

position: absolute;
inset: 0;

background:
linear-gradient(
135deg,
rgba(0,108,255,.15),
transparent 50%,
rgba(255,107,11,.2)
);
}

/* =========================================================
ANIMATIONS
========================================================= */

@keyframes esiHeroIn {

from {
opacity: 0;
transform:
translateY(30px);
}

to {
opacity: 1;
transform:
translateY(0);
}
}

@keyframes esiImageIn {

from {
opacity: 0;
transform:
translateX(40px)
scale(.96);
}

to {
opacity: 1;
transform:
translateX(0)
scale(1);
}
}

@keyframes esiFloat {

0%,100% {
transform:
translateY(0);
}

50% {
transform:
translateY(-10px);
}
}

@keyframes esiPulse {

0%,100% {
box-shadow:
0 0 0 5px
rgba(255,107,11,.12);
}

50% {
box-shadow:
0 0 0 10px
rgba(255,107,11,.02);
}
}

@keyframes esiRotate {

from {
transform:
rotate(0deg);
}

to {
transform:
rotate(360deg);
}
}

@keyframes esiReviewScroll {

from {
transform:
translateX(0);
}

to {
transform:
translateX(
calc(-50% - 9px)
);
}
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 980px) {

.esi-hero {
padding: 90px 0 70px;
}

.esi-hero-grid,
.esi-intro-grid,
.esi-dark-grid {
grid-template-columns: 1fr;
}

.esi-hero-content {
text-align: center;
}

.esi-hero-content > p {
margin: auto;
}

.esi-hero-actions,
.esi-hero-proof {
justify-content: center;
}

.esi-hero-visual {
min-height: 530px;
}

.esi-course-grid {
grid-template-columns:
repeat(2,1fr);
}

.esi-final-grid {
grid-template-columns: 1fr;
}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 650px) {

.eagles-container {
width:
calc(100% - 28px);
}

.esi-hero {

min-height: auto;

padding:
  75px 0
  60px;

}

.esi-hero-content h1 {

font-size: 44px;

letter-spacing: -2.5px;

}

.esi-hero-content > p {
font-size: 13px;
}

.esi-hero-actions {

flex-direction: column;

}

.esi-hero-actions .esi-btn {
width: 100%;
}

.esi-hero-visual {

min-height: 430px;

transform:
  scale(.84);

margin:
  -25px -35px;

}

.esi-hero-photo {
width: 350px;
}

.esi-hero-photo img {
height: 440px;
}

.esi-floating-one {
left: -2px;
}

.esi-floating-two {
right: -3px;
}

.esi-number-card {

width: 85px;
height: 85px;

}

.esi-number-card strong {
font-size: 22px;
}

.esi-intro,
.esi-programs,
.esi-dark-feature,
.esi-reviews {
padding:
80px 0;
}

.esi-intro-grid,
.esi-dark-grid {
gap: 55px;
}

.esi-intro-image {
height: 380px;
}

.esi-intro-content h2,
.esi-heading h2,
.esi-dark-content h2,
.esi-reviews-heading h2 {
font-size: 37px;
letter-spacing: -1.7px;
}

.esi-stats-grid {
grid-template-columns:
repeat(2,1fr);
}

.esi-stat {
padding: 30px 10px;
}

.esi-stat(2) {
border-right: 0;
}

.esi-heading {
display: block;
}

.esi-heading > p {
margin-top: 20px;
}

.esi-course-grid {
grid-template-columns: 1fr;
}

.esi-course-image {
height: 220px;
}

.esi-dark-image {
height: 370px;
}

.esi-process-grid {
display: grid;
}

.esi-review-card {
width: 320px;
}

.esi-review-wrapper::before,
.esi-review-wrapper::after {
width: 60px;
}

.esi-final {
padding:
75px 0;
}

.esi-final-grid {
gap: 45px;
}

.esi-final-content h2 {
font-size: 40px;
letter-spacing: -1.8px;
}

.esi-final-buttons {
flex-direction: column;
}

.esi-final-buttons .esi-btn {
width: 100%;
}

.esi-final-image {
height: 330px;
}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

.esi-hero-content h1 {
font-size: 39px;
}

.esi-hero-visual {

transform:
  scale(.72);

margin:
  -60px -70px;

}

.esi-intro-content h2,
.esi-heading h2,
.esi-dark-content h2 {
font-size: 33px;
}

.esi-review-card {
width: 300px;
}

}
/* =========================================================
   EAGLES SKILLS INSTITUTE
   FINAL SPACING + ALIGNMENT FIX
   DO NOT REMOVE EXISTING CSS
========================================================= */


/* =========================================================
   1. MAIN CONTAINER
   Gives proper left + right breathing space
========================================================= */

.eagles-landing .esi-container {
    width: min(1180px, calc(100% - 70px)) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   2. HERO CONTENT
   Prevents heading/text from touching screen edge
========================================================= */

.eagles-landing .esi-hero-content {
    padding-left: 0 !important;
    padding-right: 15px !important;
}

.eagles-landing .esi-hero-content > p {
    max-width: 650px;
}


/* =========================================================
   3. INTRO / PROGRAMS / FEATURE / REVIEWS
   Reduce excessive vertical spacing
========================================================= */

.eagles-landing .esi-intro,
.eagles-landing .esi-programs,
.eagles-landing .esi-dark-feature,
.eagles-landing .esi-reviews {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}


/* =========================================================
   4. INTERNAL SECTION GAPS
========================================================= */

.eagles-landing .esi-intro-grid,
.eagles-landing .esi-dark-grid {
    gap: 60px !important;
}


/* =========================================================
   5. PROGRAM HEADING
========================================================= */

.eagles-landing .esi-heading {
    margin-bottom: 35px !important;
}


/* =========================================================
   6. REVIEWS HEADING
========================================================= */

.eagles-landing .esi-reviews-heading {
    margin-bottom: 35px !important;
}


/* =========================================================
   7. FINAL CTA SPACING
========================================================= */

.eagles-landing .esi-final {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.eagles-landing .esi-final-grid {
    gap: 55px !important;
}


/* =========================================================
   8. TEXT WIDTH
   Makes paragraphs look professional
========================================================= */

.eagles-landing .esi-intro-content > p {
    max-width: 580px;
}

.eagles-landing .esi-dark-content > p {
    max-width: 560px;
}

.eagles-landing .esi-final-content > p {
    max-width: 540px;
}


/* =========================================================
   9. TABLET
========================================================= */

@media (max-width: 980px) {

    .eagles-landing .esi-container {
        width: calc(100% - 50px) !important;
        max-width: none !important;
    }

    .eagles-landing .esi-intro,
    .eagles-landing .esi-programs,
    .eagles-landing .esi-dark-feature,
    .eagles-landing .esi-reviews {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

}


/* =========================================================
   10. MOBILE
========================================================= */

@media (max-width: 650px) {

    /* Proper left/right screen distance */

    .eagles-landing .esi-container {
        width: calc(100% - 40px) !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Hero */

    .eagles-landing .esi-hero {
        padding-top: 60px !important;
        padding-bottom: 45px !important;
    }

    .eagles-landing .esi-hero-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .eagles-landing .esi-hero-content > p {
        max-width: 100%;
    }


    /* Main sections */

    .eagles-landing .esi-intro,
    .eagles-landing .esi-programs,
    .eagles-landing .esi-dark-feature,
    .eagles-landing .esi-reviews {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }


    /* Internal gaps */

    .eagles-landing .esi-intro-grid,
    .eagles-landing .esi-dark-grid {
        gap: 32px !important;
    }


    /* Section headings */

    .eagles-landing .esi-heading {
        margin-bottom: 28px !important;
    }

    .eagles-landing .esi-reviews-heading {
        margin-bottom: 28px !important;
    }


    /* Course cards */

    .eagles-landing .esi-course-body {
        padding: 20px !important;
    }


    /* Final CTA */

    .eagles-landing .esi-final {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .eagles-landing .esi-final-grid {
        gap: 30px !important;
    }


    /* Text */

    .eagles-landing .esi-intro-content > p,
    .eagles-landing .esi-dark-content > p,
    .eagles-landing .esi-final-content > p {
        max-width: 100%;
    }

}


/* =========================================================
   11. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .eagles-landing .esi-container {
        width: calc(100% - 32px) !important;
    }

    .eagles-landing .esi-intro,
    .eagles-landing .esi-programs,
    .eagles-landing .esi-dark-feature,
    .eagles-landing .esi-reviews {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .eagles-landing .esi-intro-grid,
    .eagles-landing .esi-dark-grid {
        gap: 28px !important;
    }
/* =========================================================
   EAGLES SKILLS INSTITUTE
   FINAL SPACING + ALIGNMENT FIX
   DO NOT REMOVE EXISTING CSS
========================================================= */


/* =========================================================
   1. MAIN CONTAINER
   Gives proper left + right breathing space
========================================================= */

.eagles-landing .esi-container {
    width: min(1180px, calc(100% - 70px)) !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* =========================================================
   2. HERO CONTENT
   Prevents heading/text from touching screen edge
========================================================= */

.eagles-landing .esi-hero-content {
    padding-left: 0 !important;
    padding-right: 15px !important;
}

.eagles-landing .esi-hero-content > p {
    max-width: 650px;
}


/* =========================================================
   3. INTRO / PROGRAMS / FEATURE / REVIEWS
   Reduce excessive vertical spacing
========================================================= */

.eagles-landing .esi-intro,
.eagles-landing .esi-programs,
.eagles-landing .esi-dark-feature,
.eagles-landing .esi-reviews {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}


/* =========================================================
   4. INTERNAL SECTION GAPS
========================================================= */

.eagles-landing .esi-intro-grid,
.eagles-landing .esi-dark-grid {
    gap: 60px !important;
}


/* =========================================================
   5. PROGRAM HEADING
========================================================= */

.eagles-landing .esi-heading {
    margin-bottom: 35px !important;
}


/* =========================================================
   6. REVIEWS HEADING
========================================================= */

.eagles-landing .esi-reviews-heading {
    margin-bottom: 35px !important;
}


/* =========================================================
   7. FINAL CTA SPACING
========================================================= */

.eagles-landing .esi-final {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

.eagles-landing .esi-final-grid {
    gap: 55px !important;
}


/* =========================================================
   8. TEXT WIDTH
   Makes paragraphs look professional
========================================================= */

.eagles-landing .esi-intro-content > p {
    max-width: 580px;
}

.eagles-landing .esi-dark-content > p {
    max-width: 560px;
}

.eagles-landing .esi-final-content > p {
    max-width: 540px;
}


/* =========================================================
   9. TABLET
========================================================= */

@media (max-width: 980px) {

    .eagles-landing .esi-container {
        width: calc(100% - 50px) !important;
        max-width: none !important;
    }

    .eagles-landing .esi-intro,
    .eagles-landing .esi-programs,
    .eagles-landing .esi-dark-feature,
    .eagles-landing .esi-reviews {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

}


/* =========================================================
   10. MOBILE
========================================================= */

@media (max-width: 650px) {

    /* Proper left/right screen distance */

    .eagles-landing .esi-container {
        width: calc(100% - 40px) !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* Hero */

    .eagles-landing .esi-hero {
        padding-top: 60px !important;
        padding-bottom: 45px !important;
    }

    .eagles-landing .esi-hero-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .eagles-landing .esi-hero-content > p {
        max-width: 100%;
    }


    /* Main sections */

    .eagles-landing .esi-intro,
    .eagles-landing .esi-programs,
    .eagles-landing .esi-dark-feature,
    .eagles-landing .esi-reviews {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }


    /* Internal gaps */

    .eagles-landing .esi-intro-grid,
    .eagles-landing .esi-dark-grid {
        gap: 32px !important;
    }


    /* Section headings */

    .eagles-landing .esi-heading {
        margin-bottom: 28px !important;
    }

    .eagles-landing .esi-reviews-heading {
        margin-bottom: 28px !important;
    }


    /* Course cards */

    .eagles-landing .esi-course-body {
        padding: 20px !important;
    }


    /* Final CTA */

    .eagles-landing .esi-final {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .eagles-landing .esi-final-grid {
        gap: 30px !important;
    }


    /* Text */

    .eagles-landing .esi-intro-content > p,
    .eagles-landing .esi-dark-content > p,
    .eagles-landing .esi-final-content > p {
        max-width: 100%;
    }

}


/* =========================================================
   11. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .eagles-landing .esi-container {
        width: calc(100% - 32px) !important;
    }

    .eagles-landing .esi-intro,
    .eagles-landing .esi-programs,
    .eagles-landing .esi-dark-feature,
    .eagles-landing .esi-reviews {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .eagles-landing .esi-intro-grid,
    .eagles-landing .esi-dark-grid {
        gap: 28px !important;
    }

}/* End custom CSS */