@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --font-body: "Poppins";
  --font-heading: "Red Hat Display";

  --color-text: #000000;
  --color-accent: #451E94;

  --radius-in: 10px;
  --radius-sm: 20px;
  --radius-lg: 30px;
  --radius-btn: 70px;

  --shadow-sm: 0px 2px 20px 0px #0010281A;
  --shadow-lg: 0px 4px 16px 0px #001C4514;

  --primary-bg: #fff;
  --secondary-bg: #F0F2F5;
  
  --bg1-url: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/Vector-236.svg);
  --bg2-url: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/Vector-237.svg);
  --bg1a-url: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/Vector-236-1.svg);
  
  --l1l1440: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines1.svg);
  --l1l1024-url: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines1l1024.svg);
  --l1l800-url: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines1l800.svg);
  --l1l600: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines1l600.svg);
  --l1l400-url: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines1l400.svg);
  
  --l5l1440: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines5.svg);
  --l5l1024: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines5-1.svg);
  --l5l800: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines5-2.svg);
  --l5l600: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines5-3.svg);
  --l5l400: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines5-4.svg);
  --l5l300: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines5-5.svg);
  
  --l3l1440: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines3.svg);
  --l3l600: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines3-3.svg);
  --l3l300: url(https://webgoonz.com/idt/wp-content/uploads/2025/07/lines3-5.svg);
  
}

html {
  scroll-behavior: smooth;
}


body {
  font-family: var(--font-body);
  margin-bottom: 0px !important;
}


a.header-btn {
  color: #fff;
  text-decoration: none;
}

a.header-btn:hover {
  color: #fff;
  text-decoration: none;
}

.copyright {
    border-bottom: 2px solid #D0D4D9;
}

.copyright p {
font-family: Poppins;
font-weight: 400;
font-size: 14px;
line-height: 20px;
margin-bottom: 0%;
color: #B4B8BF;
}

.footer-links a {
text-decoration: none;
font-family: Poppins;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: #757980;
}

.social-links a {
    margin-right: 4px;
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 1200px !important;
  }
}

.h1-responsive {
  font-family: var(--font-heading);
  color: #000;
  font-weight: 900;
  font-size: 57px;
  line-height: 57px;
}

.h1-highlight {
  color: var(--color-accent);
}

.p2-xl-xs {
  font-weight: 400;
  font-size: 17px;
  margin-bottom: 0;
}

.p1-xl-xs {
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
}

.h2-responsive {
  font-family: var(--font-heading);
  color: #000;
  font-weight: 800;
  font-size: 57px;
  line-height: 57px;
}

.h4-responsive {
  font-family: "Red Hat Display";
  font-weight: 900;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 0px;
  color: #451E94;
}

.p3-responsive {
  font-family: "Poppins";
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0%;
  color: #000;
}

.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}

.p-32 {
  padding: 32px;
}

@media (max-width: 1024px) {
  .h1-responsive {
    font-size: 40px;
    line-height: 40px;
  }
  .h2-responsive {
    font-size: 40px;
    line-height: 40px;
  }
  .h4-responsive {
    font-size: 36px;
    line-height: 36px;
  }
  .p-lg-32 {
    padding: 32px;
  }
}

@media (max-width: 800px) {
  .h1-responsive {
    font-size: 36px;
    line-height: 40px;
  }
  .h2-responsive {
    font-size: 36px;
    line-height: 36px;
  }
  .h4-responsive {
    font-size: 36px;
    line-height: 36px;
  }
}

@media (max-width: 600px) {
  .h1-responsive {
    font-size: 36px;
    line-height: 36px;
  }
  .h2-responsive {
    font-size: 32px;
    line-height: 32px;
  }
  .h4-responsive {
    font-size: 32px;
    line-height: 32px;
  }
}

@media (max-width: 428px) {
  .h1-responsive {
    font-weight: 800;
    font-size: 32px;
    line-height: 32px;
  }
  .h2-responsive {
    font-size: 32px;
    line-height: 32px;
  }
  .h4-responsive {
    font-size: 28px;
    line-height: 28px;
  }
}

@media (max-width: 360px) {
  .h1-responsive {
    font-weight: 800;
    font-size: 32px;
    line-height: 32px;
  }
  .h2-responsive {
    font-size: 32px;
    line-height: 32px;
  }
  .h4-responsive {
    font-size: 28px;
    line-height: 28px;
  }
}

.header-btn {
  width: 110px;
  padding: 7px 0px;
  border-radius: 10px;
  background: #451E94;
  color: #fff;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
}

