@font-face {
    font-family: Comfortaa;
    src: url(../webfonts/Comfortaa-Regular.ttf);
  }
  @font-face {
    font-family: Montserrat;
    src: url(../webfonts/Montserrat-Regular.ttf);
  }
body{
    font-family: Montserrat !important;
}

.mob-lang {    
    height: 20px;
    width: 34px;
    position: fixed;
    right: 78px;
    top: 24px;
    z-index: 2000;
}

.desk-lang {
    height: 20px;
    width: 34px;
    position: fixed;
    right: 32px;
    top: 75px;
    z-index: 2000;
}

.custom-page-content{
    background:whitesmoke;
    padding-top:20px;
    padding-bottom:20px;
}

.carousel-brand-spinner{
    position: absolute;
    height:150px;
    width:150px;
    display: block;
    z-index: 10;
    top:50%;
    left:50%;
    transform: translate(-50%,-70%);
}
.carousel-brand-spinner path {
    fill:#333;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

main {
    position: absolute;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
}

nav {
    transition-duration: 1s;
}

.mn-toogle-btn {
    color: whitesmoke;
    position: absolute;
    font-size: 2em;
    top: 22px;
    right: 36px;
    transition-duration: 1s;
}

.navbar-dark .navbar-nav .nav-link {
    color: whitesmoke;
    transition-duration: 1s;
}

.custom-dark-scroll .mn-toogle-btn,
.custom-dark-scroll .navbar-nav .nav-link,
.custom-dark-scroll .brand-name-desktop {
    color: whitesmoke;
}

.custom-dark-scroll .logo-path {
    fill: whitesmoke;
}

.custom-dark-scroll {
    background: rgba(0, 0, 0, 0.8) !important;
}

.custom-dark-toogle {
    background: rgba(0, 0, 0, 0.8) !important;
}

.logo-svg {
    height: 100%;
    width: 100%;
}

.logo-path {
    transition-duration: 1s;
    fill: whitesmoke;
}

.logo-mobile {
    float: left;
    width: 60px;
    height: 60px;
}

.logo-desktop {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
}
.logo-desktop:hover >img{
    transform:scale(1.5);
    transition-duration:0.5s;
}
.brand-name-desktop {
    color: whitesmoke;
    position: absolute;
    vertical-align: bottom;
    margin-top: 3px;
    margin-left: 26px;
    transition-duration: 1s;
}

.custom-desktop-navbar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100px;
    background: transparent;
    z-index: 99;
    transition-duration: 0.7s;
    border-left: 1px solid whitesmoke;
}

.custom-desktop-navbar-menu {
    position: fixed;
    height: 100vh;
    width: calc(100vw - 100px);
    top: 0;
    right: 100px;
    background: transparent;
    opacity: 1 !important;
    background: transparent;
    z-index: 99;
    display: none;
    -webkit-transition: background 2s;
    -ms-transition: background 2s;
    transition: background 2s;
}

.custom-desktop-navbar a,
.custom-desktop-navbar i {
    color: whitesmoke;
    transition-duration: 1s;
}

.custom-desktop-navbar.custom-dark-scroll {
    background: rgba(0, 0, 0, 0.4) !important;
    opacity: 1 !important;
}

.custom-desktop-navbar.custom-dark-toogle {
    background: rgba(0, 0, 0, 0.8) !important;
    opacity: 1 !important;
}

.custom-desktop-navbar.custom-dark-scroll a,
.custom-desktop-navbar.custom-dark-scroll i,
.custom-desktop-navbar.custom-dark-toogle a,
.custom-desktop-navbar.custom-dark-toogle i {
    color: whitesmoke;
}

.custom-desktop-navbar.custom-dark-scroll .logo-path,
.custom-desktop-navbar.custom-dark-toogle .logo-path {
    fill: whitesmoke;
}

.custom-desktop-navbar .cdn-toogle-btn {
    position: relative;
    top: 36px;
    left: 36px;
    font-size: 2em;
}

.custom-desktop-navbar-menu ul {
    display: flex;
    list-style: none;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 100%;    
    justify-content: center;
}
.cdn-link-container {
    padding-left: 10px;
    padding-right: 10px;
    height: 100%;
    overflow: visible;
    top: 0;
    position: relative;
    text-align: center;
}

.cdn-link-inner {
    height:50px;
    position: relative;
    overflow: hidden;
    top: 0;
    right: 0;
    transition-duration: 1s;
}

.cdn-li {
    height: 50px;
    overflow: auo;
}



.cdn-link-container:hover .cdn-link-inner {
    animation: expand-translate 0.3s ease-in-out forwards;
}
.vl {
    border-left: 1px solid rgba(255, 255, 255, .55);
    height: 50px;
    width: 1px;
    position: relative;
}

.vl.vl-side:first-of-type {
    display: none;
}

.vl.vl-center {

    left: 50%;
}

.cdn-svg-cont {
    height: 50px;
    width: 50px;
    margin: auto;
}

.cdn-svg-cont path {
    fill: whitesmoke;
}

