@import url('fonts.css');


html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg);
    border-bottom-color: #FDE9A9;
    font-family: body;
    color: var(--text);
    overflow-x: hidden;
}

*, *:before, *:after {
    text-shadow: none !important;
}

:root {
    /*theme color*/
    --text: #FFFFFF; /*white*/
    --bg: #000000; /*black*/
    --yellow: #FFFF00; /*yellow*/
    --error: red;
    /*--lighttext: #848484;*/ /*grey*/
    /*--nav-bg: #C3345B;*/ /*whitish grey*/
    /*--light-yellow: #E6AABA;*/ /*light pink*/
    /*--nav-text: #FFFFFF;*/ /*white*/
    /*grediant (webgradiant.com) color */
    --sky: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    /*theme font-family*/
}

h1 {
    font-family: body;
    font-weight: 700;
}


h2 {
    font-family: body;
    font-weight: 500
}

p {
    font-family: body;
}

-
/*.bi-instagram {
    color: transparent;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
}*/
/*.bi-whatsapp {
    color: #fff;
    background: linear-gradient(#25d366, #25d366) 14% 84% / 16% 16% no-repeat, radial-gradient(#25d366 57%, transparent 0) !important;
}*/
.sticky-button {
    width: 2.3%;
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.bi-google {
    background: linear-gradient( to bottom, #4285F4 25%, /* Blue */
    #EA4335 25%, /* Red starts */
    #EA4335 50%, /* Red ends */
    #FBBC05 50%, /* Yellow starts */
    #FBBC05 75%, /* Yellow ends */
    #34A853 75% /* Green starts */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.owl-next span, .owl-prev span {
    padding: 0 1rem;
}

img {
    width: 100%;
}

a {
    text-decoration: none;
    color: var(--text);
    transition: 0.3s;
}

    a:hover {
        opacity: 1;
        text-decoration: none;
        color: var(--pink);
    }

ul {
    list-style-type: none; /* removes bullets */
    padding-left: 0; /* removes left indentation */
    margin: 0; /* optional: remove default margin */
}

.row {
    margin: 0 !important;
}

.btn-primary {
    background-color: transparent;
    border: 1px solid var(--yellow);
    color: var(--yellow);
    padding: 7px 14px;
    border-radius: 40px;
    transition: 0.5s;
    font-size: 15px;
}

    .btn-primary:hover {
        color: var(--bg);
        background-color: var(--yellow);
    }

.pagination {
    justify-content: center;
    --bs-pagination-border-width: 0px;
    --bs-pagination-border-color: var(--text);
    --bs-pagination-color: var(--text);
    --bs-pagination-active-bg: transparent;
    --bs-pagination-active-color: var(--yellow);
    --bs-pagination-hover-color: var(--yellow);
    --bs-pagination-hover-bg: transparent;
}
/*-----------------layout--------------------*/

/*-----------------Nav-bar--------------------*/

/* ======== BASIC HEADER & NAV ======== */
header {
    margin: 0;
    width: 100%;
    background-color: transparent;
    /*box-shadow: 0px 0px 5px 0px #999;*/
    position: fixed;
    z-index: 2000;
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
}

.logo {
    padding: 1rem;
}

.logo img{
    width:60%;
}

nav {
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 320px;
    transform: translateX(320px);
    transition: transform 260ms ease-in-out;
    background-color: #141414;
    /*border: 1px solid var(--yellow);*/
    padding: 6rem 1rem 1rem 1rem;
    overflow-y: auto;
}

    nav ol {
        margin: 0;
        padding: 0;
    }

        nav ol li {
            list-style: none;
            padding: 20px;
            border-bottom: 0.2px solid var(--text);
        }

            nav ol li a {
                color: var(--text);
                text-decoration: none;
                font-weight: bold;
                text-transform: uppercase;
                font-weight: 400;
            }

            nav ol li .active{
                color: var(--yellow);
            }


/* ======== CHECKBOX & TOGGLE ======== */
input[type=checkbox] {
    display: none;
}

    input[type=checkbox]:checked ~ nav {
        transform: translateX(0);
    }

/* ======== HAMBURGER ICON ======== */
.menuIconToggle {
    height: 24px;
    width: 28px;
    cursor: pointer;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: center;
}

.hamb-line {
    width: 100%;
    height: 3px;
    background-color: var(--yellow);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* ======== ANIMATION TO CROSS ======== */
input[type=checkbox]:checked ~ .menuIconToggle .hamb-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

input[type=checkbox]:checked ~ .menuIconToggle .hamb-line:nth-child(2) {
    opacity: 0;
}

input[type=checkbox]:checked ~ .menuIconToggle .hamb-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ======== RESPONSIVE ======== */
@media screen and (max-width: 640px) {
    nav {
        height: 100vh;
        width: 100%;
        transform: translateX(100%);
    }
}

/* ======== DROPDOWN ======== */
.has-dropdown {
    position: relative;
}

    .has-dropdown > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

/* ======== ARROW ======== */
.arrow {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    transform: rotate(45deg);
    margin-left: 8px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* ======== DROPDOWN BASE ======== */
.dropdown {
    display: none;
}

/* ======== LEVEL COLORS ======== */
nav > ol > .has-dropdown + .dropdown {
    background-color: #141414; /* level 1 dropdown */
}

.dropdown .has-dropdown + .dropdown {
    background-color: #212020; /* level 2+ dropdown */
}

/* ======== ACTIVE STATES ======== */
.has-dropdown.active > a .arrow {
    transform: rotate(-135deg);
    border-color: var(--yellow);
}

/* Smaller arrow for nested dropdowns */
.dropdown .has-dropdown > a .arrow {
    border-color: #999;
    transform: rotate(45deg) scale(0.8);
}


/*-----------------Nav-bar--------------------*/


/*-----------------footer-bar--------------------*/
footer {
    background: var(--bg);
}

.footer-icons {
    text-align: center;
    padding: 1.5rem 0;
}

    .footer-icons a {
        font-size: 1.2rem;
        color: var(--yellow);
        padding: 0 0.3rem
    }
/*-----------------Footer-bar--------------------*/

@media(max-width: 550px) {
    header {
        padding: 0 1rem 0 0;
    }

    .logo {
        padding: 1.5rem;
    }

    .logo img {
        width: 50%;
    }

    .work-modal .btn-close-white{
        display: none;
    }

    .nav-link > a {
        line-height: 1;
        padding: 0.7rem 2rem;
    }

    .nav-links {
        padding-top: 3rem;
    }

    .dropdown-link > a {
        padding: 0.7rem 2rem;
        font-weight: 300;
        border-left: none;
        border-right: none;
        border-top: none;
    }

    .dropdown {
        border-bottom: none;
    }

        .dropdown > ul > li.dropdown-link:last-child > a {
            border-bottom: none;
        }
}