/* 
Theme Name:		 Web Devs House
Theme URI:		 https://webdevshouse.com
Description:	 We are one of the most effective web design and development companies for digital transformation, specialising in web design, development, management, and ongoing support.
Author:			 Web Devs House
Author URI:		 https://webdevshouse.com
Template:		 hello-elementor
Version:		 1.0.1
Email            info@webdevshouse.com
Text Domain:	 webdevshouse
*/


/*
    Add your custom styles here
*/

/* Global Styling Start*/


html{
	overflow-x:hidden;
}
/* Desktop */
.sec-padd , .sec-padd-v , .sec-padd-t{
	padding-top:100px!important;
}
.sec-padd , .sec-padd-v , .sec-padd-b{
	padding-bottom:100px!important;
}
.sec-padd , .sec-padd-h , .sec-padd-l{
	padding-left:20px!important;
}
.sec-padd , .sec-padd-h , .sec-padd-r{
	padding-right:20px!important;
}
.e-con-boxed.gap>div , .gap{
	gap:50px !important;
}
/* Laptop */
@media screen and (max-width:1366px){
.sec-padd , .sec-padd-v , .sec-padd-t{
	padding-top:80px!important;
}
.sec-padd , .sec-padd-v , .sec-padd-b{
	padding-bottom:80px!important;
}
.e-con-boxed.gap>div , .gap{
	gap:40px !important;
}
}
/* Tablet */
@media screen and (max-width:1023px){
.sec-padd , .sec-padd-v , .sec-padd-t{
	padding-top:65px!important;
}
.sec-padd , .sec-padd-v , .sec-padd-b{
	padding-bottom:65px!important;
}
.sec-padd , .sec-padd-h , .sec-padd-l{
	padding-left:15px!important;
}
.sec-padd , .sec-padd-h , .sec-padd-r{
	padding-right:15px!important;
}
.e-con-boxed.gap>div , .gap{
	gap:30px !important;
}
}
/* Mobile */
@media screen and (max-width:767px){
.sec-padd , .sec-padd-v , .sec-padd-t{
	padding-top:50px!important;
}
.sec-padd , .sec-padd-v , .sec-padd-b{
	padding-bottom:50px!important;
}
.e-con-boxed.gap>div , .gap{
	gap:20px !important;
}

}
/* Global Styling End*/

.sticky-header.elementor-sticky--active{
	box-shadow: 0 0 #0000, 0 15px 20px rgb(0 0 0 / 0.3);
	border-color: initial !important;
  border-image: linear-gradient(90deg, var( --e-global-color-accent ), var( --e-global-color-e6931d0 )) 1;
}

.grad-title{
	color: transparent !important;
	background-clip:text;
	-webkit-background-clip:text;
	background-image:linear-gradient(to right, var( --e-global-color-accent ), var( --e-global-color-e6931d0 ));
	
}


