/* =====================================
    * Template Name    : Arch Group | One Page Responsive Bootstrap 5 Template
    * Author           : WebbyCrown
    * File Description : Main css file of the template
    * Version          : 1.0
    * Created          : June 2023
========================================*/

/*======================================
01. General CSS
 |--- Typography  
 |--- Mixins
 |
02. Header CSS
 |
03. Hero Section CSS
 |
04. About Us Section CSS
 |
05. Our Projects Section CSS
 |
06. What We Do Section CSS
 |
07. Partnership Section CSS
 |
08. Quality Construction Section CSS
 |
09. Contact Section CSS
 |
10. Latest news grid Section CSS
 |
11. Footer CSS
 |
12. Color theme switcher CSS
 |
13. Preloaders CSS

====================================== /*

/*=============================================
   01. General CSS
===============================================*/
/*Typography style*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap');

body{
    font-family: 'Mukta', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'Merriweather', serif;
}

p{
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #6e777d;
    margin: 0 0 30px;
}
ul li{
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #6e777d;
}

h1{
    font-size: 100px;
    line-height: 100px;
    letter-spacing: 0.02em;
}


/*Mixins style*/
a{
    text-decoration: none;
}
a:hover{
    outline: none;
}
img{
    max-width: 100%;
    height: auto;
}
.pt-100 {
    padding-top: 100px;
}
.pb-150{
    padding-bottom: 150px;
}
.pb-100{
    padding-bottom: 100px;
}
.pt-50 {
    padding-top: 50px;
}
.pb-50{
    padding-bottom: 50px;
}
.w-md-75{
    max-width: 700px;
    margin: 0 auto;
}
.bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(10, 12, 31, 0.7), rgba(10, 12, 31, 0.7));
    z-index: 1;
}
.bg-dark{
    background: #131725;
}
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.dark-section p{
    color: #fff;
}
.icon{
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}
.btn{
    border-radius: 0;
    padding: 10px 20px;
}
.btn-outline-secondary{
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 16px;
    font-weight: 300;
}
.btn-icon{
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-icon img{
    max-width: 14px;
    margin-left: 7px;
}

.main-wrapper{
    overflow: hidden;
}
.back-top {
    text-align: center;
    position: fixed;
    bottom: 15px;
    height: 35px;
    width: 35px;
    display: none;
    z-index: 10000;
    border-radius: 3px;
    right: 20px;
    transition: all 0.5s;
    color: #fff;
    font-size: 24px;
    line-height: 35px;
}

/*=============================================
    End General CSS
===============================================*/

/*=============================================
   02. Header CSS
===============================================*/
.header-part{
    padding: 10px 0;
    transition: all 0.3s ease;
}
.navbar-brand span{
    text-transform: uppercase;
    font-size: 22px;
}
.navbar-nav li{
    margin-left: 25px;
}
.navbar-nav .nav-link.active, .navbar-nav .show>.nav-link{
    color: #fff;
}
.navbar-nav li a{
    font-weight: 300;
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.1em;
    color: #fff;
    font-family: 'Mukta', sans-serif;
    position: relative;
}
.navbar-expand-lg .navbar-nav .nav-link{
    padding:6px 0;
}

.light-logo{
    display: inline-block;
}
.dark-logo{
    display: none;
}
.header-part.sticky{
    background: #fff;
    box-shadow: 0 1px 8px 3px rgba(0, 0, 0, 0.050980392156862744);
    padding: 0;
}
.header-part.sticky .light-logo{
    display: none;
}
.header-part.sticky .dark-logo{
   display: inline-block;
}
.header-part.sticky .text-white{
    color: #000 !important;
}
.header-part.sticky .navbar-nav li a{
    color: #000;
}
.header-part.sticky .navbar-nav li a:after{
    background: #000;
}


/*=============================================
    End Header CSS
===============================================*/

/*=============================================
   03. Hero Section CSS
===============================================*/
.wc-hero-sub-title{
    display: flex;
    align-items: center;
}
.wc-hero-sub-title:after{
    content: '';
    width: 150px;
    height: 3px;
    margin-left: 15px;
    opacity: 0.8;
}

.wc-hero-content h1{
    min-height: 90px;
}
.wc-hero-content .word {
  position: absolute;
  opacity: 0;
}
.wc-hero-content .letter {
  display: inline-block;
  position: relative;
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}
.wc-hero-content .letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.wc-hero-content .letter.behind {
  transform: rotateX(-90deg);
}
.wc-hero-content .letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wc-scroll-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    z-index: 1;
}
.wc-scroll-btn a {
    width: 100%;
    height: 50px;
    border-radius: 30px;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    animation: blink 1s linear infinite;
}
.wc-scroll-btn a:hover{
    background: #fff;
    color: #000;
}
@keyframes blink{
    0%{transform: translateY(0px);}
    50%{transform: translateY(-10px);}
    100%{transform: translateY(0px);}
}


