/*==================================================
CONTENT CREATION HERO
PART 2A
==================================================*/

.sk-cc-hero-section {

    position: relative;

    overflow: hidden;

    padding: 130px 0 100px;

    background: #ffffff;

}

/*==============================
Background Shapes
==============================*/

.sk-cc-hero-section::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    background: rgba(13, 110, 253, .06);

    top: -220px;

    left: -180px;

    filter: blur(45px);

}

.sk-cc-hero-section::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background: rgba(212, 175, 55, .08);

    right: -160px;

    bottom: -180px;

    filter: blur(45px);

}

/*==============================
Hero Content
==============================*/

.sk-cc-hero-content {

    position: relative;

    z-index: 2;

}

.sk-cc-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 12px 22px;

    background: rgba(13, 110, 253, .08);

    border: 1px solid rgba(13, 110, 253, .15);

    border-radius: 60px;

    color: #0d6efd;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 30px;

}

.sk-cc-hero-badge svg {

    width: 18px;

    height: 18px;

}

/*==============================
Heading
==============================*/

.sk-cc-hero-title {

    font-size: 62px;

    line-height: 1.15;

    font-weight: 800;

    color: #081c3a;

    margin-bottom: 28px;

}

.sk-cc-hero-title span {

    color: #0b5ed7;

}

/*==============================
Description
==============================*/

.sk-cc-hero-desc {

    font-size: 18px;

    color: #667085;

    line-height: 1.9;

    max-width: 580px;

    margin-bottom: 40px;

}

/*==============================
Buttons
==============================*/

.sk-cc-hero-buttons {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

    margin-bottom: 50px;

}

.sk-cc-btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    padding: 16px 34px;

    border-radius: 60px;

    background: #0d6efd;

    color: #fff;

    font-weight: 700;

    transition: .35s;

}

.sk-cc-btn-primary:hover {

    background: #0b5ed7;

    color: #fff;

}

.sk-cc-btn-outline {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    padding: 16px 34px;

    border-radius: 60px;

    border: 2px solid rgba(13, 110, 253, .15);

    color: #081c3a;

    font-weight: 700;

    transition: .35s;

}

.sk-cc-btn-outline svg {

    width: 20px;

    height: 20px;

}

.sk-cc-btn-outline:hover {

    background: #081c3a;

    color: #fff;

}

/*==============================
Stats
==============================*/

.sk-cc-hero-stats {

    margin-top: 10px;

}

.sk-cc-stat-box {

    padding: 22px;

    border-radius: 22px;

    background: #fff;

    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);

    text-align: center;

    transition: .35s;

}

.sk-cc-stat-box h3 {

    color: #0d6efd;

    font-size: 32px;

    font-weight: 800;

    margin-bottom: 8px;

}

.sk-cc-stat-box p {

    margin: 0;

    color: #667085;

    font-size: 15px;

}

.sk-cc-stat-box:hover {

    transform: translateY(-8px);

}

/*==============================
Hero Image
==============================*/

.sk-cc-hero-image-wrapper {

    position: relative;

    z-index: 2;

    text-align: center;

}

.sk-cc-main-image {

    width: 100%;

    max-width: 620px;

    border-radius: 35px;

    box-shadow: 0 35px 70px rgba(0, 0, 0, .12);

}

/*==============================
Floating Cards
==============================*/

.sk-cc-floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 18px 22px;

    background: rgba(255, 255, 255, .92);

    backdrop-filter: blur(14px);

    border-radius: 20px;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .12);

    min-width: 230px;

}

.sk-cc-floating-card svg {

    width: 24px;

    height: 24px;

    color: #0d6efd;

}

.sk-cc-floating-card strong {

    display: block;

    color: #081c3a;

    font-size: 15px;

}

.sk-cc-floating-card span {

    display: block;

    font-size: 13px;

    color: #667085;

}

.sk-card-one {

    top: 40px;

    left: -40px;

}

.sk-card-two {

    right: -35px;

    top: 190px;

}

.sk-card-three {

    left: 30px;

    bottom: 20px;

}

/*==============================
Scroll Indicator
==============================*/

.sk-cc-scroll {

    position: absolute;

    left: 50%;

    bottom: 25px;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: #667085;

    font-size: 14px;

    font-weight: 600;

}

.sk-cc-scroll svg {

    width: 22px;

    height: 22px;

    color: #0d6efd;

}








/*==================================================
OUR CONTENT CREATION SERVICES
PART 2A
==================================================*/

.sk-cc-services-section {

    position: relative;

    padding: 30px 0;

    background: #ffffff;

    overflow: hidden;

}

