@media screen and (min-width: 768px) {

    /* social-media sec css */
    .social-media-sec .social-media-card:nth-child(6n + 2) {
        margin-top: 30px;
    }

    .social-media-sec .social-media-card:nth-child(6n + 5) {
        margin-top: -40%;
    }

    .social-media-sec .social-media-card:nth-child(6n + 6) {
        margin-top: -15%;
    }

    .social-media-sec .social-media-card:nth-child(6n + 2) .video-wrp {
        padding-top: 60%;
    }

    .social-media-sec .social-media-card:nth-child(6n + 3) .video-wrp,
    .social-media-sec .social-media-card:nth-child(6n + 6) .video-wrp {
        padding-top: 75%;
    }

    .social-media-sec .social-media-card:nth-child(6n + 4) .video-wrp {
        padding-top: 90%;
    }

    .social-media-sec .social-media-card:nth-child(6n + 5) .video-wrp {
        padding-top: 80%;
    }
}

@media screen and (max-width: 1199px) {
    :root {
        --h1: normal 600 40px/1.2 var(--first-font);
        --h2: normal 600 32px/1.2 var(--first-font);
        --h3: normal 600 28px/1.2 var(--first-font);
        --h4: normal 600 24px/1.2 var(--first-font);
        --h5: normal 600 20px/1.2 var(--first-font);
        --h6: normal 600 16px/1.2 var(--first-font);
    }
}

@media screen and (max-width: 991px) {
    :root {
        --h1: normal 600 32px/1.2 var(--first-font);
        --h2: normal 600 28px/1.2 var(--first-font);
        --h3: normal 600 24px/1.2 var(--first-font);
        --h4: normal 600 22px/1.2 var(--first-font);
        --h5: normal 600 18px/1.2 var(--first-font);
    }

    .pt {
        padding-top: 40px;
    }

    .pb {
        padding-bottom: 40px;
    }

    .mt {
        margin-top: 40px;
    }

    .mb {
        margin-bottom: 40px;
    }

    /******** dedicated-sec css ***********/
    .dedicated-slider .dedicated-card:nth-child(even) {
        padding-top: 30px;
        margin-bottom: 0;
    }

    .dedicated-slider .slick-list {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --h1: normal 600 30px/1.2 var(--first-font);
        --h2: normal 600 26px/1.2 var(--first-font);
        --h3: normal 600 22px/1.2 var(--first-font);
        --h4: normal 600 20px/1.2 var(--first-font);
        --common-text: normal 400 14px/1.4 var(--first-font);
    }

    .slick-dots {
        margin-top: 20px;
    }

    /* image preview sec css */
    .image-preview-slider .slick-list {
        padding: 1.5% 15% !important;
    }

    .image-preview-slider .slick-slide .image-preview {
        transform: scale(0.9);
        -webkit-transform: scale(0.9);
        -moz-transform: scale(0.9);
        -ms-transform: scale(0.9);
        -o-transform: scale(0.9);
    }
}

@media screen and (max-width: 575px) {
    :root {
        --h1: normal 600 26px/1.2 var(--first-font);
        --h2: normal 600 24px/1.2 var(--first-font);
    }

    /* image preview sec css */
    .image-preview-slider {
        padding: 0 15px;
    }

    .image-preview-slider .slick-list {
        padding: 1.5% 0 !important;
    }

    .image-preview-slider .slick-slide.slick-center .image-preview,
    .image-preview-slider .slick-slide .image-preview {
        position: relative;
        z-index: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }
}