@import "reset.css";
@import "variables.css";
@import "fonts.css";
@import "component.css";
@import "utilities.css";

/* Header start  */

.portfolio .swiper-slide {
  background: #052c59 !important;
  height: auto;
}

.site-header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99999;
}

.site-header .top-bar {
  padding-block: 20px;
  background-color: var(--color-background);
}

.site-header .top-bar .contact-wrapper a,
.site-header .top-bar .contact-wrapper span,
.site-header .top-bar .address-wrapper a span {
  color: #333333;
  font-family: var(--font-primary);
  transition: all 0.3s ease;
}

.site-header .top-bar .contact-wrapper a:hover,
.site-header .top-bar .address-wrapper a:hover span {
  color: var(--color-accent);
}

.site-header .top-bar .contact-wrapper i {
  color: var(--color-accent);
}

.site-header .top-bar .address-wrapper i {
  color: var(--color-accent);
}

.site-header .logo-wrapper {
  position: absolute;
  top: -102px;
  left: 0;
  z-index: 1;
}
.bottom-bar-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.site-header .logo-wrapper a {
  display: block;
}

.site-header .logo-wrapper img {
  height: 195px;
  width: 345px;
  object-fit: contain;
  object-position: center;
}

.site-header .bottom-bar {
  position: relative;
  display: flex;
  align-items: center;
 background-image: url(../../assets/images/backgrounds/construction-img.jpg);
  background-size: cover;
  background-position: 0px -60px;
  border: 1px solid #dddddd;
  padding-block: 30px;
  padding-inline: 40px;
  gap:30px;
	
}

.site-header .bottom-bar-wrapper .nav-wrapper,
.site-header .bottom-bar-wrapper .cta-wrapper {
  position: relative;
  z-index: 10;
}

.site-header .bottom-bar-wrapper .nav-wrapper {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 80%;
}
.site-header .bottom-bar-wrapper .cta-wrapper {
    width: 20%;
    display: flex;
    justify-content: flex-end;
}
.site-header .bottom-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--color-background);
  opacity: 0.93;
}

.site-header .bottom-bar-wrapper .navigation-links {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  gap: 2em;
}

.site-header .bottom-bar-wrapper .navigation-links a {
  font-size: 20px;
  font-family: var(--font-primary);
  font-weight: 700;
  color: #333333;
  transition: all 300ms ease-in-out;
} 

.site-header .nav_icon {
  display: none;
}

.site-header .mobile-menu {
  display: none;
}

.site-header .bottom-bar-wrapper .navigation-links a:hover,
.site-header .bottom-bar-wrapper .navigation-links li.active>a {
  color: var(--color-accent);
}

.site-header .navigation-links ul.sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  background-color: var(--color-background);
  padding: 20px 30px;
  width: calc(100% - 380px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
}

.site-header .navigation-links li.has-submenu {
  display: flex;
  align-items: center;
  gap: 1em;
}

.site-header .navigation-links li.has-submenu::after {
  content: "";
  display: block;
  height: 10px;
  width: 10px;
  background-image: url("../../assets/images/icons/down-arrow.svg");
  background-size: contain;
  background-position: center;
  filter: brightness(0) saturate(100%) invert(40%) sepia(84%) saturate(1873%) hue-rotate(352deg) brightness(102%) contrast(101%);
  transition: all 300ms ease-in;
}

.site-header .navigation-links li.has-submenu:hover::after {
  transform: rotate(180deg);
}

.site-header .bottom-bar-wrapper .nav_icon,.site-header .close-icon{
	cursor: pointer;
}

/* Hero Section Start  */
.hero {
  height: calc(100vh - var(--header-height));
  margin-top: var(--hero-top-gap);
  /* min-height: 550px; */
  position: relative;
}

.hero .bg-img {
  display: flex;
  justify-content: flex-end;
  height: 100%;
}

.hero .bg-img .img {
  width: 55%;
  position: relative;
}

.hero .bg-img .img::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/patterns/hero-bg-pattern.png");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}

.hero .bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  z-index: 10;
  padding-top: 200px;
  padding-bottom: 60px;
}

.hero-content .pre-title span::after {
  background-color: #b9dae9;
}

.hero-content .title span {
  color: var(--color-accent);
}

.hero-content .content-wrapper {
  padding-inline-end: 70px;
}
.hero-content .content {
    padding-right: 30px;
}
/* Hero Section End  */

/* CTA Section Start  */
.cta {
  padding-block: 15px;
  position: relative;
}

.cta .title h2 {
  font-weight: 700;
}

.cta .item-wrapper {
  padding-block: 40px;
  position: relative;
}

.cta .bg-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.cta .cta-bg {
  background-color: var(--color-tertiary);
  position: relative;
}

.cta .cta-bg::before {
  content: "";
  position: absolute;
  left: 30%;
  top: 0;
  width: 50px;
  height: 100%;
  background-color: var(--color-primary);
  border-right: 10px solid var(--color-secondary);
  border-left: 10px solid var(--color-secondary);
  transform: skew(-30deg) translateX(-50%);
  z-index: 1;
}

