* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: ; */
    font-weight: 550;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    font-family: Arial;
    background-color: white;
    color: black;
}



/* Section Styling */

/* header section */

#header {
    width: 100%;
    position: relative;
    padding: 0vw 2.5vw;
    height: 8vw;
    background-color: transparent;
    display: flex;
    gap: 0.2vw;
    font-family: Arial;
}

#header-left {
    width: 50%;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 1.2vw;
}

#hl-1 {
    width: 16%;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial;
}

#hl-1 img {
    height: 75%;
}

#hl-2 {
    width: 12%;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: left;
    align-items: center;
}

#hl-2 img {
    height: 50%;
}

#hl-3 {
    width: 22%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5vw;
}

#hl-3 h1 {
    font-size: 1.6vw;
    font-weight: 500;
}

#hl-3 #dot {
    background-color: mediumspringgreen;
    height: 0.6vw;
    width: 0.6vw;
    border-radius: 100%;
    
}

#header-right {
    width: 50%;
    height: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 1.2vw;
}

#hr-1 {
    width: 8.7%;
    height: 50%;
    background-color: transparent;
    border-radius: 100%;
    border: 0.1vw solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

#hr-2 {
    width: 26%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hr-2 button{
    width: 100%;
    height: 50%;
    background-color: transparent;
    border: 0.1vw solid black;
    display: flex;
    border-radius: 6vw;
    justify-content: center;
    align-items: center;
    gap: 1.2vw;
}

#hr-2 button #plus {
    height: 2.9vw;
    width: 2.9vw;
    border-radius: 100%;
    border: 0.1vw solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hr-2 button #plus h1 {
    color: #000;
    font-size: 2vw;
    font-weight: 300;
}

#hr-2 button h1 {
    font-size: 1.2vw;
    font-weight: 400;
    color: darkgray;
}

#profile-picture {
    height: 2.8vw;
    width: 2.8vw;
}

#profile-picture img{
    height: 100%;
    width: 100%;
    border-radius: 100%;
}

/* hero section */

#hero-section {
    width: 100%;
    height: 60vw;
    background-color: white ;
    position: relative;
    padding: 1.5vw 2.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}

#hero-l {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#hero-r {
    width: 52%;
    height: 100%;
    background-image: url('/assets/images/hero-image.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 1.5vw 2.5vw;
    display: flex;
    justify-content: space-between;
}

#team-profile {
    background-color: #47464C;
    height: 4.5vw;
    width: 27.5vw;
    border-radius: 7vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6vw;
    margin-top: 49vw;
}

#team-profile h1 {
    font-size: 1.3vw;
    font-weight: 400;
    color: white;
}

#profile-image {
    height: 100%;
    width: 11vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1vw;
}

.profile-pictures {
    height: 3.6vw;
    width: 3.6vw;
    border-radius: 100%;
}

#team-profile #plus {
    color: white;
    background-color: transparent;
    border-radius: 100%;
    border: 0.1vw solid white;
    height: 2.3vw;
    width: 2.3vw;
    font-size: 1.6vw;
    font-weight: 400;
}

#scroll {
    height: 8.3vw;
    width: 8vw;
    display: flex;
    flex-direction: column;
    gap: 0.3vw;
    align-items: center;
    justify-content: center;
    margin-top: 47vw;
}

#scroll h1 {
    font-size: 1.2vw;
    font-weight: 400;
    color: darkgray;
}

#scroll-icon {
    height: 6.5vw;
    width: 6.5vw;   
    border: 0.1vw solid black;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5vw;
}