/*==============================
Background Shapes
==============================*/

.sk-cc-services-section::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background: rgba(13, 110, 253, .05);

    top: -180px;

    left: -150px;

    filter: blur(45px);

}

.sk-cc-services-section::after {

    content: "";

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background: rgba(212, 175, 55, .08);

    right: -140px;

    bottom: -140px;

    filter: blur(45px);

}

/*==============================
Heading
==============================*/

.sk-cc-services-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 22px;

    border-radius: 50px;

    background: rgba(13, 110, 253, .08);

    color: #0d6efd;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 18px;

}

.sk-cc-services-tag svg {

    width: 18px;

    height: 18px;

}

.sk-cc-services-title {

    font-size: 52px;

    font-weight: 800;

    color: #081c3a;

    line-height: 1.2;

    margin-bottom: 20px;

}

.sk-cc-services-title span {

    color: #0b5ed7;

}

.sk-cc-services-desc {

    max-width: 760px;

    margin: auto;

    font-size: 18px;

    line-height: 1.9;

    color: #667085;

}

/*==============================
Service Card
==============================*/

.sk-cc-service-card {

    position: relative;

    overflow: hidden;

    border-radius: 28px;

    background: #ffffff;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

    transition: .4s;

    height: 100%;

}

/*==============================
Image
==============================*/

.sk-cc-service-card img {

    width: 100%;

    height: 230px;

    object-fit: cover;

    transition: .6s;

}

/*==============================
Content
==============================*/

.sk-cc-service-content {

    position: relative;

    padding: 35px 28px 30px;

}

/*==============================
Number Badge
==============================*/

.sk-cc-service-number {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #0b5ed7, #b8860b);

    color: #fff;

    font-size: 15px;

    font-weight: 700;

    z-index: 5;

    box-shadow: 0 15px 35px rgba(212, 175, 55, .35);

}

/*==============================
Icon
==============================*/

.sk-cc-service-icon {

    width: 72px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background: rgba(13, 110, 253, .08);

    margin-bottom: 22px;

}

.sk-cc-service-icon svg {

    width: 30px;

    height: 30px;

    color: #0d6efd;

}

/*==============================
Text
==============================*/

.sk-cc-service-content h4 {

    font-size: 24px;

    font-weight: 700;

    color: #081c3a;

    margin-bottom: 16px;

}

.sk-cc-service-content p {

    font-size: 15px;

    line-height: 1.9;

    color: #667085;

    margin-bottom: 25px;

}

/*==============================
Button
==============================*/

.sk-cc-service-content a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: #0d6efd;

    font-weight: 700;

    transition: .35s;

}

.sk-cc-service-content a svg {

    width: 18px;

    height: 18px;

}

.sk-cc-service-content a:hover {

    color: #0b5ed7;

}


/*==================================================
OUR CONTENT CREATION SERVICES
PART 2B
==================================================*/

/*==============================
Card Hover
==============================*/

.sk-cc-service-card {

    border: 1px solid rgba(13, 110, 253, .08);

}

.sk-cc-service-card:hover {

    transform: translateY(-14px);

    box-shadow: 0 35px 80px rgba(13, 110, 253, .16);

}

/*==============================
Gradient Border
==============================*/

.sk-cc-service-card::before {

    content: "";

    position: absolute;

    inset: 0;

    padding: 2px;

    border-radius: 28px;

    background: linear-gradient(135deg,
            rgba(13, 110, 253, .55),
            rgba(212, 175, 55, .55));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: 0;

    transition: .45s;

    pointer-events: none;

}

.sk-cc-service-card:hover::before {

    opacity: 1;

}

/*==============================
Image Hover
==============================*/

.sk-cc-service-card img {

    transition: .7s ease;

}

.sk-cc-service-card:hover img {

    transform: scale(1.08);

}

/*==============================
Image Overlay
==============================*/

.sk-cc-service-card::after {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 230px;

    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0),
            rgba(13, 110, 253, .18));

    opacity: 0;

    transition: .45s;

}

.sk-cc-service-card:hover::after {

    opacity: 1;

}

/*==============================
Icon Animation
==============================*/

.sk-cc-service-icon {

    transition: .4s;

}

.sk-cc-service-card:hover .sk-cc-service-icon {

    background: #0d6efd;

    transform: rotate(-10deg) scale(1.08);

}

.sk-cc-service-card:hover .sk-cc-service-icon svg {

    color: #fff;

}

/*==============================
Number Badge
==============================*/

