/*!
 * Start Bootstrap - Creative v1.1.0 (http://startbootstrap.com/template-overviews/creative)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */
html,
body {
  height: 100%;
  width: 100%;
}
body {
  font-family: "Archivo", 'Helvetica Neue', Arial, sans-serif;
}
hr {
  border-color: #F05F40;
  border-width: 3px;
  max-width: 50px;
}
hr.light {
  border-color: white;
}
a {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
  color: #F05F40;
}
a:hover,
a:focus {
  color: #eb3812;
}

.bg-primary a{
	color: #f8d2cf;
}

.bg-primary a:hover,
.bg-primary a:focus {
  color: white;
}


p {
  line-height: 1.5;
  margin-bottom: 20px;
}
.bg-primary {
  background-color: #F05F40;
}
.bg-dark {
  background-color: #222222;
  color: white;
}
.text-faded {
  color: rgba(255, 255, 255, 0.7);
}
section {
  padding: 20px 0;
}
aside {
  padding: 50px 0;
}
.no-padding {
  padding: 0;
}
.navbar-default {
  background-color: white;
  border-color: rgba(34, 34, 34, 0.05);
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.navbar-default .navbar-header .navbar-brand {
  color: #F05F40;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
  color: #eb3812;
}
.navbar-default .navbar-header .navbar-toggle {
  font-weight: 700;
  font-size: 12px;
  color: #222222;
  text-transform: uppercase;
}
.navbar-default .nav > li > a,
.navbar-default .nav > li > a:focus {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  color: #222222;
}
.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus:hover {
  color: #F05F40;
}
.navbar-default .nav > li.active > a,
.navbar-default .nav > li.active > a:focus {
  color: #F05F40 !important;
  background-color: transparent;
}
.navbar-default .nav > li.active > a:hover,
.navbar-default .nav > li.active > a:focus:hover {
  background-color: transparent;
}
@media (min-width: 768px) {
  .navbar-default {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .navbar-default .navbar-header .navbar-brand {
    color: rgba(255, 255, 255, 0.9);
    text-shadow:0 0 2px black;
  }
  .navbar-default .navbar-header .navbar-brand:hover,
  .navbar-default .navbar-header .navbar-brand:focus {
    color: white;
  }
  .navbar-default .nav > li > a,
  .navbar-default .nav > li > a:focus {
    color: rgba(255, 255, 255, 0.9);
    text-shadow:0 0 2px black;
  }
  .navbar-default .nav > li > a:hover,
  .navbar-default .nav > li > a:focus:hover {
    color: white;
  }


  .dark_hero .navbar-default {
    background-color: transparent;
    border-color: rgba(75, 54, 37, 0.3);
  }
  .dark_hero .navbar-default .navbar-header .navbar-brand {
    color: rgba(75, 54, 37, 0.7);
    text-shadow: 0 0 5px white;
  }
  .dark_hero .navbar-default .navbar-header .navbar-brand:hover,
  .dark_hero .navbar-default .navbar-header .navbar-brand:focus {
    color: white;
  }

  
  .dark_hero .navbar-default .nav > li > a,
  .dark_hero .navbar-default .nav > li > a:focus {
    color: rgba(75, 54, 37, 0.7);
     text-shadow: 0 0 5px white;
 }

  .dark_hero .navbar-default .nav > li > a:hover,
  .dark_hero .navbar-default .nav > li > a:focus:hover {
    color: black;
  }

  
  
  .navbar-default.affix {
    background-color: white;
    border-color: rgba(34, 34, 34, 0.05);
  }
  .navbar-default.affix .navbar-header .navbar-brand {
    color: #F05F40;
    font-size: 14px;
    text-shadow:none;
  }
  .navbar-default.affix .navbar-header .navbar-brand:hover,
  .navbar-default.affix .navbar-header .navbar-brand:focus {
    color: #eb3812;
  }
  .navbar-default.affix .nav > li > a,
  .navbar-default.affix .nav > li > a:focus {
    color: #222222;
    text-shadow:none;
  }
  .navbar-default.affix .nav > li > a:hover,
  .navbar-default.affix .nav > li > a:focus:hover {
    color: #F05F40;
  }
}
header {
  position: relative;
  width: 100%;
  min-height: auto;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center;
  background-image: url('../img/header.jpg');
  text-align: center;
  color: white;
}
header .header-content {
  position: relative;
  text-align: center;
  padding: 100px 15px 100px;
  width: 100%;
}


header .header-content .header-content-inner h1,
header .header-content .header-content-inner h2,
header .header-content .header-content-inner h3 {
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2em;
  text-shadow: 1px 1px 5px black, 0 0 10px black, 0 0 25px black
}
header .header-content .header-content-inner h2{
  font-size:1.5em;
  margin-bottom:0;
}
header .header-content .header-content-inner h3{
  font-size:1em;
  margin-bottom:0;
  font-weight:500;
  border:none;
  margin-top:1em;
}

header .header-content .header-content-inner hr {
  margin: 30px auto;
}
header .header-content .header-content-inner p {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  margin-bottom: 50px;
}


.portfolio_item header.welcome-intro h2,
.portfolio_item header.welcome-intro p{
  padding: 0 20px;
  font-size: 1.5em;
}

.portfolio_item header.welcome-intro h2{
  font-size:3em;
  font-weight:800;
}

.portfolio_item header.welcome-intro img{
  height: 50vh;
  border-radius: 30px;
  transform: rotate(5deg);
  box-shadow: 2px 2px 10px black, 2px 2px 30px black;

}

.portfolio_item header.welcome-intro{
  padding-top: 40px;
  padding-bottom: 10px;
  background-image: none;
  background-color:rgba(63, 41, 13, 0.9);
  overflow:initial;
}

.warning.row{
  background-color:rgba(240, 95, 64, 0.9) !important;
}

.warning.row a{
  color:white;
}

@media (min-width: 768px) {
  header {
    min-height: 100%;

    
  }


  .portfolio_item header.welcome-intro h2,
.portfolio_item header.welcome-intro p{
  text-align:right;
}


.portfolio_item  header {
    min-height: 90%;
  }

.portfolio_item header.welcome-intro{
  min-height: 50%;
  padding-top: 40px;
  padding-bottom: 10px;
  background-image: none;
  background-color:rgba(63, 41, 13, 0.9);
  overflow:initial;
}


.portfolio_item header.welcome-intro .row{
  max-width:1024px;
  margin:auto;
}




/* --- Updated .snapshot styling --- */
.snapshot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .snapshot {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .snapshot {
    grid-template-columns: 1fr;
  }
}

.snapshot div {
  flex: 1 1 18%;
  background-color: #F8F8F8;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}



.snapshot div:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);
}

.snapshot div h3 {
  font-size: 1em;
  margin-bottom: 5px;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

.snapshot div p {
  font-size: 1.4em;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  margin-bottom: 0;
}

.stinger {
  padding: 30px;
  margin: 30px 0;
  border: 4px solid #F05F40;
  border-left-width: 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #F05F40, #ee4b28);
  color: white;
  font-size: 1.5em;
  font-weight: 700;
  position: relative;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stinger:hover {
  transform: scale(1.02);
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.4);
}

.stinger-icon {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ee4b28;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

.stinger-icon i {
  color: white;
  font-size: 2em;
}


img.scaled{
  width:100%;
}


  header .header-content {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0 50px;
  	text-shadow: 0 0 5px black;
  }
  header .header-content .header-content-inner {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  
  
  header .header-content .header-content-inner {
    font-size: 30px;
  }
  header .header-content .header-content-inner p {
    font-size: 18px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
.section-heading {
  margin-top: 0;
}
.service-box {
  max-width: 400px;
  margin: 50px auto 0;
}
@media (min-width: 992px) {
  .service-box {
    margin: 20px auto 0;
  }
}

.col-detail{
  padding-top:1em;
}

.col-detail h3{
  margin-top:0;
  font-size:1.25em;
}


.service-box p {
  margin-bottom: 0;
}
.portfolio-box {
  position: relative;
  display: block;
  /*max-width: 650px;*/
  margin: 0 auto;
}
.portfolio-box .portfolio-box-caption {
  color: white;
  opacity: 0;
  display: block;
  background: rgba(240, 95, 64, 0.9);
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  padding: 0 15px;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
}
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
  font-size: 18px;
}
.portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}
.portfolio-box:focus {
  outline: none;
}
@media (max-width: 768px) {
	.portfolio-box .portfolio-box-caption {
	  opacity: 1;
	  background:none;
	  text-align:left;
	  text-shadow:0 0 5px black;
	}

	.portfolio-box:hover .portfolio-box-caption{
		background: rgba(240, 95, 64, 0.6);
	}

	.portfolio-box .portfolio-box-caption .portfolio-box-caption-content{
		background-color:rgba(0,0,0,.5);
		padding:10px 0;
	}
}

@media (min-width: 768px) {


  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    font-size: 16px;
  }
  .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 22px;
  }
}
.call-to-action h2 {
  margin: 0 auto 20px;
}
.text-primary {
  color: #F05F40;
}
.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}
.btn-default {
  color: #222222;
  background-color: white;
  border-color: white;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #222222;
  background-color: #f2f2f2;
  border-color: #ededed;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: white;
  border-color: white;
}
.btn-default .badge {
  color: white;
  background-color: #222222;
}
.btn-primary {
  color: white;
  background-color: #F05F40;
  border-color: #F05F40;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  transition: all 0.35s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: white;
  background-color: #ee4b28;
  border-color: #ed431f;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #F05F40;
  border-color: #F05F40;
}
.btn-primary .badge {
  color: #F05F40;
  background-color: white;
}
.btn {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  border: none;
  border-radius: 300px;
  font-weight: 700;
  text-transform: uppercase;
}
.btn-xl {
  padding: 15px 30px;
}
::-moz-selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
::selection {
  color: white;
  text-shadow: none;
  background: #222222;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
body {
  webkit-tap-highlight-color: #222222;
}

.bullet{
	display:block;
	margin-top:25px;
	border-top:1px dotted #F05F40;
	text-align:center;
	height:25px;
	color:#F05F40;
	position:relative;
}

.bullet *{
	position:absolute;
	top:-17px;
	background-color:white;
	width:50px;
	padding:10px;
	left:50%;
	margin-left:-25px;
}


  .dark_hero header .header-content {
  	color:black;
  	text-shadow: 0 0 5px white, 0 0 5px white;
  }
  .dark_hero header.light .header-content {
  	color:white;
  	text-shadow: 0 0 5px black;
  }


.article{
	/*max-width:1024px;*/
	margin-left:auto;
	margin-right:auto;
  font-size:1.2em;
}

.article .row>.col-md-4{
  color:white;
  text-shadow:1px 1px 5px rgba(0,0,0,.8), 0px 0px 2px rgba(0,0,0,.8);
  font-size:1.1em;
}

.article h2 {
  font-size: 1.6em;
  font-weight: 800;
  border-bottom: 2px solid #F05F40;
  padding-bottom: 5px;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #333;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.article ul{
  padding-left: 1em;
}

.youtube{
  width: calc(100vw - 30px);
  height: calc((100vw - 30px));
  max-width: 600px;
  max-height: 600px;
}

.article>div>.row:nth-child(1) { background-color: rgba(75, 54, 37, 0.03); }
.article>div>.row:nth-child(2) { background-color: rgba(75, 54, 37, 0.06); }
.article>div>.row:nth-child(3) { background-color: rgba(75, 54, 37, 0.09); }
.article>div>.row:nth-child(4) { background-color: rgba(75, 54, 37, 0.12); }
.article>div>.row:nth-child(5) { background-color: rgba(75, 54, 37, 0.15); }
.article>div>.row:nth-child(6) { background-color: rgba(75, 54, 37, 0.18); }
.article>div>.row:nth-child(7) { background-color: rgba(75, 54, 37, 0.21); }
.article>div>.row:nth-child(8) { background-color: rgba(75, 54, 37, 0.24); }
.article>div>.row:nth-child(9) { background-color: rgba(75, 54, 37, 0.27); }
.article>div>.row:nth-child(10) { background-color: rgba(75, 54, 37, 0.30); }



.article>div>.row{
  padding-top:1em;
  padding-bottom:1em;
}

@media (min-width: 1025px) {
  .article>div>.row .col-md-4 {
      margin-left: calc((100vw - 1024px) / 2);
      max-width:341px;
  }
  .article>div>.row .col-md-8{
    max-width:682px;
    margin-right:0;
    margin-left:0;
  }
}


p.dropcap:first-letter { float: left; color:#F05F40; font-size: 75px; line-height: 70px; margin-right:5px; }


[class*="thumbnail"]{
  border:0;
	padding:5px;
	margin-top:15px;
	margin-bottom:5px;
  background:none;
  text-align:center;
  transform: rotate(-5deg);

}

.tn-reverse{
  transform: rotate(5deg);
  margin-left:-40px;
}

.tn-centered{
  transform: rotate(0deg);
  margin-left:0;
  margin-top:-15px;
}


[class*="thumbnail"] img{
  border-radius:10px;
  box-shadow: 0 0 10px black;
}

[class*="thumbnail"] span.description{
  font-style:italic;
  font-size:0.8em;
  color:rgba(0,0,0,.6);

}

[class*="thumbnail"]:hover{
	border-color: #337ab7;
}



.pull-right[class*="thumbnail"]{
	margin-left:10px;
}

.pull-left[class*="thumbnail"]{
	margin-right:10px;
}

.lg-thumbnail{
	width:50%;
}

.lg-thumbnail img{
	width:100%;
}

.bottom-gutter{
	margin-bottom:20px;
}


@media (max-width: 769px) {
	.lg-thumbnail{
		width:100%;
	}
}


.portfolio-directory img{
  border-radius: 10px;
  box-shadow:1px 1px 5px black;
  transform:scale(0.95);
  transition: all 200ms cubic-bezier(0.23, 0.7, 0.65, 1.8);
}

.portfolio-directory .col-md-6{
  padding:5px;
}

.portfolio-directory .col-md-6:hover img{
  transform:scale(1);
}

.portfolio-directory .pf-summary{
  position:absolute;
  bottom:10px;
  text-align:center;
  left:0;
  right:0;
  color:white;
  padding:0 40px;
  text-shadow: 1px 1px 5px black, 0 0 4px black;
  z-index:100;

}

.pf-summary h4{
  font-weight:900;
  font-size:1.75em;
}
/* --- Updated .snapshot div styles --- */
.snapshot div {

  display: inline-block;
  margin: 1%;
  padding: 30px;
  background: #F05F40;
  background: linear-gradient(135deg, #F05F40, #ee4b28);
  color: white;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}

.snapshot div:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.4);
}

.snapshot div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 0;
}

.snapshot div h3 {
  font-size: 1.1em;
  margin-bottom: 10px;
  z-index: 1;
  position: relative;
}

.snapshot div p {
  font-size: 1.6em;
  font-weight: 700;
  z-index: 1;
  position: relative;
  margin-bottom: 0;
}

.snapshot div .count-up {
  font-size: 2.2em;
  font-weight: 800;
  z-index: 1;
  position: relative;
}

.bullet {
  display: block;
  margin: 30px 0;
  border-top: 1px dotted #F05F40;
  position: relative;
  text-align: center;
}

.bullet:before {
  content: "●";
  font-size: 1.5em;
  color: #F05F40;
  background-color: #fff;
  padding: 5px;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.thumbnail img {
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.3s ease;
  transform: scale(0.95);
}

.thumbnail:hover img {
  filter: grayscale(0%);
  transform: scale(1);
}

.btn-primary {
  background: linear-gradient(135deg, #F05F40, #ee4b28);
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  transition: background 0.3s ease, transform 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ee4b28, #F05F40);
  transform: scale(1.05);
}
/* --- Responsive side-by-side media pair with captions and note badge --- */
.media-pair {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin: 15px 0 25px;
}
/* Single media item container */
.media-single {
  margin: 15px 0 25px;
  display: block;
}
.media-pair figure, .media-single figure {
  flex: 1 1 0;
  margin: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Center and constrain single figure */
.media-single figure {
  max-width: 1024px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Shared note below media pair */
.media-note {
  margin: 8px 0 20px;
  font-size: 0.95em;
  line-height: 1.5;
  color: rgba(0,0,0,0.7);
  padding: 10px 12px;
  border-left: 4px solid #F05F40;
  background: rgba(240,95,64,0.06);
  border-radius: 6px;
}

.media-pair figure img, .media-single figure img {
  display: block;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
}
.media-pair figure figcaption, .media-single figure figcaption {
  padding: 12px 16px 14px;
  font-size: 1.05em;
  line-height: 1.5;
  color: #222;
  font-weight: 700;
  background: linear-gradient(0deg, rgba(240,95,64,0.10), rgba(240,95,64,0.06));
  border-top: 4px solid #F05F40;
  letter-spacing: 0.1px;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
}
.media-pair .note-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  font-size: 0.8em;
  font-weight: 800;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  background: linear-gradient(135deg, #F05F40, #ee4b28);
  pointer-events: none;
}
@media (max-width: 992px) {
  .media-pair {
    gap: 14px;
  }
}
@media (max-width: 768px) {
  .media-pair {
    flex-direction: column;
  }
}