@font-face { 
font-family: cal;
src: url(CalSans-Regular.ttf); 
}
@font-face { 
font-family: impact;
src: url(impact.ttf); 
}
@font-face { 
font-family: bahn;
src: url(bahn.ttf); 
}
@font-face { 
font-family: serrat;
src: url(Montserrat-Regular.ttf); 
}
@font-face { 
font-family: not;
src: url(NoticiaText-Bold.ttf); 
}
@font-face { 
font-family: regular-mr;
src: url(MrDafoe-Regular.ttf); 
}
@font-face { 
font-family: marker;
src: url(PermanentMarker-Regular.ttf); 
}
:root{
  --red: #af0606;
  --lightgray: lightgrey;
  --darkgray: darkgrey;
  --yellow: #0000FF;
  --yellow-dark: #0000FF;
}
/* Skip link styles - make it accessible */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0000FF;
  color: white;
  padding: 8px 16px;
  z-index: 10000;
  text-decoration: none;
  font-weight: bold;
  border-radius: 0 0 4px 0;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid white;
  outline-offset: 2px;
}

/* Remove display:none that was hiding it */

.cotainer-why-a {
	background-color: white;
	padding: 10px;
	display: flex;
	justify-content: space-evenly;
  flex-direction: row;
  width: 100%;
}
.why-area-con {
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 383px;
}
.tit-say-why {
	background-color: white;
	display: flex;
	justify-content: center;
	padding-top: 60px;
}
.tit-say-why h1 {
	margin: 0px 50px;
	font-size: 20px;
  font-family: arial;
  text-align: center;
}
.why-contact {
	padding: 10px 10px 65px 10px;
	display: flex;
	justify-content: center;
	background-color: white;
}
.why-contact a {
	background-color: #6b6b6b; /* FIX: was var(--darkgray)=#a9a9a9 (2.35:1 with white, FAILS). Now 4.6:1 PASSES WCAG AA */
	padding: 25px 30px;
	color: white;
	border-radius: 32px;
	width: max-content;
	font-weight: bold;
}
.why-area-con img {
	width: 125px;
}
.why-area-con h1 {
	font-family: impact;
	font-size: 25px;
	color: #5b5b5b;
}
.why-area-con p {
	font-size: 20px;
	margin-top: 10px;
  font-family: arial;
}
.left-why {
	text-align: left;
}
.center-why {
	text-align: center;
}
.right-why {
	text-align: left;
}
.body-dumpsters {
	padding: 0px 245px;
}
.title-dumpster-rent {
	padding: 30px 0px;
}
.title-dumpster-rent h1 {
	font-size: 45px;
	font-family: impact;
	color: #5b5b5b;
}
.card-container-dumsters {
	display: flex;
	flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
	width: 100%;
}
.card-dumpsters-rental {
	background-color: white;
	border-radius: 20px;
	width: 395px;
	padding: 20px;
	margin-bottom: 133px;
	position: relative;
	display: flex;
    flex-direction: column;
    align-items: center;
}
.card-dumpsters-rental h1 {
	text-align: center;
	color: black;
	font-family: impact;
	font-size: 35px;
	letter-spacing: 1px;
}
.card-dumpsters-rental p {
	color: black;
	font-family: arial;
	font-size: 20px;
	margin-top: 20px;
}
.dumpster-image-size {
	width: 100%;
	margin: 20px 0px;
	height: 235px;
	overflow: hidden;
}
.dumpster-image-size img {
	width: 100%;
}
.container-card-button {
	display: flex;
	flex-direction: column;
}
.card-dumpsters-rental a {
	position: absolute;
	bottom: -95px;
	width: max-content;
	background-color: black;
	padding: 20px 30px;
	color: white;
	border-radius: 32px;
	margin-top: 0px;
}
.button-more-bot {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px 0px 60px 0px;
}
.button-more-bot a {
	background-color: black;
	padding: 25px 30px;
	color: white;
	border-radius: 32px;
	text-align: center;
	max-width: 560px;
	height: 100%;
	line-height: 25px;
}
.button-more-bot a span{
	color: white;
	white-space: nowrap;
}
.contact-part {
	padding: 30px;
	display: flex;
	justify-content: center;
	height: 160px;
	align-items: center;
}
.contact-part {
	background-image: url(../images/para-contact-par.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	background-attachment: fixed;
	position: relative;
}
.gray-curtain {
	height: 100%;
	width: 100%;
	background-color: #737373;
	opacity: 0.5;
	position: absolute;
	top: 0;
}
.left-contact-text {
	padding: 35px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.left-contact-text h1 {
	font-family: bahn;
	font-size: 20px;
	color: white;
	letter-spacing: 1px;
}
.left-contact-text h2 {
	font-family: impact;
	font-size: 30px;
	color: white;
	letter-spacing: 1px;
}
.line-ver-stra {
	height: 100%;
	width: 3px;
	background-color: white;
}
.line-ver-stra {
	height: 100%;
	width: 3px;
	background-color: white;
}
.line-ver-double {
	height: 100%;
	width: 3px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.line {
	height: 40%;
	width: 100%;
	background-color: white;
}
.saying-contact-text {
	padding: 35px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.saying-contact-text h1 {
	font-family: arial;
	font-size: 25px;
	letter-spacing: 1px;
	color: white;
	font-weight: bold;
}
.saying-contact-text h2 {
	font-family: arial;
	font-size: 35px;
	letter-spacing: 1px;
	color: #f40121;
	font-weight: bold;
}
.bott-contact-us {
	margin-left: 30px;
}
.bott-contact-us a {
	color: white;
	font-family: arial;
	font-size: 21px;
	padding: 11px;
	border: 3px solid white;
	border-radius: 11px;
}
.ab-title {
	background-color: #6b6b6b; /* FIX: was #a9a9a9 (2.35:1 with white text, FAILS). Now 4.6:1 PASSES WCAG AA */
	padding: 30px 10px;
	text-align: center;
}
.ab-title h1 {
	font-family: impact;
	color: white;
	font-size: 40px;
	letter-spacing: 1px;
}
.ab-title h1 span {
	font-family: impact;
	color: #c0d8ff; /* FIX: #99c2ff was 2.92:1 on #6b6b6b (FAILS 3:1 for large text).
	                   #c0d8ff = 3.5:1 on #6b6b6b — PASSES WCAG AA for large text. */
	letter-spacing: 1px;
}
.tit-how-it {
	padding: 25px 5px;
	background-color: #6b6b6b; /* FIX: was #a9a9a9 (2.35:1 with white text, FAILS). Now 4.6:1 PASSES WCAG AA */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.tit-how-it h1 {
	font-size: 50px;
	color: white;
	text-align: center;
	font-family: serrat;
}
.tit-how-it h2 {
	font-size: 25px;
	color: white;
	text-align: center;
	font-family: serrat;
}
.line-how {
	margin: 25px 0px 10px 0px;
	width: 250px;
	height: 2px;
	background-color: white;
}
.container-how-w-line {
	margin: 50px 0px;
	position: relative;
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.container-how-w-line::before {
	background-color: #c1c1c1;
  display: block;
  margin: 0 auto;
  width: 2px;
  height: 100%;
  position: absolute;
  content: "";
}
.container-how-w-circle {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.dis-cont-left::before {
  background-color: #f5f5f5;
  display: block;
  margin: 20px 0px;
  width: 25px;
  position: relative;
  z-index: 1;
  height: 25px;
  border: 10px solid #c1c1c1;
  border-radius: 50%;
  content: "";
}
.dis-cont-left {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.cont-car-how-wi-lef {
	width: 445px;
	background-color: white;
	margin-right: 610px;
    margin-top: -80px;
}
.cont-car-how-wi-rig {
	width: 445px;
	background-color: white;
	margin-left: 610px;
    margin-top: -80px;
}
.box-arow-wi-yello {
	background-color: #0000FF;
	position: relative;
	padding: 20px;
}
.box-arow-wi-yello h1 {
	color: white;
	font-family: arial;
	font-size: 25px;
}
.cont-car-how-wi-rig p {
	padding: 20px;
}
.cont-car-how-wi-lef p {
	padding: 20px;
}
.arrow-l {
	clip-path: polygon(0 0, 0 100%, 100% 50%);
	background-color: #0000FF;
    position: absolute;
    width: 16px;
    right: -15px;
    height: 30px;
    top: 23px;
}
.arrow-r {
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
	background-color: #0000FF;
    position: absolute;
    width: 16px;
    left: -15px;
    height: 30px;
    top: 23px;
}
.container-rentals-dumpster {
	padding: 40px 0px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.card-dumpster-rentals {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	padding: 10px;
}
@media (max-width: 768px) {
    .card-dumpster-rentals img {
        width: 100%;
        height: 250px;
    }
}
.card-dumpster-rentals img {
    width: 500px;      
    height: 350px;  
    margin-right: 15px;  
    object-fit: cover; 
       object-position: top;  
      box-shadow: -8px -8px 15px rgba(70, 100, 180, 0.4);
    flex-shrink: 0;  
}
.rents-description {
	width: 45%;
}
.rents-description h1 {
	font-family: impact;
	font-size: 35px;
	letter-spacing: 1px;
	margin-bottom: 20px;
}
.rents-description p {
	font-family: serrat;
	font-size: 21px;
}
.bottom-button-rents {
	margin-top: 40px;
}
.bottom-button-rents a {
	padding: 15px 20px;
	background-color: #0000FF;
	font-weight: bold;
	margin: 0px 5px;
	color: white;
}
.bottom-button-rents a:hover {
	border: 2px solid black;
}
.reverse-dump {
	flex-direction: row-reverse;
}

.cont-text-about-pa1 {
  background-color: #e5e5e5;
  padding: 20px;
  width: 38%;
}

.button-about-u {
	text-align: left;
}

.button-about-u a {
	margin-right: 10px;
}

.cont-text-about-pa1 h1 {
  font-size: 30px;
  font-family: 'impact';
  color: black;
}

.cont-text-about-pa1 p {
  font-size: 22px;
  margin-top: 20px;
  margin-bottom: 40px;
}

.cont-staff-pa-te {
	display: flex;
	justify-content: center;
}

.cont-text-about-pa2 {
  padding: 20px;
  width: 70%;
}
.button-about-u1 {
	text-align: left;
}

.button-about-u1 a {
	margin-right: 10px;
}

.cont-text-about-pa2 h1 {
  font-size: 30px;
  font-family: 'impact';
  color: black;
  text-align: center;
}
.cont-text-about-pa2 h2 {
	text-align: center;
}

.cont-text-about-pa2 p {
  font-size: 22px;
  margin-top: 20px;
  margin-bottom: 40px;
}
.cont-bot-about2 {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.image-botdemolit img {
  width: 45%;
  margin: 0px 10px;
}
.button-about-u1 a{
	padding: 10px 20px;
	background-color: var(--yellow-dark);
	color: white;
	font-weight: bold;
}
.button-about-u1 {
	display: flex;
	justify-content: flex-start;
}
.image-botdemolit {
	display: flex;
	justify-content: center;
  align-items: center;
}
.sec-pad-cont {
	padding: 50px;
	background-color: white;
}