@media screen and (max-width: 1600px) {
    .login-wrapper .login-form {
        padding-left: 180px;
        padding-right: 180px;
    }
}
@media screen and (max-width: 1440px) {
    .login-wrapper .login-visual:before,
    .login-wrapper .login-form:after {
        top: 0;
        height: 100%;
    }
    .login-wrapper .login-form {
        padding-left: 134px;
        padding-right: 134px;
    }
}
@media screen and (max-width: 1380px) {
    .header-section .handwriting-wrapper {
        left: 100px !important;
    }
    .work-process-section .features-wrapper {
        padding: 0 25px;
    }
    .work-process-section .tab-content .tab-pane h2 {
        top: 25px;
    }
    .work-process-section .features-wrapper .feature-card h4 {
        font-size: 18px;
        padding: 20px 25px;
    }
    .work-process-section .features-wrapper .card-left {
        left: unset;
    }
    .work-process-section .features-wrapper .feature-card {width: 320px;}
    .work-process-section .features-wrapper svg {
        left: 202px;
    }
    .work-process-section .features-wrapper .card-left {
        top: 200px;
    }
    .work-process-section .features-wrapper .card-top-right {
        right: 38px;
        top: 30px;
    }
    .work-process-section .features-wrapper .card-bottom-right {
        right: 200px;
        top: 335px;
    }
    .work-process-section .features-wrapper .th-block {
        left: 480px;
        top: 50px;
    }
    .work-process-section .features-wrapper svg {
        width: 500px;
    }
	.work-process-section .features-wrapper .line-animation {
        top: 232px;
        left: 202px;
    }
    .custom-accordion {
        height: 600px;
    }
    .platform-section .sales-systems-img {
        position: absolute;
        width: 64% !important;
        margin-top: -40px;
        right: -150px;
    }
    .people-communication .handwriting-wrapper {right: 100px !important;}
    .sales-section .ui-box {
        padding: 30px 30px;
    }
    .sales-section .sales-system-img {
        left: 190px;
    }
    .traditional-crm .slide p {
        margin-bottom: 30px !important;
    }
    .people-communication .people-communication-img {
        width: 63% !important;
        transform: translateX(200px);
    }
    .ai-that-thinks-section .watermark-text {
        font-size: 84px !important;
    }
    .traditional-crm-img {
        height: 620px;
    }
    .site-footer .footer-col li a,
    .site-footer .brand-desc,
    .site-footer .contact p {
        font-size: 14px !important;
    }
    .site-footer .footer-container {
        gap: 32px !important;
    }
}
@media screen and (max-width: 1200px) {
    .work-process-section .features-wrapper svg {display: none;}
    .work-process-section .features-wrapper .feature-card {
        position: relative !important;
        left: unset !important;
        top: unset !important;
        right: unset !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }
    .work-process-section .features-wrapper .feature-card.card-left h4, 
    .work-process-section .features-wrapper .feature-card.card-bottom-right h4 {
        position: relative;
    }
    .work-process-section .features-wrapper .feature-columns {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px !important;
    }
    .work-process-section .features-wrapper .th-block {
        position: relative;
        left: 0;
        top: 0;
        z-index: 2;
        margin: auto;
        display: block;
    }    
    .work-process-section .features-wrapper {
        height: auto !important;
        padding: 30px !important;
    }
    .work-process-section .tab-content .tab-pane h2 {
        position: relative !important;
        top: unset !important;
    }
    .work-process-section .nav-pills .nav-item .nav-link {
        padding-left: 75px !important;
        padding-right: 75px !important;
    }
	.work-process-section .features-wrapper .line-animation {
		display:none;
	}
    .people-communication .p9 .info-card {
        left: unset !important;
        right: 0 !important;
    }
}
@media screen and (max-width: 1024px) {
    .navbar .navbar-brand {
        width: 130px;
    }
    .connected-crm img {
        width: 75% !important;
    }
    .about-section .about-section-content {
        padding: 30px;
    }
    .about-section .about-section-content h2 br {
        display: none;
    }
    .about-section img {
        height: 100%;
    }
    .about-section .access-btn {
        margin-bottom: 20px;
    }
    .header-section .handwriting-wrapper {left: 0 !important;}
    .work-process-section .features-wrapper .feature-columns {
        grid-template-columns: repeat(2, 1fr);
    }
    .work-process-section .features-wrapper .feature-card.card-left h4, 
    .work-process-section .features-wrapper .feature-card.card-bottom-right h4 {
        position: absolute;
    }
    .people-communication {padding-top: 0 !important;}
    .people-communication .people-communication-img {
        width: 100% !important;
        transform: translateX(0) !important;
        top: -100px;
    }
    .traditional-crm .owl-dot.active span {width: 140px;}
    .traditional-crm-img {
        height: 675px;
    }
    .site-footer .footer-container {
        grid-template-columns: 2fr repeat(3, 1fr);
    }
    .site-footer .footer-container:before,
    .site-footer .footer-container:after {
        height: 100% !important;
    }
    .login-wrapper .login-form {padding: 64px 50px;}
    .work-process-section .tab-content .tab-pane {
        background-size: cover;
    }
    .custom-accordion {
        height: auto !important;
    }
    .platform-section .sales-systems-img {
        margin-top: -80px;
    }
    .contact-section {
        margin-bottom: 150px;
    }
    .contact-section .form,
    .contact-section .contact-wrapper {
        padding: 30px !important;
    }
    .contact-section .contact-wrapper i {
        bottom: 35px;
    }
}

