@import url("https://fonts.googleapis.com/css2?family=Cinzel&family=Roboto:wght@100;300;400;500&display=swap");

:root {
  --primary: #072ac8;
  --secondary: #6b708d;
  --turquoiseBlue: #43D2FF;
  --skyBlue: #A2D6F9;
  --lighterSkyBlue: #D1EDFF;
  --lightestBlue: #ECF7FF;
  --boxes: rgba(107, 112, 141, 0.1); /* This one isn't in figma but somehow I got it from the inspector in some boxes*/
  --backgroundWhite: #f2f4fc
  --dark: #292e47; 
  --yellow: #ffc600
}

html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Roboto", sans-serif;
  background-color: #f2f4fc;
  width: 100vw;
  padding: 0 150px;
}

/* ------------------------------------------------------------------------ */
/* ------------------------------ INDEX html ------------------------------ */
/* ------------------------------------------------------------------------ */

/* ------------------------------ Splash page ------------------------------ */

/* Your CSS code goes here */

/* ------ CIRCULAR ANIMATION ------ */

/* Your CSS code goes here */

/* ------------------------------ Navbar ------------------------------ */

nav, main, section, footer {
  margin: 100px 40px;
}


nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 50px;

}
nav img {
  width: 60px;
  height: 18px;
}

nav div {
  display: flex;
  gap: 25px;
}


nav a {
  text-decoration: none;
  font-size: 18px;
  color: var(--secondary);
  font-weight: 500;
  
}

nav a:hover {
  color: var(--primary);
}

nav div :first-child {
  color: #0082f3;
}

nav div :first-child:hover {
  color: var(--primary);
}

.navContact {
  cursor: pointer;
  background-color: var(--primary);
  color: white;
  font-size: 17px;
  padding: 15px 30px;
}

.navContact:hover {
  background-color: #292e47;;
  color: white;
}


.hamburger { 
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: black;
}


/* ------------------------------ Header ------------------------------ */

main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 55vw;
}

main h2 {
  font-size: 60px;
  margin-bottom: 15px;
  padding-top: 70px;
  font-weight: 600;
  color: #292e47;
  opacity: 95%;
  width: 40vw;
}


main h2:first-child {
  margin-top: 60px;
}

main p {
color: var(--secondary);
font-size: 20px;
font-weight: 400;
line-height: 1.5;
}

main div p:last-of-type{
  margin-bottom: 40px;
}

main a {
  text-decoration: none;
  color: var(--secondary);
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.5;
  margin-right: 15px;
}

main a:last-child {
  display: inline-block;
  color: white;
  background-color: var(--primary);
  padding: 15px 30px;
  font-weight: 400;
}

main a:last-child:hover{
  background-color: #292e47;;
  color: white;
}

#character {
  position: relative;
}
.creditCard {
position: absolute;
margin-top: -50px;
margin-left: -90px;
height: 21rem;
}
.smilingGuy {
height: 600px;
}
.emojiFinger {
  position: relative;
  left: -175px;
  top: 125px;
  height: 19rem;
}
header img {
  position:absolute;
  height: 5rem;
}
/* ------------------------------ Partners ------------------------------ */

#logo {
  display: flex;
  justify-content: space-evenly;
  margin: 150px 0;
}

#logo img {
  height: 40px;
}
/* ------------------------------ Recent projects ------------------------------ */

#projects {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.projects-main {
  display: flex;
  justify-content: space-evenly;
  font-size: large;
  gap: 50px;
}

#projects h2 {
  font-size: 50px;
  margin-bottom: 50px;
  font-weight: 500;
}

#projects img {
  height: 230px;
}

.project-text {
  padding: 20px 30px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: white;
}
#projects a {
  text-decoration: none;
  color: var(--primary);
  font-weight: 500;
}
/* ------------------------------ Client reviews ------------------------------ */

#testimony {
  position: relative;
  background-color: #292e47;
  /* background-color: var(--dark); */
  height: 35vw;
  background-image: url(../images/testimonial-section/orbit.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#testimony h2 {
color: whitesmoke;
text-align: center;
font-size: 45px;
font-weight: bold;
padding: 60px;
}

.testimony-main p {
color: var(--yellow);
text-align: center;
font-size: 25px;
font-weight: bold;
padding: 5px;
}

.testimony-main div {
display: flex;
justify-content: center;
align-items: flex-end;
margin-top: 60px;
}

