.raleway-font{
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.inter-font{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

body{
    background-color: #f5f8ff;
    
}

/* share style */
.btn-primary {
  background-color:  #4E47FF ;
  font-family:"Raleway", sans-serif ;
  color: white;  
  padding: 12px 36px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: 0.5s;
}



.btn-primary:hover{
    background-color:#f1c30d;
    color: black;
    transform: scale(1.1);
    transition: 0.5s;
}


/* Header Style  */
.header{
    background-image: url(Assets/Hero-bg.png);
    width: 1440px;
    height: 698px;
    margin: 5px auto;
}

.header-nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px 200px;
}


.logo{
    font-family:"Inter", sans-serif;
    font-size: 34px ;
    font-weight: 800;
    color: #4E47FF;
    
}

.header-title-section{
    text-align: center;
    width: 905px;
    height: 237px;
    margin: 180px auto;
}

.header-title{
    font-family: "Raleway", sans-serif;
    font-size: 65px;
    font-weight: 600;
}


/* Action Section style  */
.action-Section{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 116px auto ;
}


.action-left{
    width: 517px;
    height: 203px;
}


.action-title{
    font-family: "Raleway", sans-serif ;
    font-size: 42px;
    font-weight: 600;
    margin-bottom: 23px;
}

.action-description{
    font-family: "Raleway", sans-serif ;
    font-size: 24px;
    color: rgba(37, 36, 50, 0.5);
    margin-bottom: 23px;
}


.action-img{
    width: 403px;
    height: 328px;
    border-radius: 48px;
}


/* Productive Users Section style  */
.productive-users{
    background-color: rgba(78, 71, 255, 0.1);
    width: 1140px;
    height: 306px;
    margin: 116px auto;
    border-radius: 24px;
    box-shadow: 15px 15px 20px rgba(0,0,0,0.1),
               -15px -15px 30px rgba(255,255,255,0.9);
}

.productive-container{
    width: 856px;
    height: 206px;
    margin: 50px auto;
}

.productive-users-title{
    font-family: "Raleway", sans-serif ;
    font-size: 38px;
    font-weight: 600;
    text-align: center;
    position: relative;
    top: 50px;
}


.centered-items{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 856px;
    height: 121px;
    margin-top: 40px;
}


.centered-num{
    font-family:"Inter", sans-serif;
    font-size: 80px ;
    font-weight: 600;
    color: #4E47FF;
    margin-top: 70px;
}

.centered-dsc{
    font-family:"Inter", sans-serif;
    font-size: 20px;
    color:rgba(0, 0, 0, 0.5) ;
    text-align: center;
    margin-top: 0px;
}


/* Users’ Feedback Section start  */
.feedback-section{
    width: 1140px;
    height: 342px;
    margin: 140px auto;

}

.feedback-title{
    font-family: "Raleway", sans-serif;
    font-size:42px;
    font-weight: bold;
    color: #252432;
    text-align: center;
}

.feedback-user-info{
    display: flex;
}


.feedback-user{
    background-color: #fafbff ;
    width: 1140px;
    height: 243px;
    margin: 50px 20px;
    padding: 24px;
    border-radius: 14px;
    border: 2px solid #f2eded ;
    box-shadow: 15px 15px 20px rgba(0,0,0,0.1),
                -15px -15px 30px rgba(255,255,255,0.9);

}

.project-name{
    font-family: "Raleway", sans-serif;
}

.peoject-dsc{
    font-family:"Inter", sans-serif;
    font-weight: 400;
}

.user-img{
    margin-top: 35px  ;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}



.star{
    margin-top: 24px;
}


.person-name{
    font-family:"Inter", sans-serif;
    font-weight: bold;
    color: #757575 ;
    padding-left: 10px;
    margin-top: 35px;
}

.person-info{
    display: flex;
    margin-top: -20px;
}

.project-date{
    font-family: "Inter", sans-serif;
    font-weight: 400;
    color: #b3b3b3;
    padding-bottom: 40px;
    padding-left: 10px;
    margin-top: -17px;
}

/* Web Flow Section Style  */
.webFlow-section{
    width: 1140px;
    height: 696px;
    margin: 137px auto;
    background-color: #FFFFFF;
    font-family:"Raleway", sans-serif;
    text-align: center;
    box-shadow: 15px 15px 20px rgba(0,0,0,0.1),
               -15px -15px 30px rgba(255,255,255,0.9);
    
}

.webFlow-title{
    font-size: 50px;
    font-weight: bold;
    padding-top: 70px;
}

.webFlow-dsc{
    font-family:"Inter", sans-serif;
    font-weight: 400;
    text-align: center;
    font-weight: 400;
    color: #8987a1;
    margin-top: -20px;
}

.sec-btn {
  background-color:  #4E47FF ;
  font-family:"Raleway", sans-serif ;
  color: white;  
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400 ;
  padding: 12px 36px;
  transition: 0.5s;
}



.sec-btn:hover{
    background-color:#f1c30d;
    color: black;
    transform: scale(1.1);
    transition: 0.5s;
}

.webFlow-img{
    width: 840px;
    height: 364px;
    border-radius: 48px;
    margin-top: 20px;
}




/* Let’s Get In Touch Section Style  */
.touch-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1140px;
    height: auto;
    margin: 92px auto;
    gap: 40px;
}


.touch-left-side {
    width: 50%;
}

.touch-left-side h1 {
    font-family: "Raleway", sans-serif;
    font-size: 64px;
    font-weight: bold;
    line-height: 1.2;
    color: #000;
}


.touch-right-side {
    width: 50%;
    font-family:"Inter", sans-serif;
    background-color: #f9f9ff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 15px 15px 20px rgba(0,0,0,0.1),
               -15px -15px 30px rgba(255,255,255,0.9);
}

form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

input, textarea {
    font-family:"Inter", sans-serif;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
}

textarea {
    resize: none;
}

label {
    font-size: 16px;
    font-weight: 500;
}

button {
    padding: 14px;
    font-size: 16px;
    background-color: #4e4bff;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
    transition: 0.5s;
}

button:hover {
    background-color:#f1c30d;
    color: black;
    transform: scale(1.1);
    transition: 0.5s;
}


/* Footer Section Style */



.footer-section{
    background-color: #FFFFFF;
    width: 1440px;
    height: 428px;
    margin: 5px auto;
    text-align: center;
    font-family:"Inter", sans-serif;
}



 .site-name{
   width: 532px;
   height: 177px;
   text-align: center;
   margin: 0px auto;
}

.site-logo{
    padding-top: 104px ;
    font-size: 100px;
    font-weight: 800;
    color: #4e47ff;
}

.site-dsc{
    width: 531px;
    height: 48px;
    font-weight: 400;
    color: #8987a1;
    margin-top: -50px;
}


.footer-link ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    margin-top: 120px;
}

.footer-link ul li{
    list-style: none;
}

.footer-link ul a{
    text-decoration: none;
    font-weight: 400;
    color: #8987a1;
    transition: 0.5s;
}

.footer-link ul a:hover{
    background-color:#f1c30d;
    color: rgb(0, 0, 0);
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: bold;
    transform: scale(1.1);
    transition: 0.5s;
}