@charset "utf-8";


/*===== Common CSS =====*/
/*===== HeaderFooter CSS =====*/

/*===== HomePage CSS =====*/
/*===== ViewOurCharter CSS =====*/
/*===== InfoGraphics CSS =====*/
/*===== Privacy Policy CSS =====*/


/*===== Responsive CSS =====*/

/*===============================
  ===============================*/

/*===== Common CSS =====*/

/*
font-family: "effra",sans-serif;
font-family: 'El Messiri', sans-serif;
*/

body { overflow: hidden; padding: 0; margin: 0; background: #ffffff; font-family: "effra", sans-serif; font-size: 17px; line-height: 24px; font-weight: normal; color: #03102b; position: relative; text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale; }
.pageload { overflow: auto; }

* { box-sizing:border-box; }
*:hover { -webkit-transition: all ease-out 0.3s; -moz-transition: all ease-out 0.3s; -o-transition: all ease-out 0.3s; transition: all ease-out 0.3s; }
*:focus, .btn-default-focus { box-shadow: none !important; outline:none !important; }

.btn, a, h2, h3 { font-family: 'El Messiri', sans-serif; }

h1, h2, h3, h4, h5, h6, p, ul { padding: 0; margin: 0; }

h1, h5 { font-size: inherit; display: block; }
h2 { font-size:34px; font-weight: 600; color: #ffffff; line-height: 34px; }
h3 { font-size:30px; font-weight: 600; color: #05163a; }


p { margin-bottom:25px; }
p:last-child { margin-bottom:0; }

img, svg { border: none; vertical-align: middle; max-width: 100%; }
ul li { list-style: none; }

a { cursor: pointer; color:#292929; font-weight: normal; outline: none !important; text-decoration: none; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
a:hover, a:focus { text-decoration: none; }
a, input, button, textarea, a:focus, select:focus { outline: none; }
a:hover, a:focus, select:focus, button:focus { color: #292340; outline: none; text-decoration: none; }
button, input, textarea { outline: none; -webkit-appearance: none; -moz-appearance: none; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }


.btn { font-size:19px; font-weight: 500; padding:5px 15px 3px; white-space: nowrap; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; box-shadow: 0 0 0 rgba(0,0,0,0); -webkit-box-shadow: 0 0 0 rgba(0,0,0,0); -moz-box-shadow: 0 0 0 rgba(0,0,0,0); }

.blue-btn { background: #0e87f8; color: #ffffff !important; border:2px solid #0e87f8; }
.blue-btn:hover { background: transparent; color: #0e87f8 !important; }

.green-btn { background: rgba(34,242,198,0.5); color: #ffffff !important; border:2px solid rgba(34,242,198,1); }
.green-btn:hover { background: transparent; color: rgba(34,242,198,1) !important; }

.grey-btn { background: rgba(255,255,255,0.25); color: rgba(255,255,255,1) !important; border:2px solid rgba(255,255,255,0.25); }
.grey-btn:hover { background: transparent; color: rgba(255,255,255,1) !important; }


input::-webkit-placeholder, textarea::-webkit-placeholder, input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; font-weight: 300; }
form .form-group { margin-bottom:15px; }
form label { font-size:12px; font-weight: normal; color: #ffffff; }
form label span.red { color: #f74747; }
form .form-control { display: block; color: #ffffff !important; font-weight: normal; font-size:16px; width:100%; height:42px; border:2px solid #394a6f; background: rgba(0,0,0,0.55); padding:0 12px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; }

form .form-control:focus { border:2px solid #0e88f8; background: rgba(0,0,0,0.9); }


.checkbox { margin:6px 0; }
.checkbox input[type="checkbox"] { display:none; }
.checkbox input[type="checkbox"] + label { color:#ffffff; cursor: pointer; margin:0px; font-size:16px; font-weight: 300; line-height: 18px; display: flex; align-items: flex-start; }
.checkbox input[type="checkbox"] + label span { min-width:17px; max-width:17px; height:17px; margin:2px 8px 0 0; background:url("../images/checkbox.svg")no-repeat center top / 17px; }

.checkbox input[type="checkbox"]:checked + label span { background:url("../images/checkbox.svg")no-repeat center bottom / 17px; }
.checkbox input[type="checkbox"]:checked + label { font-weight: 400; }




.loader { width: 100%; height: 100vh; position: fixed; z-index: 1021; left: 0; top: 0; display: table; background: #ffffff; transition: 0.25s ease-in-out; -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; }
.loader .center-box { display: table-cell; vertical-align: middle; text-align: center; }
.loader img { width:150px; object-fit: contain; display: block; margin: auto; position: relative; z-index: 1; -webkit-animation: grayscale 2.5s infinite; }

@-webkit-keyframes grayscale {
    0%,
    100% {
        width:150px;
    }

    50% {
        width:140px;
    }
}

.pageload .loader { left: 100%; }

header, main, section, footer { display: block; position: relative; }
.container { max-width:1140px; }
.mt-20 { margin-top:20px !important; }

/*===== *************** =====*/


/*===== HeaderFooter CSS =====*/
header { padding:25px 0; position: absolute; left:0; right:0; top:0; z-index: 1020; }
header .navbar { padding:0; align-items: flex-start; }
header .navbar-brand, header .navbar-brand a, header .navbar-brand img { display: block; padding:0; margin:0; width:185px; height:185px; object-fit: contain; }
header .navbar .navbar-collapse { justify-content: flex-end; }

header .navbar-nav .nav-link { font-size:19px; color: #ffffff; padding:10px 12px 8px !important; }
header .navbar-nav .nav-link:hover, header .navbar-nav .nav-link.active { color: #68b6ff; }


footer { background: #c1c8d8; padding:10px 0; position: fixed; left:0; right:0; bottom:0; }
footer .d-flex { justify-content: space-between; align-items: center; }
footer h5 { display: flex; align-items: center; }
footer h5 img { min-width:70px; max-width:70px; height:70px; object-fit: contain; margin-right:10px; opacity: 0.7; }
footer h5 span { font-size:16px; font-weight: 300; }
footer .btn { padding:3px 12px 1px; }

footer h6 a.link { font-family: "effra", sans-serif; margin-right:20px; opacity: 0.65; }
footer h6 a.link:hover { opacity: 1; }

/*===== *************** =====*/




/*===== HomePage CSS =====*/
/* Banner */
.banner-wrp { padding:250px 0 50px; background:#0e87f8 url("../images/homepage-banner.jpg")no-repeat center center / cover; }
.banner-wrp .partners-logos { display: flex; align-items: center; margin-bottom:30px; }
.banner-wrp .partners-logos a.vfs-logo, .banner-wrp .partners-logos a.vfs-logo img { display: block; width:201px; }
.banner-wrp .partners-logos a.logistiwerx-logo, .banner-wrp .partners-logos a.logistiwerx-logo img { display: block; width:259px; }
.banner-wrp .partners-logos a.logistiwerx-logo { margin:10px 0 0 20px; }
.banner-wrp .text p { font-size:20px; color: #ffffff; }



/* Join VFS */
.joinvfs-wrp { padding:30px 0; background: #05163a; }
.joinvfs-wrp .d-flex { justify-content: space-between; align-items: center; }
.joinvfs-wrp p { color: #ffffff; margin:0 80px 0 0; }



/* AboutUs */
.about-wrp { padding:50px 0 40px; }

.about-wrp .icon-text { display: flex; flex-direction: column; padding-right:20px; }
.about-wrp .icon-text img { width:41px; height:41px; object-fit: contain; margin:20px 0; }



/* Modal CSS */
.modal-backdrop { background: #020b1f !important; opacity: 0.6 !important; }

.modal.modal-static .modal-dialog { transform: scale(1); }
.modal-open { padding:0 !important; }
.modal-open header, .modal-open main, .modal-open footer { filter: blur(6px); -webkit-filter: blur(6px); -moz-filter: blur(6px); }
.modal-dialog { max-width:800px; }
.modal-content { background: transparent; border:none; }

.modal-header, .modal-body { border: none; padding:0; }
.modal-header h5.modal-title { font-family: 'El Messiri', sans-serif; width:100%; display: flex; justify-content: center; align-items: center; font-size:30px; line-height: 35px; color: #ffffff; font-weight: bold; margin-bottom:20px; }
.modal-header h5.modal-title img { min-width:63px; max-width:63px; height:63px; margin-right:20px; }

#JoinVFS_Modal .modal-body .col { max-width: 20%; min-width: 20%; }
.modal-body .btn { min-width:180px; margin:20px 10px 0; }

.g-recaptcha>div { margin: auto; display: block; }
#data_loader_top, #success-messag, .error { text-align: center; }
#data_loader_top img { width:50px; height:50px; object-fit: contain; display: block; margin: auto; position: fixed; left:0; right:0; top:0; bottom:0; z-index: 11111111111111; }
/*===== *************** =====*/


/*===== ViewOurCharter CSS =====*/
.innerpage header::before { content: ""; display: block; position: absolute; left:0; right:0; top:0; bottom:0;
    background-image: -moz-linear-gradient( -90deg, rgb(5,22,58) 0%, rgba(5,22,58,0.4) 60%, rgba(5,22,58,0) 100%, rgb(5,22,58) 100%);
    background-image: -webkit-linear-gradient( -90deg, rgb(5,22,58) 0%, rgba(5,22,58,0.4) 60%, rgba(5,22,58,0) 100%, rgb(5,22,58) 100%);
    background-image: -ms-linear-gradient( -90deg, rgb(5,22,58) 0%, rgba(5,22,58,0.4) 60%, rgba(5,22,58,0) 100%, rgb(5,22,58) 100%);
}
.innerpage header .navbar-brand { margin-top:-10px; }
.innerpage header .navbar-brand, .innerpage header .navbar-brand a, .innerpage header .navbar-brand img { width:72px; height:72px; }

.innerpage .banner-wrp { padding:150px 0 90px; }
.banner-wrp.banner-viewourcharter { background:#0e87f8 url("../images/viewourcharter-banner.jpg")no-repeat center center / cover; }
.banner-wrp.banner-infographic { background:#0e87f8 url("../images/infographics-banner.jpg")no-repeat center center / cover; }
.banner-wrp.banner-privacypolicy { background:#0e87f8 url("../images/privacypolicy-banner.jpg")no-repeat center center / cover; }




.text-wrp { padding:50px 0; }
.text-wrp .text { margin-bottom:40px; }
.text-wrp .text:last-child { margin-bottom:0; }
.text-wrp .text h3 { margin-bottom:5px; }
.text-wrp .text p { margin-bottom:20px; }
.text-wrp .text p.highlighted { font-weight: 500; font-style: italic; padding:3px 10px; background: #c0d7ec; display: inline-block; margin-bottom:10px; border-radius: 2.5px; -webkit-border-radius: 2.5px; -moz-border-radius: 2.5px; }
.text-wrp .text a { font-family: "effra",sans-serif; font-style: italic; color: #0e87f8; text-decoration: underline; }

.member-index .single-block { margin-bottom:5px; }
.member-index .single-block .number { margin-right:20px; }
.member-index .single-block ul li { padding-left:25px; }


.future-logistics { padding:50px 0; background: url("../images/future-logistics.jpg")no-repeat right top / cover; }
.future-logistics img.illustration { width:100%; margin:15px 0; }

.future-logistics ul { padding:15px 5px; background: rgba(9,21,41,0.7); display: flex; justify-content: space-between; align-items: flex-start; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.future-logistics ul li { position: relative; padding:0 15px; min-width:33.33%; max-width:33.33%; }
.future-logistics ul li::before { content: ""; display: block; position: absolute; left:5px; top:5px; width:5px; height:5px; background: #0e87f8; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; }
.future-logistics ul li p { color: #ffffff; font-size:14px; line-height: 16px; font-weight: 300; }

/*===== *************** =====*/



/*===== InfoGraphics CSS =====*/
.carriers-wrp { padding:70px 0 80px; background: url("../images/carriers-bg.jpg")no-repeat center center / cover; }
.carriers-wrp h3 { color: #ffffff; }
.carriers-wrp ul { display: flex; flex-wrap: wrap; margin:10px 0 80px; }
.carriers-wrp ul:last-child { margin-bottom:0; }
.carriers-wrp ul li { width:20%; }
.carriers-wrp ul li img { max-width:90%; height:95px; object-fit: contain; object-position: left center; display: block; }

/*===== *************** =====*/


/*===== Privacy Policy CSS =====*/
.privacypolicy-wrp { padding:60px 0; }
.privacypolicy-wrp h3, .privacypolicy-wrp h4 { margin-bottom:10px; }

.privacypolicy-wrp ul, .privacypolicy-wrp ul li { margin:0; padding:0; } 
.privacypolicy-wrp ul { margin-bottom:25px; }
.privacypolicy-wrp ul li { padding-left:17px; margin:10px 0; position: relative; }
.privacypolicy-wrp ul li::before { content: "" ; display: block; position: absolute; left:0; top:9px; width:5px; height:5px; background: rgba(0,0,0,0.5); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } 

.privacypolicy-wrp a.link { font-family: "effra", sans-serif; font-weight: bold; }
.privacypolicy-wrp a.link:hover { color: #0e87f8; }

/*===== *************** =====*/




/*===== Responsive CSS =====*/

@media screen and (max-height: 1080px) {
    
    footer { position: relative; }
    
}


@media screen and (max-width: 1199px) {
    
    body { font-size:16px; }
    .btn, header .navbar-nav .nav-link { font-size:17px; }
      
    /* HeaderFooter CSS */
    header .navbar-brand, header .navbar-brand a, header .navbar-brand img { width:150px; height:150px; }
    header .navbar-nav .nav-link { padding:7px 12px 6px !important; }
    
    
    /* HomePage CSS */
    
    
    /* ViewOurCharter CSS */
    
    
    
    /* InfoGraphics CSS */
    
    
}



@media screen and (max-width: 991px) {
    
    h2, .modal-header h5.modal-title { font-size:28px; line-height: 30px; }
    h3 { font-size:25px; }
    
    /* HeaderFooter CSS */
    header { padding:20px 0; }
    header .navbar-brand, header .navbar-brand a, header .navbar-brand img { width:120px; height:120px; }
    
    footer h5 span { font-size:14px; }
    
    
    /* HomePage CSS */
    .banner-wrp { padding:200px 0 50px; }
    .banner-wrp .partners-logos a.vfs-logo, .banner-wrp .partners-logos a.vfs-logo img, .banner-wrp .partners-logos a.logistiwerx-logo, .banner-wrp .partners-logos a.logistiwerx-logo img { width:180px; }
    .banner-wrp .text p { font-size:18px; }
    .about-wrp .icon-text { padding:0; }
    
    
    /* ViewOurCharter CSS */
    
    
    
    /* InfoGraphics CSS */
    .carriers-wrp { padding:50px 0 60px; }
    .carriers-wrp ul { margin:10px 0 50px; }
    .carriers-wrp ul li img { height:80px; max-width:100%; }
    
    
    
    
}



@media screen and (max-width: 767px) {
    body { font-size: 15px; }
    .btn, header .navbar-nav .nav-link { font-size: 16px; }
    
    /* HeaderFooter CSS */
    header .navbar-brand, header .navbar-brand a, header .navbar-brand img { z-index: 1; }
    header .navbar .navbar-collapse { position: absolute; right: 0; left: 0; top: 45px; background: rgba(0,0,0,0.65); }
    header .navbar-nav .nav-link { padding:7px 15px !important; text-align: right; }
    header .navbar-nav .nav-item.btn-item { text-align: right; }
    header .navbar-nav .nav-item.btn-item .btn { margin:5px 15px 10px; }
    
    .hamburger { padding:0; border: none !important; }
    .hamburger .line { width:30px; height:2px; background: #ffffff; display: block; margin:10px 0; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
    .hamburger.is-active .line:nth-child(2){ opacity: 0; }
    .hamburger.is-active .line:nth-child(1){ -webkit-transform: translateY(12px) rotate(45deg); -ms-transform: translateY(12px) rotate(45deg); -o-transform: translateY(12px) rotate(45deg); transform: translateY(12px) rotate(45deg); }
    .hamburger.is-active .line:nth-child(3){ -webkit-transform: translateY(-12px) rotate(-45deg); -ms-transform: translateY(-12px) rotate(-45deg); -o-transform: translateY(-12px) rotate(-45deg); transform: translateY(-12px) rotate(-45deg); }
    
    
    /* HomePage CSS */
    .banner-wrp .text { text-align: center; }
    .banner-wrp .partners-logos { justify-content: center; }
    .banner-wrp .partners-logos a { margin:0 15px !important; }
    .banner-wrp .partners-logos a.logistiwerx-logo { margin-top:10px !important; }
    
    .joinvfs-wrp .d-flex { flex-direction: column; align-items: center; text-align: center; }
    .joinvfs-wrp p { margin:0 0 20px; }
    .about-wrp { padding:30px 0; }
    .about-wrp .icon-text { margin:20px 0; align-items: center; text-align: center; }
    .about-wrp .icon-text img { margin-bottom:10px; }
    
    
    .modal-header, .modal-body { padding:0 15px; }
    
    
    /* ViewOurCharter CSS */
    .banner-wrp.banner-viewourcharter { background: #0e87f8 url("../images/viewourcharter-banner.jpg")no-repeat right center / cover; }
    
    
    
    /* InfoGraphics CSS */
    .future-logistics ul { flex-direction: column; }
    .future-logistics ul li { padding:5px 5px 5px 20px; min-width: 100%; max-width: 100%; }
    .future-logistics ul li::before { top:11px; }
    
    
}



@media screen and (max-width: 576px) {
    
    h2, .modal-header h5.modal-title { font-size:25px; line-height: 28px; }
    h3 { font-size:23px; }
    
    /* HeaderFooter CSS */
    header .navbar-brand, header .navbar-brand a, header .navbar-brand img { width:100px; height:100px; }
    
    footer { padding:20px 0; text-align: center; }
    footer h5 img { margin:0; }
    footer .d-flex, footer h5 { flex-direction: column; }
    footer h5 span { margin:10px 0 25px; }
    
    /* HomePage CSS */
    .banner-wrp .text p { font-size:16px; }
    
    
    /* ViewOurCharter CSS */
    
    
    
    /* InfoGraphics CSS */
    .carriers-wrp ul li { width:33%; padding-right:15px; }
    .carriers-wrp ul li img { height:70px; }
    
    
           
}

/*===== *************** =====*/