header{background-color: #000306;
position: unset;}
 
a{text-decoration: none;
display: block;}

/* start div services */
.services{width: 100%;
    display: flex;
    flex-direction: column;
    /* background-image: url(../img/overlay/bg-pattern1.png); */
    /* background-repeat: repeat-x;
    background-position: center; */
    position: relative;
    margin-top: 5%; 
    margin-bottom: 5%;
    padding: 5% 0%;
    }
    
    #background-img{width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    filter: contrast(121%);
    /* background-color: rgba(0, 0, 0, 0.781); */
    background-color:#193952;
    /* display: none; */
    z-index:-1;}
    
    .background-services{width: 100%;
    display:flex;
    flex-direction: column;
    padding: 0% 4%;
    }
    
    .first-services{width: 100%;
        display: flex;
        color: white;
        align-items: center;
    }
    
    .first-services-content{width: 50%;
    display: flex;
    font-family: 'montserrat';
    align-items: center;
    
    }
    
    .first-services-content h2{    font-family: 'Rubik';
        text-transform: uppercase;
        font-size: 17px;
        color: orangered;
        margin-bottom: 10px;
    letter-spacing: 1px;}
    
    .first-services-content h3{    font-size: 38px;
        line-height: 40px;
        font-family: 'Rubik';
    letter-spacing: 1px;}
    
    .first-services-content p{    font-family: 'Rubik';
        display: none;
        font-size: 15px;
    color: #a9a9a9;
    line-height: 25px;}
    
    /* start second div services */
    
    .second-services{display: flex;
    flex-wrap: wrap;
    width:100%;
    justify-content: center;
    /* align-items: center; */
    padding:2% 0px;}
    
    .second-services-copy{width: 31%;
    border: 1px solid;
    margin:1%;
    position: relative;
    display: flex;
    justify-content: center;
    /*trasition effect for background*/
    background-repeat: no-repeat;
        transition: background .5s;
        background-size: 100% 0%; 
        background-position:top;
    
    }

    .second-copybg{ 
          /* background-image: linear-gradient(to bottom right, #000 60%, #745523);  */
          background-image: linear-gradient(white, white);
        background-repeat: no-repeat;
        transition: background .5s;
        background-size: 100% 100%; 
        cursor: pointer;
        width: 100%;
    height: 100%;
    padding: 7%;
       }
    
    
    /* .overlay{  position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color:rgb(255, 68, 0);
        overflow: hidden;
        width: 100%;
        height: 100%;
        transition: .5s ease;
    z-index: -1;}
    
        .second-services-copy:hover .overlay{height: 100%;} */
    
    .second-services-copy:hover{
         background: linear-gradient(#426f86,#426f86);
        background-size: 100% 100%; 
        background-repeat: no-repeat;
    
    }

    .second-services-copy:hover .second-copybg{background-image: none;}
    
    .second-services-copy img{position: absolute;
    top: 0px;
    left: 0px;}
    
    .services-copy-content{width: 100%;
    color: white;
    background-color: transparent;
    }
    
    .services-copy-content h4 a{
        font-family:'Rubik';
        font-size: 18px;
        color: black;
        display: block;
    }


    .second-copybg:hover .services-copy-content h4 a{color: white;}
    
    .line-s{width: 90%;
    border-bottom:2px solid #2f2f2f;
    text-align: right;
    }
    
    .services-number{font-family: 'Rubik';
    padding: 3px 2px;
    text-align: right;
    background-color: #2f2f2f;}
    
    .second-services-copy:hover .line-s{border-bottom: 2px solid white;}
    
    .second-services-copy:hover .services-number{background-color:white;
    color: black;}
    
    
    .icon-services svg{    width: 62px;
        position: unset;
        margin: 15px;
        margin-left: 0px;}

        .second-copybg:hover #color-svg{fill: white;}


    
        .services-copy-content p a{font-family:'Rubik';
        color: black;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* number of lines to show */
                line-clamp: 2; 
        -webkit-box-orient: vertical;}

        .second-copybg:hover .services-copy-content p a{color: white;}
    
    
    .down-head-services{width: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    }
    
    .down-head-services h5{    font-size: 18px;
        font-family: 'Rubik';
        color: white;
        letter-spacing: 1px;
        margin-top: 10px;
        font-weight: normal;}
    
    .down-head-services a{   font-size:18px;
        font-family: 'Rubik';
        color: white;
        letter-spacing: 1px;
        margin-top: 10px;
        font-weight:bold;
        margin-left: 5px;
    }
    /* end second div services */
    
    /* end div services */
    
    

    @media(max-width:900px){
            /* services start here ` */

    .first-services-content{width: 100%;}

    .first-services-content p{display: none;}

    #secp-services{display: none;}

    .second-services{flex-direction: column;}

    .second-services-copy{width: 100%;}

    .down-head-services{ flex-direction: column;}

    /* services end here ` */
    }

    @media(max-width:600px){
        
/* start services here */
.first-services-content h3{font-size: 25px;
    line-height: 35px;}
    
    /* end services here */
    }