*       { margin: 0; padding: 0; box-sizing: border-box;}
html    { overflow-x: hidden;}
body    { font-family: 'Poppins', sans-serif; text-transform: capitalize; overflow-x: hidden; word-break: break-word; scroll-behavior: smooth;}

:root {
    --primary-color: #F26E21;
    --secondary-color: #FFFFFF;
    --header-bg: #292929;
    --font-poppins: 'Poppins', sans-serif;
    --font-inter: 'Inter', sans-serif;
    --font-lexend: 'Lexend', sans-serif;
    --font-noto-sans-gujarati: 'Noto Sans Gujarati', sans-serif;
}

/* global-styling */
img             { width: 100%; object-fit: cover;}
ul, li, a       { padding: 0; list-style: none; text-decoration: none; color: inherit;}
a:hover         { text-decoration: none; color: inherit;}
main            { padding-top: 62px;}

/* Typography */
h1                              { font-size: 93px; line-height: 100%; font-weight: 400; padding: 0; margin: 0;}
.h1-lg                          { font-size: 67px; line-height: 70px; font-weight: 700; padding: 0; margin: 0;}
.h1-sm                          { font-size: 64px; line-height: 104% !important; font-weight: 700; padding: 0; margin: 0;}
h2                              { font-size: 43px; line-height: 69px; font-weight: 600; padding: 0; margin: 0;}
.h2-lg                          { font-size: 48px; line-height: 58px; font-weight: 700; padding: 0; margin: 0;}
.h2-sm                          { font-size: 40px; line-height: 104% !important; font-weight: 600; padding: 0; margin: 0;}
h3                              { font-size: 34px; line-height: 40px; font-weight: 600; padding: 0; margin: 0;}
.h3-lg                          { font-size: 36px; line-height: 53px; font-weight: 500; padding: 0; margin: 0;}
.h3-sm                          { font-size: 32px; line-height: 40px; font-weight: 400; padding: 0; margin: 0;}
h4                              { font-size: 28px; line-height: 34px; font-weight: 700; padding: 0; margin: 0;}
h5                              { font-size: 24px; line-height: 28px; font-weight: 600; padding: 0; margin: 0;}
h6                              { font-size: 18px; line-height: 28px; font-weight: 400; padding: 0; margin: 0;}
p                               { font-size: 16px; line-height: 24px; font-weight: 500; padding: 0; margin: 0;}
.p-sm                           { font-size: 14px; line-height: 16px; font-weight: 400; padding: 0; margin: 0;}

.inter                          { font-family: var(--font-inter);}
.poppins                        { font-family: var(--font-poppins);}
.lexend                         { font-family: var(--font-lexend);}

.font-400                       { font-weight: 400;}
.font-500                       { font-weight: 500;}
.font-600                       { font-weight: 600;}
.font-700                       { font-weight: 700;}
.font-800                       { font-weight: 800;}

.line-height-16                 { line-height: 16px;}
.line-height-22                 { line-height: 22px;}
.line-height-24                 { line-height: 24px;}
.line-height-26                 { line-height: 26px;}
.line-height-28                 { line-height: 28px;}
.line-height-30                 { line-height: 30px;}

/* utility classes */
.common-padding                 { padding: 90px 0 0;}
.common-bottom-padding          { padding-bottom: 80px;}
.btn                            { padding: 10px 32px; font-size: 16px; line-height: 26px; font-weight: 600; border-radius: 42px; transition: 0.5s all ease; border: 1px solid transparent; text-transform: capitalize; background-color: var(--primary-color); color: var(--secondary-color); box-shadow: 0px 29px 89px rgba(242, 110, 33, 0.07), 0px 5.8px 14.4625px rgba(242, 110, 33, 0.035); text-align: center;}
.btn:hover,.btn:active,.btn:focus { background-color: var(--secondary-color);border-color: var(--primary-color); color: var(--primary-color);}
.btn:focus                      { box-shadow: none;}
[data-title]::before            { content: attr(data-title); position: absolute; width: 100%; height: 10%; top: 10%; left: 0;-webkit-text-stroke: 1px var(--primary-color); color: transparent; font-size: 240px; font-weight: 600; opacity: 0.1; white-space: nowrap; z-index: 1;}
.text-transform-none, .text-transform-none a { text-transform: none !important;}

