@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      
}

body {
  
  margin: 0;
  padding: 0;
      background-color: #f5f8ff;
}
  
header {
  position: relative;
}
 

nav{
display: flex;
align-items: center;
justify-content: space-around;
}
.nav-logo{
      color: #4E47FF;
      font-family: inter;
      font-size: 34px;
      font-weight: 900;
      line-height: 150px;
}

.btn-primary{
      background-color: #4E47FF;
      color: white;
      padding: 12px 36px;
      border-radius: 7px;
      border: none;
      font-family: Raleway;
      font-size: 16px;
      font-weight: bold;
      cursor:pointer;
}
.btn-primary:hover{
      background-color: #0800ff;
      transition: background 0.3s;
}

.banner-background-image{
      background-image: url('../Assets/Hero-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  width: 100%;
  height: 700px;     
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  z-index: -1;
  margin-bottom: 125px;
}


.banner{
      margin-top: 150px;
      margin-bottom: 15px;
      color: #252432;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
}
.banner h1{
      font-size: 65px;
      font-family: Raleway;
            margin-bottom: 30px;

}

/* section-1 */


.section-1{
display: flex;
align-items: center;
justify-content:space-between;
width: 1140px;
height: 328px;
margin: 350px auto 120px auto;
}

.section-1-content h2{
font-size: 42px;
font-weight: bold;
font-family: Raleway;
margin-bottom: 25px;
}
.section-1-content p{
      color: rgb(37, 36, 50, 50%);
      font-size: 24px;
      font-weight: normal;
      font-family: raleway;
      margin-bottom: 20px;

}
.section-1-image{
background-image: url(../Assets/wc-mini.png);
width: 403px;
height: 328px;
border-radius: 30px;
}


/* section-2 */


.section-2{
      background-color: rgb(78, 71, 255, 10%);
      width: 1140px;
      height: 306px;
      border-radius: 25px;
      padding: 50px;
      margin: 0 auto;
      margin-bottom: 120px;
}

.section-2-content h1{
font-size: 38px;
font-family: raleway;
color: #252432;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
margin-bottom: 40px;
}

.section-2-content-data{
      display: flex;
text-align: center;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 80px;
font-family: inter;
color: #4E47FF;
gap: 180px;
}
.section-2-content-data-sub{
      font-size: 20px;
      font-weight: normal;
      color: rgb(37, 36, 50, 50%);
}



/* section-3 */

.section-3{
      width: 1140px;
      margin: 0 auto;
      margin-bottom: 125px;
}

.section-3-tilte{
      font-size: 42px;
  margin-bottom: 40px;
  font-weight: bold;
  font-family: raleway;
  color:#252432;
  text-align: center;
}
.section-3-cards{
      display: flex;
      justify-content: space-between;
      gap: 40px;     
}

.section-3-card{
      background-color: white;
  border-radius: 15px;
  padding: 25px;
  width: 360px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.section-3-star-img{
      padding-bottom: 15px;

}

.section-3-card h3{
      font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1d1b2c;
}

.section-3-card p{
      font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

.reviewerr{
      display: flex;
      justify-content:left;
      align-items: center;
      gap: 20px;
}
.reviewerr img{
      border-radius: 50%;
      
}

.reviewer-info {
  display: flex;
  flex-direction: column;
}

.reviewer-info strong {
  font-size: 14px;
  color: #1d1b2c;
}

.reviewer-info small {
  font-size: 12px;
  color: #888;
}


/* section-4 */

.section-4{
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-top: 50px;
      width: 1140px;
      font-family: raleway;
      margin: 0 auto;
      background-color: white;
      margin-bottom: 125px;
      padding:30px 30px 80px 30px;
      border-radius: 15px;
        box-shadow: 0 0 8px rgba(0,0,0,0.1);

}

.section-4-content-title{
      font-size: 50px;
      font-weight: bold;
      margin-top: 60px;
      margin-bottom: 25px;
}

.section-4-content-title-p{
      margin-bottom: 25px;
      color: #908f93;
}

.section-4 .btn-primary{
      font-weight: 400;
}
.section-4-image{
      background-image: url(../Assets/wc-big.png);
      width: 840px;
      height: 365px;
      border-radius: 25px;
      margin-top: 25px;
}



/* section-5 */

.section-5-content{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 1140px;
      height: 632px;
      margin: 0 auto;
      margin-bottom: 125px;
}

.section-5-content-title{
      font-size: 95px;
      font-family: raleway;
      font-weight: bold;
}

.contact-form form{
      display: flex;
      flex-direction: column;
      
}
.section-5-content form  input{
        box-shadow: 0 0 8px rgba(0,0,0,0.1);
  border: 1px solid #ccc;
color: #000000;
font-size: 18px;
font-family: inter;
}

.contact-form input,
.contact-form textarea {
            margin: 10px 0;

  border-radius: 7px;
  border: 1px solid #ccc;
  font-size: 15px;
          box-shadow: 0 0 8px rgba(0,0,0,0.1);
          text-align: left;
          padding: 20px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
 text-align: left;
}
.contact-form form label{
      margin-top: 10px;
}


.section-5 button{
      margin-top: 20px;
      padding-right: 215px;
      padding-left: 215px;
      cursor: pointer;
  
}


/* section-6 */

.section-6{
      background-color: white;
      height: 430px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
}
.section-6-content-title{
      font-size: 100PX;
      font-weight: 900;
      font-family: inter;
      color: #4E47FF;
      margin-bottom: 10px;
}
.section-6-content-sub{
      color: #8987A1;
}



.section-6-footer {
  display: flex;
  justify-content: center; 
  gap: 40px;               
  margin-top: 25px;        
}

.section-6-footer a {
  text-decoration: none;
  color: #8987A1;
  font-family: Inter;
    transition: color 0.3s ease, border-bottom 0.3s ease;

}

.section-6-footer a:hover {
  color: #1e1e88;
  border-bottom: 2px solid #4E47FF; 
}