form.CUS input.subject { display: none; }
.CUS input, .CUS textarea{margin: 10px;border-radius: 8px;height: 40px;width: 45%;padding-left: 1%;}
.CUS select{background-color: #ffffff;border-radius: 8px;height: 40px;margin: 10px}
@media (max-width:1200px){.CUS input, .CUS textarea{width: 95%;}}

.overlay
{
    background-size: cover;
    position:absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background:rgba(0,0,0,0.5);
    
}
.hover-opacity
{
    transition: opacity .5s;
}
.hover-opacity:hover
{
    opacity:0.8 ;

}
.lrt-effect
{
    position: relative;
}
.lrt-effect:after
{
    position: absolute;
    content:"";
    width:0%;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    background: #333;
    z-index: -1;
    transition: width 0.5s;
}
.lrt-effect:hover:after
{
    width:100%;
}
    
*
{
    box-sizing:border-box;
    scroll-behavior:smooth;
}


body
{
    font-family: 'Varela Round', sans-serif;

}
.clear
{
    clear:both;
}
h1 , h2, h3, h4, h5, h6
{
    font-family:arial;
}
button
{
    font-family:inherit ;
}
a
{
    text-decoration: none;
}
.pd-y
{
    padding: 10px 0;
}
.section-header
{
    text-align: center;
    margin-bottom: 50px;
}
.section-header .line
{
    display: block;
    height: 2px;
    width: 60px;
    margin: 5 auto 20px auto;
    background-color: #6195ff;
}

.header
{
    width: 100%;
    background: #d1d3d4;
    margin-top: -25 ;
}
.header img
{
    width: 60%;
    padding: 30px;
}

.header-content
{
    overflow: hidden;
}
.header .nav > li
{
    display: inline-block;
    text-align: right;
    
}
.header .nav li a
{
    color:#030000;
    font-size:14px;
    text-decoration: none;
    display: block;
    padding: 35px 15px;

    
}
.header .nav li a.active:after,
.header .nav li a:after
{
    content:"";
    display: block;
    height: 2px;
    margin-top: 2px;
    background-color: #6195ff;
    transition: width 0.5s;

}


.header .nav li a.active:after
{
    width: 100%;
}

.header .nav li a:after
{
    width:  0%;
}
.header .nav li a:hover::after
{
    width:100% ;
    
}

.home
{
    height: 100%;
    background-image: url();
    background-size: cover;
    position: relative;
}
.home-content
{
    position: absolute;
    width: 70%;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align:center;
    
}
.home .title
{
    color:white;
    text-transform: uppercase;
}
.home .home-desc
{
    margin:20px 0;
    color:white;
    letter-spacing: 2px;
    line-height: 1.5;
    font-size: 17px;
}
.home .btn
{
    width: 160px;
    margin:20px 0;
    padding: 15px 0;
    border-radius: 5px;
    border:0;
    cursor: pointer;
    font-size: 18px;
}
.home .btn-start
{
    margin-right: 10px;
    background-color: white;
}
.home .btn-start
{
    background-color:#6195ff;
    color:white;
}
.about
{
}
.about-content
{
    overflow: hidden;
}
.about-item
{
    width: 30%;
    float: left;
    text-align: center;
    border: 1px solid #e8e8e8;
    padding: 30px 20px;
}
.about-item:hover .about-item-title
{
    color:white
}

.about-item.mg
{
    margin:0 5%;
}
.about-item-title
{
    margin-bottom: 10px;
    transition: color 0.1s;
}
.about-item-desc
{
    line-height: 1.5;
    margin-bottom: 10px;
    color:#d1d3d4
}

.porotofolio-content
{
    overflow: hidden;
    width: 100%;

}
.portofolio-item
{
    width: 30%;
    float: left;
    margin-bottom: 30px;
    position: relative;
    padding: 15px;
}
.portofolio-item.mg
{
    margin:0 5%

}
.portofolio-item img
{
    width: 100%;
}
.num
{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 40px;
    margin:15px 0;
    color:#6195ff;
    
}

.portofolio-item .layer-content
{
    position: absolute;
    top: 0;
    left:0;
    width:100%;
    height: 100%;
    background:rgba(0,0,0,0.4);
    opacity:0;
    visibility: hidden;
    transition: opacity 0.8s;
}
    .portofolio-item:hover .layer-content
{
    opacity: 1;
    visibility: visible;
}

/*service section */

.service
{
    width: 100%;
    float: left;
}
.service-item
{
    width: 50%;
    float: left;
}
.service-item .section-header
{
    text-align:left;
}
.service-item .section-header .line
{
    margin: 5 0 40px 0;
    
}
.service-list
{
    list-style: none;
}
.service-list li
{
    margin-bottom: 10px;
}
.service-list li i
{
    border:1px solid #6195ff;
    color:#6195ff ;
    width: 30px;
    height: 30px;
    padding: 7px;
    margin: 10 10 0 0;

    
}
.service-item-img img
{
    width: 100%;
}
.service-bollets
{
    list-style: none;
    text-align: center;
}
.service-bollets li
{
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color:#6195ff ;
    margin: 10px 5px;
    border-radius: 50%;
}
.service-bollets li.active
{
    background-color:black ;
}
.contact-us
{
    width: 100%;
}
.contact-title
{
    color: white;
    background-color: #6195ff;
    margin-bottom: 30px;
}
.btn
{
    background-color: #6195ff;
    color: white;
    width: 30%;
}
.footer
{
    background-color: #d1d3d4;
    text-align: center;
    padding: 60px ;
}
.footer-links
{
    list-style: none;
    margin:20px 0;
}
.footer-links li
{
    display: inline-block;

}
.footer-links li a 
{
    display: block;
    width: 50px;
    height: 50px;
    background-color:#6195ff ;
    color:white;
    margin:0 5px;
    border-radius: 50%;
}
.footer-links li a i 
{
    line-height: 50px;
}
.footer .copyright
{
    color:#1a1617;
    font-size: 15px;
    text-transform: uppercase;
    margin: 20px 0;
    
}
.bg-light
{
    background-color: green;
    color: #808285;
    text-align: center;
    padding: 40px;
    font-size: 18px;
}
.footer-bg
{
    background-color: #d1d3d4;
    color: #000000;
}
footer li
{
    list-style: none;
}
footer a:hover
{
    color: #ffffff;
}
.h2 
{
    background-color: #000000;
    width: 100%;
}
.nav-btn
{
    color: gray;
    background-color:#6195ff;
    z-index: -2;
}
@media (max-width: 425px) 
{
    .position
    {
        position: fixed;
        top: 0;
        right: 15px;
    }
}
.btn-sm
{

    color:white;
    width: 15%;
    height: 30px;
    border-radius: 15px;
}
/*
/*about3-content3
{
    position: relative;
    background:rgba(230,231,232,0.4);
    width: 100%;
    height:90%;
    padding: 10px;
    
      
  
}
.about3-item3-title3
{
    margin: 20 30;
    
    

}
    
   

 .about3-item3-desc3
{
font-size: 17px;
color: brown;
margin: 10 25;
line-height: 25px;



}
 .about3-content3 .img3
{    
    position: absolute;
    border: 1px solid gold;
    right:10px;
    top:20px
 
}
*/