@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;800&display=swap');

body {

  color: #5c6873;

  font-family: 'Montserrat', sans-serif;;

  padding: 0px !important;

  margin: 0px !important;

  font-weight: 300;

  font-size: 17px; 

}

a {

  outline: none !important;

  -webkit-transition: back 0.2s ease-out;

  -moz-transition: all 0.2s ease-out;

  -o-transition: all 0.2s ease-out;

  -ms-transition: all 0.2s ease-out;

}



a:focus,

a:hover,

a:active {

  outline: none !important;

  text-decoration: none; 

}

#dockchargenavbar{

    transition: top 1.59s;

}

.navbar-brand img {

    width: 170px;

}
.header-scroll .navbar-brand img{
    width: 100px;
}
.dockcharge_header .header-scroll.navbar .navbar-nav .nav-link{
    padding: 15px 25px;
}
.nav-up {

  top: -40px;

}
.docknav {
    background: rgb(189 241 227 / 50%);
}
.header-scroll{

    background: rgb(169 247 255);

}

/*.header-scroll .navbar-brand img{

    width: 100px;

}

.dockcharge_header .header-scroll.navbar .navbar-nav .nav-link{

    padding: 15px 25px;

}*/

.dockcharge_header .navbar .navbar-nav .nav-link{

    font-size: 16px;

    font-weight: 600;

    text-transform: uppercase;

    color: #3a3f45;

    letter-spacing: 1px;

    font-style: normal;

    transition: all 0.2s;

    padding: 25px 25px;

    min-height: auto;

}

.dockcharge_header .navbar .navbar-nav .nav-link:hover,

.dockcharge_header .navbar .navbar-nav .nav-link:active{

    color: #000;

}

.dockcharge_header .navbar-brand{

    padding: 0;

}

.dockcharge_header .navbar .navbar-nav .nav-link.active{

    color: #272727 !important;

}

.overlaytext{

    padding-top: 25%;

    padding-left: 90px;

}

.overlaytext h2{

    font-size: 36px;

    line-height: 46px;

    font-weight: 800;

    color: #000;

    text-transform: uppercase;

    margin-bottom: 25px;

}

.slider-subtitle4 {

    font-size: 14px;

    font-weight: 100;

    letter-spacing: 4px;

    font-weight: 400;

    text-transform: uppercase;

    margin-bottom: 20px;

    display: block;

    color: #000;

}

#about-us .slider-subtitle4{

    letter-spacing: 2px;

}

.award-box-az {

    border: 1px solid #34d4ed;

    display: inline-block;

    padding: 10px;

    background-color: #34d4ed;

    color: #fff;

    text-transform:  uppercase;

}

a{

    text-decoration: none;

}

.btn1{

    padding: 12px 20px;

    line-height: 13px;

    border-width: 2px;

    margin: 0px;

    letter-spacing: 0;

    font-weight: 500;

    font-size: 15px !important;

    background-color: #000;

    color: #fff;

}

.btn1:hover{

    background-color: #fff;

    color: #000;

    border: 2px solid #000;

}

#mainslider .owl-nav button.owl-next,
#mainslider .owl-nav button.owl-prev,
#mobilemainslider .owl-nav button.owl-next,
#mobilemainslider .owl-nav  button.owl-prev,
#blogslider .owl-nav button{

    position: absolute;

    top: 38%;

    background-color: transparent;

    color: #000;

    width: 60px;

    height: 60px;

    border: 1px solid #000;

    border-radius: 50%;

}

#mainslider .owl-nav button.owl-next,
#mobilemainslider .owl-nav button.owl-next{

    right: 10px;

}
#blogslider .owl-nav button.owl-next{
    right: -50px;
}
#mobilemainslider .owl-nav button.owl-prev,
#mainslider .owl-nav button.owl-prev{
 left: 10px;
}
#blogslider .owl-nav button.owl-prev{
    left: -50px;
}
#slider2 .overlaytext h2{

    font-size: 55px;

    line-height: 70px;

    font-weight: 600;

    color: #000;

    margin-bottom: 25px;

}

#mainslider #slider2 .overlaytext{

    text-align: right;

    padding-right: 90px;

}

#slider2 .overlaytext .card-text{

    margin-bottom: 25px;

}

