@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  transition: var(--smooth);
}
html,
body {
  font-family: "Montserrat", sans-serif;
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
}
:root {
  --theme: #ffbd00;
  --white: #fff;
  --theme2: #2d2727;
  --theme2-lite: #2d2727ce;
  --smooth: 0.25s all;
  --border-color: #d7bebe;
}
.navbar {
  width: 100%;
  height: 14%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 35px;
  /* background-color: var(--theme2); */
}
.navbar .nav-logo img {
  width: 10vw;
}
.navbar .nav-item,
.navbar .nav-item ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.55rem;
  list-style: none;
  font-weight: 600;
  font-size: 18px;
}
.navbar .nav-item ul li a {
  color: var(--white);
  transition: var(--smooth);
}
.navbar .nav-item ul li a::after {
  transition: var(--smooth);
  content: "";
  display: flex;
  opacity: 0;
  background-color: var(--theme);
  justify-content: center;
  align-items: center;
  width: 5%;
  height: 2px;
}
.navbar .nav-item ul li a:hover::after {
  opacity: 1;
  content: "";
  display: flex;
  background-color: var(--theme);
  width: 100%;
  height: 2px;
}
.navbar .nav-item .nav-button a {
  font-weight: 500;
  font-size: 18px;
  padding: 14px 25px;
  border-radius: 50px;
  background-color: var(--theme);
  color: var(--theme2);
  border: none;
}
.hamburger {
  display: none;
}
.hamburger a {
  text-decoration: none;
  font-size: 24px;
  color: var(--white);
}

.nav-item-tab ul li {
  background-color: #3a1717;
  list-style: none;
  width: 100%;
  height: 100%;
}
.nav-item-tab {
  background-color: #3a1717;
  position: fixed;
  top: 0;
  right: -300px;
  width: 38%;
  height: 100vh;
  z-index: 99;
  padding: 40px 40px;
}
.nav-item-tab-close a {
  color: var(--white);
  font-size: 25px;
  margin: 20px 0px;
}
.nav-item-tab ul {
  gap: 3rem;
  display: flex;
  flex-direction: column;
}
.nav-item-tab ul li a {
  color: white;
  font-weight: 600;
  font-size: 25px;
}

.navbar .nav-button-tab {
  font-weight: 500;
  display: none;
  font-size: 16px;
  padding: 13px 22px;
  border-radius: 50px;
  background-color: var(--theme);
  color: var(--theme2);
  border: none;
}

.fa-arrow-right {
  transform: rotate(45deg);
  transition: var(--smooth);
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Hide overflow to prevent scrollbars */
  z-index: -1;
  /* Place behind other content */
}

#background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  transform: translate(-50%, -50%);
  /* Center the video */
}

.page_1 {
  width: 100%;
  height: 95vh;
}

.page_1 .pg1_content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.95rem;
  color: var(--white);
  width: 95%;
  margin: auto;
  position: relative;
  top: 15%;
}
.page_1 .pg1_content h1 {
  font-size: 126.378px;
  font-weight: 400;
  line-height: 175px;
}
.page_1 .pg1_content h3 {
  font-size: 40px;
  font-weight: 500;
}
.p1_content_btn a {
  font-weight: 500;
  font-size: 18px;
  padding: 14px 25px;
  border-radius: 50px;
  background-color: var(--white);
  border: 1px solid var(--white);
  transition: var(--smooth);
  color: #3a1717;
}

.main_container {
  width: 95%;
  height: auto;
  margin: auto;
}

/* page 2 */

.page_2 {
  width: 100%;
  height: 100%;
  background-color: #878a8a40;
  padding: 25px;
}