/* header */
header                      { padding: 30px 0; position: fixed; width: 100%; z-index: 10; transition-duration: 0.5s;}
header .btn                 { position: relative; border-radius: 144px; box-shadow: 0px 22px 248px rgba(242, 110, 33, 0.27), 0px 14.2593px 145.241px rgba(242, 110, 33, 0.205), 0px 8.47407px 78.9926px rgba(242, 110, 33, 0.164), 0px 4.4px 40.3px rgba(242, 110, 33, 0.135), 0px 1.79259px 20.2074px rgba(242, 110, 33, 0.106), 0px 0.407407px 9.75926px rgba(242, 110, 33, 0.065); padding: 10px 32px;}
.header-btn-link            { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; height: 100%; cursor: pointer; z-index: 2;}
.site-logo-container        { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 91.66%; margin: auto;}
.grow                       { background-color: #000000; border-bottom: 1px solid var(--header-bg); padding: 10px 0; transition-duration: 0.5s;}
.site-logo                  { width: 140px;}

/* footer */
footer { background-color: #C46208; padding: 50px 0 25px !important;}
.footer-copyright { color: var(--secondary-color); text-align: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
/* End of footer */

/* Contact Us section */
.contact-us-section { padding-bottom: 90px;}
.contact-us-section * { font-family: var(--font-poppins); text-transform: capitalize;}
.contact-us-details { position: relative; background: linear-gradient(90.46deg, #F26E21 53.76%, #FF883F 135.04%); border-top-right-radius: 82px; border-bottom-right-radius: 82px; padding: 0 100px 0 50px; color: #F7F7F7; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%;}
.contact-us-details::before { position: absolute; content: ''; top: 0; left: 0; transform: translate(-50%, 0%); width: 100%; height: 100%; z-index: -1; background: linear-gradient(90.46deg, #F26E21 53.76%, #FF883F 135.04%); border-top-right-radius: 82px; border-bottom-right-radius: 82px;}
.contact-us-details h3 { margin-bottom: 60px;}
.contact-us-details li:first-child { margin-bottom: 48px;}
.contact-us-details li h5 { padding-left: 53px; font-size: 22px;}
.contact-us-details-list { color: var(--secondary-color); display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; gap: 18px; margin-bottom: 30px;}
.contact-us-details-list-icon { width: 24px;}
.contact-heading h2 { margin-bottom: 20px; color: #141414;}
.contact-heading h2 span { color: var(--primary-color);}
.contact-us-parent-col:first-of-type { padding-right: 35px;}
.contact-us-parent-col:last-of-type { padding-left: 35px;}
.contact-us-form { margin: 15px 0 0px;}
.contact-us-form-field { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center;}
.contact-us-form-field span { color: #000000; margin-bottom: 10px;}
.contact-us-form-field textarea { min-height: 135px; resize: none;}
.contact-us-form-field textarea, .contact-us-form-field input, .contact-us-form-field select { padding: 11px 10px; border: 1px solid rgba(95, 95, 95, 0.2); border-radius: 5px; outline: none; text-overflow: ellipsis; text-transform: none;}
.contact-us-form-field textarea::placeholder, .contact-us-form-field input::placeholder, .contact-us-form-field select::placeholder { color: #7A7A7A;}
.form-select        { background-image: url(../images/select-arrow.svg)}
.form-select:hover,
.form-select:active,
.form-select:focus  { cursor: pointer; box-shadow: none; border-color: rgba(95, 95, 95, 0.2); outline: none;}
.contact-us-form p{ color: #7A7A7A;}
.contact-us-form p span{ color: #ED7A2D;}
.chekbox-1 input.form-check-input {
    border-color: #f36f23;
    flex-shrink: 0;
}


.contact-us-form .row { row-gap: 36px; margin-bottom: 48px;}
.contact-us-form .select-row { margin-bottom: 36px;}
.contact-form-btn { box-shadow: 0px 109px 201px rgba(242, 110, 33, 0.31), 0px 55.1813px 87.6234px rgba(242, 110, 33, 0.20925), 0px 21.8px 32.6625px rgba(242, 110, 33, 0.155), 0px 4.76875px 11.6203px rgba(242, 110, 33, 0.10075);}
/* End of Contact Us section */


/* Banner section */
/* .banner-section                                 { margin-bottom: 50px;} */
.banner-section .container > .banner-content-row{ justify-content: center;}
.banner-content-wrapper                         { display: flex; flex-direction: column; align-items: flex-start; height: 100%; justify-content: center;}
.banner-content-wrapper h3                              { margin-bottom: 8px;}
.banner-heading h1                              { color: #141414; font-family: var(--font-noto-sans-gujarati); font-weight: 800;}
.banner-heading h1 span                         { color: #ED7A2D;}
.banner-description                             { margin-top: 20px;}
.banner-image                                   { min-height: 100%; min-width: 100%;}
.banner-image img                               { min-width: auto !important; min-height: 100% !important; width: auto; max-width: 100% !important;}
.banner-content-wrapper *                       { text-transform: none; }
/* Showcase cards */
.showcase-card                                  { min-height: 280px; padding: 24px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0px 11.6519px 21.837px rgba(0, 0, 0, 0.0274815);border-radius: 80px; border: 1px solid #EFEFEF; background-color:white; gap: 8px; text-align: center; transition: 0.5s all ease;}
.showcase-card h5                               { font-weight: 400; text-transform: capitalize;}
.showcase-card-img                              { width: 100px; max-width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center;}
.showcase-card-img img                          { width: 100px !important; height: 100px !important; object-fit: contain;}
.banner-card-link .showcase-card img            { width: 100px !important; height: 100px !important;}
.banner-card-link                               { transition: 0.3s all ease; background-color: transparent;}
.banner-card-link:hover .showcase-card          { background-color: var(--primary-color); transition: all 0.5s ease;}
.banner-card-link .showcase-card img            { height: 100px; object-fit: cover; object-position: top center; transition: none;}
.banner-card-link:hover .showcase-card img      { object-position: bottom center;}
.banner-card-link:hover .showcase-card h5       { color: var(--secondary-color);}
/* End of Banner section */

/* Advertising Section */
.a-ds-section                                   { position: relative;}
.a-ds-section [data-title]::before              { left: -150%;}
.section-title                                  { position: relative; max-width: 65%; text-align: center; margin: auto;}
.section-title h2                               { margin-bottom: 12px;}
.section-title p                                { color: #262626;}
.a-ds-section .showcase-list                    { height: 100%; display: flex; justify-content: space-between; align-items: flex-start;}
.a-ds-section .showcase-card                    { padding: 0 12px; min-height: 256px; height: max-content; border-radius: 30px !important;}
.a-ds-section .showcase-card-details            { max-width: 80%;}
.a-ds-section .a-ds-mockup-wrapper-row          { padding-top: 48px;}
.mockup-image-wrapper                           { position: relative;}
.a-ds-mockup-image                              { position: relative; z-index: 5;}
.a-ds-mockup-image img                          { max-width: 100%; width: initial;}
.mockup-btn-wrapper                             { position: absolute; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; row-gap: 64px; top: 0; left: 15%; transform: translate(0, 0); height: 100%;}
.common-a-ds-bnt                                { position: relative;}
.common-a-ds-bnt .btn                           { pointer-events: none; background-color: var(--primary-color); color: var(--secondary-color);}
.line-span                                      { position: absolute; width: 170px; height: 2px; top: 50%; left: 85%; transform: translate(0, 0); z-index: -5; background-color: var(--primary-color);}

.heading-jojo-logo                 { display: inline-block; max-width: 118px;}
.heading-jojo-logo img             { width: 100%; height: 100%; object-fit: cover; padding-bottom: 4px;}
/* .common-a-ds-bnt:first-child, .common-a-ds-bnt:last-child { padding-left: 30px;} */
/* .common-a-ds-bnt:nth-child(3)                   { margin-left: -30px;} */
/* End of Advertising Section */

/* Publish Section */
.publish-section { background-color: var(--primary-color);}
.publish-title { position: relative;}
.publish-title * { color: var(--secondary-color);}

.publish-showcase-cards-parent-wrapper { padding-top: 64px;}
.publish-showcase-cards-parent-wrapper > .col-md-11 { margin: auto;}
.publish-showcase-cards-parent-wrapper .showcase-card { row-gap: 16px; max-width: 335px;}
.publish-showcase-cards-parent-wrapper .publish-cards-list { justify-content: space-around;}
.publish-contact-btn { display: flex; justify-content: center; align-items: center; padding-top: 64px;}
.publish-contact-btn .btn { border: 1px solid #D9D9D9; text-align: center; text-transform: none;}
.publish-medium h3 { color: var(--secondary-color); font-weight: 300; text-align: center; padding: 64px 0;}
.publish-medium h3 strong { font-weight: 500;}
.white-jojo-icon  { max-width: 152px;}

/* End of Publish Section */

/* Pitch Section */
.pitch-section { background-color: #1E1E1E;}
.pitch-section .row { justify-content: space-around;}
.pitch-content-wrapper * { color: var(--secondary-color);}
.pitch-col-content-wrapper { display: flex; flex-direction: column; justify-content: space-between;}
.pitch-content-wrapper { flex-grow: 0.;}
.pitch-content-wrapper h2 { margin-bottom: 8px;}
.pitch-content-wrapper .h1-lg { margin-bottom: 24px;}
.pitch-content-wrapper h3 { margin-top: 32px; margin-bottom: 16px;}
.pitch-content-wrapper h5 { display:flex; flex-direction: column; justify-content: flex-start; row-gap: 16px;}
.pitch-btns { margin: auto 0; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; column-gap: 16px;}
/* End of Pitch Section */

/* Content Catalog Section */
.catalog-section                    { background-color: #0B0B0B;}
.catalog-section .section-title     { color: var(--secondary-color); text-align: center; margin-bottom: 48px;}
.devices-wrapper                    { display: block; margin-bottom: 48px;}
.devices                            { position: relative; margin-top: -24px; padding-top: 40%;}
.sub-devices                        { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.desktop                            { transform: translate(-75%, -60%); max-width: 35%; }
.tv                                 { transform: translate(35%, -70%); max-width: 37%;}
.laptop                             { transform: translate(-7%, -17%); z-index: 1; max-width: 32%;}
.tablet                             { left: 20%; transform: translate(-50%, -40%); z-index: 1; max-width: 17%;}
.phone                              { left: 6%; transform: translate(0%, 0%); z-index: 2; max-width: 7%;}

/* content slider */
.catalog-content-slider-parent  { max-width: 60%; margin: auto; text-align: center;}
.catalog-section .slider-img-wrapper             { display: inline-block; width: auto; height: 100%; max-height: 38px; padding: 0 12px; margin: auto; text-align: center;}
.catalog-section .slider-img                     { width: 100%; height: auto;}
.catalog-section .slider-text                    { width: 100%; color: var(--secondary-color); margin-top: 60px; margin-left: auto; margin-right: auto; text-align: center; text-transform: none;}
.catalog-content-slider                          { width: 100%; max-width: 60%; margin: auto;}
.for-img                                         { margin: auto; text-align: center;}

.catalog-section .slick-prev,
.catalog-section .slick-next        { top: 15px; width: 100px; height: 100px; background-color: #000000; border: 1px solid var(--secondary-color); border-radius: 50%; transition: all 0.5s ease; z-index: 5;}

.catalog-section .slick-prev                     { left: 5%;}
.catalog-section .slick-next                     { right: 5%;}
.catalog-section .slick-prev:before              { content: ""; background: url(../images/arrow-left.svg) no-repeat center center; background-size: 70%; position: absolute; top: 50%; left: 45px; transform: translate(-50%, -50%); width: 100%; height: 100%; max-width: 65px; max-height: 65px; color: var(--secondary-color); z-index: 2; border-radius: 50%;}
.catalog-section .slick-next:before              { content: ""; background: url(../images/arrow-right.svg) no-repeat center center; background-size: 70%; position: absolute; top: 50%; left: 55px; transform: translate(-50%, -50%); width: 100%; height: 100%; max-width: 65px; max-height: 65px; color: var(--secondary-color); z-index: 2; border-radius: 50%;}

.slick-prev::after,
.catalog-section .slick-next::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: translate(0%, 0%); scale: 0; transition: all 0.5s ease; background-color: var(--primary-color); border-radius: 50%; z-index: -1;}

.catalog-section .slick-prev:hover::after,
.catalog-section .slick-prev:focus::after,
.catalog-section .slick-next:hover::after,
.catalog-section .slick-next:focus::after { scale: 1; background-color: var(--primary-color); z-index: -1;}

.catalog-section .slick-prev:hover:before, .catalog-section .slick-prev:focus:before,
.catalog-section .slick-next:hover:before, .catalog-section .slick-next:focus:before { opacity: 1; transition: all 0.3s ease; background-color: var(--primary-color); z-index: 3;}

.catalog-content-slider .slider-for .slick-list   { max-width: 70%; margin: auto;}

/* Device Slider Frame */
.devices-slider { position: absolute; width: 100%; height: 100%; top: 0%; left: 0%; display: block; /* opacity: 0.4; background: #ffc500; */ z-index: 1;}
.devices-slider .slick-list,
.devices-slider .slick-track,
.devices-slider .slick-slide { height: 100%;}
.devices-slider img { width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.devices-slider + img { width: 100%; position: relative; z-index: 2;}
/* Desktop Slider Frame */
.desktop .devices-slider { width: 91.5%; height: 66%; top: 5.2%; left: 4.2%;}
/* tv Slider Frame */
.tv .devices-slider { width: 95%; height: 78%; top: 4.5%; left: 2.5%;}
/* laptop Slider Frame */
.laptop .devices-slider { width: 79%; height: 85.4%; top: 6%; left: 10%;}
/* tablet Slider Frame */
.tablet .devices-slider { width: 93%; height: 96.5%; top: 2%; left: 2%; border-radius: 7px;}
/* phone Slider Frame */
.phone .devices-slider { width: 90%; height: 95%; top: 2.7%; left: 3.5%; border-radius: 7px;}
/* End of Content Catalog Section */

/* App Download Section */
.app-download-section { background-color: #F7772B;}
.app-download-section .app-download-section-row, .app-download-section-row-heading { justify-content: center;}
.app-download-section-row-heading { margin-left: 0; justify-content: center;}
.app-download-h2 { /* display: flex; justify-content: start;  text-align: center;*/ align-items: baseline; column-gap: 8px; margin-bottom: 25px; color: #FFFFFF;}
/* .app-download-h2 span { display: flex; flex-direction: row; flex-wrap: nowrap;} */
/* .app-download-h2 span img { width: auto; height: 100%; max-height: 37px;} */
.app-donwload-content-list { color: #FFFFFF; margin-left: 12px;}
.app-donwload-content-list li { list-style-type: disc; list-style-position: inside;}
.app-donwload-content-list li:not(:last-child) { margin-bottom: 32px;}
.app-download-section .app-download-section-row { align-items: center;}
.app-download-section .showcase-card { align-items: stretch; width: 100%; aspect-ratio: initial;}
.app-download-section .showcase-card .store-img-wrapper img { width: 100%; height: auto;}
.app-download-section .showcase-card .store-img-wrapper div { position: relative;}
.app-download-section .showcase-card .store-img-wrapper div:hover { cursor: pointer;}
.app-download-section .showcase-card .store-img-wrapper div a { position: absolute; top: 0; left: 0; transform: translate(0%, 0%); display: block; width: 100%; height: 100%; z-index: 2;}
.store-img-wrapper { width: 100%; max-width: 75%; margin-left: auto; margin-right: auto;}
.play-store img { scale: 1.15;}
/* End of App Download Section */


/* THANK YOU PAGE */
.thank-you-header .container                    { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.thanks-header-btn                              { padding: 0.625rem 2rem !important; font-family: var(--font-lexend); font-size: 1rem; line-height: 1.625rem; font-weight: 600; color: var(--primary-color); text-transform: capitalize; background-color: #FFFFFF; border: 1px solid transparent;}
.thanks-header-btn:hover                        { border-color: #ffffff; color: #FFFFFF; background-color: var(--primary-color);}
.thankyou-page-logo a                           { display: inline-block; width: 100%; height: 100%;}
.thankyou-page-logo a img                       { max-width: clamp(100px, 15vw, 152px);}
.thank-you-main, .thank-you-main section                                 { width: 100%; height: 100%;}
.thank-you-container                            { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%; }
.thank-you-container h1                         { width: 75vw; margin: auto; text-align: center; font-family: var(--font-poppins); font-weight: 700; font-size: 8rem; line-height: 10rem; color: #ffffff;}

/* END OF THANK YOU PAGE */



/* RESPONSIVE CSS */
@media (min-width: 1401px){
    .sub-heading { max-width: 60%;}
    .section-title { max-width: 40%;}
    .publish-title { max-width: 65%;}
    .pitch-content-wrapper .h1-lg { max-width: 90%};

    /* THANK YOU PAGE */
    .thank-you-container h1                     { font-size: 8.438rem; line-height: 10.313rem;}
    /* END OF THANK YOU PAGE */

}
@media (min-width: 1200px) and (max-width: 1400px){
    /* global */
    /* Typography */
    h1                              { font-size: 88px; line-height: 108%; margin-bottom: 8px;}
    .h1-lg                          { font-size: 62px; line-height: 104%;}
    .h1-sm                          { font-size: 60px; line-height: 100%;}
    h2                              { font-size: 40px; line-height: 65px;}
    .h2-lg                          { font-size: 45px; line-height: 54px;}
    .h2-sm                          { font-size: 38px; line-height: 100%;}
    h3                              { font-size: 32px; line-height: 38px;}
    .h3-lg                          { font-size: 34px; line-height: 50px;}
    .h3-sm                          { font-size: 30px; line-height: 38px;}
    h4                              { font-size: 26px; line-height: 32px;}
    h5                              { font-size: 22px; line-height: 26px;}
    h6                              { font-size: 17px; line-height: 26px;}
    p                               { font-size: 16px; line-height: 23px;}
    .p-sm                           { font-size: 14px; line-height: 16px;}

    /* utility style */
    .btn                                            { padding: 10px 30px; line-height: 24px;}
    .common-padding                                 { padding: 60px 0 0;}
    .common-bottom-padding                          { padding-bottom: 60px;}
    [data-title]::before                            { font-size: 200px;}

    /* header */
    header                                          { padding: 25px 0;}
    .site-logo                                      { width: 120px;}

    /* footer */
    footer { padding: 50px 0 25px !important;}

    /* Contact us section */
    .contact-us-section { padding-bottom: 60px;}
    .contact-us-details li h5 { font-size: 20px;}

    /* banner section */
    /* showcase */
    .showcase-card                                  { min-height: 280px; padding: 16px 20px; border-radius: 70px;}
    .banner-section .showcase-card                  { min-height: 250px;}
    .showcase-card-img                              { width: 80px;}
    .showcase-card-img img                          { width: 80px !important; height: 80px !important;}
    .banner-card-link .showcase-card img            { width: 80px !important; height: 80px !important;}
    /* End of banner section */

    /* Catalog slider */
    .catalog-content-slider .slider-for .slick-list   { max-width: 60%; margin: auto;}

    /* Advertise Section */
    .a-ds-section .showcase-card                    { min-height: 225px;}
    /* End of Advertise Section */

    /* Publish Section */
    .publish-title { max-width: 70%;}
    .publish-showcase-cards-parent-wrapper, .publish-contact-btn { padding-top: 60px;}
    .publish-medium h3 { padding: 48px 0;}
    .white-jojo-icon  { max-width: 146px;}
    /* End of Publish Section */



    /* THANK YOU PAGE */
    .thank-you-container h1                     { width: 90vw; font-size: 7.5rem; line-height: 9rem;}
    /* END OF THANK YOU PAGE */


}
@media (min-width: 992px) and (max-width: 1199px){
    /* global styling */
    main                            { padding-top: 50px;}
    /* Typography */
    h1                              { font-size: 75px; line-height: 105%;}
    .h1-lg                          { font-size: 58px; line-height: 100%;}
    .h1-sm                          { font-size: 56px; line-height: 100%;}
    h2                              { font-size: 38px; line-height: 45px;}
    .h2-lg                          { font-size: 43px; line-height: 48px;}
    .h2-sm                          { font-size: 36px; line-height: 104%;}
    h3                              { font-size: 30px; line-height: 36px;}
    .h3-lg                          { font-size: 32px; line-height: 46px;}
    .h3-sm                          { font-size: 28px; line-height: 34px;}
    h4                              { font-size: 24px; line-height: 30px;}
    h5                              { font-size: 20px; line-height: 24px;}
    h6                              { font-size: 16px; line-height: 22px;}
    p                               { font-size: 15px; line-height: 20px;}
    .p-sm                           { font-size: 14px; line-height: 16px;}


    /* utility style */
    .common-padding                                 { padding: 50px 0 0;}
    .common-bottom-padding                          { padding-bottom: 45px;}
    .btn                                            { padding: 10px 26px; font-size: 16px; line-height: 20px;}
    [data-title]::before                            { font-size: 160px;}

    /* header */
    header                                          { padding: 20px 0;}
    .site-logo                                      { width: 100px;}

    /* footer */
    footer { padding-bottom: 25px !important;}

    /* Contact Us Section */
    .contact-us-section { padding-bottom: 50px;}
    .contact-us-details { padding: 24px; padding-left: 36px;}
    .contact-us-details h3 { margin-bottom: 45px;}
    .contact-us-details li:first-child { margin-bottom: 40px;}
    .contact-us-details li h5 { padding-left: 42px; font-size: 18px;}
    /* .contact-heading h2 { color: #141414;} */
    .contact-us-parent-col:first-of-type { padding-right: 28px;}
    .contact-us-parent-col:last-of-type { padding-left: 28px;}
    .contact-us-form { margin: 12px 0 0px;}
    .contact-us-form-field span { margin-bottom: 8px;}
    /* .contact-us-form-field textarea, .contact-us-form-field input, .contact-us-form-field select { padding: 14px 10px;} */
    .contact-us-form .row { row-gap: 28px; margin-bottom: 34px;}
    .contact-us-form .select-row { margin-bottom: 28px;}

    /* End of Contact Us Section */

    /* banner section */
    .showcase-list                                  { padding-top: 16px;}
    .showcase-card                                  { min-height: 220px; margin-top: 0; padding: 14px 18px; border-radius: 60px;}
    .showcase-card-img                              { width: 70px;}
    .showcase-card-img img                          { width: 70px !important; height: 70px !important;}
    .banner-card-link .showcase-card img            { width: 70px !important; height: 70px !important;}
    /* End of banner section */

    /* Advertise section */
    .a-ds-section [data-title]::before              { left: -105%;}
    .a-ds-section .showcase-card                    { min-height: 200px;}
    .heading-jojo-logo                 { max-width: 109px;}
    /* End of Advertise section */

    /* Publish Section */
    .publish-showcase-cards-parent-wrapper .showcase-card { margin-top: 0;}
    .publish-showcase-cards-parent-wrapper { padding-top: 16px;}
    .publish-contact-btn { padding-top: 32px;}
    .publish-medium h3 { padding: 14px 0;}
    .white-jojo-icon  { max-width: 140px;}
    /* End of Publish Section */

    /* Content Section slider */
    .devices                                    { padding-top: 45%;}
    .devices-wrapper                            { margin-bottom: 0;}
    .catalog-content-slider-parent              { max-width: 75%;}
    .catalog-section .slick-prev, .catalog-section .slick-next   { max-width: 75px; max-height: 75px;}
    .catalog-section .slick-prev:before                          { left: calc(50% - 4px); background-size: 50%;}
    .catalog-section .slick-next:before                          { left: calc(50% + 4px); background-size: 50%;}
    .catalog-section .slider-text                                { margin-top: 32px;}
    .catalog-content-slider .slider-for .slick-list   { max-width: 60%; margin: auto;}
    /* End of Content Section slider */

    /* App Download Section */
    .app-download-section-row-heading { justify-content: center;}
    /* End of App Download Section */



    /* THANK YOU PAGE */
    .thank-you-container h1                     { width: 100vw; font-size: 6rem; line-height: 6.25rem;}
    /* END OF THANK YOU PAGE */


}
@media (max-width: 991px){
    /* header */
    header                                      { padding: 15px 0;}
    header .btn                                 { padding: 8px 18px; }
    .site-logo                                  { width: 80px;}

    main                                        { padding-top: 65px;}

    /* Contact Us Section */
    .contact-us-details { padding: 12px; justify-content: space-evenly;}
    .contact-us-details h3 { margin-bottom: 24px;}
    .contact-us-details-list { gap: 8px;}
    .contact-us-details li:first-child { margin-bottom: 22px;}
    .contact-us-details li h5 { padding-left: 40px;}
    .contact-heading h2 { color: #141414;}
    .contact-us-parent-col:first-of-type { padding-right: 16px;}
    .contact-us-parent-col:last-of-type { padding-left: 16px;}
    .contact-us-form { margin: 10px 0 20px;}
    .contact-us-form-field span { margin-bottom: 6px;}
    .contact-us-form-field textarea, .contact-us-form-field input, .contact-us-form-field select { padding: 10px 8px; font-size: 12px;}
    .contact-us-form .row { row-gap: 20px; margin-bottom: 24px;}
    .contact-us-form .select-row { margin-bottom: 20px;}
    .contact-us-form-field textarea { min-height: 80px;}
    .contact-us-details-list { margin-bottom: 8px;}
    /* End Of Contact Us Section */

    /* Showcase cards */
    .showcase-list                                  { padding-top: 16px;}
    .showcase-card                                  { margin-top: 0;}

    /* Advertise Section */
    .a-ds-section .a-ds-mockup-wrapper-row          { padding-top: 32px;}
    .line-span                                      { left: 70%;}
    .a-ds-section .showcase-card-details            { max-width: 100%;}
    .heading-jojo-logo                 { max-width: 100px;}
    /* End of Advertise Section */

    /* Publish Section */
    .section-title  { max-width: 100%;}
    .publish-showcase-cards-parent-wrapper { padding-top: 0;}
    .publish-showcase-cards-parent-wrapper .showcase-card { row-gap: 12px; min-width: 102%;}
    .white-jojo-icon  { max-width: 125px;}
    /* End of Publish Section */

    /* Pitch Section */
    .banner-image { display: flex; align-items: center; justify-content: center;}
    .pitch-btns { margin: 16px 0;}
    /* End of Pitch Section */

    /* catalog section */
    .catalog-section .section-title             { margin-bottom: 32px;}
    /* Content Section slider */
    .devices-wrapper                            { margin-bottom: 0;}
    .catalog-content-slider-parent              { max-width: 100%;}
    .catalog-section .slick-prev, .catalog-section .slick-next   { max-width: 42px; max-height: 42px; top: 13px;}
    .catalog-section .slick-prev:before                          { top: 51%; left: 18px; background-size: 50%; max-width: 35px; max-height: 35px;}
    .catalog-section .slick-next:before                          { top: 51%; left: 22px; background-size: 50%; max-width: 35px; max-height: 35px;}
    .catalog-section .slider-img-wrapper                         { padding: 0;}
    .catalog-section .slider-text                                { margin-top: 16px;}
    .catalog-content-slider .slider-for .slick-list   { max-width: 60%; margin: auto;}

    .catalog-section .slick-prev                    { left: 15%;}
    .catalog-section .slick-next                    { right: 15%;}
    .catalog-content-slider                         { width: 100%; max-width: 90%; margin: auto; margin-top: 16px;}
    /* End of catalog section */

    /* App Download Section */
    .app-donwload-content-list li:not(:last-child) { margin-bottom: 16px;}
    /* End of App Download Section */


    /* THANK YOU PAGE */
    .thank-you-container h1                     { width: 100vw; font-size: 4.5rem; line-height: 5rem;}
    /* END OF THANK YOU PAGE */

}
@media (min-width: 768px) and (max-width: 991px){
    /* global styling */
    /* Typography */
    h1                              { font-size: 65px; line-height: 100%;}
    .h1-lg                          { font-size: 54px; line-height: 100%;}
    .h1-sm                          { font-size: 50px; line-height: 100%;}
    h2                              { font-size: 35px; line-height: 41px;}
    .h2-lg                          { font-size: 40px; line-height: 43px;}
    .h2-sm                          { font-size: 34px; line-height: 100%;}
    h3                              { font-size: 28px; line-height: 34px;}
    .h3-lg                          { font-size: 30px; line-height: 39px;}
    .h3-sm                          { font-size: 26px; line-height: 32px;}
    h4                              { font-size: 22px; line-height: 28px;}
    h5                              { font-size: 19px; line-height: 22px;}
    h6                              { font-size: 15px; line-height: 20px;}
    p                               { font-size: 14px; line-height: 18px;}
    .p-sm                           { font-size: 14px; line-height: 15px;}

    /* utility style */
    .common-padding                             { padding: 40px 0 0;}
    .common-bottom-padding                      { padding-bottom: 40px;}
    .btn                                        { padding: 8px 22px; font-size: 14px; line-height: 18px;}
    [data-title]::before                        { font-size: 110px;}

    /* footer */
    footer { padding-bottom: 25px !important;}

    /* Contact Us Section */
    .contact-us-section { padding-bottom: 40px;}
    .contact-us-parent-col:first-of-type { padding-right: 12px;}
    .contact-us-parent-col:last-of-type { padding-left: 12px;}
    /* End of Contact Us Section */

    /* banner section */
    /* showcase */
    .showcase-list                              { padding-top: 16px;}
    .showcase-card                              { min-width: 170px; min-height: 160px; margin-top: 0; padding: 12px 16px; border-radius: 40px; }
    .showcase-card-img                          { width: 60px;}
    .showcase-card-img img                      { width: 60px !important; height: 60px !important;}
    .banner-card-link .showcase-card img        { width: 60px !important; height: 60px !important;}
    /* End of banner section */

    /* Advertise Section */
    .a-ds-section [data-title]::before          { left: -36%;}
    .a-ds-section .showcase-card                { min-height: 150px;}

    .mockup-btn-wrapper                         { left: 10%; row-gap: 48px;}
    /* End of Advertise Section */

    /* Publish Section */
    .publish-showcase-cards-parent-wrapper, .publish-medium { padding-top: 12px;}
    .publish-contact-btn { padding-top: 28px;}
    .publish-medium h3 { padding: 12px 0;}
    /* End of Publish Section */

    .contact-us-details li h5 { font-size: 17px;}


}
@media (max-width: 767px){
    /* utility style */
    .common-padding                             { padding: 35px 0 0;}
    .common-bottom-padding                      { padding-bottom: 35px;}
    .btn                                        { padding: 8px 12px; font-size: 14px; line-height: 16px;}

    main                                        { padding-top: 70px;}

    /* header */
    header .btn                                 { padding: 6px 18px; }

    /* footer */
    footer { padding-bottom: 22px !important;}

    /* Contact Us Section */
    .contact-heading { width: 100% !important;}
    .contact-heading h2 { margin-bottom: 24px; padding-left: 0;}
    .contact-form-wrapper { margin-top: 24px;}
    .contact-us-details { border-top-right-radius: 42px; border-bottom-right-radius: 42px;}
    .contact-us-details h3 { margin-bottom: 16px;}
    .contact-us-details li:first-child { margin-bottom: 12px;}
    .contact-us-section ul, .contact-us-section li * { margin-bottom: 0;}
    .contact-us-form .row { row-gap: 12px; margin-bottom: 16px;}
    .contact-us-form .select-row { margin-bottom: 12px;}

    .contact-us-form-field textarea, .contact-us-form-field input, .contact-us-form-field select { padding: 10px 8px;}
    /* End of Contact Us Section */

    /* Banner Section */
    .banner-section .container > .banner-content-row{ flex-direction: column-reverse;}
    .showcase-list                                  { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; margin-top: 8px;}
    .banner-section .showcase-list .col-12:nth-child(-n + 2) { margin-top: 8px;}
    .banner-image img                               { max-height: 400px; width: auto; object-fit: contain; object-position: center;}
    .showcase-card                                  { text-align: start; column-gap: 12px;}
    /* End of Banner Section */

    /* Advertise Section */
    .mockup-btn-wrapper                             { left: 5%; row-gap: 48px;}
    .a-ds-section .a-ds-mockup-wrapper-row          { flex-direction: column-reverse; padding-top: 24px;}
    .a-ds-section .showcase-list                    {  row-gap: 16px;}
    .a-ds-section .showcase-card                    { min-height: 125px; width: calc(100% - 24px); margin-left: auto; margin-right: auto;}
    .heading-jojo-logo                 { max-width: 90px;}
    /* End of Advertise Section */

    /* Publish Section */
    .publish-contact-btn { padding-top: 24px;}
    .publish-medium h3 { padding: 16px 0;}
    .publish-showcase-cards-parent-wrapper .publish-cards-list { row-gap: 16px; padding-top: 0; margin-top: 0;}
    .publish-showcase-cards-parent-wrapper .publish-cards-list .col-12:nth-child(n + 2) { margin-top: 0;}
    .publish-showcase-cards-parent-wrapper .showcase-card { max-width: none; min-width: auto;}
    .publish-section .showcase-card-details br { display: none;}
    .white-jojo-icon  { max-width: 100px;}
    /* End of Publish Section */

    /* Pitch Section */
    .pitch-col-content-wrapper * { text-align: center;}
    .pitch-btns { justify-content: center;}
    /* End of Pitch Section */

    /* catalog section */
    .catalog-section .section-title             { margin-bottom: 24px;}
    /* Content Section slider */
    .catalog-section .slick-prev, .catalog-section .slick-next   { top: 16px;}
    .catalog-section .slider-img-wrapper                         { padding: 0;}
    .catalog-content-slider .slider-for .slick-list   { max-width: 70%;}
    /* .catalog-section .slider-text                                { margin-top: 28px;}   */

    .catalog-section .slick-prev                    { left: 7.5%;}
    .catalog-section .slick-next                    { right: 7.5%;}
    .catalog-content-slider                         { width: 100%; max-width: 100%; margin: auto; margin-top: 16px;}
    /* End of catalog section */

    /* App Download Section */
    .app-download-section-row { flex-direction: column-reverse; row-gap: 16px;}
    .app-download-image-card h4 { text-align: center;}
    /* End of App Download Section */


    /* THANK YOU PAGE */
    .thank-you-container h1                     { font-size: 3.75rem; line-height: 4rem;}
    /* END OF THANK YOU PAGE */

}
@media (min-width: 576px) and (max-width: 767px){
    /* global styling */
    /* Typography */
    h1                              { font-size: 46px; line-height: 50px;}
    .h1-lg                          { font-size: 48px; line-height: 100%;}
    .h1-sm                          { font-size: 42px; line-height: 100%;}
    h2                              { font-size: 33px; line-height: 39px;}
    .h2-lg                          { font-size: 38px; line-height: 40px;}
    .h2-sm                          { font-size: 32px; line-height: 100%;}
    h3                              { font-size: 26px; line-height: 30px;}
    .h3-lg                          { font-size: 28px; line-height: 36px;}
    .h3-sm                          { font-size: 24px; line-height: 30px;}
    h4                              { font-size: 20px; line-height: 26px;}
    h5                              { font-size: 18px; line-height: 20px;}
    h6                              { font-size: 14px; line-height: 18px;}
    p                               { font-size: 13px; line-height: 16px;}
    .p-sm                           { font-size: 13px; line-height: 14px;}

    /* Utility Style */
    [data-title]::before            { font-size: 120px;}

    /* banner section */
    /* showcase */
    .showcase-card                              { padding: 16px; border-radius: 50px; min-height: 160px;}
    .showcase-card-img                          { width: 70px;}
    .showcase-card-img img                      { width: 70px !important; height: 70px !important;}
    .banner-card-link .showcase-card img        { width: 70px !important; height: 70px !important;}
    /* End of banner section */

    .contact-us-details li h5 { font-size: 16px;}

}
@media (max-width: 575px){
    /* global styling */
    /* Typography */
    h1                              { font-size: 38px; line-height: 42px;}
    .h1-lg                          { font-size: 42px; line-height: 100%;}
    .h1-sm                          { font-size: 36px; line-height: 100%;}
    h2                              { font-size: 31px; line-height: 36px;}
    .h2-lg                          { font-size: 36px; line-height: 38px;}
    .h2-sm                          { font-size: 30px; line-height: 100%;}
    h3                              { font-size: 24px; line-height: 28px;}
    .h3-lg                          { font-size: 26px; line-height: 30px;}
    .h3-sm                          { font-size: 22px; line-height: 26px;}
    h4                              { font-size: 19px; line-height: 24px;}
    h5                              { font-size: 17px; line-height: 19px;}
    h6                              { font-size: 13px; line-height: 17px;}
    p                               { font-size: 12px; line-height: 15px;}
    .p-sm                           { font-size: 12px; line-height: 13px;}

    /* utility */
    .common-padding             { padding: 30px 0 0;}
    .common-bottom-padding      { padding-bottom: 30px;}
    .btn                        { padding: 6px 10px; font-size: 12px;}
    [data-title]::before        { font-size: 75px; top: 0;}

    /* header */
    header                      { padding: 10px 0;}
    .site-logo                  { width: 60px;}

    /* contact us section */
    .contact-us-section { padding-bottom: 30px;}
    .contact-us-details li h5 { font-size: 15px;}

    /* footer */
    footer { padding-bottom: 15px !important;}
    .footer-copyright {  padding-bottom: 4px;}
    /* End of footer */

    /* banner section */
    .banner-section .container > .banner-content-row{ flex-direction: column-reverse;}
    .banner-image img                               { max-height: 300px; width: auto;}
    .banner-description                             { margin-top: 10px;}
    /* showcase */
    .showcase-card                          { padding: 10px; border-radius: 30px; min-height: 120px; flex-direction: row; justify-content: flex-start;}
    .showcase-card-img                      { width: 75px; display: flex; justify-content: center; align-items: center;}
    .showcase-card-img img                  { width: 75px !important; height: 75px !important;}
    .banner-card-link .showcase-card img    { width: 75px !important; height: 75px !important;}
    .banner-section .showcase-list .col-12:nth-child(2) { margin-top: 16px;}
    /* End of banner section */

    /* Advertise Section */
    .a-ds-section [data-title]::before      { left: -25%;}
    .mockup-btn-wrapper                     { left: 10%; row-gap: 10%;}
    .line-span                              { left: 70%; width: 120px;}
    .a-ds-section .a-ds-mockup-wrapper-row  { padding-top: 16px;}
    .a-ds-mockup-wrapper-row .showcase-list { gap: 16px;}
    .heading-jojo-logo         { max-width: 80px;}
    /* End of Advertise Section */

    /* Publish Section */
    .publish-contact-btn { padding-top: 16px;}
    .publish-medium h3 { padding: 16px 0;}
    .publish-showcase-cards-parent-wrapper .publish-cards-list { margin-top: 0;}
    .white-jojo-icon  { max-width: 90px;}
    /* End of Publish Section */

    /* Pitch Section */
    .pitch-content-wrapper h3 { margin: 12px auto 8px auto;}
    .pitch-content-wrapper h5 { row-gap: 8px;}

    /* End of Pitch Section */

    /* catalog section */
    .catalog-section .slick-prev                    { left: 5%;}
    .catalog-section .slick-next                    { right: 5%;}
    .catalog-content-slider .slider-for .slick-list { max-width: 75%;}
    /* End of catalog section */

    /* App Download Section */
    .app-download-section .showcase-card { flex-direction: column;}
    /* End of App Download Section */



    /* THANK YOU PAGE */
    .thank-you-container h1                     { font-size: 3rem; line-height: 3.25rem;}
    /* END OF THANK YOU PAGe */


}
@media (max-width: 425px){
    .showcase-card-img img                  { width: 50px !important; height: 50px;}
    .banner-card-link .showcase-card img    { width: 50px !important; height: 50px !important;}
    /* Advertise Section */
    .mockup-btn-wrapper                     { left: 5%; row-gap: 8%;}
    /* .common-a-ds-bnt:first-child, .common-a-ds-bnt:last-child { padding-left: 20px;} */
    /* .common-a-ds-bnt:nth-child(3)                   { margin-left: -20px;} */
    /* End of Advertise Section */

    /* Pitch Section */
    .pitch-btns { flex-direction: column; row-gap: 8px;}
    /* End of Pitch Section */

    /* catalog section */
    .devices                                    { padding-top: 50%; margin-bottom: -12px;}
    /* Content Section slider */
    .catalog-section .slick-prev, .catalog-section .slick-next   { top: 15px; max-width: 30px; max-height: 30px;}
    .catalog-section .slick-next:before                          { max-width: 35px; max-height: 35px; background-size: 50%; top: 51.5%; left: 52%;}
    .catalog-section .slick-prev:before                          { max-width: 35px; max-height: 35px; background-size: 50%; top: 51.5%; left: 48%;}
    .catalog-content-slider .slider-for .slick-list              { max-width: 80%; margin: auto;}
    /* .catalog-section .slider-text                                { margin-top: 18px;} */

    .catalog-section .slick-prev                    { left: 2.5%;}
    .catalog-section .slick-next                    { right: 2.5%;}
    /* End of catalog section */


    /* THANK YOU PAGE */
    .thank-you-container h1                     { font-size: 2.5rem; line-height: 2.75rem;}
    /* END OF THANK YOU PAGe */

}
@media (max-width: 375px){
    /* Content Section slider */
    .catalog-section .slider-img-wrapper.web-series-slider-img  { width: 100%; max-width: 95%; height: auto; max-height: none; margin: auto; padding-top: 4px;}
    .catalog-section .slick-prev                    { left: 0;}
    .catalog-section .slick-next                    { right: 0;}

    /* A-ds Section */
    .heading-jojo-logo         { max-width: 70px;}

    /* Publish Section */
    .white-jojo-icon  { max-width: 85px;}
}
/* End of RESPONSIVE CSS */