*,

*::before,

*::after {

  -webkit-box-sizing: border-box;

          box-sizing: border-box;

}



:root{

  --Dark-Blue:#29306D;

  --Blue: #3458A4;

  --Sky-Blue: #489DAD;

  --Light-Blue: #98BEC5;

  --White : #FFFFFF;

  --Black : #1D1E1C;

  --Gray : #494E54;



}





@media (prefers-reduced-motion: no-preference) {

  :root {

    scroll-behavior: smooth;

  }

}





@font-face {

    font-family: 'HelveticaNowDisplay';

    src: url('../fonts/HelveticaNowDisplay-Regular.woff2') format('woff2'),

        url('../fonts/HelveticaNowDisplay-Regular.woff') format('woff');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



@font-face {

    font-family: 'HelveticaNowDisplay';

    src: url('../fonts/HelveticaNowDisplay-Bold.woff2') format('woff2'),

        url('../fonts/HelveticaNowDisplay-Bold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

    font-display: swap;

}











body {

  margin: 0;

  background: var(--White);

  -webkit-text-size-adjust: 100%;

  font-size: 20px;

  overflow-x: hidden;

  font-family: 'HelveticaNowDisplay';

  font-weight: normal;

  color: var(--Gray);

  letter-spacing: normal;

}



hr {

  margin: 1rem 0;

  color: inherit;

  background-color: currentColor;

  border: 0;

  opacity: 0.25;

}



hr:not([size]) {

  height: 1px;

}





.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {

  margin-top: 0;

  margin-bottom: 0.5rem;

  font-family: "Barlow Condensed", sans-serif;

  font-weight: normal;

  font-weight: 600;

}





.h1, h1 { 

  font-size: 46px;

}

.h2, h2 {

  font-size: 46px; 

}

.h3, h3 {

  font-size: 30px;

}

.h4, h4 {

  font-size: 20px;

}

.h5, h5 {

  font-size: 18px;

}

.h6, h6 {

  font-size: 16px;

}





a{transition: 0.5s ease all; text-decoration: none; }



p{margin-top: 0; font-size: 20px;  line-height: 1.5;}



.img-fluid{max-width: 100%; height: auto;}



.container{max-width: 1750px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px;}



.btn{display: inline-block; -webkit-appearance:none; -moz-appearance:none; appearance:none; background: transparent; min-width: 180px; border: 1px solid transparent; position: relative; font-family: "Barlow Condensed", sans-serif;  -webkit-transition: 0.5s ease all; -o-transition: 0.5s ease all; transition: 0.5s ease all;  letter-spacing: normal; border-radius: 50px 50px 0px 50px; padding: 16px;    font-size: 20px; line-height: 1; font-weight: 600;  letter-spacing:0px;  text-align: center;  text-transform: uppercase;   text-decoration: none; cursor: pointer; position: relative;}



.btn svg{margin-left:10px;}



.btn-primary{background: var(--Dark-Blue); border-color: var(--Dark-Blue); color:var(--White); }

.btn-primary:hover{background: transparent; color: var(--Dark-Blue);}



.btn-sec{background: var(--White); border-color: var(--White); color:var(--Blue);}

.btn-sec:hover{background: transparent; color: var(--White);}





.btn:focus{outline: none; }



.text-center{text-align: center;}

.text-left{text-align: left;}

.text-right{text-align: right;}





body.open-menu{overflow: hidden;}

.open-menu .header_wrap{z-index: inherit;}

#page{overflow: hidden;}





/* HEADER CSS */

.header_wrap{padding: 30px 0; position: absolute; top: 0; left: 0; z-index: 3; width: 100%;}

.header_row{display: flex; align-items: center; justify-content: space-between;}

.header_item{display: flex;align-items: center; gap: 30px;}

.lang{display: flex; align-items: center;}

.lang a{color: var(--Gray); font-weight: 500; font-size: 20px; line-height: 1; padding: 0 14px; text-transform: uppercase; font-family: "Barlow Condensed", sans-serif;}

.lang a.active{color:var(--Blue);}

.lang a~a{border-left: 1px solid var(--Gray);}

.logo{max-width: 129px;}

.logo a{display: block;}

.logo a img{display: block;}



.header__nav-button { background: transparent;width: 24px;height: 20px; border: none;-webkit-appearance: none;-moz-appearance: none;appearance: none; display: block;   -webkit-transform: rotate(0deg);   -ms-transform: rotate(0deg);   transform: rotate(0deg); }

.header__nav-button:hover, .header__nav-button:focus { outline: none; }

.header__nav-button > span {background:#231F20;display: block;position: absolute; height:2px; width: 100%; left: 0;-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: 0.3s ease-in-out,; background:var(--Black); transition: 0.3s ease-in-out, }

.header__nav-button > span:nth-child(1) { top: 0px; }

.header__nav-button > span:nth-child(2) {top: 9px; }

.header__nav-button > span:nth-child(3) {top: 18px; }

.open-menu .header__nav-button > span:nth-child(1) {top: 8px;-webkit-transform: rotate(135deg);-ms-transform: rotate(135deg);transform: rotate(135deg); }

.open-menu .header__nav-button > span:nth-child(2) {opacity: 0;left: -60px; }

.open-menu .header__nav-button > span:nth-child(3) {top: 8px; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); }



.open-menu .header__nav-button { position: fixed; z-index: 6;top: 15px; right: 15px;}



.overlay-menu {position: fixed;z-index: 5; background: #fff;height: 100vh;  overflow: hidden;top: 0;right:-100%;width: 100%;}

.overlay-menu.open{right: 0;}

.menu_row { display: flex; justify-content: space-between;}

.menu_sidebar {display: flex;flex-direction: column;justify-content: space-between;height: 100vh;padding: 50px 22px 22px;width: 200px; background:var(--Gray);}

.menu_sidebar>div{text-align: center;}

.menu_sidebar a{display: block;}

.menu_sidebar .lang{margin-top: 30px; justify-content: center;}

.menu_sidebar .lang a{color: #fff; font-size: 18px; font-weight: 500;}

.menu_sidebar .lang a.active{color:var(--Light-Blue);}

.menu_footer h4{ font-weight: 700;font-size: 18px; color: #fff; margin-bottom: 12px;}

.menu_footer .social_link{padding: 0; margin: 0; gap: 10px; display: flex; flex-wrap: wrap; justify-content: center;}

.menu_footer .social_link li a{width: 40px; height: 40px; border-radius: 50%; border: 1px solid #fff; display: flex; align-items: center;  justify-content: center;}



.menu_wrap{ display: flex; width: calc(100% - 200px); height: 100vh; overflow-y: auto; padding-bottom: 30px; opacity: 0;transform: translate(-100%, 0); transition: 1s all;}

.open .menu_wrap{opacity: 1; transform: translate(0, 0);}

.menu_wrap .menu{width: 485px; padding: 60px;}
.menu_wrap .search {display:none}
.menu_wrap .search .form-control{border: none; width: 100%; border-bottom: 1px solid var(--Gray); padding: 10px 30px 10px 0;  font-family: "Barlow Condensed", sans-serif;  font-weight: 500; font-size: 18px;color: #494E54;text-transform: uppercase;}

.menu_wrap .search .form-control:focus{outline: none; box-shadow: none;}

.menu_wrap .search{position: relative; margin-bottom: 50px;}

.menu_wrap .btn-search{position: absolute; background: transparent; border: none; padding: 0; position: absolute; right: 0;  top: 50%; transform: translateY(-50%);}

.menu_wrap .menu ul{list-style: none; padding: 0; margin: 0;}

.header_menu li{ font-weight: 400; font-size: 30px; margin-bottom: 25px; text-transform: capitalize; color:var(--Gray); }

.header_menu li>a{color: currentColor; padding-left: 23px; transition: 0.5s ease-in-out; position: relative; font-family: "Barlow Condensed", sans-serif; }

.header_menu li>a::before{content: ""; width: 9px; height: 15px; opacity: 0; background: url(../img/menu-arrow.svg) no-repeat center; background-size:cover; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); }

.header_menu li>a.active, .header_menu li>a:hover{font-weight: 700; }

.header_menu li>a.active::before, .header_menu li>a:hover::before{opacity: 1; left: 0;}





/* BANNER CSS */



.hero_banner .item{padding:530px 0px 215px 0px; position: relative;}

.hero_banner .content h2{font-weight: 600; font-size: 80px; color:var(--White); text-transform: uppercase;  margin-bottom:15px;}

.hero_banner .content h4{font-weight: 600; font-size: 24px; color:var(--White); text-transform: uppercase; margin-bottom:10px;}

.hero_banner .content p{font-size:46px; font-weight: 500; color:var(--White); margin-bottom:0px;} 

.hero_banner .slick-dots{position: absolute; margin: auto; bottom:215px; right:98px; display: flex; justify-content: flex-end; gap:10px;}

.slick-dots{position: relative; bottom: auto; margin: 35px auto 0;}



.shape_img{position: absolute; bottom:-1px; right:-1px;}



.shape_img img{display: block;}



.hero_banner_w{position: relative;}







.hero_banner{position: relative; background:#fff;}



.slick-dots li {

  position: relative;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  border: 2px solid #fff;

  background: transparent;

  transition: 0.3s ease all;

  margin:0px;

}



.slick-dots li::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: 11px;   

  height: 11px;

  border-radius: 50%;

  background: transparent; 

  transform: translate(-50%, -50%);

}



.slick-dots li.slick-active {

  border-color:var(--Sky-Blue); 

}



.slick-dots li.slick-active::after {

  background:var(--Sky-Blue);

}



.slick-dots li button {

  display: none;

}



.hero_banner.slick-slider{margin-bottom:0px;}



.project_row .item{display: block; position: relative; padding-top:58%;}

.project_row .item img{width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; border-radius:40px;}

.project_row .item .project_title{position: absolute; top:35px; left:35px;}

.project_row .item .project_title h2{font-weight: 600; font-size: 40px; color:#fff;margin-bottom:0px;        
        }

.project_row .item .project_details{position: absolute; bottom:0px; width:100%; display: flex; gap:50px; background-color: rgba(72, 157, 173, 0.8); border-radius:0px 0px 40px 40px; padding:35px 40px;}

.project_row .item .project_details p{font-size:18px; color:var(--White); margin-bottom:0px; }

.view_more_btn .btn{display: flex; align-items: center; gap:10px; color:var(--White); font-size:24px; padding:0px;}

.view_more_btn .btn:hover{color:var(--Black);}

.view_more_btn{position: absolute; right:0px; bottom:35px;}

.project_row .item_w{padding:0 15px;}



.project_row{margin-bottom:50px;}



.project_wrap{padding-bottom:50px;}



.slick-progress {

  position: relative;

  width: 100%;

  height: 2px;

  background: #e0e0e0;

  border-radius: 3px;

  overflow: visible;

}



.slick-progress span {

  position: absolute;   

  top: 50%;

  transform: translateY(-50%);

  height: 4px;          

  border-radius: 4px;

  background: var(--Sky-Blue);

  transition: left 0.4s ease, width 0.4s ease;

}



.project_head{text-align: center; padding-bottom:40px;}



.project_head h2 , .project_head h1 {font-weight: 600; font-size: 46px; color:var(--Dark-Blue); text-transform: uppercase;  margin-bottom:10px;}



.project_head p{font-size:28px; color:var(--Gray); margin-bottom:0px; }





.company_row{padding-left: calc((100% - 1750px) / 2); display: flex;}



.company_row .content{width:35%; padding:0px 65px 50px 20px;}



.company_row .company_img{width:65%; display: flex; align-items: flex-end;}

.company_row .company_img img{display: block;}



.company_row .content h3{font-size:30px; color:var(--Blue); font-weight: 600; text-transform:uppercase; margin-bottom:15px;}



.company_row .content h2{font-weight: 600; font-size: 46px; color:var(--Dark-Blue); text-transform: uppercase;  margin-bottom:20px;}



.company_row .content p{color:var(--Gray); font-size:20px; font-weight: 500; margin-bottom:20px; }



.company_wrap{background:rgba(152, 190, 197, 0.2); padding-top:100px; border-radius:0px 100px 0px 0px;}





.media_slide {margin: 0 -15px;}

.media_slide .item{padding: 0 15px;}

.blog_img>a{display: block; position: relative; padding-top: 70%;}

.blog_img>a img{width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; border-radius:10px 10px 0px 0px;}

.blog_info h3{ font-weight: 600; font-size: 30px; color:var(--Black); margin-bottom: 22px;}

.blog_info h3 a{color:var(--Black); text-decoration: none;}

.blog_info .link-arrow{display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; text-transform: uppercase; color:var(--Dark-Blue); font-family: "Barlow Condensed", sans-serif; } 

.blog_info .link-arrow:hover{color:var(--Blue);}

.blog_info .meta{display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #ccc; margin-bottom: 22px;}

.blog_info .meta h5{margin: 0; color:var(--Sky-Blue); font-weight: 700; font-size: 24px; font-family: 'HelveticaNowDisplay';}

.blog_info .meta .date{display: flex; align-items: center; gap: 10px; font-size: 20px; color:var(--Gray);}

.media_slide .small-icon.slick-arrow.slick-prev{top: -110px; transform: none; left: auto ; right: 65px;}

.media_slide .small-icon.slick-arrow.slick-next{top: -110px; transform: none; right: 0;}

.small-icon.slick-arrow.slick-disabled{opacity: 0.5;}

.small-icon.slick-arrow {width: 50px; transition: 0.5s ease all; height: 50px;background: #fff;border-radius: 50%;z-index: 2; border: 1px solid #CCCCCC; color: #494E54;}

.small-icon.slick-arrow:before {display: none;}



.media_wrap{padding:90px 0px;}



.media_head h3{font-size:30px; color:var(--Blue); font-weight: 600; text-transform: uppercase; margin-bottom:15px;}



.media_head h2{font-weight: 600; font-size: 46px; color:var(--Dark-Blue); text-transform: uppercase;  margin-bottom:25px;}



.blog_info{padding:18px 30px 30px; border:2px solid #CCCCCC; border-radius:0px 0px 10px 10px; margin-left:30px; position: relative;}





.blog_info::after{

    content: "";

    position: absolute;

    left:-30px;

    top:-2px;

    width:30px;

    height:30px;

    background-image: url(../img/tringle.svg);

    background-size: contain;

    background-repeat: no-repeat;

}





.footer_wrap{background:var(--Dark-Blue);}

.footer_item_row {

    display: flex;

    border-top: 1px solid rgba(255, 255, 255, 20%);

    padding: 40px 0;

}

.footer_item_row .footer_item:first-child {

    padding-left: 0;

    border: none;

}



.footer_item {

    flex: auto;

    padding: 0 40px;

    border-left: 1px solid rgba(255, 255, 255, 20%);

}

.f-logo a {

    display: block;

}

.f-logo img {

    max-width: 225px;

    width: 100%;

    display: block;

}



.footer_item .media {

    display: flex;

    gap: 15px;

}



.footer_item .media .icon {

    min-width: 40px;

    width: 40px;

}



.footer_item h4 {

    font-size: 20px;

    color: #fff;

    font-weight: 700;

    margin-bottom: 12px;

}



.footer_item .media p {

    font-size: 18px;

    color: #fff;

    margin: 0;

}



.footer_item .media p a {

    color: currentColor;

    text-decoration: none;

}



.footer_item .social_link {

    padding: 0;

    margin: 0;

    list-style: none;

    gap: 10px;

    display: flex;

    flex-wrap: wrap;

}



.footer_item .social_link li a {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 1px solid #fff;

    display: flex;

    align-items: center;

    justify-content: center;

}





.footer_item .media h4 {

    margin-bottom: 5px;

}



.footer_phone{display: flex; gap:20px;}



.footer_phone p{color:var(--Light-Blue) !important;}



.footer_phone p a{display: block; color:var(--White) !important;}





.footer_bottom {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    padding: 30px 0px;

    border-top: 1px solid rgba(255, 255, 255, 20%);

}



.footer_bottom ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

}



.footer_bottom ul li {

    font-size: 18px;

    color: #fff;

}



.footer_bottom ul li a {

    color: currentColor;

}



.footer_bottom p {

    font-size: 18px;

    color: #fff;

    margin: 0;

}

.footer_head{padding-bottom:40px;}



.footer_head{display: flex; justify-content: space-between; gap:20px; align-items: center;}



.footer_head h2{font-weight:bold; font-size: 60px; color:var(--White); text-transform: uppercase;  margin-bottom:0px;}



.footer_wrap{padding-top:60px;}



.hero_banner .item::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 0%,       

    rgba(0, 0, 0, 0) 10%,     

    rgba(0, 0, 0, 0.6) 100%

  );

  z-index: 1;

}



.hero_banner .content {

  position: relative;

  z-index: 2; 

}



.media_head {

  padding-right: 120px;

}





.inner_banner {

    padding: 200px 0;

    text-align: center;

    background: #EDEDEE url(../img/pngtree-architecture-interior-building.png) no-repeat center;

}

.inner_banner h1{font-size: 50px; color:var(--Dark-Blue); text-transform: uppercase; margin: 0;}

.contact_form{padding: 80px 0;}

.contact_form form{max-width: 650px; margin: 0 auto;}

.contact_form .form-group{margin-bottom: 20px;}

.contact_form .form-control{width: 100%; font-family: "Barlow Condensed", sans-serif; height: 45px; padding: 5px 10px; border: 1px solid #ccc; font-size:16px;}

.contact_form textarea.form-control{height: 150px; resize: none;}

.contact_form .form-control:focus{outline: none;}

.contact_form .btn{max-width: 300px; margin: 0 auto; text-transform: uppercase; display: block;}



.portfolio_wrap {

  padding: 50px 0;

}

.portfoilo_row {

  display: flex;

  align-items: center;

  row-gap: 10px;

  flex-wrap: wrap;

  margin:0 -5px;

}



.portfoilo_row .item {

  width: 25%;

  padding: 0 5px;

}



.portfoilo_row .item a {

  display: block;

  position: relative;

  padding-top: 70%;

}



.portfoilo_row .item a img {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    object-fit: cover;

}





p:has(input.btn) {

    margin-bottom: 0;

}



.wpcf7-spinner {

    position: absolute !important;

}





.blog_listing {

  display: flex;

  flex-wrap: wrap;

  row-gap: 40px;

}



.blog_listing .item {

  width: 33.33%;

  padding: 0 15px;

}





.pagination ul li span , .pagination ul li a{

  min-width:50px;

  height:50px;

  background-color:#494e54;

  border-radius:100%;

  display: flex;

  justify-content: center;

  align-items: center;

  cursor: pointer;

}



.pagination ul{padding: 0;

  margin: 0;

  list-style: none;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  gap: 20px;

  justify-content: center;

}



.pagination ul li a:hover{

  background-color:var(--Dark-Blue);

}





.pagination ul li a , .pagination ul li span {

  color:#fff;

  font-size:18px;

  font-weight:500;

}



.pagination ul li span{

  background-color:var(--Dark-Blue);

}











/* 

SINGLE POST CSS */



.single_post_wrap{padding:80px 0px;}

.single_post .post_thumbnail img{display:block; width:100%; height:500px; object-fit:cover;}

.single_post .post_thumbnail{margin-bottom:40px;}



.single_post .post_content p{

  color: #494e54;

  font-weight: 500;

  font-size: 18px;

  margin-bottom: 20px;

}





.single_post{padding-bottom:40px;}





.single_post_wrap .post_navigation{display: flex; justify-content:center; align-items: center; gap:10px;}



.single_post_wrap .post_navigation a span{min-width:100px}



.single_post .post_content p img{max-width:100%; display: block; padding:10px 0px;}



.single_post .post_content p img.aligncenter{margin:0 auto;}



.single_post .post_content p img.alignright{float: right; padding-left:30px;}



.single_post .post_content p img.alignleft{float:left; padding-right:30px;}



.post_content ul , .post_content ol{

    padding:0px 0px 0px 20px;

    margin:0px 0px 18px 0px

}



.post_content::after {

  content: "";

  display: table;

  clear: both;

}



.single_post .post_content li{font-size:18px; margin-bottom:10px;}



.single-project .portfolio_wrap{padding:0px;}



.pagination{padding-top:40px;}



.innner_pages {

    padding: 40px 0;

}



.gtranslate_wrapper{visibility: hidden;}



.menu_wrap .media_wrap .blog_listing{flex-wrap:nowrap;}



.menu_wrap .media_wrap .blog_listing .item{min-width: 420px;

    width: 420px;}





.scroll-x::-webkit-scrollbar { display: none;}

.scroll-x.has-scrollbar::-webkit-scrollbar{display: block;height: 5px; width: 3px;background: #ccc;}

.scroll-x.has-scrollbar::-webkit-scrollbar-thumb:horizontal{background:var(--Dark-Blue);border-radius: 10px;}

.scroll-x.has-scrollbar.active{user-select: none;}

.scroll-x{ overflow-x: scroll;display: flex;overflow: auto; }

img.img-fluid.hahd {
    max-width: 466px;
}

.menu_wrap .media_wrap{width:64.66%;;}