/*import fonts from fonts.css file*/
@import url(./fonts.css);

/*css variables*/
@import url(./partials/_variables.css);

/*global styling*/
@import url(./partials/_global.css);


/* start navigation*/

.site-main{
    background: rgb(96,103,151);
    background: linear-gradient(90deg, rgba(96,103,151,1) 0%, rgba(127,63,183,1) 17%, rgba(14,13,8,1) 37%, rgba(0,0,0,1) 93%, rgba(76,91,91,1) 100%);

}
.header_area .main-menu{
    background-color: blueviolet;
}
.header_area .main-menu .navbar .navbar-brand{
    padding: 0 2rem 0 5rem;
}

.header_area .main-menu .navbar{
    padding: 1rem 20rem ;
}
.header_area .main-menu .nav-item .nav-link{
    font:normal 500 15px/2px var(--roboto);
    font-family:var(--roboto);
    text-transform:uppercase;
    font-weight:500;
    padding: 1.7rem;
    color:white;
}

/* .header_area .main-menu .navbar-nav .active a{
    background:var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

} */

.header_area .main-menu .navbar-nav a:hover{
    background:var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color:black;
    background-clip: text;

}

/*end navigation*/

/*banner area*/


/* Banner Area */ 

.site-main .site-banner {
    background: url(../img/banner/home-banner.png) no-repeat 0% 50%;
}

.site-main .site-banner .site-title h3{
    padding-top: 35%;
    font-weight: 500;
    color: white;
}

.site-main .site-banner .site-title h3::after{
    content: " ";
    height: 2px;
    width: 18vw;
    background: black;
    display: inline-block;
    margin-left: 5%;
    transform: translateY(-10px);
    
}

.site-main .site-banner .site-title h1{
    color: white;
    font-size: 5rem;
}

.site-main .site-banner .site-title h4{
    font-size: 1.5rem;
    color: white;
}

.site-main .site-banner .banner-image > img{
    padding: 7rem 0;
    width: 90rem;
}

/* ---banner end== */

/*about aeea*/
.site-main .about-area{
    padding: 8rem 5rem;
}

.site-main .about-area .about-title h2>span{
    color: white;
    display: block;
    font:normal Bold 49px/60px ;
    

}
.site-main .about-area .about-title .paragraph>p
{
    color: white;
    padding: .4rem 0;
    font:bold;
}



/*===end about area=*/


/* Start Brand Area */ 

.site-main .brand-area{
    padding: 1rem 20rem;
    margin-bottom: 4rem;
}

.site-main .brand-area  h1{
    color: white;
    display: block;
    font:normal Bold 49px/60px ;
    letter-spacing: 10px;

}
.site-main .brand-area .first-row .col-lg-4{
    display: flex;
    justify-content: center;
}

.site-main .brand-area .first-row .col-lg-4 > .single-brand{
    border: 1px solid var(--border-color);
    text-align: center;
    padding: 1.8rem 0rem;
    margin: .9rem 0;
    width: 180px;
    height: 100px;
    cursor: pointer;
    transition: transform .4s ease;
}

.site-main .brand-area .first-row .col-lg-4 > .single-brand > img{
    width: 50%;
}

.site-main .brand-area .first-row .col-lg-4 > .single-brand:hover{
    box-shadow: var(--box-shadow);
    transform: scale(1.1);
}

.site-main .brand-area .first-row .col-lg-4 > .single-brand:hover > img{
    filter: brightness(0.15);
}


.site-main.brand-area{
    padding: auto;
    padding-bottom: 7 150rem;
}
.site-main .brand-area .img
{
     align-items: right: ;
}
.poster{
    height: 360px;
    width:550px;
    
}

/* End Brand Area */ 


/* Services Area */ 

.site-main .services-area{
    padding: 7rem 2rem;
}

.site-main .services-area .services-title{
    padding: 0 14rem;
}
.site-main .services-area .services-title h1{
    color: white;
    display: block;
    font:normal Bold 49px/60px ;
    letter-spacing: 10px;

}

.site-main .services-area .services-title h1{
    font-size: 35px;
}

.site-main > .services-area .services{
    background: rgba(248, 252, 253, 0.973);
    padding: 2rem 0;
    width: 16rem;
    margin: 5rem .5rem;
    transition: box-shadow .7s ease;
}

.site-main > .services-area .services:hover{
    box-shadow: var(--box-shadow);
}



/* End Services Area */ 

/*--courosel*/



/* =============footer*/


footer.footer-area{
    background:blueviolet;
}

/* footer.footer-area .social h5{
    font: normal 500 23px/ 30px var(--roboto);
} */

footer.footer-area .social a > i{
    font-size:22px;
    padding: 2rem;
    color: white;
}

footer.footer-area .social a:hover > i{
    color: black;
}