:root {
  --black: #0B0E11;
  --blue: #0f161c;
  --gold: #D4AF37;
  --white: #FFFFFF;
  --gray: #B0B7C3;
}

body {
  margin: 0;
  background-color: var(--black);
  color: var(--white);
}

.Header {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 50px;
  background-color: var(--black);
  opacity: 80%;
  position: fixed;
  
}
.Logo {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 42px;
  color: var(--gold);
  margin-right: 1400px;
  margin-top: 0px;
    
}
.Burger {
  width: 35px;
  height: 20px;
  display: grid;
  align-items: center;
  margin-top: 15px;
  background-color: transparent;
  border: 0px;
  cursor: pointer;
}
.Line1,
.Line2,
.Line3 {
  background-color: var(--gold);
}
.Line1 {
  height: 5px;
  width: 100%;
  margin-top: 1px;
}
.Line2 {
  width: 100%;
  height: 5px;
  margin-top: 1px;
}
.Line3 {
  height: 5px;

  width: 100%;
  margin-top: 1px;
}
.First-Block {
  margin: 0;

  display: grid;
  align-items: center;
  background-image: url(main.png);
  padding: 10px;

  height: 99vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;        

}
.First-Half-Vertical {
  width: 100%;
  height: 100%;
  margin: 0;
}
.Second-Half-Vertical {
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  align-items: center;
}

.Third-Half-Vertical {
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  align-items: center;
}
.First-Half-Horizontal {
  width: 100%;
  height: 100%;
}
.Second-Half-Horizontal {
  width: 100%;
  height: 100%;

}
@keyframes appearance {
  from {
    margin-right: 50%;
    opacity: 0;
  }
  to {
    margin-right: 0%;
    opacity: 1;
  }
}
@keyframes appearance2 {
  from {

    opacity: 0;
  }
  to {

    opacity: 1;
  }
}
.Heading1 {
  font-size: 5.3125vw;
  color: var(--white);
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  animation-name: appearance;
  animation-duration: 2s;

}
.Other-Text {
  font-size: 35px;
  color: var(--white);
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;

  margin-top: -80px;
  animation-name: appearance2;
  animation-duration: 7s;
}

.Second-Block {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 400px;
  background-color: var(--blue);
  margin-top: 0px;
}

.Place-For-First-Picture {
  width: 29%;
  height: 80%;
  margin-left: 13px;
  background-color: blue;
  margin-top: 38px;
  background-image: url(FirstEx.png);
  background-size: cover;
    transition: 1s;
}

.Place-For-Second-Picture {
  width: 29%;
  height: 80%;
  margin-left: 13px;
  background-color: blue;
  margin-top: 38px;
  background-image: url(SecondEx.jpg);
  background-size: cover;
}
.Place-For-Third-Picture {
  width: 29%;
  height: 80%;
  margin-left: 13px;
  background-color: blue;
  margin-top: 38px;
  background-image: url(ThirdEx.jfif);
  background-size: cover;
}

