/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

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

/*font-family: "Figtree", serif;*/ 

:root {
	scroll-behavior: smooth;
  --color-blue: 17 117 183;     /* #1175b7 in decimal RGB*/
  --color-green: 0 177 97;     /* #00b161 in decimal RGB*/
  --color-light: 231 232 233;  /* #e7e8e9 in decimal RGB*/
  --color-dark: 34 34 34;     /* #222222 in decimal RGB*/
  --color-grey: 204 204 204;     /* #cccccc in decimal RGB*/
  --color-darkgrey: 130 123 96; /* #827b62 in decimal RGB*/
  --color-white: 255 255 255;     /* #ffffff in decimal RGB*/
}

/*---------------------- Do not remove (Smooth scroll) start ----------------------*/

html.lenis{height:auto}.lenis.lenis-smooth{scroll-behavior:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-scrolling iframe{pointer-events:none}

/*---------------------- Do not remove (Smooth scroll) end ----------------------*/

body { font-family: "Figtree", serif; color: rgb(var(--color-dark)); margin: 0; padding: 0; font-size: 16px;}
body, html{height: 100%;}

/*---------------------- Custom css start ----------------------*/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 600!important;line-height: normal !important;}
h1, .h1 {font-size: clamp(32px, 4vw, 46px);}
h2, .h2 {font-size: clamp(28px, 4vw, 32px);}
h3, .h3 {font-size: clamp(24px, 4vw, 28px);}
h4, .h4 {font-size: clamp(20px, 4vw, 24px);}
h5, .h5 {font-size: clamp(18px, 4vw, 20px);}
h6, .h6 {font-size: clamp(16px, 4vw, 18px);}

