/*=============== */
/* BASIC SETUP */
/* =============== */
* {
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;


}

html {
   font-size: 62.5%;
   scroll-behavior: smooth;
}

body {
   font-family: 'Titillium Web', sans-serif;
   text-rendering: optimizeligibility;
   line-height: 1.3;
   font-size: 1.6rem;
}

ul li {
   list-style: none;
}

/*HEADING*/
h1 {
   font-size: 4.2rem;
   color: white;
}

/* =============== */
/* REUSABLE COMPONENTS */
/* =============== */
.row {
   margin: auto 0;
   max-width: 114rem;
}


.p-15 {
   padding-left: 10rem;

}




section {
   padding: 8rem 0;
}

h2 {
   font-size: 4rem;
   text-transform: uppercase;
   letter-spacing: .3rem;
   font-weight: 600;
   margin-top: 0;
   margin-bottom: 2rem;
   color: #fff;
   text-align: center;
}

h2::after {
   content: "";
   display: block;
   height: .2rem;
   background: #c8d9e5;
   width: 8rem;
   margin: auto;
   margin-top: 2rem;
}

h3 {
   font-size: 2rem;
   text-transform: uppercase;
   font-weight: 600;
}

h4 {
   font-size: 1.8rem;
   font-weight: 400;
   text-transform: uppercase;
   margin-top: 2.5rem;



}

.box {
   padding: 1%;
}



.box p {
   font-size: 1.6rem;
   font-weight: 300;
   margin-top: 2rem;
}

/*PARAGRAPH*/
.little-description {
   font-size: 1.8rem;
   color: #fff;
   width: 60%;
   margin-left: 20%;
   line-height: 3rem;
   text-align: center;

}

/*BUTTON*/

.btn:link,
.btn:visited,
.btn {
   background: #333;
   border-bottom: .3rem solid #000;
   color: #fff;
   text-decoration: none;
   text-transform: uppercase;
   padding: 1.5rem 6rem;
   border-radius: .3rem;
   display: inline-block;
   margin-top: 4rem;
}


/* =============== */
/* HEADER SECTION */
/* =============== */

#home {
  background: 
  linear-gradient(rgba(135, 88, 156, 0.9), rgba(135, 88, 156, 0.9)),
  url(../resources/Img/hero-bg.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   background-attachment: fixed;
   height: 100vh;
   /* =============== */
   /* Vh for vertical height */  
   /* =============== */
   position: relative;
}

.logo {
   height: 3.5rem;
   width: auto;
   margin-top: 3.5rem;
   float: left;
}

/*MAIN NAVIGATION*/

.main-nav {
   float: right;
   margin-top: 4rem;
   ;
}

.main-nav li {
   display: inline-block;
   margin-left: 1rem;

}

.main-nav li:first-child {
   margin-left: 0rem;
}

.main-nav li a:link,
.main-nav li a:visited {
   color: #fff;
   text-decoration: none;
   text-transform: uppercase;
   background: transparent;
   padding: .6rem 1.6rem;
   border-radius: .3rem;
   font-size: 1.6rem;
   transition: .3s;
   display: block;
}


.main-nav li a:hover {

   background: #543a79;

}


.main-nav li.active a {
   background: #543a79;
}


/*STICKY MENU*/

.sticky {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background: rgba(135, 88, 156, 0.9);
   padding: 1rem 0;
   box-shadow: 0 .2rem .5rem rgba(255, 255, 255, .9);
   z-index: 9999;
}

.sticky .logo {
   margin-top: 0rem;

}

.sticky .main-nav {
   margin-top: .2rem;

}

/*MOBILE MENU*/
.mobile-menu span {
   color: #fff;
   font-size: 4rem;
   float: right;
   margin-top: 2rem;
   display: none;


}

.mobile-menu span:hover {
   cursor: pointer;


}

.overly {
   width: 0%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.9);
   z-index: 1;
   overflow-x: hidden;
   transition: .5s ease;
}

.overly-content {
   position: relative;
   top: 5%;
   width: 100%;
   text-align: center;
   text-transform: uppercase;
   margin-top: 3rem;
}






