:root{
    /* --main-color: #20c997; */
    --main-color: #28a745;
    --secondary-color : #F8E1DB;
}
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    color: #4c4d4d;
    box-sizing: border-box !important;
    /* background-color: red; */
    /* -webkit-tap-highlight-color: transparent; */
}

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}
li a {
    text-decoration: none;
    list-style: none;
}

.main-color{
    color: var(--main-color) !important;
}

.sidebar{
    position: fixed;
    left: 0;
    top: 0;
    /* width: 260px; */
    width: 20% !important;
    height: 100% !important;
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0 0 15px rgb(0 0 0 / 7%);
    box-shadow: 0 0 15px rgb(0 0 0 / 7%);
    z-index: 2;
    overflow: hidden;
    overflow-y: auto;
}

.main-content{
    position: absolute;
    top: 0;
    right: 0;
    width: 80% !important;
    height: max-content;
    overflow: hidden;
    /* z-index: 88888; */
}

.hero-bg{
    width: 100%;
    height: 100vh;
    background-image: url("../images/intro-bg.jpg");
    background-size:cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    object-fit: cover;
}

 .hero-mask {
    z-index: 1;
}

.header{
    width: 100%;
    height: 100vh;
    overflow: hidden;
  position: relative;
}

.hero-mask {
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}
.bg-dark {
    background-color: #111418 !important;
    --bs-bg-opacity: 1;
}
.opacity-8 {
    opacity: 0.8;
}

.content-header{
        position: absolute;
        top: 38%;
        left: 7%;
        width: 80%;
        height: 40%;
        opacity: 1 !important;
        z-index: 999;
        display: flex;
        flex-direction: column;
        color: #fff;
        align-items: center;
        justify-content: space-between;
        font-family: 'Times New Roman', Times, serif;
}

.content-header h2{
   font-size: 45px;
}

.content-header p{
   font-size: 1.3125rem !important;
}

.typewriter{
    font-size: 65px;
    font-weight: 700;
}

.content-header__btn{
padding: 0.8rem 2.6rem;
border-radius: 50rem;
border: 2px solid var(--main-color);
  background-color: rgba(0, 0, 0, 0);
  color: var(--main-color);
  font-size: 18px;
  transition: all 500ms ease;
  font-weight: 700;
}

.content-header__btn:hover{
    background-color: var(--main-color);
    color: #fff;
}

/* Sidbar */

.sidber-wrapper{
    width: 80%;
    margin: auto;
    margin-top: 3rem;
    list-style: none;
    text-decoration: none;
    text-align: center;
}

.sidbar-img{
    border-radius: 50%;
    border: 5px solid #343a40;
}

.sidbar-list{
    margin: auto;
    text-align: center;
    margin-top: 2.5rem;
    margin-right: 30px;
}

.sidbar-list li a{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
}

.sidbar-list li a:hover{
    color: var(--main-color);
}
.sidbar-list__item{
    margin-top: 1rem;
}
.sidbar-social{
    /* background-color: blue; */
    text-align: center;
}
.sidbar-social ul{
    position: absolute;
    bottom: 9px;
    right: 0;
    left: 0;
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.8rem;
}

.sidbar-social a{
font-size: 14px;
color: #aab1b8;
margin-left: 15px;
text-decoration: none;
}

.sidbar-title{
    margin-top: 1rem;
    font-weight: 700;
    font-size: 27px;
    color: #fff;
}

.social-icon-facebook a:hover{
    color: #3b5998;
}
.social-icon-twitter a:hover{
    color:#00acee ;
}
.social-icon-dribbble a:hover{
    color:#ea4c89 ;
}
.social-icon-github a:hover{
    color:#333333;
}

.linklist{
    transition: all 0.4s ease-in;
}

/* about */
.about{
    /* position: absolute; */
    width: 100%;
    height: 120vh;
    /* top: 100%;
    left: 0; */
    position: relative;
    background-color: #fff;
    margin-top: 2rem;
    /* padding: 4.5rem 0; */
    /* overflow: hidden; */
    /* display: flex;     */
}

