/* css reset */

*, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    padding: 0;
    margin: 0;
    font-family: "Jost", sans-serif;
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  .container {
    width: 1111px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 380px;
  }

        /* hover */

.navbar h3:hover {
    border-bottom: 1px solid;
}

.footer_section h3:hover {
    border-bottom: 1px solid;
}

.billboard button:hover {
    background-color: #FFAD9B;
    color: #FFFFFF;
}

.your_project button:hover {
    background-color: #FFAD9B;
    color: #FFFFFF;
}


.project_design img:hover {
    filter: grayscale(10%) sepia(0%) brightness(1.4);
}

.locations a:hover {
    background-color: #FFAD9B;
}

.design_group span:hover {
    background-color: #E7816B;
}

.design_group span:hover h3 {
    color: #FFFFFF;
}

.design_group span:hover p {
    color: #FFFFFF;
}

.footer_contact a img:hover {
    filter: grayscale(10%) sepia(0%) brightness(1.3);
}

        /* background_images */

.background_images_01 {
    position: absolute;
    left: -165px;
    top: 320px;
    z-index: -1;
}

.background_images_02 {
    position: absolute;
    right: -165px;
    bottom: -305px;
    z-index: -1;
}

.background_images_03 {
    position: absolute;
    left: -165px;
    top: 124px;
    z-index: -1;
}

.background_images_04 {
    position: absolute;
    left: -165px;
    top: 320px;
    z-index: -1;
}

.background_images_05 {
    position: absolute;
    right: -545px;
    bottom: 355px;
    z-index: -1;
}