.gradient-purple {
  background: linear-gradient(142.56deg, #F8F5FF 16.25%, #ECE2FF 71.59%);
}

.gradient-green {
  background: linear-gradient(180deg, #E4F9E8 0%, #CCF4D3 100%);
}

.gradient-blue {
  background: linear-gradient(180deg, #E7F6FF 0%, #D9F1FF 100%);
}

.feature-strip {
  font-weight: 300;
  background-color: #45484D;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
}

.feature-icon {
  width: 36px;
  height: auto;
  margin-bottom: 8px;
}

.feature-list {
  font-size: 17px;
  font-weight: 400;
  margin-left: 36px;
}

.company-logos {
  background-color: #F0F2F5;
  border-radius: 20px;
}

.partner-logo {
  width: 100px;
}

@media (min-width: 768px) {
  .partner-logo {
    min-width: 100px;
  }
}

@media (min-width: 992px) {
  .partner-logo {
    min-width: 135px;
  }
}

.rounded-button {
  border-radius: 70px;
  background-color: #000;
  padding: 12px 20px;
  color: white;
  font-family: "Red Hat Display";
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.contact-form-home {
  background: #F1EAFF;
  border-radius: 30px;
  z-index: 2;
}

.custom-form {
  max-width: 570px;
  background: #fff;
  padding: 40px;
  border-radius: 30px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
}

.custom-form label {
  color: #757980;
  font-family: "Poppins";
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0%;
  vertical-align: middle;
}

.custom-form input::placeholder {
  color: #8d9299;
  font-family: "Poppins";
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0%;
  vertical-align: middle;
}

.custom-form input {
  font-family: "Poppins";
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #8D9299;
}

.custom-form .required {
  color: red;
}

.custom-form p {
  margin-bottom: 6px !important;
}

.custom-form .form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
  box-sizing: border-box;
}

.custom-form .name-row {
  display: flex;
  flex-wrap: nowrap;
}

.custom-form .name-row .col {
  flex: 1 1 48%;
}

.iti {
  width: 100%;
}

#phone {
  width: 100%;
  padding: 0px 12px 0px 120px !important;
  height: 44px;
  border: 1px solid #ddd !important;
  border-radius: 10px !important;
  font-size: 14px;
}

#fphone {
  width: 100%;
  padding: 0px 12px 0px 120px !important;
  height: 44px;
  border: 1px solid #ddd !important;
  border-radius: 10px !important;
  font-size: 14px;
}

#fmphone {
  width: 100%;
  padding: 0px 12px 0px 120px !important;
  height: 44px;
  border: 1px solid #ddd !important;
  border-radius: 10px !important;
  font-size: 14px;
}


.iti--separate-dial-code .iti__selected-dial-code {
  order: 5 !important;
  margin-left: 15px !important;
  padding-left: 10px;
  padding-top: 15.1px;
  border-left: 1px solid #ddd;
  height: 50px;
  font-size: 14px;
}

.iti--separate-dial-code .iti__selected-flag {
  order: 5 !important;
  padding-left: 20px !important;
  background-color: transparent !important;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  overflow: hidden;
}

.iti__arrow {
  order: 3 !important;
  margin-left: 10px !important;
  border-left: 6px solid transparent !important;
  border-right: 6px solid transparent !important;
  border-top: 6px solid #555 !important;
}

.iti__flag-container {
  padding-left: 10px;
}

.iti__country-list {
  z-index: 99999 !important;
}

.iti__flag {
  scale: 1.8 !important;
  width: 11px !important;
  border-radius: 50%;
  height: 10px !important;
}

.interest-options {
  margin-left: -18px;
}

.custom-form .interest-options label {
  display: inline-block;
  border-radius: 10px;
  padding: 8px 12px;
  border: 1px solid #D0D4D9;
  cursor: pointer;
  font-family: "Poppins";
  color: #000;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0%;
  vertical-align: middle;
  margin-bottom: 6px;
}

.custom-form .interest-options input[type="checkbox"] {
  display: none;
}

.custom-form .interest-options input[type="checkbox"]:checked + span {
  color: #451E94;
  font-weight: 800;
}

.btn-submit {
  margin: 16px 0px;
  width: 100% !important;
  padding: 10px 0px !important;
  border-radius: 10px !important;
  background: #451E94 !important;
  color: #fff !important;
  font-family: "Poppins" !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  text-align: center !important;
  transition: background 0.3s ease !important;
}

.btn-submit-1 {
  margin: 16px 0px;
  width: 70% !important;
  padding: 10px 0px !important;
  border-radius: 10px !important;
  border: 0px !important;
  background: #F9D054 !important;
  color: #000 !important;
  font-family: "Poppins" !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 24px !important;
  text-align: center !important;
  transition: background 0.3s ease !important;
}

.btn-submit:hover {
  color: #000 !important;
}

.wpcf7-spinner {
  display: none !important;
}

