:root {
    --Ubuntu-Light: "Ubuntu-Light";
    --Ubuntu-Bold: "Ubuntu-Bold";
    --Ubuntu-Regular: "Ubuntu-Regular";
    --Rubik-Regular: "Rubik-Regular";
    --Rubik-Medium: "Rubik-Medium";
    --Rubik-Light: "Rubik-Light";
}


:root {
    --primarycolor: #333333;
    --secondarycolor: #FFFFFF;
    --secondarycolor-two: #D6D6D6;
}


/*

-- Reset Style --

*/

a {
    text-decoration: none;
}


/*

-- Helper Class --

*/












::-webkit-scrollbar{
    width: .9vw;
}

::-webkit-scrollbar-track{
    background-color: var(--primarycolor);
}

::-webkit-scrollbar-thumb{
    background: #aaa3a3;
    border-radius: .4rem;
    transition: background .3s ease;

}
::-webkit-scrollbar-thumb:hover{
    background-color: #ff8181;
    box-shadow:0 0 20px black;

}


* {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
    font-size: 62.5%; /* 10px */
    scroll-behavior: smooth;

}


body {
    line-height: 1.6;
    font-size: 1.6rem;
    transition: all 0.5s ease-in-out;
    background-color: var(--secondarycolor);
    margin: 0 auto;
    color: var(--primarycolor);
    font-family: var(--Ubuntu-Light), sans-serif;
    overflow-x: hidden;
}


/*
==============
----header----
==============
*/

.header {
    margin-top: 2rem;
}

.header__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__content-logo {

}

.header__content-logo-img {
    cursor: pointer;
    width: 9.5rem;
    height: 4rem;
}

.header__content-search {
    display: none;
    transition: all 0.4s ease-in-out;
}

.header__content-search:hover .header__content-input {
    width: 20rem;
    border-bottom: 2px solid var(--primarycolor);
}

.header__content-input {
    display: flex;
    width: 0;
    height: 3rem;
    border: none;
    border-bottom: 2px solid white;
    padding: 2rem 1rem 1rem 1rem;
    margin: 0 0 1rem 1rem;
    outline: none;
    color: var(--primarycolor);
    font-size: 2rem;
    font-family: var(--Ubuntu-Light);
    transition: all 0.4s ease-in-out;

}

.header__content-input:focus {
    width: 20rem;
    border-bottom: 2px solid var(--primarycolor);
}

.header__content-search-icon {
    cursor: pointer;
}

.header__content-menu {
    display: flex;
    align-items: center;
}

.header__content-menu p {
    font-size: 2.4rem;
    margin-right: 2rem;
    color: var(--primarycolor);
    margin-bottom: .5rem;
    display: none;
}

.header__content-menu svg {
    cursor: pointer;
}

.nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: min(85vw, 300px);
    background: var(--primarycolor);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    padding: 2rem 1rem;
}

.nav-menu.active {
    transform: translateX(0);
}

.nav__btn-line {
    font-size: 2rem;
    color: #ff8181;
}

.close-menu {
    position: absolute;
    top: 1rem;
    left: 1rem;
    cursor: pointer;
}

.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 999;
}

.nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu {
    margin-top: 3rem;
}

.mobile__menu-list-a {
    text-decoration-line: none;
    color: var(--secondarycolor);
    font-size: 2.5rem;
}

.mobile__menu-list {
    margin-top: 1rem;
}

.active-open {
    color: #ff8181;
    font-weight: 600;
}


/*
==============
-----main-----
==============
*/


.home {
    display: flex;
    justify-content: space-between;
    margin-top: 7rem;
    flex-wrap: wrap;

}

.home__info {
    width: 100%;
}

.home__info-top {
    display: flex;
}

.home__info-top p {
    font-size: 3rem;
    color: var(--primarycolor);
    font-family: var(--Ubuntu-Bold), sans-serif;

}

.home__info-line {
    transform: translateY(2.4rem);
    display: block;
    width: 5rem;
    height: .2rem;
    background-color: var(--primarycolor);
    border-radius: 3rem;
    margin-right: 1rem;
}

.home__info-about {
    width: 100%;

}

.home__info-about-name {
    font-family: var(--Rubik-Medium);
    font-size: 3.1rem;
    color: var(--primarycolor);
    margin-bottom: 1rem;

}

.home__info-about-name span {
    font-family: var(--Rubik-Regular);
}

.home__info-about-title,
.home__info-about-caption {
    font-family: var(--Rubik-Regular);
    font-size: 1.8rem;
    color: var(--primarycolor);
    margin-bottom: 1rem;
}

.home__profile {

}

.home__profile-img {
    width: 100%;
    height: auto;
}

.home__profile-img2 {
    display: none;
}


.home__link {

}

.home__link-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 5rem;

}

.home__link-box {
    width: 100%;
    display: flex;
    justify-content:space-around;
}

.home__link-icon {
    margin-right: 0;
}

.home__link-scroll {
    display: none;
    flex-direction: column;
    align-items: center;
}

.home__link-scroll-text {
    margin-bottom: .6rem;
}