/*=============================================
    End Hero Section CSS
===============================================*/

/*=============================================
   04. About Us Section CSS
===============================================*/
.about-image-left{
    margin-top: 100px;
}
.about-image-left .image-1{
    max-width: 60%;
}
.about-image-left .image-2 {
    position: absolute;
    right: 0;
    top: -100px;
    animation: jump 8s linear infinite;
    max-width: 60%;
    width: 100%;
}
.about-image-left .image-2 img{
    width: 100%;
}
.nav-tabs{
    border: 0;
}
.nav-tabs li {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 20px;
}
.nav-tabs .nav-link {
    background: transparent;
    font-weight: 500;
    font-size: 16px;
    line-height: 17px;
    border: 1px solid transparent !important;
    padding: 12px 34px;
    border-radius: 0;
}

.list-wrapper ul{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    padding: 0;
}
.list-wrapper ul li{
    width: 50%;
    padding: 0 10px 0 30px;
    margin-bottom: 10px;
    list-style-type: none;
    position: relative;
}
.list-wrapper ul li:before{
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -2px;
    background: #6e777d;
}
/*=============================================
    End About Us Section CSS
===============================================*/

/*=============================================
   05. Our Projects Section CSS
===============================================*/
.wc-our-projects-section{
    padding-left: 15px;
    padding-right: 15px;
}
.wc-our-projects-section .nav .nav-item{
    border: 1px solid transparent;
    padding: 8px 30px 5px;
    text-transform: uppercase;
    max-width: fit-content;
    cursor: pointer;
    transition: all 0.3s ease;
}

.projects-gallery-box{
    position: relative;
    overflow: hidden;
}
.projects-gallery-box .projects-gallery-hover{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    align-content: space-between;
    padding: 25px;
}
.projects-gallery-box .projects-gallery-hover:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, rgba(10, 12, 31, 0.7), rgba(10, 12, 31, 0)); 
    transition: all 0.3s ease;
}
.projects-name a{
    color: #fff;
}
.project-tag{
    border: 1px solid #FFFFFF;
    padding: 7px 20px 3px;
    color: #fff;
    text-transform: uppercase;
    max-width: fit-content;
}
.projects-gallery-img{
    position: relative;
    overflow: hidden;
}
.projects-gallery-img:before{
    content: '';
    padding-bottom: 127%;
    display: block;
}
.projects-gallery-img img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: all 2s ease;
}
.projects-gallery-box:hover .projects-gallery-img img{
    transform: scale(1.2);
}
.projects-gallery-box:hover .projects-gallery-hover:before{
    height: 100%;
}
.drop-down .selected{
    display: none;
}
/*=============================================
    End Our Projects Section CSS
===============================================*/

