@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300;600&display=swap');
/* font-family: 'Overpass', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;1,700&display=swap');
/* font-family: 'Ubuntu', sans-serif; */



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    max-width: 1440px;
    margin: 0 auto;
}
a{
    text-decoration: none;
    color: white;
    font-family: Ubuntu;
}
.desktop-header-flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 100px;
    margin-bottom: 50px;
}
.desktop-header{
    background: linear-gradient(to right, hsl(13, 100%, 72%), hsl(353, 100%, 62%));
    border-bottom-left-radius: 60px;
}
.left-links {
    display: flex;
    align-items: center;
}
.left-links a{
    margin-right: 30px;
}
.right-buttons a{
    margin-right: 30px;
}
.right-buttons button{
    padding: 10px 25px;
    color: hsl(353, 100%, 62%);
    border-radius: 20px;
    background-color: white;
    border: none;
    outline: none;
    cursor: pointer;
}
.right-buttons button:hover{
    color: white;
    background-color: rgba(255, 255, 255, 0.225);
    /* box-shadow: 0 0 10px 15px hsl(0, 0, 0, 0.2); */
}
.platform-div{
   display: flex;
   justify-content: center;
}
.platform{
    color: white;
    text-align: center;
    font-family: Overpass, sans-serif;
    margin-bottom: 100px;
}
.platform h1{
    font-size: 40px;
    margin-bottom: 10px;
    font-weight: 300;
}
.platform button{
    padding: 10px 15px;
    color: hsl(353, 100%, 62%);
    border-radius: 20px;
    background-color: white;
    border: none;
    outline: none;
    cursor: pointer;
    margin-top: 30px;
    font-size: 13px;
}
.buttons-div button{
    margin-right: 10px;
}
.buttons-div button:nth-child(2){
    background-color: transparent;
    color: white;
    border: 1px solid white;
    transition: all 0.2s ease-in-out;
}
.buttons-div button:nth-child(1):hover{
    color: white;
    background-color: rgba(255, 255, 255, 0.225);
    transition: all 0.2s ease-in-out;
}
.buttons-div button:nth-child(2):hover{
    color: hsl(353, 100%, 62%);
    background-color: white;
}
section h2{
    color: hsl(208, 49%, 24%);
    font-family: Overpass;
    text-align: center;
}
.design{
   margin-top: 100px;
}
.design-div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
    font-family: Overpass;
}
.text-1 h3, .text-2 h3{
    color: hsl(208, 49%, 24%);
    margin-bottom: 15px;
}
.text-1 p, .text-2 p{
    color: hsl(207, 13%, 34%);
    line-height: 25px;
    font-size: 14px;
}
.text-design{
    display: flex;
    flex-direction: column;
    padding: 100px;
    gap: 30px;
    justify-content: center;
    align-items: center;
}
.grid-phone{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 400px;
    border: 1px solid black;
    background-color: hsl(237, 23%, 32%);
    font-family: Overpass, sans-serif;
    border-bottom-left-radius: 70px;
    border-top-right-radius: 70px;
    margin-top: 50px;
}
.phone-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.phone-text h2{
    color: white;
    font-weight: 300;
    margin-bottom: 20px;
}
.phone-text p{
    color: white;
    font-size: 14px;
    padding-right: 200px;
    line-height: 25px;
}
.grid-phone .phone{
    background: url("images/bg-pattern-circles.svg");
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -70px;
}
.laptop-div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 100px;
}
.laptop-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}
.laptop-text p{
    padding-right: 200px;
}
footer{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: hsl(240, 10%, 16%);
    padding: 40px 100px;
    border-top-right-radius: 70px;
}
.grid-footer{
    display: flex;
    flex-direction: column;
    
}
.grid-footer p{
    color: white;
    font-family: Overflow, sans-serif;
    margin-bottom: 30px;
}
.grid-footer a{
    margin-bottom: 10px;
    font-size: 13px;
    color: hsl(240, 2%, 79%);
}
.grid-footer a:hover{
    color: hsl(355, 100%, 74%);
}
.footer-logo img{
    width: 80px;
}

