:root {

    /* Colors */

    --primary-color: #000000;

    --secondary-color: #c0922c;



    /* Typography */

    --font-family: "Poppins", sans-serif;

    --heading-font: "trajan_proregular", serif;



    --white: #fff;

    --black: #000000;

    

    --light-bg: #F5F5F5;

    --dark-bg: #3E2D0B;

    

    --transparent: transparent;

    --light-border: #E1E1E1;



    --radius: 12px;



    /* Shadows */

    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    --box-shadow-none: 0 2px 5px rgba(0, 0, 0, 0);



    /* font size  */

    --home-h1-size: clamp(4.75rem, 3.333vw + 2.25rem, 6.25rem); /* 100 > 76 */

    --h1-size: clamp(3.75rem, 2.232vw + 2.321rem, 5rem); /* 80 > 68 */

    --h2-size: clamp(2.375rem, 1.667vw + 1.125rem, 3.125rem); /* 50 > 38 */

    --font-70: clamp(3.125rem, 2.778vw + 1.042rem, 4.375rem); /* 70 > 50 */

    --font-35: clamp(1.688rem, 1.111vw + 0.854rem, 2.188rem); /* 35 > 29 */

    --font-30: clamp(1.438rem, 0.972vw + 0.708rem, 1.875rem); /* 30 > 23 */

    --font-26: clamp(1.375rem, 0.556vw + 0.958rem, 1.625rem); /* 26 > 22 */

    --font-25: clamp(1.375rem, 0.556vw + 0.958rem, 1.625rem); /* 25 > 20 */

    --font-20: clamp(1.125rem, 0.278vw + 0.917rem, 1.25rem); /* 20 > 18 */

    --font-18: clamp(1rem, 0.278vw + 0.792rem, 1.125rem); /* 18 > 16 */

}



@font-face {

    font-family: 'trajan_proregular';

    src: url('../fonts/trajanpro-regular-webfont.woff2') format('woff2'),

         url('../fonts/trajanpro-regular-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}



/* CSS Reset */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



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



html{font-size: 16px;}

body {

    color: var(--secondary-color);

    scroll-behavior: smooth;

    font: normal 15px/1.5 var(--font-family);

    color: var(--black);

    min-width: 320px;

}



a { text-decoration: none;

    color: inherit;

}



ul {

    list-style: none;

}



strong{font-weight: 600;}



button, a {

    cursor: pointer;

}



/* Global Typography */

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

    font-weight: normal;

    line-height: 1.2;

    margin-bottom: 20px;

    font-family: var(--heading-font);

}



h1{font-size: var(--h1-size);}

h2{font-size: var(--h2-size);}

h3{font-size: var(--font-30);}

h4{font-size: 20px;}



.text-center{

    text-align: center !important;

}



p { margin-bottom: 20px;}



.mb-0{margin-bottom: 0px !important;}

.mb-1{margin-bottom: 10px !important;}

.mb-2{margin-bottom: 20px !important;}

.mb-3{margin-bottom: 30px !important;}

.mb-4{margin-bottom: 40px !important;}

.mb-5{margin-bottom: 50px !important;}



.pt-4{padding-top: 40px !important;}

.pt-5{padding-top: 50px !important;}



.breadcrumb-wrapper {

    background-color: var(--black);

    padding: 20px 0;

}

.breadcrumb{display: flex; gap: 30px;

    justify-content: center;

    font-family: var(--heading-font);

}

.breadcrumb a{ position: relative; 

    color: var(--white);

}

.breadcrumb a::after {

    content: "/";

    position: absolute;

    right: -20px;

    color: var(--white);

}



.breadcrumb span{

    color: var(--secondary-color);

 }



.btn {

    display: inline-block;

    padding: 13px 40px;

    background: var(--primary-color);    

    border: solid 1px var(--primary-color);

    color: var(--white);

    font-size: var(--font-17);

    transition: all 0.3s ease;

    font-family: var(--heading-font)

}



.btn:hover { 

    background-color: var(--secondary-color);

    border-color: var(--secondary-color);

    color: var(--black);

}



.btn.btn-secondary {

    background-color: var(--white);

    border: solid 1px var(--black);

    color: var(--black);

}

.btn.btn-secondary:hover{

    color: var(--primary-color);

    border-color: var(--primary-color);

}



.tag-line{font-size: 15px;

    color: var(--secondary-color);

    font-family: var(--heading-font);

    margin-bottom: 6px;

    display: block;

}



/* Container */

.container {

    width: 90%;

    max-width: 1600px;

    margin: 0 auto;

    padding: 0 20px; 

}



/* Header Styles */

.header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background: var(--black);

    z-index: 1000;

    transition: all 0.3s ease;

}



