@media screen and (max-width: 1919px) {
    header .outer-container {padding: 30px 0;}
    header .logo img {width: 200px;}
    body.menu-opened .nav-menu {top: 10px;}
    .nav-menu ul li a {font-size: 46px;padding-bottom: 20px;}
    .inner-banner.about h1 {font-size: 54px}
    .inner-banner.about p {font-size: 28px;margin-bottom: 35px;}
    .inner-banner.contact p {font-size: 30px;}
    .inner-banner h1 {font-size: 82px;}
    .details-box .con-box {width: 45%;}
    .hub-details .common-box p {font-size: 26px;}
    .offices-addresses .common-box span {font-size: 86px;}
    .offices-addresses .common-box{padding: 40px;}
    .resp-tabs-list li p {font-size: 18px;}
    .hero-section .con-box {width: 47%;}
    .hero-section h1 p {font-size: 92px;}
    .hero-section .mythos-overview {width: 80%;}
    .custom-container {width: 92%;}


    /* New design */
    .banner-section h1 {font-size: 72px}
    .banner-section img.line-img {width: 40%;}
    .works-section li .logo-box p {font-size: 36px;}

    .works-section li .logo-box .h-icon , .works-section li .container .con-box .comp-logo {width: 125px;}
    .brands-logo .inner-container {gap: 60px;}

}


@media screen and (max-width: 1599px) {
    .common-section {padding: 80px 0;}
    .nav-menu ul {padding-top: 50px;gap: 30px;}
    .nav-menu ul li a {font-size: 40px;}
    .inner-banner.about h1 {font-size: 48px;}
    .inner-banner h1 {font-size: 74px;}
    .inner-banner.contact p {font-size: 26px;}
    .hub-details {gap: 70px;}
    .hub-details h3 {font-size: 28px;}
    .offices-addresses .common-box span {font-size: 72px;}
    .hub-details .common-box p {font-size: 22px;}
    .hub-details h3 {font-size: 26px;padding-bottom: 12px;margin-bottom: 12px;}
    .work-grid .work-box .work-content h3 {font-size: 46px;}
    .hero-section .img-box video {height: 305px;}
    .hero-section .lower-box .img-box video {height: 145px;}
    header .outer-container {padding: 25px 0;}

    /* New design */
    .works-section li .logo-box .h-icon, .works-section li .container .con-box .comp-logo {width: 105px;}
    .works-section .container h2 {font-size: 38px;margin-bottom: 15px;}
    .works-section li.inactive .logo-box p {font-size: 28px;}
    .works-section li .logo-box p {font-size: 32px;line-height: normal;}
    .banner-section h1 {font-size: 62px;width: 75%;}
    .works-section .container p {font-size: 22px;}
    h2.title {font-size: 38px;margin-bottom: 35px;}
    .areas-section .area {width: 33%;}
    .cta-section h3 {font-size: 32px;width: 62%;}
    .main-footer .inner-container h3 {font-size: 32px;margin: 25px 0;}
    .main-footer .connect a, .main-footer .connect p {font-size: 22px;}


    .details-box .con-box {width: 52%;}
    .brands-logo .inner-container {gap: 50px;}
    .brands-logo .logo-box img {width: 100%;}

}


@media screen and (max-width: 1439px) {
    .inner-banner.about p {font-size: 26px;margin-bottom: 30px;}
    .inner-banner.about h1 {font-size: 46px;}
    h2.title {font-size: 44px;}
    .inner-banner h1 {font-size: 70px;}
    .hero-section .img-box video {height: 295px;}
    .hero-section .lower-box .img-box video {height: 135px;}
    .hero-section h1 p {font-size: 86px;}
    .hero-section .mythos-overview p {font-size: 22px;margin-bottom: 35px;}

    /* New design */
    .banner-section h1 {font-size: 56px;width: 71%;}
    .works-section li .logo-box .h-icon, .works-section li .container .con-box .comp-logo {width: 95px;}
    .works-section li .logo-box p {font-size: 30px}

}