.about-title{
    position: absolute;
    top: -10%;
    left:25%;
    font-size: 120px;
    font-weight: 700;
    color: #ccc;
    opacity: 0.5;

}
.about-header{
    position: absolute;
    top: 1%;
    left:40%;
    font-size: 30px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: 500;
    z-index: 999;

}
.about-header:before{
    content: "";
    width: 150px;
    height: 2px;
    background-color: var(--main-color);
    position: absolute;
    top: 100%;
    left: 10%;
}

.about-content-wrapper{
    width: 100%;
    margin-top: 0rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.about-content__text{
    width: 50%;
    margin-left: 3rem;
    margin-top: 8rem;
}
.about-content-list{
    width: 40%;
}

.about-content__text-header{
    font-size: 35px;
    margin: 2rem 0;
    color: #252b33;
}

.about-content__main-text{
    font-size: 18px;
    line-height: 1.8rem;
    color: #4c4d4d;
}
.about-content-list{
    margin-top: 11rem;
    margin-left: 4rem;

}
.about-content-list ul li{
    margin-bottom: 1rem;
    padding-bottom: 10px;
    width: 80%;
    color: #212529;
    font-size: 18px;
    border-bottom: 1px solid #ccc;
}

.about-content-list ul li span{
    color:black ;
    font-weight: 500;
    font-size: 18px;
}

.about-content-btn{
    margin-left: 2rem;
    margin-top: 1rem;
    padding: 0.8rem 2.6rem;
    border-radius: 50rem;
    background-color: var(--main-color);
    cursor: pointer;
    color: #fff;
    border: 2px solid var(--main-color);
    font-size: 18px;
    font-weight: 500;
    transition: all 500ms ease;
    box-shadow: 0px 5px 15px rgb(0 0 0 / 15%);
}
.about-content-btn:hover{
    background-color: #198754;
    /* color: var(--main-color); */
}

/* counter */

.counter-box{
    width: 100%;
    height: 20vh;
    text-align: center;

}
.counter-wrapper{
    /* padding-top: 4rem; */
    /* padding-top: 4rem; */
    width: 85%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.counters{
    padding-left: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 2rem;
}
.counter{
    margin: 5px 0;
    font-weight: bold;
    font-size: 3rem;
    /* --bs-text-opacity:1; */
    color: #6c757d!important;
}

.line{
    border-left: 1px solid rgba(204, 204, 204, 0.527);
}

/* what */
.what{
    width: 100%;
    height: auto;
    display:flex;
    flex-wrap: wrap;
    position: relative;
    background-color:rgba(248,249,250)
}

.what-wrapper__box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 12rem;
    width: 80%;
    height: 100%;
    margin: auto;
}

.what-box{
    width: 450px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;

    
}
.box-icon{
    color: var(--main-color);
    font-size: 30px;
    background-color: #fff;
    padding: 15px;
text-align: center;    
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    
}

.box-text{
    margin-left: 2rem;
}

.what-title{
    position: absolute;
    /* top: -10%; */
    left:25%;
    font-size: 120px;
    font-weight: 700;
    color: #ccc;
    opacity: 0.5;

}
.what-header{
    position: absolute;
    top: 14%;
    left:42%;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 35px;
    font-weight: 500;
    z-index: 999;

}
.what-header:before{
    content: "";
    width: 150px;
    height: 2px;
    background-color: var(--main-color);
    position: absolute;
    top: 100%;
    left: 0%;
}


/* resume */

.resume{
    width: 100%;
    height: auto;
    margin-top: 5rem;
    padding-top: 2rem;
    position: relative;
    background-color: #fff;
}

.wrapper-resume{
    width: 90%;
    margin: auto; 
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
     height: 100%;
     margin-top: 5rem;
}

.resume-box__name{
    color:rgb(220,53,69);
}


.resume-left__box{
    width: 450px;
    height: 200px;
    border: 0.5px solid #6c6a6a39;
    border-radius: 25px;
    padding: 1.5rem;
    margin: 1.5rem 0.8rem;
}

.resume-title{
    position: absolute;
    top: -10%;
    left:25%;
    font-size: 120px;
    font-weight: 700;
    color: #ccc;
    opacity: 0.5;

}
.resume-header{
    position: absolute;
    top: -1%;
    left:45%;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 35px;
    font-weight: 500;
    z-index: 999;
}

.resume-header:before{
    content: "";
    width: 150px;
    height: 2px;
    background-color: var(--main-color);
    position: absolute;
    top: 100%;
    left: 0%;
}

.resume__title{
    font-size: 1.8rem;
    margin-left: 1.4rem;
    font-weight: 600;
}

.resume-box__date {
    color: #fff;
    background-color: var(--main-color);
    border-radius: 25px;
    padding: 6px 8px;
    margin: 15px 0;
    font-size: 14px;
}
.resume-box__title{
    font-size: 24px;
    font-weight: 600;
    margin: 0.6rem 0;
}


/* ////////////////--- photo work --/////////// */
.work{
    /* width: 100%;
    height: auto;
    margin-top: 4rem;
    padding-top: 1rem; */
    width: 100%;
    height: auto;
    position: relative;
    margin: 4rem 0;
    padding-top: 3rem;
    background-color:rgba(248,249,250)
}

.about-title-work{
    /* position: absolute; */
    /* top: 0%;
    left:25%; */
    margin-left: 15rem;
    font-size: 120px;
    font-weight: 700;
    color: #ccc;
    opacity: 0.5;
    z-index: 99;

}
.about-header-work{
    /* position: absolute;
    top: 10%;
    left:44%; */
    margin-left: 30rem;
    position: absolute;
    margin-top: -6rem;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 35px;
    font-weight: 500;
    z-index: 9999;

}

.about-header-work:before{
    content: "";
    width: 150px;
    height: 2px;
    background-color: var(--main-color);
    position: absolute;
    top: 100%;
    left: 15%;
}


.work ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-left: 11.5rem;
    margin-top: 4rem;
    margin-bottom: 2rem;

}
.work ul li{
    margin-right: 25px;
    font-size: 18px;
    color: #666;
    cursor: pointer;
}

 .active{
    color: var(--main-color) !important;
    font-weight: 700;
    
}