.cta .cta-bg::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/patterns/cta-pattern.png");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.cta .text-part {
  padding-inline-start: 100px;
}

/* CTA Section End  */

/* Contact Section Start  */
.contact {
  padding-top: 60px;
  padding-bottom: 90px;
  background-color: #cbe8fa;
}

.contact .content-wrapper .title-black h2 {
  font-weight: 700;
}

.contact .content-wrapper .img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.contact .core-values h4 {
  font-size: 22px;
  font-weight: 700;
  text-decoration: underline;
}

.contact .core-values ul {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.contact .core-values ul li {
  position: relative;
  padding-left: 20px;
}

.contact .core-values ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-image: url("../../assets/images/icons/arrow-orange.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.contact .form-wrapper {
  background-color: var(--color-primary);
  padding: 70px 60px;
  border-radius: 16px;
}

.contact .form-wrapper .title h2 {
  font-weight: 700;
}

.contact .form-wrapper .pre-title span {
  color: var(--color-text-secondary);
}

.contact .form-wrapper .pre-title span::after {
  background-color: #ffffff;
}

.contact .form-wrapper .input-wrapper {
  display: grid;
  gap: 0.5em;
}

.contact .form-wrapper button[type="submit"] {
  text-transform: uppercase;
}

.contact .wrapper-box {
  padding-inline-start: 100px;
}

/* Contact Section End  */

/* Portflolio Section Start  */
.portfolio {
  padding: 15px 0;
  background-color: #ffffff;
}

.portfolio .portfolio-slider-right {
  padding: 150px 69px 80px 0;
}

.portfolio .portfolio-inner {
  display: flex;
  position: relative;
}

.portfolio .portfolio-inner .portfolio-slider-left,
.portfolio .portfolio-inner .portfolio-slider-right {
  width: 50%;
}

.portfolio .swiper.portfolio-img-swiper {
  height: 100%;
}

.portfolio-slider-left .swiper-slide .img {
  position: relative;
  padding-top: 80.95%;
  height: 100%;
}

.portfolio-slider-left .swiper-slide .img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.portfolio .portfolio-slider-right {
  padding-inline-start: 120px;
  position: relative;
  align-content: center;
}

.portfolio-slider-right .pre-title span::after {
  background-color: #b9dae9;
}

.portfolio-slider-right .title span {
  color: var(--color-accent);
}

.portfolio .portfolio-slider-right::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(1px);
  background-image: url("../../assets/images/patterns/portfolio-pattern.png");
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 10;
}

.portfolio-slider-right .swiper-btn-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2em;
}

.portfolio-slider-right .swiper-btn-wrapper>a.button {
  width: 200px;
}

/* Portflolio Section End  */

/* Footer Start  */
.site-footer {
  background-color: var(--color-primary);
  color: var(--color-text-secondary);
  padding-top: 90px;
  position: relative;
}

.site-footer .top-part .footer-wrapper {
  padding-bottom: 60px;
}

.site-footer .logo-wrapper img {
  height: 245px;
  width: 100%;
  object-fit: contain;
  object-position: center;
  max-width: 330px;
}

.site-footer .nav-wrapper>span {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-secondary);
}

.site-footer .navigation-links {
  margin-top: 10px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.site-footer .navigation-links>li {
  position: relative;
  padding-left: 20px;
}

.site-footer .navigation-links>li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--color-accent);
  border-radius: 50%;
}

.site-footer .navigation-links a {
  color: var(--color-text-secondary);
  font-weight: 700;
  transition: all 0.3s ease;
}

.site-footer .navigation-links a:hover {
  color: var(--color-accent);
}

.site-footer .footer-wrapper {
  display: grid;
  grid-template-columns: 2fr 2.5fr 2.5fr 1fr;
  gap: 2rem;
}

.site-footer .divider {
  width: 80%;
  height: 1px;
  background-color: #fff;
  opacity: 0.2;
  margin-inline: auto;
  margin-bottom: 10px;
}

.site-footer .bottom-part .copyright-wrapper {
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
  color: var(--color-text-secondary);
  background-color: var(--color-tertiary);
}

.site-footer::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/patterns/footer-pattern.png");
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
  max-width: 300px;
  pointer-events: none;
}
.site-footer .copyright-wrapper a{
    color: #fff;
    transition: all 0.3s ease;
}
.site-footer .copyright-wrapper a:hover{
    color: var(--color-primary);
}

/* Footer End  */

/* About Page */
.cta.about .cta-bg::after {
  display: none;
}

.cta.about .item-wrapper.bg-primary {
  background: var(--color-tertiary) !important;
}

.portfolio.about {
  padding-top: 0px;
}

.team {
  padding: 80px 0px;
}

.team-member {
  padding: 80px 0px;
  position: relative;
}

.team-member .img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  position: relative;
  z-index: 2;
}

.team-member .img {
  position: relative;
}

.team-member .img:after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: var(--color-accent);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 50%;
}

.team-member .image-bg {
  border: 10px solid var(--color-tertiary);
  border-radius: 50%;
  padding: 10px;
}

.member-name h4 {
  font-size: 22px;
  font-weight: 600;
}

