/* root css */
:root {
    --blue: #021067;
    --white: #ffffff;  
    --light-red:#E31319;
    --light-black:#000000c7;
    --black:000000;
  }
body,
p,
span {
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
}
a.header-bnt.btn.btn-white-shadow:hover{
    background-color: var(--light-red); 
    color: var(--white);
}
 .dark-blue-bg{
    background-color: var(--blue);
 }
 .btn-white-shadow{
    background-color: var(--white);
    color: var(--light-red);
 }
p:empty {
    display: none;
} 
a {
    text-decoration: none;
}
.btn {
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    text-transform: capitalize;
}
.header-btn a {
    padding: 10px 20px;
    box-shadow: 0 4px 7px 0 #6c0f12;
}
ul li {
    list-style: none;
}
ul.navbar-nav li a,
ul.navbar-nav li a span {
    color: var(--white);
    font-size: 22px;
    font-weight: 500;
    margin: 0 16px;
}
.py-50 {
    padding: 50px 0;
}
a.navbar-brand {
    margin: 0;
}
 .mont-family, .more-update-row h3, .more-update-row h3 span{
   font-size:40px;
    font-family: 'Mont-HeavyDEMO';
    text-transform: uppercase; 
 }
@font-face {
    font-family: 'Mont-HeavyDEMO'; 
    src: url('../font/Mont-HeavyDEMO.woff') format('woff');
}
h1, h1 span, h2,h3,h4{
    font-family:Mont-HeavyDEMO;
}
/* header */
nav.navbar {
    padding: 15px 0;
}
div#navbarSupportedContent {
    display: none !important;
}
/* BANNER CSS */

.inner-banner-colom-info h1 span {
    font-size: 45px;
    letter-spacing: 1px;
} 
.banner-listing ul li {
    display: inline-block;
    width: 49%;
    position: relative;
    font-size: 18px;    font-weight: 600;
    padding-left: 33px;
    margin: 8px 0;
}
.banner-listing ul li:before {
    background: url(../../../../../wp-content/uploads/2025/01/Group-49-1.svg) no-repeat;
    content: " ";
    display: block;
    padding: 18px;
    position: absolute;
    left: 0;
}
.banner-button.header-btn a.header-bnt {
    padding: 10px 30px;
}
.banner-listing  ul {
    padding: 0;
}
.inner-banner-colom-info.gif-video img {
    object-fit: contain;    height: 600px;
}
/* OUR FEATURES */
.border-radius-container {
    border-radius: 31px;
}
.top-heading-features.text-center.pt-4 h2 span {
    font-size:40px;  font-family: 'Mont-HeavyDEMO'; 
    text-transform: uppercase;
    color: var(--light-black);
}
.inner-features-colom h5 span {
    font-family: 'Mont-HeavyDEMO';
    border: 3px solid var(--light-red);
    border-radius: 5px;
    padding: 0 15px;
    color: var(--light-red);
}
.inner-features-colom h3 {
    font-size: 23px;
    margin: 20px 0 10px;
    color: var(--light-black);
    text-transform: capitalize;
}
.inner-features-colom .content, .inner-features-colom .content p {
    font-size: 20px;
    color: var(--black);
    line-height: 24px;
}
section.our-features-section h2 span:after {
    background: var(--light-red);
    display: block;
    width: 65%;
    height: 3px;
    content: " ";
    position: absolute;
    right: 0;
}
section.our-language-section h2 span:after {
    background: var(--light-red);
    display: block;
    width: 29%;
    height: 3px;
    content: " ";
    position: absolute;
    right: 0;
}
.language-title h3 {
    font-size:19px;
    margin: 13px 0;
    text-transform: capitalize;
}
.inner-features-colom.language-title img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    border-radius: 21px;
}
/* WHY statto */
section.why-statto-section .inner-features-colom img {
    height: 320px;
}
section.why-statto-section .row:nth-child(even) {
    flex-direction: row-reverse;
}
section.why-statto-section h2 span.position-relative:after{
    background: var(--light-red);
    display: block;
    width: 58%;
    height: 3px;
    content: " ";
    position: absolute;
    right: 0; 
}
.card-header a.btn.w-100 {
    display: flex;
    border: none;
    font-weight: 600;
    justify-content: space-between;
    font-size: 16px;
}
.card-header, .card {
    background: transparent;
    border: none; 
    border-radius: 0;
    box-shadow: none !important;
}
 .card {
    border-bottom: 1px solid #a2afff7d;
    box-shadow: none !important;
}
.card-body, .card-body  p {
    font-weight: 300;
}
.card:last-child {
    border: none;
}
span.position-relative.text-white.mont-family.faq-sec:after{
    background: var(--light-red);
    display: block;
    width: 37%;
    height: 3px;
    content: " ";
    position: absolute;
    right: 0; 
}
.row.border-radius{
    border: 2px solid #E31319;
    padding: 13px;
    border-radius: 14px;
}
.col-12.bg-white.cstm-bg-radius {
    border-radius: 14px;
    padding: 40px 40px 0;
}
.inner-more-update-form input {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #e31319c2;
    padding: 4px 13px;
    color: #000;
    outline: none !important;
    box-shadow: none !important;
}
.inner-more-update-form .wpcf7-submit {
    background: #e31319;
    color: #fff;
    text-transform: capitalize;
}
.more-update-row img {
    height: 310px;
    object-fit: contain;
}


