@font-face {
  font-family: "Inter medium";
  src: url(../assets/Fonts/Inter_28pt-Medium.ttf);
}
@font-face {
  font-family: "Semi bold";
  src: url(../assets/Fonts/Inter_28pt-SemiBold.ttf);
}

@font-face {
  font-family: "Extra bold";
  src: url(../assets/Fonts/Inter_28pt-ExtraBold.ttf);
}
@font-face {
  font-family: "Regular";
  src: url(../assets/Fonts/Inter_28pt-Regular.ttf);
}
@font-face {
  font-family: "Bold";
  src: url(../assets/Fonts/Inter_28pt-Bold.ttf);
}
.inter-medium {
  font-family: "Inter medium";
}
.inter-regular {
  font-family: " Regular";
}

.inter-semibold {
  font-family: "Semi bold";
}

.inter-extrabold {
  font-family: "Extra bold";
}
.inter-bold {
  font-family: "Bold";
}

body {
  background: #ffffff;
  /* margin: 0rem 6.84rem 0rem 6.84rem; */
}

.navbar {
  height: 5rem;
  background: #ffffff;
  height: 80px;
  bottom: 0;
}

.navbar {
 
  .nav-item{
    a{
      font-size: 1rem;
      color: #0B0D14;
    }
  }
  .mybtn {
    font-size: 1rem;
    color: #0e0d0d;
    width: 13.375rem;
    height: 2.75rem;
    border-radius: 1rem;
    background: #fec545;
    border: none;
  }
  li a img {
    width: 1.25rem;
    height: 1.25rem;
  }
}


/* ---------------------------OUR VALUES--------------------------------------- */
.services {
  height: 14.75rem;
  background: url(../images/BG3.png);
  margin-block-start: 6rem;
  align-items: center;
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: center;

  .servicesContent {
    color: #ffffff;
    width: 43.375rem;
    height: 19.3125rem;

    h2 {
      height: 4.125rem;
      font-size: 3.625rem;
      width: 50.875rem;
    }

    p {
      font-size: 1rem;
      width: 33rem;
    }
  }
}