.memeber-description .content-member p {
  font-size: 17px;
  color: #636363;
  margin-top: 5px;
  font-weight: 500;
}

.memeber-description .content p {
  color: #636363;
  margin-top: 20px;
}

/* Contact Page */
.contact-info ul li a {
  font-size: 17px;
  transition: all 0.3s ease;
  font-weight: 500;
  display: inline-flex;
  gap: 15px;
  align-items: center;
}

.contact-info ul li a:hover {
  color: var(--color-quaternary);
}

.contact-info ul li {
  padding-bottom: 15px;
}

/* portfolio */
.portfolio .content p {
  font-size: 20px;
}

.portfolio .col-lg-7 {
  padding: 0px;
}

.portfolio-section {
  padding: 15px 0px 60px;
  position: relative;
}

.our-project .img img {
  height: 100%;
  width: 100%;
  position: relative;
}

.project-name {
  background: var(--color-accent);
  border-radius: 5px;
  position: absolute;
  max-width: 513px;
  z-index: 1;
  padding: 35px;
  width: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blogList .content-wrapper .img {
  border-radius: 20px;
  overflow: hidden;
}

.blogList .contact .content-wrapper .img img {
  object-fit: cover;
  object-position: center;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  width: auto;
  height: auto;
}

.our-project {
  position: relative;
  margin-top: 80px;
}

.project-name h3 {
  font-weight: 700;
  /*   padding-bottom: 24px; */
}

.project-info .content p {
  font-size: 20px;
}

.blogList .project-info .content p {
  margin-bottom: 15px;
}

/* services */
.services-name h6 {
  font-weight: 600;
  line-height: 1.625;
}

.services-name {
  margin-bottom: 15px;
  color: white;
}

.services-name h6 span {
  font-weight: 400;
}

.services-detail .content p {
  font-size: 16px;
  line-height: 1.625;
}

.services-box {
  gap: 90px;
}

.contact.services-section .services-content {
  padding-top: 60px;
  padding-left: 45px;
  padding-right: 0px;
}

.contact.services-section {
  background: white;
  position: relative;
}

.services-name {
  background: var(--color-primary);
  width: 370px;
  padding: 17px 50px 17px 90px;
  min-height: 85px;
  align-content: center;
}

.services {
  position: relative;
}

.services-name {
  position: relative;
}

.services-name:after {
  content: "";
  position: absolute;
  top: -7px;
  bottom: 0;
  left: -50px;
  background: var(--color-accent);
  width: 97px;
  height: 97px;
  border: 7px solid white;
  border-radius: 50%;
}

.services-detail .content {
  padding-left: 25px;
/*   width: 767px; */
  color: #51616e;
}

/* .contact.services-section .wrapper-box {
  padding-inline-start: 50px;
} */

.contact .form-wrapper {
  padding: 70px 46px;
}

/* Blog single */

/* .single-post main {
    padding-top: 250px !important;
	padding-bottom: 100px !important;
} */

.blogSingleData {
  background: #cbe8fa;
  padding: 50px 0;
}

.single-post article .blogHeading {
  font-size: 42px;
  line-height: 1.4;
  margin: 0px 0px 10px 0px;
  padding: 0;
  font-weight: 700;
  color: var(--color-primary);
}

.single-post article .blogMeta {
  font-size: 16px;
  line-height: 1.2;
  color: #666;
  margin-bottom: 30px;
}

.single-post article .blogFeaturedImgBlock {
  margin-bottom: 30px;
  border-radius: 20px;
  overflow: hidden;
}

.single-post article .blogFeaturedImgBlock img {
  width: 100%;
}

.single-post article .entry-content p,
.single-post article .entry-content ul li {
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text-primary);
  margin: 0px 0px 15px;
}

.single-post article .entry-content p:last-child {
  margin: 0px;
}

.content-wrapper {
  position: relative;
}

/* 10/06/2026 Career page */
.career .wrapper-box {
    padding: 0px;
	max-width: 800px;
    margin: auto;
}
/* .career .form-wrapper.cmn-form {
    padding: 50px !important;
} */
.career .pre-title {
    padding-bottom: 10px;
}
.career.contact .form-wrapper .input-wrapper {
    grid-template-columns: repeat(1, 1fr);
    column-gap: 30px;
}

.cmn-form form input[type="file"] {
    background: white;
    color: #757575;
	position: relative;
	padding-inline-start: 140px;
	
}
.cmn-form ::-webkit-file-upload-button{
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-accent);
    border: 0;
    outline: 0;
    padding-inline: 20px;
    color: #fff;
    margin: 0;
    border-radius: 4px 0 0 4px;
}
.cmn-form input:has(+ .wpcf7-not-valid-tip){
    margin-bottom: 0px;
}
.cmn-form input + .wpcf7-not-valid-tip{
    margin-bottom: 15px;
}
body .cmn-form .wpcf7 form.sent .wpcf7-response-output{
	color: #46b450 !important;
	text-align: center;
	border: 0 !important;
	font-size: 18px;
}
body .cmn-form .wpcf7 form.invalid .wpcf7-response-output{
	color: #dc3232 !important;
	text-align: center;
	border: 0 !important;
	font-size: 18px;
}