/* =============== */
/* BASIC SETUP */
/* =============== */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
}

html{
    font-size: 62.5%;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}
body {
    font-family: 'Titillium Web', sans-serif;
   
}
 



.row{
    max-width: 114rem;
    margin: auto;
}


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


header{
    background-image:linear-gradient(rgba(0, 0, 0, 0.843),rgba(0, 0, 0, 0.843)), url('img/333.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 85vh;
    position: relative;
}
.logo{
    margin-top: 3.5rem;
    height: 3.5rem;
    width: auto;
    float: left;
}

.main-nav{
    float: right;
}
.main-nav li{
    display: inline-block;
    margin-top: 4rem;
    margin-left: 1rem;
   
}

.active{
    background-color:#643a79;
    border-radius:0.5rem;
}

.main-nav li a:link,
.main-nav li a:visited{
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    padding:0.7rem 1.5rem;
    font-size:  1.6rem;
    border-radius:0.7rem;
    display:inline-block; 
}
.main-nav li:hover a:link,
.main-nav li:hover a:visited{
    background-color:#643a79;
}
.main-nav li:first-child{
    margin-left: 0;
}

/* top-nav start */


.topnav {
  float: right;
  overflow: hidden;
  display: none;
}


.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding:0.7rem 1.5rem;
    font-size:  1.6rem;
    border-radius:0.7rem;
}


.topnav a:hover {
  background-color:#643a79;
}


.topnav .icon {
  display: none;
}

/* top-nav end */




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

.hero-text-box h1{
    color: #fff;
    font-size: 3.8rem;
    font-weight: 600;
    margin-top: 3rem;
    margin-bottom: 8rem;
}


.btn:link,
.btn:visited{
    color: #fff;
    background-color: #eb7d4b;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom:0.2rem solid #c86a40;
    border-radius: 0.5rem;
    padding: 1.5rem 5rem;
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 600;
    transition: .3s;
}

.btn:hover{
    color:#eb7d4b;
    background-color: #fff;
    border-bottom:0.2rem solid #c86a40;
}




/* SERVICES SECTION*/


