/* Theme Name: Agency Portfolio 
    Version: 1.0
    Author: E-Coverly
    Author Uri: https://ecoverly.net/
*/
/* Fontawesome Css */
@import url('all.min.css');

* h1,h2,h3,h4,h5,h6,p,ul {
    padding: 0;
    margin: 0;
}
*{ 
    scrollbar-width: thin; 
    scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color);
}
*::-webkit-scrollbar {
    width: 7px;
}
*::-webkit-scrollbar-track {
    background: var(--scroll-track-color);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color); 
}
::selection {
    color: var(--white-color);
    background: var(--secondary-color);
}
:root{
    /* Colors Root */
    --body-bg-color: #ffffff;
    --body-color: #666666;
    --white-color: #ffffff; 
    --black-color: #000000;
    --secondary-color: #FC18AA;
    --primary-color:  #13C1FB;
    --header-color: #0E1133;
    --heading-color: #0E1133;    
    --paragraph-color: #666666;
    --dark-blue-color:  #13C1FB;
    --hover-color: #FC18AA;
    --scroll-thumb-color: #FC18AA;
    --scroll-track-color:  #666666;
    /* Fonts Root */
    --body-font: 'poppins_regular';
    --bold-font: 'poppin_bold';
    --semibold-font: 'poppins_semibold';
    --medium-font: 'poppins_medium';
    --regular-font: 'poppins_regular';
    --light-font: 'poppins_light';
    --rooster: 'ROOSTER_PERSONAL_USE';
}
body{
    background-color: var(--body-bg-color);
    color: var(--body-color);
    font-family: var(--body-font);
}
h1{
    font-family: var(--rooster);
    font-size: 64px;    
    color: var(--heading-color);
}
h4{
    font-family: var(--bold-font);
    font-size: 24px;
    color: var(--primary-color);
}
p{
    font-family: var(--medium-font);
    font-size: 16px;
    color: var(--paragraph-color);
}
.btn-primary{
    background: var(--secondary-color);
    border-radius: 5px;
    font-size: 16px;
    font-family: var(--bold-font);
    color: var(--white-color);
    border: 0;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.btn-primary::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--primary-color);
    z-index: -1;
    transform: translateX(-102%);
    transition: all 0.3s ease;
}
.btn-primary::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
    background-color: var(--primary-color);
    z-index: -1;
    transform: translateX(102%);
    transition: all 0.3s ease;
}
.btn-primary:hover::after {
    transform: translateX(0%);
}
.btn-primary:hover::before {
    transform: translateX(0%);
}
.btn-primary:hover{
    color: var(--white-color);
    background-color: var(--hover-color);
}
.btn-primary:focus::after {
    transform: translateX(0%);
}
.btn-primary:focus::before {
    transform: translateX(0%);
}
.btn-primary:focus{
    color: var(--white-color);
    background-color: var(--hover-color);
    box-shadow: none;
}





.btn-secondary{
    background: #FFFFFF;
    border-radius: 5px;
    font-size: 16px;
    font-family: var(--bold-font);
    color: var(--secondary-color);
    border: 0;
    padding: 15px 30px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.btn-secondary::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--hover-color);
    z-index: -1;
    transform: translateX(-102%);
    transition: all 0.3s ease;
}
.btn-secondary::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
    background-color: var(--hover-color);
    z-index: -1;
    transform: translateX(102%);
    transition: all 0.3s ease;
}
.btn-secondary:hover::after {
    transform: translateX(0%);
}
.btn-secondary:hover::before {
    transform: translateX(0%);
}
.btn-secondary:hover{
    color: var(--white-color);
    background-color: var(--white-color);
}
.btn-secondary:focus::after {
    transform: translateX(0%);
}
.btn-secondary:focus::before {
    transform: translateX(0%);
}
.btn-secondary:focus{
    color: var(--white-color);
    background-color: var(--white-color);
    box-shadow: none;
}




/*--------------- Loading Start --------------*/
.pre-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: linear-gradient(91.83deg, rgb(251,45,78,0.7) 0%, rgb(78,136,255,0.7) 100%);*/
    background-color: rgb(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 32px;
    z-index: 9999999999;
}
.pre-loader .loader{
    -webkit-perspective:700px;
    perspective: 700px;
}
.pre-loader .loader>span{
    display: inline-block;
    animation:flip 4.3s infinite linear;
    transform-origin:0 70%;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    color: var(--white-color);
    font-family: var(--bold-font);
}
@keyframes flip{
    35%{
        transform: rotateX(360deg);
    }
    100%{
        transform: rotatex(360deg);
    }
}
.pre-loader .loader>span:nth-child(2){
    animation-delay: 0.3s;
}

.pre-loader .loader>span:nth-child(3){
    animation-delay: 0.6s;
}

.pre-loader .loader>span:nth-child(4){
    animation-delay: 0.9s;
}

.pre-loader .loader>span:nth-child(6){
    animation-delay: 1.2s;
}

.pre-loader .loader>span:nth-child(7){
    animation-delay: 1.5s
}