.work__photo-box{
    animation: icon 300ms ease;
   
   }
   
   @keyframes icon{
       0%{
           transform: scale(0.1);
       }   
       100% {
           transform: scale(1);
       }
   }

.work__photo-wrapper{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}


.work__photo-box{
    width: 400px;
    height: 400px;
    margin: 0.5rem;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s linear;
    display: block;
}

.work__photo-box:hover{
    transform:translateY(-10px);
}


.work__photo-box img{
  width: 400px;
  border-radius: 10px;
}

.work__photo-box-title{
    margin-top: 15px;
    font-size: 14px;
    color: #666;
}

.work__photo-box-content{
  font-size: 25px;
  color: black;

}


/*     testimona */
.testimona{
    width: 100%;
    height: 90vh;
    background-color: #fff;
    position: relative;
    margin-bottom: 1rem;
}
.testimona .about-title{
    position: absolute;
    top: -10%;
    left:15%;
    font-size: 120px;
    font-weight: 700;
    color: #ccc;
    opacity: 0.5;

}
.testimona  .about-header{
    position: absolute;
    top: 3%;
    left:40%;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 35px;
    font-weight: 500;
    z-index: 999;
}

.swiper {
    width: 90%;
    height: 80%;
    margin-top: 4rem;
    padding-top: 8rem !important;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    height: 80%!important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    border-radius: 10px;
    transition: all 0.3 ease;
    /* background-color: red; */
    cursor:grab;
  }
  .swiper-item{
      background-color: rgb( 248,249,250) !important;
      /* margin-bottom: 14rem !important; */
  }

  .swiper-pagination{
      /* margin-top: 4rem !important; */
      /* padding-top: 2rem !important; */
      color: var(--main-color) !important; 
      width: 100% !important;
      /* margin: 2rem auto !important;   */
      z-index: 9999;
  }