/* hero left section */

    #hero-1 {
        width: 100%;
        height: 45%;
        padding: 0vw 2vw;
    }

    #hero-1 h1 {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 7.5vw;
        
    }

     #hero-1 h1 span {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 200;
     }

     #hero-1 h1 #hl-text2 {
        display: flex;
        align-items: center;
        justify-content: left;
     }

    #hero-2 {
        width: 100%;
        height: 8%;
        display: flex;
        justify-content: center;
    }

    #hero-2 h3 {
        font-size: 1vw;
        text-align: left;
        font-weight: 400;
        color: gray;
    }

    #hero-2 h3 span{
        font-weight: 400;
        color: #000;
    }

    #hero-3 {
        width: 68%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    #hero-3 a {
        height: 68%;
        width: 43%;
        border-radius: 5vw;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1vw;
        text-decoration: none;
    }

    #hero-3 a button{
        background-color: rgb(0, 0, 0);
        height: 100%;
        width: 100%;
        border-radius: 5vw;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1vw;
    }

    #hero-3 a button:hover  {
        background-color: transparent;
        border:0.1vw solid black;
        cursor: pointer;
        transition: all 0.4s ease-in-out;
    } 

     #hero-3 a button:hover h1 {
        color: #000;
         transition: all 0.4s ease-in-out;
    }

     #hero-3 a button:hover #arrow-btn {
        background-color: #000;
         transition: all 0.4s ease-in-out;
    }

    #hero-3 a button:hover #arrow-btn .fa-arrow-right {
        color: #fff;
         transition: all 0.4s ease-in-out;
    }
    

    #hero-3 button h1 {
        font-size: 1vw;
        color: #ffffff;
        font-weight: 400;
        margin-right: 1vw;
        text-decoration: none;
    }

    #hero-3 button #arrow-btn {
        background-color: white;
        border-radius: 100%;
        height: 2.5vw;
        width: 2.5vw;
        margin-right: 0.6vw;
        color: #000;
        font-size: 1vw;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }

    .fa-arrow-right {
        color: #000;
        font-weight: 300;
    }

    #hero-4 {
        width: 100%;
        height: 20%;
        display: flex;
        justify-content: center;
        
    }

    #hero-4 div {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: left;
        border-top: 0.1vw solid black;
        gap: 2vw;
        margin-top: 23%;
    }

    #hero-4 div a {
        width: 22%;
        height: 55%;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

     #hero-4 div a #schedule-call {
        width:100%;
        height:100%;
        border: 0.1vw solid rgb(0, 0, 0);
        background-color: transparent;
        border-radius: 5vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1vw;
        font-weight: 400;
        gap: 0.5vw;
    }

    #hero-4 div a #schedule-call:hover {
        background-color: #000;
        color: #fff;
        transition: all 0.4s ease-in-out;
    }

    #hero-4 div a #schedule-call:hover span {
        background-color: #fff;
        transition: all 0.4s ease-in-out;
    }

    #hero-4 div #schedule-call span {
        height: 0.3vw;
        width: 0.3vw;
        background-color: black;
        border-radius: 100%;
    }

     #hero-4 div a {
        width: 19%;
        height: 55%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
    
    #hero-4 div a #book-demo {
        width: 100%;
        height: 100%;
        border: none;
        border-bottom: 0.1vw solid rgb(0, 0, 0);
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1vw;
        font-weight: 400;
        gap: 0.5vw;
    }

    #hero-4 div a #book-demo:hover {
        border: none;
        transition: all 0.4s ease-in-out;
    }

    #hero-4 div a #book-demo:hover .fa-arrow-right {
        transform: rotate(-20deg);
        transition: all 0.4s ease-in-out;
        
    }

    #hero-4 div #book-demo .fa-arrow-right {
        font-size: 1vw;
        font-weight: 400;
    }

    #benefit {
        width: 100%;
        height: 67vw;
        position: relative;
        padding: 1.5vw 2.5vw;
    }

    #benefit-1 {
        width: 100%;
        height: 62.1vw;
        position: relative;
        padding: 1.5vw 2.5vw;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1vw;
    }

    #benefit-2 {
        width: 100%;
        height: 100%;
        background-image: url('/assets/images/benefit.svg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #benefit-2 img {
        height: 50vw;
        transform: translateY(9vw);
    }

/* Responsive Design */


.images {
  width: 100%;
}

.images img {
  width: 100%;
}


/* reponsive for large devices */

@media (min-width: 1200px) {
    #header {
        height: 4vw;
    }

    #header-left {
        gap: 0.6vw;
    }

    #hl-1 {
    width: 8%;
    height: 100%;
    }

   #hl-1 img {
    height: 85%;
   }

   #hl-2 {
    width: 9%;
    height: 100%;
   }

   #hl-2 img {
    height: 50%;
   }

   #hl-3 {
    width: 15%;
    height: 100%;
    gap: 0.5vw;
   }

   #hl-3 h1 {
    font-size: 1vw;
    font-weight: 400;
   }

   #hl-3 #dot {
    background-color: mediumspringgreen;
    height: 0.4vw;
    width: 0.4vw;
    border-radius: 100%;
    
   }
