@media screen and (min-width: 1920px) {
    .banner-section {
        height: 75vh;
    }
}

@media screen and (max-width: 1599px) {
    h1 {
        font-size: 4rem;
    }
    h2.feature-back-text {
        font-size: 120px !important;
    }
}

@media screen and (max-width: 1399px) {
    .container {
        padding: 0 30px !important;
    }
    h2.feature-back-text {
        font-size: 100px !important;
    }


    .box-content {
        padding: 80px 50px 0;
    }

    .creativity-section {
        padding-top: 30px !important;
    }

    .gsap-annimation-text .center {
        font-size: 35px;
    }
    .creation-left-side-heading h5 {
        padding-right: 160px;
    }
    .creation-right-side-heading h2 {
        font-size: 35px;
        line-height: normal !important;
    }

    section.join-us-about {
        padding-top: 0px;
    }
    section.join-us-about h1 {
        font-size: 52px;
    }
    h1 {
        font-size: 66px;
    }

    .page-id-103 .join-us-about {
        padding-top: 50px !important;
    }
}

@media screen and (max-width: 1199px) {
    h1 {
        font-size: 50px;
    }
    h6 {
        font-size: 30px;
    }
    h2.feature-back-text {
        font-size: 90px !important;
    }

    .box-content h2 {
        font-size: 50px;
    }
    .box-content {
        gap: 10px;
    }
    .reveal-heading .word {
        line-height: normal !important;
    }
    .creation-right-side-heading h2 {
        font-size: 30px;
        line-height: 40px;
    }
    .creation-brandc-design-wraper h4 {
        font-size: 25px;
        font-weight: 700;
    }

    .creativity-section h2 {
        max-width: 230px;
    }

    .creativity-section h2 span {
        line-height: 0.5 !important;
        font-size: 25px;
    }
    .creation-left-side-heading h5 {
        padding-right: 70px;
    }
    .gsap-annimation-text .center {
        font-size: 25px;
    }
    .gsap-annimation-text .scroll div {
        height: 50px;
    }
    .footer-col p {
        font-size: 20px;
        line-height: normal;
        margin-bottom: 30px;
    }
    .footer-col ul li a {
        font-size: 16px;
    }
    .footer-col ul li {
        font-size: 16px !important;
        line-height: normal;
    }
    .careers-data a {
        font-size: 16px !important;
    }
    .cta {
        padding: 15px 30px;
    }
    .box-content h2 {
        font-size: 40px;
        max-width: 190px;
    }
    .featured-section h2 {
        font-size: 40px;
    }
    .gsap-annimation-text .left,
    .right {
        font-size: 19px;
    }

    .page.page-id-103 section.creativity-section {
        padding-bottom: 0px;
    }
    .page.page-id-103 .creation-left-side-heading.about-page-creation {
        padding-right: 0px;
    }
    .page.page-id-103 .making-comparison {
        padding-bottom: 40px;
    }
    .about-image-slider .slick-next {
        right: 13%;
    }
    .about-image-slider .slick-prev {
        left: 13%;
    }
    .page.page-id-103 .first-slide-comman h4 {
        font-size: 32px;
        margin: 0px;
    }
    section.join-us-about h1 {
        font-size: 35px;
    }
    .row.join-three-heading-wraper h3 {
        font-size: 32px;
        font-weight: 600;
    }
}

@media screen and (max-width: 991px) {
    nav.navbar.navbar-expand-lg a.cta {
        margin-left: 0;
    }
    header.white-header .banner-head.hdr-contact a img {
        filter: brightness(0) invert(1);
    }
    header.white-header a.nav-link {
        color: #000 !important;
    }
    header.white-header .banner-head.hdr-contact a {
        background: #000;
    }
    header.white-header button.navbar-toggler span {
        background: #000 !important;
    }
    header.white-header .logo img {
        filter: unset;
    }
    .container {
        padding: 0 15px !important;
    }
    .creativity-section {
        padding-top: 0 !important;
    }
    .blog-page .toggler-icon {
        background-color: #fff;
    }
    .blog-page header {
        background-color: #000;
    }
    .banner-section {
        height: auto;
    }
    .agency-section h2 {
        font-size: 29px;
    }
    header {
        background-color: #fffcf6;
    }
    .gsap-annimation-text .center {
        font-size: 21px;
    }
    .gsap-annimation-text .scroll div {
        height: 34px;
    }
    .gsap-annimation-text .gsap-animation {
        gap: 20px;
    }
    .gsap-annimation-text .left,
    .right {
        font-size: 17px;
    }
    footer .col-md-2 {
        padding: 0px;
    }
    .footer-col p {
        font-size: 15px;
    }
    nav.navbar.navbar-expand-md a.cta {
        float: left;
        margin-left: 0px !important;
        margin-top: 10px;
    }
    button.navbar-toggler:focus {
        box-shadow: none !important;
    }
    .navbar-toggler {
        border: none;
        background: transparent !important;
    }

    .toggler-icon {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        background-color: #000;
        transition: all 0.3s ease-in-out;
    }

    .navbar-toggler.collapsed .top-bar {
        transform: rotate(0) translate(0, 0);
    }
    .navbar-toggler.collapsed .middle-bar {
        opacity: 1;
    }
    .navbar-toggler.collapsed .bottom-bar {
        transform: rotate(0) translate(0, 0);
    }

    .navbar-toggler[aria-expanded="true"] .top-bar {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .navbar-toggler[aria-expanded="true"] .middle-bar {
        opacity: 0;
    }
    .navbar-toggler[aria-expanded="true"] .bottom-bar {
        transform: rotate(-45deg) translate(6px, -6px);
    }
    button.navbar-toggler {
        padding: 0;
    }

    span.toggler-icon.middle-bar {
        width: 80%;
        margin-right: 0;
    }

    .menu-header-menu-container {
        padding-top: 20px;
    }

    .banner-head.hdr-contact a {
        display: block;
    }

    ul#menu-header-menu a.nav-link:hover:after {
        width: 70px;
    }
    .banner-head.hdr-contact {
        display: block;
        padding-bottom: 80px;
    }
    .box-content {
        padding: 50px 30px 0;
    }
    .drag-slider .slick-track {
        gap: 10px;
    }
    .postion-header {
        position: relative;
    }
    a.view-btn {
        padding: 20px;
    }
    .creation-left-side-heading {
        padding-left: 0;
    }
    .p_100 {
        padding: 50px 0;
    }

    .gsap-annimation-text .center {
        height: 200px;
    }
    .row.join-three-heading-wraper h3 {
        font-size: 30px;
    }
}