/*=============================================
   06. What We Do Section CSS
===============================================*/
.wc-what-we-do-section{
    background: url(../images/what-we-do-bg.svg) no-repeat left bottom;
    background-size: contain;
}
.what-we-do-right-img:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(7, 7, 24, 0.3), rgba(7, 7, 24, 0.3));
}
.what-we-do-box{
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 50px;
    transition: all 0.3s ease;
    height: 100%;
}
.what-we-do-box:hover{
    box-shadow: 0 0 5px rgb(201 201 201);
}
.what-we-do-box .icon{
    margin-bottom: 30px;
    color: #fff;
}
.what-we-do-box .icon svg{
    max-width: 30px;
}

/*=============================================
    End What We Do Section CSS
===============================================*/

/*=============================================
   07. Partnership Section CSS
===============================================*/
.partnership-content{
    max-width: 900px;
    margin: 60px auto;
    position: relative;
}
.partnership-box{
    position: absolute;
    background: #161A28;
    box-shadow: 10px 20px 80px rgba(0, 0, 0, 0.25);
    padding: 40px;
    color: #fff;
    max-width: 450px;
}
.partnership-box.left{
    left: -40px;
    top: -40px;
}
.partnership-box.right{
    right: -40px;
    bottom: -40px;
    max-width: 600px;
}
.partnership-box .btn{
    min-width: 200px;
    max-width: fit-content;
    margin-top: 10px;
}
/*=============================================
    End Partnership Section CSS
===============================================*/

/*=============================================
   08. Quality Construction Section CSS
===============================================*/
.quality-construction{
    max-width: 900px;
    margin: 0 auto;
}
.quality-construction .swiper-slide{
    max-width: 370px;
}
.quality-construction .quality-box{
    position: relative;
    overflow: hidden;
}
.quality-construction .quality-box:before{
    content: '';
    padding-top: 140%;
    display: block;
}
.quality-construction .quality-box:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(10, 12, 31, 0.5), rgba(10, 12, 31, 0.7));
    z-index: 1;
}
.quality-construction .quality-box img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.quality-construction .swiper-slide{
    padding: 40px 0;
}
.quality-construction .swiper-slide.swiper-slide-active .quality-box:after{
    opacity: 0.2;
}
.quality-construction .swiper-slide.swiper-slide-active .quality-box{
    box-shadow: 0px 0px 34.7958px 4.70213px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4.99002px);
}
.quality-bg-img{
    height: 70%;
}
.quality-bg-img img{
    width: 100%;
    height: 90%;
}
.quality-bg-img:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: radial-gradient(85.35% 47.19% at 100% 50%, rgba(255, 255, 255, 0.4) 0%, #FFFFFF 100%);
}
/*=============================================
    End Quality Construction Section CSS
===============================================*/

/*=============================================
   09. Contact Section CSS
===============================================*/
.wc-contact-section{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/*=============================================
    End Contact Section CSS
===============================================*/

/*=============================================
   10. Latest news grid Section CSS
===============================================*/
.blog-img a{
    position: relative;
    display: block;
}
.blog-img a:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    display: none;
    transition: all 0.3s ease;
}
.blog-grid:hover .blog-img a:before{
    display: block;
}
.blog-grid .blog-img img{
    width: 100%;
}
.blog-grid .date-blog span{
    opacity: 0.5;
}
.blog-grid .date-blog .date{
    display: flex;
    align-items: center;
}
.blog-grid .date-blog .date:before{
    content: '';
    width: 3px;
    height: 3px;
    border-radius: 100%;
    margin: 0 10px;
    background: #2B2B2B;
}
.blog-grid .blog-content h2 a{
    color: #2B2B2B;
}
.blog-grid .date-blog a:hover{
    color: #2B2B2B !important;
    opacity: 1;
}
/*=============================================
    End Latest news grid Section CSS
===============================================*/

