@font-face { font-family: 'RobotoBold';  font-weight: bold;  font-style: normal;  src: url('../fonts/Roboto-Bold.woff2') format('woff2'), url('../fonts/Roboto-Bold.woff') format('woff');}
@font-face { font-family: 'RobotoRegular';  font-weight: normal; font-style: normal;  src: url('../fonts/Roboto-Regular.woff2') format('woff2'), url('../fonts/Roboto-Regular.woff') format('woff');}
@font-face { font-family: 'RobotoMedium';  font-weight: 500; font-style: normal;  src: url('../fonts/Roboto-Medium.woff2') format('woff2'), url('../fonts/Roboto-Medium.woff') format('woff');}

@font-face {
 font-family: 'NimbusSanLBold'; font-weight: bold;  font-style: normal;
 src: url('../fonts/NimbusSanL-Bol-webfont.woff') format('woff');
}
@font-face {
 font-family: 'NimbusSanLRegular'; font-weight: regular;  font-style: normal;
 src: url('../fonts/NimbusSanL-Reg-webfont.woff') format('woff');
}

@media (min-width: 1500px){ .container{ max-width:1440px!important;} }
/********** Template CSS **********/

.gotop {
 border-radius: 15%;
 color: #ffffff;
 background-color: #851A1C ;
 border-color: #851A1C ;
 box-shadow: rgb(0 0 0 / 9%) 0px 2px 1px, rgb(0 0 0 / 9%) 0px 4px 2px, rgb(0 0 0 / 9%) 0px 8px 4px, rgb(0 0 0 / 9%) 0px 16px 8px, rgb(0 0 0 / 9%) 0px 32px 16px;
}
.back-to-top {
 position: fixed;
 display: none;
 right: 20px;
 bottom: 35px;
 z-index: 99;
}
.topicon {
 line-height: 2.5!important;
 vertical-align: -9px !important;
}
/**** whatsapp chat icon ****/
.whtsapp-icon {
 position: fixed;
 right: 80px;
 bottom: 32px;
 z-index: 120;
 
 -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transition: 250ms color;
  -webkit-transition: 250ms color;
  -moz-transition: 250ms color;
  -ms-transition: 250ms color;
  -o-transition: 250ms color;
 animation-name: wave;
 animation-duration: 1s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}
@keyframes wave {
  0% {box-shadow: 0 0 0px 0px rgba(85, 150, 108, 0.5);}
  100% {box-shadow: 0 0 0px 15px rgba(85, 150, 108, 0);}
}
/*** Spinner ***/
#spinner {opacity: 0;visibility: hidden;transition: opacity .5s ease-out, visibility 0s linear .5s;z-index: 99999;}
#spinner.show {transition: opacity .5s ease-out, visibility 0s linear 0s;visibility: visible;opacity: 1;}
/*** Boxpadding ***/
.boxpadding {padding-bottom: 30px;}
/*** Button ***/
.btn {font-weight: 500;transition: .5s;}
.a:hover {color: none;text-decoration: none;}
.btn.btn-primary,
.btn.btn-outline-primary:hover {
 color:#FFFFFF;
 background-color:#01AEF2!important;
 border-color:#01AEF2!important;
}
.btn-square {
 width: 38px;
 height: 38px;
}
.btn-sm-square {
 width: 32px;
 height: 32px;
}
.btn-lg-square {
 width: 48px;
 height: 48px;
}
.btn-square,
.btn-sm-square,
.btn-lg-square {
 padding: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: normal;
}
.btn-socialicon {
 width: 38px;
 height: 38px;
}
.btn-sm-socialicon {
 width: 32px;
 height: 32px;
}
.btn-lg-socialicon {
 width: 48px;
 height: 48px;
}
.btn-socialicon,
.btn-sm-socialicon,
.btn-lg-socialicon {
 padding: 0px 0px 0px 20px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: normal;
}