/* /////////////////////////// */
   #header-right {
    width: 50%;
    height: 100%;
   }

#hr-1 {
    width: 2.3vw;
    height: 2.3vw;
    
}

#hr-2 {
    width: 17%;
    height: 100%;
}

#hr-2 button{
    width: 100%;
    height: 2.3vw;
    border: 0.1vw solid #000;
    gap: 0.6vw;
    
}

#hr-2 button #plus {
    height: 1.6vw;
    width: 1.6vw;
    border-radius: 100%;
}

#hr-2 button #plus h1 {
    color: #000;
    font-size: 1.5vw;
    font-weight: 200;
}

#hr-2 button h1 {
    font-size: 1vw;
    font-weight: 300;
    color: darkgray;
}

#profile-picture {
    height: 1.6vw;
    width: 1.6vw;
}

#profile-picture img{
    height: 100%;
    width: 100%;
    border-radius: 100%;
}
}

@media (min-width: 1200px) {
  /* Styles for desktops and large screens hero rigt*/

  #hero-section {
    height: 44vw;
    justify-content: space-between;
  }

   #hero-r {
     width: 36.5%;
     padding: 1.5vw 1.5vw;
  }
   #team-profile {
     width: 18vw;
     height: 3vw;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 35.7vw;
   }
   #team-profile h1 {
     font-size: 0.9vw;
     font-weight: 300;
   }
   #team-profile #profile-image {
     width: 6vw;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .profile-pictures {
     height: 2vw;
     width: 2vw;
     border-radius: 100%;
   }
   #team-profile #plus {
     height: 1.6vw;
     width: 1.6vw;
     font-size: 1.2vw;
     font-weight: 300;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   #scroll {
     height: 5vw;
     width: 4vw;
     display: flex;
     flex-direction: column;
     gap: 0.2vw;
     align-items: center;
     justify-content: center;
     margin-top: 34.5vw;
    }
    #scroll h1 {
    font-size: 0.8vw;
    font-weight: 300;
    color: darkgray;
    }

    #scroll-icon {
     height: 3.4vw;
     width: 3.4vw;   
     border: 0.1vw solid black;
     border-radius: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2vw;
    }

}


@media (min-width: 1200px) { 
    #hero-l {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50%;
        padding: 0vw 2vw;
    }

    #hero-1 {
        width: 100%;
        height: 50%;
        padding: 0vw 2vw;
    }

    #hero-1 h1 {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 6vw;
        
    }

     #hero-1 h1 span {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 200;
     }

     #hero-1 h1 #hl-text2 {
        display: flex;
        align-items: center;
        justify-content: left;
     }

    #hero-2 {
        width: 100%;
        height: 8%;
        display: flex;
        justify-content: center;
        background-color: transparent;
    }

    #hero-2 h3 {
        font-size: 0.8vw;
        text-align: left;
        font-weight: 400;
        color: gray;
    }

    #hero-2 h3 span{
        font-weight: 400;
        color: #000;
    }

    #hero-3 {
        width: 60%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: left;
    }

    #hero-3 button{
        background-color: rgb(0, 0, 0);
        height: 65%;
        width: 41%;
        border-radius: 5vw;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4vw;
    }

    #hero-3 button h1 {
        font-size: 0.9vw;
        color: #ffffff;
        font-weight: 400;
        margin-right: 0.4vw;
    }

    #hero-3 button #arrow-btn {
        background-color: white;
        border-radius: 100%;
        height: 2.1vw;
        width: 2.1vw;
        margin-right: 0.6vw;
        color: #000;
        font-size: 1vw;
        display: flex;
        align-items: center;
        justify-content: center;
        
    }

    .fa-arrow-right {
        color: #000;
        font-weight: 300;
    }

    #hero-4 {
        width: 100%;
        height: 20%;
        display: flex;
        justify-content: center;
    }

    #hero-4 div {
        width: 100%;
        height: 40%;
        display: flex;
        align-items: center;
        justify-content: left;
        border-top: 0.1vw solid black;
        gap: 2vw;
        margin-top: 18%;
    }

    #hero-4 div #schedule-call {
        width: 18%;
        height: 55%;
        border: 0.1vw solid rgb(0, 0, 0);
        background-color: transparent;
        border-radius: 5vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8vw;
        font-weight: 400;
        gap: 0.5vw;
    }

    #hero-4 div #schedule-call span {
        height: 0.3vw;
        width: 0.3vw;
        background-color: black;
        border-radius: 100%;
    }
    
    #hero-4 div #book-demo {
        width: 15%;
        height: 55%;
        border: none;
        border-bottom: 0.1vw solid rgb(0, 0, 0);
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8vw;
        font-weight: 400;
        gap: 0.5vw;
    }

    #hero-4 div #book-demo .fa-arrow-right {
        font-size: 0.8vw;
        font-weight: 400;
    }
}