.home__link-scroll-icon {

}


.about__me{
    margin-top: 15rem;
    text-align: center;
}
.about__me-title{
    font-size: 2rem;
    font-family: var(--Rubik-Regular);
    margin-bottom: 5rem;
}
.about__me-img{
    width: 100%;
    height: auto;
}


.services{
    margin: 14rem auto;
    display: flex;
    justify-content: center;


}
.services__container{
    overflow:hidden;
    width: 100%;

}
.services__container-title{
    text-align: center;
    font-size: 4rem;
    font-family: var(--Rubik-Medium);
    margin-bottom: 3rem;
}
.services__box{
    display: flex;
    flex-wrap: wrap;
    transition: all 0.4s ease-in-out;
}


.services__container-box{
    background-color: #dedcdc;
    padding: 4rem 3rem ;
    font-family: var(--Rubik-Regular);
    width: 100%;
    transition: all 0.4s ease;
    margin: 2rem auto;
    box-sizing: border-box;
}
.services__container-box:hover{
    transform: translateY(-.7rem);
    box-shadow: 0 0 10px var(--primarycolor);
    background-color: var(--primarycolor);
    color: var(--secondarycolor);
}
.services__container-box:hover a{
    color: var(--secondarycolor);
}
.services__container-box:hover path{
    stroke: var(--secondarycolor);
    fill: var(--secondarycolor);
}
.services__container-box-title{
    font-size: 3rem;
}
.services__container-box-caption{
    max-width: 90%;
    margin: 2rem 0;

}
.services__container-box-more{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--primarycolor);
    transition: all 0.2s linear;
}

.indicators{
    display: none;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    position: relative;
}
.dot-box{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    width: 100%;
}

.dot{
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 2rem;
    background-color: var(--primarycolor);
    margin: 0 1rem;
    transition: all 0.4s ease;
}

.active-dot{
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content:center;
    border-radius: 5rem;
}
.active-dot::before{
    content: '';
    position: absolute;
    width: .7rem;
    height: .7rem;
    background-color: var(--secondarycolor);
    border-radius: 5rem;
    right: .4rem;

}

.arrow{
    position: absolute;
    right: 2rem;
    align-items: center;
}
.arrow-icon{
    margin: 0 .5rem;
}
.right:hover .services__box{
}


/*
=============
---footer----
=============
*/


