/*!
	Theme Name: ShailV
	Author: Shailendra Singh
	Description: we create digital solutions that elevate your brand and engage your audience.
	Version: 1.0.0
	Tested up to: 5.4
	Requires PHP: 5.6
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --theme_color: #4fbd66;
    --blue_color: #3d689c;
    --text_color: #898989;
    --heading_color: #2d2e2e;
    --border-color: #e5e5e5;
    --white_color: #ffffff;
    --orange_color: #fe763a;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
}
p,h1,h2,h3,h4,h5,h6,ul,li,a{
    margin: 0;
    padding:0; 
}
p{
    font-size: 16px;
    color: var(--text_color);
    line-height: 28px;
}
a {
    text-decoration:none;
    outline:none;
    color:var(--theme_color);
}
a:hover{
    color: var(--text_color);  
}
img {
    vertical-align:top;
    max-width:100%;
    height:auto;
    border:none;
}
iframe {
    max-width:100%;
    border:none;
}
.fl {
    float:left;
}
.fr {
    float:right;
}
.clr, 
.cl, 
.clear {
    clear:both;
}
.clearfix:after {
    clear:both;
    display:block;
    visibility:hidden;
    content:"";
}
textarea {
    resize:none;
    min-height:82px;
    line-height:normal;
    padding:9px;
    width:100%;
    font-family: "Poppins", sans-serif;
}
input:focus, 
textarea:focus, 
select:focus, 
button:focus {
    outline:none;
}
.wrapper {
    margin:0 auto;
    padding:0 50px;
    max-width:1500px;/*1400px*/
}

.btn{display: inline-block;font-weight: 500;color: var(--white_color);background: var(--theme_color);padding: 14px 30px;border-radius: 15px 50px 50px 40px;text-transform: uppercase;transition: all ease 0.4s;border: 0;font-family: "Poppins", sans-serif;font-size: 16px;letter-spacing: 0.03em;cursor: pointer;}
.btn:hover{background: var(--blue_color);color: var(--white_color);}
.btn_blue{background: var(--blue_color);}
.btn_blue:hover{background: var(--theme_color);color: var(--white_color);}
.btn_gray{color: var(--heading_color);background: rgb(220 227 242);}
.btn_orange{background: var(--orange_color);}
.padd_100{padding: 80px 0px;display: block;}
.title{text-align: center;padding-bottom: 40px;display: block;width: 55%;margin: auto;}
.title h2{font-size: 40px;margin-bottom: 20px;padding-bottom: 20px;position: relative;}
.title h2 span{color: var(--theme_color);}
.title h2::after{position: absolute;content: '';background: var(--orange_color);width: 30px;height: 2px;left: 0;bottom: 0px;right: 0;margin: auto;}

/* Header Css */
.header_top {background: var(--blue_color);padding: 10px 0px;}
.header_top_otr {padding: 0 50px;max-width: 1800px;margin: 0 auto;}
.header_top_inr ul{display: flex;justify-content: space-between;align-items: center;margin: 0;padding: 0;}
.header_top_inr ul li {list-style: none;font-weight: 300;}
.header_top_inr ul li img{width:20px;filter: brightness(0) invert(1);vertical-align: middle;}
.header_top_inr ul li a{display: inline-block;margin-left: 5px;color: var(--white_color);transition: all ease 0.4s;vertical-align: middle;text-decoration: none;}

.header_bottom{padding: 18px 0px;}
.header_bottom_inr{display: flex;justify-content: space-between;align-items: center;}
.header_left a{display: inline-block;max-width: 280px;}
.header_right_inr ul{margin: 0;padding: 0;}
.header_right_inr ul li{list-style: none;display: inline-block;text-transform: uppercase;margin: 0 25px;font-weight: 500;}
.header_right_inr ul li:last-child{margin-right: 0;}
.header_right_inr ul li a{color: var(--heading_color);transition: all ease 0.30s 0s;text-decoration: none;}
.header_right_inr ul li:hover a{color: var(--theme_color);}