@media screen and (max-width: 991px) {
    .container, .container-md, .container-sm {
        max-width: 100% !important;
        padding: 0 20px !important;
    }
    .navbar {
        position: fixed;
        width: 100%;
        background: linear-gradient(45deg, rgba(236, 231, 226, 0.9), rgba(212, 211, 213, 0.9)) !important;
        left: 0;
        border-radius: 0;
        margin: 0;
        z-index: 100;
    }
    .navbar-toggler {
        border: none !important;
        padding: 0 !important;
    }
    .navbar ul li a {
        padding: 6px 0 !important;
    }
    .navbar .dropdown-menu {
        position: relative;
        top: 20px !important;
        width: 100% !important;
        margin-bottom: 25px;
    }
    .navbar .btn-outline-dark.slide-btn {margin: 0 !important;}
    .navbar li.nav-item.dropdown:nth-child(3) .dropdown-menu {
        height: auto;
        padding: 10px 0 !important;
        margin: 0 !important;
        top: unset !important;
    }
    .header-section {padding-top: 150px !important;}
    .header-section .handwriting-wrapper {top: 80px;}
    .pricing-plans .pricing-wrapper {
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        padding: 0;
    }
    .pricing-plans .pricing-wrapper .pricing-card.active {
        background: transparent !important;
        color: #111 !important;
        border-radius: 22px !important;
        padding: 36px !important;
        text-align: left !important;
        transition: all 0.35s ease !important;
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(0) !important;
    }
    .pricing-plans .pricing-wrapper .pricing-card:hover {
        transform: translateY(0) !important;
    }
    .pricing-plans .pricing-wrapper .pricing-card.active .btn {
        width: 100%;
        padding: 12px;
        border-radius: 8px;
        border: none;
        background: #222;
        font-size: 15px !important;
        color: #fff;
        cursor: pointer;
        transition: 0.3s;
    }    
    .pricing-plans .pricing-wrapper .pricing-card,
    .pricing-plans .pricing-wrapper .pricing-card.active,
    .pricing-plans .pricing-wrapper .pricing-card:hover {
        padding: 25px !important;
    }
    .pricing-plans .pricing-wrapper .features li {
        padding-left: 20px !important;
    }
    .quote-section .word-scroll span {
        font-size: 45px;
    }    
    .connected-crm img, .people-communication img {
        width: 100% !important;
    }
    .connected-crm .title, .connected-crm .title span {
        line-height: 1.5 !important;
    }
    .sales-work-section .access-btn {
        margin-bottom: 20px;
    }   
    .sales-work-section .description {
        margin-bottom: 20px !important;
    } 
    .sales-section .ui-box {
        position: relative !important;
        padding: 25px !important;
    }
    .site-footer .footer-container {
        grid-template-columns: repeat(3, 1fr);
    }
    .traditional-crm .slider-wrapper:after {display: none;}    
    .work-process-section .nav-pills .nav-item .nav-link {
        padding-left: 36px !important; 
        padding-right: 36px !important;
    }
    .quote-section .author {width: 100%;}
    .marketing-section ul li {
        font-size: 15px !important;
    }
    .marketing-section img {
        margin-top: -50px;
    }
    .site-footer .footer-container {
        grid-template-columns: 2fr repeat(3, 1fr);
    }
    .site-footer .footer-container:before,
    .site-footer .footer-container:after {
        height: 110% !important;
    }
    .sales-section:before,
    .sales-section:after {
        height: 105% !important;
    }
    .people-communication {padding-top: 100px !important;}
    .people-communication .p1 {width: 50px !important;}
    .people-communication .p2 {width: 80px !important;}
    .people-communication .p3 {
        width: 80px !important;
        height: 75px !important;
    }
    .people-communication .p4 {width: 60px;}
    .people-communication .p5 {width: 110px; left: 300px;}
    .people-communication .p6 {width: 110px; left: 400px;}
    .people-communication .p7 {
        left: 470px;
        width: 80px;
    }
    .people-communication .p8 {
        left: 570px;
        width: 80px;
    }
    .people-communication .p9 {
        width: 45px !important;
    }
    .people-communication .p8 .info-card, 
    .people-communication .p9 .info-card {
        left: unset !important;
        right: 0 !important;
    }
    .people-communication .handwriting-wrapper {
        right: 20px;
        top: 60px;
    }
    .login-wrapper .login-form {
        padding: 40px 32px;
    }
    .ai-that-thinks-section .watermark-text,
    .ai-that-thinks-section .watermark-text.large-text {
        font-size: 60px !important;
    }
    .ai-that-thinks-section .ai-card {
        padding: 50px 40px;
    }
    .platform-section .sales-systems-img {
        position: relative;
        width: 100% !important;
        margin-top: 0;
        right: unset;
    }
    .sales-section .sales-system-img {left: 0;}
    .contact-section .form,
    .contact-section .contact-wrapper {
        padding: 25px !important;
    }
    .contact-section .contact-wrapper i {
        bottom: 30px;
    }
    .people-communication.contact-page .handwriting-wrapper {bottom: 0 !important;}
    .about-section .about-section-content h2 br {display: none;}
    .about-section .about-section-content {padding: 25px;}
    .about-section .access-btn {
        margin: 0;
    }
    .marketing-section h2, .marketing-section h2 span {
        width: 100%;
    }
    .three-pillars-section .sales-info ul li {
        margin: 20px 0;
    }
    .how-teams-use-threadcrm .box {
        padding: 50px;
    }
}