.pre-loader .loader>span:nth-child(8){
    animation-delay: 1.8s
}
.pre-loader .loader>span:nth-child(9){
    animation-delay: 2.1s
}
.pre-loader .loader>span:nth-child(10){
    animation-delay: 2.4s
}
.pre-loader .loader>span:nth-child(11){
    animation-delay: 2.7s
}
.pre-loader .loader>span:nth-child(12){
    animation-delay: 3s
}
.pre-loader .loader>span:nth-child(13){
    animation-delay: 3.3s
}
.pre-loader .loader>span:nth-child(14){
    animation-delay: 3.6s
}
.pre-loader .loader>span:nth-child(15){
    animation-delay: 3.9s
}
/*--------------- Loading End --------------*/




/*--------------- Header Start --------------*/
header{
    background-color: var(--white-color);
    height: 90px;
    padding: 10px 35px;
    box-shadow: 0px 10px 42px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    transition: all 0.5s ease;
}
header.header-fixed{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60px;
    transition: all 0.5s ease;
    z-index: 99;
}
.logo a{
    text-decoration: none;
    display: inline-block;
}
.logo h2{
    color: var(--secondary-color);
    font-size: 24px;
    font-family: var(--bold-font);
}
.main-menu ul{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
}
.main-menu ul li{
    padding-left: 72px;
}
.main-menu ul li a{
    color: var(--header-color);
    font-family: var(--medium-font);
    text-decoration: none;
    font-size: 16px;
    transition: all 0.5s ease;
    display: block;
}
.main-menu ul li:last-child a{
    background: var(--secondary-color);
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    padding: 10px 19px;
    color: var(--white-color);
    font-family: var(--bold-font);
}
.main-menu ul li:last-child a:hover{
    color: var(--white-color);
}
.main-menu ul li a:hover{
    color: var(--hover-color);
}
/*--------------- Header End --------------*/








/*--------------- Banner Start --------------*/
.banner-section{
    background-image: url('assets/images/banner-bg-1.png');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 750px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 1;
}
.banner-section::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(91.83deg, rgb(252,24,170,0.9) 0%, rgb(19,193,251,0.9) 100%);
    z-index: -1;
}
.banner-content{
    text-align: center;
}
.banner-content h1{
    color: var(--white-color);
    font-size: 96px;
}
.banner-content p{
    color: var(--white-color);
    font-size: 20px;
    margin: 10px 0 50px;
}
/*--------------- Banner End --------------*/






/*--------------- About Start --------------*/
.about-section{
    padding: 100px 0 80px;
}
.about-content{
    padding-left: 75px;
}
.about-content p{
    margin: 30px 0;
    line-height: 34px;
    text-align: justify;
}  
/*--------------- About End --------------*/






/*--------------- Design Process Start --------------*/
.design-process-section{
    margin-bottom: 100px;
}
.design-process-bg{
    background-image: url('assets/images/design-process-bg-line.png');
    background-repeat: no-repeat;
    background-position: center 30px;
    background-size: 100%;
}
.design-process-box{
    text-align: center;
}
.design-process-icon img{
    max-width: 240px;
    width: 100%;
}
.design-process-content p{
    max-width: 248px;
    margin: 10px auto 0;
    width: 100;
}
/*--------------- Design Process End --------------*/