.dropdown-content{
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    font-size: 14px;
    width: 120px;
    margin-top: 20px;
    left: 180px;
    pointer-events: none;
    gap: 10px;
    transition: all 0.3s ease-in-out;
}
.company-dropdown{
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    font-size: 14px;
    width: 100px;
    margin-top: 20px;
    left: 320px;
    pointer-events: none;
    gap: 10px;
    transition: all 0.3s ease-in-out;
}
.connect-dropdown{
    display: flex;
    flex-direction: column;
    position: absolute;
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    font-size: 14px;
    width: 100px;
    margin-top: 20px;
    left: 440px;
    pointer-events: none;
    gap: 10px;
    transition: all 0.3s ease-in-out;
}
.connect-dropdown a{
    color: hsl(207, 13%, 34%);
}
.company-dropdown a{
    color: hsl(207, 13%, 34%);
}
.dropdown-content a{
    color: hsl(207, 13%, 34%);
    font-family: Overpass;
    cursor: pointer;
}
.opacity-none{
    opacity: 0;
}
.dropdown-content a:hover{
    color: black;
}
.attribution {
    font-size: 11px;
    text-align: center;
}
  .attribution a {
    color: hsl(228, 45%, 44%);
}
.mobile-header{
    display: none;
}





  @media only screen and (max-width: 900px){

    .desktop-header-flex{
        display: none;
    }
    .design-div{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "design-pic"
        "text-design";
        text-align: center;
        margin-bottom: 100px;
    }
    .text-design{
        grid-area: text-design;
        padding: 20px;
        margin-top: 80px;
    }
    .text-design h3{
        padding: 0 50px;
    }
    .design-pic{
        grid-area: design-pic;
    }
    .design{
        margin-top: 50px;
    }
    .grid-phone{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        text-align: center;
    }
    .phone img{
        width: 100%;
    }
    .phone-text p{
        padding: 20px;
    }
    .phone-text h2{
        padding: 0 80px;
        margin-bottom: 0px;
    }
    .laptop-div{
        grid-template-columns: 1fr;
        grid-template-rows: 300px 1fr;
        margin-top: 50px;
        text-align: center;
        gap: 30px;
        margin-bottom: 30px;
    }
    .laptop-text p{
        padding-right: 0px;
        padding: 0 20px;
    }
    .mobile-header{
        display: block;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40px 20px;
        margin-bottom: 30px;
    }
    .platform h1{
        font-size: 30px;
        padding: 0 50px;
    }
    footer{
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-logo{
        display: flex;
        justify-content: center;
        width: 100px;
        align-items: center;
        padding-left: 65px;
        margin-bottom: 20px;
    }
    .grid-footer{
        margin-top: 30px;
    }
    .mobile-menu{
        position: absolute;
        width: 90%;
        height: 500px;
        background-color: white;
        border-radius: 5px;
        top: 100px;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
        display: none;
        padding: 20px;
    }
    .active{
        display: block;
    }
    .menu-btn a{
        font-family: Overpass, sans-serif;
        color: hsl(240, 10%, 16%);
    }
    .menu-btn{
        padding: 0 30px;
    }
    .dropdown-menu {
        display: flex;
        flex-direction: column;
        background-color: hsla(240, 3%, 79%, 0.308);
        align-items: center;
        padding: 10px 0;
        display: none;
    }
    .dropdown-menu a{
        margin-bottom: 10px;
        color: hsl(207, 13%, 34%);
        cursor: pointer;
    }
    .dropdown-menu a:hover{
        color: hsl(355, 100%, 74%);
    }
    .dropdown-menu a:nth-child(1){
        margin-top: 10px;
    }
    .dropdown-btn{
        margin-top: 20px;
        display: flex;
        gap: 5px;
        justify-content: center;
        margin-bottom: 20px;
        align-items: center;
        cursor: pointer;
    }
    .dropdown-btn a{
        font-family: Overpass, sans-serif;
        font-weight: 600;
        color: hsl(237, 23%, 32%);
        font-size: 18px;
    }
    .dropdown-btn:hover .dropdown-menu{
        display: flex;
    }
    .hamburger{
        cursor: pointer;
    }
    .menu-btn:hover .dropdown-menu{
        display: flex;
    }
    .close-div{
        display: none;
        cursor: pointer;
    }
    .mobile-menu-buttons{
        /* border: 1px solid black; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mobile-menu-buttons button{
        display: block;
        /* border: 1px solid black; */
    }
    .mobile-menu-buttons button:nth-child(1){
        color: hsl(237, 23%, 32%);
        font-size: 18px;
        background-color: transparent;
        padding: 10px 30px;
        outline: none;
        border: none;
        cursor: pointer;
        font-weight: 600;
    }
    .mobile-menu-buttons button:nth-child(2){
        padding: 15px 10px;
        border-radius: 30px;
        width: 50%;
        font-family: Overpass;
        font-size: 18px;
        background: linear-gradient(to right, hsl(13, 100%, 72%), hsl(353, 100%, 62%));
        outline: none;
        border: none;
        color: white;
        font-weight: 600;
        cursor: pointer;
    }
    hr{
        margin-top: 20px;
    }
  }

  /* @media only screen and (min-width: 400px) and (max-width: 899px){
    .design-div{
        grid-template-rows: 400px 1fr;
    }
  }

  @media only screen and (min-width: 530px) and (max-width: 899px){
    .design-div{
        grid-template-rows: auto;
    }
  } */