/**
 * [de_section] homepage blocks.
 *
 * Heading typography deliberately matches the page's existing h1
 * ("BEST ETHIOPIA TOURS"): Raleway 700, tight negative tracking, uppercase.
 * Do NOT remove the font-family and rely on inheritance. Blocksy's default
 * heading family is the serif Merriweather, so an unstyled h2 renders in serif
 * against a page whose other headings are Raleway.
 *
 * Colours alias the existing palette: palette_1 #f78f1e (brand orange),
 * palette_4 #111518 (headings).
 */

.de-sec {
	--de-ink: #202124;
	--de-muted: #5f6368;
	--de-line: #e6e8eb;
	--de-brand: var(--theme-palette-color-1, #f78f1e);

	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	width: 100%;
}

.de-sec-title {
	margin: 0 0 18px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: clamp(26px, 3.4vw, 46px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.055em;
	text-transform: uppercase;
	color: #212529;
}

.de-sec p {
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--de-muted);
}

/* --------------------------------------------------------------- intro -- */

/* Body paragraphs are justified to match the hero slider, which sets
   text-align: justify on its slide copy.
 *
 * The intro lives INSIDE the h1's own Elementor column and carries the same
 * 83% element width, so it must not impose a max-width or horizontal padding
 * of its own. Doing so would reintroduce exactly the 119px offset this was
 * changed to remove. Its box is the h1's box; leave the sizing to Elementor. */
.de-sec--intro {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	text-align: left;
}

/*
 * Align the heading and intro with the tour cards below them.
 *
 * The two sections were built with different Elementor content widths: 1180px
 * for the section holding the h1 and this intro, 1289px for the tour cards.
 * Both containers centre themselves with auto margins, so the narrower one
 * computed a 55px left margin against the wider one's 0.5px. Subtract the 20px
 * inset the cards' own inner section carries and the text sat 35px to the
 * right of the card edge, which is the misalignment the eye picks up.
 *
 * The fix is to stop the two sections disagreeing, rather than to nudge the
 * text with a negative margin. A hardcoded -35px would only hold while both
 * containers are at their max width; the moment the viewport constrains either
 * one the offset changes and the nudge is wrong in a new way. Matching the
 * width and the inset makes them track each other at every viewport, because
 * they are then doing the same arithmetic.
 *
 * Targeted with :has() rather than the .elementor-element-4e12... class so the
 * rule says what it is for and survives the section being rebuilt.
 *
 * !important on max-width is not laziness. Elementor generates per-element CSS
 * of the form `.elementor-618 .elementor-element.elementor-element-4e12 >
 * .elementor-container`, which outranks this selector's (0,2,0). Deployed
 * without it, the padding below applied and the max-width silently did not,
 * leaving the text at 179px against the cards' 124px. Raising specificity by
 * hardcoding the element id would win too, and would break the moment the
 * section is rebuilt with a new id.
 *
 * Measured, not guessed: before, h1 left 159 and card left 124; after, both
 * 124. The text measure grows from 979px to 1037px as a consequence, which is
 * the same width the cards occupy.
 */
.elementor-container:has(.de-sec--intro) {
	max-width: 1289px !important;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

.de-sec-lede {
	font-size: 18px !important;
	line-height: 1.7 !important;
	color: var(--de-ink) !important;
	text-align: justify;
}

/* ---------------------------------------------------------- car rental -- */

.de-sec--split { max-width: 860px; }
.de-sec--split .de-sec-body { text-align: center; }
.de-sec--split .de-sec-body p { text-align: justify; }

/* -------------------------------------------------------- destinations -- */

.de-sec--destinations { text-align: center; }

.de-sec-sub {
	max-width: 620px;
	margin: 0 auto 28px !important;
}

.de-sec-grid {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px;
	text-align: left;
}

.de-sec-grid a {
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--de-line);
	border-radius: 10px;
	background: #fff;
	font-size: 16px;
	font-weight: 600;
	color: var(--de-ink);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.de-sec-grid a:hover,
.de-sec-grid a:focus {
	border-color: var(--de-brand);
	color: var(--de-brand);
}

/* ------------------------------------------------------------- why us -- */

.de-sec--why { text-align: center; }

.de-sec-cols {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 28px;
	text-align: left;
}

.de-sec-cols h3 {
	margin: 0 0 8px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--de-ink);
}

.de-sec-cols p { margin: 0; font-size: 16px; }

/* ----------------------------------------------------------------- cta -- */

.de-sec--cta { max-width: 720px; text-align: center; }

/* -------------------------------------------------------------- button -- */

.de-sec-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 14px 30px;
	border-radius: 8px;
	background: var(--de-brand);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: filter .15s ease;
}

.de-sec-btn:hover,
.de-sec-btn:focus { filter: brightness(.92); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.de-sec-btn, .de-sec-grid a { transition: none; }
}

