@media only screen and (max-width: 1199px) {
.home-hero {padding-block: 5em 0em;}
.container {max-width: 96%;}
.benefits-section-parent .benefits-section .btn-download {  max-width: 100%;}
.product-card {padding: 25px;}
.role-description {max-width: 90%;}
.benefits-section-parent .benefits-section .btn-download {  font-size: 20px;   padding: 23px 20px;}
#content .single-product .performance-stat {   font-size: 24px;}
.benefits-section-parent:before {   height: 180px;}
}
@media only screen and (max-width: 991px) {
.role-card { border-radius: 60px; border-width: 4px; margin-top: 20px; height: calc(100% - 20px); }
 .who-are-you-section { padding-bottom: 3rem; }
.cta-section .cta-title { font-size: 38px; }
.btn-talk-rep { font-size: 22px;  }
.navbar  .container {   column-gap: 20px;}
.navbar-light .navbar-toggler {border: none; padding: 0; box-shadow: unset;        width: 35px;}
.navbar-light .navbar-toggler:focus {border: none; box-shadow: unset;   }
.navbar {   padding:20px 0px 10px;}
.navbar .navbar-brand {   height: 80px;}
.navbar .navbar-collapse { background: white; border-radius: 20px; padding: 2rem; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: absolute; left: 0; right: 0; top: 110px; width: calc(100% - 20px); margin: 0 auto; transition: transform 0.3s ease-in-out;  transform: translateX(-110%);  height: fit-content; } 
.navbar .navbar-collapse.show { transform: translateX(0%);  transition: transform 0.3s ease-in-out; }
.navbar .navbar-toggler[aria-expanded="true"] i::before { content: '\00d7'; }
.cta-section .cta-title , #content .about .top-hero .hero-title  , .section-title , .hero-title , .who-title , #content .products .hero-title , #content .products .section-title  , .professional .product-title , #content .professional-single .product-title , .product-main-sec .orange-title , #content .single-product .hero-title{ font-size: 38px; }
#content .products table tr > :first-child:not(th) , #content .products table tr > td {white-space: nowrap;}
.feature-title {   font-size: 23px;}
.feature-icon {   width: 60px;    height: 60px; margin-right: 15px;}
.about-bg .btn-download {font-size: 30px;}
#content .about .top-hero .hero-description{font-size:24px;}
.about-cards p:is(.hero-description) { font-size: 19px; }
 .about-cards h6 { font-size: 25px; }
 .card-side-icon { width: 180px; } 
.hero-description { font-size: 22px; }
#content .single-product .benefit-description  , #content .single-product .performance-stat { font-size: 20px; } 
.benefits-section-parent .benefits-section .btn-download { font-size: 18px; padding: 18px 18px; bottom: -3rem; } .
benefits-section-parent:before { height: 100px; }
#content .single-product .hero-description{font-size:22px;}
.benefits-section-parent:before {   height: 120px;}

}
@media only screen and (max-width: 767px) {
.footer-section {padding: 2rem 0; text-align: center;}
.footer-section .footer-last-col{ text-align: center;}
.footer-section .made-in-usa {margin: 20px auto 0;width: 60px;}
.footer-section .footer-description{margin: 0 auto ;}
.footer-section:before {   width: 100%;  height: 50%;}
.cta-section { text-align: center; padding: 4rem 0; } 
.cta-section .cta-title { margin-bottom: 20px; }
.btn-talk-rep {margin: 0 auto; }
body , .who-are-you-section .who-are-you-content{ text-align: center; }
.feature-card {/* flex-direction: column; */max-width: 100%;row-gap: 10px;}

.feature-title {   font-size: 24px;  text-align: left;}
.feature-icon {  width: 45px;  height: 45px;}
 .why-choose-section {padding: 9rem 0rem 2rem 0rem;border-bottom-left-radius: 100px;}
.hero-btn-parent .btn {font-size: 17px;padding: 14px 12px;/* margin: 0 auto; */margin: 0;} 
 .hero-btn-parent {/* flex-direction: column; */row-gap: 20px;column-gap: 10px;margin-bottom: -20px;flex-wrap: wrap;justify-content: center;}
.home-hero {  padding-block: 2em 0em; }
.cta-section .cta-title , #content .about .top-hero .hero-title  , .section-title , .hero-title , .who-title , #content .products .hero-title , #content .products .section-title  , .professional .product-title , #content .professional-single .product-title , .product-main-sec .orange-title , #content .single-product .hero-title{ font-size: 33px; }
.footer-heading, .footer-links a , .footer-address {font-size: 20px;}
.contact-card {    text-align: left;}
.contact-card .border-right {border: none;border-top: 3px solid #E87722;padding: 30px 16px 10px 16px;margin-top:20px;}
.hero-subtitle , #content .contact-card a[href^="tel:"] {    font-size: 17px;}
.contact-icon i {   font-size: 20px;   width: 20px;}
#content .contact-card .contact-logo { margin: 0 auto; }
 #content .contact-card .contact-icon  { margin: auto; } 
.btn-role { padding: 12px 25px; font-size: 17px; }
#content .about .top-hero .hero-description{font-size:24px}
#content .products table tr > :first-child:not(th) , #content .products table tr > td {font-size: 17px;}
.about-bg .btn-download {margin: 0 auto;left: 0;}
.card.about-cards {max-width: 100%;flex-direction: column !important;justify-content: center;padding:15px;}
 .card-side-icon { width: 80px; margin:0 auto;} 
.we-started-sec .we-started-content {   padding-bottom: 50px;}
#content .single-product .benefit-item { max-width: 100%; } 
#content .single-product .performance-content .text-end { text-align: center !important; } 
.benefits-section-parent .benefits-section .btn-download { position: relative; width: fit-content; margin: 0 auto -20px; }
.contact-card .border-right:after { content: 'OR'; display: block; width: fit-content; background: white; color: #E87722; font-family: 'Canva-Sans-Bold', sans-serif; font-size: 20px; position: absolute; left: 0; right: 0; top: -25px; width: fit-content; padding: 10px; margin: 0 auto; } .contact-card .border-right:before { content: 'Contact us '; display: block; width: fit-content; color: var(--up-dark-blue); font-family: 'Canva-Sans-Bold', sans-serif; font-size: 20px; left: 0; right: 0; width: fit-content; margin: 0 auto 20px; }
 .contact-card .border-right { position: relative; }
 #content .contact-card .contact-logo { display: none; }
.container {   padding-right: 12px !important; padding-left: 12px !important;}
.contact-card .btn-role {   margin: 0 auto;}

.contact-card .g-recaptcha>div {
    margin: 0 auto;
}
}
@media only screen and (max-width: 600px) {
.cta-section {  padding: 3rem 0; } 
.cta-section .cta-title , #content .about .top-hero .hero-title  , .section-title , .hero-title , .who-title , #content .products .hero-title , #content .products .section-title  , .professional .product-title , #content .professional-single .product-title , .product-main-sec .orange-title , #content .single-product .hero-title{ font-size: 28px; }
.hero-description , #content .about .top-hero .hero-description  , .btn-talk-rep , .section-description  , .who-subtitle , #content .single-product .hero-description { font-size: 19px; } 
.role-description {   max-width: 100%;}
#content .top-hero:is(.home-hero):before {width: 100%;}
#content .top-hero:not(.home-hero):before {   width: 100%;   height: 285px;}
.btn-explore {font-size: 18px;padding: 15px 20px;width: fit-content;} 
.arrow-rotate { font-size: 18px; } 
.why-choose-section { padding: 9rem 0.5rem 2rem 0.5rem; border-bottom-left-radius: 50px; } 
.why-choose-section .section-title {font-size: 26px;} 
.product-card .btn-details { font-size: 20px; } 
.feature-title {font-size: 18px;}
.feature-icon {width: 40px;height: 40px;margin-right: 10px;}
.about-bg .btn-download { left: 0; right: 0; margin: 0 auto; font-size: 20px; }
.professional .p-item { border-radius: 70px; min-height: 230px; }
 .professional:not(.professional-single) .card h1 { font-size: 26px; } 
.professional .btn-role { font-size: 19px; }
 .professional .product-title span { font-size: 25px; }
.home-hero , .home-hero:after { border-bottom-right-radius: 30%; } 
.products-section {margin-top: -150px;pa;padding: calc(140px + 5em) 0 0em;}

.footer-description { font-size: 17px; } 
.footer-section .footer-brand .navbar-brand img { min-height: 50px; height: 50px; object-position: center; }
#content .professional-single h4.clr-orange { font-size: 20px; } 
#content .professional-single .hero-description { font-size: 17px; } 
#content .professional-single .fst-italic { font-size: 22px; } 
#content .professional-single h5 { font-size: 20px; } #content .professional-single .lead { font-size: 17px; } #content .professional-single  h2 { font-size: 22px; }
.why-choose-section .supremeseal-logo-white {   height: 50px;}
.hero-title br {   display: none;}
.about-cards h6 { font-size: 22px; } 
.about-cards p:is(.hero-description) { font-size: 17px; }
 .card-side-icon { width: 60px; }
.product-card .supremeseal-logo { height: 80px; } 
#content .products .product-main-sec .product-features { font-size: 30px; } 
#content .products .card-footer:is(.product-features) { font-size: 18px; }
#content .single-product .top-hero img {  width: 100%;  height: 60px;}
.benefits-section h2 {  font-size: 28px;}
#content .single-product .benefit-description {   font-size: 20px;}
.benefits-section-parent .benefits-section .btn-download { padding: 15px; } .btn-download i , .download-link { width: 35px; height: 35px; font-size: 18px; padding: 5px; } #content .single-product .resources-title {font-size: 25px;} #content .single-product .resource-name { font-size: 20px; }
.product-features {   font-size: 30px;}
.hero-btn-parent .btn { font-size: 15px;  }
.benefits-section-parent .benefits-section .btn-download { font-size: 16px;    }
}
@media only screen and (max-width: 375px) {
.cta-section .cta-title , #content .about .top-hero .hero-title  , .section-title , .hero-title , .who-title , #content .products .hero-title , #content .products .section-title  , .professional .product-title , #content .professional-single .product-title , .product-main-sec .orange-title , #content .single-product .hero-title{ font-size: 24px; }
.hero-description, #content .about .top-hero .hero-description, .btn-talk-rep, .section-description, .who-subtitle , #content .single-product .hero-description{font-size: 16px;}
 .professional:not(.professional-single) .card h1 { font-size: 23px; } 
.professional .p-item { border-radius: 70px; min-height: 200px; }
.professional .btn-role  , .btn-role{ font-size: 15px; }
.contact-card .g-recaptcha>div {width: 100% !important;max-width: 310px !important;width: 310px !important;}
 .contact-card .g-recaptcha>div  iframe { width: 100%; }

}
@media only screen and (max-width: 360px) {

.contact-card .g-recaptcha>div {
        width: 100% !important;
        max-width: 310px !important;
        width: 310px !important;
        transform: scale(0.7);
        margin-left: -20px;
    }
}