body{margin: 0; padding: 0!important; font-family: 'Fira Sans', sans-serif;}
html {scroll-behavior: smooth; box-sizing: border-box;}
*{margin: 0; padding: 0;}
p{font-size: 16px;  letter-spacing: 0.5px; color: #424040; font-weight: 400; line-height: 27px; padding: 0; margin: 0;}
.pnm{padding: 0; margin: 0;}
.tnb{padding: 100px 0;}
.tnb5{padding: 50px 0;}
.tnb7{padding: 70px 0;}
.mt {margin-top: 30px;}


.active{color: #000 !important;}
/*.read_btn*/
.read_btn{color: #000; background: #ffbb18; padding: 10px 20px; font-size: 16px; font-weight: 500; border-radius: 5px; position: relative; z-index: 1; overflow: hidden; display: inline-block; margin: 30px 0 0;}
.read_btn:hover{color: #fff;}
.read_btn:before{width: 100%; height: 100%;  position: absolute; left: 0; bottom: -44px; content: '';  z-index: -1;  transition: 0.3s;}
.read_btn:after{width: 100%; height: 100%;  position: absolute; left: 0; top: -44px; content: '';  z-index: -1;  transition: 0.3s;}
.read_btn:hover:before{bottom:0; background: #000; height: 50%;}
.read_btn:hover:after{top:0; background: #000; height: 50%;}
.read_btn .fa{margin: 0 0px 0px 15px;}
/*.read_btn*/

a:hover {text-decoration: none;}
.small-title{font-size: 16px;  color: #878484;  font-weight: 400; text-transform: uppercase;  padding: 0; margin: 0 0 20px;}
.big-title{font-size: 40px; color: #302C2C; font-weight: 700; line-height: 50px; margin: 10px 0 20px; position: relative;}
.big-title:before{position: absolute;  top: -10px;  left: 0;  content: '';  width: 85px;  height: 5px;  background: #ffbb18;}

/*mannav*/
.main-nav{position: relative; background: #ffbb18; padding: 10px; overflow: hidden;} 
.main-nav:before{position: absolute; content: "";  left: 0;  top: 0;  bottom: 39px;  height: 100%; width: 35%; border-left: 0 solid transparent; border-top: 90px solid #fff; border-right: 130px solid transparent; -webkit-transition: .5s all ease; transition: .5s all ease;}
.main-nav a{text-decoration: none;}

.navbar-brand{position: relative;}
.navbar-brand span{ color: #02111e; font-size: 28px; font-weight: bold; letter-spacing: 0.5px;}
.logo-img{position: absolute; left: 330px; bottom: 3px; width: 10%;}
.navbar-brand img{width: 100%; max-width: 50px;  margin: 0 8px 0px 2px;}
.new-nav{padding: 0; margin: 0;}
.new-nav{padding: 0; margin: 0;}
.new-nav ul li a{color: #fff; font-size: 16px; font-weight: 500; margin: 0 15px; letter-spacing: 0.5px; line-height: 40px; transition: 0.5s;}
.new-nav ul li a:hover{text-decoration: none; color: #02111e; }
.navbar{
  button[aria-expanded="true"] > span.close {
    display: inline;
    color: #fff;
    opacity: 1;
  }

  button[aria-expanded="true"] > span.navbar-toggler-icon {
    display: none;
  }

  button[aria-expanded="false"] > span.close {
    display: none;
  }
}


/*.get-appoin*/
.get-appoin{ color: #000; background: #fff; padding: 10px 20px; font-size: 14px; font-weight: 500; border-radius: 5px; position: relative; z-index: 1; overflow: hidden; text-transform: uppercase;}
.get-appoin:hover{color: #fff;}
.get-appoin:before{width: 100%; height: 100%;  position: absolute; left: 0; bottom: -44px; content: '';  z-index: -1;  transition: 0.3s;}
.get-appoin:after{width: 100%; height: 100%;  position: absolute; left: 0; top: -44px; content: '';  z-index: -1;  transition: 0.3s;}
.get-appoin:hover:before{bottom:0; background: #000; height: 50%;}
.get-appoin:hover:after{top:0; background: #000; height: 50%;}

/*slider-text*/
.main-slider{background: url(../images/banner-bg1.jpg) top center; background-size: cover; position: relative;}
.main-slider:before{position: absolute; content: ''; width: 100%; height: 100%; background: #02111ea6; left: 0; top: 0;}
.main-slider img{width: 100%; }
.slider-text{margin: 120px 0 0;}
.slider-text h2{font-size: 54px; font-weight: 700; color: #fff; padding: 0 ; line-height: 80px; position: relative;}
.slider-text h2:before{position: absolute; top: -10px; left: 0; content: ''; width: 85px; height: 5px; background: #ffbb18;}
.right-slider img{width: 100%;}
.slider-text p{font-size: 15px; font-weight: 500; padding: 0 150px 0 0;}
.main-slider .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom: 20px;}

.main-slider .bx-wrapper .bx-pager.bx-default-pager a.active { background: #ffbb18;}


/*main-about*/
.main-about{}
.abut_img img{width: 100%;}
.calling{margin: 20px 0;}
.calling span{font-size: 30px;}
.calling .fa{font-size: 36px; color: #ffbb18; background: #02111e; padding: 10px; border-radius: 50%; width: 60px; height: 60px; text-align: center; transition: 0.5s;}
.calling:hover .fa{color: #000; background: #ffbb18; transform: rotate(-30deg);}

/*products*/
.products{background: #f5f5f5;}
.products .small-title { text-align: center;}
.products .big-title{text-align: center; margin: 0 0 50px;}
.products .big-title:before{ margin: 0 auto;  left: 0; right: 0;}
.pro_img{overflow: hidden;}
.pro_img img{width: 100%; transition: 0.5s;}
.products_text:hover .pro_img img{transform: scale(1.2);}
.products_text { padding: 10px; background: #fff; box-shadow: 0 0 7px 0 rgb(43 52 59 / 8%); transition: 0.5s;}
.products_text:hover{margin: -10px 0 0;}
.pro_txt h4{color: #02111e; margin: 10px 0; font-size: 22px;}
.pro_txt a{color: #ffbb18; display: block; margin: 15px 0 0;}
.pro_txt a:hover{color: #000;}
.pro_txt a .fa{transition: 0.5s;}
.pro_txt a:hover .fa{padding: 0 0 0 10px;}

/*call_to_action*/
.call_to_action{background: url(../images/call_to_action_bg.jpg) no-repeat top fixed; background-size: cover; position: relative; overflow: hidden;}
.call_to_action:before{position: absolute; content: ''; background: #000000e8; width: 60%; height: 100%; top: 0;
    left: -120px; transform: skewX(-30deg); }
.action_text h5{color: #ffbb18; font-size: 24px; font-weight: 300;}
.action_text span{color: #fff; font-size: 35px; letter-spacing: 0.5px; font-weight: 500;}

/*main_testimo*/
.main_testimo{background: url(../images/testi_bg.png) no-repeat top center;}
.main_testimo .small-title { text-align: center;}
.main_testimo .big-title{text-align: center; margin: 0 0 50px;}
.main_testimo .big-title:before{ margin: 0 auto;  left: 0; right: 0;}
.slider_text{text-align: center; background: #ffffffc9; padding: 40px; box-shadow: 0 0 7px 0 rgb(43 52 59 / 8%);}
.slider_text span{color: #896b25; font-size: 17px; font-weight: 400;}
.slider_text h5{ margin: 15px 0 5px; font-size: 20px;}
.slider_text .fa{color: #ffbb18; font-size: 55px; margin: 0 0 15px;}
.slider_text p{color: #4e4e4e;}
.slider_text img{margin: 10px auto; border: 5px solid #efefef; width: 19%; border-radius: 50%;}
.slider_text .bx-viewport{height: auto !important;}
.main_testimo .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom: -37px;}
.main_testimo .bx-wrapper .bx-pager.bx-default-pager a.active {background: #ffbb18;}
.main_testimo .bx-wrapper .bx-pager.bx-default-pager a { background: #e3e3e3;}

/*counter*/
.counter{background: url(../images/call_to_action_bg.jpg) no-repeat top;  position: relative; overflow: hidden; background-size: cover;}
.counter:before{position: absolute; content: ''; background: #000000e8; width: 100%; height: 100%; top: 0;left: 0px;}
.counter-Txt {text-align: center; margin: 0 40px;}
.counter-value { font-size: 65px; font-weight: 700; color: #fff;}
.counter-Txt label { font-size: 65px; font-weight: 700; color: #fff; margin: 0;}
.counter-Txt h4 {color: white; font-size: 18px; font-weight: 400; margin: 0;}
.counter-Txt .fa{color: #ffbb18; display: block; font-size: 40px;}

/*main_footer*/
.main_footer{background:url(../images/boating.jpg) no-repeat top; position: relative; background-size: cover; background-attachment: fixed;}
.main_footer:before{background: #02111ef2; position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0;} 

.main_footer p{color: #e5e5e5; font-weight: 300;}
.footer_text h2{ color: #ffbb18; margin: 0 0 25px; font-size: 27px;}
.footer_text h3{ color: #fff; margin: 25px 0 -20px;}
.footer_text h3 span{ color: #ffbb18;}
.footer_text .social{padding: 0; margin: 30px 0 0;} 
.footer_text .social li{padding: 0; margin: 0; text-decoration: none; display: inline-block;}
.footer_text .social li a{font-size: 24px; margin: 0 15px 0 0px; color: #ffbb18; transition: 0.5s;} 
.footer_text .social li a:hover{color: #fff;}
.footer_text .social li a .fa{transition: 0.5s;}
.footer_text .social li a .fa:hover{transform: rotate(360deg);}
.footer_text h4{ color: #fff; margin: 0 0; text-transform: uppercase; position: relative;}
.footer_text h4:before { position: absolute; bottom: -20px; left: 0; content: ''; width: 85px; height: 5px; background: #ffbb18;}
.footer_text h4 span{ color: #ffbb18;}
.footer_menu {padding: 0; margin: 30px 0 0;}
.footer_menu li{padding: 0; margin: 0; display: list-item; list-style-type: none;}
.footer_menu li a{font-size: 16px; color: #e5e5e5; font-weight: 300; line-height: 35px; transition: 0.5s;}
.footer_menu li a:hover{color: #ffbb18; padding: 0 0 0 5px;}
.more{ color: #ffbb18;  display: block;  margin: 15px 0 0;}
.more:hover{color:  #e5e5e5;}
.more .fa{transition: 0.5s;}
.more:hover .fa { padding: 0 0 0 10px;}
.footer_menu .fa{color: #ffbb18;}
.footer_menu p{margin: 10px 0 0;}
.copy p { color: #8d8d8d;  text-align: center; padding: 17px;  margin: 30px 0 0;  font-weight: 400; border-top: 1px dashed #626262; border-bottom: 1px dashed #626262;}

/*inner page css*/
.inner-header { background: url(../images/call_to_action_bg.jpg) no-repeat top center; background-size: cover; position: relative; background-position-y: -120px;}
.inner-header:before { position: absolute; content: '';  width: 65%;  height: 100%;  background: linear-gradient(to top, #02111e , #443207f0);
    top: 0;  left: -150px; transform: skewX(-40deg);}
 .inner_text { padding: 55px 0;}   
.inner_text h2{color: #fff; font-size: 50px;}
.inner_text span{color: #fff;}
.inner_text span a{color: #fff;}
.inner_text span a:hover{color: #ffbb18;}
/*mnv*/
.mnv{background: #f9f9f9b0;}
.mnv_img img{width: 100%;}
.mnv h5{color: #ffbb18;}
/*products*/
.main-products {text-align:center; background: url(../images/fefe.png) no-repeat center top; background-size: cover;}
.portfolio-menu .btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show>.btn-outline-dark.dropdown-toggle{background-color: #ffbb18 !important;  border-color: #e7a60b !important; color: #000;}
.main-products h5{    margin: 0 0 40px; font-size: 24px; padding: 0 380px; line-height: 30px;}
.portfolio-menu .btn{padding: 10px 20px;}
.portfolio-menu .btn-outline-dark{border-color: #e5e5e5;}
.main-products .item { padding: 5px;}
.gallery img{transition: 0.5s;}
.gallery img:hover{transform: scale(0.9); box-shadow: 0px 0px 4px 5px #0000001c;}

/*inner-contact-text*/
.inner-contact-text h3{position: relative;  margin: 0 0 50px; font-weight: 600;}
.inner-contact-text h3:before{position: absolute; left: 0; bottom: -20px; background: #ffbb18; height: 3px; width: 90px; content: ''; }
.inner-contact-text h4{ font-size: 30px; margin: 0 0 25px; font-weight: 600;}
.enquiry_form .form-control { padding: 25px 10px; font-weight: 500; border-radius: 0; color: #1e1e1e ; background: #fbfbfb;}
.enquiry_form .get-appoin{background: #ffbb18; border: 0;}


.enquiry_form .form-control:focus { border-color: #ffabcb; box-shadow: none;}
.enquiry_form .btn-primary{background: #f15992; border: 0; border-radius: 5px; padding: 15px 25px; font-weight: 600; letter-spacing: 0.5px; transition: 0.5s;}
.enquiry_form .btn-primary:hover{background: #000; color: #fff;}
.contact-icon {}
.contact-icon .fa{width: 60px;  height: 60px;  background: #3a3831;  border-radius: 50%; text-align: center; font-size: 30px; padding: 13px; color: #fff; margin: 0 19px 0 0px;}
.contact-commen-text h6{ color: #422222; font-size: 22px; font-weight: 600;}
.inner-contact-divt { display: flex; padding: 18px 12px; border: 1px solid #eee; background-color: #f9f9f9;  margin: 0 0 20px;}
.contact-commen-text p{color: #000000;}
.inner-contact-divt:hover { background: white;}
.inner-contact{background: url(../images/fefe.png) no-repeat center top; background-size: cover;}
.inner-contact-divt{position: relative; z-index: 1; overflow: hidden; height: 150px; transition: 0.5s;}

.inner-contact-divt:hover .contact-icon .fa{background: #ffbb18; box-shadow: 0px 0px 10px 9px #fff;}
.inner-contact-divt:before{background: #ffbb18;  width: 50%;  height: 100%;  top: 0; left: -40px;  content: '';  position: absolute;  z-index: -1; transform: skewX(-20deg);}

/*pop up*/
.modal-header {background: #ffbb18;}
.main_footer .modal-header h5{font-size: 24px;}
.modal-body .tabel{width: 40%; margin: 0 auto; background: red;}
.modal-body ul{padding: 0; margin: 0; }
.modal-body ul li{padding: 0; margin: 0; list-style-type: none; }
.modal-body ul li p{color: #161414; line-height: 30px; font-weight: 400; }
.modal-body h5{color: #ffbb18;}
.modal-body ul li p .fa{color: #ffbb18; margin: 0 10px 0 0px;}
.modal-open .modal{padding-right: 0 !important;}


header{
     // set animation
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
}
        
header.sticky {
    position: fixed;           
    width: 100%;
    background: #fff;
    text-align: left;
    margin: 0;
    z-index: 500;
    box-shadow: 1px 1px 10px #0000003b;
   overflow: hidden; 
}

#preloader { position: fixed;top: 0;left: 0; right: 0; bottom: 0; background-color: #222;
  /* change if the mask should have another color then white */
  z-index: +9999;
  /* makes sure it stays on top */
}

#status {
  width: 900px;
  height: 500px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(../images/loader.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
  /*margin: -100px 0 0 -100px;*/
  /* is width and height divided by two */
}

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{bottom: 0px;}
/*fiexdcss*/
.bx-wrapper{border: 0; margin-bottom: 0; box-shadow: none; background: none;}
.mnp{margin: 0; padding: 0;}
.bx-wrapper .bx-pager.bx-default-pager a{background: #ffffff36;}
.bx-wrapper .bx-pager.bx-default-pager a.active{background: #d454cc;}
/*.bx-viewport{height: auto !important;}*/
/*top-btn-css*/
#back-to-top-btn { display: none;position: fixed;bottom: 20px;right: 35px;font-size: 26px; width: 50px;
  height: 50px; background-color:#ffbb18;color: #333; cursor: pointer;outline: none; border-radius: 0%;
  transition-duration: 0.2s; transition-timing-function: ease-in-out; transition-property: background-color, color; border: 1px solid white; z-index: 2;  }
#back-to-top-btn:hover {background-color: #000;}
#back-to-top-btn img{margin: 0 auto; position: absolute; left: 50%; right: 50%; transform: translate(-50%, -50%);}