@import url(./abstracts.css);


/* styles-for-mobile-first
    =================
*/

/* navbar */
.logo {
    width: 150px;
    height: 20px;
    opacity: .80;
    display: flex;
    align-items: center;
}
.navbar-nav {
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--white);
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
}

/*.navbar-overlay {*/
/*  position: absolute;*/
/*  top: 64px;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 150vh;*/
/*  background-image: red;*/
/*}*/

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Style the dropdown button to fit inside the topnav */
  .dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: var(--grayish-blue);
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Style the links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a dark background on topnav links and the dropdown button on hover */
    .dropbtn:hover {
    color: black;
  }
  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  

/* hamburger menu */
.navbar-click {
  cursor: pointer;
}

/* hamburger menu general styles */
.navbar-click span {
  display: block;
  width: 24px;
  height: 1px;
  background-color: var(--dark-blue);
  margin-bottom: 4px;
  transform-origin: 5px 1px;
  transition: 120ms ease-in all;
}

/* rotate hamburger menu when clicked */
.is-clicked span {
  transition: 120ms ease-in all;
}

.is-clicked span:first-child {
  transform: rotate(45deg);
}

.is-clicked span:nth-of-type(2) {
  visibility: hidden;
}

.is-clicked span:last-child {
  transform: rotate(-45deg);
}

.navbar-btn {
  margin-top: -5px;
  font-size: 0.82rem;
  font-weight: var(font-weight-300);
  display: none;
}

/* show navbar-btn on 840px breakpoint */
@media (min-width: 38.5rem) {
  .navbar-btn {
    display: block;
  }
  
    .navbar-btn-mobile {
    display: none;
  }
  .navbar-items {
      display: none;
  }

  .navbar-btn:hover {
    opacity: 0.6;
  }
}

/* nav-items menu styles */
.navbar-mobile {
  /* position to center-absolute */
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  margin-left: auto;
  margin-right: auto;
  /* styles */
  width: 80%;
  background-color: var(--white);
  border-radius: 4px;
  padding-top: var(--spacing-35);
  padding-bottom: var(--spacing-35);
  /* display grid */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-30);
}

/* desktop viewport class for navbar-items //added from js */
.navbar-desktop {
  display: flex;
  gap: var(--spacing-30);
}

.navbar-items a {
  position: relative;
  transition: linear 100ms all;
  color: var(--dark-black);
}

@media (min-width: 43.75rem) {
  .navbar-nav {
    background-color: var(--white);
  }

  .navbar-items {
    margin-top: -0.3125rem;
  }

  .navbar-items a {
    color: var(--grayish-blue);
    position: relative;
  }

  .navbar-click {
    display: none;
  }
}

/* navbar-items animation-speed adjust */
.animate__animated.animate__zoomIn {
  --animate-duration: 0.25s;
}

/* class for hidden items, */
.is-hidden {
  visibility: hidden;
  display: none;
  z-index: -24;
}

/* hero-section styles */
.hero-section {
  display: grid;
  gap: var(--spacing-25);
  /*padding-bottom: var(--spacing-90);*/
}


.hero-img img {
 /*background-image: url("./images/medium-shot-people-talking-office.jpg");*/
 width: 100%;
 height: 100%;
 margin-top: 2rem;
 /*margin-right: 6rem;*/
 align-items: center;
border-radius: 20px;
 opacity: 0.8;
 /*object-fit: cover;*/

}

/* .hero-img-top {*/
/*  display: flex;*/
/*  margin-inline: auto;*/
/*  margin-top: -120px;*/
  /*width: 90%;*/
  /*max-width: 26.875rem;*/
/*  z-index: 25;*/
/*} */

.hero-intro {
  display: grid;
  gap: var(--spacing-25);
  place-items: center;
}

.hero-text p {
  text-align: left;
}

@media (min-width: 71.25rem) {
  .hero-section {
    /* reset mobile padding-bottom */
    padding-bottom: 0;
    /*  */
    grid-template-columns: 50% 48%;
    place-items: center;
    background-color: var(--gray-very-light);
    min-height: 509px;
    gap: 2%;
  }

  .hero-intro {
    order: 1;
    place-items: first baseline;
    /*margin-left: var(--spacing-25);*/
  }

  .hero-intro h1 {
    font-size: var(--spacing-40);
    text-align: left;
    
  }

  .hero-intro > p {
    font-size: var(--spacing-10);
    text-align: left;
  }

  .hero-img {
    order: 2;
    background-image: url("./images/medium-shot-people-talking-office.jpg");
    background-position-y: -224px;
    background-position-x: -69px;
    background-repeat: no-repeat;
    position: relative;
    min-width: 90%;
    min-height: 90%;
    overflow-x: clip;
    border-radius: 20px;
    object-fit: cover;
  }

  .hero-img-top {
    position: absolute;
    /*top: 2.1875rem;*/
    /*right: -3.9375rem;*/
    margin: 0;
    width: 90%;
    border-radius: 20px;
    object-fit: cover;
  }
}

 @media (min-width: 57.5rem) {
  .hero-img-top {
    max-width: 90%;
    max-height: 90%;
    /*top: 2rem;*/
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 5px 10px 5px 5px #888888;
  }
}