/*--------------- Portfolio Start --------------*/
.portfolio-section{
    background-color: #E6EEFF;
    padding: 100px 0;
}
.tab-content > .tab-pane{
    display: block !important;
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
.tab-content > .active {
    visibility: visible !important;
    height: auto !important;
    overflow: visible;
}
.tabs-button ul{
    justify-content: center;
}
.tabs-button ul li .nav-link{
    background-color: var(--white-color);
    color: var(--header-color);
    height: 44px;
    width: 190px;
    border-radius: 0;
}
.tabs-button ul li:first-child .nav-link{
    border-radius: 5px 0px 0px 5px;
}
.tabs-button ul li:last-child .nav-link{
    border-radius: 0px 5px 5px 0px;
}
.tabs-button ul li .nav-link.active{
    background-color: var(--hover-color);
    font-family: var(--bold-font);
}
.isotope-filter-button{
    margin-bottom: 20px;
}
.isotope-filter-button ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}
.isotope-filter-button ul li a{
    color: var(--header-color);
    text-decoration: none;
    display: block;
    padding: 10px 18px;
    transition: all 0.5s ease;
}
.isotope-filter-button ul li a.active{
    background-color: var(--white-color);
    color: var(--primary-color);
    font-family: var(--bold-font);
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
}
.isotope-filter-button ul li a:hover{
    background-color: var(--white-color);
    color: var(--primary-color);
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
}
.portfolio-box{
    background: var(--white-color);
    border: 4px solid #E5EEFF;
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
    border-radius: 5px 0px 0px 0px;
    padding: 20px;
    height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.portfolio-image img{
    height: 250px;
    width: 100%;
}
.portfolio-hover {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(255,254,4, 0.6);
    color: var(--white-color);
    font-size: 30px;
}
/*--------------- Portfolio End --------------*/







/*--------------- Client Feedback Start --------------*/
.client-feedback-section{
    padding: 100px 0;
}
.client-feedback-main{
    background-image: url('assets/images/client-feedback-bg.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 76px 0;
}
.client-feedback-slider-box{
    background: #FFFFFF;
    border: 1px solid #E5EEFF;
    box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.05);
    border-radius: 0px 0px 0px 5px;
    max-width: 730px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 50px 50px 75px;
}
.client-feedback-slider-box h1{
    font-size: 40px;
    margin-bottom: 30px;
}
.client-feedback-box{
    text-align: center;
}
.client-feedback-box img{
    width: 60px;
    height: 60px;
    object-fit: cover;
    object-position: center;
}
.client-feedback-box h4{
    margin: 5px 0;
}
.carousel-indicators{
    bottom: -50px;
}
.client-feedback-slider-box .carousel-indicators button{
    width: 12px;
    height: 12px;
    background: #D9D9D9;
    border: 0;
    border-radius: 50%;
    opacity: 1;
}
.client-feedback-slider-box .carousel-indicators button.active{
    background-color: var(--hover-color);
}
/*--------------- Client Feedback End --------------*/






/*--------------- Footer Start --------------*/
footer{
    background-color: #E5EEFF;
    margin-top: 280px;
}
.footer-main{
    background-image: url('assets/images/footer-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 50px;
    border-radius: 10px;
    text-align: center;
    margin-top: -280px;
}
.footer-from-main h1{
    color: var(--white-color);
}
.footer-from-main p{
    color: var(--white-color);
}
.footer-from{
    margin-top: 25px;
    position: relative;
}
.footer-from .form-control{
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(220, 220, 220, 0.1);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(50px);
    border-radius: 3px;
    color: var(--white-color);
    font-size: 14px;
}
.footer-from .form-control::placeholder{
    color: var(--white-color);
    opacity: 0.6;
    font-size: 14px;
}
.footer-from input.form-control{
    height: 41px;
}
.footer-from textarea.form-control{
    height: 127px;
}
.footer-from button{
    text-transform: uppercase;
}
.footer-end{
    padding: 40px 0;
    text-align: center;
}
.backto-top-button{
    position: fixed;
    right: 20px;
    bottom: 50px;
    display: none;
}
.backto-top-button.backto-top-button-fixed{
    display: block;
}
/*--------------- Footer End --------------*/


.wpcf7-form-control-wrap {
    width: 100%;
    display: block;
}
span.wpcf7-not-valid-tip {
    position: absolute;
    right: 0;
    width: 100%;
    text-align: right;
    z-index: 9;
    font-size: 13px;
}
div.wpcf7-response-output{
    position: absolute;
    bottom: -56px;
    width: 100%;
    border-color: var(--hover-color);
    color: var(--white-color);
    left: 0;
}






@media (max-width:  1300px){
    .main-menu ul li {
        padding-left: 30px;
    }
}


@media (min-width:  992px){
    .mobile-menu-button{
        display: none;
    }
    .close-menu-button{
        display: none;
    }
}


@media (max-width:  991px){
    .banner-section{
        height: 500px;
    }
    .banner-content h1{
        font-size: 70px;
    }
    .hidden-lg{
        display: none;
    }
    .about-section {
        padding: 50px 0;
    }
    .portfolio-section {
        padding: 50px 0;
    }
    .isotope-filter-button ul{
        flex-wrap: wrap;
    }
    .isotope-filter-button ul li{
        margin-bottom: 10px;
    }
    .client-feedback-section {
        padding: 0px 0;
    }
    .main-menu{
        position: fixed;
        top: 0;
        right: 0;
        background-color: var(--white-color);
        height: 100%;
        width: 320px;
        z-index: 999;
        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
        transform: translateX(120%);
        opacity: 0;
    }
    .main-menu.main-menu-active{
        transform: translateX(0%);
        opacity: 1;
    }
    .main-menu ul{
        display: block;
        margin-top: 50px;
        text-align: left;
    }
    .main-menu ul li{
        padding: 13px 30px;
    }
    .close-menu-button{
        position: absolute;
        top: 10px;
        right: 15px;
    }
    header{
        height: 60px;
    }
}




@media (max-width:  767px){
    header{
        padding: 10px 0px;
    }
    .logo h2{
        font-size: 20px;
    }
    h1{
        font-size: 50px;
    }
    p{
        font-size: 14px;
    }
    .banner-content h1 {
        font-size: 40px;
    }
    .banner-content p{
        font-size: 14px;
        margin: 10px 0 30px;
    }
    .banner-section {
        height: 300px;
    }
    .about-content{
        padding-left: 0;
    }
    .design-process-box{
        margin-bottom: 25px;
    }
    .design-process-section {
        margin-bottom: 10px;
    }
    .isotope-filter-button ul{
        justify-content: center;
    }
    .client-feedback-slider-box{
        padding: 10px 15px 50px;
    }
    .footer-main{
        padding: 15px;
    }
}