/* ===================================
    Crafto - It business
====================================== */
/* font */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
/* variable */
:root {     
    --base-color: #0ebab1;
    --base-color-new: #0ebab1; 
    --base-color-light: #1f232c;
    --dark-gray:#252840;
    --dark-gray-new:#252840;
    --black:#05060a;
    --medium-gray:#7d8087;
    --very-light-gray: #f7f7f7;
    --alt-font: 'Plus Jakarta Sans', sans-serif; 
    --primary-font: 'Manrope', sans-serif;
    --base-color-game: #0ebab1;
    --base-color-game-old: #00a570;
    --very-light-gray-np: #f0f2f8;
    --base-color-ui: #08477d;
    --base-color-ui-bg: #a1cef5;
    --ui-text-color: #08477d;
}


.bg-regal-blue {
    background-color: #162340;
}
.bg-base-color-ui-bg{
    background-color: var(--base-color-ui-bg);
}
.text-color-ui{
    color: var(--ui-text-color);
}
/* reset */
body{
    line-height: 29px;
}
/* header */
header .navbar-brand img {
    max-height: 65px;
} 
.navbar .navbar-nav .nav-link {
    font-size: 15px;
}
header .btn.btn-rounded.btn-large {
    padding:10px 26px;
    font-size: 13px;
    font-weight: 500;
}
.sticky .header-transparent .header-button .btn {
    color: var(--dark-gray);
    border-color: var(--extra-medium-gray);
}
.sticky .header-transparent .header-button .btn:hover {
    border-color: var(--dark-gray);
    color: var(--white);
    background:  var(--dark-gray);
}
header.sticky.sticky-active [data-header-hover="light"] .widget-text i {
    color: var(--white);
}
/* accordion style 02 */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    background-color: var(--dark-gray);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover a,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active a{
    opacity: .5;
}
/* btn */
[class*=btn-transparent], [class*=" btn-transparent"] {
    font-weight: 500;
}
.btn {
    text-transform: none;
  font-family: var(--alt-font);
  font-weight: 500;
}
.btn.btn-switch-text.btn-extra-large > span {
    padding: 19px 40px;
}
.btn-gradient-purple-pink {
    background-image: linear-gradient(to right, #0b58cb, #e94037, #0b58cb);
    background-size: 200% auto;
    color: var(--white);
}
/* bg gradient color */
.bg-gradient-dark-gray-transparent { 
    background: -webkit-linear-gradient(right, rgba(24, 25, 28, .9), rgba(255, 255, 255, 0.0));
    background: linear-gradient(to right, rgba(24, 25, 28, .9), rgba(255, 255, 255, 0.0));
}
.bg-gradient-very-light-gray-transparent {
    background: -webkit-linear-gradient(top, rgba(240, 244, 253, 1.0), rgba(255, 255, 255, 0.0));
    background: linear-gradient(to right, rgba(240, 244, 253, 1.0), rgba(255, 255, 255, 0.0));
}
.bg-gradient-flamingo-red-transparent {
    background: -webkit-linear-gradient(right, rgba(243, 69, 59, 1.0), rgba(255, 255, 255, 0.0));
    background: linear-gradient(to right, rgba(243, 69, 59, 1.0) 10%, rgba(255, 255, 255, 0.0) 95%);
}
.bg-gradient-base-color-transparent {
    background: -webkit-linear-gradient(right, rgba(15, 89, 201, 1.0), rgba(255, 255, 255, 0.0));
    background: linear-gradient(to right, rgba(15, 89, 201, 1.0) 10%, rgba(255, 255, 255, 0.0) 95%);
}
.bg-gradient-light-gray-transparent {
    background: -webkit-linear-gradient(right, rgba(222, 230, 244, 1.0), rgba(255, 255, 255, 0.0));
    background: linear-gradient(to right, rgba(222, 230, 244, 1.0), rgba(255, 255, 255, 0.0));
}

.bg-gradient-blue-whale-transparent { 
    background: -webkit-linear-gradient(right, rgba(17, 27, 50, 1.0), rgba(255, 255, 255, 0.0));
    background: linear-gradient(to right, rgba(17, 27, 50, 1.0), rgba(255, 255, 255, 0.0));
}
.bg-gradient-quartz-light-transparent {
    background: -webkit-linear-gradient(right, rgba(227, 225, 245, 1.0), rgba(255, 255, 255, 0.0));
    background: linear-gradient(to right, rgba(227, 225, 245, 1.0), rgba(255, 255, 255, 0.0));
}
.bg-gradient-quartz-white { 
    background-image: linear-gradient(to bottom, #f7f7ff, #f4f4fb, #f8f7fc, #fbfbfe, #ffffff);
}
.bg-gradient-base-color-transparent {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(24 188 199)), to(transparent));
    background-image: linear-gradient(to top, rgba(24, 188, 199, .8) 0%, transparent 100%);
}
.bg-gradient-base-color-transparent-inv {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(24 188 199)), to(transparent));
    background-image: linear-gradient(to bottom, rgba(24, 188, 199, .1) 0%, transparent 100%);
}
.bg-gradient-regal-blue-transparent {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(0 0 0)), to(transparent));
    background-image: linear-gradient(to top, rgb(0 0 0) 30%, transparent 100%);
}
.bg-gradient-flamingo-amethyst-green {
    background-image: linear-gradient(to right, #f7693c, #c74e45, #7d3785, #582d9f, #3928af);
}
.bg-gradient-base-transparent {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(22, 32, 44, 1)), to(transparent));
    background-image: linear-gradient(to top, rgba(22, 32, 44, .9) 8%, transparent 80%);
}
.bg-gradient-dark-transparent {
    background: -webkit-gradient(linear, left bottom, left top, color-stop(7%, #162340), to(transparent));
    background: linear-gradient(to top, #162340 7%, transparent 70%);
}
.bg-midnight-blue {
    background-color: #1e2033;
}
.bg-black-transparent{
    background-color: #1e2033;
}
.bg-home-header-bar{
    background-color: #010412;
}
/* bg color */
.bg-gradient-emerald-blue-emerald-green {
    background-image:linear-gradient(50deg,#09afea 0,#19e089 100%);
}
.bg-gradient-black-green {
    background-image: linear-gradient(to right top, #1f2021, #1b1d1c, #1b1d1c, #222523, #333c37);
}

.bg-light-gray-contact{
    background: -webkit-linear-gradient(top, rgba(240, 244, 253, 1.0), rgba(240, 244, 253, 0.5));
    background: linear-gradient(to top, rgba(240, 244, 253, 1.0), rgba(240, 244, 253, 0.5));
}
/* text color */
.text-gradient-emerald-blue-emerald-green {
    background-image: linear-gradient(to right top, #09afea, #19e089);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* button gradient */
.btn-gradient-emerald-blue-emerald-green {
    background-image: linear-gradient(to right, #09afea, #19e089, #09afea);
    background-size: 200% auto;
    color: var(--white);
}


/* text */
.text-flamingo {
    color: #e55b53;
}
.text-gradient-orange-sky-blue {
    background-image: linear-gradient(to right, #5e70f3, #6170f1, #8074dc, #b87bb6, #ec8192);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 25px;
}
/* portfolio filter */
.portfolio-filter li {
    padding: 0 18px;
    line-height: 24px;
}
/* blog */ 
.categories-btn {
    font-size: 11px;
}
/* page title */
.page-title-extra-large h1 {
    font-size: 4rem;
    line-height: 4rem;
}
.page-title-extra-large h2 {
    font-size: 17px;
    line-height: 28px;
    margin: 0 auto;
}

.process-step-style-05 .progress-step-separator {
    bottom: -10px;
    height: 100%;
    z-index: -1;
}
/* height */
.h-72px {
    height: 72px !important;
}
#map {
    height: 650px;
    border-radius: 6px 0 0 6px;
}
/* margin top */
.mt-minus-50px {
    margin-top: -50px;
}
/* line-height */
.lh-200 {
    line-height: 12.5rem;
}
/* bottom */
.bottom-auto {
    bottom: auto;
}
/* footer */
footer .footer-logo img {
    max-height: 65px;
}
footer ul li {
    margin-bottom: 0;
}
.footer-light a:hover, .footer-navbar li a:hover {
    color: var(--dark-gray);
}
@media (max-width: 1299px) {
    .navbar .navbar-nav .nav-link {
        font-size: 16px;
    }
    header .btn.btn-rounded.btn-large {
        padding: 10px 15px;
        font-size: 12px; 
    }
}
@media (max-width: 1199px) {
    .navbar .navbar-nav .nav-link {
        font-size: 15px;
    }
    header .btn.btn-rounded.btn-large {
        padding: 10px 10px;
        font-size: 11px; 
    }
}
@media (max-width: 991px) {
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        width: calc(100% + 30px) !important;
        margin-left: -15px;
        padding: 10px 45px;
        margin-bottom: 0;
        margin-right: -15px;
    }
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:last-child a {
        padding-bottom: 17px;
    }
    [data-mobile-nav-style=full-screen-menu] .navbar-full-screen-menu-inner .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a i {
        font-size: 19px;
    }
    header .btn.btn-rounded.btn-large {
        color: var(--dark-gray);
        border-color: var(--extra-medium-gray);
        padding: 10px 15px;
        font-size: 13px;
    }
}
@media (max-width: 767px) {
    .portfolio-filter li {
        padding: 0;
    }
    
}
.bg-light-turquoise-blue {
    background-color: #edf9fa;
}

.bg-oxford-blue{
    background-color: #262D38;
}

.float-l{
    float; left;
}

.underline{
  padding: 0 0 2px;
  position: relative;
  text-decoration: none;
  border-bottom: 2px solid;
  border-color: var(--base-color);
  letter-spacing: 0;
  background-color: transparent;
  margin-bottom: 10px;
}

.text-gradient-orange-sky-blue {
  background-image: linear-gradient(to right, #f36b4a, #c26772, #6256c8, #6256c8, #6256c8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-black-green {
  background-image: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,242,239,1) 80%, rgba(255,242,239,1) 100%);
}

.bg-process-green {
    background-color: #bdf4f1;
}

.bg-very-light-green {
  background-color: #ebf3ed;
}
.bg-blue-whale {
  background-color: #000;
}
.bg-gradient-black-dark-orange {
  background-image: linear-gradient(to right top, #353332, #312b28, #15110f, #4a3229, #5a2611);
}
.list-style-01 li{
    border-bottom: 0px !important;
}
.bg-light-black{
    background-color: #1f2126;
}
.p-table-hover:hover  {
-webkit-transform: translateY(-1%);
  transform: translateY(-1%);
  -webkit-transition: all 0.3s cubic-bezier(0.12, 0, 0.39, 0);
  transition: all 0.3s cubic-bezier(0.12, 0, 0.39, 0);
}
.services-box-style-03 .interactive-content-text {
  opacity: 1;
  visibility: visible;
  transform: translateY(100%);
  overflow: hidden;
} 
.services-box-style-03:hover .interactive-content-text {
  opacity: 1;
  visibility: visible;
  transform: translateY(1%);
  -webkit-transition: all 0.3s cubic-bezier(0.12, 0, 0.39, 0);
  transition: all 0.3s cubic-bezier(0.12, 0, 0.39, 0);
}
.box-shadow-light-svc {
  box-shadow: 0 0 3px rgba(24, 188, 199, .4);
  -webkit-transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 350ms cubic-bezier(0.37, 0, 0.63, 1);
}
.box-shadow-light-svc:hover{
    -webkit-transform: translate3d(0, -7px, 0);
  transform: translate3d(0, -7px, 0);
}
.bg-very-light-gray-svc {
  background-color: #fafafa;
}
.bg-very-light-gray-game {
  background-color: #201f21;
}
.base-color-game{
    color: var(--base-color-game);
}
.text-base-color-game{
    color: var(--base-color-game);
}
.bg-base-color-game{
    background-color: var(--base-color-game);
}
.bg-game-dark-color{
    background-color: #0d0d0d;
}
.bg-game-casual{
    background-color: #4f46e5;
}
.bg-game-hyper-casual{
    background-color: #e11d48;
}
.bg-game-puzzle{
    background-color: #16A34A;
}
.bg-game-action{
    background-color: #f97316;
}
.bg-game-simulation{
    background-color: #7c3aed;
}
.bg-game-sports{
    background-color: #0ea5e9;
}
.bg-game-arcade{
    background-color: #dc2626;
}
.bg-game-educational{
    background-color: #10b981;
}
.bg-game-blockchain{
    background-color: #e48900;
}

.bg-color-gradient-dark-game {
  background: rgb(5,5,5);
  background: linear-gradient(280deg, #201f21 0%, #000000 100%);
}
.bg-gradient-dark-gray-transparent-game { 
    background: -webkit-linear-gradient(left, rgba(24, 25, 28, 1), rgba(255, 255, 255, 0.0));
    background: linear-gradient(to left, rgba(24, 25, 28, 1), rgba(255, 255, 255, 0.0));
}

.card-body .interactive-content-text {
  opacity: 0;
  visibility: hidden;
  transform: translateY(170%);
  overflow: hidden;
} 
.card-body:hover .interactive-content-text {
  opacity: 1;
  visibility: visible;
  transform: translateY(1%);
  -webkit-transition: all 0.3s cubic-bezier(0.12, 0, 0.39, 0);
  transition: all 0.3s cubic-bezier(0.12, 0, 0.39, 0);
}

.card-body:hover p {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-150%);
  -webkit-transition: all 300ms cubic-bezier(0.37, 0, 0.63, 1);
  transition: all 300ms cubic-bezier(0.37, 0, 0.63, 1);
}

.bg-light-pink{
    background: #eee2ef;
}

.bg-gradient-light-pink-transparent {
  background: linear-gradient(to right, #d6cad6 15%, transparent 100%);
}

.bg-gradient-very-light-gray-transparent {
  background: linear-gradient(to right, #dddfeb 15%, transparent 100%);
}

.bg-black-transparent-game {
  background-color: rgba(0, 0, 0, 0.8);
}
.bg-black-transparent-game-outsource {
  background-color: rgba(0, 0, 0, 0.5);
}
.bg-black-transparent-home-banner {
  background-color: rgba(0, 0, 0, 0.2);
}
.bg-white-home-light {
  background-color: rgba(255, 255, 255, 0.8);
}
.border-color-transparent-white-very-light {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* List style 01 */
.list-style-01-game {
  list-style: none;
}
.list-style-01-game li {
  border-bottom: 1px solid;
}
.list-style-01-game li:last-child {
  border-bottom: 0px;
}


/* Game Process */
.bg-step-1 {
    background-color: #E3F2FD;
}
.text-step-1{
    color: #90CAF9;
}
.bg-step-1-overlay
{
    background-color: #90CAF9;
}

.bg-step-2 {
    background-color: #E8F5E9;
}
.text-step-2{
    color: #81C784;
}
.bg-step-2-overlay
{
    background-color: #81C784;
}

.bg-step-3 {
    background-color: #FFF3E0;
}
.text-step-3{
    color: #FFB74D;
}
.bg-step-3-overlay
{
    background-color: #FFB74D;
}

.bg-step-4 {
    background-color: #F3E5F5;
}
.text-step-4{
    color: #BA68C8;
}
.bg-step-4-overlay
{
    background-color: #BA68C8;
}

.bg-step-5 {
    background-color: #E0F7FA;
}
.text-step-5{
    color: #4DD0E1;
}
.bg-step-5-overlay
{
    background-color: #4DD0E1;
}

.bg-step-6 {
    background-color: #FFFDE7;
}
.text-step-6{
    color: #FFF176;
}
.bg-step-6-overlay
{
    background-color: #FFF176;
}

.bg-step-7 {
    background-color: #FBE9E7;
}
.text-step-7{
    color: #EF9A9A;
}
.bg-step-7-overlay
{
    background-color: #EF9A9A;
}

.bg-step-8 {
    background-color: #EDE7F6;
}
.text-step-8{
    color: #9575CD;
}
.bg-step-8-overlay
{
    background-color: #9575CD;
}

.bg-step-9 {
    background-color: #E0F2F1;
}
.text-step-9{
    color: #4DB6AC;
}
.bg-step-9-overlay
{
    background-color: #4DB6AC;
}
.one-half-screen {
  height: 550px !important;
}

@media (max-width: 1199px) {
  .one-half-screen {
    height: auto !important;
  }
}
.text-very-light-gray-np{
    color: var(--very-light-gray-np);
}

.border-start {
  border-left: var(--bs-border-width) var(--bs-border-style) rgba(255, 255, 255, 0.2) !important;
}