@media screen and (max-width: 767px) {
    section.drag-slider-about {
        margin-top: 0px !important;
        padding: 50px 0px !important;
    }
    .about-image-slider .slick-prev{
        left: 0px;
    }
    .footer-col ul li a{
        margin-bottom: 15px;
    }
    .about-image-slider .slick-next{
        right: 0px;
    }
    .drag-slider .slick-list.draggable {
    padding-right: 15%;
}
    .about-progress {
    bottom: -53px;
}
    h1 {
        font-size: 42px;
    }
    h2.feature-back-text {
        font-size: 70pxmportant;
    }
    .drag-slider-about .slick-list.draggable {
        padding-right: 12%;
        margin: 0;
    }

    .drag-slider-about .slick-track {
        gap: 20px;
    }

    .footer-col.careers-data ul {
        display: flex !important;
        margin-top: 0px !important;
    }
    .creativity-section h2 {
        font-size: 22px;
    }
    section.contact-form-wraper {
        padding-bottom: 50px;
    }
    .footer-col h4 {
        font-size: 16px;
        margin-bottom: 20px;
    }
    .banner-head a {
        float: left;
        margin-top: 10px;
    }
    .creativity-section h2 {
        line-height: 20px;
        max-width: 100%;
    }
    .control-box {
        margin-bottom: 0;
    }
    .project-button {
        position: static;
    }
    .box-wrapper {
        position: static;
        top: 0;
        width: 100%;
        height: auto;
        margin-bottom: 0;
    }
    h2.feature-back-text {
        font-size: 60px !important;
        width: 150px !important;
    }
    .project-details {
        height: auto;
        padding-bottom: 30px;
    }
    .p_130 {
        padding: 100px 0;
    }
    section.Creation-brands {
        padding: 50px 0;
    }
    .featured-box {
        margin: 0px 10px;
    }

    .creativity-section h2 {
        line-height: 1.2;
        max-width: 100%;
    }

    .creativity-section h2 br {
        display: none;
    }
    .col-md-6.form-header-form-sec {
        padding-right: 12px;
    }
    section.contact-form-wraper .form-header p {
        color: #000;
        font-size: 20px;
        padding-bottom: 20px;
        font-weight: 500;
    }
    .contact-image {
        margin-top: 0px;
    }
    .gsap-animation {
        padding: 0 15px;
    }
    .drag-slider .slick-list.draggable {
        overflow: visible;
        margin: 0 -13px;
        padding-bottom: 0px;
    }
    .careers-data ul {
        margin-top: 30px;
        display: block !important;
    }
    .footer-col ul li {
        padding-bottom: 15px;
    }
    .footer-button ul {
        /*    flex-direction: column;*/
        gap: 10px;
    }

    .footer-button ul a.cta {
        width: 100%;
        text-align: center;
    }
    .gsap-animation {
        padding: 0 15px !important;
    }
    .gsap-annimation-text .left,
    .right {
        font-size: 14px;
    }
    .gsap-animation .left {
        display: none;
    }
    .gsap-annimation-text .section-wrapper {
        padding: 50px 0;
    }
    .page.page-id-103 section.agency-section {
        padding-bottom: 20px;
        padding-top: 50px;
    }
    .post-type-archive-portfolio section.agency-section .agency-txt h3 {
        padding-bottom: 20px;
    }
    .blog-details {
        padding: 0px;
    }
    .blog-wrapper-main h3 {
        margin-bottom: 0;
    }
    .blog-content {
        justify-content: start;
        gap: 10px;
        height: auto;
    }
    .blog-content h3 {
        font-size: 30px;
    }
    .blog-image img {
        width: 100%;
        object-fit: cover;
        margin-bottom: 20px;
    }
    .blog-btn a.cta {
        padding: 15px 24px;
    }
    .contact-form-wraper .row {
        flex-direction: column-reverse;
    }
    .row.mb-3.top-inputs-name-phone {
        flex-direction: column;
    }
    .form-header {
        padding-top: 30px;
    }
    ul#menu-header-menu a.nav-link:hover:after {
        width: 50px;
    }
    .footer-col ul i {
    font-size: 20px;
    }
    .footer-col h6 {
    max-width: 660px;
    color: #252422;
    font-size: 26px;
    font-weight: 900;
    }
}

