*{
    font-family:'Raleway', sans-serif;
    box-sizing: border-box;
    margin: 0;
}

.thankyou{
 height: 500px;
 width: 90%;
 margin: 80px;
 text-align: center;
}

.thankyou h1{
 margin: 80px;
 text-align: center;
}

h1, h2, h3, h4, h5, h6{
 font-family: "Raleway", sans-serif;
}

nav {
 padding-bottom: none;
 background:#fff;
 box-sizing: border-box;
 font-size: 17px;
}

nav ul li img{
 width: 20px;
 height: 25px;
}

 a{
 color: #fff;
 text-decoration: none;
}

.menu a{
 color:#0080FF;
}

.menu a, a:hover{
 text-decoration: none;
}

.menu{
 list-style-type: none;
 padding-top: 5px;
}

.logo{
 margin: -5px;
 height: 32px;
}

.logo img{
 width: 100px;
 height: 32px;
 border-radius: 7px;
}

.logo a p{
 margin: 0;
 margin-bottom: 5px;
 font-size:11px;
 color: black;
 font-weight: bold;
}

.item {
 padding: 8px;
 font-size:15px; 
 margin: none; 
 height:25px;
}

.inneritem2 a:hover{  
color: #0080FF;
}

.inneritem2{
 padding-left: 25px;
 padding-right: 10%;
}

.inneritem1 img{
 height: 17px;
}

.menu .inneritem1{
 font-family: Arial; 
 padding-top: 5px;
 padding-left: 25px;
 color: #0080FF;
}

.inneritem2 img{
 height: 17px;
}

.item { 
  padding: 8px; 
  font-size:15px; 
  margin: none; 
  height:25px;
}

#flag{
 padding: 2px;
 margin-top: 4px;
}

.item:not(.button) a:hover,.item a:hover::after {
 color:#0080FF;
 text-decoration: none;
 font-size: 15px;
 font-weight: bolder;
}

.item img{
 margin-right: 2px;
 margin-top: 2px;
 display: inline;
}

/* Mobile menu */
@media all and (min-width:351px) {
    .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    }

    .menu li a {
    display: block;
    padding: 2px 2px;
    }

    .menu li.subitem a {
    padding: 15px;
    }

    .toggle {
    order: 1;
    font-size: 20px;
    }

    .item.button {
    order: 2;
    }

    .inneritem2{
    padding-top: 7px;
    font-family: 'Raleway';
    font-weight: bold;
    }

    .inneritem2 img{
    height: 17px;
    }

    .inneritem1{
    padding-right: 6px;
    margin-top: 6px;
    color: #0080FF;
    font-weight: bold;
    font-family: arial;
    }

    .inneritem1 img{
    height: 17px;
    }

    .item {
    order: 3;
    width: 100%;
    text-align: center;
    display: none;
    }

    .active .item {
    display: block;
    }

    .button.secondary {
    /* divider between buttons and menu links */
    border-bottom: 1px #444 solid;
    }

    /* Submenu up from mobile screens */
    .submenu {
    display: none;
    }

    .submenu-active .submenu {
    display: block;
    }

    .has-submenu i {
    font-size: 12px;
    }

    .has-submenu > a::after {
    font-size: 12px;
    line-height: 5px;
    font-weight: 900;
    content: "\f078";
    color: #fff;
    padding-left: 5px;
    }

    .subitem a {
    padding: 10px 15px;
    }

    .submenu-active {
    background-color: #111;
    border-radius: 3px;
    }
}

/* Tablet menu */
@media all and (min-width: 700px) {
    .menu {
      justify-content: center;
    }

    .logo {
      flex: 1;
    }

    .item.button {
      width: auto;
      order: 1;
      display: block;
    }

    .toggle {
      flex: 1;
      text-align: right;
      order: 2;
    }

    /* Button up from tablet screen */
    .menu li.button a {
      padding: 10px 15px;
      margin: 5px 0; 
    }

    .button a {
      background: #0080FF;
      border: 1px #0080FF solid;
    }

    .button.secondary {
      border: 0;
    }

    .button.secondary a {
      background: transparent;
      border: 1px #0080FF solid;
    }

    .button a:hover {
      text-decoration: none;
    }

    .button:not(.secondary) a:hover {
      background: #0080FF;
      border-color: #0080FF; 
    }
}