.page_2 .pg2_content {
  display: flex;
  gap: 1.25rem;
  /* background-color: var(--theme2); */
  justify-content: center;
}
.pg2_cont_pt1 {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.page_2 .pg2_content .pg2_cont_about {
  display: flex;
  flex-direction: column;
  gap: 1.85rem;
}

.page_2 .pg2_content .pg2_cont_about h4 {
  font-size: 45px;
  color: var(--theme2);
  font-weight: 500;
}
.page_2 .pg2_content .pg2_cont_about h6,
.page_2 .pg2_content .pg2_cont_about p {
  color: var(--theme2);
  font-size: 18px;
}

.pg2_cont_button a {
  font-weight: 500;
  font-size: 18px;
  padding: 14px 25px;
  border-radius: 50px;
  background-color: var(--theme2);
  border: 1px solid var(--theme2);
  transition: var(--smooth);
  color: var(--white);
}
.foot-4 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.foot-4 span{
  font-weight: 500;
}
.foot-button a {
  font-weight: 400;
  font-size: 15px;
  padding: 11px 13px;
  border-radius: 50px;
  background-color: var(--theme2);
  border: 1px solid var(--theme2);
  transition: var(--smooth);
  color: var(--white);
}

.pg2_cont_footer,
.af-1,
.af-2,
.af-3 {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.af-1,
.af-2,
.af-3 {
  color: var(--theme2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 55px 0px;
  border-right: 2px solid var(--border-color);
}
.af-3 {
  border-right: none;
}
.af-1 h1,
.af-2 h1,
.af-3 h1 {
  font-size: 65px;
}
.af-1 span,
.af-2 span,
.af-3 span {
  font-weight: 400;
}
.pg2_cont_pt2 .pg2_cont_img {
  width: 85%;
}
.pg2_cont_pt2 .pg2_cont_img img {
  width: 100%;
  padding: 55px;
}

/* page 3 starts */
.page_3 {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}
.page_3 .pg3_content h4 {
  font-size: 40px;
  color: var(--theme2);
  font-weight: 500;
}
.page_3 .pg3_content h6 {
  color: var(--theme2);
  font-size: 12px;
}

.pg3-cont-pt2 .projects .pr_1,
.pg3-cont-pt2 .projects .pr_2,
.pg3-cont-pt2 .projects .pr_3,
.pg3-cont-pt2 .projects .pr_4,
.pg3-cont-pt2 .projects .pr_5,
.pg3-cont-pt2 .projects .pr_6 {
  width: 580px;
  height: auto;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}
.pg3-cont-pt2 .projects {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.pg3-cont-pt2 .projects .pr_1 img,
.projects .pr_2 img,
.projects .pr_3 img,
.projects .pr_4 img,
.projects .pr_5 img {
  width: 100%;
  position: relative;
  z-index: -11;
  top: 18%;
}
.pg3-cont-pt2 .projects .pr_1 .pr_1_detail,
.pg3-cont-pt2 .projects .pr_2 .pr_2_detail,
.pg3-cont-pt2 .projects .pr_3 .pr_3_detail,
.pg3-cont-pt2 .projects .pr_4 .pr_4_detail,
.pg3-cont-pt2 .projects .pr_5 .pr_5_detail {
  background-color: var(--theme2-lite);
  width: 144px;
  height: 75px;
  padding-left: 10px;
  padding-top: 4px;
  color: var(--white);
}

.pg3-cont-pt2 .projects .pr_6 {
  justify-content: center;
}
.project_deails h1 {
  font-size: 75px;
  color: #2d2727;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}

.project_deails {
  display: flex;
  flex-direction: column;
  gap: 1.45rem;
}

.project_deails h1 span {
  font-size: 35px;
  font-weight: 500;
  color: #2d2727;
}

/* page 4 starts */
.page_4 {
  width: 100%;
  height: 100vh;
  margin-top: 20px;
  border: 1px solid var(--border-color);
}

.page_4 .pg4_content {
  width: 100%;
  /* height: auto;
  margin: auto;   */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8.5rem;
}
.page_4 .pg4_content .pg4_cont_pt1,
.page_4 .pg4_content .pg4_cont_pt2,
.page_4 .pg4_content .pg4_cont_pt3 {
  border: 1px solid var(--border-color);
  background-color: #2d272791;
}
.page_4 .pg4_content h4 {
  font-size: 40px;
  color: var(--theme2);
  font-weight: 500;
}
.page_4 .pg4_content h4 {
  font-size: 40px;
  color: var(--theme2);
  font-weight: 500;
}
.page_4 .pg4_content h6 {
  color: var(--theme2);
  font-size: 12px;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "services service1 service2"
    "services service1 service2"
    "services service3 service4"
    "services service3 service4";
}

.services {
  grid-area: services;
  border: 1px solid var(--border-color);
}

.services {
  display: flex;
  flex-direction: column;
  gap: 2.85rem;
  justify-content: center;
  align-items: flex-start;
  padding: 55px;
}

.services h6 {
  font-size: 16px;
  font-weight: 700;
}
.services h4 {
  font-size: 40px;
  font-weight: 500;
  line-height: 50px;
}

.service1 .sev_1 img,
.service2 .sev_2 img,
.service3 .sev_3 img,
.service4 .sev_4 img {
  width: 9%;
}
.service1 .sev_1 span,
.service2 .sev_2 span,
.service3 .sev_3 span,
.service4 .sev_4 span {
  font-weight: 600;
  color: var(--theme2);
}

.service1 .sev_1,
.service2 .sev_2,
.service3 .sev_3,
.service4 .sev_4 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  align-items: flex-start;
  padding: 165px 55px;
}
.service1 {
  grid-area: service1;
  border-top: 0.5px solid var(--border-color);
  border-right: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
}

.service2 {
  grid-area: service2;
  border-top: 0.5px solid var(--border-color);
  border-right: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
}

.service3 {
  grid-area: service3;
  border-right: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
}

.service4 {
  grid-area: service4;
  border-right: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
}

.clients {
  margin: 50px 0px;
  width: 100%;
  height: 100%;
  text-align: center;
}

.clients .show_clients {
  width: 95%;
  margin: auto;
  color: var(--white);
  background-color: var(--theme2);
  padding: 60px 0px;
}

.clients .show_clients h1 {
  font-weight: 500;
  font-size: 45px;
}
.clients .show_clients .clients_img img {
  width: 16%;
}
.clients .show_clients .clients_img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  margin-top: 2rem;
}

/* footer */
footer {
  width: 100%;
  height: auto;
  border-top: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 50px 0px;
}

footer .foot-1 {
  display: flex;
  flex-direction: column;
  gap: 1.45rem;
  justify-content: flex-start;
}

footer .foot-logo img {
  width: 10vw;
}
footer .foot-1 ul {
  line-height: 1.85rem;
  list-style: none;
}
footer .foot-1 ul li {
  list-style: none;
}
footer .foot-1 ul li a {
  color: var(--theme2);
  font-weight: 500;
}

footer .foot-2 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

footer .foot-2 span {
  font-weight: 500;
}
footer .foot-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.25rem;
}
footer .foot-3 .social {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 30px;
}

footer .foot-3 .social a {
  color: var(--theme2);
}

.bottom-part {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0px;
}
.bottom-part h4 {
  color: var(--theme2);
  font-weight: 500;
}
.bottom-part a {
  font-weight: 500;
  color: var(--theme2);
}
.bottom-part a i {
  transform: rotate(145deg);
}
.bottom-part a:hover > i {
  transform: rotate(360deg);
}

/* services page */
.grid_container_2 {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0px 0px;
  grid-template-areas:
    "head head head"
    "srv1 srv5 srv9"
    "srv2 srv6 srv9"
    "srv3 srv7 srv9"
    "srv4 srv8 srv9";
}

.head {
  grid-area: head;
  border-top: 0.5px solid var(--border-color);
}

.head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0px 0px 0px 120px;
}
.head h1 {
  font-size: 60px;
  font-weight: 400;
}
.head span {
  font-weight: 700;
}

.srv1 {
  grid-area: srv1;
  border: 0.5px solid var(--border-color);
}
.srv2 {
  grid-area: srv2;
  border-right: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
  border-left: 0.5px solid var(--border-color);
}
.srv3 {
  grid-area: srv3;
  border-right: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
  border-left: 0.5px solid var(--border-color);
}
.srv4 {
  grid-area: srv4;
  border-right: 0.5px solid var(--border-color);
  border-left: 0.5px solid var(--border-color);
}
.srv5 {
  grid-area: srv5;
  border-top: 0.5px solid var(--border-color);
  border-right: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
}
.srv6 {
  grid-area: srv6;
  border-right: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
}
.srv7 {
  grid-area: srv7;
  border-right: 0.5px solid var(--border-color);
  border-bottom: 0.5px solid var(--border-color);
}
.srv8 {
  grid-area: srv8;
  border-right: 0.5px solid var(--border-color);
}
.srv9 {
  grid-area: srv9;
  border-top: 0.5px solid var(--border-color);
  border-right: 0.5px solid var(--border-color);
}

.srv1 .sev_1 img,
.srv2 .sev_2 img,
.srv3 .sev_3 img,
.srv4 .sev_4 img,
.srv5 .sev_5 img,
.srv6 .sev_6 img,
.srv7 .sev_7 img,
.srv8 .sev_8 img {
  width: 9%;
}
.srv1 .sev_1 span,
.srv2 .sev_2 span,
.srv3 .sev_3 span,
.srv4 .sev_4 span,
.srv5 .sev_5 span,
.srv6 .sev_6 span,
.srv7 .sev_7 span,
.srv8 .sev_8 span {
  font-weight: 600;
  color: var(--theme2);
}

.srv1 .sev_1,
.srv2 .sev_2,
.srv3 .sev_3,
.srv4 .sev_4,
.srv5 .sev_5,
.srv6 .sev_6,
.srv7 .sev_7,
.srv8 .sev_8 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  padding: 165px 55px;
}

.srv9 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.srv9 .sev_9 {
  width: 90%;
  height: 96.4%;
  padding: 40px;
  margin: auto;
  overflow: hidden;
  background-image: url("assets/services.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.srv9 .sev_9 img {
  width: 100%;
  margin: 0;
}