/*

* fonts  : Comfortaa / Raleway / Roboto
* colors : #28a745 / #007bff 

*/

*{
    margin:0 auto;
    padding:0 auto 
}

a{
    color:white;
    text-decoration:none 
}

a:hover{
    color:white;
    text-decoration:none 
}
/*----------------------------------------------- header ----------------------------------------------------*/

.header-main{
   
    background-size: cover;
    height:665px;
    position:relative ;
    color:white
}

.header-main .carousel{
    position:absolute;
    top:0;
    left:0;
    right:0
}

.header-main .carousel-item img{
    height:665px
}

.header-main .opacity{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:black;
    opacity:0.6;
    z-index:3
    
}

.header-main .navbar{
    height: 145px;
    padding: 50px 0 48px 0;
    width:80%;
    border-bottom:solid thin #8f8d8a;
    z-index:4
    
   
}

.header-main .company-name{
    padding-right:5px
}

.header-main .company-name img{
    width:90px;
    height:90px;
    margin-top:-10px
}

.header-main .company-name span{
    font-size:30px;
    font-family:Raleway;
    margin-left:-11px;
    color:white
    
}

/*-- social meadia --*/

.header-main .navbar .social-media{
    border-left:solid thin  #8f8d8a;
    height:85px;
    padding:33px 0 0 14px
}

.header-main .navbar .social-media li{
    display:inline-block;
    margin-left:7px
}

.header-main .navbar .social-media li i{
    color:#aaa9a7
}

.header-main .navbar .social-media li .fa-facebook-f:hover{
    color:#3b5998
}

.header-main .navbar .social-media li .fa-twitter:hover{
    color:#00aced
}

.header-main .navbar .social-media li .fa-instagram:hover{
    color:#bc2a8d
}

.header-main .navbar .social-media li .fa-snapchat-ghost:hover{
    color:#fffc00
}

.header-main .navbar .social-media li .fa-linkedin:hover{
    color:#007bb6
}

.header-main .navbar .social-media li .fa-youtube:hover{
    color:#bb0000
}


/*-- menu --*/


.header-main .navbar .menu{
    padding-top:5px
}

.header-main .navbar .menu li{
    display:inline-block;
    margin-left:20px;
    font-family: Roboto ;
    text-transform:uppercase;
    color:white;
    
}

.header-main .navbar .menu  .active{
    color:#92add3
}

.header-main .navbar .menu li:hover{
     color:#92add3
}


/*-- about us --*/


.header-main .about-us{
    width:60%;
    position:absolute;
    top:180px;
    left:20%;
    text-align:center;
    font-family:roboto;
    font-size:18px;
    color:#dadad8;
     z-index:4
    
   
}

.header-main .about-us p{
    line-height:30px;
    letter-spacing:1px 
}

.header-main .about-us span{
    font-size:95px;
    font-family:Raleway;
    color:#fbb215;
    text-transform:uppercase;
    margin-bottom:10px; 
    font-weight:bold ;
    
}