@media (max-width: 767px) {
	.de-sec p { font-size: 16px; }
	.de-sec-lede { font-size: 17px !important; }
	.de-sec-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.de-sec-grid a { padding: 12px; font-size: 14px; }
}

/* ------------------------------------------------------------------ cta -- */

/*
 * The closing CTA is the primary action on the page, so it is the only
 * block on the home page with a filled background. Charcoal rather than a
 * brand tint, because the submit button is brand orange and needs to be
 * the one thing the eye lands on.
 */

.de-sec--cta {
    margin-top: 72px;
    margin-bottom: 8px;
    padding: 56px 40px 48px;
    border-radius: 14px;
    background: #14181b;
    background-image: radial-gradient(120% 140% at 50% 0%, #22282d 0%, #14181b 62%);
    text-align: center;
}

.de-sec--cta .de-sec-title {
    color: #ffffff;
}

.de-sec--cta p {
    color: #c9ced3;
}

.de-sec--cta .de-sec-sub {
    max-width: 720px;
    margin: 0 auto 14px;
    font-size: 18px;
    color: #e7eaec;
}

.de-sec--cta .de-cta-support {
    max-width: 780px;
    margin: 0 auto 34px;
    font-size: 16px;
}

/* Fields are visible on arrival. Nothing is hidden behind a click. */

.de-cta-form {
    max-width: 860px;
    margin: 0 auto;
    text-align: left;
}

.de-cta-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.de-cta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.de-cta-field {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
}

.de-cta-field--wide {
    grid-column: 1 / -1;
}

.de-cta-form label {
    margin-bottom: 6px;
    font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #ffffff;
}

.de-cta-flag {
    font-weight: 500;
    color: var(--theme-palette-color-1, #f78f1e);
}

.de-cta-flag--opt {
    color: #8b9298;
}

.de-cta-form input[type="text"],
.de-cta-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #3a4248;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: none;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.45;
    color: #202124;
}

.de-cta-form textarea {
    min-height: 88px;
    resize: vertical;
}

.de-cta-form input::placeholder,
.de-cta-form textarea::placeholder {
    color: #7c8388;
    opacity: 1;
}

.de-cta-form input:focus,
.de-cta-form textarea:focus {
    border-color: var(--theme-palette-color-1, #f78f1e);
    outline: 3px solid var(--theme-palette-color-1, #f78f1e);
    outline-offset: 1px;
}

.de-cta-send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    margin-top: 22px;
}

.de-cta-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border: 0;
    border-radius: 8px;
    background: var(--theme-palette-color-1, #f78f1e);
    color: #ffffff;
    font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
}

.de-cta-submit:hover {
    filter: brightness(1.06);
}

.de-cta-submit:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.de-cta-assure {
    flex: 1 1 320px;
}

.de-cta-promise {
    margin: 0 0 4px !important;
    font-size: 15px !important;
    color: #e7eaec !important;
}

.de-cta-privacy {
    margin: 0 !important;
    font-size: 13px !important;
    color: #8b9298 !important;
}

/* Some visitors will never fill a form, so the direct channels sit here. */

.de-cta-alt {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid #2b3237;
}

.de-cta-alt-lede {
    margin: 0 0 16px !important;
    font-size: 15px !important;
    color: #c9ced3 !important;
}

.de-cta-alt-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.de-cta-alt-list li {
    margin: 0;
}

.de-cta-chan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 48px;
    padding: 9px 18px;
    border: 1px solid #3a4248;
    border-radius: 999px;
    background: #1b2024;
    text-decoration: none;
}

.de-cta-chan:hover {
    border-color: var(--theme-palette-color-1, #f78f1e);
}

.de-cta-chan:focus-visible {
    outline: 3px solid var(--theme-palette-color-1, #f78f1e);
    outline-offset: 2px;
}

.de-cta-chan-k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b9298;
}

.de-cta-chan-v {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.de-cta-chan--wa .de-cta-chan-k {
    color: #57d163;
}

.de-cta-thanks {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 24px;
    border: 1px solid #2f6b4f;
    border-radius: 12px;
    background: #16231c;
}

.de-cta-thanks-lead {
    margin: 0 0 10px !important;
    font-size: 19px !important;
    font-weight: 700;
    color: #ffffff !important;
}

.de-cta-thanks-next {
    margin: 0 0 18px !important;
    font-size: 15px !important;
    color: #c9ced3 !important;
}

.de-cta-thanks-wa {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
}

.de-cta-error {
    max-width: 720px;
    margin: 0 auto 20px !important;
    padding: 14px 16px;
    border: 1px solid #a3403a;
    border-radius: 10px;
    background: #2a1a19;
    font-size: 15px !important;
    color: #f3d9d7 !important;
}

.de-cta-error a {
    color: #ffb066;
}

@media (max-width: 767px) {
    .de-sec--cta {
        margin-top: 48px;
        padding: 36px 18px 32px;
        border-radius: 10px;
    }
    .de-cta-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .de-cta-send {
        flex-direction: column;
        align-items: stretch;
    }
    .de-cta-submit {
        width: 100%;
    }
    .de-cta-assure {
        text-align: center;
    }
    .de-cta-alt-list {
        flex-direction: column;
    }
    .de-cta-chan {
        align-items: center;
    }
}


/* ===================================================================== *
 * v1.5 - brand alignment and scale for the closing CTA.
 *
 * Three things were wrong with the first pass.
 *
 * WIDTH. The block still inherited max-width: 720px from the rule further
 * up this file, so it sat around 570px narrower than the tour cards above
 * it and read as a widget dropped onto the page rather than as the page's
 * closing act. It now takes the theme's own container width, the same
 * --theme-normal-container-max-width: 1290px the h1 and the tour cards use,
 * so the panel edges line up with them. The 95px side padding is not
 * decorative: 1290 - (2 x 95) = 1100, which is exactly the content width of
 * the 1140px .de-sec blocks, 1140 - (2 x 20). Both of the grids this page
 * was built on are satisfied at once, which is why it is that number and
 * not a rounder one.
 *
 * COLOUR. #14181b, #22282d, #57d163 and #2f6b4f were invented here. The
 * brand is palette_1 orange #f78f1e, palette_2 teal #0d9693, palette_3 ink
 * #3f4245 and palette_4 near-black #111518, and Blocksy's own buttons go
 * orange to teal on hover. Everything below reads the palette variables and
 * falls back to a hex only if global.css has not loaded.
 *
 * TYPE. Raleway for the heading, labels and button, which is what the h1
 * and every other section title on this page use; Poppins for the small
 * uppercase channel keys, which is what the reviews block uses for the same
 * job. Neither costs a font request: both are already on the page.
 * ===================================================================== */

.de-sec--cta {
    --de-cta-ink: var(--theme-palette-color-4, #111518);
    --de-cta-brand: var(--theme-palette-color-1, #f78f1e);
    --de-cta-brand-2: var(--theme-palette-color-2, #0d9693);
    --de-cta-fg: #ffffff;
    --de-cta-fg-soft: rgba(255, 255, 255, .80);
    --de-cta-fg-mute: rgba(255, 255, 255, .60);
    --de-cta-hairline: rgba(255, 255, 255, .14);

    max-width: var(--theme-normal-container-max-width, 1290px);
    margin-top: 88px;
    margin-bottom: 16px;
    padding: 72px clamp(22px, 7.4%, 95px) 64px;
    background: var(--de-cta-ink);
    background-image: radial-gradient(120% 150% at 50% 0%, #1d2429 0%, var(--de-cta-ink) 62%);
}

/* Deliberately the same size as WHY BOOK WITH US and COMMON QUESTIONS.
   Prominence here comes from the filled panel and the space around it, not
   from a heading that outshouts the rest of the page. */
.de-sec--cta .de-sec-title {
    margin-bottom: 20px;
    color: var(--de-cta-fg);
}

.de-sec--cta .de-sec-sub {
    max-width: 900px;
    margin: 0 auto 16px;
    font-size: 20px;
    line-height: 1.55;
    color: var(--de-cta-fg-soft);
}

.de-sec--cta .de-cta-support {
    max-width: 1000px;
    margin: 0 auto 40px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--de-cta-fg-mute);
}

/* The form fills the panel's content box, so the first field starts on the
   same left edge as the why-us columns above it. */
.de-cta-form {
    max-width: none;
}

.de-cta-grid {
    gap: 20px 24px;
}

.de-cta-form label {
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--de-cta-fg);
}

.de-cta-flag { color: var(--de-cta-brand); }

.de-cta-flag--opt { color: var(--de-cta-fg-mute); }

.de-cta-form input[type="text"],
.de-cta-form textarea {
    min-height: 54px;
    padding: 14px 16px;
    border-color: #e0e5eb;
    font-size: 17px;
    color: var(--theme-palette-color-3, #3f4245);
}

.de-cta-form textarea { min-height: 120px; }

.de-cta-form input::placeholder,
.de-cta-form textarea::placeholder { color: #767b80; }

.de-cta-send {
    gap: 20px 32px;
    margin-top: 32px;
}

.de-cta-submit {
    min-height: 58px;
    padding: 0 34px;
    font-size: 17px;
    background: var(--de-cta-brand);
    transition: background-color .16s ease;
}

/* Theme buttons go orange to teal. These do the same, rather than dimming
   themselves with a brightness filter. */
.de-cta-submit:hover,
.de-sec--cta .de-sec-btn:hover,
.de-sec--cta .de-sec-btn:focus {
    background: var(--de-cta-brand-2);
    filter: none;
}

.de-cta-promise {
    font-size: 16px !important;
    color: var(--de-cta-fg-soft) !important;
}

.de-cta-privacy {
    font-size: 14px !important;
    color: var(--de-cta-fg-mute) !important;
}

.de-cta-alt {
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid var(--de-cta-hairline);
}

.de-cta-alt-lede {
    font-size: 16px !important;
    color: var(--de-cta-fg-soft) !important;
}

.de-cta-alt-list { gap: 14px; }

.de-cta-chan {
    min-height: 56px;
    padding: 10px 22px;
    border-color: var(--de-cta-hairline);
    background: rgba(255, 255, 255, .04);
    transition: border-color .16s ease, background-color .16s ease;
}

.de-cta-chan:hover,
.de-cta-chan:focus-visible {
    border-color: var(--de-cta-brand);
    background: rgba(247, 143, 30, .10);
}

.de-cta-chan:focus-visible {
    outline: 2px solid var(--de-cta-brand-2);
    outline-offset: 2px;
}

.de-cta-chan-k {
    font-family: Poppins, Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: .09em;
    color: var(--de-cta-fg-mute);
}

/* WhatsApp's own green was the one colour in this block that came from
   outside the brand. */
.de-cta-chan--wa .de-cta-chan-k { color: var(--de-cta-brand-2); }

.de-cta-chan-v {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    color: var(--de-cta-fg);
}

/* The confirmation reads as brand teal rather than a generic success green. */
.de-cta-thanks {
    max-width: 900px;
    padding: 34px 32px;
    border-color: rgba(13, 150, 147, .5);
    background: rgba(13, 150, 147, .10);
}

.de-cta-thanks-lead { font-size: 21px !important; }

.de-cta-thanks-next {
    font-size: 16px !important;
    color: var(--de-cta-fg-soft) !important;
}

.de-cta-error {
    max-width: 900px;
    border-color: rgba(214, 93, 82, .55);
    background: rgba(214, 93, 82, .12);
}

.de-cta-error a { color: var(--de-cta-brand); }

@media (max-width: 991px) {
    .de-sec--cta {
        padding-top: 56px;
        padding-bottom: 52px;
    }
    .de-sec--cta .de-sec-sub { font-size: 18px; }
    .de-sec--cta .de-cta-support { font-size: 16px; margin-bottom: 32px; }
}

@media (max-width: 767px) {
    .de-sec--cta {
        margin-top: 56px;
        padding: 40px 22px 36px;
    }
    .de-sec--cta .de-sec-sub { font-size: 17px; }
    .de-cta-grid { gap: 16px; }
    .de-cta-form input[type="text"],
    .de-cta-form textarea {
        min-height: 50px;
        font-size: 16px;
    }
    .de-cta-form textarea { min-height: 104px; }
    .de-cta-submit { width: 100%; font-size: 16px; }
    .de-cta-chan { min-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .de-cta-submit,
    .de-cta-chan { transition: none; }
}


/* The header is sticky, so the quote block needs to stop clear of it when
   the "Get a Quote" link scrolls to it. */
#tell-us {
    scroll-margin-top: 96px;
}

@media (max-width: 767px) {
    #tell-us {
        scroll-margin-top: 72px;
    }
}

/* On mobile .de-cta-send switches to flex-direction: column. That turns
   .de-cta-assure's `flex: 1 1 320px` from a 320px width basis into a 320px
   HEIGHT basis, and flex-grow: 1 holds it there, so the panel carried about
   320px of empty charcoal between the privacy line and the hairline above
   the contact channels. Measured at 414px wide. Once the reassurance copy
   is full width it only needs its content height, so take it out of the
   flex sizing rather than restate a basis that would be wrong again at the
   next breakpoint. */

@media (max-width: 767px) {
    .de-cta-assure {
        flex: 0 0 auto;
    }
}

/* ===================================================================== *
 * v1.6 - the closing CTA moves from charcoal to the brand sand.
 *
 * Asked for so the block sits with the rest of the home page instead of
 * reading as a dark slab bolted onto the end of it.
 *
 * #e0c288 is neither a new colour nor a value sampled off a screenshot. It
 * is the exact fill Elementor writes for the "Addis Ababa City Tour" card,
 * post-618.css element 432a4884, the first of the six tour panels. The
 * other five are #079899, #f38e20, rgba(111,132,148,.92), #13385f and
 * rgba(9,16,20,.92), so the page already carries this sand as one of its
 * section colours and the panel now belongs to that set.
 *
 * Everything under the background is a consequence of inverting the panel,
 * not extra decoration. The old scheme put white and near-white text on
 * charcoal; on sand that same text all but disappears. Because the four
 * foreground values were already custom properties rather than forty
 * separate declarations, flipping them to ink is most of the work.
 *
 * The tour cards do set white headings on this sand. That holds for a
 * five-word card title beside a photograph. It does not hold for five form
 * labels, two reassurance lines and a privacy note, so the type here takes
 * the page's own heading ink #212529, the same colour as WHY BOOK WITH US
 * and COMMON QUESTIONS. Same background as the card, legible foreground.
 * ===================================================================== */

.de-sec--cta {
    --de-cta-sand: #e0c288;
    --de-cta-fg: #212529;
    --de-cta-fg-soft: rgba(24, 28, 31, .82);
    --de-cta-fg-mute: rgba(24, 28, 31, .64);
    --de-cta-hairline: rgba(24, 28, 31, .20);

    background: var(--de-cta-sand);
    background-image: radial-gradient(120% 150% at 50% 0%, #e7cd9b 0%, var(--de-cta-sand) 62%);
}

.de-sec--cta p {
    color: var(--de-cta-fg-soft);
}

/* (required) was brand orange, which is about 1.4:1 against this sand and
   read as decoration rather than as a flag. Required now takes the ink and
   optional keeps the muted ink, so the pair is still distinguishable. */
.de-cta-flag {
    color: var(--de-cta-fg);
}

.de-cta-flag--opt {
    color: var(--de-cta-fg-mute);
}

.de-cta-form input[type="text"],
.de-cta-form textarea {
    border-color: rgba(24, 28, 31, .22);
}

/* A white focus ring is invisible on sand. */
.de-cta-submit:focus-visible {
    outline-color: var(--de-cta-fg);
}

/* The pills were a 4% white wash on charcoal, which on a light panel is
   nothing at all. They now read as paler cards sitting on the sand. */
.de-cta-chan {
    background: rgba(255, 255, 255, .55);
}

.de-cta-chan:hover,
.de-cta-chan:focus-visible {
    border-color: var(--de-cta-brand);
    background: rgba(255, 255, 255, .88);
}

/* The 11px uppercase keys are the smallest type in the block and palette-2
   teal only reaches about 2.9:1 here, so they take the muted ink. The
   numbers below them keep full contrast. */
.de-cta-chan--wa .de-cta-chan-k {
    color: var(--de-cta-fg-mute);
}

.de-cta-thanks {
    border-color: rgba(13, 150, 147, .65);
    background: rgba(255, 255, 255, .58);
}

.de-cta-thanks-lead {
    color: var(--de-cta-fg) !important;
}

.de-cta-error {
    border-color: rgba(154, 52, 42, .55);
    background: rgba(255, 255, 255, .62);
    color: #7a2c25 !important;
}

.de-cta-error a {
    color: #7a2c25;
}


/* =========================================================================
 * v1.7  WHY DRIVE ETHIOPIA
 *
 * Four numbered cards, 2x2 on desktop and one column on phones, on the four
 * fills the Elementor tour cards already use: sand #e0c288, teal, grey
 * #7c8e9c, orange #f38e20. The teal is the client's #079899 lifted to
 * #0a9f9e, a 4% nudge of the same hue, because the ink below needs 4.5:1 and
 * the original gave 4.40:1.
 *
 * The client's slide sets white type on all four fills. White is 1.71:1 on
 * the sand and 2.41:1 on the orange, which is why the slide's own titles are
 * hard to read, so the card text takes the page's heading ink #212529
 * instead: 9.05:1 on sand, 6.43:1 on orange, 4.78:1 on teal, 4.59:1 on grey.
 * The big numerals stay white because they are decoration, they are
 * aria-hidden, and they sit at 54px where 3:1 is the bar.
 *
 * The grid is two fixed columns rather than auto-fit, because the numbering
 * reads 1 2 / 3 4 as a block and auto-fit would reflow it to 1 2 3 / 4 at
 * odd widths.
 * ========================================================================= */

.de-sec--why .de-sec-sub { margin-bottom: 34px !important; }

.de-why-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    text-align: left;
}

.de-why-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin: 0;
    padding: 26px 30px 28px;
    border-radius: 4px;
}

.de-why-card--1 { background: #e0c288; }
.de-why-card--2 { background: #0a9f9e; }
.de-why-card--3 { background: #7c8e9c; }
.de-why-card--4 { background: #f38e20; }

.de-why-num {
    flex: 0 0 auto;
    font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 54px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #ffffff;
}

.de-why-card h3 {
    margin: 0 0 7px;
    font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #212529;
}

.de-why-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(24, 28, 31, .86);
}

.de-why-more {
    margin: 36px 0 0 !important;
    font-size: 16px;
    color: var(--de-muted);
}

.de-why-more a {
    color: var(--de-brand);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.de-why-more a:hover,
.de-why-more a:focus-visible {
    color: var(--theme-palette-color-2, #0d9693);
}

@media (max-width: 767px) {
    .de-why-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .de-why-card {
        gap: 14px;
        padding: 22px 22px 24px;
    }
    .de-why-num { font-size: 42px; }
}

/* =========================================================================
 * v1.8 CAR RENTAL IN ADDIS ABABA
 *
 * Rebuilt from the client's ready-to-use brief: three option cards, the
 * fleet with specs as real text, a vehicle helper, an included / not
 * included block and a rental-only enquiry form. Everything is static HTML,
 * so none of it can delay LCP; the fleet photos are 720x400 WebP (27-35 KB)
 * with explicit dimensions and loading="lazy".
 * ========================================================================= */

.de-sec--rental {
	--de-rent-ink: #212529;
	--de-rent-teal: var(--theme-palette-color-2, #0d9693);
	--de-rent-card: #f6f7f8;

	max-width: var(--theme-normal-container-max-width, 1290px);
	text-align: left;
}

.de-rental-head { text-align: center; }
.de-rental-head .de-sec-sub { max-width: 820px; margin-bottom: 36px !important; }

.de-rent-h {
	margin: 0 0 14px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--de-rent-ink);
}

.de-rent-opts {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.de-rent-opt {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 28px 28px 26px;
	border: 1px solid var(--de-line);
	border-top: 4px solid var(--de-brand);
	border-radius: 6px;
	background: #fff;
	scroll-margin-top: 96px;
}

.de-rent-opt:nth-child(2) { border-top-color: var(--de-rent-teal); }
.de-rent-opt:nth-child(3) { border-top-color: #7c8e9c; }

.de-rent-opt h3 {
	margin: 0 0 6px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--de-rent-ink);
}

.de-sec .de-rent-price {
	margin: 0 0 14px;
	font-size: 15px;
	color: var(--de-muted);
}

.de-rent-price strong {
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--de-rent-ink);
}

.de-sec .de-rent-desc { margin-bottom: 8px; font-size: 16px; color: #3f4245; }
.de-sec .de-rent-suits { margin-bottom: 22px; font-size: 15px; font-weight: 600; color: var(--de-rent-teal); }

.de-rent-req {
	margin-top: auto;
	align-self: flex-start;
	transition: background-color .16s ease;
}

.de-rent-req:hover,
.de-rent-req:focus,
.de-rent-submit:hover,
.de-rent-submit:focus { background: var(--de-rent-teal); filter: none; }

.de-fleet {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.de-fleet-item {
	margin: 0;
	border: 1px solid var(--de-line);
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.de-fleet-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 720 / 400;
	object-fit: cover;
	background: #eceef0;
}

.de-fleet-body { padding: 20px 22px 22px; }

.de-fleet-body h4 {
	margin: 0 0 4px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: var(--de-rent-ink);
}

.de-sec .de-fleet-body > p { margin-bottom: 14px; font-size: 15px; }

.de-fleet-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 14px;
	margin: 0;
}

.de-fleet-specs div { margin: 0; }

.de-fleet-specs dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #767b80;
}

.de-fleet-specs dd {
	margin: 2px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--de-rent-ink);
}

.de-rent-help {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	margin-bottom: 56px;
}

.de-rent-faq { margin: 18px 0 0; }

.de-rent-faq dt {
	margin: 14px 0 3px;
	font-size: 16px;
	font-weight: 700;
	color: var(--de-rent-ink);
}

.de-rent-faq dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--de-muted);
}

.de-picker {
	padding: 26px 26px 24px;
	border-radius: 6px;
	background: var(--de-rent-teal);
	color: #fff;
}

.de-sec .de-picker-title {
	margin: 0 0 16px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
}

.de-sec .de-picker-q { margin: 0 0 14px; }

.de-picker label,
.de-rent-form label {
	display: block;
	margin-bottom: 6px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
}

.de-picker label { color: #fff; }

.de-picker select,
.de-rent-form select,
.de-rent-form input[type="text"] {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid rgba(24, 28, 31, .22);
	border-radius: 6px;
	background-color: #fff;
	font-family: inherit;
	font-size: 16px;
	color: #3f4245;
}

.de-picker select:focus-visible,
.de-rent-form select:focus-visible,
.de-rent-form input:focus-visible {
	outline: 3px solid var(--de-brand);
	outline-offset: 1px;
}

.de-picker-out {
	display: block;
	margin-top: 6px;
	padding: 14px 16px;
	border-radius: 6px;
	background: #fff;
	font-size: 16px;
	line-height: 1.5;
	color: var(--de-rent-ink);
}

.de-rent-incl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 56px;
}

.de-rent-incl > div {
	padding: 26px 28px;
	border-radius: 6px;
	background: var(--de-rent-card);
}

.de-rent-incl ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.de-rent-incl li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 30px;
	font-size: 16px;
	line-height: 1.55;
	color: #3f4245;
}

.de-rent-incl li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
	color: var(--de-rent-teal);
}

.de-rent-incl .de-rent-excl li::before { content: "\2715"; color: #9a342a; }

.de-rent-cta {
	padding: 40px clamp(22px, 5%, 56px) 36px;
	border-radius: 6px;
	background: #e0c288;
	scroll-margin-top: 96px;
}

.de-rent-cta .de-rent-h { font-size: 28px; }

.de-sec .de-rent-cta-sub { margin-bottom: 24px; color: rgba(24, 28, 31, .82); }

.de-rent-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 20px;
	margin-bottom: 22px;
}

.de-sec .de-rent-field { margin: 0; }
.de-rent-field--wide { grid-column: span 2; }
.de-rent-form label { color: var(--de-rent-ink); }

.de-rent-submit {
	min-height: 54px;
	margin-top: 0;
	padding: 0 32px;
	border: 0;
	cursor: pointer;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	transition: background-color .16s ease;
}

.de-sec .de-rent-alt {
	margin: 22px 0 0;
	font-size: 16px;
	color: rgba(24, 28, 31, .82);
}

.de-rent-alt a {
	font-weight: 700;
	color: var(--de-rent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.de-rent-alt .de-rent-more { display: inline-block; margin-left: 6px; }

.de-rent-thanks {
	padding: 24px;
	border: 1px solid rgba(13, 150, 147, .65);
	border-radius: 8px;
	background: rgba(255, 255, 255, .6);
}

.de-sec .de-rent-thanks-lead { font-size: 18px; font-weight: 700; color: var(--de-rent-ink); }

.de-sec .de-rent-error {
	padding: 12px 14px;
	border: 1px solid rgba(154, 52, 42, .55);
	border-radius: 8px;
	background: rgba(255, 255, 255, .62);
	color: #7a2c25;
}

@media (max-width: 991px) {
	.de-rent-opts { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.de-fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.de-rent-help { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.de-rent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.de-fleet,
	.de-rent-incl,
	.de-rent-grid { grid-template-columns: minmax(0, 1fr); }
	.de-rent-field--wide { grid-column: auto; }
	.de-rent-opt { padding: 22px; }
	.de-rent-cta { padding: 28px 18px; }
	.de-rent-submit { width: 100%; }
	.de-rent-h { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
	.de-rent-req,
	.de-rent-submit { transition: none; }
}

/* =========================================================================
 * v1.9 RENTAL OPTION PAGES (/ethiopia-car-rental/<option>/) and the
 * option links added to the home cards and the parent car rental page.
 * ========================================================================= */

.de-rent-opt h3 a { color: inherit; text-decoration: none; }
.de-rent-opt h3 a:hover,
.de-rent-opt h3 a:focus-visible { color: var(--de-brand); }

.de-sec .de-rent-more-link { margin: -12px 0 20px; font-size: 15px; }
.de-rent-more-link a {
	font-weight: 700;
	color: var(--de-rent-ink, #212529);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.de-rent-more-link a:hover { color: var(--de-brand); }

.de-rpage { padding-top: 8px; padding-bottom: 40px; }

.de-rpage-crumbs { margin: 0 0 24px; font-size: 14px; color: var(--de-muted); }
.de-rpage-crumbs a { color: var(--de-muted); text-decoration: underline; text-underline-offset: 3px; }
.de-rpage-crumbs span[aria-current] { color: var(--de-rent-ink); font-weight: 600; }

.de-rpage-top {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
	gap: 40px;
	align-items: start;
	margin-bottom: 56px;
}

.de-sec .de-rpage-lede p { font-size: 18px; line-height: 1.7; color: var(--de-rent-ink); }

.de-rpage-price { position: sticky; top: 110px; }
.de-sec .de-rpage-reply { margin: 12px 0 0; font-size: 14px; }

.de-rpage-h2 { font-size: 28px; margin-bottom: 20px; }

.de-rpage-why {
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 32px;
}

.de-rpage-why li { margin: 0; padding-left: 16px; border-left: 3px solid var(--de-brand); }

.de-rpage-why h3,
.de-fleet-body h3 {
	margin: 0 0 6px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	color: var(--de-rent-ink);
}

.de-sec .de-rpage-why p { margin: 0; font-size: 16px; }

.de-rpage .de-rent-incl h2.de-rent-h { font-size: 24px; }

.de-rpage-faq { margin: 0 0 56px; max-width: 900px; }
.de-rpage-faq dt { font-size: 18px; margin-top: 20px; }
.de-rpage-faq dd { font-size: 16px; }

.de-rpage-more { margin-top: 56px; }
.de-rpage-more .de-sec-grid { margin-bottom: 36px; }

.de-rpage-links { margin: 48px auto; }
.de-rpage-links .de-sec-title { text-align: center; }

@media (max-width: 991px) {
	.de-rpage-top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.de-rpage-price { position: static; }
}

@media (max-width: 767px) {
	.de-rpage-why { grid-template-columns: minmax(0, 1fr); }
	.de-rpage-h2 { font-size: 23px; }
	.de-sec .de-rpage-lede p { font-size: 17px; }
}

/* v1.9.1 Hero for the rental option pages.
 *
 * Blocksy runs a transparent header with white links site wide, which the
 * Elementor pages sit a photo slider under. A plain page has nothing under
 * the header, so its white menu vanished against the white page and the
 * page had no h1. This band gives the header its dark backdrop and carries
 * the h1. It is a flat brand fill, not an image, so it costs nothing for
 * LCP. #13385f is the navy the "Natural Wonders" tour card already uses.
 */
.de-rpage-hero {
	width: 100vw;
	margin: -60px 0 48px calc(50% - 50vw);
	padding: 160px 20px 56px;
	box-sizing: border-box;
	background: #13385f;
	background-image: linear-gradient(135deg, #13385f 0%, #0f2c4a 60%, #0b5f6b 100%);
	color: #fff;
}
.de-rpage-hero-in { max-width: var(--theme-normal-container-max-width, 1290px); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.de-rpage-hero .de-rpage-crumbs { margin-bottom: 14px; color: rgba(255,255,255,.75); }
.de-rpage-hero .de-rpage-crumbs a { color: rgba(255,255,255,.85); }
.de-rpage-hero .de-rpage-crumbs span[aria-current] { color: #fff; }
.de-rpage-h1 {
	margin: 0 0 12px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: clamp(30px, 4.2vw, 52px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.045em;
	text-transform: uppercase;
	color: #fff;
}
.de-sec .de-rpage-tag { max-width: 760px; margin: 0; font-size: 19px; color: rgba(255,255,255,.88); }
.de-rpage { padding-top: 0; }
@media (max-width: 999px) {
	.de-rpage-hero { padding-top: 120px; padding-bottom: 40px; }
}
@media (max-width: 767px) {
	.de-rpage-hero { margin-bottom: 32px; }
	.de-sec .de-rpage-tag { font-size: 17px; }
}

/* v1.10 Four vehicle types. auto-fit so the home row shows all four side
 * by side on desktop, and the option pages (two or three vehicles) still
 * fill the width instead of leaving an empty column. */
@media (min-width: 992px) {
	.de-fleet { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
	.de-fleet-body { padding: 18px 18px 20px; }
	.de-fleet-specs { gap: 10px; }
}
.de-fleet-item img { aspect-ratio: 1080 / 600; background: #eadbb8; }

.de-fleet-specs dt { word-break: keep-all; overflow-wrap: normal; hyphens: none; letter-spacing: .05em; }
@media (min-width: 992px) { .de-fleet-specs dt { font-size: 10px; } .de-fleet-specs dd { font-size: 14px; } }

/* =========================================================================
 * v1.11 PLACES TO VISIT IN ETHIOPIA
 * 4 x 3 grid of equal-height cards, 2 columns on tablet, 1 on phones. The
 * whole card is one link; the tour link sits under it as a second target.
 * ========================================================================= */

.de-sec--places { max-width: var(--theme-normal-container-max-width, 1290px); text-align: left; }
.de-places-head { text-align: center; }
.de-places-head .de-sec-sub { max-width: 780px; margin-bottom: 32px !important; }

.de-places-grid {
	list-style: none;
	margin: 0 0 44px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.de-place {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 1px solid var(--de-line);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .18s ease, transform .18s ease;
}
.de-place:hover { box-shadow: 0 10px 26px rgba(17, 21, 24, .12); transform: translateY(-2px); }

.de-place-link {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	color: inherit;
	text-decoration: none;
}
.de-place-link:focus-visible { outline: 3px solid var(--de-brand); outline-offset: -3px; }

.de-place-link img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: #e9e4d8;
}

.de-place-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #212529;
	background: rgba(255, 255, 255, .92);
}
.de-place-tag--history { box-shadow: inset 3px 0 0 #f38e20; }
.de-place-tag--nature  { box-shadow: inset 3px 0 0 #0a9f9e; }
.de-place-tag--culture { box-shadow: inset 3px 0 0 #7c8e9c; }

.de-place-body { display: block; padding: 16px 18px 14px; flex: 1 1 auto; }

.de-place-body h3 {
	margin: 0 0 6px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: #212529;
}
.de-place-link:hover h3 { color: var(--de-brand); }

.de-place-hook { display: block; font-size: 15px; line-height: 1.5; color: var(--de-muted); }

.de-place-tour {
	display: block;
	padding: 10px 18px 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--theme-palette-color-2, #0d9693);
	text-decoration: none;
}
.de-place-tour:hover,
.de-place-tour:focus-visible { color: var(--de-brand); text-decoration: underline; text-underline-offset: 3px; }

.de-places-more { margin: 0 0 28px; }
.de-places-more-title {
	margin: 0 0 16px;
	font-family: Raleway, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #212529;
}
.de-places-more-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.de-places-more-list li { margin: 0; }
.de-places-more-list a {
	display: block;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid var(--de-line);
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease;
	box-sizing: border-box;
}
.de-places-more-list a:hover,
.de-places-more-list a:focus-visible { border-color: var(--de-brand); }
.de-pm-name { display: block; font-size: 15px; font-weight: 700; color: #212529; }
.de-pm-hook { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--de-muted); }

.de-sec .de-places-all { margin: 0; text-align: center; }

@media (max-width: 991px) {
	.de-places-grid,
	.de-places-more-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.de-places-grid,
	.de-places-more-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.de-place { transition: none; }
	.de-place:hover { transform: none; }
}