/************************************* slider start *************************************/
/*====================================
    slider-content css
====================================*/
.slider-content {
    position: relative;
}
.slider-content::after {
    content: attr(data-text);
    color: var(--extra-bgcolor);
    font-size: 48px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    z-index: -1;
    font-family: 'Beauty nigella';
    white-space: nowrap;
    line-height: 1;
}
@media (min-width: 576px) {
    .slider-content::after {
        font-size: 72px;
    }
}
@media (min-width: 768px) {
    .slider-content::after {
        font-size: 96px;
    }
}
@media (min-width: 992px) {
    .slider-content::after {
        font-size: 136px;
    }
}
@media (min-width: 1200px) {
    .slider-content::after {
        font-size: 160px;
    }
}
@media (min-width: 1400px) {
    .slider-content::after {
        font-size: 184px;
    }
}

/*====================================
    slider css
====================================*/
.slider-content .slider-home .slider-info img {
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
}

/*====================================
    slider-info css
====================================*/
.slider-content .slider-home.slick-slider .slick-slide.slick-current .slider-info .slider-text-info h2,
.slider-content .slider-home.slick-slider .slick-slide.slick-current .slider-info .slider-text-info a {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.slider-content .slider-home.slick-slider .slick-slide.slick-current .slider-info .slider-text-info h2 {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.slider-content .slider-home.slick-slider .slick-slide.slick-current .slider-info .slider-text-info a {
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s;
    -webkit-animation-duration: 1.0s;
    animation-duration: 1.0s;
}

/* slider-text-info css */
.slider-content .slider-home .slider-info .slider-text-info h2 {
    font-size: 32px;
}
@media (min-width: 576px) {
    .slider-content .slider-home .slider-info .slider-text-info h2 {
        font-size: 48px;
    }
}
@media (min-width: 768px) {
    .slider-content .slider-home .slider-info .slider-text-info h2 {
        font-size: 48px;
    }
}
@media (min-width: 992px) {
    .slider-content .slider-home .slider-info .slider-text-info h2 {
        font-size: 56px;
    }
}
@media (min-width: 1200px) {
    .slider-content .slider-home .slider-info .slider-text-info h2 {
        font-size: 80px;
    }
}
@media (min-width: 1400px) {
    .slider-content .slider-home .slider-info .slider-text-info h2 {
        font-size: 96px;
    }
}

/*====================================
    slider-arrow css
====================================*/
.slider-content .slider-home button.slick-arrow {
    color: var(--extra-font-color-dark);
    font-size: 20px;
    height: 45px;
    width: 45px;
    background-color: var(--primary-font-color);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
    transition: color 0.3s ease-in-out,background-color 0.3s ease-in-out,opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
}
.slider-content:hover .slider-home button.slick-arrow {
    opacity: 1;
    visibility: visible;
}
.slider-content .slider-home button.slick-arrow:hover {
    color: var(--extra-font-color-dark);
    background-color: var(--secondary-font-color);
}
.slider-content .slider-home button.slick-arrow.slick-prev {
    right: 15px;
    transform: translateY(calc(-50% + 30px))
}
.slider-content .slider-home button.slick-arrow.slick-next {
    right: 15px;
    transform: translateY(calc(-50% - 30px))
}
@media (min-width: 576px) {
    .slider-content .slider-home button.slick-arrow.slick-prev {
        transform: translateY(calc(-50% + 37.5px))
    }
    .slider-content .slider-home button.slick-arrow.slick-next {
        transform: translateY(calc(-50% - 37.5px))
    }
}
@media (min-width: 1200px) {
    .slider-content .slider-home button.slick-arrow.slick-prev {
        right: 30px;
    }
    .slider-content .slider-home button.slick-arrow.slick-next {
        right: 30px;
    }
}
@media (min-width: 1600px) {
    .slider-content .slider-home button.slick-arrow.slick-prev {
        right: 100px;
    }
    .slider-content .slider-home button.slick-arrow.slick-next {
        right: 100px;
    }
}

/*====================================
    slider-dots css
====================================*/
.slider-content .slider-home ul.slick-dots {
    counter-reset: number;
}
.slider-content .slider-home ul.slick-dots li {
    margin-top: 15px;
    position: relative;
    cursor: pointer;
}
.slider-content .slider-home ul.slick-dots li:first-child {
    margin-top: 0px;
}
.slider-content .slider-home ul.slick-dots li::after {
    counter-increment: number;
    content: "0" counter(number);
    color: var(--heading-font-color);
    font-size: 24px;
    font-weight: var(--section-heading-font-weight);
    text-shadow: 1px 0 0 var(--heading-font-color), 0 1px 0 var(--heading-font-color), -1px 0 0 var(--heading-font-color), 0 -1px 0 var(--heading-font-color);
    opacity: 0.15;
    line-height: 1;
}
.slider-content .slider-home ul.slick-dots li.slick-active::after {
    opacity: 1;
}
.slider-content .slider-home ul.slick-dots li span img {
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
}
@media (min-width: 576px) {
    .slider-content .slider-home ul.slick-dots li {
        margin-top: 30px;
    }
    .slider-content .slider-home ul.slick-dots li:first-child {
        margin-top: 0px;
    }
}
@media (min-width: 768px) {
    .slider-content .slider-home ul.slick-dots li::after {
        position: absolute;
        right: 0;
    }
}
/************************************* slider end *************************************/

/************************************* mix-fixture start *************************************/
/*====================================
    counter css
====================================*/
.counter-area .counter-content span.cc-title {
    font-size: 40px;
}
.counter-area .counter-content h2 {
    font-size: 18px;
}


/*====================================
    experience css
====================================*/
.experience-area .exp-content .exp-info {
    width: 120px;
}
.experience-area .exp-content .exp-title {
    width: calc(100% - 120px);
}

/* experience info */
.experience-area .exp-content .exp-info span.exp-img {
    position: relative;
}
.experience-area .exp-content .exp-info span.exp-img::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    background-color: var(--body-bgcolor);
}
.experience-area .exp-content .exp-info span.exp-img {
    width: 120px;
}
.experience-area .exp-content .exp-info span.exp-num {
    font-size: 40px;
    transform: translate(50%, -50%);
}

/* experience title */
.experience-area .exp-content .exp-title h6 {
    font-size: 18px;
}

/*====================================
    feature css
====================================*/
.feature-area .feature-content .feature-info span.feature-img {
    width: 40px;
}
.feature-area .feature-content .feature-info span.feature-img img {
    -webkit-transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
.feature-area .feature-content .feature-info:hover span.feature-img img {
    transform: translateY(-10px);
}
.feature-area .feature-content .feature-info h6 {
    font-size: 18px;
}

/*====================================
    project css
====================================*/
.project-content h2 {
    font-size: 24px;
}
.project-content h2 a {
    border-bottom: 3px solid;
}
/************************************* mix-fixture end *************************************/

/************************************* service start *************************************/
/*====================================
    service-content css
====================================*/
.service-area .service-content span.service-img {
    width: 60px;
}
.service-area .service-content span.service-img img {
    -webkit-transition: transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
.service-area .service-content:hover span.service-img img {
    transform: translateY(-10px);
}
.service-area .service-content h6 {
    font-size: 18px;
}
/************************************* service end *************************************/

/************************************* service-portfolio start *************************************/
/*====================================
    service-portfolio css
====================================*/
.service-area,
.portfolio-area {
    position: relative;
}
.service-area::before,
.portfolio-area::after {
    content: attr(data-text);
    font-size: 48px;
    position: absolute;
    left: 50%;
    font-family: 'Beauty nigella';
    white-space: nowrap;
    line-height: 1;
}
.service-area::before {    
    color: var(--body-bgcolor);
    bottom: 0;
    transform: translate(-50%, 50%);
}
.portfolio-area::after {
    color: var(--extra-bgcolor);
    top: 0;
    transform: translate(-50%, -50%);
}
@media (min-width: 576px) {
    .service-area::before,
    .portfolio-area::after {
        font-size: 72px;
    }
}
@media (min-width: 768px) {
    .service-area::before,
    .portfolio-area::after {
        font-size: 96px;
    }
}
@media (min-width: 992px) {
    .service-area::before,
    .portfolio-area::after {
        font-size: 136px;
    }
}
@media (min-width: 1200px) {
    .service-area::before,
    .portfolio-area::after {
        font-size: 160px;
    }
}
@media (min-width: 1400px) {
    .service-area::before,
    .portfolio-area::after {
        font-size: 184px;
    }
}
/************************************* service-portfolio end *************************************/

/************************************* portfolio-tab start *************************************/
/*====================================
    portfolio-tab css
====================================*/
.portfolio-area .portfolio-tab ul.nav-tabs {
    margin: -15px -15px 0px;
}
.portfolio-area .portfolio-tab ul.nav-tabs li {
    margin: 15px 0px 0px;
    padding: 0px 7.5px;
}
@media (min-width: 576px) {
    .portfolio-area .portfolio-tab ul.nav-tabs {
        margin: -30px -30px 0px;
    }
    .portfolio-area .portfolio-tab ul.nav-tabs li {
        margin: 30px 0px 0px;
        padding: 0px 15px;
    }
}
@media (min-width: 1200px) {
    .portfolio-area .portfolio-tab ul.nav-tabs {
        margin: -30px -60px 0px;
    }
    .portfolio-area .portfolio-tab ul.nav-tabs li {
        margin: 30px 0px 0px;
        padding: 0px 30px;
    }
}

/*====================================
    portfolio-tab title css
====================================*/
.portfolio-area ul.nav-tabs li a {
    border-bottom: 3px solid transparent;
}
.portfolio-area ul.nav-tabs li a.active {
    color: var(--primary-font-color);
    border-color: var(--primary-font-color);
}
/************************************* product-tab end *************************************/

/************************************* testimonial start *************************************/
/*====================================
    testimonial-content css
====================================*/
.testimonial .testi-slider .testi-content .testi-text span.testi-quote {
    width: 48px;
}
.testimonial .testi-slider .testi-content .testi-author {
    font-size: 18px;
}
/************************************* testimonial end *************************************/