.header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 37px 20px;

}



.header .logo {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    top: 15px;

}



.header .nav{display: flex;

    flex: 1;

}



.nav-list {

    display: flex;

    gap: 30px 5%;

    flex: 1;

}



.nav-item {

    position: relative;

}



.nav-item a {

    padding:10px 5px;

    transition: color 0.3s ease;

    color: var(--white);

    transition: all 0.2s ease;

    font-size: var(--font-18);

    font-family: var(--heading-font);

}



.nav-item a:hover {

    color: var(--secondary-color);

}



.nav-item:nth-child(4) {

    margin-left: auto;

}



.menu-item-has-children{

    position: relative;

}

.menu-item-has-children .dropdownIcon{

    background-color: transparent;

    border: 0;

}



.menu-item-has-children .sub-menu{

    position: absolute;

    left: 0;

    top: 100%;

    width: 240px;

    background: var(--black);

    padding: 20px;

    display: none;

}

@media (min-width: 1025px) {

    .menu-item-has-children:hover .sub-menu{

        display: block;

    }

}

.menu-item-has-children .sub-menu li{

    padding: 6px 0;

}



/* Hamburger Menu */

.hamburger {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: none;

    border: none;

    padding:10px;

}



.hamburger span {

    width: 25px;

    height: 3px;

    background: var(--secondary-color);

    transition: all 0.3s ease;

}



.hamburger.active span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}



.hamburger.active span:nth-child(2) {

    opacity: 0;

}



.hamburger.active span:nth-child(3) {

    transform: rotate(-45deg) translate(7px, -7px);

}

/* header end  */



.pageWrapper{

}



/* Home Banner  */



.home-banner{

    min-height: 100vh;

    display: flex;

    background-size: cover;

    background-position: center center;

}



.home-banner .container{

    min-height: 100%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}



.banner-content{

    text-align: center;

}



.home-banner .banner-content h1{

    font-size: var(--home-h1-size);

    max-width: 1000px;

    margin-bottom: 30px;

}



.home-banner .tag-line{

    color: var(--black);

}



/* OUR STORY */



.ourStory-section{

    padding: 90px 0 200px;

}



.ourStory-section .container{

    display: flex;

    gap: 40px 5%;

    position: relative;

}



.ourStory-section .container::before{

    content: url('../images/BG.jpg');

    position: absolute;

    display: block;

    width: 919px;

    max-width: 70%;

    height: 500px;

    z-index: 0;

    top: 60%;

    right: 12%;

}



.ourStory-section .container > *{

    position: relative;

}



.ourStory-section .section-left{

    width: 42%;

}



.ourStory-section .section-right{

    flex: 1;

    padding-right: 8%;

}



.imgs-grid{display: grid;

    grid-template-columns: 1fr 1fr;

    grid-auto-rows: 1fr;

    gap: 20px; 

}



.imgs-grid .img:nth-child(1) {

    grid-row: span 2;

}



.imgs-grid .img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* wallDesigns section */



.wallDesigns-section{

    position: relative;

    padding: 70px 0;

}



.wallDesigns-section .section-head{

    margin-bottom: 30px;

}



.wallDesigns-section h2{

    max-width: 700px;

    margin: 0;

}



.brandSlider-wrapper{

    position: relative;

}



.brandSlider .slider-item{

    padding: 0 10px;

}



.brandItem-img{

    position: relative;

    cursor: pointer;

    display: block;

    overflow: hidden;

    height: 100%;

}



.brandItem-img img{

    display: block;

    width: 100%;

}



