:root{
    --black: #000000;
    --white: #ffffff;
    --red: #ed1c24;
    --gray: #1d1d1d;
}
.red{
    color: var(--red);
}
.light-gray{
    color:#b7b7b7 ;
}

@font-face{
    font-family: inter;
    src: url("../assits/fonts/inter/Inter-VariableFont_opsz\,wght.ttf");
}
@font-face {
    font-family: apercu;
    src: url("../assits/fonts/apercu/apercu_regular_pro.otf");
}
@font-face {
    font-family: futurak;
    src: url("../assits/fonts/futurak/futurak.ttf");
}
@font-face {
    font-family: new-roman;
    src: url("../assits/fonts/new-roman/times.ttf");
}
@font-face {
    font-family: futurakblackbt;
    src: url(../assits/fonts/futurak/);
}

body{
    font-family: inter;
}


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

nav > a{
    font-size: 1.5rem;

}
nav > button{
    font-size: 1.5rem;
}

.franchise-btn{
    border: 1px solid var(--white);
    background-color: transparent;
    color: var(--white);
    padding: 15px 20px;
    border-radius:30px;
}
.order-btn{
    border:0px;
    background-color: var(--red);
    color: var(--white);
    padding: 15px 20px;
    border-radius: 30px;
}

.arrow-item{
    font-size: 1.8rem;
    background-color: var(--white);
    color: var(--red);
    padding: 3px 5px;
    border-radius: 20px;
    margin:10px;
}

/* navbar ended */

/* carousel started */
.carousel{
    width: 100%;
}
/* carousel ended */

/* our-brand started */
.our-brands{
    padding: 10px 0px 140px;
}
.our-brands > .main-head{
    font-size:4rem;
    font-weight: lighter;
    margin:50px 0px 0px;
}

.apercu{
    font-family: apercu;
}
.futurak{
    font-family: futurak;
}
.new-roman{
    font-family: new-roman;
}
.our-brands > .para{
    font-size: 1.2rem;
    color: #ffffffB3;
    margin: 8px;
}
.brand-image{
    background-color: var(--white);
    border-radius: 10px;
    padding: 10px;
}
.brand-online-btn{
    background-color: transparent;
    border: 0.5px solid #5b5959;
    border-radius: 30px;
    padding: 15px 10px;
    color: var(--white);
    font-size: 1.5rem;
   width: 60%;
   margin: auto;
   
}
/* our-brand ended */

/* r-franchises starded */
/* box 1.1 started */
.r-franchises-head{
    background-color: #0f0f0f;
    padding: 70px 0px 50px;
}
.main-head1{
    font-size: 5rem;
}

 .r-para{
    font-size:1.4rem;
    color: #ffffffB3;
    margin: 5px;
}

.city{
    text-transform: uppercase;
    letter-spacing: 6px ;
    font-size: 1.5rem;
    margin: 30px 0px 5px;
}

.box1-head{
    font-size: 2.5rem;
    font-family: inter;
 
}
.w-lighter{
       font-weight:300;
}


.box1-para{
    font-size:1.6rem;
    color: #ffffffB3;
    margin: 20px 0px;
    line-height: 10px;
}
.box1-btn
{
    background-color: transparent;
    border: 1px solid #5b5959 ;
    border-radius: 40px;
    padding: 20px 0px;
    color: var(--white);
    font-size: 1.5rem;
    width: 45%;
    margin: 20px 10px; 
}
.box1-child{
    margin: 30px 100px 50px;
}
.box1-img
{
   margin: 30px 200px 0px 100px;
}
.r-franchises-box1{
    justify-content: space-between;
    margin: 0px 0px 30px;
}
/* box1.1 finished */
/* box1.2 started */
.box1-child2{
    margin: 0px 0px 0px -50px;
}

.r-franchises-box1-2{
    margin:0px 0px 30px;
}
/* box1.2 finished */

/* r-franchises ended */

/* box 2 started */
.box-2{
    padding: 50px 0px 0px;
    margin: 30px;
}

.div
{
    width: 600px;
    height: 550px;
    padding: 0px 15px;
}
.container{
    justify-content: space-around;
    padding: 0px 100px 0px;
   
}

/* box2 ended */
/* box 3 started */
.box-3{
     background-color: #0f0f0f;
     margin: 70px 0px ;
     padding: 0px 0px 0px;
}

.box3-btn-green{
    background-color: #28a745;
    border: 1px solid #5b5959 ;
    border-radius: 40px;
    padding: 20px 0px;
    color: var(--white);
    font-size: 1.5rem;
    width: 50%;
    margin: 20px 10px; 
    cursor: pointer;
    
}

.arrow-item-greenbtn{
    font-size: 1.8rem;
    background-color: var(--white);
    color: #28a745;
    border-radius: 40px;
     padding: 3px 5px;
    
}
.box3-btn-green:hover {
  background-color:transparent;
  border: 1px solid #28a745;
}

/* box 3 ended */

/* box 4 started */

.div-box4
{
    border-radius: 5px;
    color: black;
   
    background-color: white;
    margin:  auto;
    margin-bottom: 32px;
    padding: 25px 25px 20px ;
    height: 250px;
    width: 400px;
   
    max-height: 250px;
}

.city-box4{
    text-transform: uppercase;
    letter-spacing: 6px ;
    font-size: 1rem;
    margin: 30px 0px 5px;
}
.box4-head{
    font-family: apercu;
    font-size: 2.4rem;
    font-weight: bolder;
}
.container-box4{
    justify-content: space-around;
    padding: 0px 120px 20px;

   
}
/* box 4 ended */
/* footer started */
.footer{
    background-color: #0f0f0f;
    padding: 70px;
}
.footer-div-1{
    width: 25%;
    padding: 0px 10px 30px;
 
}
.box4-1-para1{
    margin-top: 30px;
}

.footer-div-2{
    
    width: 15%;
    padding: 0px 30px 30px;

    margin: 0px 0px 0px 20px;
    
}
.div-2-ul > li{
    line-height: 35px;
     color:#b7b7b7;
    font-weight:lighter;
   list-style: none;
}
.footer-div-3{
   
    width: 20%;
    padding: 0px 30px 30px;
   
    margin: 0px 0px 0px 20px;
}

.footer-div-4{
     
    width: 15%;
    height: auto;
    padding: 0px 30px 30px;
    margin: 0px 0px 0px 20px;
}
.div-mini-logo{
    /* padding: 10px 0px 0px 18px ; */
    margin: 0px 8px 24px ;
}
.box-4-icon{
    font-size: 1.8rem;
    background-color: var(--red);
    color: var(--white);
    padding: 5px 9px;
    border-radius: 20px;
    margin:auto ;
}
.box-4-icon-div{
    margin: 30px 0px 30px;
}
/* footer ended */

.home-last{
    margin: 20px 100px;

}
.last-2{
  
 margin-left: 1000px;
}


/* home page ended */

/* about section started */
/* about box1 started */
.about-box-1{
    padding:50px 120px 20px;
   
}
.about-box2-content{
    padding: 0px 20px 0px;
    width: 600px;
    height: 417px;
  
}
.about-box3-div{
    height: 322px;
}
.about-box-4{
    width: 660px;
    height: 421px;
}
.about-box6{
     padding: 30px 50px 30px;
     
    }
.about-box6-content{
    margin: 10px 30px ;
}


/* about box1 ended */

/* about section ended */

/* publication started */
/* box1 started */
.publication-box1 > div{
    width:42% ;
    height: 650px;

}

/* publication ended */