/* ===== ClickToShip Page ===== */

.cts-section-wrapper {
    font-family: "Red Hat Display", sans-serif;
    color: #353535;
}

.cts-section-wrapper .sf-hidden { display: none !important; }

/* ClickToShip Banner */
.cts-section-wrapper .clicktoship-section {
    padding: 100px 49px 0;
    margin: 0 auto 120px;
    width: 100%;
    position: relative;
    z-index: 4;
}

.cts-section-wrapper .clicktoship-banner {
    padding: 80px 60px;
    border-radius: 8px;
}

.cts-section-wrapper .clicktoship-heading {
    color: var(--ct-red);
    font-size: 46px;
    line-height: 61px;
    font-weight: bold;
    max-width: 600px;
    margin-bottom: 20px;
}

.cts-section-wrapper .clicktoship-subheading {
    color: #FFFFFF;
    font-weight: 600;
}

.cts-section-wrapper .clicktoship-subheading.for-desktop {
    font-size: 30px;
    line-height: 38px;
    max-width: 539px;
}

.cts-section-wrapper .clicktoship-subheading.for-mobile {
    display: none;
}

/* Download Section */
.cts-section-wrapper .download-section {
    padding: 89px 50px 0;
    margin: 0 auto 164px;
}

.cts-section-wrapper .download-heading {
    font-size: 40px;
    line-height: 53px;
    font-weight: bold;
    color: #353535;
    margin-bottom: 24px;
}

.cts-section-wrapper .download-heading.mobile-only { display: none; }

.cts-section-wrapper .download-banner {
    display: block;
    width: 100%;
}

.cts-section-wrapper .download-banner.for-desktop {
    min-width: 588px;
    height: auto;
}

.cts-section-wrapper .download-banner.for-mobile { display: none; }

.cts-section-wrapper .download-content {
    margin-left: 70px;
}

.cts-section-wrapper .download-para {
    font-size: 16px;
    line-height: 29px;
    color: #000000;
    margin-bottom: 48px;
}

.cts-section-wrapper .download-para span { font-weight: bold; }
.cts-section-wrapper .download-para.application strong { font-weight: bold; }

.cts-section-wrapper .download-card {
    border: 2px solid #F1F1F1;
    border-radius: 8px;
    padding: 33px 32px 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    max-width: 570px;
}

.cts-section-wrapper .download-card-title {
    font-size: 18px;
    line-height: 23px;
    color: var(--ct-red);
    font-weight: bold;
}

.cts-section-wrapper .download-card-subtitle {
    font-size: 18px;
    line-height: 30px;
    color: #353535;
    font-weight: 600;
}

.cts-section-wrapper .btn.download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.3px;
    font-weight: 600;
    box-shadow: none !important;
}

.cts-section-wrapper .download-btn span {
    font-size: 16px;
    line-height: 24px;
    color: #1B1F27;
    margin-right: 18px;
    display: none;
}

.cts-section-wrapper .download-divider {
    border-color: #F1F1F1;
    width: 100%;
    display: none;
    margin-top: 24px;
    margin-bottom: 24px;
}

/* Smart Shipping Section */
.cts-section-wrapper .smart-section {
    padding: 0 115px;
    margin-top: 88px;
    margin-bottom: 168px;
}

.cts-section-wrapper .smart-heading {
    font-size: 32px;
    line-height: 43px;
    font-weight: bold;
    color: #353535;
    margin-bottom: 116px;
    text-align: center;
}

.cts-section-wrapper .smart-row {
    margin-left: -83.75px;
    margin-right: -83.75px;
}

.cts-section-wrapper .smart-row > * {
    padding-left: 83.75px;
    padding-right: 83.75px;
}

.cts-section-wrapper .smart-icon {
    height: 84px;
    margin-bottom: 28px;
    margin-left: auto;
    margin-right: auto;
}

.cts-section-wrapper .smart-icon img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.cts-section-wrapper .smart-icon .flight { height: 76px; width: 81px; }
.cts-section-wrapper .smart-icon .doc { height: 84px; width: 66px; }
.cts-section-wrapper .smart-icon .truck { height: 76px; width: 85px; }

.cts-section-wrapper .smart-text {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    color: #1B1F27;
    max-width: 292px;
    margin: 0 auto;
}

/* What's New Section */
.cts-section-wrapper .whats-new-section {
    padding: 88px 50px 91px;
    background-color: #F9F6F6;
    margin-bottom: 88px;
}

.cts-section-wrapper .whats-new-heading {
    font-size: 32px;
    line-height: 43px;
    font-weight: bold;
    color: #353535;
    margin-bottom: 32px;
    text-align: center;
}