.overly-content a {
   display: block;
   text-decoration: none;
   font-size: 3rem;
   letter-spacing: .3rem;
   color: #999;
   padding: 1rem 0;

}

.overly-content a:hover {
   color: #fff;
   transform: scale(.9);



}

.overly .close-btn {
   position: absolute;
   top: 1rem;
   right: 4.5rem;
   font-size: 6rem;
   text-decoration: none;
   color: #999;

}

.sticky .mobile-menu span {
   margin-top: 0;

}

.hero-text-box {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
}

.btn-hero:link,
.btn-hero:visited {
   background: #eb7d4b;
   border-color: #c86a48;



}

/* =============== */
/* SERVICES SECTION */
/* =============== */

.services-section {
   color: #fff;
   text-align: center;
   background: linear-gradient(rgba(23, 194, 164, 0.9), rgba(23, 194, 164, 0.9)),
      url(../resources/Img/services-bg.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center top;
}


.services-icon {
   height: 12rem;
   margin-top: 4.5rem;
   margin-bottom: 3.5rem;
}

/* =============== */
/* TEAM SECTION */
/* =============== */
.team-section {
   background: linear-gradient(rgba(231, 241, 248, 0.9), rgba(231, 241, 248, 0.9)),
      url(../resources/Img/team-bg.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center top;
   background-attachment: fixed;
   text-align: center;
   padding: 6rem;
}


.team-section h2 {

   color: #3c4761;
}

.team-section .little-description {
   color: black;
}

.team-member {
   margin-top: 3.5rem;
   margin-bottom: 4.5rem;
   width: 20rem;
   height: 20rem;
   border-radius: 50%;
}


.team-member h3 {
   color: #27283d;
}

.role {
   color: #30bae7;
   font-size: 1.6rem;
   margin-top: .5rem;
   text-transform: capitalize;
   display: inline-block;
}

.team-section .box p {
   color: #3c4761;
}

.social-link {
   width: 100%;
   margin-top: 4.5rem;

}

.social-link ul li {
   display: inline-block;

   margin: 0 0.2rem;

}

.social-link ul li a i {
   color: #fff;

}

.social-link ul li a:link i::before {
   background: #bdd1df;
   width: 1.7rem;
   height: 1.7rem;
   border-radius: 50%;
   display: inline-block;
   margin-bottom: 5rem;
   margin-right: .1rem;
   padding: .8rem;
   font-size: 2rem;
   transition: all .5s ease;
}

.social-link ul li a:hover i::before {
   background: #393939;
   transform: rotate(360deg);
}

/* =============== */
/* SKILL SECTION */
/* =============== */
.skill-section {
   text-align: center;
   background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
      url(../resources/Img/skill-bg.jpg);

   background-repeat: no-repeat;
   background-size: cover;

}

.skill-section h2 {
   color: #3c4761;
}


.skill-section .little-description {
   color: #3c4761;

}

.skill-section ul li {

   text-transform: uppercase;

}

/*ANIMAITED CIRCLE*/

/* Load animation */
@-webkit-keyframes load {
   0% {
      stroke-dashoffset: 0
   }
}

@-moz-keyframes load {
   0% {
      stroke-dashoffset: 0
   }
}

@keyframes load {
   0% {
      stroke-dashoffset: 0
   }
}

/* Container */
.progress {
   position: relative;
   display: inline-block;
   padding: 0;
   text-align: center;
}

/* Item */
.progress>li {
   display: inline-block;
   position: relative;
   text-align: center;
   color: #93A2AC;
   font-family: Lato;
   font-weight: 100;
   margin: 2rem;
}

.progress>li:before {
   content: attr(data-name);
   position: absolute;
   width: 100%;
   bottom: -2rem;
   font-weight: 400;
}

.progress>li:after {
   content: attr(data-percent);
   position: absolute;
   width: 100%;
   top: 3.7rem;
   left: 0;
   font-size: 2rem;
   text-align: center;
}

.progress svg {
   width: 10rem;
   height: 10rem;
}

.progress svg:nth-child(2) {
   position: absolute;
   left: 0;
   top: 0;
   transform: rotate(-90deg);
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
}

.progress svg:nth-child(2) path {
   fill: none;
   stroke-width: 25;
   stroke-dasharray: 629;
   stroke: rgba(255, 255, 255, 0.9);
   -webkit-animation: load 10s;
   -moz-animation: load 10s;
   -o-animation: load 10s;
   animation: load 10s;
}




.progress li.text {

   color: #3c4761;
   text-transform: uppercase;
   font-size: 1rem;
   font-weight: 500;

}

/* =============== */
/* PORTFOLIO SECTION */
/* =============== */

.portfolio-section {

   background: linear-gradient(rgba(255, 221, 153, 0.9), rgba(255, 221, 153, 0.9)), url(../resources/Img/portfolio-bg.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   background-attachment: fixed;
   text-align: center;
}

.portfolio-section h2 {
   color: #3c4761;
}

.portfolio-section .little-description {
   color: #3c4761;
}


.portfolio-filter {
   margin: 4.5rem 0;

}

.portfolio-filter button {

   background: #ebc985;
   font-size: 1.8rem;
   padding: 1rem 2rem;
   border: 0;
   border-radius: .5rem;
   text-transform: uppercase;
   color: #3c4761;
   margin: 0 .5rem;
   outline: none;
   transition: all 0.5s;
}


.portfolio-filter button:hover {
   box-shadow: inset .3rem .5rem rgba(60, 71, 97, 0.5);

}

.portfolio-filter .mixitup-control-active {

   background: #fff;

}

.portfolio-image {

   width: 100%;
   height: auto;


}

.portfolio-section .col:nth-child(3) {
   margin-left: 0;


}

.btn-load-more {
   background: #17c2a4 !important;
   border-color: #14a58c !important;

}

/* =============== */
/* TESTIMONIAL SECTION */
/* =============== */

.testimonial {
   background: linear-gradient(rgba(215, 70, 128, .9), rgba(215, 70, 128, .9)), url(../resources/Img/testimonial-bg.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;


}



.little-description {
   text-align: center;
   color: #fff;
   text-transform: capitalize;
}

.testimonial .col:nth-child(3) {

   margin-left: 0;


}

.testimonial .col:nth-child(1),
.testimonial .col:nth-child(2) {
   margin-top: 4rem;

}

.testimonial .col:nth-child(3),
.testimonial .col:nth-child(4) {

   margin-top: 8rem;

}

.client-photo {

   width: 10rem;
   float: left;

}

.client-photo img {
   height: 8rem;
   border-radius: 50%;
   margin-bottom: 3rem;
}

.client-review {
   width: 35rem;
   float: right;


}

.client-review p {
   font-size: 2.1rem;
   font-style: italic;
   margin-top: 0;
   margin-bottom: 2rem;




}

.client-review .role {
   color: #ffdd99;
}

/* =============== */
/* CONTACT SECTION */
/* =============== */
.contact-section {
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../resources/Img/contact-bg.jpg);
   text-align: center;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
}

.contact-section form {
   margin-top: 5rem;
   width: 70%;
   margin-left: 15%;
}

.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section textarea {
   background: rgba(0, 0, 0, 0.5);
   border: .1rem solid #273a71;
   width: 100%;
   padding: 1.5rem;
   border-radius: .5rem;
   font-size: 1.8rem;
   color: white;
   margin: .5rem 0;
}

.contact-section textarea {
   height: 20rem;


}

.contact-section form input::placeholder {
   color: #fff;
   opacity: 1;
}


.btn-send {
   border: 0;
   border-bottom: .1rem solid #29ec55;
   background: #30bae7;
}

.btn-send:hover {
   cursor: pointer;
}

/* =============== */
/* FOOTER SECTION */
/* =============== */
footer {
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../resources/Img/contact-bg.jpg);
   text-align: center;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   color: #fff;
}

footer ul li {
   display: inline-block;
   border-bottom: .2rem solid rgba(0, 0, 0, .5);

   list-style: none;
}



footer ul li a {
   color: #fff;
   text-transform: uppercase;
   font-size: 2rem;
   padding: .2rem 3rem;
   text-decoration: none;

}

footer ul li a:hover {
   color: cyan;

}