@media screen and (max-width: 575px) {
    body {
        font-size: 16px;
    }

    .creativity-section h2 {
        line-height: 1.1;
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 1.6rem;
        letter-spacing: 0px;
    }

    .page.page-id-103 .creativity-section h2 {
        max-width: 100% !important;
    }
    h1 {
        font-size: 2rem;
    }
    section.banner-section {
        padding-bottom: 70px;
        padding-top: 100px !important;
    }
     .gsap-annimation-text .left, .right {
        font-size: 13px;
        width: 550px;
    }
    .gsap-annimation-text .center {
        font-size: 14px;
        line-height: 0;
    }
    .gsap-annimation-text .center {
        width: 620px;
    }
    .gsap-annimation-text .center {
        height: 130px;
    }
    footer .col-md-2 {
        padding: 0px 14px;
        width: 50%;
    }

    footer .col-md-2 {
        padding: 0px 14px;
    }
    .footer-col ul {
        gap: 0px 15px;
    }
    .footer-col.nd-col .footer-col.careers-data ul {
        margin-top: 0;
    }
    footer .col-md-2:last-child {
        padding-left: 12px;
    }

    section.contact-form-wraper {
        padding-bottom: 50px;
    }
    .creativity-section h2 span {
        line-height: 0.5 !important;
        font-size: 22px;
    }
    .p_100 {
        padding: 40px 0;
    }
    .box-image img {
        height: auto;
    }
    .agency-txt p {
        font-size: 18px;
        line-height: 1.4;
    }
    .p_130 {
        padding: 50px 0;
    }
    .agency-section .footer-button {
        margin-top: 16px;
    }
    .creation-left-side-heading h5 {
        padding-right: 0px;
        font-size: 18px;
    }
    .creation-right-side-heading h2 {
        font-size: 22px;
    }
    .py-5 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .box-content {
        padding: 20px 15px 0;
    }
    .box-content h2 {
        font-size: 26px;
        margin-bottom: 10px;
        width: 100%;
        max-width: 100%;
    }

    a.view-btn {
        padding: 12px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .arrow-img img {
        padding: 12px;
        width: 80px;
    }

    .creation-brandc-design-wraper {
        padding-top: 10px;
    }
    section.Creation-brands {
        padding: 50px 0 0;
    }
    .first-slide-comman h4 {
        font-size: 28px;
        margin: 0 10px;
    }

    .featured-section h2 {
        font-size: 30px;
    }
    .featured-section {
        padding: 50px 0;
    }
    h6 {
        font-size: 23px;
    }

    .footer-col p {
        margin-bottom: 10px;
        margin-top: 20px;
    }
    .footer-col ul li:nth-child(5) {
        width: 100%;
        padding: 0;
        margin-top: -12px;
    }
    section.contact-form-wraper .form-header p {
        font-size: 18px;
        line-height: 1.3;
        padding-bottom: 0px;
    }
    .page.page-id-103 section.agency-section {
        padding-bottom: 20px;
        padding-top: 50px;
    }
    .page.page-id-103 .making-comparison {
        padding-bottom: 20px;
    }
    .page.page-id-103 .making-comparison h2.reveal-heading {
        font-size: 22px;
    }

    section.join-us-about h1 {
        font-size: 30px;
    }
    .join-header.text-center p {
        max-width: 100% !important;
        font-size: 19px;
        padding-bottom: 19px;
        padding-top: 10px;
    }
    .row.join-three-heading-wraper h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }
    section.join-us-about div * {
        text-align: left;
    }
    .join-three-heading-wraper {
        margin-bottom: 23px !important;
    }
    section.join-us-about {
        padding-bottom: 50px;
    }
    section.drag-slider-about {
        margin-top: 0px !important;
        padding: 50px 0px !important;
    }
    .about-image-slider .slick-prev {
        left: 0;
        width: 50px;
        height: 28px;
    }
    .about-image-slider .slick-next {
        right: 0;
        width: 50px;
        height: 28px;
    }
    .box-content p {
    margin-bottom: 10px;
    }
    .about-image-slider i {
        font-size: 14px;
    }
    .footer-button {
        margin-bottom: 30px;
    }
    .creation-brandc-design-wraper h4 {
        font-size: 22px;
    }
    .marquee {
        margin-top: 30px;
    }
    .cta {
        font-size: 0.8rem;
        padding: 12px 20px !important;
    }
    .gsap-annimation-text .scroll div {
    height: 0;
    margin-top: 30px;
}
}