/*
Design URL  :   Multi Collars Services - 11sep2024
Design by   :   Cross Country Webservices  
Designer    :   Rajesh Kumar Kukreja
Version     :   HTML5/ CSS3 / Bootstrap 4.7
*/

/* font-family: 'TitlingGothicFB Comp';*/
/*@import url('https://fonts.cdnfonts.com/css/titlinggothicfb-comp?styles=21098,21096,21094');*/

/*font-family: 'Roboto Condensed', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

/*font-family: 'Quicksand', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');


html {   scroll-behavior: smooth;   /*font-size: 62.5%;*/}  
*{ padding: 0px; margin: 0px;  }  * { box-sizing: border-box; } 
*:focus, *:visited { outline: none; text-decoration: none; }
a:hover, a:focus { outline: none; text-decoration: none;}
body{ font-family: 'Quicksand', sans-serif;  /* font-weight: 400; */ font-size:18px; line-height: 28px;  /*color:#3a3a3a; */  color: #d5d5d5;} 
h1, h2, h3, h4, h5{ font-family: 'Roboto Condensed', sans-serif;  font-weight: 700;
/* letter-spacing: -0.90em; */
}
p{  font-family: 'Quicksand', sans-serif;  font-size: 18px;  line-height:30px; color:#3a3a3a; font-weight: 400;   text-decoration:none;
 margin:0px; padding:0px; margin-bottom: 15px;}
p a, p a:active, p a:visited {color:#3a3a3a;} p a:hover{color:#000; } 
p strong{   font-weight: bold; color:#3a3a3a; }   em{ font-weight:normal;} 

/*#myBtn { display: none; position: fixed; bottom: 5px; right: 5px; z-index: 99999; font-size: 13px; border: none; outline: none; 
  background-color: #111; background: #e72324;    color: white;  font-weight: 300; cursor: pointer;   padding: 10px 10px;   border-radius: 50px; }
#myBtn:hover {   opacity: 0.8; }*/
.btn { background-color: transparent; border: 1px solid #eee; border-radius: 0;  color:#eee; cursor: pointer; display: inline-block; 
position: relative; text-transform: none; transition: background-color 0.2s, color 0.2s; white-space: nowrap; 
letter-spacing: 0.10em; padding:10px 20px; margin-top: 10px;  } 
.btn:hover, .btn:focus { opacity: 0.9;  outline: none; border: 1px solid #b02a30; border-radius: 0;  color:#b02a30;
  box-shadow: 0 0 0 0.2rem rgb(0 0 0 / 1%);}

/* Navbar */
.fix-nav { background-color: #fff; border-bottom: 1px solid #ddd;    z-index: 9999999999;  }
.sticky { position: fixed; top: 0; width: 100% }

nav.navbar {   padding: .7rem 0px;   max-width: 1200px;  margin: 0 auto; }
nav.navbar .navbar-brand{    padding: 0.2125rem   0; max-width: 284px;}

.navbar-expand-lg .navbar-nav .nav-link {  font-size:13px; line-height: 18px; font-weight: 700; color: #292c32;  text-transform: uppercase;
  padding-right: 1.5rem;  padding-left: 1.5rem; text-align: center;     }
.navbar-expand-lg .navbar-nav .nav-link {  padding: 0 1.2rem; } 

/* 20june2022 */
.navbar-expand-lg .navbar-nav .nav-link span{ display: block; }
.navbar-expand-lg .navbar-nav li.nav-item {  align-items: center;  display: flex; }
.navbar-expand-lg .navbar-nav li.nav-item .trial-btn{ background-color: #349839;   border: none; border-radius: 0;  color:#fff;  
  cursor: pointer; display: inline-block; position: relative; /*text-transform: none;*/ transition: background-color 0.2s, color 0.2s; white-space: nowrap;  
  padding:7px 16px;  margin-top: 0px; margin-left: 2rem; margin-right: 170px;  }

.navbar-expand-lg .navbar-nav li.nav-item .trial-btn:hover, .navbar-expand-lg .navbar-nav li.nav-item .trial-btn:focus { 
  opacity: 0.7;  outline: none;}

.nav-item.social-media{ float: right; top: 15px; }
.nav-item.social-media .fa {font-size:14px; width:14px; color: #4c4c4c; text-align:center; text-decoration:none; margin: 0.7px 7px; border-radius: 50%; }   
.nav-item.social-media .fa:hover { opacity: 0.7; }


/*.header-img {   height: 95vh; overflow: hidden; z-index: 1; position: relative;} 
.header-img img {   width: 100%;   height: auto;  }
*/
.header-img-container {  height: 92vh; width: 100%;   /*height: 100%;*/  background: #000; z-index: 1; position: relative;} 
.header-img {  height: 92vh;    background-size: cover !important;  background-repeat: no-repeat !important;  background-position: center !important;  }
.header-img .layer {position: absolute; top: 0; left: 0; width: 100%;  height: 92vh; background-color: rgba(0, 0, 0, 0.10); }

.header-img .carousel-caption { font-family: 'Roboto Condensed', sans-serif; position: absolute;   bottom: 25%;   text-align: center; left: 10%; right: 10%; }
.header-img .carousel-caption h2{ font-size: 72px;  line-height: 82px;  color: #fff; text-shadow: 4px 3px 4px rgba(0, 0, 0, 0.5);  }
.header-img .carousel-caption p{ font-family: 'Roboto Condensed', sans-serif; font-size: 20px;  line-height: 24px;  letter-spacing: 0.1rem; color: #fff;  font-weight: 500; margin:15px 0; text-shadow: 4px 3px 4px rgba(0, 0, 0, 0.5);}
.header-img .carousel-caption a.btn{  color:#fff;  font-size: 16px; text-transform: uppercase;  min-width: 200px;  background: #349839; border: 1px #349839 solid;}
.header-img .carousel-caption a.btn:hover{ color:#fff; background:none; border:1px solid #fff; }

/* Video Banner */
/*.header-video {   height: 95vh; overflow: hidden; z-index: 1; position: relative;} 
.header-video video {   width: 100%;   height: auto; }
.header-video .layer {position: absolute; top: 0; left: 0; width: 100%;  height: 100vh; background-color: rgba(0, 0, 0, 0.10); }
.header-img .carousel-caption { font-family: 'Roboto Condensed', sans-serif; position: absolute;   bottom: 30%;   text-align: center; left: 10%; right: 10%; }
.header-img .carousel-caption h2{ font-size: 72px;  line-height: 82px;  color: #fff; text-shadow: 4px 3px 4px rgba(0, 0, 0, 0.5);  }
.header-img .carousel-caption p{ font-family: 'Roboto Condensed', sans-serif; font-size: 20px;  line-height: 24px;  letter-spacing: 0.1rem; color: #fff;  font-weight: 500; margin:15px 0; text-shadow: 4px 3px 4px rgba(0, 0, 0, 0.5);}
.header-img .carousel-caption a.btn{  color:#fff;  font-size: 16px; text-transform: uppercase;  min-width: 200px;  background: #349839; border: 1px #349839 solid;}
.header-img .carousel-caption a.btn:hover{ color:#fff; background:none; border:1px solid #fff; }
*/
.container{ max-width: 1200px; }

/* Single Page Link */
#aboutus, #about-mcs, #portfolio, #services,  #reachus, #industries{ position: relative;  top: -60px;   height: 0;   width: 0;     opacity: 0;     display: block; }  


/* About */
section.about{ padding: 5rem 0rem; } 
section.about p{ margin-bottom:10px; }
section.about p small{ font-size:16px; line-height: 22px; color:#9c9b9b; font-weight:600; margin-bottom:7px; } 
section.about h2{font-size: 68px; line-height: 68px;  color: #b7b7b7; text-transform: uppercase; margin-bottom:25px; }
section.about h2:after{ border-bottom:3px solid #349839; display: block; content: " "; position:relative;  padding-bottom: 10px; width: 61px;}
section.about p big{ font-size:24px; line-height: 32px; color:#9c9b9b; font-weight:400;  } 


/* why us */
section.why-us1{ background:#f5f5f5;  padding: 5rem 0rem;  } 
section.why-us1 p{ margin-bottom:10px; font-size:16px; line-height: 28px;  color:#6e6e6e;  }
section.why-us1 .container-fluid{ padding:0px; }

section.why-us1 p small{ font-size:16px; line-height: 22px; color:#aaa9a9; font-weight:600; margin-bottom:7px; text-transform:uppercase; } 
section.why-us1 h2{font-size: 56px; line-height: 58px;  color: #aaa9a9; text-transform: uppercase; margin-bottom:15px; }
section.why-us1 h2 span{ display: block;  }

section.why-us1 .cards { margin-bottom:25px; }
section.why-us1 .cards h3{  font-family: 'Quicksand', sans-serif; font-size: 22px; line-height: 32px;  color: #707070; font-weight: 700; margin-bottom:15px; }
section.why-us1 .cards h3:after{ border-bottom:1px solid #349839; display: block; content: " "; position:relative;  padding-bottom: 10px;
 width: 61px;}
section.why-us1 .cards h3 span{ font-weight:400; }
section.why-us1 .cards p{ margin-bottom:10px; font-size:16px; line-height: 25px;  color:#6e6e6e;   padding-right:25px;   }


/* 10sep2024 */
section.why-us1.about-mcs{ background:#fff; }

/* Portfolio */
section.port{ overflow:hidden; }
section.port{ padding: 5rem 0rem; background:#000; } 
section.port p{ margin-bottom:10px; }
section.port .container-fluid{ padding:0px; }
section.port p small{ font-size:16px; line-height: 22px; color:#e4e4e4; font-weight:600; margin-bottom:7px; } 
section.port h2{font-size: 72px; line-height: 78px;  color: #e4e4e4; text-transform: uppercase; margin-bottom:25px; }
section.port h2:after{ border-bottom:3px solid #349839; display: block; content: " "; position:relative;  padding-bottom: 10px; width: 61px;}

/* external css: flickity.css */
.carousel {    }
.carousel-cell {   width: 28%;   margin-right: 10px;  background: #8C8;   border-radius: 5px; }

/*  */
.flickity-page-dots {  position: absolute;  width: 100%;  bottom: -40px;  padding: 0;   margin: 0;  list-style: none; 
   text-align: left; line-height: 1; left:7%; }
.flickity-page-dots .dot { display: inline-block; width: 16px;   height: 16px;  margin: 0 2px;  background: #349839; 
 border-radius: 50%;   opacity: .25; cursor: pointer; }

section.why-us{ background:#fafafa;  padding: 5rem 0rem;  } 
section.why-us p{ margin-bottom:10px; font-size:16px; line-height: 28px;  color:#6e6e6e;  }
section.why-us .container-fluid{ padding:0px; }

section.why-us p small{ font-size:16px; line-height: 22px; color:#aaa9a9; font-weight:600; margin-bottom:7px; text-transform:uppercase; } 

section.why-us h2{font-size: 56px; line-height: 58px;  color: #aaa9a9; text-transform: uppercase; margin-bottom:25px; }
section.why-us h2 span{ display: block;  }

section.why-us .cards h3{  font-family: 'Quicksand', sans-serif; font-size: 22px; line-height: 32px;  color: #707070; font-weight: 700; margin-bottom:15px; }
section.why-us .cards h3:after{ border-bottom:1px solid #349839; display: block; content: " "; position:relative;  padding-bottom: 10px;
 width: 61px;}

section.why-us .cards h3 span{ font-weight:400; }
section.why-us .cards p{ margin-bottom:10px; font-size:16px; line-height: 25px;  color:#6e6e6e; max-width:330px;  }

/* Industries */
section.why-us.industries h3{font-family: 'Roboto Condensed', sans-serif; 
  font-size: 26px; line-height: 26px; font-weight: 700;  color: #aaa9a9;   margin-bottom:25px; }


/* Applications */
section.app{ padding: 5rem 0rem; } 
section.app p{ margin-bottom:10px; }
section.app p small{ font-size:16px; line-height: 22px; color:#9c9b9b; font-weight:600; margin-bottom:7px; } 
section.app h2{font-size: 72px; line-height: 78px;  color: #b7b7b7; text-transform: uppercase; margin-bottom:25px; }
section.app h2:after{ border-bottom:3px solid #349839; display: block; content: " "; position:relative;  padding-bottom: 10px; width: 61px;}
section.app p{ font-size:16px; line-height: 26px; color:#777777; font-weight:500;  } 
section.app .containerBox { position: relative;  width: 100%; margin-bottom:30px; }
section.app .containerBox .image {display: block;   width: 100%;   height: auto; }

section.app .overlay1 { position: absolute; top: 0;  bottom: 0;  left: 0;  right: 0;  height: 100%;  width: 100%;  opacity: 1;  transition: .5s ease;
  background-color: rgba(0, 0, 0, 0.30);  }

/*.text { color: white;  font-size: 20px;   position: absolute;   top: 50%;  left: 50%;  -webkit-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);   transform: translate(-50%, -50%);   text-align: center;} */

section.app .text {   color: white;  font-size: 20px;   position: absolute;   top: 43%;  width: 100%; text-align: center;}
section.app .overlay1 .text h3{ font-size:42px; line-height:52px; color:#fff; text-transform:initial; }
section.app .containerBox:hover .overlay1 {  opacity: 0.8; cursor: pointer; }

/*section.app .containerBox:hover .overlay1 {  opacity: 0; }*/

section.app .overlay2 { position: absolute; top: 0;  bottom: 0;  left: 0;  right: 0;  height: 100%;  width: 100%;  opacity: 0;  transition: .5s ease;
  background-color: #008CBA; background-color: rgba(52, 152, 57, 0.90);}

section.app .containerBox:hover .overlay2 {  opacity: 1; }

section.app .overlay2 .text2 {   color: white;  font-size: 20px;   position: absolute;   top: 25%;  left: 0%;   text-align: center; padding: 20px 50px; }
section.app .overlay2 .text2 h3{ font-size:42px; line-height:52px; color:#fff; text-transform:initial; }
section.app .overlay2 .text2 p{ font-size:16px; line-height:22px; color:#fff; text-transform:initial; }


/* Footer */
footer.footer{ background:#000; padding:4rem 0 2rem 0;}
footer.footer .enquiry{ max-width:430px;  margin-bottom:40px;} 
footer.footer .enquiry p{ margin-bottom:10px; }
footer.footer .enquiry p small{ font-size:16px; line-height: 22px; color:#e4e4e4; font-weight:400; margin-bottom:7px; } 
footer.footer .enquiry h2{font-size: 42px; line-height: 52px;  color: #e4e4e4;     margin-bottom:25px; }
footer.footer .enquiry h2:after{ border-bottom:3px solid #349839; display: block; content: " "; position:relative;  padding-bottom: 10px; width: 61px;}
footer.footer .enquiry p{ font-size:16px; line-height: 26px; color:#777777; font-weight:500;  } 

/*footer.footer .enquiry .form-group label{  font-size: 14px; line-height: 20px; color: #d5d5d5; font-weight: 500; margin-bottom: 7px; }*/

footer.footer .enquiry .form-group .form-control{  font-size: 14px; color:#000; font-weight: 700; border-radius: 0;  
  background: #fff; border: 0px solid #7e716f;   min-height: 44px;   /*box-shadow: 3px 2px 10px 0px rgba(255,255,255,0.25);*/}
footer.footer .enquiry .form-group .form-control:focus {  border-color: #7e716f;    box-shadow: 3px 2px 5px 0px rgb(255 255 255 / 15%); }


footer.footer .enquiry .btn{ color: #fff; font-size: 13px; text-transform: uppercase; font-weight: 500; background: #349839;  border:0; padding:7px 25px;   }
footer.footer .enquiry .btn:hover{  opacity: 0.7;    }

/*.ajax-response-output {  color: #ffc107; font-size: 16px;} p.error { color: #ffc107; }*/
.ajax-response-output, p.error { color: #ffc800;     font-size: 14px;     font-weight: 300; }


/**** Placeholder Css ***/
footer.footer .enquiry ::-webkit-input-placeholder { /* WebKit, Blink, Edge */  font-size: 15px; color:#515151;  font-weight: 600;  }
footer.footer .enquiry :-moz-placeholder { /* Mozilla Firefox 4 to 18 */  font-size: 15px; color:#515151;  font-weight: 600;     opacity:  1; }
footer.footer .enquiry ::-moz-placeholder { /* Mozilla Firefox 19+ */    font-size: 15px; color:#515151;  font-weight: 600;     opacity:  1; }
footer.footer .enquiry :-ms-input-placeholder { /* Internet Explorer 10-11 */   font-size: 15px; color:#515151;  font-weight: 600;  } 
footer.footer .enquiry ::-ms-input-placeholder { /* Microsoft Edge */    font-size: 15px; color:#515151;  font-weight: 600; }
 
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */


/* Footer */
footer.footer{ background:#000; padding:4rem 0 0.5rem 0;  min-height: 500px;}
footer.footer .contact{ max-width:430px; margin-bottom:40px; } 
footer.footer .contact p{ margin-bottom:10px; }
footer.footer .contact p small{ font-size:16px; line-height: 22px; color:#e4e4e4; font-weight:400; margin-bottom:7px; } 
footer.footer .contact h2{font-size: 52px; line-height: 62px;  color: #e4e4e4;   margin-bottom:25px; }
footer.footer .contact h2:after{ border-bottom:3px solid #349839; display: block; content: " "; position:relative;  padding-bottom: 10px; width: 61px;}

/*content*/
footer.footer .contact h3{font-size: 22px; line-height: 32px;  color: #e4e4e4; font-weight: 500;   margin-top:15px; }
footer.footer .contact p{ font-size:16px; line-height: 26px; color:#a9a9a9; font-weight:500; margin-bottom:15px;  } 

footer.footer .contact p a{  color:#349839; } 
footer.footer .contact p a:hover{  color:#fff; } 

footer.footer .disclaimer p a{  color:#349839; } 
footer.footer .disclaimer p a:hover{  color:#fff; } 



footer.footer p{ font-size:15px; line-height: 24px; color:#a9a9a9; font-weight:400; margin-bottom:15px;  } 
footer.footer p strong{color:#a9a9a9; }

/* copyrights */
footer .copyrights{ background:#171717; padding:0.7rem; margin-top: 30px;}
footer .copyrights p{ font-size:13px; line-height:18px; color:#fff; margin-bottom:0px; }
footer .copyrights p a{  color:#7e7e7e; }
footer .copyrights p a:hover{  color:#999; }


footer.footer .contact p.media a{  color:#cacaca; font-size:22px; margin-right:15px; }
footer.footer .contact p.media a:hover{  color:#fff;  }



/* #    Media Queries by Rajesh Kumar Kukreja : Cross Country Webservices
============================================================================================================== */ 


/* Desktop resolution  : screen 01 */
@media only screen and (min-width: 2301px) and (max-width: 2900px) {  
.navbar,footer .container-fluid{ max-width: 1310px; }
}


/* Desktop resolution : screen 02 */
@media only screen and (min-width: 1901px) and (max-width: 2300px) { 
.navbar,footer .container-fluid{ max-width: 1310px; }
}


/* Desktop resolution : screen 03 */
@media only screen and (min-width: 1601px) and (max-width: 1900px) { 
.navbar,footer .container-fluid{ max-width: 1310px; }
}


/* Desktop resolution : screen 04 */
@media only screen and (min-width: 1441px) and (max-width: 1600px) {  
.navbar,footer .container-fluid{ max-width: 1310px; }
}

/* 15.6 Laptop resolution : screen 05 */
@media only screen and (min-width: 1281px) and (max-width: 1440px) { }


/* Smaller than standard 960 (devices and browsers) : screen 06 */
@media only screen and (min-width: 1025px) and (max-width: 1280px) { 
nav.navbar {  padding: 0.7rem 2rem; }
.navbar-expand-lg .navbar-nav .nav-link { padding:0 0.9rem; } 
.navbar-expand-lg .navbar-nav li.nav-item .trial-btn { /*margin-right: 3rem;*/ margin:0 2rem; }
}


/* Smaller than standard 960 (devices and browsers) : screen 07 */
@media only screen and (min-width: 990px) and (max-width: 1024px) { 
nav.navbar {  padding: 0.7rem 1.8rem; }
.navbar-expand-lg .navbar-nav .nav-link { padding:0 0.9rem; } 
.navbar-expand-lg .navbar-nav li.nav-item .trial-btn { margin:0 0.9rem; }
}


/* Tablet Portrait size to standard 990 (devices and browsers) : screen 08 */
@media only screen and (min-width: 959px) and (max-width: 990px) { 
nav.navbar {  padding: 0.7rem 1.8rem; }
.navbar-expand-lg .navbar-nav .nav-link { padding:0 0.9rem; } 
.navbar-expand-lg .navbar-nav li.nav-item .trial-btn { margin:0 0.9rem; }
}
    
    
/* Tablet Portrait size to standard 960 (devices and browsers) : screen 09 */
@media only screen and (min-width: 768px) and (max-width: 959px) {
nav.navbar {  padding: 0rem 1.8rem; }
nav.navbar .navbar-brand {  padding: 1.2125rem 0; }
.navbar-collapse {  margin-bottom: 15px; }  

.navbar-nav { /*text-align: right; max-width: 300px; */}    
.navbar-nav li.nav-item{ background: #f5f5f5; margin-bottom: 3px; }
.navbar-expand-lg .navbar-nav .nav-link span { display:contents; }
.navbar-expand-lg .navbar-nav li.nav-item .trial-btn { margin-left: 1rem; }
 
/**/
.header-video video {  width: 100vw;  height: 100vh;  object-fit: cover;  position: absolute;  left: 0px;  top: 0px; }


/* apps */
section.app .text {   top: 40%;  }
section.app .overlay1 .text h3 {  font-size: 32px;  line-height: 42px; }

section.app .overlay2 .text2 {   top: 5%;  left: 0%;   text-align: center; padding: 10px 20px; }
section.app .overlay2 .text2 h3{  font-size: 32px;  line-height: 42px; color:#fff; text-transform:initial; }
section.app .overlay2 .text2 p{ font-size:16px; line-height:22px; color:#fff; text-transform:initial; }


/* external css: flickity.css */
.carousel {    }
.carousel-cell {   width: 66%;   margin-right: 10px;  background: #8C8;   border-radius: 5px; }

}
    
    
/* All Mobile Sizes (devices and browser) : screen 10 */
@media only screen and (max-width: 800px) { }


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) : screen 11 */
@media only screen and (min-width: 480px) and (max-width: 767px) {  

html { font-size: 62.5%;} 

nav.navbar {  padding: 0rem 1.8rem; }
nav.navbar .navbar-brand {  padding: 1.2125rem 0; }
.navbar-collapse {  margin-bottom: 15px; }  

.navbar-nav { /*text-align: right; max-width: 300px; */}    
.navbar-nav li.nav-item{ background: #f5f5f5; margin-bottom: 3px; }
.navbar-expand-lg .navbar-nav .nav-link span { display:contents; }
.navbar-expand-lg .navbar-nav li.nav-item .trial-btn { margin-left: 1rem; }

.navbar-toggler-icon {  width: 2.7rem;   height: 2.7rem; }
/**/

.header-video video {  width: 100vw;  height: 100vh;  object-fit: cover;  position: absolute;  left: 0px;  top: 0px; }
.header-img .carousel-caption h2 {  font-size: 7.6rem;  line-height: 7.6rem; }

/*  */
section.port h2, section.about h2, section.app h2  {  font-size: 52px;   line-height: 62px; }
section.why-us h2, footer.footer .enquiry h2, footer.footer .contact h2 { font-size: 42px;  line-height: 52px; }

/*  */
section.why-us .cards p {   max-width: 500px; margin-bottom:25px; }

/* external css: flickity.css */
.carousel {    }
.carousel-cell {   width: 77%;   margin-right: 10px;  background: #8C8;   border-radius: 5px; }

footer.footer .contact p{ max-width:225px; }

/* apps */
section.app .text {   top: 40%;  }
section.app .overlay1 .text h3 {  font-size: 32px;  line-height: 42px; }

section.app .overlay2 .text2 {   top: 5%;  left: 0%;   text-align: center; padding: 10px 20px; }
section.app .overlay2 .text2 h3{  font-size: 32px;  line-height: 42px; color:#fff; text-transform:initial; }
section.app .overlay2 .text2 p{ font-size:16px; line-height:22px; color:#fff; text-transform:initial; }
}
  

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) : screen 12 */
@media only screen and (max-width: 479px) {  
html { font-size: 62.5%;} 
nav.navbar {  padding: 0rem 1.8rem; }
nav.navbar .navbar-brand {  padding: 1.2125rem 0; }
.navbar-collapse {  margin-bottom: 15px; }  

.navbar-nav { /*text-align: right; max-width: 300px; */}    
.navbar-nav li.nav-item{ background: #f5f5f5; margin-bottom: 3px; }
.navbar-expand-lg .navbar-nav .nav-link span { display:contents; }
.navbar-expand-lg .navbar-nav li.nav-item .trial-btn { margin-left: 1rem; }
/*.navbar-expand-lg .navbar-nav li.nav-item {   align-items: center;   display: block; }*/
.navbar-toggler-icon {  width: 2.7rem;   height: 2.7rem; }

/**/
.header-img video {  width: 100vw;  height: 100vh;  object-fit: cover;  position: absolute;  left: 0px;  top: 0px; }
.header-img .carousel-caption h2 {  font-size: 4.6rem;  line-height: 4.6rem; }

 
/*  */
section.port h2, section.about h2, section.app h2  {  font-size: 52px;   line-height: 62px; }
section.why-us h2, footer.footer .enquiry h2, footer.footer .contact h2 { font-size: 42px;  line-height: 52px; }


/*  */
section.why-us .cards p {   max-width: 500px; margin-bottom:25px; }

/* external css: flickity.css */
.carousel {    }
.carousel-cell {   width: 88%;   margin-right: 10px;  background: #8C8;   border-radius: 5px; }


/* apps */
section.app .text {   top: 40%;  }
section.app .overlay1 .text h3 {  font-size: 26px;  line-height: 36px; }

section.app .overlay2 .text2 {   top: 5%;  left: 0%;   text-align: center; padding: 10px 20px; }
section.app .overlay2 .text2 h3{  font-size: 26px;  line-height: 36px; color:#fff; text-transform:initial; }
section.app .overlay2 .text2 p{ font-size:16px; line-height:22px; color:#fff; text-transform:initial; }

}
    

/* Small devices (mobile, 360px and down) : screen 13 */
@media only screen and (max-width: 360px) {  }


/* Small devices (mobile, 320px and down) : screen 14 */
@media only screen and (max-width: 320px) {   }
 

 /* external css: flickity.css */
/** { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel { background: #EEE; }
.carousel-cell { width: 66%; height: 200px;  margin-right: 10px;   background: #8C8;   border-radius: 5px;  counter-increment: carousel-cell;}
*/
/* cell number */
/*.carousel-cell:before {   display: block;  text-align: center;  content: counter(carousel-cell);  line-height: 200px;  font-size: 80px; color: white; }*/
/*  */