.sk-cc-service-number {

    transition: .4s;

}

.sk-cc-service-card:hover .sk-cc-service-number {

    transform: rotate(360deg) scale(1.08);

}

/*==============================
Heading Hover
==============================*/

.sk-cc-service-content h4 {

    transition: .35s;

}

.sk-cc-service-card:hover h4 {

    color: #0d6efd;

}

/*==============================
Button
==============================*/

.sk-cc-service-content a {

    position: relative;

}

.sk-cc-service-content a svg {

    transition: .35s;

}

.sk-cc-service-content a:hover svg {

    transform: translateX(8px);

}

/*==============================
Shine Effect
==============================*/

.sk-cc-service-card .sk-cc-service-content {

    overflow: hidden;

}

.sk-cc-service-card .sk-cc-service-content::before {

    content: "";

    position: absolute;

    top: -100%;

    left: -100%;

    width: 120%;

    height: 220%;

    background: linear-gradient(transparent,

            rgba(255, 255, 255, .35),

            transparent);

    transform: rotate(25deg);

    transition: .8s;

}

.sk-cc-service-card:hover .sk-cc-service-content::before {

    left: 140%;

}

/*==============================
Reveal Animation
==============================*/

.sk-cc-service-card {

    opacity: 0;

    transform: translateY(70px);

    transition:

        opacity .8s ease,

        transform .8s ease,

        box-shadow .4s ease;

}

.sk-cc-service-card.sk-cc-show {

    opacity: 1;

    transform: translateY(0);

}

/*==============================
Responsive
==============================*/

@media(max-width:1199px) {

    .sk-cc-services-title {

        font-size: 46px;

    }

}

@media(max-width:991px) {

    .sk-cc-services-section {

        padding: 100px 0;

    }

    .sk-cc-services-title {

        font-size: 40px;

    }

}

@media(max-width:767px) {

    .sk-cc-services-section {

        padding: 80px 0;

    }

    .sk-cc-services-title {

        font-size: 32px;

    }

    .sk-cc-services-desc {

        font-size: 16px;

    }

    .sk-cc-service-card img {

        height: 220px;

    }

    .sk-cc-service-content {

        padding: 28px 22px;

    }

    .sk-cc-service-content h4 {

        font-size: 22px;

    }

}

@media(max-width:575px) {

    .sk-cc-services-title {

        font-size: 28px;

    }

    .sk-cc-services-tag {

        font-size: 13px;

        padding: 8px 18px;

    }

    .sk-cc-service-icon {

        width: 62px;

        height: 62px;

    }

    .sk-cc-service-icon svg {

        width: 26px;

        height: 26px;

    }

    .sk-cc-service-number {

        width: 46px;

        height: 46px;

        font-size: 13px;

    }

    .sk-cc-service-content h4 {

        font-size: 20px;

    }

    .sk-cc-service-content p {

        font-size: 14px;

    }

}









/*==================================================
CONTENT CREATION PROCESS
PART 2A
==================================================*/

.sk-cc-process-section {

    position: relative;

    padding: 30px 0;

    background: #ffffff;

    overflow: hidden;

}

/*==============================
Background Shapes
==============================*/

.sk-cc-process-section::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(13, 110, 253, .05);

    top: -180px;

    left: -150px;

    filter: blur(45px);

}

.sk-cc-process-section::after {

    content: "";

    position: absolute;

    width: 380px;

    height: 380px;

    border-radius: 50%;

    background: rgba(212, 175, 55, .08);

    bottom: -150px;

    right: -120px;

    filter: blur(45px);

}

/*==============================
Heading
==============================*/

.sk-cc-process-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 22px;

    background: rgba(13, 110, 253, .08);

    border-radius: 50px;

    color: #0d6efd;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 20px;

}

.sk-cc-process-tag svg {

    width: 18px;

    height: 18px;

}

.sk-cc-process-title {

    font-size: 52px;

    font-weight: 800;

    color: #081c3a;

    margin-bottom: 20px;

    line-height: 1.2;

}

.sk-cc-process-title span {

    color: #0b5ed7;

}

.sk-cc-process-desc {

    max-width: 760px;

    margin: auto;

    color: #667085;

    font-size: 18px;

    line-height: 1.9;

}

/*==============================
Timeline Wrapper
==============================*/

.sk-cc-process-wrapper {

    position: relative;

    margin-top: 80px;

}

/*==============================
Center Line
==============================*/

