/*========================================================================
    Template Name: Paul Lapkin - Portfolio Template
    Template URI:
    Description: An Awesome Portfolio Template
    Author: Shompa Akter
    Author URI: shompa.me
    Support: shompaakter334@gmail.com
    Version: 1.0
=========================================================================*/

/*========================================================================

    CSS INDEX
    ==========

    1. COMMON CSS
    2. HERO
    3. ABOUT
    4. PROCESS
    5. EXPERIENCE
    6. PORTFOLIO
    7. TESTIMONIAL
    8. CONTACT
    9. FOOTER
=========================================================================*/

/*========================================================================

    1. COMMON CSS

=========================================================================*/


@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&family=Roboto:wght@400;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1, h2, h3, h4{
    font-family: 'Raleway', sans-serif;
    margin-top: 0;
    font-weight: 700;
    }

html, body{
    background-color: #fff;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 10px;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
}

a,
a:hover{
    text-decoration: none;
}

p {
    margin-top: 0;
}

ul {
    margin: 0;
    padding: 0;
}

h1{
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 650%;
    text-transform: uppercase;
    letter-spacing: 7px;
    color: #fff;
    display: inline-block;
}

h3 {
    font-size: 260%;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 40px;
}

h4{
    font-size: 160%;
}

/* RESUSEABLE COMPONENTS*/ 

.row{
    max-width: 1180px;
    margin: auto;
}

section,
#about {
    padding: 120px 0;
}

.btn:link,
.btn:visited,
.btn {
    width: 200px;
    background-color: #ff2b4a;
    color: #fff;
    display: inline-block;
    text-align: center;
    font-size: 160%;
    padding: 10px 0;
    border-radius: 10px;
    border: 2px solid #ff2b4a;
    transition: .5s;
    cursor: pointer;
}

.btn:hover,
.btn:active{
    background-color: transparent;
    color: #ff2b4a;
}

h2{
    font-size: 400%;
    color: #000;
}

.section-title{
    text-align: center;
    margin-bottom: 55px;
}

.section-title p{
    font-size: 160%;
    color: #6f6f6f;
    margin-top: 20px;
}

ul li {
    list-style: none;
}


/*========================================================================
    2. HERO
=========================================================================*/

#hero{
    height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(images/hero.jpg) no-repeat center / cover;
}

.logo{
    float: left;
    height: 45px;
    margin-top: 45px;
}

.nav-icon{
    color: #fff;
    float: right;
    margin-top: 45px;
}

.nav-icon ion-icon{
    font-size: 450%;
    border: 1px solid #fff;
}

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

h1::before{
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;


}

h1::after{
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
}

.hero-text-box span{
    font-size: 220%;
    color: #fff;
    display: block;
}

.scroll-down {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    margin: auto;
    width: 40px;
 }
 
 .scroll-down a ion-icon {
     color: #fff;
     font-size: 400%;
     -webkit-animation: arrow .8s infinite ease;
             animation: arrow .8s infinite ease;
     position: relative;
     
 }

 @-webkit-keyframes arrow {
    0% {
        top: 10px;
    }

    50% {
        top: 30px;
    }
    100% {
        top: 10px;
    }
    
 }

 @keyframes arrow {
    0% {
        top: 10px;
    }

    50% {
        top: 30px;
    }
    100% {
        top: 10px;
    }
    
 }

 /* HAMBURGER MENU */

 .menu-container {
    width: 100%;
    height: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
 }

 .close-btn ion-icon {
    position: absolute;
    top: 45px;
    right: 100px;
    color: #fff;
    font-size: 400%;
    border: 1px solid #fff;
 }

 .menu-items {
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

 }

 .menu-items ul li {
    margin: 10px 0;

 }

 .menu-items ul li a {
    color: #fff;
    font-size: 250%;
    text-transform: uppercase;
    transition: .4s;
    display: block;

 }

 .menu-items ul li:hover a {
    color: #ff2b4a;
    font-size: 280%;
 }

/*========================================================================
    3. ABOUT   
=========================================================================*/

.grid-about-container{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 60px;
}

.paul{
    width: 100%;
    -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
            clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}

.intro{
    font-size: 180%;
    color: #222;
    font-weight: 700;
}

.description{
    font-size: 160%;
    color: #222;
    margin: 30px 0;

}



/*========================================================================
    4. PROCESS
=========================================================================*/

#process{
    background: #f6f6f6;
}

.grid-process-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    color: #fff;
    text-align: center;
}

.grid-process-items{
    padding: 80px 0;
    border-radius: 15px;

}

.grid-process-items ion-icon{
    font-size: 400%;
    margin-bottom: 30px;
}

.grid-process-items:nth-child(1) {
    background: #10c6fc;
}

.grid-process-items:nth-child(2) {
    background: #835aeb;
}