.cdn-toplink {
    height:50px;
    font-size: 1em;
    color: whitesmoke;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.cdn-botlink {
    font-size: 1em;
    color: whitesmoke;
    text-transform: capitalize;
    text-decoration: none;
    cursor: pointer;
    max-width:200px;
    display: flex;
    max-width: 200px;
    justify-content: center;
}

.cdn-toplink.link:hover,
.cdn-botlink:hover {
    color: royalblue;
}

.cdn-svg-cont.link:hover svg {
    background-color: whitesmoke;
    transition-duration: 1s;
}
.cdn-svg-cont.link:hover .logo-path {
    fill: black;
}

.carousel-item {
    height: 100vh;
}

.carousel-caption {
    transform: translate(0%, -50%);
    bottom: 0;
}
.carousel-indicators [data-bs-target] {  
    background-color: whitesmoke;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-image: url() !important;
    color: whitesmoke;
    font-size: 2em;
}
.carousel-brand-text{
    text-align:center;
    left: 12px;
    bottom: -12px;
    position: absolute;
}
#mn-toogle-xmark,
#cdn-toogle-xmark {
    display: none;
}

.animate__animated.animate__backInLeft,
.animate__animated.animate__backOutLeft {
    --animate-duration: 500ms;
}

#brand-name-desktop2 {
    position: absolute;
    z-index: 99;
    color: whitesmoke;
    left: 69px;
    top: 21px;
    font-size: 25px;
    font-weight: 400;
}

#logo-desktop2 {
    height: 39px;
    position: absolute;
    z-index: 99;
    top: 20px;
    left: 40px;
}
.logo-desktop-home-link:hover svg{
    transition-duration: 1s;
    background-color: whitesmoke;
}
.logo-desktop-home-link:hover .logo-path{
    fill:black;
} 
@media (max-width: 768px) {
    #cdn-menu {
        display:none !important;
    }
}

@media (min-width: 768px) {
    .sk-cube-grid{        
        transform: translate(-11.5px, -67%) !important;
    }
   .carousel-brand,
   .carousel-brand-spinner {
        transform: translate(calc(-50% - 50px), -70%);
    }

    .carousel-control-prev {
        transform: translate(20px, 0px);
    }

    .carousel-control-next {
        transform: translate(-120px, 0px);
    }

    .carousel-indicators,
    .container {
        transform: translate(-50px, 0px);
        padding-left: 50px;
        padding-right: 50px;
    }

    .container,
    .container-md,
    .container-sm {
        max-width: 670px;
    }
    footer{
        
        transform: translate(-50px, 0px);
    }

    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }

    .text-md-left {
        text-align: left !important;
    }
}

@media (min-width: 992px) {
    .sk-cube-grid{        
        transform: translate(-11.5px, -67%) !important;
    }
    .carousel-brand,
    .carousel-brand-spinner  {
        transform: translate(calc(-50% - 50px), -70%);
    }

    .carousel-control-prev {
        transform: translate(20px, 0px);
    }

    .carousel-control-next {
        transform: translate(-120px, 0px);
    }

    .carousel-indicators,
    .container {
        transform: translate(-50px, 0px);
        padding-left: 50px;
        padding-right: 50px;
    }
    footer{
        
        transform: translate(-50px, 0px);
    }

    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 860px;
    }

    .text-md-left {
        text-align: left !important;
    }
}

@media (min-width: 1200px) {
    .sk-cube-grid{        
        transform: translate(-11.5px, -67%) !important;
    }
    .carousel-brand,
    .carousel-brand-spinner  {
        transform: translate(calc(-50% - 50px), -70%);
    }

    .carousel-control-prev {
        transform: translate(20px, 0px);
    }

    .carousel-control-next {
        transform: translate(-120px, 0px);
    }

    .carousel-indicators,
    .container {
        transform: translate(-50px, 0px);
        padding-left: 50px;
        padding-right: 50px;
    }
    footer{
        
        transform: translate(-50px, 0px);
    }

     .container,
     .container-lg,
     .container-md,
     .container-sm,
     .container-xl {
        max-width: 1090px;
    }

    .text-md-left {
        text-align: left !important;
    }
}

@media (min-width: 1400px) {
    .sk-cube-grid{        
        transform: translate(-11.5px, -67%) !important;
    }
    .carousel-brand,
    .carousel-brand-spinner {
        transform: translate(calc(-50% - 50px),-70%);
    }

    .carousel-control-prev {
        transform: translate(20px, 0px);
    }

    .carousel-control-next {
        transform: translate(-120px, 0px);
    }

    .carousel-indicators,
    .container {
        transform: translate(-50px, 0px);
        padding-left: 50px;
        padding-right: 50px;
    }
    footer{
        
        transform: translate(-50px, 0px);
    }

     .container,
     .container-lg,
     .container-md,
     .container-sm,
     .container-xl,
     .container-xxl {
        max-width: 1300px;
    }

    .text-md-left {
        text-align: left !important;
    }
}

@media (min-width: 1600px) {
    .sk-cube-grid{        
        transform: translate(-11.5px, -67%) !important;
    }
    .carousel-brand,
    .carousel-brand-spinner {
        transform: translate(calc(-50% - 50px),-70%);
    }

    .carousel-control-prev {
        transform: translate(20px, 0px);
    }

    .carousel-control-next {
        transform: translate(-120px, 0px);
    }

    .carousel-indicators,
    .container {
        transform: translate(-50px, 0px);
        padding-left: 50px;
        padding-right: 50px;
    }
    footer{
        
        transform: translate(-50px, 0px);
    }

     .container,
     .container-lg,
     .container-md,
     .container-sm,
     .container-xl,
     .container-xxl {
        max-width: 1470px;
    }

    .text-md-left {
        text-align: left !important;
    }
}

.svglogo2:hover{
    transform:scale(1.2);
    transition-duration:0.5s;
}