@media screen and (max-width: 1365px) {
    .inner-banner.about h1 {font-size: 42px;}
    .main-footer .inner-container h3 {font-size: 32px;}
    .inner-banner h1 {width: 90%;}
    .work .custom-container p {font-size: 24px;margin-bottom: 35px;}
    .hero-section h1 p {font-size: 80px;}
    .hero-section .img-box video {height: 275px;}
    .hero-section .lower-box .img-box video {height: 125px;}
    .hero-section .mythos-overview p {font-size: 20px;}
    h2.title {font-size: 40px;}
    .contact-section form .form-check-label {font-size: 18px;}
    .swiper-slide {padding: 30px 12px;}
    
    /* New design */
    .banner-section h1 {font-size: 60px;width: 80%;}
    .brands-logo.common-section {padding: 50px 0;}
    .cta-section img.line-img {width: 30%;}
    .main-footer .inner-container h3 {font-size: 30px;}
    .details-box .con-box {width: 57%;}

    .areas-section .area p {width: 63%;}
    .brands-logo .inner-container {gap: 40px;}

}


@media screen and (max-width: 1279px) {
    .inner-banner h1 {font-size: 62px;width: auto;}
    .inner-banner.contact p {font-size: 22px;}
    .inner-banner.contact {padding-bottom: 60px;}
    .hub-details .common-box p {font-size: 20px;}
    .hub-details h3 {font-size: 22px;}
    .hub-details {gap: 40px;}
    h2.title {font-size: 36px;}
    .contact-page h2.title {margin-bottom: 35px;}
    .offices-addresses .common-box span {font-size: 56px;}
    .details-box .con-box {width: 68%;} 
    p {font-size: 18px;}
    .contact-section form .form-check-label {font-size: 18px;}
    .contact-section .inner-container {gap: 30px;}
    .contact-section form .form-control {font-size: 18px;}
    .work-grid .work-box .work-label {font-size: 20px;}
    .team-section .img-box.uneven {border-radius: 90px;}
    .hero-section h1 p {font-size: 66px;}
    .hero-section .img-box video {height: 210px;}
    .hero-section .lower-box .img-box video {height: 100px;}
    .hero-section .outer-container, .hero-section .lower-box {gap: 35px;}
    .hero-section .mythos-overview {width: 95%;}
    .hero-section .mythos-overview p {font-size: 18px;}
    .contact-section form .form-check {width: 100%;}


    /* New design */
    .cta-section .custom-container {flex-direction: column;gap: 30px;}
    .cta-section h3 {font-size: 32px;width: 95%;text-align: center;}

    .banner-section h1 {font-size: 50px;width: 85%;}
    .banner-section img.line-img {width: 45%;}
    .works-section li .logo-box p {font-size: 26px;}
    .works-section li.inactive .logo-box p {font-size: 24px;}

    .main-footer .cities {gap: 12px;}
    .brands-logo .inner-container {gap: 35px;}
   
}


