/* imports fonts*/

@import url(./fonts.css);

html, body{
    margin: 0%;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

/* CSS Variables */ 
:root{
    --primary-color: #4458dc;
    --primary-color2: #854fee;
    --title-color: #141313;
    --text-color: #777777;  
    --border-color: #201f1f17;  
    --gradient-color: linear-gradient(90deg, #4458dc 0%, #854fee 100%);
    --shadow-color:  0px 10px 30px rgba(118, 85, 225, 0.3);
    --box-shadow: 0px 10px 30px rgba(57, 56, 61, 0.205);
   

    /* font family variables. */ 
    --roboto: 'Roboto', cursive;
} 

/* Global Variables*/
.title-text{
    font: normal bold 50px/ 72px var(--roboto);
}

.text-uppercase{
    text-transform: uppercase;
}

/* Buttons */ 

.button{
    padding: .7rem 1.8rem;
    font: normal 500 16px/20px var(--roboto);
    position: relative;
    border: 3px solid transparent;
    border-radius: 4px;
    
}

.button.primary-button{
    background: var(--gradient-color);
    background-clip: padding-box;
    margin-left: 22%;
    color: whitesmoke;
    transition: background .6s ease;
    box-shadow: var(--box-shadow);
    
}

.button.primary-button:hover{
    background: whitesmoke;
    background-clip: padding-box;
    color: black;
}

.button.primary-button::after, .button.secondary-button::after{
    position: absolute;
    top: -2px; left: -2px;
    bottom: -2px;  right: -2px;
    background: var(--gradient-color);
    content: ' ';
    z-index: -1;
    border-radius: 4px;
}

.button.secondary-button{
    background: white;
    margin-left: 5%;
    background-clip: padding-box;
    transition: background .6s ease;
}

.button.secondary-button:hover{
    background: var(--gradient-color);
    color: whitesmoke;
    box-shadow: var(--box-shadow);
}

p.para{
    color: var(--text-color);
    font: normal 500 16px/ 25px var(--roboto);
}

.font-roboto{
    font-family: var(--roboto);
}

button:focus,
button:active
button:hover
.btn:active,
.btn.active{
    outline: 0px !important;
    box-shadow: none !important;
}

.title-h1{
    font: normal bold 39px/ 40px var(--roboto);
}


.navbar-fixed{
    position: fixed;
    width: 100%;
    top: -1px;
    left: 0; right: 0;
    background: #ffffff;
    box-shadow: var(--box-shadow);
    z-index: 999;
    transition: background 1s ease;
}




/* start navigation */
.header-menu .main-menu .navbar .navbar-brand{
    padding: 0 10rem 0 1rem;
}

.header-menu .main-menu .navbar{
    padding: 1rem 10rem;
}
.header-menu .main-menu .nav-item .nav-link{
    font: normal 700 15px/2px var(--roboto);
    text-transform: uppercase;
    padding: 1.7rem;
    color:var(--title-color);
}
.header-menu .main-menu .navbar-nav .active a{
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.header-menu .main-menu .navbar-nav a:hover{
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* end navigation */

/*main*/

/* section-1 */
.site-main .site-banner{
    background: url(../img/banner/banner-image.png) no-repeat;
    background-position: 0% 10% ;
}

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

.site-main .site-banner .site-title h3{
    padding-top: 20%;
    font-weight: 500;
    margin-left: 20%;
}

.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{
    font-size: 5rem;
    margin-left: 20%;
}

.site-main .site-banner .site-title h4{
    font-size: 1.5rem;
    margin-left: 20%;
}

.site-main .site-banner .banner-img > img{
    padding: 2rem ;
    width: 90rem;
}

/* end section-1 */

/* section-2 */

.site-main .about-area{
    padding: 5rem 5rem;
}
.site-main .about-area .about-title h2 > span{
    display: block;
    font: normal bold 49px/60px var(--roboto);
    letter-spacing: 21px;
    margin-left: 15%;
}
.site-main .about-area .about-title .paragraph > p{
    padding: .4rem 0 ;
    margin-left: 20%;
}
.site-main .about-area .about-title .button{
    margin: 20%;
}


/* end section-2 */

/* section-3 */
.site-main .brand-area{
    padding: 1rem;
    margin-bottom: 2rem;
}
.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 0rem;
    width: 200px;
    height: 100px;
    text-transform: .4s ease;
}
.site-main .brand-area .first-row .col-lg-4 > .single-brand > img{
    width: 60%;
}
.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 .experience-area{
    padding-left: 1rem;
}
.site-main .brand-area .experience-area span{
    display: block;
}
.site-main .brand-area .experience-area .years-area{
    background: url(../img/client-info-bg.png) no-repeat 45px 20px;
    padding: 2rem 0;
    width: 40rem;
    height: 18rem;
    padding-left: 8rem;
    position: relative;
}
.site-main .brand-area .experience-area  .bg-panel{
    position: absolute;
    left:-190px; top:0%;
    background: #e020200a;
    width: 400px;
    height: 400px;
    margin-left: 340px;
    z-index: -1;
}
.site-main .brand-area .experience-area .years-area .years{
    font: normal bold 84px/40px var(--roboto);
    color: var(--primary-color2);
    z-index: 2;
   
}
.site-main .brand-area .experience-area .years-area .h2 > span{
    font: normal 600 22px/32px var(--roboto);
}
.site-main .brand-area .experience-area .call-area{
    padding-left: 10rem;
}

/* end section-3 */

/* section-4 */

.site-main .service-area {
    padding: 7rem 2rem;
   
}
.site-main .service-area .services-title{
    padding: 0 14rem;
}
.site-main .service-area .services-title h1{
    font-size: 35px;
    margin-top: 10%;
}
.site-main > .service-area .services{
    background-color: rgba(248, 252, 253, 0.973);
    padding: 2rem 0;
    width: 16rem;
    margin: 5rem .5rem;
    transition: .7s ease;
}
.site-main > .service-area .services:hover{
    box-shadow: var(--box-shadow);
}

/* end section-4 */

/*section-5*/

.site-main .project-area{
    padding: 4rem 4rem;
}
.site-main .project-area .button-group button{
    background: transparent;
    border: none;
    font: normal 600 16px/130px var(--roboto);
    text-transform: uppercase;
}
.site-main .project-area .button-group button + button{
    padding-left: 3rem;
}
.site-main .project-area .grid .our-project > .title h4{
    font: normal 700 25px/12px var(--roboto);
}
.site-main .project-area .grid .our-project .img a:hover img{
    filter: brightness(1.1) drop-shadow(1px 8px 30px #b1afaf);
}

/*end section-5*/

/* section-6 */

.site-main .about-area .about-title p{
    padding:  1rem 7rem;
}
.site-main .about-area .client{
    background: #ffffff10;
    box-shadow: var(--box-shadow);
    margin: 3rem 0rem;
}
.site-main .about-area .client-img{
    padding: 2rem;
}
.site-main .about-area .about-client{
    padding: 2rem;
}
.site-main .about-area .client .about-client h4{
    font: normal 500 21px/20px var(--roboto);
}
.site-main .about-area .client .about-client p{
    font-size: 14px ;
}
.site-main .about-area .owl-carousel .owl-item{
    display: flex;
    justify-content: center;
    padding: 0 1.5rem;
}
.site-main .about-area .owl-carousel .owl-dot.active span{
    background-color: var(--primary-color);
    width: 12px;
    height: 12px;
}



/* end section-6 */

/* section-7 */

.site-main .subscribe-us-area{

    padding-left: 6rem;

}
.site-main .subscribe-us-area .subscribe{
    background: url(../img/subscribe-bg.png) no-repeat;
    padding: 10rem 0;
    margin: 3rem auto;
}

.site-main .subscribe-us-area .subscribe .subscribe-title h4{
    font: normal 700 30px/ 30px var(--roboto);
    color: whitesmoke;
}

.site-main .subscribe-us-area .subscribe .subscribe-title p{
    color: whitesmoke;
    padding: 1rem 4rem;
}

.site-main .subscribe-us-area .subscribe form .input-textbox input{
    width: 400px;
    padding: 1.5rem 1rem;
    border: 1px solid whitesmoke;
    background: transparent;
    color: white;
    font: normal 500 17px/20px var(--roboto);
}

.site-main .subscribe-us-area .subscribe form .input-textbox input::placeholder{
    color: whitesmoke;
}

.site-main .subscribe-us-area .subscribe form .btn-submit button{
    background: whitesmoke;
    color: #000;
    padding: .7rem 2rem;
}

/* end section-7 */


/*end main*/

/*footer*/

footer.footer-area{
    padding: 5rem 0;
    background: url(/img/footer-bg.png) no-repeat;
}
footer.footer-area .social h5{
    font: normal 500 23px/30px var(--roboto);
}
footer.footer-area .social a > i{
    font-size: 22px;
    padding: 2rem;
    color: var(--border-color);
}
footer.footer-area .social a:hover > i{
    color: var(--primary-color);
}

/*end footer*/

/* media query */

@media only screen and (max-width: 340px){
    .header_area .main-menu .navbar,
    .header_area .main-menu .navbar .navbar-brand,
    .site-main .subscribe-us-area .subscribe .subscribe-title,
    .site-main .subscribe-us-area .subscribe .subscribe-title p, h4,
    .site-main .services-area
    {
        padding: 2%;
        margin: 0%;
    }

    .header-menu .main-menu .navbar .navbar-brand{
        padding: 0 1rem;
    }

    .button.secondary-button{
        background: white;
        margin-left: 22%;
        margin-top: 5%;
        background-clip: padding-box;
        transition: background .6s ease;
    }

    .site-main .about-area .about-img{
        display:none
       
    }

    .site-main .about-area .about-title h2 >span{
        display: block;
        font: normal bold 40px/50px var(--roboto);
        letter-spacing: 15px;
        margin-left: .1%;
        justify-content: start;
    }

    .site-main .service-area .services-title{
        padding: 1rem ;
       
    }
    .site-main .project-area{
        padding: 0rem 0rem;
    }
    .site-main .project-area .button-group button{
        background: transparent;
        border: none;
        font: normal  6px/130px var(--roboto);
        padding-left: 5rem;
        
    }
    .site-main .project-area .button-group button + button{
        padding-left: 5rem;
    }
    .site-main .project-area .grid .our-project > .title h4{
        font: normal 700 20px/12px var(--roboto);
    }
    .site-main .project-area .grid .our-project .img a:hover img{
        filter: brightness(1.1) drop-shadow(1px 8px 30px #b1afaf);
    }
    .site-main .service-area .services-list{
        padding: 1rem 1rem ;
       
       
    }
    .site-main .site-banner .site-title h1{
        font-size: 41px;
    }
    .site-main .subscribe-us-area .subscribe form .input-textbox input{
        width: 10rem    !important;
    }

    .site-main > .service-area .services{
        width: 10rem;
    }


   


}

@media only screen and (max-width: 792px){

    .header-menu .main-menu .navbar{
        padding: 1rem 2rem
    }

    .site-main .about-area .about-title h2 > span{
        font-size: 31px;
        letter-spacing: 10px;
    }
    .site-main .about-area{
        padding: 2rem 2rem;
    }

    .site-main .brand-area .experience-area .years-area{
        padding-left: 1%;
        width: 49%;
        margin-left: 10%;

    }

    .site-main .brand-area .experience-area .bg-panel{
        margin-left: 40%;
        width: 80%;   
    }

    .site-main .brand-area .experience-area .call-area{
        padding-left: 3%;
        margin-left: 10%;
    }

    .site-main .service-area .services-title{
        padding: 0 5rem;
    }

    .site-main .project-area{
        padding: 1rem 1rem;
    }

    .site-main .project-area .button-group button{
        font: normal 500 18px/40px var(--roboto);
    }

    .site-main .about-area .about-title p{
        padding: 0%;
    }

    .site-main .subscribe-us-area .subscribe form .input-textbox input{
        width: 20rem;
        margin: 5%;
    }
    .site-main .subscribe-us-area{

        padding-left: 1rem;
    
    }

}


@media only screen and (max-width: 1910px){
    .header_area .main-menu .navbar{
        padding: 1rem;
    }

    .container{
        max-width: 90%;
    }

    .site-main .brand-area,
    .site-main .services-area .services-title{
        padding: 3% 12%;
    }

 
   


}



/* end media query */