#mainslider .iconsapple img{

    width: 170px;

}

.mobilelsider{
    display: none;
}
.desktopslider{
    display: block;
}
.p-tb-60 {

    padding: 60px 0;

}

.p-t-90 {

    padding-top: 90px !important;

}

.mainheading{

    margin-bottom: 20px;

    color: #000;

    font-size: 26px;

    margin-top: 10px;

    font-weight: 600;

    text-transform: uppercase;

    line-height: 1.1;

}

.font-weight-600{

    font-weight: 600;

}

p {

    font-size: 14px;

    line-height: 25px;

    font-weight: 400;

    color: #000;

    letter-spacing: 0.5px;

}

.galleryimg{

    margin-top: 50px;

}

.bounce-animate5 {

    animation-name: float-bob5;

    animation-duration: 6s;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

    -moz-animation-name: float-bob5;

    -moz-animation-duration: 6s;

    -moz-animation-iteration-count: infinite;

    -moz-animation-timing-function: linear;

    -ms-animation-name: float-bob5;

    -ms-animation-duration: 6s;

    -ms-animation-iteration-count: infinite;

    -ms-animation-timing-function: linear;

    -o-animation-name: float-bob5;

    -o-animation-duration: 6s;

    -o-animation-iteration-count: infinite;

    -o-animation-timing-function: linear;

}

@-webkit-keyframes float-bob5 {

  0% {

    -webkit-transform: translateY(-75px);

    transform: translateY(-75px); }

  50% {

    -webkit-transform: translateY(-35px);

    transform: translateY(-35px); }

  100% {

    -webkit-transform: translateY(-75px);

    transform: translateY(-75px); } 

}

.btn {

    outline: none !important;

    -webkit-transition: all 0.2s ease-out;

    -moz-transition: all 0.2s ease-out;

    -o-transition: all 0.2s ease-out;

    -ms-transition: all 0.2s ease-out;

    border-radius: 0;

}

.h4heading{

    font-size: 20px;

    line-height: 25px;

    color: #000;

    font-weight: 600;

    margin-top: 20px;

    text-transform: capitalize;

}

.parallax-title {

    display: block;

    font-size: 15px;

    font-weight: 300;

    letter-spacing: 7px;

    color: #000;

    margin-bottom: 30px;

    text-transform: uppercase;

}

.no-margin-lr {

    margin-left: 0 !important;

    margin-right: 0 !important;

}

.separator-line {

    height: 2px;

    margin: 0 auto;

    width: 30px;

    margin: 7% auto;

}

.bg-black {

    background: #000000 !important;

}
.mobileimg{
    display: none;
}
.p-t-60{

    padding-top: 60px;

}

.p-b-60{

    bottom: 60px;

}

.mt-60{

    margin-top: 60px;

}

.mb-60{

    margin-bottom: 60px;

}

.problem-feature-2{

    box-shadow: 0px 3px 12px 0px rgb(5 42 18 / 14%);

    margin-bottom: 20px;

    background: #ffffff;

    text-align: left;

    padding: 18px 20px;

}

.problemswrap .icon-square{

    border: 1px solid #eeeeee;

    padding: 0;

    height: 70px;

    width: 70px;

}

.problemswrap .icon-square img {

    width: 50px;

    height: 50px;

}

.contentright-wrap{

    padding-left: 30px;

}

.bg-parallax{

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-position: center;

    background-size: cover;

}

.problems-section{

    background-image: url(../images/bg-22.png);

}

.malaward-section{

    background-image: url(../images/malawad.png);

}

.height500{

    height: 590px;

}

.solutions-section{

    background-image: url(../images/bg3.jpg);

}
.maritime-award-section{

    background-image: url(../images/indiamaritimeawards.png);

}

.white_patch{

    position: relative;

}

.white_patch::before{

    position: absolute;

    content: '';

    left: 0;

    right: 0;

    bottom: 0;

    top: 0;

    background-color: #fff;

    width: 50%;

    height: 100%;

    z-index: 0;

}

.solutions-section.white_patch::before{

    left: auto;

    right: 0;

    bottom: 0;

    top: 0;

}