.grid-process-items:nth-child(3) {
    background: #ff2b4a;
}

.grid-process-items:nth-child(4) {
    background: #002453;
}


.grid-process-items h4{
    text-transform: uppercase;
    color: #fff;
}

/*========================================================================
    5. EXPERIENCE
=========================================================================*/

#experience{
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(images/experience.jpg) no-repeat center / cover;
    color: #fff;
    background-attachment: fixed;
}

.grid-experience-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

.grid-experience-items,
.grid-education-items {
   background: rgba(0, 0, 0, 0.8);
   padding: 45px 30px;
   
}

.job h4,
.institute h4 {
    font-size: 180%;
    color: #fff;
    
}

.job span,
.institute span {
    font-size: 160%;
    margin: 10px 0;
    display: inline-block;
    
}

.job p,
.institute p {
    font-size: 160%;

}

#experience hr{
    border: 0;
    border-bottom: 1px solid #fff;
    margin: 30px 0;
}

/*========================================================================
    6. PORTFOLIO
=========================================================================*/

#portfolio {
    margin: 0 60px;
}

.grid-portfolio-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(250px, auto);
}

.grid-portfolio-items {
    background:  #000;
}

.grid-portfolio-items:nth-child(1) {
    background: url(images/lw1.jpg) no-repeat center / cover;
}

.grid-portfolio-items:nth-child(2) {
    background: url(images/lw2.jpg) no-repeat center / cover;
}
.grid-portfolio-items:nth-child(3) {
    background: url(images/lw3.jpg) no-repeat center / cover;
}
.grid-portfolio-items:nth-child(4) {
    background: url(images/lw4.jpg) no-repeat center / cover;
}

.grid-portfolio-items:nth-child(5) {
    background: url(images/lw5.jpg) no-repeat center / cover;
    grid-column-start: 1;
    grid-column-end: 3;
}

.grid-portfolio-items:nth-child(6) {
    background: url(images/lw6.jpg) no-repeat center / cover;
}

.grid-portfolio-items:nth-child(7) {
    background: url(images/lw7.jpg) no-repeat center / cover;
}

.portfolio-filter {
    text-align: center;
    margin-bottom: 30px;
}

.portfolio-filter button {
    border: 1px solid #000;
    padding: 5px 10px;
    background: #000;
    color: #fff;
    font-size: 160%;
    margin-bottom: 10px;
}

.portfolio-filter button:hover {
    cursor: pointer;
    background: #ff2b4a;
    border-color: #ff2b4a;
}

.portfolio-filter .mixitup-control-active{
    background: #ff2b4a;
    border-color: #ff2b4a;
}

/*========================================================================
    7. TESTIMONIAL
=========================================================================*/

#testimonial {
    background: url(images/testimonial.jpg) no-repeat center / cover;

}

.grid-testimonial-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

.quote img{
    height: 30px;
}

#testimonial p{
    margin: 35px 0;
    font-size: 160%;
}

.signature {
    margin-bottom: 10px;
}

.signature img {
    height: 45px;
}

#testimonial span {
    font-size: 140%;
}

/*========================================================================
    8. CONTACT
=========================================================================*/

#contact {
    background: url(images/contact.jpg) no-repeat center / cover;
    background-attachment: fixed;
}

.grid-contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

.grid-contact-items:nth-child(1) {
    background: rgba(0, 0, 0, 0.7);
    padding: 45px 35px;
}

.single-form input[type= "text"],
.single-form input[type= "email"],
.single-form textarea {
    width: 100%;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    font-size: 140%;
    padding: 10px;
    margin: 10px 0;
}

.single-form-btn {
    text-align: right;
    margin-top: 20px;
}

.nested-grid-contact-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 10px;
}

.nested-grid-contact-items {
    background: rgba(0, 0, 0, 0.7);
    padding: 45px 30px;
}

.nested-grid-contact-items p {
    font-size: 160%;
    color: #fff;
}

/*========================================================================
    9. FOOTER
=========================================================================*/

footer {
    background: #222;
    padding: 60px 0;
    text-align: center;

}

.social-icons {
    margin-bottom: 15px;
}

.social-icons ul li {
    display: inline-block;
    border-right: 1px solid #fff;
    padding: 0 10px;
}

.social-icons ul li a ion-icon {
    color: #fff;
    font-size: 200%;
    
}

.social-icons ul li:hover a ion-icon {
    color: #ff2b4a;
}

.copyright {
    font-size: 120%;
    color: #fff;
}

.totop {
    margin-top: 25px;
}

.totop .uk-totop {
    padding: 10px 6px;
    color: #f5f5f5;
    transition: .5s;
    border: 1px solid #f5f5f5;
  }

  .totop .uk-totop:hover {
    background: #fff;
    color: #000;
  }