/* Desktop menu */
@media all and (min-width: 960px) {
    .menu {
      align-items: flex-start;
      flex-wrap: nowrap;
      background: none;
    }

    .logo {
      order: 0;
    }

    .item {
      order: 1;
      position: relative;
      display: block;
      width: auto;
    }

    .button {
      order: 2; 
    }

    .submenu-active .submenu {
      display: block;
      position: absolute;
      left: 0;
      top: 68px;
      background: #111; 
    }

    .toggle {
      display: none; 
    }

    .submenu-active {
      border-radius: 0; 
    }
}

nav button{
 background-color: #ef6603;
 width: 19px;
 height: 18px;
 margin-top: 7px;
 border: 0px;
 border-radius: 10px;
}

span title{
 background-color: white;
 font-weight: bold;
 color: #000;
}

/*--------------------------------------------------------#Hero Slider Ends--------------------------------------------------------*/
.carousel{
 margin-bottom: 70px;
 margin-top: 20px;
 margin-left: 120px;
 margin-right: 120px;
}

.carousel-inner .carousel-item img{
 width:100%;
 height: 90vh;
}

.carousel-caption{
 margin-bottom: 55px;
}

.carousel-caption h5{
 color: #0080FF;
 font-weight: bolder;
 font-size: 30px;
}

.carousel-caption p{
 color:#fff;
 font-size: 17px;
}

.carousel .carousel-indicators button{
 background-color: #0080FF;
}

@media all and (max-width:800px){
    .carousel{
      margin-bottom: 50px;
      margin-top: 30px;
      width: 100%;
      height: 100%;
      margin-left: 10px;
      margin-right: 10px;
    }

    .carousel-inner .carousel-item{
      height: 100%;
      width: 100%;
    }

    .carousel-inner .carousel-item img{
      width:100%; 
    }

    .carousel-caption{
      margin-bottom: 45px;
    }

    .carousel-caption h5{
      color: #0080FF;
      font-weight: bolder;
      font-size: 20px; 
    }

    .carousel-caption p{
      color:#fff;
      font-size: 17px; 
    }
}

/*--------------------------------------------------------------# Featured Services--------------------------------------------------------------*/
.featured-services{
 margin-top: 70px;
 margin-bottom: 70px;
}

.featured-services .icon-box {
 padding: 05px;
 position: relative;
 overflow: hidden;
 background: #fff;
 min-height: 200px;
 box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
 transition: all 0.3s ease-in-out;
 border-radius: 8px;
 z-index: 1;
}

.featured-services .icon-box::before {
 content: '';
 position: absolute;
 background: #cbe0fb;
 right: 0;
 left: 0;
 bottom: 0;
 top: 100%;
 transition: all 0.3s;
 z-index: -1;
}

.featured-services .icon-box:hover::before {
 background: #0080FF;
 top: 0;
 border-radius: 0px;
}

.featured-services .icon {
 margin-bottom: 15px;
 margin-left: 115px;
 margin-right: 115px;
}

.featured-services .icon i {
 font-size: 48px;
 line-height: 1;
 color: #0080FF;
 transition: all 0.3s ease-in-out;
}

.featured-services .title {
 font-weight: 700;
 margin-bottom: 15px;
 font-size: 18px;
 text-align: center;
}

.featured-services .title a {
 color: #111;
 text-decoration: none;
}

.featured-services .description {
 font-size: 15px;
 line-height: 18px;
 margin-bottom: 0;
 text-align: center;
}

.featured-services .icon-box:hover .title a, .featured-services .icon-box:hover .description {
 color: #fff;
}

.featured-services .icon-box:hover .icon i {
 color: #fff;
}

/*---Choose Us Section -------------------*/
.choseus-section {	
background: #fff;	
padding-bottom: 40px;
 margin-top: 0px;
}

.section-title h2{
 padding-top: 15px;
 font-size: 18px;
}

.section-title span{
 font-weight: bold;
 padding-bottom: 10px;
 font-size: 20px;
}

.box {
 position: relative;
 width: 100%;
 padding-right: 5px;
 padding-left: 5px;
}

.our-services {
 margin-top: 60px;
 padding-bottom: 30px;
 padding: 0 10px;
 min-height: 190px;
 border-radius: 10px;
 margin-bottom: 20px;
 background-color: #fff;
 transition: all .4s ease-in-out;
 box-shadow: 0 0 25px 0 rgba(20, 27, 202, .17)
}

.our-services .icon {
 margin-bottom: -21px;
 transform: translateY(-40%);
 text-align: center;
}

.our-services .icon:hover {
 transition:all .6s ease-in-out;
 margin-bottom: -40px;
 transform: translateY(-100%);
 text-align: center;
}

.our-services p{
 text-align: center;
 font-size:15px;
 margin-top: 0;
}

.our-services h4{
 text-align: center;
 font-size: 18px;
 color: #0080FF;
 font-weight: bold;
}

