:root {
    --blue: #3e4ea6;
    --black: #181617;
    --white: #fff;
    --brown: #c96705;
}

input:focus,
textarea:focus {
    outline: none;
    border: none
}

.bg-brown {
    background-color: var(--brown);
}

.background-black {
    background-color: var(--black);
}

.background-white {
    background-color: var(--white);
}
.bg-blue{
    background: var(--blue);
}
.bg-green {
    background-color: var(--green);
}

.bg-gradients {
    background: linear-gradient(180deg, rgba(209, 209, 209, 1) 42%, rgba(251, 251, 251, 1) 96%);
}

.background-transparent {
    background: transparent;
}
.orange__shadow:before {
    content: "";
    position: absolute;
    inset: -5px;
    transform: translate(10px,8px);
    z-index: 0;
    background: conic-gradient(from 90deg at -33% -40%, #ee820c, #f79d03, #ee6907, #e6390a, #DE080D, #d61039, #cf1261, #c71585, #cf1261, #d61039);
    filter: blur(109px);
    width: 90%;
    height: 50%;
    top: 10%;
}
.txt-black {
    color: var(--black);
}

.txt-white {
    color: var(--white);
}

.txt-orange {
    color: var(--orange);
}

html {
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

/*.container {*/
/*    max-width: 1240px;*/
/*}*/

section {
    padding: 5rem 0;
    box-shadow: inset -1px 3px 7px var(--orange);
    position: relative;
      
}
.bacground-white {
    background-color: white;
}

.f50 {
    font-size: 5rem;
}

.f40 {
    font-size: 4rem;
}

.f38 {
    font-size: 3.8rem;
}

.f32 {
    font-size: 3.2rem;
}

.f30 {
    font-size: 3rem;
}

.f26 {
    font-size: 2.6rem;
}

.f26 {
    font-size: 2.6rem;
}

.f24 {
    font-size: 2.4rem;
}

.f22 {
    font-size: 2.2rem;
}

.f20 {
    font-size: 2rem;
}

.f16 {
    font-size: 1.6rem;
}

.f12 {
    font-size: 1.2rem;
}

.f44 {
    font-size: 4.4rem;
}

.medium {
    font-weight: 500;
}

a {
    text-decoration: none;
}

.f18 {
    font-size: 1.8rem;
}

.f14 {
    font-size: 1.4rem;
}

.f12 {
    font-size: 1.2rem;
}

ul {
    padding: 0;
    margin: 0;
}

.order-now {
    font-size: 1.4rem;
    padding: .8rem 3.2rem;
    transition: all 0.6s linear;
    color: var(--white);
    border-radius: 4px;
    position: relative;
    z-index: 0;
}
a.order-now::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: -1;
    border-radius: 4px;
    border: 1px dashed var(--blue);
}
.live-chat {
    font-size: 1.4rem;
    padding: 6px 3px;
    font-weight: 600;
    transition: all 0.6s linear;
    position: relative;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    width: 130px;
    border-radius: 4px;
    color: var(--white);
    justify-content: center;
    background: var(--white);
    color: var(--black);
    z-index: 0;
}
a.live-chat::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: -1;
    border-radius: 4px;
    border: 1px dashed var(--white);
}
.whatsapp {
    font-size: 1.4rem;
    padding: .8rem 4rem;
    transition: all 0.6s linear;
    color: var(--white);
    border-radius: 4px;
    position: relative;
    background: var(--blue);
    z-index: 0;
}
.whatsapp::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: -1;
    border-radius: 4px;
    border: 1px dashed var(--blue);
}

a.order-now:hover,.whatsapp:hover {
    background: var(--black);
    color: var(--white);
    transition: all 0.6s linear;
}
a.order-now:hover::before,a.whatsapp:hover::before{
    border: 1px dashed var(--black);
    transition: all 0.6s linear;
}
a.live-chat:hover{
    background: var(--black);
    color: var(--white);
    transition: all 0.6s linear;
}
a.live-chat:hover::before{
    border: 1px dashed var(--black);
    transition: all 0.6s linear;
}