.contentwrap{

    position: relative;

    z-index: 1;

    padding: 100px 0;

}

.c-diagram {

    margin-top: 110px;

    width: 100%;

    position: relative;

    min-height: 420px;

}

.c-diagram > .c-lines-2 {

    position: absolute;

    height: 362px;

    width: 422px;

    left: 50%;

    margin-left: -220px;

    top: -56px;

}

.c-diagram > .c-wireframe {

    position: absolute;

    width: 207px;

    height: 420px;

    left: 50%;

    margin-left: -103.5px;

}

.c-diagram > .c-phone-img {

    position: absolute;

    background-color: #ffffff;

    width: 182px;

    height: 324px;

    left: 50%;

    margin-left: -91px;

    top: 48px;

}

.c-diagram > .c-point-1 {

    left: 52%;

}

.c-diagram > .c-point-1 {

    position: absolute;

    left: 50%;

    margin-left: -450px;

    top: 7px;

    text-align: right;

}

.c-diagram > .c-box {

    width: 250px;

}

.c-diagram > .c-point-2 {

    position: absolute;

    left: 50%;

    margin-left: 180px;

    top: -67px;

}

.c-diagram > .c-point-4 {

    position: absolute;

    left: 50%;

    margin-left: 220px;

    top: 180px;

}

.c-diagram > .c-box > h3 {

    font-weight: bold;

    letter-spacing: 1px;

    color: #fff;

    text-transform: uppercase;

    font-size: 18px;

    margin: 10px 0;

}

.azbgop::before {

    position: absolute;

    content: '';

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    z-index: 0;

    background: rgb(34 37 36 / 78%);

}

.list-1{

    padding: 0;

    margin: 20px 0;

}

.list-1 li {

    list-style: none;

    font-size: 16px;

    color: #333;

    font-weight: 600;

    margin-bottom: 7px;

    margin-left: 36px;

}

.list-1 li:before {

    position: absolute;

    content: '';

    width: 21px;

    height: 2px;

    float: left;

    margin: 9px 15px 0 -36px;

    background: #ea4343;

}

.verti-middle{

    display: table-cell;

    vertical-align: middle;

}

.contactus a{

    color: #000;

    font-weight: 600;

}

.contactus a:hover{

    color: #047e91;

}

.contactus h4{

    color: #000;

    text-transform: uppercase;

    font-size: 18px;

    font-weight: 600;

}

.socialicons{

    padding-left: 0;

}
.blogcontent{
    height: 250px;
}
.socialicons li{

    display: inline-block;

    list-style: none;

}

.socialicons a{

    border: 0;

    width: 40px;

    height: 40px;

    line-height: 40px;

    text-align: center;

    border-radius: 50px;

    display: inline-block;

    margin-right: 10px;

    margin-bottom: 5px;

    background-color: #010101 !important;

}

.contactus{

    padding:40px 30px;

    background-color: #d9faff;

    border-radius: 8px;

}

.socialicons a>i{

    color: #fff;

}

footer{

    position: relative;

}

.topfooter {

    padding: 15px 0 5px 0;

    background: #f7f7f7;

}

footer .socialicons{

    margin-bottom: 0;

}

footer .socialicons a i{

    color: #000;

}

footer .socialicons a{

    border-radius: 0;

    color: #000;

    border: 1px solid #ddd;

    background-color: #fff !important;

}

.footerright .socialicons{

    padding-left: 20px;

}

footer .footerright .socialicons i{

    font-size: 25px;

}

.copyright{

    background-color: #31383c;

    padding: 12px 0;

}

.copyright small{

    font-size: 13px;

}

.breadcrumbbg{

    padding: 130px 0 60px 0;

}

.bg-subbanner{

    background-repeat: no-repeat;

    background-attachment: inherit;

    background-size: cover;

    background-position: center;

}

.vision-section h2{

    font-size: 26px;

    margin: 10px 0 20px 0;

    font-weight: 600;

    color: #fff;

}

.c-body.bg-dark{

    padding: 20px;

}

.vision-section .c-body{

    height: 250px;

}

.feature-boxwrap h1 {

    text-transform: uppercase;

}

.vision-section h3{

    font-size: 18px;

    line-height: 32px;

    color: #fff;

    text-transform: uppercase;

    font-weight: 600;

}