.our-services:hover h4,.our-services:hover p {
 color: #fff;
 transition:all .6s ease-in-out;
}

.speedup:hover {
 box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
 cursor: pointer;
 background-image: linear-gradient(-45deg, #0080FF 0%, #0080FF 100%)
}

.settings:hover {
 box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
 cursor: pointer;
 background-image: linear-gradient(-45deg, #0080FF 0%, #0080FF 100%)
}

.privacy:hover {
 box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
 cursor: pointer;
 background-image: linear-gradient(-45deg,#0080FF 0%, #0080FF 100%)
}

.backups:hover {
 box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
 cursor: pointer;
 background-image: linear-gradient(-45deg,#0080FF 0%, #0080FF 100%)
}

.ssl:hover {
 box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
 cursor: pointer;
 background-image: linear-gradient(-45deg,#0080FF 0%, #0080FF 100%)
}

.database:hover {
 box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
 cursor: pointer;
 background-image: linear-gradient(-45deg,#0080FF 0%, #0080FF 100%)
}

/*--------Choose Us Section End----------------*/
/*--------------------------------------------------------------# Sections General--------------------------------------------------------------*/
section {
 padding: 10px 0;
 overflow: hidden;
}

.section-title {
 padding-bottom: 40px;
}

.section-title h2 {
 font-size: 18px;
 font-weight: 500;
 padding: 0;
 line-height: 1px;
 margin: 0 0 5px 0;
 letter-spacing: 2px;
 text-transform: uppercase;
 color: #aaaaaa;
}

.section-title h2::after {
 content: "";
 width: 120px;
 height: 1px;
 display: inline-block;
 background: #0080FF;
 margin: 4px 10px;
}

.section-title p {
 margin: 0;
 margin: 0;
 font-size: 20px;
 font-weight: bold;
 text-transform: uppercase;
 color: #2a2c39;
}

/*--------------------------------------------------------------# About--------------------------------------------------------------*/
.about {
 padding-top: 10px;
}

.about-content{
 display: block;
 float: left;
 word-wrap: break-word;
 width: 55%;
 text-align: left;
}

.about-img img{
 display: inline-block;
 justify-content: left;
 width: 38%;
 margin-left: 15px;
 height: 295px;
}

.about p{
 font-size: 16px;
 text-align: justify;
}

@media all and (max-width:800px) {
    .about {
      padding-top: 10px;
    }

    .about-content{
      display: inline;
      width: 100%;
      text-align: left; 
    }

    .about-img img{
      display: inline;
      width: 100%;
      padding: 0px;
      margin-left: 0px;
      margin-right: 7px; 
    }

    .about p{
      font-size: 16px;
    }
}

/*------------------------------------------Career Page CSS start-------------------------------------------------*/
.provide{
 height: 300px;
 width: 95%;
 background-color: #fff ;
 /*border: 2px solid yellow;*/
 margin-left: 10px;
 display: inline-block;
}

.provide .mid-image img{
 height: 270px;
 width: 500px;
 float: right;
 margin: 15px;
 margin-top: 0px;
}

.jobs{
 height: 400px;
 width: 100%;
 background-color:#fff;
 /*border: 2px solid green;*/
 margin-bottom: 10px;
 padding: 20px;
}

.internship{
 height: 400px;
 width: 100%;
 background-color:#fff;
 /*border: 2px solid red;*/
 margin-bottom: 50px;
 margin-top: 20px;
}

.provide a,a:hover{
 text-decoration: none;
 color: #0080FF;
}

.provide .content-1{
 display: inline; 
 margin-top: 0px;
 float: left;
 text-align: justify; 
 word-wrap: break-word;
 width: 55%;
 font-size: 18px;
}

.provide .content-1 h5{
 text-align: left;
}

.provide .context{
 display: inline;
 float: right;
}

/*jobs div css*/
.jobs img{
 height: 365px;
 width: 500px;
 float: left;
 margin: 15px;
}

.jobs .content-2{
 margin: 10px;
 display: inline;
 float: right;
}

.jobs a,a:hover{
 text-decoration: none;
 color: #0080FF;
}

.content-2 {
 text-align: justify; 
 word-wrap: break-word; 
 width: 50%;
}

.jobs .context-2{
 display: inline;
 float: left;
 border-radius: 10px;
}

/*internshp div css*/
.internship img{
 height: 365px;
 width: 500px;
 float: right;
 margin: 15px;
}

.internship a{
 text-decoration: none;
 color: #0080FF;
}

.internship a:hover{
 text-decoration: none;
 color: #0080FF;
}

.internship .content-3{
 margin: 50px;
 display: inline;
 float: left;
}

.content-3 h5{
 text-align: left;
 font-weight: bold;
}

.content-3 {
 text-align: justify; 
 word-wrap: break-word; 
 width: 50%;
}

.internship .context-2{
 display: inline;
 float: left;
}

@media all and (max-width:800px) {
      /*provide css start*/
    .provide{
      height: 400px;
      width: 100%;
      background-color: #fff ;
      /*border: 2px solid yellow;*/
      margin-bottom: 10px;
      display: inline;
    }

    .provide .mid-image img{
      width: 100%;
      height: 280px;
      display: block;
      margin: 0;
      float: inherit; 
    }

    .provide a,a:hover{
      text-decoration: none;
      color: #0080FF;   
    }

    .provide .content-1{
      display: inline;
      margin-top: 20px;
      float: left;
      text-align: justify; 
      word-wrap: break-word;
      width: 100%; 
    }

    .content-1 {
      text-align: center; 
      width: 100%; 
    }

    .provide .context{
      display: inline;
      float: right;
      border-radius: 20px;
    }

    /*provide css end*/
    /*job css start*/
    .jobs{
      height: 820px;
      width: 100%;
      background-color:#fff;
      /*border: 2px solid green;*/
      margin: 5px;
      padding: 0px; 
    }

    .jobs img{
      height: 280px;
      width:100%;
      margin: -1px; 
    }

    .jobs a,a:hover{
      text-decoration: none;
      color: #0080FF; 
    }

    .jobs .content-2{
      margin: 1px; 
    }

    .content-2 {
      text-align: justify; 
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .jobs .context-2{
      display: inline;
    }

    /*job css end*/
    /*internship css start*/
    .internship{
      height: 520px;
      width: 100%;
      background-color:#fff;
      /*border: 2px solid red;*/
      margin-top: 20px;
      display: block;    
    }

    .internship img{
      height: 365px;
      width: 100%;
      margin: -1px; 
    }

    .internship a{
      text-decoration: none;
      color: #0080FF;
    }

    .internship a:hover{
      text-decoration: none;
      color: #0080FF;
    }

    .internship .content-3{
      margin: 1px;
      text-align: justify;
    }

    .content-3 {
      text-align: justify;  
      width: 100%;
    }

    .internship .context-2{
      display: inline;
    }

    /*internship css end*/
    .nav li{
      display: inline;
      float: center;
      margin: 0;
      padding: 0;
    }
    
    .nav a{
      text-decoration: none;
      color: #000;
      font-weight: 500;
    }

    .nav a:hover{
      text-decoration: none;
      color: #000;
    }

    .nav-item{
      width: 100%; 
    }
}

.nav li{
 padding-right: 200px;
 padding-inline-start:150px;
 text-align: center;
}

.nav a{
 text-decoration: none;
 color: #000;
 font-weight: 500;
}

.nav a:hover{
 text-decoration: none;
 color: #000;
}

#togglenav{ 
 margin-bottom: 100px;
}

#togglenav li{
 border-bottom: 1px solid #000;
}

#menu1 h5{
 font-weight: bold;
}

.content-2 table{
 width: 100%;
}

/*--------------------------------------------------------Timeline CSS Start----------------------------------------------------------*/
.career-internship{
 padding-left: 10px;
 padding-right: 10px;
 display: flex;
}

.career_container{
 margin-left: 95px;
 margin-right: 55px;
 margin-bottom: 35px;
 margin-top: 0;
 text-align: left;
}

.career_container h2,h5{
 font-weight: bold;
 color: #000;
}

.intern_provide{
 margin-top: 0;
 padding-top: 0;
}

.content-intern ul{
 list-style-type:disc ;
}

.content-intern ul li{
 text-align: left;
 color: #000;
}

.timeline{
 margin: 0 auto;
 max-width: 900px;
 padding: 25px;
 display: grid;
 grid-template-columns: 1fr 8px 1fr;
 font-family: 'Raleway',sans-serif;
}

.timeline_component{
 margin: 0 20px 20px 20px;
}

.timeline_component--bottom{
 margin-bottom: 0;
}

.timeline_component--bg{
 padding: 1.5em;
 background:#0080FF;
 box-shadow: 0 0 25px 0 rgba(20, 27, 201, .05);
 border-radius: 10px;
}

.timeline_date--right{
 text-align: right;
}

.timeline_date img{
 height: 55px;
}

.timeline_middle{
 position: relative;
 background-color: #000;
}

.timeline_point{
 position: absolute;
 top: 0;
 left: 50%;
 width: 25px;
 transform: translateX(-50%);
 height: 25px;
 background: #0080FF;
 border-radius: 50%;
}

.timeline_point--bottom{
 top: initial;
 bottom: 0;
}

.timeline_title{
 margin: 0;
 font-size:17px;
 font-weight: bold;
}

.timeline_paragraph{
 line-height: 1.5;
 margin-top: 10px;
 color: #ffffff;
}

.timeline_date--right {
 text-align: right;
}

@media all and (max-width:800px){
    .career-internship{
      width: 100%;
      display: inline;
    }

    .career_container{
      margin: 5px;
      text-align: justify;
    }

    .career_container h2,h5{
      font-weight: bold;
      color: #000;
    }

    .content-intern ul li{
      text-align: justify;
      color: #000;
    }

    .timeline{
      margin:0px;
      width: 100%;
      font-family: 'Raleway',sans-serif;
    }

    .timeline_component{
      margin: 4px;
      padding: 7px;
      text-align: justify;
    }

    .timeline_point{
      position: absolute;
      top: 0;
      left: 50%;
      width: 15px;
      transform: translateX(-50%);
      height: 15px;
      background: #0080FF;
      border-radius: 50%;
    }

    .timeline_title{
      margin: 0;
      font-size:16px;
      font-weight: bold;
    }

    .timeline_paragraph{
      line-height: normal;
      font-size: 12px;
      height: auto;
      width: 100%;
      margin-top: 7px;
      padding: 0;
      color: #ffffff;
    }
}

 /*--------------------------------------------------------Timeline CSS End----------------------------------------------------------*/
/*-------------------------------------------------# Testimonials---------------------------------------------------------*/
.section-title p{
 font-size: 20px;
}

.testimonials .testimonial-item {
 box-sizing: content-box;
 padding: 30px 30px 0 30px;
 margin: 30px 15px;
 text-align: center;
 min-height: 350px;
 box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
}

.testimonials .testimonial-item .testimonial-img {
 width: 90px;
 border-radius: 50%;
 border: 4px solid #fff;
 margin: 0 auto;
}

.testimonials .testimonial-item h3 {
 font-size: 18px;
 font-weight: bold;
 margin: 10px 0 5px 0;
 color: #111;
}

.testimonials .testimonial-item h4 {
 font-size: 14px;
 color: #999;
 margin: 0;
}

.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
 color: #fedac0;
 font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
 display: inline-block;
 left: -5px;
 position: relative;
 color: #0080FF;
}

.testimonials .testimonial-item .quote-icon-right {
 display: inline-block;
 right: -5px;
 position: relative;
 top: 10px;
 color: #0080FF;
}

.testimonials .testimonial-item p {
 font-size: 16px;
 margin: 0 auto 15px auto;
}

.testimonials .swiper-pagination {
 margin-top: 20px;
 position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
 width: 12px;
 height: 12px;
 background-color: #fff;
 opacity: 1;
 border: 1px solid #0080FF;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
 background-color: #0080FF;
}

/*--------------------------------------------------------#contact---------------------------------------------------------*/
.form{
 padding:45px;
 margin: 0%;
 height: 430px;
 width: 50%;
 position: initial;
 justify-content: center;
 font-size: 15px;
 border: 2px solid #0080FF;
 border-radius: 6px;
}

.form input {
 margin: 7px;
 border-radius: 10px;
 width: 80%;
 height: 35px;
 text-align: left;
 border: 1px solid #0080FF;
}

.form textarea {
  padding :2px;
   margin: 7px;
   border-radius: 10px;
   width: 80%;
   height: 80px;
 text-align: left;
 border: 1px solid #0080FF;
}

.form label{
 font-weight: bold;
 font-size: 18px;
}

.form .btn{
 padding-top: 10px ;
 margin: 10px;
 color: white;
 font-size: 15px;
 background-color: #0080FF;
 font-weight: bold;
 border-radius: 5px;
}

.form .btn:hover{
 color: white;
 background-color: #0080FF;
}

@media screen and (max-width: 800px) {
    .form{
      padding-top:50px;
      padding-bottom: 10px;
      margin-bottom: 15px;
      height: 400px;
      width: 100%;
      font-size: 15px;
      font-family: 'Raleway',serif;
    }

    .form input{
      margin: 10px;
      border-radius: 5px;
      width: 100%;
      height: 40px;
    }
    
    .form label{
      font-weight: bold;
      font-size: 18px;
    }
    
    .form .btn{
      color: white;
      background-color: #0080FF;
      border-radius: 5px;
    }

    .form .btn:hover{
      color: white;
      background-color:#0080FF; 
    }
}

/*----------------------------------------------------------#career-----------------------------------------------------------*/
.heading {
 text-align: left;
 margin-top:0px;
 margin-bottom:0px;
}

.contact{
 justify-content: center;
 align-items: center;
 margin: auto;
 z-index: 2;
 width: 80%;
 background-image:url('../images/contactUs.jpg');
 background-repeat: no-repeat; 
 background-position: center;
 /* filter: blur(2px); */ /*filter:grayscale(0.3) ;*/
 opacity:0.9;
}

ul.navul span {
 float: left;
 text-align: left;
}

div.heading p:last-child {
 font-size: 20px;
}

ul.nav1 li {
 font-size: 20px;
}

.mainh {
 font-size: 50px;
 color: #fff;
}

/*-----------------------------------------------------------#career------------------------------------------------------------*/
/*--------------------------------------------------------------# Footer--------------------------------------------------------------*/
#footer {
 background: #14151c;
 color: #fff;
 font-size: 14px;
 text-align: center;
 padding: 10px 0;
}

#footer h3 {
 font-size: 36px;
 font-weight: 700;
 color: #fff;
 position: relative;
 padding: 0;
 margin: 0 0 15px 0;
}

#footer p {
 font-size: 15px;
 padding: 0;
 margin: 0 0 10px 0;
}

