@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700,800&display=swap);
 @import url(../fonts/bignoodletitling_font.css);

 * {
     margin: 0;
     padding: 0
 }

 :root {
     --clr-white: hsl(0, 0%, 100%);
     --clr-Off-white: hsl(0, 0%, 96%);
     --clr-grey: hsl(0, 0%, 55%);
     --clr-black: rgba(81, 82, 83, 1);
     --clr-black-blue: hsl(234.7, 45.9%, 14.5%);
     --clr-blue: rgb(7 155 203);
     --clr-blue-bright: rgb(8 189 232);
     --clr-blue-dark: rgb(9 130 182);
     --clr-orange: hsl(25, 100%, 60%);
     --clr-red: #f54748;
     --clr-green: #8dc96b;
     --shadow-light: 0 0 20px hsla(0, 0%, 0%, 0.05);
     --shadow-small: 0 0 20px hsla(0, 0%, 0%, 0.09);
     --shadow-regular: 7px 7px 20px hsla(0, 0%, 0%, 0.07);
     --gradient-transparent: linear-gradient(to bottom right, transparent, var(--clr-white));
     --gradient-blur: linear-gradient(to bottom right, hsla(0, 0%, 100%, 0.7), var(--clr-white));
     --font-primary: "Open Sans", sans-serif;
     --font-secondary: "BigNoodleTitling";
     --fw-regular: 400;
     --fw-medium: 500;
     --fw-semi-bold: 600;
     --fw-bold: 700;
     --fw-extra-bold: 900;
     --fs-xs: clamp(15rem, 1.04vw, 16rem);
     --fs-small: clamp(16.5rem, 1.17vw, 18rem);
     --fs-regular: clamp(17.75rem, 1.3vw, 20rem);
     --fs-medium: clamp(21rem, 1.62vw, 25rem);
     --fs-large: clamp(38rem, 2.92vw, 45rem);
     --fs-xl: clamp(62rem, 5.53vw, 82rem);
     --fs-bg: clamp(180rem, 13.99vw, 215rem);
     --lh-xs: clamp(22rem, 1.69vw, 26rem);
     --lh-small: clamp(24rem, 1.82vw, 28rem);
     --lh-regular: clamp(27rem, 2.08vw, 32rem);
     --lh-medium: clamp(32rem, 2.27vw, 35rem);
     --lh-large: clamp(48rem, 3.58vw, 55rem);
     --lh-xl: clamp(72rem, 5.85vw, 87rem);
     --lh-bg: clamp(190rem, 14.64vw, 225rem);
     --pad-page: 8%;
     --scrollbar-dimention: 15px
 }

 body {
     font-family: var(--font-primary) !important;
     font-size: 14px;
     overflow-x: hidden
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 a {
     color: var(--clr-black);
     font-size: 14px
 }

 a {
     text-decoration: none !important
 }

 a:hover {
     color: inherit
 }

 a:focus {
     outline: none
 }

 @media (max-width: 850px) {
     .Side-Nav {
         background-color: hsla(0, 0%, 0%, 0.6);

     }
 }

 .main_header {
     padding: 10px 0 !important;
 }

 .main_header.Scroll {
     padding: 5px 0 !important;
 }

 .custom_paddy {
     padding: 80px 0px;
 }

 @media(max-width:991px) {
     .custom_paddy {
         padding: 60px 0px;

     }
 }

 @media(max-width:768px) {
     .custom_paddy {
         padding: 40px 0px;

     }
 }

 .sectionDetails {
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
     color: var(--clr-grey);
     text-align: center;
     margin: 10px auto;
     margin-bottom: 45px;
 }

 @media(max-width:768px) {
     .sectionDetails {
         margin-bottom: 35px;
     }
 }

 @media(max-width:768px) {
     .hero-section {
         margin-bottom: 0px;
     }
 }

 .container {
     padding: 0px 15px !important;
 }

 /* custom site button */

 .button-primary {
     background-color: var(--clr-blue);
     color: var(--clr-white);
     border: none;
 }

 .button {
     display: inline-flex;
     align-items: center;
     padding: 12px 40px;
     font-weight: 500;
     border-radius: 6px;
     text-decoration: none;
     cursor: pointer;
     transition: all 0.3s ease;
     font-size: 16px;
     max-width: fit-content;
 }

 .button:hover {
     background-color: var(--clr-blue-bright);
     color: var(--clr-white);
     transition: all 0.3s ease;
 }

 .button i {
     margin-left: 10px;

 }

 .button:hover i {
     transform: translateX(5px);
 }

 .button:hover span {
     transform: translateX(-5px);
 }


 /* Hero Section */

 .hero-section {
     position: relative;
     height: fit-content;
     width: 100%;
     overflow: hidden;
     padding-top: 70px;
     padding-bottom: 50px;
     margin-top: 90px;
     background-image: url(../image/mobile-herro.png);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;

 }

 @media(max-width:850px) {
     .hero-section {
         margin-top: 80px;
     }
 }

 .breadcrumb_box {
     margin-bottom: 20px;
 }

 .breadcrumb_box ul {
     display: flex;
     flex-wrap: wrap;
 }

 .breadcrumb_box ul li {
     padding-right: 5px;
 }

 .breadcrumb_box ul li a {
     color: var(--clr-black);
 }

 .breadcrumb_box ul li i {
     font-size: 16px;
     padding-left: 5px;
     color: var(--clr-black);
 }

 @media (max-width: 768px) {
     .hero-section .sectionTitle {
         font-size: 40px;

     }
 }

 @media(max-width:1024px) {
     .hero-section .sectionTitle {
         text-align: center;
     }
 }

 .hero-section .grid-layout {
     display: grid;
     grid-template-columns: 1fr;
     gap: 48px;
     align-items: center;
 }

 @media (min-width: 1024px) {
     .hero-section .grid-layout {
         grid-template-columns: 1fr 1fr;
     }
 }

 .hero-section .content-area {
     align-items: center;
     display: flex;
     flex-direction: column;
     gap: 32px;
 }

 @media(min-width:1024px) {
     .hero-section .content-area {
         align-items: start;
     }
 }

 .hero-section .content-area .description {
     font-size: 18px;
     color: var(--clr-black);
     line-height: 1.50;
     margin-top: 30px;
     text-align: center;
 }

 @media(min-width:1024px) {
     .hero-section .content-area .description {
         text-align: left;
     }

 }

 .hero-section .mockup-container img {
     float: right;

 }

 .hero-section .mockup-container img {
     width: 100%;
     height: auto;
 }

 @media(min-width:1024px) {

     .hero-section .mockup-container img {
         width: auto;
         height: 450px;
         float: right;
     }
 }

 @media(max-width:1024px) {
     .hero-section .mockup-container {
         margin: auto;
     }
 }

 /* Benefits Section */
 .benefits-section {
     background-color: #f7f7f7;
     position: relative;
     overflow: hidden;
 }

 .benefits-section .header {
     text-align: center;
     max-width: 768px;
     margin: 0 auto 0px;

 }

 .benefits-section .benefits-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 15px;
     grid-template-columns: repeat(2, 1fr);

 }

 @media (min-width: 768px) {
     .benefits-section .benefits-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 25px;
     }
 }

 @media (min-width: 1024px) {
     .benefits-section .benefits-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .benefits-section .benefit-card {
     padding: 20px;
     text-align: center;
     border: 1px solid #E0E0E0;
     border-radius: 12px;
     background-color: var(--clr-white);
     transition: all 0.3s ease;
 }

 @media(min-width:768px) {
     .benefits-section .benefit-card {
         padding: 32px;
     }
 }

 .benefits-section .benefit-card:hover {
     border: 1px solid var(--clr-blue);
 }

 .benefits-section .benefit-card .icon-container {
     width: 48px;
     height: 48px;
     background-color: var(--clr-blue);
     border-radius: 8px;
     display: flex;
     margin: auto;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
     transition: transform 0.3s ease;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }

 .benefits-section .benefit-card .icon-container i {
     color: var(--font-primary);
     font-size: 24px;
     color: var(--clr-white);

 }

 .benefits-section .benefit-card h3 {
     font-size: 20px;
     font-weight: 600;
     color: var(--clr-grey);
     margin-bottom: 12px;

 }

 .benefits-section .benefit-card:hover h3 {
     color: var(--clr-blue);
 }

 .benefits-section .benefit-card p {
     color: var(--clr-grey);
     line-height: 1.75;
 }

 .benefits-section .accent-line {
     margin-top: 16px;
     height: 4px;
     width: 0;
     background-color: var(--clr-blue);
     border-radius: 2px;
     transition: width 0.3s ease;
 }

 .benefits-section .benefit-card:hover .accent-line {
     width: 100%;
 }

 /* App Features */
 .app-features {
     background-color: var(--clr-white);
     position: relative;
     overflow: hidden;
 }

 .app-features__header {
     text-align: center;
     max-width: 850px;
     margin: 0 auto 0px;

 }

 .app-features__description {
     font-size: 18px;
     color: #6b7280;
 }

 .app-features__grid {
     display: grid;
     gap: 15px;
     grid-template-columns: repeat(2, 1fr);
 }

 @media (min-width: 768px) {
     .app-features__grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 25px;
     }
 }

 @media (min-width: 1024px) {
     .app-features__grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .app-features__card {
     position: relative;
     background-color: var(--scrollbar-dimention);
     border-radius: 16px;
     padding: 20px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     border: 1px solid #f3f4f6;
 }

 @media(min-width:768px) {
     .app-features__card {
         padding: 32px;
     }
 }


 .app-features__card:hover {
     box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
     border-color: #bfdbfe;
 }

 .app-features__icon-container {
     width: 70px;
     height: 70px;
     border-radius: 16px;
     padding: 16px;
     margin-bottom: 24px;
     background-color: var(--clr-blue);
     transition: transform 0.3s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 @media(max-width:768px) {
     .app-features__icon-container {
         width: 50px;
         height: 50px;
     }

 }

 .app-features__card:hover .app-features__icon-container {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .app-features__icon {
     width: 35px;
     height: 35px;
 }

 @media(max-width:768px) {
     .app-features__icon {
         width: 20px;
         height: 20px;
     }
 }

 .app-features__card-title {
     font-size: 20px;
     font-weight: 700;
     color: var(--clr-black);
     margin-bottom: 12px;

 }

 .app-features__card:hover .app-features__card-title {
     color: var(--clr-blue);
 }

 .app-features__card-description {
     color: var(--clr-grey);
     line-height: 1.625;
 }

 /* Services Section */
 .services-section {
     background-color: #f9fafb;
 }

 .services-section .header {
     text-align: center;
     max-width: 768px;
     margin: 0 auto 0px;

 }

 .services-section .app-types {
     display: grid;
     grid-template-columns: 1fr;
     gap: 25px;
 }

 @media (min-width: 768px) {
     .services-section .app-types {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 .services-section .app-types .app-type-card {
     text-align: center;
     position: relative;
     padding: 32px;
     background-color: #ffffff;
     border-radius: 12px;
     border: 1px solid #e5e7eb;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: box-shadow 0.3s ease;
 }

 .services-section .app-types .app-type-card:hover {
     box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
     border: 1px solid var(--clr-blue);
 }

 .services-section .app-types .app-type-card .badge {
     position: absolute;
     top: 16px;
     right: 16px;
     display: inline-flex;
     align-items: center;
     padding: 4px 12px;
     border-radius: 9999px;
     font-size: 12px !important;
     font-weight: 500;
     color: var(--clr-white);
     background-color: var(--clr-grey);
 }

 .services-section .app-types .app-type-card .icon-container {
     width: 0px;
     height: 0px;
     background-color: var(--clr-blue);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 24px;

 }

 .services-section .app-types .app-type-card .icon-container svg {
     width: 32px;
     height: 32px;
     color: var(--clr-white);
 }

 .services-section .app-types .app-type-card h3 {
     font-size: 24px;
     font-weight: 600;
     color: var(--clr-black);
     margin-bottom: 16px;

 }

 .services-section .app-types .app-type-card p {
     font-size: 16px;
     color: var(--clr-grey);
     line-height: 1.75;
 }

 /* Process Section */
 .process-section {
     background-color: #ffffff;
     position: relative;
     overflow: hidden;
 }

 .process-section .header {
     text-align: center;
     max-width: 768px;
     margin: 0 auto 0px;
 }

 .process-section .step-grid {
     display: grid;
     gap: 25px;
     grid-template-columns: 1fr;



 }

 @media (min-width: 768px) {
     .process-section .step-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (min-width: 1400px) {
     .process-section .step-grid {
         grid-template-columns: repeat(5, 1fr);
     }
 }

 .process-section .step {
     position: relative;
     border-radius: 16px;
     padding: 32px;
     border: 1px solid #E0E0E0;
 }



 .process-section .step:hover {
     border: 1px solid var(--clr-blue);
 }

 .process-section .step .icon-container {
     position: relative;
     margin-bottom: 24px;
     width: 0px;
     height: 0px;
     margin-left: auto;
     margin-right: auto;
     background-color: var(--clr-white);
     color: var(--clr-blue);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.3s;
 }

 .process-section .step .icon-container .icon {
     font-size: 32px;
     color: var(--clr-blue);
     transition: color 0.3s;
     margin-top: 5px;
 }

 .process-section .step .content {
     text-align: center;
 }

 .process-section .step .content h3 {
     font-size: 20px;
     font-weight: 700;
     color: var(--clr-black);
     margin-bottom: 16px;

 }

 .process-section .step:hover .content h3 {
     color: var(--clr-blue);
 }

 .process-section .step p {
     color: var(--clr-grey);
 }


 /* why choose us section */

 .why-choose-us {
     background-color: #f9fafb;
 }

 .why-choose-us .header {
     text-align: center;
     max-width: 768px;
     margin: 0 auto 0px;

 }

 .counter-grid {
     max-width: 960px;
     margin: auto
 }

 .counter-grid ul {
     padding: 0;
     margin: 0;
     list-style: none;
     display: flex;
     flex-wrap: wrap
 }

 .counter-grid ul li {
     display: flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 auto;
     width: 33.33333333%;
     font-size: 20px;
     font-weight: 500;
     max-width: 100%;
     padding: 30px 25px;
     text-align: center;
     min-height: 200px
 }

 .counter-grid ul li:nth-child(2),
 .counter-grid ul li:nth-child(4),
 .counter-grid ul li:nth-child(6) {
     background: var(--clr-blue);
     color: var(--clr-white);
 }

 .counter-grid ul li:nth-child(2) p,
 .counter-grid ul li:nth-child(4) p,
 .counter-grid ul li:nth-child(6) p {
     color: var(--clr-white);
 }

 .counters_block {
     text-align: center;
     margin: 15px 0
 }

 .counters_block .count {
     font-size: 48px;
     line-height: 32px;
     font-weight: 700
 }

 .counters_block .fact-symbol {
     font-size: 48px;
     line-height: 50px;
     font-weight: 700
 }

 .counters_block .fact-symbol.text {
     padding: 0 10px
 }

 .counters_block p {
     margin: 20px 0 0;
     font-size: 20px
 }

 @media (max-width: 992px) {

     .counter-grid ul li:nth-child(2),
     .counter-grid ul li:nth-child(3),
     .counter-grid ul li:nth-child(6) {
         background: var(--clr-blue);
         color: #fff;
     }
 }

 @media (max-width: 992px) {

     .counter-grid ul li:nth-child(2) p,
     .counter-grid ul li:nth-child(3) p,
     .counter-grid ul li:nth-child(6) p {
         color: #fff;
     }
 }

 @media (max-width: 992px) {
     .counter-grid ul li:nth-child(4) .fact-symbol {
         color: #212529;
     }
 }

 @media (max-width: 992px) {
     .counter-grid ul li:nth-child(4) {
         background-color: #eee;
     }
 }

 @media (max-width: 992px) {
     .counter-grid ul li:nth-child(4) p {
         color: var(--clr-black);
     }
 }

 @media (max-width: 992px) {
     .counter-grid ul li {
         width: 50%;
         background-color: #eee;
     }
 }

 @media (max-width: 768px) {
     .counter-grid ul li {
         min-height: auto;
         padding: 15px;
     }
 }

 @media (max-width: 768px) {
     .counters_block .count {
         font-size: 30px;
     }
 }

 @media (max-width: 768px) {
     .counters_block p {
         font-size: 14px;
         line-height: 16px;
         margin: 0;
     }
 }

 @media (max-width: 768px) {
     .counters_block .fact-symbol {
         font-size: 24px;
     }
 }


 /* FAQ Section */

 /* FAQ Section */
 .faq-section {
     background-color: #ffffff;
 }

 .faq-section .max-w-3xl {
     max-width: 768px;
     margin: 0 auto;
 }

 .faq-section .accordion {
     display: flex;
     flex-direction: column;
     gap: 16px;

 }

 .faq-section .accordion-item {
     background-color: #ffffff;
     border-radius: 8px !important;
     border: 1px solid #e2e8f0 !important;
     padding: 24px;

 }

 .faq-section .accordion-trigger {
     display: flex;
     justify-content: space-between;
     gap: 10px;
     width: 100%;
     padding: 0;
     background: none;
     border: none;
     font-size: 18px;
     font-weight: 600;
     color: var(--clr-black);
     text-align: left;
 }

 .faq-section .accordion-trigger:hover {
     color: var(--clr-blue);
 }

 .faq-section .accordion-trigger::after {
     content: '+';
     font-size: 20px;
     transition: transform 0.5s ease;
 }

 .faq-section .accordion-trigger.active::after {
     transform: rotate(45deg);
     transition: all 0.5s ease-in;
 }

 .faq-section .accordion-content {
     display: none;
     color: var(--clr-grey);
     line-height: 1.625;
     padding-top: 16px;
     font-size: 16px;
 }

 .faq-section .accordion-content.active {
     display: block;
     transition: all .5s ease-in;
 }

 /* CTA Section */
 .cta-section {
     background-color: var(--clr-blue-dark);
     position: relative;
     overflow: hidden;
 }

 .cta-section .Section-Title {
     color: var(--clr-white) !important;
 }

 .cta-section .subtitle {
     font-size: 20px;
     color: var(--clr-white);
     margin-bottom: 32px;
     padding-top: 15px;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }

 .cta-section .content {
     text-align: center;
     max-width: 1056px;
     margin: 0 auto;
 }

 .cta-section .icon-container {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
     background-color: var(--clr-white);
     border-radius: 12px;
     margin-bottom: 24px;
     transition: transform 0.3s ease;
 }

 .cta-section .feature:hover .icon-container {
     transform: scale(1.1);
 }

 .cta-section .icon-container .icon {
     width: 28px;
     height: 28px;
     color: var(--clr-blue);
 }

 .cta-section .button-primary {
     background-color: var(--clr-white);
     color: var(--clr-blue);
 }

 .cta-section .features {
     display: grid;
     gap: 25px;
     text-align: center;
     margin-top: 48px;
 }

 @media (min-width: 768px) {
     .cta-section .features {
         grid-template-columns: repeat(3, 1fr);
     }

     .cta-section .cta-section {
         padding: 80px 0px;
     }
 }

 .cta-section .feature {
     transition: all 0.3s ease;
 }

 .cta-section .feature:hover {
     transform: scale(1.05);
 }

 .cta-section .feature-title {
     font-size: 24px;

     font-weight: 700;
     color: var(--clr-white);
     margin-bottom: 8px;

 }

 .cta-section .feature-text {
     color: var(--clr-white);
     font-size: 16px;
 }

 /* contact us section */
 .contact-section {
     background-color: #f9fafb;
 }

 .contact-section .content-grid {
     display: grid;
     gap: 48px;
 }

 @media (min-width: 991px) {
     .contact-section .content-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 .contact-section .left-column {
     display: flex;
     flex-direction: column;
     gap: 32px;
 }

 .contact-section .heading {
     font-size: 36px;
     font-weight: 700;
     margin-bottom: 16px;
 }

 .contact-section .description {
     font-size: 18px;
     color: var(--clr-grey);
     line-height: 1.50;
 }

 .contact-section .contact-info {
     display: flex;
     flex-direction: column;
     gap: 24px;
 }

 .contact-section .contact-info .contact-item {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .contact-section .contact-info .contact-item .icon-container {
     width: 48px;
     height: 48px;
     background-color: var(--clr-blue);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .contact-section .contact-info .contact-item .icon-container .icon {
     width: 24px;
     height: 24px;
     color: var(--clr-white);

 }

 .contact-section .contact-info .contact-item .contact-label {
     font-weight: 600;
     font-size: 16px;
     color: var(--clr-black);
 }

 .contact-section .contact-info .contact-item .contact-value a {
     color: var(--clr-black) !important;
     font-size: 16px !important;
 }


 .contact-section .form-container {
     background-color: var(--clr-white);
     backdrop-filter: blur(4px);
     border-radius: 16px;
     padding: 32px;
     border: 1px solid var(--clr-blue);
 }

 .contact-section .form-heading {
     font-size: 24px;
     font-weight: 600;
     margin-bottom: 24px;
 }


 .contact-section .contact-form {
     display: flex;
     flex-direction: column;
     gap: 24px;
     position: relative;
 }


 .contact-section .contact-form .form-grid {
     display: grid;
     gap: 16px;
     position: relative;
 }

 @media (min-width: 768px) {
     .contact-section .contact-form .form-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 .contact-section .contact-form .form-group {
     display: flex;
     flex-direction: column;
     position: relative;
 }

 .contact-section .contact-form .form-group .form-label {
     color: var(--clr-black);
     margin-bottom: 8px;
     font-size: 14px;
     font-weight: 500;
 }

 .contact-section .contact-form .form-group .form-input {
     height: 40px;
     width: 100%;
     border-radius: 6px;
     border: 1px solid var(--clr-grey);
     background-color: rgba(255, 255, 255, 0.2);
     color: var(--clr-black);
     padding: 8px 12px;
     font-size: 16px;
     outline: none;
     transition: border-color 0.2s ease;
 }

 .contact-section .contact-form .form-group .form-input:focus {
     border-color: #22d3ee;
 }

 .contact-section .contact-form .form-group .form-input::placeholder {
     color: var(--clr-black);
     font-size: 14px;
 }

 .contact-section .contact-form .form-group .form-textarea {
     width: 100%;
     border-radius: 6px;
     border: 1px solid var(--clr-grey);
     background-color: rgba(255, 255, 255, 0.2);
     color: var(--clr-black);
     padding: 8px 12px;
     font-size: 14px;
     outline: none;
     transition: border-color 0.2s ease;
     min-height: 120px;
     resize: vertical;
 }

 .contact-section .contact-form .form-group .form-textarea:focus {
     border-color: #22d3ee;
 }

 .contact-section .contact-form .form-group .form-textarea::placeholder {
     color: var(--clr-black);
     font-size: 14px;
 }

 .contact-section .errormssgg {
     color: red;
     font-size: 12px !important;
     position: absolute;
     bottom: -22px;
 }

 .contact-section #messagesuccessmessgae {
     color: green;
     font-size: 14px !important;
     position: absolute;
     bottom: -25px;
     font-weight: 600;
 }