/* Banner Css */
.banner_inr {position: relative;}
.banner_img img {width: 100%;max-height: 620px;object-fit: cover;}
.banner_txt {position: absolute;top: 50%;width: 100%;transform: translateY(-50%);z-index: 1;}
.banner_txt_inr {width: 56%;}
.banner_txt_inr h1{font-size: 70px;color: var(--white_color);font-weight: 600;line-height: 78px;padding-bottom: 20px;}
.banner_txt_inr h1 span{color: var(--theme_color);}
.banner_txt_inr p{font-size: 22px;color: var(--white_color);font-weight: 400;line-height: 32px;padding-bottom: 20px;}
.banner_txt_inr .a_btn{padding-top: 20px;}
.banner_txt_inr .a_btn a{margin-right: 20px;}
.experties_inr{display: flex;flex-wrap: wrap;margin: 0 -15px;}
.experties_col{width: 33.33%;padding:15px}
.experties_item {padding: 30px;border: 1px solid #e5e5e5;border-radius: 20px;height: 100%;box-shadow: 0 0px 48px rgba(0, 0, 0, 0.10);}
.experties_txt h3 {font-weight: 600;font-size: 24px;line-height: 30px;color: var(--heading_color);padding-bottom: 5px;}
.text-sm{color: var(--blue_color);margin-bottom: 15px;font-size: 14px;}
.experties_img {width: 60px;height:60px;background: rgb(79 189 102 / 10%);border-radius: 17px;margin-bottom: 20px;display: inline-flex;justify-content: center;align-items: center;}
.experties_img img{width: 36px;height: auto;}
.experties_col:nth-child(even) .text-sm{color: var(--theme_color);}

.achievements{background: rgb(17 24 39) url(./images/pricing_bg.webp) no-repeat;background-size: 100%;background-position: bottom;}
.achievment_otr, .achievment_left_inr{display: flex;align-items: center;}
.achievment_left, .achievment_right{width: 50%;}
.achievment_left_inr{gap: 20px;}
.col50{width: 50%;display: flex;flex-direction: column;gap: 20px;}
.stat-box {padding: 40px 30px 40px 30px;background-color: #E1F8FF;border-radius: 20px;text-align: center;}
.stat-yellow{background: #FFFFCA;}
.stat-green{background: #9bffb0;}
.stat-box img{width: 80px;margin-bottom: 25px;}
.stat-box h2{color: #0B1F22;font-size: 22px;font-weight: 600;}
.stat-box p{color: #0B1F22;}
.achievment_right_inr{padding-left: 80px;}
.achievment_right_inr p{padding-bottom: 25px;}
.achievment_right_inr .title{width: 100%;text-align: left;}
.achievment_right_inr .title h2::after{right: inherit;}
.achievment_right_inr .title h2{line-height: 52px;}

/* Filter buttons */
.filter-buttons {display: flex;justify-content: center;margin: 40px 0;}
.filter-group {display: flex;gap: 8px;background: rgb(17 24 39);padding: 6px;border-radius: 999px;}
.filter-group button {padding: 10px 24px;border-radius: 999px;border: none;font-weight: 500;cursor: pointer;font-size: 15px;color: #9ea6ac;background: transparent;transition: all 0.3s ease;font-family: "Poppins", sans-serif;}
.filter-group button:hover {color: var(--theme_color);}
.filter-group button.active {background: var(--theme_color);color: #fff;}
.portfolio .card {background: #fff;border-radius: 20px;box-shadow: 0 0px 30px rgba(0, 0, 0, 0.15);overflow: hidden;transition: box-shadow 0.3s ease;cursor: pointer;padding: 0;}
.portfolio .card:hover {box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);}
.profolio_img {height: 260px;overflow: hidden;}
.portfolio .card img {width: 100%;height: auto;display: block;transition: transform 0.3s ease;}
.portfolio .card:hover img {transform: scale(1.05);}
.card-content {padding: 24px;}
.card-content h3 {font-size: 20px;font-weight: bold;margin-bottom: 8px;}
.card-content p {margin-bottom: 16px;}
.view-project {display: flex;align-items: center;color: var(--orange_color);font-weight: 600;}

.text-center{text-align: center;}
.grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;justify-content: center;}
.card {background: #FFFFFF0D;border-radius: 20px;padding: 32px;transition: box-shadow 0.3s ease;position: relative;border: 1px solid #7F7F7F2B;}
.card h3 {font-size: 22px;margin-bottom: 16px;font-weight: 500;}
.price {font-size: 32px;line-height: 38px;font-weight: bold;}
.price.primary {color:  var(--orange_color);}
.card p {margin-bottom: 24px;}
.card ul {list-style: none;padding: 0;margin-bottom: 24px;}
.card ul li {margin-bottom: 12px;padding-left: 25px;background: url(./images/check.svg) no-repeat;background-size: 15px;background-position: 0;color: #9ea6ac;}
.popular {border: 1px solid rgb(254 118 58 / 80%);box-shadow: 0 0px 20px rgba(0, 0, 0, 0.10);}
.badge {position: absolute;top: -16px;left: 50%;transform: translateX(-50%);background: var(--orange_color);color: #fff;padding: 6px 16px;border-radius: 30px;font-size: 13px;font-weight: 500;}
.pricing .btn{width: 100%;}
.pricing{background: rgb(17 24 39) url(./images/pricing_bg.webp) no-repeat;background-size: 100%;background-position: bottom;}
.text-white{color: var(--white_color);}
.text-mute{color: #9ea6ac;}

.contact {background: #f5faff;}
.contact_otr{max-width: 900px;margin: auto;}
.contact_otr .form_inr{margin: 0 -15px;}
.col2 {width: 50%;display: inline-block;vertical-align: top;padding: 0 15px;margin-right: -3px;}
.col1{padding: 0 15px;}
.form_group{margin-bottom: 25px;}
.form_group input {height: 50px;border: solid 1px #e5e5e5;border-radius: 10px;width: 100%;-webkit-appearance: none;font-size: 16px;padding: 10px 20px;color: #898989;background: var(--white_color);}
.form_group label {color: #3b3b3b;display: inline-block;padding-bottom: 8px;font-weight: 500;}
.form_group textarea{border: solid 1px #e5e5e5;border-radius: 10px;font-size: 16px;    padding: 10px 20px;color: #898989;background: var(--white_color);}
.form_group input::placeholder, .form_group textarea::placeholder{color: #898989;}
.submit_btn{text-align: center;position: relative;}
.form_group input:focus, .form_group textarea:focus{box-shadow: 0px 0px 2px var(--orange_color);background: var(--white_color);border:solid 1px var(--orange_color)}
.wpcf7-response-output {text-align: center;}
.form_group input.wpcf7-not-valid{border-color: #f00;}
.wpcf7-not-valid-tip{display: none;}
.wpcf7-spinner {margin: 0px 15px;position: absolute;margin-top: 17px;}

footer {background: rgb(17 24 39 / 1);}
.ft_top{padding: 40px 0px 30px;}
.ft_top_inr {display: flex;flex-wrap: wrap;margin: 0 -15px;}
.ft_col{width: 25%;padding:0 15px;}
.logo a {display: inline-block;}
.logo a img {max-width: 100px;}
.logo p{font-size: 15px;line-height: normal;max-width: 80%;margin-top: 13px;color: rgb(156 163 175);margin-bottom: 0;}
.ft_col_inr h3{font-weight: 500;color: var(--white_color);margin-bottom: 15px;}
.ft_col_inr ul{padding: 0;margin: 0;}
.ft_col_inr ul li{list-style: none;padding: 5px 0px;color: rgb(156 163 175);    font-size: 15px;}
.ft_col_inr ul li a{color: rgb(156 163 175);transition: all 0.3s;text-decoration: none;}
.ft_col_inr ul li a:hover{color: var(--white_color);}
.contact_info ul li{position: relative;padding-left: 30px;padding-bottom: 15px;}
.contact_info ul li.call{background: url(./images/call1.svg) no-repeat;   background-size: 18px;background-position: 0 5px;}
.contact_info ul li.mail{background: url(./images/mail1.svg) no-repeat;   background-size: 20px;background-position: 0 4px;}
.contact_info ul li.loca{background: url(./images/loca.svg) no-repeat;   background-size: 15px;background-position: 0 7px;}
.ft_bottom{display: flex;align-items: center;justify-content: space-between;   border-top: solid 1px rgb(31 41 55);padding: 12px 0;}
.ft_bottom p{font-size: 15px;color: rgb(156 163 175);margin-bottom: 0;}
.ft_bottom_right a {display: inline-block;padding-left: 24px;color: rgb(156 163 175);font-size: 15px;text-decoration: none;}
.ft_bottom_right a:hover{color: var(--white_color);}
.social_icon {display: flex;flex-wrap: wrap;gap: 15px;margin-top: 18px;}
.social_icon a {display: inline-block;background: rgb(31 41 55);border-radius: 12px;height: 40px;width: 40px;line-height: 45px;text-align: center;color: #fff;transition: all 0.4s;}
.social_icon a:hover{background: var(--theme_color);}

form.btn_gray{border-radius: 15px 50px 50px 40px;transition: all ease 0.4s;}
form.btn_gray .razorpay-payment-button.svelte-ohbfj8 {width: 100%;position: relative;display: inline-flex;}
form.btn_gray .razorpay-payment-button.svelte-ohbfj8 a{opacity: 0;width: 100%;text-transform: uppercase;transition: all ease 0.4s;border: 0;height: 59px;position: relative;z-index: 1;}
form.btn_gray .razorpay-payment-button.svelte-ohbfj8::after{position: absolute;content: 'Get with Basic';font-size: 16px;letter-spacing: 0.03em;text-transform: uppercase;font-weight: 500;top: 17px;left: 0;right: 0;}
form.btn_gray:hover{background: var(--blue_color);}
form.btn_gray:hover .razorpay-payment-button.svelte-ohbfj8::after{color: var(--white_color);}

#pricing-form-popup {position: fixed;top: 0; left: 0; right: 0; bottom: 0;background: rgba(0,0,0,0.7);display: none; align-items: center; justify-content: center;z-index: 9999;}
#pricing-form-popup .popup-content {background: #fff;padding: 30px;border-radius: 10px;max-width: 800px;width: 100%;position: relative;}
#pricing-form-popup .close-popup {position: absolute;top: 10px; right: 15px;font-size: 24px;color: var(--white_color);width: 40px;height: 40px;text-align: center;border-radius: 6px 18px 20px 17px;background: var(--orange_color);line-height: 40px;}
h4.modal_title {text-align: center;padding-bottom: 30px;font-size: 28px;}

/* Blog Detail Page CSS */
.inner_banner{background: #001733;padding: 40px 0px;}
.inner_banner_text h1 {font-weight: 600;color: var(--white_color);text-align: center;}
.post-title {font-weight: 600;margin-bottom: 20px;}
.post-title a{text-decoration: none;color: var(--heading_color);}
.card-content h3 a{color: var(--heading_color);}
h1.page-title{margin-bottom: 15px;font-size: 34px;color: var(--heading_color);}

body.blog{font-family: "Poppins", sans-serif;}
body.blog .social_icon a{line-height: 40px;}

.blog-detail-title {font-size: 36px;font-weight: bold;margin-bottom: 10px;color: var(--heading_color);}
.blog-detail-meta {font-size: 14px;color: #888;margin-bottom: 20px;}
.blog-detail-meta span {margin-right: 15px;}
.blog-detail-featured img {width: 100%;height: auto;margin-bottom: 25px;border-radius: 8px;}
.blog-detail-content ul li{margin-bottom: 12px;padding-left: 25px;background: url(./images/check.svg) no-repeat;background-size: 15px;background-position: 0;list-style: none;color: var(--text_color);}
.blog-detail-content ol{padding-left: 18px;}
.blog-detail-content ol li{margin-bottom: 12px;color: var(--text_color);}
.blog-detail-content p {margin-bottom: 20px;}
.blog-detail-content h2, .blog-detail-content h3, .blog-detail-content h4 {margin-top: 30px;margin-bottom: 15px;color: #222;}
strong{color: var(--heading_color);}