@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');
* {
 padding:0;
 margin:0;
 box-sizing:border-box;
 outline:none;
 text-decoration:none
}
html,
body {
 height:100%
}
body {
 color:#fff;
 background-color:#000;
 font-family:'Poppins',sans-serif;
 -webkit-background-size:cover;
 -moz-background-size:cover;
 -ms-background-size:cover;
 -o-background-size:cover;
 background-size:cover
}
.container {
 max-width:1560px;
 margin:0 auto
}
.navigation {
 position:fixed;
 top:0;
 left:0;
 right:0;
 z-index:99;
 background-color:rgba(0,0,0,.9);
 padding:2px 0 2px 0
}
.navigation .container1 {
 max-width:90%;
 margin:auto
}
.navigation .navbar {
 position:relative
}
.navigation .navbar .logo-toggle-container {
 position:absolute;
 left:50%;
 top:8px;
 transform:translateX(-50%)
}
.navigation .navbar .logo-toggle-container a {
 display:block
}
.navigation .navbar .logo-toggle-container a img {
 width:216px
}
.navigation .menu {
 text-align:right
}
@media screen and (min-width:1024px) {
 .navigation .menu {
  display:block!important;
  height:auto!important
 }
}
.navigation .menu li {
 display:inline-block;
 padding:7px 100px
}
.navigation .menu li a {
 display:block;
 padding:8px 15px;
 font-weight:500;
 letter-spacing:1px;
 font-size:20px;
 color:#EEEEEE
}
.navigation .menu li a {
 color:#EEEEEE
}
.navigation .menu li a:hover {
 color:#FF5722
}
.navigation .menu li:nth-child(1),
.navigation .menu li:nth-child(2) {
 float:left
}
.mobile-nav {
 display:none
}
@media screen and (max-width:1600px) {
 .navigation .menu li {
  padding:7px 50px
 }
}
@media screen and (max-width:1200px) {
 .navigation .menu li {
  padding:7px 10px
 }
}
@media screen and (max-width:767px) {
 .navigation {
  padding:8px 22px 1px
 }
 .navigation .navbar .logo-toggle-container {
  position:static;
  transform:translateX(0%)
 }
 .navigation .navbar .logo-toggle-container a img {
  width:180px;
  margin-top:2px;
  margin-left:-15px
 }
 .navigation .navbar .logo-toggle-container a {
  width:80%
 }
 .navigation .navbar .logo-toggle-container .toggle-box {
  position:absolute;
  right:0;
  top:10px;
  display:block;
  z-index:1;
  user-select:none;
  appearance:none;
  border:none;
  outline:none;
  background:none;
  cursor:pointer
 }
 .navigation .navbar .logo-toggle-container .toggle-box span {
  display:block;
  width:30px;
  height:4px;
  margin-bottom:5px;
  position:relative;
  background-color:#fff;
  border-radius:6px;
  z-index:1;
  transform-origin:0 0;
  transition:.4s
 }
 .navigation .navbar .logo-toggle-container .toggle-box:hover span:nth-child(2) {
  transform:translateX(10px);
  background-color:#FF5722
 }
 .navigation .navbar .logo-toggle-container .toggle-box.is-active span:nth-child(1) {
  transform:translate(1px,-1px) rotate(45deg)
 }
 .navigation .navbar .logo-toggle-container .toggle-box.is-active span:nth-child(2) {
  opacity:0;
  transform:translateX(15px)
 }
 .navigation .navbar .logo-toggle-container .toggle-box.is-active span:nth-child(3) {
  transform:translate(-2px,2px) rotate(-45deg)
 }
 .navigation .navbar .logo-toggle-container .toggle-box.is-active:hover span {
  background-color:#FF5722
 }
 .mobile-nav {
  position:fixed;
  left:100%;
  width:100%;
  min-height:100vh;
  display:block;
  z-index:98;
  background-color:rgba(0,0,0,.9);
  padding-top:130px;
  transition:.4s
 }
 .mobile-nav.is-active {
  left:0
 }
 .mobile-nav a {
  display:block;
  width:100%;
  margin:0 auto 16px;
  text-align:center;
  padding:22px 10px;
  background-color:rgba(0,0,0,1);
  font-size:35px;
  color:#fff
 }
 .mobile-nav a:hover {
  color:#FF5722
 }
 .navigation .menu {
  text-align:center;
  display:none
 }
 .navigation .menu li {
  display:block;
  float:none!important;
  padding:0 10px;
  border-bottom:1px solid #ccc
 }
}
.slider-main-container {
 margin-top:6%;
 height:80vh;
 overflow:hidden;
 position:relative
}
.slide {
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 z-index:1;
 display:none
}
.slide.active {
 display:flex;
 flex-direction:column
}
@media (max-width:800px) {
 .slide.active {
  flex-direction:column-reverse;
  justify-content:space-around
 }
}
.caption-container,
.image-container,
.image-container1 {
 width:50%;
 height:100%;
 margin:auto;
 background:#FFF;
 position:absolute;
 display:flex;
 justify-content:center;
 align-items:center
}
.caption-container1 {
 width:50%;
 height:100%;
 margin:auto auto auto 10px;
 background:transparent;
 color:#FFF;
 position:absolute;
 display:flex;
 justify-content:center;
 align-items:center
}
.caption {
 width:90%;
 margin:auto;
 display:grid;
 align-items:center;
 justify-items:center
}
.caption-container1 .caption h1 {
 font-size:clamp(2rem,5vw,5rem);
 color:#FFF;
 text-align:center
}
.slide.active .caption h1 {
 opacity:0;
 animation:caption-animation .5s ease forwards;
 animation-delay:.6s
}
.caption p {
 font-size:clamp(.9rem,4vw,1.7rem);
 font-weight:normal;
 text-align:center;
 line-height:2
}
.slide.active .caption p {
 opacity:0;
 animation:caption-animation .5s ease forwards;
 animation-delay:.8s
}
.caption a {
 font-weight:bold;
 padding:10px 30px;
 background:#000;
 color:#FFF;
 text-decoration:none;
 border:3px solid #000;
 border-radius:8px;
 background-size:auto
}
.caption a:hover {
 background:#fb5523;
 transform:.5s ease-in
}
.slide.active .caption a {
 opacity:0;
 animation:caption-animation .5s ease forwards;
 animation-delay:1.2s
}
@keyframes caption-animation {
 0% {
  opacity:0;
  transform:translateY(100px)
 }
 100% {
  opacity:1;
  transform:translateY(0)
 }
}
.image-container {
 right:0;
 background:transparent
}
.image-container1 {
 right:0;
 background:transparent
}
.image-container img {
 width:810px;
 height:500px;
 margin:auto;
 border-radius:20px;
 animation:img-animation 2s ease
}
@keyframes img-animation {
 0% {
  opacity:0
 }
 100% {
  opacity:1
 }
}
.image-container1 img {
 max-width:810px;
 height:auto;
 width:90%;
 margin:auto;
 border-radius:20px;
 box-shadow:16px 15px 22px -16px rgba(254,87,33,1);
 animation:img-animation 2s ease
}
.controls .prev,
.controls .next {
 position:absolute;
 z-index:2;
 bottom:3vmax;
 margin:auto;
 text-align:center;
 cursor:pointer
}
.controls .prev:hover,
.controls .next:hover {
 opacity:.8
}
.controls .prev {
 right:80px
}
.controls .next {
 right:40px
}
@media only screen and (max-width:980px) {
 .caption-container1,
 .image-container1 {
  position:relative;
  width:100%;
  left:0;
  top:4rem
 }
 .image-container1 {
  opacity:.85
 }
 .caption-container1 {
  background:transparent
 }
 .image-container1 img {
  position:absolute;
  bottom:65px
 }
}
@media only screen and (max-width:650px) {
 .caption {
  width:90%
 }
 .controls .prev {
  right:50px
 }
 .controls .next {
  right:10px
 }
}
@media only screen and (max-width:440px) {
 .caption {
  width:85%;
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-top:0
 }
 .slider-main-container {
  height:92vh
 }
 .caption {
  width:90%
 }
 .image-container,
 .image-container1 {
  opacity:1
 }
}
@-webkit-keyframes scroll {
 0% {
  transform:translateX(0)
 }
 100% {
  transform:translateX(calc(-250px * 7))
 }
}
@keyframes scroll {
 0% {
  transform:translateX(0)
 }
 100% {
  transform:translateX(calc(-250px * 7))
 }
}
.slider-logo {
 height:8vh;
 margin:auto;
 overflow:hidden;
 position:relative;
 width:100%
}
.slider-logo .slide-track-logo {
 -webkit-animation:scroll 40s linear infinite;
 animation:scroll 40s linear infinite;
 display:flex;
 width:calc(250px * 14);
 margin-top:4px
}
.slider-logo .slide-logo {
 height:7vh;
 width:25vw;
 display:flex;
 justify-content:space-around;
 align-items:center;
 background:transparent;
 margin:2px 10rem 0 0
}
.slider-logo .slide-logo img {
 height:100%
}
@media only screen and (max-width:440px) {
 .sec1 {
  padding:2.6rem 0 1rem 0!important
 }
 .slider-logo {
  height:8vh
 }
 .slider-logo .slide-logo {
  height:4vh;
  margin:2px 5rem 0 0
 }
}
.brand-logo {
 margin-top:5%;
 padding:30px 0
}
.brand-logo-inner {
 display:flex;
 flex-wrap:wrap;
 justify-content:space-between;
 align-items:center
}
.sec1 {
 position:relative;
 padding:40px 0
}
.sec1 h3 {
 text-transform:uppercase;
 line-height:40px
}
.sec1-inner {
 display:flex;
 flex-wrap:wrap;
 justify-content:space-between
}
.sec1 .text {
 width:47%
}
.sec .text-left {
 text-align:right
}
.sec1 .text-right {
 text-align:left
}
.sec1:before {
 content:'';
 position:absolute;
 top:25px;
 left:0;
 width:100%;
 height:1px;
 background:linear-gradient(to left,transparent,#fff,transparent)
}
.sec1:after {
 content:'';
 position:absolute;
 bottom:20px;
 left:0;
 width:100%;
 height:1px;
 background:linear-gradient(to left,transparent,#fff,transparent)
}
.sec3 {
 padding:150px 0 0
}
.sec3 h2 {
 text-transform:uppercase;
 max-width:60%
}
.sec3-slider {
 margin-top:90px
}
.slick-arrow {
 position:absolute;
 top:-160px
}
.slick-prev {
 left:inherit;
 right:180px
}
.slick-next {
 right:90px
}
.slick-next:before,
.slick-prev:before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 background:#fff url(images/arrow-next.svg) no-repeat;
 background-size:14px;
 background-position:center;
 width:70px;
 height:70px;
 line-height:70px;
 border:1px solid #fff;
 opacity:1;
 border-radius:50%
}
.slick-prev:before {
 background:transparent url(images/arrow-prev.svg) no-repeat;
 background-size:14px;
 background-position:center
}
.sec4 {
 min-height:100vh;
 margin-top:7vw
}
.sec4 h2 {
 text-transform:uppercase;
 font-size:3rem;
 text-align:center
}
.sec4 h6 {
 font-size:.85rem;
 font-weight:400;
 margin-top:3px
}
.row {
 display:flex;
 flex-wrap:wrap;
 line-height:1.5;
 justify-content:center
}
.info {
 padding:5px 27px 2px 6px;
 background:#1d1d1d;
 border-radius:22px 60px 60px 5px;
 position:absolute;
 margin:2px;
 display:grid;
 grid-column:inherit;
 text-align:center;
 text-transform:uppercase;
 color:orange;
 box-shadow:6px 5px 6px -3px coral
}
.hide {
 display:none
}
.gallery {
 width:100%;
 display:block;
 min-height:50vh;
 padding:75px 0 50px 0
}
.gallery .gallery-filter {
 padding:0 15px;
 width:100%;
 text-align:center;
 margin-bottom:20px
}
.gallery .gallery-filter .filter-item {
 color:#ffffff;
 font-size:1.313rem;
 text-transform:uppercase;
 display:inline-block;
 margin:0 10px;
 cursor:pointer;
 line-height:2.2;
 transition:all .3s ease
}
.gallery .gallery-filter .filter-item.active {
 color:#ff9800;
 border-color:#ff9800
}
.gallery .gallery-item {
 padding:15px
}
.gallery .gallery-item.show {
 animation-duration:2s;
 animation-name:fadeIn
}
@keyframes fadeIn {
 0% {
  opacity:0;
  margin-bottom:100%
 }
 100% {
  opacity:1;
  margin-bottom:0
 }
}
.sec4 .card {
 display:grid;
 grid-template-columns:300px;
 grid-template-rows:260px 170px 50px;
 grid-template-areas:"image" "text" "stats";
 border-radius:18px;
 background:#1d1d1d;
 color:#fff;
 text-align:justify;
 background-repeat:no-repeat;
 box-shadow:0 0 6px 2px rgba(255,123,0,.554),0 35px 25px -15px rgba(0,0,0,.5);
 position:relative
}
.sec4 .card-image {
 grid-area:image
}
.sec4 .card-text {
 grid-area:text
}
.sec4 .card-stats {
 grid-area:stats
}
.sec4 .card-image {
 grid-area:image;
 border-top-left-radius:15px;
 border-top-right-radius:15px
}
.sec4 .card-text {
 grid-area:text;
 margin:25px
}
.sec4 .card-text>p {
 color:rgb(200,199,199);
 font-size:15px;
 font-weight:300;
 margin-top:1rem;
 line-height: 1.5em !important;
}
.sec4 .card-text h2 {
 margin-top:-2rem;
 font-size:30px;
 text-align:left
}
.sec4 .card-text h5 {
 font-size:15px
}
.sec4 .card:hover {
 transform:scale(1.15);
 box-shadow:5px 5px 15px rgba(0,0,0,.6)
}
.sec4 .card {
 transition:.5s ease;
 cursor:pointer;
 margin:30px
}
@media(max-width:415px) {
 .sec4 {
  padding:0
 }
 .sec4 h2 {
  font-size:2.5rem
 }
 .gallery {
  padding:5px 0
 }
 .gallery .gallery-filter {
  margin-bottom:0
 }
 .gallery .gallery-filter .filter-item {
  margin:14px 6px;
  line-height:1.2
 }
}
@media(max-width:340px) {
 .card {
  grid-template-columns:248px;
  grid-template-rows:200px 200px 15px
 }
 .card-text h2 {
  margin-top:-2.1rem;
  font-size:25px
 }
 .card-text h5 {
  font-size:14px
 }
 .card-text p {
  margin-top:-10px
 }
 .gallery .gallery-filter .filter-item {
  margin-bottom:10px
 }
}
.onas {
 position:relative;
 padding:40px 0 100px 0
}
.onas:after {
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 width:100%;
 height:1px;
 background:linear-gradient(to left,transparent,#fff,transparent)
}
.onas:before {
 content:'';
 position:absolute;
 top:25px;
 left:0;
 width:100%;
 height:1px;
 background:linear-gradient(to left,transparent,#fff,transparent)
}
.sec2 {
 padding:30px 0 0
}
.sec2 h2 {
 text-transform:uppercase
}
.sec2 p {
 line-height:30px
}
.sec2-inner {
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 justify-content:center
}
.sec2-inner .img {
 width:auto
}
.sec2-inner .img img {
 border-radius:20px;
 box-shadow:16px 15px 20px -16px rgba(255,109,51,.8)
}
.sec2-inner .text {
 width:50%;
 margin-left:-65px;
 z-index:9
}
.sec2-inner .text h2 {
 padding:10px;
 background:black;
 border-radius:20px;
 box-shadow:0 2px 5px 0 rgba(255,166,0,.526);
 margin:1rem;
 text-align:center
}
.sec2 .text-inner {
 position:relative;
 margin:55px 0 0 190px
}
.sec2 .text-inner:before {
 content:'';
 position:absolute;
 top:0;
 left:-30px;
 width:1px;
 height:120%;
 background:linear-gradient(to top,transparent,#fff)
}
.left-right-sec:nth-child(even) .text {
 margin-right:-65px;
 text-align:right
}
.left-right-sec:nth-child(even) .text-inner {
 margin:55px 100px 0 60px
}
.left-right-sec:nth-child(even) .text-inner:before {
 left:inherit;
 right:-30px
}
@media(max-width:900px) {
 onas {
  width:95vmin
 }
 .sec2-inner {
  display:flex;
  flex-direction:column-reverse
 }
 .sec2-inner .text {
  width:90%;
  margin:0 auto;
  text-align:center
 }
 .left-right-sec:nth-child(2n) .text {
  text-align:center;
  margin:0
 }
 .img img {
  width:40vmin;
  height:60vmin
 }
}
@media(max-width:820px) {
 .onas {
  display:grid;
  grid-column:auto
 }
 .sec2-inner .text {
  width:100%;
  margin:0
 }
 .sec2-inner {
  width:100%;
  left:0;
  top:0
 }
 .img img {
  width:80vmin;
  height:110vmin
 }
 .text-inner {
  display:none
 }
}
footer {
 position:relative;
 bottom:0;
 width:100%;
 margin-top:5vmin;
 padding-bottom:5vmin
}
footer:after {
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 width:100%;
 height:1px;
 background:linear-gradient(to left,transparent,#fff,transparent)
}
.main-content {
 display:flex
}
.main-content .box {
 flex-basis:50%;
 padding:3px 20px
}
.box h2 {
 font-size:1.125rem;
 font-weight:600;
 text-transform:uppercase
}
.box .content {
 margin:20px 0 0 0;
 position:relative
}
.box .content:before {
 position:absolute;
 content:'';
 top:-10px;
 height:2px;
 width:100%;
 background:#1a1a1a
}
.box .content:after {
 position:absolute;
 content:'';
 height:2px;
 width:15%;
 background:#f12020;
 top:-10px
}
.main-content .left {
 display:flex;
 align-content:center;
 justify-content:center
}
.left .img {
 display:flex;
 justify-content:center;
 align-items:center
}
.left .img img {
 width:100%;
 height:auto;
 padding:0;
 margin:0
}
.center .content .fa {
 display:inline-block;
 font-size:1.35rem;
 background:#1a1a1a;
 height:45px;
 width:45px;
 line-height:50px;
 text-align:center;
 border-radius:50%;
 transition:.3s;
 cursor:pointer
}
.center .content .fa:hover {
 background:orange
}
.center .content .text {
 font-weight:500;
 padding-left:5px;
 color:white
}
.center .content .text:hover {
 color:orange
}
.center .content .phone {
 margin:15px 0
}
.center .content .social {
 margin:15px 0
}
.right .content {
 width:80%
}
.right form .text {
 font-size:1.0625rem;
 margin-bottom:2px;
 color:#656565
}
.right form .msg {
 margin-top:10px
}
.right form input,
.msg select,
.right form textarea {
 width:100%;
 font-size:1.0625rem;
 background:#333333;
 color:#fff;
 padding-left:10px;
 border:1px solid #222222
}
.right form input {
 height:35px
}
.right form .btn {
 margin-top:10px
}
.right form .btn button {
 height:40px;
 width:100%;
 border:none;
 outline:none;
 background:orange;
 font-size:1.263rem;
 font-weight:600;
 text-shadow:2px 2px 3px black;
 cursor:pointer;
 transition:.3s;
 box-shadow:2px 2px 6px #ffe82fa1;
 color:white;
 display:flex;
 justify-content:center;
 align-items:center
}
.right form .btn button:hover {
 background:#FF5722
}
.bottom center {
 padding:5px;
 font-size:.9375rem;
 background:#151515
}
.bottom center span {
 color:#656565
}
.bottom center a {
 color:#FF5722;
 text-decoration:none
}
.bottom center a:hover {
 text-decoration:underline
}
.copyright {
 padding: 1em 0 0;
 text-align:center
}
.copyright p {
 font-size:14px
}
@media screen and (max-width:900px) {
 footer {
  position:relative;
  bottom:0
 }
 .main-content {
  flex-wrap:wrap;
  flex-direction:column;
  gap:2rem;
  margin-bottom:2rem
 }
 .left .img img {
  display:none
 }
 .right .content {
  width:100%
 }
}