.breadcrumbbg h3{

    font-size: 18px;

    color: #000;

    font-weight: bold;

}

.breadcrumb ol li, .breadcrumb ol li a{

    font-size: 16px;

    color: #000;

    font-weight: 600;

}

.feature-boxwrap{

    background: rgb(237 237 237 / 90%) !important;

    padding: 120px 60px;

}

.list-2 li{

    margin-left: 18px;

    font-weight: 600;

    margin-bottom: 15px;

    font-size: 14px;

    list-style: none;

    color: #333;

    position: relative;

}

.list-2{

    padding-left: 0;

}

.list-2 li:before {

    content: '';

    display: inline-block;

    width: 8px;

    background: red;

    height: 8px;

    border-radius: 20px;

    margin-right: 10px;

    margin-top: 8px;

    margin-left: -18px;

    opacity: 0.6;

}

.h1headingline{

    margin-bottom: 4px;

    width: 3em;

    height: 1px;

    margin-bottom: 20px;

    background-color: #000;

}

.contact-info{

    background-color: #f7f7f7;

    padding-top: 40px;

    padding-bottom: 60px;

    padding-left: 30px;

    padding-right: 30px;

}

.contact-info h1,.contact-two h1,.contact-form h1{

    font-size: 30px;

    color: #333;

    line-height: 1.1;

    font-weight: 600;

    margin-bottom: 30px;

}

.c-contact a i{

    color: red;

}

.c-contact a {

    font-size: 15px;

    font-weight: 600;

    color: #333;

}

.contact-two{

    background-color: #434343;

    padding-top: 40px;

    padding-bottom: 60px;

    padding-left: 30px;

    padding-right: 30px;

}

.contact-two h1{

    color: #fff;

}

.contact-two h5{

    color: #fff;

    font-size: 17px;

    line-height: 28px;

}

.btn2{

    color: #fff;

    background: none;

    border-color: #fff;

    border-width: 2px;

    font-weight: normal;

    padding: 10px 20px 8px 20px;

}

.btn2:hover{

    color: #000;

    background-color: #fff;

}

.contact-form .form-control{

    font-weight: 300;

    font-size: 14px;

    border-radius: 0;

    background: white;

    font-weight: 500;

    border-color: #d0d7de;

    height: 46px;

    padding: 10px 16px;

}

.contact-form textarea{

    height: 90px !important;

}

.contact-form{

    width: 100%;

}

.contact-info,.contact-two{

    width: 90%;

    margin: 0 auto;

}
.blogtitile{
    font-size: 15px;
    font-weight: 600;
    color: #000;
}
.blogcontent{
    padding: 15px;
    border: 1px solid #2fd7ee;
}
.btnwrap .award-box-az{
    font-size: 13px;
    font-weight: 600;
    color: #000;
    padding:8px 14px;
}
.btnwrap .award-box-az:hover{
    border: 1px solid #34d4ed;
    background-color: #fff;
}
.list1 li{
    font-size: 13px;
    font-weight: 600;
    color: #000;
    margin-bottom: 15px;
}
.modal.fade .modal-dialog{
    max-width: 70%;
}
.modal-title{
    color: #26bda1;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 18px;
}
@media screen and (min-width: 1200px)and (max-width: 2200px){
    .contact-form{
        padding-left: 60px;
    }
}
@media screen and (min-width: 993px)and (max-width: 1199px){

    .dockcharge_header .navbar .navbar-nav .nav-link{
        padding: 30px 14px;
    }

    .navbar-brand img{
        width: 150px;
    }

    .overlaytext h2,#slider2 .overlaytext h2{
        font-size: 22px;
        line-height: 28px;
    }

    .feature-boxwrap{

        padding:120px 45px;

    }

    .vision-section .c-body {

        height: 300px;

    }
    .problems-section{
        background-position: right;
    }
    .solutions-section{
        background-position: left;
    }
    .contact-form {
        width: auto;
        margin: 0 0 0 0;
    }
}

