/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    margin:0;
    overflow-x:hidden;
    color:white;
    font-family: Inter;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-padding-top: 50px;

    /* BACK UP FONT */
    font-family: Inter, Arial;

    /* VARIABLES */ 
    --background-blue-color: rgb(99, 180, 255, 20%);
    --blue-color: rgb(99, 180, 255);
    --light-grey: #BCBCBC;

}

*:focus { /* GETS RID OF THE TEXT BOX OUTLINE WHEN SELECTED */
    outline: none;
}

@keyframes down-arrow-animation {
    0% {transform: translateY(0px);}
    50% {transform: translateY(-10px);}
    75% {transform: translateY(20px);}
    100% {transform: translateY(0px);}
}

/* ALL DEVICES */

html {
    max-width: 100%; /* PREVENTS HORIZONTAL SCROLLING */
}

body {
    max-width: 100%; /* PREVENTS HORIZONTAL SCROLLING */
    margin-left:10vw;
    margin-right:10vw;
    background-color: #0F0F0F; /* MOVE BEHIND THE GRADIENT */
    background-image: linear-gradient(-135deg, #0F0F0F, var(--background-blue-color));
}

h1 {
    color:white;
    font-family: Georama;
    font-size: 38px;
}

h4 {
    font-weight:300;
    font-family: Inter;
}

p {
    font-weight:300;
    font-size: 12px;
}

span {
    color:var(--blue-color);
    font-family: Georama;
}

/* BACKGROUND */

.background-grain-image {
    z-index:-1;
    position:fixed;
    left:0;
    top:0;
    margin:0;
    width:100%;
    height:100%;
}

/* HIDE SCROLLBAR */
::-webkit-scrollbar {
    display: none;
}

.down-arrow {
    margin-top:200px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    animation: down-arrow-animation 1s infinite;
}

/* MICROINTERACTIONS */

.first-section-contact-us-button:hover {
    transition-duration:.4s;
    cursor:pointer;
    background-color: var(--blue-color);
    border:none;
}

.contact-submit:hover {
    transition-duration:.4s;
    cursor:pointer;
    background-color: var(--blue-color);
    border:none;
}

/* NAVBAR */

.navbar {
    margin-top: 64px;
}

.navbar-logo {
    height:50px;
}

.navbar a {
    text-decoration: none;
    float:right;
    display:none; /* HIDE THE BUTTON ON PC */
    z-index: 3;
}

.navbar .hamburger-image {
    height:20px;
    position:absolute;
}

.navbar .exit-image {
    height:20px;
    position:absolute;
}

.nav-menu {
    position:fixed;
    left:0;
    height:100%;
    right:0;
    width:100%;
    top:0;
    background-color: rgb(0, 0, 0, 90%);
    display:none;
    z-index: 2;
}

.nav-menu .nav-menu-buttons-list { /* MOVES IT UNDERNEATH THE BUTTON */
    margin-top:300px;
    width:100%;
}

.nav-menu a {
    display:grid;
    margin-top:20px;
    text-align: center;
    justify-self: center;
    font-family: Inter;
    text-decoration: none;
    font-weight:300;
    font-size:24px;

}

.nav-menu .exit-button {
    text-decoration: none;
    float:right;
    z-index: 3;
    margin-right:10vw;
    height:20px;
    margin-top: 64px;
}

.nav-menu .exit-button img {
    height:20px;
}

/* FIRST SECTION */

.first-section-left-text {
    margin-top:173px;
}

.first-section {
    display:flex;
    flex-wrap: wrap;
    margin-bottom:260px;
}

.first-section-right-image img {
    top:80px;
    position:absolute;
    right:-5vw;
    width:1100px;
}

.wide-text {
    margin-bottom:5px;
    font-size:19px;
    color:var(--blue-color);
    font-weight: 300;
    letter-spacing: 15px;
    text-wrap: wrap;
    text-align: center;
}

.section-title {
    font-size:38px;
    text-align: center;
    font-family: Georama;
}

.section-desc {
    text-align:center;
    margin-top:5px;
    width:80vw;
    text-wrap: wrap;
    margin-left:auto;
    margin-right:auto;
}

.first-section-contact-us-button {
    margin-top: 25px;
    background-color:transparent;
    height:45px;
    width:160px;
    border-radius: 10px;;
    font-family: Inter;
    font-weight: 300;
    border: 1px solid white;
    border-color:white;
    stroke-width: 2px;
    color:white;
}

/* SECOND SECTION */

.second-section {
    margin-top:190px;
    text-align:center;
}

.tech-stack {
    justify-self: center;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    width:60vw;
    min-width:300px;
}
.tech-stack-image {
    width:10%;
}

.services-grid {
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    justify-content: center;
    gap:1vw;
    flex-wrap: wrap;
    width:70vw;
}

.service-item {
    width:40%;
    min-width:250px;
    height:auto;
    margin-bottom:20px;
}

.service-item img {
    height:268px;
}

.service-title {
    color:var(--blue-color);
    font-family: Georama;
    margin-top:10px;
}

.service-desc {
    margin-top:10px;
    text-wrap: wrap;
}

/* THIRD SECTION */
.third-section {
    margin-top:190px;
    text-align: center;
}


.testimonies-grid {
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    height:auto;
    justify-content: center;
    flex-wrap: wrap;
    width:80vw;
    height:min-content;
    gap:1vw;
}

.testimony-item {
    margin-top:20px;
    width:288px;
    height:auto;
    position:relative;
    transform: translateY(-80px);
}

.testimony-item-background {
    padding-top:60px;
    height:150px;
    background-color: #16181A;
}

.testimony-profile-image {
    width:45%;
    transform: translateY(60px);
}

.testimony-name {
    font-weight:300;
    font-size: 24px;
}

.testimony-item p {
    margin-top:5px;
    color:var(--light-grey);
}

.testimony-rating {
    margin-top:5px;
    width:40%;
}

.testimony-item h4 {
    font-size: 12px;
    margin-left:10px;
    margin-right:10px;
}

/* CLIENTS SECTION */

.client-section {
    margin-top:180px;
}

.client-section .client-grid {
    margin-top:20px;
    display:flex;
    flex-wrap: wrap;
    gap:20px;
    justify-content: center;
}

.client-section .client-box {
    height:200px;
}

/* CONTACT */

.fourth-section {
    margin-top:180px;
}
.fourth-section .wide-text {
    text-align: center;
}

.fourth-section .section-title {
    text-align:center;
}

.fourth-section .contact-form {
    margin-top:20px;
    justify-content: center;
    display:flex;
    flex-wrap: wrap;
    width:80vw;
    max-width: 600px;
    margin-left:auto;
    margin-right:auto;
}

.fourth-section .long-input {
    width:100%;
    margin-bottom:10px;
    background-color: transparent;
    border: 1px solid var(--light-grey);
    height:48px;
    text-indent: 10px;
}

.fourth-section .desc-input {
    width:100%;
    margin-bottom:10px;
    background-color: transparent;
    border: 1px solid var(--light-grey);
    height:100px;
    text-indent: 10px;
    padding-top: 10px;
}

.contact-submit {
    margin-top: 5px;
    background-color:transparent;
    height:45px;
    width:160px;
    border-radius: 10px;;
    font-family: Inter;
    font-weight: 300;
    border: 1px solid white;
    border-color:white;
    stroke-width: 2px;
    color:white;
    margin-bottom:80px;
}

/* FOOTER */

.footer-divider {
    width:100%;
    height:1px;
    background-color: var(--light-grey);
    margin-bottom:20px;
    margin-top:20px;
}

.footer-grid {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    gap:10vw;
    margin-bottom:30px;
}

.footer-grid h2 {
    color: var(--blue-color);
    font-family: Georama;
}

.footer-grid a {
    text-decoration: none;
    font-weight:300;
    font-size: 12px;
    margin-top:5px;
}

.footer-grid a:hover {
    text-decoration: underline;
}

.footer-grid h3 {
    font-weight:300;
    font-size: 12px;
    margin-top:5px;
}

.footer-grid-first {
    min-width:181px;
}

.footer-grid-first img {
    height:36px;
}

.footer-grid-second {
    display:grid;
    grid-template-rows: min-content min-content min-content;
}

.footer-grid-third {
    display:grid;
    grid-template-rows: min-content min-content min-content;
}

.footer-grid-fourth {
    display:grid;
    grid-template-rows: min-content min-content min-content;
}

.footer-policy {
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    margin-bottom: 10px;
    font-weight: 300;
}


@media only screen and (min-width: 1200px) { /* COMPUTER SCREENS */
    /* DOING HOVER ANIMATIONS HERE BECAUSE THERE IS NO CURSOR ON MOBILE DEVICES */
    
}

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

    /* FIRST SECTION */
    .first-section {
        top:175px;
        display:flex;
        flex-wrap: wrap;

    }

    .first-section-right-image img {
        opacity: 0;
        /* top:80px;
        position:absolute;
        right:-5vw;
        width:1100px; */
    }

}

/* PHONE DISPLAY */
@media only screen and (max-width:500px) {
    .navbar .hamburger-button {
        display:block;
    }
    .navbar .navbar-logo {
        height:24px;
    }


}