/* ----------------------WHY WORK WITH US---------------------------------- */
.whyWorkWithUs {
  /* width: 76.3125rem; */
  height: 53.375rem;
  margin-block-start: 4%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;

  .top-workWithUs {
    display: flex;
    flex-direction: column;
    margin-block-end: 4rem;

    .features {
      align-items: center;
      align-self: center;
      margin-block-start: 20px;
    }

    h6 {
      width: 87px;
      height: 20px;
      /* padding: 10px 2px; */
      color: #019db6;
      font-size: 14px;
      background-color: #f0f6ff;
      border-radius: 150px;
    }
    h2 {
      width: 25.6875rem;
      height: 31px;
      line-height: 63px;
      color: #0f172a;
      height: 28px;
      font-size: 42px;
      margin-block-end: 0.75rem;
    }

    p {
      width: 650px;
      height: 28px;
      /* padding: 10px 2px; */
      color: #344051;
      height: 28px;
      font-size: 18px;
      text-align: center;
    }
  }

  .bottom-workWithUs {
    width: 76.3125rem;
    display: flex;
    justify-content: center;
    gap: 2rem;

    p {
      font-size: 1rem;
      color: #475569;
      width: 29rem;
    }
    h3 {
      color: #1e293b;
    }

    .projects {
      width: 37.25rem;
      height: 10.3125rem;
      padding-inline: 1rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .bottomLeft {
      display: flex;
      flex-direction: row;
      gap: 2rem;

      .leftImages {
        display: flex;
        flex-direction: column;
        gap: 2rem;
      }
    }
  }
}

/* ---------------------WANT TO JOIN TEAM ARKTECH--------------------- */

.joinTeamArktech {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 1.125rem;
  margin-block-start: 7%;

  .top-teamArktech {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 1.125rem;

    h2 {
      font-size: 2.625rem;
      color: #0f172a;
      text-align: center;
    }

    p {
      font-size: 1.125rem;
      color: #344051;
      width: 40.625rem;
      text-align: center;
    }
  }

  .tab-titles {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 3.32rem;

    .tab-links {
      font-size: 1rem;
      color: #667085;
    }
  }
  .tab-contents {
    width: 48rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: 4%;
    border: 1px solid #E4E7EC;
    border-radius: 1rem;
    padding-inline: 1.5rem;
    padding-block-start: 1.5rem;
    padding-block-end: 1.75rem;

    .tab-design {
      display: flex;
      justify-content: space-between;
      text-align: center;

      span {
        color: #cb8c00;
        font-size: 0.875rem;

        img {
          width: 1.25rem;
          height: 1.25rem;
        }
      }
    }

    h3 {
      font-size: 1.125rem;
      color: #101828;
    }

    .myIcons {
      font-size: 1rem;
      display: flex;
      /* justify-content: center; */
      align-items: center;
      align-content: center;
      gap: 1.125rem;

      div {
        align-items: center;
        color: #475467;
        display: flex;
        align-items: center;
        align-content: center;
        gap: 0.5rem;
        font-size: 1rem;

        img {
          width: 1.25rem;
          height: 1.25rem;
        }
      }
    }
  }
}

/* ------------------------FOOTER------------------------ */



hvr-fade:before {
  background-color: #fec545 !important;
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: #ffffff !important;
}
.hvr-bounce-to-top:before {
  background-color: #fec545 !important;
  border-radius: 1rem;
}
.grid-services:hover {
  h3 {
    color: #060809;
  }
}
.myButton:active {
  background-color: #f5b726;
  transform: translateY(4px);
}


@media screen and (max-width: 36rem) {

  .navbar .mybtn {
    display: none;
  }

  
  .navbar, .myNav{
    max-width: 26.5625rem !important;
    width: 26.5625rem;
    margin-right: 0 !important;
    margin-left: 0 !important;
    background: #ffffff;

  }

  .dropdown-item {
    background: #ffffff !important;
    }

  nav a {
  text-decoration: none !important;
  }

  .nav-item a:hover {
  text-decoration: none !important;
  }
  body{
    width: 26.5625rem;
  }

  .services {
    height: 17.1675rem;
    width: 26.5625rem;
    background: url(../images/BG\ ph.png);
    background-repeat: round;
    margin-block-start: 4.3rem;
    align-items: center;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
  
    .servicesContent {
      color: #ffffff;
      width: 26.5625rem;
      height: 0;
  
      h2 {
        height: 4.125rem;
        font-size: 2.25rem;
        width: 18.75rem;
      }
  
      p {
        font-size: 1rem;
        width: 22.5rem;
      }
    }
  }

  .whyWorkWithUs {
    width: 26.5625rem;
    height: 68.75rem;
    margin-block-start: 32px;
    padding-inline: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
  
    .top-workWithUs {
      display: none;
      flex-direction: column;
      margin-block-end: 4rem;
      justify-content: center;
      align-content: center;
      align-items: center;
  
      .features {
        align-items: center;
        align-self: center;
        margin-block-start: 1.25rem;
      }
  
      h6 {
        width: 5.4375rem;
        height: 1.25rem;
        /* padding: 10px 2px; */
        color: #019db6;
        font-size: 14px;
        background-color: #f0f6ff;
        border-radius: 150px;
      }
      h2 {
        width: 25.6875rem;
        height: 1.9375rem;
        line-height: 1.9375rem;
        color: #0f172a;
        height: 1.75rem;
        font-size: 2.625rem;
        margin-block-end: 0.75rem;
      }
  
      p {
        width: 40.625rem;
        height: 1.75rem;
        /* padding: 10px 2px; */
        color: #344051;
        height: 1.75rem;
        font-size: 1.125rem;
        text-align: center;
      }
    }
  
    .bottom-workWithUs {
      width: 342px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2rem;
  
      p {
        font-size: 1rem;
        color: #475569;
        width: 16.5625rem;
        padding-block-end: 1.3125rem;
      }
      h3 {
        padding-block-start: 1.3125rem;
        color: #1e293b;
      }
  
      .projects {
        width: 21.375rem;
        height: 10.3125rem;
        padding-inline-start: 31px;
        display: flex;
        flex-direction: column;
        gap: 0;
      }
  
      .bottomLeft {
        display: flex;
        flex-direction: row;
        gap: 0.875rem;
  
        .leftImages {
          display: flex;
          flex-direction: column;
          gap: 0.875rem;
        }

        .rec145{
          width: 10.125rem;
          height: 13.9375rem;
        }

        .rec148{
          width: 10.125rem;
          height: 9.3125rem;
        }

        .rec147{
          width: 10.125rem;
          height: 9.3125rem;
        }

        .rec146{
          width: 10.125rem;
          height: 13.9375rem;
        }
      }
    }
  }


    /* ---------------------WANT TO JOIN TEAM ARKTECH--------------------- */


    .myPhone{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      align-content: center;
      gap: 1.125rem;
      margin-block-start: 32px;
      margin-block-end: 189px;
    
      .top-teamArktech {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 0;
        margin-block-end: 32px;
    
        h2 {
          font-size: 2.625rem;
          color: #0f172a;
          text-align: center;
          width: 301px;
        }
    
        p {
          font-size: 1.125rem;
          color: #344051;
          width: 40.625rem;
          text-align: center;
          width: 301px;
        }
      }
    
    
      .tab-titles {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        gap: 3.32rem;
      
        .tab-links {
          cursor: pointer;
          position: relative;
          font-size: 1rem;
          color: #667085;
          margin-block-end: 46px;
        }
      
        .tab-links::after {
          content: "";
          width: 0;
          height: 3px;
          background: #f5b726;
          left: 0;
          bottom: -8px;
          transition: 0.5s;
          position: absolute;
        }
        .tab-links.active-link::after {
          width: 100%;
        }
      }
      
      .tab-contents.active-tab {
        display: flex;
      }
    
    .myView{
      width: 343px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-block: 0;
      border: 1px solid #E4E7EC;
      border-radius: 1rem;
      padding-inline: 1.5rem;
      padding-block-start: 1.5rem;
      padding-block-end: 1.75rem;
    
      .tab-design {
        display: flex;
        justify-content: space-between;
        text-align: center;
    
        span {
          color: #cb8c00;
          font-size: 0.875rem;
    
          img {
            width: 1.25rem;
            height: 1.25rem;
          }
        }
      }
    
      h3 {
        font-size: 1.125rem;
        color: #101828;
      }
    
      .myIcons {
        font-size: 1rem;
        display: flex;
        /* justify-content: center; */
        align-items: center;
        align-content: center;
        gap: 1.125rem;
    
        div {
          align-items: center;
          color: #475467;
          display: flex;
          align-items: center;
          align-content: center;
          gap: 0.5rem;
          font-size: 1rem;
    
          img {
            width: 1.25rem;
            height: 1.25rem;
          }
        }
      }
    }
      
    
    .view{
      display: none;
    }
    .view.active-tab {
      display: block;
    }
    
    .tab-contents {
        width: 343px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-block: 4%;
        border: 1px solid #E4E7EC;
        border-radius: 1rem;
        padding-inline: 1.5rem;
        padding-block-start: 1.5rem;
        padding-block-end: 1.75rem;
    
        display: none;
    
        .tab-design {
          display: flex;
          justify-content: space-between;
          text-align: center;
    
          span {
            color: #cb8c00;
            font-size: 0.875rem;
    
            img {
              width: 1.25rem;
              height: 1.25rem;
            }
          }
        }
    
        h3 {
          font-size: 1.125rem;
          color: #101828;
        }
    
        .myIcons {
          font-size: 1rem;
          display: flex;
          /* justify-content: center; */
          align-items: center;
          align-content: center;
          gap: 1.125rem;
    
          div {
            align-items: center;
            color: #475467;
            display: flex;
            align-items: center;
            align-content: center;
            gap: 0.5rem;
            font-size: 1rem;
    
            img {
              width: 1.25rem;
              height: 1.25rem;
            }
          }
        }
    }

    .myButtons{
      width: 343px;
      height: 65px;
      display: flex;
      flex-direction: row;
      gap: 8px;
      justify-content: center;
      align-items: center;
      border: none;
      

      .numButt{
        display: flex;
        flex-direction: row;
        gap: 2px;
        color: #ffffff;
        
        button{
          width: 34px;
          height: 33px;
          background: #ffffff;
          border: none;
          display: flex;
          justify-content: center;
          align-items: center;

        }
      }
      .arrows{
        width: 88px;
        height: 36px;
        background: #ffffff;
        border: 1px solid #E4E7EC;
        border-radius: 8px;
      }
    }

}

.myWeb{
  display: none;
}
/* ------------------------FOOTER------------------------ */
.footer {
  display: none;
 }
 
 .footer-ph{
  border: 0.25rem solid #edeff1;
  border-radius: 2rem;
  border-left: none;
  border-right: none;
  border-bottom: none;

   .myP{
     width: 21.4375rem;
     height: 3rem;
     font-size: 1rem;
     color: #475467;
   }
   .top{
     margin-block-end: 2.5rem;
     ul li{
       list-style: none;
       font-size: 1rem;
       color: #475467;
 
       a{
         text-decoration: none;
         color: #475467;
       }
     }
 
   }
   
 }
  
 
 .hvr-underline-from-left:before {
   background: #fec545 !important;
   width: 0;
 }
 .hvr-fade:before {
   background-color: #fec545 !important;
 }
 .dropdown-menu {
   --bs-dropdown-link-active-bg: #ffffff !important;
 }
 .hvr-bounce-to-top:before {
   background-color: #fec545 !important;
   border-radius: 1rem;
 }
 .grid-services:hover {
   h3 {
     color: #060809;
   }
 }
 .myButton:active {
   background-color: #f5b726;
   transform: translateY(4px);
 }
}



@media screen and (min-width: 1024px) {
  .services {
    height: 14.75rem;
    background: url(../images/BG3.png);
    margin-block-start: 6rem;
    align-items: center;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: center;
  
    .servicesContent {
      color: #ffffff;
      width: 43.375rem;
      height: 19.3125rem;
  
      h2 {
        height: 4.125rem;
        font-size: 3.625rem;
        width: 50.875rem;
      }
  
      p {
        font-size: 1rem;
        width: 660px;
      }
    }
  }

  .whyWorkWithUs {
    /* width: 76.3125rem; */
    height: 53.375rem;
    margin-block-start: 4%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
  
    .top-workWithUs {
      display: flex;
      flex-direction: column;
      margin-block-end: 4rem;
  
      .features {
        align-items: center;
        align-self: center;
        margin-block-start: 20px;
      }
  
      h6 {
        width: 87px;
        height: 20px;
        /* padding: 10px 2px; */
        color: #019db6;
        font-size: 14px;
        background-color: #f0f6ff;
        border-radius: 150px;
      }
      h2 {
        width: 25.6875rem;
        height: 31px;
        line-height: 63px;
        color: #0f172a;
        height: 28px;
        font-size: 42px;
        margin-block-end: 0.75rem;
      }
  
      p {
        width: 650px;
        height: 28px;
        /* padding: 10px 2px; */
        color: #344051;
        height: 28px;
        font-size: 18px;
        text-align: center;
      }
    }
  
    .bottom-workWithUs {
      width: 76.3125rem;
      display: flex;
      justify-content: center;
      gap: 2rem;
  
      p {
        font-size: 1rem;
        color: #475569;
        width: 29rem;
      }
      h3 {
        color: #1e293b;
      }
  
      .projects {
        width: 37.25rem;
        height: 10.3125rem;
        padding-inline: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        justify-content: center;
        /* align-items: center; */
        align-content: center;
      }
  
      .bottomLeft {
        display: flex;
        flex-direction: row;
        gap: 2rem;
  
        .leftImages {
          display: flex;
          flex-direction: column;
          gap: 2rem;
        }
      }
    }
  }

  /* ---------------------WANT TO JOIN TEAM ARKTECH--------------------- */

  
.myPhone{
  display: none;
}
.myWeb{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 1.125rem;
  margin-block-start: 7%;
  margin-block-end: 189px;

  .top-teamArktech {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 1.125rem;

    h2 {
      font-size: 2.625rem;
      color: #0f172a;
      text-align: center;
    }

    p {
      font-size: 1.125rem;
      color: #344051;
      width: 40.625rem;
      text-align: center;
    }
  }


  .tab-titles {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 3.32rem;
  
    .tab-links {
      cursor: pointer;
      position: relative;
      font-size: 1rem;
      color: #667085;
    }
  
    .tab-links::after {
      content: "";
      width: 0;
      height: 3px;
      background: #f5b726;
      left: 0;
      bottom: -8px;
      transition: 0.5s;
      position: absolute;
    }
    .tab-links.active-link::after {
      width: 100%;
    }
  }
  
  .tab-contents.active-tab {
    display: flex;
  }

.myView{
  width: 48rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 0;
  border: 1px solid #E4E7EC;
  border-radius: 1rem;
  padding-inline: 1.5rem;
  padding-block-start: 1.5rem;
  padding-block-end: 1.75rem;

  .tab-design {
    display: flex;
    justify-content: space-between;
    text-align: center;

    span {
      color: #cb8c00;
      font-size: 0.875rem;

      img {
        width: 1.25rem;
        height: 1.25rem;
      }
    }
  }

  h3 {
    font-size: 1.125rem;
    color: #101828;
  }

  .myIcons {
    font-size: 1rem;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    align-content: center;
    gap: 1.125rem;

    div {
      align-items: center;
      color: #475467;
      display: flex;
      align-items: center;
      align-content: center;
      gap: 0.5rem;
      font-size: 1rem;

      img {
        width: 1.25rem;
        height: 1.25rem;
      }
    }
  }
}
  

.view{
  display: none;
}
.view.active-tab {
  display: block;
}

  .tab-contents {
    width: 48rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: 4%;
    border: 1px solid #E4E7EC;
    border-radius: 1rem;
    padding-inline: 1.5rem;
    padding-block-start: 1.5rem;
    padding-block-end: 1.75rem;

    display: none;

    .tab-design {
      display: flex;
      justify-content: space-between;
      text-align: center;

      span {
        color: #cb8c00;
        font-size: 0.875rem;

        img {
          width: 1.25rem;
          height: 1.25rem;
        }
      }
    }

    h3 {
      font-size: 1.125rem;
      color: #101828;
    }

    .myIcons {
      font-size: 1rem;
      display: flex;
      /* justify-content: center; */
      align-items: center;
      align-content: center;
      gap: 1.125rem;

      div {
        align-items: center;
        color: #475467;
        display: flex;
        align-items: center;
        align-content: center;
        gap: 0.5rem;
        font-size: 1rem;

        img {
          width: 1.25rem;
          height: 1.25rem;
        }
      }
    }
  }

  .carouselBtn{
    display: none;
  }
}

/* ------------------------FOOTER------------------------ */

.footer {
  background: #ffffff;
  padding-block: 2.5rem;
  padding-inline: 3rem;
  display: grid;
  grid-template-columns: auto auto;
  margin-inline: 2.40625rem;
  margin-block-end: 4.75rem !important;
  border-radius: 1.25rem;
  border: 0.25rem solid #edeff1;

  .top {
    margin-block-end: 1.875rem;
  }

  .left-end {
    p {
      width: 30.75rem;
      height: 4.5rem;
      font-size: 1rem;
      color: #64748b;
      margin-block-end: 10%;
    }

    span {
      width: 21rem;
      height: 1.5rem;
      font-size: 0.875rem;
      color: #667085;
    }
  }

 
  .footerlist {
    display: grid;
    grid-template-columns: auto auto auto;

    ul li {
      list-style: none;
      font-size: 1rem;
      margin-block-start: 0.5rem;

      .contact {
        margin-block-start: 5rem;
      }

      a {
        text-decoration: none;
        font-size: 1rem;
        color: #0b0d14;
      }
    }
  }
}

.footer-ph{
  display: none;
}
/* ----------------HOVER EFFECTS-------------------- */
.hvr-underline-from-left:before {
  background: #fec545 !important;
  
}
.hvr-fade:before {
  background-color: #fec545 !important;

}
.dropdown-menu {
  --bs-dropdown-link-active-bg: #ffffff !important;
}
.hvr-bounce-to-top:before {
  background-color: #fec545 !important;
  border-radius: 1rem;
}
.grid-services:hover {
  h3 {
    color: #060809;
  }
}
.myButton:active {
  background-color: #f5b726;
  transform: translateY(4px);
}
}