/* =====================================
    * 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
========================================*/

/*======================================
[ Responsive Table of contents ]

01. 1199px Tablet Landscape layout CSS
|
02. 991px Tablet Portrait layout CSS
|
03. 767px Mobile landscape layout CSS
|
04. 575px Mobile layout CSS


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

@media (min-width: 1200px){
    .container { max-width: 1270px; }
}


/*======================================
 01. 1440px Laptop layout CSS
========================================*/
@media only screen and (max-width: 1360px) {
    .what-we-do-right-img{
        max-width: 500px;
    }
    
}



/*======================================
 01. 1199px Tablet Landscape layout CSS
========================================*/
@media only screen and (max-width: 1199px) {

    .navbar-nav li {
        margin-left: 15px;
    }
    .navbar-nav li a{
        letter-spacing: 0;
    }
    h1 {
        font-size: 60px;
        line-height: 60px;
    }
    .wc-hero-content h1 {
        min-height: 60px;
    }
    .nav-tabs .nav-link{
        padding: 12px 25px;
    }
    .what-we-do-right-img {
        max-width: 400px;
    }
    .what-we-do-box{
        padding: 30px;
    }
    .what-we-do-right-img{
        display: none;
    }
}

/*======================================
 02. 991px Tablet Portrait layout CSS
========================================*/

@media only screen and (max-width: 991px) {
    .header-part{
        background: #fff;
        padding: 0;
    }
    .header-part .text-white {
        color: #000 !important;
    }
    .header-part .light-logo{
        display: none;
    }
    .header-part .dark-logo {
        display: inline-block;
    }
    .header-part .navbar-toggler span {
        background: #000;
    }

    .navbar-toggler{
        width: 30px;
        padding: 0;
        border: 0;
        background: transparent;
    }
    .navbar-toggler:focus{
        outline: none;
        box-shadow: none;
    }
    .navbar-toggler span{
        width: 100%;
        height: 2px;
        background: #fff;
        display: block;
        margin: 5px 0;
        transition: all 0.3s ease;
    }
    .navbar-toggler.active span:nth-of-type(1){
        transform: rotate(45deg);
    }
    .navbar-toggler.active span:nth-of-type(2){
        display: none;
    }
    .navbar-toggler.active span:nth-of-type(3){
        transform: rotate(-45deg);
        margin-top: -7px;
    }
    .header-part.sticky .navbar-toggler span{
        background: #000;
    }
    .navbar-brand a img{
        max-width: 30px;
    }
    .navbar-brand span{
        font-size: 16px;
        letter-spacing: 1px;
    }

    .navbar-collapse{
        background: #fff;
        position: relative;
    }
    .navbar-nav li{
        margin: 0;
    }
    .navbar-nav li a{
        color: #000;
    }
    .navbar-collapse:before{
        position: absolute;
        top: 0;
        left: -500%;
        width: 500%;
        height: 100%;
        background: #fff;
        content: '';
    }

    .pt-100 {
        padding-top: 70px;
    }
    .pb-150{
        padding-bottom: 100px;
    }
    .pb-100{
        padding-bottom: 50px;
    }
    .wc-hero-section{
        padding-top: 80px;
    }
    .nav-tabs li{
        margin-right:10px;
    }
    .nav-tabs .nav-link {
        padding: 12px 15px;
    }
    .list-wrapper ul{
        display: block;
    }
    .list-wrapper ul li{
        width: 100%;
    }
    .wc-our-projects-section .nav .nav-item{
        padding: 8px 15px 5px;
    }
}

/*======================================
 03. 767px Mobile landscape layout CSS
========================================*/

@media only screen and (max-width: 767px) {

    h1 {
        font-size: 40px;
        line-height: 40px;
    }
    .h5, h5 {
        font-size: 1rem;
    }
    .pt-100 {
        padding-top: 80px;
    }
    .pb-150{
        padding-bottom: 50px;
    }
    .pb-100{
        padding-bottom: 30px;
    }
    .h2, h2 {
        font-size: calc(1.2rem + .9vw);
    }
    .h3, h3 {
        font-size: calc(1.1rem + .6vw);
    }
    p {
        font-size: 16px;
        margin: 0 0 20px;
        line-height: 24px;
    }
    .list-wrapper ul li{
        margin-bottom: 5px;
    }
    .partnership-box{
        position: static;
        padding: 20px;
    }
    .partnership-box.left{
        margin-bottom: -30px;
        max-width: 80%;
    }
    .partnership-box.right{
        max-width: 80%;
        margin: -30px 0 0 auto;
    }
    .blog-content h2{
        font-size: 1.25rem!important;
    }
    .nav-tabs .nav-link {
        padding: 10px 12px;
    }
    .drop-down{
        position: relative;
    }
    .drop-down .selected{
        color: #fff;
        padding: 10px 35px 6px 15px;
        text-transform: uppercase;
        width: 100%;
        cursor: pointer;
        font-weight: 400;
        font-size: 16px;
        line-height: 26px;
        transition: all 0.3s ease;
        position: relative;
        margin-bottom: 15px;
        display: block;
    }
    .drop-down .selected:after{
        content: '';
        background: url('../images/arrow-down.svg') no-repeat center center;
        width: 24px;
        height: 100%;
        position: absolute;
        right: 10px;
        top: 0;
    }
    .drop-down .filters-tabs{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        display: block;
        z-index: 1;
        display: none;
    }
    .drop-down .filters-tabs .nav-item{
        margin: 0;
        width: 100%;
        display: block;
        color: #fff;
        max-width: 100%;
    }
    .wc-our-projects-section .nav .nav-item:hover, .wc-our-projects-section .nav .nav-item.current {
        color: #fff;
    }
    .wc-hero-content h1 {
        min-height: 40px;
    }
}

/*======================================
 04. 575px Mobile layout CSS
========================================*/

@media only screen and (max-width: 575px) {
    .wc-hero-sub-title:after{
        width: 100px;
    }
    h1 {
        font-size: 30px;
        line-height: 30px;
    }
    .btn{
        width: 100%;
    }
    .pb-150 {
        padding-bottom: 80px;
    }
    .h2, h2 {
        font-size: calc(1rem + .9vw);
    }
    .wc-hero-content h1 {
        min-height: 30px;
    }
    .about-image-left .image-2{
        position: static;
        max-width: 70%;
        margin: -250px 0 0 auto;
    }
    .about-image-left {
        margin-top: 0px;
    }
    .what-we-do-box .icon{
        margin-bottom: 15px;
    }
    .what-we-do-box {
        padding: 20px;
    }
    .partnership-content{
        margin: 0;
    }
    .quality-construction .swiper-slide {
        max-width: 270px;
    }
    .quality-construction .quality-box:after{
        background: linear-gradient(0deg, rgba(10, 12, 31, 0.2), rgba(10, 12, 31, 0.2));
    }
    .partnership-box.left{
        max-width: 90%;
    }
    .partnership-box.right{
        max-width: 90%;
    }
    .social-link li a{
        width: 40px;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
    }
    .wc-our-projects-section{
        padding-left: 0;
        padding-right: 0;
    }
    .footer-part{
        padding-top: 30px;
    }
}

/*======================================
  End Media CSS
========================================*/