.footer{
    display: flex;
    justify-content: center;
}
.footer__content{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 17rem;
    width: 100%;
}
.footer__content-logo{

}
.footer__content-list{
    display: flex;
    margin: 2rem auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.footer__content-list-item{
    font-size: 1.6rem;
    color: var(--primarycolor);
    font-family: var(--Rubik-Medium);
    margin: 0 2rem;
    transition: all 0.4s ease;
    text-decoration-line: none;
}
.footer__content-list-item:hover{
    color: #ff8181;
}
.active-item-list{
    color: #ff8181;
}
.footer__content-link-span{
    display: flex;
}
.footer__content span{
    color: var(--primarycolor);
    font-family: var(--Rubik-Medium);
    font-size: 1.7rem;
    margin: 2rem 0;
    text-align: center;
}
.footer__content span a{
    text-decoration-line:underline ;
    color: #ff8181;
}
.footer__content-link-span{
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.footer__link{
}
.footer__link-container{

}
.footer__link-box{

}

.footer__link-box a{
    margin: 0 2rem;
}



/*
======================================
--------------portfolio---------------
======================================
*/

.portfolio{
    margin-top: 15rem;
    text-align: center;
    align-items: center;

}
.portfolio__container{
    display: block;
    align-items: center;
    flex-direction: column;

}
.portfolio__container-title{
    font-family: var(--Rubik-Medium);
    font-size: 4rem;
}
.portfolio__container-top-bar nav{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.portfolio__container-top-bar a{
    font-family: var(--Rubik-Medium);
    font-size: 1.2rem;
    padding: 1rem;
    color: var(--primarycolor);
}
.portfolio__container-top-bar nav span{
    color: var(--primarycolor);
    font-size: 1.7rem;
    font-weight: bold;
    display: none;
}
.portfolio__container-box{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.portfolio__container-box1{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.portfolio__container-box-img{
    width: 96%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
}


.client{
    margin-top: 15rem;
}
.client__container{

}
.client__container-title{
    text-align: center;
    font-size: 4rem;
    color: var(--primarycolor);
    font-family: var(--Rubik-Medium);
}
.client__container-box{
    display: flex;
    flex-direction: column;
    margin-top: 5rem;
    align-items: center;
}
.client__container-box-img{
    display: flex;
    justify-content: center;
    margin-bottom: 5rem;
}
.client__container-box-img img{
    width: 90%;
}
.client__container-box-text{
    position: relative;
    height: 40rem;
}
.box-icon-left{
    position: absolute;
    left: 0;
    top: 0;
}
.client__container-box-cation{
    font-family: var(--Rubik-Regular);
    font-size: 2.8rem;
    margin-top: 8rem;

}
.box-icon-right{
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotate(180deg);
}
.client__icon-left,
.client__icon-right{
    padding-right: .5rem;
}

.client__container-box-name{
    margin-top: 10rem;
    font-size: 2.5rem;
    font-family: var(--Rubik-Medium);
}

.client__container-box-bottom{
    margin-top: 1rem;
    font-size: 1.7rem;
    font-family: var(--Rubik-Regular);
}




/*
==============
-----Blog-----
==============
*/



.blog__contact{
    background-color: var(--primarycolor);
    color: var(--secondarycolor);
    height: 40rem;
    margin-top: 17rem;
    position: relative;
}
.blog__contact-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.blog__contact-container-text-bg{
    font-size:20vw;
    font-family: var(--Rubik-Regular);
    color: #3A3A3A;
    display: inline;
    position: absolute;
    top: 0;
    z-index: 1;
}
.blog__contact-container-box{
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    z-index: 2;
    margin-top: 7rem;
}
.blog__contact-container-box-top{
    font-family: var(--Rubik-Regular);
    color: var(--secondarycolor);
    font-size: 2rem;
}
.blog__contact-container-box-text{
    font-family: var(--Rubik-Regular);
    color: var(--secondarycolor);
    font-size: 4rem;
}
.blog__contact-container-box-button{
    background-color: var(--secondarycolor);
    color: var(--primarycolor);
    font-family: var(--Rubik-Regular);
    margin-top: 4rem;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.5rem;
}
.blog__contact-container-box span{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
}
.blog__link-icon{
    margin: 0 2rem;
}
.blog__contact-container-box path{
    fill: var(--secondarycolor);
}


/*
============
----info----
============
*/


.info{
    width: 100%;
    position: relative;
    height: 30rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.info__title-box{
    width: 90%;
    position: absolute;
    display: flex;
    justify-content: center;
}
.info__title{
    font-family: var(--Rubik-Regular);
    font-size: 15vw;
    color: #F1F1F1;
    z-index: -1;
    display: none;
}
.info__container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 15rem;
    font-size: 1.2rem;
}
.info__container-box{
    font-family: var(--Rubik-Regular);
    margin: 2rem 5rem 0 5rem;
}
.info__container-box-num{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 3rem;
}
.info__container-box-caption{

}



/*
================
-----blog-------
================
*/

.my-blog{
    margin-top: 20rem;
}
.my-blog__title{
    text-align: center;
    font-size: 4rem;
    font-family:var(--Rubik-Medium);
}
.my-blog__container{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 5rem;
}
.my-blog__container-box{
    width: 100%;
    margin-top: 2rem;
}
.my-blog__container-box-bg{
    background-color: var(--primarycolor);
}
.my-blog__container-box-img{
    width: 100%;
}
.my-blog__container-box-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--primarycolor);
    color: var(--secondarycolor);
    padding: 1rem;
    font-family: var(--Rubik-Regular);
    height: 20rem;
}
.my-blog__container-box-info{
    display: flex;
    justify-content: space-between;
}
.my-blog__container-box-caption{
    font-size: 2rem;
    max-width: 25rem;
}
.caption-text{

}
.my-blog__container-box-more{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--secondarycolor);
    font-family: var(--Rubik-Medium);
}
.my-blog__container-box-more svg path{
    fill: var(--secondarycolor);
}

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

.contact{

}
.contact__container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10rem;
}
.contact__container-title{
    font-family: var(--Rubik-Medium);
    font-size: 4rem;
    text-align: center;
}

.contact__container-box{
    width: 90%;
    display: flex;
    flex-direction: column;

    justify-content: space-around;
    margin-top: 7rem;
}
.contact__container-info{
    width: 100%;
}
.box-input{
    width: 100%;
    margin-top: 2rem;
}
.contact__container-info-caption{
    font-family: var(--Rubik-Light);
    font-size: 2.2rem;
}
.contact__container-info-box{
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
    font-size: 1.7rem;
}
.contact__container-info-box span{
    position: relative;
    padding-left: 3rem;
    font-family: var(--Rubik-Light);
}
.contact__container-info-box span::before{
    content: '';
    position: absolute;
    width: 1.4rem;
    height: .1rem;
    background-color: var(--primarycolor);
    top: 1.3rem;
    left: 0;


}
.contact__container-form{
    background-color: var(--primarycolor);
    display: flex;
    flex-direction: column;
    padding: 3rem;
    height: 35rem;
    justify-content: end;
}
.contact__container-input{
    width:auto;
    height: 3rem;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--secondarycolor);
    margin: 2rem 1rem ;
    padding: 1rem .5rem 0 0.5rem ;
    outline: none;
    color: var(--secondarycolor);
    font-family: var(--Rubik-Light);
    font-size: 1.4rem;

}
.contact__container-submit{
    background-color:var(--secondarycolor);
    color: var(--primarycolor);
    font-family: var(--Rubik-Light);
    padding: 1.2rem 0;
    text-align: center;
    border: none;
    width: 10rem;
    margin-left: 1rem;
}
::placeholder{
    color: #FFFFFF;
}