.person img {
  border-radius: 50%;
  height: 60px;
  margin-right: 5px;
}

.person div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
} 
.testimony-main div p{
  font-size: 18px;
  font-weight: 400;
  color: #7a9ebd;
}
.testimony-main div p:last-child{
  font-size: 1rem;
  font-weight: 300;
  color: white;
  position: relative;
}

#emoji {
  position: absolute;
  bottom: 0;
  height: 35vw;
  width: 69vw;
  display: flex;
}

#emoji img {
  height: 160px;
}

.emoji-upperLeft {
  position: absolute;
  top: 0;
  left: 0;
}

.emoji-upperRight {
  position: absolute;
  top: 0;
  right: 0;
}
.emoji-bottomLeft {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: 30px;
  margin-bottom: 30px;
}
.emoji-bottomRight {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 40px;
  margin-bottom: 30px;
}





/* ------------------------------ Services ------------------------------ */

#services {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}

.services-main {
  display: flex;
  justify-content: space-evenly;
  font-size: large;
  height: 400px;
}

#services h2 {
  font-size: 50px;
  margin-bottom: 30px;
  font-weight: 500;
}


.little-img1 { 
  background-image: url(../images/services-section/icons/1.svg);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  background-color: #f2f4fc;
  padding: 35px;
}
.little-img2 { 
  background-image: url(../images/services-section/icons/2.svg);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  background-color: #f2f4fc;
  padding: 35px;
}
.little-img3 { 
  background-image: url(../images/services-section/icons/3.svg);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  background-color: #f2f4fc;
  padding: 35px;
}

.serviceDiv {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  background-color: white;
  margin-right: 30px;
  padding-left: 30px;
}

.service-text {
  padding: 20px;
  height: 225px;
  width: 275px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 1.2;
  gap: 30px;
}

#services a {
  text-decoration: none;
  color: var(--primary);
  font-weight: 500;
}
/* ------------------------------ Questions form ------------------------------ */

#support {
  background-color: var(--yellow);
  height: 30vw;
  width: 80vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

#support h2 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 5px;
  opacity: 80%;
}

#support p {
  color: #292e47; 
  font-size: 19px;
  margin-bottom: 35px;
}

#email {
  background-image: url(../images/newsletter/icon/mail.svg);
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: 8px;
  padding-left: 50px;
  background-color: var(--lightestBlue);
  border: 1px solid var(--lighterSkyBlue);
  height: 72px;
  width: 293px;
  margin-right: 10px;
}

.submit-button {
  cursor: pointer;
  background-color: var(--primary);
  color: white;
  font-size: 16px;
  font-weight: 100;
  padding: 25px 50px;
  border: none;
}

.submit-button:hover {
  background-color: #292e47;
}

/* ------------------------------ Footer ------------------------------ */

#footer {
  display: flex;
  justify-content: space-around;
  width: 80vw;
  height: 6vw;
  padding-right: 300px;
  gap: 250px;
}
.direction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 16vw;
  gap: 25px;
  color: #292e47;
  font-weight: 400;
}

.direction img {
  height: 30px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 30px;
}

.footer-links a {
  text-decoration: none;
  color: var(--primary);
  font-weight: 400;
}

/* -------------------------------------------------------------------------- */
/* ------------------------------ PROJECT html ------------------------------ */
/* -------------------------------------------------------------------------- */

/* ------------------------------ Project main ------------------------------ */

#main-project {
display: flex;
flex-direction: column;
gap: 20px;
}

#main-project h2 {
  font-size: 55px;
  font-weight: bold;
  margin-bottom: 13px;
}

.project-subtitle {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 500;
  color: var(--secondary);
}

#main-project img {
  max-width: 80vw;
  max-height: 30vw;
  object-fit: cover;
}

.blur {
  background-image: url(../images/projects-section/1.jpg);
  background-size: contain;
  position: absolute;
  top: 42%;
  /* right: 50%; */
  height: 30vw;
  width:77vw;
  max-width: 77vw;
  filter: blur(25px);
  opacity: 30%;
  z-index: -1;
}
#main-project p {
  font-size: 20px;
  line-height: 30px;
}


/* ----------------------------------------------------------------------------- */
/* ------------------------------ CONTACT-US html ------------------------------ */
/* ----------------------------------------------------------------------------- */

/* ------------------------------ Form ------------------------------ */

