@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


:root {

    /* BRAND COLORS */
    --rb-yellow: #E8A12C;
    --rb-yellow-light: #F9DFA8;
    --rb-yellow-soft: #FFE4B0;

    /* TEXT COLORS */
    --rb-text-dark: #111111;
    --rb-text-primary: #3A3A3A;
    --rb-text-secondary: #6A6A6A;
    --rb-text-white: #FFFFFF;

    /* CTA BUTTON COLORS */
    --rb-blue-primary: #1D73D1;
    --rb-blue-primary-hover: #1559A6;

    --rb-blue-secondary: #2F80ED;
    --rb-blue-secondary-hover: #1C5EB8;

    /* LABEL & BADGE COLORS */
    --rb-label-black: #0B0B0B;

    /* COMMON COLORS */
    --rb-white: #FFFFFF;
    --rb-black: #000000;

    --radius : 2.25em!important;
}


/*.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}*/

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}


body { font-weight:600!important; font-family: "Open Sans", sans-serif; font-optical-sizing: auto; }
h1,h2,h3,h4,h5,h6 { font-weight:"Poppins"; font-weight:800!important; }
.yellx { background:#f8ae34; }
.yelly { color:#f8ae34; }
.hero { position:relative; }
.hero-frame { position: sticky; top: 0; }
.video-box iframe { pointer-events:none; position:sticky; top:0; }

.badge {
  background: rgba(255,255,255,.3);
  color: rgb(46, 46, 46);
  /*text-shadow: 1px 0px 3px rgba(0,0,0,.3);*/
  border-radius: 6em;
  padding: .3em .7em;
  border: 3px solid rgba(255,255,255,.3);
  display: inline-grid;
  font-weight: 700;
  font-size:.8em;
}

.hero-content small { font-weight:700; font-size: 1.5em; color:rgba(255,255,255,.8); text-shadow: 1px 0px 3px rgba(0,0,0,.1); }
.hero-content p { color:rgba(0,0,0,.6); }
.hero-content h3 { text-shadow: 1px 0px 3px rgba(255,255,255,.9); }

.btn { font-weight:700!important; border-radius:50px!important; text-wrap: nowrap; }
.btn.btn-outline { border:3px solid black; font-weight:700; color:black; background:transparent; border-radius:50px; text-shadow: 0px 1px 1px #fffc; box-shadow: 0px 0px 3px 0px #fffffff0; }
.btn.btn-outline-white { border:3px solid rgba(255,255,255,1); font-weight:700; color:white; background:transparent; border-radius:50px; text-shadow: 0px 1px 1px #333c; box-shadow: 0px 0px 3px 0px #3333330;  }
.btn.btn-outline-orange { border:3px solid orange; font-weight:700; color:orange; background:transparent; border-radius:50px; text-shadow: 0px 1px 1px #fffc; box-shadow: 0px 0px 3px 0px #fffffff0;  }
.btn.btn-outline-yellow { border:3px solid yellow; font-weight:700; color:yellow; background:transparent; border-radius:50px; text-shadow: 0px 1px 1px #fffc; box-shadow: 0px 0px 3px 0px #fffffff0;  }

.navbar-container { position:sticky; top:0; z-index:1; }
.navbar-container header { border:none!important; }

.card .card-subtitle { font-weight:400!important; }

/* YT Frameless */
.video-box iframe { border: none !important; outline: none !important; background: transparent !important; }

.video-box {
    position: relative;
    width: 317px;
    height: 564px;
    overflow: hidden;
    border-radius: 12px;
}

.video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}



/* sprite file */
.service-icon {
  width: 120px;
  height: 120px;
  background-repeat: no-repeat;
  margin: 2em auto;
  border-radius: var(--radius);
  background-position: center;
  background-size: contain;
  transition: .3s all ease-in-out;
}

/* Positions for each icon */
.icon-taxi   { background-image: url('icon-taxi.png'); object-fit:contain; }
.icon-scooty { background-image: url('icon-bike.png'); object-fit:contain;  }
.icon-auto   { background-image: url('icon-auto.png'); object-fit:contain; }
.icon-parcel { background-image: url('icon-parcel.png'); object-fit:contain;  }
.icon-tour   { background-image: url('icon-tour.png'); object-fit:contain; }



.card { padding:1.5em; transition:.3s all ease-in-out; }
.card h6 { display: block; text-align:center!important; }
.card:hover h6 { color:var(--rb-yellow); text-shadow:0px 3px 1px rgba(255,255,255,.1); }
.card p { font-size:.8em; color: rgba(0,0,0,.9); color:var(--rb-text-secondary); }
.card:hover p { color: rgba(0,0,0,.5); color:var(--rb-text-secondary); }
.card:hover .service-icon { transform:scale(1.1); }
.card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.1); transform: translateY(-4px); }


/* Why */
.why-card { padding:2em; min-height:250px; align-content:top; }
.why-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transform: translateY(-4px);
}

.why-icon {
    width: 64px;
    height: 64px;
    margin:0 auto;
    margin-bottom: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    transition:.3s all ease-in-out;
}

.why-card:hover .why-icon { transform:scale(1.1); }


/* Replace these 4 with your sprite later */
.why-icon.eco       { background-image: url('https://cdn-icons-png.flaticon.com/512/702/702797.png'); }
.why-icon.safety    { background-image: url('https://cdn-icons-png.flaticon.com/512/1828/1828640.png'); }
.why-icon.money     { background-image: url('https://cdn-icons-png.flaticon.com/512/3064/3064197.png'); }
.why-icon.northeast { background-image: url('https://cdn-icons-png.flaticon.com/512/854/854878.png'); }




.wa-icon {
    width: 128px;
    height: 128px;
    margin:0 auto;
    margin-bottom: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    transition:.3s all ease-in-out;
}

.whatsapp-icon { background-image: url('https://cdn-icons-png.flaticon.com/128/15713/15713434.png'); }

#support .wa-icon:hover  { transform:scale(1.1); }


.why-card h6 { font-size:1.3em; text-align:left; text-wrap:nowrap; }
.why-card p { min-height:55px; }


.faq-container { width: inherit; }
.collapse-header { align-items: center; }
.collapse-body.active, .collapse-body.is-visible { padding:1em .5em!important; min-height:150px; border-left:3px solid var(--rb-yellow)!important; }
.collapse-header h5 { font-size:1.2em; }

.logo-divider { margin-top:-35px; border-radius:100%; box-shadow: 0px -1px 2px 0px rgba(0,0,0,.1); transition:.3s all ease-in-out; }
footer:hover .logo-divider { margin-top:-35px; border-radius:100%; box-shadow: 0px -2px 10px 3px rgba(0,0,0,.2); transform:scale(1.1); }

.footer-links h6 { font-size:1.5em; }