.bg-main {
    background: #0A0A2E !important;
}

.bg-lightl {
    background: #cacaca21 !important;
}

.text-main {
    color: #0A0A2E !important;
}


/* header */

.logo {
    width: 12rem;
}

/* .nav-link {
    position: relative;
} */


/* my style */


/* Header */

#container-header {
    height: 70px;
    width: 100vw;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    z-index: 999;
}


/* Add this class when scroll page */

.change-color {
    /* border-bottom: 0.5px solid #EDEDED; */
    backdrop-filter: blur(6px);
    /* background: #0A0A2E !important; */
    background: #1d1c1e69 !important;
    /* box-shadow: 1px 1px 20px 1px #8080802e; */
}
/* 
.change-color-1 {
    background: #1d1c1ebd !important;
}

.itemNmenu:hover.sub-menu {
    display: none !important;
}

ul {
    list-style: none !important;
} */


/* ~~~~~~~~~~ animation css ~~~~~~~~~~ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.fade-in {
    opacity: 0;
    /* make things invisible upon start */
    animation: fadeIn cubic-bezier(0.165, 0.84, 0.44, 1) 1;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}

.fade-in.one {
    animation-delay: 0.2s;
}

.fade-in.two {
    animation-delay: 0.5s;
}

.fade-in.three {
    animation-delay: 0.8s;
}

@keyframes slideup {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes slidebottom {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.slide-in {
    opacity: 0;
    /* make things invisible upon start */
    animation: slideup cubic-bezier(0.165, 0.84, 0.44, 1) 1;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}

.slide-bottom {
    opacity: 0;
    /* make things invisible upon start */
    animation: slidebottom cubic-bezier(0.165, 0.84, 0.44, 1) 1;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}

.slide-in.slide-bottom.one {
    animation-delay: 0.2s;
}

.slide-in.slide-bottom.two {
    animation-delay: 0.5s;
}

.slide-in.slide-bottom.three {
    animation-delay: 0.8s;
}

.parellex-img {
    position: fixed;
    z-index: -3;
}

.g-text {
    /* background: linear-gradient(to right, #e91e63 0%, #277b8d 100%) !important; */
    background: linear-gradient(to right, #7d8dff, #ff4f81) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
}

.rounded-10 {
    border-radius: 10px !important;
}

.text-trun {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.c-head {
    line-height: 1;
    /* height: 25%; */
}

.shadow-light {
    box-shadow: -1px 11px 20px 0px #f0f0f0;
}

.cta-content-img {
    width: 100% !important;
    height: 95vh !important;
    object-fit: cover;
}

.bg-filter-dark {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: -1;
    object-fit: cover;
    background: #0c0332d1;
}

.g-text-h {
    height: 120px;
}

.h-180 {
    height: 180px !important;
}

.obj-none {
    object-fit: none !important;
}

.height-100vh {
    height: 100vh !important;
}

.height-25 {
    height: 25px !important;
}

.h-40 {
    height: 40px;
}


.search-box {
    display: flex;
    line-height: 28px;
    align-items: center;
    position: relative;
    /* max-width: 190px; */
   }
   
   .search-box   .input {
    width: 100%;
    height: 40px;
    line-height: 28px;
    padding: 0 1rem;
    padding-left: 2.5rem;
    border: 2px solid transparent;
    border-radius: 8px;
    outline: none;
    background-color: #f3f3f4;
    color: #0d0c22;
    transition: .3s ease;
   }
   
   .search-box   .input::placeholder {
    color: #9e9ea7;
   }
   
   .search-box  .input:focus, input:hover {
    outline: none;
    border-color: rgb(54 0 182 / 50%);
    background-color: #fff;
    /* box-shadow: 0 0 0 4px rgb(234 76 137 / 10%); */
    box-shadow: 0 0 0 4px rgb(54 0 182 / 10%);
   }
   
   .search-box .icon {
    position: absolute;
    left: 1rem;
    fill: #9e9ea7;
    width: 1rem;
    height: 1rem;
   }


   .border-light{
    border: 1px solid #80808024 !important;
   }
   
   .px-5p{
    padding-right: 4rem!important;
    padding-left: 4rem!important;
   }