.stats-box {
  box-shadow: var(--shadow-lg);
  border-radius: 20px;
}

.p4-xl-ms {
  font-family: "Poppins";
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: #272A2E;
}

.pre-footer {
    background-color: #15191F;
    border-radius: 30px;
}








/* Default (desktop first) */
.responsive-background {
    max-width: 1400px;
    background-size: 89% 100%, 23% 100%;
    background-repeat: no-repeat, no-repeat;
    background-image: var(--bg1-url), var(--bg2-url);
    background-position: 0px 50px, right 5px top 80px;
}


.responsive-background-2 {
    max-width: 1370px;
    background-size: 98% 99%;
    background-repeat: no-repeat;
    background-image: var(--l5l1440);
    background-position: right 40px bottom -250px;
}
 
@media screen and (max-width: 1350px) and (min-width: 1200px) {
  .responsive-background {
      max-width: 1200px;
        background-size: 92% 99%, 21% 112%;
        background-position: 0px 100px, right 5px top 148px;
  }
}


/* ≤ 1024px */
@media screen and (max-width: 1200px) and (min-width: 992px) {
    .responsive-background {
        max-width: 1030px;
        background-image: var(--bg1a-url), var(--bg2-url);
        background-size: 93% 104%, 22% 126%;
  }
  
    .responsive-background-2 {
        max-width: 1024px;
        background-size: 100% 80%;
        background-image: var(--l5l1024);
        background-position: left 0px bottom -190px;
}

.h2-responsive {
    font-size: 40px;
    line-height: 40px;
}

.h1-responsive {
    font-size: 46px;
    line-height: 55px;
}

}

/* ≤ 768px */
@media screen and (max-width: 992px) and (min-width: 768px) {
  .responsive-background {
        max-width: 850px;
        background-image: var(--l1l800-url);
        background-size: 96% 148%;
  }

    .responsive-background-2 {
    max-width: 812px;
    background-size: 100% 85%;
    background-repeat: no-repeat;
    background-image: var(--l5l800);
    background-position: right 9px bottom -180px;
    }
}

/* Optional: ≤ 480px */
@media screen and (max-width: 768px) and (min-width: 580px) {
         .responsive-background {
       max-width: 640px;
        background-image: var(--l1l600);
        background-size: 91% 153%;
        background-position: left 37px top 82px;
  }
  
    .responsive-background-2 {
    max-width: 680px;
    background-size: 92% 107%;
    background-image: var(--l5l600);
    background-position: right 36px bottom -263px;
}


}

@media screen and (max-width: 580px) {
         
         .responsive-background {
                max-width: 680px;
        background-image: var(--l1l400-url);
        background-size: 44% 175%;
        background-position: right 0px top 0px;
         }
         
    .responsive-background-2 {
        max-width: 700px;
        background-size: 102% 113%;
        background-image: var(--l5l600);
        background-position: right 0px bottom -263px;
    }
}

.line-divider-1 img {
    min-width: 105px;
    max-width: 140px;
    width: 13vw;
    margin-top: -8px;
}

.line-divider-2 img {
    margin-top: -8%;
    min-width: 105px;
    max-width: 140px;
    width: 13vw;
}




.testimonial {
    background-size: 32% 60%;
    background-repeat: no-repeat;
    background-image: var(--l3l1440);
    background-position: right 5px top -31px;
}


.testimonial-section {
max-width: 1300px;
margin: 0px;
padding: 0px;
display: flex;
justify-content: space-between;
flex-direction: row;
border-radius: 30px;
}


.testimonial-box {
width: 42%;
}
  @media screen and (max-width: 1200px) and (min-width: 992px){
      
      .testimonial-box {
          width: 51%;
      }
      
      .testimonial-text {
          padding: 30px !important;
          margin: 15px 0px;
      }
      
      .testimonial-p {
        margin: 15px 0px 20px 0px;  
      }
      
      .people-left {
          transform: translateX(-39px);
      }
      
      .people-right {
          transform: translateX(39px);
      }
  }
  
.inverted-comma{
  position: absolute;
  margin-top: 90px;
  margin-left: 40px;
}
  
.testimonial-text {
position: relative;
margin-top: 128px;
border-radius: 20px;
padding: 40px;
box-shadow: 0px 2px 20px 0px rgba(0, 16, 40, 0.1);
}


.arrow-right {
cursor: pointer;    
  top: 40%;
  position: absolute;
  left:  96%;
  box-shadow: 0px 2px 20px 0px rgba(0, 16, 40, 0.1);
border-radius: 50px;
padding: 4px 5px;
 background-color: white;
}

.arrow-right img, .arrow-left img {max-width: 170px;}