@media (min-width: 66rem) {
  .hero-intro h1 {
    font-size: var(--spacing-40);
  }
}

@media (min-width: 71.25rem) {
  .hero-intro h1 {
    font-size: var(--spacing-50);
  }
}

@media (min-width: 79.1875rem) {
  .hero-intro h1 {
    max-width: 80%;
  }
}



/* cards section why choose Digitalize */
.cards-section {
  background-color: var(--grayish-blue-light);
  padding-top: var(--spacing-70);
  padding-bottom: var(--spacing-70);
}

.cards-intro {
  display: grid;
  gap: var(--spacing-30);
  margin-bottom: var(--spacing-60);
}

.cards-intro h2 {
  margin: 0 auto;
  text-align: center;
}

.cards-wrapper {
  display: grid;
  place-items: center;
  gap: var(--spacing-30);
}

.cards-item {
  display: grid;
  place-items: center;
  gap: var(--spacing-20);
}

.cards-item img {
  width: 80px;
}

@media (max-width: 425px) {
  .mobile-btn {
    text-align: center;
  }
}

@media (min-width: 50.75rem) {
  .cards-section {
    background-color: var(--grayish-blue-light);
  }

  .cards-intro h2 {
    text-align: left;
    width: 100%;
  }

  .cards-intro > p {
    text-align: left;
    max-width: 55%;
  }

  .cards-wrapper {
    grid-template-columns: 1fr 1fr;
    place-items: first baseline;
  }

  .cards-item p {
    text-align: left;
  }
}

@media (min-width: 48.75rem) {
  .cards-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 51.25rem) {
  .cards-item {
    place-items: first baseline;
  }
}

@media (min-width: 62.5rem) {
  .cards-wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .cards-item p {
    text-align: left;
  }
}

@media (min-width: 75rem) {
  .cards-item {
    gap: var(--spacing-30);
  }
}

/* Contact form */
.error-text, .error-icon {
  display: none;
}
 .field-group.error .error-icon{
  width: 30px;
 }

.field-group.error .error-text,
.field-group.error .error-icon{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.field-group.error input{
border: 2px solid hsl(0,100%,74%);
}
.contactTitle h1 {
  padding: 10px;
  margin-top: 2rem;
  color: #00adee;
}

.contactTitle h1 span {
  border-bottom: 3px solid #00adee;
}

.contactTitle p{
  margin: auto;
  padding: 10px;
}


input[type=text], input[type=number], input[type=file], input[type=email], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  /*resize: vertical;*/
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

@media only screen and (max-width: 600px) and (min-device-width: 320px) and (max-device-width: 425px) {
  /* Your styles for small screens, including Android devices */
  .formContainer {
      width: 95%;
  }
}

@media only screen and (min-width: 601px) {
  /* Your styles for tablets */
  .formContainer {
      width: 70%;
  }
}

.formContainer {

  border-radius: 5px;
  background-color: #f2f2f2;
  margin: auto;
  margin-bottom: 5rem;
}

#form {
  padding: 20px;
  width: 100%;
}


/* footer styles */
.footer {
  display: grid;
  place-items: center;
  text-align: center;
  gap: var(--spacing-30);
  background-color: #00adee;
  padding-top: var(--spacing-40);
  padding-bottom: var(--spacing-40);
}


@media only screen and (min-width: 768) {
    .footer-icons-social {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--spacing-15);
    }
}

.footer-icons-social img {
  cursor: pointer;
  width: var(--spacing-25);
}

.footer-nav {
  display:grid;
  line-height: 2.2;
  
}

.footer-nav a {
  color: var(--white);
  font-weight: var(--font-weight-300);
}

.footer-nav p {
  font-size: var(--spacing-15);
}

@media (min-width: 58.125rem) {
  .footer {
    grid-template-columns: 20% 26% auto;
    place-items: center;
    gap: var(--spacing-90);
  }

  .footer-logo {
    width: 100px;
    grid-column-start: 1;
    grid-row-start: 1;
    place-self: first baseline;
  }


  .footer-icons-social {
    grid-column-start: 1;
    grid-row-start: 1;
    justify-self: flex-start;
  }

  .footer-icons-social img {
    width: var(--spacing-20);
    margin: 0 auto;
    transition: ease all 100ms;
}

  .footer-icons-social img:hover {
    opacity: 0.7;
  }

  .footer-nav {
    grid-template-columns: 50px 1fr 1fr;
    grid-column-start: 2; 
    grid-row-start: 1;
    text-align: center;
  }


  .footer-nav a {
    transition: ease all 100ms;
  }
  .footer-nav a:hover {
    color: var(--lime-green);
  }

  .footer-copy {
    grid-column-start: 4;
    grid-row-start: 1;
    place-self: last baseline;
  }

  .footer-btn {
    grid-column-start: 4;
    place-self: baseline;
    justify-self: baseline;
    grid-row-start: 1;
    grid-column-end: 4;
    justify-self: last baseline;
}