@media screen and (min-width: 768px)and (max-width: 992px){

    .c-diagram > .c-point-1{

        left: 59%;

        top: 13%;

    }

    .c-diagram > .c-point-2{

        left: 30%;

    }

    .c-diagram > .c-point-4{

        left: 34%;

        top: 158px;

    }

    .overlaytext{

        padding-top: 18%;

    }

    .overlaytext h2,#slider2 .overlaytext h2{

        font-size: 38px;

        line-height: 45px;

    }

    .solutions-section.bg-parallax{

        background-position: 31% 100%;

    }

    #navbarsExample03{

        background-color: #ddd;

        padding: 20px 10px;

    }

    .dockcharge_header .navbar .navbar-nav .nav-link{

        padding: 15px;

    }

    .collapse:not(.show),.navbar-expand-sm .navbar-collapse {

        display: none !important;

    }

    .collapse.show{

        display: block !important;

    }

    .dockcharge_header .navbar .navbar-nav,

    .dockcharge_header .navbar .navbar-nav li{

        display: block;

    }

    .navbar-expand-sm .navbar-collapse{

        position: absolute;

        width: 100%;

        left: 0;

        top: 50px;

        transition:height .35s ease;

    }

    .navbar-expand-sm .navbar-toggler {

        display: block;

    }

    .feature-boxwrap{

        padding: 100px 30px;

    }

    .bg-parallax.bg_One{

        background-position: 23% 100%;

    }

    .mobilelsider{
        display: block;
    }
    .desktopslider{
        display: none;
    }
    .white_patch::before{
        background: rgba(0,0,0,0.85);
        width: 100%;
    }
    .mobileimg {
        display: block;
        position: relative;
    }
    .height500 {
        height: auto;
    }
    .contentwrap{
        background-color: #fff;
        padding: 100px 40px;
    }
    .white_patch{
        margin-bottom: 100px;
    }
    .contact-form {
        width: auto;
        margin: 60px 0 0 0;
    }
    #mobilemainslider .owl-nav button span{
        font-size: 18px;
    }
    #mobilemainslider .owl-nav button.owl-next,
    #mobilemainslider .owl-nav  button.owl-prev{
        width: 30px;
        height: 30px;
        top: 51%;
        background: transparent;
    }
    #mobilemainslider .owl-nav button.owl-next{
        right: 10px;
    }
    #mobilemainslider .owl-nav  button.owl-prev{
        left: 10px;
    }
    .navbar-brand img {
        width: 110px;
    }
}

@media screen and (min-width: 576px)and (max-width: 767px){

    .collapse:not(.show),.navbar-expand-sm .navbar-collapse {

        display: none !important;

    }

    .collapse.show{

        display: block !important;

    }

    .dockcharge_header .navbar .navbar-nav,

    .dockcharge_header .navbar .navbar-nav li{

        display: block;

    }

    .navbar-expand-sm .navbar-collapse{

        position: absolute;

        width: 100%;

        left: 0;

        top: 50px;

        transition:height .35s ease;

    }

    .navbar-expand-sm .navbar-toggler {

        display: block;

    }

    #mainslider #slider2 .overlaytext{

        padding-right: 40px;

    }

}