#footer .social-links {
 margin: 0 0 10px 0;
}

#footer .social-links a {
 font-size: 18px;
 display: inline-block;
 background: #0080FF;
 color: #fff;
 line-height: 1;
 padding: 8px 0;
 margin-right: 4px;
 border-radius: 50%;
 text-align: center;
 width: 36px;
 height: 36px;
 transition: 0.3s;
}

#footer .social-links a:hover {
 background: #0080FF;
 color: #fff;
 text-decoration: none;
}

#footer .copyright {
 margin: 0 0 5px 0;
}

#footer .credits {
 font-size: 13px;
}

/*-----------------------------------------chatbot CSS Start--------------------------------------------*/
.chat_icon{	
  position: fixed;	
  bottom: -20px;	
  right: 40px;	
  z-index: 100;	
  padding: 0;	
  font-size: 80px;	
  color:#0080FF;	
  cursor: pointer;
}

.chat_box{	
  width: 400px;	
  height: 70vh;	
  position: fixed;	
  bottom: 145px;	
  right: 30px;
  border-radius: 20px;	
  background:#9fbde0;	
  z-index: 1400;	
  transition: all 0.3s ease-out;	
  transform: scaleY(0);
}

.chat_box.active{	
  transform: scaleY(1);
}

#messages{	
  padding: 20px;
}

