body {
  background: url(../images/font1.3.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /* Set the background color and image for the body */
  font-family: Montserrat, sans-serif;
  /* Set the font family for the body */
}

a {
  color: rgba(255, 255, 255, 0.662);
  /* Set the color for links */
  text-decoration: none;
  /* Remove underline decoration from links */
  font-weight: bold;
  /* Set bold font weight for links */
}

label {
  color: #02315e;
  /* Set the color for labels */
  text-decoration: none;
  /* Remove underline decoration from labels */
  font-weight: bold;
  /* Set bold font weight for labels */
}

header {
  display: flex;
  /* Use flexbox for the header */
  justify-content: space-between;
  /* Align items in the header with space between them */
  height: 80px;
  /* Set the height of the header */
  width: 100%;
  /* Set the width of the header */
  background: rgba(255, 255, 255, 0.2);
  /* Set a semi-transparent background color for the header */
  backdrop-filter: blur(10px);
  /* Apply a blur effect to the background */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  /* Add a box shadow to the header */
  border: 1px solid rgba(255, 255, 255, 0.25);
  /* Add a border to the header */
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  /* Add a top border to the header */
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  /* Add a left border to the header */
  border-radius: 20px;
  /* Add border radius to the header */
  -webkit-backdrop-filter: blur(10px);
  /* Add a blur effect to the background for WebKit browsers */
}

.logo {
  height: 65px;
  /* Set the height of the logo */
}

.leftside {
  display: flex;
  /* Use flexbox for the left side */
  justify-content: left;
  /* Align items to the left side */
  align-items: center;
  /* Center items vertically */
  width: 50%;
  /* Set the width of the left side */
  padding: 15px;
  /* Add padding to the left side */
}

.logo_button {
  font-size: 40px;
  /* Set the font size of the logo button */
  cursor: pointer;
  /* Change cursor to pointer on hover */
}

.rightside {
  display: flex;
  /* Use flexbox for the right side */
  justify-content: space-around;
  /* Align items in the right side with space around them */
  align-items: center;
  /* Center items vertically */
  width: 30%;
  /* Set the width of the right side */
  padding: 10px;
  /* Add padding to the right side */
}

.language_button {
  display: flex;
  /* Use flexbox for the language button */
  justify-content: center;
  /* Center items horizontally */
  align-items: center;
  /* Center items vertically */
  width: 170px;
  /* Set the width of the language button */
  height: 60px;
  /* Set the height of the language button */
  color: rgba(255, 255, 255, 0.662);
  /* Set the color of the language button */
  border-radius: 5px;
  /* Add border radius to the language button */
  cursor: pointer;
  /* Change cursor to pointer on hover */
  transition: all 0.3s ease;
  /* Apply transition effect on hover */
  position: relative;
  /* Set position to relative */
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  /* Add box shadow to the language button */
}

.reating_button {
  display: flex;
  /* Use flexbox for the rating button */
  justify-content: center;
  /* Center items horizontally */
  align-items: center;
  /* Center items vertically */
  width: 170px;
  /* Set the width of the rating button */
  height: 60px;
  /* Set the height of the rating button */
  color: rgba(255, 255, 255, 0.662);
  /* Set the color of the rating button */
  border-radius: 5px;
  /* Add border radius to the rating button */
  cursor: pointer;
  /* Change cursor to pointer on hover */
  transition: all 0.3s ease;
  /* Apply transition effect on hover */
  position: relative;
  /* Set position to relative */
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  /* Add box shadow to the rating button */
}

/* Buttons */
.design {
  border: none;
  /* Remove the button border */
  background: #2f70af;
  /* Set the background color for the button */
  background: linear-gradient(0deg, #2f70af 0%, #806491 100%);
  /* Set a linear gradient background */
}

.design:hover {
  color: #b9848c;
  /* Change the text color on hover */
  background: transparent;
  /* Make the background transparent on hover */
  box-shadow: none;
  /* Remove box shadow on hover */
}

.design:before,
.design:after {
  content: "";
  /* Add content before and after the button */
  position: absolute;
  /* Set position to absolute */
  top: 0;
  /* Position at the top */
  right: 0;
  /* Position at the right */
  height: 2px;
  /* Set the height of the pseudo-elements */
  width: 0;
  /* Start with 0 width */
  background: #b9848c;
  /* Set the background color of the pseudo-elements */
  box-shadow: -1px -1px 5px 0px #fff,
    /* Add box shadow to the pseudo-elements */ 7px 7px 20px 0px #0003,
    4px 4px 5px 0px #0002;
  transition: 400ms ease all;
  /* Apply transition effect on pseudo-elements */
}

.design:after {
  right: inherit;
  /* Position at the left */
  top: inherit;
  /* Position at the bottom */
  left: 0;
  /* Position at the left */
  bottom: 0;
  /* Position at the bottom */
}

.design:hover:before,
.design:hover:after {
  width: 100%;
  /* Expand the width of the pseudo-elements on hover */
  transition: 800ms ease all;
  /* Apply transition effect on pseudo-elements on hover */
}