:root{
        --textcolor:#ff8b08;
        --bodycolor:#02245b;
        --orangecolor:#ff8b08;
    }
    h4{ font-weight: 700;}
    img{ max-width: 100%;}
    .ptb60 { padding: 60px 0;}
    .pt75{padding-top: 75px;}
    h1{ font-weight: 700;}
    h1 strong{ color: var(--textcolor);}
    body{ font-family: 'Poppins', sans-serif; font-size: 16px; color:var(--bodycolor);}
    h2{ font-weight: 700; text-transform: uppercase;}

.pagehead{   background: #02245b;
    width: 100%;
    height: 180px;
    background-size: cover;
    text-align: center;
    color: #fff;
    justify-content: center;
    display: flex;
    align-items: center;}
    .pagehead h1{ font-size:36px;}
    .innerpage { padding: 30px 0px;}
    .innerpage h2{ font-size: 30px;}
    .innerpage h3{    font-size: 20px;
        color: var(--textcolor);}
    .header_nav a.phone{text-decoration: none; transition: 0.5s; background: var(--textcolor); color: #fff; padding: 10px 18px; 
        border-radius: 20px;}
    .header_nav a.phone:hover{background: #fff; color: var(--textcolor); border: 1px solid var(--textcolor);}
    .banner .logo {display: flex; justify-content: space-between; align-items: center;}
    .banner .logo img{width: 15%;}
    .banner .bnner-img img{ width: 100%; border-radius: 150px;}
    .banner-content h1{font-size: 55px; margin-bottom: 20px;}
    .banner-content p{ font-size: 20px;}
    .about-head h2{font-size: 45px; font-weight: 700; text-transform: uppercase; position: relative;}
   
    .about-img img{width: 100%;border-radius: 30px}
    .about-content{ padding-left: 76px;}
    .about-content ul li{margin: 20px 0; text-align: justify; list-style: none; position: relative;}
    .about-content ul li:before{position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: var(--textcolor);}
    .works h4 span{font-weight: 400; color: orange;}
    .services{ background-color: #fbede6cf; padding:29px 0px 50px 0px;}
      .services .service-card{ background: #fff; border-radius: 20px;  margin-top: 80px;
         box-shadow: #00000026 0px 5px 15px 0px; padding:35px; text-align: center; position: relative;}
    .services .service-card img{ position: absolute; top: -60px; left: 130px; width: 25%; border-radius: 100%; border: 2px solid var(--textcolor);}
    .service-card h3{position: relative; margin: 20px 0; font-size: 20px; font-weight: 600;} 

.appform{
    width: 100%;
    background: #f2f2f2;
    padding: 30px 0px;
}
textarea.wpcf7-form-control{ height: 80px;}
.appform p{ margin: 0 0 8px 0;}
.appform p span{ display: block; width: 100%;}
.wpcf7-form-control:focus{ outline: none;}
.wpcf7-form-control{     width: 100%;
    height: 45px;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 15px;}
.wpcf7-form-control.wpcf7-submit{
    background: #02245b;
    color: #fff;
    text-transform: uppercase;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 65px;
    text-decoration: none;
     
}

nav .logo li,
nav .logo a,
nav a i,
nav a span {
  color: #006A67;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  text-decoration: none;
  transition: color 0.3s ease;
}
ul {
     list-style: none;
}



    .service-card p{line-height: 30px;}
    .banner{ position: relative;}    
    .banner_head{ position: absolute; display: block;
        top: 50%; left: 0%; margin-right: 0%; transform: translate(0%, -50%); color: #fff; width: 100%;}
    .banner_head p{ font-weight:400; line-height:29px; color:#fff}
    .about-content ul li span{ font-size: 32px; padding: 10px; color: var(--textcolor);}
    .more_view a{
        border: 1px solid var(--textcolor);
        text-decoration: none;
        display: inline-block;
        padding: 6px 19px;
        color: var(--textcolor);
        border-radius: 5px;
        font-weight: 600;
        margin-top: 12px;
    }
    .more_view a:hover{ background: var(--textcolor); color: #fff;} 
.timeline-page h3{font-size: 20px;font-weight: 700;color: var(--textcolor);}
    .timeline-page { padding: 10px 0; position: relative; margin-top: 35px; }
    .timeline-page p{ font-size: 16px; line-height: 30px;}
       .profile_img  {    border-radius: 10px;
            border: 1px solid #ccc;
            padding: 9px;}
    /* .timeline-page::after { content: ""; height: 95%; left: 0; margin: auto; 
            position: absolute; right: 0; top: 0; width: 1px; background-color: #e8e8e8; } */
    .timeline-item { margin-bottom: 80px; }
    /* .timeline-page .timeline-item .date-label-left { text-align: center; margin-right: 20px; position: relative; }
    .timeline-page .timeline-item .date-label-left::after,
    .timeline-page .timeline-item .duration-right::after { border: 3px solid rgba(255, 255, 255, 0.8); 
            border-radius: 50%; content: ""; height: 20px; position: absolute; top: 20px; width: 20px; z-index: 1; }
    .timeline-page .timeline-item .date-label-left::after { right: -45px; }
    .timeline-page .timeline-item .duration-right::after { left: -45px; }
    .timeline-page .timeline-item .works-description-right {
            text-align: left; margin-left: 15px; float: left; border-radius: 0; padding: 20px 0; }
    .timeline-page .timeline-item .duration-right { text-align: center; margin-left: 20px; position: relative; }
    .timeline-page .timeline-item .works-description-left {
            text-align: right; margin-right: 15px; float: right; border-radius: 0; padding: 20px 0; } */
    .timeline-page h4, .works-description-left h4 {      font-size: 18px;
        margin-bottom: 10px;
        text-transform: uppercase;
        font-weight: 600; }
    .timeline-subtitle { line-height: 30px; color: #666; }
    .bg-custom, .btn-custom, .timeline-page .timeline-item .date-label-left::after, .timeline-page .timeline-item .duration-right::after, .back-to-top:hover {
            background-color: var(--textcolor); }
    .rounded-circle{width: 50%; height: 245px;}
._vision-approach{padding: 50px 0;}
    


    .footer{ background-color: var(--bodycolor); padding: 20px 0; color: #fff; font-size: 14px;}
    .footer .phone{ font-size: 20px;}
    .footer ul { display: flex; justify-content: flex-end; list-style: none;}
    .footer ul li{ margin: 0 15px; font-size: 25px;}
    .footer ul li:hover >a{color: #fff;}
    .footer a:hover{ color:  var(--orangecolor);}
    .footer a{color:#fff; text-decoration: none; transition: 0.5s;}
    .footer span{color: var(--orangecolor);}
    .footer .compy {display: flex; justify-content: flex-end; color: #fff;}
    
    .owl-nav{display: none;}
    .header_nav{ position: absolute; width: 100%; top: 0; z-index: 1; }

.home-demo .project-content{     background: var(--textcolor);
    padding: 16px 20px 9px;
    color: #fff;
    border-radius: 50px 0 50px 0;
    text-align: center;}
.home-demo .project-content h3{font-size:25px}
.home-demo .project-content p{font-size:14px}
.home-demo h2{margin-bottom:30px}
._our-mission , .our-approach{ line-height: 30px; margin: 35px 0; padding: 30px;}

.services figure img{     border: 1px solid #02245b;
    padding: 8px;}
    .services h3{    font-size: 22px;
    font-weight: 600;}
.reverse{ display: flex; flex-direction: row-reverse;}
.section_app{ padding: 30px 0px;}
    
    @media only screen and (max-width: 600px) {
    .banner_head { top: 60%;}    
    .header_nav {padding: 7px 0px;}
    .banner .logo img { width: 30%;}
    .header_nav .col-md-6{ width: 50%;}
    .banner_head h1{ font-size: 15px; width: 50%; margin-bottom: 12px !important;}
    .banner_head p { font-weight: 300; font-size: 9px; line-height: 0;}
    .about-head h2 { font-size: 30px; position: relative;}
    .about-head h2:before{    position: absolute; top: 39px; left: 36%;
        width: 100px; content: ''; border-bottom: 2px solid var(--textcolor);}
    .rounded-circle { width: 50%; height: 195px;}
    .timeline-page h4{ font-size: 18px; margin-top:30px}
    .timeline-page { margin-top: 0px !important;}
    .timeline-page .timeline-item .date-label-left{margin-right:0;}
    .timeline-page .timeline-item .duration-right {margin-left: 0;}
    .timeline-subtitle { line-height: 25px; text-align: justify;}
    .services { padding: 20px 0px 50px 0px;}
    .service-card h3 { margin-bottom: 30px;}
    .service-card h3:before {top: 5px;height: 30px;}
    .services .service-card { padding: 20px 10px 10px 10px;margin: 80px 10px 0 10px;}
    .home-demo h2 { font-size: 30px;}  
    .footer img { width: 20%;}
    .footer ul{margin: 10px 0; display: flex; justify-content: center;}
    .footer .created {margin-top: 0 !important; padding: 0 !important;}
    .timeline-page .timeline-item .duration-right::after{background-color: #fff;}
    .timeline-page::after{height: 0;}
    .timeline-page .timeline-item .works-description-left,
    .timeline-page .timeline-item .works-description-right{ margin: 0 15px;}
    .header_nav{ position: relative; width: 100%; top: 0; background:#111}
		.header_nav .logo{width:125px}
		.header_nav a.phone{padding: 6px 12px;}
    .services .service-card img{top: -18; left: 36%;}
		.home-demo .project-content{margin:10px 0}
		._vision-approach p{text-align:center}
		._vision-approach h2{text-align:center; margin:20px 0}
      }