.my-conv-form-wrapper textarea{	
  height: 30px;	
  overflow: hidden;	
  resize:both;
}

.hidden{	
  display: none !important;
}

@media screen and (max-width: 800px){	
  .chat_box{		
    width: 80%;		
    right: 30px;	
}

	.header{		
    padding: 20px 0;	
}

	.logo{		
    display: inline;		
    margin: 0 auto;		
    width: 100px;	
}

 	.main_nav{		
     text-align: center;		
     margin-bottom: 30px;	
}

 	.main_nav ul li{		
     margin: 0 3px;	
}

  .banner{		
    background-size: 100%;		
    background-position: top center;
    background-repeat: no-repeat;	
}

.banner h1{ 
    font-size: 40px; 
}

	.about-section h2{		
    font-size: 30px;	
}

	.about-box{		
    margin: 15px 0;	
}

	#port_pop_pic{		
    left: 30px;		
    top: 30px;		
    width: calc(100% - 60px);
    height: calc(100% - 60px);	
}

}

/*Chatbot CSS Ends*/
/*-------New Service Page CSS------------------------*/
.service {
 position: relative;
 width: 100%;
 padding: 15px 0 15px 0;
}

@media (max-width: 800px) {
 .service {
     padding-left: 0;
     padding-right: 0;
 }
}

