@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sora:wght@100..800&display=swap");

@font-face {
  font-family: "Courier New-Regular";
  src: url("https://anima-uploads.s3.amazonaws.com/projects/6186246acaaa435d6c5717d1/fonts/courier-new-regular.ttf") format("truetype");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: var(--hover-color);
}

:root {
  --primary-color: #01b4b7;
  --hover-color: #006a6c;
}

.primary-color {
  color: var(--primary-color) !important;
}

body {
  font-family: Sora;
  font-style: normal;
}

/* top-nav-banner part start   */

.body-image-1 {
  background-image: url(../img/water-color-2.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.logo-font {
  position: relative;
  width: fit-content;
  -webkit-text-stroke: 0.25px #000000;
  font-family: "Courier New-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.custom-navbar {
  background-color: #ffffff99;
}

.nav-link i {
  font-size: 12px;
}

.dropdown-menu {
  background-color: #FFFFFF99;
  top: 100%;
  border-radius: 0;
}

.dropdown:hover .dropdown-menu {
  display: block;
  transition: 0.4s ease-in-out;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #FFFFFF;
  color: var(--primary-color);
  transition: 0.2s ease-in-out;
}

.nav-item .nav-link {
  color: #000;
  margin: 32px 0px;
}

.nav-item .nav-link:hover {
  color: var(--primary-color) !important;
}

.top-banner {
  margin: 69px 0px 119px 0px;
}

.top-banner h1 {
  font-size: 72px;
  font-weight: 600;
  line-height: 93.6px;
  margin-bottom: 2rem;
}

.top-banner p {
  font-size: 24px;
  font-weight: 400;
  line-height: 38.4px;
}

.nav-btn {
  font-size: 16px !important;
  padding: 10px 30px;
  border-radius: 60px;
}

/* top-nav-banner part end   */

/* About us part start */
.body-img-2 {
  background-image: url(../img/water-color-1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.sec-title {
  color: #474848;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.64px;
  margin-bottom: 20px;
}


.about-us-part h1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 130%;
}

/* .about-us-box {
  max-width: 528px;
  
} */

.about-us-details {
  margin-top: 20px;
  color: #000;
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
}


.coundown {
  margin-top: 80px;
}

.coundown p {
  font-size: 14px;
}

.brands-carousel {
  margin-top: 90px;
}

.owl-carousel {
  background: rgba(0, 0, 0, 0.06);
}

.brands-carousel .owl-carousel .item {
  max-width: 80%;
  height: 60px;
  padding: 16px;
}

.carousel-bg {
  background-color: transparent;
  transition: 0.3s ease-in-out;
}

.brands-carousel .owl-carousel .item:hover.carousel-bg {
  background-color: white;
}

/* About us part end */

/* brands part start  */

.brands-carousel {
  margin: 101px 0px 114px 0px;
}

/* .brands-carousel .owl-item{
  display: flex;
  justify-content: center;
} */



/* brands part end  */


/* service part start  */
.service-part h1 {

  font-size: 64px;
  font-weight: 700;
  line-height: 130%;
  text-transform: capitalize;
  margin-bottom: 66px;
}

.service-slider .card {
  height: 394px;
}

.service-part .fa-arrow-left {
  position: absolute;
  border: 2px solid black;
  border-radius: 100%;
  padding: 8px;
  font-size: 20px;
  top: -28%;
  right: 7%;
}

.service-part .fa-arrow-right {
  position: absolute;
  border: 2px solid black;
  border-radius: 100%;
  padding: 8px;
  font-size: 20px;
  top: -28%;
  right: 0%;
}

.custom-service-card {
  background: transparent;
  border: 3px solid white;
  transition: 0.3s ease-in-out;
}

.custom-service-card img {
  width: 35% !important;
  height: 80px;
  margin-top: 82px;

}

.service-part .card:hover.custom-service-card {
  background-color: white;
  border: 3px solid black;
}

/* service part end  */

/* works part start  */
.works-part {
  margin: 102px 0px 61px 0px;
}

.works-part h1 {

  font-size: 64px;
  font-weight: 700;
  line-height: 130%;
  text-transform: capitalize;
  margin-bottom: 66px;
}

/* .works-slider .card {
  width: 100%;
} */

.works-slider .card h5 {
  margin-top: 34px;
  font-size: 35px;
  line-height: 45.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.works-part .fa-arrow-left {
  position: absolute;
  border: 2px solid black;
  border-radius: 100%;
  padding: 8px;
  font-size: 20px;
  top: -20%;
  right: 7%;
}

.works-part .fa-arrow-right {
  position: absolute;
  border: 2px solid black;
  border-radius: 100%;
  padding: 8px;
  font-size: 20px;
  top: -20%;
  right: 0%;
}
.works-img{
  height: 488px;
  object-fit: cover;
}

/* works part end  */

/* footer part start  */
.body-image-3 {
  background-image: url(../img/water-color-2-1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* blog part start  */
.blog-part h1 {
  font-size: 64px;
  font-weight: 700;
  line-height: 130%;


}

.blog-menu {
  margin-bottom: 65px;
}

.blog-card {
  border-radius: 10px;
  border: 1px solid #FFF;
  background: rgba(236, 236, 236, 0.50);
}

.blog-card img {
  width: 240px;
  height: 237px;
  border-radius: 10px;
  object-fit: cover;
}


.blog-card .card-text {

  font-size: 12px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 0.48px;
  margin-bottom: 20px;
}

.blog-link {
  color: #1D1D1D;
  transition: 0.2s ease-in;
}

.blog-link:hover {
  color: var(--hover-color);
}


.blog-card .card-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.blog-btn {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  /* 171.429% */
}

.view-btn {
  font-size: 14px;
  font-weight: 600;
  line-height: 130%;
  /* 18.2px */
  text-transform: capitalize;
}


/* blog part end  */

.footer-part {
  background: rgba(255, 255, 255, 0.40);
}

.footer-margin {
  padding: 50px 0px;
}

.footer-logo {
  height: 30px;
}

.footer-part .logo-font {
  margin-top: 5px;
  font-size: 16px;
  line-height: normal;
}

.footer-part h4 {
  margin-bottom: 11px;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 700;
  line-height: 20.8px;
  letter-spacing: 2px;
}

.footer-links {
  margin-bottom: 9px;
  font-size: 15px;
  font-weight: 400;
  line-height: 19.5px;
  text-transform: uppercase;
}

.footer-ad {
  font-size: 15px;
  font-weight: 400;
  line-height: 170%;
  text-transform: capitalize;
}

.devStation {
  font-size: 13px;
}

/* footer part end  */




/*************************    Contact page start **************************/
.contact-banner {
  background: url(../img/contact-banner-1.png) left top no-repeat, url(../img/contact-banner-2.png) right top no-repeat;
}

.banner-head {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-head h1 {
  color: var(--primary-color);
  text-align: center;
  font-size: 72px;
  font-weight: 600;
  line-height: 130%;
  text-transform: capitalize;
}

.banner-head p {
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 160%;
}

.banner-head i {
  margin: 0px 8px;
}






.map-part iframe {
  width: 100%;
  height: 500px;
  border: 0;
  border-radius: 20px;
  margin: 80px 0px;
}

.contact-form-part .form-control {

  height: 53px;
  font-size: 14px;
  line-height: 21px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.20);
  margin-bottom: 30px;

}

.form-msg {
  height: 180px !important;
}

.form-btn {
  background-color: var(--primary-color);
  color: white;
  border-radius: 30px;
  padding: 20px 48px 20px 48px;
  font-size: 14px;
  font-weight: 700;
  line-height: 14px;
}

.contact-us-details p {
  font-size: 18px;
  line-height: 160%;
  margin: 30px 0px;
}

.contact-us-details a {
  color: #000;
  font-size: 40px;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 1.6px;

}



/*************************    our insights page start **************************/

.inner-page-body-img {
  background-image: url(../img/inner-page-body.png);
  background-position: center left;
  background-repeat: no-repeat;
}

.our-insights-content {
  margin: 62px 0px;
}











/*************************    our insights page end **************************/



/*************************    about page start  **************************/

.team-slider .card-title {
  line-height: 36px !important;
}

.our-story {
  margin: 110px 0px;
}

.our-story h5 {
  color: var(--primary-color);
  font-size: 36px;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 20px;
}

.our-story p {
  font-size: 18px;

  line-height: 160%;
}

.story-img-1 {
  height: 406px;
  width: 354px;
  object-fit: cover;
  float: right;
}

.story-img-2 {
  height: 258px;
  margin-top: -173px;
  margin-left: 45px;
}

.team-slider img {
  height: 363px;
  object-fit: cover;
}






/*************************    about page end  **************************/



/*************************    Architectural Design page start  **************************/

.excellence-part img {
  max-width: 100%;
  height: 353px;
  object-fit: cover;

}

.excellence-part h4 {
  font-size: 36px;
  color: var(--primary-color);
}

.excellence-part p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 160%;
}

.custom-excellence-list {
  width: 100%;
}

.custom-excellence-list li {
  font-size: 18px;
  margin: 6px 0px;
  padding: 11px 20px;
  border-radius: 8px;
  background: #F1F6F7;
}

.custom-excellence-list li.active,
.custom-excellence-list li:hover {
  background-color: var(--primary-color);
  color: white;
}




.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
  transition: all 0.5s;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
}

.accordion-button::after {
  transition: all 0.5s;
}

.accordion-header {
  color: #1E1D1E;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  margin: 24px 0px;
}

.clints-part .caption {
  margin-bottom: 43px;
}



.clint-img {
  width: 180px !important;
  height: 180px;
  object-fit: cover;
  margin-bottom: 35px;
}

.clints-part .fa-arrow-left {
  position: absolute;
  border: 2px solid black;
  border-radius: 100%;
  padding: 8px;
  font-size: 20px;
  top: -20%;
  right: 7%;
}

.clints-part .fa-arrow-right {
  position: absolute;
  border: 2px solid black;
  border-radius: 100%;
  padding: 8px;
  font-size: 20px;
  top: -20%;
  right: 0%;
}

.clint-design {
  width: 80px !important;
  height: 80px;
  margin-bottom: 31px;
}

.clints-slider h5 {

  font-size: 16px;
  font-weight: 400;
  line-height: 180%;
}











/*************************    Architectural Design page end  **************************/










/*************************    Project page start  **************************/
.pagination {
  --bs-pagination-border-width: 0px;
  --bs-pagination-border-color: transparent;
}

.page-link {
  color: #000;
  margin: 0px 12px;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: 2px;
  padding: 10px 20px;
}

.page-link:hover,
.page-link.active {
  background-color: var(--hover-color);
  color: white;
}

.inner-page-tab .nav-link {
  font-size: 18px;
  font-weight: 600;
  border-radius: 80px;
  margin: 0px 22px;
  padding: 14px 22px;
  transition: 0.3s ease-in;
}


.inner-page-tab .nav-link:hover,
.inner-page-tab .nav-link.active {
  color: white !important;
  background-color: var(--hover-color);


}

.main-projects {
  margin: 48px 0px;
}

.main-projects .card img {
  height: 363px;
  object-fit: cover;
}


/*************************    Project page end  **************************/









/*************************    blog-inner page start   **************************/
.inner-banner {
  background-image: url(../img/blog-img/pexels-curtis-adams-1694007-3288102.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.banner-size {
  height: 50vh;
}






/*************************    blog-inner page end  **************************/





/*************************    product details page start  **************************/

.project-brief {
  margin-bottom: 73px;

}

.project-brief h3 {
  color: var(--primary-color);
  font-size: 36px;
  font-weight: 700;
  line-height: 140%;
  /* 50.4px */
  text-transform: capitalize;
  margin-bottom: 20px;
}

.pro-details {
  margin-bottom: 20px;
}

.pro-lay {
  margin: 10px 0px;
}

.project-brief p {
  font-size: 16px;
  line-height: 160%;
}

.pro-gallery {
  margin-bottom: 75px;
}

.gallery-1 img {
  width: 565px;
  height: 500px;
  object-fit: cover;
}

.gallery-2 img {
  width: 262px;
  height: 225px;
  flex-shrink: 0;
  object-fit: cover;
}







/*************************    product details page end  **************************/















/* media quary  */
@media screen and (max-width: 769px) {
  .nav-item .nav-link {
    margin: 10px 0px;
  }

  .custom-navbar {
    padding: 32px 0px !important;
  }

  .top-banner h1 {
    font-size: 54px;
    line-height: 70.6px;
    margin-bottom: 2rem;
  }

  .top-banner p {
    font-size: 19px;
    line-height: 30.4px;
  }

  .about-us-part h1 {
    font-size: 23px;

  }

  .about-us-details {
    font-size: 16px;
  }

  .coundown {
    margin-top: 50px;
  }

  .coundown p {
    font-size: 11px;
  }

  .service-part h1 {
    font-size: 50px;
    width: 75%;
  }

  .works-part h1 {
    font-size: 50px;
  }

  .blog-part h1 {
    font-size: 51px;
  }

  .service-part .fa-arrow-left {
    right: 10%;
  }

  .works-part .fa-arrow-left {
    right: 10%;
  }

  .contact-us-details a {
    font-size: 25px;
  }

  .gallery-1 img {
    width: 345px;
    height: 348px;
  }

  .gallery-2 img {
    width: 148px;
    height: 149px;
  }




}

@media screen and (max-width: 426px) {
  .service-part h1 {
    font-size: 30px;
    width: 70%;
  }

  .works-part h1 {
    font-size: 24px;
  }

  .service-part .fa-arrow-left {
    right: 14%;
  }

  .works-part .fa-arrow-left {
    right: 14%;
  }

  /* .blog-part h1 {
    font-size: 33px;
  } */
  .banner-head h1 {
    font-size: 46px;
  }

  .banner-head p {
    font-size: 17px;
  }

  .contact-us-details a {
    font-size: 30px;
  }

  /* .view-btn {
    font-size: 8px;
  } */
  .works-slider .card h5 {
    font-size: 25px;
  }

  .brands-carousel .owl-carousel .item {
    max-width: 80%;
    height: 67px;
    padding: 0px;
  }

  .clints-part .fa-arrow-left {
    top: -13%;
    right: 18%;
  }

  .clints-part .fa-arrow-right {
    top: -13%;
  }

  .gallery-1 img {
    width: 100%;
    height: auto;
  }

  .gallery-2 img {
    width: 100%;
    height: auto;
  }

  .page-link {
    font-size: 10px;
    padding: 10px 12px;
    margin: 0;
  }

  .clint-design {
    width: 30px !important;
    height: 30px;
  }


}
@media screen and (max-width: 321px) {
  .contact-us-details a {
    font-size: 26px;
  }
}

@media screen and (max-width: 1199px) and (min-width: 992px) {
  .nav-link {
    font-size: 12px;
  }

  .blog-btn {
    font-size: 12px;

  }

  .contact-us-details a {
    font-size: 36px;
  }

  .gallery-1 img {
    width: 465px;
    height: 450px;
  }

  .gallery-2 img {
    width: 213px;
    height: 200px;
  }


}











/************************************ Realestate-1 page start  **********************************/



.rs-body-img-1 {
  background-image: url(/img/image-10.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.rs-banner {
  height: 807px;
  vertical-align: center;
}

.rs-banner h1 {
  display: table;
  padding: 5px;
  color: #FFF;
  font-size: 72px;
  font-weight: 700;
  line-height: 100%;
  text-transform: capitalize;
  background: rgba(0, 0, 0, 0.60);
}

.rs-banner p {
  display: table;
  padding: 5px;
  color: #FFF;
  font-size: 24px;
  font-weight: 500;
  line-height: 180%;
  background: rgba(0, 0, 0, 0.60);
}

.rs-body-img-2 {
  background-image: url(/img/rs-img/rs-bg-2.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}




.rs-body-img-3 {
  background-image: url(/img/rs-img/rs-bg-3.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}


/************************************ Realestate-1 page end  **********************************/




/************************************ Realestate-2 page start  **********************************/

.rs2-body-img-1 {
  background-image: url(/img/rs-img/rs2-bg-1.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}








/************************************ Realestate-2 page end  **********************************/










/************************************ Homepage-1 page start  **********************************/
.hp1-btn-bg {
  background-color: var(--primary-color);
}

.hp1-body-img-1 {
  background-image: url(/hp-imgs/hp-1/hp-1-banner-bg.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hp1-m {
  color: #FFF;
  text-align: right;
  font-family: Poppins;
  font-size: 60px;
  font-style: normal;
  font-weight: 275;
  line-height: 63px;
  /* 105% */
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cp-details h1 {
  font-family: Poppins;
  font-size: 95px;
  font-style: normal;
  font-weight: 500;
  line-height: 98px;
  /* 103.158% */
  letter-spacing: 2px;
}

.type-stroke {
  color: black;
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

.cp-img-1 {
  width: 100%;
  height: 600px;
  object-fit: cover;
}

.cp-img-2 {
  width: 80%;
  height: 400px;
  object-fit: cover;
  margin-top: -140px;
}

.hp1-service {
  margin: 150px 0px;
}

.hp1-service-details {
  background-image: url(/hp-imgs/hp-1/hp1-service-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hp1-service-img-1 {
  position: absolute;
  width: 350px;
  height: 300px;
  top: -12%;
  left: 0;
}

.hp1-service-img-2 {
  position: absolute;
  width: 350px;
  height: 300px;
  bottom: -12%;
  right: 0;
  object-fit: cover;
}

.hp1-service-img-3 {
  position: absolute;
  width: 170px;
  height: 120px;
  top: 0;
  right: 7%;
  object-fit: cover;
}

.hp1-service-img-4 {
  position: absolute;
  width: 170px;
  height: 120px;
  bottom: 0;
  left: 7%;
  object-fit: cover;
}

.hp1-service-list {
  color: #757575;
  font-family: Poppins;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  text-transform: uppercase;
}

.hp1-works h1 {
  font-family: Poppins;
  font-size: 40px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: 2px;
}

.hp1-works .card img {
  height: 500px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
  color: white;
}

.hp1-works .card .card-title {
  font-family: Poppins;
  font-size: 35px;
  font-weight: 275;
  line-height: 45.5px;
  /* 130% */
  letter-spacing: 2px;
}






.hp1-contact {
  background-image: url(/hp-imgs/hp-1/hp1-about-1.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.contact-bg {
  height: 600px;
}

.img-contact {
  background: white;
  width: 276px;
  height: 360px;
  padding: 50px 30px 50px 80px;
  margin-left: -10px;
}

.hp1-contact-img {
  width: 230px;
  height: 300px;
  object-fit: cover;

}

.hp1-tes {
  margin-bottom: 120px;
}

.tes-img {
  width: 194.78px;
  height: 200px;
}





.footer-circle {
  margin-left: -5px;
}




/************************************ Homepage-1 page end  **********************************/













/************************************ Homepage-2 page start  **********************************/

.hp2-body-img-1 {
  background-image: url(/hp-imgs/hp-2/hp2-banner-bg.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hp2-banner {
  height: 810px;
}

.hp2-banner h1 {
  border: 2px solid white;
  display: inline;
  font-size: 80px;
  font-style: italic;
  font-weight: 300;
  line-height: 100px;
  text-transform: capitalize;
  border-radius: 65px;
  padding: 20px 60px;
}

.hp2-banner p {
  margin: 60px 0px 0px 150px;
  color: #FFF;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
}

.follow-bar {
  position: absolute;
  left: 0;
  top: 80%;
  transform: translateY(-50%);
  padding: 10px;
  /* border-right: 2px solid #ff0000;      */
  /* Red border on the right side */
  text-align: center;
  /* z-index: 1000; */
}

.follow-bar a {
  display: block;
  margin: 15px 0;
  color: white;
  font-size: 20px;
}

.follow-bar a:hover {
  color: var(--primary-color);
}

.follow-bar .separator {
  height: 2px;
  width: 100%;
  background-color: white;
  margin: 10px 0;
}

.follow-bar .follow-text {
  writing-mode: vertical-rl;
  transform: rotate(360deg);
  color: white;
  margin-top: 20px;
}







.hp2-body-img-2 {
  background-image: url(/hp-imgs/hp-1/hp1-service-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hp2-body-img-2 h2 {
  font-family: Poppins;
  font-size: 28px;
  line-height: 36.4px;
  /* 130% */
  letter-spacing: 2.94px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hp2-about-img {
  width: 315px;
  height: 493.56px;
  border-radius: 160px;
}

.hp2-service {
  background-image: linear-gradient(#2828281A, #2828281A), url(/hp-imgs/hp-2/hp2-service-bg.png);
  background-position: bottom right;
  background-repeat: no-repeat;
}


.video-container {
  position: relative;
  width: 100%;
  height: 761px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background-image: url(/hp-imgs/hp-1/hp1-archi-1.webp);
  /* Replace with your image path */
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-overlay::before {
  content: "\f04b Play";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  color: white;
  height: 50px;
  width: 50px;
  /* background-color: rgba(0, 0, 0, 0.192);
  border-radius: 50%; */
}

.play-text,
.video-text {
  color: white;
  font-size: 5rem;
  margin: 11px 242px;
}

.hp2-footer h1 {
  font-family: Poppins;
  font-size: 75px;
  line-height: 85px;
  /* 113.333% */
  letter-spacing: 5.5px;
  text-transform: uppercase;
  margin-bottom: 91px;
}

.hp2-footer h2 {
  font-family: Poppins;
  font-size: 75px;
  line-height: 85px;
  /* 113.333% */
  letter-spacing: 5.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hp2-work {
  height: 888px;
}

.hp2-work h1 {
  font-family: Poppins;
  font-size: 160px;
  font-weight: 500;
  line-height: 100%;
  /* 160px */
  letter-spacing: 2px;
}

.hp2-work .card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.work-card-1 {
  margin-top: -70%;
}

.work-card-2 {
  margin-left: 8%;
  margin-bottom: -274px;
}











/************************************ Homepage-2 page end  **********************************/






.hp4-about-img {
  width: 315px;
  height: 493.56px;
  flex-shrink: 0;
  object-fit: cover;
}