@tailwind base;
@tailwind components;
@tailwind utilities;


.text-shadow-1{
    text-shadow: #222 1px 1px 1px;
}

.text-shadow-5{
    text-shadow: #222 5px 5px 5px;
}

@font-face {
    font-family: Ubuntu;
    src: url('../../public/fonts/ubuntu/Ubuntu-M.ttf');
    font-weight: normal;
    font-style: normal;
}

*{
    font-family: Ubuntu ;
}

.sticky {
    position: fixed;
    z-index: 9999;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-bg-opacity: 0.8;
    transition-property: color, background-color, border-color, fill, stroke,
    opacity, box-shadow, transform, filter, -webkit-text-decoration-color,
    -webkit-backdrop-filter;
    transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
    transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
}

.sticky .navbar-logo {
    /*padding-top: 0.5rem;
    padding-bottom: 0.5rem;*/
}

/*.sticky #navbarToggler span {
    --tw-bg-opacity: 1;
    background-color: rgb(9 14 52 / var(--tw-bg-opacity));
}*/

.sticky #navbarCollapse li a, .sticky #auth a  {
    --tw-text-opacity: 1;
}

.sticky #navbarCollapse li a:hover {
    --tw-text-opacity: 1;
    color: rgb(48 86 211 / var(--tw-text-opacity));
    opacity: 1;
}

#navbarCollapse li .ud-menu-scroll.active {
    opacity: 0.7;
}

.sticky #navbarCollapse li .ud-menu-scroll.active {
    --tw-text-opacity: 1;
    color: rgb(48 86 211 / var(--tw-text-opacity));
    opacity: 1;
}

.sticky .loginBtn {
    --tw-text-opacity: 1;
    color: rgb(9 14 52 / var(--tw-text-opacity));
}

.sticky .loginBtn:hover {
    --tw-text-opacity: 1;
    color: rgb(48 86 211 / var(--tw-text-opacity));
    opacity: 1;
}

.sticky .signUpBtn {
    --tw-bg-opacity: 1;
    background-color: rgb(48 86 211 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.sticky .signUpBtn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(9 14 52 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}
.sticky #navbarToggler span {
    --tw-bg-opacity: 1;
    background-color: #28376d;
}

/* ======= work ======== */

.single_item {
    max-width: 370px;
}


.work_content {
    padding: 28px;
    position: relative;
}

.work_content .arrow {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.work_content .arrow:hover{
    --tw-bg-opacity: 1;
    background-color: rgba(249, 79, 79, var(--tw-bg-opacity));
}

.work_content .arrow{
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    font-size: 1.125rem;
    line-height: 1.75rem;
    position: absolute;
    right: 28px;
    top: -20px;
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-text-opacity: 1;
    color: rgba(56, 66, 77, var(--tw-text-opacity));
}

.work_content .arrow:hover{
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
}

.work_content .arrow{
    width: 44px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-duration: 300ms;
}

.work_title a {
    --tw-text-opacity: 1;
    color: rgba(56, 66, 77, var(--tw-text-opacity));
}

.work_title a:hover{
    --tw-text-opacity: 1;
    color: rgba(249, 79, 79, var(--tw-text-opacity));
}

.tns-controls{
    text-align: right;
}

.tns-controls button {
    border: #1a202c solid 1px;
    border-radius: 10px;
    padding: 2px 4px;
    margin-left: 5px;
    width: 2.5rem ;
    height: 2rem;
}

.tns-controls button:hover{
    background-color: #1a202c;
    color: white;
}

.tns-controls button:active{
    background-color: #3d4852;
    color: white;
}


/* ======== team ======= */

.tns-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0px;
    bottom: -20px;
    width: 100%;
    z-index: 10;
}

.tns-nav button {
    --tw-bg-opacity: 1;
    background-color: rgba(249, 79, 79, var(--tw-bg-opacity));
    --tw-bg-opacity: 0.3;
}

.tns-nav button:hover{
    --tw-bg-opacity: 1;
}

.tns-nav button{
    border-radius: 9999px;
    border-style: none;
    height: 12px;
    margin-left: 8px;
    margin-right: 8px;
    width: 12px;
}

.tns-nav button.tns-nav-active {
    --tw-bg-opacity: 1;
}

.hex3 {
    -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
    clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);

}
.hex4 {
    -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background: #d2d2d2;
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}