@font-face {
    font-family: "poppins";
    src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: "montserrat-regular";
    src: url(../fonts/montserrat/Montserrat-Regular.ttf);
}

@font-face {
    font-family: "montserrat-titles";
    src: url(../fonts/montserrat/Montserrat-ExtraBold.ttf);
}
@font-face {
    font-family: "montserrat-thin";
    src: url(../fonts/montserrat/Montserrat-Thin.ttf);
}
@font-face {
    font-family: "montserrat-bold";
    src: url(../fonts/montserrat/Montserrat-Bold.ttf);
}



*
{
    text-decoration: none !important;
    list-style: none !important;
    outline: none !important;
}






:root
{
    --one-font-color:rgb(52, 52, 52);
    --two-font-color:rgb(116, 129, 130);
    --main-color:#1c1c1c;
    --fontMontreg:"montserrat-regular";
    --fontMontthin:"montserrat-thin";
    --fontMonttitles:"montserrat-titles";
    --fontmontbold: "montserrat-bold";
    --fontPoppins:"poppins";

}

.mySecond-bg
{
    background-color: rgb(247, 247, 247);
}



body
{
    color: rgb(52, 52, 52);
    font-family: var(--fontPoppins) ;
    /* font-size: 14px; */
    
}

section
{
    padding-block: 5.5rem;
}

h3,h4,h5
{
    color: var(--one-font-color);
    font-family: var(--fontMontreg) ;
}

h1,h2
{
    font-family: var(--fontMonttitles);
}

p
{
    color: var(--two-font-color);
}

span
{
    display: inline-block;
    margin: 0;
}

button
{
    border: 0;
    background-color: transparent;
}

.myMainTitle
{
    font-size: 2.5rem;
    font-family: var(--fontMonttitles);
    position: relative;
    width: fit-content;
    margin: auto;
    isolation: isolate;
    margin-bottom: 4rem;

    &::after
    {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 50%;
        top: 50%;
        background: url(../images/dots.png);
        background-repeat: repeat;
        z-index: -1;

        
    }
}

/* -----------navbar------------------------------------------------------------------- */



nav
{
    
    background-color: transparent;
    color: #fff;
    width: 100%;
    top: 0;
    position: absolute !important;
    z-index: 999;
     
    .navbar-brand
    {
        color: #fff;
        font-family: var(--fontMonttitles);
    }

}

.navbar-scrolled
{
    background-color: #fff; 
    box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease;
    color: #111 !important;
    position: fixed !important;
    .navbar-brand
    {
        color: #111;
    }



}

/* -------------------home------------------------------------------------------------------ */


#home
{

    background:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)) ,url(../images/bg.jpg);
    background-size: cover;
    color: #fff;
    position: relative;
    height: 100vh;

    h1
    {
        font-size: 3.125rem;
    }

    p
    {
        color: #fff ;
        font-size: 3rem;
        font-family: var(--fontMontthin);
        font-size: 3.75rem;
        margin-bottom: 3rem;

        span
        {
            font-family: var(--fontMont);
            font-weight: 800;
        }
    }

    li
    {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;

        font-size: 14px;
        width: 35px;
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;

    }

}




/* -------------------------------About---------------------------------------------- */


#about
{

    img
    {
        width: 100%;
        padding: 0.5rem;
    }

    .about-img
    {
        position: relative;
    }

    .about-img::after
    {
        content: "";
        width: 80%;
        height: 80%;
        position: absolute;
        left: -20px;
        bottom: -25px;
        background-image: url(../images/dots.png);
        background-repeat: repeat;
        z-index: -1;
    }

    .inner > span:first-of-type 
    {
        color: rgb(153, 153, 153);
        letter-spacing: 2px;
        margin-bottom: 20px;
        font-size: 14px;
        text-transform: uppercase;
    }

    .inner
    {
        h3
        {
            font-size: 30px;
            font-weight: 600;
            margin: 0;
            
        }

        

        p
        {
            line-height: 1.6;
            span
            {
                margin: 0;
                font-weight: 700;
                color: var(--two-font-color);
            }
        }

        .about-progress
        {
            &>div
            {
                margin-block:2rem;
            }

            .progress
            {
                --bs-progress-bar-bg: var(--main-color);
                
            }
        }

        .about-buttons
        {
            margin-top: 3.5rem;
            .a1
            {
                --bs-btn-bg:var(--main-color);
                --bs-btn-color:#fff;
                --bs-btn-padding-x: 1.5rem;
                --bs-btn-padding-y: 0.6rem;
                font-size: 13px;
                --bs-btn-hover-color:var(--main-color);
                --bs-btn-hover-bg:#fff;
                --bs-btn-border-color: var(--main-color);
                --bs-btn-hover-border-color:var(--main-color);
            }

            .a2
            {
                font-size: 13px;
                --bs-btn-padding-x: 1.5rem;
                --bs-btn-padding-y: 0.6rem;
                --bs-btn-border-color: var(--main-color);
                --bs-btn-hover-border-color:var(--main-color);
                --bs-btn-hover-bg:var(--main-color);
                --bs-btn-color:var(--main-color);
            }


        }
        
    }
}


/* --------------------services--------------------------------------------------- */