@media screen and (max-width: 767px) {

    .c-diagram > .c-wireframe{

        width: 208px;

        height: 422px;

        left: 19%;

        margin-left: 0;

        top: 24%;

        background-repeat: no-repeat;

    }

    .c-diagram > .c-lines-2{

        display: none;

    }

    .c-diagram > .c-phone-img{

        left: 19%;

        top: 32%;

        background-repeat: no-repeat;

        margin-left: 12px;

    }

    .c-diagram > .c-point-1, 

    .c-diagram > .c-point-2,

    .c-diagram > .c-point-4{

        position: relative;

        left: 0;

        margin-left: 0;

        top: 0;

    }

    .c-diagram{

        height: 600px;

    }

    .c-diagram > .c-box{

        width: 100%;

        text-align: center;

        display: block;

    }

    .c-diagram{

        margin-top: 50px;

    }

    .bounce-animate5{

        animation: none;

    }

    .navbar-brand img{

        width: 120px;

    }

    .overlaytext h2,#slider2 .overlaytext h2{

        font-size: 18px;

        line-height: 25px;

    }

    .overlaytext {

        padding-top: 15%;

        padding-left: 0;

        text-align: center;

    }

    #mainslider #slider2 .overlaytext{

        padding-left: 20%;

        text-align: right;

        padding-top: 15%;

        padding-right: 40px;

    }

    #slider2 .overlaytext .card-text{

        display: none;

    }

    #navbarsExample03{

        background-color: #ddd;

        padding: 20px 10px;

    }

    #mainslider .owl-nav button.owl-next, #mainslider .owl-nav button.owl-prev{

        width: 30px;

        height: 30px;

        background-color: #fff;

    }

    .dockcharge_header .navbar .navbar-nav .nav-link{

        padding: 15px;

    }

    .white_patch::before,.solutions-section.white_patch::before{

        background: rgb(0 0 0 / 85%);
        left: 0;

        right: 0;

        bottom: 0;

        top: 0;

        width: 100%;

        height: 100%;

    }

    .contentwrap{

        padding: 20px 45px;
        background-color: #fff;

    }

    .problem-feature-2.align-items-start{

        display: block !important;

    }

    .contentright-wrap {

        padding-left: 0;

        margin-top: 10px;

    }

    .problemswrap .icon-square{

        width: 100%;

        margin: 0 auto;

    }

    .solutions-section{

        background-position: inherit;

    }

    .breadcrumb.d-block,.breadcrumbbg h3{

        display: none !important;

    }

    .breadcrumbbg {

        padding: 0;

        margin-top: 50px;

        height: 100px;

    }

    .bg-subbanner{

        background-size: cover;

    }

    footer .socialicons{

        text-align: center;

        margin-bottom: 20px;

    }

    .p-t-90 {

        padding-top: 50px !important;

    }

    .vision-section .c-body {

        height: auto;

        margin-bottom: 20px;

    }

    .feature-boxwrap{

        padding:30px;

        margin: 60px 30px;

    }

    .contact-form {

        margin-top: 20px;
        margin-left: 0;

    }
    .mobilelsider{
        display: block;
    }
    .desktopslider{
        display: none;
    }
    .award-box-az{
        margin-bottom: 10px;
    }
    p{
        text-align: justify;
    }
    .height500 {
        height: auto;
    }
    .mobileimg{
        display: block;
        position: relative;
        z-index: 1;
    }
    #mobilemainslider .owl-nav button.owl-next,
    #mobilemainslider .owl-nav  button.owl-prev{
        width: 30px;
        height: 30px;
        top: 75%;
        background: #fff;
    }
    #mobilemainslider .owl-nav button.owl-next{
        right: auto;
        left: 57px;
    }
    #mobilemainslider .owl-nav  button.owl-prev{
        left: 27px;
    }
    .blogcontent{
        height: auto;
    }
    .blogwrap{
        margin-bottom: 30px;
    }
    .modal.fade .modal-dialog {
        max-width: 100%;
    }
}
@media screen and (max-width: 500px) {
    .navbar-brand img,.header-scroll .navbar-brand img {
        width: 85px;
    }
}
@media screen and (max-width: 400px) {
    .navbar-brand img,.header-scroll .navbar-brand img {
        width: 75px;
    }
    #mobilemainslider .owl-nav button span{
        font-size: 38px;
    }
    #mobilemainslider .owl-nav button.owl-next,
    #mobilemainslider .owl-nav  button.owl-prev{
        width: 30px;
        height: 30px;
        top: 38%;
        background: transparent;
        border: 0;
    }
    #mobilemainslider .owl-nav button.owl-next{
        right: 10px;
        left: auto;
    }
    #mobilemainslider .owl-nav  button.owl-prev{
        left: 10px;
    }
}
@media screen and (max-width: 360px) {
    .navbar-brand img,.header-scroll .navbar-brand img {
        width: 65px;
    }
    #mobilemainslider .owl-nav button span{
        font-size: 38px;
    }
    #mobilemainslider .owl-nav button.owl-next,
    #mobilemainslider .owl-nav  button.owl-prev{
        width: 30px;
        height: 30px;
        top: 38%;
        background: transparent;
        border: 0;
    }
    #mobilemainslider .owl-nav button.owl-next{
        right: 10px;
        left: auto;
    }
    #mobilemainslider .owl-nav  button.owl-prev{
        left: 10px;
    }
}