/*Import google fonts*/
@import url('fonts.css');

/*Import variables*/
@import url('./paritials/variables.css');

/*Global styling*/
@import url('./paritials/global.css');

/*NAV BAR CSS*/

.header_rc .main_menu .navbar .navbar-brand{
   padding: 0rem 2rem 0rem 5rem;
}



.header_rc .main_menu .navbar {
    padding: 1rem 20rem;
   
}
.header_rc .main_menu .nav-item .nav-link
{   font: normal 500 15px/2px var(--roboto);
   
    text-transform: uppercase;
    padding: 1.7rem;
    color:var(--title-color);
}

.header_rc .main_menu .navbar-nav .active  a{
 background: var(--gradient-color);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.header_rc .main_menu .navbar-nav  a:hover{
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
   }

/*Ending of header and nav*/

/* Banner Styling*/

.site-main .site-banner
{
  background: url(../images/banner/background\ -\ Copy.jpg) repeat 0% 50%;
}


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

.site-main .site-banner .site-title h3::after{
    content: "👋";
    height: 3px;
    width: 5px;
    background: none;
    display: initial;
    margin-left: 5px;
    transform: translateY(-10px);

   }

   .site-main .site-banner .site-title h1{
    font-size: 5rem;
   }
   
   .site-main .site-banner .site-title h4{
    font-size: 1.5rem;
    
   }

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


/* End of Banner Styling*/

/*Start of About area*/

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

.site-main .about-area .about-title h2> span{
   display: block;
   font : normal bold 49px/ 60px var(--roboto);
   letter-spacing: 20px;
}

.site-main .about-area .about-title .paragraph >p {
    padding: 0.4rem 0;
}





/*End of About area*/

/*Start Lang and Tools */

.site-main .lang-area{
    padding: 1rem 20rem;
    margin-bottom: 4rem;
}
 
.site-main .lang-area .first-row .col-lg-4{
 display: flex;
 justify-content: center;
}

.site-main .lang-area .first-row .col-lg-4 >.single-lang{
   border: 2px solid var(--border-color);
   text-align: center;
   padding: 1.5rem 0rem;
   margin: 0.2rem 0;
   width: 180px;
   height: 120px;
   cursor: pointer;
   transition: transform.4s ease;
}

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

.site-main .lang-area .first-row .col-lg-4 >.single-lang:hover
{
    box-shadow: var(--box-shadow);
    transform: scale(1.1);
    border: solid 1.5px black;
}

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

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

.site-main .lang-area .tool-area span{
    display: block;
}

.site-main .lang-area .tool-area .years-area{
    background: url(../images/client-info-bg.png) no-repeat 45px 20px;
    padding: 2rem 0;
    width: 40rem;
    height: 18rem;
    padding-left: 8rem;
    position: relative;
}
/*
.site-main .lang-area .tool-area .bg-panel{
    position: absolute;
    left: -190px; top: 0%;
    background: #e029290a;
    width: 400px;
    height: 400px;
    margin-left: 340px;
    z-index: -1;
    removed this from index.html
}
*/
.site-main .lang-area .tool-area .years-area .years{
   font: normal bold 84px/40px var(--roboto);
   color: var(--primary-color);
   z-index: 2;
}
 .behind{
    position: relative;
    z-index: -3;
}
.site-main .lang-area .tool-area .years-area h2>span{
 font: normal 600 22px/30px var(--roboto);
}
.site-main .lang-area .tool-area .call-area {
    padding: 2rem;

}

/*End Lang and Tools */

/*Footer */
footer.footer-area{
    padding: 5rem 0;
    background: url(../images/footer-bg.png);
}

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

}


footer.footer-area .social a>i{
    font-size: 25px;
    padding: 2rem;
    color: var(--border-color);
}

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





/*END OF FOOTER*/

/*Mouse Animations*/
.cursor{
    width: 2rem;
    height: 2rem;
    border: 2px solid black ;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    pointer-events: none;
    transition: all 0.0s ease;
    transition-property: background,transform;
    transform-origin: 100% 100%;
    z-index: -1;
    backdrop-filter: grayscale();
}

.link-grow{
    transform: scale(2);
    background-color:black;
   
}

.header_rc_about{
    cursor: none;
}


/*End of Mouse Animations*/
/*DARK  */
body.dark{
    background-color:#0d1117;
}


.checkbox{
    opacity: 0;
    position: absolute;
  
}

.checkbox:checked + .label .ball{
    transform: translateX(24px);
    transition: 0.5s;
}

.label{
    background: #111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    height: 30px;
    width: 50px;
    transform: scale(1.5);
}


.ball{
    width: 22px;
    height: 24px;
    background-color: white;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50px;
    transition: 0.3s linear;
}


.fa-moon{
    color: #f1c40f;
}

.fa-lightbulb{
    color:#f38a12;
}


.site-main .noback
{
  background: none ;
}

#btn1{
   margin-left: 20px;
  
}

.navblacktheme{
   background-color: #0d1117;
   
}

.header_rc .main_menu .nav-item .navtext{
    color:white !important;
    background-color: white !important;
}
.header_rc .main_menu .navbar-nav .act a{
   
 background: white;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
}

.header_rc .main_menu .navbar-nav .act a:hover{
    background: white;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
   }


   footer.footblue{
    padding: 5rem 0;
    background: none !important;
    color:white;
}

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

.site-main .noback .site-title h3{
   
    color: white;
}
.site-main .noback .site-title h1{
   
    color: white;
}
.site-main .noback .site-title h4{
   
    color: white;
}


.whyabout{
    color: white;
}
.whyabout p{
    color: white;
}

.site-main .lang-area .tool-area .prg{
    color: white;
}
.site-main .lang-area .tool-area .prg .years{
    color:  rgb(7, 224, 134);
}
   .site-main .lang-area .tool-area .look{
    color: white;
   
   }

   footer.footer-area .bot{
color: white;
   }

.log{
    border-radius: 60%;
    display: none;
}