* {
    font-family: Arial, Helvetica, sans-serif;
}

/* Widths and sizes */

.max-w-8xl {
    max-width: 1440px;
}
.w-8xl {
    width: 1440px;
}

.w-150 {
    width: 600px;
}

.w-105 {
    width: 420px;
}

.px-35 {
    padding-left: 140px;
    padding-right: 140px;
}

.text-2lg {
    font-size: 20px;
}

/* Texts and backgrounds colors */

.text-orange {
    color: #E89739;
} 

.text-lightgray {
    color: #4A4A4A;
}

.text-blue-700 {
    color: #003743;
}

.border-orange {
    border-color: #E89739;
}

.bg-orange-500 {
    background-color: #E89739 ;
}
.bg-orange-300 {
    background-color: #FFCB71;
}
.bg-orange-100 {
    background-color: #FFEDCE;
}

.bg-yellow {
    background-color: #FFE279;
}
.bg-green {
    background-color: #2F9A3A;
}

.bg-cyan {
    background-color: #98D0D3;
}

.bg-blue {
    background-color: #7FB4D2;
}
.bg-blue-700 {
    background-color: #003743;
}

.bg-accueil {
    background: url("../assets/images/depannage-urgence.png");
}

/* Boxes' shadows */

.orange-shadow {
    box-shadow: 0px 10px #E89739;
}

.box-shadow {
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);   
}
.inner-box-shadow:focus {
    --tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.50);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    transition-duration: 0.5s;
}

/* Translations and animations */

.-translateX-50 {
    transform: translateX(-50%);
}

.-translateX-navbar {
    transform: translateX(-420px);
}

.rounded-r-services {
    border-top-right-radius: 125px;
    border-bottom-right-radius: 125px;
}

.entrance-animation-navbar {
    animation: navbar-entrance 1s ease 0s 1 normal forwards;
}

.exit-animation-navbar {
    animation: navbar-exit 1s ease 0s 1 normal forwards;
}

.entrance-animation-burger {
    animation: burger-entrance 1s ease 0s 1 normal forwards;
}

.exit-animation-burger {
    animation: burger-exit 1s ease 0s 1 normal forwards;
}

.transform1 {
    transform: translateY(9px) rotate(-45deg) scale(0.8);
    background-color: black;
    transition-duration: 0.5s;
}

.remove {
    display: none;
    transition-duration: 0.5s;
}

.transform2 {
    transform: translateY(-5px) rotate(45deg) scale(0.8);
    background-color: black;
    transition-duration: 0.5s;
}

@keyframes navbar-entrance {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes navbar-exit {
	0% {
		opacity: 1;
        transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(-420px);
	}
}

@keyframes burger-entrance {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		transform: translateX(280px);
	}
}

@keyframes burger-exit {
	0% {
		opacity: 1;
        transform: translateX(280px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}