a, .btn {color:rgb(var(--color-blue)); font-weight: 600; text-decoration:none; text-underline-offset: 5px;  -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
a:hover{color:rgb(var(--color-blue));}

strong{font-weight: 600;}

hr{margin-bottom: 30px; border-color:rgb(var(--color-light)); opacity: 1;}

.lead{font-size: 16px;}

section, .section { padding-bottom: clamp(30px, 7vw, 70px); padding-top: clamp(30px, 7vw, 70px);}

.text-primary { color: rgb(var(--color-blue))!important; }
.text-success { color: rgb(var(--color-green))!important; }
.text-muted { color: rgb(var(--color-darkgrey))!important; }

.bg-dark { background: rgb(var(--color-dark))!important; }
.bg-light { background: rgb(var(--color-light))!important; }
.bg-primary { background: rgb(var(--color-blue))!important; }
.bg-success { background: rgb(var(--color-green))!important; }

.middle-bg{background:url("images/bg1.jpg") center; background-size: cover;}


/*---- ul li start ----*/

.list { position: relative; margin-bottom:30px; padding: 0; line-height: 24px; }
.list li {  margin-bottom: 15px; display: flex; gap: 10px; }
.list li:before { font-family: bootstrap-icons; font-size: 20px; content: '\F26A'; color: rgb(var(--color-green)) }



/*---- ul li end ----*/

.brand-slider1 .swiper-slide {
	    border-radius: 10px;
    border: 1px solid rgb(var(--color-light));
    box-shadow: 0 0 10px hsl(0deg 0% 0% / 6%);
    display: grid;
    place-content: center;
    height: 100px;
	padding: 20px;
	margin-bottom:10px;
}

.brand-logo img{
    background: #fff;
    border-radius: 10px;
	padding: 20px 30px;
    box-shadow: 0 0 10px hsl(0deg 0% 0% / 6%);
}


/*---- Card start ----*/

.card{border-radius: 0; border: 0;}

.product-box img{
    aspect-ratio:1;
    border: 1px solid rgb(var(--color-light))!important;
    border-radius: 10px!important;
    -webkit-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out;
}
.product-box:hover img{box-shadow: 0 0 15px rgb(var(--color-light))}
.product-box .product-desc{padding-block:15px; }
.product-box .product-title{display: block; color: inherit; font-size: 18px; font-weight: 500; line-height: normal; margin-bottom: 10px;}
.product-box .product-title:hover{color: rgb(var(--color-blue));}
.product-box .product-like{float: right; font-size:24px; color: rgb(var(--color-light));}

/*---- Card end ----*/

/*---------------------- Custom css end ----------------------*/





/*---------------------- Header start ----------------------*/

header {background: rgb(var(--color-white)); position: sticky; top:0; z-index: 10; width: 100%; box-shadow: rgba(0,0,0,0.1) 0px 8px 12px 0px;-webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
header.shrink, .home header.shrink {background: rgb(var(--color-white)); box-shadow: rgba(0,0,0,0.1) 0px 8px 12px 0px;}

/* header.shrink .custom-logo-link img{max-width: 390px;} */

.home header{
    position: fixed!important;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid #ccc
}

/*---------------------- Header end ----------------------*/

/*---------------------- Hero banner start ----------------------*/

.hero-wraper { position: relative; padding-top: 140px; padding-bottom: calc(4vw + 50px);  min-height: 25rem; width: 100%; background: url("images/hero-bg.png") bottom center; background-size: cover;}

.hero-wraper .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover; opacity: .9;}
.hero-content { position: relative; display: flex; height: 100%; align-items: center;}
.hero-content p{font-size: 18px;}


/*---------------------- Hero banner end ----------------------*/



/*---------------------- Nav start ----------------------*/
.navbar-nav{align-items: center; line-height: normal;}
.nav-item>a { color: rgb(var(--color-dark)); font-size: 16px; font-weight: 600;}
.nav-item>a:hover, .nav-link.active, .nav-link:focus, .nav-link:hover { color: rgb(var(--color-blue));}
.nav-item.dropdown .nav-link i{font-size: 24px;}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(27, 122, 186, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.dropdown-menu {
	border: 0;
    border-radius: 0;
	font-size: 14px;
}
.dropdown-item{padding-block: 8px; font-size: 14px !important; font-weight: 400 !important;}
.dropdown-item:focus, .dropdown-item:hover {
    color: rgb(var(--color-blue));
	background-color:transparent;
/*     background-color: rgb(var(--color-blue)/5%); */
}
.dropdown-toggle{display: flex; align-items: center; gap: 5px;}
.dropdown-toggle::after{    font-family: "Font Awesome 6 Free"; content: "\f078"; border: 0; font-size: .8em; margin-left: auto;}


/*
.hamburger{border: 0; padding: 0;}
.hamburger .line { width: 34px; height: 1px; background-color: rgb(var(--color-dark)); display: block; margin: 10px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hamburger:hover { cursor: pointer; }
.hamburger.is-active .line:nth-child(2) { opacity: 0; }
.hamburger.is-active .line:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(45deg);
  -ms-transform: translateY(10px) rotate(45deg);
  -o-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}
.hamburger.is-active .line:nth-child(3) {
  -webkit-transform: translateY(-12px) rotate(-45deg);
  -ms-transform: translateY(-12px) rotate(-45deg);
  -o-transform: translateY(-12px) rotate(-45deg);
  transform: translateY(-12px) rotate(-45deg);
}
*/

/*---------------------- Nav end ----------------------*/

.social{list-style: none; margin: 0; padding: 0; justify-content: end;}
.social a{font-size: 18px; color: rgb(var(--color-darkgrey));}
.social a:hover{font-size: 18px; color: rgb(var(--color-blue));}
.social a+a{margin-left: 10px;}

/*---------------------- Input css start ----------------------*/

.btn-custom a{
    background: transparent!important;
    padding-inline: 0;
}
.btn-custom .elementor-button-icon{
    transform: rotate(45deg);
}

.btn { font-size: 14px; padding-block: 8.5px; min-width: 150px; isolation: isolate;}

.btn-primary { background: rgb(var(--color-blue)); border: rgb(var(--color-blue));}
.btn-primary:hover{ background: rgb(var(--color-green));}

.btn-info{ background: rgb(var(--color-lightblue)); border: rgb(var(--color-lightblue)); color:rgb(var(--color-white)); }
.btn-info:hover { background: rgb(var(--color-dark)); color:rgb(var(--color-white));}

.btn-lg{padding: 14px 22px; font-size: 24px; line-height: normal;}

.btn-group .btn{min-width: inherit;}

.form-control, .form-select{ border-radius: 0; color: rgb(var(--color-dark));}
.form-control:focus, .form-select:focus{ box-shadow:none;}
.form-select:focus{border-color: inherit;}
label{ color: rgb(var(--color-dark)); line-height: normal; }

.input-group-lg>.btn, .input-group-lg>.form-control, .input-group-lg>.form-select, .input-group-lg>.input-group-text, .form-select-lg{
    padding: 0.8rem 1rem;
}

.input-group-custom{background: #FFFFFF;}
.input-group-custom .btn, .input-group-custom input.form-control{border: 0; background: transparent;}
.input-group-custom .btn{min-width: inherit;}
.input-group-custom.rounded-pill>*{border-radius: var(--bs-border-radius-pill);}

.form-select-outline{background-color: transparent; border-color: rgb(var(--color-dark));}

.form-floating>.form-control-plaintext~label, 
.form-floating>.form-control:focus~label, 
.form-floating>.form-control:not(:placeholder-shown)~label, 
.form-floating>.form-select~label {
	color: rgb(var(--color-blue));
}
.form-floating{margin-bottom: 20px;}

.invalid-feedback{line-height: normal;}
.form-control.is-valid, .was-validated .form-control:valid, .form-control.is-invalid, .was-validated .form-control:invalid{background-size: 12px;}

.input-group-text{    
	border-radius: 0;
    background: #fff;
    border-left: 0;
    position: relative;
    color: rgb(var(--color-dark)/50%);
    align-items: self-start;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.form-control::placeholder {
  color: rgb(var(--color-darkgrey)/50%);
  opacity: 1; /* Firefox */
}

.form-control::-ms-input-placeholder { /* Edge 12-18 */
  color: rgb(var(--color-darkgrey)/50%);
}
textarea{resize: none;}

/*---------------------- Input css end ----------------------*/

/*------Checkbox and rdio style start ------*/
input[type=checkbox] {
  background: url("images/checkbox-grey.svg");
  background-size: contain;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=checkbox]:focus {
  outline: none;
}
input[type=checkbox]:checked {
	background: url("images/checkbox-checked.svg");
    background-size: contain;
    border: 0;
}
input[type=checkbox][disabled] {
  opacity: .5;
}



input[type=radio] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    -moz-appearance: none;
       appearance: none;
    /* For iOS < 15 */
    background-color: var(--form-background);
    /* Not removed via appearance */

    color: rgb(var(--color-white));

    border: 1px solid rgb(var(--color-dark) / 20%);
    border-radius: 50%;
    position: relative;
}

input[type=radio]:checked::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: rgb(var(--color-blue));
}

input[type=radio]:focus {
  outline: none;
  outline-offset: 0;
}

/*------Checkbox and rdio style end ------*/


footer{
    font-size:14px;
    color: rgb(var(--color-grey));
    background:rgb(var(--color-dark));
    isolation: isolate;
    position: relative;
}
footer:before{
    content: "";
    background:url("images/building-art.png") no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
    max-width: 550px;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .3;
}
footer h6{text-transform: uppercase; font-weight: 400; color: rgb(var(--color-light));}
.footer-link{ list-style: none; margin: 20px 0; padding: 0;;}
.footer-link li{margin-bottom: 10px;}
.footer-link li a{color: rgb(var(--color-grey));}
.footer-link li a:hover{color: rgb(var(--color-blue));}





/*---------------------- Responsive start ----------------------*/
@media (min-width: 768px) {
.list-card-icon li:nth-child(even){margin-left: 60px;}
.list-card-icon li:nth-child(odd){margin-right: 60px;}
	.dropdown .dropdown-menu{
		right: 0 !important;
        left: inherit !important;
	}
	.dropdown-toggle::after{display:none;}
	header.shrink {
    margin-top: -67px;
}
}
@media (min-width: 992px) {
	.navbar .navbar-nav>li>a{padding-bottom: 5px; padding-top: 5px;}
	.dropdown .dropdown-menu{
		visibility: hidden;
		opacity: 0;
		display: none;
		transform: translateY(10px);
		transition: .5s ease all;
		box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
	}
	.dropdown .dropdown-menu li{color: inherit!important;}
	.dropdown:hover .dropdown-menu {
		display: block;
		visibility: visible;
		opacity: 1;
		transform: translateY(0px);
		transition: .5s ease all;
	}
	
}
@media (min-width: 1199px) {
	.container { max-width: 1230px; }
}


/*`xxl` applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {}


/*`xl` applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {}


/*`lg` applies to medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {}

/*`md` applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    .top-bar{    display: flex; align-items: center; justify-content: space-between;}
    .dropdown .dropdown-menu{margin: 0; padding: 0;}
    .dropdown .dropdown-menu a.dropdown-item{padding-inline: 0;}
	.nav { gap: 0;margin-top: 10px; }
	.nav-item { width: 100%; border-top: 1px solid rgb(var(--color-dark) / 20%); }
	.nav-item a{padding-block: 10px;}
    .nav-item.dropdown .nav-link i{display: none;}
    .nav-item.dropdown .nav-link:before{content: "More"; color: rgb(var(--color-blue))}
}

/*`sm` applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .container, .container-fluid{width: 95%;}
    .list-card-icon li{flex-direction: column;}
    .hero-content .btn, .btn-lg{font-size: 20px;}
    footer:before{
        background-size: 200%;
        background-position: bottom left;
    }
}
/*--------- Responsive end ---------*/


.custom-social-icons{
	    flex-direction: column;
    justify-content: center;
    align-items: end;
	    gap: 6px;
}