* {
  margin: 0;
  padding: 0;
  color: #2e3f4c;
}
body {
  position: relative;
  /* background-color: #dfeaf3; */
}

@media only screen and (min-width: 200px) {
  p {
    font-size: 17px;
  }
  /* Home page */
  .common_home_div {
    padding: 100px 20px 70px;
  }
  .common_home_div h2 {
    font-size: 30px;
    color: #2373b4;
    font-weight: 600;
    margin: 0 0 38px;
    text-align: center;
  }

  /* About page */
  .common_home_div .about_content h2 {
    text-align: left;
    font-size: 28px;
  }
  .common_home_div .about_content p {
    font-size: 17px;
  }
  .common_home_div .about_content .unit_inner_div p {
    font-size: 18px;
  }
  .common_home_div .about_content h4 {
    font-size: 24px;
    margin: 35px 0 10px;
    color: #00bf63;
    font-weight: 600;
  }
  .about_img {
    width: 100%;
    height: 360px;
    position: relative;
    overflow: hidden;
    margin: 60px 0 0;
  }

  .about_img img {
    object-fit: cover;
  }
  .about_img .about_img_1 {
    width: 100%;
    height: 100%;
  }
  .about_img .about_img_2 {
    width: 79%;
    height: 75%;
    position: absolute;
    top: 24%;
    left: 21%;
    border: 5px solid #57c79078;
  }
  .about_sub_div {
    display: flex;
    flex-direction: column;
    padding: 50px 0 0;
    flex-wrap: wrap;
  }
  .sub_div_unit {
    display: flex;
    justify-content: end;
    position: relative;
    padding: 0 0 23px;
  }
  .sub_div_unit i {
    position: absolute;
    top: 20px;
    left: 10px;
    font-size: 65px;
  }
  .unit_inner_div {
    width: 230px;
    padding: 10px 5px 10px 35px;
  }
  .sub_div_unit:nth-child(odd) .unit_inner_div {
    background-color: #cbffe6;
  }
  .sub_div_unit:nth-child(even) .unit_inner_div {
    background-color: #dfecf3;
  }
  .common_home_div .about_content .unit_inner_div h4 {
    margin: 10px 0 10px;
  }

  /* Homepage */
  .home_about {
    display: flex;
    flex-direction: column-reverse;
  }
  .home_about_img {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    height: 290px;
  }
  .home_abt_img_child1 {
    background-color: #73e2ac;
  }
  .home_abt_img_child2 {
    background-color: #eff9ff;
  }
  .home_abt_img_child1,
  .home_abt_img_child2 {
    width: 50%;
  }
  .home_abt_img_child3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .home_abt_img_child3 div {
    width: 75%;
    background-color: #fff;
    border: 8px solid #38b6ff;
  }
  .home_abt_img_child3 div img {
    width: 100%;
    display: block;
    margin: auto;
  }
  .home_about_text {
    padding: 0 0 60px;
  }
  .home_about_text span {
    font-size: 23px;
    color: #00bf63;
    font-style: oblique;
  }
  .home_about_text h1 {
    font-size: 33px;
    color: #2373b4;
    margin: 0 0 20px;
  }
  .home_about_text p {
    font-size: 18px;
    margin: 0 0 20px;
  }
  .btn_style1 {
    font-size: 20px;
    margin: 20px 0 0;
    background-color: #2373b4;
    color: #c7dff3;
    border: none;
    padding: 16px 9px;
    transition: all 0.3s ease;
  }
  .btn_style1:hover {
    text-decoration: none;
    background-color: #bdf8db;
    color: #00703a;
    padding: 16px 3px 16px 15px;
  }
  .home_about_text a.btn_style1 {
    display: inline-block;
  }

  /* projects components */
  .project_components_text {
    display: flex;
    flex-direction: column;
  }
  .project_components_child {
    background-color: #b1e6cc;
    padding: 45px 23px;
    margin: 0 0 55px;
    position: relative;
    transition: all 0.3s ease;
  }
  .project_components_child h3 {
    font-size: 21px;
    font-weight: 600;
    transition: all 0.8s ease;
  }
  .project_components {
    background-color: #c5efdb;
  }
  .project_components_child i {
    font-size: 55px;
    margin: 0 0 25px;
    transition: all 0.8s ease;
  }
  .project_components_child ul {
    margin: 0 0 0 40px;
  }
  .project_components_child p,
  .project_components_child li {
    font-size: 17px;
    transition: all 0.8s ease;
  }
  .project_components_child ul li::marker {
    font-size: 32px; /* Change marker size */
  }
  .learn_more {
    display: flex;
  }
  .learn_more_arrow {
    padding: 8px 15px 8px 0;
    transition: all 0.3s ease;
  }
  .learn_more_arrow i {
    font-size: 25px;
    margin: 0 !important;
  }
  .learn_more_text {
    padding: 8px 15px;
    opacity: 0;
    visibility: hidden;
    margin-right: 5px;
    transition: all 0.3s ease;
  }
  .learn_more_arrow,
  .learn_more_text {
    display: flex;
    justify-content: start;
    align-items: center;
  }
  .learn_more_text button,
  .learn_more_text a {
    margin: 0;
    font-size: 17px;
    border: 2px solid #c5efdb;
    background-color: transparent;
    padding: 8px 10px;
    transition: all 0.3s ease;
  }
  .learn_more_text a {
    color: #c5efdb;
    text-decoration: none;
  }
  .project_components_child:hover {
    background-color: #008143;
  }
  .project_components_child:hover i,
  .project_components_child:hover h3,
  .project_components_child:hover p,
  .project_components_child:hover li,
  .project_components_child:hover button {
    color: #c5efdb;
  }
  .project_components_child:hover .learn_more_arrow {
    padding: 8px 5px 8px 10px;
  }

  .project_components_child:hover .learn_more_text {
    opacity: 1;
    visibility: visible;
  }

  /* project components page */
  .common_otherpages_div1 {
    display: flex;
    flex-direction: column;
  }
  .project_components_child2 {
    display: block;
    width: 100%;
    background-color: #d0ffe8;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 #00000000;
    margin: 0 0 70px;
  }
  .project_components_child2:hover {
    background-color: #adf5d2;
    box-shadow: 2px 3px 12px 6px #00000039;
    text-decoration: none;
  }
  .project_components_child2_img {
    overflow: hidden;
  }
  .project_components_child2_img img {
    width: 100%;
    height: 295px;
    object-fit: cover;
    transition: all 0.3s ease;
    transform: scale(1);
  }
  .project_components_child2:hover .project_components_child2_img img {
    filter: brightness(0.8);
    transform: scale(1.03); /* 5% zoom on hover */
  }
  .project_components_child2_text {
    position: relative;
    padding: 65px 15px 27px;
  }
  .project_components_icon {
    display: inline-block;
    position: absolute;
    width: 95px;
    text-align: center;
    overflow: hidden;
    top: -55px;
    left: 50%;
    transform: translateX(-50%);
    padding: 13px;
    background: #2373b4;
    border-radius: 50%;
  }
  .project_components_child2_text i {
    font-size: 70px;
    color: #c7dff3;
    display: block;
  }
  .project_components_child2_text h3 {
    font-size: 22px;
    margin: 0 0 20px;
  }
  .project_components_child2_text p,
  .project_components_child li,
  .project_components_child2_text li,
  .components_view_p li {
    font-size: 17px;
  }
  .components_view_p li {
    font-size: 20px;
  }
  .project_components_child2_text ul {
    margin: 0 0 0 40px;
  }
  .components_view_p ul {
    margin: 0 0 0 40px;
  }
  .components_view_p h3.heading_no_margin {
    margin: 0;
  }
  .components_view_p h3 {
    margin: 40px 0 15px;
    font-size: 24px;
  }
  .components_view_p p {
    font-size: 17px;
  }
  .project_components_child ul li::marker,
  .project_components_child2_text ul li::marker {
    font-size: 22px;
  }
  .components_view_p ul li::marker {
    font-size: 32px;
  }
  .project_components_view img {
    width: 100%;
    height: 265px;
    object-fit: cover;
    margin: 0 0 30px;
  }
  .all_contacts {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 35px;
  }
  .contacts_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #dfecf3;
    padding: 30px;
    margin: 0 0 30px;
    border-radius: 10px;
  }
  .contacts_icon {
    display: flex;
    justify-content: center;
  }
  .contacts_icon i {
    font-size: 35px;
    margin: 0 0 20px;
  }
  .contacts_item p {
    text-align: center;
    font-size: 20px;
    margin: 0 0 3px;
  }
  .form_and_map_item {
    background-color: #dbebe3;
    padding: 40px 10px;
  }
  .common_home_div .contacts_form_and_map h2 {
    text-align: left;
    margin: 0 0 22px;
  }
  .google_map {
    margin: 70px 0 0;
    padding: 0 !important;
  }
  .google_map iframe {
    width: 100%;
  }
  .form_and_map_item img {
    width: 100%;
    object-fit: cover;
    height: 100%;
  }
  .no_items_fetched {
    text-align: center;
  }
  .no_items_fetched div {
    display: inline-block;
    background-color: #dfdfdf;
    margin-left: auto;
    margin-right: auto;
    padding: 13px 15px;
  }
  .no_items_fetched div p {
    color: #474444;
    font-size: 17px;
    margin: 0;
    text-align: center;
  }
}
@media only screen and (min-width: 360px) {
  p {
    font-size: 18px;
  }
  .home_about_text {
    padding: 0 0 65px;
  }
  .common_home_div .about_content h2 {
    font-size: 30px;
  }
  .common_home_div .about_content h4 {
    font-size: 26px;
    margin: 50px 0 10px;
  }
  .common_home_div .about_content p {
    font-size: 18px;
  }
  .common_home_div .about_content .unit_inner_div p {
    font-size: 19px;
  }
  /* about page */
  .sub_div_unit {
    padding: 0 0 31px;
  }
  .unit_inner_div {
    width: 264px;
    padding: 16px 10px 16px 47px;
  }
  .sub_div_unit i {
    position: absolute;
    top: 28px;
    left: 18px;
    font-size: 72px;
  }

  /* project components page */
  .project_components_child2_text h3 {
    font-size: 23px;
  }
  .project_components_child2_text p,
  .project_components_child2_text li {
    font-size: 18px;
  }
  .project_components_view img {
    height: 270px;
  }
  .form_and_map_item {
    padding: 40px 15px;
  }
  .no_items_fetched div p {
    font-size: 18px;
  }
  .components_view_p h3 {
    font-size: 25px;
  }
  .components_view_p p {
    font-size: 18px;
    line-height: 27px;
  }
}
@media only screen and (min-width: 400px) {
  /* Project components */
  .home_about_text span {
    font-size: 27px;
  }
  .home_about_text h1 {
    font-size: 36px;
  }
  .common_home_div h2 {
    font-size: 33px;
  }
  .project_components_child i {
    font-size: 70px;
    margin: 0 0 30px;
  }
  .project_components_child h3 {
    font-size: 23px;
  }
  .project_components_child p,
  .project_components_child li {
    font-size: 18px;
  }
  .learn_more_arrow i {
    font-size: 30px;
  }
  .learn_more_text button,
  .learn_more_text a {
    font-size: 18px;
  }
  /* about page */
  .unit_inner_div {
    width: 300px;
  }
  .sub_div_unit i {
    left: 31px;
    font-size: 75px;
  }

  /* about page */
  .common_home_div .about_content .unit_inner_div h4 {
    font-size: 28px;
  }
  .common_home_div .about_content .unit_inner_div p {
    font-size: 20px;
  }

  /* project components */
  .project_components_child2_img img {
    height: 350px;
  }
  .project_components_child2_text {
    padding: 70px 18px 27px;
  }
  .project_components_view img {
    height: 315px;
  }
  .form_and_map_item {
    padding: 40px 20px;
  }
  .components_view_p li {
    font-size: 22px;
  }
}
@media only screen and (min-width: 600px) {
  .common_home_div {
    padding: 100px 40px 70px;
  }
  .home_about_text span {
    font-size: 26px;
  }
  .home_about_text h1 {
    font-size: 38px;
  }
  .home_about_text p {
    font-size: 19px;
  }
  .btn_style1 {
    font-size: 21px;
  }
  .home_about_img {
    height: 450px;
  }
  /* about page */
  .sub_div_unit i {
    left: 97px;
    font-size: 80px;
  }
  .unit_inner_div {
    width: 380px;
  }
  .unit_inner_div {
    padding: 16px 10px 16px 58px;
  }

  /* Project components */
  .project_components_child {
    padding: 60px 35px;
  }
  .common_home_div h2 {
    font-size: 35px;
  }
  /* about page */
  .about_img {
    height: 705px;
  }
  .about_img .about_img_2 {
    left: 12%;
  }
  .components_view_p h3 {
    font-size: 28px;
  }
  .components_view_p p {
    font-size: 19px;
  }

  /* project components */
  .common_home_div.common_otherpages_div1 {
    padding: 100px 70px 70px;
  }
  .project_components_child2 {
    margin: 0 0 85px;
  }
  .project_components_view img {
    height: 370px;
  }
  .all_contacts {
    justify-content: space-between;
  }
  .contacts_item {
    width: 48%;
    margin: 0 0 40px;
  }
}
@media only screen and (min-width: 712px) {
  .common_home_div {
    padding: 100px 50px 70px;
  }
  .home_about_img {
    height: 550px;
  }

  /* about page */
  .about_sub_div {
    width: 560px;
  }
  .unit_inner_div {
    width: 427px;
  }

  /* project components */
  .project_components_icon {
    top: -66px;
  }
  .project_components_child2_text i {
    font-size: 85px;
  }
  .project_components_child2_img img {
    height: 440px;
  }
  .project_components_child2_text {
    padding: 70px 25px 27px;
  }
  .project_components_child2_text h3 {
    font-size: 24px;
  }
  .project_components_view img {
    height: 445px;
  }
  .form_and_map_item {
    padding: 45px 27px;
  }
}
@media only screen and (min-width: 768px) {
  .common_home_div {
    padding: 100px 60px 70px;
  }
  /* project components */
  .project_components_text {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }
  .project_components_child {
    width: 48%;
  }
  /* project component page */
  .common_home_div.common_otherpages_div1 {
    padding: 100px 60px 70px;
  }
  .common_otherpages_div1 {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
  }
  .project_components_child2 {
    width: 48.5%;
  }
  .project_components_icon {
    top: -54px;
  }
  .project_components_child2_text i {
    font-size: 70px;
  }
  .project_components_child2_img img {
    height: 320px;
  }
}
@media only screen and (min-width: 800px) {
  .common_otherpages_div1 {
    gap: 18px;
  }
  .project_components_child2_img img {
    height: 330px;
  }
  .project_components_view img {
    height: 530px;
  }
  /* about page */
  .about_sub_div {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 50px 0 0 28px;
  }
  .sub_div_unit {
    width: 46%;
  }
  .sub_div_unit i {
    left: -25px;
    font-size: 72px;
  }
}
@media only screen and (min-width: 912px) {
  .about_img {
    height: 840px;
  }
  .about_sub_div {
    padding: 50px 0 0 37px;
  }
  /* project components */
  .common_otherpages_div1 {
    gap: 19px;
  }
  .project_components_view img {
    height: 640px;
  }
}
@media only screen and (min-width: 1024px) {
  .home_about {
    flex-direction: row;
    justify-content: space-between;
  }
  .home_about_img,
  .home_about_text {
    width: 47%;
  }
  /* About page */
  .about_page_div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .about_img {
    margin: 0;
  }
  .about_content {
    width: 47%;
  }
  .about_img {
    width: 47%;
  }
  .about_img .about_img_1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 91%;
    height: 70%;
    border: 5px solid #57c79078;
  }
  .about_img .about_img_2 {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    width: 91%;
  }
  .about_sub_div {
    padding: 50px 0 0;
    flex-direction: column;
  }
  .sub_div_unit {
    width: 100%;
  }
  .unit_inner_div {
    width: 344px;
  }
  .sub_div_unit i {
    left: 35px;
    font-size: 82px;
  }

  /* project components page */
  .common_otherpages_div1 {
    gap: 24px;
  }

  .contacts_form_and_map {
    display: flex;
  }
  .form_and_map_item {
    width: 50%;
  }
  .google_map {
    margin: 0;
    padding: 0 !important;
  }
  .field_basket {
    width: 48%;
  }
  .field_basket.email {
    width: 60%;
  }
  .contacts_item {
    width: 31%;
  }
  .contacts_item.location {
    width: 45%;
  }
  .google_map iframe {
    height: 100%;
  }
  @media only screen and (height: 600px) {
    .about_img {
      height: 557px;
    }
    /* project components page */
    .common_otherpages_div1 {
      gap: 16px;
    }
    .project_components_child2 {
      width: 32%;
    }
    .project_components_view {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .project_components_view img {
      width: 46%;
      height: 340px;
      margin: 0;
    }
    .project_components_view .components_view_p {
      width: 52%;
    }
  }
}
@media only screen and (min-width: 1280px) {
  .project_components_child {
    width: 31%;
  }
  /* project components page */
  .common_otherpages_div1 {
    gap: 20px;
  }
  .project_components_child2 {
    width: 32%;
  }
  .project_components_view {
    display: flex;
    flex-wrap: wrap;
    gap: 27px;
  }
  .project_components_view img {
    width: 45%;
    height: 400px;
    margin: 0;
  }
  .project_components_view .components_view_p {
    width: 52%;
  }

  /* about page */
  .unit_inner_div {
    width: 453px;
  }
  .sub_div_unit i {
    left: 46px;
    top: 19px;
  }
}

@media only screen and (min-width: 1366px) {
  .unit_inner_div {
    width: 497px;
  }
}
@media only screen and (min-width: 1920px) {
  .about_sub_div {
    width: 742px;
  }
  .sub_div_unit i {
    left: 195px;
  }
}