/* ============================================================================
   SwiftCast Landing — styles scoped under .swiftcast-landing
   Tokens extracted from the Figma comp (file cUm6kwu1UibvvuESWvxfsD / node 23:205).
   CSS-referenced assets use paths relative to this file (css/ -> ../images/...).
   ========================================================================== */

.swiftcast-landing {
	--sc-dark-green: #022c18;
	--sc-green: #008d44;
	--sc-mid-green: #004123;
	--sc-accent: #63d098;
	--sc-dark: #1b1b1b;
	--sc-grey: #3e3f47;
	--sc-green-6: rgba(0, 141, 68, 0.06);
	--sc-green-10: rgba(0, 141, 68, 0.10);
	overflow-x: hidden;
	color: var(--sc-grey);
	font-family: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Shared section primitives ---------------------------------------- */
.swiftcast-landing section { padding: 80px 0; }
.swiftcast-landing .sc-heading {
	font-family: "Barlow Semi Condensed", "Barlow", sans-serif;
	font-weight: 600;
	font-size: 38px;
	line-height: 1.15;
	color: var(--sc-grey);
	margin: 0 0 18px;
}
.swiftcast-landing .sc-heading .sc-em { color: var(--sc-green); }
.swiftcast-landing .sc-heading-light { color: #fff; }
.swiftcast-landing .sc-heading-light .sc-em { color: var(--sc-accent); }
.swiftcast-landing .sc-heading-center,
.swiftcast-landing .sc-sub-center { text-align: center; }
.swiftcast-landing .sc-sub {
	font-size: 18px;
	line-height: 28px;
	color: var(--sc-grey);
	padding-right: 20px;
	margin: 0 0 24px;
}
.swiftcast-landing .sc-sub-light { color: rgba(255, 255, 255, 0.82); }
.swiftcast-landing .sc-sub-center { max-width: 760px; margin-left: auto; margin-right: auto; }
.swiftcast-landing img { max-width: 100%; height: auto; }
.swiftcast-landing .contact-form-holder .sc-contact-heading { color: #ffffff; }
/* Buttons — reuse theme .btn-green / .btn-green-outline; pill + arrow tweaks */
.swiftcast-landing .btn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.swiftcast-landing .btn-green,
.swiftcast-landing .btn-green-outline {
	display: inline-flex; align-items: center; gap: 10px;
	border-radius: 999px; padding: 18px 34px;
	font-family: "Barlow", sans-serif; font-weight: 600; font-size: 18px;
	text-decoration: none; line-height: 1;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.swiftcast-landing .btn-green { background: var(--sc-green); color: #fff; border: 2px solid var(--sc-green); }
.swiftcast-landing .btn-green-outline { background: transparent; color: #fff; border: 2px solid var(--sc-green); }
.swiftcast-landing .btn-green:hover { opacity: .9; color: #fff; }
.swiftcast-landing .btn-green-outline:hover { background: var(--sc-green); color: #fff; }
.swiftcast-landing .has-arrow::after {
	content: ""; width: 16px; height: 16px; display: inline-block;
	background: url("../images/swiftcast/icon-arrow-button.svg") no-repeat center / contain;
	filter: brightness(0) invert(1);
}

/* ---- 1. Hero ---------------------------------------------------------- */
/* Extra bottom room so the stats card can overlap up into the green hero. */
.swiftcast-landing .banner { padding-bottom: 160px; }
.swiftcast-landing .sc-hero {
	background: var(--sc-dark-green);
	color: #fff;
}
.swiftcast-landing .sc-hero-title {
	font-family: "Barlow Semi Condensed", sans-serif; font-weight: 600;
	font-size: 50px; line-height: 1.05; margin: 0 0 6px; color: #fff;
}
.swiftcast-landing .sc-hero-sub { display: block; font-size: 25px; color: var(--sc-accent); margin-bottom: 22px; }
.swiftcast-landing .sc-hero-body { font-size: 18px; line-height: 28px; color: rgba(255,255,255,0.85); margin-bottom: 28px; max-width: 30em; }
.swiftcast-landing .sc-hero-img { text-align: center; }

/* ---- 2. Stats (white card overlapping the hero) ----------------------- */
/* The bg-fix wrappers keep the theme's textured pattern — it shows through the
   hero's curved bottom-left corner and sits behind the stats card. */
/* The .bg-white wrapper is the elevated stats card; pull it up over the hero.
   Needs a solid white fill (theme's Bootstrap .bg-white isn't loaded here), or
   the card goes semi-transparent and the green hero bleeds through the top. */
.swiftcast-landing .bg-white {
	position: relative; z-index: 5; margin-top: -84px; background: #fff; overflow: hidden;
	border-radius: 16px; box-shadow: 0 18px 50px rgba(2, 44, 24, 0.16);
}
/* The bar itself is a 10% green wash (#008D441A) that reads faint green over the
   white card wrapper — not deep green as it did when it sat on the hero. */
.swiftcast-landing .sc-stats { background: var(--sc-green-10); padding: 40px 24px; }
.swiftcast-landing .sc-stats-row { text-align: center; justify-content: space-evenly; }
.swiftcast-landing .sc-stat { padding: 12px 18px; }
.swiftcast-landing .sc-stat-num {
	display: block; font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700;
	font-size: 80px; line-height: 1; color: var(--sc-green);
}
.swiftcast-landing .sc-stat-label { display: block; font-size: 18px; font-weight: 500; color: var(--sc-grey); }

/* ---- 3. Steps (flip cards) -------------------------------------------- */
/* Textured pattern behind the tiles (matches the Figma comp). */
.swiftcast-landing .sc-steps { background-color: #ecedf3; background-image: url(../images/pattern.jpg); background-repeat: repeat; }
/* Explicit flex so the 3 cards size regardless of the theme's partial Bootstrap. */
.swiftcast-landing .sc-steps-row { display: flex; flex-wrap: wrap; margin-top: 36px; }
.swiftcast-landing .sc-step-col { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 15px; margin-bottom: 24px; }

/* Flip mechanics — a longer, gentler easing + deeper perspective keeps the
   green front from "ballooning" as it crosses the 90° mid-point. */
.swiftcast-landing .sc-flip { position: relative; min-height: 340px; height: 100%; perspective: 2200px; outline: none; }
.swiftcast-landing .sc-flip-inner { position: relative; width: 100%; height: 100%; min-height: inherit; transition: transform .85s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; will-change: transform; }
.swiftcast-landing .sc-flip-face { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.swiftcast-landing .sc-flip.is-flipped .sc-flip-inner { transform: rotateY(180deg); }
@media (hover: hover) {
	.swiftcast-landing .sc-flip[tabindex]:hover .sc-flip-inner,
	.swiftcast-landing .sc-flip[tabindex]:focus-visible .sc-flip-inner { transform: rotateY(180deg); }
	.swiftcast-landing .sc-flip[tabindex] { cursor: pointer; }
}

/* Front — colored tile, content centered */
.swiftcast-landing .sc-flip-front { padding: 40px 32px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.swiftcast-landing .sc-step-1 .sc-flip-front { background: var(--sc-dark-green); }
.swiftcast-landing .sc-step-2 .sc-flip-front { background: var(--sc-mid-green); }
.swiftcast-landing .sc-step-3 .sc-flip-front { background: var(--sc-green); }
.swiftcast-landing .sc-step-num { font-weight: 700; font-size: 24px; letter-spacing: 0; line-height: 1; color: var(--sc-accent); margin-bottom: 10px; }
.swiftcast-landing .sc-step-title { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 35px; line-height: 1.1; color: #fff; padding:0 45px; margin: 0; }

/* Back — white detail card with giant number watermark */
.swiftcast-landing .sc-flip-back { background: #fff; border: 1px solid #e9ebee; transform: rotateY(180deg); padding: 40px 32px; display: flex; align-items: center; }
.swiftcast-landing .sc-step-bignum {
	position: absolute; right: 24px; bottom: 7px; z-index: 0; pointer-events: none;
	font-family: "Barlow Semi Condensed", sans-serif; font-weight: 800; font-size: 300px; line-height: .74;
	color: var(--sc-green); opacity: .13;
}
.swiftcast-landing .sc-step-2 .sc-step-bignum {right: -17px;}
.swiftcast-landing .sc-step-3 .sc-step-bignum {right: -17px;}
.swiftcast-landing .sc-flip-back-text { position: relative; z-index: 1; max-width: 69%; }
.swiftcast-landing .sc-step-back-title { font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 28px; line-height: 1.12; color: var(--sc-grey); padding-right:44px; margin: 0 0 12px; }
.swiftcast-landing .sc-step-body { font-size: 17px; line-height: 26px; color: var(--sc-grey); margin: 0; }

/* ---- 4. Features ------------------------------------------------------ */
.swiftcast-landing .sc-features { background: #fff; }
.swiftcast-landing .sc-features-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.swiftcast-landing .sc-features-head-text { max-width: 640px; }
.swiftcast-landing .sc-features-head .sc-sub { margin-bottom: 0; }
.swiftcast-landing .sc-features-cta { flex: none; }
/* Explicit flex so the grid is 3-up regardless of the theme's partial Bootstrap.
   Light 1px rules only on the edges where tiles meet — interior dividers, no
   outer frame. 3-up: drop the right border on every 3rd cell and the bottom
   border on the final row (last 3 cells). */
.swiftcast-landing .sc-features-grid { display: flex; flex-wrap: wrap; }
.swiftcast-landing .sc-features-grid > .sc-feature { flex: 0 0 33.333%; max-width: 33.333%; padding: 34px 30px; border-right: 1px solid #e7e9ec; border-bottom: 1px solid #e7e9ec; }
.swiftcast-landing .sc-features-grid > .sc-feature:nth-child(3n) { border-right: 0; }
.swiftcast-landing .sc-features-grid > .sc-feature:nth-last-child(-n+3) { border-bottom: 0; }
.swiftcast-landing .sc-feature-icon { position: relative; display: inline-flex; width: 54px; height: 54px; margin-bottom: 16px; }
.swiftcast-landing .sc-feature-icon .sc-ico { width: 54px; height: 54px; object-fit: contain; }
/* Crossfade grey line-art -> colored on hover */
.swiftcast-landing .sc-feature-icon.has-hover .sc-ico { position: absolute; inset: 0; transition: opacity .28s ease; }
.swiftcast-landing .sc-feature-icon.has-hover .sc-ico-hover { opacity: 0; }
.swiftcast-landing .sc-feature:hover .sc-feature-icon.has-hover .sc-ico-base { opacity: 0; }
.swiftcast-landing .sc-feature:hover .sc-feature-icon.has-hover .sc-ico-hover { opacity: 1; }
/* These 4 icons were exported from Figma with wider/narrower viewBoxes than the
   rest (e.g. icon-device is 78x61, icon-clip is 43x62), so object-fit: contain
   shrinks them more inside the shared 54x54 box. Scale visually only — this
   doesn't touch the layout box, so row height/title alignment is unaffected. */
.swiftcast-landing .sc-feature-icon img[src$="icon-device.svg"],
.swiftcast-landing .sc-feature-icon img[src$="icon-device-hover.svg"],
.swiftcast-landing .sc-feature-icon img[src$="icon-palette.svg"],
.swiftcast-landing .sc-feature-icon img[src$="icon-palette-hover.svg"] { transform: scale(1.18); margin-left:6px; }
.swiftcast-landing .sc-feature-icon img[src$="icon-chart.svg"],
.swiftcast-landing .sc-feature-icon img[src$="icon-chart-hover.svg"] { transform: scale(1.1); margin-left:2px; }
.swiftcast-landing .sc-feature-icon img[src$="icon-clip.svg"],
.swiftcast-landing .sc-feature-icon img[src$="icon-clip-hover.svg"] { transform: scale(1.1); }
.swiftcast-landing .sc-feature-title { font-weight: 700; font-size: 22px; line-height: 28px; color: var(--sc-grey); margin: 0 0 8px; }
.swiftcast-landing .sc-feature-body { font-size: 18px; line-height: 28px; color: var(--sc-grey); margin: 0; }

/* ---- 5. Admin portal -------------------------------------------------- */
.swiftcast-landing .sc-portal { background-color: #ecedf3; background-image: url(../images/pattern.jpg); background-repeat: repeat; }
.swiftcast-landing .sc-portal-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.swiftcast-landing .sc-portal-list li { position: relative; padding-left: 30px; font-size: 18px; line-height: 24px; }
.swiftcast-landing .sc-portal-list li::before {
	content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
	background: url("../images/swiftcast/icon-check-small.svg") no-repeat center / contain;
}
.swiftcast-landing .sc-portal-img { text-align: center; }

/* ---- 6. Device support ------------------------------------------------ */
.swiftcast-landing .sc-devices { background: var(--sc-dark); color: #fff; text-align: center; }
/* Icons sit inline (to the left of) each OS name, all on one centered row. */
.swiftcast-landing .sc-devices-os { list-style: none; margin: 36px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 44px; }
.swiftcast-landing .sc-devices-os li { display: flex; flex-direction: row; align-items: center; gap: 12px; width: auto; }
.swiftcast-landing .sc-devices-os-icon { display: flex; align-items: center; justify-content: center; height: 34px; }
.swiftcast-landing .sc-devices-os-icon img { height: 30px; width: auto; max-width: 34px; object-fit: contain; }
.swiftcast-landing .sc-devices-os-label { font-size: 19px; font-weight: 500; color: #fff; }
.swiftcast-landing .sc-devices-fine { font-size: 12px; line-height: 18px; color: rgba(255,255,255,0.9); max-width: 680px; margin: 0 auto 28px; }
.swiftcast-landing .sc-devices-btns { justify-content: center; }

/* ---- 7. Every event --------------------------------------------------- */
.swiftcast-landing .sc-event { background-color: #ecedf3; background-image: url(../images/pattern.jpg); background-repeat: repeat; }
.swiftcast-landing .sc-event-img { text-align: center; }

/* ---- 8. Reassurance --------------------------------------------------- */
.swiftcast-landing .sc-reassure { background: #fff; }
.swiftcast-landing .sc-reassure-row { margin-top: 40px; }
.swiftcast-landing .sc-reassure-col { margin-bottom: 24px; }
.swiftcast-landing .sc-reassure-card { background: var(--sc-green-6); border-radius: 14px; padding: 36px 30px; height: 100%; transition: background-color .25s ease; }
.swiftcast-landing .sc-reassure-card:hover { background: var(--sc-green); }
.swiftcast-landing .sc-reassure-icon { display: inline-flex; width: 48px; height: 48px; margin-bottom: 16px; }
.swiftcast-landing .sc-reassure-icon img { width: 48px; height: 48px; object-fit: contain; transition: filter .25s ease; }
/* On hover the card goes solid green; recolor the line-art icon white to read on it. */
.swiftcast-landing .sc-reassure-card:hover .sc-reassure-icon img { filter: brightness(0) invert(1); }
.swiftcast-landing .sc-reassure-title { font-weight: 700; font-size: 22px; line-height: 28px; color: var(--sc-grey); margin: 0 0 10px; transition: color .25s ease; }
.swiftcast-landing .sc-reassure-body { font-size: 18px; line-height: 28px; color: var(--sc-grey); margin: 0; transition: color .25s ease; }
.swiftcast-landing .sc-reassure-card:hover .sc-reassure-title,
.swiftcast-landing .sc-reassure-card:hover .sc-reassure-body { color: #fff; }

/* ---- 9. Raspberry Pi -------------------------------------------------- */
.swiftcast-landing .sc-pi { background: var(--sc-dark); color: #fff; }
/* Icon sits to the left of the "Powered by / Raspberry Pi 4B" title block. */
.swiftcast-landing .sc-pi-head { display: flex; align-items: center; gap: 22px; }
.swiftcast-landing .sc-pi-icon { flex: none; }
.swiftcast-landing .sc-pi-icon img { max-height: 88px; width: auto; }
.swiftcast-landing .sc-pi-head .sc-heading { margin: 0; }
.swiftcast-landing .sc-pi-label { display: block; text-transform: uppercase; letter-spacing: .15em; font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 8px; }

/* ---- 10. Simple setup ------------------------------------------------- */
.swiftcast-landing .sc-setup { background-color: #ecedf3; background-image: url(../images/pattern.jpg); background-repeat: repeat; }
.swiftcast-landing .sc-setup-list { list-style: none; margin: 24px 0 0; padding: 0; }
.swiftcast-landing .sc-setup-list li { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; font-size: 18px; line-height: 28px; }
.swiftcast-landing .sc-setup-num {
	flex: none; width: 34px; height: 34px; border-radius: 50%;
	background: var(--sc-green); color: #fff; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.swiftcast-landing .sc-setup-img { text-align: center; }
.swiftcast-landing .sc-setup-img img { border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.swiftcast-landing .sc-pi-body-col .sc-sub,
.swiftcast-landing .sc-pi-body-col .sc-sub p:last-of-type { margin-bottom: 0; }
.swiftcast-landing .sc-setup-text h2 span { display: block; }
.swiftcast-landing .sc-setup-text .sc-sub { padding-right: 35px; }

/* ---- 11. Contact ------------------------------------------------------ */
/* The section carries `.contact-form-holder` and the form wrapper carries
   `.contact-form`, exactly like the CS3 product page. That means the theme's
   own main.css styles every field, the jcf-replaced <select>, and the submit
   button identically to the CS3 contact form — including the dark gradient
   backdrop, translucent white fields, and row spacing. Do NOT re-style the
   fields here: custom field CSS only fights the theme cascade and desyncs the
   jcf select (jcf hides the native <select> and inserts its own .jcf-select,
   which only main.css knows how to style). Heading emphasis only below. */
.swiftcast-landing .sc-contact-heading .sc-em { color: var(--sc-green); }

/* ============================================================================
   Grid fallback — this page does NOT load the theme's Bootstrap grid
   (theme.css), so the col-* classes carry no widths. Give every multi-column
   row explicit flex widths here, or cols collapse to content width and 2-col
   rows wrap (image drops below text).
   ========================================================================== */
.swiftcast-landing .sc-portal .row,
.swiftcast-landing .sc-event .row,
.swiftcast-landing .sc-setup .row,
.swiftcast-landing .sc-pi .row { display: flex; flex-wrap: wrap; align-items: center; }
.swiftcast-landing .sc-portal .row > [class*="col-"],
.swiftcast-landing .sc-event .row > [class*="col-"],
.swiftcast-landing .sc-setup .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; padding: 0 15px; }
/*.swiftcast-landing .sc-pi .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; padding: 0 15px; }*/
.swiftcast-landing .sc-pi .row > .sc-pi-text { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 15px; }
.swiftcast-landing .sc-pi .row > .sc-pi-body-col { flex: 0 0 66.6666%; max-width: 66.666%; padding: 0 15px; }
.swiftcast-landing .sc-reassure-row { display: flex; flex-wrap: wrap; }
.swiftcast-landing .sc-reassure-col { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 15px; }
.swiftcast-landing .sc-reassure-card { height: 100%; }

/* ============================================================================
   Responsive (mobile-first collapse). Bootstrap 4 breakpoints.
   ========================================================================== */
@media (max-width: 991.98px) {
	.swiftcast-landing section { padding: 56px 0; }
	.swiftcast-landing .sc-hero-text { margin-bottom: 32px; }
	.swiftcast-landing .sc-hero-title { font-size: 40px; }
	.swiftcast-landing .sc-features-head { flex-direction: column; }
	/* Features go 2-up: recompute interior dividers (right on odd cells, bottom
	   off the final two cells). */
	.swiftcast-landing .sc-features-grid > .sc-feature { flex: 0 0 50%; max-width: 50%; }
	.swiftcast-landing .sc-features-grid > .sc-feature:nth-child(3n) { border-right: 1px solid #e7e9ec; }
	.swiftcast-landing .sc-features-grid > .sc-feature:nth-child(2n) { border-right: 0; }
	.swiftcast-landing .sc-features-grid > .sc-feature:nth-last-child(-n+3) { border-bottom: 1px solid #e7e9ec; }
	.swiftcast-landing .sc-features-grid > .sc-feature:nth-last-child(-n+2) { border-bottom: 0; }
	/* Two-column rows stack; reassurance goes 1-up (matches feature/step collapse) */
	.swiftcast-landing .sc-portal .row > [class*="col-"],
	.swiftcast-landing .sc-event .row > [class*="col-"],
	.swiftcast-landing .sc-setup .row > [class*="col-"],
	.swiftcast-landing .sc-pi .row > [class*="col-"],
	.swiftcast-landing .sc-reassure-col { flex: 0 0 100%; max-width: 100%; }
	.swiftcast-landing .sc-reassure-col { margin-bottom: 20px; }
	.swiftcast-landing .sc-portal-img,
	.swiftcast-landing .sc-event-img,
	.swiftcast-landing .sc-setup-img { margin-top: 32px; }
	.swiftcast-landing .sc-pi-body-col { margin-top: 20px; }
	.swiftcast-landing .sc-setup-text .sc-sub { padding-right: 0px; }
}
@media (max-width: 767.98px) {
	.swiftcast-landing .sc-heading { font-size: 30px; }
	/* Features 1-up: only horizontal dividers between stacked tiles. */
	.swiftcast-landing .sc-features-grid > .sc-feature { flex: 0 0 100%; max-width: 100%; }
	.swiftcast-landing .sc-features-grid > .sc-feature:nth-child(2n),
	.swiftcast-landing .sc-features-grid > .sc-feature:nth-child(3n) { border-right: 0; }
	.swiftcast-landing .sc-features-grid > .sc-feature:nth-last-child(-n+3),
	.swiftcast-landing .sc-features-grid > .sc-feature:nth-last-child(-n+2) { border-bottom: 1px solid #e7e9ec; }
	.swiftcast-landing .sc-features-grid > .sc-feature:last-child { border-bottom: 0; }
	.swiftcast-landing .sc-step-col { flex: 0 0 100%; max-width: 100%; }
	.swiftcast-landing .sc-stat { margin-bottom: 18px; }
	.swiftcast-landing .sc-stat-num { font-size: 60px; }
	.swiftcast-landing .sc-portal-list { grid-template-columns: 1fr; }
	.swiftcast-landing .sc-devices-os { gap: 28px; }
	.swiftcast-landing .btn-list { gap: 12px; }
	.swiftcast-landing .sc-features-grid > .sc-feature {padding-left: 0; padding-right: 0; border-right: 0;}
	.swiftcast-landing .sc-step-col,
	.swiftcast-landing .sc-reassure-col,
	.swiftcast-landing .sc-pi .row > [class*="col-"],
	.swiftcast-landing .sc-portal .row > [class*="col-"], 
	.swiftcast-landing .sc-event .row > [class*="col-"], 
	.swiftcast-landing .sc-setup .row > [class*="col-"] {padding-right: 0; padding-left:0;}
	.swiftcast-landing .btn-list li { width: 100%; }
	.swiftcast-landing .btn-list li a { display:block; }
	.swiftcast-landing .banner { padding-bottom: 120px; }
	.swiftcast-landing .sc-sub { padding-right: 0; }
	.swiftcast-landing .sc-reassure-heading span { display: block; }
}
@media screen and (min-width: 768px) {
  .btn-list li:first-of-type {
    margin-left: 0px;
  }
}