.arrow-left {
cursor: pointer;    
  top: 40%;
   position: absolute;
  left:  -4%;
  box-shadow: 0px 2px 20px 0px rgba(0, 16, 40, 0.1);
border-radius: 50px;
padding: 4px 5px;
 background-color: white;
  transform: scaleX(-1);
}
   
   
 .testimonial-author{
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
    
.author-name{
 margin: 0px;
font-family: "Poppins";
font-weight: 600;
font-size: 20px;
line-height: 32px;
letter-spacing: 0%;

}
.author-desig {
margin: 0px;
font-family: "Poppins";
font-weight: 400;
font-size: 15px;
line-height: 24px;
color: #757980;
}

.testimonial-dots {
  text-align: center;
  margin-top: 20px;
}

.testimonial-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.testimonial-dots .dot.active {
  background-color: #451E94;
}


.people-left {
position: relative;
margin: 0px;
padding: 0px;
}

 
.people-right {
position: relative;
margin: 0px;
padding: 0px;
}


.people-left img  {
  position: absolute;
  max-width: 170px;
}
.people-right img {
position: absolute;
max-width: 170px;
}
  
.people1 {
  width: 70px;
  height: 70px;
  top: 65px;
  left: 146px;
}

.people2 {
  top: 181px;
  left: 9px;
  width: 60px;
  height: 60px;
}
    
.people3 {
  top: 214px;
  left: 126px;
  width: 110px;
  height: 110px;
}

.people4 {
  top: 348px;
  left: 49px;
  width: 76px;
  height: 76px;
}

.people5 {
  top: 136px;
  right: 60px;
  width: 70px;
  height: 70px;
}

.people6 {
  top: 199px;
  right: 176px;
  width: 70px;
  height: 70px;
}

.people7 {
  top: 262px;
  right: 0px;
  width: 60px;
  height: 60px; 
}

.people8 {
  top: 347px;
  right: 107px;
  width: 120px;
  height: 120px;
}

@media screen and (max-width: 992px) and (min-width: 768px) {
    
.testimonial {
    max-width: 800px;
    background-size: 32% 56%;
    background-image: var(--l3l600);
    background-position: right -12px top -37px;
}
    
.testimonial-box{
width: 71%;    
}   

.people1 {
  width: 70px;
  height: 70px;
  top: 15px;
  left: 211px;
}

.people2 {
display: none;
}
    
.people3 {
  top: 239px;
  left: 5px;
  width: 100px;
  height: 100px;
}

.people4 {
  top: 386px;
  left: 63px;
}

.people5 {
display: none;
}

.people6 {
  top: 34px;
  right: 76px;
}

.people7 {
  top: 129px;
  right: 13px;
}

.people8 {
  top: 360px;
  right: 17px;
  width: 100px;
  height: 100px;
}
    
}

@media screen and (max-width: 768px) and (min-width: 548px){
    
    .testimonial {
        background-size: 29% 56%;
        background-image: var(--l3l300);
        background-position: right 0px top -47px;
    }
    
    .testimonial-box {
        width: 89%;
    }
    
    .people5, .people7, .people2, .people4 {
        display: none;
    }
    
    .people3 {
        top: 412px;
        left: 40px;
        width: 90px;
        height: 90px;
    }
    
    .people8 {
        top: 386px;
        right: 30px;
        width: 100px;
        height: 100px;
    }
    
    .people1 {
        top: 57px;
        left: 327px;
        width: 80px;
        height: 80px;
    }

    .people6 {
        top: 93px;
        right: 35px;
        width: 80px;
        height: 80px;
    }

    .inverted-comma {
        margin-top: 105px;
        margin-left: 40px;
        width: 60px;
    }
    
}

@media (max-width: 350px) {
.testimonial {
        background-size: 57% 50%;
        background-image: var(--l3l300);
        background-position: right 0px top -38px;
    }
}

@media (max-width: 548px) {
    
    .testimonial {
        background-size: 32% 56%;
        background-image: var(--l3l300);
        background-position: right 0px top -38px;
        
    }

    
    .testimonial-box {
        width: 96%;
    }
    
    .testimonial-text {
        padding: 25px;
    }
    
    .people5, .people7, .people2, .people4 {
        display: none;
    }
    
    .inverted-comma {
        margin-top: 105px;
        margin-left: 40px;
        width: 45px;
    }

        .people3 {
        top: 95%;
        left: 28px;
        width: 80px;
        height: 80px;
    }
    
    .people8 {
        top: 92%;
        right: 31px;
        width: 80px;
        height: 80px;
    }
    
    .people1 {
        top: 57px;
        width: 80px;
        height: 80px;
    }

    .people6 {
        top: 13%;
        right: 0px;
        width: 80px;
        height: 80px;
    }
    
}