@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');
/*font-family: 'Inter', sans-serif;*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
/*  font-family: "Roboto Slab", serif;*/

@font-face {
    font-family: 'Rubber';
    src: url('../fonts/Rubber.woff2') format('woff2'),
        url('../fonts/Rubber.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



:root{
	--font1:'Inter', sans-serif;
    --font2:"Roboto Slab", serif;;
	--primary: #e95e5e;
    --lightprimary: #fae9e8; 
	--secondary:  #ee6a58;  
    --white: #FFFFFF; 
	--grey: #a3a3a4;   
	--black:  #111;  
    --textColor: rgba(255,255,255,.6);
}


*{ 
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0; 
    scroll-behavior: smooth; 
    font-size: 16px;
    line-height: 26px;
    color: var(--textColor);
    font-family: var(--font1);
}
.container{
    max-width: 1290px;
    margin: 0 auto;
}
h1,h2,h3,h4,h5,h6{
    color: var(--white);
    font-family: var(--font1); 
    font-weight: 700;
}
p{
	margin:0 0 24px;
}
img,svg{
    width: 100%;
}
.clear{
    clear: both;
}
.clear:after{
    position: relative;
    content: "";
    clear: both;
    display: table;
    width: 100%;
}

::-ms-input-placeholder {  
  color: #fff;
}
::placeholder {
  color: #fff;
}
::-webkit-placeholder {
  color: #fff;
}
 
ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
a{
    transition: .5s;
    text-decoration: none;
}
a:hover{
	text-decoration: none;
}
.darkbg{background: var(--dark);}
.blackbg{background: var(--black);}

section{
    padding: 50px 0;
    position: relative; 
}


.cmnbtn{
    line-height: 24px;
    background: var(--secondary);
    padding: 12px 25px;
    display: inline-flex;
    align-items: center;
    text-transform: capitalize;
    justify-content: center;
    border-radius: 5px;
    font-size: 16px;
    gap:6px;
    position: relative;
    overflow: hidden;
    color: var(--white);
}
.cmnbtn:before{position: absolute; content: ""; 
    left: 50%; bottom: 0; transform: translate(-50%,50%);
    background: var(--primary); transition: .7s;
    width: 0;
    height: 0; border-radius: 100%;
}
.cmnbtn:hover{color: var(--white);}
.cmnbtn:hover:before{height:calc(100% + 90px); width: calc(100% + 90px); }
.cmnbtn i{font-size: 20px;}
.cmnbtn img{width: 30px;}
.cmnbtn span,.cmnbtn i,.cmnbtn img{position: relative; z-index: 1;}


.tophd{margin: 0 0 50px;}
.tophd-center{text-align: center;}
.tophd .title1{font-size: 38px; line-height: 45px; font-weight: bold;
    margin: 0 0 10px; color: var(--white);

    text-transform: capitalize;
}
.tophd .subtitle{display: block; color: var(--primary); text-transform: capitalize;
    font-size: 16px; line-height: 19px; margin: 0 0 5px; font-weight: 600;
}
.tophd p{max-width: 70%; margin: 0;}
.tophd1{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tophd1 >div{
    width: 80%;
}

/**common**/
 

/**mobile menu**/
.menubtn{
    width: 45px;
    height: 45px;
    background: var(--primary);
    padding: 8px; 
    z-index: 124;
    margin-left: 10px;
    border-radius: 5px; 
    position: relative;
    display: none;
}
.menubtn span{
    display: inline-block;
    background: var(--white);
    width: 100%;
    height: 3px;
}

.mobilemenu{
    position: fixed;
    right: -100%;
    height: 100%;
    top: 0;
    background: rgba(0, 0, 0, .5);
    transition: .5s;
    z-index: 124;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.mobilemenu.active{
    right: 0;
}
.cross{
    position: absolute;
    width: 38px;
    height: 38px;  
    line-height: 0; 
    background: var(--white);
    color: var(--black);
    padding: 5px;
    right: 5px;
    top: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
        font-size: 25px;
}
.mobilemenu ul{
    padding: 40px 20px;
    background: var(--primary);
    width: 320px;
    list-style: none;
    margin: 0; 
}
.mobilemenu ul li:before{display: none;}
.mobilemenu ul li a{
    display: block;
    margin: 5px 20px;
    color: var(--white);
    border-radius: 25px;
    position: relative;
}
.mobilemenu li a:after{
    position: absolute;
    content: "";
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: .5s;
    left: 0;
    bottom: 0;
}
.mobilemenu li a:hover:after{
    width: 100%;
}


.mobilemenu ul.submenu1{
    padding: 0 0 0 15px;
    display: none;
}
.mobilemenu ul li.haschild1 >a{
    position: relative;
}
.mobilemenu ul li.haschild1 >a:before{
    position: absolute;
    content: "";
    right: 0;
    top: 10px;
    border-width: 2px 2px 0 0;
    border-style: solid;
    border-color: var(--white);
    padding: 3px;
    transform: rotate(135deg);
}
.mobilemenu ul li{
    margin: 0 0 10px;
}
 
@media (max-width:1300px){
    .container{max-width: 1170px;}
    .menulist{gap:20px;}
}
 


@media (max-width:991px){
    .container{
        max-width: inherit;
        padding: 0 25px;
    }
    .menulist{
        display: none;
    }
    .menubtn{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
}