body {line-height: 1;}
h1 {line-height: 1;}
h2 {line-height: 1;}
h3 {line-height: 1;}
h4 {line-height: 1;}
h5 {line-height: 1;}
p:last-child {margin-bottom: 0;}

/* General */
.noscroll {height: 100vh; overflow-y: hidden;}

.custom-next {position: absolute; width: 50px; right: 25px; top: 50%; transform: translateY(-50%); z-index: 99; cursor: pointer;}
.custom-prev {position: absolute; width: 50px; left: 25px; top: 50%; transform: translateY(-50%) rotate(180deg); z-index: 99; cursor: pointer;}

.close-icon {padding: 25px; background: #004684; left: 0px; top: 0; position: absolute; z-index: 9999; overflow: hidden; transition: 0.5s; transform: rotate(180deg); cursor: pointer;}
.close-icon::before {content: ''; position: absolute; width: 2px; height: 30px; background: #fff; transform: rotate(45deg); top: 10px; transition: 0.5s;}
.close-icon::after {content: ''; position: absolute; width: 2px; height: 30px; background: #fff; transform: rotate(-45deg); top: 10px; transition: 0.5s;}

.close-icon:hover {background: #ff7866;}
.close-icon:hover::before {transform: rotate(-135deg) !important;}
.close-icon:hover::after {transform: rotate(-225deg)!important;}

.hamburger {width: 50px; height: 30px; position: absolute; cursor: pointer; right: 20px; top: 20px; transition: 0.3s; z-index: 99999; display: none;}
.hamburger span {height: 2px; background: #fff; width: 100%; position: absolute; opacity: 1; transition: 0.3s;}
.hamburger span:nth-child(1) {top: 0;}
.hamburger span:nth-child(2) {top: 14px;}
.hamburger span:nth-child(3) {bottom: 0;}

.hamburger.active span:nth-child(2) {opacity: 0; transform: rotate(90deg); top: 15px;}
.hamburger.active span:nth-child(1) {top: 0; transform: rotate(135deg); top: 15px;}
.hamburger.active span:nth-child(3) {bottom: 0; transform: rotate(225deg); top: 15px;}

.gal-container {position: relative; width: 18%; margin: 10px; cursor: pointer;}
.gal-container .gal-item {height: 200px; overflow: hidden; position: relative; border-radius: 15px; transition: 0.3s;}
.gal-container .gal-item img {position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; width: 100%; height: 100%; width: auto; max-width: none;}
.gal-container .gal-pop {position: fixed; opacity: 0; transition: 0.5s; width: 75%;transform: translate(-50%, -50%); left: 150%; top: 50%; z-index: -999;}
.gal-container .gal-pop img {width: 50%; transition: 0.3s;}
.gal-container .gal-pop::after {content: ''; background: #0008; width: 101vw; height: 101vh; z-index: -1; position: absolute; transform: translate(-50%, -50%); left: 150%; top: 50%; transition: 0.6s;}
.gal-container.active {cursor: default;}
.gal-container.active .gal-pop img {width: 100%;}
.gal-container.active .gal-pop {opacity: 1; z-index: 999;  transform: translate(-50%, -50%); left: 50%;}
.gal-container.active .gal-pop::after {transform: translate(-50%, -50%); left: 50%;}
.gal-container .gal-pop .close-icon {padding: 18px 27px 33px 40px; border-radius: 60px 0px 0px 0px;}

.gal-container:hover .gal-item {transform: scale(1.1);}

.mobile-nav { box-sizing: border-box; position: fixed; display: block;background: #181818;top: 0; z-index: 99; transition: 0.5s; height: 100vh; width: 100%; left: -110%; border-radius: 50%; padding: 40px; min-height: 100vh;
min-height: -webkit-fill-available;}
.mobile-nav > a {position: relative; color: #1d1f1e; display: inline-block;z-index: 9999; font-size: 60px;font-weight: 600; transition: 0.3s;}
.mobile-nav > a:hover {color: #18463e;}
.mobile-nav > a >img {padding: 0;width: 250px;margin: -25px 0 25px;}

.mobile-nav::after { box-sizing: border-box; content: ""; position: absolute; display: block; background: #f2f2f2;top: 0; z-index: 99; transition: 0.5s; height: 100vh; width: 100%; left: -120%; border-radius: 50%;}
.mobile-nav.active {left: 0; border-radius: 0; bottom: 0px;}
.mobile-nav.active::after {left: 0; border-radius: 0;}

.mobile-nav ul {position: relative; z-index: 999; list-style: none; margin: 0;}
.mobile-nav ul li {width: 100%;}
.mobile-nav ul li a {color: #1d1f1e;text-decoration: none;font-size: 30px;line-height: 1.3;transition: 0.3s ease;display: inline-block;padding: 10px;border:none; outline: none; box-sizing: border-box;}
.mobile-nav ul li a:hover {font-weight: 600;}

.wrapper {max-width: 85%; margin: 0 auto;}
.wrapper-sml {max-width: 65%; margin: 0 auto;}

/* Ruakaka Motors - Main CSS */

:root{
  --rm-blue:#00a3dd;
  --rm-yellow:#ffd400;
  --rm-dark:#0b0b0b;
  --rm-text:#1c1c1c;
  --rm-muted:#4c4c4c;
  --rm-wrap:1200px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
font-family:"gotham";
  color: var(--rm-text);
  background: #ffffff;
}

img{ max-width:100%; height:auto; display:block; }
a{ text-decoration:none; }

/* HERO */
.rm-hero{
  position:relative;
  min-height: 800px;
  width:100%;
  overflow:hidden;
  background: #000;
}

.rm-hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.rm-hero__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.rm-hero__top{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:5;
  padding: 28px 0;
}

.rm-hero__top-inner{
  margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 80px;
}

.rm-hero__logo-left{
  width: 520px;
  max-width: 60%;
  height:auto;
}

.rm-hero__logo-right{
  width: 190px;
  max-width: 30%;
  height:auto;
}

.rm-hero__content{
  position:relative;
  z-index:5;
  min-height: 800px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 120px 30px 90px;
}

.rm-hero__small{
  margin: 0 0 10px 0;
  color: rgba(255,255,255,.9);
  font-size: 20px;
  line-height: 1.4;
font-family:"gotham";
  font-weight: 600;
}

.rm-hero__h1{
  margin: 0 0 18px 0;
  color:#fff;
  font-size: 30px;
  letter-spacing: 1px;
  font-weight: 800;
font-family:"gotham";
}

.rm-hero__btn{
  display:inline-block;
  background: var(--rm-blue);
  color:#fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .6px;
  padding: 14px 28px;
  border-radius: 999px;
  text-transform: uppercase;
}

.rm-hero__btn:hover{
  filter: brightness(1.05);
}

/* ABOUT */
.rm-about{
  width:100%;
  background:#fff;
}

.rm-about__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
}

.rm-about__content{
  padding: 20px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin: 0 auto;
}

.rm-about__h2{
  margin: 0 0 18px 0;
  color: var(--rm-blue);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
    max-width: 500px;
font-family:"gotham";
}

.rm-about__content p{
  margin: 0 0 16px 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--rm-muted);
  max-width: 520px;
font-family:"gotham";
}

.rm-about__bold{
  margin-top: 10px;
  font-weight: 800;
  color: var(--rm-text);
font-family:"gotham";
}

.rm-about__bold span{
  font-weight: 400;
  color: var(--rm-muted);
}

.rm-about__buttons{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  margin-top: 18px;
}

.rm-about__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--rm-blue);
  color:#fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
}

.rm-about__pill:hover{
  filter: brightness(1.05);
}

.rm-about__image{
  width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 100px 0;
}

.rm-about__image img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
}



/* FOOTER */
.rm-footer{
  background: var(--rm-blue);
  color:#fff;
  padding: 18px 0;
  font-size: 13px;
}

.rm-footer__inner{
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 80px;
  font-family:"gotham";
    font-weight: 300;
}




#loader { position: absolute; left: 50%; top: 50%; z-index: 1; width: 30px; height: 30px; transform: translate(-50%, -50%); border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; transition: 0.3s; opacity: 1;}

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

.animate-bottom { position: relative; -webkit-animation-name: animatebottom; -webkit-animation-duration: 1s; animation-name: animatebottom; animation-duration: 1s}

@-webkit-keyframes animatebottom { from { bottom:-100px; opacity:0 } to { bottom:0px; opacity:1 }}
@keyframes animatebottom { from{ bottom:-100px; opacity:0 } to{ bottom:0; opacity:1 }}