/*=============================================
   11. Footer CSS
===============================================*/
.footer-part{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.footer-part .bg{
    background: linear-gradient(0deg, rgba(10, 12, 31, 0.85), rgba(10, 12, 31, 0.85));
}
.footer-info{
    max-width: 600px;
    margin: 0 auto;
}
.social-link li a {
    border-radius: 50%;
    transition: all 0.5s;
    width: 44px;
    height: 44px;
    display: block;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
    color: #fff;
}
.social-link li a:hover{
    background-color: rgba(241, 241, 241, 1);
    color: #2B2B2B;
}
/*=============================================
    End Footer CSS
===============================================*/


/*=============================================
   12. Color theme switcher CSS
===============================================*/
#color-theme-switcher div h3 {
    font-size: 16px;
    margin: 8px 3px 12px;
    color: #000;
}
#color-theme-switcher {
    background: none repeat scroll 0 0 #ffff;
    left: -189px;
    position: fixed;
    top: 17%;
    width: 189px;
    z-index: 1029;
    border: 1px solid #e9e9e9;
    padding: 8px 10px;
}
#color-theme-switcher div {
    padding: 5px 10px;
}
#color-theme-switcher .bottom {
    background: none repeat scroll 0 0 #fff;
    color: #252525;
    padding: 0;
}
#color-theme-switcher .setting-bottom a.settings {
    background: none repeat scroll 0 0 #2b2424;
    display: block;
    border-radius: 0px 5px 5px 0px;
    height: 41px;
    position: absolute;
    right: -41px;
    top: -1px;
    width: 40px;
    padding: 3px;
    line-height: 34px;
}
#color-theme-switcher .setting-bottom a {
    text-decoration: none
}
#color-theme-switcher .setting-bottom a.settings i {
    margin-left: 5px;
    color: #fff;
    font-size: 24px;
    position: absolute;
}
ul.color-pattern {
    list-style: none outside none;
    margin: 0 0 0;
    overflow: hidden;
    padding: 0;
    border-radius: 0;
}
ul.color-pattern li {
    float: left;
    margin: 2px;
}
ul.color-pattern li a {
    cursor: pointer;
    display: block;
    height: 35px;
    width: 35px;
    margin: 5px;
}
ul.color-pattern .color01 {
    background: #e65f78;
}
ul.color-pattern .color02 {
    background: #37b8df;
}
ul.color-pattern .color03 {
    background: #31b164;
}

ul.color-pattern .color04 {
    background: #5d69f6;
}
ul.color-pattern .color05 {
    background: #87ceeb;
}
ul.color-pattern .color06 {
    background:#f2b31a;
}
/*=============================================
    End Color theme switcher CSS
===============================================*/

/*=============================================
   13. Preloaders CSS
===============================================*/

.loading {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 9999999;
    margin-top: 0;
    top: 0;
    opacity: 1;
}

.loading-center {
    width: 100%;
    height: 100%;
    position: relative;
}

.loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-center-absolute img{
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    max-width: 30px;
}

.object {
    -moz-border-radius: 50% 50% 50% 50%;
    -webkit-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;
    position: absolute;
    border-top: 5px solid #111111;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #111111;
    border-right: 5px solid transparent;
    -webkit-animation: animate 2s infinite;
    animation: animate 2s infinite;
}

.object_one {
    left: 75px;
    top: 75px;
    width: 50px;
    height: 50px;
}

.object_two {
    left: 65px;
    top: 65px;
    width: 70px;
    height: 70px;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.object_three {
    left: 55px;
    top: 55px;
    width: 90px;
    height: 90px;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.object_four {
    left: 45px;
    top: 45px;
    width: 110px;
    height: 110px;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

@-webkit-keyframes animate {
    50% {
        -ms-transform: rotate(360deg) scale(0.8);
        -moz-transform: rotate(360deg) scale(0.8);
        -o-transform: rotate(360deg) scale(0.8);
        -webkit-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
}

@keyframes animate {
    50% {
        -ms-transform: rotate(360deg) scale(0.8);
        -moz-transform: rotate(360deg) scale(0.8);
        -o-transform: rotate(360deg) scale(0.8);
        -webkit-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
}
/*=============================================
   End Preloaders CSS
===============================================*/