.cts-section-wrapper .whats-new-para {
    font-size: 18px;
    line-height: 25px;
    color: #000000;
    margin-bottom: 105px;
    text-align: center;
    max-width: 573px;
    margin-left: auto;
    margin-right: auto;
}

.cts-section-wrapper .whats-new-row {
    align-items: flex-start;
    justify-content: center;
}

.cts-section-wrapper .whats-new-banner img {
    max-width: 864px;
    width: 100%;
}

.cts-section-wrapper .whats-new-accordion {
    margin-left: 110px;
    list-style: none;
    max-width: 600px;
}

.cts-section-wrapper .whats-new-card {
    border-bottom: 1px solid #7F7F7F;
}

.cts-section-wrapper .whats-new-card-header {
    padding: 20px 0;
}

.cts-section-wrapper .whats-new-title {
    font-size: 18px;
    line-height: 23px;
    font-weight: bold;
    color: #353535;
    display: flex;
    align-items: center;
}

.cts-section-wrapper .whats-new-icon {
    margin-right: 28px;
    width: 38px;
    display: flex;
    justify-content: center;
}

.cts-section-wrapper .whats-new-btn {
    font-size: 18px !important;
    line-height: 23px !important;
    font-weight: bold !important;
    padding: 0;
    color: #353535;
    background: none;
    border: none;
    cursor: pointer;
    min-width: 20px;
}

.cts-section-wrapper .whats-new-card-body {
    font-size: 18px;
    line-height: 24px;
    color: #7F7F7F;
    margin-bottom: 15px;
}

/* Trending / Blog */
.cts-section-wrapper .container.trending-container {
    background: #fff;
    width: 100%;
    max-width: 100%;
    padding: 48px 70px 100px 70px;
}

.cts-section-wrapper .trending-header-title {
    text-align: center;
}

.cts-section-wrapper .trending-header-title label {
    font-size: 32px;
    color: #353535;
    font-weight: 700;
    padding-bottom: 51px;
    line-height: 43px;
}

.cts-section-wrapper .whats-post-img {
    border-radius: 10px;
    height: 250px;
    width: 100%;
    display: block;
    object-fit: cover;
}

.cts-section-wrapper .trending-text-title-4 {
    font-size: 18px;
    font-weight: 700;
    color: #353535;
    padding-top: 10px;
    line-height: 25px;
}

.cts-section-wrapper .trending-comment-h3 {
    font-size: 18px;
    color: #808284;
    padding: 0;
    margin: 0;
}

.cts-section-wrapper .trending-comment-p-4 {
    font-size: 14px;
    margin: 0;
}

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

@media (max-width: 1366px) {
    .cts-section-wrapper .download-section { padding: 34px 50px 0; margin: 0 auto 100px; }
    .cts-section-wrapper .whats-new-accordion { margin-left: -19px; max-width: 660px; }
    .cts-section-wrapper .download-content { margin-left: 0; }
    .cts-section-wrapper .download-banner { min-width: 500px; }
    .cts-section-wrapper .smart-row { margin-left: -40px; margin-right: -40px; }
    .cts-section-wrapper .smart-row > * { padding-left: 40px; padding-right: 40px; }
    .cts-section-wrapper .whats-new-para { margin-bottom: 50px; }
    .cts-section-wrapper .whats-new-heading { margin-bottom: 25px; }
    .cts-section-wrapper .smart-heading { margin-bottom: 80px; }
    .cts-section-wrapper .clicktoship-section { margin-bottom: 34px; }
    .cts-section-wrapper .whats-new-banner img { max-width: 545px; margin-left: 13px; }
}

@media (max-width: 1199px) {
    .cts-section-wrapper .download-banner { min-width: 0; }
    .cts-section-wrapper .whats-new-section { padding-bottom: 100px; }
    .cts-section-wrapper .smart-row { margin-left: -30px; margin-right: -30px; }
    .cts-section-wrapper .smart-row > * { padding-left: 30px; padding-right: 30px; }
    .cts-section-wrapper .clicktoship-section { padding: 60px 30px 0; }
    .cts-section-wrapper .download-section { padding: 30px 30px 0; }
    .cts-section-wrapper .smart-section { padding: 0 30px; }
    .cts-section-wrapper .whats-new-section { padding: 60px 30px 70px; }
}