/*** navbar starts ***/
.shadow-sm {box-shadow: none!important;}
.bgtopcontact{background-color:#851A1C;}
.bgtopcall {background-color:#FFFFFF;}
.ttopcontacts {
 font-family: 'Montserrat', sans-serif;
 color: #FFFFFF;
 font-size: 16px;
 font-weight: 500;
 display: inline-block;
 vertical-align: middle;
}
.text-primary {
 color: #FFFFFF !important;
}
.navbar .sticky-top {top: -100px;transition: .5s;}
.navbar .navbar-brand,.navbar a.btn {height: 75px;}
.navbar .navbar-nav .nav-link {
 padding: 0px 40px 0px 0px;
 margin: 0px 0px 0px 0px;
 font-family: 'Montserrat', sans-serif;
 color: #000000;
 font-size: 16px;
 font-weight: 500;
 /* text-transform: uppercase; */
 outline: none;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
 color:#851A1C !important;
}

.hover-underline-animation {
 display: inline-block;
 position: relative;
}
.dropdown-menu{border-radius:0;border-color:#851A1C;padding:10px 10px;}
.dropdown-menu .dropdown-item{
  font-family: 'Montserrat', sans-serif;
  font-size:14px;
  color: #000000; 
  font-weight:500;
  border-bottom:1px dashed #851A1C; 
  padding:0px!important;
  line-height: 45px;  
}
.dropdown-menu .dropdown-item:hover{
  color: #851A1C!important;
  background-color:#FFFFFF!important;
 
 }
.dropdown-menu.active, .dropdown-item:active {
 color: #851A1C;
 text-decoration: none;
 background-color:#FFFFFF!important;
}
.navbar .dropdown-toggle::after {
 border: none;
 content:"\f282";
 font-family: none;
 font-weight: none;
 vertical-align: none;
 margin-left: none;
}
.navbar .nav-item .dropdown-menu {
 display: block!important;
 margin-top:0;
 left:0!important;
 top:150%;
 opacity:0;
 visibility:hidden;
 transition:0.5s;
 z-index:1;
 padding: 20px;
 width: 215px;
 }
.navbar .nav-item:hover .dropdown-menu {
 top: 100%;
 visibility: visible;
 transition: .5s;
 opacity: 1;
 background-color:#FFFFFF;
}
.dropdown-toggle::after {
 display: inline-block;
 margin-left: 0.255em;
 vertical-align: 0.255em;
 content: none;
 border-top: 0.3em solid;
 border-right: 0.3em solid transparent;
 border-bottom: 0;
 border-left: 0.3em solid transparent;
}
@media only screen and (min-device-width : 992px) and (max-device-width : 1199px) {	
.navbar .navbar-nav .nav-link {
 padding: 0px 35px 0px 0px;
 margin: 0px 0px 0px 0px;
 font-size: 14px;
}
.ttopcontacts {font-size: 14px;}
}
@media only screen and (min-device-width : 1200px) and (max-device-width : 1399px) {	
.navbar .navbar-nav .nav-link {
 padding: 0px 45px 0px 0px;
 margin: 0px 0px 0px 0px;
 font-size: 14px;
}
.ttopcontacts {font-size: 14px;}
}
@media only screen and (min-device-width : 1400px) and (max-device-width : 1599px) {	
.navbar .navbar-nav .nav-link {
 padding: 0px 60px 0px 0px;
 margin: 0px 0px 0px 0px;
 font-size: 16px;
}
.ttopcontacts {font-size: 16px;}
}
/******** navbar ends ********/
/************ mobile nav starts ***********/
.sticky-top{position: sticky;top: 0;z-index: 1020;}
.mobilelogo{background-color:#ffffff;}
.mobmenustyle a, .mobmenulabel{
 font-family: 'Poppins', sans-serif;
 font-size: 14px;
 color: #FFFFFF;
 font-weight: 400;
 cursor: pointer;
 outline: none;
 text-align: left!important;
 display: block;
 top:10px;
 padding: 0 20px;
 line-height: 40px;
 text-decoration: none;
} 
.menu{
 position: absolute;
 top: 0;
 left: 0;
 background:#851A1C;
 width: 240px;
 height:1000px;
 transform: translate3d(-240px, 0, 0);
 transition: transform 0.35s;
 z-index:2;
}
.menu-toggle { 
 position: absolute ;   
 right: -60px;
 width: 60px;
 height: 61px;
 top: 0;
 line-height: 0px  ;  
 display: block;
 padding: 0;
 text-indent: -9999px;
 background: #fff url(../webimg/icon-hamburger.png) 50% 50% / 25px 25px no-repeat;
}
.mobmenustyle
 li
   >  .mobsubmenu{
  background: url(../webimg/icon-mobarrow.png) 95% 50% / 16px 16px no-repeat;
}
.mobmenustyle{
 list-style-type:none;
 padding-left: 0rem;
}
.menuhead{
 font-family: 'Poppins', sans-serif;
 font-size:16px;
 text-align:center;
 padding-top:10px;
 color:#FFFFFF;
 font-weight: 400;
}
/* hide inputs */    
.menu-checkbox{display: none;}
/* hide navigation icon for sublabels */ 
.menu .menu label.menu-toggle{background: none;} 
/* fade in checked menu */ 
.menu-checkbox:checked + .menu{
  transform: translate3d(0, 0, 0);
}
@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
.menuhead{font-size:16px;}
.gotop {
 background-color: #000000 ;
 border-color: #000000 ;
}
.btn-lg-square {
 width: 42px;
 height: 42px;
}
.topicon {
 line-height: 1!important;
 vertical-align: -5px !important;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 991px) {
.gotop {
 background-color: #000000 ;
 border-color: #000000 ;
}
.btn-lg-square {
 width: 42px;
 height: 42px;
}
.topicon {
 line-height: 1!important;
 vertical-align: -5px !important;
}
}
/************ mobile nav ends ***********/
/********* banner starts ***********/
.carouselhead{
 position: absolute;
 color: black;
 right:13%;
 animation-delay: 0s;
 bottom: 53%;
}
.carouselsubhead{
 position: absolute;
 color: black;
 right:13%;
 animation-delay: 0s;
 bottom: 45%;
}
.carouselsubhead1{
 position: absolute;
 color: black;
 right:13%;
 animation-delay: 0s;
 bottom: 37%;
}
.carouselsubhead2{
 position: absolute;
 color: black;
 right:13%;
 animation-delay: 0s;
 bottom: 34%;
}
.carouselhead h1{
 font-family: 'Poppins', sans-serif;
 color:#ffffff;
 font-size: 50px;
 font-weight: 700;
 line-height:60px;
 text-transform:uppercase;
}
.carouselsubhead h1{
 font-family: 'Poppins', sans-serif;
 color:#ffffff;
 font-size: 50px;
 font-weight: 700;
 line-height:60px;
 text-transform:uppercase;
}
.carouselsubhead1 h1{
 font-family: 'Poppins', sans-serif;
 color:#ffffff;
 font-size: 50px;
 font-weight: 700;
 line-height:60px;
 text-transform:uppercase;
}
.carouselsubhead2 h1{
 font-family: 'Poppins', sans-serif;
 color:#FFFFFF;
 font-size: 50px;
 font-weight: 700;
 text-transform:uppercase;
 letter-spacing:1px;
 line-height:60px;
}
.bannertopline {
 position: absolute;
 right:13%;
 animation-delay: 0s;
 bottom: 67%;
}
.bannerbottomline {
 position: absolute;
 right:13%;
 animation-delay: 0s;
 bottom: 31%;
}
@media only screen and (min-device-width : 992px) and (max-device-width : 1399px) {
.carouselheadred {font-size: 35px; line-height: 45px;}
.carouselhead h1{font-size: 35px; line-height: 45px;}
.carouselsubhead h1 {font-size: 35px; line-height: 45px;}
.carouselsubhead1 h1 {font-size: 35px; line-height: 45px;}
.carouselsubhead2 h1 {font-size: 35px; line-height: 45px;}
.carouselhead {bottom: 57%;}
.carouselsubhead {bottom: 47%;}
.carouselsubhead1 {bottom: 38%;}
.carouselsubhead2 {bottom: 28%;}
.bannertopline {bottom: 74%!important;}
.bannerbottomline {bottom: 30%!important;}

}
@media only screen and (min-device-width : 1400px) and (max-device-width : 1599px) {
.carouselheadred {font-size: 35px; line-height: 45px;}
.carouselhead h1{font-size: 35px; line-height: 45px;}
.carouselsubhead h1 {font-size: 35px; line-height: 45px;}
.carouselsubhead1 h1 {font-size: 35px; line-height: 45px;}
.carouselsubhead2 h1 {font-size: 35px; line-height: 45px;}
.carouselhead {bottom: 53%;}
.carouselsubhead1 {bottom: 38%;}
.carouselsubhead2 {bottom: 34%;}
.bannertopline {bottom: 67%!important;}
.bannerbottomline {bottom: 31%!important;}
}
@media only screen and (min-device-width : 1600px) and (max-device-width : 1799px) {
.carouselheadred {font-size: 35px; line-height: 45px;}
.carouselhead h1{font-size: 35px; line-height: 45px;}
.carouselsubhead h1 {font-size: 35px; line-height: 45px;}
.carouselsubhead1 h1 {font-size: 35px; line-height: 45px;}
.carouselsubhead2 h1 {font-size: 35px; line-height: 45px;}
.carouselhead {bottom: 52%;}
.carouselsubhead1 {bottom: 38%;}
.carouselsubhead2 {bottom: 34%;}
.bannertopline {bottom: 67%!important;}
.bannerbottomline {bottom: 31%!important;}
}
/********* banner starts ***********/

/************ about us starts *************/
.taboutushead{
 font-family: 'Poppins', sans-serif;
 font-size:32px;
 font-weight:700;
 color:#333333;
 line-height:60px;
}
.taboutussubhead{
 font-family: 'Poppins', sans-serif;
 font-size:32px;
 font-weight:700;
 color:#851A1C;
 line-height:60px;
}
.taboutussubhead1{
 font-family: 'Poppins', sans-serif;
 font-size:50px;
 font-weight:700;
 color:#851A1C;
 line-height:60px;
}
.taboututext{
 font-family: 'Montserrat', sans-serif;
 font-size:18px;
 font-weight:600;
 color:#656565;
 line-height:28px;
 text-align:justify;
}
.taboutreadmore{
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 font-weight: 600;
 color: #851A1C;
 line-height: 50px;
}
.taboutreadmore:hover{color:#000000;cursor:pointer;}
@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
.taboutushead {font-size: 23px;line-height:30px;}
.taboutussubhead {font-size: 23px;line-height:30px;}
.taboutussubhead1 {font-size: 23px;line-height:30px;}
.taboututext{
 text-align:left;
 font-size: 14px;
 line-height: 22px;
}
.taboutcolumn{padding-left:0px;}
.taboutreadmore {font-size: 14px;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 991px) {
.taboutushead {font-size: 22px!important;line-height:25px;}
.taboutussubhead {font-size: 22px!important;line-height:25px;}
.taboutussubhead1 {font-size: 22px!important;line-height:25px;}
.taboututext{
 text-align:left;
 font-size: 14px;
 line-height: 22px;
}
.taboutcolumn{padding-left:0px;}
.taboutreadmore {font-size: 14px;}
}
@media only screen and (min-device-width : 992px) and (max-device-width : 1299px) {
.taboutushead {font-size: 34px;line-height:45px;}
.taboutussubhead {font-size: 34px;line-height:45px;}
.taboutussubhead1 {font-size: 34px;line-height:45px;}
.taboututext{
 text-align:left;
 font-size: 14px;
 line-height: 22px;
}
.taboutreadmore {font-size: 14px;}
}
@media only screen and (min-device-width : 1300px) and (max-device-width : 1399px) {
.taboutushead {font-size: 30px;line-height:35px;}
.taboutussubhead {font-size: 30px;line-height:35px;}
.taboutussubhead1 {font-size: 30px;line-height:35px;}
.taboututext{
 text-align:left;
 font-size: 14px;
 line-height: 22px;
}
.taboutreadmore {font-size: 14px;}
}
@media only screen and (min-device-width : 1400px) and (max-device-width : 1499px) {
.taboutushead {font-size: 35px;line-height:40px;}
.taboutussubhead {font-size: 35px;line-height:40px;}
.taboutussubhead1 {font-size: 35px;line-height:40px;}
.taboututext{
 text-align:left;
 font-size: 14px;
 line-height: 22px;
}
.taboutreadmore {font-size: 14px;}
}
/************ about us ends *************/
/************ products and services starts ***********/
#productsnservicesbg{
 background-image: url(../webimg/productsnservicesbg.jpg);
 background-position: center;
 background-size: cover;
 background-attachment: fixed;
 background-repeat: no-repeat;
}
.tboardmembershead{
 font-family: 'Poppins', sans-serif;
 font-size: 38px;
 font-weight:700;
 color: #ffffff;
 line-height: 25px;
 padding-top:50px;
 text-align:center;
}
.box15{
 font-family: 'Poppins', sans-serif;
 text-align: center;
 position: relative;
 overflow: hidden;
 transition: all 0.5s ease 0s;	
}
.box15:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.1); }

.box15:hover:before{ bottom: 0; }
.box15 img{
 width: 100%;
 height: auto;
 transition: all 0.5s ease 0s;
}
.box15:hover img{ cursor:pointer;}
.box15 .box-content15{
 color: #FFFFFF!important;
 background-color:#FFFFFF;
 width: 100%;
 padding: 13px 0px 12px 20px;
 position: absolute;
 bottom: 0;
 left: 0;
 z-index: 1;
 transition: all 0.5s ease 0s;
}  
.box15:hover .box-content15{
 color: rgba(14,174,87,1);
 background: #fff;
 cursor:pointer!important;
}
.box15 .title15{
 font-family: 'Montserrat', sans-serif;
 font-size: 32px;
 font-weight: 700;
 color: #851A1C!important;
 text-align:left;
 line-height:30px;
 margin: 0;
}
.box15:hover .title15{
 color: #851A1C!important;
}
.box15 .subtitle15{
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 font-weight: 400;
 color: #000000!important;
 text-align:left;
 line-height:30px;
 margin: 0;
}
.box15:hover .subtitle15{
 color:#000000!important;
}
/* Shine */
.hover14 figure {
 position: relative;
}
.hover14 figure::before {
 position: absolute;
 top: 0;
 left: -75%;
 z-index: 2;
 display: block;
 content: '';
 width: 50%;
 height: 100%;
 background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
 -webkit-transform: skewX(-25deg);
 transform: skewX(-25deg);
}
.hover14 figure:hover::before {
 -webkit-animation: shine .75s;
 animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}


@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
.box15 .title15 {
 font-size: 15px;
 line-height: 22px;
}
.box15 .subtitle15 {
 font-size: 13px;
 line-height: 22px;
}
.box15 .tboardmemberreadmore {top: 35%;}
.tboardmemberreadmore {font-size: 18px;}
.tboardmembershead {font-size: 25px;}
.box15 .box-content15 { padding: 5px 10px 5px 10px;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 991px) {
.box15 .title15 {
 font-size: 15px;
 line-height: 19px;
}
.box15 .subtitle15 {
 font-size: 13px;
 line-height: 19px;
}
.box15 .tboardmemberreadmore {top: 35%;}
.tboardmemberreadmore {font-size: 18px;}
.tboardmembershead {font-size: 25px;}
}
@media only screen and (min-device-width : 992px) and (max-device-width : 1199px) {
.box15 .title15 {
 font-size: 14px;
 line-height: 22px;
}
.box15 .subtitle15 {
 font-size: 14px;
 line-height: 22px;
}
.box15 .tboardmemberreadmore {top: 35%;}
.tboardmemberreadmore {font-size: 18px;}
.tboardmembershead {font-size: 25px;}
}
@media only screen and (min-device-width : 1200px) and (max-device-width : 1399px) {
.box15 .title15 {
 font-size: 15px;
 line-height: 22px;
}
.box15 .subtitle15 {
 font-size: 15px;
 line-height: 22px;
}
}

/************ products and services ends ***********/


/************************ why mark fuel starts ************************/

.whymarkfuelhead{
 font-family: 'Poppins', sans-serif;
 font-size: 32px;
 color: #333333;
 font-weight:700;
 text-transform: uppercase;
 line-height: 45px;
}
.whymarkfuelheadbrown{
 font-family: 'Poppins', sans-serif;
 font-size: 32px;
 color: #851A1C;
 font-weight:700;
 text-transform: uppercase;
 line-height: 45px;
}
.whymarkfuelsubhead{
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 color: #000000;
 font-weight: 600;
 line-height: 25px;
}

.whymarkfuelscontenthead{
 font-family: 'Poppins', sans-serif;
 font-size: 24px;
 color: #851A1C;
 font-weight:700;
 text-transform: uppercase;
 line-height: 25px;
}
.whymarkfuelscontenttext{
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 color: #656565;
 font-weight: 600;
 line-height: 25px;
}
.tmissiondots{ font-size:20px;color: #851A1C; }
.missionheight { height :250px;}

.strategy01{	
 opacity: 1;
}
.strategy01:hover{	
 opacity: 1;
}
.strategyicon{
 background-image: url(../webimg/strategy01.jpg);
 background-repeat:  no-repeat;
 background-position: center;
}
.strategy001:hover {cursor:pointer;} 
.strategy:hover .strategyicon{ background-image: url(../webimg/strategy001.jpg)!important;}

.manpower01{	
 opacity: 1;
}
.manpower01:hover{	
 opacity: 1;
}
.manpowericon{
 background-image: url(../webimg/manpower01.jpg);
 background-repeat:  no-repeat;
 background-position: center;
}
.manpower001:hover {cursor:pointer;} 
.manpower:hover .manpowericon{ background-image: url(../webimg/manpower001.jpg)!important;}

.cost01{	
 opacity: 1;
}
.cost01:hover{	
 opacity: 1;
}
.costicon{
 background-image: url(../webimg/cost01.jpg);
 background-repeat:  no-repeat;
 background-position: center;
}
.cost001:hover {cursor:pointer;} 
.cost:hover .costicon{ background-image: url(../webimg/cost001.jpg)!important;}


.governance01{	
 opacity: 1;
}
.governance01:hover{	
 opacity: 1;
}
.governanceicon{
 background-image: url(../webimg/governance01.jpg);
 background-repeat:  no-repeat;
 background-position: center;
}
.governance001:hover {cursor:pointer;} 
.governance:hover .governanceicon{ background-image: url(../webimg/governance001.jpg)!important;}

.hback {
 margin-top: -180px;
}
.whymarkfuelbox{border:1px solid #851A1C;}

@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
.whymarkfuelhead{
 font-size: 25px;
 line-height: 35px;
}
.whymarkfuelheadbrown{
 font-size: 25px;
 line-height: 35px;
}
.whymarkfuelsubhead{
 font-size: 14px;
 line-height: 20px;
}
.whymarkfuelscontenthead {font-size: 20px;}
.whymarkfuelscontenttext {font-size: 14px;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 991px) {
.whymarkfuelscontenthead {font-size: 20px;}
.whymarkfuelscontenttext {font-size: 16px!important;}
}
@media only screen and (min-device-width : 992px) and (max-device-width : 1200px) {
.whymarkfuelscontenthead {font-size: 20px;}
.whymarkfuelscontenttext {font-size: 16px!important;}
.strategyicon{background-size: 160px 160px;}
.manpowericon{background-size: 160px 160px;}
.costicon{background-size: 160px 160px;}
.governanceicon{background-size: 160px 160px;}
}

/************************ why mark fuel ends ************************/

/****************** ports starts **********************/
.tportshead{
 font-family: 'Poppins', sans-serif;
 font-size: 30px;
 color: #851A1C;
 font-weight: 700;
 line-height: 45px;
}
.tportlisthead{
 font-family: 'Montserrat', sans-serif;
 font-size: 25px!important;
 color: #333333;
 font-weight: 700!important;
 text-align: start;
}
.portlist li {
 list-style: none;
 list-style-image: url(../webimg/dot.jpg);
 font-family: 'Montserrat', sans-serif; 
 font-size: 18px;
 color: #333333;
 font-weight: 500;
 text-align: left;
 line-height: 25px;
 padding-left: 10px;
}
.portliststyle{list-style:none;}
@media only screen and (min-device-width: 320px) and (max-device-width: 767px){
.tportshead {font-size: 23px;}
.tportlisthead { font-size: 18px!important;}
.portlist li {font-size: 14px;line-height: 22px;}
}


/*********************** ports ends **********************/



/*********** services starts *********/
.tserviceshead{
 font-family: 'Poppins', sans-serif;
 font-size:38px;
 font-weight:700;
 color:#196F39;
 line-height: 45px;
}
.tservicessubhead{
 font-family: 'Montserrat', sans-serif;
 font-size:20px;
 font-weight:700;
 color:#196F39;
 line-height: 25px;  
}
.tservicestext {
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 color: #000000;
 font-weight: 400;
 line-height: 25px;
}
.viewmoredots{
 font-size:55px;
 color:#196F39;
}
figure {
 margin: 0;
 padding: 0;
 background: #fff;
 overflow: hidden;
}
.card {
 position: relative;
 display: flex;
 flex-direction: column;
 min-width: 0;
 word-wrap: break-word;
 background-color: #fff;
 background-clip: border-box;
 border: none;
 border-radius: 0px;
}
.card-img, .card-img-top {
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
}
.card-body{padding:35px 5px 0px 5px;background-color: #1111;}

figure img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.card:hover .viewmoredots{
 color:#ffffff;
}
.card:hover figure img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
.card:hover {
  background:linear-gradient(to top,rgba(25, 111, 57,1), rgba(12,116,117,1));
  color:#ffffff;
}
.card:hover .tserviceshead{
	 color:#ffffff;
}
.card:hover .tservicessubhead{
	 color:#ffffff;
}
.card:hover .tservicestext{
	 color:#ffffff;
}
.button-services{
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight:400;
  color: #fff;
  text-align:center;
  width:215px;
  padding: 10px 10px 10px 10px!important;
  border: 1px solid #196F39;
  background-image: -webkit-linear-gradient(30deg, #196F39 50%, transparent 50%);
  background-image: linear-gradient(30deg, #196F39 50%, transparent 50%);
  background-size: 500px;
  background-repeat: no-repeat;
  background-position: 0%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
}
.button-services:hover {
  background-position: 100%;
  color: #196F39;
  cursor:pointer;
}
.btn-services{color:#ffffff;}
.button-services:hover .btn-services{color: #196F39;}
@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
.tservicestext {
 font-size: 14px;
 line-height: 22px;
}
.fastdeliveryicon {
 background-size: 150px 150px!important;
}
.safedeliveryicon {
 background-size: 150px 150px!important;
}
.servicesicon {
 background-size: 150px 150px!important;
}
.servicesheight {
 height: 169px;
}
.viewmoredots {font-size: 45px;}
.tserviceshead {font-size: 25px;}
.tservicessubhead {font-size: 18px;}

.button-services {
 font-size: 15px;text-align: center;
 width: 185px;
 padding: 5px 10px 5px 10px!important;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 991px) {
.fastdeliveryicon {
 background-size: 150px 150px!important;
}
.safedeliveryicon {
 background-size: 150px 150px!important;
}
.servicesicon {
 background-size: 150px 150px!important;
}
.servicesheight {height: 170px;}
.tservicestext {
 font-size: 14px;
 line-height: 19px;
}
.tserviceshead {font-size: 25px;}
.tservicessubhead {font-size: 18px;}
}
@media only screen and (min-device-width : 992px) and (max-device-width :1199px) {
.fastdeliveryicon {
 background-size: 150px 150px!important;
}
.safedeliveryicon {
 background-size: 150px 150px!important;
}
.servicesicon {
 background-size: 150px 150px!important;
}
.servicesheight {height: 170px;}
.tservicestext {
 font-size: 14px;
 line-height: 19px;
}
.tserviceshead {font-size: 30px;}
.tservicessubhead {font-size: 18px;}
}
@media only screen and (min-device-width : 1200px) and (max-device-width :1299px) {
.servicesheight {height: 230px;}
.tservicestext {
 font-size: 14px;
 line-height: 19px;
}
.tserviceshead {font-size: 30px;}
}
@media only screen and (min-device-width : 1300px) and (max-device-width :1399px) {
.servicesheight {height: 230px;}
.tservicestext {
 font-size: 15px;
 line-height: 22px;
}
.tserviceshead {font-size: 35px;}
}
@media only screen and (min-device-width : 1400px) and (max-device-width :1499px) {
.servicesheight {height: 230px;}
.tservicestext {
 font-size: 15px;
 line-height: 22px;
}
}
/*********** services ends *********/

/*** bottom starts ***/
.bottombg {
 background-image: url(../webimg/bottombg.jpg);
 background-repeat: no-repeat;
 background-position: right top;
 background-color: #D5D0BA; width:100%;
}
.tbottomhead{
 font-family: 'Montserrat', sans-serif;
 font-size: 20px;
 font-weight:700;
 color: #C3060D;
 /* text-transform:uppercase; */
 line-height:25px;
}
.tbottomtext{
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 color: #000000;
 font-weight:400;
 line-height:30px;
}
.tbottomtext:hover{color: #000000;}
.contactseperationline{border-right:1px solid #4E5775;}
.footerbg{background-color:#FFFFFF;}
.tbottomcontactlink{
 font-family: 'Roboto',sans-serif;
 font-size: 18.61px;
 color: #2F395D;
 font-weight:300;
 line-height:30px;
 display:inline-block;
}
.tbottomcontactlink:hover{color: #2F395D;}

.btn.btn-social {
 padding:10px;
 margin-right: 5px;
 color: #000000!important;
 border: 0px solid #000000;
 border-radius: 38px;
 transition: .3s;
 font-size: 22px;
 line-height:25px;
}
.btn.btn-social:hover { background-color: #C3060D; color: #ffffff!important;}
.tcopyright {
 font-family: 'Montserrat', sans-serif;
 font-size: 14px;
 color: #000000;
 font-weight: 300;
 line-height:20px;
}
.tbotlinks {
 font-family: 'Montserrat', sans-serif;
 font-size: 14px;
 color: #000000;
 font-weight: 300;
}
.tbotlinks:hover { color: #C3060D;}
.idesign {
 font-family: 'Montserrat', sans-serif;
 font-size: 13px;
 text-transform: lowercase!important;
 line-height: 20px;
 color: #000000;
}
.footer{background-color:#C7C1AB;}

@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {
.tbottomhead {font-size: 14px;}
.tbottomtext {font-size: 13px;line-height: 22px;}
.tbottomcontactlink {font-size: 14px;}
.contactseperationline{border:none;}
.bottombg {
 background-image:  url(../webimg/bottombg.jpg);
 background-repeat: no-repeat;
 background-position: right top;
 background-color: #C7C1AB;
} 
.tbotlinks {line-height: 18px;}
.tcopyright {font-size: 12px;line-height: 20px;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 991px) {
.tbottomhead {font-size: 18px;}
.tbottomtext {font-size: 14px;line-height: 22px;}
.tbottomcontactlink {font-size: 14px;}
.tcopyright {font-size: 13px;line-height: 20px;}
.bottombg {
 background-image:  url(../webimg/bottombg.jpg);
 background-repeat: no-repeat;
 background-position: right top;
 background-color: #C7C1AB;
}
}
@media only screen and (min-device-width : 992px) and (max-device-width : 1199px) {
.tbottomtext {font-size: 14px;}
.tbottomhead {font-size: 16px;}
.btn-square {width: 32px;height: 30px;}	
.btn.btn-social {font-size: 16px;}
	
	
}
@media only screen and (min-device-width : 1200px) and (max-device-width : 1399px) {
.tbottomtext {font-size: 16px;}
}
/*** bottom ends ***/

/****************######## inner pages starts ########************************/

/************* about us - business starts *****************/
.headingbg {background: linear-gradient(to right, #851A1C  0%, #FFDA00 100%);}
.theading {
 font-family: 'Poppins', sans-serif;
 font-size: 32px;
 font-weight: 500;
 color: #FFFFFF;
 text-transform: uppercase;
 line-height: normal;
}
.tsubheading{
 font-family: 'Poppins', sans-serif;
 font-size: 30px;
 font-weight: 500;
 color: #851A1C;
 line-height: normal;
}
.tyouarein {
 font-family: 'Poppins', sans-serif;
 font-size: 14px;
 color: #851A1C;
 font-weight: normal;
}
.tyouarein:hover {color: #851A1C;}
.ttext{
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 font-weight: 400;
 color: #000000;
 line-height: 28px;
 text-align: justify;
}
.bgbusiness{
 background-image: url(../webimg/vision.jpg);
 background-repeat: no-repeat;
 background-position: center!important;
 background-color: #851A1C;
 container: cover; 
}
.mottobg {background-color: #851A1C!important;}
.tmottohead{
 font-family: 'Poppins', sans-serif;
 font-size: 30px;
 font-weight:700;
 color: #FFFFFF;
 line-height: 56px;
}
.tmottotext{
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 font-weight:400;
 color: #FFFFFF;
 line-height: 30px;
 text-align:justify;
}
.tmissionpointstext{
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 font-weight:600;
 color: #FFFFFF;
 line-height: 30px;
}
.taboutpadding {
 padding-left: 55px!important;
 padding-right: 0px!important;
}
.twhymelakaheading{
 font-family: 'Poppins', sans-serif;
 font-size: 40px;
 font-weight:700;
 color: #000000;
 line-height: 56px; 
}
.twhymelakaheadingred{
 font-family: 'Poppins', sans-serif;
 font-size: 40px;
 font-weight:700;
 color: #C3060D;
 line-height: 56px; 
}
.twhymelakapoints{
 font-family: 'Montserrat', sans-serif;
 font-size: 90px;
 font-weight:300;
 color: #C3060D;
 line-height: 30px;
}
.twhymelakapointshead {
 font-family: 'Poppins', sans-serif;
 font-size: 30px;
 font-weight:700;
 color: #000000;
 line-height: 40px; 
}
.twhymelakapointstext{
 font-family: 'Montserrat', sans-serif;
 font-size: 27px;
 font-weight: 500;
 color: #000000;
 line-height: 28px;
 text-align: justify;
}
.bottomlinered{
 border-bottom:2px dashed red;
}
.tchairmanhead {
 font-family: 'Poppins', sans-serif;
 font-weight:700;
 font-size:20px;
 color:#C3060D;
 line-height: 30px; 
}
.tchairman {
 font-family: 'Poppins', sans-serif;
 font-weight:700;
 font-size:18px;
 color:#333333;
 line-height: 30px; 
}
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
.theading {font-size: 25px!important;line-height: 30px;}
.ttext {font-size: 14px; text-align:left; line-height: 25px;}
.taboutpadding {padding-left: 0px!important;}
.tmottohead {font-size: 18px;line-height: 30px;}
.tmottotext {font-size: 14px; line-height: 23px;}
.tmissionpointstext {font-size: 14px; line-height: 23px;}
.twhymelakaheading{font-size: 25px;line-height:35px;}
.twhymelakaheadingred{font-size: 25px;line-height:35px;}
.twhymelakapoints { font-size: 45px;line-height: 50px; }
.twhymelakapointshead {font-size: 20px;line-height: 30px;}
.twhymelakapointstext {
 font-size: 16px;
 line-height: 28px;
 text-align:left;
}
.tmottotext{
 text-align:left;
}
}

@media only screen and (min-device-width : 769px) and (max-device-width : 991px) {	
.theading {font-size: 25px;}
.ttext {font-size: 14px; text-align:left; line-height: 25px;}
.taboutpadding {padding-left: 0px!important;}
.tmottohead {font-size: 18px;line-height: 30px;}
.tmottotext {font-size: 14px; line-height: 23px;}
.tmissionpointstext {font-size: 14px; line-height: 23px;}
.twhymelakaheading{font-size: 25px;line-height:35px;}
.twhymelakaheadingred{font-size: 25px;line-height:35px;}
.twhymelakapoints { font-size: 45px;line-height: 50px; }
.twhymelakapointshead {font-size: 20px;line-height: 30px;}
.twhymelakapointstext {
 font-size: 16px;
 line-height: 28px;
 text-align:left;
}
.tmottotext{
 text-align:left;
}
}

@media only screen and (min-device-width : 992px) and (max-device-width : 1199px) {
.theading {font-size: 25px;}
.ttext {font-size: 14px; text-align:left; line-height: 25px;}
.taboutpadding {padding-left: 26px!important;}
.tmottohead {font-size: 18px;line-height: 30px;}
.tmottotext {font-size: 14px; line-height: 23px;}
.tmissionpointstext {font-size: 14px; line-height: 23px;}
.twhymelakaheading{font-size: 30px;line-height:35px;}
.twhymelakaheadingred{font-size: 30px;line-height:35px;}
.twhymelakapoints { font-size: 65px;line-height: 70px; }
.twhymelakapointshead {font-size: 20px;line-height: 30px;}
.twhymelakapointstext {
 font-size: 16px;
 line-height: 28px;
 text-align:left;
}
.tmottotext{
 text-align:left;
}
}

@media only screen and (min-device-width : 1200px) and (max-device-width : 1299px) {
.theading {font-size: 25px;}
.ttext {font-size: 14px; text-align:left; line-height: 25px;}
.taboutpadding {padding-left: 26px!important;}
.tmottohead {font-size: 18px;line-height: 30px;}
.tmottotext {font-size: 14px; line-height: 23px;}
.tmissionpointstext {font-size: 14px; line-height: 23px;}
.twhymelakaheading{font-size: 30px;line-height:35px;}
.twhymelakaheadingred{font-size: 30px;line-height:35px;}
.twhymelakapoints { font-size: 65px;line-height: 70px; }
.twhymelakapointshead {font-size: 20px;line-height: 30px;}
.twhymelakapointstext {
 font-size: 16px;
 line-height: 28px;
 text-align:left;
}
.tmottotext{
 text-align:left;
}
}

@media only screen and (min-device-width : 1300px) and (max-device-width : 1599px) {
.theading {font-size: 25px;}
.ttext {font-size: 14px; text-align:left; line-height: 25px;}
.taboutpadding {padding-left: 26px!important;}
.tmottohead {font-size: 20px;line-height: 32px;}
.tmottotext {font-size: 16px; line-height: 25px;}
.tmissionpointstext {font-size: 16px; line-height: 25px;}
.twhymelakaheading{font-size: 30px;line-height:35px;}
.twhymelakaheadingred{font-size: 30px;line-height:35px;}
.twhymelakapoints { font-size: 65px;line-height: 70px; }
.twhymelakapointshead {font-size: 20px;line-height: 30px;}
.twhymelakapointstext {
 font-size: 16px;
 line-height: 28px;
 text-align:left;
}
.tmottotext{
 text-align:left;
}
}
/************* about us ends *****************/

/************* clients starts *****************/
.tclienttext {
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 color: #333333;
 font-weight: 400;
 text-align: center;
 line-height: 32px;
}
.clientborder {
 border: 1px solid;
 border-image: linear-gradient(45deg, #851A1C  , #FFDA00 ) 1;
 box-shadow: rgb(50 50 93 / 25%) 0px 13px 27px -5px, rgb(0 0 0 / 30%) 0px 8px 16px -8px;
}
.clientitem:hover .clientborder {
 border: 1px solid;
 border-image: linear-gradient(45deg, #FFDA00  , #851A1C) 1;
 cursor:pointer;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 767px){
.tclienttext {font-size: 11px;line-height: 22px;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 991px){
.tclienttext {font-size: 14px;line-height: 22px;}
}
@media only screen and (min-device-width: 992px) and (max-device-width: 1199px){
.tclienttext {font-size: 14px;line-height: 22px;}
}
@media only screen and (min-device-width: 1200px) and (max-device-width: 1399px){
.tclienttext {font-size: 14px;line-height: 22px;}
}
@media only screen and (min-device-width: 1300px) and (max-device-width: 1499px){
.tclienttext {font-size: 16px;line-height: 22px;}
}
/************* clients ends *****************/
/************* services starts ***********/

.borderdashed {
 border-bottom: 1px dashed #C3060D;
}
.whyushead{
 font-family: 'Poppins', sans-serif;
 font-size: 38px;
 color: #851A1C;
 font-weight: 700;
 line-height: 45px;
 text-align:center;
}
.whyussubhead{
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 color: #000000;
 font-weight: 600;
 line-height: 25px;
 text-align:center;
}
.twhyushead{
 font-family: 'Poppins', sans-serif;
 font-size:25px;
 font-weight:700;
 color:#851A1C;
 line-height: normal;
 text-align:center;
}
.twhyustext{
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 font-weight: 400;
 color: #000000;
 line-height: 28px;
 text-align:center;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 1400px){
.tsubheading {font-size: 20px;line-height:30px;}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 767px){
.whyushead {font-size: 30px;}
.whyussubhead {font-size: 14px;}
.twhyushead {font-size: 20px;}
.twhyustext {font-size: 14px;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 991px){
.whyushead {font-size: 30px;}
.whyussubhead {font-size: 14px;}
.twhyushead {font-size: 20px;}
.twhyustext {font-size: 14px;}
}
@media only screen and (min-device-width: 1500px) and (max-device-width: 1800px){
.tsubheading {font-size: 25px;line-height:38px;}
}
/************* services ends ***********/
/*************** products starts ***************/
.tproductshead{
 font-family: 'Poppins', sans-serif;
 font-size:22px;
 font-weight:700;
 color:#851A1C;
 line-height: 35px;
 text-align:center;
}
.tproductstext{
 font-family: 'Montserrat', sans-serif;
 font-size: 15px;
 font-weight: 400;
 color: #000000;
 line-height: 28px;
 text-align:center;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 767px){
.tproductshead {font-size: 18px;line-height: 27px;}
.tproductstext {font-size: 14px;line-height: 22px;}
}
/*************** products ends ***************/






/************* contact us starts **************/
.ttexthead {
 font-family: 'Poppins', sans-serif;
 font-size: 18px;
 color: #851A1C;
 font-weight: 500;
 line-height: 24px;
}
.submitbutton {
 font-family: 'Poppins', sans-serif;
 font-size: 18px;
 font-weight:400;
 color: #ffffff!important;
 background-color:#851A1C!important;
 border-radius: 0px;
 border-left: 1px solid #ffffff;
 padding: 20px 20px 20px 20px;
 line-height: 10px;
}
.ttextbold {
 font-family: 'Poppins', sans-serif;
 font-size: 17px;
 color: #851A1C;
 font-weight: 400;
 text-align: left;
 line-height: 27px;
}
.ttextleftbig {
 font-family: 'Poppins', sans-serif;
 font-size: 18px;
 color: #000000;
 text-align: left;
 line-height: 27px;
 font-weight: 400;
}
.ttextleftbig:hover {color: #000000;}

.ttextemail {
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 font-weight: 400;
 color: #000000;
 line-height: 28px;
}
.ttextemail:hover {color: #000000;}

.contactbox {
 position: relative;
 background-size: cover;
 padding: 60px 35px 43px;
 border-radius: 15px;
 text-align: left;
 color: #333333;
 background-color: #EFF3F5;
 border-color: #EFF3F5;
 transition: background .3s,border .3s,border-radius .3s,box-shadow  .3s,-webkit-box-shadow .3s;
}
.contactboxadd {
 position: relative;
 background-size: cover;
 padding: 15px 15px 15px 15px;
 border-radius: 5px;
 text-align: left;
 color: #1A2A36;
 background-color: #EFF3F5;
 border-left: 5px solid #851A1C;
}
.form-control {border-radius: 0px;}
@media only screen and (min-device-width: 320px) and (max-device-width: 1199px){
.ttextleftbig {font-size: 13px;}
}
@media only screen and (min-device-width: 1200px) and (max-device-width: 1400px){
.ttextleftbig {font-size: 17px;}
}
/************** contact us ends **************/

/****************######## inner pages ends ########***********************/