/* FOOTER */
ul#menu-footer-menu {
    display: flex;
    gap: 40px;
}
.row.border-radius-footer.bg-white {
    border-radius: 14px;
    padding: 30px 20px 20px;
}
ul#menu-footer-menu li a {
    color: #333;
    font-size: 15px;
    font-weight: 700;
}
.social-icon ul {
    display: flex;
    padding: 0;
    gap: 17px;
    justify-content: end;
}
.inner-footer-colom.footer-logo  img {
    width: 120px;
}
.footer-copy-right-section.text-center {
    font-size: 14px;
}
section.more-update-section .wpcf7-response-output {
    margin: 0;
}


/* BREAK POINT MEDIA QUERY */
@media screen and (min-width:768px) and (max-width:998px) {
	section.faqs.home_page_faq_section {
    padding: 29px 0 0;
}
	ul#menu-footer-menu li a {
    font-size: 11px; 
}
	ul#menu-footer-menu {
    gap: 14px;        padding: 0;
}
    .inner-features-colom.language-title h3.text-white {
        font-size: 13px;
    }
    .inner-features-colom.language-title img {
        height: 102px; 
    }
    .inner-features-colom .content, .inner-features-colom .content p {
        font-size: 15px; 
    }
    .inner-features-colom h3 {
        font-size: 22px; 
    }
    .banner-listing ul li {
        font-size: 13px;
    }
    .inner-banner-colom-info h1 span {
        font-size:29px;
    }}
@media screen and (min-width:1200px) and (max-width:1399px) {
.banner-listing ul li { 
    font-size: 17px; 
}
.inner-banner-colom-info h1 span {
    font-size: 49px; 
}}
@media screen and (min-width:999px) and (max-width:1199px) {
.banner-listing ul li {
    font-size: 13px;
}
.inner-banner-colom-info h1 span {
    font-size: 41px;
}}
@media screen and (min-width:320px) and (max-width:767px) {
    .inner-features-colom .content, .inner-features-colom .content p {
        font-size: 14px; 
    }
	.row.border-radius-footer.bg-white { 
    margin: 0;
}
	.footer-copy-right-section.text-center {
    text-align: left !important;
}
	.social-icon ul { 
    justify-content: normal;
}
	section.banner-section.position-relative {
    padding: 50px 0 !important;
}
	ul#menu-footer-menu {
    display: block;        padding: 0;
}
    section.why-statto-section .inner-features-colom img {
        height: 180px;
    }
    section.why-statto-section .inner-features-colom.language-title h3.text-white {
        font-size: 23px;        text-align: left;
    }
    .inner-banner-colom-info.gif-video.mobile-display-none-image {
        display: none;
    }
    .inner-banner-colom-info.gif-video.mobile-displayblock-image {
        display: block !important;
    }
    .inner-features-colom.language-title h3.text-white {
             font-size: 26px;
        text-align: center;
    }
    .inner-features-colom.language-title img {
        height: 220px; 
    }
    section.our-language-section.dark-blue-bg.pb-5 .col-xs-6 {
        width: 50%;
    }
    .language-title h3 {
        font-size: 24px; 
    }
    .top-heading-features.text-center.pt-4 h2 span, .mont-family{
        font-size: 35px; 
    }
    .top-heading-features.text-center.pt-4 {
        padding: 0;
    }
    button.navbar-toggler {
        display: none;
    }
    .inner-banner-colom-info h1 span {
        font-size: 31px; 
    }
    .banner-listing ul li { 
        font-size: 14px; 
        padding-left: 32px; 
    }
} 