.Third-Block {
  background-color: var(--black);
  width: 100%;
  height: 600px;
  justify-content: center;
}
.Place-For-Heading2 {
  width: 100%;
  height: 80px;
  justify-content: center;
  display: flex;
}
.Heading2 {
  margin-top: 40px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Heading2.is-visible {
  opacity: 1;
}

.Place-For-Information {
  justify-content: center;
  display: flex;
  width: 80%;
  height: 100%;
  margin-left: 10%;
  margin-top: 30px;
}
.Left-Side {
  width: 100%;
  height: 100%;
  background-image: url(ImgForThirdBlock.jpg);
  background-size: cover;
  background-position: center;
}
.Right-Side {
  width: 100%;
  height: 100%;
  background-color: var(--black);
}
.Invisible-Div1 {
  width: 100%;
  height: 10%;
}
.Place-For-Heading-In-Right-Side {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
}
.Heading-In-Right-Side {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
   color: var(--gold);
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Heading-In-Right-Side.is-visible {
  opacity: 1;
}
.Place-For-Text-In-Right-Side {
  width: 100%;
  height: 40%;
  justify-content: center;
  display: flex;
}
.Text-In-Right-Side {
  font-size: 21px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: var(--gray);
  margin: 7% 3% 3% 3%;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Text-In-Right-Side.is-visible {
  opacity: 1;
}
.Buity-Pattern-In-Right-Side {
  width: 100%;
  height: 20%;
  justify-content: center;
  display: flex;
}
.Place-For-Buity-Pattern {
  width: 80%;
  margin-top: 7%;
  margin-right: 4%;
  height: 100%;
  background-image: url(BuityPattern3.png);
  background-size: cover;
}
.Invisible-Div2 {
  width: 100%;
  height: 70px;

}
.Fourth-Block {
  width: 100%;
  height: 500px;
}
.Place-For-Heading3 {
  width: 100%;
  height: 20%;
  justify-content: center;
  display: flex;
}
.Heading3 {
  font-size: 45px;
  color: var(--gold);
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Heading3.is-visible {
  opacity: 1;
}
.Place-For-Text-In-Fourth-Block {
  width: 50%;
  margin-left: 25%;
  display: flex;
  justify-content: center;
}
.Text-In-Fourth-Block {
  font-family: system-ui;
  color: var(--gray);
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Text-In-Fourth-Block.is-visible {
  opacity: 1;
}
.Fifth-Block {
  width: 100%;
  height: 600px;
  background-color: rgb(21, 21, 21);
}
.Place-For-Information2 {
  width: 80%;
  margin-left: 10%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.Left-Side2 {
  width: 100%;
  height: 100%;
  background-color:#3b4c9c;
  border-radius: 90px 0px 0px 0px;
}
.Invisible-Div-In-Side {
  width: 100%;
  height: 20%;
}
.Place-For-Heading-In-Left-Side2 {
  width: 100%;
  height: 10%;
}
.Heading-In-Left-Side2 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: var(--white);
  margin-left: 5%;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Heading-In-Left-Side2.is-visible {
  opacity: 1;
}
.Place-For-Text-In-Left-Side2 {
  width: 100%;
  height: 30%;
}
.Text-In-Left-Side2 {
  margin: 3% 3% 3% 5%;
  font-size: 20px;
  color: rgb(255, 255, 255);
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Text-In-Left-Side2.is-visible {
  opacity: 1;
}
.Read-More {
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: var(--gold);
  margin: 15% 3% 3% 5%;
  font-size: 17px;
}
.Right-Side2 {
  width: 100%;
  height: 100%;
  background-color:rgb(21, 21, 21);
  display: grid;
}

.First-Half-For-Img {
  display: flex;
  width: 100%;
  height: 100%;
}
.First-Half-In-Img {
  width: 100%;
  height: 100%;
  background-image: url(First-Half.jpg);
  background-size: cover;
}
.Second-Half-In-Img {
  width: 100%;
  height: 100%;
  background-image: url(Second-Half.webp);
  background-size: cover;
}
.Second-Half-For-Img {
  display: flex;
  width: 100%;
  height: 100%;

}
.Third-Half-In-Img {
  width: 100%;
  height: 100%;
  background-image: url(Third-Halfjpg.jpg);
  background-size: cover;
}
.Fourth-Half-In-Img {
  width: 100%;
  height: 100%;
  background-image: url(Fourth-Half.jpg);
  background-size: cover;
    border-radius: 0px 0px 90px 0px;
 
}

.Invisible-Div {
  width: 100%;
  height: 70px;
  background-color:#8ab0c8;
  opacity: 20%;
}
.Sixth-Block {
  width: 100%;
  height: 500px;
  background-color: var(--black);
}
.Sixth-Block {
  width: 100%;
  height: 400px;
  background-color: #1a1a1c;
  display: flex;
  justify-content: center;
}
.Card-In-Sixth-Block {
  width: 15%;
  height: 50%;
  display: grid;
  margin: 5.5% 1% 5% 1%;
}
.First-Top-Side-Card-In-Sixth-Block {
  width: 100%;
  height: 85%;
  justify-content: center;
  display: flex;
}
.Second-Top-Side-Card-In-Sixth-Block {
  width: 100;
  height: 85%;
  justify-content: center;
  display: flex;
}
.Second-Top-Side-Card-In-Sixth-Block img{
  width: 36.9%;
  fill: white;
  color: white;
}
.Third-Top-Side-Card-In-Sixth-Block {
  width: 100%;
  height: 85%;
  justify-content: center;
  display: flex;
}
.Fourth-Top-Side-Card-In-Sixth-Block {
  width: 100%;
  height: 85%;
  justify-content: center;
  display: flex;
}
.First-Bottom-Side-Card-In-Sixth-Block {
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: White;
  font-size: 23px;
  opacity: 0;
  transition: opacity 1.1s ease-out;
  will-change: opacity;
}
.First-Bottom-Side-Card-In-Sixth-Block.is-visible {
  opacity: 1;
}
.Second-Bottom-Side-Card-In-Sixth-Block {
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: White;
  font-size: 23px;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Second-Bottom-Side-Card-In-Sixth-Block.is-visible {
  opacity: 1;
}
.Third-Bottom-Side-Card-In-Sixth-Block {
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: White;
  font-size: 23px;
  opacity: 0;
  transition: opacity 0.7s ease-out;
  will-change: opacity;
}
.Third-Bottom-Side-Card-In-Sixth-Block.is-visible {
  opacity: 1;
}
.Fourth-Bottom-Side-Card-In-Sixth-Block {
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: White;
  font-size: 23px;
  opacity: 0;
  transition: opacity 0.5s ease-out;
  will-change: opacity;
}
.Fourth-Bottom-Side-Card-In-Sixth-Block.is-visible {
  opacity: 1;
}
.Seventh-Block {
  width: 100%;
  height: 300px;
  display: flex;
  background-color: rgb(235, 235, 235);
}
.Place-For-Text-In-Seventh-Block {
  display: flex;
  width: 80%;
  height: 80%;
  margin-top: 3%;
  margin-left: 10%;
}
.Text-In-Seventh-Block {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: rgb(66, 40, 19);
  font-size: 35px;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Text-In-Seventh-Block.is-visible {
  opacity: 1;
}
.Eight-Block {
  width: 100%;
  height: 550px;
  
}
.Place-For-Content-In-Eight-Block {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  display: flex;
  justify-content: center;
  margin-top: 2%;
}
.First-Half-In-Eight-Block {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.Proposal {
  margin-left: 30%;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: rgb(224, 211, 200);
  font-size: 19px;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Proposal.is-visible {
  opacity: 1;
}
.Second-Half-In-Eight-Block {
  width: 60%;
  height: 100%;
  background-image: url(Picture-For-Eight-Block.webp);
  background-size: cover;
  border-radius: 0px 90px 0px 90px;
}
.Ninth-Block {
  width: 100%;
  height: 500px;
  background-image: url(Picture-For-Ninth-Block2.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.Invisible-Div3 {
  width: 100%;
  height: 30px;
}
.Place-For-Heading4 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
}
.Heading4 {
  color: rgb(254, 250, 247);
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  font-size: 35px;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Heading4.is-visible {
  opacity: 1;
}

.Tenth-Block {
  width: 100%;
  height: 600px;
}
.Place-For-Information3 {
  justify-content: center;
  display: flex;
  width: 80%;
  height: 100%;
  margin-left: 10%;
  margin-top: 30px;
}
.First-Half-In-Tenth-Block {
  width: 100%;
  height: 100%;
  background-image: url(Picture-In-Tenth-Block.png);
  background-size: cover;
    border-radius:  90px 0px 0px 90px;
}
.Second-Half-In-Tenth-Block {
  width: 100%;
  height: 100%;
  background-color: rgb(3, 7, 2);
  border-radius: 0px 90px 90px 0px;
}
.First-Line-In-Tenth-Block {
  width: 100%;
  height: 35%;
  display: flex;
}
.Circle-With-Picture {
  width: 20%;
  height: 73%;
  border: 0px solid;
  border-radius: 100%;
  background-image: url(Picture-In-The-Circle.png);
  background-size: cover;
  margin-top: 5%;
  margin-left: 5%;
}
.Second-Line-In-Tenth-Block {
  width: 100%;
  height: 10%;
}
.Heading5 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  margin-top: 0;
  margin-left: 5%;
  color: rgb(255, 253, 248);
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Heading5.is-visible {
  opacity: 1;
}
.Third-Line-In-Tenth-Block {
  width: 100%;
  height: 30%;
}
.Text-In-Tenth-Block {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: rgb(255, 232, 158);
  margin-left: 5%;
  margin-top: 0;
  font-size: 20px;
  opacity: 0;
  transition: opacity 0.9s ease-out;
  will-change: opacity;
}
.Text-In-Tenth-Block.is-visible {
  opacity: 1;
}
.Read-More2 {
  text-decoration: none;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: rgb(156, 155, 151);
  margin-left: 5%;
  font-size: 17px;
}
.Eleventh-Block {
  width: 100%;
  height: 300px;
  background-color: var(--black);
}
.Place-For-Heading6 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.Place-For-Text-In-Eleventh-Block {
  width: 100%;
  height: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.Text-In-Eleventh-Block {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: rgb(225, 209, 196);
  font-size: 20px;
}
.Name-Of-Company {
  font-family: Arial, sans-serif;
  color: rgb(66, 40, 19);
  font-size: 20px;
  margin-top: 0;
}
.Place-For-Number-Of-Company {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  margin-top: 2%;
}
.Number {
  border: 1px solid;
  border-color: var(--gold);
  font-size: 25px;
  color: var(--gold);
  padding: 0.2% 0.2% 0.2% 0.2%;
}

.Footer {
  width: 100%;
  height: 20px;
  background-color: var(--black);
}
.Top-Side-In-Footer {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 20%;
}
.Page {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: var(--white);
  text-decoration: none;
  margin: 2% 1% 0% 1%;
} 
.Place-For-Media {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 2%;
  background-color: rgb(54, 54, 54);
}
.Sidebar {
  width: 15%;
  height: 100%;
  z-index: 100;
  top: 0;
  right: -15%;
  background-color: rgb(32, 27, 27);
  position: fixed;
  transition: right 0.5s ease;
}
.Sidebar.open {
  right: 0;
}
.Overlay {
  opacity: 0;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  transition: all 0.5s ease;
  visibility: hidden;
}
.Overlay.open {
  opacity: 1;
  visibility: visible;

}
.Content-In-Sidebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 60%;
  margin-top: 100%;
}
.Page-Sidebar {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  color: var(--white);
  text-decoration: none;
  font-size: 22px;
  margin-top: 3%;
}