@media screen and (max-width: 1023px) {
    h2.title {font-size: 32px;}
    .inner-container {width: 91%;}
    .inner-banner.about h1 {font-size: 36px;}
    .inner-banner.about p {font-size: 24px;margin-bottom: 25px;}
    header .logo img {width: 150px;}
    header .outer-container {padding: 20px 0;}
    .hamburger-icon {width: 17%;}
    .nav-menu ul {width: 70%;padding-top: 0;}
    .nav-menu ul li a {font-size: 32px;}
    .nav-menu ul li a svg {width: 35px;}
    body.menu-opened .nav-menu {top: 6px;left: 10px;right: 10px;bottom: 10px;border-radius: 20px;}
    .contact-section .inner-container {flex-direction: column;gap: 0;}
    .contact-section .left-box , .contact-section .right-box , .details-box .con-box {width: 100%;}
    .details-box {margin-top: 80px;}
    .inner-banner h1 {font-size: 52px;}
    .hub-details .common-box p {font-size: 18px;}
    .hub-details h3 {font-size: 18px;}
    .work-grid {gap: 15px;}
    .interests .right-box {width: 73%;}
    .interests h2.title {width: 50%;}
    .interests .custom-container {margin-bottom: 25px;}
    .contact-section form .form-check {width: 48%;}

    /* New design */
    .areas-section .area {width: 47%;}
    .cta-section h3 {font-size: 28px;}
    .common-section {padding: 60px 0;}
    .works-section {height: auto;}
    .works-section ul.workbox {justify-content: start;flex-direction: column;width: 100%;}
    .works-section ul.workbox.twenty li {width: 100%;padding: 10px 0;}
    .works-section li .logo-box .h-icon {position: relative;bottom: unset;left: unset;transform: unset;}
    .works-section li .logo-box p {writing-mode: unset;transform: none;}
    .works-section li .logo-box {align-items: center;justify-content: space-between;width: 100%;padding: 0 25px;bottom: auto;}
    .works-section li .logo-box p br {display: none;}
    .works-section li .logo-box .h-icon {top: auto;}
    .works-section ul.workbox li {width: 100%;}
    .works-section li .logo-box .h-icon, .works-section li .container .con-box .comp-logo {width: 75px;}
    .works-section li .logo-box p {font-size: 24px;}
    .works-section .container {transform: translateY(-100%);padding: 40px;}
    .main-footer .inner-container h3 {font-size: 26px;}
    .main-footer .connect a, .main-footer .connect p {font-size: 16px;}
    .banner-section h1 {font-size: 42px;width: auto;text-align: center;}
    .works-section .container h2 {font-size: 32px;}
    .works-section ul.workbox .con-box ul li::before {height: 8px;width: 8px;top: 11px;}
     .works-section ul.workbox .con-box ul li {margin-bottom: 5px;}
    .works-section ul.workbox .con-box ul li p {font-size: 18px;}
    .works-section li .logo-box {left: auto; top: 50%;transform: translateY(-50%);}
    .hub-details {padding-top: 0;}
    .contact-section form label {margin-bottom: 2px;}
    .areas-section .area img {width: 50px;}
    .main-footer .cities {gap: 10px;}
    .brands-logo .inner-container {gap: 30px;}

     .areas-section .area:nth-child(8), .areas-section .area:nth-child(7) {border-bottom: 1px solid #cbbeb1;}
}


@media screen and (max-width: 767px) {
    .common-section {padding: 60px 0;}
    h2.title {font-size: 34px;}
    .inner-banner.about h1 {font-size: 30px;}
    .main-footer {height: auto;}
    .main-footer .common-btn , .main-footer .logo {margin-bottom: 30px;}
    .main-footer .inner-container h3 {font-size: 28px;}
    .main-footer .connect a, .main-footer .connect p {font-size: 20px;}
    .main-footer p {font-size: 14px;}
    .common-btn span {padding: 12px 24px;font-size: 14px;}
    .common-btn {padding-right: 12px;}
    .common-btn svg {width: 15px;vertical-align: middle;}
    .common-btn::before {width: 78%;}
    .nav-menu ul li a {font-size: 16px;padding-bottom: 10px;}
    .nav-menu ul {gap: 15px;padding-top: 30px;}
    .nav-menu ul li a svg {width: 24px;}    
    body.menu-opened .nav-menu {padding: 0 40px;}
    .nav-menu .social-links a img {width: 32px;}
    .story-section h2 {margin-bottom: 35px;}
    .contact-section form .form-group {margin-bottom: 30px;}
    .inner-banner h1 {font-size: 40px;}
    .inner-banner.contact p {font-size: 18px;}
    .hub-details {flex-direction: column;}
    .offices-addresses .common-box {padding: 30px;}
    .contact-section .right-box .common-btn::before {width: 78%;}
    .work-grid {grid-template-columns: 1fr;margin:0 15px;}
    .single-work.img-radius img {padding: 0 15px;}
    .hero-section h1 p {font-size: 54px;}
    .hero-section .img-box video {height: 260px;}

    /* new design */
    .banner-section h1 {font-size: 36px;}
    .works-section li .logo-box .h-icon, .works-section li .container .con-box .comp-logo {width: 65px;}
    .works-section .container {padding: 35px;}
    .works-section .container h2 {font-size: 30px; width: auto;}
    .works-section .container p {font-size: 20px;}
    .main-footer .inner-container h3 {font-size: 24px;margin:15px 0;}
    .main-footer .connect a, .main-footer .connect p {font-size: 18px;}
    .details-box p {font-size: 17px;}
    
    .main-footer .cities {gap: 8px;flex-wrap: wrap;}
    .main-footer .cities li:nth-child(even) {display: none;}
    .main-footer .cities li {width: 28%;}
    .brands-logo .logo-box {width: 16%;}
    .areas-section .area {width: 77%;padding-bottom: 24px;margin-bottom: 15px;border-bottom: none;}
    .areas-section .area:nth-child(3n) {border-bottom: 1px solid #cbbeb1;margin-bottom: 15px;}
    .areas-section .area:nth-child(8), .areas-section .area:nth-child(7), .areas-section .area:last-of-type {border-bottom: none;}
    .logo-wrapper {width: 65px;height: 65px;}
    .brand-text {font-size: 18px;}
    .brands-logo .inner-container {gap: 25px;}
    
}



@media screen and (max-width: 639px) {
    .inner-banner.about h1 {font-size: 26px;}
    .inner-banner.about p {font-size: 20px;margin-bottom: 15px;}
    header .logo img {width: 130px;}
    header .start-btn {font-size: 14px;}
    body.menu-opened .nav-menu {padding: 0 25px;}
    .nav-menu .social-links {gap: 15px;}   
    h2.title {font-size: 26px;}
    .story-section .story-box:not(:last-of-type) {margin-bottom: 35px;}
    .team-section .team-item h3 {font-size: 20px;}
    .team-section .team-box {gap: 40px;}
    .main-footer .inner-container h3 {font-size: 22px;}
    .main-footer .common-btn {margin-top: 25px;}
    .main-footer .logo img {width: 180px;}
    .main-footer .connect a, .main-footer .connect p {font-size: 18px;}
    .main-footer p {font-size: 14px;}
    .offices-addresses .common-box {width: 100%;border-right: none;}
    .details-box {margin-top: 40px;}
    .offices-addresses .common-box span {font-size: 48px;}
    .inner-banner h1 {font-size: 32px;}
    .contact-section form .form-control {font-size: 16px;}
    .contact-section form .form-check-label {font-size: 17px;}
    .contact-section .checkbox-div {justify-content: start;margin-top: 10px;}
    .contact-section form .form-check {width: 48%;}
    .common-section {padding: 45px 0;}
    body.menu-opened .nav-menu {flex-direction: column;justify-content: center;}
    .nav-menu .social-links {flex-direction: row;order: 1;}
    .nav-menu ul {width: 95%;}
    .hamburger-icon {width: 25%;}
    header .start-btn {font-size: 12px;}
    body.menu-opened .nav-menu {top: 5px;left: 5px;right: 5px;bottom: 5px;border-radius: 10px;}
    header.show .outer-container {padding: 12px 0;}
    .contact-section form .form-check {width: 100%;}

    /* New Design */
    .banner-section h1 {font-size: 32px;}
    .works-section li .logo-box p {font-size: 20px;}
    .works-section li .logo-box .h-icon, .works-section li .container .con-box .comp-logo {width: 55px;}
    .works-section li .logo-box {padding: 0 15px;}
    .works-section .container {padding: 20px 15px;}
    .works-section ul.workbox.twenty li {padding: 20px 0;}
    .works-section .container h2 {font-size: 26px;}
    .works-section .container p {font-size: 20px;}
    .works-section li.inactive .logo-box p {font-size: 18px;}
    .works-section ul.workbox .con-box ul {margin-top: 15px}
    .areas-section .area { width: 100%;gap: 15px;}
    .areas-section .area img {width: 40px;}
    .areas-section .area p {width: auto;}
    .cta-section h3 {font-size: 22px;}
    .brands-logo.common-section {padding: 25px 0;}
    .cta-section img.line-img {width: 50%;}

    h2.title {margin-bottom: 15px;}
    .contact-section form .form-check-input {width: 16px;height: 16px;}
    .inner-banner.contact {padding-top: 70px;}
    .contact-section p {margin-bottom: 25px;}
    .banner-section img.line-img {width: 70%;}
    .details-box p {font-size: 18px;}
    .main-footer .cities li {width: 100%;}

    .areas-section .area {justify-content: start;padding: 15px;margin-bottom: 15px;padding-top: 0;}
    .logo-wrapper {width: 50px;height: 50px;}
    .brand-text {font-size: 16px;}
    .brands-logo .logo-box {width: 20%;}

}

@media screen and (max-width: 479px) {
    .inner-banner.about h1 {font-size: 22px;}
    header .start-btn {font-size: 12px;}
    header .logo img {width: 110px;}
    .hamburger-icon {width: auto;}
    .inner-banner.about p {font-size: 18px;}
    h2.title {font-size: 22px;}
    .inner-banner h1 {font-size: 28px;}
    .about-section .con-box p, .destination .con-box p {font-size: 16px;}
    header.show .outer-container {padding: 12px 0;}
    header .logo img {width: 145px;}
    header .start-btn {display: none;}
    p {font-size: 16px;}
    .main-footer .inner-container {padding-top: 40px;}

    /* New design */
    .main-footer .inner-container h3 {font-size: 18px;}
    .main-footer .connect a, .main-footer .connect p {font-size: 16px;}
    .cta-section h3 {font-size: 20px;}   
    .brands-logo .inner-container {gap: 20px;}
}