.sk-cc-process-line {

    position: absolute;

    top: 70px;

    left: 4%;

    width: 92%;

    height: 4px;

    border-radius: 50px;

    background: linear-gradient(90deg,

            #0d6efd,

            #d4af37);

    z-index: 0;

}

/*==============================
Process Card
==============================*/

.sk-cc-process-card {

    position: relative;

    background: #ffffff;

    border-radius: 26px;

    padding: 35px 22px;

    text-align: center;

    height: 100%;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

    transition: .4s;

    z-index: 2;

}

/*==============================
Step Number
==============================*/

.sk-cc-process-number {

    width: 54px;

    height: 54px;

    margin: 0 auto 22px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg,

            #d4af37,

            #b8860b);

    color: #fff;

    font-size: 16px;

    font-weight: 700;

    box-shadow: 0 15px 35px rgba(212, 175, 55, .35);

}

/*==============================
Icon
==============================*/

.sk-cc-process-icon {

    width: 78px;

    height: 78px;

    margin: 0 auto 25px;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(13, 110, 253, .08);

}

.sk-cc-process-icon svg {

    width: 34px;

    height: 34px;

    color: #0d6efd;

}

/*==============================
Text
==============================*/

.sk-cc-process-card h4 {

    font-size: 22px;

    font-weight: 700;

    color: #081c3a;

    margin-bottom: 15px;

}

.sk-cc-process-card p {

    margin: 0;

    color: #667085;

    font-size: 15px;

    line-height: 1.8;

}












/*==================================================
CONTENT CREATION PORTFOLIO SHOWCASE
PART 2A
==================================================*/


.sk-cc-portfolio-section {

    position: relative;

    padding: 120px 0;

    background: #ffffff;

    overflow: hidden;

}


/*==============================
Background Shapes
==============================*/


.sk-cc-portfolio-section::before {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background: rgba(13, 110, 253, .05);

    top: -180px;

    left: -150px;

    filter: blur(45px);

}


.sk-cc-portfolio-section::after {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    background: rgba(212, 175, 55, .08);

    right: -150px;

    bottom: -160px;

    filter: blur(45px);

}


/*==============================
Heading
==============================*/


.sk-cc-portfolio-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 22px;

    border-radius: 50px;

    background: rgba(13, 110, 253, .08);

    color: #0d6efd;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 20px;

}


.sk-cc-portfolio-tag svg {

    width: 18px;

    height: 18px;

}


.sk-cc-portfolio-title {

    font-size: 52px;

    font-weight: 800;

    line-height: 1.2;

    color: #081c3a;

    margin-bottom: 20px;

}


.sk-cc-portfolio-title span {

    color: #d4af37;

}


.sk-cc-portfolio-desc {

    max-width: 760px;

    margin: auto;

    color: #667085;

    font-size: 18px;

    line-height: 1.9;

}



/*==============================
Filter Buttons
==============================*/


.sk-cc-portfolio-filter {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

    margin: 60px 0 50px;

}


.sk-cc-portfolio-filter button {

    border: none;

    outline: none;

    padding: 13px 30px;

    border-radius: 50px;

    background: #ffffff;

    color: #081c3a;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    border: 1px solid rgba(13, 110, 253, .12);

    transition: .35s;

}


.sk-cc-portfolio-filter button.active,

.sk-cc-portfolio-filter button:hover {

    background: linear-gradient(135deg,

            #0d6efd,

            #2563eb);

    color: #fff;

}



/*==============================
Portfolio Grid
==============================*/


.sk-cc-portfolio-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 28px;

}



/*==============================
Portfolio Item
==============================*/


.sk-cc-portfolio-item {

    position: relative;

    overflow: hidden;

    border-radius: 28px;

    height: 380px;

    background: #fff;

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

    transition: .45s;

}


.sk-cc-portfolio-item:nth-child(2n) {

    height: 450px;

}


.sk-cc-portfolio-item video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}

.sk-cc-portfolio-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}



/*==============================
Overlay Base
==============================*/


.sk-cc-portfolio-overlay {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    padding: 35px;

    color: #fff;

    background: linear-gradient(180deg,

            transparent,

            rgba(8, 28, 58, .9));

}



.sk-cc-portfolio-overlay span {

    display: inline-block;

    font-size: 13px;

    font-weight: 700;

    padding: 7px 16px;

    border-radius: 50px;

    background: #d4af37;

    margin-bottom: 15px;

}


.sk-cc-portfolio-overlay h3 {

    font-size: 25px;

    font-weight: 700;

    margin-bottom: 20px;

}



.sk-cc-portfolio-overlay a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: #fff;

    font-size: 15px;

    font-weight: 700;

}