.brandItem-img strong{

    position: absolute;

    left: 0;

    bottom: 0;

    padding: 25px ;

    width: 100%;

    color: var(--white);

    font-size: var(--font-30);

    font-family: var(--heading-font);

    font-weight: normal;

    margin: 0;

    height: 100%;

    background: transparent linear-gradient(180deg, #FFFFFF00 0%, #000000 100%) 0% 0% no-repeat padding-box;

    display: flex;

    align-items: end;

    transition: color 0.2s ease;

}



.brandItem-img strong::after{

    content: url(../images/arrow-topRight.svg);

    position: absolute;

    right: 28px;

    bottom: -50px;

    transition: bottom 0.2s ease;

}



.brandItem-img:hover strong{

    color: var(--secondary-color);

}



.brandItem-img:hover strong::after{

    bottom: 22px;

}



/* custom arrows  */



.custom-arrows{

    position: absolute;

    bottom: calc(100% + 40px);

    right: 0;

    display: flex;

    gap: 10px;

}



.custom-arrows button{

    background: none;

    border: none;

}



.custom-arrows button svg{width: 60px;}



.custom-arrows button svg g,

.custom-arrows button svg path{

    transition: all 0.2s ease;

}



.custom-arrows button:hover svg g{

    stroke: var(--secondary-color);

    fill: var(--secondary-color);

}



.custom-arrows button:hover svg path{

    fill: var(--white);

}



/* Salesagency & Projects */



.project-section{

    padding: 0 0 140px 0;

}



.project-section .section-head{

    margin-bottom: 50px;

}



.project-section .section-content{

    position: relative;

    background-color: var(--black);

}



.project-section .section-content *{

    color: var(--white);

}



.project-section .section-content .container{

    display: flex;

    gap: 40px 5%;

    padding: 70px 20px;

}



.project-section .section-content .section-left{

    display: flex;

    width: 42%;

}



.project-section .section-left img{

    height: calc(100% + 140px);

    object-fit: cover;

    width: 100%;

    display: block;

}



.project-section .section-content .section-right{

    flex: 1;

}



.project-section h3{

    font-size: var(--font-30);

    margin-bottom: 30px;

}



.project-section p{

    font-size: var(--font-18);

    max-width: 600px;

    margin-bottom: 30px;

}



.project-section h4 {

    font-size: var(--font-20);

    color: var(--secondary-color) !important;

    display: inline-flex;

    align-items: center;

    gap: 4px;

}



.project-section h4::after{

    content: "";

    width: 70px;

    height: 5px;

    border: solid 1px var(--secondary-color);

    border-width: 1px 0 ;

}



.project-section .list-darkBG {

    max-width: 400px;

    margin: 0;

}



.list-darkBG li{

    padding: 14px 0;

    border-bottom: dashed 1px #707070;

    display: flex;

    gap: 14px;

}

.list-darkBG li:last-child{

    border: none;

}



.list-darkBG li::before{

    content: url('../images/listStyle-brown.svg');

    width: 18px;

}



/* WHY CHOOSE US */



.light-bg{

    background-color: var(--light-bg);

}



.whyUs-section{

    padding: 70px 0 0;

}



.whyUs-section .container{

    display: flex;

    gap: 40px 5%;

}



.whyUs-section .container .section-left{

    width: 50%;

    padding-top: 70px;

}



.whyUs-section .container .section-right{

    flex: 1;

}



.whyUs-section .section-head{

    margin-bottom: 60px;

}



.whyUs-section .pointslist{

    display: flex;

    gap: 40px;

    flex-direction: column;

}



.whyUs-section .pointslist li{

    border: solid 1px var(--secondary-color);

    padding: 20px;

    display: flex;

    gap: 20px;

}



.whyUs-section .pointslist .icon-img{

    width: 70px;

}



.whyUs-section .pointslist .icon-img{

    display: block;    

}



.whyUs-section .pointslist .pointInfo{

    flex: 1;

}



.whyUs-section .pointslist h3{

    font-size: var(--font-26);

    margin-bottom: 8px;

}



.whyUs-section .pointslist p{

    font-size: 13px;

    margin: 0;

}



.whyUs-section .container .section-right img{

    display: block;

}



/* NEWS */



.news-section{

    padding: 70px 0;

}



.news-section .section-head{

    margin-bottom: 50px;

}



.news-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-auto-rows: 1fr;

    gap: 20px;

}



.news-grid .news-item:nth-child(1) {

    grid-row: span 2;

}



.news-grid .news-item{position: relative;}