.swiper-pagination-bullet{
    border-color: var(--main-color) !important;
     position: relative;
    width: 20px !important;
    height: 20px !important;
    margin: -5px 3px !important;
    border: 1px solid transparent !important;
    /* display: block; */
    transition: all .2s ease;
    border-radius: 30px;
}

.wrapper-box-swiper{
    width: 90%;
    /* padding-top: 2rem; */
    /* padding-bottom: 5rem !important; */
    justify-content: flex-start;
    text-align: left;
}

.swiper-content{
    width: 100%;
}

.box-swiper__header-text span{
    font-weight: 700;
}


.box-swiper__header-text div{
    color:#6c757d ;
}

.box-swiper__header{
    display: flex;
    width: 60%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;

}
.box-swiper__header img{
    border-radius: 50%;
}

.icon-warning{
    color: rgb(255,193,7);
}

/* contact */

.contact{
    width: 100%;
    height: auto;
    background-color: rgba(248,249,250);
    position: relative;
    padding-top: 1rem;
    padding-bottom: 3rem;
    padding-top: 6rem;

}
.contact-wrapper{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    margin-top: 8rem;
}
.contact-left{
 margin-left: 5rem;
width: 30%;
height: auto;
margin-top: 0rem;
margin-bottom: 2rem;
/* display: flex;
flex-direction: column;
align-items:flex-start; */
}
.contact-left__list ul{
    list-style: none;
}
.contact-left__list ul li a{
    text-decoration: none;
  color: #111;
  font-size: 18px;
}
.contact-left__list ul li{
    margin-bottom: 1rem;
}
.contact-left__list ul li a .main-color{
    margin-right: 1rem;
    font-size: 20px;
}

.contact-left__header{
    font-size: 22px;
    color: #000;
    margin-left: 2rem;
    margin-bottom: 4rem;
    font-weight: 500;
}
.conatct-left__text{
    margin-top: 1rem;
    margin-bottom: 2rem;
    font-size: 20px;
    margin-left: 2rem;
}
.contact-right{
    width: 58%;
    display: flex;
    flex-direction: column;
    margin-left: 2rem;
}
.input-contact{
    /* margin-left: 4rem; */
    width: 100%;
    margin-bottom: 1rem;
    padding-right: 1rem;
}
.input-contact input{
    width: 40%;
    padding: 1rem;
    margin: 1rem;
    border-radius: 10px;
    border: 1px solid #dae1e3;
    font-size: 16px;
    color: #656565;
    /* margin-right: 1rem; */
}
textarea{
    width: 95%;
    padding: 1rem;
    border-color: #dae1e3;
    font-size: 16px;
    color: #656565;
    display: block;
    font-weight: 400;
    line-height: 1.5;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    appearance: none;
    margin: 0 auto;
    border-radius: 0.375rem;
    height: fit-content;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.contact-right__header{
    font-size: 22px;
    color: #000;
    font-weight: 500;

}

.about-title__contact{
    position: absolute;
    top: 2%;
    left:25%;
    font-size: 125px;
    font-weight: 700;
    color: #ccc;
    opacity: 0.5;
}
.about-header__contact{
    position: absolute;
    top: 15%;
    left:40%;
    font-size:30px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: 700;
    z-index: 999;

}

.about-header__contact:before{
    content: "";
    width: 150px;
    height: 2px;
    background-color: var(--main-color);
    position: absolute;
    top: 100%;
    left: 10%;
}

.activeColor{
    color: var(--main-color) !important;
}

footer{
width: 100%;
height: 15vh;
text-align: center;
font-size: 20px;
margin-top: 5rem;
}
/*       palet      */
.palet{
    position: fixed;
    width: 200px;
    height: 190px;
    background-color: #f0f0f0;
    right: -200px;
    top: 40%;
    z-index: 999999;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;
    border: 3px solid rgba(204, 204, 204, 0.171);
}
.pallet-default{
    background-color: #198754;
    padding: 0.8rem;
    border-radius: 5px;
    color: #fff;
    margin: 0 auto;
    margin-top: 5px;
    cursor: pointer;
}

.palet-icon{
    position: absolute;
    width: 48px;
    height: 50px;
    border-radius: 5px 0 0 5px;
    background-color: #212529;
    left: -50px;
    top: 0%;
    z-index: 999999;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
}
.iconPalet {
    animation: gear 3s linear infinite forwards;


}
@keyframes gear {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(-360deg);
    }
}