.sk-cc-portfolio-overlay a svg {

    width: 18px;

    height: 18px;

}






/*==================================================
CONTENT CREATION PORTFOLIO SHOWCASE
PART 2B
==================================================*/


/*==============================
Portfolio Card Hover
==============================*/

.sk-cc-portfolio-item {

    border: 1px solid rgba(13, 110, 253, .08);

}


.sk-cc-portfolio-item:hover {

    transform: translateY(-15px);

    box-shadow: 0 40px 90px rgba(13, 110, 253, .18);

}



/*==============================
Image Zoom
==============================*/


.sk-cc-portfolio-item img {

    transition: .7s ease;

}


.sk-cc-portfolio-item:hover img {

    transform: scale(1.12);

}



/*==============================
Gradient Border Glow
==============================*/


.sk-cc-portfolio-item::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 28px;

    padding: 2px;

    background: linear-gradient(135deg,

            #0d6efd,

            #d4af37);


    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);


    -webkit-mask-composite: xor;

    mask-composite: exclude;


    opacity: 0;

    transition: .45s;

    z-index: 3;

    pointer-events: none;

}


.sk-cc-portfolio-item:hover::before {

    opacity: 1;

}



/*==============================
Overlay Animation
==============================*/


.sk-cc-portfolio-overlay {

    transform: translateY(40px);

    opacity: 0;

    transition: .5s ease;

}


.sk-cc-portfolio-item:hover .sk-cc-portfolio-overlay {

    transform: translateY(0);

    opacity: 1;

}



/*==============================
Overlay Blur
==============================*/


.sk-cc-portfolio-overlay {

    backdrop-filter: blur(5px);

}



/*==============================
View Button
==============================*/


.sk-cc-portfolio-overlay a {

    padding: 12px 24px;

    border-radius: 50px;

    background: rgba(255, 255, 255, .15);

    border: 1px solid rgba(255, 255, 255, .3);

    transition: .35s;

}



.sk-cc-portfolio-overlay a:hover {

    background: #ffffff;

    color: #0d6efd;

}



.sk-cc-portfolio-overlay a svg {

    transition: .35s;

}


.sk-cc-portfolio-overlay a:hover svg {

    transform: translate(4px, -4px);

}



/*==============================
Filter Animation
==============================*/


.sk-cc-portfolio-filter button {

    position: relative;

    overflow: hidden;

}


.sk-cc-portfolio-filter button::before {

    content: "";

    position: absolute;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, .25);

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    transition: .5s;

}


.sk-cc-portfolio-filter button:hover::before {

    width: 250px;

    height: 250px;

}



/*==============================
Shine Effect
==============================*/


.sk-cc-portfolio-item::after {

    content: "";

    position: absolute;

    top: -120%;

    left: -80%;

    width: 60%;

    height: 250%;


    background: linear-gradient(transparent,

            rgba(255, 255, 255, .35),

            transparent);


    transform: rotate(25deg);

    transition: .8s;

}



.sk-cc-portfolio-item:hover::after {

    left: 150%;

}



/*==============================
Reveal Animation Class
==============================*/


.sk-cc-portfolio-item {

    opacity: 0;

    transform: translateY(70px);

    transition:

        opacity .8s ease,

        transform .8s ease,

        box-shadow .4s ease;

}


.sk-cc-portfolio-item.sk-cc-show {

    opacity: 1;

    transform: translateY(0);

}



/*==============================
Responsive
==============================*/


@media(max-width:1199px) {


    .sk-cc-portfolio-title {

        font-size: 46px;

    }


    .sk-cc-portfolio-grid {

        grid-template-columns: repeat(2, 1fr);

    }


}



@media(max-width:767px) {


    .sk-cc-portfolio-section {

        padding: 80px 0;

    }


    .sk-cc-portfolio-title {

        font-size: 32px;

    }


    .sk-cc-portfolio-desc {

        font-size: 16px;

    }


    .sk-cc-portfolio-grid {

        grid-template-columns: 1fr;

    }


    .sk-cc-portfolio-item,

    .sk-cc-portfolio-item:nth-child(2n) {

        height: 350px;

    }


    .sk-cc-portfolio-overlay {

        padding: 25px;

    }


    .sk-cc-portfolio-overlay h3 {

        font-size: 22px;

    }


}



@media(max-width:575px) {


    .sk-cc-portfolio-title {

        font-size: 28px;

    }


    .sk-cc-portfolio-filter button {

        width: 100%;

        max-width: 220px;

    }


    .sk-cc-portfolio-overlay span {

        font-size: 12px;

    }


}