:root {
    --black: #000000;
    --white: #ffffff;
    --dgrey: #0f0f0f;
    --grey: #a8b7b2;
    --green: #28a745;
    --red: #e61b21;
}

@font-face {
    font-family: inter;
    src: url(./assits/font/Inter/Inter-VariableFont_opsz\,wght.ttf);
}

@font-face {
    font-family: aperchu;
    src: url(./assits/./font/Inter/Apercu_Font_Family/Apercu\ Pro\ Regular.otf);
}

@font-face {
    font-family: futurak;
    src: url(./assits/font/Inter/futurak/futurak.ttf);
}

@font-face {
    font-family: Butler;
    src: url(./assits/font/Inter/Butler/Butler/Butler_Regular.otf);
}

@font-face {
    font-family: aperchu-light;
    src: url(./assits/font/Inter/Apercu_Font_Family/Apercu\ Light.otf);
}

@font-face {
    font-family: 'futrablack';
    src: url(./assits/font/Inter/FuturaBlack/FuturaBlackbtRegular/FuturaBlack\ BT\ Regular.ttf);
}

body {
    font-family: inter;
}

/* navbar start */
.main-logo {
    width: 165px;
}

.nav-items {
    font-size: 1.1rem;
    text-decoration: none;
}

.french-btn {
    padding: 15px 20px;
    background-color: transparent;
    border: 1px solid #ffffff;
    border-radius: 25px;
    color: var(--white);
}

.ord-btn {
    padding: 18px 20px;
    background-color: var(--red);
    border: 1px solid var(--red);
    border-radius: 30px;
    font-size: 15px;
}

.circule {
    border-radius: 200px;
    background-color: #ffffff;
    color: #e61b21;
    padding: 5px;
    font-size: 15px;
}

/* navbar end */

/* corusol start */
.corusol {
    width: 100%;
}

/* corusol end */
.font-2 {
    font-family: 'aperchu';
}

.text-2 {
    margin: 50px 0px 0px 0px;
    font-size: 40px !important;
    font-weight: 400px !important;
}

.font-3 {
    font-family: 'futurak';
}

.text-3 {
    font-size: 1.2em;
}

.text-p {
    margin: 16px;
    font-family: 'aperchu';
    color: #808080;
    padding: 0;
}

/* Order Start */
.container {
    /* border:2px solid white; */
    width: 100%;
    padding: 25px 0px 140px;
}

.img-bg-w {
    width: 250px;
    height: 140px;
    background: var(--white);
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
}

.btn-resturant {
    padding: 15px 45px;
    background-color: transparent;
    border: 1px solid #ffffff;
    border-radius: 35px;
    color: var(--white);
}

/* Orders end */
/* Frenchise Start */
.font-4 {
    font-family: 'Butler';
}

.french-text {
    padding: 10px 10px 10px;
    font-size: 1.5rem;
    margin: 0px 0px 30px;
}

.text-p2 {
    font-size: 1rem;
    color: var(--grey);
}

/* Saltnpeper Islamabad Start */
.thin-t {
    font-family: 'apercu';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.48em;
    text-transform: uppercase;
    color: #ED1C24;
    margin-bottom: 8px;
    display: block;
}

.font-5 {
    font-family: aperchu-light;
}

.text-add {
    color: var(--grey);
    margin: 0px 0px 12px;
}

.direction-btn {
    padding: 15px 20px;
    background-color: transparent;
    border: 1px solid #ffffff;
    border-radius: 25px;
    color: var(--white);
    margin: 20px 0px 0px;
}

.section-add {
    padding: 80px;
}

.islamabad-sec {
    /* border: 2px solid white; */
    justify-content: flex-end;
    justify-content: space-between;
    padding: 20px 10px 20px;
}

.islamabad-text {
    /* border: 2px solid white; */
}

.islamabad-img {
    /* border: 2px solid white; */
    width: 100%;
}

.faislabad-sec {
    /* border: 2px solid white; */
    justify-content: space-between;
    justify-content: flex-start;
    padding: 20px 10px 20px;
}

.faislabad-img {
    /* border: 2px solid white; */
}

.faislabad-text {
    /* border: 2px solid white; */
    margin-left: 40px;
}

/* Frenchise End */

/* Express Start */
.small {
    font-family: 'apercu';
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 20px;
    letter-spacing: 0.58em;
    text-transform: uppercase;
    color: #ED1C24;
    /* padding: 10px; */
    margin: 24px 0px 8px;
    display: block;
    /* text-align: center; */
}

.head-spe {
    /* padding: 0px 0px 18px; */
    font-size: 1.5em;

}

.loc-spe {
    margin: 0px 0px 12px;
}

.ph-spe {
    margin: 0px 0px 12px;
}

.dir-spe {
    margin: 20px 0px 0px;
}

