/* =======cummon css start ====== */
 * {
     padding: 0;
     margin: 0;
 }

 a {
     text-decoration: none;
 }

 body {
     background: #F9FAFF;
 }

 ol,
 ul {
     list-style: none;
 }

 /* =======cummon css end====== */
 /* =======nav bar start ====== */
 nav {
     background: #F9FAFF;
 }

 .container {
     width: 1300px;
     margin: 0 auto;
 }

 .box {
     display: flex;
 }

 .logo-part {
     width: 50%;
 }

 .logo-part h1 a {
     font-family: "Comfortaa", sans-serif;
 }

 .logo-part p {
     padding-top: 54px;
     color: #FDC435;
     font-family: "Nunito", sans-serif;
     font-size: 20px;
     font-weight: 600;
 }

 .logo-part h2 {
     color: #25282B;
     font-family: "Playfair Display", serif;
     font-size: 64px;
     font-weight: 600;
     width: 518px;
     line-height: 109px;
 }

 .logo-part h4 {
     padding-top: 30px;
     color: #828282;
     font-family: "Nunito", sans-serif;
     font-size: 24px;
     font-weight: 500;
     line-height: 150%;
     width: 486px;
 }

 /* /* .manu-part ul li a{
display: flex; */

 /* } */
 /* ul li menu image er upor */
 .manu-part ul {
     position: absolute;
     top: 22px;
     margin-left: 340px;
     transform: translate(-50%, -50%);
     display: flex;
     gap: 42px;
     z-index: 2;

 }

 .manu-part ul li a {
     color: #000;
     font-size: 18px;
     font-weight: 600;
     font-family: "Raleway", sans-serif;
 }

 .manu-part img {
     position: absolute;
 }

 .manu-part .image {
     top: 0px;
     left: auto;
     z-index: 2;
     position: relative;
     width: 0;
     height: 0;
     scale: "";
 }

 /* ========button start ======== */
 .logo-part .button {
     padding-top: 32px;
 }

 .logo-part .button a {
     padding: 8px 24px;
     background: #FDC435;
     border-radius: 8px;
     color: #25282B;
     font-family: "Roboto", sans-serif;
     font-size: 20px;
     font-weight: 600;
     border: 2px solid transparent;
     transition: 0.5s;
 }

 .logo-part .button a:hover {
     background: transparent;
     border-color: #25282B;
 }

 /* ========button end ======== */

 /* =======nav bar start ====== */
 /* <!-- =======Projects-part start ======== --> */
 .herosection {
     background: #F9FAFF;
 }

 .container .Projects-part h2 {
     padding-top: 144px;
     padding-left: 40%;
     color: #25282B;
     font-family: "Playfair Display", serif;
     font-size: 48px;
     font-weight: 700;
     position: relative;
 }
/* 
 .container .Projects-part h2::after {
     position: absolute;
     content: "";
     background: #FDC435;
     height: 3px;
     width: 50%;
     left: 120px;
     bottom: -10px;
 } */

 .container .main-project {
     display: flex;
     padding: 65px 0px;
     justify-content: center;
 }

 .container .project-1 {
     width: 40%;
     background: #FFFFFF;
     border-radius: 10px;
 }

 .container .project-2 img {
     width: 496px;
     height: 526px;
     border-radius: 0px 10px 10px 0px;

 }

 .main-project .project-1 h2 {
     margin-left: 80px;
     padding-top: 144px;
     color: #25282B;
     font-family: "Playfair Display", serif;
     font-size: 40px;
     font-weight: 700;
 }

 .main-project .project-1 p {
     margin-left: 80px;
     padding: 24px 0px;
     color: #828282;
     font-family: "Nunito", sans-serif;
     font-size: 20px;
     font-weight: 500;
     width: 406px;
     line-height: 150%;
 }

 /* ========button start ======== */
 .main-project .project-1 .button {
     padding-top: 24px;
     margin-left: 80px;
 }

 .main-project .project-1 .button a {
     padding: 8px 24px;
     background: transparent;
     border-radius: 24px;
     color: #25282B;
     font-family: "Roboto", sans-serif;
     font-size: 20px;
     font-weight: 600;
     border: 2px solid #25282B;
     transition: 0.5s;
 }

 .main-project .project-1 .button a:hover {
     background: #FDC435;
     border-color: transparent;
 }

 /* -==============card part=2-========================= */
 .container .project-3 img {
     width: 496px;
     height: 526px;
     border-radius: 10px 0px 0px 10px;
 }

 /* -==============card part=2-========================= */
 /* ========button end ======== */
 /* <!-- =======Projects-part end ======== --> */

 /* ===========about-part start=============== */
 .about-part {
     display: flex;
     padding: 94px 144px;
 }

 .about-part .prsonal-detals {
     width: 50%;
 }

 .about-part .prsonal-detals h2 {
     color: #333333;
     font-family: "Playfair Display", serif;
     font-size: 48px;
     font-weight: 700;
 }

 .about-part .prsonal-detals p {
     padding: 32px 0px;
     color: #828282;
     font-family: "Nunito", sans-serif;
     font-size: 20px;
     font-weight: 500;
     width: 490px;
     line-height: 150%;
 }

 .about-part .prsonal-detals .profil {
     width: 50%;
 }

 /* ===========about-part end=============== */
 /* ===============massg-part start=========== */
 .container .massg-option h2 {
    padding-bottom: 80px;
     text-align: center;
     color: #333333;
     font-family: "Playfair Display", serif;
     font-size: 48px;
     font-weight: 700;
 }
 .massg-part {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.contact-box {
  width: 360px;
  text-align: left;
  position: relative;
  z-index: 2;
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
    font-family: "Nunito", sans-serif;
  display: block;
  font-size: 16px;
  color: #25282B;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1px 10px;
  font-size: 15px;
  outline: none;
}

.form-group input {
  height: 44px;
}

.form-group textarea {
  height: 160px;
  resize: none;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #f4c430;
  box-shadow: 0 0 6px rgba(244, 196, 48, 0.3);
}

.btn-area {
  text-align: right;
  margin-top: -5px;
}

.btn-area button {
  background: #f4c430;
  color: #111;
  border: none;
  padding: 12px 26px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 500;
}

.btn-area button:hover {
  background: #e6b800;
}

.social-icons {
    padding-top: 56px;
    padding-bottom: 30px;
  display: flex;
  justify-content: center;
  gap: 28px;
}

.social-icons a {
  color: #222;
  font-size: 42px;
  transition: 0.3s;
}

.social-icons a:hover {
  transform: translateY(-4px);
  color: #f4c430;
}

.footer-text {
  text-align: center;
  margin-top: 28px;
  font-size: 15px;
  color: #777;
}
 /* ===============massg-part end=========== */