@charset "utf-8";

/*~-~-~-~-~-~-~-~-~-~ Embeded fonts ~-~-~-~-~-~-~-~-~-~*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*~-~-~-~-~-~-~-~-~-~ Embeded fonts ~-~-~-~-~-~-~-~-~-~*/

    
/* ~-~-~-~-~-~-~-~-~-~ global adjustments ~-~-~-~-~-~-~-~-~-~ */

:root {

    /* ~-~-~-~-~ declare font family & weight ~-~-~-~-~ */
    --body-font: "Montserrat", sans-serif;
    --heading-font: "Montserrat", sans-serif;
    /* ~-~-~-~-~ declare font family & weight ~-~-~-~-~ */

    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */
    --f-size-XXXL: 60px;
    --f-size-XXL: 60px;
    --f-size-XL: 40px;
    --f-size-L: 30px;
    --f-size-M: 24px;
    --f-size-S: 20px;
    --f-size-Body: 18px;
    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */
    
    /* ~-~-~-~-~ common transition ~-~-~-~-~ */
    --common-transition: all 0.8s ease;
    /* ~-~-~-~-~ common transition ~-~-~-~-~ */
    
    /* ~-~-~-~-~ colors ~-~-~-~-~ */
    --color-white: #fff;
    --color-black: #000000;
    --color-blue: #03011A;
    --color-yellow: #E0B99B;
    --color-off-white: #ffffff21;
    /* ~-~-~-~-~ colors ~-~-~-~-~ */
    --common-gap: 80px;
}


/* html { overflow-x: hidden; } */
body { font-size: var(--f-size-Body);margin: 0; padding: 0; font-family: var(--body-font); line-height: 1.2; font-weight: 400; background-color: var(--color-blue); color: var(--color-white); transition: var(--common-transition); scroll-behavior: smooth; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 35px !important; padding: 0; line-height: 1.3; font-family: var(--heading-font); text-transform: capitalize; font-weight: 600; color: var(--color-white); }

h1 {font-size: var(--f-size-XXXL); line-height: 1.1;}
h2 {font-size: var(--f-size-XXL);}
h3 {font-size: var(--f-size-XL);}
h4 {font-size: var(--f-size-L);}
h5 {font-size: var(--f-size-M);}
h6 {font-size: var(--f-size-S);}

.h1 {font-size: var(--f-size-XXXL); font-weight: 700;}
.h2 {font-size: var(--f-size-XXL); font-weight: 700;}
.h3 {font-size: var(--f-size-XL); font-weight: 700;}
.h4 {font-size: var(--f-size-L); font-weight: 700;}
.h5 {font-size: var(--f-size-M); font-weight: 700;}
.h6 {font-size: var(--f-size-S); font-weight: 700;}
  
p{ margin: 0 0 25px; padding: 0; line-height: 1.5; font-size: var(--body-font);}
p:last-child {margin-bottom: 0;}

img { max-width: 100%; }
a, img { border: 0; text-decoration: none; outline: none; }
a, a:link, a:visited, a:focus, a:hover { color: var(--color-blue-four); outline: none; text-decoration: none; transition: var(--common-transition); }
a:hover{  text-decoration: none; transition: var(--common-transition); }