/*******************************//******* Service Row CSS *******//*******************************/
.service-row {
 position: relative;
 width: 100%;
 padding: 10px 0;
 margin-top: 0;
 padding-top: 0;
}

.service-row .service-row-img {
 position: relative;
 width: 100%;
 padding: 0 30px;
}

.service-row .service-row-img img {
 max-width: 100%;
}

@media(max-width: 800px) {
  .service-row .service-row-img {
      margin-bottom: 30px;
  }
}

.service-row .service-row-text {
 position: relative;
 width: 100%;
 padding: 0 30px;
}

.service-row h2.section-title {
 position: relative;
 font-size: 25px;
 font-weight: 700;
 text-transform: uppercase;
 margin-bottom: 15px;
 padding-bottom: 15px;
}

.service-row h2.section-title::after {
 position: absolute;
 content: "";
 width: 60px;
 height: 3px;
 bottom: 0;
 left: 0;
 background: linear-gradient(to left, #0080FF,#0080FF, #0080FF);
 border-radius: 0 100% 100% 0; 
}

.service-row p {
 font-size: 16px;
 text-align: justify;
}

.service-row a.btn {
 margin-top: 15px;
 padding: 10px 35px;
 font-size: 13px;
 font-weight: 500;
 text-transform: uppercase;
 color: #ffffff;
 border: none;
 border-radius: 50px;
 background: linear-gradient(#0080FF, #0080FF);
 transition: .5s;
}

.service-row a.btn:hover {
 background: linear-gradient(#0080FF, #0080FF);
}

.service-row .service-row-col .col-sm-6 {
 display: flex;
 align-items: center;
 margin-top: 10px;
 margin-bottom: 15px;
}

.service-row .service-row-col-icon {
 width: 40px;
 height: 40px;
 margin-right: 15px;
 padding: 8px 0;
 text-align: center;
 color: #ffffff;
 background: #0080FF;
}

.service-row .service-row-col-text {
 width: calc(100% - 55px);
}

.service-row .service-row-col-text h3 {
 font-size: 13px;
 font-weight: 400;
 margin-bottom: 3px;
}

.service-row .service-row-col-text p {
 margin: 0;
 font-size: 10px;
 font-weight: 400;
}

@media (max-width: 800px) {
 .service-row .service-row-img, .service-row .service-row-text {
        padding: 0;
    }
}

.iframe{
 width: 95%;
 margin: 20px;
 padding: 10px;
}

.main {
 display: block;
 background-color:#f3f5f1;
 border-radius: 10px;
 color: #000;
 padding-left: 10px;
}

.desc{
 height: auto;
 width: 95%;
 display: block;
}

.desc p {
 font-size: 17px;
 line-height: 1.7em;
 position: relative;
 text-align: justify;
}

.items{
 padding-top: 25px;
}

.items ul{
 padding-bottom: 25px;
}

.items ul li{
 list-style-type: none;
 font-size: 18px;
 font-weight: bold;
}

.foot{
 height:auto;
 display: block;
 width: 95%;
 font-size: 16px;
 color: #000;
 line-height: 1.7em;
 text-align: left;
}

.foot p{
 font-size: 17px;
 height: auto;
 text-align: justify;
 padding-bottom: 0;
}

.middle{
 font-size: 16px;
 color: #000;
 height:auto;
 width: 90%;
 margin-top: 0; 
 margin-bottom: 18px;
 overflow: hidden;
}

.middle .items{
 width: 40%;
 height: auto;
 padding-top: 0;
 display: block;
 float: left;
}

.middle #img{
 width: 60%;
 height: auto; 
 display: block; 
 float: right;
}

#img img{
 width: 500px;
 height: 320px;
 padding-top: 30px;
 padding-bottom: 30px;
}

.middle h4{
 color: #000;
 font-weight: bold;
 text-decoration: underline #000;
}

.myBtn{
 border-radius: 35px;
 color: #000;
 margin: 4px;
 padding: 10px;
 background-color: #0080FF;
 text-decoration: none;
}

.myBtn:hover{
 border-radius: 35px;
 color: #000;
 margin: 4px;
 padding: 10px;
 background-color: #0080FF;
 text-decoration: none;
}

iframe{
 width:100%;
 height: 500px;
 overflow: none;
}

.modal {
 margin-top:35px;
 padding: 25px;
 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 1; /* Sit on top */
 left: 0;
 top: 0;
 width: 50%; /* Full width */
 height: 50%; /* Full height */
 overflow:hidden; /* Enable scroll if needed */
 background-color: #fff; /* Fallback color */
 background-color: transparent;
}

/* Modal Content/Box */
.modal-content {
 background-color: #ffffff;
 margin: 15%; /* 15% from the top and centered */
 padding: 20px;
 border: 1px solid #fff;
 width: 70%;/* Could be more or less, depending on screen size */
}

#myModal{
 width: 80%;
 margin-left: 10%;
 backdrop-filter: blur(5px);
}