.header-main .about-us .more{
    width:250px;
    height:60px;
    margin-top:50px;
    padding-top:10px;
    border-radius:40px; 
    background: linear-gradient(to right, #01c6e4 , #be37fa);
    text-align:center;
    font-family:raleway;
    font-size:25px;
   
}

.header-main .about-us .more i{
   margin-right:8px 0 0 8px
}

.header-main .about-us .more:hover{
    background:none;
        border:solid thin white
}


/*-- menu phone --*/

.fa-bars{
    display:none;
}

.menu-phone{
    position:fixed;
    top:0;
    left:-335px;
    width:335px;
    height:670px;
    background-color:white;
    z-index:30;
    
}

.menu-phone .fa-times{
    color:black;
    margin:33px 0 0 86%;
    
    cursor:pointer
  
}

.menu-phone .list{
    list-style-type:none; 
    margin:4px 0 30px -40px;
    
}

.menu-phone .list li{
    font-family: Roboto ;
    text-transform:uppercase;
    color:#585656;
    margin-bottom:10px;
    border-bottom:solid thin #aaa9a7; 
    padding:9px 0 10px 12px;

}

.menu-phone .list li:hover{
    color:#007bff
}

.menu-phone .list .active{
    color:#007bff
}


.menu-phone span{
    font-family:comfortaa;
    font-size:15px;
    color:black;
    padding-left:12px;
   
}

.menu-phone  .social-media{
   margin-top:30px
}

.menu-phone  .social-media li{
    display:inline-block;
    margin-left:2px;
    margin-bottom:5px 
    
}

.menu-phone .social-media li i{
    
    border-radius:50px ;
    border:solid thin #aaa9a7
}

.menu-phone .social-media li .fa-facebook-f{
    color:#3b5998;
    padding:10px 14px 
}

.menu-phone .social-media  li .fa-twitter{
    color:#00aced;
    padding:10px ;
}

.menu-phone .social-media  li .fa-instagram{
    color:#bc2a8d;
    padding:10px 11px;
}

.menu-phone .social-media  li .fa-snapchat-ghost{
    color:#fffc00;
    padding:10px;
}

.menu-phone .social-media  li .fa-linkedin{
    color:#007bb6;
    padding:10px 11px;
}

.menu-phone .social-media  li .fa-youtube{
    color:#bb0000;
    padding:10px 9px;
}


.menu-phone .social-media li .fa-facebook-f:hover{
    background-color: #3b5998;
    border:#3b5998;
    color:white;
    
   
}

.menu-phone .social-media  li .fa-twitter:hover{
    background-color:#00aced;
    border:#00aced;
    color:white;
    
}

.menu-phone .social-media  li .fa-instagram:hover{
    background-color:#bc2a8d;
    border:#bc2a8d;
    color:white;
}

.menu-phone .social-media  li .fa-snapchat-ghost:hover{
    background-color:#fffc00;
    border:#fffc00;
    color:white;
}

.menu-phone .social-media  li .fa-linkedin:hover{
    background-color:#007bb6;
    border:#007bb6;
    color:white;
}

.menu-phone .social-media  li .fa-youtube:hover{
    background-color:#bb0000;
    border:#bb0000;
    color:white;
}



/*-- responsive --*/

@media(max-width:1297px){
    
    .hedaer-main .navbar{
        width:100%
    }
    
    .navbar .menu  {
        display:none 
    }
    
    .navbar .social-media{
        display:none
    }
    
    .fa-bars{
        display:block;
        margin-left:55%
    }
}

@media(max-width:1024px){
    
    .header-main .about-us span{
        font-size:85px 
    }
    
    .header-main .about-us{
        top:152px
    }
}

@media(max-width:800px){
    
    .header-main .navbar{
        width:100%
    }
    
    .fa-bars{
        display:block;
        margin-left:41%;
        margin-top:-20px
    }
    
    .header-main .about-us span{
        font-size:70px 
    }
}

@media(max-width:600px){
    .header-main .about-us{
        width:90%;
        left:5%;
        top:205px
    }
    
    .fa-bars{
      
        margin-left:27%;
       
    }
    
}

@media(max-width:500px){

    .header-main .about-us span{
        font-size:55px 
    }
    .fa-bars{
        margin-left:16%;
    }
    
    .header-main .about-us{
        top:205px
    }
    
    .header-main .about-us p d{
        display:none;
    }
    
}

@media(max-width:400px){
    .header-main .navbar{
        padding: 0px 10px;
        height: 80px;
    }
    
    .header-main .company-name img{
        width:77px;
        height:77px;
        margin:-12x 0 0 -42px
    }
    
    .header-main .company-name{
        margin:10px 0 0 -10px 
    }
    
    .header-main .company-name span{
        font-size: 24px
    }
    
    .fa-bars{
        margin-top:6px;
    }
    
    .menu-phone .social-media{
        margin-left:-9px
    }
    
    .header-main .about-us span{
        font-size:48px 
    }
    
    .header-main .about-us{
        top:217px
    }
    
    .carousel-indicators{
        top:602px
    }
}

@media(max-width:350px){
    
    .header-main .company-name span{
        font-size:20px 
    }
    
    .menu-phone{
        width:277px
    }
    
    .header-main .about-us{
        top:164px
    }
    
    .header-main .about-us span{
        font-size:42px 
    }
    
    .header-main .about-us .more{
        width:204px;
        margin-top:17px
    }
    
    .menu-phone .fa-times{
        margin-top:16px
    }
    
    .menu-phone .list{
        margin:0 0 18px -51px;
       
       
    }
    
    .menu-phone .list li{
        margin:2px 0 2px 12px
    }
    
    .menu-phone .social-media{
        margin-left:-32px;
        margin-top:5px
    }
    
    .menu-phone .social-media li{
        margin-left:0
    }
}





/*----------------------------------------------- End header -------------------------------------------------*/
/*----------------------------------------------- Start services ---------------------------------------------*/


.services{
    padding:150px 0;
    background-color:white;
    z-index:35 
}

.services .col-lg-4 .dep-title{
    font-family:raleway;
    font-size:40px;
    text-transform: uppercase;
    
}

.services .col-lg-4 .dep-title span{
    font-size:30px;
     color: #8c8c8c
    
}

.services .col-lg-4 .item{
    width:100%;
    height:180px;
    margin-bottom:15px; 
    box-shadow:0 0 20px #dadad8;
  
}

.services .col-lg-4 .item i{
    color:#be37fa;
    position:absolute;
    top:30px;
    left:36px;
}

.services .col-lg-4 .item span{
    font-family:raleway;
    font-size:22px;
    display:block;
    color:black;
    margin-bottom:5px 
   
   
}

.services .col-lg-4 .item p{
    font-family:roboto;
    font-size:16px;
    text-align:left;
    padding:24px 0 0 77px;
    color: #8c8c8c

}

.services .col-lg-4 .item:hover{
    background-color:#be37fa;
    color:white
}

.services .col-lg-4 .item:hover p  {
     color:white
}

.services .col-lg-4 .item:hover i  {
     color:white
}

.services .col-lg-4 .item:hover span  {
     color:white
}


/*-- up --*/


.services .up{
    width:50px;
    height:50px;
    border-radius:50%;
    padding:8px 0 0 15px;
    background-color:#be37fa;
    box-shadow:0 0 10px #8c8c8c;
    color:white;
    position:fixed;
    left:94%;
    top:550px;
    z-index:10;
    display:none 
   
}


/*-- responsive --*/


@media(max-width:800px){
    .services .up{
        left:89%
    }
    
    .services{
        padding:50px 0
    } 
}

@media(max-width:400px){
    .services .up{
        left:85%
    }
    

}


/*----------------------------------------------- End services -----------------------------------------------*/
/*----------------------------------------------- Start why we ---------------------------------------------*/


.why-we{
    padding:50px 0;
    position:relative;
    background-image: url("../images/why.jpeg");
    background-size: cover
   
}

.why-we .opacity{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background-color:black;
    opacity:.7
}

.why-we .col-lg-7 img{
    width:100%;
    height:350px;
    margin-top:30px 
}

.why-we .col-lg-7 video{
    width:70.8%;
    position:absolute;
    top:53px;
    left:98px
    
}

.why-we .col-lg-5 .dep-title{
    font-family:raleway;
    font-size:45px;
    text-transform: uppercase;
    margin-left:41px;
    color:white
}

.why-we .col-lg-5 ul{
    list-style-type:none;
    margin-top:25px
}

.why-we .col-lg-5 ul li{
    margin-top:7px;
    color:white
}

.why-we .col-lg-5 ul li p{
    margin-top:-28px;
    margin-left:58px;
    font-family:roboto;
    font-size:18px;
    text-transform: capitalize
}

.why-we .col-lg-5 ul li .count{
    border-radius:50%;
    border:solid thin #be37fa;
    padding:13px 19px;
    margin-right:5px
}


/*-- responcive --*/


@media(max-width:1024px){
    
    .why-we .col-lg-7{
        top:26px
    }
    
    .why-we .col-lg-7 video{
        width:69.8%;
        left:85px;
        top:51px
    }
    
    .why-we .col-lg-7 img{
        height:292px
    }
    
    .why-we .col-lg-5 .dep-title{
        font-size:36px 
    }
}

@media(max-width:800px){
    
    .why-we .col-lg-7 img{
        width:80%;
        margin-left:10%
    }
    
    .why-we .col-lg-7 video{
        width:56.8%;
        left:155px
    }
    
    .why-we .col-lg-5{
        top:50px;
        left:45px;
    }
    
    .why-we{
         padding:50px 0 100px 0
    
    }
    
    .why-we .col-lg-5 ul li{
        margin-top:39px
    }
   
    
}

@media(max-width:600px){
    .why-we .col-lg-7{
        display:none; 
    }
    
     .why-we .col-lg-5{
        top:0;
        left:-49px;
    }
    
    .why-we .col-lg-5 ul li{
        margin:0 0 30px 0;
      
    }
    
    .why-we .col-lg-5 ul li p{
        font-size:20px 
    }
    
    .why-we{
         padding:50px 0 
    
    }
}

@media(max-width:500px){
    .why-we .col-lg-5{
        top:0;
        left:-40px;
    }
    
    .why-we .col-lg-5 .dep-title{
        font-size:35px 
    }
    
    .why-we .col-lg-5 ul li p{
        font-size:20px 
    }
}

@media(max-width:400px){
    .why-we .col-lg-5{
        top:0;
        left:-40px;
    }
    
    .why-we .col-lg-5 .dep-title{
        font-size:33px 
    }
    
    .why-we .col-lg-5 ul li p{
        font-size:16px 
    }
}

@media(max-width:350px){
    .why-we .col-lg-5{
        top:0;
        left:-40px;
    }
    
    .why-we .col-lg-5 .dep-title{
        font-size:28px 
    }
    
    .why-we .col-lg-5 ul li p{
        font-size:15px 
    }
}



/*----------------------------------------------- End why we -----------------------------------------------*/
/*----------------------------------------------- Start our projects ---------------------------------------*/


.our-projects{
    padding:100px 0;
    background-color:#f4f7fc ;
    
}

.our-projects .col-lg-12{
    text-align:center;
    margin-bottom: 30px;
    
}

.our-projects .col-lg-12 p{
      text-transform: capitalize
}

.our-projects .dep-title{
    text-align:center;
    font-family:raleway;
    font-size:45px;
    text-transform:uppercase;
  
    
}

.our-projects .col-lg-4{
    margin-bottom:20px 
}

.our-projects .col-lg-4 img{
    width:100%;
    height:200px;
   
}

.our-projects .col-lg-4 .overlay{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:92.5%;
    height:0;
    overflow: hidden;
    background-color:black;
    opacity:0.9;
    text-align:center; 
    transition:all .5s ease-in-out; 

    
}

.our-projects .col-lg-4 .detail{
    color:white;
    font-family:raleway;
    font-size:18px;
    text-transform: capitalize;
    position:absolute;
    top:50px;
    width:100%;
    text-align:center 
}

.our-projects .col-lg-4:hover .overlay{
    height:100%
}

.our-projects .col-lg-4 .overlay .link{
    width:120px;
    height:40px;
    border:solid thin white;
    border-radius:50px;
    margin-top:20px;
    padding:5px
}

.our-projects .col-lg-4 .overlay .link:hover{
    background-color:white;
    color:black
}

.our-projects .more-projects{
    width:135px;
    height:50px;
    border:solid thin #be37fa;
    border-radius:50px;
    background: linear-gradient(to right, #01c6e4 , #be37fa);
    padding:5px;
    color:white;
    font-family:raleway;
    font-size:18px;
    text-transform: capitalize;
    margin-left:42%;
    margin-top:20px;
    outline:none;
    cursor:pointer
    
}


/*-- responsive --*/


@media(max-width:400px){
    .our-projects .dep-title{
        font-size:43px 
    }

    
    .our-projects .more-projects{
        margin-left:28%
    }
   
}

@media(max-width:350px){
    .our-projects .dep-title{
        font-size:39px 
    }
    
    .our-projects .more-projects{
        margin-left:26%
    }
   
}






/*----------------------------------------------- End why we -----------------------------------------------*/
/*----------------------------------------------- Start team ---------------------------------------------*/


.team{
    padding:100px 0
}

.team .col-lg-5 img{
    width:70%;
    height:425px
}

.team .col-lg-7 p{
    position:relative;
    top:45px;
    font-size:20px;
    font-family:raleway 
}

.team .col-lg-7 .fa-quote-right{
    position:absolute;
    left:90%;
    top:5px;
    color:#be37fa
}

.team .col-lg-7 .fa-quote-left{
    position:absolute;
    left:-9%;
    top:285px;
    color:#be37fa
}


/*-- responsive --*/


@media(max-width:1024px){
    
    .team .col-lg-7 .fa-quote-left{
       left:-6%;
        top:330px
        
    }
    
    .team .col-lg-7 .fa-quote-right{
        left:98%;
        top:-12px
    }
}

@media(max-width:800px){
    
    .team{
        padding:100px 0 130px 0
    }
    
    .team .col-lg-5 img{
        width:100%
    }
    
    .team .col-lg-7 p{
        top:42px
    }
    
    .team .col-lg-7 .fa-quote-left{
        left:-3%;
        top:278px
        
    }
    
    .team .col-lg-7 .fa-quote-right{
        left:91%
    }
}

@media(max-width:600px){
    .team .col-lg-7 .fa-quote-left{
        left:-5%;
        top:365px
        
    }
}

@media(max-width:500px){
    .team .col-lg-7 .fa-quote-left{
        left:0;
        top:377px
        
    }
    
    .team .col-lg-7 p{
        padding-left:15px
    }
}

@media(max-width:400px){
    
    .team{
        padding-top:38px
    }
    
    .team .col-lg-7 .fa-quote-left{
       left:-2%;
       top:520px
        
    }
    
     .team .col-lg-5 img{
       height:425px
    }
    
    .team .col-lg-7 .fa-quote-right{
      left:88%
    }
}

@media(max-width:350px){

    .team .col-lg-7 .fa-quote-left{
        left:0;
        top:554px
        
    }
    
}


/*----------------------------------------------- End team -----------------------------------------------*/
/*----------------------------------------------- Start message ---------------------------------------------*/


.message{
    padding:20px 0;
    background-image:url('../images/header1.jpeg');
    background-size:cover;
    position: relative
}

.message .opacity{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-color:#9c13d8;
    opacity:0.9
}

.message .row .col-lg-12 span{
    text-align:center;
    font-family:raleway;
    font-size:45px;
    text-transform:uppercase; 
    color:white;
    display:block;
    
}

.message .row .col-lg-12 p{
    text-transform: capitalize;
    color:white;
    text-align:center;
    font-family:raleway; 
   
}

.message .row .col-lg-12{
     margin-bottom:20px 
}


/*-- input --*/


.message form .col-lg-6 input , textarea{
    width:100%;
    border:solid thin white;
    padding:10px;
    color:white;
    font-family:raleway;
    font-size:18px;
    margin-bottom:10px;
    background-color:inherit
}

.message .col-lg-6 ::placeholder{
    color:white
}

.message .col-lg-6 button{
    width:100%;
    background-color:white;
    border:solid thin white;
    color:black;
    font-family:roboto;
    font-size:20px;
    padding:10px;
    
}

.message .col-lg-6 button:hover{
    background-color: black;
    color:white;
    border:solid thin black;
}


/*-- responsive --*/


@media(max-width:400px){
    
    .message .row .col-lg-12 span{
        font-size:37px 
    }
}

@media(max-width:350px){
    
    .message .row .col-lg-12 span{
        font-size:32px 
    }
}


/*----------------------------------------------- End message -----------------------------------------------*/
/*----------------------------------------------- Start contact ---------------------------------------------*/


.contact{
    padding:70px 0 15px 0
}

.contact .col-lg-4 span{
    font-family:raleway;
    font-size:45px;
    font-weight:bold;
    text-transform:uppercase 
    
}

.contact .col-lg-4 p{
    font-family:roboto;
    font-size:20px;
    text-align:left;
    margin-bottom:10px 
}


.contact .col-lg-4 ul{
    list-style-type:none
}

.contact .col-lg-4 .info{
    font-family:roboto;
    font-size:20px;
    margin-top:52px
    
}

.contact .col-lg-4 .info li{
    margin-bottom:15px 
}

/*-- social media --*/

.contact .col-lg-4 .social-media li{
    display:inline-block;
    margin-left:5px
    
}

.contact .col-lg-4 .social-media li i{
    
    border-radius:50px ;
    border:solid thin #aaa9a7
}

.contact ul li .fa-facebook-f{
    color:#3b5998;
    padding:10px 15px 
}

.contact ul  li .fa-twitter{
    color:#00aced;
    padding:10px ;
}

.contact ul  li .fa-instagram{
    color:#bc2a8d;
    padding:10px 12px;
}

.contact ul  li .fa-snapchat-ghost{
    color:#fffc00;
    padding:10px;
}

.contact ul  li .fa-linkedin{
    color:#007bb6;
    padding:10px;
}

.contact ul  li .fa-youtube{
    color:#bb0000;
    padding:10px;
}


.contact ul li .fa-facebook-f:hover{
    background-color: #3b5998;
    border:#3b5998;
    color:white;
    
   
}

.contact ul  li .fa-twitter:hover{
    background-color:#00aced;
    border:#00aced;
    color:white;
    
}

.contact ul  li .fa-instagram:hover{
    background-color:#bc2a8d;
    border:#bc2a8d;
    color:white;
}

.contact ul  li .fa-snapchat-ghost:hover{
    background-color:#fffc00;
    border:#fffc00;
    color:white;
}

.contact ul  li .fa-linkedin:hover{
    background-color:#007bb6;
    border:#007bb6;
    color:white;
}

.contact ul  li .fa-youtube:hover{
    background-color:#bb0000;
    border:#bb0000;
    color:white;
}

/*-- logo image --*/

.contact .col-lg-4 img{
    width:100%;
    margin-top:-35px
}

/*-- copyright --*/

.copyright{
    padding-top:15px;
    text-align:center;
    font-family:raleway;
    font-size:15px;
    border-top:solid thin #aaa9a7;
    margin-top:50px
    
}


/*-- responivse --*/


@media(max-width:800px){
    
    .contact .col-sm-12{
        margin:30px 0 0 -35px
    }
    
    .contact .col-lg-4 img{
        display:none
    }
    
    .contact .col-lg-4 .info{
        margin-top:0
    }
}

@media(max-width:350px){
    
    .contact .col-lg-4 span{
        font-size:35px 
    }
    
    .contact .col-lg-4 .social-media li{
        margin-left:-1px
    }
}


/*----------------------------------------------- About page -----------------------------------------------*/


.header{
    height:400px;
    background-image:url('../images/header1.jpeg');
    background-size: cover;
   
}


.header-title{
    position:absolute;
    top:200px;
    text-align:center;
    width:100%;
    z-index:5
    
}

.header-title .active-page{
    color:white;
    font-family:raleway;
    font-size:35px;
    text-transform:uppercase 
}

.header-title .detail{
    color:white;
    font-family:roboto;
    font-size:15px;
    text-transform:uppercase;
    margin-top:20px
}

.header-title p span{
    color:#007bff
}

/*-- paragraph --*/

.para{
    padding:50px 0 
}

.para .col-lg-12 {
    font-size:18px;
    font-family:roboto;
    margin-bottom:20px 
}

.para .col-lg-12 span{
    font-size:50px;
    font-family:Raleway;
    text-transform:uppercase;
    margin-bottom:10px; 
    font-weight:bold ;
}


/*-- responsive --*/

@media(max-width:500px){
    
    .para .row{
        margin:0
    }
}

@media(max-width:400px){
    
    .para .col-lg-12 span{
        font-size:35px 
    }
}



/*----------------------------------------------- News page -----------------------------------------------*/


.news{
    padding:50px
}

.news .col-lg-8{
    margin-bottom:20px 
}

.news .col-lg-8 img{
    width:100%;
    height:400px;
    margin-bottom:20px 
}

.news .col-lg-8 p{
    font-size:20px;
    font-family:roboto;
    text-align:left
}

.news .col-lg-8 p span{
    font-size:40px;
    font-family:Raleway;
    text-transform:capitalize;
    margin-bottom:10px; 
    font-weight:bold ;
} 


/*-- more news --*/

.news .col-lg-4 .more-news{
    font-size:20px;
    font-family:raleway;
    font-weight:bold; 
    
}

.news .col-lg-4  img{
    width:100%;
    height:93px;

}

.news .col-lg-4 .col-lg-8{
    height:100px;
    overflow:hidden;
   
}

.news .col-lg-4 .row{
    margin-bottom:5px 
}


/*-- responisive --*/


@media(max-width:800px){
    
    .news .col-lg-4 .row{
        width:104%
    }
    
     .news .col-lg-4 .row img{
        height:240px
    }
    
    .news .col-lg-4 .col-lg-8{
        padding-top:12px;
        font-size:23px 
        
    }
}

@media(max-width:600px){
    
    .news .col-lg-4 .row{
        width:107%
    }
    
     .news .col-lg-4 .row img{
        height:230px
    }
    
    .news .col-lg-4 .col-lg-8{
        padding-top:12px;
        font-size:23px 
        
    }
}

@media(max-width:500px){
    
    .news .row-main{
        width:132%;
        margin-left:-16%
    }
    
     .news .col-lg-4 .row{
        width:107%
    }
    
    .news .col-lg-4 .row img{
        height:230px
    }
    
    .news .col-lg-4 .col-lg-8{
        padding-top:12px;
        font-size:20px 
        
    }
}

@media(max-width:400px){
    
    .news .row-main{
        width:158%;
        margin-left:-30%
    }
    
     .news .col-lg-4 .row{
        width:107%;
        margin-bottom:-53px 
    }
    
    .news .col-lg-4 .row img{
        height:200px
    }
    
    .news .col-lg-8{
        margin-bottom:70px 
    }
    
    .news .col-lg-4 .col-lg-8{
        padding-top:12px;
        font-size:20px 
        
    }
    
    .news .col-lg-8 img{
        height:282px
    }
    
    .news .col-lg-8 p span{
        font-size:33px 
    }
}

@media(max-width:350px){
    
    .news .row-main{
        width:174%;
        margin-left:-36%
    }
    
     .news .col-lg-4 .row{
        width:107%;
        margin-bottom:-30px 
    }
    
    .news .col-lg-8 p span{
        font-size:30px 
    }
    
    .news .col-lg-4 .col-lg-8{
        padding-top:12px;
        font-size:18px 
        
    }
    
    .news .col-lg-8 img{
        width:98%;
        height:250px
    }
}