.palet-box{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.palet-color__box{
    margin: 5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.4s ease-in;
}
.small{
    width: 18px;
    height: 18px;
}
.orange{
    background-color: #fd7e14;
}
.cyan{
    background-color: #17a2b8;
}
.red{
    background-color: #dc3545;
}
.yellow{
    background-color: #ffc107;
}
.blue{
    background-color: #007bff;
}

.pink{
    background-color: #e83e8c;
}
.green{
    background-color: #28a745;
}

.purple{
    background-color: #6f42c1;
}
.brown {
    background-color: #795548;
}
.indigo{
    background-color: #6610f2;
}
.pallet-header{
    width: 100%;
    border-bottom:1px solid #ccc;
    font-size: 20px;
    color: #000;
}

.contact-content-btn{
    width: 300px;
    margin: 0 auto;
    /* margin-left: 2rem; */
    margin-top: 1rem;
    padding: 0.8rem 2.6rem;
    border-radius: 50rem;
    background-color: var(--main-color);
    cursor: pointer;
    color: #fff;
    border: 2px solid var(--main-color);
    font-size: 18px;
    font-weight: 500;
    transition: all 500ms ease;
    box-shadow: 0px 5px 15px rgb(0 0 0 / 15%);
}
.about-content-btn:hover{
    background-color: #198754;
    /* color: var(--main-color); */
}

/* ///////////////   NAVBAR   ///////// */
.navbar{
    width: 100%;
    min-height: 10vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    background-color: #111;
    color: #fff;
    z-index: 999999;
    display: none;
    flex-wrap: wrap;
    text-align: center;
}
.nav-btn__toggle{
    width: 60px;
    height: 60px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    margin-right: 5%;
    margin: 0 auto;
}
.nav-btn__toggle span{
    position: absolute;
    width: 40px;
    height: 1.2px;
    background-color: #fff;
    margin-top: 10px;
    cursor: pointer;
    transition: all 0.4s ease;
}
.toggle-one{
    background-color: #fff;
    top: 10px;
}
.toggle-tow{
    background-color: #fff;
    top: 20px;
}
.toggle-tree{
    background-color: #fff;
    top: 30px;  
}
 .toggle-one.show{
     top: 20px;
     transform: rotate(45deg) ;
 }
 .toggle-tree.show{
     top: 20px;
    transform: rotate(-45deg) ;
 }

.toggle-tow.show{
    display: none;
}

/*    Menulist */
.menu-list{
    position: fixed;
    top: -70vh;
    left: 0%;
    transition: all 0.5s ease-in;
    width: 100%;
    height: 70vh;
    background-color: #111;
    z-index: 99999;

}
.activemenu{
    top: 10vh;
}
.logo{
    width: 50% !important;
    font-size: 28px;
}
.navbar-social{
    text-align: center;
    min-width: fit-content;
    /* margin-left: 7rem; */
    margin-top: 10px;
}



.navbar-social ul{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.8rem;
}

.navbar-social a{
    font-size: 14px;
    color: #aab1b8;
    margin-left: 15px;
    text-decoration: none;
    } 

    .navbar-list{
        margin-top: 2.5rem;
        margin-right: 30px;
        list-style: none;
        text-decoration: none;
        color: #fff !important;

    }

    .navbar-list li {
        margin-bottom: 0.5rem;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(204, 204, 204, 0.547);
    }
    .linklist{
        text-decoration: none;
        color: #fff;
        display: flex;
    }
    .linklist:hover{
        color: var(--main-color);
    }