#myModal1{
 width: 80%;
 margin-left: 10%;
 backdrop-filter: blur(5px);
}

#myModal2{
 width: 80%;
 margin-left: 10%;
 backdrop-filter: blur(5px);
}

#myModal3{
 width: 80%;
 margin-left: 10%;
 backdrop-filter: blur(5px);
}

#myModal4{
 width: 80%;
 margin-left: 10%;
 backdrop-filter: blur(5px);
}

#myModal5{
 width: 80%;
 margin-left: 10%;
 backdrop-filter: blur(5px);
}

#myModal6{
 width: 80%;
 margin-left: 10%;
 backdrop-filter: blur(5px);
}

#myModal7{
 width: 80%;
 margin-left: 10%;
 backdrop-filter: blur(5px);
}

#myModal8{
 width: 80%;
 margin-left: 10%;
 backdrop-filter: blur(5px);
}

#myModal9{
 width: 80%;
 margin-left: 10%;
 backdrop-filter: blur(5px);
}

/* The Close Button */
#close {
 color: #000;
 float: right;
 font-size: 45px;
 font-weight: bold;
 cursor: pointer;
}

#close:hover,#close:focus {
 font-size: 45px;
 color:#000;
 text-decoration: none;
 cursor: pointer;
}

/* Modal Header */
.modal-header {
 text-align: center;
 padding:2px 16px;
 height: 55px;
 background-color: #0080FF;
}