.services-section{
    background-image: linear-gradient(rgba(23, 194, 163, 0.897),rgba(23, 194, 163, 0.897)), url('img/services-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 8rem 0;
    background-color: rgb(23, 194, 164);
    text-align: center;
    margin: auto;
}



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

.services-section h2::after{
    content: "";
    display: block;
    height: 0.4rem;
    background-color: #14a58c;
    width: 8.5rem;
    margin: auto;
    margin-top: 1rem;
}
.little-description{
    color: #fff;
    font-size: 1.8rem;
    width: 61rem;
    text-align: center;
    margin: auto;
    line-height: 3rem;
}

.service-icon{
    margin-top: 7rem;
    height: 12.8rem;
}

h3{
    color: #fff;
    margin-top: 2.7rem ;
    font-size: 2.4rem;
    font-weight: 600;
    text-transform: uppercase;
}
.box p{
    color: #fff;
    font-weight: 300;
    font-size: 1.6rem;
    margin-top: 2rem;
}



/* TEAM SECTION*/

.team-section{
    background-image: linear-gradient(rgba(169, 193, 210, 0.663),rgba(169, 193, 210, 0.663)), url('img/team-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 8rem 0;
    overflow: hidden;
    text-align: center;
    margin: auto;
}

.team-section h2::after{
    content: "";
    display: block;
    height: 0.4rem;
    background-color: #6188a4;
    width: 8.5rem;
    margin: auto;
    margin-top: 1rem;
}

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

.team-section.little-description{
    color: #000;
    font-size: 1.8rem;
    width: 61rem;
    text-align: center;
    margin: auto;
    line-height: 3rem;
    margin-bottom: 4rem;
}

.team-section h3{
    color: #000;
    margin-top: 2.7rem ;
    font-size: 2.4rem;
    font-weight: 600;
    text-transform: uppercase;
}
.team-section .box p{
    color: #000000;
    font-weight: 300;
    font-size: 1.6rem;
    margin-top: 2rem;
}

.team-section img{
    border-radius: 50%;

}
.team-section span{
    color: #045b7a;
    font-size: 1.6rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}


.team-icon{
    margin-top: 2.5rem;
}

.team-icon ul li{
    display: inline-block;
    margin: 0.5rem;
}
.team-icon ul li a{
    color: #fff;
}
.team-icon ul li a:link i::before{
    color: #fff;
    background-color: darkslategray;
    width: 2rem;
    height: 2rem;
    display: inline-block;
    padding: 1rem;
    font-size: 2rem;
    border-radius: 50%;
    transition: 0.5s all ease;
}

.team-icon ul li a:hover i::before{
    background-color: #000000;
    transform: rotate(360deg);
}


/*SKILL SECTION*/


.skill-section{
    background-image: linear-gradient(rgba(170, 94, 50, 0.685),rgba(170, 94, 50, 0.685)), url('img/skill-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 8rem 0;
    overflow: hidden;
    text-align: center;
    margin: auto;
}


.skill-section h2::after{
    content: "";
    display: block;
    height: 0.4rem;
    background-color: #874417;
    width: 8.5rem;
    margin: auto;
    margin-top: 1rem;
}

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

.skill-section .little-description{
    color: #000;
    font-size: 1.8rem;
    width: 61rem;
    text-align: center;
    margin: auto;
    line-height: 3rem;
    margin-bottom: 4rem;
}
.skill-section h3{
    color: #000;
    margin-top: 2.7rem ;
    font-size: 2.4rem;
    font-weight: 600;
    text-transform: uppercase;
}

svg.radial-progress text{
    fill: #2e3546;
}

svg.radial-progress circle{
    stroke-width: 6;
}

svg.web-design circle{
    fill: rgba(0,0,0,0);
    stroke: #30bae7;
}
svg.html-css circle{
    fill: rgba(0,0,0,0);
    stroke: #d74680;
}
svg.graphic-design circle{
    fill: rgba(0,0,0,0);
    stroke: #15c7a8;
}
svg.ui-ux circle{
    fill: rgba(0,0,0,0);
    stroke: #eb7d4b;
}





/* PORTFOLIO SECTION */
.portfolio-section {
    background-image: linear-gradient(rgba(255, 221, 153, 0.801), rgba(255, 221, 153, 0.801)), url('img/portfolio-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 8rem 0;
    overflow: hidden;
    text-align: center;
    margin: auto;
}

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

.portfolio-section h2::after {
    content: "";
    display: block;
    height: 0.4rem;
    background-color: #e5c37f;
    width: 8.5rem;
    margin: auto;
    margin-top: 1rem;
}

.portfolio-section .little-description {
    color: #000;
    font-size: 1.8rem;
    width: 61rem;
    text-align: center;
    margin: auto;
    line-height: 3rem;
    margin-bottom: -1rem;
}

/* PORTFOLIO MENU */
.portfolio-menu {
    margin-bottom: 4rem;
}

.portfolio-menu li {
    font-size: 1.6rem;
    display: inline-block;
    padding: 0.7rem 1.5rem;
    margin-top: 4rem;
    margin-left: 1rem;
    background-color: #ebc985;
    border-radius: 0.7rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease-in-out;
}

.portfolio-menu .active {
    background-color: #ffffff;
    border-radius: 0.7rem;
    padding: 0.7rem 1.5rem;
}

.portfolio-menu li:hover {
    background-color: #ffffff;
}

/* PORTFOLIO ITEMS */
.portfolio-section .col {
    text-align: center;
}

.portfolio-image {
    width: 80%;
    height: auto;
}

.portfolio-section h4 {
    color: #393939;
    margin-top: 2.7rem;
    font-size: 1.8rem;
    text-transform: uppercase;
}

/* BUTTON STYLES */
.portfolio-section .btn {
    color: #fff;
    background-color: #17c2a4;
    border-bottom: 0.2rem solid #14a58c;
    margin-top: 7rem;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    display: inline-block;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
}

.portfolio-section .btn:hover {
    color: #17c2a4;
    background-color: #fff;
    border-bottom: 0.2rem solid #14a58c;
}


/* testimonial-section */

.testimonial-section{
    background: linear-gradient(rgba(215, 70, 128, 0.801),rgba(215, 70, 128, 0.801)), url(img/testimonial-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 8rem 0;
    overflow: hidden;
    text-align: center;
    margin: auto;
}

.testimonial-section h2::after{
    content: "";
    display: block;
    height: 0.4rem;
    background-color: #b73c6d;
    width: 8.5rem;
    margin: auto;
    margin-top: 1rem;
}

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

.testimonial-section .little-description{
    color: #faecf1;
    font-size: 1.8rem;
    width: 61rem;
    text-align: center;
    margin: auto;
    line-height: 3rem;
    margin-bottom: -1rem;
}

.main-comment{
    margin-top: 7rem;
}
.comment{
    width: 46%;
    margin-left: 0;
    text-align: left;
    margin: 4rem 0;  
}
.comment:nth-child(2n){
    margin-left: 7%;
}

.comment img{
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
}
.comment p{
    color:#faecf1;
    font-size: 2rem;
    font-style: italic;
    margin-bottom: 2rem;
}
.comment span{
    color: #ffdd99;
    font-size: 1.6rem;
    margin-top: 1.5rem;
    margin: 2rem 0;
}




/*contact-section */


.contact-section{
    background: linear-gradient(rgba(60, 83, 153, 0.801),rgba(60, 83, 153, 0.801)), url(img/contact-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 8rem 0;
    overflow: hidden;
    text-align: center;
    margin: auto;
}
.contact-section h2::after{
    content: "";
    display: block;
    height: 0.4rem;
    background-color: #273a71;
    width: 8.5rem;
    margin: auto;
    margin-top: 1rem;
}
.contact-section h2{
    font-size: 4rem;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.3rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 2rem;
}
.contact-section .little-description{
    color: #faecf1;
    font-size: 1.8rem;
    width: 100%;
    text-align: center;
    margin: auto;
    line-height: 3rem;
    margin-bottom: -1rem;
}


.contact-section form{
    
    width: 80%;
    display: block;
    margin: auto;
}

.contact-section form input[type="text"],
.contact-section form textarea{
    color: #fff;
    background-color:  #273a71;
    text-transform: capitalize;
    border: none;
    width: 100%;
    border-radius: .4rem;
    padding: 2rem 2.5rem;
    font-size: 1.8rem;
    margin: 1rem 0;
}






.contact-section .btn-submit{
    color: #fff;
    background-color: #30bae7;
    border: none;
    margin-top: 7rem;
    text-transform: uppercase;
    border-radius: 0.5rem;
    padding: 1.5rem 5rem;
    display: inline-block;
    font-size: 1.6rem;
    border-bottom:0.2rem solid #299ec5;
    font-weight: 600;
    transition: .3s;
}

.contact-section .btn:hover{
    color: #30bae7;
    background-color: #fff;
    border: none;
    border-bottom:0.2rem solid #299ec5;
}




/* FOOTER SECTION  */

.footer-section{
    background-color: #344b8e;
    padding: 2rem 0;
    overflow: hidden;
    text-align: center;
    margin: auto;
}


.footer-section ul{
    list-style: none;
}
.footer-section ul li{
    display: inline-block;
    margin-top: 4rem;
    margin-left: 1rem;
   
}


.footer-section ul li a{
    color: #ffffff;
    text-decoration: none;
    text-transform: capitalize;
    padding:0rem 2.5rem;
    font-size:  2.5rem;
    border-radius:0.7rem;
    display:inline-block; 
    font-weight: 600;
}
.footer-section ul li:hover a{
    color:#30bae7;
}
.footer-section ul li:first-child{
    margin-left: 0;
}