#services
{
    background-color: #F7F7F7;

    .inner
    {
        box-shadow: 0px 10px 30px -8px rgba(0, 0, 0, 0.1);


        h3
        {
            font-family: var(--fontmontbold);
            

        }


        i
        {
            padding: 1.3rem;
            margin-bottom: 20px;
            background-color: #F4f4f4;
            border-radius: 50%;
            color:var(--one-font-color) ;
            transition: all 500ms ease;
            margin-bottom: 1rem;
            font-size: 1.6rem;
            transition: all 0.5s;
        }

        &:hover i
        {
            background-color: var(--main-color);
            color: #fff;
            
        }

        h3
        {
            padding-top: 0.5rem;
        }
    }


}

/* ------------------------------PORTFOLIO------------------------------------------ */


#portfolio
{



    li .nav-link
    {
        color: var(--one-font-color);
        font-family: var(--fontmontbold);
    }

    .ma5soos
    {
        background-color: rgba(0,0,0,0.5);
    }

    .btn-close
    {
        background: #fff var(--bs-btn-close-bg) center / 1em auto no-repeat;
    }


    .inner
    {
        position: relative;
        overflow: hidden;

        &:hover .hover-layer, &:hover span ,&:hover i
        {
            opacity: 1;
            transform: translateY(0);
        }

    }
    .hover-layer
    {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        background: rgba(255, 255, 255, 0.95);
        opacity: 0;
        transition: all 0.5s;
        z-index: 2;
        transform: translateY(10px);

        span
        {
            font-family: var(--fontmontbold);
            font-size: 12px;
            margin-bottom: 0.8rem;
            transform: translateY(-15px);
            transition: all 0.5s;
        }

        i
        {
            background-color: var(--one-font-color);
            color: white;
            font-size: 14px;
            padding: 0.4rem;
            border-radius: 50%;
            /* width: 30px;
            height: 30px; */
            transform: translateY(10px);
            transition: all 0.5s;
            border: 1px solid var(--one-font-color);
            

            &:hover
            {
                background-color: #fff;
                color: #000;
            }
                
        }
    }



    
}




/* ----------------CLIENTS------------------------------------------------------------- */

#clients
{
    background-color: #f7f7f7;

    p
    {
        font-size: 15px;
        margin-bottom: 2rem;
    }

    h5
    {
        font-family: var(--fontmontbold);
        font-size: 16px;
    }

    span
    {
        color: rgb(136, 136, 136);
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 2.5rem;
    }


    .carousel-indicators [data-bs-target]
    {
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        --bs-carousel-indicator-active-bg: #d6d6d6;
    }

    .carousel-item div
    {
        img
        {
            width: 100px;
            margin-bottom: 1rem;
        }
    }

}


/* ------------------------COUNTER---------------------------------------- */


#counterr
{

    

    .counter 
    {
        font-size: 30px;
     
        font-family: var(--fontMonttitles);
    }



    padding-block: 5rem;

    i
    {
        font-size: 1.7rem; 
        margin-bottom: 1rem;      
    }

    p
    {
        font-family: var(--fontmontbold);
    }
}

/* -------------------team---------------- */


#team
{

    background-color: #F7F7F7;
    .card
    {
        background-color: rgba(52, 52, 52, .8);
        &:hover .overlay
        {
            opacity: 1;
            transform: rotateY(0);
            scale: (1,1);
        }


        h4 , h5
        {
            color: #ffffff;
            text-align: center;
        }

        h5
        {
            font-family: var(--fontMonttitles);
            text-transform: uppercase;
        }
        .imgbox
        {
            position: relative;
        }

        img
        {
            transition: all 0.4s ease 0s;
        }

        .overlay
        {
            background-color: rgba(255, 255, 255, 0.95);
            position: absolute;
            text-align: center;
            inset: 5px;
            opacity: 0;
            transition: 0.5s;
            transform: rotateY(180deg) scale(0.5, 0.5);

            i
            {
                color: #fff;
                background-color: #000;
                display: block;
                font-size: 20px;
                height: 40px;
                width: 40px;
                line-height: 40px;
                border-radius: 50%;
                border: 1px solid #000;


                &:hover
                {
                    background-color: #fff;
                    color: #000;
                    border: 1px solid #000;
                }
            }
        }

        
    }
}


/* --------------contact-------------------------- */


#contact
{
    .inner
    {


        h3
        {
            font-family: var(--fontmontbold);
            

        }


        i
        {
            padding: 1.3rem;
            margin-bottom: 20px;
            background-color: #F4f4f4;
            border-radius: 50%;
            color:var(--one-font-color) ;
            transition: all 500ms ease;
            margin-bottom: 1rem;
            font-size: 1.6rem;
            transition: all 0.5s;
        }

        &:hover i
        {
            background-color: var(--main-color);
            color: #fff;
            
        }

        h3
        {
            padding-top: 0.5rem;
        }
    }

    input,textarea
    {
        border: 0;
        background-color: #f4f4f4;
        width: 100%;
        padding: 0.7rem;
        border-radius: 5px;
        margin-bottom: 1rem;
    }

    textarea
    {
        height: 170px;
        max-height: 170px;
    }

    button
    {
        --bs-btn-bg:var(--main-color);
        --bs-btn-color:#fff;
        --bs-btn-padding-x: 2rem;
        --bs-btn-padding-y: 0.6rem;
        font-size: 13px;
        --bs-btn-hover-color:var(--main-color);
        --bs-btn-hover-bg:#fff;
        --bs-btn-border-color: var(--main-color);
        --bs-btn-hover-border-color:var(--main-color);
    }





}




footer
{
    background-color: var(--main-color);
    display: flex;
    justify-content: center;
    padding-block: 2rem;

    p{
        margin: 0;
        font-size: 14px;
    }

}