.modal-header h2{
 position: relative;
 font-size: 23px;
 font-weight: 700;
 text-transform: uppercase;
}

/* Modal Body */
.modal-body {
 padding: 2px 16px;
}

/* Modal Content */
.modal-content {
 position: relative;
 background-color: #fefefe;
 margin: auto;
 padding: 0;
 border: 1px solid #888;
 width: 50%;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 animation-name: FadeIn;
 animation-duration: 0.4s;
}

/* Add Animation */
@keyframes FadeIn {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@media all and (max-width:800px){
    .modal{
      width: 100%;
      height: 100%;
      margin-top: 10px;
    }

    .modal-content{
      width: 100%;
      background-color: #ffffff;
      margin: 0%; /* 15% from the top and centered */
      padding: 0;
      border: 1px solid #fff;
    }

    .modal-header{
      width: 100%;
    }

    #myModal{
      width: 100%;
      margin-left: 1%;
      backdrop-filter: blur(5px);
    }

    #myModal1{
      width: 100%;
      margin-left: 1%;
      backdrop-filter: blur(5px);
    }

    #myModal2{
      width: 100%;
      margin-left: 1%;
      backdrop-filter: blur(5px);
    }

    #myModal3{
      width: 100%;
      margin-left: 1%;
      backdrop-filter: blur(5px);
    }

    #myModal4{
      width: 100%;
      margin-left: 1%;
      backdrop-filter: blur(5px);
    }

    #myModal5{
      width: 100%;
      margin-left: 1%;
      backdrop-filter: blur(5px);
    }

    #myModal6{
      width: 100%;
      margin-left: 1%;
      backdrop-filter: blur(5px);
    }

    #myModal7{
      width: 100%;
      margin-left: 1%;
      backdrop-filter: blur(5px);
    }

    #myModal8{
      width: 100%;
      margin-left: 1%;
      backdrop-filter: blur(5px);
    }

    #myModal9{
      width: 100%;
      margin-left: 1%;
      backdrop-filter: blur(5px);
    }

    .iframe{
      width: 100%;
      height: 100%;
    }

    #close {
      color: #000;
      float: right;
      font-size: 25px;
      font-weight: bold;
      cursor: pointer;
    }

    .main {
      background-color:#f3f5f1;
      border-radius: 10px;
      color: #000;
    }

  .desc{
      display: inline;
    }
    .desc p {
      color: #000;
      font-size: 17px;
      font-family: Arial, Helvetica, sans-serif;
    }

    .foot{
      display: inline;
      width: 100%;
      font-size: 16px;
      color: #000;
    }

    .middle{
      font-size: 16px;
      display: inline;
      color: #000;
      width: 100%;
      overflow: hidden;
    }

    .middle .items{
      width: 100%;
      height: 100%;
    }

    .middle #img{
      width: 100%;
      height: 100%; 
    }

    #img img{
      width: 100%;
      height: 100%;
    }

    .items{
      display: inline;
    }

    iframe{
      width:100%;
      height: 450px;
      overflow: none;
    }

    .modal-header {
      padding: 0; 
      margin: 0; 
    }

    .modal-header h2{
      font-size: 15px;
      font-weight: bold;
      padding: 0;
    }

}

/* width */
::-webkit-scrollbar {
 width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #ffffff;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #888;
}
/*----------New Service Page Ends------------------------*/