.news-grid .news-item .item-info{

    position: absolute;

    left: 0;

    bottom: 0;

    padding: 30px ;

    width: 100%;

    color: var(--white);

    font-size: var(--font-30);

    font-family: var(--heading-font);

    font-weight: normal;

    margin: 0;

    height: 100%;

    background: transparent linear-gradient(180deg, #FFFFFF00 0%, #000000 100%) 0% 0% no-repeat padding-box;

    display: flex;

    transition: color 0.2s ease;

    flex-direction: column;

    justify-content: flex-end;

}



.news-item .date{

    display: flex;

    gap: 8px;

    font-size: 13px;

    font-family: var(--font-family);

    margin-bottom: 10px;

}



.news-item .date .icon-date{

    width: 13px;

}



.news-item h3{

    margin: 0;

}



/* TRANSFORM section */



.transform-section{

    margin-top: 90px;

    margin-bottom: 90px;

}



.transform-section .container{

    position: relative;

    background-size: cover ;

    display: flex;

    gap: 40px 5%;

    align-items: center;

    padding: 90px 90px;

}



.transform-section .container::before{

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    z-index: 0;

    background-color: rgba(0, 0, 0, 0.52);

}



.transform-section .container > div{

    position: relative;

    z-index: 2;

}



.transform-section h2{

    font-size: var(--h1-size);

    color: white;

}



.transform-section .section-head{

    width: 47%;

}



.transform-section .section-content{

    flex: 1;

    margin-top: -180px;

}



footer.footer{

    background-color: var(--black);

    padding: 30px 0;

}



footer.footer *{

    color: var(--white);

}



footer.footer a{

    transition: all 0.2s ease;

}



footer.footer a:hover{

    color: var(--secondary-color);

}



.footer .footer-top .container{

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 20px;

    padding-bottom: 40px;

    border-bottom: solid 1px var(--secondary-color);

    margin-bottom: 45px;

    flex-wrap: wrap;

    gap: 40px;

}



.footer .footer-top .footer-nav{

    display: flex;

    gap: 20px 50px;

    flex-wrap: wrap;

}



.footer .footer-top .footer-nav a{

    font-family: var(--heading-font);

}



.footer .footer-main{

    margin-bottom: 45px;

}



.footer .footer-main .container{

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 40px;

}



.footer .footer-main .footer-col{

    text-align: center;

}



.footer .footer-main .footer-col:first-child{

    text-align: left;

}



.footer .footer-main .footer-col:last-child{

    text-align: right;

}



.footer .footer-main h4{

    font-size: 20px;

    color: var(--secondary-color);

}



.footer .footer-main .content > *{

    font-size: var(--font-30);

}



.footer .footer-main .contact-info .content{

    max-width: 400px;

}



.footer .footer-bottom .container{

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 30px;

}



.social-links{

    display: flex;

    gap: 12px;

}



.social-links a{

    display: block;

    border-radius: 30px;

    background-color: transparent;

    overflow: hidden;

    transition: all 0.2s ease;

}



.social-links a:hover{

    background-color: var(--secondary-color);

}





.social-links a img{

    display: block;

}



/* About Us Page  */



/* inner banner  */



.inner-banner {

    min-height: 100vh;

    display: flex;

    background-size: cover;

    background-position: center center;

}



.inner-banner .container {

    min-height: 100%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}

.inner-banner h1{

    margin-bottom: 0;

}

.inner-banner .bottom-line{

    font-family: var(--heading-font);

    font-size: 15px;

    letter-spacing: 2px;

}



/* aboutUs Info section */



.aboutUsInfo-section{

    padding: 70px 0;

}



.aboutUsInfo-section .top-container{

    display: flex;

    gap: 40px 7%;

    margin-bottom: 70px;

}

.aboutUsInfo-section .top-container .section-left{

    flex: 1;

}



.aboutUsInfo-section .top-container p{

    font-size: var(--font-25);

    margin-bottom: 50px;

}



.year-wrraper{

    display: flex;

    align-items: center;

    gap: 30px;

}



.year-wrraper::before{

    content: "";

    height: 1px;

    flex: 1;

    background-color: #707070;

}



.year-wrraper .year{

    display: flex;

    align-items: flex-end;

    gap: 15px;

}



.year-wrraper .year span{

    margin-bottom: 12px;

    font-family: var(--heading-font);

    font-size: var(--font-30);

}



.aboutUsInfo-section .top-container .section-right{

    width: 34%;

}





.aboutUsInfo-section .bottom-container{

    display: flex;

    gap: 40px 5%;

}



.aboutUsInfo-section .bottom-container .section-left{

    width: 40%;

}



.aboutUsInfo-section .bottom-container .section-right{

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.aboutUsInfo-section .bottom-container p{

    font-size: var(--font-18);

}



.imageWrapper.bordered-img{

    position: relative;

    padding-left: 25px;

    padding-bottom: 25px;

}

.imageWrapper.bordered-img img{

    position: relative;

}



.imageWrapper.bordered-img::before{

    content: "";

    width: 200px;

    height: 200px;

    background-color: var(--secondary-color);

    position: absolute;

    left: 0;

    bottom: 0;

}



/* How We Work  */



.howWeWork-section{

    padding: 70px 0 30px;

    background-color: var(--black);

    margin-bottom: 180px;

}



.howWeWork-section .section-head{

    margin-bottom: 50px;

}



.howWeWork-section .section-head h2{

    color: var(--white);

    max-width: 900px;

}



.howWeWork-section .howWeWork-grid{display: flex;

    gap: 20px;

    flex-wrap: wrap;

    margin-bottom: 40px;

}



.howWeWork-section .howWeWork-grid > div{

    flex: 1;

    min-width: 230px;

}



.howWeWork-section .howWeWork-item{

    background: url(../images/howWeWork-BG.jpg);

    background-size: cover;

    padding: 20px;

    text-align: center;

}



.howWeWork-item .item-img{

    margin-bottom: 40px;

}



.howWeWork-item h3{

    font-family: var(--font-family);

    font-size: var(--font-20);

    font-weight: 600;

    margin-bottom: 14px;

}



.howWeWork-item p{

    font-size: 15px;

}



.howWeWork-section .bottom-content{

    color: var(--white);

    padding: 20px;

    text-align: center;

    font-family: var(--heading-font);

    font-size: 15px;

}



.howWeWork-section .bottom-content a{

    font-size: var(--font-20);

    font-weight: 600;

    color: var(--secondary-color);

    margin-left: 15px;

    font-family: var(--font-family);

    text-decoration: underline;

}



.howWeWork-section .bottom-content a:hover{

    text-decoration: none;

}



/* testimonials */



.testimonials-section{

    background-color: #191919;

}



.testimonials-section > .container{

    display: flex;

}



.testimonials-section .section-left{

    width: 50%;

}



.testimonials-section .section-left img{

    max-width: none;

    float: right;

}



.testimonials-section .section-right{

    width: 50%;

    padding: 70px 40px 50px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.testimonials-section .section-right h2{

    color: var(--white);

}



.testimonials-section .slick-list {

    margin-bottom: 30px;

}

.testimonials-section .item-head{

    display: flex;

    gap: 20px;

    margin-bottom: 30px;

    align-items: center;

}

.testimonials-section .quote-icon{}

.testimonials-section .author-info{

    display: flex;

    flex-direction: column;

}



.testimonials-section .author-info strong{

    color: var(--white);

    font-size: var(--font-20);

    font-family: var(--heading-font);

}



.testimonials-section .author-info span{

    font-size: 15px;

    font-family: var(--heading-font);

    color: #787775;

}



.testimonials-section .client-quote {

    color: #9F9F9F;

}



.testimonials-section .slick-dots{

    display: flex;

    gap: 6px;

}



.testimonials-section .slick-dots li button{

    font-size: 0;

    height: 13px;

    width: 13px;

    border-radius: 50%;

    border: 1px solid transparent;

    background-color: transparent;

    position: relative;

    display: block;

    margin: 0;

}



.testimonials-section .slick-dots li button::before{

    content: "";

    width: 7px;

    height: 7px;

    position: absolute;

    border-radius: 50%;

    left: 50%;

    top: 50%;

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

    background-color: #575757;

}



.testimonials-section .slick-dots li.slick-active button{

    border-color: var(--secondary-color);

}



.testimonials-section .slick-dots li.slick-active button::before{

    background-color: var(--secondary-color);

}



/* Brand page  */



.brandGrid-section{

    padding: 70px 0;

}



.brandGrid{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 40px;

}



.projectBrands-section{

    padding: 70px 0;

    margin-bottom: 70px;

}



.projectBrands-section .section-head{

    margin-bottom: 40px;

}



.projectBrands{

    display: flex;

    justify-content: center;

    gap: 30px;

}



.projectBrands .brand-item{

    aspect-ratio: 1 / 1;

    width: 100%;

    max-width: 300px;

    background-color: var(--black);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

}



/* Brand Details page  */

.brandHistory-section{

    padding-bottom: 60px;

}

.brandHistory-section .top-section{

    padding: 70px 0;

}

.brandHistory-section .top-section .container{

    display: flex;

    gap: 40px 7%;

}



.brandHistory-section .top-section .left-section{

    width: 47%;

}



.brandHistory-section .top-section .right-section{

    flex: 1;

}



.brandHistory-section .bottom-section{

    padding: 70px 0 0;

    background-color: var(--black);

    margin-bottom: 100px;

}

.brandHistory-section .bottom-section .container{

    display: flex;

    gap: 40px 6%;

    color: var(--white);

}



.brandHistory-section .bottom-section .left-section{

    width: 42%;

}



.brandHistory-section .bottom-section .left-section img{

    position: relative;

    top: 100px;

}



.brandHistory-section .bottom-section .right-section{

    flex: 1;

}



/* center Aligned section */



.centerAligned-section{

    text-align: center;

    padding: 70px 0;

}



.centerAligned-section p{

    color: var(--secondary-color);

}





/* Designers section team*/



.designers-section{

    padding: 70px 0;

    background-color: var(--light-bg);

}



.designers-section .section-head{

    margin-bottom: 60px;

}



.teamSlider-wrapper{position: relative;}



.teamSlider .slick-slide{

    padding: 0 15px;

}



.teamSlider .member-image{margin-bottom: 20px;

    border: solid 1px #B9B9B9;

}

.teamSlider .member-image img{

    display: block;

}



.teamSlider .member-name{

    display: block;

    text-align: center;

    font-family: var(--heading-font);

    font-weight: normal;

    font-size: var(--font-20);

}





/* our Gallery */



.ourGallery-section{

    padding: 70px 0;

}



.ourGallery-section .section-head{

    margin-bottom: 40px;

    text-align: center;

}



.gallery-grid{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(calc(50% - 10px), 1fr));

    gap: 20px;

    margin-bottom: 60px;

}

.gallery-grid .gallery-item img{
    aspect-ratio: 285/301;
    width: 100%;
    object-fit: cover;
    display: block;
    object-position: center center;
}

.loading-more{

    width: 64px;

    display: block;

    margin: auto;

}





/* Blog Details page  */



.detailPage-section{padding: 70px 0;}



.detailPage-section .container{

    display: flex;

    gap: 30px;

}

.detailPage-section .main-content{flex: 1;}



.newsList-item{

    margin-bottom: 40px;

}



.featured-image {

    margin-bottom: 20px;

}



.featured-image img{

    width: 100%;

    display: block;

}



.blog-shortInfo{

    display: flex;

    gap: 12px;

    margin-bottom: 20px;

}



.blog-shortInfo > div{

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 13px;

    line-height: 1;

}



.blog-shortInfo > div > i > img{

    height: 16px;

    display: block;

    width: auto;

}



.detailPage-section h2{

    font-size: var(--font-30);

}





.two-cols{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax( 300px, 1fr ));

    gap: 30px;

    margin-bottom: 20px;

}



.default-list li{

    padding: 5px 0 5px 42px;

    background: url(../images/right-bordered-arrow.svg) left top no-repeat;

    margin-bottom: 10px;

}



.brownList {margin-bottom: 20px;}

.brownList li{

    background: url(../images/listing.svg) left 3px no-repeat;

    color: #AB8965;

    padding: 0 0 0 24px;

}



.blog-navigation{

    padding: 20px 0;

    margin-bottom: 30px;

    display: flex;

    justify-content: space-between;

    gap: 16%;

    border-top: solid 1px #707070;

    border-bottom: solid 1px #707070;

}



.blog-navigation p {margin: 0;}

.blog-navigation p a{color: #6D6D6D;}



.blog-navigation .next-blog{

    text-align: right;

}



.blog-navigation h4{

    font-family: var(--font-family);

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 12px;

}



.blog-navigation h4 a{

    display: inline-flex;

    gap: 8px;

    align-items: center;

}





small {

    color: #6D6D6D;

}



.form-row{

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

    margin-bottom: 20px;

}



.form-row .form-col{

    min-width: 250px;

    flex: 1;

}



.default-input{

    background-color: var(--white);

    border: solid 1px #707070;

    padding: 20px;

    display: block;

    width: 100%;

    resize: none;

    font-family: var(--font-family);

    font-size: 15px;

}



textarea.default-input{

    height: 120px;

}



button.btn{

    padding: 14px 20px;

}



.detailPage-section .right-sidebar{

    width: 28%;

}



.aside-box{

    background-color:var(--black);

    margin-bottom: 30px;

    padding: 30px 24px;

}



.searchbox{

    background-color: var(--white);

    display: flex;

}



.searchbox input{

    background-color: transparent;

    border: transparent;

    flex: 1;

    padding: 12px 20px;

    font-family: var(--font-family);

    font-size: 15px;

    min-width: 100px;

}



.searchbox input:focus-visible{

    outline: none;

}



.searchbox button{

    background-color: transparent;

    border: transparent;

    padding: 12px 16px;

}



.aside-box h2{

    color: var(--white);

}



.blogItem {display: flex; gap: 15px;

    padding: 20px 0;

    border-bottom: dashed 1px #B9B9B9;

    align-items: center;

}



.blogItem:last-child{

    border: 0;

}



.blogItem .item-image{min-width: 80px;

    width: 30%;

}

.blogItem .item-image img{display: block; width: 100%;}



.blogItem .item-info{

    flex: 1;

}



.blogItem h3{

    font-size: 15px;

    font-family: var(--heading-font);

    margin: 0;

    margin-bottom: 8px;

    color: var(--white);

}



.blogItem .blog-shortInfo{margin-bottom: 0;}

.blogItem .blog-shortInfo > div span{color: #989898 !important;}



.pagination {

    padding: 20px 0;

    display: flex;

    justify-content: center;

}

.pagination > ul{

    display: flex;

    justify-content: center;

    border: solid 1px rgba(0, 0, 0, 0.2);

    border-radius: 6px;

    padding: 8px ;

}



.pagination li{

    padding-right: 10px;

    margin-right: 10px;

    border-right: solid 1px rgba(0, 0, 0, 0.2);

}



.pagination-nav{

    font-family: var(--heading-font);

}



.pagination li:last-child{

    border: none;

    margin-right: 0;

}



.pagination a{

    display: block;

    padding: 10px;

}



.pagination li a.disabled{

    color: var(--secondary-color);

    cursor: default;

    pointer-events: none;

}



/* Contact Page  */



.contact-heading{

    padding: 70px 0;

}



.contact-heading .container{

    display: flex;

    gap: 40px;

    justify-content: space-between;

    align-items: center;

}



.contact-heading .right-section{

    max-width: 355px;

}



.contact-heading h2{

    font-size: clamp(5.625rem, 6.696vw + 1.339rem, 9.375rem);

    font-weight: normal;

}



/* contact details section */



.contactDetails-section{

    padding: 0 0 60px;

}

.contactDetails-section .container{

    display: flex;

    box-shadow: 0px 3px 53px #00000029;

    padding: 0;

}

.contactDetails-section .left-section{

    flex: 1;

    padding: 60px 40px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.contactDetails-section .left-section h2{

    font-size: var(--font-25);

    margin-bottom: 40px;

}



.contactDetails-section .right-section *{

    color: var(--white);

}



.contactDetails-section .right-section h2{

    font-size: var(--font-35);

}



.contactDetails-section .right-section h3{

    font-size: var(--font-30);

    line-height: 1.2;

    margin: 0;

}



.whiteBG-form .default-input{

    border-width: 0 0 1px 0;

    padding: 10px 0;

}

.whiteBG-form .default-input:focus-visible{

    outline: none;

}



.contactDetails-section .right-section{width: 40%;

    padding: 20px;

    background-color: var(--black);

}



.section-container{

    border: solid 1px var(--white);

}



.contactDetails-section .right-section .section-head {

    padding: 30px 30px 40px;

}



.contactDetails-section .right-section .section-head strong{

    color: var(--secondary-color);

    font-weight: normal;

    font-family: var(--heading-font);

    font-size: var(--font-25);

}



.contactDetails-section .contact-points .point{

    padding: 35px 30px;

    border: solid 1px var(--white);

    display: flex;

    gap: 20px;

    align-items: center;

}



.contactDetails-section .contact-points .point-icon{

    width: 65px;

    height: 65px;

    background-color: var(--secondary-color);

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    aspect-ratio: 1/1;

}



.contactDetails-section .contact-points .point-info > div{

    font-size: var(--font-20);

}

.contactDetails-section .contact-points .point-info > div p{

    max-width: 300px;

    margin: 0;

}



.contactDetails-section .contact-points .point-info a:hover{

    text-decoration: underline;

}



/* represent section  */



.represent-section{

    background-size: cover;

    padding: 70px 0;

    min-height: 600px;

    display: flex;

    align-items: center;

}



.represent-section .container{

    max-width: 75%;

}



.represent-section .container h2{

    max-width: 671px;

    font-size: var(--font-70);

}



/* map section  */

.map-section{padding: 70px 0;}

.map-section .section-head{

    margin-bottom: 40px;

}

.map-container iframe{

    width: 100% !important;

}



@media (max-width: 1199.9px) {    

    .container { 

    max-width: 100% !important;

    width: 100% !important;

    padding-left: 20px; 

    padding-right: 20px;

    }



    .ourStory-section{

    }

    .ourStory-section .container::before{

        transform: scale(0.83); 

    }



    .brandGrid {   

        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    }



}



@media (max-width: 1024.9px) {

    

    /* Mobile nav  */

    .header .container {padding: 8px 20px;}

    .header-links{gap: 12px;}

    

    .header .logo {

        max-width: 100px;

        position: static;

        transform: none;

    }



    .header .nav {

        display: none;

        position: fixed;

        top: 65px;

        left: 0;

        width: 100%;

        height: calc(100vh - 65px);

        background: var(--black);

        z-index: 999;

        transform: translateX(-100%);

        transition: transform 0.3s ease;

        overflow: auto;

        padding: 20px;

    }



    .nav-item:nth-child(4) {

        margin-left: 0;

    }



    .menu-item-has-children .sub-menu{

        position: static;

    }



    .menu-item-has-children .dropdownIcon{

        position: absolute; 

        top: 6px;

        right: 20px;

        padding: 10px;

    }



    .header .container .btn{

        margin-left: auto;

        margin-right: 10px;

    }



    body.active{

        overflow: hidden;

    }

    .header .nav.active {

        display: flex;

        transform: translateX(0);

    }



    .header .nav .nav-list{

        flex-direction: column;        

    }



    .nav-list li a{display: block;

    }



    .nav-item .sub-menu {

        position: static;

        display: block;

        width: 100%;

        background-color: rgba(255, 255, 255, 0.1);

    }



    .nav-item .sub-menu li{

        padding: 0;

    }

    .nav-item .sub-menu li a{ 

        font-size: 14px;

     }



     .menu-item-has-children .dropdownIcon{

        right: 0;

     }



     .menu-item-has-children .dropdownIcon:hover,

     .menu-item-has-children .dropdownIcon:focus{

        background-color: var(--secondary-color);

     }



    .nav-item:nth-child(3) {

        margin-left: 0;

    }



    .hamburger {

        display: flex;

        position: relative;

        z-index: 1000;

    }



    .ourStory-section{

        padding-bottom: 50px;

    }

    .ourStory-section .container::before{

        display: none;

    }



    .brandGrid {   

        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    }



    .designers-section .section-head{

        padding-right: 160px;

    }



.contactDetails-section .contact-points .point-icon{

    width: 50px;

    height: 50px;

    padding: 15px;

}



.contactDetails-section .contact-points .point{

    padding: 35px 15px;

}



.contactDetails-section .left-section{

    padding: 40px 30px;

}



.contactDetails-section .right-section{

    width: 46%;

}



.contactDetails-section .right-section h3{

    font-size: 21px;

}



.contactDetails-section .contact-points .point-info > div{

    font-size: 15px;

}



.represent-section .container h2{

    text-align: center;

    max-width: 80%;

    margin: auto;

}



}



@media (max-width: 768.9px) {



    .detailPage-section .container,

    .ourStory-section .container,

    .project-section .section-content .container,

    .whyUs-section .container,

    .aboutUsInfo-section .top-container ,

    .aboutUsInfo-section .bottom-container,

    .testimonials-section > .container,

    .brandHistory-section .top-section .container,

    .brandHistory-section .bottom-section .container,

    .contactDetails-section .container,

    .contact-heading .container

    {

        flex-direction: column !important;

    }



    .detailPage-section .container > *,

    .ourStory-section .container > *,

    .project-section .section-content .container > *,

    .whyUs-section .container > *,

    .transform-section .section-head,

    .aboutUsInfo-section .top-container > *,

    .aboutUsInfo-section .bottom-container > *,

    .testimonials-section > .container > *,

    .brandHistory-section .top-section .container > *,

    .brandHistory-section .bottom-section .container > *,

    .contactDetails-section .container > *,

    .contact-heading .container > *

    {

        width: 100% !important;

    }





.aboutUsInfo-section .top-container .section-left,

.whyUs-section .container .section-left,

.brandHistory-section .top-section .left-section{

    order: 2;

}



.brandHistory-section .bottom-section .left-section img{

    top: 0;

}





.designers-section .section-head{

    padding-right: 0;

}



.brandHistory-section{

    padding: 0;

}



.brandHistory-section .bottom-section{

    margin: 0;

    padding-bottom: 50px;

}



    .brandGrid {   

        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

        gap: 20px;

    }



.howWeWork-section{

    margin-bottom: 70px;

}

.testimonials-section .section-left{

    padding-top: 60px;

}

.testimonials-section .section-left img{

    max-width: 100%;

    float: none;

}

.whyUs-section .container .section-right img{

    height: 340px;

    width: auto;

}





.transform-section{margin-top: 0;}



.footer .footer-main .footer-col{

    min-width: 250px;

    text-align: center !important;

    flex: 1;

}



.footer .footer-main .content > *{

    font-size: 16px !important;

}



.footer .footer-main .contact-info .content{

    max-width: 80%;

    margin: auto;

}



.whyUs-section .container .section-left{

    padding-top: 20px;

}



.transform-section .container{

    padding-left: 40px;

    padding-right: 40px;

}



.news-grid{display: flex;

flex-direction: column;}



.wallDesigns-section h2{

    padding-right: 150px;

}



.project-section .section-left img {

    height: auto;

}

.gallery-grid{

    grid-template-columns: repeat(auto-fit, minmax(calc(250px - 10px), 1fr));

}



.contact-heading h2,

.contact-heading p{

    text-align: center;

}



.home-banner,

.inner-banner{

    min-height: 500px;

    padding: 150px 0 60px ;

}



.home-banner .banner-content h1,

.inner-banner h1,

.contact-heading h2 {

    font-size: 50px;

}



.howWeWork-section .howWeWork-grid > div{

    min-width: 280px230px}



}



@media (max-width: 576.9px) {

    .wallDesigns-section h2 {

        padding-right: 0;

    }

    .custom-arrows{

        position: static;

        display: flex;

        justify-content: flex-end;

    }



.designers-section {padding-bottom: 50px;}

.designers-section .teamSlider{

    margin-bottom: 30px;

}

}