/* global */

.inter-font {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: light-300;
  font-style: normal;
}

h1 {
    font-weight: 600;
}

h2 {
    font-weight: 500;
    padding: 8px;
}

p {
    font-weight: 400;
    padding: 4px;
}

body {
    margin:0;
    padding:0;
    background-image: url("images/background-cropped.png");
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
}
img {
    max-width:100%;
    height:auto;

}


/*nav*/
/* Add a black background color to the top navigation */
.nav {
  overflow: hidden;
  display:flex;
  background: black;
}



/* Style the links inside the navigation bar */
.nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.nav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.nav a.active {
  background-color: white;
  color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.nav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .nav {display:block;}
  .nav a:not(:first-child) {display: none;}
  .nav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .nav.responsive {position: relative;}
  .nav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/*home page*/
.grid-home{
    display: grid;
      grid:
        ". text text text text text text image image image image image image . " auto
        ". card1 card1 card1 card1 card2 card2 card2 card2 card3 card3 card3 card3 . " auto
        / 0.25fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.25fr;
        grid-row-gap:8px;
}

.top-text-left {
    grid-area: text;
    justify-self:center;
    align-self:center;
    margin-right:1rem;
    border: 1px solid white;
    border-radius:1rem;
    background: #F4F0E4;
    background: linear-gradient(90deg,  rgba(198, 224, 240, 1) 0%, rgba(244, 240, 228, 1) 50%);
    color: #2A3F4C;

}
.top-img-right-container {
    grid-area: image;
    width:80%;
    height:auto;
    margin-left:auto;
}

.card1{
    grid-area: card1;
}
.card2{
    grid-area: card2;
}
.card3{
    grid-area: card3;
}


.home-card {
    background: #3F5EFB;
    background: radial-gradient(circle, rgba(63, 94, 251, 0.5) 0%, rgba(252, 70, 107, 0.5) 100%);
    border:solid;
    border-color:#f8f8ff80;
    overflow: hidden;
    border-radius: 1em;
    width: 95%;
    height:100%;
    margin:auto;
    text-align: center;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
      "card-image"
      "card-text"
      "card-button"
      "empty-card-bottom";
      padding-bottom: 25px;
      color:white;
}

.card-image{
    grid-area: card-image;
}

.card-text{
    grid-area: card-text;
    margin-left:1rem;
}

.card-button {
    grid-area: card-button;
    align-self:end;
}
.empty-card-bottom{
    height:20px;
}

.button {

  border-radius: 20px;
  background-color: #85C79A;
  border: none;
  color: #FFFFFF;
  font-size: 1.25rem;
  padding: 20px;
  margin-bottom:20px;
  width: 100px;
  cursor: pointer;

}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

/*mobile home page */
@media only screen and (max-width: 620px) {
  /* For mobile phones: */


  .grid-home {
        display: grid;
        row-gap: 1rem;
        margin-top:2rem;
        width:100%;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "text text text text text text"
            "image image image image image image"
            "card1 card1 card1 card1 card1 card1"
            "card2 card2 card2 card2 card2 card2"
            "card3 card3 card3 card3 card3 card3";
      }

      .top-img-right-container{
          width:100%;
      }

      .card-text{
          margin-bottom:1.5rem;
      }

      .empty-card-bottom{
          height:2rem;
      }

      .home-card{
          justify-self:center;
          height:auto;
      }
      .top-text-left{
          width:95%;
          margin:auto;
      }
}

/* about page */
.grid-about {
      display: grid;
      width: 100%;
        min-height: 100vh;
        row-gap: 1rem;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows:auto;
      grid-template-areas:
      "about-top-text about-top-text about-top-text about-top-image about-top-image about-top-image"
        "card1 card1 card2 card2 card3 card3"
        "card4 card4 card5 card5 card6 card6"
        "about-bottom about-bottom about-bottom about-bottom about-bottom about-bottom"
          ;
    }

    .about-top-text{
        grid-area: about-top-text;
        align-content:center;
        margin-left:2rem;
        padding:1rem;
        color: white;
    }
    .img-logo{
        width:50%;
        height:auto;
    }

    .about-top-image{
        grid-area:about-top-image;
        display:flex;
        justify-content:center;
        align-items:start;
    }



    .card1-about{
        grid-area: card1;
        width:95%;
        justify-self:center;
    }
    .card2-about{
        grid-area: card2;
        width:95%;
        justify-self:center;
    }
    .card3-about{
        grid-area: card3;
        width:95%;
        justify-self:center;
    }

    .card4-about{
        grid-area: card4;
        width:95%;
        justify-self:center;
    }
    .card5-about{
        grid-area: card5;
        width:95%;
        justify-self:center;
    }
    .card6-about{
        grid-area: card6;
        width:95%;
        justify-self:center;
    }

    .about-bottom{
        grid-area: about-bottom;
    }

    .container-about{
        background: #F4F0E4;
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(4.8px);
        -webkit-backdrop-filter: blur(4.8px);
        border: 1px solid black;
        height:100%;
    }

    /*mobile about page */
    @media only screen and (max-width: 620px) {
      /* For mobile phones: */
      .grid-about {
            display: grid;
            width: 100%;
              min-height: 100vh;
              row-gap: 1rem;
            grid-template-columns: auto;
            grid-template-rows:auto;
            grid-template-areas:
            "about-top-text"
            "about-top-image"
              "card1"
              "card2"
              "card3"
              "card4"
              "card5"
              "card6"
              "about-bottom"
                ;
          }
    .about-top-text{
        grid-area: about-top-text;
        align-content:center;
        width:95%;
        margin:auto;
        padding:0;
        }
    }

    @media only screen and (max-width: 930px) and (min-width: 621px) {
        .grid-about {
            color:white;
              display: grid;
              width: 100%;
                min-height: 100vh;
                row-gap: 1rem;
              grid-template-columns: repeat(6, 1fr);
              grid-template-rows:auto;
              grid-template-areas:
              "about-top-text about-top-text about-top-text about-top-text about-top-image about-top-image"
                "card1 card1 card2 card2 card3 card3"
                "card4 card4 card5 card5 card6 card6"
                "about-bottom about-bottom about-bottom about-bottom about-bottom about-bottom"
                  ;
            }

            .about-top-image{
                align-items:center;
            }

            .grid-home{
                display: grid;
                  grid:
                    ". text text text text text text text image image image image image . " auto
                    ". card1 card1 card1 card1 card2 card2 card2 card2 card3 card3 card3 card3 . " auto
                    / 0.25fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 0.25fr;
                    grid-row-gap:8px;
            }

    }

/* contact page */


/*form*/
. contact-form{
    margin-top: 2rem;
}
.form-container {
  margin: auto;
  margin-top:5vh;
  padding: 20px;
  border: 6px solid #888;
  width: 60%;
  border-radius: 2em;
  background: linear-gradient(to right, rgba(63, 94, 251, 0.4) 0%, rgba(252, 70, 107, 0.4) 100%);
  padding: 20px;
}

@media only screen and (max-width: 620px) {
    .form-container{
        margin-top:5vh;
        width:80%;
    }
}

input[type=text], 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: #85C79A;
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size:1.5rem;
}


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


/*footer */
.footer{
  text-align: center;
  color:white;
  margin-top:4rem;
}


/* buttons */

.buttons {
text-align: center;
}

.btn-hover {
width: 200px;
font-size: 16px;
font-weight: 600;
color: #fff;
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
background-size: 300% 100%;

border-radius: 1rem;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.btn-hover:hover {
background-position: 100% 0;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.btn-hover:focus {
outline: none;
}


.btn-hover.color-1 {
background-image: linear-gradient(to right, #320A6B, #065084, #85C79A, #EDF7BD);
box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
}