textarea, select, .form-control, input { font-size: 16px; padding: 16px 30px; width: 100%; border-radius: 30px; border: 1px solid #ffffff; outline: none !important; box-shadow: none !important; color: var(--color-blue); margin-bottom:0px; height: 60px; font-family: var(--body-font); font-weight: 500; }
textarea { resize: none; }
input[type="submit"], button[type="submit"] { transition: all 0.3s ease 0s; outline: none; width: auto; font-size: 16px; background-image: url(../images/white-btn.svg); background-repeat: no-repeat; background-position: center right 45px; height: auto; margin: 0;}
input[type="submit"]:hover, button[type="submit"]:hover {background-image: url(../images/btn-arrow.svg); background-repeat: no-repeat; background-position: center right 35px;}
textarea:focus, select:focus, .form-control:focus, .form-select:focus { outline: none !important; box-shadow: inherit!important; border: 1px solid #D2CEDA; }

select, .form-select { font-size: 18px; padding: 16px 20px; background-color: transparent; border-radius:0; border: 1px solid #9D9D9D; background-image: url(../images/select-arrow.svg); background-repeat: no-repeat; background-position: center right 25px; background-size: 12px; color: #626262; height: 60px; cursor: pointer; }
input:focus, input:focus-visible { border: none; outline: none; box-shadow: none; border: 1px solid var(--clr-grey-secondary); }
.btn-check:focus+.btn, .btn:focus { box-shadow: inherit;}

/* --- for placeholder color --- */
input::-moz-placeholder , .form-control::-moz-placeholder { color: #62626248; opacity: 1; font-weight: 600;}
input:-ms-input-placeholder, .form-control:-ms-input-placeholder { color: #626262; font-weight: 600;}
input::-webkit-input-placeholder, .form-control::-webkit-input-placeholder { color: #6262626c; font-weight: 600;}
/* --- for placeholder color --- */

label { margin-bottom: 1rem; font-family: var(--body-font); font-size: var(--f-size-M); font-weight: 400; color: var(--color-black-secondary); }
  
.common-padding{ padding-top: var(--common-gap); padding-bottom: var(--common-gap); }
.padding-top { padding-top: var(--common-gap); }
.padding-bottom { padding-bottom: var(--common-gap); }


.btn, a.btn {overflow: hidden; position: relative; z-index: 1; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: top; text-align: center; color: var(--color-black); padding: 18px 60px;line-height: 1; border-radius: 52px; font-size: var(--f-size-Body); font-weight: 600; text-align: center; text-transform: capitalize; background: var(--color-yellow); border: 1px solid transparent; transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease; }

.btn:hover{ background: transparent; color: var(--color-yellow); border: 1px solid var(--color-yellow); }

/* .white-border, a.white-border {background: transparent; border-color: var(--color-white); color: var(--color-white); }.white-border:hover img, a.white-border:hover img{filter: brightness(0) invert(1);} */

/* ~-~-~-~-~-~-~-~-~-~ global adjustments ~-~-~-~-~-~-~-~-~-~ */

/* -- Header -- */

.main-header {position: absolute; top: 0; left: 0; right: 0;z-index: 9; padding: 45px 0;}

.custom-header-wrap { display: flex; align-items: center; }
.custom-header-wrap .menu-wrapper{
    margin: 0 auto;
}
.hdr-wrap { display: flex; align-items: stretch; width: 100%; }
.hdr-wrap ul { display: flex; align-items: center; justify-content: space-between; padding: 0; list-style: none; margin: 0; }

.main-menu ul li a { color: var(--color-white); position: relative; display: block; font-weight: 400; padding: 17px 25px; line-height: 1; }
.main-menu ul li.btn { display: none; }
.main-menu ul li.current-menu-item a {font-weight: 700;}
.main-menu ul li:hover a { text-decoration: underline; }

.header-sticky { left: 0; position: fixed !important; top: 0; width: 100%; transition: all 0.5s; -ms-transition: all 0.5s; -webkit-transition: all 0.5s; animation: slide-down 0.7s; -ms-animation: slide-down 0.7s; -webkit-animation: slide-down 0.7s; z-index: 19; background: #112a353b; backdrop-filter: blur(20px); padding: 20px 0; }
.header-sticky .logo-wrap a { width: 60px; }


@keyframes slide-down { 

0% {transform: translateY(-100%); 
-moz-transform: translateY(-100%); 
-webkit-transform: translateY(-100%); 
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%); } 
100% { 
transform: translateY(0); 
-moz-transform: translateY(0); 
-webkit-transform: translateY(0); 
-o-transform: translateY(0); 
-ms-transform: translateY(0); } 
}

/* dropdown on mobile screen  */

.minus, .plus {display: none;}

/* -- Header -- */
main{
    scroll-margin-top: 100px;
}

/* banner  */
/* Container */
/* --- Text Fixes --- */
.home-banner-main { position: relative; overflow: hidden; }
.home-banner-content { position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; }
.text-top{ position: absolute; width: 100%; top: 140px; left: 50%; transform: translateX(-50%); text-align: center; z-index: 2; }
.text-top h1{ font-size: var(--f-size-XXL); font-weight: 700; color: var(--color-white); }
.text-mask { display: block; margin-bottom: 5px; padding: 10px 0; /* Important: Fixes vertical clipping */ }
.banner-bg-img{ width: 100%; height: 100dvh; overflow: hidden; margin: 0; position: relative;}  
.banner-bg-img::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 1, 26, 0.561);
    transition: var(--common-transition);
} 
.banner-bg-img img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.home-banner-top-title { font-size: var(--f-size-Body); color: var(--color-white); text-transform: uppercase; margin: 0; display: inline-block; /* transform: translateY(10%); */ opacity: 1; transition: transform 0.8s var(--common-transition), opacity 0.8s ease; }
.home-banner-main-title span{ color: #fddada; mix-blend-mode: exclusion; opacity: 0.8;}
.home-banner-main-title { font-size: calc(7vw + 6px); color: var(--color-white); font-weight: 900; line-height: 1; margin: 0; text-transform: uppercase; display: inline-block; /* State before animation (with delay) */ transform: translateY(110%); opacity: 0; transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0.3s, opacity 0.8s ease 0.3s; }

/* --- THE FIX: Animation Trigger --- */
/* When Slick changes slides, it removes/adds .slick-active */
.home-banner-main .slick-slide:not(.slick-active) .home-banner-main-title { transform: translateY(110%); opacity: 0; transition: none; /* Instant reset when slide leaves */ }

.slick-active .home-banner-main-title { transform: translateY(0); opacity: 1; }
/* --- Navigation Box Fixes --- */
.home-banner-nav-wrapper { position: absolute; bottom: 90px; right: 140px; max-width: 600px; width: calc(100%); z-index: 20; display: flex; align-items: center; gap: 20px; }
.home-banner-nav-wrapper .home-banner-thumbs{ width: 100%; }
.home-banner-nav-wrapper .thumb-item{ margin: 0px 5px; overflow: hidden; border-radius: 8px; }
.home-banner-nav-wrapper .thumb-item img { width: 100%; height: 170px; object-fit: cover; border-radius: 9px; transition: all 0.3s ease; border: 2px solid transparent; cursor: pointer; }

.home-banner-nav-wrapper .thumb-item:hover img { opacity: 1; }
.home-banner-thumbs .slick-current img { opacity: 1; }
.home-banner-nav-wrapper .slick-arrow{ color: var(--color-white); cursor: pointer; font-size: 40px; width: auto; height: auto; background: none; }
.home-banner-nav-wrapper .slick-arrow svg{ height: 22px; fill: #fff; } .home-banner-nav-wrapper .slick-arrow::before{ display: none; }

/* banner end  */
footer { text-align: center; background-color: var(--color-blue); color: var(--color-white); font-size: 14px; position: absolute; width: 100%; bottom: 0; background-color: transparent; }
footer a{ display: block; font-size: var(--f-size-Body); color: var(--color-white); font-weight: 400; width: 100%; padding: 2rem 0; border-top: 1px solid var(--color-off-white); }

.no-banner footer { position: fixed; background-color: var(--color-blue); z-index: 9; }
.no-banner main{padding-top: 150px; margin-bottom: 70px;}
.main-heading{ margin-bottom: 40px;  text-align: center;}
.main-heading h1 { font-size: var(--f-size-XXL); font-weight: 400; color: var(--color-white); text-transform: uppercase; text-align: center; }
.portfolio-item { position: relative; }
.portfolio-item a{ position: absolute; width: 100%; height: 100%; z-index: 1;}
.portfolio-item figure{ border-radius: 15px; padding-bottom: 60%; overflow: hidden; position: relative; margin-bottom: 0; }
.portfolio-item figure img{ position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover; transition: var(--common-transition); }
.portfolio-item:hover figure img{ transform: scale(1.2); }
.portfolio-item p{ font:var(--f-size-M); margin:1.3rem 0px; text-align: center; }

.search_suggestion{ max-width: 382px; margin-left: auto; margin-bottom: 70px; position: relative; margin-top: -99px; z-index: 5;}
.search_suggestion .probox{ padding:12px 15px 12px 4px !important; height: 50px; background-color: var(--color-off-white) !important; border-radius: 50px; color: #fff !important; border: none !important; }
.search_suggestion input::placeholder{ color: #ffffffab !important; font-weight: 300 !important; font-size: 16px !important; opacity: 1 !important; }
/* .search_suggestion span{ position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } */
.search_suggestion .promagnifier{box-shadow: none !important;}
.search_suggestion input.Search{ background: transparent !important; border: none !important; box-shadow: none !important; color: #ffffff85 !important; font-size: 16px !important; font-weight: 300 !important; padding: 0 !important; height: auto !important; }
.search_suggestion #ajaxsearchlite1 .probox .proinput form input::placeholder,
.search_suggestion div.asl_w .probox .proinput form input::placeholder{ color: #ffffffab !important; font-weight: 300 !important; font-size: 16px !important; opacity: 1 !important; }
.search_suggestion #ajaxsearchlite1 .probox .proinput form input, div.asl_w .probox .proinput form input{
    color: var(--color-white) !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}
.search_suggestion div.asl_m .probox .proclose svg{
    fill: #ffffff7a;
    width: 16px !important;
    height: 16px !important;
    margin-top: -8px;
}
.search_suggestion div.asl_w .probox .promagnifier .innericon svg {
    fill: #ffffff7a;
}
.search_suggestion div.asl_w .probox div.asl_simple-circle{border-color: #ffffff8c !important; border-right-color: transparent !important;}
div.asl_r.vertical {
    padding: 10px !important;
    background: #0f054261 !important;
    border-radius: 10px !important;
    backdrop-filter:blur(10px) !important;
    z-index: 10 !important;
}
div.asl_r.vertical .results{
    scrollbar-color: var(--color-off-white) !important;
}
div.asl_r.vertical .results::-webkit-scrollbar {
  width: 12px !important; /* Mostly for vertical scrollbars */
  height: 12px !important; /* Mostly for horizontal scrollbars */
}
div.asl_r.vertical .results::-webkit-scrollbar-thumb {
  /* Foreground */
  background: var(--color-off-white) !important;
  background: red !important;
  border-radius: 999px !important;
  border: 3px solid transparent !important;
  background-clip: padding-box !important;
}
div.asl_r.vertical .results::-webkit-scrollbar-track {
  /* Background */
  background: var(--color-off-white) !important;
}
div.asl_r .results .item .asl_content{
    padding: 10px 0px!important;
}
div.asl_r .results .item .asl_content .asl_image{
    border-radius: 6px !important;
}
div.asl_r .results .item .asl_content .asl_res_url{
    color: #ffffff !important;
    font-size: var(--f-size-Body) !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
}
div.asl_r .resdrg{
    background: var(--color-black) !important;
    padding: 6px !important;
    border-radius: 6px !important;
}
div.asl_r .results .item {
    height: auto !important;
    background: var(--color-black) !important;
    border: none !important;
}
.search_suggestion span .search-btn{background: transparent; color: #ffffff85; border: none; cursor: pointer; padding: 0; margin: 0; outline: none; transition: var(--common-transition); box-shadow: none; z-index: 2;}
.search_suggestion span button svg{ height: 18px; fill: #919191; }

.pd-img{ position: relative; border-radius: 30px; padding-bottom: 80%; overflow: hidden; margin: 0px; }
.pd-img img{ position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; }
.pd-content h1{font-weight: 700; margin-bottom: 3rem !important;}
.pd-content div{ display: grid; grid-template-columns: 50% 50%; gap: 0px 16px}
.gallery-row{padding-top: 10px;}
.gallery-thumbnail a{ width: 100%; display: block; position: relative; border-radius: 20px; overflow: hidden; padding-bottom: 100%; margin-bottom: 20px; cursor: pointer; }
.gallery-thumbnail a img{ width: 100%; height: 100%; position: absolute; object-fit: cover; transition: var(--common-transition); }
.gallery-thumbnail:hover a img{ transform: scale(1.2); }
.fancybox-image{ border-radius: 30px !important; }
.fancybox__content img{ border-radius: 20px !important; }
.custom-form textarea.form-control{ min-height: 205px; }
.custom-form .row .mb-3{ margin-top: 0px; }
.custom-form textarea.form-control.address-link{ min-height: 60px; }
.capture_bx label{ font-size: var(--f-size-Body); font-weight: 700; color: var(--color-white); display: block; }
button.btn.contact-submit-btn, input[type="submit"].contact-submit-btn{ margin-top: 1.5rem; }

.design-materials-bx{display: flex; flex-direction: column; background: transparent; border: 1px solid var(--color-white); border-radius: 20px; padding: 18px 16px; transition: var(--common-transition); overflow: hidden; position: relative; height: 100%;}
.design-materials-bx a{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }
/* .design-materials-bx:hover{
    transform: translateY(-3px);
} */
.design-materials-bx h2{ font-size: var(--f-size-M); font-weight: 600; color: var(--color-white); margin: 0px 0 10px; }
.design-materials-bx figure{ width: 70px; height: 74px; border-radius: 12px; border: 1px solid var(--color-white); display: flex; align-items: center; justify-content: center; margin-bottom: 30px; }
.design-materials-bx span{ font-size: var(--f-size-Body); margin-top: auto; font-weight: 400; color: var(--color-white); position: relative; display: flex; margin-bottom: 10px; }
.design-materials-bx span::after{ content: ''; width: 40px; height: 12px; background-image: url(../images/Arrow.svg); background-repeat: no-repeat; background-position: center; position: relative; left: 28px; bottom: -3px; transform: translateX(-50%); transition:var(--common-transition); display: inline-block; }
.design-materials-bx:hover span::after{ left: 35px; }
div.pagination { justify-content: center; margin-top: 16px; }
ul.pagination{ gap: 5px; }
ul.pagination .page-item .page-link{ width: 40px; height: 40px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-size: var(--f-size-Body); font-weight: 400; color: var(--color-white); background: transparent; cursor: pointer; transition: var(--common-transition); padding: 0; } 
ul.pagination .page-item .page-link:hover, ul.pagination .page-item .page-link.current{ background: var(--color-off-white); border: none; }
.team-member-details .comm-content-wrapper{ text-align: center; margin: 0 auto; margin-bottom: var(--common-gap); }
.team-member-details .comm-content-wrapper .team-image{ border-radius: 30px; max-width: 700px; width: 100%; margin-inline: auto; overflow: hidden; padding-bottom: 40%; position: relative; margin-bottom: 1.5rem; }
.common-card{ background: transparent; border: 1px solid var(--color-white); padding: 12px 12px 20px; border-radius: 12px; color: var(--color-white); }
.card-body{ padding: 0px 0px 0px 0px; }
.common-card .card-image-wrapper{ border-radius: 8px; overflow: hidden; padding-bottom: 60%; position: relative; margin-bottom: 20px !important; transition: var(--common-transition); }
.common-card .card-image-wrapper img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: var(--common-transition); }
.common-card:hover .card-image-wrapper img{ transform: scale(1.05); }
.common-card p{ font-size: var(--f-size-Body); font-weight: 400; color: var(--color-white); margin: 0; margin-bottom: 15px; }
.common-card h4{ font-size: var(--f-size-L); font-weight: 700; margin-bottom: 20px !important; }
.common-card .link-btn{ font-size: var(--f-size-Body); }
.common-card .link-btn::after { content: ''; width: 40px; height: 12px; background-image: url(../images/Arrow.svg); background-repeat: no-repeat; background-position: center; position: relative; left: 28px; bottom: -3px; transform: translateX(-50%); transition: var(--common-transition); display: inline-block; }
.common-card:hover .link-btn::after{ left: 35px; }
.team-member-details .comm-content-wrapper .team-image img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.search-result-box{ display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 20px; }
.srch-list{ background: transparent; border: 1px solid var(--color-white); border-radius: 20px; padding: 20px; transition: var(--common-transition); position: relative; }
.srch-list h2{ font-size: var(--f-size-M); font-weight: 600; color: var(--color-white); margin-bottom: 20px !important; }
.not-found{ display:flex; justify-content: center ; align-items: center ; flex-direction: column; gap:0px; text-align: center; }
.search-result-box p{margin-bottom: 60px !important;}
/**************** wordpress modifications start here ********************/
.capture_bx p{margin: 0;}
.capture_bx div.hidden-items{ display: flex; flex-wrap: wrap; gap: 30px; align-items: center;}
.capture_bx div.hidden-items strong{ font-size: var(--f-size-XL); font-weight: 400; letter-spacing: 30px;}
.capture_bx div.hidden-items input { background: transparent; border-radius: 10px; color: #fff; max-width: 285px; padding: 10px 19px; border: 1px solid #fff !important; font-size: 35px; letter-spacing: 9px; text-align: center; margin: 10px 0px; }

.wpcf7-not-valid-tip { display: none !important;}
.wpcf7-not-valid { border-color: #f00 !important; box-shadow: rgba(253, 17, 17, 0.829) 0px 0px 0px 1px !important;}
.wpcf7 form .wpcf7-response-output { color: #f00; text-align: center; border: none !important; }
.wpcf7 form.sent .wpcf7-response-output { color: #46b450; border: none !important;}
/* .custom-form .wpcf7-spinner{top: 39px;} */
.custom-form .row div.text-center{
    position: relative;
}
.custom-form .row div.text-center .wpcf7-spinner{
    position: absolute;
    top: 39px;
    left: 60%;
    transform: translateX(-50%);
}


@media only screen and (min-width: 1799px){

  .container {max-width: 1600px;}
}

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

    :root {
    --f-size-XXXL: 50px;
    --f-size-XXL: 50px;
    --f-size-XL: 35px;
    --f-size-M: 22px;
    --f-size-L: 28px;
    /* --f-size-M: 24px;
    --f-size-S: 20px;
    --f-size-Body: 16px; */
    }
    h1 {font-size: var(--f-size-XXXL); line-height: 1.3;}
    .search_suggestion { max-width: 300px; margin-top: -90px; }
    .pd-content h1 {
    margin-bottom: 2rem !important;
}
}

@media only screen and (max-width:1599px){
    .home-banner-nav-wrapper{max-width: 540px;}
    .home-banner-nav-wrapper .thumb-item img { height: 140px; }
           .capture_bx div.hidden-items input{
        font-size: 20px;
       }
}

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

    :root {
    --f-size-XXXL: 40px;
    --f-size-XXL: 40px;
    --f-size-XL: 30px;
    --f-size-L: 26px;
    --f-size-M: 20px;
    --f-size-S: 18px;
    --f-size-Body: 15px;
    }
    .no-banner main {
    padding-top: 110px;
}
        .common-padding { padding-top: 70px; padding-bottom: 70px; }
    .padding-top { padding-top: 70px; }
    .padding-bottom { padding-bottom: 70px; }
    h1, h2, h3, h4, h5, h6, p { margin: 0 0 20px; }

    .main-header { padding: 15px 0; }

    .listing-wrap ul { padding: 100px 0 0; }
    .listing-wrap ul li { font-size: 17px; }

    .gradient-box { padding: 30px; border-radius: 20px; }
    .gradient-box::after { border-radius: 20px; }
    .gradient-box.blue .featured-img img { height: 210px; }
    .gradient-box:not(.styled-two) { background-size: 240px; }
    .gradient-box.styled-two .features-cnt p { max-width: 460px; }
    .gradient-box.styled-three { padding: 30px; }
    .gradient-box.styled-one { padding: 60px 30px; }
    .icon-wrap { width: 95px; flex: 0 0 95px; margin-right: 10px; }
    .absolute-img img { width: 85%; }
    .search_suggestion { max-width: 270px; margin-top: -90px; }
        .home-banner-nav-wrapper {
        max-width: 460px;
    }
    .home-banner-nav-wrapper .thumb-item img {
        height: 100px;
    }

}

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

    :root {
    --f-size-XL: 26px;
    --f-size-L: 22px;
    --f-size-M: 18px;
    --f-size-S: 16px;
    --f-size-Body: 14px;
    }

    .common-padding { padding-top: 60px; padding-bottom: 60px; }
    .padding-top { padding-top: 60px; }
    .padding-bottom { padding-bottom: 60px; }

    /* .btn, a.btn { padding: 13px 30px; } */

    /* dropdown on mobile screen  */

    /* //Next Media Query te nicher gulo likhte hobe// */
    /* li.menu-item-has-children{position: relative;}
     li.menu-item-has-children.open-sub .minus{display: block;}
    li.menu-item-has-children.open-sub .plus{display: none;}
    li.menu-item-has-children ul.sub-menu a, li.menu-item-has-children ul.sub-menu li.current-menu-item a{color: var(--color-white);font-size: 14px;}

    .minus, .plus { display: block; position: absolute; right: 0; top: 0; font-weight: 400; color: var(--color-white); font-size: 20px; width: 25px; }
    .minus{display: none;}

     li.menu-item-has-children.open-sub .minus{display: block;}
    li.menu-item-has-children.open-sub .plus{display: none;}
    li.menu-item-has-children ul.sub-menu a, li.menu-item-has-children ul.sub-menu li.current-menu-item a{color: var(--color-white);font-size: 14px;}

    .minus, .plus { display: block; position: absolute; right: 0; top: 0; font-weight: 400; color: var(--color-white); font-size: 20px; width: 25px; }
    .minus{display: none;} */

    /* dropdown on mobile screen end  */
       
}
@media only screen and (max-width:991px){

    :root {
    --f-size-XXXL: 30px;
    --f-size-XXL: 30px;
    }
.common-padding { padding-top: 50px; padding-bottom: 50px; }
.padding-top { padding-top: 50px; }
.padding-bottom { padding-bottom: 50px; }
.home-banner-main-title{ line-height: 1.3; }
.main-menu ul li a{ padding: 17px 17px; font-size:calc(var(--f-size-Body) + 3px);}
.listing-wrap ul { padding: 0; flex-wrap: wrap; }
.listing-wrap ul li { width: 50%; margin-bottom: 20px; }
.features-cnt.max-features { max-width: 100%; } 
.gradient-box.styled-one::before { content: "'"; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgb(255 255 255 / 65%); border-radius: 20px; opacity: 0.9; z-index: -1; }
.home-banner-nav-wrapper{max-width: 450px; bottom: 110px; transform: translateX(-50%); left: 50%; right: 50%;}
.home-banner-nav-wrapper .thumb-item img { height: 100px; }
.no-banner main { padding-top: 90px; }
.main-heading { margin-bottom: 25px; text-align: center; }
.search_suggestion { max-width: 100%; margin-top: 0px; margin-bottom: 30px; }
.pd-content h1 { margin-bottom: 1.5rem !important; }
.search-result-box { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    textarea, select, .form-control, input,
    .custom-form textarea.form-control.address-link { padding: 11px 20px; height: 55px; }
    .custom-form textarea.form-control.address-link{ min-height: 55px; padding: 14px 20px; }
        input[type="submit"].contact-submit-btn {
            margin-top: 0px;
        }
    .custom-form .row div.text-center .wpcf7-spinner{ top: 34px; }
       .btn, a.btn { padding: 13px 30px; }
       .capture_bx div.hidden-items input{
        font-size: 16px;
       }
}
@media only screen and (max-width:767px){
    :root{
        --f-size-XL: 24px;
        --f-size-M: 16px;
    }
    h1, h2, h3, h4, h5, h6{
        margin-bottom: 20px !important;
    }
    .common-padding { padding-top: 30px; padding-bottom: 30px; }
    .padding-top { padding-top: 30px; }
    .padding-bottom { padding-bottom: 30px; }
    .pd-content h1 { margin-bottom: 1rem !important; }
    .main-header{z-index: 99;}
    .menu-wrapper { width: 100%; }
    .logo-wrap a { width: 70px; }
    .header-sticky .logo-wrap a { width: 40px; }

    .header-btn .btn {padding: 22px 30px;}

    .hdr-wrap { background: transparent; margin-left: auto; margin-right: 0; max-width: 100%; justify-content: flex-end; }

    .main-menu { position: absolute; left: inherit; left: 0; right: 0; top: 0; z-index: 999; width: 100%; margin: 0 auto; background-color: var(--color-blue); border: 0; padding: 8rem 30px 60px; display: block; overflow: auto; display: none; height: 100vh; z-index: 99; }
    .main-menu>ul {flex-direction: column;}
    .main-menu>ul li { width: 100%; text-align: center; border: 0; }
    .main-menu ul li:not(:last-child) { margin-right: 0; }
    .main-menu>ul>li a { display: block; color: var(--color-white); padding: 0; }
    .main-menu ul li.current-menu-item a, 
    .main-menu ul li:hover a{color: var(--color-white);}
    .hdr-rt ul li a {color: var(--color-white);padding: 10px;}


    .main-menu ul li.btn { display: block; width: auto; }

    .header-btn { display: none; }

    .nav_btn { display: block; cursor: pointer; position: relative; margin: auto 10px auto 10px; width: 30px; height: 20px; z-index: 999; }
    .nav_btn::before {content: "";position: absolute;width: 100%;height: 2px;background: var(--color-white);top: 0;right: 0;transition: ease-in-out 0.4s;}
    .nav_btn span {width: 100%;height: 2px;background: var(--color-white);display: block;position: absolute;top: 50%;transform: translateY(-50%);}
    .nav_btn::after {content: "";position: absolute;width: 100%;height: 2px;background: var(--color-white);right: 0;bottom: 0;transition: ease-in-out 0.4s;}

    .nav_btn.sidebar_active span {display: none;}
    .nav_btn.sidebar_active::after{transform: rotate(45deg);bottom: 9px; background: var(--color-white);}
    .nav_btn.sidebar_active::before{transform: rotate(135deg);top: 9px; background: var(--color-white);}
    .hdr-wrap ul{flex-direction: column;}
    .logo-wrap a { width: 50px; }
    
    /* .main-header { 
        backdrop-filter: blur(8px);
        background-color: #0b1a5f69;
        padding: 20px 0; 
    }
    .home.front-page .main-header{
        backdrop-filter: blur(0px);
        background-color: transparent;
    } */
    footer a{
        padding: 1rem 0;
    }
        .home-banner-nav-wrapper {
        max-width: 70%;
        bottom: 70px;
        transform: translateX(-50%);
        left: 50%;
        right: 50%;
    }
    .home-banner-nav-wrapper .thumb-item{
        position: relative;
        padding-bottom:4%;
        border-radius: 9px;
        overflow: hidden;
    }
.home-banner-nav-wrapper .thumb-item img { width: 100%; height: 100%; position: absolute; object-fit: cover;}
.portfolio-item figure,
.gallery-thumbnail a
{border-radius: 8px;}
.portfolio-item p{margin: 1rem 0px;}
.pd-content h1{ font-size: var(--f-size-XL) !important;}
.design-materials-bx figure {
    width: 60px;
    height: 64px;
    margin-bottom: 16px;
    padding: 10px;
}
.capture_bx div.hidden-items{
    gap: 0px;
}
.capture_bx div.hidden-items input{
    max-width: 180px;
}
}

@media only screen and (max-width:575px){
    .container{
        max-width: 95%;
    }
    .text-top h1{
        font-size: var(--f-size-XL);
    }
    textarea, select, .form-control, input,
    .custom-form textarea.form-control.address-link
    {
        padding: 11px 20px;
        height: 45px;
        min-height: 45px;
    }
    .custom-form textarea.form-control.address-link{
        padding: 9px 20px;
    }
        .home-banner-nav-wrapper .thumb-item{
        padding-bottom:4%;
    }
    label {
        margin-bottom: 12px;
    }
    .pd-content div{
        grid-template-columns: 100%;
    }
}