@media screen and (max-width: 767px) {
    .header-section .handwriting-wrapper {
        top: 100px;
    }
    .sales-section .sales-system-img {
        left: 156px !important;
    }
    .quote-section .word-scroll span {
        font-size: 42px;
        display: inline-block;
    }
    .work-process-section .features-wrapper .feature-columns {
        grid-template-columns: repeat(1, 1fr);
    }    
    .people-communication .p6 .info-card {
        left: unset !important;
        right: 0 !important;
    }    
    .people-communication .p7 .info-card {
        left: unset !important;
        right: 0 !important;
    }
    .pricing-plans .pricing-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
    .ai-that-thinks-section .ai-card {
        padding: 30px;
    }
    .ai-that-thinks-section .italic-text:after {
        width: 45%;
    }
    .about-cta {
        padding: 40px 25px;
    }
}

@media screen and (max-width: 550px) {
    .container, .container-md, .container-sm {
        padding: 0 15px !important;
    }
    .navbar .dropdown-menu {
        top: 0 !important;
        height: 300px;
        overflow-y: auto;
        margin: 0;
        padding: 20px 0 !important;
    }    
    .navbar .dropdown-menu li a {
        padding: 5px 15px !important;
    }
    .navbar .row>* {
        padding-bottom: 0 !important;
    }
    .slide-btn {
        margin-bottom: 20px;
    }
    .btn-outline-dark.slide-btn {
        margin: 0;
    }
    .header-section .handwriting-wrapper {display: none !important;}
    .traditional-crm, .sales-work-section {
        margin: 60px 0;
    } 
    .traditional-crm .owl-dot span {width: 50px !important;}
    .traditional-crm .traditional-crm-content {
        padding: 30px;
    }
    .sales-section {
        padding: 0 !important;
    }
    .sales-section .container {padding: 0 !important;}
    .pricing-plans .title, .pricing-plans .title span,
    .platform-section .title, .platform-section .title span,
    .connected-crm .title, .connected-crm .title span {
        font-size: 45px !important;
        line-height: 1.3 !important;
    }
    .sales-section .title, .sales-section .title span {
        font-size: 45px !important;
        line-height: 1 !important;
    }
    .sales-section .sales-system-img {
        width: 100% !important;
        left: 0 !important;
    }
    .people-communication .people-communication-img {top: 0 !important;}
    .people-communication .title span {
        display: block;
        background-size: cover !important;
    }
    .people-communication .title {line-height: 1.2 !important;}
    .pricing-plans .pricing-wrapper {margin-top: 30px !important;}
    .pricing-plans .pricing-wrapper .pricing-card,
    .pricing-plans .pricing-wrapper .pricing-card.active,
    .pricing-plans .pricing-wrapper .pricing-card:hover {
        padding: 20px !important;
    }
    .platform-section, .people-communication {padding-top: 0 !important;}
    .platform-section .title span:after {top: 30px !important;}
    .pricing-plans {padding-top: 80px !important;}
    .connected-crm {
        padding-bottom: 15px !important;
    }
    .site-footer .footer-container {grid-template-columns: repeat(1, 1fr);}
    .people-communication {padding-bottom: 100px !important;}
    .platform-section .accordion-button,
    .platform-section .accordion-body {padding-left: 10px !important;}
    .quote-section, .platform-section, .sales-section {border: none !important;}
    .sales-card {padding: 50px 20px !important;}
    .site-footer .footer-logo {margin-bottom: 20px;}    
    .site-footer .footer-col h4 {margin-bottom: 20px;}
    .site-footer .contact {margin-bottom: 10px !important;}
    .sales-section:before,
    .sales-section:after {
        z-index: 0;
    }
    .sales-section .sales-card:before,
    .sales-section .sales-card:after {
        z-index: 0;
    }
    .site-footer .footer-container:before, 
    .site-footer .footer-container:after {height: 100% !important;}
    .work-process-section {
        padding-top: 80px;
    }
    .work-process-section .nav-pills .nav-item {border: none !important;}
    .work-process-section .nav-pills .nav-item .nav-link {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .work-process-section .features-wrapper {
        padding: 20px !important;
    }
    .work-process-section .tab-content:before,
    .work-process-section .tab-content:after {
        top: unset !important;
        bottom: 0 !important;
    }
    .work-process-section .features-wrapper .feature-card.card-left h4 {
        position: relative !important;
    }
    .quote-section .quote-mark.left {
        left: 0;
        top: -212px;
    }
    .quote-section .quote-mark.right {
        top: 45px;
        right: 0;
    }
    .people-communication .p1 {left: 0;}
    .people-communication .p2 {
        top: 145px;
        left: 40px;
        width: 70px !important;
        height: 70px !important;
    }
    .people-communication .p3 {
        top: 90px;
        left: 60px;
        width: 70px !important;
        height: 70px !important;        
    }
    .people-communication .p4 {
        left: 150px;
    }
    .people-communication .p4 .info-card {
        right: -120px !important;
        left: unset !important;
    }
    .people-communication .p5 {
        width: 80px;
        height: 80px;
        left: 150px;
        top: 40px;
    }    
    .people-communication .p5 .info-card {
        left: -150px !important;
    }
    .people-communication .p6 {
        width: 80px;
        height: 80px;
        top: 90px;
        left: 210px;
    }
    .people-communication .p7 {
        left: 250px;
        width: 70px;
        height: 70px;
        top: 0;
    }
    .people-communication .p8 {
        left: 310px;
        width: 70px;
        height: 70px;
        top: 170px;
    }    
    .people-communication .p9 {
        right: 0;
    }
    .custom-accordion {padding-left: 56px;}
    .custom-accordion .accordion-item::before,
    .custom-accordion .accordion-item::after {
        content: "";
        position: absolute;
        left: -56px;
    }
    .custom-accordion::before {
        left: 24px;
    }
    .site-footer .footer-container {
        padding-left: 20px;
        padding-right: 20px;
    }
    .login-wrapper {padding: 16px;}
    .login-wrapper .login-form {padding: 25px;}
    .ai-that-thinks-section .ai-card {
        padding: 25px;
    }
    .ai-that-thinks-section .custom-nav {
        top: 30px;
        right: 10px;
    }
    .ai-that-thinks-section {
        padding-top: 70px !important; 
    }
    .ai-that-thinks-section .italic-text:after {display: none;}
    .ai-that-thinks-section .ai-card:before,
    .ai-that-thinks-section .ai-card:after {
        height: 110%;
    }
    .people-communication .handwriting-wrapper {
        display: none;
    }
    .contact-section .contact-wrapper i {
        position: relative;
        bottom: 0;
    }
    .about-card {
        padding: 20px;
        display: block;
    }
    .about-card img {
        margin-bottom: 15px;
    }
    .about-section .access-btn {
        margin-bottom: 20px;
    }
    .marketing-section img {
        margin-top: -30px;
    }
    .data-section {
        padding-top: 0 !important;
    }
    .data-section ul li {
        display: flex;
        align-items: start;
    }
    .data-section ul li img {
        margin: 3px 10px 3px 5px !important;
    }
    .how-teams-use-threadcrm .box {
        padding: 25px;
    }
    .threadcrm-approach ul {
        margin-top: 30px;
    }
}

@media screen and (max-width: 480px) {
    .traditional-crm-img {
        height: auto !important;
    }
    .ai-that-thinks-section .watermark-text,
    .ai-that-thinks-section .watermark-text.large-text {
        font-size: 48px !important;
    }
    .work-process-section .nav-pills .nav-item .nav-link {
        padding-left: 36px !important;
        padding-right: 36px !important;
    }
}

@media screen and (max-width: 370px) {
    .pricing-plans .title, .pricing-plans .title span,
    .platform-section .title, .platform-section .title span,
    .connected-crm .title, .connected-crm .title span,
    .sales-section .title, .sales-section .title span {font-size: 38px !important;}
    .people-communication .title span, .how-teams-use-threadcrm .box .title span {font-size: 50px !important;}
    .quote-section .word-scroll span {font-size: 40px;}
    .contact-section .form, .contact-section .contact-wrapper {padding: 20px !important;}
}