.flex-direction {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.div-size {
    /* border: 2px solid white; */
    width: 380px;
    height: 540px;
    padding: 0px 12px;
    /* margin: 0px 0px 32px; */
    text-align: center;
}

.container {
    justify-content: space-evenly;
    padding: 0px 50px 38px;
}

/* Express End */
.gujrawalan-text-vel {
    /* border: 2px solid white; */
    justify-content: space-between;
    justify-content: flex-start;
    padding: 12px 15px;
    margin: 50px 0px;
}

.direction-btn-2 {
    padding: 15px 20px;
    background-color: var(--green);
    border: 1px solid var(--green);
    border-radius: 25px;
    color: var(--green);
    margin: 20px 0px 0px;
}

.circule-2 {
    border-radius: 200px;
    background-color: #ffffff;
    color: var(--green);
    padding: 5px;
    font-size: 15px;

}

/* .btn-red:hover{
   color: white;
    background-color: var(--white);
} */
.opening-soon-logo {}

.opening-soon-img {
    width: 100%;

}

.small {
    font-family: 'apercu';
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 20px;
    letter-spacing: 0.58em;
    text-transform: uppercase;
    color: #ED1C24;
    /* padding: 10px; */
    margin: 20px 0px 8px;
    display: block;
    /* text-align: center; */
}

/* opening soon cards start */
.opening-cards {
    border: 2px solid white;
    background-color: white;
    width: 350px;
    height: 240px;
    padding: 25px 24px;
    margin: 0px 0px 32px;
    text-align: center;
}

/* for all saltnpeper heading */
.text-size-heading {
    font-size: 2.3em;
    /* margin: 0px 0px 16px ; */
}

.small-head {
    font-size: 0.5em;
}

.font-6 {
    color: #000000;
    font-family: 'futrablack';
    font-size: 21px;
    text-spacing-trim: none;
}

/* Opening soon cards end */
/* footer-1 */
.footer-dad {
    dispaly: flex;
    justify-content: space-evenly;
}

.div-size-footer-1 {
    /* border: 2px solid white; */
    width: 360px;
    height: 425px;
    padding: 0px 12px;
    /* margin: 0px 0px 32px; */
    text-decoration: none;

}

.footer-p {
    color: var(--grey);
    padding: 24px 0px 24px;
}

.footer-p-link {
    text-decoration: none;
    color: var(--grey);
    padding: 0px 0px 16px;
    display: block;
}

/* footer-2 */
.div-size-footer-2 {
    /* border: 2px solid white; */
    width: 200px;
    height: 425px;
    padding: 0px 12px;
    /* margin: 0px 0px 32px; */
    /* text-decoration: none; */

}

/* footer-3 */
.div-size-footer-3 {
    /* border: 2px solid white; */
    width: 250px;
    height: 425px;
    padding: 0px 12px;
    /* margin: 0px 0px 32px; */
    text-decoration: none;
}

.footer-para-3 {
    font-size: 16px;
}

.footer-p3 {
    color: var(--grey);
    padding: 0px 0px 16px;
    font-size: 15px;
}

/* footer-4 */
.div-size-footer-4 {
    /* border: 2px solid white; */
    width: 200px;
    height: 425px;
    padding: 0px 12px;
    /* margin: 0px 0px 32px; */
    text-decoration: none;
}

.div-mini-logo {
    /* padding: 10px 0px 0px 18px ; */
    margin: 0px 8px 24px;
}

.mini-logo-footer {

    border-radius: 14px;
    color: red;
    font-size: 25px;
    background-color: black;
}

/* Introduction About Us */
.intro-container {
    padding: 42px 50px 20px;
}

.div-itro {
    width: 100%;
    /* border: 2px solid white; */
    text-align: center;
    height: 200px;
}

h1 {
    text-align: center;
    font-family: 'butler';
    font-size: 40px;
    margin: 0px 0px 40px;
}

.p-intro {
    text-align: center;
    font-family: 'apercu';
    color: var(--grey);
    font-size: 14px;
    margin: 0px 0px 15px;
}

h2 {
    font-size: 32px;
    margin: 0px 0px 10px;
    /* padding: 0px 10px 0px ; */
    font-family: 'butler';
    text-align: center;
}

.restaurant-text-1 {
    width: 570px;
    height: 417px;
    padding: 0px 20px 0px;

}

.restaurant-text-2 {
    width: 570px;
    height: 417px;
    padding: 0px 25px 0px;
}

.restaurant-text-3 {
    width: 570px;
    height: 322px;
    padding: 0px 25px 0px;
}

.salt-express-head {
    height: 240px;
    width: 100%;
}

.salt-express-text {
    font-size: 16px;
    color: var(--grey);
    margin: 0px 12px px;
    width: 570px;
    height: 330px;
}

/* Publication page Started */
.publication-img {
    padding: 32px 0px 40px;
    margin: 0px 0px 32px;
    border: 1px solid #ffffff;
}

.p-img-div {
    padding: 80px 0px 80px;
}

.publication-head {
    font-size: 32px;
    margin: 32px 0px 24px;
}

.p-span {
    font-family: 'inter';
    font-size: 16px;
    margin: 32px;
}

.footer {
    padding: 72px 16px 0px;
}

.div-div {
    width: 100%;
    /* border: 2px solid white; */
    padding: 40px 12px 50px;
    margin: 0px 60px 0px;
}

.div-label-input {
    width: 550px;
    height: 80px;

}

.label {
    font-size: 16px;
}

input:invalid {
    border: 2px solid #e74c3c;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23e74c3c" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2a10 10 0 1010 10A10.011 10.011 0 0012 2zm.75 15h-1.5v-1.5h1.5zm0-3h-1.5V7h1.5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
}

.input-p {
    padding: 6px 36px 6px 12px;
    width: 547px;
    height: 44px;
    border-radius: 5px;
}

.btn-yellow {
    text-decoration: none;
    padding: 14px 60px;
    background-color: #ffc107;
    border: 1px solid #ffc107;
    border-radius: 30px;

}

.btn-yellowa {
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    padding: 0px 15px;
    text-transform: uppercase;
}