/* reponsive for small devices header */

@media (max-width: 767px) {

    #hr-1 {
        height: 0%;
        display: none;
    }

    #hr-2 button {
        border: none;
        height: 65%;
        border-radius: 0%;
    }

    #hr-2 button h1 {
        font-size: 0%;
        display: none;
        
    }

    #hr-2 button #plus {
        height: 5vw;
        width: 5vw;
        font-weight: 200;
    }

    #hr-2 button #plus h1 {
        font-size: 5vw;
        display: flex;
        font-weight: 200;
    }

    #profile-picture {
        height: 5vw;
        width: 5vw;
    }

    /* /////////////////////////////////// right side header */

    #hl-1 {
        transform: translateX(43.6vw);
    }

    #hl-1 img {
        height: 100%;
    }

    #hl-2 {
        width: 26%;
        transform: translateX(-10vw);
    }

    #hl-2 img {
        height: 80%;
    }

    #hl-3 {
        height: 0%;
        display: none;
    }

    #hl-3 h1 {
        font-size: 0%;
    }

    #hl-3 #dot {
        height: 0vw;
    }
}

/* reponsive for small devices hero section */

@media (max-width: 767px) {
    #hero-section {
        display: flex;
        flex-direction: column;
        height:170vw;
    }

    #hero-l {
        height: 60vw;
        width: 100%;
    }

    #hero-1 {
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(7vw);
    }

    #hero-1 h1 {
        font-size: 15vw;
        width: 95%;
    }

    #hero-2 {
        justify-content: left;
        transform: translateY(125vw);
    }

    #hero-2 h3 {
        font-size: 2.7vw;
    }

    #hero-3 {
        width: 100%;
        transform: translateY(135vw);
    }

    #hero-3 a {
        width: 100%;
        height: 180%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    #hero-3 a button {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
        padding-left: 1vw;
        gap: 9vw;
    }

    #hero-3 button #arrow-btn {
        height: 9vw;
        width: 9vw;
        font-size: 4vw;
    }

    #hero-3 button h1 {
        font-size: 4.5vw;
        font-weight: 300;
    }

    #hero-4 {
        height: 0%;
        display: none;
    }

    #hero-r {
        width: 100%;
        /* height: 90vw; */
    }

    #team-profile {
        height: 8vw;
        width: 46vw;
        margin-top: 99vw;
    }

    #team-profile h1 {
        font-size: 2vw;
    }

    #profile-image {
        width: 19vw;
    }

    #team-profile img {
        height: 6vw;
        width: 6vw;
    } 

   #team-profile #plus {
        height: 4vw;
        width: 4vw;
        font-size: 2vw;
    }

    #hero-r #scroll {
        height: 0%;
        display: none;
    }
    
    #herogap {
        height: 25vw;
        width: 100%;
    }
}

/* benefit section responsive mobile laptop */

@media (min-width: 1200px) {
     #benefit {
        width: 100%;
        height: 67vw;
        position: relative;
        padding: 1.5vw 2.5vw;
    }

    #benefit-1 {
        width: 100%;
        height: 63vw;
        position: relative;
        padding: 1.5vw 2.5vw;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1vw;
    }

    #benefit-2 {
        width: 100%;
        height: 100%;
        background-image: url('/assets/images/benefit.svg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #benefit-2 img {
        height: 50vw;
        transform: translateY(9vw);
    }

}

@media (max-width: 767px) {
    #benefit {
        margin-top: 2vw;
    }

    #benefit-1 {
        height: 61.5vw;
    }
}