.backdrop-blur-sm{
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.shadow button, .shadow a, .shadow img, .shadow-box{
	box-shadow: 0 0 #0000,  0 0 #0000, 0 0 20px rgba(250, 189, 48, 0.3) !important;
}
.shadow a:hover , .shadow button:hover{
box-shadow: 0 0 #0000, 0 20px 25px -3px rgb(0 0 0 / 0.2), 0 8px 10px -5px rgb(0 0 0 / 0.3) !important;
}

.light-grad{
	background-image:linear-gradient(to right, #F8FAFC , #fff , #F8FAFC);
}

.grad-card-2{
	background:
  radial-gradient(ellipse at 100% 0%, #fff8e1 0%, #fff3cd 30%, transparent 65%),
  radial-gradient(ellipse at 80% 5%, #ffeaa0 0%, transparent 40%),
  #ffffff;
}

.grad-bdr{
  border-color: initial;
  border-image: linear-gradient(90deg, var( --e-global-color-accent ), var( --e-global-color-e6931d0 )) 1;
}


.grad-sec-2{
	background-image: linear-gradient(90deg, var(--e-global-color-accent), var( --e-global-color-e6931d0 ));
}

.elementor-button svg{
    margin-bottom: -2px;
}

.shadow-soft {
    box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}


.link-card{
	margin-top: auto;
	background-image:linear-gradient(to right, #F8FAFC , #fff , #F8FAFC);
	border:1px solid var( --e-global-color-8504ad0 );
	box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}
.hovered-card, .link-card:hover{
background:
radial-gradient(
circle at top right, rgba(245, 196, 67, .18) 0%, rgba(245,196,67,.08) 20%, transparent 45% ), #ffffff;
border-color:var( --e-global-color-015ca7d );
	box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}
.link-card .card-icon.elementor-widget-shortcode svg{
	fill:var( --e-global-color-accent );
	width:32px;
	height:32px;
	margin-bottom:-6px !important;
}
@media screen and (max-width:1365px){
.link-card .card-icon.elementor-widget-shortcode svg{
	width:30px;
	height:30px;
}	
}
@media screen and (max-width:1024px){
.link-card .card-icon.elementor-widget-shortcode svg{
	width:27px;
	height:27px;
}	
}
@media screen and (max-width:767px){
.link-card .card-icon.elementor-widget-shortcode svg{
	width:25px;
	height:25px;
}	
}
.link-wrapper{margin-top:auto !important;}
.link-card .link-wrapper svg , .link-card .link-wrapper p{transition: all .2s linear;}
.link-card:hover .card-icon{transform:scale(1.05);transform-origin:center center;transition:all 0.15s ease-in-out;};
.link-card:hover .link-wrapper p{color: var( --e-global-color-e6931d0 ) !important;}
.link-card:hover .link-wrapper .elementor-icon{background: var(--e-global-color-accent) !important;}
.link-card:hover .link-wrapper svg{fill: #fff !important;}

.translate-btn-icon svg{
    transition: all 0.15s ease-in-out !important;
}
.translate-btn-icon:hover svg{
    transform: translate(5px);
}
.icon-grad .elementor-icon{
	background-image:linear-gradient(to bottom right, rgb(250 189 48 / 0.2) , rgb(172 103 11 / 0.2));
}
.icon-grad-accent .elementor-icon{
	background-image:linear-gradient(to bottom right, var( --e-global-color-accent ), var( --e-global-color-e6931d0 ));
}


.icon-box:hover .icon-grad{transform:scale(1.05)}

.blog-card img, .blog-card .elementor-heading-title{
	transition:all 0.2s ease-in-out;
}
.blog-card:hover img{
	transform:scale(1.06);
}
.blog-card:hover .elementor-heading-title{
	color: var( --e-global-color-e6931d0 ) !important;
}

.elementor-loop-container{
	grid-auto-rows:initial !important;
}











 /* ============================================
   BOOTSTRAP REPLACEMENTS (No Bootstrap needed)
   ============================================ */

    /* Row & Grid */
    .row {
        display: flex;
        flex-wrap: wrap;
        margin-left: -8px;
        margin-right: -8px;
    }

    .g-3>* {
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: 16px;
    }

    .col-md-6 {
        width: 50%;
        box-sizing: border-box;
    }

    .col-md-12,
    .col-12 {
        width: 100%;
        box-sizing: border-box;
    }

    @media (max-width: 640px) {
        .col-md-6 {
            width: 100%;
        }
    }

    /* Form Controls */
    .form-label {
        display: block;
        margin-bottom: 6px;
        font-size: 0.9rem;
        color: #333;
    }

    .fw-semibold {
        font-weight: 600;
    }

    .form-control,
    .form-select {
        display: block;
        width: 100% !important;
        padding: 9px 13px !important;
        font-size: 0.95rem;
        line-height: 1.5;
        color: #333;
        background-color: #fff !important;
        border: 1px solid #ced4da !important;
        border-radius: 8px;
        box-sizing: border-box;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        outline: none;
        appearance: none;
        -webkit-appearance: none;
    }

    .form-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 13px center;
        padding-right: 36px;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--primary, #1a3c5e);
        box-shadow: 0 0 0 3px rgba(26, 60, 94, 0.12);
    }

    /* Validation — ONLY show after .was-validated is added */
    .invalid-feedback {
        display: none;
        font-size: 0.82rem;
        color: #dc3545;
        margin-top: 4px;
    }

    /* Show red border + message only after form submission attempt */
    .was-validated .form-control:invalid,
    .was-validated .form-select:invalid {
        border-color: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12);
    }

    .was-validated .form-control:invalid~.invalid-feedback,
    .was-validated .form-select:invalid~.invalid-feedback {
        display: block;
    }

    /* Valid state */
    .was-validated .form-control:valid,
    .was-validated .form-select:valid {
        border-color: #28a745;
    }

    /* Spacing utilities */
    .mb-3 {
        margin-bottom: 12px;
    }

    .mb-4 {
        margin-bottom: 20px;
    }

    .mt-3 {
        margin-top: 12px;
    }

    .py-4 {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .text-muted {
        color: #6c757d;
    }

    .text-center {
        text-align: center;
    }

    .w-100 {
        width: 100% !important;
    }

    /* ============================================
   QUOTE WIZARD STYLES
   ============================================ */

    .quote-modal {
        background: #fff;
        border-radius: 18px;
        width: 100%;
        max-height: 85vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        font-family: 'Segoe UI', sans-serif;
    }

    .quote-modal-header {
        padding: 18px 26px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--primary, #1a3c5e);
        color: white;
        border-radius: 18px 18px 0 0;
        flex-shrink: 0;
    }

    .quote-modal-title {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 1.4rem;
    }

    .quote-modal-body {
        padding: 24px 26px 20px;
        overflow-y: auto;
        flex: 1;
    }

    .quote-modal-footer {
        padding: 16px 26px 20px;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        flex-shrink: 0;
    }

    /* Step Labels */
    .step-labels {
        display: flex;
        gap: 16px;
        font-size: 0.9rem;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

    .step-labels span {
        color: #999;
    }

    .step-labels span.active {
        color: var(--primary, #1a3c5e);
        font-weight: 600;
    }

    /* Step Pills */
    .step-indicator {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
    }

    .step-pill {
        flex: 1;
        height: 4px;
        border-radius: 999px;
        background: #e0e0e0;
        position: relative;
        overflow: hidden;
    }

    .step-pill::after {
        content: "";
        position: absolute;
        inset: 0;
        background: transparent;
        transition: background 0.3s ease;
    }

    .step-pill.active::after,
    .step-pill.completed::after {
        background: linear-gradient(90deg, var(--accent, #e8a020), #f1c40f);
    }

    /* Close Button */
    .quote-close-btn {
        border: none;
        background: transparent;
        font-size: 1.2rem;
        color: white;
        cursor: pointer;
        line-height: 1;
    }

    /* Summary Box */
    .summary-box {
        border: 1px solid #eee;
        border-radius: 10px;
        padding: 16px;
    }

    .summary-box h6 {
        margin: 0 0 12px 0;
        font-size: 1rem;
        color: #333;
    }

    .summary-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.95rem;
        margin-bottom: 6px;
    }

    .summary-label {
        font-weight: 600;
        color: #333;
    }

    .summary-value {
        color: #555;
    }

    /* Headings inside steps */
    .quote-modal h5 {
        margin: 0 0 16px 0;
        font-size: 1.05rem;
        color: #1a3c5e;
    }

    /* Step hide/show */
    .qstep-hidden {
        display: none !important;
    }

    /* Elementor override */
    .elementor-popup-modal .elementor-widget-html {
        padding: 0 !important;
    }

    /* Button styles — keep your existing btn classes */
    .btn-main-small {
        background: var(--accent, #e8a020);
        color: #fff !important;
        border: none !important;
        padding: 10px 24px !important;
        border-radius: 8px;
        font-weight: 600 !important;
        cursor: pointer !important;
        font-size: 0.95rem !important;
        transition: opacity 0.2s !important;
    }

    .btn-main-small:hover {
        opacity: 0.88;
    }

    .btn-outline-main {
        background: transparent;
        color: var(--primary, #1a3c5e);
        border: 1.5px solid var(--primary, #1a3c5e);
        padding: 10px 24px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        font-size: 0.95rem;
        transition: all 0.2s;
    }

    .btn-outline-main:hover {
        background: var(--primary, #1a3c5e);
        color: #fff;
    }