#getData {
  font-size: 20px;
  font-weight: 400;
  color: var(--secondary);
}

#getData input, textarea {
  background-color: var(--boxes);
  border: none;
  padding: 20px;
  margin-bottom: 20px;
}

#getData h2 {
  color: black;
  font-size: 50px;
  height: 200px;
  display: flex;
  align-items: center;
}

#getData input:nth-child(3) {
  background-color: var(--primary);
  color: white;
  font-size: 16px;
  font-weight: bold;
  height: 80px;
}

.userName {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.emailPhone {
  display: flex;
  gap: 10px;
}

.mail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 50%;
}
.phone {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 50%;
}
.message {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#getData ::placeholder {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  opacity: 60%;
  font-size: 16px;
}

/* ----------------------------------------------------------------------------- */
/* ------------------------------ About html ------------------------------ */
/* ----------------------------------------------------------------------------- */

/* Your CSS code goes here */

/* --------------------------------------------------------------------------- */
/* ------------------------------ MEDIA QUERIES ------------------------------ */
/* --------------------------------------------------------------------------- */

/* ------------------------- Smaller than 990px (tablet) ------------------------- */
/* ! */
@media (max-width: 990px) {
  /* Your CSS code goes here */
}



/* ------------------------- Smaller than 766px (mobile) ------------------------- */
@media (max-width: 766px) {
  /* Your CSS code goes here */
  * {
    margin: 0;
  }

  body {
    padding: 0;
  }

  nav, main, section, footer {
    margin: 10px 40px;
  }

  .hamburger {
    display: block;
    
  }
  .hamburger {
    display: block;

  }

  .hamburger.active .bar:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .nav-links {
    position: absolute;
    left: 0;
    top: -100%;
    flex-direction: column;
    background-color: #C8C8C8;
    width: 100%;
    text-align: left;
    padding-left: 30px;
    transition: 0.5s;
  }

  nav a {
    margin: 16px 0;
  }

  .nav-links.active{
    top: 80px;
    z-index: 1;
  }

  .navContact {
    display: none;
  }

/** main section with character */


  main {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 5vw;
    max-height: 100vw;
  }

main h2{
  text-align: center;
  font-size: 40px;
  padding-top: 0px;
  padding-left: 40px;
  width: 80vw;
} 

main p {
  font-size: 16px;
 width: 90vw;
 text-align: center;
}

main a {
  font-size: initial;
  font-weight: initial;
  line-height: 1;

}
.reverse-links {
  display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    width: 80vw;
    height: 10vw;
   margin-bottom: 30px;
}

.smilingGuy{
  height: 450px;
  padding-left: 11vw;
}
  .creditCard{
    display: none;
  }
  .emojiFinger{
    display: none;
  }

/** logo bar */
#logo {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-top: 40vw;
  height: 30vw;
  justify-content: space-evenly;
  align-content: stretch;
  gap: 38px;
}

#logo img:last-of-type {
  display: none;
}

/* recent projects */

#projects {
  display: flex;
  align-items: center;
  margin-bottom: 100px;
}

.projects-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#projects img {
  width: 75vw;
}

/* client review */
#testimony {
  height: 85vw;
  width: 100vw;
  margin: 0;
}

#testimony h2 {
  font-size: 38px;
}

.testimony-main p {
  font-size: 20px;
}

.person {
height: 60px;
}

#emoji {
  display: none;
}

/*  services */

#services {
  display: flex;
  align-items: center;
  margin-top: 75px;
  height: 100vw;
}

.services-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  width: 95vw;
  gap: 20px;
}

.serviceDiv {
  padding: 40px;
}

/*  question form */
#support {
  margin: 0;
  height: 60vw;
  width: 100vw;
}

#getSupport {
  display: flex;
  flex-direction: column;
  width: 45vw;
  gap: 15px;
}

#footer {
  display: flex;
  flex-direction: column;
  margin: 250px auto;
  width: 1vw;
  height: 1vw;
  align-items: flex-start;
}

.footer-links {
  display: flex;
  flex-direction: row;
  width: 45vw;
  justify-content: flex-start;
}

.quickFix {
  display: flex;
  flex-direction: column;
  gap: 650px;
}
}

/* ------------------------------ Hamburguer menu ------------------------------ */


/* ------------------------------ Alert ------------------------------ */

/* Your CSS code goes here */

/* ------------------------------ Sticky scroll bar ------------------------------ */

/* Your CSS code goes here */