@media (max-width: 991px) {
    .cts-section-wrapper .download-btn span,
    .cts-section-wrapper .download-divider { display: block; }
    .cts-section-wrapper .download-card-subtitle { margin-bottom: 0; }
    .cts-section-wrapper .download-card { padding: 25px; flex-direction: column; text-align: center; }
    .cts-section-wrapper .download-banner.for-desktop { min-width: 0; }
    .cts-section-wrapper .download-heading.mobile-only { display: block; text-align: center; }
    .cts-section-wrapper .download-heading.desktop-only { display: none; }
    .cts-section-wrapper .whats-new-banner img { max-width: none; margin-bottom: 30px; }
    .cts-section-wrapper .whats-new-accordion { margin: 0 auto; max-width: none; }
    .cts-section-wrapper .download-card-title,
    .cts-section-wrapper .download-para,
    .cts-section-wrapper .whats-new-card-body,
    .cts-section-wrapper .whats-new-para,
    .cts-section-wrapper .download-card-subtitle { font-size: 16px; line-height: 23px; }
    .cts-section-wrapper .whats-new-card-body { color: #1B1F27; }
    .cts-section-wrapper .download-para span { font-weight: bold; }
    .cts-section-wrapper .whats-new-para { margin-bottom: 48px; text-align: left; }
    .cts-section-wrapper .download-section,
    .cts-section-wrapper .smart-section,
    .cts-section-wrapper .clicktoship-section,
    .cts-section-wrapper .whats-new-section { padding-left: 20px; padding-right: 20px; }
    .cts-section-wrapper .download-section { padding-top: 30px; padding-bottom: 10px; }
    .cts-section-wrapper .whats-new-accordion { margin-left: 33px; }
    .cts-section-wrapper .whats-new-title,
    .cts-section-wrapper .whats-new-btn { font-size: 20px; line-height: 24px; }
    .cts-section-wrapper .smart-row { margin-left: -20px; margin-right: -20px; }
    .cts-section-wrapper .smart-row > * { padding-left: 20px; padding-right: 20px; }
    .cts-section-wrapper .download-card-title { margin-bottom: 11px; }
    .cts-section-wrapper .whats-new-section { padding-bottom: 79px; margin-bottom: 76px; }
}

@media (max-width: 767px) {
    .cts-section-wrapper .clicktoship-heading { font-size: 40px; line-height: 48px; }
    .cts-section-wrapper .clicktoship-subheading.for-desktop { display: none; }
    .cts-section-wrapper .clicktoship-subheading.for-mobile {
        font-size: 16px;
        line-height: 24px;
        max-width: 232px;
        font-weight: bold;
        display: block;
    }
    .cts-section-wrapper .download-banner { height: auto; }
    .cts-section-wrapper .download-banner.for-desktop { display: none; }
    .cts-section-wrapper .download-banner.for-mobile { display: block; }
    .cts-section-wrapper .whats-new-icon { display: none; }
    .cts-section-wrapper .download-card { padding: 24px; }
    .cts-section-wrapper .whats-new-banner img { margin-bottom: 40px; }
    .cts-section-wrapper .smart-section { margin-bottom: -20px; }
    .cts-section-wrapper .smart-row > * { margin-bottom: 101px; }
    .cts-section-wrapper .smart-text { max-width: 293px; margin-left: auto; margin-right: auto; }
    .cts-section-wrapper .whats-new-para { margin-bottom: 61px; }
    .cts-section-wrapper .download-section { margin-bottom: 109px; }
    .cts-section-wrapper .clicktoship-section { margin-bottom: 76px; }
    .cts-section-wrapper .whats-new-accordion { margin-left: 0; }
    .cts-section-wrapper .smart-row { margin-left: -16px; margin-right: -16px; }
    .cts-section-wrapper .smart-row > * { padding-left: 16px; padding-right: 16px; }
    .cts-section-wrapper .download-heading { margin-bottom: 28px; }
    .cts-section-wrapper .download-para:not(.download-para.application) { padding-left: 16px; padding-right: 16px; }
    .cts-section-wrapper .download-para.application { max-width: 328px; margin-left: auto; margin-right: auto; text-align: center; margin-top: 10px; }
    .cts-section-wrapper .smart-icon { margin-bottom: 26px; height: auto; }
    .cts-section-wrapper .container.trending-container { padding: 10px 5px; }
    .cts-section-wrapper .trending-comment-h3 { font-size: 14px; }
    .cts-section-wrapper .trending-comment-p-4 { font-size: 11px; }
    .cts-section-wrapper .container.trending-container .col-md-6 { margin-bottom: 70px; }
}

@media (max-width: 575px) {
    .cts-section-wrapper .clicktoship-heading { font-size: 32px; line-height: 40px; }
    .cts-section-wrapper .trending-header-title label { font-size: 24px; }
    .cts-section-wrapper .trending-text-title-4 { font-size: 16px; }
}