/* You can not modify anything from the HTML file */
/* You can only modify the CSS file */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: 0.2s linear;
    }
    
    html {
        overflow-x: hidden;
        scroll-behavior: smooth;
        scroll-padding-top: 6m;
        font-size: 62.5%;
    }
    
    body {
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    
    
     .container {
            max-width: 1140px;
            display: flex;
            align-content: center;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }


/* creating varible to store some default value to the css */

:root {

    --dark-black: #000000;
    --lite-black: #424242;
    --white: #f5f5f5;
    --main-font-family: 'Orbitron', sans-serif;;
    --sub-font-family: 'Poppins', sans-serif;

}
/* styling the nav menu */

.list {
    display: flex;
    gap: 3.5rem;
    font-size: 1.8rem;
    list-style-type: none;
    font-family: var(--main-font-family);
}

.navbar-container div img {
    height: 4.4rem;
}

/* styling and aliging the nav content */

.navbar-container {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 30rem;
    padding: 2.5rem 3rem 7rem 3rem;
}

/*putting the ACTIVE nav menu  */

.list :nth-child(1) {
    font-weight: 900;
    position: relative;
}

.list :nth-child(1)::after {
    content: "";
    width: 4.8rem;
    height: 0.2rem;
    background-color: var(--dark-black);
    position: absolute;
    top: 2.3rem;
    left: 0.5rem;
    border-radius: 2rem;
}

/* creating the alignment insite between search icon and search Button field */
.button-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
/* styling the NAV Button */

    .nav-button {
        padding: 1rem 3rem 1rem 3rem;
        background-color: #00000000;
       border: 0.3rem solid;
       border-radius: 1rem;
       width: 17rem;
    }

    .search-icon svg {
        height: 2.5rem;
    }

/* Hero Section conteror all the hero content */

  .hero-container {
    display: flex;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    position: relative;
    width: 150rem;
}

/* Hero section Right conterer which conternt all the text */
.hero-container-right {
    display: flex;
    gap: 6rem;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* main bold hedding to the hero */

.hero-heading {
    font-size: 5.5rem;
    font-family:var(--main-font-family);
}

/* discreption to the hero */

.hero-description {
    font-size: 1.6rem;
    font-family: var(--sub-font-family);
    width: 75rem;
    text-align: center;
    color: var(--lite-black);
}
        /* targeating hero image and resizing */
        img[alt='person-hero-iamge'] {
            z-index: 10000;
            width: 60vh;
        }

 /* Squire share that is floting after the image */
.square {
    z-index:-1;
    position: absolute;
    top: 30rem;
    left: 28.5rem;

}
    /* resiging the image of squire */
    .square img {
        width: 40vh;
    }

/* Adding style to globle */
.globe {
    position: absolute;
    top: -4rem;
    right: 64rem;
}
    /* resizing the globe image */
        .globe img {
            width: 6vh;
        }
/* star image stile */

.star:nth-of-type(2) {
    position: absolute;
    top: 1rem;
    right: 11rem;
}

span.star {
    position: absolute;
    top: 45rem;
}

.star img {
    width: 6vh;
}

/* Email styling */

.button-email {
    padding: 1rem 2rem 1rem 2rem;
    background-color: #00000000;
   border: 0.2rem solid;
   border-radius: 1rem;
   width: 22rem;
   font-family: var(--main-font-family);
   font-weight: 400;
   font-size: 1.8rem;
   letter-spacing: 0.1rem;
   color: var(--lite-black);
   margin-right: 1rem;
}

/* Join Button styling */

.button-join {
    padding: 1rem 1rem 1rem 1rem;
    background-color: #000000;
   border: 0.2rem solid;
   border-radius: 1rem;
   font-family: var(--main-font-family);
   font-weight: 400;
   font-size: 1.8rem;
   letter-spacing: 0.1rem;
   color: var(--white);
}

/* Icon text style */

.contact-heading {
    font-family: var(--sub-font-family);
    font-weight: 600;
    font-size: 1.8rem;
    letter-spacing: 0.1rem;
    color: var(--lite-black);
    text-align: center;
}

/* icon of social midea */

.icons {
    margin-top: 1rem;
    display: flex;
    gap: 2rem;
}
/* resiging the icon */
.icons img {
    height: 4vh;
}