.background_images_06 {
    position: absolute;
    right: -156px;
    bottom: -352px;
    z-index: -1;
}


        /* navbar */

  .navbar {
    width: 1111px;
    margin: 0 auto;
    margin-top: 64px;
    margin-bottom: 67px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  a {
    text-decoration: none;
  }

  .navbar ul {
    padding: 0px;
    width: auto;
    display: flex;
    list-style: none;
    gap: 42px;
  }

  .navbar li h3 {
    color: #333136;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 2px;

    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.2s ease;
  }

  .navbar img {
    width: 196px;
  }

        /* billboard */

.billboard {
    background-image: url(../img/billboard_background.png);
    background-repeat: no-repeat;
    width: 1111px;
    height: 640px;
    padding-left: 95px;
    padding-top: 145px;
    margin-bottom: 160px;
}

.billboard h2 {
    color: #FFFFFF;
    width: 540px;
    height: 165px;
    font-weight: 500;
    font-size: 48px;
    line-height: 48px;
    margin-bottom: 11px;
}

.billboard p {
    color: #FFFFFF;
    width: 445px;
    height: 78px;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 40px;
}

.billboard button {
    background-color: #FFFFFF;
    width: 152px;
    height: 56px;
    border: none;
    color: #333136;
    padding: 18px 24px;
    text-align: center;
    display: inline-block;
    font-size: 15px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 1px;
}

        /* project_design */

.project_design h2 {
    color: #FFFFFF;
    width: 364px;
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 2px;
    margin-bottom: 24px;
}

.project_design img {
    transition: filter 0.3s ease;
}

.project_design p {
    color: #FFFFFF;
    width: auto;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 5px;
}

.project_design {
    display: flex;
    justify-content: space-between;
    margin-bottom: 160px;
}

.project_design a {
    position: relative;
    display: block;
}

a span {
    width: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.view_project_logos {
    width: 210px;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 21px;
    margin: auto;
}

        /* description */

.description {
    display: flex;
    justify-content: space-between;
}

.description span {
    width: 350px;
    height: 412px;
    text-align: center;
}

.description span img {
    margin: auto;
    margin-bottom: 48px;
}

.description h3 {
    color: #333136;
    width: 350px;
    height: 26px;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 5px;
    margin-bottom: 32px;
}

.description p {
    color: #333136;
    width: 350px;
    height: 104px;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
}

        /* your_project */

.your_project {
    background-image: url(../img/your_project_background.png);
    background-repeat: no-repeat;
    width: 1111px;
    height: 292px;
    display: flex;
    justify-content: space-between;
    padding-right: 96px;
    align-items: center;
    position: absolute;
    bottom: -450px;
}

.your_project span {
    margin-left: 95px;
    margin-top: 72px;
}

.your_project h2 {
    color: #FFFFFF;
    width: 268px;
    height: 98px;
    font-weight: 500;
    font-size: 40px;
    line-height: 40px;
}

.your_project p {
    color: #FFFFFF;
    width: 459px;
    height: 78px;
    font-weight: 400;
    font-size: 16px;
    font-weight: 26px;
}

.your_project button {
    background-color: #FFFFFF;
    width: 152px;
    height: 56px;
    border: none;
    color: #333136;
    padding: 18px 24px;
    text-align: center;
    display: inline-block;
    font-size: 15px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 1px;
}

        /* footer */

footer {
    background-color: #1D1C1E;
    padding-top: 144px;
}

.footer_section {
    width: 1111px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid #FFFFFF;
    margin-bottom: 31px;
}

.footer_section ul {
    padding: 0px;
    width: auto;
    display: flex;
    list-style: none;
    gap: 42px;
}

.footer_section li h3 {
    color: #ffffff;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 2px;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.2s ease;
}

.footer_contact {
    width: 1111px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 72px;
}

.footer_contact img {
    transition: filter 0.1s ease;
}

.footer_contact span {
    display: flex;
    gap: 16px;
}

.footer_contact h4 {
    color: #8d8d8d;
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
}

.footer_contact li {
    color: #767676;
    list-style: none;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}



        /* web_design.html css */


        /* web_design_menu */

.web_design_menu {
    background-image: url(../img/web_design_menu.png);
    background-repeat: no-repeat;
    width: 1111px;
    height: 252px;
    padding: 64px 190px;
    text-align: center;
    margin-bottom: 160px;
}

.web_design_menu h2 {
    color: #FFFFFF;
    width: 730px;
    height: 48px;
    font-weight: 500;
    font-size: 48px;
    line-height: 48px;
    margin-bottom: 24px;
}

.web_design_menu p {
    color: #FFFFFF;
    width: 730px;
    height: 52px;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
}

        /* design_group */

.design_group {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 30px;
    margin-bottom: 160px;
}

.design_group span {
    width: 350px;
    height: 478px;
    background-color: #FDF3F0;
    border-radius: 18px;
    text-align: center;
    transition: background-color 0.2s ease;
}

.design_group h3 {
    color: #E7816B;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 5px;
    margin-top: 32px;
    margin-bottom: 16px;
}

.design_group p {
    color: #333136;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
}


        /* about_us.html */

        /* about_us */

.about_us {
    width: 1111px;
    height: 480px;
    display: flex;
    background-image: url(../img/about_us_background.png);
    background-repeat: no-repeat;
    margin-bottom: 160px;
}

.about_us span {
    margin-left: 95px;
    margin-top: 135px;
}

.about_us h2 {
    color: #FFFFFF;
    width: 540px;
    height: 48px;
    font-weight: 500;
    font-size: 48px;
    line-height: 48px;
    margin-bottom: 32px;
}

.about_us p {
    color: #FFFFFF;
    width: 458px;
    height: 130px;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
}

        /* world_class_talent */

.world_class_talent {
    width: 1111px;
    height: 640px;
    background-image: url(../img/world_class_talent_background.png);
    background-repeat: no-repeat;
    display: flex;
    margin-bottom: 160px;
}

.world_class_talent span {
    margin-left: 94px;
    margin-top: 154px;
}

.world_class_talent h2 {
    color: #E7816B;
    width: 445px;
    height: 48px;
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 24px;
}

.world_class_talent p {
    color: #333136;
    width: 445px;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 28px;
}

        /* locations */
        
.locations {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding-left: 70px;
    padding-right: 70px;
    text-align: center;
    margin-bottom: 160px;
}

.locations img {
    width: 202px;
    margin-bottom: 48px;
}

.locations h2 {
    color: #333136;
    width: auto;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 5px;
    margin-bottom: 32px;
}

.locations a {
    background-color: #E7816B;
    color: #FFFFFF;
    padding: 18px;
    border-radius: 8px;
    width: 115px;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

        /* the_real_deal */

.the_real_deal {
    background-image: url(../img/the_real_deal_background.png);
    display: flex;
}

.the_real_deal span {
    margin-left: 95px;
    margin-top: 154px;
    margin-right: 94px;
}

.the_real_deal h2 {
    color: #E7816B;
    width: 445px;
    font-weight: 500;
    font-size: 40px;
    line-height: 48px;
    margin-bottom: 24px;
}

.the_real_deal p {
    color: #333136;
    width: 445px;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 28px;
}

        /* locations.html */

.location_with_map {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.location_with_map span {
    background-image: url(../img/canada_map_background.png);
    width: 730px;
    height: 326px;
    padding: 88px 95px;
    display: flex;
    flex-wrap: wrap;
}

.location_with_map h2 {
    color: #E7816B;
    width: 445px;
    height: 48px;
    font-size: 40px;
    font-weight: 500;
    line-height: 48px;
}

.location_with_map ul {
    width: 265px;
    list-style: none;
}

.location_with_map h4 {
    color: #333136;
    font-weight: 700;
    font-size: 16px;
    line-height: 26px;
}

.location_with_map li {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
}

        /* contact_us_section */

.contact_us_section {
    display: flex;
    background-image: url(../img/contact_us_background.png);
    width: 1111px;
    height: 480px;
    margin-bottom: 160px;
}

.contact_us_section span {
    margin-left: 95px;
    margin-top: 135px;
}

.contact_us_section h2 {
    color: #FFFFFF;
    width: 540px;
    height: 48px;
    font-weight: 500;
    font-size: 48px;
    line-height: 48px;
    margin-bottom: 32px;
}

.contact_us_section p {
    color: #FFFFFF;
    width: 445px;
    height: 104px;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
}

.contact_us_section form {
    width: 380px;
    height: 37px;
    margin-top: 55px;
    margin-right: 96px;
}

.contact_us_section input {
    width: 380px;
    background-color:transparent;
    border: none;
    border-bottom: 1px solid #FFFFFF;
    padding-left: 16px;
    padding-bottom: 12px;
    margin-bottom: 25px;
}


.footer_contact_section {
    background-color: #1D1C1E;
    padding-top: 72px;
}

.container_section {
    width: 1111px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 160px;
    position: relative;
}

input::placeholder {
    color: #ffffff;
    font-weight: 300;
    font-size: 15px;
    line-height: 26px;
}

.your_message_form {
    width: 380px;
    height: 102px;
    padding-bottom: 76px;
}

.contact_us_section button {
    background-color: #FFFFFF;
    width: 152px;
    height: 56px;
    border: none;
    color: #333136;
    padding: 18px 24px;
    text-align: center;
    display: inline-block;
    font-size: 15px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 1px;
}

form button {
    margin-left: 228px;
}