Profile.css

.turkey {
  margin: 0;
}
.turkey-tourists {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 0.03em;
  line-height: 115%;
  display: inline-block;
  width: 188.6px;
  height: 95px;
}
.b {
  position: absolute;
  top: 17.28px;
  left: 146.88px;
  font-size: 57.6px;
  line-height: 0%;
  display: inline-block;
  color: #befc13;
  width: 28.8px;
  height: 28.8px;
}
.turkey-tourists-parent {
  position: absolute;
  top: 73px;
  left: 111px;
  width: 188.6px;
  height: 95px;
  cursor: pointer;
  font-size: 34.56px;
  color: #fff;
}
.profile1 {
  position: absolute;
  top: 0px;
  left: calc(50% - 162.5px);
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 325px;
  height: 92px;
  filter: blur(2px);
}
.profile2 {
  position: absolute;
  top: 0px;
  left: calc(50% - 162.5px);
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 325px;
  height: 92px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.profile-parent {
  position: absolute;
  top: 73px;
  left: calc(50% - 163px);
  width: 325px;
  height: 92px;
  text-align: center;
  font-size: 50px;
  color: #befc13;
}
.destinations {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 138%;
}
a {
  text-decoration: none;
  color: #ffffff; /* اللون الأساسي للنص */
  font-size: 25px;
  font-weight: bold;
  padding: 10px 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* جعل رابط "Home" دائمًا باللون الأصفر */
a.home {
  color: #befc13;
}

/* تأثير عند التمرير على أي رابط */
a:hover {
  color: #befc13; /* اللون الخلفي يصبح أصفر */

  border-radius: 5px;
}
.destinations-wrapper {
  position: absolute;
  top: 33px;
  left: -10px;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
}
.attractions-wrapper {
  position: absolute;
  top: 76px;
  left: -10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
}
.activities-wrapper {
  position: absolute;
  top: 119px;
  left: -10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
}
.main-pages {
  position: absolute;
  top: 0px;
  left: 10px;
  letter-spacing: 0.02em;
  line-height: 138%;
  display: inline-block;
  color: #befc13;
  width: 221px;
  height: 33px;
}
.frame-parent {
  position: absolute;
  top: 0px;
  left: 531px;
  width: 231px;
  height: 167px;
}
.profile-wrapper {
  position: absolute;
  top: 76px;
  left: 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.frame-group {
  position: absolute;
  top: 0px;
  left: 812px;
  width: 231px;
  height: 167px;
}
.frame-container {
  position: absolute;
  top: 0px;
  left: 1072px;
  width: 231px;
  height: 124px;
}
.group-child {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 7.2px;
  background-color: rgba(217, 217, 217, 0.15);
  border: 1.2px solid #bbff00;
  box-sizing: border-box;
  width: 343.2px;
  height: 41.4px;
}
.group-item {
  position: absolute;
  top: 0px;
  left: 246px;
  border-radius: 7.2px;
  background-color: rgba(190, 252, 19, 0.8);
  border: 1.2px solid #befc13;
  box-sizing: border-box;
  width: 97.2px;
  height: 41.4px;
}
.subscribe {
  position: absolute;
  top: calc(50% - 7.7px);
  left: calc(50% + 78px);
  letter-spacing: 0.02em;
  line-height: 138%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 16.8px;
}
.write-your-email {
  position: absolute;
  top: calc(50% - 8.7px);
  left: calc(50% - 159px);
  letter-spacing: 0.02em;
  line-height: 138%;
  display: flex;
  color: rgba(255, 255, 255, 0.4);
  align-items: center;
  justify-content: center;
  width: 218.4px;
  height: 16.8px;
}
.rectangle-parent {
  position: absolute;
  top: 50px;
  left: 0px;
  width: 343.2px;
  height: 41.4px;
  text-align: center;
  color: #000;
}
.the-latest-updates {
  color: #fff;
}
.get-the-latest-container1 {
  width: 100%;
}
.get-the-latest-container {
  position: absolute;
  top: 24px;
  left: 5px;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 342px;
  height: 25px;
}
.newsletter-txt {
  line-break: anywhere;
  width: 100%;
}
.newsletter {
  position: absolute;
  top: 0px;
  left: 5px;
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 342px;
  height: 25px;
}
.group-container {
  position: absolute;
  top: 106px;
  left: 0px;
  width: 347px;
  height: 91.4px;
  font-size: 12px;
  color: #befc13;
}
.turkey-tourists1 {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 0.03em;
  line-height: 115%;
  display: inline-block;
  width: 131px;
  height: 66px;
}
.b1 {
  position: absolute;
  top: 12px;
  left: 102px;
  font-size: 40px;
  line-height: 0%;
  display: inline-block;
  color: #befc13;
  width: 20px;
  height: 20px;
}
.turkey-tourists-group {
  position: absolute;
  top: 20px;
  left: 0px;
  width: 131px;
  height: 66px;
  font-size: 24px;
}
.copyright-2024 {
  position: absolute;
  top: 209px;
  left: 540px;
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 138%;
  color: #befc13;
  text-align: center;
}

.main-pages {
  font-size: 25px;
  font-weight: bold;
  color: #befc13;
  margin-top: 10px;
}

.group-parent {
  position: absolute;
  top: 1414px;
  left: 69px;
  width: 1303px;
  height: 224px;
  color: #fff;
}
.f1v4byj09dqb1-icon {
  position: absolute;
  top: 73px;
  left: 1275px;
  border-radius: 50%;
  width: 102px;
  height: 102px;
  object-fit: cover;
}
.component-12-child {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  background-color: rgba(1, 20, 2, 0.6);
  border: 1px solid #000;
  box-sizing: border-box;
}
.component-12 {
  position: absolute;
  top: 79px;
  left: 0px;
  width: 317px;
  height: 80px;
}
.component-13 {
  position: absolute;
  top: 158px;
  left: 0px;
  width: 317px;
  height: 80px;
}
.component-14 {
  position: absolute;
  top: 237px;
  left: 0px;
  width: 317px;
  height: 80px;
}
.component-15 {
  position: absolute;
  top: 316px;
  left: 0px;
  width: 317px;
  height: 80px;
}
.component-16 {
  position: absolute;
  top: 395px;
  left: 0px;
  width: 317px;
  height: 80px;
}
.component-11-child {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  border-radius: 10px 10px 0px 0px;
  background-color: rgba(1, 20, 2, 0.6);
  border: 1px solid #000;
  box-sizing: border-box;
  cursor: pointer;
}
.home1 {
  position: absolute;
  top: 12px;
  left: 39px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 242px;
  height: 60px;
}
.component-11-parent {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 317px;
  height: 80px;
}
.destinations1 {
  position: absolute;
  top: 90px;
  left: 39px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 242px;
  height: 60px;
}
.attractions1 {
  position: absolute;
  top: 169px;
  left: 39px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 242px;
  height: 60px;
}
.activities1 {
  position: absolute;
  top: 247px;
  left: 39px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 242px;
  height: 60px;
}
.restaurants1 {
  position: absolute;
  top: 327px;
  left: 39px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 242px;
  height: 60px;
}
.accommodations1 {
  position: absolute;
  top: 406px;
  left: 39px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 242px;
  height: 60px;
}
.component-13-icon {
  position: absolute;
  top: 474px;
  left: 0px;
  width: 317px;
  height: 80px;
}
.wish-list1 {
  position: absolute;
  top: 484px;
  left: 39px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 242px;
  height: 60px;
}
.component-12-parent {
  position: absolute;
  top: 711px;
  left: 111px;
  width: 317px;
  height: 554px;
  font-size: 22px;
}
.component-17-child {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  box-shadow: 0px 4px 4px rgba(72, 72, 72, 0.25);
  border-radius: 10px;
  background-color: rgba(0, 32, 2, 0.6);
}
.component-17 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 317px;
  height: 426px;
}
.f1v4byj09dqb1-icon1 {
  position: absolute;
  top: 39px;
  left: 71px;
  border-radius: 50%;
  width: 174px;
  height: 174px;
  object-fit: cover;
}
.walid-kuzi {
  position: absolute;
  top: 276px;
  left: 33px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 254px;
  height: 47px;
}
.walidgmailcom {
  position: absolute;
  top: 334px;
  left: 14px;
  font-size: 22px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 292px;
  height: 47px;
}
.component-17-parent {
  position: absolute;
  top: 257px;
  left: 111px;
  width: 317px;
  height: 426px;
  text-align: center;
  font-size: 25px;
}
.profile-child {
  position: absolute;
  top: 258px;
  left: 475px;
  box-shadow: 0px 4px 4px rgba(72, 72, 72, 0.25);
  border-radius: 10px;
  background-color: rgba(1, 20, 2, 0.6);
  width: 798px;
  height: 1001px;
}
.name {
  position: absolute;
  top: 412px;
  left: calc(50% - 179px);
  font-size: 30px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 325px;
  height: 92px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.date-of-birth {
  position: absolute;
  top: 543px;
  left: calc(50% - 179px);
  font-size: 30px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 325px;
  height: 92px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.country {
  position: absolute;
  top: 670px;
  left: calc(50% - 179px);
  font-size: 30px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 325px;
  height: 92px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.email {
  position: absolute;
  top: 801px;
  left: calc(50% - 179px);
  font-size: 30px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 325px;
  height: 92px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.phone {
  position: absolute;
  top: 932px;
  left: calc(50% - 179px);
  font-size: 30px;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 325px;
  height: 92px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.profile4 {
  position: absolute;
  top: 0px;
  left: calc(50% - 162.5px);
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 325px;
  height: 92px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.profile-container {
  position: absolute;
  top: 278px;
  left: calc(50% - 179px);
  width: 325px;
  height: 92px;
  font-size: 35px;
  color: #befc13;
}
.edit {
  width: 55px;
  position: relative;
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  flex-shrink: 0;
}
.edit-3-1 {
  width: 17px;
  position: relative;
  height: 17px;
  object-fit: cover;
}
.edit-parent {
  position: absolute;
  top: 504px;
  left: 1115px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
.edit-group {
  position: absolute;
  top: 635px;
  left: 1115px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
.component-18-icon {
  position: absolute;
  top: 487px;
  left: 541px;
  width: 666px;
  height: 56px;
}
.walid-kuzi1 {
  position: absolute;
  top: 491px;
  left: calc(50% - 149px);
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 412px;
  height: 48px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.component-19-icon {
  position: absolute;
  top: 618px;
  left: 541px;
  width: 666px;
  height: 56px;
}
.b2 {
  position: absolute;
  top: 622px;
  left: calc(50% - 151px);
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 412px;
  height: 48px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.edit-container {
  position: absolute;
  top: 762px;
  left: 1115px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
.frame-div {
  position: absolute;
  top: 893px;
  left: 1115px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
.edit-parent1 {
  position: absolute;
  top: 1024px;
  left: 1115px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-align: center;
  font-size: 18px;
  color: #fff;
}
.component-20-icon {
  position: absolute;
  top: 745px;
  left: 541px;
  width: 666px;
  height: 56px;
}
.turkey-istanbul {
  position: absolute;
  top: 749px;
  left: calc(50% - 142px);
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 412px;
  height: 48px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.component-21-icon {
  position: absolute;
  top: 876px;
  left: 541px;
  width: 666px;
  height: 56px;
}
.walidgmailcom1 {
  position: absolute;
  top: 880px;
  left: calc(50% - 142px);
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 412px;
  height: 48px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.component-22-icon {
  position: absolute;
  top: 1007px;
  left: 541px;
  width: 666px;
  height: 56px;
}
.b3 {
  position: absolute;
  top: 1011px;
  left: calc(50% - 142px);
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  width: 412px;
  height: 48px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.component-19-child {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  border-radius: 10px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.delete-my-account {
  position: absolute;
  height: 67.86%;
  top: 17.86%;
  left: calc(50% - 231px);
  letter-spacing: 0.06em;
  line-height: 138%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 461px;
}
.component-19 {
  position: absolute;
  top: 1137px;
  left: 543px;
  width: 666px;
  height: 56px;
  text-align: center;
  color: #fff;
}
.profile {
  width: 100%;
  position: relative;
  background-color: #020202;
  height: 1656px;
  overflow: hidden;
  text-align: left;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Inknut Antiqua";
}

body {
  margin: 0;
  line-height: normal;
}
/* Styles for the interactive image and tooltip */
.hover-img {
  width: 200px;
  height: 200px;
  transition: transform 0.3s ease;
}

.hover-img:hover {
  transform: scale(1.1);
}

.tooltip {
  display: none;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1000;
}

.hover-img:hover + .tooltip {
  display: block;
}
.vertical-menu {
  list-style: none; /* إزالة النقاط */
  padding: 0;
  margin: 20px auto; /* محاذاة إلى الوسط */
  width: 200px; /* عرض القائمة */

  border-radius: 10px; /* حواف مستديرة */
  overflow: hidden; /* إخفاء الزوايا */
}

.vertical li {
  border-bottom: 1px solid #444; /* خط سفلي بين العناصر */
}

.vertical li:last-child {
  border-bottom: none; /* إزالة الخط الأخير */
}

.vertical a {
  display: block; /* اجعل الروابط تأخذ العرض الكامل */
  text-decoration: none; /* إزالة الخط السفلي */
  color: white; /* لون النص */
  font-size: 1rem; /* حجم النص */
  padding: 5px; /* الحشوة داخل العنصر */
  transition: background-color 0.3s ease; /* تأثير عند التمرير */
}

.vertical a:hover {
  background-color: #00200299; /* تغيير اللون عند التمرير */
  color: #ffffffb2; /* لون النص عند التمرير */
}
.vertical-menu {
  list-style: none; /* إزالة النقاط */
  padding: 0;
  margin: 20px; /* محاذاة إلى الوسط */
  width: 200px; /* عرض القائمة */

  border-radius: 10px; /* حواف مستديرة */
  overflow: hidden; /* إخفاء الزوايا */
}

.vertical-menu li {
  border-bottom: 1px solid #444; /* خط سفلي بين العناصر */
}

.vertical-menu li:last-child {
  border-bottom: none; /* إزالة الخط الأخير */
}

.vertical-menu a {
  display: block; /* اجعل الروابط تأخذ العرض الكامل */
  text-decoration: none; /* إزالة الخط السفلي */
  color: white; /* لون النص */
  font-size: 1rem; /* حجم النص */
  padding: 15px; /* الحشوة داخل العنصر */
  transition: background-color 0.3s ease; /* تأثير عند التمرير */
}

.vertical-menu a:hover {
  color: #befc13; /* لون النص عند التمرير */
}
.newsletter {
  text-align: center;
  margin: 20px auto;
}
.newsletter button {
  padding: 10px 15px;
  background-color: #befc13cc;
  color: black;
  border: none;
  border-radius: 7.2px;
  font-size: 1.2rem;
  cursor: pointer;
  margin-left: 53px;
}
.newsletter input[type="email"] {
  padding: 10px;
  background-color: #01140299;
  border: 1px #befc13cc;
  border-radius: 7.2px;
  font-size: 1.1rem;
  width: 250px;
}

.newsletter input[type="email"]:focus {
  outline: none;
  color: white;
}

.newsletter button:hover {
  color: white;
}
body {
  background-color: black; /* خلفية الصفحة */
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 461px;
  height: 38px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  height: 100vh; /* لتوسيط الزر في الصفحة */
}

.delete-button {
  background-color: #550202e5; /* لون الخلفية */
  color: white; /* لون النص */
  width: 666px;
  height: 56px;
  flex-shrink: 0;
  border: none; /* بدون حدود */
  color: #fff;
  text-align: center;
  font-family: "Inknut Antiqua";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 138%; /* 27.6px */
  letter-spacing: 1.2px;
  font-size: 1rem; /* حجم الخط */
  font-family: "Arial", sans-serif; /* نوع الخط */
  border-radius: 10px; /* زوايا دائرية */
  cursor: pointer; /* مؤشر الفأرة */
  transition: all 0.3s ease-in-out; /* تأثير عند التغيير */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* ظل */
}

.delete-button:hover {
  background-color: crimson; /* لون عند المرور بالفأرة */
}

.delete-button:active {
  background-color: red; /* لون عند الضغط */
  transform: scale(0.95); /* تأثير ضغط الزر */
}
.navbar {
  background-color: none;

  align-items: center;
}

.navbar ul {
  display: flex;
  width: 242px;
  height: 60px;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0;

  gap: 20px;
}

.navbar ul li {
  display: inline-block;
}

.navbar ul li a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Inknut Antiqua";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 138%; /* 30.36px */
  letter-spacing: 1.32px;
  padding: 10px 15px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar ul li a:hover {
  border-radius: 5px;
}