/*
=================================
|***    Table of contents:   ***|
=================================

Main Style file-> assets/css/main.css 

All the SCSS File in SCSS Folder of Assets Folder. You can read the doc file also for better understand.

// BASIC
@import 'basic';

// MIXIN
@import 'variables';

// TYPOGRAPHY
@import 'typography';

// MIX
@import 'mix';

// HELPER
@import 'helper';

// ICON FONTS
@import 'icon';

// ANIMATION
@import 'animation';

// Button 
@import 'btn';

// Colors 
@import 'colors';

// Preloader 
@import 'preloader';

/* ----------------------------------
    Template Section Styles
 ------------------------------------*/

 /* // Menu - Header Section 
 @import 'header';
 
 // Hero Slide - Section 
 @import 'hero';
 
 // Section Title - Heading 
 @import 'section';
 
 // About - Section 
 @import 'about';
 
 // Features - Section 
 @import 'features';
 
 // services - Section 
 @import 'services';
 
 // testimonial - Section 
 @import 'testimonial';
 
 // Portfolio - Cases - Section 
 @import 'project';
 
 // Price Table - Section 
 @import 'price';
 
 // Call To Action - Section 
 @import 'cta';
 
 // Content Block - Section 
 @import 'contentblock';
 
 // team - Section 
 @import 'team';
 
 // funfact - Section 
 @import 'funfact';
 
 // Download - Section 
 @import 'carousel';
 
 // FAQ - Section 
 @import 'faq';
 
 // Blog - Section 
 @import 'blog';
 
 // Contact Us - Section 
 @import 'contact';
 
 // footer - Section 
 @import 'footer';n facts */



 .header-logo-2 img, .widget-head img
 {
     width: 130px;
 }
 
 .brand-image img
 {
     
     width: 136px;
 }
 
 /* architectral-services-inner-page */
 .clearfixcard P{
     color:rgb(123 139 153);
     font-size: 14px;
 }
 .titles-cardbox{
     border:2px solid rgb(123 139 153);
     border-radius: .3rem;
 }
 .cardinfo-wrap{
     padding:1rem
 }
 .img-htwdth{
     height:438;
     width:745;
 }
 .related-ser-offerings a{
     margin: 5px;
     transition: all .4s;
     
     font-size: 14px;
     line-height: 18px;
     background-color: #eff4f8;
     padding: 10px;
     color: inherit;
     border-radius: 10px;
     float:right;
 }
 .other-samples-wrap div .clearfix {
     padding: .5rem;
     border: 1px solid #e1e9f0;
     border-radius: .3rem;
     background: #fff;
 }
 .other-samples-wrap div{
     position: relative;
     height: auto;
     margin-bottom: 10px;
 }
 .imgcaption {
     position: absolute;
     bottom: 9px;
     left: .5rem;
     z-index: 1;
     width: calc(100% - 1rem);
     padding: 5px 20px 4px;
     font-size: 16px;
     color: #fff;
     right: .5rem;
     text-align: center;
     background: rgb(32 39 43 / 75%);
 }
 .other-samples-wrap div .clearfix img{
     display: block;
     width: 100%;
     height: auto;
     position: relative;
     object-fit: cover;
     animation: 500ms pmFadeIn;
 }
 .csrelatedwrap{
     position: relative;
   
     padding: 50px 40px;
     margin: 50px -40px 0;
     display: flex;
     flex-direction: row;
     align-items: center;
     color: #fff;
     flex-wrap: wrap;
     justify-content: center;
     border-top: 2px solid #d1d7dc;
 }
 .relatedcs-wrap {
     position: relative;
     display: flex;
     flex-direction: row;
     align-items: normal;
     justify-content: center;
     flex-wrap: wrap;
     width: 100%;
 }
 .cs-blog-post {
     position: relative;
     background: #fff;
     border-radius: 10px;
     overflow: hidden;
     border: 1px solid #eee;
     box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, .08);
     transition: border .4s ease;
     margin: 0px 5px 0px 5px;
     padding: 10px 10px 15px 10px;
     height: 100%;
 }
 .cs-blog-post-thumb {
     overflow: hidden;
     position: relative;
     margin-bottom: 20px;
     border-radius: 10px;
     -webkit-transition: all .4s ease;
     transition: all .4s ease;
 }
 .cs-blog-post-thumb a {
     position: relative;
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 .blog-post-content {
     position: relative;
     text-align: center;
     padding: 0px 10px 20px 10px;
     height: auto;
     display: block;
 }
 .blog-post-content a {
     position: relative;
     display: block;
     margin-top: 10px;
     color: #003d99;
     font-weight: 600;
     letter-spacing: -.2px;
     font-size: clamp(18px, 8vw, 18px);
     line-height: 1.4;
 }
 .calltoaction{
     background-color: #454545;
     padding: 50px 40px;
     margin: 50px -40px 0;
     display: flex;
     flex-direction: row;
     align-items: center;
     color: #fff;
     font-size: 18px;
     line-height: 28px;
     flex-wrap: wrap;
     justify-content: space-between;
 
 }
 .calltoaction-head {
     font-size: 36px;
     font-weight: 600;
     letter-spacing: -1px;
     margin-bottom: 15px;
 }
 .ctabtn{
     background: linear-gradient(to bottom, #ef7000 0%, #ff9700 100%);
     display: inline-block;
     padding: 8px 25px 10px;
     letter-spacing: -1px;
     font-size: 22px;
     font-weight: 700;
     color: #fff !important;
 }
 .service-items .image img {
    width: 100%;  
    height: 250px; 
    object-fit: cover; 
    border-radius: 8px; 
}
.contact-wrapper-3 {
    background-image: url('assets/img/bg.jpg');
    background-size: cover;
    background-position: center;
}
.navbar-contact-btn {
    background: #f5d521;
    color: #ffffff; 
    padding: 10px 18px;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    font-weight: bold;
    display: inline-block;
}


.navbar-contact-btn:hover {
    background-color: #180d05; 
    color: #ffffff; 
    text-decoration: none;
}
.shop-image {
    height: 300px; /* Set your desired height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .shop-image img {
    height: 100%;
    width: auto;
    object-fit: contain; /* or 'cover' if you want them to fill the area */
  }
  .same-height-img {
    height: 600px !important;
    object-fit: cover;
    width: 100%;
}
.offcanvas__contact-text {
    display: flex;
    color: white !important;
    flex-direction: column;
    gap: 5px; /* optional spacing between numbers */
}

.offcanvas__contact-text a {
    display: block;
    width: fit-content; /* prevents stretching */
}
.cs-blog-post-thumb img {
    width: 100%;
    height: 250px; /* or any height you want */
    object-fit: cover;
}
.icon i {
    font-size: 40px;
    color: #ff6600;
}